/* ============================================================
   SHARED_AUTH auth wizard — page styles (the ONLY app stylesheet)
   2026-07-11 redesign port: brand-adaptive split-panel card,
   per-site accent from --site-primary, self-hosted type.
   Aesthetic: "refined trust" (approved mockup .sa98-ui-analysis).
   CSP: no inline styles anywhere; fonts + icons self-hosted.
   Units: rem/vh/vw/% only — ZERO px (DEV_GUIDE rule #1).
   Themes: :root = dark defaults; html[data-theme="light"] overrides
   (auth-theme-init.js sets class + data-theme before paint).
   ============================================================ */

/* ---------------- Self-hosted fonts (OFL — see fonts/README.md) --------- */
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-italic-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* ---------------- Design tokens ---------------- */
:root {
  /* Brand pipe (D5): --site-primary is injected per-site at runtime by
     _renderAuthHeader from GET /api/branding/{site}; the retuned house
     gold is the fallback. --c-on-accent is recomputed in JS from the
     brand color's luminance (dark ink on light accents, white on dark);
     the static default pairs with the gold fallback. */
  --site-primary: #c9a84c;
  --c-accent: var(--site-primary, #c9a84c);
  --c-on-accent: #16181d;
  /* Accent used AS TEXT on the surface: full accent works on dark surfaces;
     the light theme darkens it (below) so pale brand colors (the gold
     fallback included) stay >=4.5:1 on white. */
  --c-accent-ink: var(--c-accent);
  --c-accent-tint: color-mix(in srgb, var(--c-accent) 14%, transparent);
  --c-accent-soft: color-mix(in srgb, var(--c-accent) 8%, transparent);
  --c-accent-hover: color-mix(in srgb, var(--c-accent) 88%, #000);
  --c-accent-glow: color-mix(in srgb, var(--c-accent) 55%, transparent);

  --font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  --r-card: 1.25rem;
  --r-field: 0.7rem;
  --r-pill: 999rem;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .42s;

  /* Dark theme (default) */
  --bg: #0b0e14;
  --bg-grad-a: #0d1119;
  --bg-grad-b: #090b10;
  --surface: #121722;
  --surface-2: #0e131c;
  --field: #0f141d;
  --field-border: #232b39;
  --field-border-focus: var(--c-accent);
  --ink: #eef2f8;
  --ink-2: #aeb8c8;
  --ink-3: #94a0b4;
  --hair: #1e2634;
  --hair-2: #262f3f;
  --shadow: 0 2rem 4rem -1.5rem rgba(0, 0, 0, .7), 0 1rem 2rem -1rem rgba(0, 0, 0, .5);
  --brand-ink: #ffffff;
  --brand-ink-2: rgba(255, 255, 255, .85);
  --c-error: #f87171;
  --c-error-bg: color-mix(in srgb, #ef4444 12%, transparent);
  --c-success: #34d399;
  --c-warn: #fbbf24;
}

html[data-theme="light"] {
  --bg: #f4f1ee;
  --bg-grad-a: #f6f3f0;
  --bg-grad-b: #efe9e4;
  --surface: #ffffff;
  --surface-2: #faf8f6;
  --field: #faf8f7;
  --field-border: #e6ded9;
  --ink: #1c1a20;
  --ink-2: #575061;
  --ink-3: #746d80;
  --hair: #ece6e2;
  --hair-2: #e2dad5;
  --shadow: 0 2rem 4rem -1.5rem rgba(60, 30, 45, .18), 0 1rem 2rem -1rem rgba(60, 30, 45, .10);
  --brand-ink: #ffffff;
  --brand-ink-2: rgba(255, 255, 255, .92);
  /* Text-accent darkened for AA on white (gold fallback: 5.9:1); hover
     goes darker still so the hover STATE also clears AA. */
  --c-accent-ink: color-mix(in srgb, var(--c-accent) 58%, #000);
  --c-accent-hover: color-mix(in srgb, var(--c-accent) 45%, #000);
  --c-error: #b91c1c;
  --c-error-bg: color-mix(in srgb, #dc2626 8%, transparent);
  --c-success: #047857;
  --c-warn: #92400e;
}

/* ---------------- Base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden { display: none !important; }

.otl-noscript {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  max-width: 28rem;
  margin: 0;
  padding: 1rem 1.25rem;
  border-radius: var(--r-field);
  background: var(--surface);
  color: var(--ink);
  border: 0.0625rem solid var(--hair-2);
  box-shadow: var(--shadow);
}

/* ---------------- Background layers ---------------- */
.auth-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--bg);
  background-image: radial-gradient(120% 80% at 100% 0%, var(--bg-grad-a), var(--bg-grad-b));
}
.auth-bg::before {
  content: "";
  position: absolute;
  width: 44rem;
  height: 44rem;
  right: -14rem;
  top: -16rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-accent-soft), transparent 70%);
  pointer-events: none;
}
.auth-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 12.5rem;
}

/* ---------------- Minimal auth header (D6) ---------------- */
.auth-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem clamp(1.25rem, 4vw, 3rem) 0;
}
.auth-hdr-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  min-height: 2.75rem;
  text-decoration: none;
}
.auth-hdr-brand:hover .auth-hdr-name { text-decoration: underline; }
.auth-hdr-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .6rem;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 1rem;
  color: var(--c-on-accent);
  background: linear-gradient(135deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 55%, #14060d));
  box-shadow: 0 .4rem 1rem -.3rem var(--c-accent-glow);
  overflow: hidden;
}
.auth-hdr-icon img { width: 100%; height: 100%; object-fit: cover; }
.auth-hdr-name { white-space: nowrap; }
.h-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .86rem;
  color: var(--ink-2);
}
.h-hint { white-space: nowrap; }
.theme-toggle {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-pill);
  border: 0.0625rem solid var(--hair-2);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1rem;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); }

