/* Santa Visits – Little Silver Vol. Fire Co.
   Shared by the sign-up page (/) and the organizer page (/admin).
   Dispatch design (Oct 26, 2026): the same tokens and fonts as the
   organizer app (src/styles/tokens.css in the main project), but friendlier
   for families: 16px text, roomy spacing, 44px+ inputs. */

/* Martian Grotesk (text) and Martian Mono (numbers, slashed zeros, standard
   width), with Space Grotesk as the backup. Served from this site (no Google
   Fonts, so no third party sees who signs up). SIL Open Font License:
   fonts/OFL-martian-grotesk.txt */
@font-face { font-family: "Martian Grotesk"; src: url(/fonts/martian-grotesk-variable.woff2) format("woff2"); font-weight: 100 1000; font-stretch: 75% 200%; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url(/fonts/martian-mono-variable.woff2) format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url(/fonts/space-grotesk-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url(/fonts/space-grotesk-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url(/fonts/space-grotesk-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url(/fonts/space-grotesk-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

/* ---- Dispatch tokens (copied from the main app's src/styles/tokens.css) ---- */
:root {
  color-scheme: light;
  --bg: #EDEBFA; --tile: #FFFFFF; --text: #17163D; --muted: #585785;
  --line: #DCD9F2; --line-2: #BDB8E6; --row-line: #EEECFA; --chip: #EDEBFA;
  --field: #FAF9FF; --field-line: #BDB8E6; --btn-bg: #F2A007; --btn-fg: #1A1200;
  --gold: #F2A007;  --gold-text: #8A5300;  --gold-soft: #FFF3DC;  --gold-line: #F0C77A;
  --berry: #D8263F; --berry-text: #B01F3A; --berry-soft: #FBE3E8; --berry-line: #ECB1BC;
  --green: #17895A; --green-text: #127346; --green-soft: #DDF3E8;
  --blue: #3F5FD8;  --blue-text: #2F4FC2;  --blue-soft: #E3E8FB;
  --light-1: #D8263F; --light-2: #E08A00; --light-3: #17895A; --light-4: #3F5FD8;
  --light-wire: #8B89B5; --light-cap: #A09EC4; --light-glow: 0.18;
  --radius-tile: 6px; --radius-inner: 4px; --radius-chip: 3px;
  --switch-on: #FFFFFF;
  /* Keyboard focus: the darker amber in light (bright amber is too faint on white) */
  --focus: var(--gold-text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0D0D2B; --tile: #161642; --text: #ECEBFA; --muted: #A9A8D0;
    --line: #2A2A5E; --line-2: #3E3E7A; --row-line: #1E1E4E; --chip: #22225A;
    --field: #12123A; --field-line: #3E3E7A; --btn-bg: #FFB224; --btn-fg: #1A1200;
    --gold: #FFB224;  --gold-text: #FFC14D;  --gold-soft: #2B2340;  --gold-line: #6E5630;
    --berry: #FF6B7D; --berry-text: #FF8C9A; --berry-soft: rgba(255,107,125,0.12); --berry-line: #7A2E4A;
    --green: #5BE3A4; --green-text: #5BE3A4; --green-soft: rgba(91,227,164,0.12);
    --blue: #8FB4FF;  --blue-text: #8FB4FF;  --blue-soft: rgba(143,180,255,0.12);
    --light-1: #FF6B7D; --light-2: #FFC14D; --light-3: #5BE3A4; --light-4: #8FB4FF;
    --light-wire: #55559A; --light-cap: #A9A8D0; --light-glow: 0.34;
    --switch-on: #2E2E6A;
    --focus: var(--gold);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0D0D2B; --tile: #161642; --text: #ECEBFA; --muted: #A9A8D0;
  --line: #2A2A5E; --line-2: #3E3E7A; --row-line: #1E1E4E; --chip: #22225A;
  --field: #12123A; --field-line: #3E3E7A; --btn-bg: #FFB224; --btn-fg: #1A1200;
  --gold: #FFB224;  --gold-text: #FFC14D;  --gold-soft: #2B2340;  --gold-line: #6E5630;
  --berry: #FF6B7D; --berry-text: #FF8C9A; --berry-soft: rgba(255,107,125,0.12); --berry-line: #7A2E4A;
  --green: #5BE3A4; --green-text: #5BE3A4; --green-soft: rgba(91,227,164,0.12);
  --blue: #8FB4FF;  --blue-text: #8FB4FF;  --blue-soft: rgba(143,180,255,0.12);
  --light-1: #FF6B7D; --light-2: #FFC14D; --light-3: #5BE3A4; --light-4: #8FB4FF;
  --light-wire: #55559A; --light-cap: #A9A8D0; --light-glow: 0.34;
  --switch-on: #2E2E6A;
  --focus: var(--gold);
}
/* The names this stylesheet used before, pointed at the Dispatch tokens */
:root {
  --panel: var(--tile); --line2: var(--line-2); --subtle: var(--muted);
  --red: var(--berry); --red-text: var(--berry-text); --red-soft: var(--berry-soft); --frost: var(--blue);
  --primary: var(--btn-bg); --sel-bg: var(--gold-soft);
  --error: var(--berry-text); --error-soft: var(--berry-soft); --ok-soft: var(--green-soft);
  --sans: "Martian Grotesk", "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg);
  color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.55;
}
a { color: inherit; }
a:hover { opacity: 0.85; }
button, input, select, textarea { font: inherit; color: inherit; }
::placeholder { color: var(--muted); opacity: 0.85; }
/* Visible keyboard focus: 2px amber with a gap */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mono, .num { font-family: var(--mono); }
/* Numbers people type (house number, phone) in Martian Mono too */
.field input.mono, .field input[type="tel"], .field input[inputmode="numeric"], .field input[type="number"] { font-family: var(--mono); }
.muted { color: var(--muted); }
.subtle { color: var(--subtle); }

/* Christmas lights strand along the top: drawn by theme.js (the same
   strand as the organizer app), cropped, never stretched */
.lights { height: 40px; overflow: hidden; }
.lights svg { display: block; width: 100%; height: 44px; }
.lights .wire { fill: none; stroke: var(--light-wire); stroke-width: 1.6; }
.lights .cap { fill: var(--light-cap); }
.lights .shine { fill: #FFFFFF; opacity: 0.55; }
.lights .glow { opacity: var(--light-glow); }
.lights .l1 { fill: var(--light-1); } .lights .l2 { fill: var(--light-2); }
.lights .l3 { fill: var(--light-3); } .lights .l4 { fill: var(--light-4); }
@keyframes sv-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.sv-twinkle-a { animation: sv-twinkle 2.6s ease-in-out infinite; }
.sv-twinkle-b { animation: sv-twinkle 3.4s ease-in-out 0.9s infinite; }
@media (prefers-reduced-motion: reduce) { .sv-twinkle-a, .sv-twinkle-b { animation: none; } }

.wrap { max-width: 1120px; margin: 0 auto; padding: 12px 20px 64px; }
.wrap.wide { max-width: 1440px; }

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 20px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand img { width: 88px; height: 88px; object-fit: contain; flex: none; }
@media (max-width: 520px) { .brand img { width: 64px; height: 64px; } }
.admin .brand img { width: 44px; height: 44px; }
.brand > span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.brand b { font-weight: 700; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; }
.brand small { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.topbar-actions form { margin: 0; }

/* Theme switch: a square segmented control */
.theme { display: flex; gap: 2px; padding: 2px; border-radius: 5px; border: 1px solid var(--line); flex: none; }
/* 34x30 visually; the ::before pads the tap area to 44px */
.theme button { position: relative; width: 34px; height: 30px; border: 0; border-radius: 3px; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.theme button::before { content: ""; position: absolute; inset: -7px -2px; }
.theme button[aria-pressed="true"] { background: var(--switch-on); color: var(--text); }

/* Hero */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; padding: 24px 0 22px; }
.hero-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
/* Status tag: outlined, uppercase ("● Sign-ups open") */
.pill {
  align-self: flex-start; display: flex; align-items: center; gap: 8px; padding: 3px 10px;
  border-radius: var(--radius-chip); border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
  color: var(--green-text); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: var(--green); }
.pill.closed { border-color: var(--line-2); color: var(--muted); }
.pill.closed::before { background: var(--muted); }
h1 { margin: 0; font-size: clamp(30px, 4.6vw, 46px); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
.lede { margin: 0; max-width: 40rem; font-size: 17px; color: var(--muted); }
.lede b { color: var(--text); font-weight: 600; }
/* Small amber line above the headline (the 2025 form's title) */
.eyebrow { margin: 0 0 -6px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text); }
/* Readouts: a hairline grid */
/* ---- Countdown: each digit is an ornament hanging from the lights wire ---- */
.countdown { align-self: flex-end; flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ornaments { position: relative; display: flex; gap: 12px; padding: 22px 10px 6px; }
/* The wire: a shallow swoop, like the strand at the top of the page */
.ornaments::before {
  content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 18px;
  border-top: 1.6px solid var(--light-wire); border-radius: 50%;
}
.orn {
  --c: var(--light-1);
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 30px; line-height: 1; color: #FFFFFF;
  /* a soft shine top-left and a little shading bottom-right, so it reads as a glass ball */
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.5) 0 7%, transparent 8%),
    radial-gradient(circle at 70% 78%, rgba(0, 0, 0, 0.14), transparent 60%),
    var(--c);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 18%, transparent);
  transform-origin: 50% -18px;
  animation: orn-sway 3.6s ease-in-out infinite alternate;
}
/* Cap and hanger string */
.orn::after { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 8px; margin-left: -7px; border-radius: 2px; background: var(--light-cap); }
.orn::before { content: ""; position: absolute; top: -20px; left: 50%; width: 1.6px; height: 14px; margin-left: -0.8px; background: var(--light-wire); }
.orn:nth-child(even) { margin-top: 10px; animation-delay: -1.8s; }
.orn:nth-child(even)::before { top: -30px; height: 24px; }
.orn--1 { --c: var(--light-1); }
.orn--2 { --c: var(--light-2); color: #1A1200; }   /* gold: dark digit for contrast */
.orn--3 { --c: var(--green-text); }   /* a deeper green than the bulb, so white digits pass 4.5:1 */
.orn--4 { --c: var(--light-4); }
/* Dark theme: the bulbs are bright, so the digits go dark */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .orn { color: #0D0D2B; } }
:root[data-theme="dark"] .orn { color: #0D0D2B; }
@keyframes orn-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .orn { animation: none; } }
.countdown__label { margin: 0; min-width: 0; flex: 1 1 180px; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.countdown__label b { font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-text); }
.countdown__date { font-size: 13px; color: var(--muted); }

.layout { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.main-col { flex: 999 1 560px; min-width: 0; }

/* Form: one bordered panel, each step with an amber header */
.form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-tile); overflow: hidden; }
/* Each section's heading is a <legend>. Safari always pins a legend to the very top
   of its box and ignores the box's top padding, so the room above and below the
   heading lives on the legend itself. That way every browser draws it the same. */
.form fieldset { margin: 0; padding: 0 32px 32px; border: 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.form legend {
  width: 100%; margin: 0; padding: 32px 0 20px; display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text);
}
.step { min-width: 30px; height: 30px; padding: 0 6px; border-radius: var(--radius-inner); border: 1px solid var(--gold-line); background: var(--gold-soft); color: var(--gold-text); font-family: var(--mono); font-size: 13px; letter-spacing: 0; display: grid; place-items: center; flex: none; }
.help { margin: 0; font-size: 14.5px; color: var(--muted); }
.help.icon { display: flex; gap: 8px; }
.help.icon svg { flex: none; margin-top: 3px; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; min-width: 0; }
.field input, .field select, .field textarea, .admin select, .admin input[type="search"] {
  height: 48px; padding: 0 14px; border-radius: var(--radius-inner); border: 1px solid var(--field-line); background: var(--field);
  color: var(--text); font: 400 16px var(--sans); letter-spacing: 0; text-transform: none; width: 100%;
}
.field textarea { height: auto; padding: 12px 14px; resize: vertical; }
.field select { padding: 0 12px; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--berry); box-shadow: 0 0 0 3px var(--error-soft); }
.err { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--error); }
.err:empty { display: none; }

.grid-home { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: start; }
.grid-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: start; }
.kid { display: grid; grid-template-columns: minmax(0, 1fr) 96px 48px; gap: 12px; align-items: start; }
.kid .remove { margin-top: 26px; height: 48px; border-radius: var(--radius-inner); border: 1px solid var(--line-2); background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.kid .remove:disabled { opacity: 0.4; cursor: default; }
/* On narrow phones "Child's first name" wraps to two lines while "Age" stays on one.
   A subgrid shares the label row across the columns, so the name box, the age box and
   the remove button stay on one line whatever the labels do. */
@supports (grid-template-rows: subgrid) {
  .kid { grid-template-rows: auto auto auto; row-gap: 0; }
  .kid .field { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 0; align-items: end; }
  .kid .field input, .kid .field .err { margin-top: 6px; }
  .kid .remove { grid-column: 3; grid-row: 2; margin-top: 6px; }
}
.add-kid {
  align-self: flex-start; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border-radius: var(--radius-inner); border: 1px dashed var(--line-2); background: transparent; color: var(--text);
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
}

/* Checkboxes and radios: amber (the darker shade in light, for contrast) */
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--focus); }
.check.center { align-items: center; }
.check.center input { margin: 0; }

.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.choice { display: flex; gap: 12px; padding: 16px; border-radius: var(--radius-tile); border: 1px solid var(--line-2); cursor: pointer; }
.choice:has(input:checked), .choice.on { border: 1.5px solid var(--gold); background: var(--sel-bg); padding: 15.5px; }
.choice input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--focus); }
.choice span { display: flex; flex-direction: column; gap: 4px; }
.choice b { font-weight: 600; font-size: 15.5px; }
.choice small { font-size: 14px; color: var(--muted); }
.note-gold { margin: 0; display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius-inner); border: 1px solid var(--gold-line); background: var(--gold-soft); font-size: 14.5px; }
.note-gold svg { flex: none; margin-top: 3px; fill: var(--gold); }

