/* ==========================================================================
   Kickario design system.

   DECISION 4.1 — two surfaces with different rules, because the caster is in
   direct sun holding the phone one-handed while watching their kid, and the
   listener is on a couch. These are not the same app.

     .stand   light, editorial, 44pt targets, audio-primary
     .console dark always, 56pt targets, 17pt body, >=7:1 contrast, silent

   DECISION 4.2 — red does ONE job: ON AIR. In the comps it was doing nine,
   including a red *sync progress bar*, which reads as failure in progress.
   ========================================================================== */

:root {
  /* brand */
  --red-600: #E11D48;   /* Kick Red — ON AIR, and the one primary CTA per screen */
  --red-700: #BE123C;
  --red-500: #F43F5E;   /* brand on dark; red-600 fails contrast on #0B0F14 */
  --red-100: #FFE4E9;
  --red-950: #4C0519;
  --ink:     #0B0F14;

  /* semantic — DECISION 4.3, destructive is NOT the brand colour */
  --success: #0E9F6E;  --success-tint: #D1FAE5;
  --warning: #B45309;  --warning-tint: #FEF3C7;
  --danger:  #B3261E;  --danger-tint:  #FEE2E2;
  --info:    #2563EB;  --info-tint:    #DBEAFE;

  --turf: #0E9F6E;  --turf-deep: #065F46;  --turf-light: #ECFDF5;
  --home: #E11D48;  --away: #2563EB;

  /* light theme (STAND) */
  --canvas:   #FFFFFF;
  --subtle:   #F7F8FA;
  --elevated: #FFFFFF;
  --hairline: #E8EAEE;
  --strong:   #C9CED6;
  --text-1:   #0B0F14;
  --text-2:   #414C59;
  --text-3:   #67707D;   /* never below 12px */
  --brand:    var(--red-600);

  /* spacing / radius */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;
  --gutter: 20px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  --e1: 0 1px 2px rgba(11,15,20,.06);
  --e2: 0 4px 12px rgba(11,15,20,.08);
  --e3: 0 12px 32px rgba(11,15,20,.14);

  /* motion */
  --d-instant: 80ms; --d-fast: 160ms; --d-base: 240ms; --d-slow: 400ms;
  --ease: cubic-bezier(.2,0,0,1);
  --ease-enter: cubic-bezier(0,0,0,1);
  --ease-bug: cubic-bezier(.16,1,.3,1);

  --font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --tnum: 'tabular-nums' 1;
}

/* DECISION 4.1 — the console is dark ALWAYS, ignoring system preference.
   [PERF]: a white-dominant UI is the worst case for a 90-minute OLED session,
   and dark is a double-digit-percent battery win. */
.console {
  --canvas:   #0B0F14;
  --subtle:   #141A21;
  --elevated: #1D242D;
  --elev-2:   #262F3A;
  --hairline: #2C3540;
  --strong:   #414C59;
  --text-1:   #F2F5F8;
  --text-2:   #B6C0CC;
  --text-3:   #8B96A3;
  --brand:    var(--red-500);
  --warning:  #FBBF24;
  --success:  #34D399;
  --info:     #60A5FA;
  --danger:   #F87171;
}

/* Sunlight mode. [A11Y]: in direct sun on grass, effective contrast is roughly
   halved by screen reflectance. Nothing in the comps addressed this at all. */
.sunlight {
  --canvas: #000000; --subtle: #0A0A0A; --elevated: #141414; --elev-2: #1F1F1F;
  --hairline: #4A4A4A; --strong: #7A7A7A;
  --text-1: #FFFFFF; --text-2: #E8E8E8; --text-3: #C4C4C4;
  --brand: #FF4D6D;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--canvas); color: var(--text-1);
  font-family: var(--font);
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;   /* stop pull-to-refresh nuking a live cast */
}
body { min-height: 100dvh; }

#app { min-height: 100dvh; display: flex; flex-direction: column; }

/* ------------------------------------------------------------ type scale
   DECISION 4.4 — the comps' 10px letterspaced label token is DELETED.
   12px is the floor, and all-caps eyebrows become sentence case. */
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; font-weight: 800; }
h1 { font-size: 30px; line-height: 34px; }
h2 { font-size: 22px; line-height: 28px; font-weight: 700; }
h3 { font-size: 17px; line-height: 24px; font-weight: 600; }
p  { margin: 0 0 var(--s3); color: var(--text-2); }
.caption { font-size: 12px; line-height: 16px; color: var(--text-3); }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--text-3); letter-spacing: 0; }
.tnum { font-variant-numeric: tabular-nums; }
a { color: var(--brand); }

