/* ShowReady — skinned to the Lost Village portal design language.
   TOKEN ARCHITECTURE (the portal brief's own rule): primitives → semantic →
   components. Reskinning for another event = replace the PRIMITIVES block only.
   Components below consume semantic tokens and never name a raw colour.

   Held deliberately through the reskin:
   - The five check-status colours are SAFETY-FUNCTIONAL, not brand: OK teal,
     DUE yellow, OVERDUE orange, FAIL crimson, OOS grey — never a traffic-light
     trio, never renamed. They stay saturated on the dark ground.
   - Field ergonomics: ≥52px touch targets, huge PASS/FAIL, high contrast.
     "Looks like the brand, works like an instrument." */

/* ---------- fonts: licence-clean doubles (licensed faces never leave the
   password-gated portal; EB Garamond ≈ Garamond PP, Libre Franklin ≈ ITC FG) */
@font-face { font-family: 'EB Garamond'; src: url('/fonts/ebgaramond-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('/fonts/ebgaramond-500-italic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('/fonts/librefranklin-var.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* ---------- PRIMITIVES — Lost Village (swap this block per event) ---------- */
  --ink-0: #070906;            /* page ground — the woods at night */
  --ink-1: #0b0d0a;            /* panel base */
  --paper: #ffffff;
  --accent-deep: #b0a369;      /* KHAKI — ShowReady's claimed pair at LV */
  --accent-light: #badbc2;     /* MIST */
  --hue-danger: #e33838;       /* CHEERY — urgent/destructive only */
  --hue-badge: #ffc938;        /* MUSTARD — the portal's loud-marker colour */
  --font-display: 'EB Garamond', Georgia, serif;
  --font-ui: 'Libre Franklin', -apple-system, sans-serif;
  --radius: 2px;               /* flat world */

  /* status hues — safety palette, deliberately NOT green/amber/red */
  --st-ok: #2dd4bf; --st-due: #facc15; --st-overdue: #fb923c;
  --st-fail: #f43f5e; --st-oos: #64748b;

  /* ---------- SEMANTIC ---------- */
  --bg: var(--ink-0);
  --panel: rgba(11, 13, 10, .88);
  --panel-solid: #0c0e0b;
  --rule: rgba(255, 255, 255, .14);
  --rule-strong: rgba(255, 255, 255, .30);
  --text: #eef1ec;
  --text-dim: rgba(238, 241, 236, .64);
  --text-faint: rgba(238, 241, 236, .40);
  --action: var(--accent-light);
  --action-ink: #10201a;       /* dark text on the light accent */
  --field-border: var(--accent-deep);
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px; line-height: 1.33; letter-spacing: .025em;
  min-height: 100vh; padding-bottom: 40px;
}

/* ---------- masthead ---------- */
#topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  background: var(--panel-solid); border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 5;
}
#brand {
  color: var(--text); text-decoration: none;
  font-weight: 600; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  display: flex; align-items: center; gap: 9px;
}
#brand svg { color: var(--accent-light); }
#queue-badge {
  font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .45em 1em; border-radius: var(--radius);
  background: var(--hue-badge); color: #241d00; text-align: right;
}
#queue-badge.synced { background: transparent; border: 1px solid var(--rule); color: var(--text-faint); }

main { max-width: 640px; margin: 0 auto; padding: 16px 14px; }
.hidden { display: none !important; }

/* ---------- panels ---------- */
.card {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 16px; margin-bottom: 14px;
}
@supports (backdrop-filter: blur(14px)) {
  .card { background: rgba(11, 13, 10, .72); backdrop-filter: blur(14px) saturate(1.05); }
}
.card h2 {
  font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 10px; padding-bottom: .55em; border-bottom: 1px solid var(--rule);
}
h1.page { font-family: var(--font-display); font-weight: 500; font-size: 1.45rem;
  letter-spacing: .03em; line-height: .96; margin: 4px 0 14px; }
.dim { color: var(--text-dim); font-size: .88rem; }
.small { font-size: .8rem; }
.spaced { margin-top: 10px; }

