/* rd_login.css - the sign-in page (templates/login.html: GET / signed out), and the shared pieces join.html borrows.
 *
 * WHO ARE YOU FIRST (Christian, 2026-10-29) - .rd-sg-*: the page is two columns. LEFT, the task: the wordmark, then
 * ONE of three views - choose ("Welcome back" + two choice cards), agency (Google, Microsoft, the agency password)
 * or client (the dashboard password + a help card) - then a quiet footer. RIGHT, a dark panel: a headline and a
 * glimpse of the product (--rd-ink-fixed: a near-black in every theme); the foot link opens "How Bidbrain works".
 * Which view shows is <html data-sg-view="choose|agency|client"> (login.html sets it before first paint); with
 * no attribute (JS off) the chooser is hidden and the plain form shows. A view fades and rises in over 200ms
 * when it appears (rdSgIn, opacity + translate); nothing under reduced motion. Under 960px the panel goes and
 * the quiet "How Bidbrain works" link opens the side sheet (a bottom sheet) as before.
 *
 * POLISH (Christian, 2026-10-30; canvas boards "Sign in v2"): one display-size headline per view under a dot
 * eyebrow; the controls in ONE card (.rd-sg-card) with a 16 / 24 rhythm; the two choices in one surface split by
 * a hairline; every button a pill (Google's shape is its own); a server error is an alert at the top of the
 * card and an empty Continue a line under the field - no shake; the panel's product glimpse upright on a grid
 * with three moments taking turns, its headline anchored at the foot.
 *
 * join.html (Ask to join) is drawn in the same layout and parts, plus its own few rules inline. The brain art,
 * the glass card and its entrance (.rd-li-stage, .rd-lg-card, rdLiCard) went with the 2026-10-29 redesign.
 *
 * 🔴 Every rule starts with `.rd`; no literal size / weight / leading / tracking / colour and no off-grid
 *   spacing (tests/test_rd_tokens.py). The four Microsoft logo colours are brand marks and stay as svg
 *   attributes in the template (they are the template's ratchet count).
 * 🔴 The login kit (scripts/apply_login_kit.py, css=False) injects BEHAVIOUR only. This sheet draws its
 *   controls: .bb-pw (the field wrapper), .bb-pw-t (Show / Hide), .bb-caps (+ .on), .bb-shake.
 * 🔴 Class names avoid a bare `card`, `panel`, `btn`, `msbtn`, `exlink`, `primary`: _premium.html (still
 *   included for its bootstrap and focus fallback) lifts, sheens or spotlights those by name.
 * 🔴 The ground is painted on <html> (the canvas), so it covers the whole document however tall it gets. In
 *   the glass themes --rd-canvas is transparent (so the glow shows), so they put --rd-bg under it.
 * 🔴 The svg's translate lengths are in USER UNITS (about 2.25px each at desktop size), not screen pixels.
 */

/* ============================================================================ ground */
html.rd{--bb-accent:var(--rd-accent);color-scheme:var(--rd-scheme);
  background:radial-gradient(1100px 640px at 50% -12%,var(--rd-s1),transparent 72%) no-repeat,var(--rd-canvas)}
html.rd[data-rd-theme="glass-dark"],html.rd[data-rd-theme="midnight-dark"]{background-color:var(--rd-bg)}
.rd body{margin:0}
/* the shared premium layer's ambient orbs, grain and scroll rail do not draw here */
.rd .bb-amb,.rd .bb-grain,.rd #bbProgress{display:none}
.rd ::selection{background:var(--rd-accent-soft);color:var(--rd-ink-1)}

/* ---------------------------------------------------------------------------- the entrance, once */
@keyframes rdLiIn{from{opacity:0}to{opacity:1}}
.rd .rd-lg-toggle{animation:rdLiIn .4s ease .8s backwards}

/* ============================================================================ the task zone */
.rd .rd-lg-logo{display:flex;margin:0;color:var(--rd-logo)}
.rd .rd-lg-logo svg{display:block;height:24px;width:auto}
.rd .rd-lg-logo svg .st0{fill:currentColor}
/* login.html / join.html: the brain mark and the word "Bidbrain" (not the full lockup with its tier word) */
.rd .rd-sg-logo{align-items:center;gap:var(--rd-sp-2)}
.rd .rd-sg-logo .rd-sg-mark{height:24px;width:auto;fill:currentColor}
.rd .rd-sg-logo .rd-sg-mark *{fill:currentColor}
.rd .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);color:currentColor}
.rd .rd-lg-label{display:block;margin:0 0 var(--rd-sp-2);font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);
  letter-spacing:var(--rd-tr-caption);font-weight:var(--rd-fw-medium);color:var(--rd-ink-2)}

/* --- the password field (the kit's wrapper) - 16px text at every width (iOS zooms a smaller field on focus) */
.rd .bb-pw{position:relative;display:block}
.rd .bb-pw input{display:block;width:100%;height:var(--rd-h-lg);margin:0;
  padding:0 var(--rd-sp-16) 0 var(--rd-sp-3);appearance:none;outline:none;
  border:var(--rd-border-strong);border-radius:var(--rd-r-control);background:var(--rd-sunk);color:var(--rd-ink-1);
  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);caret-color:var(--rd-accent-ring);
  transition:border-color var(--rd-dur-1) ease,box-shadow var(--rd-dur-2) var(--rd-ease-out)}
@media (hover:hover){.rd .bb-pw input:hover:not(:focus){border-color:color-mix(in oklab,var(--rd-line-strong) 55%,var(--rd-ink-3))}}
.rd .bb-pw input:focus{border-color:var(--rd-accent-ring);box-shadow:0 0 0 3px var(--rd-accent-line)}
.rd .bb-pw input::placeholder{color:var(--rd-ink-3);opacity:1}
/* after a wrong password the (emptied) field carries the error until something is typed */

/* Show / Hide: a quiet text control inside the field, 36px tall. Centred with `translate`, never `transform`. */
.rd .bb-pw-t{position:absolute;top:50%;right:var(--rd-sp-1);translate:0 -50%;display:inline-flex;align-items:center;
  justify-content:center;height:var(--rd-h-md);min-width:var(--rd-sp-12);margin:0;padding:0 var(--rd-sp-3);
  border:0;border-radius:var(--rd-r-chip);background:transparent;color:var(--rd-ink-2);cursor:pointer;
  font-family:var(--rd-font-sans);font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);
  letter-spacing:var(--rd-tr-caption);font-weight:var(--rd-fw-medium);
  transition:background-color var(--rd-dur-1) ease,color var(--rd-dur-1) ease,scale var(--rd-dur-1) var(--rd-ease-out)}
