@import url('/lib/inter.css');
/* Vitreous Labs tokens. Pantone references, contrast checked, chart colours
   validated by script. One file, imported by the site and by the tool, so a
   colour changes in one place. */
:root{
  /* paper and ink */
  --paper:#F4F5F0;        /* Pantone 11-0601 Bright White */
  --ink:#005871;          /* Pantone 19-4340 Lyons Blue, 7.28:1, AAA body */
  --muted:#4E6B76;        /* derived from Lyons Blue, 5.20:1, AA body */
  --faint:#6B8792;        /* derived, 3.48:1, UI and large text only */

  /* accents */
  --accent:#0061A3;       /* Pantone 18-4244 Directoire Blue, 5.92:1, links */
  --green:#009B74;        /* Pantone 17-5936 Simply Green, 3.23:1, UI only */
  --alert:#9B1B30;        /* Pantone 19-1557 Chili Pepper, 7.39:1, AAA */

  /* surfaces only. Both fail the chart chroma floor and must never carry data */
  --sea:#54AFBC;          /* Pantone 15-4713 Sea Jet */
  --nile:#A7C796;         /* Pantone 14-0121 Nile Green */
  --wash:#EAEEEB;
  --hair:#DCE4E2;
  --grid:#E6EBE8;

  /* data. These three pass all six checks together. */
  --d-up:#9B1B30;         /* discharging, energy out, paid */
  --d-dn:#0061A3;         /* charging, energy in, pays */
  --d-3:#009B74;          /* third categorical slot */
  --d-idle:#7C8A93;

  /* Sequential, one hue, light to dark, ending at Directoire Blue rather than
     at navy. Validated by script, not by eye: adjacent separation at least 24
     normally and 17 under protanopia and deuteranopia, and every mark also
     carries an ink outline so identity never rests on fill alone. */
  --s1:#E6F1F9; --s2:#C4DFF2; --s3:#9BC8E7; --s4:#71ADD6;
  --s5:#4A90C4; --s6:#2374B2; --s7:#0061A3;

  --surface:var(--paper);
  color-scheme:light;
}
/* No dark scheme. The brand guide is explicit: charts and decks sit on a white
   ground. color-scheme:light above stops the browser substituting its own dark
   surfaces for form controls and scrollbars when the operating system is dark. */

/* Aliases, so the tool's existing CSS and markup keep working unchanged while
   the values underneath become the Pantone set. */
:root{
  --directoire:var(--accent);
  --current:var(--sea);
  --filament:var(--green);
  --chili:var(--alert);
  --taupe:var(--muted);
}

/* palette now comes from tokens.css */
*{box-sizing:border-box; margin:0}
html,body{height:100%}
body{font-family:'Inter','Söhne','Helvetica Neue',Arial,sans-serif; color:var(--ink); background:var(--paper); display:flex; overflow:hidden}
#panel{width:var(--panelw,348px); min-width:280px; max-width:78vw; height:100%; overflow-y:auto;
  padding:22px 20px 28px; background:var(--paper); border-right:1px solid var(--hair); z-index:1000; flex:none}
#drag{width:9px; min-width:9px; height:100%; cursor:col-resize; background:var(--paper); z-index:1001;
  position:relative; flex:none; touch-action:none}
#drag::before{content:""; position:absolute; left:4px; top:0; bottom:0; width:1px; background:var(--hair)}
#drag:hover::before,#drag.on::before,#drag:focus-visible::before{background:var(--directoire); width:2px; left:3.5px}
#drag:focus-visible{outline:2px solid var(--directoire); outline-offset:-1px}
#drag::after{content:""; position:absolute; left:1px; top:50%; margin-top:-16px; width:7px; height:32px;
  border-radius:4px; background:transparent}
#drag:hover::after,#drag.on::after{background:var(--directoire); opacity:.14}
#map{flex:1; height:100%; background:var(--paper)}
.kicker{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe); font-weight:600; margin-bottom:8px}
h1{font-size:19px; line-height:1.28; font-weight:700; margin-bottom:6px}
.standfirst{font-size:12.5px; line-height:1.5; color:var(--taupe); margin-bottom:16px}
.sect{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--taupe);
  font-weight:600; margin:18px 0 8px; padding-top:14px; border-top:1px solid var(--hair)}
