@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} }

.chip.busy{opacity:.55;position:relative}
.chip.busy::after{content:"";position:absolute;right:5px;top:50%;width:7px;height:7px;margin-top:-3.5px;
  border:1.5px solid var(--taupe);border-top-color:transparent;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.chip.failed{border-color:var(--chili);color:var(--chili)}
#tierchip:empty{display:none}
.toolhead{display:flex;align-items:center;gap:10px;margin:-6px -20px 12px;padding:0 20px 10px;
  border-bottom:1px solid var(--hair)}
.toolhead .tb{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.toolhead .tb b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.toolhead .tb:hover b{text-decoration:underline}
.tn{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:11.5px}
.tn a{color:var(--taupe);text-decoration:none}
.tn a:hover{color:var(--ink);text-decoration:underline}
@media (max-width:720px){.toolhead{margin:-6px -18px 10px;padding:0 18px 9px}.tn{gap:10px;font-size:11px}}
a{color:var(--directoire)}