/* HUD CONSOLE — design tokens & chrome. Theme overrides via body[data-theme]. */
@font-face {
  font-family: "Plex";
  src: url("../assets/fonts/IBMPlexMono-Light.ttf") format("truetype");
  font-weight: 300;
}
:root {
  --bg: #030304;
  --bg2: #0b0b0d;
  --fg: #e9e9e9;
  --dim: color-mix(in srgb, var(--fg) 52%, transparent); /* ≥4.5:1 on bg/panel (was 45% ≈ 3.9) */
  --faint: color-mix(in srgb, var(--fg) 22%, transparent);
  --line: color-mix(in srgb, var(--fg) 13%, transparent); /* decorative dividers only */
  --line-strong: color-mix(in srgb, var(--fg) 40%, transparent); /* control boundaries, ≥3:1 (WCAG 1.4.11) */
  --accent: #ff9a3c;
  --accent-rgb: 255, 154, 60;
  --danger: #ff6056;
  --danger-rgb: 255, 96, 86;
  --accent-use: 1;
  --gap: 10px;
  /* line system: hairlines are part of the design language, so width is a token */
  --line-w: 1px;
  --bracket-w: 1px;
  /* type floor: nothing that carries information renders below --fs-xs (was 6.5–8px) */
  --fs-xs: 9px;
  --fs-sm: 9.5px;
  /* surface model & atmosphere — themes override these instead of using theme-name selectors */
  --body-bg: radial-gradient(120% 90% at 50% 40%, var(--bg2) 0%, var(--bg) 70%);
  --panel-bg: linear-gradient(180deg, color-mix(in srgb, var(--fg) 2.5%, transparent), color-mix(in srgb, var(--fg) 0.8%, transparent));
  --bracket-color: var(--fg);
  --radius: 0;
  --scanline-opacity: 1;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--body-bg);
  color: var(--fg);
  font: 300 10px/1.4 "Plex", ui-monospace, monospace;
  letter-spacing: 0.04em;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.6s;
}
/* faint scanlines */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--fg) 2.5%, transparent) 0 1px, transparent 1px 3px);
  opacity: var(--scanline-opacity);
  z-index: 20;
}
#grain { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: var(--grain-opacity, 0.055); mix-blend-mode: var(--grain-blend, screen); z-index: 21; }
#sparks { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 18; }

.frame {
  height: 100vh;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 340px;
  grid-template-rows: 44px minmax(0, 1fr) 18px;
  gap: var(--gap);
  padding: 12px 14px;
}