/* ---------- actions ---------- */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 18px;
  border-radius: var(--radius); border: 1px solid var(--rule-strong);
  background: transparent; color: var(--text);
  font-family: var(--font-ui); font-weight: 600; font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase;
  width: 100%; cursor: pointer; text-decoration: none; touch-action: manipulation;
}
button:active { background: rgba(255, 255, 255, .07); }
.btn-primary { background: var(--action); border-color: var(--action); color: var(--action-ink); }
.btn-primary:active { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-danger { background: var(--hue-danger); border-color: var(--hue-danger); color: #fff; }
.btn-ghost { border-color: var(--rule); color: var(--text-dim); }
.btn-row { display: flex; gap: 10px; }
.btn-row > * { flex: 1; }

/* ---------- fields ---------- */
input, textarea, select {
  appearance: none; width: 100%; min-height: 52px; padding: 12px;
  border-radius: var(--radius); border: 1px solid var(--rule);
  background: var(--panel-solid); color: var(--text);
  font-family: var(--font-ui); font-size: 16px; letter-spacing: .025em;
  margin-top: 10px;   /* standalone (after a paragraph); reset when a label owns the gap */
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--field-border); }
textarea { min-height: 84px; }
/* Eyebrow labels own the gap on BOTH sides — whatever follows (field, button
   group, status line) sits a consistent distance below, never crowding it. */
label {
  display: block; margin-top: 22px; margin-bottom: 9px;
  font-weight: 600; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim);
}
label + * { margin-top: 0; }

/* ---------- checklist items ---------- */
.item { border-top: 1px solid var(--rule); padding: 15px 0; }
.item:first-child { border-top: 0; }
.item .q { font-size: 16px; font-weight: 500; letter-spacing: .01em; margin-bottom: 10px; }
.seg { display: flex; gap: 8px; }
.seg button { flex: 1; min-height: 56px; font-size: .82rem; }
.seg button.sel-pass { background: var(--st-ok); border-color: var(--st-ok); color: #04241f; }
.seg button.sel-fail { background: var(--st-fail); border-color: var(--st-fail); color: #fff; }
.seg button.sel-na { background: var(--st-oos); border-color: var(--st-oos); color: #fff; }
.range-note { color: var(--text-faint); font-size: .78rem; margin-top: 6px; }

/* ---------- status pills: check vocabulary only, Franklin caps, room to breathe */
.pill {
  display: inline-block; padding: .35em 1em; border-radius: var(--radius);
  font-weight: 700; font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.st-OK { background: var(--st-ok); color: #04241f; }
.st-DUE { background: var(--st-due); color: #241d00; }
.st-OVERDUE { background: var(--st-overdue); color: #2b1200; }
.st-FAIL { background: var(--st-fail); color: #fff; }
.st-OOS { background: var(--st-oos); color: #fff; }

/* loud markers — the portal's mustard badge, verbatim treatment */
.badge-confirm, .badge-queued {
  display: inline-block; background: var(--hue-badge); color: #241d00;
  font-weight: 700; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .45em .9em; border-radius: var(--radius);
}

/* ---------- emergency interstitial: crisis clarity, nothing decorative ---------- */
#emergency {
  position: fixed; inset: 0; background: #7f1d1d; color: #fff; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; gap: 18px;
}
#emergency h1 { font-family: var(--font-ui); font-weight: 700; font-size: 26px;
  line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; }
#emergency p { font-size: 18px; }
#emergency button { max-width: 340px; background: #fff; color: #7f1d1d; border-color: #fff; }

/* ---------- lists ---------- */
.point-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 13px 4px; border-top: 1px solid var(--rule);
  color: var(--text); text-decoration: none; font-size: .92rem;
}
.point-list a:first-child { border-top: 0; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
  font-size: .88rem; border-top: 1px solid var(--rule); }
.kv:first-of-type { border-top: 0; }
.kv span:first-child { color: var(--text-dim); }
.footer-note { color: var(--text-faint); font-size: .72rem; text-align: center; margin-top: 18px; }
.photo-thumb { max-width: 100%; border-radius: var(--radius); margin-top: 8px; }
.center { text-align: center; }

/* ---------------------------------------------------------------------------
   LV gate — the public face of a tag (unenrolled phones). Same primitives. */
.lv-gate {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto;
  background: var(--ink-0); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 28px 22px calc(28px + env(safe-area-inset-bottom));
  font-family: var(--font-ui); letter-spacing: .025em;
}
.lv-gate img.lockup { width: min(46vw, 190px); margin-bottom: 30px; }
.lv-gate .eyebrow {
  font-weight: 600; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-light); margin-bottom: 14px;
}
.lv-gate h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.7rem, 6.5vw, 2.3rem); line-height: .96; letter-spacing: .03em;
  margin: 0 0 18px; text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.lv-gate .panel {
  background: rgba(11, 13, 10, .72); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 18px 20px; max-width: 26rem;
  font-size: 15px; line-height: 1.33;
}
.lv-gate .panel p + p { margin-top: .7em; }
.lv-gate .quiet { color: rgba(255, 255, 255, .62); }
.lv-gate .team-btn {
  display: inline-block; margin-top: 26px; min-height: 0; width: auto;
  padding: .85em 1.9em; border: 1px solid var(--accent-deep); border-radius: var(--radius);
  background: transparent; color: var(--accent-light);
  font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
}
.lv-gate .team-btn:active { background: rgba(176, 163, 105, .18); }
.lv-gate .foot {
  margin-top: 34px; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}