@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{
  /* ground, paper and ink. Reset on 29 September 2026 for the warmer front
     Gary approved from the mock-up that morning: a warm stone ground, white
     for every panel that carries a chart or data, near-black ink, warm taupe
     for secondary text. Contrast on the stone ground: ink 13.9:1, muted 5.2:1,
     faint 4.9:1, links 5.7:1, all AA or better at body size. */
  --canvas:#FFFFFF;       /* the page ground: white everywhere but the front, Gary's call of 29 September 2026 */
  --stone:#F3EFE7;        /* the front page's ground, warm stone */
  --canvas-deep:#ECE6D8;  /* the deeper band behind the front page's lead */
  --paper:#FFFFFF;        /* every chart and data panel sits on white, per the style sheet */
  --brand:#005871;        /* Pantone 19-4340 Lyons Blue, the mark's colour, kept for the mark */
  --ink:#1B2327;          /* text */
  --muted:#6B6357;        /* secondary text, warm taupe, 5.16:1 on stone */
  --faint:#6E665A;        /* captions, 4.93:1 on stone */

  /* accents */
  --accent:#0061A3;       /* Pantone 18-4244 Directoire Blue, 5.92:1, links */
  --green:#009B74;        /* Pantone 17-5936 Simply Green, 3.23:1, UI only */
  --green-ink:#007456;    /* the same green darkened for text, 5.78:1 on paper, 5.28:1 on the band */
  --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:#E9E3D7;         /* hover and the current tab, warm */
  --hair:#DBD4C6;         /* rules and panel edges, warm */
  --grid:#E6E0D4;

  /* the one warm accent for a button: Yolk Yellow 14-1056 with ink text, 7.4:1 */
  --btn:#EFA00B;
  --btn-ink:#1B2327;
  --btn-hover:#E39600;

  /* 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-sun:#EFA00B;        /* solar. Pantone 14-1056 TCX, taken as #EFA00B: the
                             brand list carries the reference and no authoritative
                             hex could be found for it, so CONFIRM AGAINST THE
                             BRAND BOOK. Validated by script against every other
                             chart colour on 19 September 2026: worst separation
                             dE 66.9 normally and dE 34.2 under tritanopia, against
                             floors of 24 and 17. 2.16:1 on white, so it is a fill
                             only and its words wear taupe. */
  --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;

  /* Diverging, for a quantity with a real zero on both sides: the transmission
     charging tariff, which pays a generator in the south and charges one in
     the north. Blue against red with a light neutral between them is the
     standard colour-blind-safe diverging pair. The far end stops short of
     Chili Pepper on purpose, because the alert colour is reserved for risk and
     exclusion and a surface fill is neither. */
  --dv-n2:#4A90C4; --dv-n1:#9BC8E7; --dv-0:#ECEFEC;
  --dv-p1:#F2D6DA; --dv-p2:#DCA3AE; --dv-p3:#BE6D7E; --dv-p4:#A93A4B;

  /* Chili Pepper as a surface and an edge, for a pill or a row that carries a
     warning. The text on it stays --alert, which reads 7.39:1 on this ground. */
  --alert-wash:#F6E9EC; --alert-hair:#E3C3CA;

  --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(--canvas); 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(--canvas); border-right:1px solid var(--hair); z-index:1000; flex:none}
#drag{width:9px; min-width:9px; height:100%; cursor:col-resize; background:var(--canvas); 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(--canvas)}
.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}
}
/* A select truncates its own text with no ellipsis, so "Projects, current
   filter (1,562)" read as "Projects, current filter (1". The search box beside
   it grows and this shrank to pay for it. It no longer shrinks, and the floor
   is the longest option it carries: "Transmission substations, OpenStreetMap
   (3,365)" measures 297px at 12px Inter, plus its padding and its arrow. */
