* { box-sizing:border-box; margin:0; padding:0; }
:root {
  --ui-scale: 1.15;                              /* HUD scaled up 15% — rail, chart gutter, and their content */
  --rail-width: calc(240px * var(--ui-scale));   /* 276px */
  --perf-height: calc(182px * var(--ui-scale));  /* 209px */
  --space: #020208;
  --cyan: #7ddde8;
  --blue: #89b4fa;
  --green: #a6e3a1;
  --amber: #f9e2af;
  --rose: #f38ba8;
  --text: #dce6f7;
  --muted: #4e5a70;
  --panel-bg: rgba(4,8,16,.40);
  --panel-border: rgba(125,221,232,.11);
}
html { height:100%; overflow:hidden; }
body {
  background:var(--space); color:var(--text);
  font-family:'JetBrains Mono','Fira Code',ui-monospace,monospace;
  font-size:calc(14px * var(--ui-scale)); height:100vh; overflow:hidden;   /* HUD text scales with --ui-scale (em-based) */
}
/* The orrery (Three.js renderer + label overlay) mounts here, full-window. Everything else overlays it. */
#scene {
  position:fixed; inset:0; overflow:hidden; background:var(--space);
  touch-action:none;
}

/* ── Mission rail ── */
#mission-rail {
  position:absolute; left:0; top:0; bottom:0; width:var(--rail-width); z-index:18;
  display:flex; flex-direction:column;
  background:var(--panel-bg);
  border-right:1px solid var(--panel-border);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:6px 0 32px rgba(0,0,0,.45), inset -1px 0 0 rgba(255,255,255,.025);
  overflow-y:auto; overflow-x:hidden;
}
#mission-rail::-webkit-scrollbar { width:2px; }
#mission-rail::-webkit-scrollbar-thumb { background:rgba(125,221,232,.15); border-radius:1px; }

#mission-brand {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:18px 16px 15px; flex-shrink:0;
  border-bottom:1px solid var(--panel-border);
}
.brand-top { display:flex; align-items:center; gap:8px; }
#conn-led {
  width:8px; height:8px; border-radius:50%; background:#585b70;
  flex-shrink:0; cursor:pointer; transition:background .3s;
}
#conn-led.ok  { background:var(--green); animation:led-pulse 2.6s ease-in-out infinite; }
#conn-led.err { background:var(--rose);  animation:led-alarm .9s ease-in-out infinite; }
#conn-led.demo-active {
  width:1.4em; height:1.4em; background:none; box-shadow:none; cursor:default;
  border-radius:0; display:inline-flex; align-items:center; justify-content:center;
  font-size:.9em; animation:none;
}
@keyframes led-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(166,227,161,.4), 0 0 6px rgba(166,227,161,.7); }
  50% { box-shadow:0 0 0 4px rgba(166,227,161,0), 0 0 10px rgba(166,227,161,.9); }
}
@keyframes led-alarm {
  0%,100% { box-shadow:0 0 0 0 rgba(243,139,168,.5), 0 0 6px rgba(243,139,168,.8); }
  50% { box-shadow:0 0 0 3px rgba(243,139,168,0), 0 0 10px rgba(243,139,168,1); }
}
#uptime {
  font-size:1.32em; font-weight:800; letter-spacing:.08em; color:#b4befe;
  text-shadow:0 0 14px rgba(180,190,254,.45); font-variant-numeric:tabular-nums;
}
#build-hash {
  font-size:.62em; color:var(--muted); letter-spacing:.16em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}

.rail-section {
  padding:11px 16px 12px; flex-shrink:0;
  border-bottom:1px solid rgba(125,221,232,.07);
  display:flex; flex-direction:column; gap:9px;
}
.rail-label {
  font-size:.64em; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cyan);
  display:flex; align-items:center; justify-content:space-between;
}

/* Health pills */
.pill-row { display:flex; gap:6px; }
.svc-pill {
  display:flex; align-items:center; justify-content:center; gap:7px;
  flex:1; padding:5px 9px; border-radius:5px;
  background:rgba(12,18,30,.55); border:1px solid rgba(125,221,232,.09);
  color:#5a6680; font-size:.74em; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  transition:color .25s, border-color .25s, background .25s;
}
.svc-pill::before {
  content:''; width:5px; height:5px; border-radius:50%; flex-shrink:0;
  background:currentColor; box-shadow:0 0 4px currentColor;
}
.svc-pill.ok   { color:var(--green); border-color:rgba(166,227,161,.17); background:rgba(166,227,161,.04); }
.svc-pill.warn { color:var(--amber); border-color:rgba(249,226,175,.17); background:rgba(249,226,175,.04); }
.svc-pill.err  { color:var(--rose);  border-color:rgba(243,139,168,.20); background:rgba(243,139,168,.05); }