/* ---------- top bar ---------- */
.top {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) auto 340px;
  gap: var(--gap);
  align-items: center;
  border-bottom: var(--line-w) solid var(--line);
  position: relative;
}
.top::after {
  content: "";
  position: absolute; left: 0; bottom: -1px; width: 140px; height: 1px; background: var(--fg);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand svg { width: 28px; height: 28px; }
.brand b { display: block; font-size: 17px; letter-spacing: 0.32em; font-weight: 300; }
.brand small { display: block; font-size: var(--fs-xs); letter-spacing: 0.15em; color: var(--dim); }
.ticker { display: flex; justify-content: center; gap: 36px; color: var(--dim); font-size: 9px; white-space: nowrap; overflow: hidden; }
.clock { display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
.clock small { display: block; color: var(--dim); font-size: var(--fs-xs); letter-spacing: 0.11em; text-align: right; }
.clock b { display: block; font-size: 18px; font-weight: 300; letter-spacing: 0.12em; text-align: right; }
.legend { display: grid; grid-template-columns: repeat(2, auto); gap: 2px 12px; color: var(--dim); font-size: var(--fs-xs); }
.legend i, .bottom i { display: inline-block; width: 6px; height: 6px; background: var(--fg); margin-right: 5px; vertical-align: 0; }
.legend i.accent, .bottom i.accent { background: var(--accent); }

/* nav clusters (site / theme / scheme) share one grid cell */
.navs { display: flex; align-items: center; gap: 8px; min-width: 0; }
.navs .pages { margin-left: 0; }
/* theme switcher */
.pages { display: flex; gap: 4px; margin-left: 12px; flex: none; }
.pages button {
  font: inherit; font-size: var(--fs-xs); letter-spacing: 0.11em; color: var(--dim);
  background: transparent; border: var(--line-w) solid var(--line-strong); padding: 3px 6px; cursor: pointer;
}
.pages button:hover { color: var(--fg); border-color: var(--dim); }
.pages button.on { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.pages a {
  font: inherit; font-size: var(--fs-xs); letter-spacing: 0.11em; color: var(--dim); text-decoration: none;
  border: var(--line-w) solid var(--line-strong); padding: 3px 6px;
}
.pages a:hover { color: var(--fg); border-color: var(--dim); }

/* ---------- columns ---------- */
.col { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }
.center { display: grid; grid-template-rows: minmax(0, 1fr) 168px; gap: var(--gap); min-width: 0; min-height: 0; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); min-height: 0; }

.panel {
  position: relative;
  border: var(--line-w) solid var(--line);
  background: var(--panel-bg);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
/* corner brackets */
.panel::before, .panel::after {
  content: "";
  position: absolute;
  width: 9px; height: 9px;
  border: var(--bracket-w) solid var(--bracket-color);
  pointer-events: none;
  z-index: 3;
}
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.panel > header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 4px;
  letter-spacing: 0.18em;
  font-size: 9.5px;
  position: relative;
  z-index: 2;
}
.panel > header small { color: var(--dim); font-size: var(--fs-xs); letter-spacing: 0.04em; margin-left: auto; }
.tag { display: inline-grid; place-items: center; width: 13px; height: 13px; border: var(--line-w) solid var(--dim); font-size: var(--fs-xs); letter-spacing: 0; flex: none; }
.body { position: relative; flex: 1; min-height: 0; margin: 2px 10px 10px; }
.body > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* telemetry */
.telemetry { flex: 0 0 auto; }
.telemetry .body { display: grid; grid-template-columns: 84px 1fr; gap: 12px; height: 92px; flex: none; }
.telemetry .radar { position: relative; }
.telemetry .radar canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; align-content: center; }
.kpis small { display: block; font-size: var(--fs-xs); color: var(--dim); letter-spacing: 0.05em; }
.kpis b { display: block; font-size: 17px; font-weight: 300; letter-spacing: 0.06em; }

/* table */
table { width: 100%; border-collapse: collapse; font-size: 9px; }
th { text-align: left; font-weight: 300; color: var(--dim); font-size: var(--fs-xs); letter-spacing: 0.04em; padding: 0 0 4px; border-bottom: var(--line-w) solid var(--line); }
td { padding: 3.5px 0; border-bottom: var(--line-w) dashed color-mix(in srgb, var(--fg) 6%, transparent); white-space: nowrap; }
td.num, th.num { text-align: right; padding-left: 8px; font-variant-numeric: tabular-nums; }
.checkpoints .body { overflow: hidden; }
#checkpoints tr.on td { color: var(--fg); background: rgba(var(--accent-rgb), 0.08); }
#checkpoints tr.on td:first-child { color: var(--accent); }
/* closed gates: still information → --dim (≥4.5:1); state is carried by the strike-through, not by a sub-AA grey */
#checkpoints tr.closed td { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--faint); }
#checkpoints td.name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }

/* 3D viewport */
.viewport > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.viewport > canvas#terrain { cursor: grab; }
.viewport > canvas#terrain:active { cursor: grabbing; }
.viewport > canvas#terrain-hud { pointer-events: none; }
.viewport > header { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; padding-left: 46px; }
.viewport .mode { position: absolute; left: 46px; top: 66px; z-index: 3; display: flex; }
.viewport .mode button { font: inherit; font-size: var(--fs-xs); letter-spacing: 0.08em; color: var(--dim); background: transparent; border: var(--line-w) solid var(--line-strong); padding: 3px 8px; cursor: pointer; }
.viewport .mode button + button { border-left: none; }
.viewport .mode button.on { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 50%, transparent); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.viewport .hint { position: absolute; left: 46px; bottom: 12px; color: var(--dim); font-size: var(--fs-xs); letter-spacing: 0.08em; z-index: 2; pointer-events: none; }

/* globe */
.globe-panel { flex: 1.45; }
.globe-panel .body > canvas#globe-hud { pointer-events: none; }
.globe-panel .readout { position: absolute; left: 0; bottom: 0; color: var(--dim); font-size: var(--fs-xs); letter-spacing: 0.06em; z-index: 2; }
.globe-panel .readout.right { left: auto; right: 0; color: var(--accent); }

/* profile big number */
.profile-panel .big { position: absolute; right: 0; top: -2px; font-size: 18px; letter-spacing: 0.06em; text-align: right; z-index: 2; }
.profile-panel .big small { display: block; font-size: var(--fs-xs); color: var(--dim); letter-spacing: 0.07em; }

/* results */
.results { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: var(--fs-xs); }
.results ol { list-style: none; }
.results li { display: grid; grid-template-columns: 12px 1fr auto; gap: 6px; padding: 1.5px 0; color: color-mix(in srgb, var(--fg) 70%, transparent); white-space: nowrap; }
.results li span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.results li.done { color: var(--fg); }
.results li.done span:first-child { color: var(--accent); }
.results h4 { font-weight: 300; font-size: var(--fs-xs); letter-spacing: 0.07em; color: var(--dim); margin-bottom: 3px; }
.results small { color: var(--dim); }

/* log */
.log-panel { flex: 0.9; }
#log { list-style: none; position: absolute; inset: 0; overflow: hidden; font-size: var(--fs-sm); }
#log li { display: flex; gap: 10px; padding: 2px 0; color: color-mix(in srgb, var(--fg) 70%, transparent); white-space: nowrap; }
#log li:first-child { color: var(--fg); }
#log li.warn { color: var(--accent); }
#log time { color: var(--dim); }

/* footer */
.bottom { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; color: var(--dim); font-size: var(--fs-xs); border-top: var(--line-w) solid var(--line); padding-top: 4px; overflow: hidden; white-space: nowrap; }
.bottom b { font-weight: 300; }
.bottom em { margin-left: auto; font-style: normal; color: var(--dim); }
.bottom .copy { font-weight: 300; color: var(--fg); letter-spacing: 0.12em; flex: none; }

@media (max-width: 1100px) {
  body { overflow: auto; }
  .frame { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: 12px 16px; }
  .top { grid-template-columns: 1fr auto; padding-bottom: 8px; }
  .navs { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; }
  .frame > .top { height: auto; }
  .ticker, .legend { display: none; }
  .center { order: -1; grid-template-rows: 70vh 168px; }
  .col .panel { min-height: 200px; }
  .telemetry { min-height: 0 !important; }
  .bottom em { display: none; }
}
@media (max-width: 560px) {
  .center { grid-template-rows: 64vh 168px 168px; }
  .row { display: contents; }
}

/* ---------- light scheme: paper + ink, not inverted phosphor ----------
   Light is its own palette, not a negation of dark: ink on warm paper,
   accent shifted from glow-orange to print-ochre, grain flips to multiply. */
:root[data-scheme="light"] {
  --bg: #f2f1ed;
  --bg2: #e6e4de;
  --fg: #16161a;
  --dim: color-mix(in srgb, var(--fg) 62%, transparent); /* ≥4.5:1 on paper (was 45% ≈ 2.9) */
  --line-strong: color-mix(in srgb, var(--fg) 50%, transparent);
  --accent: #9a5200;
  --accent-rgb: 154, 82, 0;
  --danger: #b33128;
  --danger-rgb: 179, 49, 40;
  --grain-blend: multiply;
  --grain-opacity: 0.08;
}


/* ---------- motion preference (?motion=, defaults to prefers-reduced-motion) ---------- */
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after {
  transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important;
}