@import url('/lib/schibsted.css');
@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);
}
/* The Italy Development Atlas, /it/atlas/. Written into /it-atlas.css by
   site/build/it_atlas.py after the tokens; the Great Britain Atlas idiom, on
   white, one accent. 30 September 2026. */
:root{--display:'Schibsted Grotesk',Inter,'Helvetica Neue',Arial,sans-serif;--body:Inter,'Helvetica Neue',Arial,sans-serif;
 --bg:var(--canvas);--sun:var(--d-sun);--grey:var(--d-idle)}
*{box-sizing:border-box}
html,body{height:100%}
body.itatlas{margin:0;display:flex;flex-direction:column;overflow:hidden;background:var(--canvas);color:var(--ink);font:400 15px/1.5 var(--body);-webkit-font-smoothing:antialiased}
body.itatlas a{color:var(--accent);text-decoration:none}
h1,h2,h3,.fig b,.tabs,.btn{font-family:var(--display)}
/* the tool head, as the Great Britain Atlas draws it */
.toolhead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;padding:8px 22px 7px;border-bottom:1px solid var(--hair);background:var(--canvas);flex:0 0 auto}
.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}
.toolhead .tb span{white-space:nowrap}
.tn{display:flex;align-items:center;gap:14px;font-size:12px;flex-basis:auto}
.tn a{color:var(--muted);text-decoration:none;white-space:nowrap}
.tn a:hover{color:var(--ink);text-decoration:underline}
.toolhead .asof{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
/* Layout: the Great Britain Atlas idiom. A "show" bar of views and filters, the map on the left with its legend beneath,
   the reading panel on the right: headline, four figures, then the register in collapsible sections. White ground,
   one accent. Single light theme by choice: the site's brand guide draws charts on white only. */
*{box-sizing:border-box}
html,body{height:100%}
/* show bar */
.show{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:10px 20px;border-bottom:1px solid var(--hair);background:#fff}
.show .lbl{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.tabs{display:flex;border:1px solid var(--ink);border-radius:8px;overflow:hidden}
.tabs button{font:600 14px var(--display);padding:7px 13px;background:#fff;border:0;border-right:1px solid var(--ink);color:var(--ink);cursor:pointer}
.tabs button:last-child{border-right:0}
.tabs button.on{background:var(--ink);color:#fff}
.tabs button:focus-visible,select:focus-visible,input:focus-visible,.acc summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto;align-items:center}
select,input[type=search]{font:500 14px var(--body);color:var(--ink);background:#fff;border:1px solid var(--hair);border-radius:8px;padding:7px 10px}
input[type=search]{min-width:15rem}
.filters .pill{font:600 13px var(--body);padding:7px 12px;border:1px solid var(--hair);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer}
/* body */
.show{flex:0 0 auto}
.main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.32fr);flex:1 1 auto;min-height:0}
.main>*{min-width:0;min-height:0}
.left{display:flex;flex-direction:column;border-right:1px solid var(--hair)}
#map{flex:1 1 auto;min-height:340px;background:#fff}
.leaflet-container{font-family:var(--body);background:#fff}
.leaflet-popup-content-wrapper{border-radius:8px;box-shadow:0 8px 24px rgba(27,35,39,.14)}
.leaflet-popup-content{margin:12px 14px;font:400 13.5px/1.45 var(--body);color:var(--ink);min-width:220px}
.leaflet-popup-content b{font-family:var(--display);font-size:15px}
.leaflet-popup-content .pm{color:var(--muted);font-size:12.5px}
.leaflet-popup-content .bars{margin-top:8px;display:grid;gap:3px}
.leaflet-popup-content .bar{display:grid;grid-template-columns:8.6rem 1fr 3.2rem;gap:6px;align-items:center;font-size:12px;color:var(--muted)}
.leaflet-popup-content .bar i{display:block;height:8px;border-radius:2px;background:var(--s5)}
.leaflet-popup-content .bar em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.leaflet-control-attribution{font:11px var(--body);color:var(--faint);background:rgba(255,255,255,.8)}
.leaflet-bar a{color:var(--ink)}
.rlabel{background:none;border:0;box-shadow:none;font:600 10.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:#A39A88;pointer-events:none}
.legend{padding:14px 18px 16px;border-top:1px solid var(--hair);font-size:12.5px;color:var(--muted);line-height:1.45;display:grid;gap:10px}
.legend h4{margin:0;font:600 11px var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.sizes{display:flex;gap:18px;align-items:flex-end}
.sizes span{display:flex;flex-direction:column;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.sizes i{display:block;border-radius:50%;background:var(--s5);opacity:.75;border:1px solid #fff}
.ramp{display:flex;gap:2px}.ramp i{flex:1;height:10px;border-radius:2px}
.ramp+div{display:flex;justify-content:space-between;font-size:11.5px}
.keyrow{display:flex;flex-wrap:wrap;gap:6px 14px}.keyrow span i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
/* panel */
.right{overflow:auto;padding:26px 30px 40px}
.eyebrow{font:600 11px var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
h1{font-size:28px;line-height:1.15;letter-spacing:-.015em;font-weight:600;margin:0 0 10px;text-wrap:balance;max-width:34ch}
.stand{font-size:16px;line-height:1.5;color:var(--muted);max-width:62ch;margin:0 0 18px}
.figs{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink);border-bottom:1px solid var(--hair);margin:0 0 22px}
.fig{padding:12px 14px 12px 0;border-right:1px solid var(--hair);margin-right:14px}
.fig:last-child{border-right:0;margin-right:0}
.fig span{display:block;font:600 11px var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.fig b{display:block;font-size:26px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:normal;margin-top:2px}
.fig b small{font:500 12px var(--body);color:var(--muted);letter-spacing:0;margin-left:4px}
.showing{font-size:13px;color:var(--faint);margin:-12px 0 18px;min-height:1.2em}
.showing b{color:var(--ink);font-weight:600}
.acc{border-top:1px solid var(--hair)}
.acc summary{list-style:none;cursor:pointer;font:600 16px var(--display);padding:13px 0;display:flex;gap:10px;align-items:center;color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::before{content:"";width:0;height:0;border-left:6px solid var(--ink);border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .15s}
.acc[open] summary::before{transform:rotate(90deg)}
.acc .in{padding:0 0 22px}
.acc p{max-width:66ch;margin:0 0 10px}
.note{font-size:13px;color:var(--faint);line-height:1.5;max-width:66ch}
table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
th{font:600 11px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 10px 6px 0;border-bottom:1px solid var(--ink)}
td{padding:7px 10px 7px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.num{text-align:right}th.num{text-align:right}
tr.click{cursor:pointer}tr.click:hover td{background:var(--wash)}
/* stage bars */
.bars{display:grid;gap:8px;margin:4px 0 14px}
.brow{display:grid;grid-template-columns:15rem 1fr 4.5rem;gap:10px;align-items:center;font-size:13.5px}
.brow .bg{background:var(--wash);border-radius:3px;height:14px;position:relative}
.brow .bg i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--s5)}
.brow em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.brow .l{color:var(--ink)}.brow .l small{display:block;color:var(--muted);font-size:12px}
.stack{display:flex;height:22px;border-radius:4px;overflow:hidden;margin:6px 0 8px}
.stack i{display:block;height:100%}
.more{font:600 13px var(--body);color:var(--accent);background:none;border:0;cursor:pointer;padding:8px 0}
.empty{border:1px dashed var(--hair);border-radius:10px;padding:22px 24px;max-width:62ch;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-family:var(--display);font-size:17px;margin-bottom:6px}
.empty ul{margin:8px 0 0;padding-left:18px}
@media (max-width:900px){
 body.itatlas{overflow:auto;height:auto}
 .toolhead{padding:7px 16px 6px}.toolhead .asof{flex-basis:100%;margin-left:0}
 .tabs{display:grid;grid-template-columns:1fr 1fr;width:100%}
 .tabs button{border-right:0;border-bottom:1px solid var(--ink);white-space:nowrap;padding:8px 6px;font-size:13.5px}
 .tabs button:nth-child(odd){border-right:1px solid var(--ink)}
 .tabs button:nth-child(n+3){border-bottom:0}
 .filters{width:100%}.filters select{flex:1 1 40%}
 .main{grid-template-columns:1fr;flex:none}
 .left{border-right:0;border-bottom:1px solid var(--hair)}
 #map{height:70vh;min-height:420px}
 .right{padding:22px 16px 36px}
 .figs{grid-template-columns:1fr 1fr}.fig:nth-child(2){border-right:0}.fig{padding-right:8px}
 .show{padding:10px 16px}.filters{margin-left:0}input[type=search]{min-width:0;width:100%}
 h1{font-size:24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.tscroll{overflow-x:auto}
/* the month's ledger */
.figs-ch{margin-top:6px}
.figs-ch .fig b{font-size:22px}
.right h3{font-size:15px;margin:18px 0 6px}
table.chg td b{font-weight:600}
.tag-new,.tag-left{font:600 10.5px var(--body);letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:4px;vertical-align:1px}
.tag-new{background:#FBEFD2;color:#6A4A00}
.tag-left{background:var(--alert-wash);color:var(--alert)}

/* 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)}