/* ---------------- Stage: full-viewport centering ---------------- */
/* ~1in (6rem) guaranteed gutters on every side; card centered both axes
   (desktop, mobile handled below, and TV-class widths via the 64rem cap). */
.auth-page {
  height: 100vh;
  height: 100dvh; /* mobile URL-bar-aware; 100vh line above is the fallback */
  display: grid;
  place-items: center;
  /* `safe` guarantees overflow becomes a page SCROLLBAR, never clipped
     content: if the card is ever taller than the stage (exotic zoom /
     scaling combos), it aligns to start instead of losing both edges. */
  place-items: safe center;
  padding: max(6rem, 7vh) max(6rem, 5vw);
}
.stage-inner {
  width: 100%;
  max-width: 64rem;
  max-height: 100%;
  display: flex;
  justify-content: center;
}

/* ---------------- Card: split panel ---------------- */
/* Fixed height (not max-height) so the card NEVER resizes/jumps when
   switching between short (sign-in) and tall (register) views — only the
   internal form pane scrolls. 70vh locked with the user (deliberately not
   the 85vh modal convention). */
.auth-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  width: 100%;
  /* 70vh, continuously clamped so the card can never exceed the viewport
     minus the minimum gutters — identical to plain 70vh on any viewport
     >=40rem tall, a hard safety net everywhere else. */
  height: min(70vh, calc(100vh - 12rem));
  height: min(70vh, calc(100dvh - 12rem));
  background: var(--surface);
  border: 0.0625rem solid var(--hair);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow);
  animation: cardIn var(--dur) var(--ease) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(1.2rem) scale(.99); }
  to { opacity: 1; transform: none; }
}
.auth-card[hidden], .auth-card.hidden { display: none !important; }

/* ---------------- Wide-pane mode: site selection at scale ----------------
   The network has 20+ sites — site-selection views (the bulk-login picker
   and the register sites step) collapse the brand pane and take the FULL
   card width, old-layout style, so the grid scales to as many columns as
   fit. Toggled per card by the flow engine; every other step keeps the
   split panel. */
.auth-card.wide-pane { grid-template-columns: 1fr; }
.auth-card.wide-pane .brand { display: none; }
.wide-pane .site-grid {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  max-height: 24rem;
}