@media (min-width:721px){
  #dl{flex:0 0 auto;min-width:21rem}
}
@media print{ .tabs,#drag,.chiprow,#wlchip,#wlclr,#csv,#dl{display:none!important}
  #panel{width:100%!important;height:auto;overflow:visible} #map{height:520px} }

/* The one control that matters. Choosing a question sets the colour on the
   map, the key beneath it and the sort of the table together, so the reader
   never has to hold two settings in their head at once. It replaces colouring
   by developer, which needed more than ten hues at once and broke the rule
   that a page carries one accent. */
.showrow{margin:12px 0 0}
.showlab{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
 color:var(--taupe);font-weight:600;margin-bottom:5px}
/* The panel is about 280px wide, so four questions cannot sit in a row without
   wrapping into something that reads as a list pretending to be a control.
   They stack as a proper chooser instead, full width and left aligned. */
.seg{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:6px;overflow:hidden}
.seg button{font:inherit;font-size:12px;font-weight:500;padding:7px 10px;border:0;
 background:transparent;color:var(--ink);cursor:pointer;text-align:left;
 border-bottom:1px solid var(--hair)}
.seg button:last-child{border-bottom:0}
.seg button:hover{background:var(--wash)}
.seg button.on{background:var(--ink);color:#fff;font-weight:600}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.showkey{margin:8px 0 0;font-size:11px;color:var(--taupe)}
.showkey .row{display:flex;align-items:center;gap:7px;white-space:nowrap}
.showkey .sw{display:inline-flex;align-items:center;gap:4px;margin-right:10px}
.showkey .sw i{width:11px;height:11px;border-radius:50%;display:inline-block;
 box-shadow:inset 0 0 0 1px rgba(0,88,113,.45)}
.showkey .ramp{display:flex;height:8px;flex:1;min-width:60px;border-radius:2px;overflow:hidden}
.showkey .ramp i{flex:1}
.showkey .cap{display:block;margin-top:5px;line-height:1.45}

/* The filters and the layers used to sit between the question and its answer,
   about 1,080 pixels of chips before any content. They fold now, and they sit
   below the panel that answers the question. A count on the summary says when
   a filter is doing something, so a folded control can never quietly change
   what the reader is looking at. */
.fold{border-top:1px solid var(--hair);margin-top:14px}
.fold>summary{list-style:none;cursor:pointer;padding:9px 0;font-size:12px;
 font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary:before{content:"";width:0;height:0;border:4px solid transparent;
 border-left-color:var(--muted);margin-right:2px;transition:transform .12s}
.fold[open]>summary:before{transform:rotate(90deg) translateX(-1px)}
.fold>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fold .cnt{font-weight:500;color:var(--taupe);font-size:11px}
.fold .cnt:empty{display:none}
.fold>*:not(summary){margin-bottom:8px}
.leg .bar{display:inline-block;width:52px;height:7px;background:var(--grid);
 border-radius:1px;flex:0 0 52px;overflow:hidden}
.leg .bar i{display:block;height:100%;background:var(--ink)}

/* ------------------------------------------------------------------------
   The tool's shape, rebuilt 11 September 2026.

   It was a 348px column of controls on the left with the map filling
   everything else, so the answer lived in a narrow strip and the map had more
   room than it could use. Great Britain is tall and narrow: at a readable
   height it needs about 420 pixels of width and no more. So the map takes a
   fixed column on the left and everything that reads as writing, the finding,
   the numbers and the tables, takes the wide column on the right.
   ------------------------------------------------------------------------ */
body.tool{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.tbody{display:flex;flex:1;min-height:0}
/* The map is the tool. It was a fixed 420px whatever the screen, which is 29%
   of a 1440 laptop and 16% of a wide monitor, so the densest part of the queue,
   the Midlands and the north west, arrived as one blue mass on every machine
   and got no better on a bigger one. It now takes a share of the width with a
   floor and a ceiling: the floor is the old fixed size, so nothing narrow
   changes, and the ceiling stops the reading panel being squeezed on a very
   wide screen. Below 960px the rule further down stacks them and wins. */
.tool{--mapw:clamp(420px, 40%, 760px)}
.tool #map{order:0;flex:0 0 var(--mapw,420px);width:var(--mapw,420px);height:100%;
  border-right:1px solid var(--hair)}
.tool #drag{order:1}
.tool #panel{order:2;flex:1;width:auto!important;min-width:0;max-width:none;
  border-right:none;padding:20px 26px 30px}

/* the one control row, across the whole page */
.qbar{display:flex;align-items:center;gap:12px;flex:0 0 auto;
  padding:9px 22px;border-bottom:1px solid var(--hair);background:var(--canvas)}
.qlab{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe);
  font-weight:600;white-space:nowrap}
.qbar .seg{flex-direction:row;border-color:var(--ink)}
.qbar .seg button{border-bottom:0;border-right:1px solid var(--hair);text-align:center}
.qbar .seg button:last-child{border-right:0}
.qtools{margin-left:auto}
.qtools #toolbar{display:flex;gap:6px;margin:0}
.qbar .qcount{font-size:11px;color:var(--taupe);white-space:nowrap;max-width:22ch;line-height:1.3}

/* the four numbers that answer the question at a glance */
.counts{display:flex;flex-wrap:wrap;border-top:1px solid var(--ink);margin:16px 0 0}
.counts div{padding:10px 22px 10px 0;margin-right:22px;border-right:1px solid var(--hair)}
.counts div:last-child{border-right:0;margin-right:0}
.counts .k{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--taupe);font-weight:600}
.counts .v{display:block;font-size:21px;font-weight:600;letter-spacing:-.01em;margin-top:2px;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.counts .v small{font-size:12px;font-weight:400;color:var(--taupe);margin-left:3px}

.tool #panel h1{font-size:25px;line-height:1.26;max-width:26ch}
.tool #panel .standfirst{max-width:68ch}
.tool #panel table{font-size:12.5px}

@media (max-width:900px){
  body.tool{overflow:auto;height:auto}
  .tbody{flex-direction:column}
  .tool #map{order:0;flex:0 0 46vh;width:100%;height:46vh;border-right:none;
    border-bottom:1px solid var(--hair)}
  .tool #panel{order:2;padding:16px 18px 24px}
  .qbar{flex-wrap:wrap;gap:8px;padding:8px 16px}
  .qbar .seg{flex-direction:column;flex:1 1 100%}
  .qbar .seg button{border-right:0;border-bottom:1px solid var(--hair);text-align:left}
  .qtools{margin-left:0;flex:1 1 100%}
  .qbar .qcount{max-width:none;flex:1 1 100%}
}

