/* ══ THE SIGN-IN CARD — ONE STYLESHEET FOR EVERY SIGN-IN, SIGN-UP AND CONSENT SURFACE (2026-10-01) ══════════════
   The owner: "All of our sign-ins/sign-ups should be consistent." The app's sign-in card ("Sign in to your studio") is the
   reference: the theme's card, the hermoso.ai wordmark, white provider buttons with the Google / Apple / Microsoft
   logos, an "or" divider, the email field, Turnstile under the email, the accent-filled primary action and a muted
   Terms & Privacy line. These rules used to live inside style.css, which only the app loads, so the MCP consent page
   (mcp/oauth.mjs) carried its own cream-and-outline copy and the CLI / admin cards carried theirs. They live HERE now,
   and every surface links this one file:
     · public/index.html          the app's login gate (alongside style.css, which supplies the app's tokens)
     · mcp/oauth.mjs              the MCP / ChatGPT consent page and its refusal pages (standalone: body.auth-page)
     · lib/admin-session.mjs      the admin dashboard's sign-in page (standalone: body.auth-page)
     · public/app.js              the CLI "Authorize this device" card (rendered inside the app)
   The wordmark and the provider logos come from public/signin-marks.js, the one copy of that markup.

   STANDALONE PAGES GET THE APP'S OWN TOKEN VALUES. A page that is not the app does not load style.css (688KB), so
   body.auth-page below re-declares the handful of tokens these rules read, with the SAME values the app computes in
   each theme. tools/signin-surface-consistency-check.mjs renders the app card and the consent card side by side, in
   both themes, and fails on any computed difference — so a token change in style.css that is not mirrored here is a
   red check, not a silent drift. The theme itself is the app's own toggle (heist.theme, light by default), applied
   before paint by public/auth-theme.js; like the app, these pages do NOT follow prefers-color-scheme. ══ */
body.auth-page {
  --bg: #0a0a0a; --surface: #171717; --surface-2: #242424; --text: #fafafa; --ink: #fafafa;
  --muted: #a1a1a1; --faint: #8f8f8f; --border: #2a2a2a; --border-2: #3a3a3a; --border-3: #7d7d7d;
  --accent: #c74800; --accent-2: #a83d00; --accent-text: #ff7a2f; --accent-ink: #ffffff; --accent-line: #fa5d00;
  --font-display: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); color-scheme: dark;
  font-family: var(--font-body); font-size: 14px; line-height: 1.55; /* the app body's type, which the card inherits */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body.auth-page.light {
  --bg: #fafafa; --surface: #ffffff; --surface-2: #f0f0f0; --text: #171717; --ink: #fafafa;
  --muted: #4d4d4d; --faint: #6b6b6b; --border: #ebebeb; --border-2: #e0e0e0; --border-3: #7d7d7d;
  --accent: #c74800; --accent-2: #c94a00; --accent-text: #b84400; --accent-ink: #ffffff; --accent-line: #d24e00;
  color-scheme: light;
}
/* The app's global resets these rules were written against, scoped so they never reach the app itself. */
body.auth-page *, body.auth-page *::before, body.auth-page *::after { box-sizing: border-box; }
body.auth-page [hidden] { display: none !important; }
/* :where() keeps these at zero specificity, exactly like the app's element-level resets, so every class below wins. */
:where(body.auth-page a) { color: var(--accent-text); }
:where(body.auth-page h1) { font-family: var(--font-display); }
:where(body.auth-page button) { font: inherit; cursor: pointer; color: inherit; }
:where(body.auth-page input) { font: inherit; }

/* ── Login gate (cloud auth only — never shown in local dev) ───────────────────────── */
.authgate { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 24px; overflow: auto;
  background: radial-gradient(130% 100% at 50% -10%, var(--surface, #151516) 0%, var(--bg, #0a0a0b) 72%); }
.authgate[hidden] { display: none; }
.authgate-grain { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 50% 30%, transparent 40%, rgba(0,0,0,.28) 100%); }
/* THE SIGN-IN CARD'S SHADOW WAS PAINTING THE WHOLE PAGE GREY (2026-08-17). `0 30px 90px rgba(0,0,0,.38)` is a
   90px blur at 38% black, which on the old warm canvas read as depth and on flat monochrome reads as dirt: the
   viewport corners measured rgb(180,180,180) on prod while every background in the computed stack said #fafafa,
   so the vignette belonged to no element and could not be found by reading backgrounds. A 1px ring plus a short,
   tight shadow is the whole depth cue this system uses — the card is lifted off the page, not smeared across it.
   DARK KEEPS A DEEPER ONE deliberately: a near-black canvas swallows a 6% shadow, and there is no light ground
   for it to muddy. */
.authgate-card { position: relative; width: 100%; max-width: 384px; text-align: center;
  background: var(--surface, #fff); border: 1px solid var(--line, rgba(127,127,127,.18)); border-radius: 14px;
  padding: 38px 34px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 28px -18px rgba(0,0,0,.22); }
body:not(.light) .authgate-card { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 24px 64px -34px rgba(0,0,0,.75); }
.authgate-badge { display: inline-flex; align-items: center; gap: 0; margin-bottom: 22px;
  font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; font-size: 18px; color: var(--text, var(--ink, #1c1c1c)); }
.authgate-mark { width: 22px; height: 22px; color: var(--accent, #D85C42); display: inline-flex; margin-right: 8px; }
.authgate-mark svg { width: 100%; height: 100%; }
.authgate-word { display: inline-block; } /* one inline box, so .ai sits on the baseline of "hermoso" rather than being flex-centred on it */
.authgate-tld { color: var(--accent-text, #C0392B); font-size: .62em; opacity: .6; margin-left: 2px; }
.authgate-h { font-family: var(--font-display); font-size: 27px; line-height: 1.12; margin: 0 0 8px; color: var(--text, var(--ink, #1c1c1c)); }
.authgate-sub { font-family: var(--font-body); color: var(--muted, #6F635C); font-size: 14px; line-height: 1.5; margin: 0 0 26px; }
.authgate-google { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: #1f1f1f; border: 1px solid #dadce0; border-radius: 12px; padding: 12px 16px;
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px; cursor: pointer; transition: box-shadow .15s, transform .05s; }
.authgate-google:hover { box-shadow: 0 2px 12px rgba(0,0,0,.16); }
.authgate-google:active { transform: translateY(1px); }
/* The federated buttons are rendered from /api/auth/config, so there may be one (Google today) or three. A column
   with a gap keeps a single button pixel-identical to before while stacking the rest cleanly. */
.authgate-providers { display: flex; flex-direction: column; gap: 10px; }
.authgate-providers .authgate-google svg { flex: 0 0 auto; }
/* Apple's monochrome mark must follow the button's own ink (it uses currentColor), never the multi-colour Google set. */
.authgate-providers [data-signin-provider="apple"] { color: #1f1f1f; }
.authgate-relaynote { margin: 10px 0 0; text-align: left; }
.authgate-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted, #6F635C); font-size: 12px; font-family: var(--font-body); }
.authgate-or::before, .authgate-or::after { content: ""; flex: 1; height: 1px; background: var(--line, rgba(127,127,127,.2)); }
.authgate-email { display: flex; flex-direction: column; gap: 10px; }
.authgate-email input { width: 100%; box-sizing: border-box; background: var(--bg, #fff); border: 1px solid var(--line, rgba(127,127,127,.25));
  border-radius: 12px; padding: 12px 14px; color: var(--text, var(--ink, #1c1c1c)); font-family: var(--font-body); font-size: 14.5px; }
.authgate-email input:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 13%, transparent); }
.authgate-email button, .authgate-primary { width: 100%; background: var(--accent, #D85C42); color: var(--accent-ink, #FAF7F2); border: none; border-radius: 12px;
  padding: 12px 16px; font-family: var(--font-body); font-weight: 600; font-size: 14.5px; cursor: pointer; transition: filter .15s, transform .05s; }
.authgate-email button:hover, .authgate-primary:hover { filter: brightness(1.06); }
.authgate-email button:active, .authgate-primary:active { transform: translateY(1px); }
.authgate-email button:disabled, .authgate-primary:disabled { opacity: .6; cursor: default; }
.authgate-sso, .authgate-secondary { width: 100%; margin-top: 12px; background: transparent; border: 1px solid var(--line, rgba(127,127,127,.25));
  border-radius: 12px; padding: 11px 16px; font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
  color: var(--muted, #6F635C); cursor: pointer; transition: border-color .15s, color .15s, transform .05s; }
.authgate-sso:hover, .authgate-secondary:hover { border-color: var(--accent, #D85C42); color: var(--accent, #D85C42); }
.authgate-sso:active, .authgate-secondary:active { transform: translateY(1px); }
.authgate-sso:disabled, .authgate-secondary:disabled { opacity: .55; cursor: default; }
.authgate-msg { min-height: 18px; margin: 14px 0 0; font-family: var(--font-body); font-size: 13px; color: var(--accent-text, #C0392B); }
.authgate-fine { margin: 18px 0 0; font-family: var(--font-body); font-size: 11.5px; color: var(--muted, #6F635C); }
.authgate-fine a { color: inherit; text-decoration: underline; }
body.auth-gating { overflow: hidden; }
@media (max-width: 480px) { .authgate-card { padding: 30px 22px; } .authgate-h { font-size: 24px; } }

/* Magic-link SUCCESS panel — replaces the form so "check your inbox" can't be missed (07-17) */
.authgate-sent{text-align:center;padding:6px 0 2px;animation:agSentIn .35s ease}
@keyframes agSentIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.authgate-sent-ic{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--surface-2);color:var(--accent-text);margin-bottom:14px}
.authgate-sent-h{font-weight:600;font-size:24px;margin:0 0 10px;color:inherit} /* the family is INHERITED — this said 'Newsreader',Georgia,serif and Newsreader is not loaded, so the sign-in confirmation rendered in Georgia on a Geist page (2026-09-09). Spelled as long-hand: the `font` shorthand cannot take `inherit` for the family, and using it would have RESET the family to the initial value instead. */
.authgate-sent-p{font-size:14.5px;line-height:1.55;margin:0 0 10px;opacity:.92}
.authgate-sent-p b{font-weight:650;word-break:break-all}
.authgate-sent-hint{font-size:12.5px;opacity:.62;margin:0 0 16px;line-height:1.5}
.authgate-sent-alt,.authgate-textlink{background:none;border:none;font-size:13px;text-decoration:underline;opacity:.7;cursor:pointer;color:inherit;padding:4px}
.authgate-sent-alt:hover,.authgate-textlink:hover{opacity:1}

/* ── The pieces the consent and authorize cards need beyond the sign-in form, built from the same parts ───────────
   .authgate-primary is the SAME button as the email form's submit (Allow, Authorize); .authgate-secondary is the
   SAME outline as .authgate-sso (Cancel); .authgate-textlink is the SAME quiet link as "Use a different email". */
.authgate-h { text-wrap: balance; }
a.authgate-google { text-decoration: none; box-sizing: border-box; } /* the admin page's provider door is a plain link */
.authgate-who { min-height: 18px; margin: 0 0 18px; font-family: var(--font-body); font-size: 13px; color: var(--muted, #6F635C); }
.authgate-who b, .authgate-sub b { color: var(--text, var(--ink, #1c1c1c)); font-weight: 600; }
.authgate-actions { display: flex; flex-direction: column; gap: 10px; }
.authgate-actions .authgate-secondary { margin-top: 0; }
.authgate-textlink { display: inline-block; margin-top: 10px; }
.authgate-body { text-align: left; }
.authgate-body p { font-family: var(--font-body); color: var(--muted, #6F635C); font-size: 14px; line-height: 1.55; margin: 0 0 12px; }
.authgate-body code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; color: var(--text); font-size: .92em; word-break: break-all; }
.authgate-host { margin-bottom: 8px; }