/* ---------------- Brand pane ---------------- */
.brand {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.6rem);
  color: var(--brand-ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  /* Conservative default: deep accent-toned pane readable with ANY brand
     primary (incl. the pale gold fallback — white ink >=7:1). When
     _renderAuthHeader confirms a DARK brand primary it adds
     html.accent-deep, enabling the vivid approved-mockup gradient below. */
  background:
    radial-gradient(130% 90% at 0% 0%, color-mix(in srgb, var(--c-accent) 30%, transparent), transparent 60%),
    linear-gradient(150deg, color-mix(in srgb, var(--c-accent) 38%, #1c0f18), color-mix(in srgb, var(--c-accent) 20%, #120a10));
}
html.accent-deep .brand {
  background:
    radial-gradient(130% 90% at 0% 0%, color-mix(in srgb, var(--c-accent) 92%, transparent), transparent 60%),
    linear-gradient(150deg, color-mix(in srgb, var(--c-accent) 88%, #2a0a1a), color-mix(in srgb, var(--c-accent) 45%, #1a0510));
}
.brand::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.brand::before {
  content: "";
  position: absolute;
  width: 24rem;
  height: 24rem;
  right: -8rem;
  top: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%);
  pointer-events: none;
}
.brand > * { position: relative; z-index: 1; }
.brand-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-ink-2);
}
.brand-dot {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 .28rem rgba(255, 255, 255, .18);
}
.brand-head {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  margin: .9rem 0 .7rem;
}
.brand-head em { font-style: italic; color: #fff; }
.brand-sub {
  font-size: .95rem;
  color: var(--brand-ink-2);
  max-width: 24rem;
  line-height: 1.55;
  margin: 0;
}
.brand-feats {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin-top: .4rem;
}
.brand-feat {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .9rem;
  color: var(--brand-ink-2);
}
.brand-feat i {
  width: 1.3rem;
  flex: none;
  text-align: center;
  color: #fff;
  opacity: .92;
}
.brand-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.brand-badge {
  font-size: .72rem;
  font-weight: 600;
  padding: .34rem .7rem;
  border-radius: var(--r-pill);
  color: var(--brand-ink);
  background: rgba(255, 255, 255, .12);
  border: 0.0625rem solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(0.25rem);
}
.icon-spacer { margin-right: .3rem; }

/* ---------------- Form pane (footer pinned, inner region scrolls) ------ */
/* The footer lives OUTSIDE the scroll region so the primary CTA can never
   be buried below the fold on tall panes (QA F5); only .pane-scroll
   scrolls, with a styled stable-gutter scrollbar. */
.form-pane {
  padding: clamp(1.5rem, 2.6vw, 2.5rem) clamp(1.5rem, 2.8vw, 2.75rem);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.pane-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--hair-2) transparent;
  padding-right: .25rem;
}
.pane-scroll::-webkit-scrollbar { width: .45rem; }
.pane-scroll::-webkit-scrollbar-track { background: transparent; }
.pane-scroll::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: var(--r-pill); }
.pane-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ---------------- Flow tabs (Sign in / Create account) ---------------- */
.auth-tabs {
  display: inline-flex;
  padding: .28rem;
  gap: .2rem;
  background: var(--surface-2);
  border: 0.0625rem solid var(--hair);
  border-radius: var(--r-pill);
  align-self: flex-start;
  margin-bottom: 1.4rem;
  flex: none;
}
.modal-tab {
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-3);
  padding: .5rem 1rem;
  min-height: 2.75rem;
  border-radius: var(--r-pill);
  border: 0.0625rem solid transparent;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .22s var(--ease), background .22s var(--ease);
}
.modal-tab:hover { color: var(--ink-2); }
.modal-tab.active {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--hair-2);
  box-shadow: 0 .2rem .6rem -.2rem rgba(0, 0, 0, .25);
}
html[data-theme="light"] .modal-tab.active { color: var(--c-accent-ink); }

/* ---------------- Branch chip (D3) ---------------- */
.branch-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--c-accent-ink);
  background: var(--c-accent-tint);
  border: 0.0625rem solid var(--c-accent-soft);
  padding: .34rem .7rem;
  border-radius: var(--r-pill);
  margin-bottom: .9rem;
  width: fit-content;
  flex: none;
}
.branch-chip[hidden] { display: none; }

/* ---------------- Pane head ---------------- */
.pane-head { margin-bottom: 1.1rem; flex: none; }
.pane-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
  outline: none;
}
.step-desc {
  font-size: .9rem;
  color: var(--ink-2);
  margin: 0 0 1.1rem;
  line-height: 1.55;
}
.step-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink);
  margin: 0 0 .5rem;
  outline: none;
}