.form-end { padding: 0 32px 32px; display: flex; flex-direction: column; gap: 16px; }
.form .form-end { border-bottom: 0; }
.closing { margin: 0; font-size: 15px; line-height: 1.6; }
.closing a { overflow-wrap: anywhere; }
.closing a[href^="tel"] { white-space: nowrap; }
/* Inline links in a sentence: stretch the tap area to the full 24px line height
   (any taller and the email and phone links on neighbouring lines would overlap). */
.closing a { position: relative; }
.closing a::after { content: ""; position: absolute; inset: -3px 0; }
/* A thin dashed rule before the button */
.candy { height: 0; border-top: 1px dashed var(--line-2); }
.submit {
  min-height: 52px; border: 0; border-radius: var(--radius-inner); background: var(--primary); color: var(--btn-fg);
  font: 700 15px var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; text-align: center;
}
.submit:hover { filter: brightness(1.06); }
.submit[disabled] { opacity: 0.7; cursor: progress; }
.form-error { margin: 0; padding: 12px 14px; border-radius: var(--radius-inner); border: 1px solid var(--berry-line); background: var(--error-soft); color: var(--error); font-size: 14.5px; font-weight: 500; }
.small-print { margin: 0; text-align: center; font-size: 13px; color: var(--subtle); text-wrap: balance; }
.small-print a { white-space: nowrap; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(26,18,0,0.3); border-top-color: var(--btn-fg); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

/* Confirmation + closed panels */
.panel-center { padding: 40px 28px; border-radius: var(--radius-tile); border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.panel-center img { width: 96px; height: 96px; object-fit: contain; }
.panel-center h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.panel-center p { margin: 0; max-width: 32rem; color: var(--muted); }
.receipt { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-tile); overflow: hidden; margin-top: 6px; }
.receipt > div { background: var(--panel); padding: 12px 18px; text-align: left; flex: 1 1 auto; }
.receipt p { margin: 0 !important; color: var(--text) !important; }
.receipt .k { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted) !important; }
.receipt .v { margin-top: 2px !important; font-weight: 600; }

