/* rd_signin.css - the sign-in page (templates/login.html: GET / signed out), on top of rd_login.css, which still
 * draws the pieces this page shares with join.html (the brand lockup, the error alert, the "How Bidbrain.ai works"
 * sheet) and hides the premium layer's ambient orbs.
 *
 * PASSWORDLESS, ONE DARK PAGE (Christian, 2026-11-03; the approved "Log in to Bidbrain.ai" mock): a near-black
 * ground and two rounded panels with a 20px gutter. LEFT, .rd-si-hero (7fr): a navy radial light, the brain mark
 * huge and faint off the bottom-right corner, the lockup on a light tile with "How Bidbrain.ai works" opposite, and
 * one headline + sub at the foot. RIGHT, .rd-si-side (5fr): the title, Google and Microsoft side by side, "or
 * continue with email", the work email and "Send sign-in link", the invite line, and a foot. After a link is sent
 * the same panel shows "Check your email" (.rd-si-sent). The page pins its own colours (login.html carries
 * data-rd-theme="dark" + data-rd-theme-lock); every value is a --rd-si-* token in rd_tokens.css ("@page: the
 * passwordless sign-in").
 *
 * WIDTHS: >= 960 the two panels side by side. Under 960 the hero folds into a compact header (lockup, link,
 * a smaller headline) above the form panel. Under 600 the gutters are 16px and the headline drops to the heading
 * step. The two provider tiles stack whenever the form column is under 400px (a container query on .rd-si-body:
 * below that "Continue with Microsoft" no longer fits its half), and one configured provider spans the row.
 *
 * MOTION: one staggered rise (rdSiRise) and the mark's slow settle (rdSiMark) on load; hover lifts, press shrinks,
 * focus rings. All of it sits under prefers-reduced-motion:no-preference, so a reduced-motion visitor gets none.
 *
 * Type stays on the six steps: the 68px headline is the display step (40) zoomed 1.7, the 32px title the heading
 * step (28) zoomed 8/7 and the 18px sub the body step (16) zoomed 1.125. `zoom` reflows (unlike `scale`), so each
 * still sits on its own line box.
 *
 * 🔴 Every rule starts with `.rd` / `html.rd`; no literal size / weight / leading / tracking / colour and no
 *   off-grid spacing (tests/test_rd_tokens.py) - the mock's 20 / 40 / 44 / 28 / 10 px are sums of grid steps.
 * 🔴 Class names avoid a bare `card`, `panel`, `btn`, `msbtn`, `exlink`, `primary`: _premium.html lifts, sheens or
 *   spotlights those by name.
 */

/* ============================================================================ the ground and the two panels */
html.rd.rd-si-html{background:var(--rd-si-ground);color-scheme:dark}
.rd .rd-si-page{margin:0;min-height:100vh;min-height:100dvh;background:var(--rd-si-ground)}
.rd .rd-si{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,7fr) minmax(460px,5fr);
  gap:calc(var(--rd-sp-4) + var(--rd-sp-1));min-height:100vh;min-height:100dvh;
  padding:calc(var(--rd-sp-4) + var(--rd-sp-1));overflow-x:clip;
  font-family:var(--rd-font-sans);font-size:var(--rd-fs-body-sm);line-height:var(--rd-lh-body-sm);
  letter-spacing:var(--rd-tr-body-sm);font-weight:var(--rd-fw-regular);color:var(--rd-si-ink-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.rd .rd-si *{box-sizing:border-box}

/* ============================================================================ left: the hero */
.rd .rd-si-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  justify-content:space-between;gap:var(--rd-sp-12);min-width:0;
  padding:calc(var(--rd-sp-8) + var(--rd-sp-2)) calc(var(--rd-sp-12) - var(--rd-sp-1));
  border-radius:var(--rd-si-r-panel);background:var(--rd-si-hero-bg);box-shadow:var(--rd-si-hero-rim)}
/* the mark, huge and faint, cropped by the panel's bottom-right corner (decoration: aria-hidden in the markup) */
.rd .rd-si-art{position:absolute;right:-150px;bottom:-170px;z-index:-1;width:620px;height:620px;
  color:var(--rd-si-hero-mark);pointer-events:none}

.rd .rd-si-top{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--rd-sp-2) var(--rd-sp-4)}
.rd .rd-si .rd-si-brand{gap:calc(var(--rd-sp-2) + 2px);color:var(--rd-si-ink)}
/* the brain bare beside the wordmark, no plate (as the app's sidebar draws it, 2026-11-04): the panel's
   ink, sized to the wordmark's "B" */