@media (hover:hover){.rd .bb-pw-t:hover{background:var(--rd-hover);color:var(--rd-ink-1)}}
.rd .bb-pw-t:active{background:var(--rd-press);scale:.96}
.rd .bb-pw-t:focus-visible{outline:2px solid var(--rd-accent-ring);outline-offset:-2px}

/* Caps Lock: silent until it matters, and it opens its own line rather than overlapping one */
.rd .bb-caps{overflow:hidden;max-height:0;margin:0;opacity:0;color:var(--rd-warn);font-weight:var(--rd-fw-medium);
  transition:max-height var(--rd-dur-2) var(--rd-ease-out),margin var(--rd-dur-2) var(--rd-ease-out),opacity var(--rd-dur-2) ease}
.rd .bb-caps.on{max-height:32px;margin-top:var(--rd-sp-2);opacity:1}
/* the kit empties the message as it drops .on; ::after keeps the words for the fade-out, out of the a11y tree */
.rd .bb-caps:not(.on)::after{content:"Caps Lock is on" / ""}

/* A server's error (a wrong password, a lock-out, a failed Google / Microsoft sign-in) is a calm alert at the top
   of the card: the danger tint, a ring icon, the server's own sentence in the ink colour. Empty, it is not drawn;
   filled (by the server or a script), it appears with the view's fade and rise. No shake (2026-10-30): the kit
   still adds .bb-shake to a server-rendered error, and only the field's ring reads it. */
.rd .rd-lg-err{margin:0;color:var(--rd-ink-1);font-weight:var(--rd-fw-medium);text-wrap:pretty}
.rd .rd-lg-err:empty{display:none}
.rd .rd-lg-err:not(:empty){display:flex;align-items:flex-start;gap:var(--rd-sp-3);padding:var(--rd-sp-3) var(--rd-sp-4);
  border-radius:var(--rd-r-overlay);background:var(--rd-danger-soft);
  border:var(--rd-bw) solid color-mix(in oklab,var(--rd-danger) 32%,transparent);
  animation:rdSgIn var(--rd-dur-2) var(--rd-ease-out) both}
.rd .rd-lg-err:not(:empty)::before,.rd .rd-sg-check:not(:empty)::before{content:"!" / "";flex:none;display:grid;place-items:center;
  width:var(--rd-icon);height:var(--rd-icon);margin-top:2px;border-radius:var(--rd-r-full);background:var(--rd-danger);
  color:var(--rd-bg);font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);font-weight:var(--rd-fw-semi)}
/* the empty check (login.html's script): one line under the field, tied to it by aria-describedby */
.rd .rd-sg-check{margin:0;font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption);
  font-weight:var(--rd-fw-medium);color:var(--rd-danger)}
.rd .rd-sg-check:empty{display:none}
.rd .rd-sg-check:not(:empty){display:flex;align-items:flex-start;gap:var(--rd-sp-2);margin-top:var(--rd-sp-2)}
.rd .rd-sg-check:not(:empty)::before{margin-top:0}

.rd .rd-lg-help{margin:var(--rd-sp-3) 0 var(--rd-sp-6);font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);
  letter-spacing:var(--rd-tr-caption);color:var(--rd-ink-3);text-wrap:pretty}

/* --- Continue: the page's one gold action, full width, thumb height */
.rd .rd-btn.rd-lg-submit{width:100%;height:var(--rd-h-lg);font-weight:var(--rd-fw-semi)}
.rd .rd-btn.rd-lg-submit:disabled{opacity:.72;cursor:progress}
/* submitted: a quiet ring turns beside "Checking..." (the kit's label) until the next page; still under reduced motion */
@keyframes rdSgSpin{to{rotate:1turn}}
.rd .rd-btn.rd-lg-submit:disabled::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:rdSgSpin .7s linear infinite}

/* --- or, then the two providers' own buttons, centred on one axis */
.rd .rd-lg-or{display:flex;align-items:center;gap:var(--rd-sp-3);margin:var(--rd-sp-6) 0 var(--rd-sp-4);color:var(--rd-ink-3);
  font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption)}
.rd .rd-lg-or::before,.rd .rd-lg-or::after{content:"";flex:1;height:1px;background:var(--rd-line)}
/* Google draws its button in an iframe with a LIGHT colour scheme; in the page's dark scheme Chrome would back
   it with an opaque canvas - a white box around the pill. */
.rd .rd-lg-gis{display:flex;justify-content:center;min-height:44px;color-scheme:light}
/* Microsoft's LIGHT button on every theme, so it pairs with Google's; same height and shape. --rd-ms-* tokens. */
.rd .rd-lg-ms{display:flex;align-items:center;justify-content:center;gap:var(--rd-sp-3);min-width:220px;height:40px;
  margin:var(--rd-sp-2) auto 0;padding:0 var(--rd-sp-4);border:var(--rd-bw) solid var(--rd-ms-line);border-radius:var(--rd-r-full);
  background:var(--rd-ms-bg);color:var(--rd-ms-ink);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);
  transition:background-color var(--rd-dur-1) ease,border-color var(--rd-dur-1) ease,scale var(--rd-dur-1) var(--rd-ease-out)}
@media (hover:hover){.rd .rd-lg-ms:hover{background:var(--rd-ms-hover)}}
.rd .rd-lg-ms:active{scale:.97;background:var(--rd-ms-press)}
.rd .rd-lg-ms svg{display:block;flex:none}
.rd .rd-lg-ms:focus-visible{outline:2px solid var(--rd-accent-ring);outline-offset:2px}

/* --- "How Bidbrain works": a quiet text control under the card; its chevron points where the sheet comes from */
.rd .rd-lg-toggle{display:inline-flex;align-items:center;gap:var(--rd-sp-1);height:var(--rd-h-md);
  margin:0;padding:0 var(--rd-sp-3);border:0;border-radius:var(--rd-r-control);background:transparent;
  color:var(--rd-ink-2);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);
  transition:background-color var(--rd-dur-1) ease,color var(--rd-dur-1) ease,scale var(--rd-dur-1) var(--rd-ease-out)}
