/* Direction: night-match analytics desk — floodlit dark pitch, lime chalk accent, condensed sports display */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  color-scheme: dark;
  --canvas: #0a120e;
  --surface: #101b15;
  --surface-2: #161e1a;
  --border: #243428;
  --border-strong: #545956;
  --ink: #e8f2ec;
  --muted: #8ea89a;
  --accent: #a3e635;
  --accent-hover: #b1ea53;
  --accent-ink: #0a120e;
  --accent-text: #bef264;
  --accent-strong: #a3e635;
  --accent-soft: #2c4117;
  --accent-border: #4f7120;
  --success: #4ade80;
  --success-ink: #ffffff;
  --success-soft: #183f27;
  --success-strong: #4ade80;
  --warning: #fbbf24;
  --warning-ink: #ffffff;
  --warning-soft: #3f3813;
  --warning-strong: #fbbf24;
  --danger: #f87171;
  --danger-ink: #ffffff;
  --danger-soft: #3e2724;
  --danger-strong: #f87171;
  --chart-1: #a3e635;
  --chart-2: #14d9cf;
  --chart-3: #77bafb;
  --chart-4: #d5a7fb;
  --chart-5: #ff869d;
  --chart-6: #fbaa43;

  --x-away: #38bdf8;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --display-weight: 800;
  --radius-card: 10px;
  --radius-btn: 6px;
  --radius-input: 6px;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3f3;
  --border: #dddedd;
  --border-strong: #b6b8b7;
  --ink: #0a120e;
  --muted: #636865;
  --accent: #96d431;
  --accent-hover: #80b42a;
  --accent-ink: #0a120e;
  --accent-text: #54771b;
  --accent-strong: #54771b;
  --accent-soft: #f0f9e2;
  --accent-border: #d0eca2;
  --success: #4ade80;
  --success-ink: #0a120e;
  --success-soft: #e9fbf0;
  --success-strong: #297b48;
  --warning: #fbbf24;
  --warning-ink: #0a120e;
  --warning-soft: #fff7e5;
  --warning-strong: #8d6b14;
  --danger: #f87171;
  --danger-ink: #0a120e;
  --danger-soft: #feeeee;
  --danger-strong: #a44b4b;
  --chart-1: #6c9e10;
  --chart-2: #0fa19a;
  --chart-3: #0878c8;
  --chart-4: #b678e4;
  --chart-5: #bc3c5d;
  --chart-6: #c88012;
}

body { background-image: repeating-linear-gradient(90deg, transparent 0 79px, color-mix(in srgb, var(--border) 35%, transparent) 79px 80px); background-attachment: fixed; }
.pitch-dot { width: 14px; height: 14px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 3px var(--canvas), 0 0 0 5px var(--accent); display: inline-block; }
.nav-link { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; border-radius: 6px; font-size: .9rem; font-weight: 500; color: var(--muted); white-space: nowrap; transition: color .15s, background .15s; }
.nav-link:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-link.is-active { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 14%, transparent); }

.stat { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-card); padding: 1rem; }
.stat-n { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--accent-text); }
.stat-l { margin-top: .35rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.fx-list { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.fx-row { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.1rem; border-top: 1px solid var(--border); transition: background .15s, transform .15s; }
.fx-row:first-child { border-top: 0; }
.fx-row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.fx-row:active { transform: scale(.995); }
.fx-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (min-width: 640px) { .fx-row { grid-template-columns: 3.2rem 1fr 11rem auto; } }

.pbar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--border); }
.pbar i { display: block; height: 100%; }
.pb-h { background: var(--accent); } .pb-d { background: var(--muted); opacity: .55; } .pb-a { background: var(--x-away); }
.pmeter { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.pmeter i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.pmeter-alt i { background: var(--x-away); }

.badge-hit { color: var(--success-strong); background: var(--success-soft); border-color: var(--success-strong); }
.badge-miss { color: var(--danger-strong); background: var(--danger-soft); border-color: var(--danger-strong); }
.badge-warn { color: var(--warning-strong); background: var(--warning-soft); border-color: var(--warning-strong); }

.chip { white-space: nowrap; font-family: var(--font-mono); font-size: .8rem; transition: background .15s; }
.chip.is-on { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-text); border-color: var(--accent); }

.result-band { border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); border-radius: var(--radius-card); padding: 1rem 1.25rem; }
.insuff { border: 1px dashed var(--warning); background: color-mix(in srgb, var(--warning) 8%, transparent); border-radius: var(--radius-card); padding: 1.25rem; }
.fx-import { display: grid; grid-template-columns: 3.2rem 1fr; gap: .75rem 1rem; align-items: center; padding: 1rem 1.1rem; border-top: 1px solid var(--border); }
.fx-import:first-child { border-top: 0; }
@media (min-width: 640px) { .fx-import { grid-template-columns: 3.2rem 1fr auto; } }
.fx-import > :last-child { grid-column: 1 / -1; }
@media (min-width: 640px) { .fx-import > :last-child { grid-column: auto; } }
.collect-ok { color: var(--success-strong); }
.collect-bad { color: var(--danger-strong); }
fieldset.card { min-width: 0; }
textarea.input { height: auto; min-height: 5rem; padding-top: .6rem; }
@media (prefers-reduced-motion: no-preference) { .pmeter i, .pbar i { transition: width .6s cubic-bezier(.2,.8,.2,1); } }