/* Keg-1 SOL Digital Twin. Styled to the Thelvanor site's dark band:
   same charcoal ground, hairlines, Archivo + IBM Plex Mono, keg-orange accent. */
@font-face{font-family:"Archivo Variable";font-style:normal;font-display:swap;font-weight:100 900;
  font-stretch:62% 125%;src:url(./fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:400;
  src:url(./fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;
  src:url(./fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{
  /* site tokens (.band-dark in globals.css) */
  --bg:#1a1c20; --panel:#1a1c20; --inset:#202227; --line:#2e3137; --line2:#3d4149;
  --text:#f2f2f0; --mute:#a9adb4; --faint:#6f737b;
  --keg:#e8650a;
  /* data series, tuned for the charcoal ground */
  --c-pv:#d99a1b; --c-batt:#3fbf74; --c-load:#5b9cf6; --c-bus:#a9adb4;
  --c-node:#e8650a; --c-wall:#5b9cf6; --c-amb:#6f737b;
  --ok:#3fbf74; --amber:#d99a1b; --red:#e5534b;
  --sans:"Archivo Variable","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font:14px/1.5 var(--sans);
  display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased;
  font-feature-settings:"kern","liga","tnum"}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--keg);outline-offset:2px}
::selection{background:var(--keg);color:#fff}

/* ---------- status bar ---------- */
#topbar{display:flex;align-items:center;gap:24px;padding:12px 18px;border-bottom:1px solid var(--line);
  flex:0 0 auto}
.brand{display:flex;align-items:center;gap:14px;flex:1 1 auto;min-width:0;flex-wrap:wrap}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.back{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.back:hover{text-decoration-color:var(--keg)}
.standalone .back{display:inline}
.clockbox{text-align:right;font-family:var(--mono)}
.clock{font-size:17px;color:var(--text);font-variant-numeric:tabular-nums}
.clock-sub{font-size:10px;color:var(--mute);letter-spacing:.12em;text-transform:uppercase}
.leds{display:flex;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.led{color:var(--faint);display:flex;align-items:center;gap:6px}
.led i{width:8px;height:8px;border-radius:50%;background:var(--line2);display:inline-block}
.led.on{color:var(--amber)} .led.on i{background:var(--amber)}
.led.on.bad{color:var(--red)} .led.on.bad i{background:var(--red)}

/* ---------- layout: hairline grid, as the site draws its tables ---------- */
#layout{flex:1 1 auto;display:grid;grid-template-columns:272px minmax(0,1fr) 332px;gap:1px;
  background:var(--line);min-height:0}
#left,#right{display:flex;flex-direction:column;gap:1px;min-height:0;overflow-y:auto;background:var(--line)}
#center{display:flex;flex-direction:column;gap:1px;min-height:0;min-width:0;background:var(--line)}
.panel{background:var(--panel);padding:16px 18px}
#left .panel:last-child,#right .panel:last-child{flex:1 0 auto}
h2,.chart-head h3{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);font-weight:400}
h2{margin-bottom:12px;display:flex;align-items:center;gap:10px}
.hint{font-size:12px;color:var(--mute);margin-top:10px;line-height:1.45}

/* ---------- left ---------- */
.scenario-list{display:flex;flex-direction:column}
.scenario-list button{background:none;border:0;border-left:2px solid transparent;
  padding:7px 10px;text-align:left;color:var(--mute);font-family:var(--mono);font-size:12px}
.scenario-list button:hover{color:var(--text)}
.scenario-list button.on{border-left-color:var(--keg);color:var(--text);background:var(--inset)}
.scenario-desc{font-size:12px;color:var(--mute);margin-top:10px;line-height:1.45}
.cfg{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:11px;
  color:var(--mute);margin-bottom:14px;letter-spacing:.06em}
.cfg b{color:var(--text);font-weight:500}
.cfg select{background:var(--inset);color:var(--text);border:1px solid var(--line2);
  border-radius:0;padding:7px 8px;font-family:var(--mono);font-size:12px}
input[type=range]{width:100%;accent-color:var(--keg)}
/* pill buttons, as the site draws them */
.btn{background:transparent;border:1px solid var(--line2);color:var(--text);border-radius:999px;
  padding:9px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  line-height:1;transition:background 120ms ease,color 120ms ease,border-color 120ms ease}
.btn:hover{border-color:var(--text)}
.btn.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn.primary{border-color:var(--keg);color:var(--keg);width:100%;padding:12px 16px}
.btn.primary:hover{background:var(--keg);color:#fff}
.btn.primary:disabled{opacity:.6;cursor:progress}
.btn.sm{padding:7px 11px;font-size:10px;letter-spacing:.1em}
.btn.icon{width:38px;height:34px;padding:0;font-size:13px;letter-spacing:0}
.exports .btn.sm{text-transform:none;letter-spacing:.04em}
.transport{display:flex;align-items:center;gap:6px;margin-bottom:12px}
.speed{display:flex;margin-left:auto;border:1px solid var(--line2);border-radius:999px;overflow:hidden}
.speed button{background:none;border:0;color:var(--mute);font-family:var(--mono);font-size:10px;padding:6px 8px}
.speed button.on{color:var(--bg);background:var(--text)}
.scrub-labels{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:10px;color:var(--mute);margin-top:4px}
.grades{list-style:none;display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--mute)}
/* grade pills: same shape as .grade on the site */
.pill{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;line-height:1;
  padding:.38em .7em;border-radius:999px;border:1px solid currentColor;margin-right:6px;
  display:inline-block;white-space:nowrap;vertical-align:middle}
.g-source{color:var(--ok)}
.g-estimate{color:var(--amber)}
.g-assumption{color:var(--mute)}
.g-simulated{color:var(--c-load)}
.g-measured{color:var(--keg)}

/* ---------- center ---------- */
.view3d-wrap{flex:0 0 50%;display:flex;flex-direction:column;min-height:260px}
.view3d-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.view3d-head h2{margin-bottom:0}
.view3d-actions{display:flex;gap:6px}
#view3d{flex:1 1 auto;min-height:0;overflow:hidden;position:relative;background:var(--bg);
  border:1px solid var(--line)}
#view3d canvas{display:block}
.legend3d{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-family:var(--mono);font-size:10px;
  color:var(--mute);padding-top:10px}
.legend3d .grow{flex:1}
.legend3d .sw{width:10px;height:3px;display:inline-block;margin-right:5px;vertical-align:middle}
.sw.pv{background:var(--c-pv)} .sw.batt{background:var(--c-batt)} .sw.load{background:var(--c-load)}
.charts{flex:1 1 auto;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:1px;min-height:0;background:var(--line)}
.chart{display:flex;flex-direction:column;min-height:0;padding:12px 14px}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.unit{font-family:var(--mono);font-size:10px;color:var(--mute);white-space:nowrap}
.unit .k{display:inline-block;width:8px;height:2px;vertical-align:middle;margin:0 3px 0 6px}
.k.pv{background:var(--c-pv)} .k.bus{background:var(--c-bus)} .k.load{background:var(--c-load)}
.k.node{background:var(--c-node)} .k.plate{background:var(--c-pv)} .k.wall{background:var(--c-wall)}
.k.amb{background:var(--c-amb)}
.chart canvas{flex:1 1 auto;min-height:0;width:100%}

/* ---------- right ---------- */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.metric{background:var(--panel);padding:9px 11px}
.metric .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.metric .v{font-family:var(--mono);font-size:17px;color:var(--text);font-variant-numeric:tabular-nums}
.metric .v.cyan{color:var(--c-load)} .metric .v.amber{color:var(--amber)}
.metric .v.red{color:var(--red)} .metric .v.mint{color:var(--ok)}
.compare{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:12px}
.compare .row{display:grid;grid-template-columns:92px 1fr 1fr;gap:8px;align-items:baseline}
.compare .h{color:var(--mute);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.compare .a{color:var(--amber)} .compare .b{color:var(--c-load)}
.events-panel{flex:1 1 auto;min-height:140px;display:flex;flex-direction:column}
.events{overflow-y:auto;font-family:var(--mono);font-size:11px;display:flex;
  flex-direction:column;gap:2px;min-height:0}
.events .ev{padding:3px 6px;border-left:2px solid var(--line2);color:var(--faint);
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.events .ev:hover{background:var(--inset)}
.events .ev .t{color:var(--faint);margin-right:6px}
.events .ev.past{color:var(--text)}
.events .ev.ty-protection{border-color:var(--red)} .events .ev.ty-fault{border-color:var(--amber)}
.events .ev.ty-thermal{border-color:var(--keg)} .events .ev.ty-admitted{border-color:var(--ok)}
.events .ev.ty-deferred{border-color:var(--faint)} .events .ev.ty-completed{border-color:var(--c-load)}
.events .ev.ty-control{border-color:var(--line2)}
.exports{display:flex;flex-wrap:wrap;gap:6px}

#foot{flex:0 0 auto;display:flex;justify-content:space-between;gap:18px;padding:10px 18px;
  border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--mute)}
#foot .warn{color:var(--amber);text-align:right}

/* ---------- stacked (narrow) ----------
   The page grows to its content; the host page sizes the frame to match,
   so there is never a scrollbar inside a scrollbar. */
@media (max-width:1100px){
  html,body{height:auto}
  body{overflow:visible}
  #topbar{flex-wrap:wrap;gap:10px 20px}
  .clockbox{text-align:left}
  #layout{grid-template-columns:minmax(0,1fr)}
  #left,#right,#center{min-width:0}
  .chart-head{flex-wrap:wrap}
  #left,#right{overflow:visible}
  .view3d-wrap{flex:0 0 auto}
  #view3d{height:340px;flex:0 0 auto}
  .charts{grid-template-columns:1fr;grid-template-rows:repeat(4,200px)}
  .events{max-height:300px}
  #foot{flex-direction:column;gap:6px}
  #foot .warn{text-align:left}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}