@media (hover:hover){.rd .rd-lg-toggle:hover{background:var(--rd-hover);color:var(--rd-ink-1)}}
.rd .rd-lg-toggle:active{background:var(--rd-press);scale:.97}
.rd .rd-lg-toggle:focus-visible{outline:2px solid var(--rd-accent-ring);outline-offset:2px}
.rd .rd-lg-chev{width:var(--rd-icon);height:var(--rd-icon);flex:none;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;rotate:-90deg}

/* ============================================================================ the sheet
   Closed, the sheet and its scrim carry [hidden] (server-rendered, and set again by login.html once the slide
   out has finished), so nothing of them - not an edge, not a shadow - can show until the link is pressed.
   "How Bidbrain works", from the right on the spring over a scrim; it leaves the way it came. Glass in the
   glass themes, solid elsewhere and under reduced transparency (the --rd-glass-* roles). */
.rd .rd-li-sheet[hidden],.rd .rd-li-scrim[hidden]{display:none}
.rd .rd-li-scrim{position:fixed;inset:0;z-index:var(--rd-z-scrim);background:var(--rd-scrim);opacity:0;visibility:hidden;
  transition:opacity var(--rd-dur-3) var(--rd-ease-out),visibility 0s linear var(--rd-dur-3)}
.rd .rd-li-scrim.is-open{opacity:1;visibility:visible;transition:opacity var(--rd-dur-3) var(--rd-ease-out),visibility 0s}
.rd .rd-li-sheet{position:fixed;top:0;right:0;bottom:0;z-index:var(--rd-z-modal);display:flex;flex-direction:column;
  width:min(480px,calc(100vw - 2 * var(--rd-sp-8)));margin:0;
  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);color:var(--rd-ink-1);-webkit-font-smoothing:antialiased;
  background:var(--rd-glass-bg,var(--rd-s1));border-left:var(--rd-border);border-color:var(--rd-rim,var(--rd-line));
  box-shadow:var(--rd-shadow-3);-webkit-backdrop-filter:var(--rd-float-blur,none);backdrop-filter:var(--rd-float-blur,none);
  translate:calc(100% + var(--rd-sp-6)) 0;visibility:hidden;
  transition:translate var(--rd-dur-3) var(--rd-ease-drawer),visibility 0s linear var(--rd-dur-3)}
.rd .rd-li-sheet.is-open{translate:0 0;visibility:visible;
  transition:translate var(--rd-dur-spring) var(--rd-ease-spring),visibility 0s}
.rd .rd-li-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:var(--rd-sp-4);
  padding:var(--rd-sp-8) var(--rd-sp-6) var(--rd-sp-2) var(--rd-sp-12)}
.rd .rd-li-sheet-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;
  padding:0 var(--rd-sp-12) var(--rd-sp-12)}
.rd .rd-li-close{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--rd-h-md);
  height:var(--rd-h-md);margin:0;padding:0;border:0;border-radius:var(--rd-r-full);background:transparent;
  color:var(--rd-ink-2);cursor:pointer;
  transition:background-color var(--rd-dur-1) ease,color var(--rd-dur-1) ease,scale var(--rd-dur-1) var(--rd-ease-out)}
@media (hover:hover){.rd .rd-li-close:hover{background:var(--rd-hover);color:var(--rd-ink-1)}}
.rd .rd-li-close:active{background:var(--rd-press);scale:.94}
.rd .rd-li-close:focus-visible{outline:2px solid var(--rd-accent-ring);outline-offset:2px}
.rd .rd-li-close svg{width:var(--rd-icon);height:var(--rd-icon);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}

.rd .rd-lg-ex-title{margin:0;font-size:var(--rd-fs-title);line-height:var(--rd-lh-title);letter-spacing:var(--rd-tr-title);
  font-weight:var(--rd-fw-semi);color:var(--rd-ink-1)}
.rd .rd-lg-ex-lead{margin:0;color:var(--rd-ink-2);text-wrap:pretty}
/* the diagram: two layers on one rail, a node each, drawn still */
.rd .rd-lg-layers{list-style:none;margin:var(--rd-sp-8) 0 0;padding:0}
.rd .rd-lg-layer{position:relative;padding-left:var(--rd-sp-6)}
.rd .rd-lg-layer + .rd-lg-layer{margin-top:var(--rd-sp-6)}
.rd .rd-lg-layer:first-child::before{content:"";position:absolute;left:3px;top:14px;
  bottom:-34px;width:1px;background:var(--rd-line-strong)}
.rd .rd-lg-node{position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:var(--rd-r-full);background:var(--rd-bg);
  box-shadow:inset 0 0 0 1.5px var(--rd-accent-glow)}
.rd .rd-lg-layer-name{margin:0 0 var(--rd-sp-2);font-weight:var(--rd-fw-semi);color:var(--rd-ink-1)}
.rd .rd-lg-items{margin:0;padding:0}
.rd .rd-lg-items > div{padding:var(--rd-sp-3) 0;border-top:var(--rd-border)}
.rd .rd-lg-items > div:last-child{padding-bottom:0}
.rd .rd-lg-items dt{font-weight:var(--rd-fw-medium);color:var(--rd-ink-1)}
.rd .rd-lg-items dd{margin:2px 0 0;font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);
  letter-spacing:var(--rd-tr-caption);color:var(--rd-ink-2);text-wrap:pretty}

/* ============================================================================ the split sign-in (login.html)
   Two columns: the task, and the dark panel. The ground and the backdrop art are html.rd's, as for join. */
.rd .rd-sg{position:relative;z-index:var(--rd-z-raised);box-sizing:border-box;min-height:100vh;min-height:100dvh;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);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-ink-1);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-alternates:styleset(rd-geist) character-variant(rd-geist-cv11)}
.rd .rd-sg *{box-sizing:border-box}
.rd .rd-sg-main{display:flex;flex-direction:column;min-width:0;padding:var(--rd-sp-8) var(--rd-sp-16)}
.rd .rd-sg-logo{margin:0}
.rd .rd-sg-body{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:520px;
  margin:0 auto;padding:var(--rd-sp-12) 0}
.rd .rd-sg-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--rd-sp-4);
  font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption);color:var(--rd-ink-3)}

/* --- which view: the attribute on <html> picks one; none (JS off) is the plain form */
html.rd:not([data-sg-view="choose"]) .rd-sg-choose{display:none}
html.rd[data-sg-view="choose"] .rd-sg-form{display:none}
html.rd:not([data-sg-view="agency"]) .rd-sg-for-agency{display:none}
html.rd:not([data-sg-view="client"]) .rd-sg-for-client{display:none}
html.rd[data-sg-view="agency"] .rd-sg-for-none,html.rd[data-sg-view="client"] .rd-sg-for-none{display:none}

