:root{
  --bg:#0A0E16; --panel:#0C121C; --card:#0F1622; --card2:#111A28; --border:#1E2B40;
  --teal:#1DE9B6; --cyan:#00D4FF; --price:#F5A623; --violet:#8B6CF0; --amber:#FFD54A;
  --blue:#5C6CFF; --blue2:#8B9BFF; --text:#EAF0F7; --muted:#9AABC4; --good:#1DE9B6; --bad:#FF6D6D;
  --down:#8FA0B8; --band:rgba(29,233,182,0.10);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:15px}

/* ---- login: white-card overlay identical to the GridBeyond sign-in (login.energy.gridbeyond.com/signin) ---- */
#login-overlay{position:fixed;inset:0;z-index:1000}
.login-wrap{position:fixed;inset:0;background:#fff;overflow-y:auto;overflow-x:hidden;padding-bottom:48px}
.login-banner{display:block;width:100%;height:380px;object-fit:cover}
.login-inner{position:relative;width:100%;margin-top:-200px;display:flex;flex-direction:column;align-items:center}
.login-card{width:min(560px,94vw);box-sizing:border-box;background:#fff;border-radius:18px;padding:52px 60px;
  box-shadow:0 6px 26px 0 rgba(2,0,43,.12);color:#000}
.login-card .llogo{display:flex;justify-content:center;width:100%}
.login-card .llogo img{height:112px;width:auto;max-width:none}
.login-card .lhead{margin:40px 0}
.login-card .lhead h2{font-size:30px;font-weight:700;margin:0;color:#000;line-height:1.25}
.login-card .lhead .sh{color:rgba(0,0,0,.6);font-size:19px;margin-top:6px}
.login-card label{display:block;font-size:17px;color:#5C6269;margin:0 0 8px}
.login-card .fld{margin-bottom:26px}
.login-card input{width:100%;height:62px;box-sizing:border-box;border:1.5px solid #D5DFE9;border-radius:6px;
  padding:0 16px;font-size:19px;color:#000;background:transparent;font-family:"Segoe UI",Roboto,Arial,sans-serif}
.login-card input:hover,.login-card input:focus{outline:none;border:1.5px solid #80B8FA}
.login-card .lpwrap{position:relative}
.login-card .lpwrap .eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;
  border:0;color:#5C6269;cursor:pointer;padding:6px;display:flex}
.login-card .lpwrap .eye svg{width:24px;height:24px}
.login-card .lerr{margin:18px 0 0;padding:11px 14px;background:#FDECEA;color:#D50000;font-size:14px;border-radius:6px}
.login-card .lforgot{display:flex;justify-content:flex-end;margin:22px 0}
.login-card .lforgot button{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:17px;color:#5C6269;letter-spacing:.17px}
.login-card .lbtn{width:100%;height:52px;background:#2F5EF0;color:#fff;border:0;border-radius:6px;
  font-family:Roboto,"Segoe UI",Arial,sans-serif;font-size:18px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;cursor:pointer}
.login-card .lbtn:hover{box-shadow:0 2px 10px rgba(0,0,0,.28)}
.login-card .lbtn:disabled{opacity:.7;cursor:default}
.login-card .lsub{display:block;margin-top:18px;font-size:14px;color:rgba(0,0,0,.6)}
.login-foot{text-align:center;color:#5C6269;font-size:13px;font-weight:500;margin-top:26px}
.login-dlg{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:1001}
.login-dlg .box{background:#fff;border-radius:8px;padding:24px;max-width:332px;color:#000}
.login-dlg .box h3{margin:0 0 16px;font-size:16px;font-weight:600}
.login-dlg .box p{margin:0;font-size:14px;color:rgba(0,0,0,.6)}
/* signed-in user — professional chip beside the GridBeyond mark */
.top-right{display:flex;align-items:center;gap:18px}
.user-chip{display:flex;align-items:center;gap:11px}
.user-chip .uavatar{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:700;color:#fff;letter-spacing:.3px;
  background:linear-gradient(135deg,var(--blue),var(--violet));box-shadow:0 1px 6px rgba(0,0,0,.35)}
.user-chip .uinfo{display:flex;flex-direction:column;line-height:1.2}
.user-chip .uname{color:var(--text);font-size:15px;font-weight:600;white-space:nowrap}
.user-chip .urole{color:var(--muted);font-size:11.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.user-chip .signout{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:8px;
  padding:7px 9px;cursor:pointer;display:flex;align-items:center;margin-left:2px}
.user-chip .signout:hover{background:var(--card2);color:var(--text)}
body{display:flex;flex-direction:column;min-height:100vh}
h1{font-size:30px;font-weight:600;margin:0}
h2{font-size:20px;font-weight:600;margin:0}
.muted{color:var(--muted);font-size:14px}
.muted.small{font-size:12.5px}

/* top bar */
.topbar{height:76px;flex:0 0 76px;display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;background:linear-gradient(90deg,#0B1220,#0C1424);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:13px}
.mark{height:52px;width:52px;display:block}
.wordmark{font-size:29px;font-weight:600;color:#fff;letter-spacing:.2px}
.wordmark sup{font-size:12px;font-weight:500;color:var(--muted);vertical-align:super;margin-left:1px}
.topmark{height:46px;width:46px;display:block}

/* body = sidebar + main */
.body{flex:1;display:flex;min-height:0}
.sidebar{width:264px;flex:0 0 264px;background:var(--panel);border-right:1px solid var(--border);
  padding:20px 16px;display:flex;flex-direction:column;gap:16px}
.nav-item{display:flex;align-items:center;gap:13px;padding:15px 16px;border-radius:11px;color:var(--muted);
  font-size:20px;font-weight:600;cursor:pointer;text-decoration:none}
.nav-item:hover{background:var(--card2);color:var(--text)}
.nav-item.active{background:linear-gradient(90deg,rgba(92,108,255,.22),rgba(92,108,255,.05));color:#fff;
  box-shadow:inset 3px 0 0 var(--blue)}
.ni{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* asset status box (moved into the sidebar) */
.status{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:15px 16px}
.kv{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:16px}
.kv span{color:var(--muted)} .kv b{color:var(--text)}
.status hr{border:none;border-top:1px solid var(--border);margin:9px 0}
.tag{background:rgba(29,233,182,.14);color:var(--teal);border-radius:6px;padding:3px 9px;font-size:11.5px;font-weight:700}

.main{flex:1;min-width:0;padding:22px 30px 44px;overflow-x:hidden}
.pagehead h1 .for{color:var(--muted);font-weight:400;margin:0 4px}
.page-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hist-toggle{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:14px;cursor:pointer;white-space:nowrap}
.hist-toggle input{width:auto;accent-color:var(--teal)}
.btn.rerun{background:var(--teal);color:#05231b}
/* live indicator — the production planner running up to real time */
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(29,233,182,.6);animation:livepulse 2.2s ease-out infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(29,233,182,.55)}70%{box-shadow:0 0 0 9px rgba(29,233,182,0)}100%{box-shadow:0 0 0 0 rgba(29,233,182,0)}}
.live-dot.down{background:var(--amber);box-shadow:none;animation:none}   /* planner unreachable — reconnecting */
/* staged-config banner in the Editor */
.staged-note{background:rgba(139,108,240,.12);border:1px solid rgba(139,108,240,.4);border-radius:9px;
  padding:9px 13px;font-size:13.5px;color:var(--text);margin:2px 0 12px}
.staged-note.hidden{display:none}

.tabs{display:flex;align-items:center;gap:30px;margin:18px 0 22px;border-bottom:1px solid var(--border)}
.tab{background:none;border:none;color:var(--muted);font-size:18px;font-weight:600;padding:10px 2px 14px;
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.active{color:var(--text);border-bottom-color:var(--blue)}
.tab-hint{color:var(--amber);font-size:14px}

.content{min-width:0}
select,input{background:var(--card2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:10px 12px;font-size:16px;width:100%}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin-bottom:22px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:14px;flex-wrap:wrap}
.legend{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* item 2 (2026-09-01): legend items are clickable trace/reference-line toggles (see app.js wireLegend/
   setLegendVisible) -- each swatch+label pair is wrapped in one .legend-item[data-legend] so the whole
   thing is one click/focus target; .legend-off is the "dimmed" state for a toggled-off trace. */
.legend-item{display:inline-flex;align-items:center;gap:4px;cursor:pointer;user-select:none;border-radius:5px;transition:opacity .15s}
.legend-item:hover{opacity:.72}
.legend-item:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.legend-item.legend-off{opacity:.38}
.lg{display:inline-block;width:18px;height:0;border-top:3px solid var(--teal);margin:0 3px 0 10px}
.lg.proj{border-top-style:dotted}.lg.price{border-top-color:var(--price)}
.lg.pricef{border-top-color:var(--price);border-top-style:dashed}
.lg.target{border-top-color:var(--amber);border-top-style:dashed}
.lg.vtarget{border-top-color:var(--amber);border-top-style:dashed}
.lg.vmax{border-top-color:var(--bad);border-top-style:dashed}
.lg.band{border:none;width:16px;height:11px;background:var(--teal);opacity:.32;border-radius:2px}
.lg.tempunc{border:none;width:16px;height:11px;background:var(--bad);opacity:.25;border-radius:2px}
.lg.amb{border-top-color:var(--price)}
.lg.ambf{border-top-color:var(--price);border-top-style:dashed}
.lg.ambhist{border-top-color:var(--price);border-top-style:dotted}
.lg.hum{border-top-color:var(--cyan)}
.lg.humf{border-top-color:var(--cyan);border-top-style:dashed}
.lg.humhist{border-top-color:var(--cyan);border-top-style:dotted}
.lg.now{border-top-color:var(--teal);border-top-style:dotted}
.plot{width:100%;height:480px}.plot.short{height:340px}.plot.tall{height:540px}.plot.mini{height:190px}
/* electrolyte temperature card: greyed while the live Open-Meteo weather feed is unavailable (never shows a
   fabricated reading in its place — see live_planner._temperature_view / app.js renderTemperature) */
.card.temp-unavailable .plot{opacity:.25}
.card.temp-unavailable #temp-provenance{color:var(--amber)}
/* ambient temperature / relative humidity sub-charts, stacked below the electrolyte-temperature chart —
   same card, same "now" divider, smaller/quieter than the main chart (see app.js renderWeatherSubcharts) */
.subcharts{display:flex;flex-direction:column;gap:16px;margin-top:14px}
.subcharts.hidden{display:none}
.subchart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:10px;flex-wrap:wrap}
.subchart-head h3{margin:0;font-size:14.5px;font-weight:600;color:var(--text)}
.subchart-head .legend{font-size:12.5px}
/* item 8: renamed from .two -> .charts-row (now holds 3 short cards: buffer/voltage/zinc-production, not 2) —
   2026-09-01: stacked vertically per Conor's request — one full-width card per row instead of the
   auto-fit side-by-side grid (was repeat(auto-fit,minmax(320px,1fr))). */
.charts-row{display:grid;grid-template-columns:1fr;gap:22px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:22px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:17px 19px;min-width:0}
/* item 10: overflow:hidden + text-overflow:ellipsis is a safety net so a long value string clips gracefully
   instead of spilling past the card background at narrow widths (1280/1366px) — .kpi's min-width:0 (above)
   is required for this to take effect inside a grid item. */
.kpi .v{font-size:clamp(28px,2vw,34px);font-weight:700;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kpi .v.teal{color:var(--teal)}.kpi .v.amber{color:var(--amber)}
.kpi .l{font-size:14px;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:.4px}

.btn{background:var(--blue);color:#fff;border:none;border-radius:9px;padding:11px 19px;font-size:15px;font-weight:600;cursor:pointer}
.btn:hover{filter:brightness(1.12)}.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}.btn.ghost:hover{background:var(--card2)}
.btn.accept{background:var(--violet);color:#fff}
.btn.danger{background:var(--bad);color:#fff}.btn.danger:hover{filter:brightness(1.08)}.btn.small{padding:8px 13px;font-size:13.5px}
/* queued-rerun button state (item 1): amber outline, waiting on the shared optimiser queue slot */
.btn.queued{background:transparent;border:1.5px solid var(--amber);color:var(--amber);opacity:1}

.tabpane.hidden{display:none}

/* Plan Diary */
.editor-sub{font-size:15px;color:var(--text);margin:20px 0 4px;font-weight:600}
#tank-val{width:78px}
.diary-actions{display:flex;align-items:center;gap:12px}
.diary-legend{margin:2px 0 10px}
.diary-toggles{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:10px 0 2px}
.diary-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 14px}
.diary-controls .inl{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.diary-controls select{width:130px}
.pillsel{background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:13.5px;color:var(--text)}

/* Configurations */
.cfg-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.cfg-col{display:flex;flex-direction:column}
.cfg-card{margin-bottom:22px}.cfg-card.wide{max-width:none}
.cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:6px 0}
.cfg-grid.four{grid-template-columns:repeat(4,1fr)}
.cfg-grid label{display:flex;flex-direction:column;gap:7px;font-size:14px;color:var(--muted)}
.cfg-actions{display:flex;align-items:center;gap:16px;margin-top:4px;flex-wrap:wrap}
.pair-head,.pair-row{display:grid;grid-template-columns:1fr 1fr 40px;gap:12px;align-items:center}
.pair-head{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:8px 0 6px}
.pair-row{margin-bottom:9px}
.pair-row .rm{background:transparent;border:1px solid var(--border);color:var(--bad);border-radius:8px;padding:9px 0;cursor:pointer;font-size:15px}
.pair-row .rm:hover{background:rgba(255,109,109,.12)}
.sp-head{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:12px 0 8px}
.region-sp{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px}
.hidden{display:none}
.advanced{border-color:rgba(92,108,255,.4)}
.adm-tag{background:rgba(92,108,255,.18);color:var(--blue2);border-radius:5px;padding:2px 8px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-left:8px;vertical-align:middle}
.adv-toggle{align-self:flex-start;margin-bottom:14px}
/* Live-tab display-range selector */
.range-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 14px;padding:9px 14px;background:var(--card);border:1px solid var(--border);border-radius:10px}
.range-bar .range-label{color:var(--muted);font-size:13.5px;font-weight:600}
.range-bar .range-arrow{color:var(--muted)}
.range-bar input[type=datetime-local]{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:7px;padding:7px 10px;font-size:13.5px;color-scheme:dark}

@media(max-width:1200px){.cfg-cols{grid-template-columns:1fr}.cfg-grid.four{grid-template-columns:1fr 1fr}}
/* .charts-row is now a single fixed 1fr column (stacked cards) — no breakpoint override needed. */