/* auth.css — /login, /signup, /verify-email, /reset-password (app/auth-ui.js builds the DOM).

   The same product as the signed-in app (2026-10-17, the owner: the sign-up page "does not match
   the overall theme"): the brand panel is the app sidebar's lavender panel (whizply.css SIDEBAR
   v3), drawn from the violet band's tokens (`.wz-band--violet`, which also gives it the band's
   text colours); the form is a white app card on the page wash, and every input, button, check
   and focus ring is the app's own (components.js). Headings take the heading ink, as every page
   title does.

   The panel: the W symbol, large and faint, behind "Your career OS", two soft glows of the accent
   and the support tint, the headline, one line, and the three proof points on the sidebar's icon
   tiles. Wide screens: the panel on the left (sticky, it stays while a long form scrolls), the
   form on the right. Below 960px the panel stacks above the form, compact: the proof points become
   chips (their descriptions stay for screen readers), and on a phone the line under the headline
   goes too.

   Motion (all of it off under prefers-reduced-motion): the panel's text and the form card rise in
   once, staggered; then the W floats, one slow breath, its spark twinkles now and then, the glows
   drift, and the mascot blinks. Transform and opacity only. Colours come from whizply.css tokens,
   so light / dark and the Warm palette follow the user's choice like every other page. */

.au {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); align-items: start;
  gap: var(--space-4); padding: var(--space-4);
  background: var(--bg);
}

/* ── the brand panel ── */
.au-side {
  position: sticky; top: var(--space-4); z-index: 0; isolation: isolate; overflow: hidden;
  height: calc(100vh - 2 * var(--space-4)); height: calc(100dvh - 2 * var(--space-4)); min-height: 600px;
  display: flex; flex-direction: column;
  padding: 24px clamp(32px, 4.6vw, 76px) 32px;
  border-radius: var(--r-xl);
  /* The sidebar's lavender, built from the violet band's own pair so every palette and mode stays
     in one family (Violet: the sidebar's values to within a shade; Warm: apricot, or brown in dark). */
  background-image: linear-gradient(165deg, var(--band-violet-bg), color-mix(in srgb, var(--band-violet-chip) 50%, var(--band-violet-bg)));
  box-shadow: var(--side-shadow);
}
/* The light: the accent from the top left, the support tint from the bottom right (the homepage
   hero's two glows, at its strengths). */
.au-side::before, .au-side::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; }
.au-side::before { left: -28%; top: -24%; width: 92%; aspect-ratio: 1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent); }
.au-side::after { right: -34%; bottom: -30%; width: 100%; aspect-ratio: 1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--band-mint-accent) 13%, transparent), transparent); }

.au-top { position: relative; z-index: 1; }
/* The wordmark as the homepage header sets it: the mascot, then the name. */
.au-brand {
  display: inline-flex; align-items: center; gap: 10px; color: var(--navy); text-decoration: none;
  font-weight: 800; font-size: var(--fs-xl); letter-spacing: -.03em; border-radius: var(--r-xs);
}
.au-brand:hover { text-decoration: none; }
.au-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.au-hero { position: relative; z-index: 0; width: 100%; max-width: 540px; margin: auto; padding: 40px 0 16px; }
/* The W: behind the headline, mostly to its right, faint. */
.au-hero__art { position: absolute; z-index: -1; pointer-events: none; width: min(560px, 104%); aspect-ratio: 512 / 385; right: -8%; top: -12%; }
.au-w { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.au-w__a { stop-color: var(--brand-1); }
.au-w__b { stop-color: var(--brand-2); }
/* .11 is the ceiling: the accent phrase over the W (and the glows, at their worst moment) keeps
   3.1:1 or more in light, 4.2:1 in dark (measured; large text needs 3). */
.au-w__stroke { fill: none; stroke-width: 86; stroke-linecap: round; stroke-linejoin: round; opacity: .11; }
.au-w__spark { fill: var(--brand-spark); opacity: .42; transform-box: fill-box; transform-origin: center; }

/* "Your career OS": the homepage's pill, on a white chip so it reads on the lavender. */
.au-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 7px 14px 7px 12px;
  border-radius: var(--pill); background: var(--surface); color: var(--accent-deep); box-shadow: var(--shadow-sm);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.au-hero__eyebrow i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
/* The marketing headline: the sans at its heaviest, two-tone like the homepage's (heading ink,
   the accent phrase in the accent; one family, no italic). */
.au-hero__headline {
  margin: 0 0 16px; max-width: 15ch;
  font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-display); line-height: 1.06;
  letter-spacing: var(--ls-display); color: var(--ink-heading, var(--ink)); text-wrap: balance;
}
/* The phrase stays on one line: split, the accent reads as two stray coloured words. */
.au-hero__headline em { font-family: inherit; font-style: normal; font-weight: inherit; color: var(--accent); white-space: nowrap; }
/* Warm: the orange accent drops toward 3:1 on the apricot panel under the W; its deep tone does not. */
html[data-palette="warm"] .au-hero__headline em { color: var(--accent-deep); }
.au-hero__lede { margin: 0 0 30px; max-width: 40ch; font-size: var(--fs-lg); font-weight: 600; line-height: 1.5; color: var(--sub); text-wrap: pretty; }

