/* Panelab account pages: sign up, log in, reset, early list (/signup/ /login/ /reset/ /shortlist/).
   Built on brand/panelab.css tokens and classes (logo, btn, check); load after it.
   Colours are tokens only. Text and icons on --sun use --on-sun (always ink). Links are ink and underlined;
   the submit buttons are ink (.btn--ink, membership and account actions). */

.auth-page { min-height: 100svh; display: flex; flex-direction: column; }
.auth-page [hidden] { display: none !important; }
/* a focused field never lands under the sticky nav or flush against the on-screen keyboard */
html:has(.auth-page) { scroll-padding-block: 76px 24px; }

/* ---------- chrome: the focused header (logo + one link, HD-1 amendment), one-row footer ---------- */
.auth-nav__link { margin-left: auto; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 4px; color: var(--ink); font-weight: 600; font-size: var(--t-small); text-decoration: none; white-space: nowrap; }
.auth-nav__link:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.auth-nav__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
/* /login/ picks its scenario in script: the link waits with the sheet, so S1 never flashes S4's "Get Episode 1 free" */
.auth-page[data-auth="login"]:not([data-scenario]) [data-auth-nav] { visibility: hidden; }
@media (scripting: none) { .auth-page[data-auth="login"]:not([data-scenario]) [data-auth-nav] { visibility: visible; } }
.auth-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 22px; padding: 12px var(--pad) calc(28px + env(safe-area-inset-bottom)); font-size: var(--t-meta); color: var(--ink-3); }
.auth-foot a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); color: var(--ink-2); text-decoration: none; }
.auth-foot a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- layout ---------- */
.auth { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: clamp(20px, 4vh, 48px) 16px 48px; display: grid; gap: 28px; justify-items: center; align-content: start; }
.auth__card { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sheet); box-shadow: var(--e1); padding: clamp(22px, 5vw, 36px); }
.auth__card--wide { max-width: 600px; }
.auth__title { margin: 0 0 8px; font: 800 clamp(28px, 4.2vw, 36px)/1.08 var(--display); letter-spacing: -.02em; color: var(--ink); }
.auth__title:focus { outline: none; }
/* the wordmark in place of the word "Ahaboom" (/signup/): a tight crop of logo-ink-marigold (872x200, 4.36:1), its
   ascenders a little above cap height and its letters sitting on the title's baseline */
.auth__logo { display: inline-block; height: 1.02em; width: auto; margin: 0 .04em; vertical-align: -.1em; }
.auth__lede { margin: 0 0 22px; color: var(--ink-2); font-size: var(--t-small); }

/* ---------- form ---------- */
.auth-field { display: grid; gap: 6px; }
.auth-label { font-weight: 600; font-size: var(--t-small); color: var(--ink); }
.auth-input { width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font: 400 var(--t-body)/1.2 var(--body); transition: border-color .15s; }
.auth-input:hover { border-color: var(--ink-2); }
.auth-input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); border-radius: var(--r-control); }
.auth-input[aria-invalid="true"] { border-color: var(--bad); }
.auth-input[aria-invalid="true"]:focus-visible { outline-color: var(--bad); }
.auth-year { max-width: 10rem; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.auth-error { margin: 0; display: flex; align-items: flex-start; gap: 8px; color: var(--bad); font-size: var(--t-small); font-weight: 600; }
.auth-error:empty { display: none; }
.auth-error::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--bad); color: var(--surface); font-size: 12px; font-weight: 800; line-height: 1; }
.auth-form .check { align-items: flex-start; padding: 10px 0; min-height: var(--tap); font-size: var(--t-small); line-height: 1.4; color: var(--ink); cursor: pointer; }
.auth-form .check input { flex: none; margin: 0; }
.auth-form .check input[aria-invalid="true"] { outline: 2px solid var(--bad); outline-offset: 2px; }
.auth-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.auth-submit { width: 100%; margin-top: 2px; }
.auth-submit[aria-busy="true"] { cursor: progress; opacity: .85; }
.auth-submit[aria-busy="true"]::before, .auth-instead[aria-busy="true"]::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: auth-spin .7s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }


/* ---------- early list (/shortlist/) ---------- */
.auth-done__icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 0 20px; border-radius: 50%; background: var(--sun); color: var(--on-sun); }
.auth-done__icon svg { width: 28px; height: 28px; }
.auth-done p { margin: 0 0 14px; color: var(--ink-2); max-width: 62ch; }
.auth-done .auth-done__lead { color: var(--ink); font-weight: 600; }
.auth-done .auth-done__plan { color: var(--ink); }
.auth-confirm { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; margin: 18px 0 24px; padding: 14px 16px; border-radius: var(--r); background: var(--surface-2); }
.auth-confirm svg { width: 24px; height: 24px; color: var(--ink-2); margin-top: 1px; }
.auth-done .auth-confirm p { margin: 0; color: var(--ink); }
.auth-confirm strong { font-weight: 700; overflow-wrap: anywhere; }
.auth-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.auth-actions .btn { flex: 1 1 auto; text-align: center; line-height: 1.2; }
@media (min-width: 480px) { .auth-actions .btn { white-space: nowrap; } }
.auth-done .auth-done__join { margin: 18px 0 0; font-size: var(--t-small); }
.auth-done__join a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--link); font-weight: 600; }

/* prototype-only panel with the confirmation email nobody was sent */
.auth-mail { margin-top: 28px; padding: 2px 16px; border: 1px dashed var(--ink-3); border-radius: var(--r); }
.auth-mail[open] { padding-bottom: 16px; }
.auth-mail summary { display: flex; align-items: center; min-height: var(--tap); font-size: var(--t-small); font-weight: 600; color: var(--ink-2); cursor: pointer; }
.auth-mail[open] summary { margin-bottom: 8px; }
.auth-mail > p { margin: 0; font-size: var(--t-small); color: var(--ink-2); }
.auth-page .email-preview { max-width: 600px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; color: var(--ink); font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.auth-page .email-preview p { margin: 0; color: inherit; max-width: none; }
.auth-page .email-preview__notice { padding: 10px 16px; background: var(--sun-soft); border-bottom: 1px solid var(--line); font-weight: 600; }
.auth-page .email-preview__head { display: grid; gap: 2px; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.auth-page .email-preview__head dt { display: inline; font-weight: 600; }
.auth-page .email-preview__head dd { display: inline; margin: 0; overflow-wrap: anywhere; }
.auth-page .email-preview__body { display: grid; gap: 12px; padding: 16px; }
.auth-page .email-preview__cta { justify-self: start; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 20px; border-radius: 8px; background: var(--ink); color: var(--surface); font-weight: 700; text-decoration: none; }
.auth-page .email-preview__foot { padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.auth-page .email-preview__foot a { color: var(--link); }

@media (max-width: 420px) {
  .auth__card { padding: 22px 18px; border-radius: var(--r); }
}
@media (prefers-reduced-motion: reduce) { .auth-submit[aria-busy="true"]::before, .auth-instead[aria-busy="true"]::before { animation: none; } }


/* ---------- email sign-in, by scenario (/login/, /login/?to=read, /signup/; docs/specs/auth-scenarios.md) ----------
   One white sheet. Left: what this entry gets you (title, three or four lines, ink icons). Right: the form only
   (Google, "or", email, the ink button, the consent line, the bottom link). No marigold in the UI: the colour
   is the logo, the Google mark and Tally (the brand's robot, one pose per scenario). Phones: the left column is a compact block
   above the form, so the email field sits in the first screen. Two columns from 900px. */
.auth-sheet { width: 100%; max-width: 480px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sheet); box-shadow: var(--e1); }
.auth-explain { padding: 20px 20px 18px; border-bottom: 1px solid var(--line); }
.auth-act { padding: 20px 20px 24px; }
.auth-explain .auth__title { margin: 0 0 12px; font-size: clamp(24px, 6.4vw, 30px); line-height: 1.1; text-wrap: balance; }

.auth-gets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.auth-gets li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.auth-gets .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--ink); }
.auth-gets span { text-wrap: pretty; }