/* ---------------- Register word-stepper ---------------- */
.word-stepper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1.1rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--ink-3);
  flex: none;
}
.word-step {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: color .2s var(--ease);
}
.word-step-num {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 0.0625rem solid var(--hair-2);
  font-size: .66rem;
  color: var(--ink-3);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.word-step.active { color: var(--c-accent-ink); }
.word-step.active .word-step-num {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}
.word-step.done { color: var(--ink-2); }
.word-step.done .word-step-num {
  background: var(--c-accent-tint);
  border-color: var(--c-accent-soft);
  color: var(--c-accent-ink);
}
.word-step-sep { font-size: .66rem; color: var(--ink-3); opacity: .6; }
.step-label-mobile {
  display: none;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: .9rem;
}

/* ---------------- Step panes + transitions ---------------- */
/* flex:none is load-bearing: as a flex child of the scrolling .form-pane,
   the stack must NOT shrink — shrinking would let tall pane content
   overflow over the footer instead of engaging the pane's own
   overflow-y scroll. */
.pane-stack { position: relative; flex: none; }
.step-pane { display: none; }
.step-pane.active {
  display: block;
  animation: viewIn .34s var(--ease) both;
}
.step-pane.exiting { display: none; }
@keyframes viewIn {
  from { opacity: 0; transform: translateX(.6rem); }
  to { opacity: 1; transform: none; }
}

/* Staggered first-load entrance (mockup .entering) */
.entering .form-group,
.entering .row-between,
.entering .auth-tabs,
.entering .form-row { animation: fieldIn .5s var(--ease) both; }
.entering .auth-tabs { animation-delay: .02s; }
.entering .form-group:nth-of-type(1) { animation-delay: .08s; }
.entering .form-group:nth-of-type(2) { animation-delay: .14s; }
.entering .row-between { animation-delay: .2s; }
@keyframes fieldIn {
  from { opacity: 0; transform: translateY(.5rem); }
  to { opacity: 1; transform: none; }
}

/* ---------------- Form controls ---------------- */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  max-width: 28rem;
}
.form-group { margin-bottom: 1.05rem; max-width: 28rem; }
.form-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: .4rem;
}
.req-asterisk { color: var(--c-accent); margin-left: .15rem; }
.optional-tag { font-weight: 400; color: var(--ink-3); font-size: .78rem; }
.form-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 28rem;
}
.form-input-wrap .form-input-icon {
  position: absolute;
  left: .95rem;
  font-size: .95rem;
  color: var(--ink-3);
  pointer-events: none;
  z-index: 1;
}
.form-input {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--field);
  border: 0.0625rem solid var(--field-border);
  border-radius: var(--r-field);
  padding: .8rem .9rem .8rem 2.6rem;
  min-height: 2.75rem;
  outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.form-input.has-peek { padding-right: 3rem; }
.form-input::placeholder { color: var(--ink-3); }
.form-input:focus {
  border-color: var(--field-border-focus);
  box-shadow: 0 0 0 .22rem var(--c-accent-tint);
}
.peek {
  position: absolute;
  right: .1rem;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: .95rem;
  border-radius: var(--r-field);
}
.peek:hover { color: var(--ink); }
.form-error {
  color: var(--c-error);
  font-size: .8rem;
  margin-top: .35rem;
}
.form-error:empty { display: none; }

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin: -.1rem 0 1rem;
  flex-wrap: wrap;
  max-width: 28rem;
}

