/* Tokens, reset and page shell.
   Dark is the default theme; the light theme redefines the same tokens.
   The blue chrome (top bar and header band) looks identical in both themes. */

:root {
  color-scheme: dark;
  /* surfaces and ink */
  --ground: #0a1230;
  --panel: #131d42;
  --panel-hi: #1a2757;
  --brand: #1e3480;
  --ink: #ffffff;
  --ink2: rgba(255, 255, 255, 0.62);
  --ink3t: rgba(255, 255, 255, 0.5);
  --line: rgba(255, 255, 255, 0.1);
  --line2: rgba(255, 255, 255, 0.18);
  --hl: rgba(255, 255, 255, 0.42);
  --hl2: rgba(255, 255, 255, 0.05);
  --lift: #fff;
  /* accent: selected buttons, focus rings, section marks */
  --accent: #ffffff;
  --on-accent: #0a1230;
  --chrome-accent: #ffffff;
  --tip-bg: #060b1f;
  --scrim: rgba(4, 8, 22, 0.62);
  /* level ramp, re-stepped for the light ground below; grey only means absent data.
     The only source of these colours: scripts use var(--good) etc., and the PDF reads --paper-good etc. */
  --good: #3cc8a8;
  --watch: #efd05e;
  --concern: #f27a6a;
  --severe: #d2244a;
  --none: rgba(255, 255, 255, 0.2);
  /* charts */
  --trace: #8fa3e8;
  --st-light: #8fa3e8;
  --st-deep: #4a62d0;
  --st-rem: #d3daf6;
  --st-wake: #b77e94;
  --refband: rgba(185, 193, 217, 0.18);
  --box: rgba(255, 255, 255, 0.1);
  --info-bar: rgba(143, 163, 232, 0.55);
  /* squad cards */
  --tk: rgba(255, 255, 255, 0.1);
  --tk-mid: rgba(255, 255, 255, 0.22);
  --nd-dash: rgba(255, 255, 255, 0.26);
  --nd-dot: rgba(255, 255, 255, 0.3);
  --ava-bg: rgba(255, 255, 255, 0.1);
  /* report preview: a paper sheet, same in both themes */
  --paper: #ffffff;
  --paper-ink: #1e2438;
  --paper-ink2: #5b6276;
  --paper-line: #dadde7;
  --paper-good: #13866b;
  --paper-watch: #a67c00;
  --paper-concern: #d0442e;
  --paper-severe: #a8123a;
  /* type */
  --cond: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --sans: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
:root[data-theme="light"] {
  color-scheme: light;
  --ground: #f5f6fa;
  --panel: #ffffff;
  --panel-hi: #eceef6;
  --ink: #1e2438;
  --ink2: rgba(30, 36, 56, 0.72);
  --ink3t: rgba(30, 36, 56, 0.58);
  --line: rgba(30, 36, 56, 0.12);
  --line2: rgba(30, 36, 56, 0.22);
  --hl: rgba(30, 36, 56, 0.42);
  --hl2: rgba(30, 36, 56, 0.05);
  --lift: #1e2438;
  --accent: #1e3480;
  --on-accent: #ffffff;
  --tip-bg: #ffffff;
  --good: var(--paper-good);
  --watch: var(--paper-watch);
  --concern: var(--paper-concern);
  --severe: var(--paper-severe);
  --none: rgba(30, 36, 56, 0.28);
  --trace: #4a5fb5;
  --st-light: #7489d8;
  --st-deep: #25399a;
  --st-rem: #afbbec;
  --st-wake: #b77e94;
  --refband: rgba(58, 74, 122, 0.1);
  --box: rgba(30, 36, 56, 0.07);
  --info-bar: rgba(74, 95, 181, 0.55);
  --tk: rgba(30, 36, 56, 0.14);
  --tk-mid: rgba(30, 36, 56, 0.3);
  --nd-dash: rgba(30, 36, 56, 0.32);
  --nd-dot: rgba(30, 36, 56, 0.3);
  --ava-bg: rgba(30, 36, 56, 0.06);
}
/* the chrome keeps the dark tokens in the light theme */
:root[data-theme="light"] .chrome {
  color: #fff;
  --ink: #ffffff;
  --ink2: rgba(255, 255, 255, 0.62);
  --ink3t: rgba(255, 255, 255, 0.5);
  --line: rgba(255, 255, 255, 0.1);
  --line2: rgba(255, 255, 255, 0.18);
  --on-accent: #0a1230;
  --hl: rgba(255, 255, 255, 0.42);
  --hl2: rgba(255, 255, 255, 0.05);
  --accent: var(--chrome-accent);
}

/* reset and shell */
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
button {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#player *,
#team *,
#team *::before,
#team *::after {
  box-sizing: border-box;
}
#player[hidden],
#team[hidden] {
  display: none !important;
}
#player {
  height: 100%;
}
#team {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ground);
}
#player .wrap,
#team .wrap {
  max-width: 1800px;
  margin: 0 auto;
  padding-inline: 24px;
}