/* the brand bar spans the page, above the question */
.toolhead{order:-1;flex:0 0 auto;margin:0;padding:8px 22px 7px;
  border-bottom:1px solid var(--hair);background:var(--canvas)}
.toolhead .tn{flex-basis:auto}

/* The reading column has about 1,300 pixels to play with, which is far more
   than any line of type should use. Everything that reads as writing is held
   to a measure; only a table is allowed the full width. */
.tool #panel>*{max-width:72rem}
.tool #panel .tabs{max-width:46rem;gap:0}
.tool #panel .tabs .tab{flex:0 0 auto;padding:8px 16px}
.tool #panel .showkey{max-width:52rem}
.tool #panel .showkey .ramp{max-width:220px;flex:0 0 220px}
.tool #panel .leg{max-width:46rem}
.tool #panel .counts{max-width:60rem}
.tool #panel table{max-width:72rem}
.tool #map .leaflet-control-attribution{font-size:9px;line-height:1.25}
.tool #panel #legend,.tool #panel #reset,.tool #panel .note,.tool #panel .find,.tool #panel .standfirst{max-width:52rem}
.tool #panel .leg{max-width:none}
@media (max-width:900px){
  .tool #panel .tabs{flex-wrap:wrap;max-width:none}
  .tool #panel .tabs .tab{padding:7px 11px}
  .toolhead{padding:7px 16px 6px}
}

/* ---- the shape the mockup drew ---------------------------------------- */
.toolhead .asof{margin-left:auto;font-size:11.5px;color:var(--taupe);white-space:nowrap}
.qfilters{display:flex;gap:8px;margin-left:22px}
.pill{display:inline-flex;align-items:baseline;gap:5px;border:1px solid var(--hair);
  border-radius:5px;padding:6px 11px;font:inherit;font-size:12px;color:var(--taupe);
  background:var(--canvas);cursor:pointer;white-space:nowrap}
.pill b{color:var(--ink);font-weight:600}
.pill:after{content:"";width:0;height:0;border:3.5px solid transparent;
  border-top-color:var(--muted);position:relative;top:4px;margin-left:2px}
.pill:hover{border-color:var(--muted)}
.pill.on{border-color:var(--ink)}

/* the map column carries its own key, the way a printed map does */
.mapcol{order:0;flex:0 0 var(--mapw,420px);width:var(--mapw,420px);height:100%;
  display:flex;flex-direction:column;border-right:1px solid var(--hair);position:relative}
.tool #map{order:0;flex:1 1 auto;width:auto;min-height:0;border-right:none}
.layersbtn{position:absolute;right:14px;top:14px;z-index:900;background:var(--canvas);
  border:1px solid var(--hair);border-radius:5px;padding:6px 12px;font:inherit;
  font-size:12.5px;font-weight:500;color:var(--ink);cursor:pointer}
.layersbtn:hover{border-color:var(--muted)}
.mapkey{flex:0 0 auto;padding:11px 14px 14px;border-top:1px solid var(--hair);background:var(--canvas)}
.mapkey .ttl{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--taupe);
  font-weight:600;margin-bottom:6px}
.mapkey .swatch{display:flex;height:9px}
.mapkey .swatch i{flex:1;display:block}
.mapkey .ticks{display:flex;font-size:10.5px;color:var(--taupe);margin-top:3px;
  font-variant-numeric:tabular-nums}
.mapkey .ticks span{flex:1;text-align:right;position:relative;right:-.9em}
.mapkey .ticks span:first-child{flex:0 0 0;text-align:left;right:0}
.mapkey .ends{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px}
.mapkey .sw{display:inline-flex;align-items:center;gap:5px;margin-right:12px;font-size:11.5px;color:var(--muted)}
/* the size key: circles on their own baseline, so three of different sizes read
   as one row rather than three lines */
