/* Account surfaces: /auth and /trial.
 *
 * These are the only pages on the site where the visitor has a TASK rather than
 * something to read. The marketing scaffolding — 1240px measure, 72px top
 * padding, hero-scale display type, 96px section rhythm — exists to let long
 * content breathe, and it makes a two-field form look abandoned in the corner
 * of a very large page. Everything here narrows the frame to the work.
 *
 * Colour comes only from var() references to site.css tokens. No literals: the
 * brand lint derives its allowlist from declarations, and a hardcoded hex here
 * would either fail the gate or quietly fork the palette.
 */

.auth-shell {
  /* Centre the task optically rather than geometrically — a form pinned to the
     exact middle reads low, because the nav above it already carries weight. */
  min-height: calc(100vh - 220px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 20px 96px;
}

.auth-card {
  width: 100%;
  max-width: 424px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 36px 32px 32px;
  /* Offset plus blur: a zero-offset halo is decoration, not depth. Tinted from
     the ink token via color-mix so no colour literal appears in this file. */
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent),
              0 12px 32px -16px color-mix(in srgb, var(--ink) 22%, transparent);
}

/* Heading. NOT .display — that is hero type built for a landing page and it
   overwhelms a form. More space above than below, per the spacing rule. */
.auth-card h1 {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
  text-wrap: balance;
}

.auth-lede {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 26px;
}

.auth-card form { display: block; margin: 0; }

.auth-field { margin-bottom: 16px; }

.auth-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.auth-field input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;          /* 16px-ish: below this iOS zooms the viewport on focus */
  color: var(--ink);
  background: var(--panel);
  /* --line is 1.28:1 on this surface; WCAG 1.4.11 wants 3:1 for the boundary of
     an interactive control, which is exactly why --line-field exists. */
  border: 1px solid var(--line-field);
  border-radius: 6px;
  transition: border-color .15s, box-shadow .15s;
}

.auth-field input:focus {
  outline: none;
  border-color: var(--green-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
}

/* Keyboard users must still get a ring even where :focus-visible differs. */
.auth-field input:focus-visible { outline: 2px solid transparent; }

.auth-card .btn { width: 100%; margin-top: 4px; }
.auth-card .btn[disabled] { opacity: .6; cursor: progress; }

/* 🔴 site.css sets `.form-err { display: none }`, which made every error on
   these pages invisible — the text was written to the node and never shown.
   :not(:empty) reveals it exactly when there is something to say, with no JS
   needed to toggle a class. */
.auth-card .form-err { margin-top: 14px; font-size: 13px; }
.auth-card .form-err:not(:empty) { display: block; }

.auth-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.auth-note a { color: var(--green-ink); }

/* Turnstile renders in an iframe at a fixed intrinsic size; give it its own
   breathing room rather than letting it collide with the submit button. */
.auth-card .cf-turnstile { margin: 4px 0 18px; min-height: 65px; }

/* Terminal states (confirmed, sent, expired) carry no form, so they read as a
   short message rather than a card of empty chrome. */
.auth-card .auth-body { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.auth-card .auth-body p { margin: 0 0 12px; }
.auth-card .auth-body p:last-child { margin-bottom: 0; }

@media (max-width: 520px) {
  .auth-shell { padding: 5vh 16px 64px; }
  .auth-card { padding: 28px 20px 24px; border-radius: 8px; }
  .auth-card h1 { font-size: 21px; }
}