.rd .rd-si-tile{flex:none;display:grid;place-items:center;color:var(--rd-si-ink)}
.rd .rd-si-brand .rd-si-tile .rd-sg-mark{width:24px;height:24px;fill:currentColor}
.rd .rd-si-brand .rd-sg-word{font-size:var(--rd-fs-title);line-height:var(--rd-lh-title);letter-spacing:var(--rd-tr-heading);
  font-weight:var(--rd-fw-semi);white-space:nowrap}
.rd .rd-si-tld{color:var(--rd-si-sky)}

/* "How Bidbrain.ai works": a quiet link-like button, opposite the lockup; it opens the sheet */
.rd .rd-si-how{display:inline-flex;align-items:center;min-height:var(--rd-h-lg);margin:0 calc(var(--rd-sp-3) * -1) 0 0;
  padding:0 var(--rd-sp-3);border:0;border-radius:var(--rd-r-full);background:transparent;color:var(--rd-si-link);
  cursor:pointer;font-family:var(--rd-font-sans);font-size:var(--rd-fs-body-sm);line-height:var(--rd-lh-body-sm);
  letter-spacing:var(--rd-tr-body-sm);font-weight:var(--rd-fw-medium);text-decoration:none}
@media (hover:hover){.rd .rd-si-how:hover{color:var(--rd-si-ink)}}
.rd .rd-si-how:focus-visible{outline:2px solid var(--rd-si-sky);outline-offset:2px}

.rd .rd-si-copy{position:relative;display:flex;flex-direction:column;gap:calc(var(--rd-sp-6) - 2px);max-width:560px}
.rd .rd-si-lead{margin:0;padding-bottom:2px;color:var(--rd-si-ink);font-size:var(--rd-fs-display);
  line-height:var(--rd-lh-si-display);letter-spacing:var(--rd-tr-si-display);font-weight:var(--rd-fw-semi);zoom:1.7}
.rd .rd-si-lead em{font-style:italic;font-weight:var(--rd-fw-medium);color:var(--rd-si-sky)}
.rd .rd-si-lede{margin:0;max-width:392px;color:var(--rd-si-ink-2);font-size:var(--rd-fs-body);line-height:var(--rd-lh-si-lede);
  letter-spacing:var(--rd-tr-body);text-wrap:pretty;zoom:1.125}

/* ============================================================================ right: the sign-in */
.rd .rd-si-side{display:flex;flex-direction:column;gap:var(--rd-sp-8);min-width:0;
  padding:calc(var(--rd-sp-8) + var(--rd-sp-2)) var(--rd-sp-12) var(--rd-sp-8);
  border-radius:var(--rd-si-r-panel);background:var(--rd-si-panel);box-shadow:var(--rd-si-panel-rim)}
.rd .rd-si-body{display:flex;flex-direction:column;gap:calc(var(--rd-sp-6) + var(--rd-sp-1));width:100%;max-width:440px;
  margin:auto;container-type:inline-size}

.rd .rd-si-head{display:flex;flex-direction:column;gap:calc(var(--rd-sp-2) + 2px)}
.rd .rd-si-title{margin:0;color:var(--rd-si-ink);font-size:var(--rd-fs-heading);line-height:var(--rd-lh-si-title);
  letter-spacing:var(--rd-tr-si-title);font-weight:var(--rd-fw-semi);text-wrap:balance;zoom:1.1428}
.rd .rd-si-title:focus,.rd .rd-si-title:focus-visible{outline:none}
.rd .rd-si-sub{margin:0;color:var(--rd-si-ink-2);font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);
  letter-spacing:var(--rd-tr-body);text-wrap:pretty}
.rd .rd-si-sub strong{color:var(--rd-si-ink);font-weight:var(--rd-fw-semi);overflow-wrap:anywhere}
/* the server's error (rd_login.css draws it), in this page's control radius */
.rd .rd-si .rd-lg-err:not(:empty){border-radius:var(--rd-si-r-control)}

/* --- the providers: two equal light TILES side by side, Google then Microsoft (2026-11-03, Christian: the approved
   mock's tiles). Both are our own <button>s now - Google's rendered GIS button could not be restyled, so the page
   reaches Google's popup through the GIS OAuth2 token client instead (login.html; main.auth_google_token). One
   configured provider spans the row. The tiles stack only when a label could no longer fit beside the other.
   Measured in Geist: the Microsoft logo, gap and "Continue with Microsoft" take 185px, so with 4px of side padding
   a tile needs 193 and the pair 396 - the container query below turns the row into a column under 400px. The form
   column is 412px at a 1280px window (two 201px tiles) and 440px from 1440 (two 215s), so both sit side by side on
   a laptop; a wider fallback face ellipsises rather than spilling. */
