/* ═══════════════════════════════════════════════════════════════════════════
   AI with All — check-in desk.

   Designed for one specific moment: a volunteer at a folding table in a school
   cafeteria at 8:30 in the morning, phone in one hand, a queue of teenagers and
   parents in front of them, eight seconds per person.

   Three ideas carry the whole interface:

   1. The row is the product. A big condensed name, and a tap target that fills
      the row's full height so a thumb cannot miss it.
   2. Checked-in people recede rather than disappear — a roster with ticks, so the
      eye lands on whoever still needs doing.
   3. The pod colour is information, not decoration. The volunteer's next sentence
      is "you're on the green table", so the pod carries a colour spine. Colour is
      never the only signal: the pod is always named in text too.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Frame. HC4A navy — chrome and primary actions, so no button ever competes
     with a pod colour. */
  --navy:        #0b2545;
  --navy-lift:   #16365c;
  --navy-deep:   #071a33;

  --ink:         #12181f;
  --ink-2:       #55606d;
  --ink-3:       #8b95a1;
  --page:        #eef0f3;
  --surface:     #ffffff;
  --rule:        #dbe0e6;

  --go:          #0b2545;   /* the act of checking someone in */
  --here:        #10713f;   /* present */
  --here-wash:   #e7f5ec;
  --note:        #8a5200;   /* worth mentioning */
  --note-wash:   #fdf3e0;
  --stop:        #a81f2d;   /* read this before you tap */
  --stop-wash:   #fdeaec;

  /* The six challenge categories, as wristband colours. */
  --pod-all-abilities:   #6d3bd4;
  --pod-education:       #0b5f9e;
  --pod-community:       #a2530a;
  --pod-crisis:          #ad1a42;
  --pod-environmental:   #13703c;
  --pod-healthcare:      #0f766e;
  --pod-none:            #9aa3ae;

  --tap: 52px;
  --gutter: 16px;

  --sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --name: "Barlow Semi Condensed", "Public Sans", ui-sans-serif, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #eceff3; --ink-2: #a3adba; --ink-3: #6d7885;
    --page: #0a1120; --surface: #131c2c; --rule: #263245;
    --navy: #050d1a; --navy-lift: #1b2a44;
    --go: #1e4f88;
    --here: #5fd398; --here-wash: #0d2a1c;
    --note: #f0b752; --note-wash: #2e2008;
    --stop: #ff9aa4; --stop-wash: #351115;
    --pod-all-abilities: #a684f5; --pod-education: #5aa9e6;
    --pod-community: #dd9c4a;     --pod-crisis: #f1809f;
    --pod-environmental: #63c78d; --pod-healthcare: #4bc0b5;
  }
}
:root[data-theme="dark"] {
  --ink: #eceff3; --ink-2: #a3adba; --ink-3: #6d7885;
  --page: #0a1120; --surface: #131c2c; --rule: #263245;
  --navy: #050d1a; --navy-lift: #1b2a44; --go: #1e4f88;
  --here: #5fd398; --here-wash: #0d2a1c;
  --note: #f0b752; --note-wash: #2e2008;
  --stop: #ff9aa4; --stop-wash: #351115;
  --pod-all-abilities: #a684f5; --pod-education: #5aa9e6;
  --pod-community: #dd9c4a;     --pod-crisis: #f1809f;
  --pod-environmental: #63c78d; --pod-healthcare: #4bc0b5;
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  padding-bottom: calc(68px + env(safe-area-inset-bottom));
  overscroll-behavior-y: contain;
}
h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 700; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--pod-education); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── the frame ───────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--navy); color: #fff;
  padding-top: env(safe-area-inset-top);
}
.topbar__row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px var(--gutter) 8px; min-height: 46px;
}
.topbar__title {
  flex: 1; font-family: var(--name); font-weight: 600;
  font-size: 19px; letter-spacing: .015em; color: #fff;
}
.link {
  background: none; border: 0; padding: 7px 9px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; color: #b9c6d8;
  max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link:active { background: rgba(255,255,255,.12); }
.signal {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: #3ecf8e; box-shadow: 0 0 0 3px rgba(62,207,142,.2);
}
.signal[data-state="waiting"] { background: #f0b752; box-shadow: 0 0 0 3px rgba(240,183,82,.22); }
.signal[data-state="down"]    { background: #ff7b86; box-shadow: 0 0 0 3px rgba(255,123,134,.22); }

.groups {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--gutter) 0; background: var(--navy);
}
.groups::-webkit-scrollbar { display: none; }
.groups button {
  background: none; border: 0; border-bottom: 3px solid transparent;
  color: #93a5bc; padding: 8px 11px 9px; white-space: nowrap;
  font-size: 14px; font-weight: 600;
}
.groups button[aria-selected="true"] { color: #fff; border-bottom-color: #3ecf8e; }
.groups .n { font-weight: 400; color: #7d90a9; font-variant-numeric: tabular-nums; margin-left: 4px; }
.groups button[aria-selected="true"] .n { color: #c6d4e5; }

/* ── search ──────────────────────────────────────────────────────────────── */
.find {
  position: sticky; z-index: 30; top: calc(46px + 37px + env(safe-area-inset-top));
  background: var(--page); padding: 11px var(--gutter) 7px;
}
.find__box { position: relative; }
.find input {
  width: 100%; height: 54px; padding: 0 46px 0 15px;
  border: 2px solid var(--rule); border-radius: 13px;
  background: var(--surface); font-size: 17px; font-weight: 500;
}
.find input::placeholder { color: var(--ink-3); font-weight: 400; }
/* Safari and Chrome draw their own clear button on a search field, which would
   sit next to ours. Ours stays, because it is a 42px target rather than a 14px one. */
.find input::-webkit-search-cancel-button,
.find input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.find input:focus { outline: none; border-color: var(--pod-healthcare); }
.find__clear {
  position: absolute; right: 6px; top: 6px; width: 42px; height: 42px;
  border: 0; border-radius: 10px; background: none;
  color: var(--ink-2); font-size: 24px; line-height: 1;
}

main { padding: 0 var(--gutter); }

/* ── the roster ──────────────────────────────────────────────────────────── */
.roster { list-style: none; margin: 0; padding: 0; }

.entry {
  position: relative;
  display: flex; align-items: stretch; gap: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
}
/* The pod spine. Says which table to send them to. */
.entry::before {
  content: ""; width: 6px; flex: none;
  background: var(--pod, var(--pod-none));
}
.entry[data-pod="all-abilities"]  { --pod: var(--pod-all-abilities); }
.entry[data-pod="education"]      { --pod: var(--pod-education); }
.entry[data-pod="community"]      { --pod: var(--pod-community); }
.entry[data-pod="crisis"]         { --pod: var(--pod-crisis); }
.entry[data-pod="environmental"]  { --pod: var(--pod-environmental); }
.entry[data-pod="healthcare"]     { --pod: var(--pod-healthcare); }

.entry__body {
  flex: 1; min-width: 0;
  padding: 11px 12px 11px 13px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  border: 0; background: none; text-align: left;
}
.entry__name {
  font-family: var(--name); font-weight: 600;
  font-size: 22px; line-height: 1.08; letter-spacing: .005em;
  overflow-wrap: anywhere;
}
.entry__where {
  font-size: 13.5px; color: var(--ink-2); font-weight: 450;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.entry__kind {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  color: var(--ink-3); border: 1px solid var(--rule); border-radius: 4px;
  padding: 0 4px; margin-left: 6px; vertical-align: 2px;
}

/* The tap target fills the row's height — a thumb cannot miss it. */
.entry__go {
  flex: none; width: 104px;
  border: 0; border-left: 1px solid var(--rule);
  background: var(--go); color: #fff;
  font-family: var(--name); font-size: 17px; font-weight: 600; letter-spacing: .015em;
  display: flex; align-items: center; justify-content: center;
}
.entry__go:active { filter: brightness(1.25); }
.entry__go[disabled] { opacity: .55; }

/* Already here: the row goes quiet and gives its space back. */
.entry.is-here { background: var(--here-wash); border-color: color-mix(in srgb, var(--here) 32%, var(--rule)); }
.entry.is-here .entry__name { font-weight: 500; color: var(--ink-2); }
.entry.is-here .entry__go {
  background: none; color: var(--here); border-left-color: transparent;
  flex-direction: column; gap: 1px; width: 92px;
}
.entry__tick { font-size: 21px; line-height: 1; }
.entry__at { font-family: var(--sans); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

.entry.is-gone { opacity: .62; }
.entry.is-gone .entry__go { background: none; color: var(--ink-2); border-left-color: transparent; }

/* Something to read before tapping. */
.entry.is-stop { border-color: var(--stop); border-width: 2px; }
.entry__alert {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--stop);
  margin-top: 3px;
}
.entry__note { display: block; font-size: 12.5px; font-weight: 600; color: var(--note); margin-top: 3px; }

/* ── messages ────────────────────────────────────────────────────────────── */
.msg { border-radius: 11px; padding: 11px 13px; font-size: 14px; margin: 0 0 10px; }
.msg b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.msg--stop { background: var(--stop-wash); color: var(--stop); }
.msg--note { background: var(--note-wash); color: var(--note); }
.msg--calm { background: var(--surface); border: 1px solid var(--rule); color: var(--ink-2); }

.blank { text-align: center; padding: 42px 16px 20px; }
.blank__line { font-family: var(--name); font-size: 21px; font-weight: 500; color: var(--ink-2); }
.blank__hint { font-size: 14px; color: var(--ink-3); margin-top: 5px; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  min-height: var(--tap); padding: 0 18px; border: 0; border-radius: 12px;
  background: var(--go); color: #fff;
  font-family: var(--name); font-size: 17px; font-weight: 600; letter-spacing: .015em;
}
.btn:active { filter: brightness(1.2); }
.btn--ghost { background: none; color: var(--ink); border: 2px solid var(--rule); }
.btn--quiet { background: none; color: var(--ink-2); border: 2px solid var(--rule); min-height: 42px; font-size: 15px; padding: 0 13px; }
.btn--stop { background: var(--stop); color: #fff; }
.btn--full { width: 100%; }
.btn[disabled] { opacity: .55; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ── detail ──────────────────────────────────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; z-index: 60; background: rgba(4,10,20,.6);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade .14s ease-out;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.detail {
  background: var(--page); width: 100%; max-width: 640px;
  max-height: 93vh; overflow-y: auto; border-radius: 20px 20px 0 0;
  padding: 0 var(--gutter) calc(26px + env(safe-area-inset-bottom));
  animation: up .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes up { from { transform: translateY(18px) } to { transform: none } }
.detail__head {
  position: sticky; top: 0; z-index: 3; background: var(--page);
  padding: 14px 0 10px; display: flex; align-items: flex-start; gap: 10px;
}
.detail__name { flex: 1; font-family: var(--name); font-size: 27px; font-weight: 600; line-height: 1.05; }
.detail__sub { font-size: 13.5px; color: var(--ink-2); margin-top: 2px; font-family: var(--sans); font-weight: 450; }

.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 13px; padding: 13px 14px; margin-bottom: 10px; }
.panel__title { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 9px; }
.pairs { margin: 0; display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: 6px 14px; font-size: 14.5px; }
.pairs dt { color: var(--ink-2); font-weight: 450; }
.pairs dd { margin: 0; font-weight: 550; }

/* team members */
.crew { margin-top: 4px; }
.crew__head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; }
.crew__count { font-family: var(--name); font-size: 24px; font-weight: 600; color: var(--here); font-variant-numeric: tabular-nums; }
.crew__of { font-size: 13.5px; color: var(--ink-2); }
.mate { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--rule); }
.mate:first-of-type { border-top: 0; }
.mate__info { flex: 1; min-width: 0; }
.mate__name { font-family: var(--name); font-size: 18px; font-weight: 600; line-height: 1.1; }
.mate__meta { font-size: 12.5px; color: var(--ink-2); }
.mate.is-here .mate__name { font-weight: 450; color: var(--ink-2); }

.qr {
  display: block; width: 100%; max-width: 208px; aspect-ratio: 1;
  margin: 12px auto 6px; background: #fff; border-radius: 12px; padding: 9px;
}

/* form bits */
.field { display: block; margin: 12px 0 5px; font-size: 14px; font-weight: 650; }
.input, select.input {
  width: 100%; height: 50px; padding: 0 13px;
  border: 2px solid var(--rule); border-radius: 11px;
  background: var(--page); font-size: 16.5px; font-weight: 500;
}
.input:focus { outline: none; border-color: var(--navy); }
.check { display: flex; align-items: center; gap: 11px; margin: 15px 0 2px; font-size: 15.5px; font-weight: 550; }
.check input { width: 26px; height: 26px; accent-color: var(--go); }

/* ── bottom bar: everything reachable by thumb ───────────────────────────── */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--surface); border-top: 1px solid var(--rule);
  display: flex; align-items: center; gap: 9px;
  padding: 9px var(--gutter) calc(9px + env(safe-area-inset-bottom));
}
.dock__tally { flex: 1; line-height: 1.15; }
.dock__big { font-family: var(--name); font-size: 25px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dock__small { display: block; font-size: 12px; color: var(--ink-2); }

/* ── sign in ─────────────────────────────────────────────────────────────── */
.gate { max-width: 430px; margin: 0 auto; padding: 44px 22px 28px; }
.gate__kicker { font-size: 13px; font-weight: 700; letter-spacing: .07em; color: var(--pod-healthcare); }
.gate h1 { font-family: var(--name); font-size: 40px; font-weight: 600; line-height: .98; margin: 7px 0 8px; }
.gate__where { font-size: 15px; color: var(--ink-2); }

/* ── confirmation ────────────────────────────────────────────────────────── */
.flash {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 70;
  background: var(--navy-deep); color: #fff;
  padding: 12px 18px; border-radius: 12px; max-width: calc(100vw - 32px);
  font-size: 15px; font-weight: 550; box-shadow: 0 10px 26px rgba(4,10,20,.35);
  animation: up .16s ease-out;
}
.flash--here { background: var(--here); color: #04220f; }
.flash--stop { background: var(--stop); color: #fff; }

@media (min-width: 560px) {
  .entry__name { font-size: 24px; }
  main, .find { max-width: 640px; margin-inline: auto; }
  .topbar__row, .groups { max-width: 640px; margin-inline: auto; }
}