/* Align-planets control */
.rail-btn {
  width:100%; padding:7px 9px; border-radius:5px; font-family:inherit; cursor:pointer;
  background:rgba(12,18,30,.55); border:1px solid rgba(125,221,232,.12);
  color:#8893a8; font-size:.72em; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  transition:color .25s, border-color .25s, background .25s;
}
.rail-btn:hover { color:var(--cyan); border-color:rgba(125,221,232,.35); }
.rail-btn:focus-visible { outline:1px solid rgba(125,221,232,.5); outline-offset:2px; }
.rail-btn.on { color:var(--cyan); border-color:rgba(125,221,232,.45); background:rgba(125,221,232,.07); cursor:default; }

/* Fleet cards */
.fleet-cards { display:flex; gap:7px; }
.fleet-card {
  flex:1; padding:7px 8px 6px; text-align:center;
  background:rgba(10,15,25,.6); border:1px solid rgba(125,221,232,.09); border-radius:6px;
  display:flex; flex-direction:column; gap:3px;
}
.fc-val { font-size:1.7em; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; color:var(--muted); }
.fc-val.active.on { color:var(--green); }
.fc-val.queued.on { color:var(--amber); }
.fc-label { font-size:.6em; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; }

/* Host HUD + Cache rows — shared grid instrument (label / meter bar / value).
   The client emits .hud-stat and .ch-stat spans; net/rate rows omit the bar and the value still
   pins to column 3 so every value column lines up vertically. */
#hud-stats, #cache-hud {
  display:flex; flex-direction:column; gap:7px;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.hud-stat, #cache-hud .ch-stat {
  display:grid; align-items:center; gap:7px;
  grid-template-columns:34px minmax(40px,1fr) minmax(44px,max-content);
  min-height:15px; font-size:.72em; color:var(--muted);
}
.hud-val, #cache-hud .ch-val {
  grid-column:3; text-align:right; margin-left:auto;
  font-weight:700; color:var(--text);
}
.hud-net, #cache-hud .ch-net { min-width:44px; }
#cache-hud .ch-save { color:var(--green); }
.hbar {
  position:relative; grid-column:2; width:100%; height:3px; border-radius:2px;
  background:rgba(125,221,232,.07); overflow:hidden;
}
.hbar-fill {
  position:absolute; inset:0 auto 0 0; border-radius:2px;
  background-image:linear-gradient(90deg,var(--green) 0%,var(--amber) 58%,var(--rose) 100%);
  background-repeat:no-repeat; background-position:left center;
  background-size:calc(10000% / var(--pct,100)) 100%;
  transition:width .6s cubic-bezier(.4,0,.2,1);
}
.hbar-fill.hbar-inv {
  background-image:linear-gradient(90deg,var(--rose) 0%,var(--amber) 40%,var(--green) 100%);
}
/* HIT/REUSE at ≥100% — the whole bar goes solid 100%-green (maxed), not the gradient. */
.hbar-fill.hbar-max { background-image:none; background-color:var(--green); }
.nc-dl { color:var(--blue); }
.nc-ul { color:#fab387; }
.nc-rx { color:#cba6f7; }
.nc-tx { color:var(--green); }

/* Cache — collapsible section */
#cache-toggle { cursor:pointer; user-select:none; }
.toggle-arrow { font-size:.85em; color:var(--muted); transition:transform .2s; display:inline-block; }
#cache-toggle.open .toggle-arrow { transform:rotate(90deg); }
#cache-toggle:focus-visible { outline:1px solid rgba(125,221,232,.5); outline-offset:2px; }
#cache-hud { overflow:hidden; transition:max-height .25s ease; }
#cache-hud .ch-div { grid-column:1 / -1; height:1px; background:rgba(125,221,232,.07); margin:1px 0; }

/* SIZE / SERVED rows — collapsible per-service breakdown. The +/− sign is the expand/collapse
   affordance: green "+" when collapsed, cyan "−" when expanded (neutral accents — not the
   green→amber→rose health palette). */
#cache-hud .ch-coll { display:flex; flex-direction:column; }
.ch-coll-tog { cursor:pointer; user-select:none; }
.ch-coll-sign { grid-column:2; justify-self:start; font-weight:700; line-height:1; color:var(--green); }
.ch-coll-tog.open .ch-coll-sign { color:var(--cyan); }
.ch-coll-tog:focus-visible { outline:1px solid rgba(125,221,232,.5); outline-offset:2px; }
.ch-coll-break {
  overflow:hidden; max-height:0; margin-top:0; transition:max-height .25s ease, margin-top .25s ease;
  display:flex; flex-direction:column; gap:6px; padding-left:10px;
}
.ch-coll-break.open { max-height:260px; margin-top:6px; }
#cache-hud .ch-sub {
  display:flex; align-items:center; justify-content:space-between;
  font-size:.68em; color:var(--muted); letter-spacing:.02em; min-height:13px;
}
#cache-hud .ch-sub .ch-sub-name { color:var(--muted); }
#cache-hud .ch-sub .ch-val { font-weight:700; color:var(--text); }
/* Rail hover popout — body-level (escapes the rail's overflow clipping), anchored to the right of the
   hovered row by JS. Rail-wide: replaces native title= everywhere in the rail. pointer-events:none so
   it never eats the hover; z-index clears the scene (18). */
#rail-tip {
  position:fixed; z-index:60; pointer-events:none; left:0; top:0; max-width:248px;
  padding:7px 10px; background:rgba(8,10,18,.96); border:1px solid rgba(125,221,232,.35);
  border-radius:6px; color:var(--text); font-size:calc(11px * var(--ui-scale)); line-height:1.45;
  white-space:pre-line; box-shadow:0 4px 18px rgba(0,0,0,.5);
  opacity:0; transition:opacity .12s ease; display:none;
}
#rail-tip.show { display:block; opacity:1; }

