/* ============================================================================
   The sign-in page (app/signin.html) in the public pages' dress.

   It loads app/site/styles.css first, for the tokens (Recess Night, the only
   theme), the type, the buttons and their lips, the blobs and their drift,
   the outlined numerals and the flashcard. This sheet adds the split layout,
   the form controls and the brand panel, and nothing else.

   Layout. Two columns from 1000px. The form sits on the paper at the left,
   440px wide, centred in its column between a top bar (the wordmark and the
   way back) and a small footer. The brand panel at the right is the landing
   page's hero, framed: a navy surface with three drifting blobs, the thesis,
   three outlined counts, and one word from the bank on a card that flips.
   Under 1000px the panel is gone and the form is the page.

   Borrowed from other sign-in pages: the split layout with a brand panel and
   a floating card (here a real word, not a testimonial); a segmented switch
   between signing in and making an account; an icon badge over single-
   purpose steps (check your email, reset); inputs with a leading icon in a
   dark well; a show-password eye and a Caps Lock warning; the "Forgot your
   password?" link beside its label; a full-width Google button with the G
   above an "or" rule; a password checklist that ticks as the rule is met;
   an initial in a circle for the signed-in account.

   Radius: --radius-field (18px) on inputs and the notice; --pill on buttons,
   the switch, its tabs and the checklist chips; --radius (28px) on the panel;
   the badge and the avatar are circles; the agreement box takes 8px, a
   field's corner at checkbox size. No other radius.
   ============================================================================ */

:root {
  --radius-field: 18px;
  --field-bg: var(--footer);   /* inputs are wells, darker than the paper */
  --field-line: #5D6C8F;       /* 3.2:1 against the paper and the well, so a field's edge is visible */
}

/* The page switches sections with the hidden attribute (js/signin-page.js). */
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
h1:focus { outline: none; }

/* ----------------------------------------------------------------------------
   Layout
   ---------------------------------------------------------------------------- */
.auth-page { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .auth-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

.auth-main {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  padding-inline: var(--gutter);
}
.auth-col {
  position: relative; z-index: 1;
  flex: 1; display: flex; flex-direction: column;
  width: 100%; max-width: 440px; margin-inline: auto;
}
.auth-b1 { top: -40px; left: -12%; }
.auth-b2 { bottom: -30px; right: -14%; }

.auth-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 76px; padding-top: env(safe-area-inset-top, 0px);
}
.back-link {
  --lip: var(--lip-surface);
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px;
  border-radius: var(--pill); background: var(--surface);
  font-family: var(--font-display); font-weight: 500; font-size: 16px; text-decoration: none;
}

.auth-body { margin-block: auto; padding-block: 28px 44px; }
.auth-body > section { display: grid; gap: 20px; }
.auth-head { display: grid; gap: 8px; }
.kicker { font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.auth-head h1 { font-size: clamp(34px, 1.6vw + 22px, 44px); }
.auth-head .lede { font-size: 17px; line-height: 1.55; }

.auth-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px;
  padding-block: 20px calc(24px + env(safe-area-inset-bottom, 0px));
  font-size: 14px; color: var(--ink-2);
}
.auth-foot-links { display: flex; gap: 18px; }
.auth-foot a { color: var(--ink); }

/* ----------------------------------------------------------------------------
   The switch between signing in and making an account
   ---------------------------------------------------------------------------- */
.auth-switch {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
  padding: 5px; border-radius: var(--pill);
  background: var(--field-bg); border: 2px solid var(--rule);
}
.auth-tab {
  display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 6px 12px;
  border-radius: var(--pill);
  font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.1; text-align: center;
  color: var(--ink-2);
}
button.auth-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.auth-tab.is-on {
  background: var(--surface); color: var(--ink);
  box-shadow: inset 0 2px 0 var(--puff), 0 3px 0 var(--lip-surface);
}

/* ----------------------------------------------------------------------------
   Badges and the signed-in account's initial
   ---------------------------------------------------------------------------- */