.tabs{display:flex; gap:0; margin:14px 0 2px; border:1px solid var(--hair); border-radius:8px; overflow:hidden}
.tab{flex:1; text-align:center; font-size:11px; font-weight:600; padding:8px 2px; cursor:pointer; color:var(--taupe); background:#fff; white-space:nowrap; letter-spacing:-.01em}
.tab.on{background:var(--ink); color:#fff}
.verd{padding:7px 6px; border-bottom:1px solid var(--hair); font-size:11.8px; line-height:1.45; cursor:pointer}
.verd:hover{background:#F3F1E9}
.verd b{font-weight:600}
.verd .tag{display:inline-block; font-size:9.5px; letter-spacing:.1em; font-weight:700; text-transform:uppercase; padding:1px 7px; border-radius:999px; margin-right:6px}
.tag.go{background:#A5CD2D; color:#1E2A33}
.tag.watch{background:#F3E7BD; color:#6E5A16}
.tag.avoid{background:#F6D3CD; color:#9C2415}
.tag.none{background:#E8E7E2; color:#5A5A54}
.verd .mwq{color:var(--taupe); font-size:10.5px}
.sig{display:inline-block; font-size:9.5px; font-weight:600; color:#39435F; background:#EBEEFC; border:1px solid #D8DEF5; border-radius:999px; padding:1px 7px; margin:0 4px 3px 0}
.ic-label{font-size:10px; font-weight:600; letter-spacing:.06em; color:#5B6E8C; white-space:nowrap; text-shadow:0 0 3px #fff,0 0 3px #fff}
.verd-label{font-size:10.5px; font-weight:600; color:#1E2A33; white-space:nowrap; text-shadow:0 0 3px #fff, 0 0 3px #fff}
.chiprow{display:flex; flex-wrap:wrap; gap:6px}
.chip{font-size:11.5px; font-weight:500; padding:4px 10px; border:1px solid var(--hair);
  border-radius:999px; background:#fff; cursor:pointer; color:var(--taupe); user-select:none}
.chip.on{background:var(--ink); border-color:var(--ink); color:#fff}
.leg{display:flex; align-items:center; gap:8px; padding:3px 4px; font-size:12px; cursor:pointer; border-radius:4px}
.leg:hover{background:#F3F1E9}
.leg.dim{opacity:.32}
.leg .sw{width:11px; height:11px; border-radius:50%; flex:none; border:1.5px solid rgba(30,42,51,.25)}
.leg .mw{margin-left:auto; color:var(--taupe); font-variant-numeric:tabular-nums; font-size:11px}
table{width:100%; border-collapse:collapse; font-size:11.5px}
td{padding:3px 2px; border-bottom:1px solid var(--hair); vertical-align:top}
td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.note{font-size:10.5px; line-height:1.5; color:var(--taupe); margin-top:14px}
.sizekey{display:flex; align-items:flex-end; gap:14px; margin-top:6px}
.sizekey .b{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; color:var(--taupe)}
.sizekey .dot{border-radius:50%; background:none; border:1.5px solid var(--taupe)}
.leaflet-container{font-family:'Inter','Söhne','Helvetica Neue',Arial,sans-serif}
.leaflet-popup-content-wrapper{background:var(--paper); color:var(--ink); border-radius:6px;
  box-shadow:0 2px 10px rgba(30,42,51,.18); border:1px solid var(--hair)}
.leaflet-popup-content{margin:12px 14px; font-size:12px; line-height:1.5; min-width:210px}
.pp-co{font-weight:700; font-size:13px; margin-bottom:2px}
.pp-grp{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--directoire); font-weight:600; margin-bottom:6px}
.pp-row{display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--hair); padding:3px 0}
.pp-row span:first-child{color:var(--taupe)}
.pp-row span:last-child{font-weight:500; text-align:right}
.pp-info{margin-top:6px; color:var(--taupe); font-size:11px; line-height:1.45}
#reset{display:none; margin-top:8px; font-size:11px; color:var(--directoire); cursor:pointer; font-weight:600}
@media (max-width:720px){
  body{flex-direction:column}
  #panel{width:100%!important; min-width:0; max-width:none; height:46%; border-right:none; border-bottom:1px solid var(--hair)}
  #drag{display:none}
  #map{height:54%}
}
.geo-label{font-size:10px; letter-spacing:.18em; color:#B7B2A4; font-weight:600; white-space:nowrap}
.city-label{font-size:10px; color:#9A958A; font-weight:500; white-space:nowrap; pointer-events:none}
.leaflet-tooltip{font-family:'Inter','Söhne','Helvetica Neue',Arial,sans-serif; font-size:11px; background:var(--paper); border:1px solid var(--hair); color:var(--ink); box-shadow:none}

.cbar{display:flex;align-items:center;gap:8px;margin:3px 0}
.cbar .nm{width:64px;font-size:11px;font-weight:600}
.cbar .tr{flex:1;display:block;height:13px;background:#EEF0F7;border-radius:3px;overflow:hidden}
.cbar .fl{display:block;height:100%;background:var(--directoire);border-radius:3px}
.cbar .vl{width:56px;text-align:right;font-size:11px;font-variant-numeric:tabular-nums;font-weight:600}
.tab{font-size:10.5px;padding:8px 1px}
tr.dosrow,tr.zrow{cursor:pointer}
tr.dosrow:hover,tr.zrow:hover{background:#F3F1E9}
#nodes td,#circuits td,#dossier td,#zones td,#reftbl td,#totbl td,#risktbl td,#comptbl td,#nltbl td,#durtbl td,#durtrend td,#tntbl td,#chrisk td{padding:3px 3px}
.leg span:nth-child(2){line-height:1.25}
#laykey .sig{font-size:9px;padding:2px 6px}

.find{font-size:13px; line-height:1.35; font-weight:600; color:var(--ink); margin:20px 0 6px;
  padding-top:12px; border-top:1px solid var(--hair)}
#devpanel>.find:first-child,#acqpanel>.find:first-child,#ptspanel>.find:first-child,
#conpanel>.find:first-child,#zonpanel>.find:first-child,#livpanel>.find:first-child{border-top:none;padding-top:2px;margin-top:6px}
.chip:focus-visible,.tab:focus-visible{outline:2px solid var(--directoire); outline-offset:2px}
.node-label{font-size:9.5px; line-height:1.15; color:#5F6B8C; font-weight:500; white-space:nowrap;
  text-align:center; transform:translate(-50%,-50%); pointer-events:none; text-shadow:0 0 3px #fff,0 0 3px #fff}
.node-label b{color:#39435F}
@media (max-width:720px){
  #panel{height:58%}
  #map{height:42%}
  #toolbar{flex-wrap:wrap}
  #q{min-width:100%;flex:1 1 100%}
  #dl{max-width:none!important;flex:1}
  #csv{flex:0 0 auto}
  .tab{font-size:10px;padding:8px 0}
  table{font-size:11px}
}
@media print{ .tabs,#drag,.chiprow,#wlchip,#wlclr,#csv,#dl{display:none!important}
  #panel{width:100%!important;height:auto;overflow:visible} #map{height:520px} }
/* the operating page borrows the tool's shell and adds its own furniture */
.toolnav{position:sticky;top:-22px;z-index:20;display:flex;align-items:center;gap:14px;
  margin:-22px -20px 12px;padding:11px 20px;background:color-mix(in srgb,var(--paper) 94%,transparent);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--hair);font-size:12.5px}
.toolnav .tb{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;text-decoration:none;margin-right:auto}
.toolnav .tn{display:flex;gap:13px}
.toolnav a{color:var(--muted);text-decoration:none;white-space:nowrap}
.toolnav a:hover{color:var(--ink);text-decoration:underline}
.toolnav a.on{color:var(--ink);font-weight:600}
.tt{position:fixed;pointer-events:none;background:var(--paper);border:1px solid var(--hair);
 border-radius:8px;padding:8px 10px;font-size:12.5px;line-height:1.45;box-shadow:0 6px 22px rgba(0,88,113,.16);
 opacity:0;transition:opacity .1s;z-index:9999;max-width:250px}
.tt .r{display:flex;justify-content:space-between;gap:14px;font-variant-numeric:tabular-nums}
.scrollx{overflow-x:auto}.scrollx table{min-width:560px}
.livebtn{font:inherit;font-size:11.5px;font-weight:600;padding:5px 10px;border:1px solid var(--accent);
 border-radius:7px;background:var(--paper);color:var(--accent);cursor:pointer;margin-top:6px}
.livebtn:hover{background:var(--accent);color:var(--paper)}
.livebtn[disabled]{opacity:.55;cursor:default}
.livebox{margin-top:7px;padding:8px 10px;border-radius:8px;background:var(--wash);font-size:11.5px;line-height:1.5}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:0}
.spark{display:block;margin-top:5px}
#scale .row{display:flex;align-items:center;gap:9px;margin:3px 0;font-size:11.5px}
#scale .sw{width:15px;height:15px;border-radius:4px;flex:none}
.gatebox{border:1px solid var(--hair);border-radius:10px;padding:16px 18px;background:var(--wash);margin-top:10px}
.gatebox b{display:block;margin-bottom:5px}

/* ---- the panel slides, same as the tool, and reads larger ---------------- */
#panel{width:var(--panelw,436px);padding:22px 24px 30px}
#panel h1{font-size:21px;line-height:1.26}
#panel .standfirst{font-size:13.5px;line-height:1.55}
#panel .note{font-size:11.5px;line-height:1.55}
#panel table{font-size:12.5px}
#panel .find{font-size:11.5px}
#panel .chip{font-size:12px}
#drag::after{background:var(--hair);opacity:1}
#drag:hover::after,#drag.on::after{background:var(--accent);opacity:.9}
#drag[aria-label]{position:relative}
@media (max-width:900px){ #panel{width:100%!important} }

/* ---- the sparkline is a door ------------------------------------------- */
.sparkbtn{display:block;width:100%;margin-top:5px;padding:5px 6px 6px;border:1px solid var(--hair);
  border-radius:9px;background:var(--paper);cursor:pointer;text-align:left;font:inherit;color:inherit}
.sparkbtn:hover{border-color:var(--accent);background:var(--wash)}
.sparkbtn .spark{margin:0}
.sparkcta{display:block;font-size:10.5px;line-height:1.35;color:var(--accent);font-weight:600;margin-top:3px}

/* ---- the performance window -------------------------------------------- */
body.drilling{overflow:hidden}
#drill{position:fixed;inset:0;z-index:4000;background:color-mix(in srgb,var(--ink) 12%,transparent);
  backdrop-filter:saturate(105%) blur(2px);
  display:flex;align-items:stretch;justify-content:center;padding:26px}
#drill[hidden]{display:none}
#drill .dwrap{background:var(--paper);border-radius:14px;width:min(1180px,100%);display:flex;
  flex-direction:column;overflow:hidden;box-shadow:0 18px 54px rgba(0,88,113,.16)}
#drill .dhead{display:flex;align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid var(--hair);flex:none}
#drill .dhead h2{font-size:17px;font-weight:700;line-height:1.25;margin:0}
#drill .dsub{font-weight:400;color:var(--muted);font-size:13px;margin-left:6px}
#drill .dclose{margin-left:auto;font:inherit;font-size:12px;font-weight:600;padding:6px 14px;
  border:1px solid var(--hair);border-radius:8px;background:var(--paper);color:var(--ink);cursor:pointer}
#drill .dclose:hover{border-color:var(--accent);color:var(--accent)}
#drill .dscroll{overflow-y:auto;padding:20px 22px 30px}
.dmeta{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.dstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:10px;overflow:hidden;margin-bottom:22px}
.dstat{background:var(--paper);padding:11px 13px}
.dstat .k{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600}
.dstat .v{display:block;font-size:19px;font-weight:700;line-height:1.2;margin-top:3px;font-variant-numeric:tabular-nums}
.dstat .n{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.dh{font-size:15px;font-weight:600;line-height:1.3;margin:22px 0 3px}
.dnote{font-size:11.5px;line-height:1.55;color:var(--muted)}
.dsvg{display:block;width:100%;height:auto;margin-top:10px}
.dload{font-size:12.5px;color:var(--muted);padding:22px 0}
.drow{margin-top:20px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.dbtn{display:inline-block;font-size:12.5px;font-weight:600;padding:9px 16px;border-radius:9px;
  background:var(--accent);color:var(--paper);text-decoration:none}
.dbtn:hover{background:var(--ink)}
#drill .gatebox{margin-top:0;font-size:12.5px;line-height:1.6}
@media (max-width:760px){
  #drill{padding:0}
  #drill .dwrap{border-radius:0}
  #drill .dscroll{padding:16px 15px 26px}
  .dstat .v{font-size:16px}
}
.dcap{font-size:11.5px;font-weight:600;color:var(--ink);margin:14px 0 -2px}

/* ---- the capacity reconciliation ---------------------------------------- */
.recon{margin-top:6px}
.rrow{position:relative;display:grid;grid-template-columns:1fr auto auto;
  align-items:baseline;gap:8px;padding:8px 9px;margin:3px 0;border-radius:7px;isolation:isolate}
.rbar{position:absolute;left:0;top:0;bottom:0;background:var(--s2);border-radius:7px;z-index:-1}
.rlab{font-size:11.8px;font-weight:600;line-height:1.35}
.rmw{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.rn{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:56px;text-align:right}
.rnote{grid-column:1/-1;font-size:10.5px;color:var(--muted);line-height:1.4}