/* System panels (js/ui/panels.js), shown inside the terminal's .term-body. Everything is scoped under .sys and
   coloured from the terminal's --acc / --scr so a system screen and a mod page look like one product.
   Gauges move through CSS variables set by tick (--f fill, --t temperature, --act needle, --v voltage) and
   transforms, so updates repaint without relayout. */
.sys {
  --ok: #4aee68;      /* vanilla reactor optimal-range green */
  --amb: #ffb54d;
  --bad: #ff5b4f;
  --water: #3aa0e0;
  --led-off: #263034;
  --line: color-mix(in srgb, var(--acc) 28%, transparent);
  --well: rgba(0, 0, 0, 0.42);
  display: grid; gap: 14px; min-width: 0;
}
.sys p { margin: 0; }
.sys-head { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; justify-content: space-between; }
.sys-head > div:first-child { min-width: 0; }
.sys-head .chips { margin: 6px 0 0; }
.sys-title { margin: 0; font: 700 clamp(26px, 3.6vw, 38px)/1 var(--head); letter-spacing: 0.04em; text-transform: uppercase; color: #f1fffb; }
.sys .chip[data-s="warn"] { border-color: var(--amb); color: #ffd08a; }
.sys .chip[data-s="bad"] { border-color: var(--bad); color: #ffb4a3; background: rgba(255, 91, 79, 0.12); }
.sys-switches { display: flex; flex-wrap: wrap; gap: 8px; }

.sys-ro {
  padding: 8px 12px; font-size: 13px; letter-spacing: 0.06em; color: #ffd08a;
  border: 1px dashed rgba(255, 181, 77, 0.6); background: rgba(255, 181, 77, 0.07);
}
.sys-ro::before { content: '🔒 '; }
.sys-ro a { color: #ffe2b0; text-decoration-color: rgba(255, 181, 77, 0.7); text-underline-offset: 3px; }
.sys-ro a:hover, .sys-ro a:focus-visible { color: #fff; }

.sys-sec { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--acc) 4%, rgba(0, 0, 0, 0.2)); }
.sys-sec h5 { margin: 0 0 10px; font: 700 12px var(--head); letter-spacing: 0.2em; text-transform: uppercase; color: var(--acc); }
.sys-sec > * + * { margin-top: 12px; }
.sys-sec > h5 + * { margin-top: 0; }
.sys-grid { display: grid; gap: 14px; min-width: 0; }
.sys-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.sys-center { display: grid; justify-items: center; align-content: start; }
.sys-hint { font-size: 12px; line-height: 1.45; opacity: 0.62; }
.sys-alarm {
  padding: 9px 14px; font: 700 15px var(--head); letter-spacing: 0.12em; text-transform: uppercase; text-align: center;
  color: #fff; background: rgba(255, 91, 79, 0.22); border: 1px solid var(--bad); text-shadow: 0 0 10px var(--bad);
  animation: sys-blink 0.5s steps(1) infinite;
}
.sys-alarm[hidden] { display: none; }

/* indicator lights */
.sys-lamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; }
.sys-lamp {
  --c: var(--bad);
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 11px; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.07); background: var(--well); color: color-mix(in srgb, var(--scr) 45%, transparent); text-shadow: none;
}
.sys-lamp i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--led-off); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); }
.sys-lamp[data-c="amber"] { --c: var(--amb); }
.sys-lamp[data-c="green"] { --c: var(--ok); }
.sys-lamp[data-c="yellow"] { --c: #ffe066; }
.sys-lamp[data-s="on"], .sys-lamp[data-s="blink"] { color: #fff; border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 12%, rgba(0, 0, 0, 0.4)); }
.sys-lamp[data-s="on"] i, .sys-lamp[data-s="blink"] i { background: var(--c); box-shadow: 0 0 9px var(--c), inset 0 -1px 2px rgba(0, 0, 0, 0.35); }
/* vanilla warning lights flash at 2 Hz: lit for the first half of every half second */
.sys-lamp[data-s="blink"] i { animation: sys-blink 0.5s steps(1) infinite; }
@keyframes sys-blink { 50% { opacity: 0.18; } }

/* switches */
.sys-sw {
  --c: var(--ok);
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 14px 8px 11px; cursor: pointer;
  font: 600 12px var(--head); letter-spacing: 0.14em; text-transform: uppercase; color: #d9e5e2;
  border: 1px solid #0b0f10; border-radius: 3px; background: linear-gradient(#45525a, #262f33);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 0 #0a0d0e; text-shadow: none;
}
.sys-sw[data-c="yellow"] { --c: #ffe066; }
.sys-sw i { width: 11px; height: 11px; border-radius: 50%; background: var(--led-off); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8); }
.sys-sw[aria-pressed="true"] { color: #fff; }
.sys-sw[aria-pressed="true"] i { background: var(--c); box-shadow: 0 0 10px var(--c); }
.sys-sw:hover:not(:disabled) { background: linear-gradient(#55636b, #2e383d); }
.sys-sw:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.sys-sw:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.sys-sw:disabled { cursor: not-allowed; opacity: 0.55; }

/* digital readouts */
.sys-read { display: grid; gap: 3px; min-width: 0; }
.sys-read > span { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }
.sys-digit { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; padding: 4px 10px; background: var(--well); border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6); }
.sys-digit b { font: 600 22px/1.1 var(--mono); color: #f2fffb; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sys-digit i { font-style: normal; font-size: 11px; opacity: 0.6; white-space: nowrap; }
.sys-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sys-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* bars */
.sys-bar { display: grid; gap: 4px; min-width: 0; }
.sys-bar-k { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.sys-bar-k span { letter-spacing: 0.08em; opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sys-bar-k b { font-weight: 400; color: #f2fffb; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sys-track { position: relative; height: 10px; overflow: hidden; background: var(--well); border: 1px solid rgba(255, 255, 255, 0.06); }
.sys-track i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--f, 0)); background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 55%, #000), var(--acc)); box-shadow: 0 0 8px color-mix(in srgb, var(--acc) 50%, transparent); }
.sys-bar[data-s="warn"] .sys-track i { background: linear-gradient(90deg, #8a5a14, var(--amb)); }
.sys-bar[data-s="bad"] .sys-track i { background: linear-gradient(90deg, #7a1d16, var(--bad)); }
.sys-bar[data-s="bad"] .sys-bar-k b { color: #ffb4a3; }

/* levers (range inputs over a scale with bands and the real-value needle) */
.sys-lever { display: grid; gap: 4px; min-width: 0; }
.sys-lever-k { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sys-lever-k span { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.sys-lever-k b { font: 600 18px var(--mono); color: #f2fffb; font-variant-numeric: tabular-nums; }
.sys-lever-track { position: relative; height: 34px; }
.sys-lever-track::before { content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 10px; background: var(--well); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7); }
/* the scale spans the thumb's travel (thumb 20 px wide) so bands and needle line up with the lever */
.sys-scale { position: absolute; left: 10px; right: 10px; top: 0; bottom: 0; pointer-events: none; }
.sys-bands { position: absolute; left: 0; right: 0; top: 13px; height: 8px; display: none; }
.sys-lever[data-bands] .sys-bands {
  display: block;
  background: linear-gradient(90deg, rgba(255, 91, 79, 0.55) 0 var(--alo), rgba(255, 181, 77, 0.7) var(--alo) var(--olo),
    rgba(74, 238, 104, 0.85) var(--olo) var(--ohi), rgba(255, 181, 77, 0.7) var(--ohi) var(--ahi), rgba(255, 91, 79, 0.55) var(--ahi));
}
.sys-act { position: absolute; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; left: calc(var(--act, 0) * 100%); background: #fff; box-shadow: 0 0 6px #fff; display: none; }
.sys-lever[data-act] .sys-act { display: block; }
.sys-act::after { content: ''; position: absolute; top: -5px; left: -4px; border: 5px solid transparent; border-top-color: #fff; border-bottom: 0; }
.sys input[type="range"] {
  -webkit-appearance: none; appearance: none; position: relative; z-index: 1; display: block; width: 100%; height: 34px; margin: 0;
  background: transparent; cursor: pointer; touch-action: pan-y;
}
.sys input[type="range"]::-webkit-slider-runnable-track { height: 34px; background: transparent; }
.sys input[type="range"]::-moz-range-track { height: 34px; background: transparent; }
.sys input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 34px; border-radius: 3px; border: 1px solid #0b0f10;
  background: linear-gradient(90deg, #8d9893, #d6dfdb 45%, #8d9893); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.6);
}
.sys input[type="range"]::-moz-range-thumb {
  width: 18px; height: 32px; border-radius: 3px; border: 1px solid #0b0f10;
  background: linear-gradient(90deg, #8d9893, #d6dfdb 45%, #8d9893); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.6);
}
.sys input[type="range"]:focus-visible { outline: none; }
.sys input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--acc), 0 0 12px var(--acc); }
.sys input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--acc), 0 0 12px var(--acc); }
.sys input[type="range"]:disabled { cursor: not-allowed; }
.sys input[type="range"]:disabled::-webkit-slider-thumb { background: linear-gradient(90deg, #4a5352, #747e7b 45%, #4a5352); }
.sys input[type="range"]:disabled::-moz-range-thumb { background: linear-gradient(90deg, #4a5352, #747e7b 45%, #4a5352); }
.sys-ends { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.65; }
.sys-lever[data-k="flow"] .sys-lever-track::after { content: ''; position: absolute; left: 50%; top: 8px; height: 18px; width: 1px; background: rgba(255, 255, 255, 0.35); }

/* reactor */
.sys-reactor-grid { grid-template-columns: minmax(0, 1.25fr) 150px minmax(0, 1.2fr); }
.sys-temp { display: flex; gap: 10px; align-items: flex-end; justify-content: center; }
.sys-temp-col { position: relative; display: flex; gap: 5px; height: 176px; padding: 0 0 0 0; }
.sys-ticks { display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; opacity: 0.55; margin: -6px 0; text-align: right; }
.sys-rail { position: relative; width: 6px; background: rgba(255, 91, 79, 0.35); }
.sys-rail i { position: absolute; left: 0; right: 0; }
.sys-rail .all { bottom: calc(var(--alo, 0.3) * 100%); top: calc((1 - var(--ahi, 0.7)) * 100%); background: var(--amb); }
.sys-rail .opt { bottom: calc(var(--olo, 0.4) * 100%); top: calc((1 - var(--ohi, 0.6)) * 100%); background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.sys-tube { position: relative; width: 30px; overflow: hidden; border-radius: 15px 15px 4px 4px; background: var(--well); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.8); }
/* vanilla temperature colours run blue → light blue → orange → red up the meter */
.sys-tube .fill { position: absolute; inset: 0; background: linear-gradient(0deg, #2f6bff, #8fd3ff 33%, #ffa530 66%, #ff3b2f); clip-path: inset(calc((1 - var(--t, 0)) * 100%) 0 0 0); opacity: 0.9; }
.sys-tube .hot, .sys-tube .cold { position: absolute; left: 0; right: 0; display: none; background: rgba(255, 40, 30, 0.55); animation: sys-pulse 1.25s ease-in-out infinite; }
.sys-tube .hot { top: 0; height: calc((1 - var(--ohi, 0.6)) * 100%); }
.sys-tube .cold { bottom: 0; height: calc(var(--olo, 0.4) * 100%); }
.sys-temp[data-s="hot"] .hot, .sys-temp[data-s="cold"] .cold { display: block; }
@keyframes sys-pulse { 50% { opacity: 0.15; } }
.sys-temp .needle { position: absolute; right: -6px; width: 49px; height: 2px; bottom: calc(var(--t, 0) * 100%); margin-bottom: -1px; background: #fff; box-shadow: 0 0 6px #fff; }
.sys-temp .needle::after { content: ''; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-right-color: #fff; border-left: 0; }
.sys-temp-v { display: flex; align-items: baseline; }
.sys-temp-v b { font: 700 30px/1 var(--head); color: #fff; font-variant-numeric: tabular-nums; }
.sys-temp-v i { font-style: normal; opacity: 0.6; }
.sys-temp[data-s="hot"] .sys-temp-v b { color: #ffb4a3; }
.sys-graph { display: block; width: 100%; height: 96px; background: var(--well); border: 1px solid rgba(255, 91, 79, 0.25); }
.sys-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; opacity: 0.7; }
.sys-legend i { display: inline-block; width: 14px; height: 2px; }
.sys-legend i.o { background: var(--acc); } .sys-legend i.l { background: #b0c4de; margin-left: 10px; }
.sys-rods { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 16px; }
/* rods lie on their side: a capsule that drains from the right as the rod burns down, its percent written on it */
.sys-rod-body b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 13px var(--mono); color: #fff; text-shadow: 0 1px 3px #000, 0 0 6px #000; font-variant-numeric: tabular-nums; }
.sys-rod-body { position: relative; height: 24px; overflow: hidden; border-radius: 11px; background: var(--well); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7); }
.sys-rod-body i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--f, 0)); background: linear-gradient(180deg, #3f8f3a, #9dff7c 50%, #3f8f3a); box-shadow: 0 0 10px rgba(157, 255, 124, 0.5); }
.sys-rod[data-low] .sys-rod-body i { background: linear-gradient(180deg, #7a4614, #ffb54d 50%, #7a4614); }
.sys-rod[data-empty] { opacity: 0.45; }
.sys-rod[data-empty] .sys-rod-body { border-style: dashed; }

/* navigation */
.sys-nav-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sys-pad-wrap { position: relative; display: grid; place-items: center; }
.sys-pad { display: block; width: 100%; max-width: 300px; aspect-ratio: 1; touch-action: none; cursor: crosshair; border-radius: 50%; }
.sys-pad:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.sys-pad[aria-disabled="true"] { cursor: not-allowed; opacity: 0.7; }
.sys-pad .rim { fill: color-mix(in srgb, var(--acc) 6%, rgba(0, 0, 0, 0.5)); stroke: var(--acc); stroke-width: 1.5; }
.sys-pad .ring, .sys-pad .axis { fill: none; stroke: color-mix(in srgb, var(--acc) 22%, transparent); stroke-width: 1; }
.sys-pad text { fill: var(--acc); opacity: 0.55; font: 9px var(--mono); letter-spacing: 0.2em; text-anchor: middle; }
.sys-pad .vec { stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.sys-pad .tgt { fill: #fff; stroke: var(--acc); stroke-width: 2; filter: drop-shadow(0 0 4px var(--acc)); }
.sys-pad .vel { fill: none; stroke: #ffe066; stroke-width: 2; }
.sys-padkey { display: flex; justify-content: center; gap: 16px; font-size: 11px; letter-spacing: 0.08em; opacity: 0.75; }
.sys-padkey i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; vertical-align: -1px; }
.sys-padkey i.t { background: #fff; box-shadow: 0 0 0 2px var(--acc); }
.sys-padkey i.v { border: 2px solid #ffe066; }
.sys-offline { position: absolute; inset: 0; display: grid; place-items: center; font: 700 18px var(--head); letter-spacing: 0.3em; text-transform: uppercase; color: var(--bad); pointer-events: none; }
.sys-offline[hidden] { display: none; }
.sys-tanks { display: flex; gap: 24px; justify-content: center; }
.sys-tank { display: grid; justify-items: center; gap: 4px; font-size: 12px; letter-spacing: 0.08em; }
.sys-tank-body { position: relative; width: 64px; height: 120px; overflow: hidden; border-radius: 6px; background: var(--well); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7); }
.sys-tank-body i { position: absolute; inset: 0; transform-origin: 50% 100%; transform: scaleY(var(--f, 0)); background: linear-gradient(180deg, #7fd0ff 0 2px, rgba(58, 160, 224, 0.85) 2px, #1b4f7a); }
.sys-tank-body b { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font: 600 15px var(--mono); color: #fff; text-shadow: 0 1px 3px #000; }
.sys-tank-flow { min-height: 1.2em; font-style: normal; font-size: 11px; color: var(--water); }
.sys-tank[data-dir="out"] .sys-tank-flow { color: var(--amb); }

/* junction box voltage meter */
.sys-volt { display: grid; gap: 6px; }
.sys-volt-k { display: flex; align-items: baseline; gap: 8px; }
.sys-volt-k span { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; flex: 1; }
.sys-volt-k b { font: 700 30px/1 var(--head); color: #fff; font-variant-numeric: tabular-nums; }
.sys-volt-k i { font-style: normal; font-size: 12px; opacity: 0.6; }
.sys-volt[data-s="warn"] .sys-volt-k b { color: #ffd08a; }
.sys-volt[data-s="bad"] .sys-volt-k b { color: #ffb4a3; }
.sys-vscale { position: relative; height: 22px; display: grid; grid-template-columns: 40fr 20fr 40fr 4fr; background: var(--well); }
.sys-vscale i:not(.needle) { opacity: 0.55; }
.sys-vscale .z-low { background: linear-gradient(90deg, rgba(255, 181, 77, 0.15), rgba(255, 181, 77, 0.55)); }
.sys-vscale .z-ok { background: rgba(74, 238, 104, 0.7); }
.sys-vscale .z-high { background: linear-gradient(90deg, rgba(255, 181, 77, 0.55), rgba(255, 91, 79, 0.7)); }
.sys-vscale .z-over { background: var(--bad); }
.sys-vscale .needle { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; left: calc(var(--v, 0) * 96%); background: #fff; box-shadow: 0 0 8px #fff; }
.sys-vticks { position: relative; height: 14px; font-size: 10px; opacity: 0.55; }
.sys-vticks span { position: absolute; transform: translateX(-50%); }
.sys-vticks span:nth-child(1) { left: 0; transform: none; } .sys-vticks span:nth-child(2) { left: 24%; }
.sys-vticks span:nth-child(3) { left: 48%; } .sys-vticks span:nth-child(4) { left: 72%; } .sys-vticks span:nth-child(5) { left: 96%; }
.sys-jb-grid, .sys-bat-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* pump */
.sys-pump-grid { grid-template-columns: minmax(0, 1fr) 180px; }
.sys-pump .sys-tank-body { width: 90px; height: 150px; }

/* oxygen */
.sys-o2-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.sys-rooms { display: grid; gap: 9px; }

.sys.ro .sys-pad { cursor: not-allowed; }

@media (max-width: 760px) {
  .sys-reactor-grid, .sys-nav-grid, .sys-pump-grid, .sys-jb-grid, .sys-bat-grid, .sys-o2-grid { grid-template-columns: minmax(0, 1fr); }
  .sys-lamps { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .sys-head { align-items: flex-start; }
  .sys-sw { min-height: 44px; }
  .sys-digit b { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .sys-lamp[data-s="blink"] i, .sys-alarm, .sys-tube .hot, .sys-tube .cold { animation: none; }
}