@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:#5D7185;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:var(--slate);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:#5D7185;margin-top:11px}

/* a card holding a slot: no controls, nothing plotted, a dashed frame and a line of text */
.chart .holder{border:1px dashed var(--line);border-radius:12px;padding:26px 22px;text-align:center;
  color:#5D7185;font-size:13.5px;line-height:1.55;background:var(--bg)}
.chart .holder b{color:var(--navy);font-weight:600}

/* 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}
.chart h3:has(+.sub){margin-bottom:4px}
.chart h3+.sub{font-size:13px;font-weight:600;color:#5D7185;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}
.tgroup[hidden]{display:none}
.tglab{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);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}}
.botrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
/* the auto margin above collapses to nothing on a card with no spare height, so the
   breathing room the plot used to get from that margin is put on the plot itself */
.botrow .foot{margin:0;padding:0;border:0;flex:1;text-align:left;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}
.plot{min-height:60px;flex:1;display:flex;flex-direction:column}
/* the plot's own content decides where it sits in the space the card gives it: a ring reads as
   centred, a column of bars has to start at the top or its baseline drifts between cards */
.plot > *{width:100%}
.plot[data-view="donut"]{justify-content:center}
.plot[data-view="chart"],.plot[data-view="years"],.plot[data-view="table"]{justify-content:flex-start}
/* the placeholder card has no view of its own, so it centres like a ring would */
.plot[data-view="donut"],.chart .plot:not([data-view]){justify-content:center}
.plot .holder{margin:auto 0}
.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 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:#5D7185;font-size:14px}
.foot{font-size:11.5px;color:#647486;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}
/* opacity:1 is needed for Firefox, which dims a placeholder even when a colour is set */
table.ut tr.fr input::placeholder{color:#5D7185;opacity:1}
table.ut tr.fr input:focus::placeholder{color:#647486}
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)}

/* off-screen but readable: for the skip link before it is focused, and the live region always */
.vhidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skiplink{position:absolute;left:-9999px;top:0;z-index:60;background:var(--navy);color:#fff;
  padding:12px 18px;border-radius:0 0 10px 0;font-weight:600;font-size:14px;text-decoration:none}
.skiplink:focus{left:0}
/* 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 details{position:relative}
.notes .nbtools{display:flex;justify-content:flex-end;margin:0 0 4px}
/* lifted onto the summary row, clear of the chevron */
.notes details[open] .nbtools{position:absolute;top:9px;right:46px;margin:0;z-index:1}
/* back into the flow before it can collide with the summary text */
@media(max-width:560px){.notes details[open] .nbtools{position:static;right:auto;top:auto;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,.notes .nbtools+.nh{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}
}