.mapkey .szrow{display:flex;align-items:flex-end;gap:18px;margin-top:7px}
.mapkey .sz{display:flex;flex-direction:column;align-items:center;gap:4px;
 font-size:11px;color:var(--muted);line-height:1.1;text-align:center}
.mapkey .sz i{display:block;border-radius:50%;background:var(--s5);opacity:.55;
 border:1px solid var(--s7)}
.mapkey .sw i{width:12px;height:12px;border-radius:50%;display:inline-block;
  box-shadow:inset 0 0 0 1px rgba(15,42,51,.5)}
.mapkey .note{font-size:11px;line-height:1.5;color:var(--taupe);margin-top:8px;max-width:40ch}
.mapcol .fold{border-top:1px solid var(--hair);margin:0;padding:0 14px}

/* the reading column */
.tool #panel .kicker{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--taupe);font-weight:600}
.strip{margin:20px 0 0;max-width:56rem}
.strip h2{font-size:15.5px;font-weight:600;line-height:1.4;margin:0 0 3px;color:var(--ink)}
.strip .cap{font-size:12.5px;color:var(--taupe);margin:0 0 10px}
.sr{display:flex;align-items:center;gap:12px;padding:3.5px 0;font-size:13px}
.sl{width:118px;flex:0 0 118px;color:var(--muted)}
.sb{flex:1;height:11px;background:var(--grid);position:relative;max-width:330px}
.sb i{position:absolute;left:0;top:0;bottom:0;display:block;
  box-shadow:inset 0 0 0 1px rgba(15,42,51,.28)}
.sv{width:64px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.sn{width:80px;text-align:right;color:var(--taupe);font-size:12.5px}
.vtbl{margin-top:20px;border-top:1px solid var(--ink);max-width:72rem}
#vtable{width:100%;border-collapse:collapse;font-size:13px}
#vtable thead th{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--taupe);
  font-weight:600;text-align:left;padding:9px 10px 7px 0;border-bottom:1px solid var(--hair);white-space:nowrap}
#vtable thead th.n{text-align:right}
#vtable td{padding:7px 10px 7px 0;border-bottom:1px solid var(--grid);white-space:nowrap}
#vtable td.n{text-align:right;font-variant-numeric:tabular-nums}
#vtable td.nm{font-weight:500;color:var(--accent);cursor:pointer}
#vtable td.zn{color:var(--muted);font-size:12.5px}
#vtable td .z{color:#7C8A93}
.tfoot{display:flex;align-items:center;justify-content:space-between;max-width:72rem;
  border-top:1px solid var(--ink);padding:9px 0 4px;font-size:12.5px;color:var(--taupe)}
.moreline{margin:26px 0 8px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--taupe);font-weight:600;border-top:1px solid var(--hair);padding-top:14px;max-width:72rem}
@media (max-width:900px){
  .mapcol{order:0;flex:0 0 auto;width:100%;height:auto;border-right:none;
    border-bottom:1px solid var(--hair)}
  .tool #map{height:44vh;flex:0 0 44vh}
  .qfilters{margin-left:0;flex-wrap:wrap}
}
/* the headline is a sentence, so it wants a sentence's measure */
.tool #panel h1{max-width:40ch;font-size:26px;letter-spacing:-.016em}
.tool #panel .standfirst{max-width:74ch;font-size:14px;line-height:1.6}
/* four questions across one row, each on one line */
.qbar .seg button{font-size:12px;padding:6px 11px;white-space:nowrap}
/* the four questions keep their natural width; the filters take the slack */
.qbar .seg{flex:0 0 auto}
.qfilters{margin-left:auto}
.qtools{margin-left:18px}
/* the search, the dataset picker and the CSV button must fit inside the bar */
.qbar{flex-wrap:wrap;row-gap:8px}
.qtools{margin-left:18px;flex:0 1 auto;min-width:0}
.qtools #toolbar{min-width:0;flex-wrap:wrap;justify-content:flex-end}
.qtools #q{flex:1 1 180px;min-width:140px}
.qtools #dl{max-width:150px}
.qbar .qcount{flex:0 0 auto;margin-left:14px}
.qbar{flex-wrap:nowrap;row-gap:0}
.tactions{display:flex;align-items:center;gap:8px;margin-top:12px;max-width:72rem;flex-wrap:wrap}
.tactions #toolbar{display:flex;gap:8px;margin:0;flex:1 1 auto;min-width:0}
.tactions #q{flex:1 1 260px;max-width:340px}
.tactions #dl{max-width:220px}
.tactions #qcount{font-size:11px;color:var(--taupe);flex:1 1 100%;margin-top:2px}
.sl{width:172px;flex:0 0 172px;line-height:1.3}

/* Each of the old tabs is a named section now. They open on demand and build
   their tables the first time they do, so nothing is computed for a panel
   nobody has looked at. */
