/* Additions for the alpha: masthead controls, Markdown prose, live-figure states. */
@media (max-width:760px){.aud{margin-left:0}}

.boot{padding:80px 0;color:var(--ink-3);text-align:center}

/* ---------- main menu with submenus ---------- */
.tabs .wrap{overflow:visible;gap:4px}
.tabs .navtop{all:unset;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;padding:14px 12px 12px;font:400 14.5px/1 var(--f-body);color:var(--on-navy-2);border-bottom:2px solid transparent}
.tabs .navtop:hover,.tabs .navtop[aria-expanded="true"]{color:#fff}
.tabs .navtop:focus-visible{outline:2px solid var(--mint);outline-offset:-2px}
.tabs a.navtop.active,.tabs .navgrp.active>.navtop{color:#fff;border-bottom-color:var(--mint)}
.tabs .caret{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.tabs .navtop[aria-expanded="true"] .caret{transform:translateY(1px) rotate(225deg)}
.navgrp{position:relative}
.tabs a,.tabs button,.subnav a,.mast-toggle{-webkit-tap-highlight-color:transparent}
.navmenu{position:absolute;top:100%;left:0;z-index:20;min-width:220px;margin-top:2px;padding:6px;display:grid;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 36px -10px rgb(1 0 37 / .35)}
.navmenu[hidden]{display:none}
.navmenu a{display:block;padding:10px 12px;border-radius:9px;font:400 14.5px/1.2 var(--f-body);color:var(--ink);text-decoration:none}
.navmenu a:hover,.navmenu a:focus-visible{background:var(--sunk);outline:none}
.navmenu a[aria-current]{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.navmenu .navsep{height:1px;background:var(--line);margin:5px 10px}

/* sibling links at the top of a grouped page */
.subnav{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.subnav-grp{font:500 11px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-right:4px}
.subnav a{font:400 13px/1 var(--f-body);padding:8px 12px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);text-decoration:none}
.subnav a:hover{border-color:var(--ink-3);color:var(--ink)}
/* divider between the story pages and the reference pages (report.yaml nav '---') */
.subnav-sep{font:300 20px/1 var(--f-body);color:var(--ink-3);padding:0 4px;user-select:none}
.subnav a[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:600}

/* ---------- masthead: settings fold away on small screens ---------- */
.mast-toggle{display:none}
@media (max-width:760px){
  .mast .wrap{padding-block:12px;gap:10px}
  .mast-toggle{all:unset;cursor:pointer;margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:99px;border:1px solid rgb(255 255 255 / .22);color:#fff;font:600 12px/1 var(--f-ui)}
  .mast-toggle[aria-expanded="true"]{background:#fff;color:#010025}
  .mast .aud{display:none;width:100%;flex-direction:column;align-items:stretch;gap:10px;padding:6px 0 4px}
  .mast.open .aud{display:flex}
  .mast .aud .seg{align-self:flex-start}
  .mast .demo-pill{font-size:10px;padding:5px 8px}
}

/* ---------- mobile menu: four top items share the width, submenu spans the screen ---------- */
@media (max-width:640px){
  /* four top items; the strip scrolls sideways when they don't fit (German, French) */
  .tabs .wrap{padding-inline:6px;gap:0;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .tabs .wrap::-webkit-scrollbar{display:none}
  .tabs .navtop{padding:13px 8px 11px;font-size:13.5px;gap:5px}
  .navgrp{position:static}
  .navmenu{left:8px;right:8px;min-width:0;margin-top:0;border-radius:0 0 14px 14px;padding:8px}
  .navmenu a{padding:14px 12px;font-size:16px}       /* comfortable tap targets */
  .subnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .subnav a{white-space:nowrap}
  .subnav-grp{display:none}
  .hero h1{font-size:32px}
  .fig{padding:16px 14px 0}
  .fig footer,details.cov{margin-inline:-14px;padding-inline:14px}
  .fig header p{font-size:13px}
}
@media (max-width:360px){.tabs .navtop{font-size:12.5px;padding-inline:5px}}

/* section prose rendered from Markdown */
.prose{display:grid;gap:18px;min-width:0}
.prose>h2{margin-top:18px}
.prose>h3{margin-top:10px;font-size:20px;font-weight:600}
.prose p,.prose li{font-size:16px;color:var(--ink-2);max-width:72ch}
.prose ul{margin:0;padding-left:20px;display:grid;gap:6px}
.prose table{max-width:900px}
.prose .tblwrap,.prose>table{overflow-x:auto;display:block}
.prose code{word-break:normal}
.prose aside.callout{max-width:900px}
.prose aside.callout p,.prose aside.callout li{font-size:15px}
.prose aside.callout h3{margin:0}
.for-public,.for-stake{display:grid;gap:10px}

.trbanner{font:500 12.5px/1.4 var(--f-ui);background:var(--sand);color:#3a2a00;border-radius:10px;padding:8px 12px;justify-self:start}

/* figures */
.fig .figbody{min-height:120px;display:grid;gap:10px;min-width:0}
.fig .figstate{display:grid;place-items:center;min-height:200px;color:var(--ink-3);font-size:14px;text-align:center;gap:10px}
.fig .figstate.err{color:var(--volc)}
.skel{width:100%;height:220px;border-radius:12px;background:linear-gradient(90deg,var(--sunk),var(--grid),var(--sunk));background-size:200% 100%;animation:sk 1.4s ease-in-out infinite}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
.fig footer .asof{font-variant-numeric:tabular-nums}
.fig footer .stale{color:var(--warn);font-weight:600}
.illu{font:500 11px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:99px;background:var(--sand);color:#3a2a00;justify-self:start}
details.cov{border-top:1px solid var(--line);margin-inline:-22px;padding:10px 22px}
details.cov summary{cursor:pointer;font:600 13px var(--f-body);color:var(--accent-ink)}
details.cov[open] summary{margin-bottom:10px}
details.cov .covgrid{display:grid;gap:12px}
details.cov p{font-size:13px;color:var(--ink-2);max-width:none}
details.cov table{font-size:12.5px}
details.cov td,details.cov th{padding:6px 8px}
@media (max-width:560px){details.cov{margin-inline:-16px;padding-inline:16px}}
.nf{font:500 10.5px/1 var(--f-ui);padding:3px 7px;border-radius:99px;white-space:nowrap;border:1px solid var(--line);color:var(--ink-2)}
.nf.labelled{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
.nf.candidate{background:var(--sunk)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.statrow .tile{padding:12px 14px;box-shadow:none}
.statrow .tile .v{font-size:22px}
.figtools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.figtools .chip{font-size:12px;padding:6px 10px}
/* reference picker on charts (one shared choice, see setThr in app.js) */
.refpick{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--f-ui);color:var(--ink-2)}
.refpick select{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:99px;padding:6px 10px;font:500 12px/1 var(--f-ui);max-width:100%;cursor:pointer}
.refpick select:hover{border-color:var(--ink-3)}
.refpick select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lgsw{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle;margin-right:6px}
.lgsw.ring{background:transparent!important;border:2px solid currentColor}

/* live takeaway sentences (Plain: large; Detailed: compact) */
.takeaways{display:grid;gap:4px;border-left:3px solid var(--accent);padding:2px 0 2px 12px}
.takeaway{font:400 17px/1.45 var(--f-body);color:var(--ink);max-width:62ch}
.takeaway+.takeaway{font-size:15px;color:var(--ink-2)}
.takeaways.compact .takeaway{font-size:14px;color:var(--ink-2)}
.noref{font-size:12.5px;color:var(--ink-3);font-style:italic;max-width:none}
.statrow.hide{display:none}
.statrow .tile.warn{border-color:var(--volc)}
.statrow .tile.warn .v{color:var(--volc)}
@media (max-width:820px){.scene .takeaways{display:none}}

/* tab hero for non-overview sections */
.sechead{display:grid;gap:12px}
.sechead p{font-size:17px;color:var(--ink-2)}

/* ---------- downloads: the three fixed report types ----------
   A space-black brand panel with a teal top rule, so it doesn't read as another finding card. */
.dlsec{background:var(--navy);color:var(--on-navy);border-radius:20px;border:1px solid rgb(255 255 255 / .08);box-shadow:var(--shadow);padding:clamp(20px,3vw,28px);display:grid;gap:16px}

.dlsec-title{color:#fff;font:600 13px/1.2 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.dlcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.dlcard{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;gap:10px 14px;padding:18px;border-radius:14px;background:rgb(255 255 255 / .06);border:1px solid rgb(255 255 255 / .16);color:#fff;transition:background .15s,border-color .15s,transform .15s;-webkit-tap-highlight-color:transparent}
.dlcard:hover{background:rgb(255 255 255 / .11);border-color:var(--mint);transform:translateY(-1px)}
.dlcard:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.dlcard[aria-busy="true"]{cursor:progress;opacity:.75}
.dlic{grid-row:1 / span 2;color:var(--mint);padding-top:2px}
.dlt{display:grid;gap:4px;align-content:start}
.dlt b{font:600 16px/1.25 var(--f-body)}
.dlt small{font:400 13px/1.4 var(--f-body);color:var(--on-navy-2)}
.dlfmt{display:inline-flex;align-items:center;gap:6px;justify-self:start;font:600 12px/1 var(--f-ui);letter-spacing:.08em;color:var(--navy);background:var(--mint);border-radius:99px;padding:6px 10px 6px 8px}
.dlfmt svg{width:14px;height:14px}

/* events library */
.evlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.evcard2{all:unset;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;gap:8px;align-content:start;box-shadow:var(--shadow);transition:transform .2s,border-color .2s}
.evcard2:hover{transform:translateY(-2px);border-color:var(--volc)}
.evcard2 .t{font-weight:600;font-size:16px;line-height:1.3}
.evcard2 .m{font:12px var(--f-ui);color:var(--ink-3)}
.evcard2 p{font-size:14px;color:var(--ink-2)}
.status.draft{background:var(--sand);color:#3a2a00}
.status.example{background:var(--sunk);color:var(--ink-2)}

/* stories */
.storycards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}

/* glossary */
.glhead{display:flex;flex-wrap:wrap;gap:12px;align-items:end;justify-content:space-between}

/* footer links */
.ftlinks{display:flex;flex-wrap:wrap;gap:8px 20px}
.ftlinks a{color:var(--mint);text-decoration:none;font-weight:600;font-size:14px}
.ftlinks a:hover{text-decoration:underline}

/* curtain */
.curtain-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink-2)}
.curtain-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle;margin-right:5px}

/* ---------- scroll story (pattern from scrolly/index.html) ---------- */
.scrolly{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:36px;align-items:start}
.scrolly .ssteps{grid-column:1;grid-row:1;display:grid;padding-block:6vh 45vh}
.scrolly .sstep{min-height:82vh;display:flex;align-items:center}
.scrolly .card{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:16px;padding:20px 22px;display:grid;gap:10px;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s}
.scrolly .card.ev{border-left-color:var(--volc)}
.scrolly .card.hl{border-left-color:var(--s3)}
.scrolly .sstep.active .card{opacity:1;transform:translateX(4px);box-shadow:0 0 0 1px var(--line),0 14px 32px -14px rgb(1 0 37 / .35)}
.scrolly .card .when{font:600 12px/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.scrolly .card.ev .when{color:var(--volc)}
.scrolly .card h2{font-size:22px;line-height:1.25;font-weight:600}
.scrolly .card p{font-size:15px;color:var(--ink-2)}
.scrolly .card .for-public,.scrolly .card .for-stake{gap:8px}
.scrolly .card .kv{margin:2px 0 0}
.scrolly .card .kv div{padding:6px 0;font-size:13px}
.scrolly .card .kv dd{font-weight:600}
.scrolly .card.end{border-left-color:var(--mint);background:var(--navy);color:var(--on-navy)}
.scrolly .card.end h2{color:#fff}
.scrolly .card.end p{color:var(--on-navy-2)}
.scrolly .card.end .when{color:var(--mint)}
.scene{grid-column:2;grid-row:1;position:sticky;top:64px;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 18px 0;box-shadow:var(--shadow);display:grid;gap:8px;min-width:0}
.scene-head{display:grid;gap:4px}
.scene-k{font:500 11.5px/1.2 var(--f-ui);letter-spacing:.06em;color:var(--ink-3)}
.scene-t{font-size:17px;margin:0}
.scene-stage{min-height:120px;min-width:0}
.scene-stage .layer{animation:fadein .35s ease-out}
.scene-stage .layer[hidden]{display:none}
.scene-stage.empty::after{content:"";display:block;height:120px;border-radius:12px;background:radial-gradient(circle at 80% 120%,rgb(35 152 170 / .35),transparent 60%),var(--sunk)}
.scene .figbody{min-height:0}
.scene details,.scene .figtools,.scene .statrow{display:none}
.scene-foot{border-top:1px solid var(--line);margin-inline:-18px;padding:10px 18px;display:flex;flex-wrap:wrap;gap:4px 14px;font:12px/1.4 var(--f-body);color:var(--ink-3)}
.scene-foot:empty{display:none}
.scene-foot a{color:var(--accent-ink);font-weight:600;text-decoration:none}
.scene-tl svg{display:block}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:820px){
  .scrolly{grid-template-columns:1fr;gap:0}
  .scene{grid-column:1;grid-row:1;top:46px;z-index:3;border-radius:0 0 16px 16px;margin-inline:-16px;padding:10px 14px 0;max-height:52vh;overflow:hidden;box-shadow:0 -12px 0 var(--bg),0 8px 20px -10px rgb(1 0 37 / .3)}
  .scene-foot{margin-inline:-14px;padding:6px 14px;font-size:11px}
  .scene .legend,.scene .curtain-legend{display:none}
  .scene-t{font-size:15px}
  .scrolly .ssteps{grid-column:1;grid-row:2;padding-block:2vh 50vh}
  .scrolly .sstep{min-height:46vh;align-items:flex-start;padding-top:2vh}
  .scrolly .sstep.active .card{transform:none}
  .scrolly .card{background:color-mix(in srgb,var(--surface) 94%,transparent);padding:16px 18px}
  .scrolly .card.end{background:var(--navy)}
  .scrolly .card h2{font-size:20px}
  .scrolly .card p{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){.scene-stage .layer{animation:none}.scrolly .card{transition:none}}
/* scroll-story beats: short cards that scroll past while the scene stays on one figure */
.scrolly .sstep.beat{min-height:64vh}
.scrolly .bcard{gap:6px;padding:14px 20px}
.scrolly .bcard .bn{font:600 11px/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.scrolly .bcard p{font-size:16px;line-height:1.5;color:var(--ink)}
.scrolly .card.sc{border-left-color:var(--volc)}
.scrolly .card.sc .when{color:var(--volc)}
.scrolly .card .when .illu{margin-left:6px;vertical-align:1px}
.scrolly .card .more{margin:2px 0 0;font:600 13.5px var(--f-ui)}
.scrolly .card .more a{color:var(--accent-ink);text-decoration:none}
.scrolly .card .more a:hover{text-decoration:underline}
.scrolly .card.end .more a{color:var(--mint)}
.scrolly .tok{font-variant-numeric:tabular-nums}
.beatdots{display:flex;gap:6px;margin-top:2px}
.beatdots:empty{display:none}
.beatdots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}
.beatdots i.done{background:var(--accent-ink)}
.beatdots i.on{background:var(--accent);transform:scale(1.35)}
.scene-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.scene-facts[hidden]{display:none}
.scene-facts .sf{background:var(--sunk);border-radius:10px;padding:8px 12px;display:grid;gap:2px;align-content:start;box-shadow:inset 0 0 0 1.5px transparent;transition:background .35s,box-shadow .35s}
.scene-facts .sf .v{font-size:22px;font-weight:300;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
.scene-facts .sf.long .v{font-size:14px;font-weight:600;line-height:1.3}
.scene-facts .sf .l{font-size:11.5px;line-height:1.3;color:var(--ink-2)}
.scene-facts .sf.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}
.curtain-legend span.on{font-weight:700;color:var(--ink)}
@media (min-width:821px){.scrolly .card .kv.inscene{display:none}}
@media (max-width:820px){
  .scrolly .sstep.beat{min-height:40vh}
  .scrolly .bcard p{font-size:15px}
  .scene-facts:not(.focus){display:none}
  .scene-facts .sf:not(.on){display:none}
  .scene-facts .sf{grid-template-columns:auto 1fr;align-items:baseline;gap:8px;padding:5px 10px}
  .scene-facts .sf .v{font-size:16px}
}

/* entrance effects (charts.js / figures.js add the classes when a beat switches something on) */
.chart svg .enter-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:sdraw 1.6s cubic-bezier(.4,0,.2,1) forwards}
.chart svg .enter-rise{animation:rise .8s cubic-bezier(.3,1.3,.5,1) both}
@keyframes rise{from{opacity:0;transform:translateY(-16px)}}
@keyframes sdraw{to{stroke-dashoffset:0}}
.chart svg .enter-fade{animation:svgfade .7s ease-out both}
.chart svg .enter-late{animation:svgfade .4s ease-out 1.3s both}
.chart svg .reflbl.enter-late{animation-delay:.5s}
.chart svg .enter-pop{animation:svgfade .45s ease-out .15s both}
@keyframes svgfade{from{opacity:0}}
.chart svg .drop{animation:pindrop .55s cubic-bezier(.3,1.5,.5,1) both}
@keyframes pindrop{from{transform:translateY(-22px);opacity:0}}
.chart svg .pop{transform-box:fill-box;transform-origin:center;animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pop{from{transform:scale(0);opacity:0}}
.chart svg .pulse{fill:none;stroke-width:2.5;opacity:0;transform-box:fill-box;transform-origin:center;animation:pulse 1.5s ease-out 3;pointer-events:none}
@keyframes pulse{0%{transform:scale(.6);opacity:.95}100%{transform:scale(2.6);opacity:0}}
.chart svg .tint path{fill:var(--accent);opacity:.24;pointer-events:none}
.chart svg .shd{fill:var(--volc);opacity:.13}
.chart svg .brk rect{fill:var(--accent);opacity:.13}
.chart svg .brk text{font:600 11px var(--f-ui);fill:var(--ink-2)}
.chart svg .annot line{stroke:var(--ink-2);stroke-width:1.2}
.chart svg .annot rect{fill:var(--surface);stroke:var(--ink-3);stroke-width:1}
.chart svg .annot text{font:600 12px var(--f-ui);fill:var(--ink)}
.chart svg .annot circle:not(.pulse){fill:none;stroke:var(--ink);stroke-width:2}
.chart svg .annot .pulse{stroke:var(--ink)}
.chart .hbar.grow .bar{transform-origin:left;animation:barin 1.1s cubic-bezier(.4,0,.2,1) both}
.chart .hbar.grow .row:nth-child(2) .bar{animation-delay:.1s}.chart .hbar.grow .row:nth-child(3) .bar{animation-delay:.2s}.chart .hbar.grow .row:nth-child(4) .bar{animation-delay:.3s}.chart .hbar.grow .row:nth-child(5) .bar{animation-delay:.4s}
@keyframes barin{from{transform:scaleX(0)}}
/* the cloud curtain and the lidar are revealed from midnight to midnight */
.chart.sweep{position:relative}
.chart.sweep canvas{animation:wipe 3.2s linear both}
@keyframes wipe{from{clip-path:inset(0 calc(100% - var(--ml, 46px)) 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){
  .chart svg .enter-draw{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
  .chart svg .enter-fade,.chart svg .enter-rise,.chart svg .enter-late,.chart svg .enter-pop,.chart svg .drop,.chart svg .pop,.chart .hbar.grow .bar,.chart.sweep canvas{animation:none}
  .chart svg .pulse{display:none}
  .beatdots i,.scene-facts .sf{transition:none}
}

@media print{.mast .aud,.tabs,.dlsec,details.cov{display:none}}

/* key numbers still to come from the Data Centre */
.tile.tocome .v { color: var(--ink3, #8a8f98); }
.tile .d { display: block; font-size: 12px; line-height: 1.35; color: var(--ink-3); margin-top: 4px; }

/* Paper frame (meeting, 6 Nov 2026: "more report-like"): the whole design sits on a sheet with a
   white margin around it, like a printed page. html paints the frame, body is the sheet; the
   full-bleed hero is clipped at the sheet's edge, and the sticky menu still sticks to the window
   top. One side gutter is shared by .wrap and the hero. */
:root{--frame:clamp(8px,1.4vw,20px);--paper:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--paper:#24234f}}
:root[data-theme="dark"]{--paper:#24234f}
html{background:var(--paper)}
body{margin:var(--frame);border-radius:12px;overflow:clip;min-height:calc(100vh - 2 * var(--frame))}
@media (max-width:640px){:root{--frame:6px}body{border-radius:8px}}
@media print{html{background:none}body{margin:0;border-radius:0}}
:root{--gutter:clamp(16px,3vw,32px)}
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.hero-in{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}

/* Colour theme: one discreet icon button, right-aligned on the header line. */
.themebtn{all:unset;box-sizing:border-box;cursor:pointer;margin-left:auto;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--on-navy-2);border:1px solid rgb(255 255 255 / .18);-webkit-tap-highlight-color:transparent}
.themebtn:hover{color:#fff;border-color:rgb(255 255 255 / .45)}
.themebtn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.themebtn svg{display:none}
.themebtn[data-t="auto"] .i-auto,.themebtn[data-t="light"] .i-light,.themebtn[data-t="dark"] .i-dark{display:block}
/* the settings row starts on its own line, right-aligned, under the header line */
@media (min-width:761px){.mast .aud{flex-basis:100%;justify-content:flex-end}}
@media (max-width:760px){.mast .mast-toggle{margin-left:0}}
/* phones: keep the header on one line in every language; the alpha pill shrinks (with …) instead
   of pushing the theme and settings buttons to a second line */
@media (max-width:760px){
  .mast .demo-pill{flex:1 0 0;min-width:0;max-width:max-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---------- ACTRIS logo lock-up (Brand Guidelines 2.4–2.6) ----------
   Logo, divider and product name share the logotype's baseline; the gaps either side of the
   divider are equal; the divider is as tall as the wordmark; the name is in Open Sans at the
   logotype's letter size. White logo on space black (2.2: use white where the gradient arc
   would lack contrast). */
.mast .brand{align-items:flex-end;gap:12px}
.mast .logo{display:block;height:40px;width:auto}
.mast .brand .div{height:12px;margin-bottom:1px;background:rgb(255 255 255 / .35)}
.mast .brand .prod{font:400 15px/1 var(--f-body);color:var(--on-navy);margin-bottom:-2px}
footer.site .slogan-logo{display:block;height:52px;width:auto}
.eyebrow,.demo-pill{font-weight:600}
@media (max-width:760px){.mast .logo{height:34px}}

/* ---------- Countries page (Stories → Countries) ---------- */
.countries{display:grid;gap:18px;min-width:0}
.countries > *{min-width:0}
.ct-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.ct-bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end;justify-content:space-between}
.ct-field{display:grid;gap:6px;min-width:0}
.ct-field > span{font:600 12px/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ct-field select{font:400 16px/1.2 var(--f-body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 36px 10px 12px;min-width:min(320px,100%);max-width:100%;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.ct-src{font-size:13px}
/* country report PDF, right next to the country select (meeting, 6 Nov 2026) */
.ct-dl{margin-right:auto;padding:11px 16px;border-color:var(--accent-ink);color:var(--accent-ink);font-weight:600}
.ct-dl:hover{background:var(--accent-soft)}
.ct-dl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ct-dl[aria-busy]{cursor:progress;opacity:.75}
.ct-tiles{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
@media (max-width:900px){.ct-grid{grid-template-columns:minmax(0,1fr)}}
.ct-map{padding:0;overflow:hidden}
.ct-map .legend,.ct-map .small-note{padding:0 14px}
.ct-map .small-note{padding-bottom:12px}
/* interactive map (after the hackathon app's EuropeMap) */
.ctm-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:var(--sunk);border-bottom:1px solid var(--line)}
.ctm-controls > div{display:flex;gap:4px;flex-wrap:wrap}
.ctm-controls button{all:unset;cursor:pointer;font:500 12px/1 var(--f-ui);color:var(--ink-2);background:var(--surface);border:1px solid var(--line);padding:7px 10px;border-radius:6px}
.ctm-controls button:hover{border-color:var(--accent);color:var(--accent-ink)}
.ctm-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ctm-controls .ctm-z{width:14px;text-align:center;font-size:15px;font-weight:600}
svg.ctm{display:block;width:100%;height:auto;aspect-ratio:680/510;touch-action:manipulation}
.ctm-sea{fill:var(--sea)}
.ctm-land{fill:var(--land);stroke:var(--coast);stroke-width:.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ctm-land.sup{fill:color-mix(in srgb,var(--accent) 8%,var(--land-hi))}
.ctm-land.sel{fill:color-mix(in srgb,var(--accent) 30%,var(--land-hi));stroke:var(--accent);stroke-width:1.3}
.ctm-mk{cursor:pointer;outline:none}
.ctm-mk .hit{fill:transparent}
.ctm-mk .halo{fill:var(--accent);opacity:0;transition:opacity .15s}
.ctm-mk .dot{fill:var(--accent);stroke:var(--surface);stroke-width:2;transition:r .15s,fill .15s}
.ctm-mk.candidate .dot{fill:var(--pin-obs)}
.ctm-mk text{font:700 9px var(--f-ui);fill:#fff;pointer-events:none}
.ctm-mk:hover .dot,.ctm-mk:focus-visible .dot{r:7}
.ctm-mk.multi:hover .dot,.ctm-mk.multi:focus-visible .dot{r:10}
.ctm-mk:focus-visible .dot{stroke:var(--ink);stroke-width:3.5}
.ctm-mk.on .halo{opacity:.22}
.ctm-mk.on .dot{fill:var(--ink);r:6.5}
.ctm-mk.on.multi .dot{r:9.5}
.ctm-mk.on text{fill:var(--surface)}
.ctm-coloc{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 14px 0;font-size:13px;color:var(--ink-2)}
.ctm-key{display:inline-grid;place-items:center;width:10px;height:10px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line);background:var(--accent);font:700 8px/1 var(--f-ui);color:#fff;font-style:normal}
.ctm-key.candidate{background:var(--pin-obs)}
.ctm-key.multi{width:16px;height:16px}
.ct-legend{margin-top:8px;align-items:center}
.ct-panel{display:grid;gap:14px;align-content:start}
.ct-panel .ct-field select{min-width:0;width:100%}
/* country title as in the hackathon app: code badge · name · big count on the right */
.ct-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px 13px}
.ct-title h3{font-size:28px;font-weight:400;line-height:1.15}
.ct-code{font:600 10.5px/1.5 var(--f-ui);letter-spacing:.04em;color:var(--accent-ink);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);padding:2px 6px;border-radius:3px}
.ct-count{margin-left:auto;font-size:12px;color:var(--ink-3);display:inline-flex;align-items:baseline;gap:5px}
.ct-count strong{font-size:24px;font-weight:400;line-height:1;color:var(--accent-ink)}
.ct-fac{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.ct-fac h4{margin:0;font-size:16px}
.ct-fac .nf{justify-self:start}
.ct-kv{display:grid;gap:0;margin:4px 0 0}
.ct-kv > div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--grid)}
.ct-kv dt{color:var(--ink-2);font-size:13.5px}
.ct-kv dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.ct-links{font-size:13.5px;margin:0}
.ct-sup{display:inline-block;font:600 10.5px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:99px;background:var(--sand);color:#3a2a00;vertical-align:1px}
.small-note{font-size:12.5px;color:var(--ink-3);margin:0}
.ct-glance{display:grid;gap:12px}
.ct-glance-head{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
.ct-glance-head h3{font-size:22px;font-weight:300}
.ct-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:14px}
.ct-figs > *{min-width:0}
.ct-sites{margin-bottom:10px}
.ct-ch{display:grid;gap:8px}
.ct-ch ul{margin:0;padding-left:18px}
/* "ACTRIS in use": Lise's layout, one card with the numbers split by thin vertical rules */
.ct-use{display:grid;gap:14px}
.ct-use h3{font-size:22px;font-weight:300;margin:0}
.ct-use-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.ct-dot{display:inline-flex;align-items:center;gap:7px;font:600 11px/1 var(--f-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);white-space:nowrap}
.ct-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.ct-use-grid{display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:28px;align-items:center;padding-top:6px}
.ct-use-grid > p{margin:0;font-size:14px;line-height:1.7;color:var(--ink-2)}
.ct-stat{display:flex;flex-direction:column;border-left:1px solid var(--line);padding-left:22px;min-width:0}
.ct-stat strong{font-size:38px;font-weight:300;line-height:1.2;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.ct-stat span{font-size:13px;color:var(--ink-3);margin-top:4px;line-height:1.4}
.ct-stat.tocome strong{color:var(--ink-3)}
/* key numbers inside a figure card (Use of ACTRIS data): same style as .ct-stat */
.knstats{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:22px 0;padding:6px 0 4px}
.knstat{display:flex;flex-direction:column;border-left:1px solid var(--line);padding:0 18px;min-width:0}
.knstat:first-child{border-left:0;padding-left:0}
.knstat strong{font-size:38px;font-weight:300;line-height:1.2;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.knstat span{font-size:13px;color:var(--ink-3);margin-top:4px;line-height:1.4}
.knstat small{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.4}
.knstat.tocome strong{color:var(--ink-3)}
@media (max-width:720px){
  .knstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .knstat{padding:0 12px}
  .knstat:nth-child(odd){border-left:0;padding-left:0}
  .knstat strong{font-size:28px}
}
@media (max-width:760px){
  .ct-use-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .ct-use-grid > p{grid-column:1/-1}
  .ct-stat{padding-left:10px}
  .ct-stat:first-of-type{border-left:0;padding-left:0}
  .ct-stat strong{font-size:28px}
  .ct-stat span{font-size:12px}
}

/* "Show as table": wide tables (one column per year) scroll inside the figure card instead of
   stretching it; the facility column stays in view while scrolling. */
.fig,.figbody,.figbody > *,details.tv{min-width:0;max-width:100%}
.tblwrap{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
details.tv .tblwrap{border:1px solid var(--line);border-radius:10px}
details.tv table{width:max-content;min-width:100%}
details.tv th,details.tv td{white-space:nowrap}
details.tv th:first-child,details.tv td:first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:1px 0 0 var(--line)}
/* full-screen table popup */
details.tv{position:relative}
.tblfull{all:unset;cursor:pointer;position:absolute;top:-4px;right:0;display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1 var(--f-ui);color:var(--accent-ink);padding:5px 9px;border:1px solid var(--line);border-radius:99px;background:var(--surface)}
.tblfull:hover{border-color:var(--accent)}
.tblfull:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tbldlg{width:min(1400px,calc(100vw - 32px));height:calc(100dvh - 32px);max-width:none;max-height:none;margin:auto;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);box-shadow:0 24px 64px -16px rgb(1 0 37 / .45)}
.tbldlg[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.tbldlg::backdrop{background:rgb(1 0 37 / .55);backdrop-filter:blur(2px)}
.tbldlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.tbldlg-head h3{font-size:17px;font-weight:600}
.tbldlg-x{all:unset;cursor:pointer;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);font-size:15px;color:var(--ink-2);flex:none}
.tbldlg-x:hover{border-color:var(--ink-3);color:var(--ink)}
.tbldlg-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tbldlg-body{overflow:auto;padding:0 18px 18px}
.tbldlg-body table{width:max-content;min-width:100%;font-size:14px}
.tbldlg-body th,.tbldlg-body td{white-space:nowrap;padding:8px 10px}
.tbldlg-body thead th{position:sticky;top:0;z-index:2;background:var(--surface);box-shadow:0 1px 0 var(--line)}
.tbldlg-body th:first-child,.tbldlg-body td:first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:1px 0 0 var(--line)}
.tbldlg-body thead th:first-child{z-index:3}
@media (max-width:560px){.tbldlg{width:100vw;height:100dvh;border-radius:0;border:0}}

/* The Earth stays in place while the page scrolls: the hero and the download panel are both
   windows onto the same picture, fixed to the browser window. (iOS ignores fixed backgrounds and
   scrolls them with the element, which still looks right.)
   The hero picture is sized from the window width only (never shorter than 900 px) and pinned to
   the top of the window, so the Earth starts in the same place whatever the window height; at
   1440 × 900 it is exactly the old "cover" framing. */
.hero{background:#010025 url(../img/hero-earth.jpg) 72% 0 / auto max(900px, 62.5vw) no-repeat fixed}
/* phones taller than 900 px: the picture must still reach the bottom of the window */
@media (max-width:820px){.hero{background-size:auto max(900px, 100lvh)}}
/* three key numbers side by side; stacked on phones */
#hero-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){#hero-kpis{grid-template-columns:1fr}}
/* the overview title on one line, in normal flow (meeting, 6 Nov 2026); it wraps on narrow screens */
.hero h1{max-width:none;text-wrap:wrap;font-size:clamp(32px,4.4vw,56px)}
.dlsec{background-color:#010025;background-image:linear-gradient(rgb(1 0 37 / .1),rgb(1 0 37 / .1)),url(../img/hero-earth.jpg);background-position:0 0,72% 50%;background-size:auto,cover;background-repeat:no-repeat;background-attachment:fixed,fixed}
.dlcard{background:rgb(1 0 37 / .55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dlcard:hover{background:rgb(1 0 37 / .6)}
@supports (-webkit-touch-callout: none){
  .hero,.dlsec{background-attachment:scroll}
  /* scrolling with the element: shift up by the hero's distance from the top of the page (menu
     height) and make sure the picture still covers the whole hero */
  .hero{background-position:72% -164px;background-size:auto max(900px, 62.5vw, calc(100% + 164px))}
}
@supports (-webkit-touch-callout: none){@media (max-width:820px){.hero{background-position:72% -100px;background-size:auto max(900px, calc(100% + 100px))}}}

/* WCAG 2.4.1: skip link, visible only when focused */
.skiplink{position:absolute;left:var(--gutter,16px);top:-60px;z-index:100;background:var(--surface);color:var(--ink);padding:10px 14px;border-radius:10px;font:600 14px/1 var(--f-ui);box-shadow:var(--shadow);text-decoration:none}
.skiplink:focus{top:10px}
main:focus{outline:none}
/* WCAG 2.4.7: controls styled with all:unset need their focus ring back */
.seg button:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.chip:focus-visible,.finding:focus-visible,.evcard:focus-visible,.evcard2:focus-visible,.hlcard:focus-visible,.archcard:focus-visible,.tpl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Alpha password page */
.login{max-width:440px;margin:72px auto 96px;padding:32px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);display:grid;gap:12px}
.login h1{font:600 26px/1.2 var(--f-ui);margin:0;color:var(--ink)}
.login p{margin:0;color:var(--ink-2);line-height:1.55}
.login label{font:600 14px var(--f-ui);color:var(--ink);margin-top:8px}
.login input{font:16px var(--f-body);padding:10px 12px;border:1px solid var(--ink-3);border-radius:8px;background:var(--surface);color:var(--ink)}
.login input:focus-visible{outline:3px solid var(--accent-ink);outline-offset:1px}
.login input[aria-invalid=true]{border-color:var(--warn)}
.login .login-err{min-height:1.4em;color:var(--warn);font-size:14px}
.login .login-err:empty{min-height:0}
.login .btn{justify-self:start}
@media (max-width:520px){.login{margin:32px auto 48px;padding:24px}}

/* links in running text (portal, statistics page): on the dark header and in tile notes they keep
   the text colour with an underline */
.hero p a,.tile .d a,.knstat small a,.fig header p a,.small-note a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.hero p a:hover,.tile .d a:hover,.knstat small a:hover,.fig header p a:hover{text-decoration-thickness:2px}
.hero a:focus-visible,.tile a:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:2px}