/* a view appears with a short fade and rise (an animation restarts whenever display brings the box back) */
@keyframes rdSgIn{from{opacity:0;translate:0 calc(var(--rd-m) * 8px)}}
.rd .rd-sg-view{display:flex;flex-direction:column;gap:var(--rd-sp-6);min-width:0;
  animation:rdSgIn var(--rd-dur-2) var(--rd-ease-out) both}
/* 440: the card's controls are then 392 wide - under Google's 400px cap, so every control lines up */
.rd .rd-sg-view{width:100%;max-width:440px;margin:0 auto}

/* one confident headline per view: the display step, tight, balanced */
.rd .rd-sg-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--rd-sp-2)}
.rd .rd-sg-title{margin:0;font-size:var(--rd-fs-display);line-height:var(--rd-lh-display);letter-spacing:var(--rd-tr-display);
  font-weight:var(--rd-fw-semi);color:var(--rd-ink-1);text-wrap:balance}
.rd .rd-sg-title-xl{font-size:var(--rd-fs-display);line-height:var(--rd-lh-display);letter-spacing:var(--rd-tr-display)}
.rd .rd-sg-title:focus{outline:none}
.rd .rd-sg-title:focus-visible{outline:2px solid var(--rd-accent-ring);outline-offset:4px;border-radius:var(--rd-r-chip)}
.rd .rd-sg-sub{margin:0;color:var(--rd-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-sg-note{margin:0;color:var(--rd-ink-2)}
.rd .rd-sg-note a,.rd .rd-sg-back{color:var(--rd-accent-text);font-weight:var(--rd-fw-medium);text-decoration:none;
  border-radius:var(--rd-r-chip)}
@media (hover:hover){.rd .rd-sg-note a:hover{text-decoration:underline;text-underline-offset:2px}}
.rd .rd-sg-note a:focus-visible,.rd .rd-sg-back:focus-visible{outline:2px solid var(--rd-accent-ring);outline-offset:2px}

/* --- the card: ONE focused surface for the controls (the sign-in card's material: glass in the glass themes).
   Rhythm: 16 between groups inside, 24 padding; the view's own gap (24) sets it apart from the headline. */
.rd .rd-sg-card,.rd .rd-sg-choices{border-radius:calc(var(--rd-r-overlay) * 1.5);
  background:var(--rd-glass-bg,var(--rd-s1));border:var(--rd-border);border-color:var(--rd-rim,var(--rd-line));
  box-shadow:var(--rd-shadow-2);-webkit-backdrop-filter:var(--rd-float-blur,none);backdrop-filter:var(--rd-float-blur,none)}
.rd .rd-sg-card{display:flex;flex-direction:column;gap:var(--rd-sp-4);padding:var(--rd-sp-6)}

/* --- the two choices: one surface split by a hairline; a row lights on hover rather than lifting */
.rd .rd-sg-choices{display:flex;flex-direction:column;padding:var(--rd-sp-1)}
.rd .rd-sg-choice{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 20px;align-items:center;gap:var(--rd-sp-4);
  padding:var(--rd-sp-4);border-radius:calc(var(--rd-r-overlay) * 1.5 - var(--rd-sp-1));color:var(--rd-ink-1);text-decoration:none;
  transition:background-color var(--rd-dur-1) ease,scale var(--rd-dur-1) var(--rd-ease-out)}
.rd .rd-sg-choice + .rd-sg-choice::before{content:"";position:absolute;top:0;left:76px;right:var(--rd-sp-4);height:1px;
  background:var(--rd-line);transition:opacity var(--rd-dur-1) ease}
@media (hover:hover){.rd .rd-sg-choice:hover{background:var(--rd-hover)}
  .rd .rd-sg-choice:hover .rd-sg-choice-chev{translate:2px 0;color:var(--rd-ink-1)}
  .rd .rd-sg-choice:hover + .rd-sg-choice::before,.rd .rd-sg-choice + .rd-sg-choice:hover::before{opacity:0}}
.rd .rd-sg-choice:active{scale:.98;background:var(--rd-press)}
.rd .rd-sg-choice:focus-visible{outline:2px solid var(--rd-accent-ring);outline-offset:-2px}
.rd .rd-sg-choice-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--rd-r-overlay);
  background:var(--rd-accent-soft);color:var(--rd-accent-text)}
.rd .rd-sg-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--rd-sp-2) var(--rd-sp-4);padding:0 var(--rd-sp-1)}
.rd .rd-sg-choice-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rd .rd-sg-choice-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.rd .rd-sg-choice-name{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-sg-choice-desc{color:var(--rd-ink-2);text-wrap:pretty}
.rd .rd-sg-choice-chev{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;color:var(--rd-ink-3);
  transition:translate var(--rd-dur-1) var(--rd-ease-out),color var(--rd-dur-1) ease}

/* --- agency / client: the way back (a quiet text control), and the eyebrow - a dot and a word, not a pill */
.rd .rd-sg-back{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--rd-sp-1);min-height:var(--rd-h-md);
  margin:0 0 calc(var(--rd-sp-2) * -1) calc(var(--rd-sp-2) * -1);padding:0 var(--rd-sp-2);color:var(--rd-ink-2);
  font-size:var(--rd-fs-body-sm);line-height:var(--rd-lh-body-sm);letter-spacing:var(--rd-tr-body-sm);
  transition:background-color var(--rd-dur-1) ease,color var(--rd-dur-1) ease}
@media (hover:hover){.rd .rd-sg-back:hover{color:var(--rd-ink-1);background:var(--rd-hover)}}
.rd .rd-sg-back svg{width:var(--rd-icon);height:var(--rd-icon);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.rd .rd-sg-pill{display:inline-flex;align-items:center;gap:var(--rd-sp-2);margin-bottom:var(--rd-sp-1);
  font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caps);text-transform:uppercase;
  font-weight:var(--rd-fw-medium);color:var(--rd-ink-2)}
.rd .rd-sg-pill::before{content:"";width:6px;height:6px;border-radius:var(--rd-r-full);background:var(--rd-accent-text);
  box-shadow:0 0 0 3px var(--rd-accent-soft)}

/* --- the providers: Google's own button and Microsoft's, one column, one width - the card's (gsi caps at 400px).
   Both are pills (Google's shape is its own), so Continue is a pill too: one shape for every button. */