/* Aside: panels with an amber header strip */
.aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.card { --pad: 20px; padding: var(--pad); border-radius: var(--radius-tile); border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; gap: 14px; }
.card h2 {
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0; padding: 10px var(--pad); border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text);
}
.card p { margin: 0; }
.steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.steps li { display: flex; gap: 12px; }
.steps svg { flex: none; }
.steps .cap { fill: var(--light-cap); }
.b-red { fill: var(--light-1); } .b-gold { fill: var(--light-2); } .b-green { fill: var(--light-3); } .b-frost { fill: var(--light-4); }
.steps span { display: flex; flex-direction: column; gap: 2px; }
.steps b { font-weight: 600; }
.steps small { font-size: 14px; color: var(--muted); }
.card .muted { font-size: 14.5px; }

/* Buttons (shared): square-ish, uppercase; amber primary */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border-radius: var(--radius-inner); border: 1px solid var(--line-2); background: transparent; color: var(--text);
  font: 500 13px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--chip); opacity: 1; }
.btn.small { min-height: 36px; padding: 0 12px; font-size: 12px; }
.btn.ghost { background: transparent; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--btn-fg); font-weight: 700; min-height: 48px; }
.btn.primary:hover { filter: brightness(1.06); background: var(--primary); }
.btn.danger { background: var(--error-soft); border-color: var(--berry-line); color: var(--error); font-weight: 600; }

/* ---------------------------------------------------------------- organizer page */
.admin .card.narrow { max-width: 440px; margin: 48px auto 0; padding: 28px; }
.admin .card.narrow h1 { font-size: 22px; letter-spacing: 0.1em; text-transform: uppercase; }
.admin pre { margin: 0; padding: 14px; border-radius: var(--radius-inner); background: var(--field); border: 1px solid var(--line); font: 13px/1.6 var(--mono); overflow-x: auto; }
.stack { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.error { margin: 0; padding: 10px 12px; border-radius: var(--radius-inner); border: 1px solid var(--berry-line); background: var(--error-soft); color: var(--error); font-size: 14px; font-weight: 500; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 8px 0 18px; }
.page-head h1 { font-size: 20px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; }
.page-head p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.status { display: inline-block; width: 8px; height: 8px; border-radius: 4px; background: var(--subtle); margin-right: 8px; vertical-align: 1px; }
.status.on { background: var(--green); box-shadow: 0 0 0 3px var(--ok-soft); }
.export { display: flex; flex-wrap: wrap; gap: 8px; }
.flash { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius-inner); border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); background: var(--ok-soft); font-size: 14px; font-weight: 500; }

