/* ─────────────────────────────────────────────────────────────────────────────
Snap Digital design system · snap.css
One file for every Snap Engine web UI. Pages link this first, then their own
css for layout and page-specific rules. Re-brand by changing the tokens in
§1 only. Docs: docs/design/design-system.md
───────────────────────────────────────────────────────────────────────────── */
/* §0 Fonts — served by the engine from /fonts/ (assets/fonts), never the internet.
"Snap Display" is Inter Display Bold; the italic is Inter Display Black Italic
(the voice of the guest screens: countdowns, "FIGHT!", attract lines).
Body text on operator tools is the system UI face: SF Pro on Mac/iPad, Segoe on
Windows. If a font file never arrives the stack falls back without reflow drama. */
@font-face { font-family: "Snap Display"; src: url("/fonts/InterDisplay-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Snap Display"; src: url("/fonts/InterDisplay-BlackItalic.otf") format("opentype"); font-weight: 900; font-style: italic; font-display: swap; }
/* §1 Tokens ─────────────────────────────────────────────────────────────── */
:root {
/* brand */
--snap-accent: #c41a5e; /* Snap raspberry · primary actions, active states, focus */
--snap-accent-hover: #a8134f;
--snap-accent-ink: #ffffff; /* text on the accent */
--snap-accent-text: #b2164f; /* the accent as text on a light surface (5.9:1) */
--snap-accent-soft: color-mix(in srgb, var(--snap-accent) 10%, var(--snap-surface));
--snap-accent-line: color-mix(in srgb, var(--snap-accent) 35%, var(--snap-line));
/* neutrals · warm paper, white surfaces, warm ink */
--snap-bg: #f7f6f3;
--snap-surface: #ffffff;
--snap-surface-2: #f2f0ec; /* inset wells, hover rows, code */
--snap-surface-3: #e9e6e0; /* pressed, thumbs */
--snap-line: #e6e3dd; /* hairlines */
--snap-line-2: #cfcac2; /* control borders */
--snap-ink: #1c1a17; /* 17:1 */
--snap-ink-2: #5c5751; /* 7:1 */
--snap-ink-3: #6f6a62; /* 5:1 · hints, captions */
--snap-ink-4: #a39d94; /* placeholders, disabled · not for reading copy */
/* semantics (as text / border on a light surface ≥ 5:1) */
--snap-ok: #15803d;
--snap-warn: #b45309;
--snap-bad: #b91c1c;
--snap-info: #1d4ed8;
--snap-ok-soft: color-mix(in srgb, var(--snap-ok) 12%, var(--snap-surface));
--snap-warn-soft: color-mix(in srgb, var(--snap-warn) 12%, var(--snap-surface));
--snap-bad-soft: color-mix(in srgb, var(--snap-bad) 10%, var(--snap-surface));
--snap-info-soft: color-mix(in srgb, var(--snap-info) 10%, var(--snap-surface));
/* the stage: dark areas inside light tools (live view, card previews, QR wells) */
--snap-stage: #0e0d0c;
--snap-stage-2: #1a1917;
--snap-stage-ink: #f2f0ec;
--snap-stage-ink-2: #c9c4bc;
--snap-stage-line: rgba(255, 255, 255, .12);
/* type */
--snap-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
--snap-font-display: "Snap Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--snap-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
--snap-fs-xs: 12px;
--snap-fs-sm: 13px;
--snap-fs-md: 14px;
--snap-fs-base: 16px;
--snap-fs-lg: 18px;
--snap-fs-xl: 22px;
--snap-fs-2xl: 28px;
--snap-fs-3xl: 36px;
--snap-fs-4xl: 48px;
--snap-fs-5xl: 64px;
--snap-lh-tight: 1.1;
--snap-lh-snug: 1.3;
--snap-lh-body: 1.5;
--snap-track-display: -.015em;
/* space (4px base) */
--snap-sp-1: 4px;
--snap-sp-2: 8px;
--snap-sp-3: 12px;
--snap-sp-4: 16px;
--snap-sp-5: 20px;
--snap-sp-6: 24px;
--snap-sp-8: 32px;
--snap-sp-10: 40px;
--snap-sp-12: 48px;
--snap-gutter: 20px; /* page side gutter */
/* radii · controls / cards / sheets / pills */
--snap-r-sm: 6px;
--snap-r-md: 10px;
--snap-r-lg: 14px;
--snap-r-xl: 20px;
--snap-r-pill: 999px;
/* elevation · cards use hairlines; shadows are for things that float */
--snap-shadow-1: 0 1px 2px rgba(28, 26, 23, .06), 0 4px 12px rgba(28, 26, 23, .06);
--snap-shadow-2: 0 12px 32px rgba(28, 26, 23, .18), 0 2px 6px rgba(28, 26, 23, .08);
--snap-shadow-stage: 0 24px 60px rgba(0, 0, 0, .55);
/* focus + hit targets */
--snap-focus: 0 0 0 3px color-mix(in srgb, var(--snap-accent) 30%, transparent);
--snap-tap: 44px; /* minimum hit target; iPad pages raise it */
--snap-control-h: 38px; /* desktop input / button height */
/* motion */
--snap-ease: cubic-bezier(.2, .8, .2, 1);
--snap-dur: .18s;
color-scheme: light;
accent-color: var(--snap-accent);
}
/* Dark variant · for operator tools at night on the floor; guest/TV pages force it with data-theme="dark". */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--snap-accent-text: #f0558a;
--snap-bg: #141311;
--snap-surface: #1d1b19;
--snap-surface-2: #26231f;
--snap-surface-3: #302c27;
--snap-line: #2f2b26;
--snap-line-2: #4a453e;
--snap-ink: #f2f0ec;
--snap-ink-2: #c9c4bc;
--snap-ink-3: #a39d94;
--snap-ink-4: #6f6a62;
--snap-ok: #4ade80;
--snap-warn: #fbbf24;
--snap-bad: #f87171;
--snap-info: #7aa2ff;
--snap-ok-soft: color-mix(in srgb, var(--snap-ok) 14%, var(--snap-surface));
--snap-warn-soft: color-mix(in srgb, var(--snap-warn) 14%, var(--snap-surface));
--snap-bad-soft: color-mix(in srgb, var(--snap-bad) 14%, var(--snap-surface));
--snap-info-soft: color-mix(in srgb, var(--snap-info) 14%, var(--snap-surface));
--snap-shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .3);
--snap-shadow-2: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3);
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--snap-accent-text: #f0558a;
--snap-bg: #141311;
--snap-surface: #1d1b19;
--snap-surface-2: #26231f;
--snap-surface-3: #302c27;
--snap-line: #2f2b26;
--snap-line-2: #4a453e;
--snap-ink: #f2f0ec;
--snap-ink-2: #c9c4bc;
--snap-ink-3: #a39d94;
--snap-ink-4: #6f6a62;
--snap-ok: #4ade80;
--snap-warn: #fbbf24;
--snap-bad: #f87171;
--snap-info: #7aa2ff;
--snap-ok-soft: color-mix(in srgb, var(--snap-ok) 14%, var(--snap-surface));
--snap-warn-soft: color-mix(in srgb, var(--snap-warn) 14%, var(--snap-surface));
--snap-bad-soft: color-mix(in srgb, var(--snap-bad) 14%, var(--snap-surface));
--snap-info-soft: color-mix(in srgb, var(--snap-info) 14%, var(--snap-surface));
--snap-shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .3);
--snap-shadow-2: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3);
color-scheme: dark;
}
/* §2 Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
background: var(--snap-bg);
color: var(--snap-ink);
font-family: var(--snap-font-ui);
font-size: var(--snap-fs-md);
line-height: var(--snap-lh-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
a { color: var(--snap-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
img, video, canvas, svg { max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 700; line-height: var(--snap-lh-snug); letter-spacing: -.01em; }
h1 { font-size: var(--snap-fs-2xl); }
h2 { font-size: var(--snap-fs-xl); }
h3 { font-size: var(--snap-fs-base); }
h4 { font-size: var(--snap-fs-md); }
code, kbd, .mono { font-family: var(--snap-font-mono); font-size: .92em; }
code { background: var(--snap-surface-2); border: 1px solid var(--snap-line); border-radius: var(--snap-r-sm); padding: 1px 5px; color: var(--snap-ink); }
pre.mono, .code-block { font-family: var(--snap-font-mono); font-size: var(--snap-fs-xs); line-height: 1.5; background: var(--snap-surface-2); border: 1px solid var(--snap-line); border-radius: var(--snap-r-md); padding: var(--snap-sp-3); white-space: pre-wrap; word-break: break-word; margin: 0; color: var(--snap-ink-2); }
hr { border: 0; border-top: 1px solid var(--snap-line); margin: var(--snap-sp-4) 0; }
/* keyboard focus is always visible; pointer focus is quiet */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--snap-accent); outline-offset: 2px; border-radius: var(--snap-r-sm); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
::selection { background: color-mix(in srgb, var(--snap-accent) 25%, transparent); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* display type: headings that carry the brand voice */
.display, .display-italic { font-family: var(--snap-font-display); font-weight: 700; line-height: var(--snap-lh-tight); letter-spacing: var(--snap-track-display); }
.display-italic { font-weight: 900; font-style: italic; }
.num { font-family: var(--snap-font-display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
/* text utilities */
.muted { color: var(--snap-ink-3); }
.small { color: var(--snap-ink-3); font-size: var(--snap-fs-sm); }
.small.err, .err { color: var(--snap-bad); }
.tiny { color: var(--snap-ink-3); font-size: var(--snap-fs-xs); word-break: break-all; }
.help { color: var(--snap-ink-3); font-size: var(--snap-fs-sm); line-height: 1.5; margin: var(--snap-sp-1) 0 var(--snap-sp-3); max-width: 78ch; }
.help a { color: var(--snap-accent-text); }
/* §3 App shell ──────────────────────────────────────────────────────────── */
/* .bar: the top bar. Left: wordmark + page name + running event. Right: status lights + actions. */
.bar {
display: flex; align-items: center; justify-content: space-between; gap: var(--snap-sp-4);
min-height: 56px; padding: var(--snap-sp-2) var(--snap-gutter);
background: var(--snap-surface); border-bottom: 1px solid var(--snap-line);
position: sticky; top: 0; z-index: 5;
}
.bar .ident { display: flex; align-items: center; gap: var(--snap-sp-3); min-width: 0; }
.bar .event { font-weight: 600; font-size: var(--snap-fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .running, .bar .station { color: var(--snap-ink-3); font-size: var(--snap-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .lights, .bar .links { display: flex; align-items: center; gap: var(--snap-sp-2); flex-wrap: wrap; justify-content: flex-end; }
/* The wordmark: "Snap" in the display face with the shutter dot. One per page, top-left. */
.wordmark { display: inline-flex; align-items: center; gap: 7px; font-family: var(--snap-font-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; line-height: 1; color: var(--snap-ink); white-space: nowrap; text-decoration: none; }
.wordmark::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--snap-accent); box-shadow: inset 0 0 0 3px var(--snap-surface), 0 0 0 1.5px var(--snap-accent); flex: 0 0 auto; }
.wordmark:hover { text-decoration: none; }
.wordmark-sep { width: 1px; height: 22px; background: var(--snap-line-2); margin: 0 var(--snap-sp-1); flex: 0 0 auto; }
.page-name { font-weight: 600; font-size: var(--snap-fs-base); color: var(--snap-ink); white-space: nowrap; }
/* status light: a dot + a label, used for camera / printer / disk / upload. JS sets .ok .warn .bad .off */
.light { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 var(--snap-sp-3); border-radius: var(--snap-r-pill); background: var(--snap-surface); border: 1px solid var(--snap-line-2); font-size: var(--snap-fs-sm); font-weight: 600; color: var(--snap-ink-2); white-space: nowrap; }
.light i { width: 9px; height: 9px; border-radius: 50%; background: var(--snap-ink-4); flex: 0 0 auto; }
.light.ok i { background: var(--snap-ok); }
.light.warn i { background: var(--snap-warn); }
.light.bad i { background: var(--snap-bad); animation: snap-blink 1s steps(2) infinite; }
.light.off i { background: var(--snap-ink-4); }
.light b { font-weight: 600; color: var(--snap-ink-3); font-size: var(--snap-fs-xs); }
button.light:hover { border-color: var(--snap-ink-4); }
@keyframes snap-blink { 50% { opacity: .25; } }
/* connection dot (engine link) */
.link { width: 10px; height: 10px; border-radius: 50%; background: var(--snap-bad); flex: 0 0 auto; }
.link.up { background: var(--snap-ok); }
/* chip: a small rounded status, text + optional dot. .busy / .on are JS states */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 var(--snap-sp-3); border-radius: var(--snap-r-pill); background: var(--snap-surface-2); border: 1px solid var(--snap-line); color: var(--snap-ink-2); font-size: var(--snap-fs-sm); font-weight: 600; white-space: nowrap; line-height: 1; }
.chip.busy { color: var(--snap-warn); border-color: var(--snap-warn); background: var(--snap-warn-soft); }
.chip.on { color: var(--snap-accent-text); border-color: var(--snap-accent); background: var(--snap-accent-soft); }
.chip.ok { color: var(--snap-ok); border-color: color-mix(in srgb, var(--snap-ok) 45%, var(--snap-line)); background: var(--snap-ok-soft); }
.chip.warn { color: var(--snap-warn); border-color: color-mix(in srgb, var(--snap-warn) 45%, var(--snap-line)); background: var(--snap-warn-soft); }
.chip.bad { color: var(--snap-bad); border-color: color-mix(in srgb, var(--snap-bad) 45%, var(--snap-line)); background: var(--snap-bad-soft); }
button.chip { cursor: pointer; }
/* badge: a short label. Sentence case; colour never carries the meaning alone */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--snap-r-sm); font-size: var(--snap-fs-xs); font-weight: 700; line-height: 1; white-space: nowrap; letter-spacing: .01em; background: var(--snap-surface-2); color: var(--snap-ink-2); border: 1px solid var(--snap-line); }
.badge.accent { background: var(--snap-accent); color: var(--snap-accent-ink); border-color: var(--snap-accent); }
.badge.ok { background: var(--snap-ok-soft); color: var(--snap-ok); border-color: color-mix(in srgb, var(--snap-ok) 35%, var(--snap-line)); }
.badge.warn, .badge.test { background: var(--snap-warn-soft); color: var(--snap-warn); border-color: color-mix(in srgb, var(--snap-warn) 40%, var(--snap-line)); }
.badge.bad { background: var(--snap-bad-soft); color: var(--snap-bad); border-color: color-mix(in srgb, var(--snap-bad) 35%, var(--snap-line)); }
.badge.dim { color: var(--snap-ink-3); }
/* banner: a page-wide notice under the bar */
.banner { margin: var(--snap-sp-3) var(--snap-gutter) 0; padding: var(--snap-sp-3) var(--snap-sp-4); border-radius: var(--snap-r-md); font-size: var(--snap-fs-md); line-height: 1.45; background: var(--snap-surface); border: 1px solid var(--snap-line); border-left: 4px solid var(--snap-ink-4); color: var(--snap-ink); }
.banner.warn { border-left-color: var(--snap-warn); background: var(--snap-warn-soft); }
.banner.error, .banner.bad { border-left-color: var(--snap-bad); background: var(--snap-bad-soft); }
.banner.info { border-left-color: var(--snap-info); background: var(--snap-info-soft); }
.banner.ok { border-left-color: var(--snap-ok); background: var(--snap-ok-soft); }
.banner code { background: var(--snap-surface); }
/* §4 Layout ─────────────────────────────────────────────────────────────── */
/* list ↔ detail: a fixed sidebar and a fluid main surface */
.split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--snap-sp-5); padding: var(--snap-sp-5) var(--snap-gutter) var(--snap-sp-12); align-items: start; }
.split-side { position: sticky; top: calc(56px + var(--snap-sp-5)); display: grid; gap: var(--snap-sp-3); min-width: 0; }
.split-main { min-width: 0; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split-side { position: static; } }
/* side list rows: event rows and the like. .on = selected */
.side-head { display: flex; justify-content: space-between; align-items: center; gap: var(--snap-sp-2); padding: 0 2px; font-weight: 700; font-size: var(--snap-fs-md); color: var(--snap-ink); }
.side-head > span { font-size: var(--snap-fs-sm); color: var(--snap-ink-3); font-weight: 600; }
.list { display: grid; gap: var(--snap-sp-1); }
.row-item { display: grid; gap: 3px; text-align: left; width: 100%; padding: var(--snap-sp-3) var(--snap-sp-3) var(--snap-sp-3) var(--snap-sp-4); min-height: var(--snap-tap); background: transparent; border: 1px solid transparent; border-radius: var(--snap-r-md); color: var(--snap-ink); position: relative; }
.row-item:hover { background: var(--snap-surface); border-color: var(--snap-line); }
.row-item.on { background: var(--snap-surface); border-color: var(--snap-line); box-shadow: var(--snap-shadow-1); }
.row-item.on::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--snap-accent); }
.row-item .l1 { display: flex; justify-content: space-between; gap: var(--snap-sp-2); align-items: center; }
.row-item .name { font-weight: 600; font-size: var(--snap-fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-item .l2 { display: flex; gap: var(--snap-sp-2); align-items: center; color: var(--snap-ink-3); font-size: var(--snap-fs-xs); flex-wrap: wrap; }
/* cards */
.card { background: var(--snap-surface); border: 1px solid var(--snap-line); border-radius: var(--snap-r-lg); padding: var(--snap-sp-4) var(--snap-sp-5); min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--snap-sp-3); margin-bottom: var(--snap-sp-3); }
.card-head h2, .card-head h3 { font-size: var(--snap-fs-base); }
.card-head .sub { color: var(--snap-ink-3); font-size: var(--snap-fs-sm); }
/* section heading inside a surface: title + actions on one line, hairline under */
.section-head, .row-head { display: flex; justify-content: space-between; align-items: center; gap: var(--snap-sp-3); flex-wrap: wrap; margin: var(--snap-sp-6) 0 var(--snap-sp-2); padding-bottom: var(--snap-sp-2); border-bottom: 1px solid var(--snap-line); }
.section-head:first-child, .row-head:first-child { margin-top: 0; }
.section-head h3, .row-head h3 { font-size: var(--snap-fs-base); display: flex; align-items: baseline; gap: var(--snap-sp-2); flex-wrap: wrap; }
.row-head .head-actions { display: flex; gap: var(--snap-sp-2); flex-wrap: wrap; }
/* page title block (detail head) */
.title { font-family: var(--snap-font-display); font-weight: 700; font-size: var(--snap-fs-2xl); line-height: var(--snap-lh-tight); letter-spacing: var(--snap-track-display); }
.sub { color: var(--snap-ink-3); font-size: var(--snap-fs-md); display: flex; gap: var(--snap-sp-2); align-items: center; flex-wrap: wrap; }
/* tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--snap-line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0 var(--snap-sp-3); min-height: var(--snap-tap); color: var(--snap-ink-3); font-weight: 600; font-size: var(--snap-fs-md); white-space: nowrap; border-radius: 0; }
.tabs button:hover:not(:disabled) { color: var(--snap-ink); }
.tabs button.on { color: var(--snap-ink); border-bottom-color: var(--snap-accent); }
.tabs button:disabled { color: var(--snap-ink-4); }
.tabs button:focus-visible { outline-offset: -2px; border-radius: var(--snap-r-sm); }
/* empty state */
.empty { display: grid; place-items: center; text-align: center; padding: var(--snap-sp-12) var(--snap-sp-4); color: var(--snap-ink-3); font-size: var(--snap-fs-base); }
.empty-title { font-family: var(--snap-font-display); font-weight: 700; font-size: var(--snap-fs-2xl); color: var(--snap-ink); letter-spacing: var(--snap-track-display); }
.empty-sub { color: var(--snap-ink-3); font-size: var(--snap-fs-md); margin-top: var(--snap-sp-2); }
/* §5 Buttons ────────────────────────────────────────────────────────────────
.btn + a variant: (none)=secondary · .primary · .danger · .ghost · .quiet(=ghost)
sizes: .sm · (none) · .lg · .xl state: .working (spinner), :disabled
Aliases the pages already use, kept so JS-built buttons restyle too:
.big (admin/ba large button) · .small-btn (admin) · .go/.next → primary · .set (ba) */
.btn, .big, .small-btn, .pad button, .keypad button {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: var(--snap-control-h); padding: 0 var(--snap-sp-4);
border-radius: var(--snap-r-md); border: 1px solid var(--snap-line-2);
background: var(--snap-surface); color: var(--snap-ink);
font-weight: 600; font-size: var(--snap-fs-md); line-height: 1.2; white-space: nowrap;
text-decoration: none; cursor: pointer; user-select: none; -webkit-user-select: none;
transition: background var(--snap-dur) var(--snap-ease), border-color var(--snap-dur) var(--snap-ease), box-shadow var(--snap-dur) var(--snap-ease), transform var(--snap-dur) var(--snap-ease);
}
.btn:hover:not(:disabled), .big:hover:not(:disabled), .small-btn:hover:not(:disabled) { background: var(--snap-surface-2); border-color: var(--snap-ink-4); text-decoration: none; }
.btn:active:not(:disabled), .big:active:not(:disabled), .small-btn:active:not(:disabled), .pad button:active:not(:disabled), .keypad button:active:not(:disabled) { transform: translateY(1px); background: var(--snap-surface-3); }
.btn:disabled, .big:disabled, .small-btn:disabled, .pad button:disabled, .keypad button:disabled { opacity: .45; cursor: default; }
.btn:focus-visible, .big:focus-visible, .small-btn:focus-visible { outline: none; box-shadow: var(--snap-focus); border-color: var(--snap-accent); }
.btn.primary, .btn.go, .btn.next, .big.go, .big.next, .small-btn.go, .small-btn.primary { background: var(--snap-accent); color: var(--snap-accent-ink); border-color: var(--snap-accent); }
.btn.primary:hover:not(:disabled), .btn.go:hover:not(:disabled), .btn.next:hover:not(:disabled), .big.go:hover:not(:disabled), .big.next:hover:not(:disabled), .small-btn.go:hover:not(:disabled) { background: var(--snap-accent-hover); border-color: var(--snap-accent-hover); color: var(--snap-accent-ink); }
.btn.next, .big.next { box-shadow: 0 0 0 4px color-mix(in srgb, var(--snap-accent) 22%, transparent); } /* "the obvious next tap" (BA): a halo on top of primary */
.btn.danger, .big.danger, .small-btn.danger { color: var(--snap-bad); border-color: color-mix(in srgb, var(--snap-bad) 40%, var(--snap-line-2)); background: var(--snap-surface); }
.btn.danger:hover:not(:disabled), .big.danger:hover:not(:disabled), .small-btn.danger:hover:not(:disabled) { background: var(--snap-bad-soft); border-color: var(--snap-bad); color: var(--snap-bad); }
.btn.danger.armed, .big.danger.armed, .btn.danger.solid { background: var(--snap-bad); border-color: var(--snap-bad); color: #fff; }
.btn.ghost, .btn.quiet, .big.quiet, .small-btn.quiet { background: transparent; border-color: transparent; color: var(--snap-ink-2); }
.btn.ghost:hover:not(:disabled), .btn.quiet:hover:not(:disabled), .big.quiet:hover:not(:disabled) { background: var(--snap-surface-2); border-color: transparent; color: var(--snap-ink); }
.btn.sm, .small-btn, .btn.small { min-height: 32px; padding: 0 var(--snap-sp-3); font-size: var(--snap-fs-sm); border-radius: var(--snap-r-sm); }
.btn.lg, .big { min-height: var(--snap-tap); padding: 0 var(--snap-sp-5); font-size: var(--snap-fs-base); border-radius: var(--snap-r-md); }
.btn.xl { min-height: 64px; padding: 0 var(--snap-sp-6); font-size: var(--snap-fs-xl); border-radius: var(--snap-r-lg); }
.btn.pill { border-radius: var(--snap-r-pill); }
.btn.block { width: 100%; }
/* loading: text hidden, spinner centred */
.btn.working { position: relative; color: transparent !important; pointer-events: none; }
.btn.working::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 0%, var(--snap-ink-4)); border-top-color: var(--snap-accent); animation: snap-spin .8s linear infinite; }
.btn.primary.working::after { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
@keyframes snap-spin { to { transform: rotate(360deg); } }
/* link-styled actions in a row of buttons */
.btn-row, .exports, .btns { display: flex; gap: var(--snap-sp-2); flex-wrap: wrap; align-items: center; }
/* §6 Forms ──────────────────────────────────────────────────────────────── */
/* a fieldset is a section: hairline, heading, then the fields (the legend is floated so it sits under the rule, not on it) */
fieldset { border: 0; border-top: 1px solid var(--snap-line); border-radius: 0; padding: var(--snap-sp-4) 0 var(--snap-sp-2); margin: 0 0 var(--snap-sp-3); min-width: 0; }
legend { float: left; width: 100%; font-weight: 700; font-size: var(--snap-fs-base); color: var(--snap-ink); padding: 0; margin: 0 0 var(--snap-sp-3); line-height: 1.3; }
fieldset > :not(legend) { clear: both; } /* Chrome gives a BFC beside a floated legend zero width; clearing puts it under */
fieldset::after { content: ""; display: block; clear: both; }
.grid, .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--snap-sp-3) var(--snap-sp-4); }
label { font-size: var(--snap-fs-sm); color: var(--snap-ink-2); font-weight: 600; }
.field, .grid > label, .form-grid > label { display: grid; gap: 5px; min-width: 0; align-content: start; }
label.wide, .field.wide, .span2 { grid-column: 1 / -1; }
label small, .field small, .hint { color: var(--snap-ink-3); font-size: var(--snap-fs-xs); font-weight: 400; line-height: 1.4; }
label.check, .field.check { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--snap-sp-2); color: var(--snap-ink); font-weight: 500; min-height: var(--snap-control-h); align-content: center; }
label.check small, .field.check small { grid-column: 2; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea {
width: 100%; min-height: var(--snap-control-h); padding: 7px var(--snap-sp-3);
background: var(--snap-surface); color: var(--snap-ink); font-weight: 400; font-size: var(--snap-fs-md);
border: 1px solid var(--snap-line-2); border-radius: var(--snap-r-sm);
transition: border-color var(--snap-dur) var(--snap-ease), box-shadow var(--snap-dur) var(--snap-ease);
}
input::placeholder, textarea::placeholder { color: var(--snap-ink-4); font-weight: 400; }
input:hover:not(:disabled):not(:read-only), select:hover:not(:disabled), textarea:hover:not(:disabled):not(:read-only) { border-color: var(--snap-ink-4); }
input:focus, select:focus, textarea:focus { border-color: var(--snap-accent); box-shadow: var(--snap-focus); }
input:read-only:not([type=checkbox]), textarea:read-only, input:disabled, select:disabled, textarea:disabled { background: var(--snap-surface-2); color: var(--snap-ink-3); }
select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; }
select:disabled { background-image: none; padding-right: var(--snap-sp-3); }
textarea { resize: vertical; line-height: 1.45; min-height: 72px; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; margin: 0; accent-color: var(--snap-accent); cursor: pointer; flex: 0 0 auto; }
input[type=range] { width: 100%; accent-color: var(--snap-accent); margin: 6px 0; }
input[type=color] { width: 44px; height: var(--snap-control-h); padding: 3px; border: 1px solid var(--snap-line-2); border-radius: var(--snap-r-sm); background: var(--snap-surface); cursor: pointer; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 3px; }
input[type=file] { font-size: var(--snap-fs-sm); }
input[type=number] { font-variant-numeric: tabular-nums; }
.colour { display: grid; grid-template-columns: 44px 1fr; gap: var(--snap-sp-2); }
label output { color: var(--snap-ink); font-size: var(--snap-fs-sm); font-variant-numeric: tabular-nums; }
/* validation: browser-flagged after interaction, or .invalid set by hand */
input:user-invalid, select:user-invalid, textarea:user-invalid, .invalid input, .invalid select, .invalid textarea { border-color: var(--snap-bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--snap-bad) 20%, transparent); }
.field-error, .form-error { color: var(--snap-bad); font-size: var(--snap-fs-sm); font-weight: 500; }
.form-note { color: var(--snap-ink-3); font-size: var(--snap-fs-sm); }
.form-note.err { color: var(--snap-bad); }
.form-note.ok { color: var(--snap-ok); }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--snap-sp-2); margin-top: var(--snap-sp-4); }
.form-actions .form-note { margin-right: auto; }
/* toggle switch: */
.toggle { display: inline-flex; align-items: center; gap: var(--snap-sp-2); cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .track { width: 38px; height: 22px; border-radius: 11px; background: var(--snap-line-2); position: relative; transition: background var(--snap-dur) var(--snap-ease); flex: 0 0 auto; }
.toggle .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--snap-dur) var(--snap-ease); }
.toggle input:checked + .track { background: var(--snap-accent); }
.toggle input:checked + .track::after { transform: translateX(16px); }
.toggle input:focus-visible + .track { box-shadow: var(--snap-focus); }
/* file picker: a label that looks like a button around a hidden input */
.file-btn, .upload-btn { cursor: pointer; }
.file-btn input[type=file], .upload-btn input[type=file] { display: none; }
/* §7 Data ───────────────────────────────────────────────────────────────── */
.table, table.t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--snap-fs-md); }
.table th, table.t th { text-align: left; font-weight: 600; font-size: var(--snap-fs-xs); color: var(--snap-ink-3); padding: 6px var(--snap-sp-2); border-bottom: 1px solid var(--snap-line); }
.table td, table.t td { padding: 9px var(--snap-sp-2); border-bottom: 1px solid var(--snap-line); vertical-align: middle; }
.table tr:last-child td, table.t tr:last-child td { border-bottom: 0; }
.table .r, table.t .r, .table td.num, table.t th.r { text-align: right; }
/* stat tile: a number and a quiet label. Admin's JS writes .tile .v .k, so page css maps those */
.stat { background: var(--snap-surface); border: 1px solid var(--snap-line); border-radius: var(--snap-r-lg); padding: var(--snap-sp-4) var(--snap-sp-5); min-width: 0; }
.stat .v { font-family: var(--snap-font-display); font-weight: 700; font-size: var(--snap-fs-3xl); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--snap-ink); overflow: hidden; text-overflow: ellipsis; }
.stat .v.text { font-size: var(--snap-fs-xl); line-height: 1.15; padding-top: 4px; }
.stat .k { color: var(--snap-ink-3); font-size: var(--snap-fs-sm); margin-top: var(--snap-sp-2); font-weight: 500; }
.stat.hero { background: var(--snap-ink); color: var(--snap-stage-ink); border-color: var(--snap-ink); }
.stat.hero .v { color: inherit; }
.stat.hero .k { color: var(--snap-stage-ink-2); }
.stat-grid, .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--snap-sp-3); }
/* progress bar:
*/
.progress { height: 8px; background: var(--snap-surface-3); border-radius: var(--snap-r-pill); overflow: hidden; }
.progress.thin { height: 4px; }
.progress > span { display: block; height: 100%; width: 0; background: var(--snap-accent); border-radius: var(--snap-r-pill); transition: width .3s var(--snap-ease); }
/* spinner */
.spinner { width: 28px; height: 28px; margin: var(--snap-sp-4) auto; border-radius: 50%; border: 3px solid var(--snap-line-2); border-top-color: var(--snap-accent); animation: snap-spin .8s linear infinite; }
/* mono code line with a copy affordance: */
.code-line, .statslink { display: grid; grid-template-columns: 1fr auto; gap: var(--snap-sp-2); align-items: center; background: var(--snap-surface-2); border: 1px solid var(--snap-line); border-radius: var(--snap-r-md); padding: var(--snap-sp-2) var(--snap-sp-2) var(--snap-sp-2) var(--snap-sp-3); font-family: var(--snap-font-mono); font-size: var(--snap-fs-sm); word-break: break-all; }
.code-line a, .statslink a { color: var(--snap-accent-text); }
/* the six-character session code */
.code-tag { font-family: var(--snap-font-mono); font-weight: 600; letter-spacing: .12em; }
/* §8 Overlays ───────────────────────────────────────────────────────────── */
/* dialog.sheet: a native