/* ─────────────────────────────────────────────────────────────────────────────
   AUTH — sign in, sign up, reset, new password.
   ─────────────────────────────────────────────────────────────────────────────
   These four pages were three different designs for one journey: signup had a
   split layout with the product's case for itself, while login and reset were
   bare centred cards. They also used #3b82f6 as their accent, which is not the
   brand accent — it appears nowhere in css/tokens.css. Someone arriving from a
   reset email met a different product each step.

   One layout, one palette, taken from tokens.css rather than invented, so these
   pages follow the theme with the rest of the site instead of being pinned to
   dark. Load AFTER css/tokens.css.
   ───────────────────────────────────────────────────────────────────────────── */

/* Declared HERE as well as in tokens.css, because the committed tokens.css
   carries only the colour tokens — the typography section, @font-face included,
   is newer than the last commit. Without this the pages fell back to Times on a
   clean deploy. Same family and same file, so a duplicate is harmless. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/plus-jakarta-sans-latin-var.woff2') format('woff2-variations'),
       url('../assets/fonts/plus-jakarta-sans-latin-var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --auth-panel-ink:  #e8eefc;
  --auth-font: var(--font-sans, 'Plus Jakarta Sans', ui-sans-serif, system-ui,
                   -apple-system, 'Segoe UI', Roboto, sans-serif);
  /* --accent-cyan is the brand accent, but at #0891b2 on white it measures
     3.39:1 — under AA for text this size. Links get their own token so the
     accent keeps its identity on buttons without failing as body copy. */
  --auth-link:       var(--accent-cyan);
  --auth-focus:      0 0 0 3px rgba(34, 211, 238, 0.32);
  --auth-radius:     14px;
  --auth-field-h:    50px;
}
html[data-theme="light"] {
  --auth-focus: 0 0 0 3px rgba(8, 145, 178, 0.26);
  --auth-link: #0e7490;          /* 4.8:1 on white */
}

/* ---- shell ---------------------------------------------------------------- */

.auth-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--auth-font);
  -webkit-font-smoothing: antialiased;
}

/* Two panels on a wide screen, one column on a narrow one. The form is FIRST
   in the source so a keyboard or screen-reader user reaches the thing they came
   for before the marketing; `order` puts the brand panel on the left visually. */
.auth-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}
@media (min-width: 940px) {
  .auth-shell { grid-template-columns: 1.05fr 1fr; }
  .auth-aside { order: -1; }
}

/* ---- brand panel ---------------------------------------------------------- */

.auth-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  padding: 48px 44px;
  overflow: hidden;
  color: var(--auth-panel-ink);
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(34, 211, 238, 0.16) 0%, transparent 58%),
    radial-gradient(100% 80% at 88% 92%, rgba(251, 191, 36, 0.12) 0%, transparent 60%),
    linear-gradient(160deg, #0b1428 0%, #070d1c 62%, #050a16 100%);
  /* AFTER the shorthand, not before: `background:` with only gradients resets
     background-color to transparent, so declaring it first achieved nothing and
     the panel composited over whatever page colour was behind it. This panel is
     dark in both themes; its text colours are chosen against this value. */
  background-color: #0b1428;
}
/* A hairline that reads as the seam between the two halves, not a border. */
@media (min-width: 940px) {
  .auth-aside::after {
    content: '';
    position: absolute; inset: 0 0 0 auto; width: 1px;
    background: linear-gradient(180deg, transparent, var(--border-line) 22%, var(--border-line) 78%, transparent);
  }
}
@media (max-width: 939px) {
  .auth-aside { padding: 28px 22px 26px; gap: 18px; }
  .auth-aside .auth-points, .auth-aside .auth-stats { display: none; }
}

.auth-brand { display: flex; align-items: center; gap: 11px; }
.auth-brand img { width: 38px; height: 38px; border-radius: 10px; }
.auth-brand span { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }

.auth-headline {
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-wrap: balance;
}
.auth-headline em {
  font-style: normal;
  background: linear-gradient(96deg, var(--accent-cyan), var(--accent-gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.auth-sub { margin: 0; max-width: 42ch; color: #9fb0d0; font-size: 1rem; line-height: 1.6; }

.auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.auth-points li { display: flex; gap: 13px; align-items: flex-start; }
.auth-points .pt-ico {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; font-size: 15px;
  background: rgba(34, 211, 238, 0.11);
  border: 1px solid rgba(34, 211, 238, 0.2);
}
.auth-points b { display: block; font-size: .93rem; font-weight: 700; }
.auth-points span.pt-note { display: block; font-size: .83rem; color: #8b9ab8; line-height: 1.5; margin-top: 2px; }

.auth-stats { display: flex; gap: 30px; flex-wrap: wrap; padding-top: 4px; }
.auth-stats div { min-width: 78px; }
.auth-stats b { display: block; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }
.auth-stats span { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: #7f8ea9; }

/* ---- form side ------------------------------------------------------------ */

.auth-main {
  display: flex; flex-direction: column;
  padding: 34px 24px 40px;
  background: var(--bg-page);
}
.auth-topbar { display: flex; justify-content: flex-end; flex: none; }
.auth-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 600; text-decoration: none;
  color: var(--text-secondary);
  padding: 10px 15px; min-height: 40px; border-radius: 999px;
  border: 1px solid var(--border-line); background: var(--bg-surface);
}
.auth-back:hover { color: var(--text-primary); border-color: var(--accent-cyan); }
.auth-back:focus-visible { outline: none; box-shadow: var(--auth-focus); }

/* `margin: auto` in a flex column absorbs the free space above AND below, so
   the card sits centred between the top bar and the footer. Giving the top bar
   margin-bottom:auto as well made the two fight over the same space and pushed
   the form below the fold on a short window. */
.auth-card {
  width: 100%; max-width: 424px;
  margin: auto;
  padding: 30px 0;
}
.auth-title { margin: 0 0 7px; font-size: 1.65rem; font-weight: 800; letter-spacing: -0.022em; }
.auth-lede  { margin: 0 0 26px; color: var(--text-secondary); font-size: .94rem; line-height: 1.6; }

/* ---- fields --------------------------------------------------------------- */

.auth-form { display: grid; gap: 17px; }
.auth-field { display: grid; gap: 7px; }
/* Descendant, not child: the password field puts its label inside
   .auth-label-row alongside "Forgot password?", so a `>` selector styled EMAIL
   and left Password looking like a heading. */
.auth-field label,
.auth-label {
  font-size: .74rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-secondary);
}
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.auth-input {
  width: 100%; box-sizing: border-box;
  height: var(--auth-field-h);
  padding: 0 15px;
  /* 16px floor: anything smaller makes iOS Safari zoom the page on focus. */
  font-size: 16px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--auth-radius);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.auth-input::placeholder { color: var(--text-muted); }
.auth-input:focus { outline: none; border-color: var(--accent-cyan); box-shadow: var(--auth-focus); }
.auth-input[aria-invalid="true"] { border-color: var(--status-danger); }
.auth-input:disabled { opacity: .6; cursor: not-allowed; }
/* Chrome paints its own colour over autofilled fields; match the surface. */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  box-shadow: 0 0 0 1000px var(--bg-surface) inset;
}

.auth-pw { position: relative; }
.auth-pw .auth-input { padding-right: 48px; }
.auth-reveal {
  position: absolute; right: 4px; top: 0; height: 100%; width: 44px;
  display: grid; place-items: center;
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--text-muted); font-size: 15px; border-radius: 10px;
}
.auth-reveal:hover { color: var(--text-primary); }
.auth-reveal:focus-visible { outline: none; box-shadow: var(--auth-focus); }

.auth-hint { font-size: .79rem; color: var(--text-secondary); line-height: 1.55; }
.auth-hint.is-good { color: var(--status-success); }
.auth-hint.is-bad  { color: var(--status-danger); }

.auth-link {
  color: var(--auth-link); text-decoration: none;
  font-size: .78rem; font-weight: 600;
}
.auth-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.auth-link:focus-visible { outline: none; box-shadow: var(--auth-focus); border-radius: 4px; }

/* ---- consent rows --------------------------------------------------------- */

.auth-check { display: flex; gap: 11px; align-items: flex-start; }
.auth-check input[type="checkbox"] {
  flex: none; width: 19px; height: 19px; margin: 1px 0 0;
  accent-color: var(--accent-cyan); cursor: pointer;
}
/* Consent rows are sentences, not field labels — override the uppercase. */
.auth-check label {
  font-size: .85rem; line-height: 1.55; color: var(--text-secondary); cursor: pointer;
  text-transform: none; letter-spacing: normal; font-weight: 500;
}
.auth-check a { color: var(--auth-link); }

/* The bot trap must be unreachable, not merely invisible: display:none alone
   is skipped by some fillers, and a visually-hidden field can still be tabbed
   into by a real person using a keyboard. */
.auth-hp {
  position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important;
}

/* ---- button --------------------------------------------------------------- */

.auth-btn {
  width: 100%; min-height: var(--auth-field-h);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 20px; margin-top: 3px;
  font-family: inherit; font-size: .97rem; font-weight: 700; letter-spacing: -0.005em;
  color: #04222b;
  background: linear-gradient(180deg, var(--accent-cyan), #0eb8d4);
  border: none; border-radius: var(--auth-radius); cursor: pointer;
  transition: transform .1s ease, filter .14s ease;
}
.auth-btn:hover:not(:disabled) { filter: brightness(1.07); }
.auth-btn:active:not(:disabled) { transform: translateY(1px); }
.auth-btn:focus-visible { outline: none; box-shadow: var(--auth-focus); }
.auth-btn:disabled { opacity: .55; cursor: not-allowed; }
.auth-btn--quiet {
  color: var(--text-primary); background: var(--bg-elevated);
  border: 1px solid var(--border-line);
}

/* ---- status + banners ----------------------------------------------------- */

/* Always in the DOM and always announced, so a failure is not signalled by
   colour alone and does not move the layout when it appears. */
.auth-status { font-size: .87rem; line-height: 1.55; min-height: 1.2em; }
.auth-status:empty { display: none; }
.auth-status.is-error   { color: var(--status-danger); }
.auth-status.is-success { color: var(--status-success); }
.auth-status.is-info    { color: var(--text-secondary); }

.auth-note {
  display: none;
  padding: 13px 15px; margin-bottom: 18px;
  border-radius: 12px; font-size: .86rem; line-height: 1.55;
  border: 1px solid var(--border-line); background: var(--bg-surface);
}
.auth-note.is-on { display: block; }
.auth-note--good { border-color: rgba(52, 211, 153, .38); color: var(--status-success); }
.auth-note--info { border-color: rgba(34, 211, 238, .34); color: var(--text-primary); }
.auth-note b { color: var(--text-primary); }
.auth-note-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.auth-note-actions .auth-btn { width: auto; min-height: 38px; font-size: .84rem; margin: 0; }

.auth-alt { margin: 22px 0 0; text-align: center; font-size: .87rem; color: var(--text-secondary); }
.auth-alt a { color: var(--auth-link); font-weight: 700; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; text-underline-offset: 2px; }

.auth-foot {
  flex: none; padding-top: 26px; text-align: center;
  font-size: .74rem; color: var(--text-secondary);
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.auth-foot a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.auth-foot a:hover { color: var(--text-primary); }

@media (prefers-reduced-motion: reduce) {
  .auth-btn, .auth-input { transition: none; }
  .auth-btn:active:not(:disabled) { transform: none; }
}

/* ---- signup: the verify-your-email state -------------------------------- */

/* Hidden until signup succeeds; js/… flips it to block. */
.auth-verify { display: none; }

.auth-steps {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 22px;
}
.auth-step { display: grid; justify-items: center; gap: 6px; flex: none; }
.auth-step-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 800;
  background: var(--bg-elevated); border: 1px solid var(--border-line);
  color: var(--text-muted);
}
.auth-step-label { font-size: .68rem; color: var(--text-muted); white-space: nowrap; }
.auth-step.is-done .auth-step-num {
  background: rgba(52, 211, 153, .16); border-color: rgba(52, 211, 153, .4);
  color: var(--status-success);
}
.auth-step.is-done .auth-step-label { color: var(--status-success); }
.auth-step.is-now .auth-step-num {
  background: rgba(34, 211, 238, .16); border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}
.auth-step.is-now .auth-step-label { color: var(--text-primary); font-weight: 700; }
.auth-step-line { flex: 1 1 auto; height: 1px; background: var(--border-line); margin-bottom: 18px; }

.auth-verify-mark {
  width: 54px; height: 54px; margin: 0 auto 14px;
  border-radius: 16px; display: grid; place-items: center; font-size: 24px;
  background: rgba(34, 211, 238, .12); border: 1px solid rgba(34, 211, 238, .28);
}
.auth-verify-body { text-align: center; }
.auth-verify-body .auth-title { font-size: 1.35rem; }

.auth-stack { display: grid; gap: 9px; margin-top: 16px; }
.auth-stack .auth-btn { margin-top: 0; }