/* ==========================================================================
   UI-S9 — /login and the shared error page (404 / 405 / 5xx).
   Loaded by login.html and error.html via {% block surface_css %}; never by base.html.
   Mobile-first: phone rules first, min-width queries widen. Token-only — no colour
   values, breakpoints or sizes of its own. Tap floor and 16 px inputs come from
   components.css §1 (form context) — nothing here re-declares them.
   ========================================================================== */

/* ---- Pre-auth top bar: the brand wordmark and nothing else ----------------
   Used by /login and by an error page nobody is signed in for. The live header's
   omnibox, bell and avatar would be dead affordances here (R-528). The wordmark is a
   <span>, not a link — there is nowhere to go before sign-in — so it is not a target. */
.app-header--preauth .app-header__inner { justify-content: center; }
.app-header--preauth .brand { display: inline-flex; align-items: center; min-block-size: var(--topbar-h); }

/* ---- /login ----------------------------------------------------------------- */
.login-page {
  max-inline-size: 20rem;
  margin-inline: auto;
  min-block-size: calc(100svh - var(--topbar-h) - var(--space-8));
  display: grid;
  align-content: center;
  gap: var(--space-4);
  padding-block: var(--space-5) var(--space-8);
}
.login-page__head { display: grid; gap: var(--space-2); }
.login-page__title { margin: 0; }
.login-form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.login-form input:not([type="checkbox"]) { inline-size: 100%; }
.login-form__submit { inline-size: 100%; }

/* The remember-me row is a plain <label> around the native checkbox: components.css makes
   it an inline-flex row with the tap floor, so the box sits inline with its words and the
   LABEL is the target. Only its text takes the form's own colour and size. */
.login-form > label { color: var(--fg); font-size: var(--fs-body); }

/* ---- Error page (404 / 405 / 5xx) --------------------------------------------- */
.error-page {
  max-inline-size: 32rem;
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  text-align: center;
  padding-block-start: var(--space-4);
}
.error-page__status {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(56px, 18vw, 88px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
}
.error-page[data-status^="5"] .error-page__status { color: var(--danger); }
.error-page__message { margin: 0; }
.error-page__detail { margin: 0; color: var(--fg-muted); font-size: var(--fs-body); }
/* R-524: the picture is bounded on BOTH axes. A width cap alone would let a tall narrow
   file fill the screen and push the actions below the fold; the svh cap is what keeps the
   back link on the first screen whatever shape the owner drops in (402×874 and shorter). */
.error-page__image {
  display: block;
  inline-size: auto; block-size: auto;
  max-inline-size: min(100%, 20rem);
  max-block-size: min(34svh, 16rem);
  margin: 0 auto;
  border-radius: var(--radius);
}
.error-page__actions {
  display: grid;
  gap: var(--space-3);
  inline-size: 100%;
  max-inline-size: 24rem;
  margin-block-start: var(--space-3);
}
.error-page__action { inline-size: 100%; }

/* ---- ≥ sm: the form and the error card stop hugging the edges ------------------- */
@media (min-width: 600px) {
  .login-page { padding-block: var(--space-7); }
  .login-form { padding: var(--space-5); }
  .error-page { padding-block-start: var(--space-7); }
  .error-page__actions { grid-auto-flow: column; grid-auto-columns: 1fr; max-inline-size: 28rem; }
}