.rd .rd-sg-sso{display:flex;flex-direction:column;align-items:stretch;gap:var(--rd-sp-3)}
.rd .rd-sg-sso > #g_id_onload{display:none}   /* gsi's settings node: an empty flex item would add a gap */
.rd .rd-sg .rd-lg-gis{width:100%}
.rd .rd-sg .rd-lg-ms{width:100%;max-width:400px;height:var(--rd-h-lg);margin:0 auto;font-size:var(--rd-fs-body-sm)}
.rd .rd-sg .rd-lg-or{margin:0}

/* --- the password, Continue, the help line */
.rd .rd-sg-pwgroup{display:flex;flex-direction:column;gap:var(--rd-sp-4)}
.rd .rd-sg .rd-lg-help{margin:var(--rd-sp-2) 0 0}
.rd .rd-sg .bb-pw input{border-radius:var(--rd-r-overlay)}
.rd .rd-sg .rd-btn.rd-lg-submit{border-radius:var(--rd-r-full);
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--rd-ink-on-fill) 18%,transparent),
    0 8px 20px -10px color-mix(in oklab,var(--rd-accent) 80%,transparent)}
.rd .rd-sg .rd-btn.rd-lg-submit:active:not(:disabled){scale:.98}
/* the field wears the error: after a server error until something is typed, or after the empty check */
.rd .rd-sg-form:has(.err:not(:empty)) .bb-pw input:placeholder-shown,.rd .rd-sg .bb-pw input[aria-invalid="true"]{border-color:var(--rd-danger)}
.rd .rd-sg-form:has(.err:not(:empty)) .bb-pw input:placeholder-shown:focus,
.rd .rd-sg .bb-pw input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--rd-danger-soft)}

/* --- the client's help card: quiet, outside the card - an aside, not a second form */
.rd .rd-sg-help-card{display:grid;grid-template-columns:36px minmax(0,1fr);gap:var(--rd-sp-3);padding:var(--rd-sp-3) var(--rd-sp-4);
  border-radius:calc(var(--rd-r-overlay) * 1.5);border:var(--rd-border)}
.rd .rd-sg-help-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--rd-r-surface);background:var(--rd-s2);color:var(--rd-ink-2)}
.rd .rd-sg-help-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.rd .rd-sg-help-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.rd .rd-sg-help-name{font-weight:var(--rd-fw-semi)}
.rd .rd-sg-help-desc{color:var(--rd-ink-2);font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption);text-wrap:pretty}

/* --- the dark panel: --rd-ink-fixed is a near-black in every theme; its text is the on-fill white. Two soft lights of
   the theme's own glow sit in its corners and a hairline rim catches the top edge, so it reads as a lit object. */
.rd .rd-sg-panel{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:var(--rd-sp-8);min-width:0;
  margin:var(--rd-sp-4);padding:var(--rd-sp-12);border-radius:calc(var(--rd-r-overlay) * 2);overflow:hidden;
  background:radial-gradient(120% 70% at 100% 0%,color-mix(in oklab,var(--rd-accent-glow) 26%,transparent),transparent 62%),
    radial-gradient(90% 60% at 0% 100%,color-mix(in oklab,var(--rd-info) 16%,transparent),transparent 70%),var(--rd-ink-fixed);
  color:var(--rd-ink-on-fill);
  border:var(--rd-bw) solid color-mix(in oklab,var(--rd-ink-on-fill) 10%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--rd-ink-on-fill) 12%,transparent),var(--rd-shadow-3)}
/* a fine grid inside the panel, lit only where the light falls */
.rd .rd-sg-panel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(color-mix(in oklab,var(--rd-ink-on-fill) 5%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in oklab,var(--rd-ink-on-fill) 5%,transparent) 1px,transparent 1px);
  background-size:32px 32px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(80% 60% at 70% 55%,var(--rd-ink-on-fill),transparent);
  mask-image:radial-gradient(80% 60% at 70% 55%,var(--rd-ink-on-fill),transparent)}
.rd .rd-sg-eyebrow{margin:0;font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caps);
  font-weight:var(--rd-fw-medium);text-transform:uppercase;color:color-mix(in oklab,var(--rd-ink-on-fill) 60%,transparent)}
.rd .rd-sg-panel-body{display:flex;flex-direction:column;gap:var(--rd-sp-6);margin:auto 0}   /* centred between the eyebrow and the foot */
.rd .rd-sg-panel-lead{margin:0;font-size:var(--rd-fs-heading);line-height:var(--rd-lh-heading);letter-spacing:var(--rd-tr-heading);
  font-weight:var(--rd-fw-semi);text-wrap:balance}
.rd .rd-sg-panel-lead span{color:color-mix(in oklab,var(--rd-ink-on-fill) 62%,transparent)}
/* join.html's steps: three on one rail (a hairline joins the numbers), not three boxed cards */
.rd .rd-sg-steps{list-style:none;display:flex;flex-direction:column;margin:0;padding:0;max-width:440px}
.rd .rd-sg-step{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--rd-sp-4);padding:0 0 var(--rd-sp-8)}
.rd .rd-sg-step:last-child{padding-bottom:0}
.rd .rd-sg-step:not(:last-child)::before{content:"";position:absolute;left:14px;top:36px;bottom:var(--rd-sp-2);width:1px;
  background:linear-gradient(color-mix(in oklab,var(--rd-ink-on-fill) 30%,transparent),color-mix(in oklab,var(--rd-ink-on-fill) 8%,transparent))}
.rd .rd-sg-step-name{font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);letter-spacing:var(--rd-tr-body)}
.rd .rd-sg-step > span:last-child{display:flex;flex-direction:column}
.rd .rd-sg-step-n{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--rd-r-surface);
  background:color-mix(in oklab,var(--rd-ink-on-fill) 10%,transparent);font-size:var(--rd-fs-caption);
  line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption);font-weight:var(--rd-fw-semi)}