.rd .rd-si-idps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:calc(var(--rd-sp-2) + 2px)}
@container (max-width:399px){.rd .rd-si-idps{grid-auto-flow:row}}
.rd .rd-si-idp{display:flex;align-items:center;justify-content:center;gap:calc(var(--rd-sp-2) + 2px);
  width:100%;min-width:0;height:var(--rd-si-h);margin:0;padding:0 var(--rd-sp-1);border:0;
  border-radius:var(--rd-si-r-control);background:var(--rd-si-idp);color:var(--rd-si-idp-ink);cursor:pointer;
  white-space:nowrap;font-family:var(--rd-font-sans);font-size:var(--rd-fs-body-sm);line-height:var(--rd-lh-body-sm);
  letter-spacing:var(--rd-tr-body-sm);font-weight:var(--rd-fw-medium)}
/* the logos stay exactly as each brand ships them (Google's guidelines forbid altering the G) */
.rd .rd-si-idp svg{display:block;flex:none;width:var(--rd-si-idp-icon);height:var(--rd-si-idp-icon)}
.rd .rd-si-g-red{fill:var(--rd-google-red)}
.rd .rd-si-g-blue{fill:var(--rd-google-blue)}
.rd .rd-si-g-yellow{fill:var(--rd-google-yellow)}
.rd .rd-si-g-green{fill:var(--rd-google-green)}
.rd .rd-si-idp span{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* the ring sits OUTSIDE the light tile, in the page's sky blue, so it reads on the dark panel */
.rd .rd-si-idp:focus-visible{outline:2px solid var(--rd-si-sky);outline-offset:2px}
.rd .rd-si-idp[aria-busy="true"]{cursor:progress}

.rd .rd-si-or{display:flex;align-items:center;gap:calc(var(--rd-sp-3) + 2px);margin:0;color:var(--rd-si-ink-3);
  font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption)}
.rd .rd-si-or::before,.rd .rd-si-or::after{content:"";flex:1;height:1px;background:var(--rd-si-rule)}

/* --- the email form */
.rd .rd-si-form{display:flex;flex-direction:column;gap:calc(var(--rd-sp-2) + 2px);margin:0}
.rd .rd-si-label{color:var(--rd-si-ink-label);font-size:var(--rd-fs-body-sm);line-height:var(--rd-lh-body-sm);
  letter-spacing:var(--rd-tr-body-sm);font-weight:var(--rd-fw-medium)}
/* 16px text at every width: iOS zooms a smaller field on focus */
.rd .rd-si-input{display:block;width:100%;height:var(--rd-si-h);margin:0;padding:0 var(--rd-sp-4);appearance:none;outline:none;
  border:var(--rd-bw) solid var(--rd-si-field-line);border-radius:var(--rd-si-r-control);background:var(--rd-si-field);
  color:var(--rd-si-ink);caret-color:var(--rd-si-sky);font-family:var(--rd-font-sans);font-size:var(--rd-fs-body);
  line-height:var(--rd-lh-body);letter-spacing:var(--rd-tr-body);font-weight:var(--rd-fw-regular)}
.rd .rd-si-input::placeholder{color:var(--rd-si-ink-4);opacity:1}
.rd .rd-si-input:focus,.rd .rd-si-input:focus-visible{outline:none;border-color:var(--rd-si-field-focus);box-shadow:var(--rd-si-field-ring)}
.rd .rd-si-form:has(.err:not(:empty)) .rd-si-input:not(:focus),.rd .rd-si-input[aria-invalid="true"]{border-color:var(--rd-danger)}
.rd .rd-si-input[aria-invalid="true"]:focus{box-shadow:var(--rd-si-danger-ring)}
.rd .rd-si-input:-webkit-autofill{-webkit-text-fill-color:var(--rd-si-ink);caret-color:var(--rd-si-sky);
  box-shadow:inset 0 0 0 100px var(--rd-si-field)}
.rd .rd-si-input:-webkit-autofill:focus{box-shadow:inset 0 0 0 100px var(--rd-si-field),var(--rd-si-field-ring)}

/* the page's one primary action */
.rd .rd-si-cta{display:flex;align-items:center;justify-content:center;gap:calc(var(--rd-sp-2) + 2px);width:100%;
  height:var(--rd-si-h);margin:calc(var(--rd-sp-1) + 2px) 0 0;padding:0 var(--rd-sp-4);border:0;
  border-radius:var(--rd-si-r-control);background:var(--rd-si-cta);color:var(--rd-si-cta-ink);box-shadow:var(--rd-si-cta-shine);
  cursor:pointer;text-decoration:none;font-family:var(--rd-font-sans);font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);
  letter-spacing:var(--rd-tr-body);font-weight:var(--rd-fw-semi)}