/* --------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 var(--gutter); }
.screen { flex: 1; padding-bottom: 96px; }
.stack > * + * { margin-top: var(--s3); }
.row { display: flex; align-items: center; gap: var(--s3); }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.hidden { display: none !important; }

/* ---------------------------------------------------------------- header */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
  padding: max(env(safe-area-inset-top), 8px) 0 10px;
}
.topbar .wrap { display: flex; align-items: center; gap: var(--s3); min-height: 40px; }

/* ------------------------------------------------------------------ cards */
.card {
  background: var(--elevated); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: var(--s4); box-shadow: var(--e1);
}
.console .card { box-shadow: none; background: var(--elevated); }
.card.flat { box-shadow: none; }
.card.tap { cursor: pointer; transition: transform var(--d-fast) var(--ease); }
.card.tap:active { transform: scale(.985); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px; padding: 0 var(--s5); border-radius: var(--r-pill);
  border: 1px solid transparent; background: var(--subtle); color: var(--text-1);
  font: inherit; font-weight: 600; font-size: 16px; cursor: pointer;
  transition: transform var(--d-instant) var(--ease), opacity var(--d-fast);
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.btn.primary { background: var(--brand); color: #fff; }
.btn.ghost { background: transparent; border-color: var(--hairline); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--text-2); min-height: 44px; }
.btn.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn.block { width: 100%; }
.btn.sm { min-height: 40px; font-size: 14px; padding: 0 var(--s4); }
/* DECISION 4.1 — 56pt on the console. Cold hands, one hand, direct sun. */
.console .btn { min-height: 56px; font-size: 17px; }

/* ----------------------------------------------------------------- inputs */
label.field { display: block; }
label.field > span { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; min-height: 52px; padding: 0 var(--s4);
  background: var(--subtle); color: var(--text-1);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  font: inherit; font-size: 16px;   /* never below 16 — iOS zooms otherwise */
}
textarea { padding: var(--s3) var(--s4); min-height: 96px; line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
input::placeholder, textarea::placeholder { color: var(--text-3); }

/* ------------------------------------------------------------------ chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-pill);
  background: var(--subtle); border: 1px solid var(--hairline);
  font-size: 13px; font-weight: 600; color: var(--text-2);
}
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip.tone-brand   { background: var(--red-100);     color: var(--red-700); border-color: transparent; }
.chip.tone-success { background: var(--success-tint); color: #05603A; border-color: transparent; }
.chip.tone-warning { background: var(--warning-tint); color: #92400E; border-color: transparent; }
.chip.tone-danger  { background: var(--danger-tint);  color: #8C1D18; border-color: transparent; }
.chip.tone-info    { background: var(--info-tint);    color: #1E40AF; border-color: transparent; }
.console .chip.tone-brand,.console .chip.tone-success,.console .chip.tone-warning,
.console .chip.tone-danger,.console .chip.tone-info { background: var(--elev-2); color: var(--text-1); }

/* ---------------------------------------------------------------- ON AIR
   DECISION 4.2 — red is the record light. That is its meaning in broadcast and
   it is the meaning worth owning. */
.onair {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--red-600); text-transform: uppercase;
}
.console .onair { color: var(--red-500); }
.onair .dot {
  width: 9px; height: 9px; border-radius: 50%; background: currentColor;
  animation: pulse 1600ms ease-in-out infinite;   /* heartbeat, not a strobe */
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* --------------------------------------------------------------- scoreline */
.scoreline { display: flex; align-items: center; gap: var(--s3); }
.scoreline .team { flex: 1; min-width: 0; }
.scoreline .team .abbr {
  /* DECISION: team identity NEVER by colour alone — 8% of men are colourblind
     and a large share of them are soccer dads. */
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .06em;
  padding: 2px 6px; border-radius: 5px; background: var(--subtle); color: var(--text-2);
}
.scoreline .team.h .abbr { background: var(--home); color: #fff; }
.scoreline .team.a .abbr { background: var(--away); color: #fff; }
.scoreline .team .nm { font-size: 15px; font-weight: 600; margin-top: 3px; }
.scoreline .team.a { text-align: right; }
.score {
  font-size: 40px; font-weight: 800; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; line-height: 1;
  padding: 6px 14px; background: var(--subtle); border-radius: var(--r-md); white-space: nowrap;
}
.score.big { font-size: 56px; }
.score .digit { display: inline-block; }
.score .digit.bump { animation: bump var(--d-base) var(--ease-bug); }
@keyframes bump { 0% { transform: translateY(-60%); opacity: 0 } 100% { transform: none; opacity: 1 } }
.clock {
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-2); letter-spacing: .01em;
}

/* -------------------------------------------------------------- feed cards */
.calls { display: flex; flex-direction: column; gap: 10px; }
.call {
  display: flex; gap: var(--s3); padding: var(--s3) var(--s4);
  background: var(--elevated); border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  animation: enter var(--d-base) var(--ease-enter);
  content-visibility: auto; contain-intrinsic-size: auto 74px;
}
@keyframes enter { from { opacity: 0; transform: translateY(14px) scale(.985) } }
.call.sys { background: transparent; border-style: dashed; }
.call.backfilled { border-left: 3px solid var(--info); }
.call.queued { opacity: .62; border-style: dashed; }
.call .mark {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; font-weight: 800;
  background: var(--subtle); color: var(--text-2);
}
.call .mark.brand   { background: var(--red-600);   color: #fff; }
.call .mark.success { background: var(--success);   color: #fff; }
.call .mark.warning { background: var(--warning);   color: #fff; }
.call .mark.danger  { background: var(--danger);    color: #fff; }
.call .mark.info    { background: var(--info);      color: #fff; }
.call .body { flex: 1; min-width: 0; }
.call .txt { font-size: 15px; line-height: 1.45; }
.call .meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.call .min { font-size: 12px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.call .kind { font-size: 12px; font-weight: 700; color: var(--text-3); }

/* DECISION 2.11 — every voiced call carries a visible AI label and a text
   transcript, on every tier. That transcript is also the caption track that
   deaf and hard-of-hearing family need, and they are a real audience for a
   *text* cast. */
.aitag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 6px; border-radius: 4px;
  background: var(--subtle); color: var(--text-3); border: 1px solid var(--hairline);
}
.playbtn {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--hairline); background: var(--subtle); color: var(--text-1);
  display: grid; place-items: center; cursor: pointer; font-size: 13px;
}
.playbtn.playing { background: var(--brand); color: #fff; border-color: transparent; }

/* --------------------------------------------------------- reactions bar */
.reacts { display: flex; gap: 10px; justify-content: center; padding: var(--s3) 0; }
.reacts button {
  width: 52px; height: 52px; border-radius: 50%; font-size: 24px; line-height: 1;
  background: var(--subtle); border: 1px solid var(--hairline); cursor: pointer;
  transition: transform var(--d-instant) var(--ease);
}
.reacts button:active { transform: scale(1.22); }
.reactcount { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text-3); }

.floaters { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.floaters span { position: absolute; font-size: 26px; animation: fly 1200ms ease-out forwards; }
@keyframes fly { to { transform: translateY(-140px) scale(1.3); opacity: 0 } }

/* ------------------------------------------------------------- console pad
   DECISION 1.2 / 1.3 — six chips above the fold, one tap to post, everything
   reachable in the bottom of the screen. The comps' wizard was 11 interactions
   per event, performed by someone whose own child is on the pitch. */
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pad button {
  min-height: 74px; border-radius: var(--r-md); border: 1px solid var(--hairline);
  background: var(--elevated); color: var(--text-1);
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: transform var(--d-instant) var(--ease), background var(--d-fast);
}
.pad button:active { transform: scale(.95); background: var(--elev-2); }
.pad button .sub { font-size: 11px; font-weight: 600; color: var(--text-3); }
.pad button.goal { background: var(--red-600); color: #fff; border-color: transparent; }
.pad button.goal .sub { color: rgba(255,255,255,.8); }

.talk {
  width: 100%; min-height: 84px; border-radius: var(--r-lg);
  background: var(--elev-2); border: 2px solid var(--hairline); color: var(--text-1);
  font: inherit; font-size: 18px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  user-select: none; -webkit-user-select: none; touch-action: none;
  transition: background var(--d-fast), border-color var(--d-fast), transform var(--d-instant);
}
.talk.rec { background: var(--red-600); border-color: var(--red-500); color: #fff; transform: scale(1.02); }
.wave { display: flex; align-items: center; gap: 3px; height: 26px; }
.wave i { width: 3px; background: currentColor; border-radius: 2px; height: 4px; transition: height 60ms linear; }

.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: color-mix(in srgb, var(--canvas) 92%, transparent);
  backdrop-filter: blur(20px); border-top: 1px solid var(--hairline);
  padding: var(--s3) 0 calc(var(--s3) + env(safe-area-inset-bottom));
}

/* -------------------------------------------------------------- tab bar
   DECISION 5.1 — three tabs. The comps' four rendered five-plus destinations. */
.tabs { display: flex; }
.tabs a {
  flex: 1; text-align: center; padding: 6px 0; text-decoration: none;
  color: var(--text-3); font-size: 12px; font-weight: 600;
}
.tabs a .ic { display: block; font-size: 19px; line-height: 24px; margin-bottom: 1px; }
.tabs a.on { color: var(--brand); }

/* ------------------------------------------------------------------ misc */
.banner {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  font-size: 14px; font-weight: 500;
}
.banner.warn { background: var(--warning-tint); color: #92400E; }
.banner.info { background: var(--info-tint); color: #1E3A8A; }
.banner.ok   { background: var(--success-tint); color: #05603A; }
.banner.bad  { background: var(--danger-tint); color: #8C1D18; }
.console .banner { background: var(--elev-2); color: var(--text-1); }

.sheet-scrim {
  position: fixed; inset: 0; z-index: 50; background: rgba(11,15,20,.55);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade var(--d-fast) ease;
}
@keyframes fade { from { opacity: 0 } }
.sheet {
  width: 100%; max-width: 560px; background: var(--canvas);
  border-radius: 24px 24px 0 0; padding: var(--s5) var(--gutter)
    calc(var(--s5) + env(safe-area-inset-bottom));
  max-height: 88dvh; overflow-y: auto;
  animation: rise var(--d-base) var(--ease-enter);
}
@keyframes rise { from { transform: translateY(24px) } }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--strong); margin: -8px auto var(--s4); }

.undo {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 45;
  max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--s3);
  background: var(--ink); color: #fff; border-radius: var(--r-pill);
  padding: 10px 10px 10px var(--s5); font-size: 14px; font-weight: 600;
  box-shadow: var(--e3); animation: enter var(--d-base) var(--ease-enter);
}
.undo button { background: rgba(255,255,255,.16); color: #fff; border: 0; border-radius: var(--r-pill); padding: 10px 18px; font: inherit; font-weight: 700; cursor: pointer; }

.empty { text-align: center; padding: var(--s8) var(--s4); }
.empty .glyph { font-size: 34px; opacity: .35; margin-bottom: var(--s3); }
.empty h3 { margin-bottom: 6px; }

.skel { background: var(--subtle); border-radius: var(--r-md); height: 68px; animation: shim 1.4s ease-in-out infinite; }
@keyframes shim { 50% { opacity: .55 } }

.pitch { width: 100%; aspect-ratio: 3/4; border-radius: var(--r-md); overflow: hidden; }
.zone { cursor: pointer; transition: opacity var(--d-fast); }
.zone:active { opacity: .7; }

.meter { height: 8px; border-radius: 4px; background: var(--hairline); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--success); border-radius: 4px; }
/* Note: the comps used BRAND RED for a sync progress bar. A red loading bar
   reads as failure in progress. DECISION 4.2. */

.kv { display: flex; justify-content: space-between; gap: var(--s3); padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--text-2); font-size: 15px; }
.kv .v { font-weight: 600; font-size: 15px; text-align: right; }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------- reduced motion
   [A11Y] — honoured on every animation, and everything pauses when the page
   is hidden (which is also the battery answer). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .onair .dot { animation: none; opacity: 1; }
}

/* ------------------------------------------------------------- wide layout
   The comps had no desktop or landscape layout at all, despite "must work on a
   laptop" being an explicit requirement. */
@media (min-width: 900px) {
  .wrap { max-width: 900px; }
  .split { display: grid; grid-template-columns: 380px 1fr; gap: var(--s6); align-items: start; }
  .split > * { min-width: 0; }
  .screen { padding-bottom: var(--s8); }
  .tabs { max-width: 560px; margin: 0 auto; }
}