/* Reprise auth pages — standalone stylesheet.
   No dependency on the Reprise design system bundle: every value is a literal
   resolved from it (token name in the comment). Scope: base_auth.html only. */

@font-face { font-family: "Geist"; src: url("fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("fonts/RobotoSerif-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }

:root {
  --auth-navy: #0D0D41;            /* --navy / --fg */
  --auth-blue: #2364AD;            /* --blue / blue-600 */
  --auth-blue-700: #1D4B8E;
  --auth-fg-muted: rgba(13,13,65,.60);   /* --fg-muted, 4.70:1 on cream */
  --auth-border-strong: rgba(13,13,65,.20); /* --border-strong */
  /* product field tokens */
  --auth-field-text: #27292E;      /* --text-default */
  --auth-field-muted: #646875;     /* --text-muted */
  --auth-field-error: #DC2626;     /* --border-destructive */
  --auth-field-error-text: #991B1B;/* --text-destructive */
  /* radius */
  --auth-r-ui: 8px;                /* --radius-ui */
  --auth-r-frame-lg: 24px;         /* --radius-frame-lg */
  --auth-ease: cubic-bezier(.4,0,.2,1);
  --auth-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ── Page ─────────────────────────────────────────────────────────── */
.auth-body { margin: 0; background: #FCFBF7 /* --cream / --bg */; color: var(--auth-navy); font-family: var(--auth-sans); -webkit-font-smoothing: antialiased; }
.auth-body a { color: var(--auth-blue); text-decoration: none; }
.auth-body a:hover { text-decoration: underline; }
.auth-body *, .auth-body *::before, .auth-body *::after { box-sizing: border-box; }

.auth-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: 100vh; }
.auth-main { display: flex; flex-direction: column; padding: 36px 40px 28px; min-width: 0; }
.auth-logo { display: block; height: 26px; width: auto; align-self: flex-start; }
.auth-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 0; }
.auth-form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 28px; }
.auth-footer { display: flex; gap: 24px; font-size: 14px; color: var(--auth-fg-muted); }
.auth-footer a { color: var(--auth-fg-muted); }

/* ── Art panel (direction 7f: Dimensional + split orb) ─────────────── */
.auth-aside { padding: 16px; }
.auth-art { position: relative; height: 100%; min-height: 560px; border-radius: var(--auth-r-frame-lg); overflow: hidden;
  background: var(--auth-navy) url("auth-art.svg") center / cover no-repeat; container-type: size; }
.auth-art::before { content: ""; position: absolute; inset: 0; 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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; opacity: .12; pointer-events: none; }
.auth-art__comp { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(520px, 92cqw, calc(92cqh * 0.8125)); aspect-ratio: 520 / 640; }
.auth-orb { position: absolute; aspect-ratio: 1; border-radius: 999px; overflow: hidden;
  background: rgba(252,251,247,.66); border: 1px solid rgba(252,251,247,.60); box-shadow: 0 24px 60px -18px rgba(13,13,65,.30);
  -webkit-backdrop-filter: blur(14px) saturate(1.22) brightness(1.07); backdrop-filter: blur(14px) saturate(1.22) brightness(1.07); }
