/* theme.css - loaded after hud.css. Three switchable looks on one OKLCH skeleton: <html data-theme="hud|glass|mono">.
   One hue seed (ED orange #ff7100 = oklch(71% .196 47)); everything else derives from it. */
:root {
  color-scheme: dark;
  --hue: 47;
  --hud: oklch(71% .196 var(--hue));
  --hud-hi: oklch(from var(--hud) calc(l + .05) calc(c - .035) calc(h + 8));
  --hud-dim: oklch(from var(--hud) calc(l - .15) calc(c - .045) h);
  --hud-deep: oklch(from var(--hud) .30 .07 h);
  --hud-bg: oklch(from var(--hud) .22 .05 h);
  --bg-0: oklch(13% .006 var(--hue)); --bg-1: oklch(17% .010 var(--hue)); --bg-2: oklch(23% .014 var(--hue)); --bg-3: oklch(28% .016 var(--hue));
  --bg: var(--bg-0); --panel: var(--bg-1); --tile: var(--bg-2); --tile-hi: var(--bg-3);
  --hdr: oklch(96% .004 80); --text: oklch(80% .11 60); --muted: oklch(60% .09 58);
  --friend: #33c5ff; --hostile: #ff3333; --good: #47eb94;
  --line-1: color-mix(in oklab, var(--hud) 14%, transparent);
  --line-2: color-mix(in oklab, var(--hud) 28%, transparent);
  --line-n: color-mix(in oklab, white 6%, transparent);
  --line: var(--line-2);
  --glow: 0 0 24px color-mix(in oklab, var(--hud) 30%, transparent);
  --chamfer: 12px; --radius: 0px;
  --fs: 13px; --fs-kpi: 21px;
  --t-fast: 160ms; --t-base: 240ms; --ease-out: cubic-bezier(.23, 1, .32, 1);
  --mono: "JetBrains Mono", "Cascadia Mono", "Consolas", ui-monospace, monospace;
}
html { font-variant-numeric: tabular-nums slashed-zero; }
body { background: var(--bg-0); }
/* numerals in mono, everywhere, all themes */
.tile .v, .mtile .num, td.num, header .kv b, .famh .counts, .seg + .muted { font-family: var(--mono); }
.tile .v { font-size: var(--fs-kpi); font-weight: 500; letter-spacing: -.01em; line-height: 1; margin-top: 5px; color: var(--hdr); }
.tile .v small { display: block; font-family: var(--body); font-weight: normal; letter-spacing: 0; font-size: 10px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.tile .v.txt small { display: block; }
.tile .v.wrap { font-family: var(--body); font-size: 12px; font-weight: normal; line-height: 1.3; }
.tile .l { letter-spacing: .1em; font-size: 10px; }
.mtile .num { font-weight: 500; color: var(--hud); }
header .kv, .chip, .panel h2 a, nav.crumbs, .famh .n { letter-spacing: .12em; }
.panel h2 { letter-spacing: .2em; }
button { letter-spacing: .12em; }
td { padding: 5px 6px; } th { padding: 4px 6px; }
.item .st { font-family: var(--mono); font-size: 11px; }
/* ---------- gauges + pips (shared primitives) */
.gauge { display: inline-grid; place-items: center; width: 34px; height: 34px; position: absolute; right: 7px; top: 7px; }
.gauge svg { width: 34px; height: 34px; transform: rotate(135deg); }
.gauge circle { fill: none; stroke-width: 4; stroke-linecap: butt; }
.gauge .track { stroke: var(--line-n); stroke-dasharray: 75 100; }
.gauge .val { stroke: var(--hud); stroke-dasharray: calc(75 * var(--v, 0)) 100; transition: stroke-dasharray var(--t-base) var(--ease-out); }
.gauge .val.low { stroke: var(--hostile); }
.gauge .mark { stroke: var(--hostile); stroke-dasharray: 1 100; stroke-dashoffset: calc(-75 * var(--m, .25)); opacity: .9; }
.tile.g { padding-right: 44px; }
.tiles { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); }
.tile .v.txt { font-family: var(--body); font-size: 15px; font-weight: normal; letter-spacing: 0; color: var(--hdr); margin-top: 4px; }
.pips { display: flex; gap: 10px; margin-top: 4px; }
.pips .col { display: flex; flex-direction: column-reverse; gap: 2px; align-items: center; }
.pips .col i { width: 14px; height: 5px; background: var(--line-n); display: block; }
.pips .col i.on { background: var(--hud); } .pips .col i.half { background: linear-gradient(90deg, var(--hud) 50%, var(--line-n) 50%); }
.pips .col b { font: 9px/1 var(--display); letter-spacing: .1em; color: var(--muted); margin-top: 3px; font-weight: normal; }
/* ---------- motion (shared) */
@media (prefers-reduced-motion: no-preference) {
  #view.enter > * { animation: scanin var(--t-base) var(--ease-out) both; }
  #view.enter .grid.main > * { animation: scanin var(--t-base) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
  .mtile, .tile, button, .chip { transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
}
@media (hover: hover) and (pointer: fine) { .tile:hover { background-color: var(--bg-3); } }
html.vr { --t-fast: 0ms; --t-base: 0ms; }

/* ================= A. Faithful HUD ================= */
[data-theme="hud"] body { background: var(--bg-0); }
[data-theme="hud"] body::before { background: repeating-linear-gradient(0deg, rgb(255 255 255 / .02) 0 1px, transparent 1px 3px); opacity: .5; }
[data-theme="hud"] .panel { background: var(--bg-1); backdrop-filter: none; border: 1px solid var(--line-2); box-shadow: none; }
@supports (corner-shape: bevel) {
  [data-theme="hud"] .panel { clip-path: none; border-radius: 0 var(--chamfer) 0 var(--chamfer); corner-shape: square bevel square bevel; }
}
[data-theme="hud"] .panel h2::after { height: 1px; background: var(--hud); }
[data-theme="hud"] .tile, [data-theme="hud"] .mtile { background: var(--bg-2); background-image: none; border-color: var(--line-1); }
[data-theme="hud"] .tile .v { color: var(--hud); }
[data-theme="hud"] td { border-bottom-color: var(--line-n); } [data-theme="hud"] tr:hover td { background: var(--hud-deep); }
[data-theme="hud"] .mtile.sel { box-shadow: var(--glow); }
[data-theme="hud"] .famh::after { height: 1px; background: var(--hud); }
[data-theme="hud"] .chip { border-color: var(--hud-dim); } [data-theme="hud"] .chip.on { background: var(--hud-bg); border-color: var(--hud); }

/* ================= B. Tonal glass ================= */
:root[data-theme="glass"] { --radius: 4px; --fs-kpi: 23px; --hdr: oklch(95% .006 70); --text: oklch(78% .05 60); --muted: oklch(60% .03 58);
  --bg-0: oklch(12% .008 52); --bg-1: oklch(16% .010 52); --bg-2: oklch(20% .012 52); --bg-3: oklch(24% .014 52); }
[data-theme="glass"] body { background: var(--bg-0); } [data-theme="glass"] body::before { display: none; }
[data-theme="glass"] .panel { background: var(--bg-1); clip-path: none; border: 0; border-radius: var(--radius); backdrop-filter: none;
  box-shadow: inset 0 1px 0 color-mix(in oklab, white 7%, transparent), inset 0 -1px 0 color-mix(in oklab, black 35%, transparent); }
[data-theme="glass"] .panel.hero { border-radius: 0 12px 0 12px; }
@supports (corner-shape: bevel) { [data-theme="glass"] .panel.hero { corner-shape: square bevel square bevel; } }
[data-theme="glass"] .panel h2::after { height: 1px; background: var(--hud); left: 12px; right: 40%; }
[data-theme="glass"] .tile { background: var(--bg-2); background-image: none; border: 1px solid var(--line-n); border-radius: 2px; }
[data-theme="glass"] .tile .v { font-weight: 600; color: var(--hdr); }
[data-theme="glass"] .tile.hero .v { color: var(--hud); text-shadow: 0 0 18px color-mix(in oklab, var(--hud) 35%, transparent); }
[data-theme="glass"] header { position: sticky; top: 0; z-index: 10; background: color-mix(in oklab, var(--bg-0) 82%, transparent); backdrop-filter: blur(10px) saturate(140%); padding-top: 6px; }
[data-theme="glass"] td { border-bottom-color: var(--line-n); } [data-theme="glass"] tr:hover td { background: color-mix(in oklab, var(--hud) 10%, transparent); }
[data-theme="glass"] .mtile { background: var(--bg-2); background-image: none; border: 1px solid var(--line-n); border-radius: 2px; }
[data-theme="glass"] .chip { background: var(--bg-3); border-color: transparent; color: var(--text); border-radius: 2px; }
[data-theme="glass"] .chip.on { background: color-mix(in oklab, var(--hud) 14%, transparent); color: var(--hud); }
[data-theme="glass"] .chip.good { color: var(--friend); background: color-mix(in oklab, var(--friend) 12%, transparent); }
[data-theme="glass"] .next { background: color-mix(in oklab, var(--hud) 14%, transparent); color: var(--hud); border-left: 2px solid var(--hud); }
[data-theme="glass"] .famh::after { background: var(--line-n); }
[data-theme="glass"] .seg i { border-color: var(--line-n); }
@media (min-width: 1301px) {
  [data-theme="glass"] .grid.main { grid-template-areas: "ship ship ship ship carrier carrier carrier carrier cmdr cmdr cmdr cmdr" "fleet fleet fleet fleet fleet fleet fleet mats mats mats mats mats"; }
  [data-theme="glass"] .p-ship { grid-area: ship; } [data-theme="glass"] .p-carrier { grid-area: carrier; } [data-theme="glass"] .p-cmdr { grid-area: cmdr; }
  [data-theme="glass"] .p-fleet { grid-area: fleet; } [data-theme="glass"] .p-mats { grid-area: mats; }
}
@media (prefers-reduced-transparency: reduce) { [data-theme="glass"] header { backdrop-filter: none; background: var(--bg-0); } }

/* ================= C. Mono-terminal ================= */
:root[data-theme="mono"] { --amber: oklch(78% .16 70); --amber-hi: oklch(85% .13 82); --amber-dim: oklch(58% .11 70); --amber-deep: oklch(32% .06 70);
  --text: oklch(84% .10 75); --muted: oklch(62% .06 72); --bg-0: oklch(10% 0 0); --bg-1: oklch(14% .004 50); --bg-2: oklch(18% .006 50); --bg-3: oklch(22% .008 50); --fs-kpi: 20px; --fs: 12.5px; }
[data-theme="mono"] body { background: var(--bg-0); font-family: var(--mono); }
[data-theme="mono"] body::before { background: repeating-linear-gradient(0deg, rgb(255 255 255 / .03) 0 1px, transparent 1px 3px); opacity: .7; }
[data-theme="mono"] td, [data-theme="mono"] th, [data-theme="mono"] .tile .l, [data-theme="mono"] .chip, [data-theme="mono"] .famh .counts, [data-theme="mono"] .mtile .nm, [data-theme="mono"] .mtile .cap, [data-theme="mono"] .item, [data-theme="mono"] p.note, [data-theme="mono"] header .kv { font-family: var(--mono); }
[data-theme="mono"] .panel { background: var(--bg-1); clip-path: none; border: 1px solid var(--line-n); backdrop-filter: none; box-shadow: none; }
[data-theme="mono"] .panel h2::after { height: 1px; background: var(--amber); }
[data-theme="mono"] .tile { background: var(--bg-2); background-image: none; border: 1px solid var(--amber-deep); }
[data-theme="mono"] .tile .v { color: var(--amber); font-weight: 500; }
[data-theme="mono"] .tile .l, [data-theme="mono"] .tile .v small { color: var(--muted); letter-spacing: .08em; }
[data-theme="mono"] .mtile { background: var(--bg-2); background-image: none; border: 1px solid var(--amber-deep); }
[data-theme="mono"] .mtile .num { color: var(--amber); } [data-theme="mono"] .mtile .hex .outline, [data-theme="mono"] .mtile .hex .blade { stroke: var(--amber); fill: var(--amber); } [data-theme="mono"] .mtile .hex .fill { fill: var(--amber); }
[data-theme="mono"] .mtile.sel { background: var(--amber); }
[data-theme="mono"] td { border-bottom-color: var(--line-n); } [data-theme="mono"] tr:hover td { background: var(--amber-deep); }
[data-theme="mono"] .chip { border: 0; padding: 2px 0; color: var(--amber-dim); } [data-theme="mono"] .chip::before { content: "["; } [data-theme="mono"] .chip::after { content: "]"; }
[data-theme="mono"] .chip.on, [data-theme="mono"] .chip.good { background: none; color: var(--amber); } [data-theme="mono"] .chip.alert { background: var(--hostile); color: #000; padding: 2px 4px; }
[data-theme="mono"] .seg i { border-color: var(--amber-deep); } [data-theme="mono"] .seg i.done { background: var(--amber); border-color: var(--amber); }
[data-theme="mono"] .next { background: none; color: var(--hud); padding: 0; } [data-theme="mono"] .next b { color: var(--hud); } [data-theme="mono"] .next::before { content: "▶ "; }
[data-theme="mono"] .famh::after { background: var(--amber-deep); }
[data-theme="mono"] .live.on { animation: breathe 2.4s ease-in-out infinite; } @keyframes breathe { 50% { opacity: .5; } }
[data-theme="mono"] .gauge .val { stroke: var(--amber); }
[data-theme="mono"] .pips .col i.on { background: var(--amber); }
/* target card + session line */
.target { margin-top: 8px; padding: 6px 8px; border: 1px solid var(--line-1); background: var(--bg-2); font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.target b { font-family: var(--display); font-size: 9px; letter-spacing: .2em; color: var(--hdr); font-weight: normal; }
.tbar { display: inline-block; width: 70px; height: 6px; background: var(--line-n); vertical-align: middle; position: relative; }
.tbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--friend); } .tbar.hull i { background: var(--hud); }
p.note.session { margin-top: 8px; font-family: var(--mono); } p.note.session b { font-family: var(--display); font-size: 9px; letter-spacing: .2em; color: var(--hdr); font-weight: normal; margin-right: 4px; }