@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
:root{
--navy:#1C334B;--navy2:#2C486A;--navy-deep:#16263A;--slate:#99AABE;--ammonia:#B7A5D0;--teal:#54BD91;
--ink:#1C334B;--bg:#F7F9FB;--alt:#EEF2F6;
--electric:#5FC5F1;--thermal:#FF8D64;--biogas:#88DCBB;
--line:#D7DEE6;--check:#2F9E6B;--white:#fff;--beige:#F3FCF8;
--o100:#FFEEE5;--o200:#FFC2A8;
--shadow-xs:0 1px 2px rgba(28,51,75,.06);
--shadow-sm:0 1px 3px rgba(28,51,75,.08),0 1px 2px rgba(28,51,75,.06);
--shadow-md:0 4px 12px rgba(28,51,75,.10),0 2px 4px rgba(28,51,75,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Poppins",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:16.5px}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--navy2)}
img{max-width:100%;display:block}
h1,h2,h3{letter-spacing:-.4px;color:var(--navy)}

/* buttons — from styles.css */
.btn{display:inline-block;padding:10px 18px;border-radius:8px;font-weight:600;font-size:14.5px;border:2px solid var(--navy);color:var(--navy);background:none;font-family:inherit;cursor:pointer}
.btn.solid{background:var(--navy);color:#fff}
.btn.solid:hover{background:var(--navy2)}
.btn:hover{border-color:var(--navy2)}

/* section jump bar */
/* `display:block` is not decoration. styles.css carries a bare `nav{display:flex;flex:1}`
   for the header menu, and it applies to every <nav> on the page, this bar included. As a
   flex container the bar makes its inner .wrap a flex item, which shrinks to fit its buttons,
   and .wrap's own `margin:0 auto` then centres that shrunken box. Pinned back to block here,
   at a specificity that beats the bare element rule, so the bar fills the width and the
   buttons start at the same left edge as the heading above them. */
/* The site header is itself sticky at top:0 with a higher stacking order, so a section
   bar pinned to 0 slides underneath it and never appears to pin at all. It sits below
   the header instead. --hdrh and --secbarh are measured at runtime, because the header
   grows when the nav wraps and the logo settles only once its image has loaded; the
   fallbacks are the desktop sizes, so the bar still pins with scripting off. */
nav.secbar{display:block;background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:var(--hdrh,67px);z-index:45;box-shadow:var(--shadow-xs)}
nav.secbar .wrap{display:flex;justify-content:flex-start;gap:8px;flex-wrap:wrap;padding:12px 24px}
/* two pinned bars sit above the page, so an anchor jump has to clear both of them or
   it lands with the heading hidden behind them */
html{scroll-padding-top:calc(var(--hdrh,67px) + var(--secbarh,51px) + 14px)}
section.sec[id],main[id]{scroll-margin-top:calc(var(--hdrh,67px) + var(--secbarh,51px) + 14px)}
nav.secbar a{display:inline-flex;align-items:center;gap:8px;padding:9px 17px;border-radius:999px;font-size:14px;font-weight:600;color:var(--navy2);border:1.5px solid var(--line);background:var(--white);transition:background .15s,color .15s,border-color .15s}
nav.secbar a i{width:9px;height:9px;border-radius:50%;flex:none;background:var(--slate)}
nav.secbar a:hover{color:var(--navy)}
/* one colour per section, matching its heading, cards, and charts */
nav.secbar a.s-gen{border-color:var(--electric)} nav.secbar a.s-gen i{background:var(--electric)}
nav.secbar a.s-gen:hover{background:rgba(95,197,241,.14)}
nav.secbar a.s-gen.on{background:var(--electric);border-color:var(--electric);color:var(--navy)}
nav.secbar a.s-org{border-color:var(--thermal)} nav.secbar a.s-org i{background:var(--thermal)}
nav.secbar a.s-org:hover{background:rgba(255,141,100,.14)}
nav.secbar a.s-org.on{background:var(--thermal);border-color:var(--thermal);color:var(--navy)}
nav.secbar a.s-txn{border-color:var(--biogas)} nav.secbar a.s-txn i{background:var(--biogas)}
nav.secbar a.s-txn:hover{background:rgba(136,220,187,.18)}
nav.secbar a.s-txn.on{background:var(--biogas);border-color:var(--biogas);color:var(--navy)}
nav.secbar a.s-dl{border-color:var(--ammonia)} nav.secbar a.s-dl i{background:var(--ammonia)}
nav.secbar a.s-dl:hover{background:rgba(183,165,208,.18)}
nav.secbar a.s-dl.on{background:var(--ammonia);border-color:var(--ammonia);color:var(--navy)}
nav.secbar a.s-nt{border-color:var(--navy2)} nav.secbar a.s-nt i{background:var(--navy2)}
nav.secbar a.s-nt:hover{background:var(--alt)}
nav.secbar a.s-nt.on{background:var(--navy);border-color:var(--navy);color:#fff}
nav.secbar a.on i{background:var(--navy)}
nav.secbar a.s-nt.on i{background:#fff}
/* Narrow screens kept the bar static, which is where it was needed most. It pins here
   too; the pills stay on one scrollable line rather than wrapping to three rows, so the
   pinned strip cannot eat the screen. The site nav is hidden below 900px, which makes
   the header shorter, and that is measured rather than assumed. */
@media(max-width:700px){
  nav.secbar a{padding:8px 14px;font-size:13px}
  nav.secbar .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:10px 16px}
  nav.secbar .wrap::-webkit-scrollbar{display:none}
  nav.secbar a{flex:none}
}

/* page hero */
.pagehero{padding:44px 0 34px}
.pagehero h1{color:var(--navy);font-size:36px;line-height:1.15;margin-bottom:12px}
.pagehero p.sub{color:#4A5B6D;font-size:16.5px;max-width:830px}
.pagehero p.scope{color:#6B7C8E;font-size:13.5px;margin-top:12px;max-width:760px}
.herotop{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:12px}
.herotop h1{margin-bottom:0}
.pagehero p.asof{display:inline-flex;align-items:center;gap:6px;flex:none;padding:7px 15px;border:1px solid var(--line);border-radius:999px;background:var(--white);font-size:13px;color:#5D7185;white-space:nowrap}
.pagehero p.asof b{color:var(--navy);font-weight:700}
.pagehero .countbar{width:140px;margin:16px 0 18px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5D7185;margin-bottom:10px}
.countbar{height:4px;background:linear-gradient(90deg,var(--electric) 0 33.3%,var(--thermal) 33.3% 66.6%,var(--biogas) 66.6% 100%);border-radius:2px;max-width:150px}


/* sections */
section.sec{padding:44px 0 10px}
section.sec.alt{background:var(--alt)}
section.sec:last-of-type{padding-bottom:56px}
/* Section heading. A grid, so the colour bar can take a row of its own — spanning both
   columns to force the break, but painted at its 64px accent width, the same stub the hero
   uses — with the heading and, where a section carries one, its own as-of date sharing the
   row beneath. Written identically in both dashboards so the two pages read the same.
   The fuels file previously set the bar to flex-basis:100% and then to width:64px, and the
   basis won: the accent stub came out as a full-width rule the electricity page never had. */
.sechead{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 18px;margin-bottom:6px}
.sechead .bar{grid-column:1/-1;height:7px;width:64px;border-radius:4px;margin-bottom:14px}
.sechead h2{font-size:33px;line-height:1.15}
.sechead .secasof{font-size:13px;color:#5D7185;white-space:nowrap}
.sechead .secasof b{color:var(--navy);font-weight:700}
@media(max-width:560px){.sechead{grid-template-columns:1fr}.sechead .secasof{margin-top:4px}}
.seclead{font-size:15px;color:#4A5B6D;max-width:820px;margin:6px 0 20px}

/* filter bar */
.filters{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-xs);margin-bottom:20px}
.filters .ftitle{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#5D7185;font-weight:700;margin-bottom:11px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:11px}
.fgrid label{display:block;font-size:11.5px;font-weight:700;color:var(--navy2);margin-bottom:4px;letter-spacing:.02em}
.fgrid select{width:100%;font-family:inherit;font-size:13.5px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);font-weight:500}
.fgrid select:focus{outline:2px solid var(--electric);outline-offset:1px}
.ms{position:relative}
.msbtn{display:flex;align-items:center;gap:8px;width:100%;background:var(--white);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:inherit;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer;text-align:left}
.msbtn:hover{border-color:var(--slate)}
.msbtn[aria-expanded="true"]{border-color:var(--electric);box-shadow:0 0 0 2px rgba(95,197,241,.35)}
.msbtn.on{border-color:var(--navy);background:var(--beige);font-weight:600;color:var(--navy)}
.msbtn .mslab{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msbtn .msarrow{width:7px;height:7px;border-right:2px solid var(--slate);border-bottom:2px solid var(--slate);transform:rotate(45deg) translateY(-2px);flex:none}
table.ut tr.fr .msbtn{padding:5px 7px;font-size:11.5px;min-width:86px}
/* The filter row sits inside a thead whose rule sets color:#fff for the navy header above it.
   The button declares its own colour, but its label span does not, so the label is left depending
   on that resolving the right way and can come out white on a near-white row. Pinned here at a
   specificity that beats `table.dt th`, so it cannot depend on cascade order at all. */
table.ut tr.fr .msbtn,table.ut tr.fr .msbtn .mslab{color:var(--ink);font-weight:600}
table.ut tr.fr .msbtn.on,table.ut tr.fr .msbtn.on .mslab{color:var(--navy);font-weight:700}
.mspanel{position:fixed;z-index:200;background:var(--white);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow-md);max-width:330px;overflow:hidden}
.mspanel .msfind{padding:8px 8px 4px;border-bottom:1px solid var(--line)}
.mspanel .msfind input{width:100%;font-family:inherit;font-size:12.5px;padding:6px 9px;border:1px solid var(--line);border-radius:7px;color:var(--ink)}
.mspanel .msopts{max-height:250px;overflow:auto;padding:6px}
.mspanel label{display:flex;align-items:flex-start;gap:9px;padding:7px 9px;border-radius:7px;font-size:13px;color:var(--ink);cursor:pointer;line-height:1.35}
.mspanel label:hover{background:var(--alt)}
.mspanel label input{margin-top:2px;accent-color:var(--navy);flex:none}
.mspanel .msfoot{display:flex;gap:6px;justify-content:space-between;padding:7px 9px;border-top:1px solid var(--line);background:var(--bg)}
.mspanel .msfoot button{background:none;border:0;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--navy2);cursor:pointer;padding:3px 6px;border-radius:6px}
.mspanel .msfoot button:hover{background:var(--alt);color:var(--navy)}
.chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:13px;min-height:2px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--navy);color:#fff;border-radius:999px;padding:5px 8px 5px 12px;font-size:12.5px;font-weight:600}
.chip b{font-weight:500;opacity:.72;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.chip button{background:rgba(255,255,255,.2);border:0;color:#fff;width:17px;height:17px;border-radius:50%;cursor:pointer;font-size:12px;line-height:1;font-family:inherit}
.chip button:hover{background:rgba(255,255,255,.4)}
.clearall{background:none;border:0;color:var(--navy2);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:underline}
.hint{font-size:12.5px;color:#6B7C8E;margin-top:11px}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:24px}
.kpi{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:17px 18px 16px;box-shadow:var(--shadow-xs)}
.kpi .bar{height:7px;border-radius:16px 16px 0 0;margin:-17px -18px 15px;width:auto}
.bar.electric{background:var(--electric)}.bar.thermal{background:var(--thermal)}.bar.biogas{background:var(--biogas)}.bar.ammonia{background:var(--ammonia)}.bar.slate{background:var(--slate)}.bar.navy{background:var(--navy2)}
.kpi .v{font-size:29px;font-weight:800;color:var(--navy);line-height:1.1;letter-spacing:-1px}
.kpi .v small{font-size:14px;font-weight:700;color:var(--navy2);letter-spacing:0}
.kpi .l{font-size:13px;font-weight:600;color:var(--navy2);margin-top:6px;line-height:1.35}

/* chart cards */
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:18px}
.chart{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow-xs);display:flex;flex-direction:column}
.chart.wide{grid-column:1/-1}
.chart .bar{height:7px;border-radius:16px 16px 0 0;margin:-20px -20px 16px;width:auto}
.chart h3{font-size:17px;margin-bottom:14px}
#card-unittable .sub,#card-txntable .sub{font-size:13px;color:#5D7185;margin-bottom:14px}
.ctrls{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:14px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.ctrls .sp{flex:1}
.ctrls.labelled{align-items:flex-end}
.tgroup{display:flex;flex-direction:column;gap:5px}
.tglab{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5D7185;line-height:1}
.ctrls.titlerow{padding-bottom:11px}
.ctrls.titlerow h3{margin:0;flex-shrink:0}
.tg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.tg button{background:var(--white);border:0;padding:6px 11px;font-family:inherit;font-size:12px;font-weight:600;color:var(--navy2);cursor:pointer;border-right:1px solid var(--line)}
.tg button:last-child{border-right:0}
.tg button.on{background:var(--navy);color:#fff}
.tg button:hover:not(.on){background:var(--alt)}
.icb{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-family:inherit;font-size:12px;font-weight:600;color:var(--navy2);cursor:pointer}
.icb:hover{background:var(--alt);border-color:var(--slate)}
.icb.clearfilt:not([disabled]){border-color:var(--navy);color:var(--navy);font-weight:700}
.icb.clearfilt:not([disabled]):hover{background:var(--navy);color:#fff}
.icb[disabled]{opacity:.45;cursor:default}
.icb[disabled]:hover{background:var(--white);border-color:var(--line)}
.cmenu{position:relative;display:inline-block}
.cmenu>button{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:6px 9px;cursor:pointer;color:var(--navy2);line-height:0}
.cmenu>button:hover{background:var(--alt);border-color:var(--slate)}
.cmenu>button svg{width:15px;height:15px}
.cmenu .drop{position:absolute;right:0;top:calc(100% + 6px);background:var(--white);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-md);min-width:186px;padding:6px;display:none;z-index:30}
.cmenu.open .drop{display:block}
.cmenu .drop button{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;padding:8px 10px;border-radius:7px;font-family:inherit;font-size:13px;font-weight:600;color:var(--navy2);cursor:pointer;text-align:left}
.cmenu .drop button:hover{background:var(--alt);color:var(--navy)}
.cmenu .drop button svg{width:14px;height:14px;flex:none;opacity:.75}
/* information control beside a chart title, carrying the note that used to sit under
   the chart. Opens on hover, on keyboard focus, and on click for touch, where there
   is no hover to rely on. */
.chart h3{display:flex;align-items:center;gap:7px}
.cinfo{position:relative;display:inline-flex;flex:none}
.cinfo[hidden]{display:none}
.ci{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;padding:0;
  border:0;border-radius:50%;background:none;color:#93A3B4;cursor:pointer;transition:color .15s}
.ci svg{width:15px;height:15px;display:block}
.cinfo:hover .ci,.cinfo.open .ci,.ci:focus-visible{color:var(--navy)}
.citip{position:absolute;left:-8px;top:calc(100% + 9px);z-index:60;display:none;
  width:max-content;max-width:min(300px,72vw);padding:10px 12px;border-radius:10px;
  background:var(--navy);color:#EEF3F8;font-size:12px;font-weight:500;line-height:1.45;
  letter-spacing:0;text-align:left;white-space:normal;box-shadow:0 6px 20px rgba(22,38,58,.26)}
.citip::before{content:"";position:absolute;left:12px;top:-5px;width:10px;height:10px;
  transform:rotate(45deg);background:var(--navy);border-radius:2px}
.cinfo:hover .citip,.cinfo:focus-within .citip,.cinfo.open .citip{display:block}
/* a card at the right edge of the grid would push its tooltip off screen */
.chart:last-child .citip,.chart.wide .citip{left:auto;right:-8px}
.chart:last-child .citip::before,.chart.wide .citip::before{left:auto;right:12px}
@media(max-width:700px){.citip{max-width:78vw}}
/* off-screen but readable: a live region has to be in the accessibility tree, which
   display:none and visibility:hidden both remove it from */
.vhidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.botrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

.botrow .foot{margin:0;padding:0;border:0;flex:1;text-align:right;min-width:120px}
.tg.icons button{display:inline-flex;align-items:center;gap:6px;padding:6px 11px}
.tg.icons svg{width:14px;height:14px;flex:none}
/* The plot takes the card's spare height. Cards in a grid row are already the same
   height, but their plots are not: a column chart's label strip is as deep as its
   longest label, so "Before 2000" makes the commissioning-year plot ~43px taller than
   the year-activated plot beside it, and the view buttons underneath ended up on
   different lines. Growing the plot box absorbs the difference and the buttons line up
   across every card in a row. This is what the fuels report already does. */
.plot{min-height:60px;flex:1;display:flex;flex-direction:column}
.plot svg{width:100%;height:auto;display:block;overflow:visible}
.plot svg g.b{cursor:pointer}
.plot svg g.b:hover rect.f{fill:var(--electric)}
.plot svg g.b:hover path.f{opacity:.8}
.chips .chip{background:var(--navy)}
.plot svg g.b:focus{outline:none}
.plot svg g.b:focus-visible rect{stroke:var(--navy);stroke-width:2.5px}
.plot svg g.b:focus rect.f,.plot svg g.b:focus path.f{stroke:var(--navy);stroke-width:2}
.tblwrap{overflow:auto;max-height:420px;border:1px solid var(--line);border-radius:12px}
table.dt{width:100%;border-collapse:collapse;font-size:13px}
table.dt th{background:var(--navy);color:#fff;font-weight:700;text-align:left;padding:9px 11px;position:sticky;top:0;font-size:12px;letter-spacing:.02em}
table.dt td{padding:8px 11px;border-top:1px solid var(--line)}
table.dt td.n{text-align:right;font-variant-numeric:tabular-nums}
table.dt tr:hover td{background:var(--beige)}
.empty{padding:34px 16px;text-align:center;color:#6B7C8E;font-size:14px}
.foot{font-size:11.5px;color:#8494A4;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}

.dlgrid{display:grid;gap:12px}
.docrow{display:flex;align-items:center;gap:20px;background:var(--white);border:1px solid var(--line);border-left:6px solid var(--ammonia);border-radius:14px;padding:18px 20px 18px 22px;box-shadow:var(--shadow-xs)}
.docrow .t{flex:1}
.docrow .t b{display:block;font-size:16px;color:var(--navy);margin-bottom:4px}
.docrow .t p{font-size:13.5px;color:#5D7185;margin:0}
.docrow .t p.meta{margin-top:9px;display:flex;gap:6px;flex-wrap:wrap}
.docrow .t p.meta .pill{font-size:11px;padding:3px 10px;border:1px solid var(--line);border-radius:999px;color:var(--navy2);font-weight:600;background:var(--bg)}
.docrow button{white-space:nowrap}
@media(max-width:640px){.docrow{flex-direction:column;align-items:flex-start}}

/* unit register */
.gsearch{font-family:inherit;font-size:13.5px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;min-width:270px;color:var(--ink);background:var(--white)}
.gsearch:focus{outline:2px solid var(--electric);outline-offset:1px}
.utcount{font-size:12.5px;font-weight:600;color:#5D7185}
.utcount b{font-weight:800;color:var(--navy)}
#ut-wrap,#tt-wrap{max-height:620px;min-height:620px}
table.ut{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
table.ut th{background:var(--navy);color:#fff;text-align:left;padding:0;position:sticky;top:0;z-index:3}
table.ut th button{width:100%;background:none;border:0;color:#fff;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.02em;padding:10px 11px;text-align:left;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap}
table.ut th button:hover{background:rgba(255,255,255,.12)}
table.ut th button .ar{opacity:.45;font-size:9px}
table.ut th button.sorted .ar{opacity:1}
table.ut tr.fr th{position:sticky;top:36px;z-index:2;background:var(--alt);padding:5px 6px;border-bottom:1px solid var(--line)}
table.ut tr.fr input,table.ut tr.fr select{width:100%;min-width:104px;font-family:inherit;font-size:11.5px;padding:5px 7px;border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--ink);font-weight:500}
table.ut tr.fr input:focus,table.ut tr.fr select:focus{outline:2px solid var(--electric);outline-offset:0}
table.ut td{padding:8px 11px;border-top:1px solid var(--line);vertical-align:top}
table.ut td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.ut td.el{font-size:12px;color:#5D7185;max-width:230px}
table.ut td.el a{color:var(--navy2);text-decoration:underline;text-decoration-color:var(--slate)}
table.ut td.el a:hover{color:var(--navy)}
table.ut td.nm{font-weight:600;color:var(--navy);max-width:210px}
table.ut tbody tr:hover td{background:var(--beige)}
.pager{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#5D7185}
.pager button{background:var(--white);border:1px solid var(--line);border-radius:7px;padding:5px 10px;font-family:inherit;font-size:12px;font-weight:600;color:var(--navy2);cursor:pointer}
.pager button:hover:not(:disabled){background:var(--alt)}
.pager button:disabled{opacity:.4;cursor:default}
.pager select{font-family:inherit;font-size:12px;padding:4px 7px;border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--ink)}

/* Back to top. A labelled pill, not a bare disc: on a page this long the control has to
   read as a control, and an unlabelled circle in the corner reads as decoration. It is
   offered as soon as the hero has scrolled away, so it is there whenever there is
   something to come back from. */
.totop{position:fixed;right:24px;bottom:24px;z-index:60;display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px 11px 15px;border-radius:999px;border:1.5px solid var(--navy);
  background:var(--navy);color:#fff;font-family:inherit;font-size:14px;font-weight:700;line-height:1;
  cursor:pointer;box-shadow:0 6px 20px rgba(11,42,68,.32);
  transition:background .15s,transform .15s,box-shadow .15s}
.totop:hover{background:var(--navy2);border-color:var(--navy2);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(11,42,68,.42)}
.totop:focus-visible{outline:3px solid var(--electric);outline-offset:3px}
.totop svg{width:16px;height:16px;flex:none}
.totop[hidden]{display:none}
@media(max-width:700px){.totop{right:14px;bottom:14px;padding:10px 15px 10px 13px;font-size:13px}}

.notes details{background:var(--white);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;box-shadow:var(--shadow-xs)}
.notes summary{cursor:pointer;padding:15px 18px;font-weight:700;font-size:15px;color:var(--navy);list-style:none;display:flex;align-items:center;gap:10px}
.notes summary::-webkit-details-marker{display:none}
.notes summary::after{content:'';width:8px;height:8px;border-right:2px solid var(--slate);border-bottom:2px solid var(--slate);transform:rotate(45deg);margin-left:auto;flex:none;transition:transform .18s}
.notes details[open] summary::after{transform:rotate(225deg)}
.notes summary:hover{background:var(--alt);border-radius:13px}
.notes details[open] summary{border-bottom:1px solid var(--line);border-radius:13px 13px 0 0}
.notes summary:focus-visible{outline:2px solid var(--electric);outline-offset:2px}
.notes .nb{padding:16px 18px 22px;font-size:14px;color:#4A5B6D}
.notes .nbtools{display:flex;justify-content:flex-end;margin:0 0 4px}
.notes .nh{font-size:14.5px;color:var(--navy);margin:22px 0 9px;padding-top:16px;border-top:1px solid var(--line)}
.notes .nh:first-child{margin-top:2px;padding-top:0;border-top:0}
.notes .nb p{margin-bottom:11px}
.notes .nb p:last-child{margin-bottom:0}
.notes .nb b{color:var(--navy);font-weight:600}
.notes .nb ul{margin:0 0 11px 19px}
.notes .nb li{margin-bottom:6px}
.notes .nb li ul{margin:8px 0 0 2px}
.notes .nb li li{margin-bottom:7px}
.notes .nb ul:last-child{margin-bottom:0}
.notes .nb code{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:12.5px;background:var(--alt);border-radius:4px;padding:1px 5px;color:var(--navy)}
.placeholder{border:2px dashed var(--slate);border-radius:16px;padding:30px 26px;color:#5D7185;background:rgba(153,170,190,.07)}
.placeholder h4{color:var(--navy);font-size:15px;margin:18px 0 8px}
.placeholder ul{margin:0 0 4px 20px;font-size:14px}
.placeholder li{margin-bottom:4px}
.placeholder code{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:12.5px;background:var(--white);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--navy)}
@media(max-width:820px){
 .charts{grid-template-columns:1fr}
 .pagehero h1{font-size:26px}
}
@media(prefers-reduced-motion:no-preference){
 .kpi .v{transition:color .18s}
}