/* login.html — the page's own rules. Moved out of its inline <style>
   (Phase 8 of the shell plan, 2026-10-11); linked where the block stood, so
   the cascade order is unchanged. Shared looks live in style.css /
   doorway.css — a rule here is this page's alone. */

/* The palette, the ground and the column are Shell D's (doorway.css,
   Phase 6e); these are this page's own NAMES for the sheet's tokens. The
   centred hero card and its branded sign-in button stay this page's: it is
   the one screen every person — staff, volunteer, family — passes through. */
:root {
  /* ⚠️ No `--accent` here: the sheet's `--teal` is `var(--accent, #1f4e5f)`,
     so aliasing --accent back to --teal is a cycle and BOTH go invalid — the sign-in
     button rendered white on nothing. This page's rules name `--teal`. */
  --bg: var(--paper); --bg-card: var(--card); --ink-2: var(--muted);
  --border: var(--line);
  --shadow-lg: 0 12px 40px rgba(26,26,46,.12), 0 2px 8px rgba(26,26,46,.06);
  --font-serif: var(--serif); --font-sans: var(--sans);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* The doorway column, centred in the window — on the role class AND the
   shared one: the sign-in card is the whole page. */
.login-screen.door-wrap {
  position: relative; z-index: 1;
  max-width: none; min-height: 100vh;
  align-items: center; justify-content: center;
  padding: 24px;
}

.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 56px 48px 48px;
  text-align: center;
  max-width: 420px;
  width: 100%;
  animation: fadeUp .4s ease both;
}

.login-logo {
  width: 56px; height: 56px;
  border-radius: 14px;
  object-fit: cover;
  display: block;
  margin: 0 auto 28px;
}

.login-title {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}

.login-sub {
  color: var(--ink-2);
  margin-bottom: 36px;
  font-size: .92rem;
  line-height: 1.6;
}

.btn-pco {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--teal);
  color: #fff;
  border: none; border-radius: 10px;
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: .95rem; font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(31,78,95,.35);
}
.btn-pco:hover  { background: #143847; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(31,78,95,.4); }
.btn-pco:active { transform: translateY(0); }

.login-error {
  margin-top: 24px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fdecea;
  border: 1px solid rgba(192,57,43,.18);
  color: #9c2b1f;
  font-size: .85rem;
  text-align: left;
}

/* The way out for somebody who cannot get in. This is the page a locked-out
   volunteer actually lands on, and /help.html answers exactly that question
   — which is why that page is deliberately static and needs no session. */
.login-help {
  margin-top: 28px;
  font-size: .85rem;
  color: var(--ink-2);
}
.login-help a { color: var(--teal); font-weight: 500; }
/* The link sits inline in a sentence, so it cannot be 44px tall without
   wrecking the line. Same fix icons.js, .v-link and .sc-tel use: a
   transparent ::after that grows the TAP area without touching layout. */
@media (pointer: coarse) {
  .login-help a { position: relative; display: inline-block; }
  .login-help a::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%); height: 44px;
  }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Phone widths. The desktop padding (56/48) starved the content column —
   at 320px the card's inner width fell to ~176px and the CTA wrapped onto
   three lines with its icon stranded mid-air to the left. Slimmer padding
   plus a full-width button keeps the label to one line on any real phone
   (≥360px); on very narrow screens it wraps to two centered lines. */
@media (max-width: 480px) {
  .login-screen.door-wrap { padding: 16px; }
  .login-card   { padding: 40px 24px 36px; }
  .btn-pco      { width: 100%; padding: 14px 16px; }
}