.rd .rd-sg-step-name{font-weight:var(--rd-fw-semi)}
.rd .rd-sg-step-n svg{width:var(--rd-icon);height:var(--rd-icon)}
.rd .rd-jn .rd-sg-step-n{border-radius:var(--rd-r-full)}
/* where a request stands (join.html): now is lit, with a white number; done is ticked in the ok colour */
.rd .rd-jn .rd-sg-step-n{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--rd-ink-on-fill) 14%,transparent)}
.rd .rd-sg-step.is-now .rd-sg-step-n{box-shadow:0 0 0 4px color-mix(in oklab,var(--rd-ink-on-fill) 12%,transparent);border-radius:var(--rd-r-full);background:var(--rd-ink-on-fill);color:var(--rd-ink-fixed)}
.rd .rd-sg-step.is-done .rd-sg-step-n{border-radius:var(--rd-r-full);background:var(--rd-ok);color:var(--rd-ink-fixed)}
.rd .rd-sg-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rd .rd-sg-step-desc{color:color-mix(in oklab,var(--rd-ink-on-fill) 68%,transparent);font-size:var(--rd-fs-caption);
  line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption);text-wrap:pretty}

/* ============================================================================ the glimpse (login.html's panel)
   A quiet line on top ("Today in Bidbrain" and three dots), the product in the middle, one headline at the foot.
   The product is upright and on a grid (2026-10-30; it was three tilted cards that overlapped at 960-1199px):
   a lead card the width of the stack over two tiles - a number and the Northstar ring. Decoration only:
   aria-hidden, no real data. The lead card is one of three moments stacked in one grid cell; .is-on shows one
   (a 240ms cross-fade and 6px rise, opacity and translate only) and its dot lights. The cards rise in once,
   60ms apart. Nothing moves under reduced motion. */
.rd .rd-sg-glimpse{justify-content:space-between}
.rd .rd-sg-ptop{display:flex;align-items:center;justify-content:space-between;gap:var(--rd-sp-4);
  font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption);font-weight:var(--rd-fw-medium);
  color:color-mix(in oklab,var(--rd-ink-on-fill) 66%,transparent)}
.rd .rd-sg-dots{display:flex;align-items:center;gap:var(--rd-sp-2)}
.rd .rd-sg-dots i{width:6px;height:6px;border-radius:var(--rd-r-full);background:var(--rd-ink-on-fill);opacity:.28;
  transition:opacity var(--rd-dur-3) var(--rd-ease-out)}
.rd .rd-sg-dots i.is-on{opacity:1}
.rd .rd-sg-glimpse .rd-sg-panel-lead{max-width:440px}
.rd .rd-sg-glimpse .rd-sg-panel-lead span{display:block;margin-top:var(--rd-sp-3);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-sg-stack{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--rd-sp-3);width:100%;max-width:460px;
  margin:var(--rd-sp-8) auto;align-self:center}
.rd .rd-sg-moments{grid-column:1 / -1;display:grid;animation:rdSgRise .4s var(--rd-ease-out) .12s both}
.rd .rd-sg-moments > .rd-sg-gc{grid-area:1 / 1;opacity:0;translate:0 6px;
  transition:opacity .24s var(--rd-ease-out),translate .24s var(--rd-ease-out)}
.rd .rd-sg-moments > .rd-sg-gc.is-on{opacity:1;translate:0 0}
.rd .rd-sg-gc{position:relative;display:flex;flex-direction:column;gap:var(--rd-sp-2);padding:var(--rd-sp-4);
  border-radius:calc(var(--rd-r-overlay) * 1.5);color:var(--rd-ink-on-fill);
  background:linear-gradient(180deg,color-mix(in oklab,var(--rd-ink-on-fill) 11%,transparent),color-mix(in oklab,var(--rd-ink-on-fill) 4%,transparent));
  border:var(--rd-bw) solid color-mix(in oklab,var(--rd-ink-on-fill) 12%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--rd-ink-on-fill) 14%,transparent),
    0 30px 60px -24px color-mix(in oklab,var(--rd-ink-fixed) 90%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
.rd .rd-sg-gc.is-num{animation:rdSgRise .4s var(--rd-ease-out) .18s both}
.rd .rd-sg-gc.is-ring{animation:rdSgRise .4s var(--rd-ease-out) .24s both;flex-direction:row;align-items:center;gap:var(--rd-sp-3)}
@keyframes rdSgRise{from{opacity:0;translate:0 16px}}
.rd .rd-sg-gc.is-need{padding:var(--rd-sp-4) var(--rd-sp-6) var(--rd-sp-6)}
.rd .rd-sg-gc-top,.rd .rd-sg-gc-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--rd-sp-3)}
.rd .rd-sg-gc-tag{display:inline-flex;align-items:center;gap:var(--rd-sp-2);font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);
  letter-spacing:var(--rd-tr-caps);text-transform:uppercase;font-weight:var(--rd-fw-semi);
  color:color-mix(in oklab,var(--rd-warn) 45%,var(--rd-ink-on-fill))}
.rd .rd-sg-gc.is-report .rd-sg-gc-tag{color:color-mix(in oklab,var(--rd-accent-glow) 45%,var(--rd-ink-on-fill))}
.rd .rd-sg-gc.is-done .rd-sg-gc-tag{color:color-mix(in oklab,var(--rd-ok) 45%,var(--rd-ink-on-fill))}
.rd .rd-sg-gc-tag i{width:6px;height:6px;border-radius:var(--rd-r-full);background:currentColor;
  box-shadow:0 0 0 3px color-mix(in oklab,currentColor 25%,transparent)}
.rd .rd-sg-gc-meta{font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption);
  color:color-mix(in oklab,var(--rd-ink-on-fill) 66%,transparent)}
.rd .rd-sg-gc-line{margin:var(--rd-sp-1) 0 0;font-size:var(--rd-fs-title);line-height:var(--rd-lh-title);letter-spacing:var(--rd-tr-title);
  font-weight:var(--rd-fw-medium);text-wrap:balance}
.rd .rd-sg-gc-line span{display:block;color:color-mix(in oklab,var(--rd-ink-on-fill) 66%,transparent)}
.rd .rd-sg-gc-foot{margin-top:var(--rd-sp-2)}
.rd .rd-sg-gc-chip{display:inline-flex;align-items:center;gap:var(--rd-sp-1);padding:2px var(--rd-sp-2);border-radius:var(--rd-r-full);
  background:color-mix(in oklab,var(--rd-ink-on-fill) 8%,transparent);border:var(--rd-bw) solid color-mix(in oklab,var(--rd-ink-on-fill) 10%,transparent);
  font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption);
  color:color-mix(in oklab,var(--rd-ink-on-fill) 80%,transparent)}
.rd .rd-sg-gc-chip svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.rd .rd-sg-gc-act{padding:var(--rd-sp-1) var(--rd-sp-3);border-radius:var(--rd-r-full);background:var(--rd-ink-on-fill);color:var(--rd-ink-fixed);
  font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption);font-weight:var(--rd-fw-semi)}
.rd .rd-sg-gc-k{font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);letter-spacing:var(--rd-tr-caption);
  font-weight:var(--rd-fw-medium);color:color-mix(in oklab,var(--rd-ink-on-fill) 72%,transparent)}
.rd .rd-sg-gc-v{font-size:var(--rd-fs-display);line-height:var(--rd-lh-display);letter-spacing:var(--rd-tr-display);
  font-weight:var(--rd-fw-semi);font-variant-numeric:tabular-nums}
.rd .rd-sg-gc-d{display:inline-flex;align-items:center;gap:var(--rd-sp-1);font-size:var(--rd-fs-caption);line-height:var(--rd-lh-caption);
  letter-spacing:var(--rd-tr-caption);font-weight:var(--rd-fw-medium);color:color-mix(in oklab,var(--rd-ok) 40%,var(--rd-ink-on-fill))}
.rd .rd-sg-gc-d svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rd .rd-sg-gc-spark{display:block;width:100%;height:32px;margin-top:var(--rd-sp-1);overflow:visible}
.rd .rd-sg-gc-spark path{fill:none;stroke:var(--rd-accent-glow);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.rd .rd-sg-gc-spark path.is-fill{fill:color-mix(in oklab,var(--rd-accent-glow) 22%,transparent);stroke:none}
.rd .rd-sg-gc-text{display:flex;flex-direction:column;min-width:0}
.rd .rd-sg-gc.is-ring .rd-sg-gc-k{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-semi);color:var(--rd-ink-on-fill)}
.rd .rd-sg-ring{width:56px;height:56px;flex:none;rotate:-90deg}
.rd .rd-sg-ring circle{fill:none;stroke-width:4.5}
.rd .rd-sg-ring .is-track{stroke:color-mix(in oklab,var(--rd-ink-on-fill) 12%,transparent)}
.rd .rd-sg-ring .is-val{stroke:var(--rd-accent-glow);stroke-linecap:round;stroke-dasharray:64 100}
.rd .rd-sg-ring-n{position:absolute;left:var(--rd-sp-4);width:56px;text-align:center;font-size:var(--rd-fs-title);
  line-height:var(--rd-lh-title);letter-spacing:var(--rd-tr-title);font-weight:var(--rd-fw-semi);font-variant-numeric:tabular-nums}
/* 960-1199px: a narrower panel - the lead card over the number, full width; the ring steps out */
@media (min-width:960px) and (max-width:1199px){
  .rd .rd-sg{grid-template-columns:minmax(0,1fr) minmax(0,420px)}
  .rd .rd-sg-panel{padding:var(--rd-sp-8)}
  .rd .rd-sg-stack{grid-template-columns:minmax(0,1fr)}
  .rd .rd-sg-gc.is-ring{display:none}
}

/* the quiet "How Bidbrain works" link in the foot opens the full explanation (the sheet) at every width: the panel
   shows the product, not the explanation */
@media (min-width:960px) and (max-height:760px){
  .rd .rd-sg-main{padding-top:var(--rd-sp-6);padding-bottom:var(--rd-sp-6)}
  .rd .rd-sg-body{padding:var(--rd-sp-6) 0}
  .rd .rd-sg-panel{padding:var(--rd-sp-8)}
}
@media (min-width:1200px) and (max-height:760px){
  .rd .rd-sg-stack{height:320px}
  .rd .rd-sg-gc.is-num{top:116px}
  .rd .rd-sg-gc.is-ring{top:224px}
}
/* narrow: one column, no panel; the link under the form opens the sheet */
@media (max-width:959px){
  .rd .rd-sg{display:block}
  .rd .rd-sg-main{min-height:100vh;min-height:100dvh;padding:var(--rd-sp-6) var(--rd-sp-6) var(--rd-sp-4)}
  .rd .rd-sg-panel{display:none}
  .rd .rd-sg-body{padding:var(--rd-sp-8) 0}
}
@media (max-width:520px){
  .rd .rd-sg-main{padding:var(--rd-sp-4)}
  .rd .rd-sg-body{justify-content:flex-start;padding:var(--rd-sp-8) 0 var(--rd-sp-6)}
  .rd .rd-sg-logo svg{height:20px}
  .rd .rd-sg-title-xl{font-size:var(--rd-fs-heading);line-height:var(--rd-lh-heading);letter-spacing:var(--rd-tr-heading)}
  .rd .rd-sg-title{font-size:var(--rd-fs-heading);line-height:var(--rd-lh-heading);letter-spacing:var(--rd-tr-heading)}
  .rd .rd-sg-card{padding:var(--rd-sp-4)}
  .rd .rd-sg-choice{grid-template-columns:40px minmax(0,1fr) 18px;gap:var(--rd-sp-3);padding:var(--rd-sp-3)}
  .rd .rd-sg-choice + .rd-sg-choice::before{left:64px;right:var(--rd-sp-3)}
  .rd .rd-sg-choice-icon{width:40px;height:40px}
}
@media (max-width:959px),(pointer:coarse){
  .rd .rd-sg-back{min-height:var(--rd-h-lg)}
}

/* ============================================================================ narrow screens: the sheet rises from the bottom */
@media (max-width:959px){
  .rd .rd-li-sheet{top:auto;left:0;width:auto;max-height:86dvh;border-left:0;border-top:var(--rd-border);
    border-color:var(--rd-rim,var(--rd-line));border-radius:var(--rd-r-overlay) var(--rd-r-overlay) 0 0;
    translate:0 calc(100% + var(--rd-sp-6))}
  .rd .rd-li-sheet.is-open{translate:0 0}
  .rd .rd-li-sheet-head{padding:var(--rd-sp-6) var(--rd-sp-4) var(--rd-sp-2) var(--rd-sp-6)}
  .rd .rd-li-sheet-body{padding:0 var(--rd-sp-6) var(--rd-sp-8)}
  .rd .rd-lg-chev{rotate:180deg}
}
/* Phones and touch screens: the small text controls are 44px tall. Show / Hide keeps its 36px pill - a 4px
   transparent border grows the box to the field's full 44px and the background is clipped inside it. */
