/* ---- Pre-login surface: shared primitives ---------------------------------
   Landing, log in, sign up, "check your email" and the reset pages are one
   surface. This file holds what all of them use: band rhythm, the eyebrow
   type treatment, the two public button sizes, the auth card's width and the
   footer. Landing-only sections live in `landing.css`.

   Tokens only (`tokens.css`), and the canonical names: every colour, size,
   space and radius here resolves through the design-token layer, so the M2
   per-tenant accent keeps working and the type scale is the one scale.
   The auth card is `.panel` (style guide 7.2) plus a width; the buttons are
   the four of `buttons.css` (7.3) plus one size step. */

/* ---- Bands: full-bleed grounds, each centring its own `.page-width` ------- */

.band {
  padding-block: var(--sp-64);
  border-bottom: 1px solid var(--line);
}
.band--paper { background: var(--paper); }
.band--tight { padding-block: var(--sp-48); }
.band--ink {
  background: var(--band);
  color: var(--band-text);
  border-bottom-color: var(--band-line);
}
.band--ink a { color: var(--accent-on-band); }
.band--ink .eyebrow { color: var(--accent-on-band); }
.band--ink .lede,
.band--ink .band-note { color: var(--band-muted); }

/* ---- Type treatments ------------------------------------------------------ */

/* The eyebrow is the ledger line's legend (style guide 7.1) in the face the
   product uses for requirement IDs, CVSS vectors and digests. It is the
   through-line between the storefront and the workspace, so it is never
   decorative: it always names something real. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: var(--fw-medium);
  color: var(--slate);
  margin: 0 0 var(--sp-12);
}
/* An eyebrow that quotes an identifier keeps the identifier's own casing:
   `prEN` is a draft designation, and `PREN` is not a thing. */

.band h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--sp-12);
  max-width: 22ch;
}
.band h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--sp-8);
}
.lede {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--slate);
  max-width: var(--measure-prose);
  margin: 0;
}
.band-note {
  font-size: var(--fs-micro);
  line-height: var(--lh-body);
  color: var(--slate);
  max-width: 62ch;
}
.mono { font-family: var(--font-mono); }

/* ---- Buttons --------------------------------------------------------------
   One size step on top of the four kinds in `buttons.css`, and nothing else:
   ground, hover and pressed states all stay there, so a pre-login button can
   never drift away from the same button inside the workspace. The height has
   no token of its own because it is not a control height; it is derived from
   the control scale so the two stay in step. */

.btn-lg {
  min-height: calc(var(--control-h) + var(--sp-8));  /* 46px: one step above a control */
  padding: 0 var(--sp-20);
  font-size: var(--fs-body);
  text-decoration: none;
}
.action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-12);
}

/* ---- Sign-in, sign-up and reset: one card ---------------------------------
   The card is the workspace's panel (style guide 7.2), so the first screen a
   prospect sees is already the product: same ground, same hairline, same
   radius. This file adds only its width and the rhythm inside it, because the
   panel's own flex gap is what spaces the card's parts. */

.auth {
  display: grid;
  justify-items: center;
  gap: var(--sp-20);
  padding: var(--sp-32) var(--gutter) var(--sp-64);
}
.auth-card {
  width: 100%;
  box-sizing: border-box;
  max-width: 28rem;
  gap: var(--sp-12);
}
.auth-card--wide { max-width: 34rem; }
/* The panel lays its parts out in a column with one gap, so nothing inside
   the card carries a margin of its own. */
.auth-card > * { margin: 0; }
.auth-card h1 {
  font-size: var(--fs-h2);  /* the auth card title (style guide 5.2) */
  line-height: var(--lh-h2);
  font-weight: var(--fw-semibold);
}
.auth-card h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
}
.auth-intro {
  color: var(--slate);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}
.auth-aside {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--slate);
  text-align: center;
  max-width: 30rem;
  margin: 0;
}
.auth-aside a { white-space: nowrap; }

/* ---- Fields ---------------------------------------------------------------
   `.auth-form` and `.field` were this file's own components, and the lesson
   in their comment (style the control, not its type) is now the whole of
   `forms.css`. Both live there, and the pre-login card keeps only what is
   about the card. */

/* ---- Footer --------------------------------------------------------------- */

.public-footer {
  background: var(--band);
  color: var(--band-text);
  padding-block: var(--sp-24);
}
.public-footer a:focus-visible { outline-color: var(--accent-on-band); }
/* The footer band is dark in BOTH themes, so the mark takes the dark shield
   body always and cuts its pulse line in the band rather than in the page.
   The shared wordmark rule supplies its size. */
.public-footer .brand-mark {
  --brand-cut: var(--band);
  --brand-slate: var(--brand-slate-on-band);
}

@media (max-width: 48rem) {
  .band { padding-block: var(--sp-48); }
}