/* Custom checkboxes (role="checkbox" rows) */
.cb-row {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  cursor: pointer;
  font-size: .86rem;
  color: var(--ink-2);
  user-select: none;
  padding: .55rem 0;
  min-height: 2.75rem;
  max-width: 28rem;
}
.cb-box {
  width: 1.15rem;
  height: 1.15rem;
  min-width: 1.15rem;
  flex: none;
  border-radius: .35rem;
  border: 0.09rem solid var(--field-border);
  background: var(--field);
  display: grid;
  place-items: center;
  transition: background .18s var(--ease), border-color .18s var(--ease);
  margin-top: .1rem;
}
.cb-row:hover .cb-box { border-color: var(--c-accent); }
.cb-check {
  font-size: .62rem;
  color: var(--c-on-accent);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.cb-row[aria-checked="true"] .cb-box {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.cb-row[aria-checked="true"] .cb-check { opacity: 1; transform: none; }
.cb-text { line-height: 1.45; }

/* Links — standalone link-buttons meet the 2.75rem touch floor via
   min-height; inline prose links (.forgot-link.inline) are exempt per the
   WCAG 2.5.8 inline exception. */
.link-btn {
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  color: var(--c-accent-ink);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}
.link-btn:hover { text-decoration: underline; color: var(--c-accent-hover); }
.forgot-link { color: var(--c-accent-ink); font-size: .84rem; font-weight: 600; text-decoration: none; }
.forgot-link:hover { text-decoration: underline; color: var(--c-accent-hover); }
.forgot-link.inline { display: inline; min-height: 0; }
.alt-line {
  font-size: .82rem;
  color: var(--ink-3);
  margin: 1rem 0 0;
}
.verify-hint { font-size: .84rem; color: var(--ink-2); margin: 1rem 0 0; }

/* ---------------- Buttons ---------------- */
.btn {
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  border-radius: var(--r-field);
  padding: .8rem 1.3rem;
  min-height: 2.75rem;
  cursor: pointer;
  border: 0.0625rem solid transparent;
  transition: transform .12s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  white-space: nowrap;
}
.btn:disabled { opacity: .6; cursor: default; }
.btn-primary {
  color: var(--c-on-accent);
  background: var(--c-accent);
  box-shadow: 0 .6rem 1.4rem -.5rem var(--c-accent-glow);
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-0.0625rem);
  box-shadow: 0 .9rem 1.8rem -.5rem var(--c-accent-glow);
}
.btn-primary:active { transform: translateY(0); }
.btn-success {
  color: var(--c-on-accent);
  background: var(--c-accent);
  box-shadow: 0 .6rem 1.4rem -.5rem var(--c-accent-glow);
}
.btn-success:hover:not(:disabled) { transform: translateY(-0.0625rem); }
.btn-ghost {
  color: var(--ink-2);
  background: transparent;
  border-color: var(--hair-2);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-3); }
.hidden-back { visibility: hidden; }

/* Footer pinned to the pane bottom (inside the scroller, mockup
   .form-foot pattern: margin-top:auto). */
.auth-card-footer {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: auto;
  padding-top: 1.3rem;
  flex: none;
}
.auth-card-footer .btn-primary,
.auth-card-footer .btn-success { flex: 1; }

/* Back-hidden steps (sign-in step 1 / success, register sites / done, etc.):
   the empty Back slot used to shove the primary CTA against the right edge
   (asymmetric). Center it instead, keeping it a large button. Desktop only —
   the mobile block (@media max-width:52rem) already stacks the CTA full-width,
   and this rule must not override that (higher :has() specificity), so it is
   gated to the split-panel width. */
@media (min-width: 52.0625rem) {
  .auth-card-footer:has(.btn-ghost.hidden-back) { justify-content: center; }
  .auth-card-footer:has(.btn-ghost.hidden-back) .btn-ghost.hidden-back { display: none; }
  .auth-card-footer:has(.btn-ghost.hidden-back) .btn-primary,
  .auth-card-footer:has(.btn-ghost.hidden-back) .btn-success {
    flex: 0 1 auto;
    width: 100%;
    max-width: calc(100% - 6.5rem);  /* ~3.25rem symmetric inset each side */
  }
}

/* ---------------- OTP inputs ---------------- */
.otp-group {
  display: flex;
  gap: .6rem;
  margin: .3rem 0 .2rem;
  border: none;
  padding: 0;
}
.otp-input {
  width: 2.9rem;
  height: 3.4rem;
  text-align: center;
  font: inherit;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--field);
  border: 0.0625rem solid var(--field-border);
  border-radius: var(--r-field);
  outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.otp-input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 .22rem var(--c-accent-tint);
}
.otp-input.filled { border-color: var(--c-accent-soft); }

/* ---------------- MFA ---------------- */
.mfa-tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.mfa-tab {
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-2);
  padding: .55rem .8rem;
  min-height: 2.75rem;
  border-radius: var(--r-field);
  border: 0.0625rem solid var(--field-border);
  background: var(--field);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.mfa-tab:hover { color: var(--ink); }