.auth-orb::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='110' height='110' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E"); background-size: 110px 110px; pointer-events: none; }
.auth-orb--main { left: 13.46%; top: 20.31%; width: 73.08%;
  /* hard-stop mask = a 24px horizontal slit through the middle (not a visual gradient) */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 46.84%, transparent 46.84%, transparent 53.16%, #000 53.16%);
          mask-image: linear-gradient(180deg, #000 0, #000 46.84%, transparent 46.84%, transparent 53.16%, #000 53.16%); }
.auth-orb--sat-a { left: 63.46%; top: 12.5%; width: 23.08%; }
.auth-orb--sat-b { left: 17.31%; top: 71.88%; width: 17.31%; }
/* Entrance, once per page load: the big disc arrives and turns until its slit
   sits level, then each small disc drifts in after it. */
@media (prefers-reduced-motion: no-preference) {
  .auth-orb { animation: 1000ms cubic-bezier(.2,.7,.2,1) both; }
  .auth-orb--main { animation-name: auth-orb-main-in; animation-duration: 1400ms; }
  .auth-orb--sat-a { animation-name: auth-orb-sat-a-in; animation-delay: 350ms; }
  .auth-orb--sat-b { animation-name: auth-orb-sat-b-in; animation-delay: 550ms; }
}
@keyframes auth-orb-main-in { from { rotate: -12deg; scale: .96; opacity: 0; } }
@keyframes auth-orb-sat-a-in { from { translate: 24px -18px; opacity: 0; } }
@keyframes auth-orb-sat-b-in { from { translate: -18px 24px; opacity: 0; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .auth-orb { background: rgba(252,251,247,.82); }
}

@media (max-width: 960px) {
  .auth-layout { grid-template-columns: minmax(0,1fr); }
  .auth-aside { display: none; }
  .auth-main { padding: 24px 20px 20px; }
}

/* ── Type ─────────────────────────────────────────────────────────── */
.auth-head { display: flex; flex-direction: column; gap: 10px; }
.auth-head--lede { gap: 12px; }
.auth-eyebrow { margin: 0; font-size: 14px; line-height: 1.2; font-weight: 400; color: rgba(13,13,65,.70); }
.auth-title { margin: 0; font-family: "Roboto Serif", "Iowan Old Style", Georgia, serif; font-weight: 300; font-size: 36px; line-height: 1.15; letter-spacing: -0.03em; color: var(--auth-navy); text-wrap: balance; }
.auth-lede { margin: 0; font-size: 16px; line-height: 1.5; color: var(--auth-fg-muted); text-wrap: pretty; }
.auth-lede strong { color: var(--auth-navy); font-weight: 400; }
.auth-fine { margin: 0; font-size: 14px; line-height: 1.45; color: var(--auth-fg-muted); text-wrap: pretty; }
.auth-stack { display: flex; flex-direction: column; gap: 16px; }
.auth-stack--tight { gap: 14px; }

/* ── Field ────────────────────────────────────────────────────────── */
.auth-field { display: flex; flex-direction: column; gap: 8px; }
.auth-field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.auth-field__row a { font-size: 14px; }
.auth-label { font-size: 14px; font-weight: 500; line-height: 1; color: var(--auth-field-text); }
.auth-input { display: block; width: 100%; height: 44px; margin: 0; padding: 0 20px; font: 400 14px var(--auth-sans); color: var(--auth-field-text);
  background: #fff; border: 1px solid #9CA0AD70 /* --border-default */; border-radius: var(--auth-r-ui); outline: none;
  box-shadow: inset 0 1px 2px 0 rgba(13,13,65,.07); transition: all 150ms var(--auth-ease); }
.auth-input::placeholder { color: var(--auth-field-muted); }
.auth-input:hover { border-color: #27292E99 /* --border-emphasis */; }
.auth-input:focus { border-color: var(--auth-blue); box-shadow: inset 0 1px 2px 0 rgba(13,13,65,.05), 0 0 0 3px rgba(35,100,173,.16); }
.auth-field--error .auth-label { color: var(--auth-field-error-text); }
.auth-field--error .auth-input, .auth-input[aria-invalid="true"] { border-color: var(--auth-field-error); }
.auth-field--error .auth-input:focus, .auth-input[aria-invalid="true"]:focus { box-shadow: inset 0 1px 2px 0 rgba(181,49,42,.08), 0 0 0 3px rgba(181,49,42,.14); }
.auth-field__error { margin: 0; font-size: 14px; line-height: 1.4; color: #B91C1C /* --danger / red-700 */; }

/* Read-only email (password step) */
.auth-identity { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px;
  border: 1px solid var(--auth-border-strong); border-radius: var(--auth-r-ui); background: #F7F5F0 /* --bg-elev-1 / sand-50 */; }
.auth-identity__email { font-size: 15px; color: var(--auth-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-identity a { font-size: 14px; flex-shrink: 0; }

/* Password rules */
.auth-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 14px; line-height: 1.4; color: var(--auth-fg-muted); }
.auth-rules li { display: flex; gap: 8px; }
.auth-rules li::before { content: "·"; color: var(--auth-blue); }

/* ── Buttons (product Button, size large 44px) ────────────────────── */
.auth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; padding: 0 20px; margin: 0;
  font: 500 16px/20px var(--auth-sans); border-radius: var(--auth-r-ui); cursor: pointer; white-space: nowrap; outline: none;
  transition: all 150ms var(--auth-ease); text-decoration: none; }
.auth-body a.auth-btn:hover { text-decoration: none; }
.auth-btn:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--auth-blue); }
.auth-btn:disabled { opacity: .5; cursor: not-allowed; }
.auth-btn--primary { background: var(--auth-blue); color: #fff; border: 1px solid var(--auth-blue-700); text-shadow: 0 1px 0 rgba(13,13,65,.25);
  box-shadow: 0 1px 0 0 rgba(13,13,65,.18), 0 1px 2px 0 rgba(13,13,65,.12), inset 0 1px 0 0 rgba(255,255,255,.14); }
.auth-body a.auth-btn--primary { color: #fff; }
.auth-btn--primary:not(:disabled):hover { background: var(--auth-blue-700); border-color: #16326F;
  box-shadow: 0 2px 0 0 rgba(13,13,65,.18), 0 3px 5px 0 rgba(13,13,65,.14), inset 0 1px 0 0 rgba(255,255,255,.16); }
.auth-btn--primary:not(:disabled):active { box-shadow: 0 1px 0 0 rgba(13,13,65,.18), inset 0 1px 2px 0 rgba(13,13,65,.28); }
.auth-btn--secondary { background: #F2F4F9; color: var(--auth-field-text); border: 1px solid #9CA0AD80; text-shadow: 0 1px 0 rgba(255,255,255,.8);
  box-shadow: 0 1px 0 0 rgba(13,13,65,.05), inset 0 1px 0 0 rgba(255,255,255,.8); }
.auth-body a.auth-btn--secondary { color: var(--auth-field-text); }
.auth-btn--secondary:not(:disabled):hover { background: #EAEDF0; box-shadow: 0 2px 0 0 rgba(13,13,65,.06), inset 0 1px 0 0 rgba(255,255,255,.9); }
.auth-btn--secondary:not(:disabled):active { box-shadow: inset 0 1px 2px 0 rgba(13,13,65,.1); }
.auth-btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Back / inline icon links */
.auth-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; align-self: flex-start; }

/* ── Icons (Lucide, 1.5px stroke at 24) ───────────────────────────── */
.auth-icon { width: 14px; height: 14px; flex-shrink: 0; display: block; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-spin { animation: auth-spin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .auth-spin { animation: none; } }

/* ── Banner (graded banner, size md) ──────────────────────────────── */
.auth-banner { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--auth-r-ui); border: 1px solid #9CA0AD4D;
  font: 500 14px/1.4 var(--auth-sans); letter-spacing: -0.28px; color: var(--auth-field-text); background: #FFFFFF; }
.auth-banner__text { flex: 1; min-width: 0; }
.auth-banner a { color: inherit; text-decoration: underline; }
.auth-banner .auth-icon { width: 16px; height: 16px; color: var(--auth-field-muted); }
.auth-banner--info { background: #F8FAFD; }
.auth-banner--info .auth-icon { color: var(--auth-blue); }
.auth-banner--warning { background: #FEFBE8; }
.auth-banner--warning .auth-icon { color: #CA8504; }
.auth-banner--error { background: #FEF2F2; border-color: var(--auth-field-error); color: var(--auth-field-error-text); }
.auth-banner--error .auth-icon { color: var(--auth-field-error); }

/* ── Detail card (MCP) ────────────────────────────────────────────── */
.auth-card { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: #fff; border: 1px solid var(--auth-border-strong); border-radius: var(--auth-r-frame-lg); }
.auth-card__lead { display: flex; flex-direction: column; gap: 4px; }
.auth-card__lead p { margin: 0; }
.auth-card__ask { color: var(--auth-navy); }
.auth-card__ask strong { font-weight: 500; }
.auth-card__rule { height: 1px; background: rgba(13,13,65,.10) /* --border */; border: 0; margin: 0; }
.auth-meta { display: grid; grid-template-columns: 18px auto minmax(0,1fr); gap: 12px 10px; align-items: center; font-size: 14px; margin: 0; }
.auth-meta > div { display: contents; }
.auth-meta .auth-icon { color: var(--auth-fg-muted); }
.auth-meta dt { color: var(--auth-fg-muted); margin: 0; }
.auth-meta dd { color: var(--auth-navy); text-align: right; margin: 0; overflow-wrap: anywhere; }
.auth-meta dd.auth-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
.auth-status { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #24A366 /* --success / green-500 */; }
.auth-waiting { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--auth-border-strong); border-radius: var(--auth-r-ui); font-size: 14px; color: var(--auth-fg-muted); }
.auth-waiting .auth-icon { color: var(--auth-blue); }