.sect2{border-top:1px solid var(--hair);max-width:72rem}
.sect2>summary{list-style:none;cursor:pointer;padding:11px 0;font-size:14px;
  font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
.sect2>summary::-webkit-details-marker{display:none}
.sect2>summary:before{content:"";width:0;height:0;border:5px solid transparent;
  border-left-color:var(--muted);transition:transform .12s}
.sect2[open]>summary:before{transform:rotate(90deg) translateX(-2px)}
.sect2>summary:hover{color:var(--accent)}
.sect2>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sect2>div{padding-bottom:14px}
.sect2 .find:first-child{border-top:none;padding-top:0;margin-top:0}
/* A table is the one thing allowed to be wider than the reading column, and
   it scrolls inside its own box rather than pushing the page sideways. */
.vtbl{overflow-x:auto}
#vtable{min-width:52rem}
.sect2 table{max-width:none}
.sect2>div{overflow-x:auto}
/* The summaries were inheriting the panel heading styling and standing 90px
   tall, so five of them filled a screen on their own. They are a compact
   stack: the answer is above, these are the way down into it. */
.sect2{border-top:none;border-bottom:1px solid var(--hair)}
.sect2>summary{padding:10px 0;font-size:13.5px;line-height:1.3;min-height:0}
.sect2>summary .find{all:unset}
.moreline{margin:26px 0 0;border-bottom:1px solid var(--ink);border-top:none;
  padding:0 0 8px}
/* The main table was 781px of the reading column, which pushed the sections
   below it off the first screen and made them feel missing. It keeps its own
   scroll so the sections under it are always in reach, and anyone who wants
   the whole list scrolls the table rather than the page. */
.vtbl{max-height:min(46vh,430px);overflow:auto}
#vtable thead th{position:sticky;top:0;background:var(--canvas);z-index:1;
  box-shadow:inset 0 -1px 0 var(--hair)}
/* macOS hides the scrollbar until something scrolls, so a column that runs on
   below the fold looks finished. The reading column keeps a visible track, so
   there is always an affordance saying there is more underneath. */
.tool #panel{scrollbar-width:thin;scrollbar-color:#B9C6CB transparent}
.tool #panel::-webkit-scrollbar{width:11px}
.tool #panel::-webkit-scrollbar-track{background:var(--wash)}
.tool #panel::-webkit-scrollbar-thumb{background:#B9C6CB;border-radius:6px;
  border:3px solid var(--wash)}
.tool #panel::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.vtbl{max-height:min(38vh,340px)}
.moreline{margin:18px 0 0}
.vtbl{max-height:none}

/* ------------------------------------------------------------------------
   The full register, and the lock.
   12 September 2026.

   Every other table here shows the top 25 of something, which is right for a
   finding and wrong for a register. This one holds all 1,563 rows, so it gets
   its own scroll and a heading that stays put while the rows move under it.
   ------------------------------------------------------------------------ */
.tool .allwrap{max-height:60vh;overflow-y:auto;overflow-x:auto;border:1px solid var(--hair);
  border-radius:6px;background:var(--canvas)}
.tool .alltbl{width:100%;border-collapse:collapse;font-size:12.5px;min-width:820px}
.tool .alltbl th{position:sticky;top:0;z-index:2;background:var(--canvas);text-align:left;
  font-weight:600;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--taupe);padding:9px 10px;border-bottom:1px solid var(--ink);white-space:nowrap}
.tool .alltbl th.n{text-align:right}
.tool .alltbl th.sortable{cursor:pointer;user-select:none}
.tool .alltbl th.sortable:hover{color:var(--ink)}
.tool .alltbl th.on{color:var(--ink)}
.tool .alltbl td{padding:6px 10px;border-bottom:1px solid var(--hair);vertical-align:top}
.tool .alltbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tool .alltbl tbody tr:hover{background:var(--wash)}
.tool .alltbl td:first-child{max-width:26ch}
.tool .alltbl td:nth-child(2),.tool .alltbl td:nth-child(3){max-width:24ch}

/* The lock says what is behind it and how much. It is never a bare padlock,
   because a reader who cannot see what they are missing has no reason to want
   it. Quiet by design: this is a note on the page, not an advertisement. */
.tool .lockbox{display:block;border:1px solid var(--hair);border-left:3px solid var(--directoire);
  border-radius:5px;padding:11px 14px;margin:12px 0 2px;background:var(--wash);
  font-size:12px;line-height:1.55;color:var(--taupe)}
.tool .lockttl{display:block;font-weight:600;color:var(--ink);font-size:12.5px;margin-bottom:3px}
.tool .lockttl:before{content:"";display:inline-block;width:9px;height:7px;margin-right:7px;
  border:1.5px solid var(--muted);border-radius:1px;border-bottom-width:5px;vertical-align:1px}