.au-hero__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 460px; }
.au-hero__list li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 14px 18px 14px 14px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 84%, transparent); box-shadow: var(--shadow-sm);
}
/* The sidebar's icon tile: the feature's pastel, a dark glyph (7:1+ on every tile). */
.au-hero__ic {
  --hue: var(--hue-violet);
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--hue); color: var(--side-icon-ink); box-shadow: 0 2px 6px -3px rgb(31 27 94 / .3);
}
.au-hero__ic[data-hue="blue"] { --hue: var(--hue-blue); }
.au-hero__ic[data-hue="rose"] { --hue: var(--hue-rose); }
.au-hero__ic[data-hue="pink"] { --hue: var(--hue-pink); }
.au-hero__point { min-width: 0; }
.au-hero__point strong { display: block; color: var(--ink); font-size: var(--fs-base); font-weight: 700; line-height: 1.35; letter-spacing: var(--ls-h3); }
.au-hero__point span { display: block; margin-top: 2px; color: var(--sub); font-size: var(--fs-md); font-weight: 500; line-height: 1.45; }

/* ── form column ── */
/* On the LEFT on wide screens (the owner, 2026-10-17), where the eye starts; the brand panel sits
   on the right. Phones keep the stacked order below (panel first, compact). */
.au-pane { order: -1; }
.au-pane {
  display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 16px 8px 4px;
  min-height: calc(100vh - 2 * var(--space-4)); min-height: calc(100dvh - 2 * var(--space-4));
}
/* The app's card (whizply.css .wz-card), a step more lifted: it is the only thing on the page. */
.au-card {
  width: 100%; max-width: 460px; margin-top: auto;
  padding: 36px 36px 32px; border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--shadow-sm), var(--shadow);
}
/* H1, as every page title is (whizply.css TYPE ROLES, .wz-title): the heading ink. */
.au-title {
  font-family: var(--font-sans); font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1); margin: 0 0 8px; color: var(--ink-heading, var(--ink)); outline: none;
}
.au-sub { color: var(--sub); font-size: var(--fs-base); font-weight: 500; line-height: 1.55; margin: 0 0 22px; overflow-wrap: anywhere; }
.au-sub strong { color: var(--ink); }
.au-notice:not(:empty) { margin-bottom: 18px; }
.au-switch { margin: 22px 0 0; font-size: var(--fs-md); color: var(--sub); text-align: center; }
.au-foot { width: 100%; max-width: 460px; margin-top: auto; padding-top: 28px; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; font-size: var(--fs-sm); }
.au-foot a { color: var(--muted); text-decoration: none; border-radius: var(--r-xs); }
.au-foot a:hover { color: var(--ink); text-decoration: underline; }
.au-foot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── form ── */
.au-form { display: grid; gap: 16px; }
.au-form .wz-field { margin: 0; }
.au-form-error:empty { display: contents; }   /* collapses but stays in the tree: it is a live region */
.au-form-error:not(:empty) { padding: 10px 14px; border-radius: var(--r-sm); background: var(--bad); color: var(--bad-ink); font-size: var(--fs-md); line-height: 1.45; }
.au-link { color: var(--accent-deep); font-weight: 600; text-decoration: none; }
.au-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.au-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.au-linkbtn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.au-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.au-labelrow .wz-label { margin-bottom: 0; }
.au-forgot { font-size: var(--fs-sm); }
.au-pass { margin-top: 6px; }
.au-code::placeholder { color: var(--line-strong); letter-spacing: .5em; }
.au-remember, .au-agree { font-size: var(--fs-md); color: var(--sub); }
.au-agree { line-height: 1.5; }