.mfa-tab.active {
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
  background: var(--c-accent-tint);
}
.mfa-pane { display: none; }
.mfa-pane.active { display: block; animation: viewIn .3s var(--ease) both; }
.mfa-sms-info { font-size: .86rem; color: var(--ink-2); margin: 0 0 .6rem; }
.mfa-sms-info strong { color: var(--ink); }
.backup-input {
  width: 100%;
  max-width: 18rem;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink);
  background: var(--field);
  border: 0.0625rem solid var(--field-border);
  border-radius: var(--r-field);
  padding: .8rem .9rem;
  min-height: 2.75rem;
  text-transform: uppercase;
  outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.backup-input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 .22rem var(--c-accent-tint);
}
.mfa-resend-wrap { margin: .8rem 0 0; }
.mfa-resend {
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  color: var(--c-accent-ink);
  background: none;
  border: none;
  padding: .5rem 0;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.mfa-resend:hover:not(:disabled) { text-decoration: underline; color: var(--c-accent-hover); }
.mfa-resend:disabled { color: var(--ink-3); cursor: default; }
.verify-back-wrap { margin-top: 1.2rem; }

/* ---------------- Role list ---------------- */
.role-list { display: flex; flex-direction: column; gap: .9rem; max-width: 28rem; }
.role-site {
  border: 0.0625rem solid var(--field-border);
  border-radius: var(--r-field);
  background: var(--field);
  padding: .9rem 1rem;
}
.role-site-hdr {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
  font-weight: 600;
  color: var(--ink);
  font-size: .92rem;
}
.role-site-hdr i { color: var(--c-accent); }
.site-name { flex: 1; }
.badge-primary {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-accent);
  background: var(--c-accent-tint);
  border: 0.0625rem solid var(--c-accent-soft);
  padding: .2rem .55rem;
  border-radius: var(--r-pill);
}
.role-select {
  width: 100%;
  font: inherit;
  font-size: .9rem;
  color: var(--ink);
  background: var(--surface);
  border: 0.0625rem solid var(--field-border);
  border-radius: var(--r-field);
  padding: .6rem .8rem;
  min-height: 2.75rem;
  cursor: pointer;
}
.role-select:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 .22rem var(--c-accent-tint);
}

/* ---------------- Site grid (register + bulk picker) ---------------- */
.mb-075 { margin-bottom: .75rem; }
.site-search { padding-left: 2.6rem; }
.sel-count { font-size: .82rem; color: var(--ink-2); margin: 0 0 .7rem; }
.sel-count b { color: var(--c-accent-ink); }
.site-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  max-height: 16rem;
  overflow-y: auto;
  padding-right: .2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--hair-2) transparent;
}
.site-grid::-webkit-scrollbar { width: .35rem; }
.site-grid::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: var(--r-pill); }
.site-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon name"
    "icon desc";
  align-items: center;
  column-gap: .65rem;
  row-gap: .1rem;
  padding: .7rem 2.1rem .7rem .8rem;
  min-height: 2.75rem;
  border: 0.09rem solid var(--field-border);
  border-radius: var(--r-field);
  background: var(--field);
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.site-card:hover:not(.locked) { border-color: var(--hair-2); }
.site-card.selected {
  border-color: var(--c-accent);
  background: var(--c-accent-tint);
}
/* Already-registered sites read as a settled "Joined" state — an outlined
   success check (top-right) + a green "Joined" label — deliberately distinct
   from the accent-FILLED "selected" pick, and non-interactive. Registration
   is once-per-email in the network, so these can't be re-selected. */