.tool .lockwhy{display:block}
.tool .lockwhy b{color:var(--ink)}
.tool .lockcta{display:inline-block;margin-top:7px;font-weight:600;font-size:12px;
  color:var(--directoire);text-decoration:none;border-bottom:1px solid currentColor}
.tool .lockcta:hover{color:var(--ink)}
.tool .lockrow{font-size:11.5px;line-height:1.5;color:var(--taupe);padding-top:9px!important}
.tool .leg.locked{cursor:default}
.tool .leg.locked:hover{background:transparent}

/* the CSV control when the tier does not carry the download */
.tool .csvlock{position:relative;opacity:.62;cursor:not-allowed}
.tool .csvlock:after{content:"";position:absolute;right:-3px;top:-3px;width:7px;height:7px;
  border-radius:50%;background:var(--directoire)}

/* The search, the dataset chooser and the download moved into the top bar on
   12 September. They had ended up 1,578 pixels down a 2,135 pixel panel, two
   screens below the fold, which is a long way to go for a control you use on
   every question. They sit on the right of the bar, opposite the question. */
.tool .qbar .qtools{display:flex;align-items:center;gap:7px;margin-left:auto;flex:0 1 auto}
.tool .qbar .qtools #q{font:inherit;font-size:12px;padding:6px 10px;width:19rem;min-width:8rem;
  border:1px solid var(--hair);border-radius:5px;background:var(--paper);color:var(--ink)}
.tool .qbar .qtools #q:focus{outline:2px solid var(--directoire);outline-offset:-1px}
.tool .qbar .qtools #dl{font:inherit;font-size:12px;padding:6px 8px;max-width:11rem;
  border:1px solid var(--hair);border-radius:5px;background:var(--paper);color:var(--ink)}
.tool .qbar .qtools #csv{font:inherit;font-size:12px;font-weight:600;padding:6px 12px;
  border:1px solid var(--ink);border-radius:5px;background:var(--paper);color:var(--ink);
  cursor:pointer;white-space:nowrap}
.tool .qbar .qtools #csv:hover{background:var(--ink);color:var(--paper)}
@media (max-width:1180px){
  .tool .qbar .qtools #q{width:11rem}
  .tool .qbar .qtools #dl{max-width:8rem}
}
@media (max-width:900px){
  .tool .qbar .qtools{margin-left:0;flex:1 1 100%;flex-wrap:wrap}
  .tool .qbar .qtools #q{flex:1 1 100%;width:auto}
}

/* The bar holds a four way question, two filter pills, a search box, a dataset
   chooser and a download. That does not fit on one line below about 1,280
   pixels, and a bar that does not wrap pushes the whole page sideways, which
   is exactly what it did at 1,100. It wraps at every width now, and the tools
   take the second line when the first is full. Nothing shrinks. */
.tool .qbar{flex-wrap:wrap;row-gap:8px}
.tool .qbar .qtools{min-width:0}
@media (max-width:1280px){
  .tool .qbar .qtools{margin-left:0;flex:1 1 100%;order:3}
  .tool .qbar .qtools #q{flex:1 1 auto;width:auto;min-width:10rem}
  /* The tools have the whole second line to themselves here, so there is no
     call to cap this at 14rem and let it shrink to nothing: that cap is what
     printed "Projects, current filter (1". Same floor as the wide layout. */
  .tool .qbar .qtools #dl{max-width:none;flex:0 0 auto;min-width:21rem}
}
/* A table wider than its column scrolls inside its own box. Without the width
   cap the box takes the table's width instead of the panel's and the page goes
   with it. */
.tool .allwrap{max-width:100%;min-width:0}
.tool #panel .vtbl,.tool #panel #vtable{max-width:100%}
.tool #panel .vtbl{overflow-x:auto}
/* a date never breaks across two lines */
.tool .alltbl td:nth-child(6){white-space:nowrap}
/* 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}
/* The shell stacks the panel above the map at 720px, in brand.css. This rule
   used to widen the panel at 900px, which is 180 pixels earlier than the
   stack. Between the two the panel took the whole row and squeezed the map
   to about 180 pixels wide, which is too narrow to read Great Britain in.
   The two breakpoints now agree. */
@media (max-width:720px){ #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}
.pp-sect{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin:9px 0 3px;padding-top:6px;border-top:1px solid var(--hair)}
/* The period a section's figures cover, sitting under its heading the way a
   subtitle sits under a chart title. Quiet, because it is context rather than
   a finding, but present where the figures are rather than pages below them. */
.pp-cap{font-size:11px;color:var(--faint);margin:0 0 8px;line-height:1.4}

/* ---- the site dock -------------------------------------------------------
   One site's record used to open in a bubble anchored above the circle you
   clicked. The record is 23 rows long, so the bubble was 1,054 px tall and
   anchoring it above the marker put its top off the screen at every window
   size, including a 1,200 px one. There is no bubble geometry that fixes
   that, so the record moved out of the map and alongside it: full height,
   scrolling within itself, and pushing the map rather than covering it, so
   the circle you clicked stays visible next to what it says. */
#site{flex:none;width:var(--sitew,428px);height:100%;display:flex;flex-direction:column;
  background:var(--paper);border-left:1px solid var(--hair);z-index:1002;
  /* Inside the bubble this text was sized by .leaflet-popup-content. Out of it
     the record inherited the page's base size and read a third too large, so
     the size travels with the record now rather than with where it sits. */
  font-size:12.5px;line-height:1.55}
#site[hidden]{display:none}
#site .shead{flex:none;display:flex;align-items:flex-start;gap:14px;
  padding:20px 26px 15px;border-bottom:1px solid var(--hair)}
#site .shead .pp-co{font-size:15px;line-height:1.3}
#site .sid{min-width:0}
#site .shead .pp-co{margin:0}
#site .shead .pp-grp{margin:2px 0 0}
#site .sclose{margin-left:auto;flex:none;font:inherit;font-size:11.5px;font-weight:600;
  padding:5px 12px;border:1px solid var(--hair);border-radius:8px;background:var(--paper);
  color:var(--muted);cursor:pointer}
#site .sclose:hover{border-color:var(--accent);color:var(--accent)}
/* flex:1 alone is not enough. A flex child's minimum height defaults to its
   content, so without min-height:0 this grows past the panel and never
   scrolls, which is exactly how it behaved. */
#site .sbody{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 26px 36px}
#site .sbody .pp-sect:first-child{margin-top:0}

/* A circle that is open reads as open, so the map and the dock are obviously
   about the same site. */
.leaflet-container canvas{outline:none}

/* Narrow screens stack the panel above the map, where a column of its own has
   nowhere to go, so the record covers the screen instead and closes back to
   the map. */
/* Below this the map has less to give than the record needs, so the dock
   gives width back rather than squeezing the map into a strip. */
@media (max-width:1360px){
  #site{width:var(--sitew,384px)}
  #site .shead{padding:18px 20px 14px}
  #site .sbody{padding:16px 20px 32px}
}
@media (max-width:900px){
  #site{position:fixed;inset:0;width:auto;z-index:3500;
    box-shadow:0 -8px 40px rgba(0,88,113,.18)}
  #site .sbody{padding-bottom:40px}
}

/* Inside the dock the rows are a label and a number, and only one of the two
   should ever break. A label split across two lines ("Told to put / power in")
   reads as damage; a long value wrapping under itself reads as a value. So the
   label holds its line and the value takes what is left and wraps into it. */
#site .pp-row{align-items:baseline;gap:16px;padding:5px 0}
#site .pp-row span:first-child{flex:0 0 auto;white-space:nowrap}
#site .pp-row span:last-child{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
/* Where a label genuinely cannot hold its line, it wraps rather than spilling
   out of the panel. Long ones are marked by their own length, not by hand. */
#site .pp-row span:first-child{max-width:72%;white-space:normal}
#site .pp-row span:first-child{text-wrap:pretty}

/* Money in and money out. Two bars on one shared scale, so the comparison the
   reader used to do in their head is done by the length of the bars. The scale
   is the larger of the two totals, which is why a site that pays more to charge
   than it earns fills the lower bar and leaves the upper one short. Only
   measured money is drawn; the arbitrage estimate keeps its dashed box. */
#site .mio{margin:9px 0 4px}
#site .mio-r{display:flex;align-items:center;gap:9px;margin-bottom:5px}
#site .mio-k{flex:0 0 26px;font-size:11px;color:var(--muted)}
#site .mio-t{flex:1 1 auto;min-width:0;display:flex;height:14px;border-radius:3px;
  background:var(--wash);overflow:hidden}
/* A real figure never renders as nothing. */
#site .mio-t i{display:block;height:100%;min-width:2px}
#site .mio-v{flex:0 0 auto;font-size:13px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}
#site .mio-v.neg{color:var(--alert)}
/* Every segment is named and valued here, so identity never rests on fill
   alone and the exact number is not lost to a two pixel sliver. */
#site .mio-l{display:flex;flex-wrap:wrap;gap:3px 13px;margin:8px 0 0;
  font-size:11px;color:var(--muted);line-height:1.5}
#site .mio-c i{display:inline-block;width:8px;height:8px;border-radius:2px;
  margin-right:5px;box-shadow:inset 0 0 0 1px rgba(0,88,113,.20)}