.badge, .avatar {
  display: grid; place-items: center; flex: none;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--tone, var(--reading)); color: var(--tile-ink);
  box-shadow: inset 0 2px 0 var(--puff), 0 10px 24px color-mix(in srgb, var(--tone, var(--reading)) 25%, transparent);
}
.badge[data-tone="reading"] { --tone: var(--reading); }
.badge[data-tone="math"] { --tone: var(--math); }
.badge[data-tone="language"] { --tone: var(--language); }
.badge[data-tone="verbal"] { --tone: var(--verbal); }
.badge svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.avatar { --tone: var(--verbal); font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1; text-transform: uppercase; }
.who { display: flex; align-items: center; gap: 16px; }
.who .auth-head { min-width: 0; gap: 4px; }
#in-name { font-size: clamp(22px, 1.2vw + 14px, 30px); line-height: 1.2; overflow-wrap: anywhere; }

/* ----------------------------------------------------------------------------
   Google, and the "or" rule under it
   ---------------------------------------------------------------------------- */
.google-row { display: grid; gap: 14px; }
.btn-google {
  --lip: var(--ink-lip);
  width: 100%; background: var(--ink); color: var(--ink-text); font-size: 18px; gap: 12px;
}
.btn-google .g { width: 20px; height: 20px; flex: none; }
.google-slot { display: flex; justify-content: center; min-height: 44px; }
.google-row .error:empty { display: none; }
.or {
  display: flex; align-items: center; gap: 14px;
  font-size: 15px; color: var(--ink-2);
}
.or::before, .or::after { content: ""; flex: 1; height: 2px; border-radius: var(--pill); background: var(--rule); }

/* ----------------------------------------------------------------------------
   Fields
   ---------------------------------------------------------------------------- */
.auth-form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 500; font-size: var(--fs-small); }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.field small { font-size: 15px; line-height: 1.45; color: var(--ink-2); }

.input-wrap { position: relative; display: flex; align-items: center; }
.input-icon {
  position: absolute; left: 16px; width: 20px; height: 20px; pointer-events: none;
  fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.input-wrap input {
  width: 100%; min-width: 0; min-height: 56px;
  padding: 12px 16px 12px 48px;
  border: 2px solid var(--field-line); border-radius: var(--radius-field);
  background: var(--field-bg); color: var(--ink);
  font: inherit; font-size: 18px; line-height: 1.3;
}
.input-wrap.has-reveal input { padding-right: 56px; }
.input-wrap input:hover { border-color: color-mix(in srgb, var(--field-line) 60%, var(--ink)); }
.input-wrap input:focus-visible {
  outline: none; border-color: var(--action);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--action) 32%, transparent);
}
.input-wrap:focus-within .input-icon { stroke: var(--action); }
/* Chrome's autofill paints its own pale fill; keep the well. */
.input-wrap input:-webkit-autofill,
.input-wrap input:-webkit-autofill:hover,
.input-wrap input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
  box-shadow: 0 0 0 100px var(--field-bg) inset;
  transition: background-color 9999s;
}

.reveal {
  position: absolute; right: 8px;
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--pill);
  color: var(--ink-2);
}
.reveal:hover { color: var(--ink); background: var(--surface); }
.reveal svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reveal .eye-off, .reveal[aria-pressed="true"] .eye { display: none; }
.reveal[aria-pressed="true"] .eye-off { display: block; }

.caps { font-size: 15px; font-weight: 500; color: var(--math-text); }