.site-card.locked { cursor: default; }
.site-card.locked .card-name { color: var(--ink-2); }
.site-card.locked .card-icon { opacity: .8; }
.site-card .card-desc.card-joined { color: var(--c-success); font-weight: 600; }
.site-card .card-check {
  position: absolute;
  top: .6rem;
  right: .6rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 0.09rem solid var(--field-border);
  display: grid;
  place-items: center;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.site-card .card-check i { font-size: .6rem; color: var(--c-on-accent); opacity: 0; }
.site-card.selected .card-check {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.site-card.selected .card-check i { opacity: 1; }
.site-card.locked .card-check {
  visibility: visible;
  background: transparent;
  border-color: var(--c-success);
}
.site-card.locked .card-check i { opacity: 1; color: var(--c-success); }
.site-card .card-icon {
  grid-area: icon;
  width: 2rem;
  height: 2rem;
  border-radius: .5rem;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--c-accent);
  font-size: .9rem;
  align-self: start;
}
.site-card .card-name {
  grid-area: name;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-card .card-desc {
  grid-area: desc;
  font-size: .72rem;
  color: var(--ink-3);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-card .card-desc:empty { display: none; }

/* ---------------- Success ---------------- */
.success-wrap { display: flex; flex-direction: column; align-items: flex-start; }
.done-check,
.success-icon-ring {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--c-accent-tint);
  border: 0.0625rem solid var(--c-accent-soft);
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  font-size: 1.5rem;
  color: var(--c-accent);
  animation: successReveal .5s var(--ease) both;
}
@keyframes successReveal {
  from { opacity: 0; transform: scale(.6); }
  to { opacity: 1; transform: none; }
}
.success-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--ink);
  margin: 0 0 .4rem;
  outline: none;
}
.success-desc { font-size: .9rem; color: var(--ink-2); margin: 0 0 1.1rem; }
.access-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .86rem;
  border: 0.0625rem solid var(--hair);
  border-radius: var(--r-field);
  overflow: hidden;
}
.access-table th {
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
  background: var(--surface-2);
  padding: .55rem .8rem;
  border-bottom: 0.0625rem solid var(--hair);
}
.access-table td {
  padding: .6rem .8rem;
  border-bottom: 0.0625rem solid var(--hair);
  color: var(--ink-2);
}
.access-table tbody tr:last-child td { border-bottom: none; }
.access-table td:first-child { color: var(--ink); font-weight: 600; }
.row-status {
  font-size: .74rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.row-status-ok { color: var(--c-success); background: color-mix(in srgb, var(--c-success) 12%, transparent); }
.row-status-err { color: var(--c-error); background: var(--c-error-bg); }
.row-status-muted { color: var(--ink-3); background: var(--surface-2); }
.redirect-note {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .84rem;
  color: var(--ink-3);
  margin: 1.1rem 0 0;
}
.redirect-note .spin {
  width: 1rem;
  height: 1rem;
  border: 0.125rem solid var(--hair-2);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  animation: sp 1s linear infinite;
  flex: none;
}
@keyframes sp { to { transform: rotate(360deg); } }

/* ---------------- Error banner (built at runtime by _showError) -------- */
.otl-error.error-banner {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  background: var(--c-error-bg);
  border: 0.0625rem solid color-mix(in srgb, var(--c-error) 35%, transparent);
  border-radius: var(--r-field);
  padding: .8rem .9rem;
  margin: .9rem 0;
  max-width: 28rem;
  text-align: left;
}
.err-ico {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--c-error);
  color: #fff;
  font-weight: 800;
  font-size: .8rem;
  display: grid;
  place-items: center;
}
.err-body { font-size: .84rem; color: var(--ink-2); min-width: 0; flex: 1; }
.err-body strong { display: block; color: var(--ink); margin-bottom: .15rem; }
.err-body p { margin: 0; overflow-wrap: anywhere; }
.err-body ul { margin: .2rem 0 0 1rem; padding: 0; }
.err-body code {
  font-size: .74rem;
  color: var(--ink-3);
  background: var(--surface-2);
  padding: .05rem .3rem;
  border-radius: .25rem;
  word-break: break-word;
}

/* ---------------- Password strength ---------------- */
.pw-strength { margin-top: .5rem; max-width: 28rem; }
.pw-strength-track {
  height: .35rem;
  border-radius: var(--r-pill);
  background: var(--hair);
  overflow: hidden;
}
.pw-strength-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--hair-2);
  transition: width .25s var(--ease), background-color .25s var(--ease);
}
.pw-strength-fill.pw-weak { background: var(--c-error); }
.pw-strength-fill.pw-fair { background: var(--c-warn); }
.pw-strength-fill.pw-good { background: var(--c-warn); }
.pw-strength-fill.pw-strong { background: var(--c-success); }
.pw-strength-fill.pw-vstrong { background: var(--c-success); }
.pw-strength-text { font-size: .74rem; font-weight: 600; margin-top: .3rem; color: var(--ink-3); }
.pw-strength-text.pw-weak { color: var(--c-error); }
.pw-strength-text.pw-fair, .pw-strength-text.pw-good { color: var(--c-warn); }
.pw-strength-text.pw-strong, .pw-strength-text.pw-vstrong { color: var(--c-success); }

