/* base.css — shared tokens and primitives for every page.
 *
 * Colours are Reel Neet Solutions v4 (THE PINNEY). The judging apps are used
 * outdoors, in sun, on iPads and phones, so the default ground is LIGHT
 * ("cloth") with ink type — paper-like, like the sheet the scribe is used to.
 * The board and broadcast feed may choose the dark ground (.theme-ink).
 *
 * Status colours carry meaning house-wide: clear = green, jumping penalty =
 * orange, time = amber, out of competition = grey. Red means ON AIR and is not
 * used here for anything else.
 */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&display=swap");

:root {
  --hivis: #E4FF00;
  --hivis-deep: #B8CC00;
  --hivis-ink: #5A6400;
  --ink: #0D0F0C;
  --ink-800: #14170F;
  --ink-700: #1B1F17;
  --ink-600: #252A20;
  --ink-500: #333A2C;
  --ink-400: #4C5543;
  --cloth: #F5F5F1;
  --cloth-dim: #C9CCC2;
  --cloth-mute: #8A9384;
  --paper: #FFFFFF;
  --line: #D9DBD3;
  --line-strong: #B9BCB1;
  --text: #0D0F0C;
  --text-dim: #4C5543;
  --clear: #1E9E5A;        /* darker than the on-ink #35D07F so it reads on cloth */
  --clear-on-ink: #35D07F;
  --fault: #D2561C;
  --fault-on-ink: #FF9059;
  --time: #A86F00;
  --time-on-ink: #FFC24B;
  --elim: #6B7366;
  --focus: #3355FF;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-sm: 3px;
  --r: 6px;
  --r-lg: 10px;
  --tap: 64px;            /* minimum touch target for field use (gloves, sun, hurry) */
  --shadow: 0 1px 2px rgba(13, 15, 12, .08), 0 4px 12px rgba(13, 15, 12, .06);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  background: var(--cloth);
  -webkit-font-smoothing: antialiased;
}
body.theme-ink { background: var(--ink); color: var(--cloth); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.label {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim);
}
.theme-ink .label { color: var(--cloth-mute); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--r);
  border: 1.5px solid var(--line-strong); background: var(--paper); font-weight: 600;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: var(--cloth); border-color: var(--ink); }
.btn-hivis { background: var(--hivis); color: var(--ink); border-color: var(--hivis-deep); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn[disabled] { opacity: .45; cursor: default; }

/* Status chips: a code, never a number */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px;
  border-radius: 99px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  background: var(--line); color: var(--text);
}
.chip-clear { background: color-mix(in srgb, var(--clear) 16%, white); color: var(--clear); }
.chip-fault { background: color-mix(in srgb, var(--fault) 14%, white); color: var(--fault); }
.chip-time  { background: color-mix(in srgb, var(--time) 16%, white); color: var(--time); }
.chip-elim  { background: #E4E6E0; color: var(--elim); }
.chip-prov  { background: transparent; border: 1px dashed var(--line-strong); color: var(--text-dim); }
.chip-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--clear); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* Sync indicator used by every device page */
.sync { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); }
.sync::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--clear); }
.sync[data-state="pending"]::before { background: var(--time); }
.sync[data-state="offline"]::before { background: var(--fault); }

/* The legal footer on every page (standing instruction, 2026-08-01) */
.legal-footer {
  padding: 16px; text-align: center; font-size: 12px; color: var(--text-dim);
}
.legal-footer a { color: inherit; }
.theme-ink .legal-footer { color: var(--cloth-mute); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}