#site .mio-c b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
#site .mio-n{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:9px;padding-top:8px;border-top:1px solid var(--hair);font-size:12px;
  color:var(--muted)}
#site .mio-n b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
#site .mio-n .neg b{color:var(--alert)}
/* The net is the conclusion, so it takes the rule and the weight. The per kW
   figure sits under it as the same accounting seen another way, and a second
   hairline between the two would read as two separate tables. */
#site .mio-n.sub{border-top:0;margin-top:3px;padding-top:0;font-size:11px;line-height:1.4}
#site .mio-n.sub b{font-size:12px}
/* Where the total is withheld the row still holds its place, so the card does
   not look as though a figure failed to load. The reason follows it directly. */
#site .mio-n .why{font-size:11px;color:var(--faint);letter-spacing:.06em;
  text-transform:uppercase}

/* The revenue panel. Four measured lines and one estimate held apart from
   them, so the money is a table of figures rather than four paragraphs with
   numbers buried in the sentences. Narrower than the front page panel because
   this one lives in the side column. */
.rev{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:10px;
  overflow:hidden;margin:10px 0 4px}
.rev .r{background:#fff;padding:12px 12px 11px}
.rev .r b{display:block;font-size:21px;line-height:1.05;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.rev .r span{display:block;font-size:11px;color:var(--muted);margin-top:5px;line-height:1.35}
/* The money paid out is set in ink with the minus sign carrying the meaning,
   not in red: on this page red already means energy out, discharging, in the
   live strip just above, and one colour cannot mean two things a hand's
   width apart. */
.rev .r.out b{color:var(--ink)}
.rev .r.net{background:var(--paper)}
.rev .r.net b{color:var(--brand)}
/* The live strip: the fleet's position this minute, folded to its two sums.
   Same feed and colours as the front page's figure; red is energy out,
   blue is energy in, and nothing else on the panel wears those two. */
.now{margin:14px 0 2px;padding:14px 14px 12px;background:#fff;border:1px solid var(--hair);border-radius:10px}
.now .skel{color:var(--faint);font-size:12.5px;margin:0;padding:14px 0}
.now .eyebrow{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);font-weight:600;margin:0 0 10px}
.now .eyebrow i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin:0 6px 1px 0;vertical-align:middle}
.now .eyebrow i.stale{background:var(--d-idle)}
.nowfig{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nowfig .n b{display:block;font-size:24px;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.nowfig .n.out b{color:var(--d-up)}
.nowfig .n.in b{color:var(--d-dn)}
.nowfig .n span{display:block;font-size:11px;color:var(--muted);margin-top:4px;line-height:1.35}
.nowfig .n.in{text-align:right}
.nowbar{position:relative;height:14px;margin:12px 0 4px;background:var(--wash);border-radius:3px;overflow:hidden}
.nowbar i{position:absolute;top:0;bottom:0}
.nowbar .out{left:50%;background:var(--d-up)}
.nowbar .in{right:50%;background:var(--d-dn)}
.nowbar .z{left:50%;width:1px;background:var(--ink);opacity:.6}
.nowax{display:flex;justify-content:space-between;font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums}
.now .note{margin:8px 0 0}
/* the estimate never sits in the same box as the measured lines */
.revest{border:1px dashed var(--hair);border-radius:10px;padding:12px;margin:8px 0 4px;
  background:transparent}
.revest b{font-size:19px;font-variant-numeric:tabular-nums}
.revest span{display:block;font-size:11px;color:var(--muted);margin-top:5px;line-height:1.4}

/* the words that open a list, at the small scale of the tool head */
.tn details{position:relative}
.tn summary{list-style:none;cursor:pointer;white-space:nowrap;color:var(--muted);user-select:none}
.tn summary::-webkit-details-marker{display:none}
.tn summary::after{content:"";display:inline-block;width:4px;height:4px;margin:0 0 2px 5px;
 border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.6}
.tn summary:hover,.tn details[open]>summary{color:var(--ink)}
.tn summary.on{color:var(--ink);font-weight:600}
.tn .ddp{position:absolute;top:calc(100% + 6px);left:0;min-width:12rem;background:var(--paper);
 border:1px solid var(--hair);border-radius:10px;padding:6px;box-shadow:0 6px 22px rgba(0,88,113,.16);z-index:9999}
.tn .ddp a{display:block;padding:7px 10px;border-radius:6px;font-size:12.5px;color:var(--ink);white-space:nowrap}
.tn .ddp a:hover{background:var(--wash);text-decoration:none;color:var(--ink)}
.tn .ddp a.on{font-weight:600;background:var(--wash)}
.tn .ddp .ddh{display:block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:7px 10px 2px}
.tn .ddp .soon{display:block;padding:6px 10px;font-size:12px;color:var(--muted)}