/* ---------------- Focus visibility (a11y) ---------------- */
/* Ring uses the ink variant: >=3:1 against the light surface even with
   the pale gold fallback accent. */
:focus-visible {
  outline: 0.14rem solid var(--c-accent-ink);
  outline-offset: 0.14rem;
}
/* Headings and error banners receive programmatic focus (announcement
   anchors); they are not interactive — no visible ring (QA F19/R2-N1). */
.pane-title:focus-visible,
.step-heading:focus-visible,
.success-title:focus-visible,
.otl-error:focus-visible {
  outline: none;
}

/* ---------------- Short viewports (wide-but-short) ----------------
   Scaled-display laptops (125-150% Windows scaling), split-screen
   windows and projectors present WIDE but SHORT viewports the mobile
   width-query never catches. The approved geometry (70vh card + ~1in
   gutters) needs ~44rem of height; below that, step the type down one
   notch and fit the card to the viewport with EQUAL gutters — the pane
   scroller absorbs the difference. Viewports >=44.0625rem tall (e.g.
   1280x800, 1920x1080) are pixel-for-pixel untouched. */
@media (min-width: 52.0625rem) and (max-height: 44rem) {
  html { font-size: 93.75%; }
  .auth-header { padding-top: .75rem; }
  .auth-page {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .auth-card {
    height: calc(100vh - 8rem);
    height: calc(100dvh - 8rem);
  }
}
/* Very short: fixed heights can no longer work — fall back to natural
   height and let the page itself scroll (nothing may ever be clipped). */
@media (min-width: 52.0625rem) and (max-height: 30rem) {
  .auth-page {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: start;
    padding-top: 4rem;
    padding-bottom: 2rem;
  }
  .auth-card { height: auto; }
  .form-pane { overflow: visible; }
  .pane-scroll { overflow: visible; scrollbar-gutter: auto; flex: none; padding-right: 0; }
}

/* ---------------- Mobile (<52rem): single column ---------------- */
@media (max-width: 52rem) {
  .auth-page {
    height: auto;
    min-height: 100vh;
    align-items: start;
    padding: 5.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0rem));
  }
  .auth-card {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .form-pane { overflow: visible; }
  .pane-scroll { overflow: visible; scrollbar-gutter: auto; flex: none; padding-right: 0; }
  .brand { padding: 1.5rem; gap: 1.1rem; }
  .brand-head { font-size: 1.5rem; margin: .5rem 0; }
  .brand-sub { display: none; }
  .brand-feats { flex-direction: row; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: 0; }
  .brand-feat { font-size: .78rem; }
  .brand-feat span { display: none; }
  .brand-badges { display: none; }
  .site-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .auth-header { padding-top: 1rem; }
  .h-hint { display: none; }
  .word-stepper { display: none; }
  .step-label-mobile { display: block; }
  .step-label-mobile.hidden { display: none; }
  .auth-card-footer { flex-wrap: wrap; padding-bottom: env(safe-area-inset-bottom, 0rem); }
  .auth-card-footer .btn-primary,
  .auth-card-footer .btn-success { flex: 1 1 100%; order: -1; }
  /* On mobile a hidden Back must not leave a phantom empty row under the
     full-width CTA (desktop keeps visibility-hidden for layout stability). */
  .auth-card-footer .btn-ghost.hidden-back { display: none; }
  /* 2.75rem touch floor: 6 x 2.75rem + 5 x .25rem gap = 17.75rem, fits the
     22.5rem minimum-width content box. */
  .otp-group { gap: .25rem; }
  .otp-input { width: 2.75rem; height: 3.2rem; }
}

/* Very large screens (smart TV): the 64rem stage cap keeps the card
   composed and perfectly centered; nudge base type up at 4K widths. */
@media (min-width: 160rem) {
  html { font-size: 112.5%; }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}