/* password with a show/hide button inside the box */
.au-pass { position: relative; }
.au-pass .wz-input { padding-right: 48px; }
.au-eye {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--sub); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.au-eye:hover { color: var(--ink); background: var(--surface-2); }
.au-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.au-eye[aria-pressed="true"] { color: var(--accent-deep); }

/* the 6-digit code: the sans with tabular figures, so every digit takes the same cell */
.au-code {
  font-family: var(--font-sans); font-size: var(--fs-2xl); font-weight: 700; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: .5em; text-align: center;
  padding: 14px 10px 14px calc(10px + .5em); height: auto;
}
.au-mailicon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); margin: -6px 0 18px; }
.au-resend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; color: var(--sub); }

/* ── social ── */
.au-social-block { margin-bottom: 18px; }
.au-social-list { display: grid; gap: 10px; }
/* Google's button guidelines: white, a neutral 1px border, the multicolour G, dark text. The
   app's large button otherwise: its height, its corner, no shadow — hover is the fill alone. */
.au-social {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: var(--btn-h-lg);
  padding: 10px var(--btn-px-lg); border-radius: var(--r-btn); border: 1px solid #747775; background: #FFFFFF; color: #1F1F1F;
  font-family: var(--font-sans); font-size: var(--fs-lead); font-weight: 600; line-height: 1.2;
  cursor: pointer; transition: background var(--dur) var(--ease), transform var(--dur-1) var(--ease-out);
}
.au-social:hover { background: #F7F8F8; }
.au-social:active { transform: scale(var(--press)); }
.au-social:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.au-social:disabled { opacity: .7; cursor: progress; }
.au-social[hidden] { display: none; }
.au-or { display: flex; align-items: center; gap: 14px; margin: 18px 0 2px; color: var(--muted); font-size: var(--fs-sm); }
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ── phones and narrow windows: the panel stacks above the form, compact ── */
@media (max-width: 960px) {
  /* align-content: start, so a short page (reset password) does not stretch the two rows to fill
     the screen and push the form down below an empty band. */
  .au { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; padding: 12px; }
  .au-pane { order: 0; }
  .au-side { position: relative; top: auto; height: auto; min-height: 0; padding: 16px 20px 22px; border-radius: var(--r-lg); }
  /* Short panel: the glows sit in the corners, off the headline. */
  .au-side::before { width: 70%; left: -30%; top: -40%; }
  .au-side::after { width: 80%; right: -36%; bottom: -55%; }
  .au-hero { margin: 0; max-width: 620px; padding: 20px 0 0; }
  .au-hero__art { width: min(300px, 64%); right: -4%; top: -6px; }
  .au-hero__eyebrow { margin-bottom: 12px; padding: 5px 12px 5px 10px; font-size: var(--fs-2xs); }
  .au-hero__eyebrow i { width: 7px; height: 7px; }
  .au-hero__headline { margin-bottom: 14px; max-width: 16ch; font-size: clamp(27px, 6.4vw, 38px); line-height: 1.08; }
  .au-hero__lede { margin-bottom: 16px; font-size: var(--fs-base); }
  /* The proof points as chips; each description stays for screen readers. */
  .au-hero__list { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; }
  .au-hero__list li { display: inline-flex; gap: 8px; padding: 4px 12px 4px 4px; border-radius: var(--pill); }
  .au-hero__ic { width: 26px; height: 26px; border-radius: 50%; box-shadow: none; }
  .au-hero__ic .wz-icon { width: 15px; height: 15px; }
  .au-hero__point strong { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; white-space: nowrap; }
  .au-hero__point span {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .au-pane { min-height: 0; padding: 0 0 4px; }
  .au-card { margin-top: 0; padding: 28px 22px 24px; }
  .au-foot { margin-top: 0; padding-top: 24px; }
}
@media (max-width: 600px) {
  .au-hero__lede { display: none; }
  .au-brand { font-size: var(--fs-lg); }
}
@media (max-width: 380px) {
  .au-code { font-size: var(--fs-xl); letter-spacing: .35em; padding-left: calc(10px + .35em); }
}

/* ── motion ── */
@media (prefers-reduced-motion: no-preference) {
  /* The entrance, once: the form card, then the panel's lines in order. `backwards` only. */
  .au-card, .au-hero__eyebrow, .au-hero__headline, .au-hero__lede, .au-hero__list li {
    --rise: var(--reveal-rise); animation: wz-rise var(--dur-reveal) var(--ease-out) backwards;
  }
  .au-hero__eyebrow { animation-delay: calc(var(--stagger) * 1); }
  .au-hero__headline { animation-delay: calc(var(--stagger) * 2); }
  .au-hero__lede { animation-delay: calc(var(--stagger) * 3); }
  .au-hero__list li:nth-child(1) { animation-delay: calc(var(--stagger) * 5); }
  .au-hero__list li:nth-child(2) { animation-delay: calc(var(--stagger) * 6); }
  .au-hero__list li:nth-child(3) { animation-delay: calc(var(--stagger) * 7); }
  .au-switch, .au-foot { animation: wz-fade-in var(--dur-reveal) var(--ease-out) calc(var(--stagger) * 4) backwards; }
  /* The W grows in, then breathes: a slow float and tilt, the spark twinkling now and then.
     Separate transform properties, so the entrance (scale) and the float (translate, rotate) do
     not overwrite each other. */
  .au-hero__art {
    animation: au-art-in 900ms var(--ease-out) backwards,
      au-float var(--dur-float) var(--ease-in-out) 900ms infinite alternate;
  }
  .au-w__spark { animation: au-twinkle calc(var(--dur-float) * .9) var(--ease-in-out) 1.4s infinite; }
  .au-side::before { animation: au-drift-a var(--dur-drift) var(--ease-in-out) infinite alternate; }
  .au-side::after { animation: au-drift-b calc(var(--dur-drift) * 1.25) var(--ease-in-out) infinite alternate; }
  /* The mascot says hello (its antenna, once) and blinks now and then, as the homepage robot does. */
  .au-brand .wz-bot__ant { animation: wz-bot-ant 600ms var(--ease-out) 700ms; }
  .au-brand .wz-bot__eye { animation: au-blink 6.5s linear 2s infinite; }
}
@keyframes au-art-in { from { opacity: 0; scale: .9; } }
@keyframes au-float { from { translate: 0 0; rotate: -2.5deg; } to { translate: 0 -16px; rotate: 2deg; } }
@keyframes au-twinkle { 0%, 72%, 100% { transform: scale(1) rotate(0); } 82% { transform: scale(1.22) rotate(16deg); } 91% { transform: scale(.94) rotate(-5deg); } }
@keyframes au-drift-a { to { transform: translate3d(7%, 3%, 0) scale(1.05); } }
@keyframes au-drift-b { to { transform: translate3d(-8%, -6%, 0) scale(.92); } }
@keyframes au-blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.12); } }
@media (prefers-reduced-motion: reduce) {
  .au-social, .au-eye { transition: none; }
  .au-social:active { transform: none; }
}