@media (max-width:959px),(pointer:coarse){
  .rd .bb-pw-t{right:0;height:var(--rd-h-lg);border:var(--rd-sp-1) solid transparent;background-clip:padding-box;
    border-radius:calc(var(--rd-r-chip) + var(--rd-sp-1))}
  .rd .bb-pw-t:focus-visible{outline-offset:calc(var(--rd-sp-1) * -1 - 2px)}
  .rd .rd-lg-toggle{height:var(--rd-h-lg)}
  .rd .rd-li-close{width:var(--rd-h-lg);height:var(--rd-h-lg)}
}

/* ============================================================================ preferences */
@media (prefers-reduced-motion:reduce){
  /* no entrance, no view fade; the sheet cross-fades */
  .rd .rd-lg-toggle,.rd .rd-sg-view,.rd .rd-sg-gc,.rd .rd-sg-moments,.rd .rd-sg-glow,.rd .rd-lg-err:not(:empty){animation:none}
  .rd .rd-sg-gc,.rd .rd-sg-dots i{transition:none}
  .rd .rd-sg-choice:hover .rd-sg-choice-chev{translate:none}
  .rd .rd-li-sheet,.rd .rd-li-sheet.is-open{translate:none;opacity:0;
    transition:opacity var(--rd-dur-2) ease,visibility 0s linear var(--rd-dur-2)}
  .rd .rd-li-sheet.is-open{opacity:1;transition:opacity var(--rd-dur-2) ease,visibility 0s}
  .rd .err.bb-shake{animation:none}
  /* the field's focus ring snaps on rather than fading (the autofocused field otherwise animates on load) */
  .rd .bb-pw input{transition:none}
}
@media (prefers-reduced-transparency:reduce){
  .rd .rd-li-sheet,.rd .rd-sg-choices,.rd .rd-sg-card{background:var(--rd-s1);-webkit-backdrop-filter:none;backdrop-filter:none}
  .rd .rd-sg-gc{background:color-mix(in oklab,var(--rd-ink-on-fill) 10%,var(--rd-ink-fixed));-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  .rd .rd-sg-choices,.rd .rd-sg-card{border:var(--rd-border-strong)}
  .rd .rd-lg-help{color:var(--rd-ink-2)}
}
@media print{
  .rd .rd-sg-choices,.rd .rd-sg-card{box-shadow:none}
  .rd .rd-sg-panel{display:none}
}

/* ============================================================================ the backdrop (2026-10-29)
   Drawn, not a picture: the page's own ground, two large soft lights in the theme's glow colours (the accent glow
   behind the form, the info hue low on the right) drifting on 26s / 32s loops, a 24px dot grid faded out from
   around the form, and a breath of grain. .rd-sg-bg is one fixed, inert layer under .rd-sg (aria-hidden, in
   login.html and join.html). Only transform and opacity move; nothing moves under reduced motion. The strengths
   are --sg-* on the layer, lower on the light grounds. The supplied backdrop art (login_bg_*.webp) and the glass
   themes' own glow layer (rd_ui.css, html::before) are not drawn here - this sheet loads on these two pages only. */
html.rd{background:var(--rd-canvas)}
html.rd[data-rd-theme="glass-dark"],html.rd[data-rd-theme="midnight-dark"]{background:var(--rd-bg)}
html.rd[data-rd-theme="glass-dark"]::before,html.rd[data-rd-theme="midnight-dark"]::before{display:none}
.rd .rd-sg-bg{--sg-a:12%;--sg-b:12%;--sg-dot:13%;--sg-grain:.07;
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:strict}
@media (prefers-color-scheme:light){
  html.rd:not([data-rd-theme$="dark"]) .rd-sg-bg{--sg-a:16%;--sg-b:11%;--sg-dot:11%;--sg-grain:.05}
}
/* the blue dark themes take the stronger light: their glow is a dim sky; the gold one is brighter, so it stays at 12% */
html.rd:is([data-rd-theme="glass-dark"],[data-rd-theme="midnight-dark"],[data-rd-theme="brand-dark"]) .rd-sg-bg{--sg-a:24%;--sg-b:18%}
html.rd[data-rd-theme="light"] .rd-sg-bg,html.rd[data-rd-theme="brand"] .rd-sg-bg{--sg-a:16%;--sg-b:11%;--sg-dot:11%;--sg-grain:.05}
.rd .rd-sg-glow{position:absolute;border-radius:var(--rd-r-full);will-change:transform}
.rd .rd-sg-glow.is-a{left:30%;top:46%;width:min(1100px,120vmax);aspect-ratio:1;translate:-50% -50%;
  background:radial-gradient(closest-side,color-mix(in oklab,var(--rd-accent-glow) var(--sg-a),transparent),transparent);
  animation:rdSgDriftA 26s ease-in-out infinite alternate}
.rd .rd-sg-glow.is-b{left:78%;top:92%;width:min(1000px,110vmax);aspect-ratio:1;translate:-50% -50%;
  background:radial-gradient(closest-side,color-mix(in oklab,var(--rd-info) var(--sg-b),transparent),transparent);
  animation:rdSgDriftB 32s ease-in-out infinite alternate}
@keyframes rdSgDriftA{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.08)}}
@keyframes rdSgDriftB{from{transform:translate3d(3%,2%,0) scale(1.06)}to{transform:translate3d(-5%,-4%,0) scale(.96)}}
.rd .rd-sg-grid{position:absolute;inset:0;
  background-image:radial-gradient(circle,color-mix(in oklab,var(--rd-ink-1) var(--sg-dot),transparent) 1px,transparent 1.5px);
  background-size:24px 24px;background-position:center;
  -webkit-mask-image:radial-gradient(42% 56% at 30% 50%,var(--rd-ink-1),transparent);
  mask-image:radial-gradient(42% 56% at 30% 50%,var(--rd-ink-1),transparent)}
.rd .rd-sg-bg::after{content:"";position:absolute;inset:0;opacity:var(--sg-grain);mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* one column: the lights and the grid centre on the form */
@media (max-width:959px){
  .rd .rd-sg-glow.is-a{left:50%;top:34%}
  .rd .rd-sg-glow.is-b{left:90%;top:96%}
  .rd .rd-sg-grid{-webkit-mask-image:radial-gradient(70% 46% at 50% 38%,var(--rd-ink-1),transparent);
    mask-image:radial-gradient(70% 46% at 50% 38%,var(--rd-ink-1),transparent)}
}
@media (prefers-contrast:more){
  html.rd body > .rd-sg-bg[aria-hidden]{--sg-a:8%;--sg-b:6%;--sg-grain:0}
}
@media print{
  html.rd,html.rd[data-rd-theme]{background:none}
  .rd .rd-sg-bg{display:none}
}