/*
 * The WebAdmin login page.
 *
 * Served pre-auth: nginx gates /spa/ behind auth_request and 401s to
 * /Login/Index, so this page is Mason/PSGI and cannot be the React app. It
 * therefore reuses the SPA's DESIGN, not the SPA: every colour, radius and
 * font below comes from /data/css/tokens.css (the same file styles.css
 * imports) and every rule mirrors an existing dashboard class —
 * .panel (14px radius, --surface, --line), .glow-card, .eyebrow, .error-card.
 * Nothing here is invented; if a value is not a token, it is copied verbatim
 * from the matching rule in ui/src/styles.css.
 *
 * Static on purpose: login is no longer rendered through $global->theme()
 * (the old login.css.mas hardcoded the legacy green #69BE28, which is why
 * login and dashboard looked like different products). The theme system it
 * belonged to was deleted with the classic UI in Brief 63; light/dark comes
 * from tokens.css, chosen by the control at the foot of the card.
 *
 * No JavaScript is required by any rule here: the card's glow is driven by
 * :focus-within, exactly as .glow-card does in the SPA.
 */

/* ui/src/styles.css:21 — the dashboard background. */
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  padding: 2rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 15% 0%, var(--hero-tint) 0, var(--bg) 38%);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* .panel (styles.css:145,150) + .glow-card (:179-183), as one card. */
.login-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(420px, 100%);
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--elevation-2);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.login-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgb(var(--glow) / .17), transparent 72%);
  transition: opacity .2s ease;
}

.login-card:focus-within::before { opacity: 1; }
.login-card:focus-within { box-shadow: var(--elevation-2), 0 0 28px rgb(var(--glow) / .1); }

/* .brand (styles.css:28-31) — the same wordmark as the topbar. */
.login-brand {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: 1.5rem;
  color: var(--text);
}

.login-brand span { color: var(--accent); font-weight: 900; letter-spacing: .12em; }
.login-brand strong { font-size: .95rem; }

/* .eyebrow (:54) + .dashboard-header h1/p (:45-46) — the header rhythm. */
.eyebrow {
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.login-card h1 {
  margin: .25rem 0 .35rem;
  font-size: 1.9rem;
  letter-spacing: -.045em;
}

.login-card h2 {
  margin: .35rem 0 0;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 500;
}

.login-lede { margin: 0 0 1.5rem; color: var(--muted); font-size: .95rem; }

.login-fields { display: grid; gap: 1rem; margin-bottom: 1.25rem; }

/* .field-label (:197). */
.login-field label {
  display: block;
  margin-bottom: .4rem;
  font-size: .86rem;
  font-weight: 750;
}

/* input (:199) + the SPA's focus treatment. */
.login-field input {
  width: 100%;
  min-height: 42px;
  padding: .65rem .75rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: 0;
  background: var(--inset);
  color: var(--text);
  font: inherit;
}

.login-field input:focus-visible {
  border-color: var(--focus);
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* button (:24). */
.login-submit {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: .75rem 1rem;
  background: var(--accent-strong);
  color: var(--on-accent);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.login-submit:hover { background: var(--accent); }
.login-submit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* .error-card (:171) — the reason block. */
.error-card {
  padding: 1rem;
  margin-bottom: 1.25rem;
  color: var(--danger);
  background: var(--danger-surface);
  border-radius: 12px;
  font-size: .9rem;
}

/* .network-apply-banner (:174) — the caps-lock hint, the one warning left. */
.warning-card {
  padding: .75rem 1rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--warning-border);
  border-radius: 12px;
  background: var(--warning-surface);
  color: var(--warning);
  font-size: .85rem;
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .login-card, .login-card::before { transition: none; }
  .login-card::before { display: none; }
}

/* The logout confirmation wears the same card (Brief 63). It used to render
   through the classic chrome — header.mas, jQuery, jstree and flot — for a
   page that asks one question. */
.logout-discard { display: block; margin-bottom: 1.25rem; color: var(--muted); font-size: .9rem; }
.logout-discard input { margin-right: .5rem; accent-color: var(--accent); }
.login-secondary { margin: 1rem 0 0; text-align: center; font-size: .85rem; }

/* The pre-auth theme control (three links, no JavaScript). Mirrors
   .theme-toggle in ui/src/styles.css so the same control does not look like
   two different things either side of the login. */
.theme-choice {
  display: flex;
  justify-content: center;
  gap: .25rem;
  margin-top: 1.5rem;
  padding: .25rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--inset);
}

.theme-choice a {
  flex: 1;
  padding: .3rem .5rem;
  border-radius: 6px;
  color: var(--muted);
  font-size: .72rem;
  text-align: center;
  text-decoration: none;
}

.theme-choice a:hover { color: var(--text); text-decoration: none; }
.theme-choice a.active { background: var(--surface); color: var(--text); font-weight: 750; }
.theme-choice a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }