/* F:\cint-vector-geodesic\web\console.css
 * Authoritative Palettes: terminal-palette.md + 05-console-sidecars-and-audio.md
 * Zero rounded corners, zero decorative blur, GTK1 1px beveled frames.
 */

:root, html[data-theme="amber"] {
  --vg-screen: #000000;
  --vg-console: #07090c;
  --vg-panel-bg: rgba(7, 9, 12, 0.94);
  --vg-bezel: #16191d;
  --vg-bezel-hi: #24282d;
  --vg-gtk-light: #3a414a;
  --vg-gtk-dark: #07090c;
  --vg-labels: #ffac38;
  --vg-values: #f2f4f7;
  --vg-plots: #31c9f4;
  --vg-secondary: #9da7b2;
  --vg-caution: #ffe059;
  --vg-fault: #ff656f;
  --vg-positive: #85dba0;
}

html[data-theme="bluecurve"] {
  --vg-screen: #050811;
  --vg-console: #0b101b;
  --vg-panel-bg: rgba(11, 16, 27, 0.94);
  --vg-bezel: #1c2536;
  --vg-bezel-hi: #2e3b52;
  --vg-gtk-light: #4a5d80;
  --vg-gtk-dark: #060911;
  --vg-labels: #6ab0f3;
  --vg-values: #f0f4fa;
  --vg-plots: #4fd2ff;
  --vg-secondary: #94a3b8;
  --vg-caution: #ffd147;
  --vg-fault: #ff5c6c;
  --vg-positive: #68d391;
}

html[data-theme="phosphor"], html[data-theme="ps1"] {
  --vg-screen: #000502;
  --vg-console: #040a06;
  --vg-panel-bg: rgba(4, 10, 6, 0.94);
  --vg-bezel: #0a160e;
  --vg-bezel-hi: #162e1e;
  --vg-gtk-light: #265235;
  --vg-gtk-dark: #020603;
  --vg-labels: #2ee66b;
  --vg-values: #d8ffe4;
  --vg-plots: #00ff9d;
  --vg-secondary: #689c78;
  --vg-caution: #e6ff47;
  --vg-fault: #ff5252;
  --vg-positive: #38f276;
}

/* PS1 (the player): the Phosphor colors, and the plot drawn at half resolution and scaled up without smoothing. */
html[data-theme="ps1"] #tactical-canvas { image-rendering: pixelated; }

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  width: 100vw; height: 100vh;
  overflow: hidden;
  background: var(--vg-screen);
  color: var(--vg-values);
  font-family: "IBM Plex Mono", "Consolas", "Courier Prime", monospace;
  font-size: 11px; line-height: 1.25;
  user-select: none;
}

.vg-shell {
  position: relative;
  display: grid;
  grid-template-rows: 32px calc(100vh - 32px);
  grid-template-columns: 100vw;
  width: 100vw; height: 100vh;
}

/* 32px Top Command Bar — Locked Widths, Zero Layout Shift */
.vg-topbar {
  grid-row: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; height: 32px; padding: 0 6px;
  background: var(--vg-console);
  border-bottom: 1px solid var(--vg-bezel-hi);
  z-index: 20; white-space: nowrap; overflow: hidden;
}
.vg-topbar-group { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.vg-theater-tag { color: var(--vg-labels); font-weight: 700; letter-spacing: 0.02em; }
.vg-clock-readout {
  display: inline-block; width: 92px; text-align: center;
  color: var(--vg-values); padding: 2px 4px;
  background: var(--vg-bezel); border: 1px solid var(--vg-bezel-hi);
}

/* Hardware Key Buttons & Selects (Constant 400 font-weight + 1px border so active state never shifts width) */
.vg-btn, .vg-select {
  height: 22px;
  background: var(--vg-bezel); color: var(--vg-labels);
  border-top: 1px solid var(--vg-gtk-light); border-left: 1px solid var(--vg-gtk-light);
  border-right: 1px solid var(--vg-gtk-dark); border-bottom: 1px solid var(--vg-gtk-dark);
  font-family: inherit; font-size: 10.5px; font-weight: 600;
  padding: 0 5px; cursor: pointer; outline: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.vg-btn:hover, .vg-select:hover { color: var(--vg-values); background: var(--vg-bezel-hi); }
.vg-btn.is-active {
  background: rgba(49, 201, 244, 0.18); color: var(--vg-plots);
  border: 1px solid var(--vg-plots);
}
.vg-fixed-rwr   { width: 64px; }
.vg-fixed-scope { width: 78px; }
.vg-fixed-lcd   { width: 112px; }
.vg-fixed-badge { width: 116px; text-align: center; display: inline-block; }

.vg-btn-action { color: var(--vg-caution); height: 24px; }
.vg-btn-action:active { background: var(--vg-fault); color: #000; }

.vg-badge { padding: 1px 4px; font-weight: 700; font-size: 10px; border: 1px solid var(--vg-bezel-hi); background: var(--vg-bezel); flex-shrink: 0; }
.vg-badge-positive { color: var(--vg-positive); border-color: var(--vg-positive); }
.vg-badge-caution  { color: var(--vg-caution);  border-color: var(--vg-caution); }
.vg-badge-fault    { color: var(--vg-fault);    border-color: var(--vg-fault); }

.vg-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Main Stage, Canvas & HUD Overlay */
.vg-viewport-stage { grid-row: 2; position: relative; width: 100vw; height: calc(100vh - 32px); overflow: hidden; }
.vg-canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.vg-hud-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
/* The HUD centers on the plot the drawers leave in sight: the console sets
 * --vis-l and --vis-r to the open drawers' widths as they slide. */
.vg-viewport-stage { --vis-l: 260px; --vis-r: 320px; }
.vg-hud-overlay { --vis-cx: calc(var(--vis-l) + (100% - var(--vis-l) - var(--vis-r)) / 2); font-variant-numeric: tabular-nums; }

/* The match bar: each side's tickets and bar, a bleed mark, the stations' flags
 * with their capture rings, and the clock. TF reads in the plot color, OPFOR in
 * the fault color, a neutral station in the secondary. */
.vg-score {
  position: absolute; top: 6px; left: var(--vis-cx); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; padding: 4px 12px 5px;
  background: linear-gradient(rgba(5, 8, 12, 0.9), rgba(5, 8, 12, 0.78)); border-bottom: 1px solid var(--vg-bezel-hi);
}
.vg-score[hidden] { display: none; }
.vg-score-side { display: flex; align-items: center; gap: 6px; }
.vg-score-side.is-tf { color: var(--vg-plots); }
.vg-score-side.is-op { color: var(--vg-fault); }
.vg-score-name { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; color: var(--vg-secondary); }
.vg-score-n { font-size: 20px; font-weight: 700; min-width: 3ch; text-align: center; line-height: 1; }
.vg-score-bleed { font-size: 9px; min-width: 1ch; animation: vg-pulse 1s steps(2, jump-none) infinite; }
.vg-score-bar { position: relative; width: 104px; height: 5px; background: var(--vg-bezel-hi); }
.vg-score-bar i { position: absolute; top: 0; bottom: 0; width: 100%; background: currentColor; transition: width 0.4s; }
.is-tf .vg-score-bar i { right: 0; }
.is-op .vg-score-bar i { left: 0; }
.vg-score-mid { display: grid; justify-items: center; gap: 2px; }
.vg-score-flags { display: flex; gap: 8px; }
.vg-score-clock { font-size: 11px; font-weight: 700; color: var(--vg-values); letter-spacing: 0.06em; }
.vg-flag {
  --p: 0; --hc: var(--vg-secondary); --rc: var(--vg-secondary);
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-size: 11px; font-weight: 700; color: var(--vg-values);
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--hc) 30%, var(--vg-console)) 78%, transparent 80%),
    conic-gradient(var(--rc) calc(var(--p) * 1turn), var(--vg-bezel-hi) 0);
}
.vg-flag.is-tf { --hc: var(--vg-plots); }
.vg-flag.is-op { --hc: var(--vg-fault); }
.vg-flag.is-neutral { --hc: var(--vg-bezel-hi); }
.vg-flag.ring-tf { --rc: var(--vg-plots); }
.vg-flag.ring-op { --rc: var(--vg-fault); }
.vg-flag.is-contested { animation: vg-pulse 1s steps(2, jump-none) infinite; }
@keyframes vg-pulse { 50% { opacity: 0.35; } }

/* The event feed: short lines at the plot's upper right, newest last, each
 * fading out. Good and bad are for TF-01's side. */
.vg-feed {
  position: absolute; top: 58px; right: calc(var(--vis-r) + 10px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px; max-width: 46%;
}
.vg-feed > div {
  padding: 2px 8px; background: rgba(5, 8, 12, 0.84); border-right: 2px solid var(--vg-bezel-hi);
  color: var(--vg-values); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  animation: vg-feed-out 14s linear forwards;
}
.vg-feed > .is-good { border-right-color: var(--vg-plots); color: var(--vg-plots); }
.vg-feed > .is-bad { border-right-color: var(--vg-fault); color: var(--vg-fault); }
.vg-feed > .is-warn { border-right-color: var(--vg-caution); color: var(--vg-caution); }
@keyframes vg-feed-out { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* The flight strip: the hull's speed against Earth and its altitude, and the
 * target's range, closing speed, speed and hull. On the bridge it flanks the
 * globe on the dash. */
.vg-flight {
  position: absolute; bottom: 12px; left: var(--vis-cx); transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 10px;
}
.vg-flight-gap { width: 0; }
.vg-viewport-stage[data-cam="BRIDGE"] .vg-flight-gap { width: 284px; }
.vg-flight-own, .vg-flight-tgt {
  width: 176px; padding: 4px 9px 5px; display: grid; gap: 1px;
  background: rgba(5, 8, 12, 0.86); border-top: 1px solid var(--vg-bezel-hi);
}
.vg-flight-own { border-left: 2px solid var(--vg-plots); }
.vg-flight-tgt { border-left: 2px solid var(--vg-labels); }
.vg-flight-tgt.is-empty { border-left-color: var(--vg-bezel-hi); }
.vg-flight-tgt.is-empty .vg-flight-head { color: var(--vg-secondary); }
.vg-flight-head { display: flex; justify-content: space-between; gap: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--vg-labels); white-space: nowrap; }
.vg-flight-big { display: flex; align-items: baseline; gap: 4px; font-size: 19px; font-weight: 700; color: var(--vg-values); line-height: 1.1; white-space: nowrap; }
.vg-flight-big small { font-size: 10px; font-weight: 600; color: var(--vg-secondary); }
.vg-flight-sub { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 10px; color: var(--vg-secondary); white-space: nowrap; }
.vg-flight-vc { margin-left: auto; font-size: 10.5px; color: var(--vg-secondary); }
.vg-flight-vc.is-closing { color: var(--vg-caution); }
.vg-flight-hull { position: relative; flex: 1; max-width: 64px; height: 4px; background: var(--vg-bezel-hi); }
.vg-flight-hull i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--vg-labels); }
.vg-flight-rwr, .vg-flight-lock { font-size: 9px; letter-spacing: 0.06em; }
.vg-flight-rwr.is-bad { color: var(--vg-fault); }
.vg-flight-rwr.is-warn, .vg-flight-lock.is-warn { color: var(--vg-caution); }
.vg-flight-lock.is-good { color: var(--vg-positive); }
.vg-flight-rwr.is-blink { animation: vg-pulse 0.5s steps(2, jump-none) infinite; }

/* The banner: the result for a few seconds after the match, or a fault. */
.vg-banner {
  position: absolute; top: 30%; left: var(--vis-cx); transform: translateX(-50%);
  padding: 10px 48px 12px; text-align: center;
  background: linear-gradient(90deg, transparent, rgba(5, 8, 12, 0.88) 18%, rgba(5, 8, 12, 0.88) 82%, transparent);
}
.vg-banner-big { font-size: 34px; font-weight: 700; letter-spacing: 0.3em; color: var(--vg-values); }
.vg-banner-big.is-tf { color: var(--vg-plots); }
.vg-banner-big.is-op { color: var(--vg-fault); }
.vg-banner-sub { margin-top: 4px; font-size: 11px; letter-spacing: 0.12em; color: var(--vg-secondary); }

/* The drop badge keeps its slot while all is nominal, empty. */
.vg-fixed-badge.is-quiet { visibility: hidden; }
/* The tree's folder headers open and close their folders. */
.vg-tree-dir { cursor: pointer; user-select: none; }
.vg-tree-dir:hover { background: var(--vg-bezel); }
.vg-tree-dir:focus-visible { outline: 1px solid var(--vg-plots); outline-offset: -1px; }

/* Left & Right Collapsible Sidecars */
.vg-sidecar-left {
  position: absolute; top: 0; left: 0; width: 260px; height: 100%;
  background: var(--vg-panel-bg); border-right: 1px solid var(--vg-bezel-hi);
  display: flex; flex-direction: column;
  transform: translateX(0); transition: transform 80ms steps(4); z-index: 10;
}
.vg-sidecar-left.is-collapsed { transform: translateX(-260px); }

.vg-sidecar-right {
  position: absolute; top: 0; right: 0; width: 320px; height: 100%;
  background: var(--vg-panel-bg); border-left: 1px solid var(--vg-bezel-hi);
  display: flex; flex-direction: column; gap: 5px; padding: 5px;
  transform: translateX(0); transition: transform 80ms steps(4);
  z-index: 10; overflow-y: auto; overflow-x: hidden;
}
.vg-sidecar-right.is-collapsed { transform: translateX(320px); }

/* Left POSIX Tree */
.vg-sidecar-header, .vg-sidecar-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 8px; background: var(--vg-bezel);
  border-bottom: 1px solid var(--vg-bezel-hi); color: var(--vg-labels); font-weight: 700;
}
.vg-sidecar-footer { border-top: 1px solid var(--vg-bezel-hi); border-bottom: none; color: var(--vg-plots); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-tree-container { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 0; }
.vg-tree-dir { padding: 3px 8px 1px; color: var(--vg-labels); font-weight: 700; }
.vg-tree-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 6px 2px 12px; cursor: pointer; border-left: 2px solid transparent;
}
.vg-tree-row:hover { background: var(--vg-bezel); }
.vg-tree-row.is-selected { background: rgba(49, 201, 244, 0.14); border-left-color: var(--vg-plots); color: var(--vg-plots); }
.vg-tree-row.is-locked { color: var(--vg-fault); }
.vg-tree-bridge-tag { color: var(--vg-plots); border: 1px solid var(--vg-plots); padding: 0 3px; font-size: 9px; margin-left: 3px; }

/* Right Sidecar Cards & 5-Station Axial Schematic */
.vg-card { background: var(--vg-bezel); border: 1px solid var(--vg-bezel-hi); padding: 5px; min-width: 0; }
.vg-card-title {
  display: flex; justify-content: space-between; align-items: center; gap: 4px;
  color: var(--vg-labels); font-weight: 700;
  border-bottom: 1px solid var(--vg-bezel-hi); padding-bottom: 3px; margin-bottom: 4px;
}
.vg-kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; font-size: 10.5px; }
.vg-secondary { color: var(--vg-secondary); }
.vg-control-block { margin-top: 4px; }
.vg-control-label { color: var(--vg-secondary); font-size: 9.5px; margin-bottom: 2px; }
.vg-btn-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.vg-btn-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.vg-btn-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; }

.vg-station-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin: 3px 0 5px; }
.vg-station-box { background: var(--vg-console); border: 1px solid var(--vg-bezel-hi); padding: 3px 1px; text-align: center; cursor: pointer; }
.vg-station-box.is-repair-target { border-color: var(--vg-plots); background: rgba(49, 201, 244, 0.14); }
.vg-station-name { font-size: 8.5px; color: var(--vg-labels); font-weight: 700; }
.vg-station-hp { font-size: 10px; font-weight: 700; margin-top: 1px; }

.vg-bar-group { margin-top: 4px; }
.vg-bar-header { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 2px; }
.vg-bar-track { height: 6px; background: var(--vg-console); border: 1px solid var(--vg-bezel-hi); }
.vg-bar-fill { height: 100%; background: var(--vg-plots); }
.vg-bar-positive { background: var(--vg-positive); }
.vg-bar-caution  { background: var(--vg-caution); }
.vg-bar-fault    { background: var(--vg-fault); }

/* Fedora Core 1 / GTK1 Beveled Context Menu */
.vg-gtk1-menu {
  position: fixed; min-width: 225px; background: var(--vg-bezel);
  border-top: 1px solid var(--vg-gtk-light); border-left: 1px solid var(--vg-gtk-light);
  border-right: 1px solid var(--vg-gtk-dark); border-bottom: 1px solid var(--vg-gtk-dark);
  box-shadow: 2px 2px 0 #000000; z-index: 100; padding: 2px;
}
.vg-gtk1-header { padding: 3px 6px; background: var(--vg-console); color: var(--vg-labels); font-weight: 700; border-bottom: 1px solid var(--vg-bezel-hi); }
.vg-gtk1-sep { height: 1px; background: var(--vg-bezel-hi); margin: 2px 0; }
.vg-gtk1-item { display: flex; justify-content: space-between; padding: 3px 8px; color: var(--vg-values); cursor: pointer; }
.vg-gtk1-item:hover { background: var(--vg-plots); color: #000000; font-weight: 700; }