.rd .rd-si-cta-arrow{font-weight:var(--rd-fw-regular)}
.rd .rd-si-cta:focus-visible{outline:2px solid var(--rd-si-sky);outline-offset:2px}
.rd .rd-si-cta:disabled{opacity:.72;cursor:progress}
/* sent: a small ring turns where the arrow was until the next page */
.rd .rd-si-cta[aria-busy="true"] .rd-si-cta-arrow{display:none}
.rd .rd-si-cta[aria-busy="true"]::after{content:"";flex:none;width:var(--rd-icon-sm);height:var(--rd-icon-sm);
  border-radius:var(--rd-r-full);border:2px solid currentColor;border-right-color:transparent;animation:rdSiSpin .7s linear infinite}
/* the quiet twin ("Send another link") */
.rd .rd-si-cta.is-quiet{margin:0;border:var(--rd-bw) solid var(--rd-si-field-line);background:transparent;color:var(--rd-si-ink);
  box-shadow:none}

/* --- the invite line, and Ask to join under it (small, but a full 44px target) */
.rd .rd-si-notes{display:flex;flex-direction:column;align-items:flex-start}
.rd .rd-si-note{margin:0;color:var(--rd-si-ink-3);font-size:var(--rd-fs-body-sm);line-height:var(--rd-lh-body-sm);
  letter-spacing:var(--rd-tr-body-sm);text-wrap:pretty}
.rd .rd-si-join{display:inline-flex;align-items:center;min-height:var(--rd-h-lg);color:var(--rd-si-sky);text-decoration:none;
  font-size:var(--rd-fs-body-sm);line-height:var(--rd-lh-body-sm);letter-spacing:var(--rd-tr-body-sm);font-weight:var(--rd-fw-medium);
  border-radius:var(--rd-r-chip)}
@media (hover:hover){.rd .rd-si-join:hover,.rd .rd-si-back:hover{color:var(--rd-si-sky-hover);text-decoration:underline;
  text-underline-offset:3px}}
.rd .rd-si-join:focus-visible,.rd .rd-si-back:focus-visible{outline:2px solid var(--rd-si-sky);outline-offset:2px}

/* --- "Check your email" */
/* Back: the panel's own top row (Charles, 2026-11-05) - the first flex child of .rd-si-side, so it sits on the
   same line as the hero's lockup row opposite and over the footer's left edge; quiet ink, a 44px target, the
   chevron nudging left on hover */
.rd .rd-si-backtop{display:inline-flex;align-items:center;gap:var(--rd-sp-1);align-self:flex-start;min-height:44px;
  margin:0 0 -10px -8px;padding:0 var(--rd-sp-3) 0 var(--rd-sp-2);
  color:var(--rd-si-ink-2);text-decoration:none;font-size:var(--rd-fs-body-sm);line-height:var(--rd-lh-body-sm);
  font-weight:var(--rd-fw-medium);border-radius:var(--rd-r-chip)}
.rd .rd-si-backtop svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .18s ease}
@media (hover:hover){.rd .rd-si-backtop:hover{color:var(--rd-si-ink)}.rd .rd-si-backtop:hover svg{transform:translateX(-2px)}}
.rd .rd-si-backtop:focus-visible{outline:2px solid var(--rd-si-sky);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.rd .rd-si-backtop svg{transition:none}}
.rd .rd-si-sent{display:flex;flex-direction:column;gap:calc(var(--rd-sp-6) + var(--rd-sp-1))}
.rd .rd-si-sent-msg{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--rd-sp-4) + var(--rd-sp-1))}
.rd .rd-si-sent-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--rd-si-r-icon);
  background:var(--rd-si-sky-soft);color:var(--rd-si-sky)}
.rd .rd-si-sent-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rd .rd-si-sent-actions{display:flex;flex-direction:column;align-items:stretch;gap:var(--rd-sp-2)}
.rd .rd-si-sent-actions .rd-si-form{gap:0}
.rd .rd-si-back{display:inline-flex;align-items:center;justify-content:center;min-height:var(--rd-h-lg);color:var(--rd-si-sky);
  text-decoration:none;font-size:var(--rd-fs-body-sm);line-height:var(--rd-lh-body-sm);letter-spacing:var(--rd-tr-body-sm);
  font-weight:var(--rd-fw-medium);border-radius:var(--rd-r-chip)}

.rd .rd-si-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--rd-sp-1) var(--rd-sp-4);
  color:var(--rd-si-ink-4);font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption)}