/* Running jobs */
#active-jobs { display:flex; flex-direction:column; gap:5px; pointer-events:auto; }
.run-job { display:flex; align-items:center; gap:7px; font-size:.74em; overflow:hidden; }
.run-dot {
  width:4px; height:4px; border-radius:50%; flex-shrink:0;
  background:var(--green); box-shadow:0 0 5px var(--green);
  animation:aj-pulse 2s ease-in-out infinite;
}
.run-repo {
  color:var(--muted); white-space:nowrap; flex-shrink:0; letter-spacing:.02em;
}
.run-link {
  color:var(--blue); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.run-link:hover { color:var(--cyan); }
.run-empty { font-size:.72em; color:var(--muted); letter-spacing:.04em; }
@keyframes aj-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ── Log overlay ── */
#log-overlay {
  position:absolute; left:var(--rail-width); right:0; bottom:var(--perf-height);
  height:20%; z-index:10; pointer-events:none;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:16px 20px 10px;
}
#log-lines {
  overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; max-height:100%;
  pointer-events:auto;
}
#log-lines::-webkit-scrollbar { width:2px; }
#log-lines::-webkit-scrollbar-thumb { background:rgba(125,221,232,.12); border-radius:1px; }
.log-line {
  font-size:.88em; line-height:1.72; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; transition:opacity .3s;
}

/* ── Performance strip (always-visible, full-width network/cache graph) ── */
#performance-strip {
  position:absolute; left:var(--rail-width); right:0; bottom:0; height:var(--perf-height); z-index:12;
  pointer-events:auto;
  background:rgba(3,5,12,.4);
  border-top:1px solid rgba(125,221,232,.11);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:9px 16px 8px;
}
.perf-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;
}
.perf-title {
  font-size:.62em; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.perf-legend { display:flex; gap:14px; font-size:.82em; font-weight:700; }
#nc-canvas { display:block; width:100%; height:calc(var(--perf-height) - 38px); cursor:crosshair; }

/* ── Mobile drawer ── */
#menu-btn {
  display:none; position:absolute; top:14px; left:14px; z-index:50;
  width:34px; height:34px; border-radius:7px;
  background:rgba(4,8,15,.88); border:1px solid rgba(125,221,232,.18);
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
#menu-btn span { display:block; width:15px; height:2px; background:var(--cyan); border-radius:1px; }
#rail-overlay {
  display:none; position:fixed; inset:0; z-index:40;
  background:rgba(0,0,0,.5); opacity:0; transition:opacity .25s;
}
#mobile-focus-menu {
  display:none; position:fixed; top:14px; left:50%; transform:translateX(-50%);
  z-index:1000001; max-width:calc(100vw - 96px); padding:4px;
  border:1px solid rgba(125,221,232,.18); border-radius:7px;
  background:rgba(4,8,15,.72); backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 10px 28px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.025);
  gap:3px; overflow-x:auto; scrollbar-width:none;
}
#mobile-focus-menu::-webkit-scrollbar { display:none; }
#mobile-focus-menu button {
  min-width:27px; height:27px; border:0; border-radius:5px; padding:0 7px;
  font:700 11px/1 'JetBrains Mono','Fira Code',ui-monospace,monospace;
  letter-spacing:.03em; color:rgba(220,230,247,.82);
  background:rgba(12,18,30,.48); cursor:pointer;
}
#mobile-focus-menu button:focus-visible {
  outline:1px solid rgba(125,221,232,.65); outline-offset:2px;
}
#mobile-focus-menu button.active {
  color:var(--space); background:var(--cyan); box-shadow:0 0 14px rgba(125,221,232,.35);
}

@media (max-width:800px) {
  :root { --perf-height:calc(155px * var(--ui-scale)); }   /* keep the 15% HUD scale on mobile */
  #menu-btn { display:flex; }
  #mobile-focus-menu { display:flex; }
  #mission-rail {
    width:260px; left:-280px; z-index:45;
    transition:left .25s cubic-bezier(.4,0,.2,1);
  }
  #mission-rail.open { left:0; }
  #rail-overlay { display:block; pointer-events:none; }
  #rail-overlay.open { opacity:1; pointer-events:auto; }
  #log-overlay, #performance-strip { left:0; }
}