/* SiteRadar — login and registration screen
 * (docs/handoff/02-login.html, IMPLEMENTATION.md §2 п.7–8, §3, §5, §6; task T5/D3).
 *
 * Loaded by layout.html instead of cabinet.css when pageData.Shell == "auth" —
 * this file is the auth screen and nothing else (the document and error pages
 * are app-shell pages and live in cabinet.css).
 *
 * The shell itself (body.shell-auth, the glow, the brand link, the short
 * footer) is ui.css; this file owns the card and the copy around it:
 * .auth__title .auth__lead .auth__card .auth__note.
 *
 * Colours, radii, shadows and type roles come from tokens.css — no literals.
 * A token may be overridden per component (the glow below), never invented. */

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

/* The login glow is wider and starts higher than the cabinet hero one:
   02-login.html draws a 1000×600 ellipse at top:-300 (the cabinet defaults are
   900×520 at -260). .glow reads these tokens, so the shell redefines them. */
.shell-auth {
  --glow-w: 1000px;
  --glow-h: 600px;
  --glow-top: -300px;
}

/* ---- heading --------------------------------------------------------------- */

.auth__title {
  margin: 0 0 10px;
  font-size: var(--fs-h1-auth);
  line-height: var(--lh-h1-auth);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-bold);
  text-align: center;
}

.auth__lead {
  margin: 0 0 32px;
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: center;
}

/* ---- card ------------------------------------------------------------------ */

/* The card is the <form> itself: one element instead of a wrapper, so the
   14px gap of the mock-up is the gap between the fields, the checkbox and the
   button and nothing has to carry a margin. */
.auth__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-auth);
  background: var(--bg);
  box-shadow: var(--shadow-auth);
}

/* The submit pill of the card is the tall one of the mock-up (15px instead of
   the 12px of the primitive); it stays well above the 44px touch target. */
.auth__card .btn { padding: 15px; }

/* "Запомнить меня" — only the mock-up's inset; the 44px touch minimum is the
   .check primitive's own (pointer: coarse) rule in ui.css. */
.shell-auth .check { margin: 2px 0 4px 2px; }

/* The line under the card: "Нет аккаунта? Создать — первые три проверки бесплатно."
   (.auth__foot is already the page footer of the auth shell, see ui.css.) */
.auth__note {
  margin: 22px 0 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-align: center;
}

/* A link inside a sentence must not rely on its colour alone: --accent against the
   --text-2 of the sentence is 1.1:1, far under the 3:1 axe asks for, so the link
   carries an underline (Lighthouse link-in-text-block, задача D5). */
.auth__note a { text-decoration: underline; }

/* §5 needs no breakpoint here: .auth-main is already 100% wide under its 420px
   cap, the button is .btn--block, and the 28px padding of the mock-up still
   leaves a 271px field at 375. */