/* The password rule as it is met: a chip per part, ticked when it holds. */
.pw-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-checks li, .pw-match {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; line-height: 1.2;
}
.pw-checks li {
  padding: 6px 12px 6px 9px; border-radius: var(--pill);
  background: var(--surface); color: var(--ink-2);
}
.pw-checks li::before, .pw-match::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor;
}
.pw-checks li.is-met { background: var(--verbal); color: var(--tile-ink); }
.pw-checks li.is-met::before, .pw-match.is-met::before {
  width: 6px; height: 11px; border-radius: 0; margin: -3px 4px 0 4px;
  border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.pw-match { color: var(--ink-2); }
.pw-match.is-met { color: var(--correct); }

/* ----------------------------------------------------------------------------
   Messages, buttons and links
   ---------------------------------------------------------------------------- */
.error { font-size: var(--fs-small); font-weight: 500; color: var(--review); }
.ok { font-size: var(--fs-small); font-weight: 500; color: var(--correct); }
.aside { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.aside a { color: var(--ink); }
.notice {
  display: grid; gap: 10px; padding: 16px 18px;
  border-radius: var(--radius-field); background: var(--surface);
  box-shadow: inset 0 2px 0 var(--puff);
  font-size: var(--fs-small); line-height: 1.5;
}
/* The agreement: a real checkbox, visually hidden over a drawn box so it keeps
   its keyboard focus and its label. */
.agree-row { display: grid; gap: 8px; }
.agree {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  font-size: var(--fs-small); line-height: 1.5; cursor: pointer;
}
.agree input {
  position: absolute; top: 0; left: 0; width: 26px; height: 26px; margin: 0;
  opacity: 0; cursor: pointer;
}
.agree-box {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border: 2px solid var(--field-line); border-radius: 8px; background: var(--field-bg);
}
.agree-box::after {
  content: ""; width: 7px; height: 13px; margin-top: -3px;
  border: solid var(--action-text); border-width: 0 3px 3px 0;
  transform: rotate(45deg); opacity: 0;
}
.agree:hover .agree-box { border-color: color-mix(in srgb, var(--field-line) 60%, var(--ink)); }
.agree input:checked + .agree-box { background: var(--action); border-color: var(--action); }
.agree input:checked + .agree-box::after { opacity: 1; }
.agree input:focus-visible + .agree-box { outline: 3px solid var(--focus); outline-offset: 3px; }
.agree a { color: var(--ink); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.link-btn {
  color: var(--action); font-weight: 500; font-size: inherit;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--ink); }
.field-head .link-btn { font-size: 15px; }
.auth-note { text-align: center; font-size: var(--fs-small); color: var(--ink-2); }
.in-actions { display: grid; gap: 14px; }
.in-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; font-size: var(--fs-small); }

/* ----------------------------------------------------------------------------
   The brand panel (from 1000px)
   ---------------------------------------------------------------------------- */
.auth-art { display: none; }
@media (min-width: 1000px) {
  .auth-art {
    --blob-mix: 34%;
    display: block; align-self: start;
    position: sticky; top: 16px;
    height: calc(100vh - 32px); min-height: 640px;
    margin: 16px 16px 16px 0;
    border-radius: var(--radius); overflow: hidden;
    background: var(--surface);
    box-shadow: inset 0 2px 0 var(--puff);
  }
}
.art-b1 { bottom: -12%; left: -14%; }
.art-b2 { top: -10%; right: -12%; }
.art-b3 { bottom: 26%; right: 34%; }
.art-inner {
  position: relative; z-index: 1;
  height: 100%; display: flex; flex-direction: column; gap: 24px;
  padding: clamp(36px, 3.6vw, 56px);
}
.art-title {
  font-family: var(--font-display); font-weight: 600; line-height: 1.05; text-wrap: balance;
  font-size: clamp(40px, 3.4vw, 60px); max-width: 20ch;
}
.art-line { font-size: var(--fs-lede); line-height: 1.5; color: var(--ink); max-width: 34ch; }
.art-counts { margin: 8px 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; max-width: 540px; }
.art-counts span:last-child { color: var(--ink); }
.art-card { margin-top: auto; align-self: flex-end; width: min(340px, 100%); display: grid; gap: 10px; }
.art-card .flash { transform: rotate(-2deg); }
.art-caption { font-size: 15px; font-weight: 500; text-align: right; }

/* ----------------------------------------------------------------------------
   Motion: a section that appears rises into place (it answers a click).
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .auth-body > section:not([hidden]) { animation: rise 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .auth-tab, .reveal, .pw-checks li { transition: background-color 160ms ease, color 160ms ease; }
}

.wordmark { display: inline-flex; align-items: center; gap: 0.18em; }
.wordmark .mark { width: 1.2em; height: 1.2em; display: block; flex: none; }