/* Matchday: the one visual system for the app, the coach view and the landing.
   Spec: docs/superpowers/specs/2026-11-03-accountable-matchday-design.md §8.1.
   Values come from the reference board: specs/2026-11-03-matchday/b-matchday.html.

   One family (Archivo) at three widths. Colour has one job each: the bib is
   for the one action, today's stroke and him on the team list, nothing else.
   No glows, gradients, shadows, rounded cards or decorative icons. */

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/ArchivoVar.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --night: #0A0D0B;                 /* ground: the pitch at night; no cards on it */
  --turf: #121813;                  /* inputs */
  --line: rgba(240, 244, 236, .13); /* hairline between rows */
  --chalk: #F0F4EC;                 /* line paint: text, numbers, the tally, rules under headings */
  --chalk-2: #9DA89F;               /* labels, second lines */
  --chalk-3: #5E6961;               /* pending names, past values, margins (3:1 text only) */
  --bib: #FF5C1F;                   /* the one action, today's stroke, him on the team list */
  --bib-ink: #190800;
  --danger: #FF7A66;                /* destructive actions, as text only */
  --sans: 'Archivo', system-ui, sans-serif;
  color-scheme: dark;
}

/* ── Type ── */
.score { font-stretch: 62%; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: .82; }
.cond { font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; }
.tag { font-stretch: 87%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; font-size: 12px; line-height: 1.2; color: var(--chalk-2); }
.tag.chalk { color: var(--chalk); }
/* A list's head: its labels over a 2 px line-paint rule. */
.list-head { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; padding-bottom: 8px; border-bottom: 2px solid var(--chalk); }

/* The hidden attribute wins over any display a class sets. */
[hidden] { display: none !important; }

/* ── Buttons: one bib slab at most per screen; everything else outlined or a link ── */
.btn {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 22px; width: 100%;
  border: 0; border-radius: 0; box-shadow: none;
  font-family: var(--sans); cursor: pointer;
}
.btn:disabled { opacity: .4; cursor: default; }
.btn-primary { background: var(--bib); color: var(--bib-ink); }
.btn-primary b { font: 900 30px/1 var(--sans); font-stretch: 62%; text-transform: uppercase; letter-spacing: 0.01em; }
.btn-primary small { font: 700 13px/1 var(--sans); font-stretch: 87%; text-transform: uppercase; letter-spacing: 0.07em; }
.btn-secondary {
  background: transparent; color: var(--chalk); box-shadow: inset 0 0 0 2px var(--chalk);
  justify-content: center; height: 58px;
  font: 900 24px/1 var(--sans); font-stretch: 62%; text-transform: uppercase; letter-spacing: 0.02em;
}
/* Links and danger are labels, but tap targets of 44 by 44: the label sits at
   the bottom of the box, 4 px over its rule. */
.btn-quiet, .btn-danger {
  display: inline-flex; align-items: flex-end; min-width: 44px; min-height: 44px; height: auto; width: auto;
  background: none; padding: 0 0 4px; border: 0; border-radius: 0; cursor: pointer; text-decoration: none;
  font: 700 13px/1 var(--sans); font-stretch: 87%; text-transform: uppercase; letter-spacing: 0.07em;
}
.btn-quiet { color: var(--chalk); border-bottom: 2px solid var(--chalk); }
.btn-danger { color: var(--danger); }

/* ── Controls ── */
.switch { flex: none; width: 50px; height: 28px; background: var(--chalk); position: relative; border: 0; padding: 0; cursor: pointer; }
.switch::after { content: ''; position: absolute; width: 22px; height: 22px; background: var(--night); top: 3px; right: 3px; }
.switch[aria-checked="false"], .switch.off { background: #2A322C; }
.switch[aria-checked="false"]::after, .switch.off::after { right: auto; left: 3px; background: var(--chalk-2); }

.field input, .field textarea, input.field {
  width: 100%; height: 52px; margin-top: 8px; padding: 0 14px;
  background: var(--turf); color: var(--chalk); border: 0; border-bottom: 2px solid var(--chalk); border-radius: 0;
  font: 800 22px var(--sans); font-stretch: 75%; text-transform: uppercase;
}
.field input:focus-visible, .field textarea:focus-visible, input.field:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }

/* Selects become rows of choices; the chosen one carries a square mark. */
.choices { display: flex; flex-direction: column; }
.choice {
  display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 52px;
  background: none; color: var(--chalk-2); border: 0; border-bottom: 1px solid var(--line); padding: 0;
  font: 400 16px var(--sans); text-align: left; cursor: pointer;
}
.choice[aria-pressed="true"] { color: var(--chalk); font-weight: 700; }
.choice[aria-pressed="true"]::after { content: ''; width: 10px; height: 10px; background: var(--chalk); }
.choice:disabled { color: var(--chalk-3); cursor: default; }
.choice small { margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--chalk-3); }
.choice-group { margin-top: 16px; }
/* Numbers in a row (countdown seconds): squares, the chosen one outlined. */
.choices.nums { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.choices.nums .choice { width: 44px; min-height: 44px; justify-content: center; border: 1px solid var(--line); font: 900 22px/1 var(--sans); font-stretch: 62%; font-variant-numeric: tabular-nums; }
.choices.nums .choice[aria-pressed="true"] { border-color: var(--chalk); }
.choices.nums .choice[aria-pressed="true"]::after { display: none; }

/* The switch as a checkbox, for rows that save on change (Settings). */
input.switch { appearance: none; -webkit-appearance: none; flex: none; width: 50px; height: 28px; margin: 0; position: relative; background: #2A322C; border: 0; border-radius: 0; cursor: pointer; }
input.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: var(--chalk-2); }
input.switch:checked { background: var(--chalk); }
input.switch:checked::after { left: auto; right: 3px; background: var(--night); }
input.switch:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }

/* ── The wall: every five days marked make one mark (tally.js) ── */
.wall { display: grid; grid-template-columns: repeat(5, 1fr); row-gap: 4px; color: var(--chalk); }
.wall svg { display: block; width: 100%; height: auto; }
.wall .today { animation: stroke-in 400ms ease-out both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes stroke-in { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .wall .today { animation: none; }
}