/* ============================================================================ motion (none under reduced motion) */
@keyframes rdSiRise{from{opacity:0;translate:0 14px}}
@keyframes rdSiMark{from{opacity:0;scale:.96;rotate:-2deg}}
@keyframes rdSiSpin{to{rotate:1turn}}
@media (prefers-reduced-motion:no-preference){
  .rd .rd-si-rise{animation:rdSiRise .9s var(--rd-si-ease) both}
  .rd .rd-si-d1{animation-delay:.08s}
  .rd .rd-si-d2{animation-delay:.16s}
  .rd .rd-si-d3{animation-delay:.24s}
  .rd .rd-si-d4{animation-delay:.32s}
  .rd .rd-si-d5{animation-delay:.4s}
  .rd .rd-si-art{animation:rdSiMark 1.6s var(--rd-si-ease) both}

  .rd .rd-si-idp,.rd .rd-si-cta{transition:translate .18s var(--rd-si-ease),scale .18s var(--rd-si-ease),
    background-color var(--rd-dur-2) ease,box-shadow var(--rd-dur-2) ease}
  .rd .rd-si-input{transition:border-color var(--rd-dur-2) ease,box-shadow var(--rd-dur-2) ease}
  .rd .rd-si-how,.rd .rd-si-join,.rd .rd-si-back{transition:color var(--rd-dur-2) ease}
  .rd .rd-si-idp:active,.rd .rd-si-cta:active:not(:disabled){translate:0 0;scale:.98}
}
@media (hover:hover){
  .rd .rd-si-idp:hover{background:var(--rd-si-idp-hover);box-shadow:var(--rd-si-idp-lift)}
  .rd .rd-si-cta:hover:not(:disabled){background:var(--rd-si-cta-hover);box-shadow:var(--rd-si-cta-lift)}
  .rd .rd-si-cta.is-quiet:hover:not(:disabled){background:var(--rd-si-quiet-hover);box-shadow:none}
  .rd .rd-si-input:hover:not(:focus){border-color:var(--rd-si-field-hover)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .rd .rd-si-idp:hover,.rd .rd-si-cta:hover:not(:disabled){translate:0 -1px}
}

/* ============================================================================ widths */
@media (max-width:1279px){
  .rd .rd-si-hero{padding:var(--rd-sp-8)}
  .rd .rd-si-side{padding:var(--rd-sp-8)}
  .rd .rd-si-lead{zoom:1.45}
}
/* under 960: the hero folds into a compact header above the form */
@media (max-width:959px){
  .rd .rd-si{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .rd .rd-si-hero{gap:var(--rd-sp-8);padding:var(--rd-sp-6) var(--rd-sp-8) var(--rd-sp-8)}
  .rd .rd-si-art{right:-90px;bottom:-140px;width:380px;height:380px}
  .rd .rd-si-copy{gap:var(--rd-sp-3)}
  .rd .rd-si-lead{zoom:1}
  .rd .rd-si-lede{zoom:1}
  .rd .rd-si-side{padding:var(--rd-sp-12) var(--rd-sp-8) var(--rd-sp-6)}
  .rd .rd-si-body{margin:0 auto auto}
  .rd .rd-si-foot{margin-top:auto}
}
/* a phone: 16px gutters, the headline on the heading step */
@media (max-width:599px){
  .rd .rd-si{gap:var(--rd-sp-3);padding:var(--rd-sp-4)}
  .rd .rd-si-hero{gap:var(--rd-sp-6);padding:var(--rd-sp-4) var(--rd-sp-4) var(--rd-sp-6) calc(var(--rd-sp-4) + var(--rd-sp-1))}
  .rd .rd-si-art{right:-80px;bottom:-110px;width:280px;height:280px}
  .rd .rd-si-lead{font-size:var(--rd-fs-heading);line-height:var(--rd-lh-si-title);letter-spacing:var(--rd-tr-si-title)}
  .rd .rd-si-lede{font-size:var(--rd-fs-body-sm);line-height:var(--rd-lh-body-sm);letter-spacing:var(--rd-tr-body-sm)}
  .rd .rd-si-side{padding:var(--rd-sp-8) calc(var(--rd-sp-4) + var(--rd-sp-1)) var(--rd-sp-6)}
  .rd .rd-si-title{font-size:var(--rd-fs-heading);zoom:1}
}

@media (prefers-reduced-transparency:reduce){
  .rd .rd-si-art{display:none}
}
@media (forced-colors:active){
  .rd .rd-si-hero,.rd .rd-si-side{border:1px solid CanvasText}
  .rd .rd-si-idp{border:1px solid ButtonText}   /* a borderless tile would vanish into a forced background */
}