.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-tile); overflow: hidden; margin-bottom: 12px; }
.kpi { background: var(--panel); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi .num { font-size: 28px; font-weight: 600; line-height: 1.2; }
.kpi .label { font-size: 11.5px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.kpi.gold .num { color: var(--gold-text); }
.kpi.warn .num { color: var(--red-text); }

.zones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-tile); overflow: hidden; margin-bottom: 12px; }
.zone-card { padding: 12px 14px; background: var(--panel); text-decoration: none; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zone-card:hover { background: var(--chip); opacity: 1; }
.zone-card.on { box-shadow: inset 0 0 0 1.5px var(--gold); background: var(--gold-soft); }
.zone-card .zone-name { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.zone-card .num { font-size: 24px; font-weight: 600; }
.zone-card .label { font-size: 12px; color: var(--muted); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 4px; flex: none; background: var(--subtle); }
.dot.red { background: var(--berry); } .dot.frost { background: var(--blue); } .dot.green { background: var(--green); } .dot.gold { background: var(--gold); }

.table-card { padding: 0; gap: 0; overflow: hidden; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--radius-inner); border: 1px solid var(--line-2); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.chip.on { background: var(--primary); border-color: var(--primary); color: var(--btn-fg); font-weight: 700; }
.search { display: flex; gap: 8px; margin: 0; flex: 0 1 380px; min-width: 0; }
.admin .search input[type="search"] { height: 36px; font-size: 14px; }
.count { margin: 0; padding: 8px 14px; font-size: 12px; text-transform: uppercase; border-bottom: 1px solid var(--line); }

.table-scroll { overflow-x: auto; position: relative; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-weight: 500; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--panel); }
td { padding: 10px 12px; border-bottom: 1px solid var(--row-line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--chip); }
td.code { font-size: 12.5px; white-space: nowrap; }
td.notes { min-width: 180px; max-width: 240px; color: var(--muted); }
td.contact { white-space: nowrap; }
td.contact a { color: var(--muted); }
.nowrap { white-space: nowrap; }
.age { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.zone { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-transform: uppercase; font-size: 12.5px; }
/* Outlined status tags */
.tag { display: inline-block; padding: 1px 7px; border-radius: var(--radius-chip); border: 1px solid var(--line-2); color: var(--muted); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.tag.gold { border-color: var(--gold-line); color: var(--gold-text); }
.tag.warn { border-color: var(--berry-line); color: var(--red-text); }
.actions { text-align: right; }
.menu { margin: auto; width: min(340px, calc(100vw - 32px)); padding: 20px; border-radius: var(--radius-tile); border: 1px solid var(--line-2); background: var(--panel); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,0.35); flex-direction: column; gap: 16px; text-align: left; }
.menu:popover-open { display: flex; }
.menu::backdrop { background: rgba(13,13,43,0.55); }
.menu-head { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.menu-head .mono { font-size: 12.5px; }
.menu .close { align-self: flex-end; }
.danger-zone summary { font-size: 13.5px; font-weight: 500; color: var(--error); cursor: pointer; }
.danger-zone p { margin: 8px 0; font-size: 13px; }
.danger-zone form { margin: 0; }
.empty { padding: 48px 18px; text-align: center; }
.empty p { margin: 0 0 4px; }

@media (max-width: 1000px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .wrap { padding: 8px 16px 48px; }
  /* Uppercase mono is wide: let the name wrap rather than cut it off */
  .brand b { font-size: 12.5px; }
  .brand small { font-size: 11px; }
  .stats { flex-basis: 100%; }
  .zone-card .label { font-size: 11.5px; }
  .admin .brand img { width: 36px; height: 36px; }
  .admin .topbar-actions { gap: 6px; }
  .form fieldset, .form-end { padding: 0 16px 24px; }
  .form legend { padding-top: 24px; padding-bottom: 16px; }
  /* Stack house # over street so "Start typing your street" isn't cut off */
  .grid-home { grid-template-columns: minmax(0, 1fr); }
  .grid-home input[name="houseNumber"] { max-width: 140px; }
  .kid { grid-template-columns: minmax(0, 1fr) 76px 48px; }
  .lede { font-size: 16px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:first-child { grid-column: 1 / -1; }
  .search { flex: 1 1 100%; }
  .export { width: 100%; }
  .export .btn { flex: 1 1 auto; }
}

/* Event details & FAQ: shown first; the questions appear once it's checked */
.form .format p { margin: 0; font-size: 15px; line-height: 1.6; }
.form .format b { font-weight: 600; }
/* "Please read carefully" and the deadline, at the top of Event details */
.form .format .read-first { font-weight: 600; }
.form .format .deadline { padding: 10px 14px; border: 1px solid var(--gold-line); border-radius: var(--radius-inner); background: var(--gold-soft); color: var(--text); }
/* The three topics (underlined on the 2025 form): bigger, bold, amber, with a bulb */
.form .format .faq-h { margin: 4px 0 -8px; display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--gold-text); }
.form .format .faq-h svg { flex: none; }
.form .format .faq-h .cap { fill: var(--light-cap); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =================================================================
   Winter theme (decoration only: aria-hidden, behind the content,
   and still for people who ask for reduced motion)
   ================================================================= */
:root {
  --snow: #FFFFFF; --snow-edge: rgba(23, 22, 61, 0.18);
  --hill-far: #DCD9F2; --hill-near: #FFFFFF;
  --tree: #1F6F4A; --tree-far: #3E8B66; --trunk: #6B4A2E; --snowcap: #FFFFFF;
  --deer: #7A4E2D; --antler: #5A3A20; --reins: #C9A23A;
  --sleigh: #C8102E; --sleigh-trim: #F2A007; --sack: #9C6B2F;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --snow: #F3F4FF; --snow-edge: transparent;
    --hill-far: #1C1C4C; --hill-near: #26265E;
    --tree: #1F5C47; --tree-far: #1B4A42; --trunk: #4A3726; --snowcap: #E6E8FF;
    --deer: #D2A679; --antler: #EBD3AE; --reins: #FFC14D;
    --sleigh: #FF5A6E; --sleigh-trim: #FFC14D; --sack: #C99A5B;
  }
}
:root[data-theme="dark"] {
  --snow: #F3F4FF; --snow-edge: transparent;
  --hill-far: #1C1C4C; --hill-near: #26265E;
  --tree: #1F5C47; --tree-far: #1B4A42; --trunk: #4A3726; --snowcap: #E6E8FF;
  --deer: #D2A679; --antler: #EBD3AE; --reins: #FFC14D;
  --sleigh: #FF5A6E; --sleigh-trim: #FFC14D; --sack: #C99A5B;
}

/* Content sits above the snow and the sleigh */
.wrap { position: relative; z-index: 1; }

/* ---- Falling snow: soft dots drifting down the whole page ---- */
.snow { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.flake {
  position: absolute; top: -12px; border-radius: 50%;
  background: var(--snow); box-shadow: 0 0 0 1px var(--snow-edge);
  animation-name: flake-fall, flake-sway; animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite; animation-direction: normal, alternate;
}
@keyframes flake-fall { from { top: -12px; } to { top: 102vh; } }
@keyframes flake-sway { from { transform: translateX(calc(var(--drift) * -1)); } to { transform: translateX(var(--drift)); } }
.flake:nth-child(1) { left: 13.3%; width: 4px; height: 4px; animation-duration: 20.5s, 2.6s; animation-delay: -10.2s, -2.9s; opacity: 0.70; --drift: 21px; }
.flake:nth-child(2) { left: 3.6%; width: 6px; height: 6px; animation-duration: 19.4s, 4.7s; animation-delay: -10.2s, -4.4s; opacity: 0.81; --drift: 26px; }
.flake:nth-child(3) { left: 27.5%; width: 7px; height: 7px; animation-duration: 21.6s, 4.1s; animation-delay: -0.2s, -2.1s; opacity: 0.75; --drift: 28px; }
.flake:nth-child(4) { left: 5.8%; width: 7px; height: 7px; animation-duration: 11.8s, 3.2s; animation-delay: -22.4s, -3.0s; opacity: 0.74; --drift: 28px; }
.flake:nth-child(5) { left: 74.7%; width: 5px; height: 5px; animation-duration: 14.7s, 2.8s; animation-delay: -2.4s, -4.2s; opacity: 0.72; --drift: 35px; }
.flake:nth-child(6) { left: 16.4%; width: 7px; height: 7px; animation-duration: 19.7s, 3.7s; animation-delay: -11.8s, -2.2s; opacity: 0.57; --drift: 20px; }
.flake:nth-child(7) { left: 58.2%; width: 7px; height: 7px; animation-duration: 23.7s, 3.0s; animation-delay: -17.9s, -3.6s; opacity: 0.60; --drift: 35px; }
.flake:nth-child(8) { left: 79.7%; width: 7px; height: 7px; animation-duration: 16.4s, 4.5s; animation-delay: -15.9s, -1.8s; opacity: 0.63; --drift: 27px; }
.flake:nth-child(9) { left: 72.0%; width: 4px; height: 4px; animation-duration: 16.3s, 3.8s; animation-delay: -9.8s, -4.3s; opacity: 0.86; --drift: 28px; }
.flake:nth-child(10) { left: 10.1%; width: 5px; height: 5px; animation-duration: 12.7s, 3.7s; animation-delay: -6.8s, -1.5s; opacity: 0.87; --drift: 23px; }
.flake:nth-child(11) { left: 57.7%; width: 6px; height: 6px; animation-duration: 22.4s, 4.8s; animation-delay: -11.7s, -5.0s; opacity: 0.84; --drift: 38px; }
.flake:nth-child(12) { left: 92.5%; width: 7px; height: 7px; animation-duration: 18.2s, 4.4s; animation-delay: -13.9s, -2.6s; opacity: 0.89; --drift: 30px; }
.flake:nth-child(13) { left: 34.3%; width: 3px; height: 3px; animation-duration: 20.1s, 3.8s; animation-delay: -9.3s, -3.4s; opacity: 0.87; --drift: 15px; }
.flake:nth-child(14) { left: 75.3%; width: 4px; height: 4px; animation-duration: 17.9s, 5.0s; animation-delay: -11.5s, -1.2s; opacity: 0.77; --drift: 33px; }
.flake:nth-child(15) { left: 93.7%; width: 6px; height: 6px; animation-duration: 21.3s, 3.6s; animation-delay: -16.4s, -2.7s; opacity: 0.78; --drift: 29px; }
.flake:nth-child(16) { left: 70.4%; width: 5px; height: 5px; animation-duration: 18.3s, 3.3s; animation-delay: -3.4s, -2.4s; opacity: 0.71; --drift: 22px; }
.flake:nth-child(17) { left: 32.8%; width: 6px; height: 6px; animation-duration: 16.3s, 3.0s; animation-delay: -18.9s, -1.3s; opacity: 0.59; --drift: 15px; }
.flake:nth-child(18) { left: 70.0%; width: 6px; height: 6px; animation-duration: 12.2s, 3.4s; animation-delay: -8.6s, -0.8s; opacity: 0.64; --drift: 37px; }
.flake:nth-child(19) { left: 62.1%; width: 7px; height: 7px; animation-duration: 11.3s, 3.0s; animation-delay: -17.3s, -1.8s; opacity: 0.74; --drift: 27px; }
.flake:nth-child(20) { left: 44.2%; width: 3px; height: 3px; animation-duration: 13.1s, 4.7s; animation-delay: -6.0s, -2.1s; opacity: 0.79; --drift: 27px; }
.flake:nth-child(21) { left: 43.0%; width: 5px; height: 5px; animation-duration: 18.5s, 4.0s; animation-delay: -11.1s, -4.8s; opacity: 0.65; --drift: 27px; }
.flake:nth-child(22) { left: 72.5%; width: 5px; height: 5px; animation-duration: 12.0s, 3.6s; animation-delay: -11.5s, -1.7s; opacity: 0.60; --drift: 29px; }
.flake:nth-child(23) { left: 49.3%; width: 4px; height: 4px; animation-duration: 23.6s, 3.9s; animation-delay: -16.2s, -4.9s; opacity: 0.92; --drift: 30px; }
.flake:nth-child(24) { left: 86.5%; width: 7px; height: 7px; animation-duration: 12.3s, 4.6s; animation-delay: -11.4s, -2.3s; opacity: 0.56; --drift: 38px; }
.flake:nth-child(25) { left: 64.5%; width: 8px; height: 8px; animation-duration: 17.6s, 2.5s; animation-delay: -11.9s, -3.2s; opacity: 0.76; --drift: 16px; }
.flake:nth-child(26) { left: 57.3%; width: 4px; height: 4px; animation-duration: 12.2s, 2.7s; animation-delay: -15.1s, -4.2s; opacity: 0.88; --drift: 19px; }
.flake:nth-child(27) { left: 0.7%; width: 6px; height: 6px; animation-duration: 22.0s, 3.5s; animation-delay: -9.9s, -4.9s; opacity: 0.84; --drift: 35px; }
.flake:nth-child(28) { left: 77.0%; width: 5px; height: 5px; animation-duration: 21.0s, 3.2s; animation-delay: -15.9s, -1.6s; opacity: 0.60; --drift: 35px; }
.flake:nth-child(29) { left: 10.1%; width: 5px; height: 5px; animation-duration: 22.8s, 2.5s; animation-delay: -11.2s, -4.8s; opacity: 0.59; --drift: 21px; }
.flake:nth-child(30) { left: 74.9%; width: 4px; height: 4px; animation-duration: 11.6s, 4.5s; animation-delay: -9.0s, -2.8s; opacity: 0.70; --drift: 26px; }
.flake:nth-child(31) { left: 32.2%; width: 7px; height: 7px; animation-duration: 19.7s, 3.7s; animation-delay: -16.7s, -2.9s; opacity: 0.78; --drift: 27px; }
.flake:nth-child(32) { left: 54.9%; width: 3px; height: 3px; animation-duration: 18.5s, 4.8s; animation-delay: -5.8s, -0.8s; opacity: 0.76; --drift: 38px; }
.flake:nth-child(33) { left: 23.9%; width: 8px; height: 8px; animation-duration: 16.5s, 2.8s; animation-delay: -4.6s, -2.5s; opacity: 0.83; --drift: 31px; }
.flake:nth-child(34) { left: 83.5%; width: 3px; height: 3px; animation-duration: 15.0s, 5.0s; animation-delay: -10.1s, -3.9s; opacity: 0.67; --drift: 17px; }
.flake:nth-child(35) { left: 70.7%; width: 7px; height: 7px; animation-duration: 22.3s, 3.7s; animation-delay: -0.4s, -0.2s; opacity: 0.70; --drift: 21px; }
.flake:nth-child(36) { left: 8.2%; width: 4px; height: 4px; animation-duration: 12.2s, 4.6s; animation-delay: -2.1s, -0.3s; opacity: 0.65; --drift: 23px; }
.flake:nth-child(37) { left: 3.4%; width: 6px; height: 6px; animation-duration: 22.3s, 4.1s; animation-delay: -6.7s, -0.2s; opacity: 0.72; --drift: 21px; }
.flake:nth-child(38) { left: 40.1%; width: 4px; height: 4px; animation-duration: 21.2s, 2.8s; animation-delay: -6.3s, -3.7s; opacity: 0.64; --drift: 20px; }
.flake:nth-child(39) { left: 28.1%; width: 3px; height: 3px; animation-duration: 22.0s, 3.9s; animation-delay: -9.6s, -0.8s; opacity: 0.86; --drift: 21px; }
.flake:nth-child(40) { left: 9.9%; width: 5px; height: 5px; animation-duration: 13.4s, 3.9s; animation-delay: -6.9s, -0.9s; opacity: 0.57; --drift: 34px; }
.flake:nth-child(41) { left: 81.2%; width: 4px; height: 4px; animation-duration: 18.8s, 4.6s; animation-delay: -16.6s, -3.6s; opacity: 0.61; --drift: 33px; }
.flake:nth-child(42) { left: 91.5%; width: 6px; height: 6px; animation-duration: 21.9s, 4.6s; animation-delay: -4.0s, -0.5s; opacity: 0.88; --drift: 30px; }

/* ---- Santa's sleigh and reindeer: random curving flights (app.js) ----
   Behind everything: the boxes and garland pass in front of him. The layer
   covers the whole page, so routes are planned in page coordinates and stay
   clear of the words that sit on the background (app.js picks the route). */
body { position: relative; }
.sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sleigh { position: absolute; top: 0; left: 0; width: 160px; transform: translate(-400px, -400px); will-change: transform; }
@media (max-width: 520px) { .sleigh { width: 120px; } }
.sleigh-bob { animation: sleigh-bob 1.4s ease-in-out infinite alternate; }
.sleigh-art { display: block; width: 100%; height: auto; }
/* Flying right to left: mirror the picture so Rudolph leads */
.sleigh.flip .sleigh-art { transform: scaleX(-1); }
@keyframes sleigh-bob { from { translate: 0 -2px; } to { translate: 0 3px; } }
.sleigh-art .deer { fill: var(--deer); }
.sleigh-art .antler, .ground-art .antler { stroke: var(--antler); stroke-width: 1.4; stroke-linecap: round; }
.sleigh-art .leg { stroke: var(--deer); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sleigh-art .reins { stroke: var(--reins); stroke-width: 1.1; }
.sleigh-art .runner { stroke: var(--sleigh-trim); stroke-width: 2.2; stroke-linecap: round; }
.sleigh-art .sleigh-body { fill: var(--sleigh); }
.sleigh-art .sleigh-trim { stroke: var(--sleigh-trim); stroke-width: 1.4; }
.sleigh-art .sack { fill: var(--sack); }
.sleigh-art .sack-tie { stroke: var(--sleigh-trim); stroke-width: 1.4; stroke-linecap: round; }
.sleigh-art .santa-coat, .sleigh-art .santa-hat { fill: #D61F36; }
.sleigh-art .santa-face { fill: #F4C9A4; }
.sleigh-art .santa-beard, .sleigh-art .santa-pom { fill: #FFFFFF; }
.sleigh-art .santa-arm { stroke: #D61F36; stroke-width: 3; stroke-linecap: round; }
.sleigh-art .nose { fill: #FF2D46; }
.sleigh-art .nose-glow { fill: #FF2D46; opacity: 0.35; animation: nose-glow 1.1s ease-in-out infinite alternate; }
@keyframes nose-glow { from { opacity: 0.15; } to { opacity: 0.55; } }

/* ---- Pine garland draped over the top of the boxes ---- */
.garland {
  position: relative; z-index: 2; height: 46px; margin: 0 -6px -24px;
  background: url(/garland.svg) repeat-x center top / 180px 46px; pointer-events: none;
}
.garland--short { margin-bottom: -24px; }
.form .format legend { padding-top: 46px; }   /* room for the garland */
.aside > .card:first-of-type h2 { padding-top: 24px; }   /* room for the garland */

/* ---- Snowy hill with pine trees at the bottom of the page ---- */
.ground { position: relative; z-index: 1; margin-top: -40px; height: 170px; overflow: hidden; pointer-events: none; }
.ground-art { display: block; width: 100%; height: 170px; }
.ground-art .hill-far { fill: var(--hill-far); }
.ground-art .hill-near { fill: var(--hill-near); }
.ground-art .tree { fill: var(--tree); }
.ground-art .tree-far { fill: var(--tree-far); }
.ground-art .snowcap { fill: var(--snowcap); }
.ground-art .trunk { fill: var(--trunk); }
.ground-art .star { fill: #FFC14D; }
.ground-art .l1 { fill: var(--light-1); } .ground-art .l2 { fill: var(--light-2); }
.ground-art .l3 { fill: var(--light-3); } .ground-art .l4 { fill: var(--light-4); }
.ground-art .twinkle-1 { animation: sv-twinkle 2.6s ease-in-out infinite; }
.ground-art .twinkle-2 { animation: sv-twinkle 3.4s ease-in-out 0.9s infinite; }
.ground-art .deer-stand { fill: var(--deer); }
.ground-art .deer-stand .leg { stroke: var(--deer); stroke-width: 3; stroke-linecap: round; }

/* Reduced motion: no falling snow, no flying sleigh, no twinkling */
@media (prefers-reduced-motion: reduce) {
  .snow, .sky { display: none; }
  .ground-art .twinkle-1, .ground-art .twinkle-2, .sleigh-art .nose-glow { animation: none; }
}

/* ---- Street search (type-ahead over every Little Silver street) ---- */
.street-field label { cursor: default; }
.combo { position: relative; }
.suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  margin: 0; padding: 4px; list-style: none; max-height: 300px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-inner);
  box-shadow: 0 10px 24px rgba(13, 13, 43, 0.18);
  /* undo the uppercase label styling inherited from .field */
  text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 400;
}
.suggest li { min-height: 44px; display: flex; align-items: center; padding: 8px 12px; border-radius: 3px; cursor: pointer; color: var(--text); }
.suggest li b { font-weight: 700; color: var(--gold-text); }
.suggest li:hover, .suggest li[aria-selected="true"] { background: var(--sel-bg); }
.suggest li[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--gold); }
.suggest .suggest-none { cursor: default; color: var(--muted); font-size: 14px; }

/* =================================================================
   Off-season page (offseason.html): shown at "/" while sign-ups are
   closed. "Santa's off duty": the firehouse at night, the sleigh parked,
   Rudolph asleep. Words change with the date (<html data-mood>).
   ================================================================= */
html[data-mood="rest"] [data-when]:not([data-when~="rest"]),
html[data-mood="soon"] [data-when]:not([data-when~="soon"]),
html[data-mood="eve"] [data-when]:not([data-when~="eve"]) { display: none; }

/* Firehouse scene colors */
:root {
  --sc-sky: #D6D2F3; --sc-star: #FFFFFF; --sc-moon: #FFF4CC;
  --fh-wall: #B53441; --fh-base: #8E2834; --fh-roof: #3B3366; --fh-trim: #FFF6E3; --fh-sign: #3A1F1F;
  --fh-bay: #2B2350; --fh-floor: #1E183C; --fh-door: #F1EDFB; --fh-door-line: #C9C2EA; --fh-window: #FFD27A;
  --sc-wreath: #1F6F4A; --sc-hay: #D9B25A; --sc-straw: #B58A35; --sc-eye: #2A1A10; --zzz: #585785;
  --sm-body: #FFFFFF; --sm-edge: #BDB8E6; --sm-coal: #2A2A3A; --sm-arm: #6B4A2E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sc-sky: #12123A; --sc-star: #F3F4FF; --sc-moon: #FFF1C2;
    --fh-wall: #8E2C42; --fh-base: #6E2234; --fh-roof: #24204E; --fh-trim: #E8E1C9; --fh-sign: #3A1F1F;
    --fh-bay: #08081C; --fh-floor: #050512; --fh-door: #2E2E66; --fh-door-line: #45458A; --fh-window: #FFC14D;
    --sc-wreath: #2F8F63; --sc-hay: #8C7440; --sc-straw: #6E5A30; --sc-eye: #2A1A10; --zzz: #A9A8D0;
    --sm-body: #E6E8FF; --sm-edge: transparent; --sm-coal: #1A1A2E; --sm-arm: #8A6A48;
  }
}
:root[data-theme="dark"] {
  --sc-sky: #12123A; --sc-star: #F3F4FF; --sc-moon: #FFF1C2;
  --fh-wall: #8E2C42; --fh-base: #6E2234; --fh-roof: #24204E; --fh-trim: #E8E1C9; --fh-sign: #3A1F1F;
  --fh-bay: #08081C; --fh-floor: #050512; --fh-door: #2E2E66; --fh-door-line: #45458A; --fh-window: #FFC14D;
  --sc-wreath: #2F8F63; --sc-hay: #8C7440; --sc-straw: #6E5A30; --sc-eye: #2A1A10; --zzz: #A9A8D0;
  --sm-body: #E6E8FF; --sm-edge: transparent; --sm-coal: #1A1A2E; --sm-arm: #8A6A48;
}

/* The scene card: the picture with a dispatch-board readout underneath */
.scene-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-tile); background: var(--panel); }
.scene-art { display: block; width: 100%; height: auto; }
.scene-art .sc-sky { fill: var(--sc-sky); }
.scene-art .sc-stars { fill: var(--sc-star); opacity: 0.8; }
.scene-art .sc-moon { fill: var(--sc-moon); }
.scene-art .sc-hill-far { fill: var(--hill-far); }
.scene-art .sc-hill-near { fill: var(--hill-near); }
.scene-art .sc-tree { fill: var(--tree); }
.scene-art .sc-snowcap { fill: var(--snowcap); }
.scene-art .sc-trunk { fill: var(--trunk); }
.scene-art .sc-snowline { fill: none; stroke: var(--snowcap); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.scene-art .fh-wall { fill: var(--fh-wall); }
.scene-art .fh-base { fill: var(--fh-base); }
.scene-art .fh-roof { fill: var(--fh-roof); }
.scene-art .fh-roof-edge { fill: none; stroke: var(--fh-roof); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.scene-art .fh-trim { fill: var(--fh-trim); }
.scene-art .fh-sign { fill: var(--fh-sign); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; }
.scene-art .fh-bay { fill: var(--fh-bay); }
.scene-art .fh-floor { fill: var(--fh-floor); }
.scene-art .fh-lamp, .scene-art .fh-bell { fill: #FFC14D; }
.scene-art .fh-door { fill: var(--fh-door); }
.scene-art .fh-door-line { fill: none; stroke: var(--fh-door-line); stroke-width: 1.5; }
.scene-art .fh-window { fill: var(--fh-window); }
.scene-art .fh-peg { fill: var(--fh-trim); }
.scene-art .sc-wreath { fill: none; stroke: var(--sc-wreath); stroke-width: 5; }
.scene-art .sc-bow, .scene-art .sc-hat { fill: #D61F36; }
.scene-art .sc-white { fill: #FFFFFF; }
.scene-art .l1 { fill: var(--light-1); } .scene-art .l2 { fill: var(--light-2); }
.scene-art .l3 { fill: var(--light-3); } .scene-art .l4 { fill: var(--light-4); }
.scene-art .twinkle-1 { animation: sv-twinkle 2.6s ease-in-out infinite; }
.scene-art .twinkle-2 { animation: sv-twinkle 3.4s ease-in-out 0.9s infinite; }
/* The parked sleigh: the same colors as the flying one */
.scene-art .runner { stroke: var(--sleigh-trim); stroke-width: 2.2; stroke-linecap: round; }
.scene-art .sleigh-body { fill: var(--sleigh); }
.scene-art .sleigh-trim { stroke: var(--sleigh-trim); stroke-width: 1.4; }
.scene-art .sack { fill: var(--sack); }
.scene-art .sack-tie { stroke: var(--sleigh-trim); stroke-width: 1.4; stroke-linecap: round; }
/* Snowman in a fire helmet */
.scene-art .sm-body { fill: var(--sm-body); stroke: var(--sm-edge); stroke-width: 1.2; }
.scene-art .sm-coal { fill: var(--sm-coal); }
.scene-art .sm-carrot { fill: #F08A24; }
.scene-art .sm-arm { fill: none; stroke: var(--sm-arm); stroke-width: 2.4; stroke-linecap: round; }
.scene-art .sm-helmet { fill: #C8102E; }
.scene-art .sm-shield { fill: #F2A007; }
/* Rudolph asleep */
.scene-art .sc-hay { fill: var(--sc-hay); }
.scene-art .sc-straw { fill: none; stroke: var(--sc-straw); stroke-width: 1.6; stroke-linecap: round; }
.scene-art .sc-deer { fill: var(--deer); }
.scene-art .sc-deer-tail { fill: var(--antler); }
.scene-art .sc-blanket { fill: #C8102E; }
.scene-art .sc-blanket-stripe { fill: none; stroke: #FFC14D; stroke-width: 2; }
.scene-art .sc-eye { fill: none; stroke: var(--sc-eye); stroke-width: 1.4; stroke-linecap: round; }
.scene-art .sc-antler { fill: none; stroke: var(--antler); stroke-width: 1.8; stroke-linecap: round; }
.scene-art .nose { fill: #FF2D46; }
.scene-art .nose-glow { fill: #FF2D46; opacity: 0.35; animation: nose-glow 1.8s ease-in-out infinite alternate; }
.scene-art .zzz { fill: var(--zzz); font-family: var(--mono); font-weight: 700; transform-box: fill-box; animation: zzz-float 3.6s ease-in-out infinite; }
.scene-art .z1 { font-size: 10px; }
.scene-art .z2 { font-size: 13px; animation-delay: -1.2s; }
.scene-art .z3 { font-size: 16px; animation-delay: -2.4s; }
@keyframes zzz-float {
  0% { opacity: 0; transform: translate(-4px, 6px); }
  25%, 70% { opacity: 1; }
  100% { opacity: 0; transform: translate(5px, -7px); }
}

/* Dispatch-board readout under the picture: a hairline grid, like the organizer app */
.board { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.board > div { background: var(--panel); padding: 12px 16px; min-width: 0; }
.board dt { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.board dd { margin: 2px 0 0; font-family: var(--mono); font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--gold-text); }

/* Organizer contacts: whole-row links, 44px tall */
.contact { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.contact a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.contact svg { flex: none; color: var(--gold-text); }
.contact a > span { min-width: 0; }
.offseason .card .btn.primary { white-space: normal; text-align: center; margin-top: auto; }
/* The three cards under the picture: stacked on phones, two across on tablets
   (the "Questions?" card spans the row, its links side by side), three across
   on wide screens. Each step is wide enough that the donate button and the
   email address stay on one line. */
.info-cards { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
@media (min-width: 760px) {
  .info-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-cards > :last-child { grid-column: 1 / -1; }
  .info-cards > :last-child .contact { flex-direction: row; flex-wrap: wrap; column-gap: 32px; }
}
@media (min-width: 1140px) {
  .info-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .info-cards > :last-child { grid-column: auto; }
  .info-cards > :last-child .contact { flex-direction: column; }
}

/* Phones: the board turns into a three-row list (label left, status right),
   so "Parked in bay 1" never breaks mid-phrase */
@media (max-width: 560px) {
  .board { grid-template-columns: minmax(0, 1fr); }
  .board > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 10px 16px; }
  .board dd { margin: 0; font-size: 14px; }
}
@media (max-width: 360px) {
  .board > div { grid-template-columns: 84px minmax(0, 1fr); gap: 8px; padding: 10px 12px; }
  .board dd { font-size: 13px; }
}

/* Reduced motion: the zzz's, lights and Rudolph's nose hold still */
@media (prefers-reduced-motion: reduce) {
  .scene-art .zzz, .scene-art .nose-glow, .scene-art .twinkle-1, .scene-art .twinkle-2 { animation: none; }
}

/* ---- Tidy line breaks on every screen size ---- */
/* Headings break into even lines; paragraphs avoid a single word on the last line */
h1, .card h2, h3, .countdown__label b { text-wrap: balance; }
.lede, .card p { text-wrap: pretty; }
/* Phrases that should never split across lines ("Vol. Fire Co.", "Thursday, Dec 24") */
.nw, .brand-eve { white-space: nowrap; }
/* Narrow phones: "Santa Visits" alone under the name (the countdown below
   already gives the Christmas Eve date) */
@media (max-width: 430px) { .brand-eve { display: none; } }

/* Preview banner (/preview only) */
.preview-banner { margin: 0 0 8px; padding: 10px 14px; border: 1px solid var(--gold-line); border-radius: var(--radius-inner); background: var(--gold-soft); color: var(--text); font-size: 15px; }
.preview-banner b { color: var(--gold-text); }