/* S3: the plan picked on /pricing/ */
.auth-plan { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 8px; max-width: 100%; margin: 0 0 14px; padding: 0 2px 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-control); font-size: var(--t-small); color: var(--ink-2); }
.auth-plan__text { margin: 0; padding: 8px 0; }
.auth-plan__text b { color: var(--ink); font-weight: 700; }
.auth-plan__dot { color: var(--ink-3); }
.auth-plan__change { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px 0 0; color: var(--link); font-weight: 600; text-underline-offset: 3px; }

/* S5: the kid link was turned off */
.auth-flag { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--ink); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font-size: var(--t-small); font-weight: 600; line-height: 1.4; }
.auth-flag .ic { width: 20px; height: 20px; margin-top: 1px; }

/* "Continue with Google": Google's light button (white, 1px #747775 border, #1f1f1f label, the four-colour G).
   Those three values are Google's branding rules, not our palette; the height and corner follow our fields. */
.auth-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid #747775; border-radius: var(--r-control); background: #fff; color: #1f1f1f; font: 500 var(--t-body)/1.2 var(--body); cursor: pointer; transition: background .15s, box-shadow .15s; }
@media (hover: hover) { .auth-google:hover { background: #f7f7f7; box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); } }
.auth-google:active { background: #ececec; box-shadow: none; }
.auth-google:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.auth-google__g { flex: none; width: 20px; height: 20px; }
.auth-gnote { margin: 10px 0 0; font-size: var(--t-small); line-height: 1.45; color: var(--ink); }
.auth-gnote:empty { margin: 0; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ink-3); font-size: var(--t-meta); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.auth-form { display: grid; gap: 16px; }
.auth-field--year .auth-label { font-weight: 500; color: var(--ink-2); }
.auth-form .check--quiet { margin: -8px 0 -6px; padding: 6px 0; color: var(--ink-2); }
.auth-submit { padding-inline: 12px; text-wrap: balance; }
.auth-fine { margin: -4px 0 0; font-size: var(--t-meta); line-height: 1.5; color: var(--ink-3); }
.auth-fine a { color: var(--ink-2); text-underline-offset: 2px; }
.auth-switch { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--ink-2); }
.auth-switch a { display: inline-flex; align-items: center; min-height: var(--tap); margin: -8px 0; color: var(--link); font-weight: 600; text-underline-offset: 3px; }

/* S4: email + password. "Forgot password?" sits on the label row; Show/Hide inside the field. The failed log in says
   so under the password and offers the sign-in link right there (accounts have no passwords). */
.auth-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-forgot { display: inline-flex; align-items: center; min-height: var(--tap); margin: -11px -2px; padding: 0 2px; border: 0; background: none; color: var(--link); font: 600 var(--t-small)/1.2 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth-forgot:focus-visible, .auth-reveal:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-radius: 6px; }
.auth-pass { position: relative; }
.auth-pass .auth-input { padding-right: 80px; }
.auth-reveal { position: absolute; top: 5px; right: 5px; bottom: 5px; min-width: 64px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 600 var(--t-small)/1 var(--body); cursor: pointer; }
@media (hover: hover) { .auth-reveal:hover { background: var(--surface-2); } }
.auth-failed { display: grid; gap: 12px; }
.auth-failed:has(> .auth-failed__text:empty) { display: contents; }
.auth-instead { width: 100%; padding-inline: 12px; }

/* Tally, one pose per scenario (S1/S5 pointing at the form, S2/S3 waving, S4 thinking). Phones: a small Tally beside
   the title, so the email field stays in the first screen. From 900px: bigger, at the bottom of the left column,
   breaking the sheet's edge. The PNG's own alpha is the contour; the drop shadow lifts it off the canvas. */
.auth-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.auth-head .auth__title { flex: 1; min-width: 0; margin: 0; }
.auth-tally { order: 1; flex: none; width: 68px; height: auto; margin: -6px -6px -6px 0; pointer-events: none; user-select: none; }
.auth-tally[data-pose="pointing"] { transform: scaleX(-1); } /* points back at the title on phones */
@media (min-width: 900px) {
  .auth-explain { position: relative; }
  .auth-explain:has(.auth-tally:not([hidden])) { padding-bottom: 184px; } /* Tally's room under the list */
  .auth-head { display: block; margin: 0; }
  .auth-head .auth__title { margin: 0 0 28px; }
  .auth-tally { position: absolute; bottom: -44px; width: 200px; margin: 0; filter: drop-shadow(0 10px 14px rgba(20, 20, 20, .14)); }
  .auth-tally[data-pose="pointing"] { right: -30px; transform: rotate(-7deg); } /* across the divider, at the form */
  .auth-tally[data-pose="waving"] { left: 24px; }
  .auth-tally[data-pose="thinking"] { right: -6px; transform: scaleX(-1); } /* faces the form */
}
@media (min-width: 1180px) { .auth-tally[data-pose="waving"] { left: -76px; } } /* leans in from outside the sheet */

/* S7 "Check your email": the right column only; the left one stays */
.auth-sent p { margin: 0; }
.auth-sent__title { margin: 0 0 10px; font: 800 clamp(24px, 3vw, 28px)/1.1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.auth-sent__title:focus { outline: none; }
.auth-sent__lead { color: var(--ink); font-size: var(--t-body); line-height: 1.5; }
.auth-sent__lead strong { font-weight: 700; overflow-wrap: anywhere; }
.auth-sent .auth-sent__hint { margin-top: 8px; font-size: var(--t-small); line-height: 1.45; color: var(--ink-3); }
.auth-sent .auth-sent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--line); }
.auth-sent__dot { color: var(--ink-3); }
.auth-other { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--link); font: 600 var(--t-small)/1 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth-other:disabled { color: var(--ink-3); text-decoration: none; font-variant-numeric: tabular-nums; cursor: default; }

/* lockout (PG-1): one column, same sheet */
.auth-locked { padding: 28px 22px; }

/* No marigold on the sign-in pages: selection and the prototype mail preview go neutral. */
.auth-page[data-auth="login"] ::selection, .auth-page[data-auth="signup"] ::selection { background: var(--surface-2); color: var(--ink); }
.auth-page[data-auth="login"] .email-preview__notice, .auth-page[data-auth="signup"] .email-preview__notice { background: var(--surface-2); }

/* /login/ is also S1/S5 (?to=read): its left column, button and bottom link wait for the script to pick the scenario,
   so a parent never sees "Welcome back" flash before "Get SLICE! Episode 1 free". Without scripting they show as is. */
.auth-page[data-auth="login"]:not([data-scenario]) .auth-sheet { visibility: hidden; }
@media (scripting: none) { .auth-page[data-auth="login"]:not([data-scenario]) .auth-sheet { visibility: visible; } }

@media (max-width: 559px) { .auth:has(> .auth-sheet) { padding-top: 12px; } }
@media (min-width: 560px) {
  .auth-explain { padding: 28px 36px 24px; }
  .auth-act { padding: 28px 36px 32px; }
  .auth-locked { padding: 40px 36px; }
}
@media (min-width: 900px) {
  .auth { max-width: 1080px; padding-top: clamp(28px, 6vh, 64px); }
  .auth-sheet { max-width: 1000px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .auth-sheet--one { max-width: 560px; display: block; }
  .auth-explain { padding: 56px 52px; border-bottom: 0; border-right: 1px solid var(--line); }
  .auth-act { padding: 56px 52px 44px; }
  .auth-explain .auth__title { margin-bottom: 28px; font-size: clamp(34px, 3.4vw, 42px); }
  .auth-gets { gap: 18px; }
  .auth-gets li { grid-template-columns: 24px 1fr; gap: 14px; font-size: var(--t-body); line-height: 1.45; color: var(--ink); }
  .auth-gets .ic { width: 24px; height: 24px; margin-top: 0; }
  .auth-plan { margin-bottom: 22px; }
  .auth-flag { margin-bottom: 24px; }
}

/* owner, 2026-10-16: no Tally on sign-in; a light comic image sits behind the whole page instead */
.auth-tally { display: none !important; }
.auth-page { position: relative; isolation: isolate; }
.auth-page::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("/brand/art/featured-slice-1200.webp") center 30% / cover no-repeat; opacity: .16; filter: saturate(.85); }
.auth-page::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--canvas) 55%, transparent) 0%, transparent 70%); }
@media (max-width: 899px) { .auth-page::before { background-image: url("/brand/art/featured-slice-800.webp"); opacity: .12; } }