figure in text: 69%… */
/* spacing between blocks: a prose block always starts one block-space below what came before */
.rs-scope .rs-prose{margin-top:var(--r-space)}
.rs-scope .rs-prose > h2:first-child{margin-top:0}
.rs-scope .rs-prose p,
.rs-scope .rs-prose ul,
.rs-scope .rs-prose ol{max-width:660px;margin:0 0 1.05em}
.rs-scope .rs-prose h3{margin-top:calc(var(--r-space) * .7)}
/* figures in running text: bold, accent colour (same colour as key-finding numbers) */
.rs-scope .rs-fig{font-weight:700;color:var(--r-num-color)}
/* bullets: small ink square */
.rs-scope .rs-prose ul{list-style:none;padding-left:1.25em}
.rs-scope .rs-prose ul li{position:relative}
.rs-scope .rs-prose ul li::before{content:"";position:absolute;left:-1.1em;top:.66em;width:.36em;height:.36em;background:var(--r-ink)}
/* numbered lists: plain markers */
.rs-scope .rs-prose ol{padding-left:1.6em}
.rs-scope .rs-prose ol li::marker{font-variant-numeric:tabular-nums}
/* links: ink text with accent underline */
.rs-scope .rs-prose a:not(.rs-fn a){color:var(--r-ink);text-decoration-color:var(--r-accent);text-decoration-thickness:1.5px}
.rs-scope .rs-prose a:not(.rs-fn a):hover{color:var(--r-accent-ink)}
/* ===== library/blocks/figure-shell/figure.css ===== */
/* figure-shell: the frame every chart and table shares. Reads --r-* tokens only.
Locked upstream: F1 white card + soft shadow; owner F1 note: source line in smaller text,
Embed solid + Download PNG ghost (charts), Embed only (tables); F2 one-click copy.
…
…
… plot or table …
Source: … {footnote}…
*/
.rs-scope .rs-figure{margin:1.4em 0 0;max-width:none}
.rs-scope .rs-fig-head{margin-bottom:1.1em}
.rs-scope .rs-fig-title{font-family:var(--r-font-head);font-weight:var(--r-weight-head);font-size:calc(var(--r-body) * 1.02);line-height:1.3;letter-spacing:var(--r-tracking-head);color:var(--r-ink)}
.rs-scope .rs-fig-sub{font-size:var(--r-size-small);color:var(--r-ink-soft);margin-top:.15em}
/* unit line: every chart and table states its unit (owner 2026-09-16) */
.rs-scope .rs-fig-unit{font-size:var(--r-size-micro);font-weight:700;letter-spacing:.02em;color:var(--r-ink-soft);margin-top:.35em}
.rs-scope .rs-fig-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.7em 1em;margin-top:1.1em;padding-top:.8em;border-top:1px solid var(--r-rule)}
.rs-scope .rs-fig-src{font-size:var(--r-size-micro);color:var(--r-ink-soft);line-height:1.4}
.rs-scope .rs-fig-acts{display:flex;flex-wrap:wrap;gap:.5em}
/* PNG export (renderer adds data-rs-static): no buttons, a small site credit instead. */
.rs-scope .rs-fig-brand{display:none}
.rs-scope .rs-figure[data-rs-static] .rs-fig-acts,
.rs-scope .rs-figure[data-rs-static] .rs-table-more{display:none}
.rs-scope .rs-figure[data-rs-static] .rs-fig-brand{display:block;font:700 var(--r-size-micro)/1 var(--r-font-body);color:var(--r-ink-soft);letter-spacing:.02em}
.rs-scope .rs-figure[data-rs-static]{margin:0;box-shadow:none}
.rs-scope .rs-figure[data-rs-static] sup.rs-fn{display:none}
/* ===== library/blocks/chart-bar/bar.css ===== */
/* chart-bar (core block 4). HTML/CSS bars: labels stay real text at every width; PNG = screenshot.
LOCKED 2026-09-15: B4 variant=A (Label left) tuned=[track,radius] | dir=row label=left val=right
color=lead grid=on track=on axis=on barh=16 radius=8
Behaviour LOCKED in B4b: grow together on scroll (550 ms) with count-up; hover/tap card = label + value.
Markup contract (renderer):
…
Search for information69%
0%…100%
…
--v = value as % of the axis maximum. Largest value gets .is-lead. */
.rs-scope .rs-barchart{--rs-lab-w:11em;--rs-val-w:3.4em;--rs-bar-r:8px}
.rs-scope .rs-bars{list-style:none;margin:0;padding:0;max-width:none;display:grid;gap:calc(10px * var(--r-density))}
.rs-scope .rs-bar{position:relative;margin:0;display:grid;grid-template-columns:var(--rs-lab-w) 1fr var(--rs-val-w);align-items:center;gap:.35em .8em;font-size:var(--r-size-small)}
.rs-scope .rs-bar-lab{color:var(--r-ink);line-height:1.3;min-width:0}
.rs-scope .rs-bar-track{position:relative;display:block;height:var(--r-bar-h);border-radius:var(--rs-bar-r);overflow:hidden;
background:
linear-gradient(90deg,transparent calc(25% - .5px),var(--r-grid) calc(25% - .5px) calc(25% + .5px),transparent calc(25% + .5px) calc(50% - .5px),
var(--r-grid) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px) calc(75% - .5px),
var(--r-grid) calc(75% - .5px) calc(75% + .5px),transparent calc(75% + .5px)),
var(--r-data-track)}
.rs-scope .rs-bar-fill{display:block;height:100%;width:calc(var(--v) * 1%);min-width:2px;background:var(--r-data-mute);border-radius:0 var(--rs-bar-r) var(--rs-bar-r) 0}
.rs-scope .rs-bar.is-lead .rs-bar-fill{background:var(--r-series-1)}
.rs-scope .rs-bar-val{font-family:var(--r-font-num);font-weight:700;color:var(--r-ink);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rs-scope .rs-bar-axis{position:relative;height:1.4em;margin:.45em var(--rs-val-w) 0 var(--rs-lab-w);padding:0 .8em;box-sizing:content-box;font-size:var(--r-size-small);color:var(--r-ink-faint)}
.rs-scope .rs-bar-axis::before{content:"";position:absolute;inset:0 .8em}
.rs-scope .rs-bar-axis span{position:absolute;top:0;left:calc(.8em + (100% - 0em) * var(--t) / 100);font-size:var(--r-size-micro);transform:translateX(-50%);white-space:nowrap}
.rs-scope .rs-bar-axis span:first-child{transform:none}
.rs-scope .rs-bar-axis span:last-child{transform:translateX(-100%)}
@container rs (max-width:560px){
.rs-scope .rs-bar{grid-template-columns:1fr var(--rs-val-w);row-gap:.3em}
.rs-scope .rs-bar-lab{grid-column:1 / -1}
.rs-scope .rs-bar-axis{margin-left:0;padding-left:0}
.rs-scope .rs-bar-axis span{left:calc(100% * var(--t) / 100)}
}
/* ---- scroll-in animation (JS arms it; without JS or with reduced motion bars are static) ---- */
/* armed: snap to 0 with no transition; in: grow with the transition (easeOutCubic = count-up curve) */
.rs-scope .rs-barchart.rs-anim-armed .rs-bar-fill{width:0;transition:none}
.rs-scope .rs-barchart.rs-anim-armed.rs-anim-in .rs-bar-fill{width:calc(var(--v) * 1%);
transition:width 550ms cubic-bezier(.33,1,.68,1)}
/* ---- hover / tap data card ---- */
.rs-scope .rs-bar{cursor:default}
.rs-scope .rs-bar:hover .rs-bar-track,
.rs-scope .rs-bar.is-tip .rs-bar-track{box-shadow:0 0 0 2px color-mix(in srgb,var(--r-ink) 18%,transparent)}
.rs-scope .rs-bar-tip{position:absolute;z-index:20;bottom:calc(100% + 6px);transform:translateX(-50%);pointer-events:none;
min-width:8em;max-width:16em;padding:.55em .75em;border-radius:8px;background:var(--r-ink);color:var(--r-paper);
font:500 var(--r-size-micro)/1.4 var(--r-font-body);box-shadow:0 8px 24px -10px rgba(0,0,0,.45);animation:rs-tip-in .12s ease-out}
.rs-scope .rs-bar-tip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--r-ink)}
.rs-scope .rs-bar-tip b{display:block;font-size:1.35em;font-family:var(--r-font-num);font-variant-numeric:tabular-nums;margin:.1em 0}
.rs-scope .rs-bar-tip .k{color:color-mix(in srgb,var(--r-paper) 72%,var(--r-ink))}
@keyframes rs-tip-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .rs-scope .rs-bar-tip{animation:none} }
/* ===== library/blocks/chart-column/column.css ===== */
/* chart-column (vertical columns; the dir=col member of the bar family). Reads --r-* tokens only.
LOCKED 2026-09-16: B4c variant=A (Values on top) untuned | vals=all grid=on ylab=on w=62 radius=6 mlab=auto
color=lead div=two (owner reply: "...B4c-chart-column.html A")
Behaviour as B4b: columns grow on scroll-in (550 ms easeOutCubic), values count up and ride the column tops;
hover/tap card = the bar chart's .rs-bar-tip (bar.css). HTML/CSS columns so labels stay real text; PNG = screenshot.
Use for: a cycle inside a year (months, seasons, hours) or short ordered labels; the diverging (+/−) form for
deviations. Values carry no unit (the subtitle names it); the hover card shows value + unit.
Markup contract (renderer):
title · sub · [
only when --div]
0…
6.1JanJ
…
--b = column bottom, --h = column height, both % of the value axis (min…max). Largest |value| gets .is-lead.
Not diverging: lead column --r-series-1, the rest --r-data-mute. Diverging (any value < 0): above zero
--r-series-1, below --r-series-2 (pair validated PASS on #FFFFFF) + legend, so colour is never the only cue. */
.rs-scope .rs-colchart{--rs-col-w:62;--rs-col-r:6px}
.rs-scope .rs-colplot{position:relative;padding-left:var(--_yw);--_ch:220px}
@container rs (max-width:560px){ .rs-scope .rs-colplot{--_ch:180px} }
.rs-scope .rs-col-ticks{position:absolute;left:0;right:0;top:0;height:var(--_ch);pointer-events:none}
.rs-scope .rs-col-tick{position:absolute;left:0;right:0;bottom:calc(var(--t) * 1%);height:0}
.rs-scope .rs-col-tick::after{content:"";position:absolute;left:var(--_yw);right:0;top:0;border-top:1px solid var(--r-grid)}
.rs-scope .rs-col-tick.is-zero::after{border-top-color:color-mix(in srgb,var(--r-ink) 38%,var(--r-card))}
.rs-scope .rs-col-tick > span{position:absolute;left:0;top:0;width:var(--_yw);padding-right:.55em;box-sizing:border-box;text-align:right;
transform:translateY(-50%);font-size:var(--r-size-micro);line-height:1;color:var(--r-ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.rs-scope .rs-cols{list-style:none;margin:0;padding:0;max-width:none;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.rs-scope .rs-col{position:relative;margin:0;display:grid;grid-template-rows:var(--_ch) auto;justify-items:center;cursor:default;font-size:var(--r-size-small)}
.rs-scope .rs-col-area{position:relative;display:block;height:100%;width:min(calc(var(--rs-col-w) * 1%), 3.2em)}
.rs-scope .rs-col-fill{position:absolute;left:0;right:0;bottom:calc(var(--b) * 1%);height:max(2px, calc(var(--h) * 1%));
background:var(--r-data-mute);border-radius:var(--rs-col-r) var(--rs-col-r) 0 0;transform-origin:50% 100%}
.rs-scope .rs-col.is-neg .rs-col-fill{border-radius:0 0 var(--rs-col-r) var(--rs-col-r);transform-origin:50% 0}
.rs-scope .rs-col.is-zero .rs-col-fill{border-radius:0}
.rs-scope .rs-col.is-lead .rs-col-fill,
.rs-scope .rs-colchart--div .rs-col:not(.is-zero) .rs-col-fill{background:var(--r-series-1)}
.rs-scope .rs-colchart--div .rs-col.is-neg .rs-col-fill{background:var(--r-series-2)}
.rs-scope .rs-col-val{position:absolute;left:50%;bottom:calc((var(--b) + var(--h)) * 1% + 5px);transform:translateX(-50%);
font-family:var(--r-font-num);font-weight:700;font-size:var(--r-size-small);line-height:1;color:var(--r-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.rs-scope .rs-col.is-neg .rs-col-val{bottom:auto;top:calc((100 - var(--b)) * 1% + 5px)}
@container rs (max-width:560px){ .rs-scope .rs-cols.is-many .rs-col-val{font-size:calc(var(--r-size-micro) * .86)} }
/* category labels: 3 letters, 1 letter on narrow containers (labels that can't shorten keep l1 = full label) */
.rs-scope .rs-col-lab{margin-top:.55em;font-size:var(--r-size-micro);line-height:1.2;color:var(--r-ink-soft);white-space:nowrap}
.rs-scope .rs-col-lab .l1{display:none}
@container rs (max-width:560px){
.rs-scope .rs-col-lab .l3{display:none}
.rs-scope .rs-col-lab .l1{display:inline}
}
.rs-scope .rs-col-legend{display:flex;flex-wrap:wrap;gap:.3em 1.2em;margin-top:.55em;font-size:var(--r-size-micro);color:var(--r-ink-soft)}
.rs-scope .rs-col-legend span{display:inline-flex;align-items:center;gap:.45em}
.rs-scope .rs-col-legend i{width:10px;height:10px;border-radius:2px;background:var(--r-series-1)}
.rs-scope .rs-col-legend span + span i{background:var(--r-series-2)}
/* scroll-in growth (JS arms it; without JS, reduced motion or data-rs-static the columns are static) */
.rs-scope .rs-colchart.rs-anim-armed .rs-col-fill{transform:scaleY(0);transition:none}
.rs-scope .rs-colchart.rs-anim-armed.rs-anim-in .rs-col-fill{transform:none;transition:transform 550ms cubic-bezier(.33,1,.68,1)}
.rs-scope .rs-colchart.rs-anim-armed .rs-col:not(.is-neg) .rs-col-val{bottom:calc((var(--b) + var(--h) * var(--_p, 0)) * 1% + 5px)}
.rs-scope .rs-colchart.rs-anim-armed .rs-col.is-neg .rs-col-val{top:calc((100 - var(--b) - var(--h) * (1 - var(--_p, 0))) * 1% + 5px)}
.rs-scope .rs-colchart.rs-anim-armed.rs-anim-in .rs-col-val{--_p:1;transition:bottom 550ms cubic-bezier(.33,1,.68,1),top 550ms cubic-bezier(.33,1,.68,1)}
/* hover / tap: the bar chart's card (.rs-bar-tip, bar.css), placed by column.js */
.rs-scope .rs-col:hover .rs-col-fill,
.rs-scope .rs-col.is-tip .rs-col-fill{box-shadow:0 0 0 2px color-mix(in srgb,var(--r-ink) 18%,transparent)}
.rs-scope .rs-col .rs-bar-tip{bottom:auto;white-space:nowrap;min-width:0}
.rs-scope .rs-col .rs-bar-tip::after{left:var(--ax, 50%)}
/* ===== library/blocks/chart-line/line.css ===== */
/* chart-line (block 12). Reads --r-* tokens only.
LOCKED 2026-09-16: B12 variant=A (Clean + end labels) untuned | markers=hover area=off ends=name emph=off y=fit
grid=on lw=2 ms=550 (owner reply: "...B12-chart-line.html A")
Resulting chart: plain 2px lines in --r-series-1..4 (fixed order), series names at the line ends (single series:
its latest value), dots only at the hovered point, y axis fitted to the data with 10% headroom (always includes 0
when any value is negative, zero line emphasised), gridlines on, draw-in 550 ms on scroll-in.
Hover/tap: crosshair + dark card (.rs-bar-tip look from bar.css); ≥2 series list every series with a swatch.
Markup contract (renderer):
…
(only with ≥2 series)
Iceland
…
…
The SVG is drawn by line.js at the container's real width (redrawn on resize and after fonts load), so text never
scales. data-rs-static (PNG export): drawn at once, no animation, no crosshair. */
.rs-scope .rs-line-legend{display:flex;flex-wrap:wrap;gap:.3em 1.2em;list-style:none;margin:0 0 .7em;padding:0;max-width:none;font-size:var(--r-size-small);color:var(--r-ink-soft)}
.rs-scope .rs-line-legend li{margin:0;display:inline-flex;align-items:center;gap:.45em}
.rs-scope .rs-line-legend li::before{content:"";width:1.1em;height:3px;border-radius:2px;background:var(--c)}
@container rs (max-width:480px){
.rs-scope .rs-line-legend{font-size:var(--r-size-micro);gap:.25em .9em}
.rs-scope .rs-line-legend li{gap:.35em}
.rs-scope .rs-line-legend li::before{width:.9em}
}
.rs-scope .rs-line-plot{position:relative;min-height:200px;touch-action:pan-y}
.rs-scope .rs-line-plot svg{display:block;overflow:visible}
.rs-scope .rs-line-plot text{font-family:var(--r-font-body);font-size:var(--r-size-micro);fill:var(--r-ink-faint)}
.rs-scope .rs-line-plot .ln-grid{stroke:var(--r-grid);stroke-width:1}
.rs-scope .rs-line-plot .ln-zero{stroke:color-mix(in srgb,var(--r-ink) 45%,var(--r-panel-bg));stroke-width:1}
.rs-scope .rs-line-plot .ln-path{fill:none;stroke-width:2px;stroke-linejoin:round;stroke-linecap:round}
.rs-scope .rs-line-plot .ln-dot{stroke:var(--r-panel-bg);stroke-width:2}
.rs-scope .rs-line-plot .ln-end{font-size:var(--r-size-micro);fill:var(--r-ink-soft)}
.rs-scope .rs-line-plot .ln-end tspan.v{font-family:var(--r-font-num);font-weight:700;fill:var(--r-ink);font-variant-numeric:tabular-nums}
.rs-scope .rs-line-plot .ln-cross{stroke:color-mix(in srgb,var(--r-ink) 28%,transparent);stroke-width:1}
.rs-scope .rs-line-plot .ln-hit{fill:transparent;cursor:crosshair}
/* draw-in: paths animate their dash offset (line.js); end labels fade in over the same 550 ms */
.rs-scope .rs-line-plot .ln-fade{transition:opacity 550ms cubic-bezier(.33,1,.68,1)}
.rs-scope .rs-line-plot.is-armed .ln-fade{opacity:0}
/* hover card: .rs-bar-tip supplies the look; the line chart places it beside the crosshair (no arrow) */
.rs-scope .rs-line-plot .rs-bar-tip{top:0;bottom:auto;transform:none}
.rs-scope .rs-line-plot .rs-bar-tip::after{display:none}
.rs-scope .rs-line-plot .rs-bar-tip ul{list-style:none;margin:.25em 0 0;padding:0;max-width:none;display:grid;gap:.15em}
.rs-scope .rs-line-plot .rs-bar-tip li{margin:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5em}
.rs-scope .rs-line-plot .rs-bar-tip li i{width:.7em;height:.7em;border-radius:50%;background:var(--c);box-shadow:0 0 0 1.5px var(--r-paper)}
.rs-scope .rs-line-plot .rs-bar-tip li span.v{font-family:var(--r-font-num);font-weight:700;font-variant-numeric:tabular-nums;padding-left:.6em}
/* ---- trend projection (B12b) ----
LOCKED 2026-09-16: B12b variant=A (Dashed + band) tuned=[style,endlab] | band=on style=fan fit=on div=on endlab=value
end=2050 dash=dashed op=16 | note: end label value must start with ~
Figure gets .rs-projchart; data JSON "proj" {from,last,to,fitYears,fit,pts:[{y,v,lo,hi}]}; caption
.
Measured solid series-1 · thin fitted trend · dashed projection · fan band (3 shades) · divider "Measured | Projected". */
.rs-scope .rs-projchart{--rs-band-op:.16}
.rs-scope .rs-line-plot .pj-fit{fill:none;stroke:color-mix(in srgb,var(--r-series-1) 55%,var(--r-panel-bg));stroke-width:1.25px}
.rs-scope .rs-line-plot .pj-proj{fill:none;stroke:var(--r-series-1);stroke-width:2px;stroke-linecap:round;stroke-dasharray:6 5}
.rs-scope .rs-line-plot .pj-band{fill:var(--r-series-1);stroke:none}
.rs-scope .rs-line-plot .pj-divider{stroke:color-mix(in srgb,var(--r-ink) 30%,var(--r-panel-bg));stroke-width:1;stroke-dasharray:2 3}
.rs-scope .rs-line-plot text.pj-zone{font-size:calc(var(--r-size-micro) * .85);letter-spacing:.06em;text-transform:uppercase;fill:var(--r-ink-faint)}
.rs-scope .rs-line-plot text.pj-end{fill:var(--r-ink-soft)}
.rs-scope .rs-line-plot text.pj-end tspan.v{font-family:var(--r-font-num);font-weight:700;fill:var(--r-ink)}
.rs-scope .rs-line-plot .pj-mark{fill:var(--r-panel-bg);stroke:var(--r-series-1);stroke-width:2}
.rs-scope .rs-line-plot text.pj-mlab{font-family:var(--r-font-num);font-weight:700;fill:var(--r-ink)}
/* projection layers appear after the measured line has drawn in */
.rs-scope .rs-line-plot .pj-late{transition:opacity 400ms ease-out 550ms}
.rs-scope .rs-line-plot.is-armed .pj-late{opacity:0;transition:none}
.rs-scope .rs-proj-note{font-size:var(--r-size-micro);color:var(--r-ink-soft);margin:.6em 0 0;max-width:none}
.rs-scope .rs-line-plot .rs-bar-tip .s{display:block;color:color-mix(in srgb,var(--r-paper) 72%,var(--r-ink));margin-top:.1em}
/* ===== library/blocks/chart-share/share.css ===== */
/* chart-share (block 13, part-to-whole). Reads --r-* tokens only.
LOCKED 2026-09-16: B13 variant=B (Donut + total) untuned | hole=58 labels=legend show=both total=on gap=2 start=0
ms=550 (owner reply: "...B13-chart-share.html B")
Resulting chart: donut (hole 58%) with the total in the centre, legend beside it (below on narrow) showing label,
value and share; 2px surface gaps; slices start at 12 o'clock and sweep in on scroll-in (550 ms, numbers count up).
Hover/tap a slice or legend row: slice lifts, others dim, .rs-bar-tip card (label, value + unit, share, contents).
Colour: slices --r-series-1..4 in fixed order (largest first); "Other" = --r-ink-faint, always last. Validated
(dataviz validator, light, #FFFFFF): #B25309 #0B7FA6 #6B8E23 #8E4FA8 #8A8F98 pass lightness, CVD (worst ΔE 14.3),
normal vision (worst 17.8), 3:1 contrast, wrap-around pairs included; chroma FAIL on the grey Other is intended.
2–5 slices; a 5th slice must be "Other".
Markup contract (renderer):
…
32stations
South825%
…
Slices are drawn by share.js from the legend rows, so the chart needs JS (PNG export loads it). */
.rs-scope .rs-pie{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:1.4em 2.4em;align-items:center}
.rs-scope .rs-pie-plot{position:relative;width:100%;max-width:15em;aspect-ratio:1;margin-inline:auto}
.rs-scope .rs-pie-plot svg{display:block;width:100%;height:100%;overflow:visible}
.rs-scope .rs-pie-plot path{stroke:var(--r-panel-bg);stroke-linejoin:round;transition:opacity .15s ease,transform .15s ease;cursor:default}
.rs-scope .rs-pie.has-active path:not(.is-on){opacity:.35}
.rs-scope .rs-pie-total{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none;line-height:1.1;
padding:0 21%;box-sizing:border-box;overflow:hidden} /* 21% each side = the 58%-hole boundary: text can never touch the ring */
.rs-scope .rs-pie-total b{display:block;font:var(--r-num-weight) calc(var(--r-h3) * 1.35 * var(--rs-fit, 1))/1.05 var(--r-font-num);font-variant-numeric:tabular-nums;color:var(--r-ink);overflow-wrap:break-word}
.rs-scope .rs-pie-total span{font-size:calc(var(--r-size-micro) * max(var(--rs-fit, 1), .78));color:var(--r-ink-soft);margin-top:.3em}
.rs-scope .rs-pie-legend{list-style:none;margin:0;padding:0;max-width:none;font-size:var(--r-size-small)}
.rs-scope .rs-pie-item{display:grid;grid-template-columns:.8em minmax(0,1fr) auto auto;align-items:center;gap:.7em;margin:0;padding:.5em .4em;border-top:1px solid var(--r-rule);cursor:default}
.rs-scope .rs-pie-item:first-child{border-top:0}
.rs-scope .rs-pie-item.is-on{background:var(--r-data-track)}
.rs-scope .rs-pie-sw{width:.8em;height:.8em;border-radius:calc(var(--r-radius) * .2);background:var(--rs-c)}
.rs-scope .rs-pie-lab{color:var(--r-ink);line-height:1.3;min-width:0}
.rs-scope .rs-pie-val,.rs-scope .rs-pie-pct{font-family:var(--r-font-num);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.rs-scope .rs-pie-val{font-weight:700;color:var(--r-ink);min-width:2ch}
.rs-scope .rs-pie-pct{color:var(--r-ink-soft);min-width:5ch}
@container rs (max-width:560px){
.rs-scope .rs-pie{grid-template-columns:minmax(0,1fr);gap:1.1em}
.rs-scope .rs-pie-plot{max-width:13em;margin:0 auto}
}
/* hover card: .rs-bar-tip look, anchored inside the hovered slice */
.rs-scope .rs-pie-tip-anchor{position:absolute;width:0;height:0;z-index:20}
.rs-scope .rs-pie-tip-anchor .rs-bar-tip{left:0;width:max-content}
.rs-scope .rs-pie-tip-anchor.is-below .rs-bar-tip{bottom:auto;top:calc(100% + 6px)}
.rs-scope .rs-pie-tip-anchor.is-below .rs-bar-tip::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--r-ink)}
.rs-scope .rs-pie-tip-anchor .rs-bar-tip .d{display:block;margin-top:.35em;color:color-mix(in srgb,var(--r-paper) 72%,var(--r-ink))}
/* ===== library/blocks/chart-takeaways/takeaways.css ===== */
/* chart-takeaways (core block 5): 2–4 stat sentences read off the chart above.
LOCKED 2026-09-15: B5 variant=A (Under the chart) tuned=[title,fn] | place=out title=shows bullet=square fn=off
Upstream: B3 accent bold figures, F2 quiet-text Cite. Owner rule: NO footnote badges on takeaways.
Markup contract (renderer), placed right after the chart figure:
What the data shows
69% of students use AI to search for information. {Cite}
*/
.rs-scope .rs-tk{margin-top:1.2em}
.rs-scope .rs-tk-title{font:700 var(--r-size-micro)/1.2 var(--r-font-body);letter-spacing:var(--r-eyebrow-tracking);text-transform:uppercase;color:var(--r-ink-soft);margin-bottom:.6em}
.rs-scope .rs-tk-list{list-style:none;margin:0;padding:0;max-width:660px}
.rs-scope .rs-tk-list li{position:relative;margin:0 0 .55em;padding-left:1.25em;line-height:1.5}
.rs-scope .rs-tk-list li:last-child{margin-bottom:0}
.rs-scope .rs-tk-list li::before{content:"";position:absolute;left:.1em;top:.66em;width:.36em;height:.36em;background:var(--r-ink)}
.rs-scope .rs-tk .rs-btn{margin-left:.35em;vertical-align:.08em;--_bg:transparent;--_bd:transparent;--_ink:var(--r-ink-faint);padding:.2em .15em}
.rs-scope .rs-tk .rs-btn:hover{--_ink:var(--r-accent)}
/* ===== library/blocks/geo-map/geo-map.css ===== */
/* ============================================================================
geo-map (on-demand block 19, built 2026-09-17): choropleth over a country map.
The renderer embeds the country's region outlines as SVG paths (one map file
per country, chosen by the site config, so other countries = another file).
Markup contract (renderer):
…title / subtitle / unit…
(only when the table has more rows than the collapsed count)
…
Inline bar only on the table's main value column (--v = value as % of the column max). */
.rs-scope .rs-table-wrap{position:relative;max-width:none;overflow-x:auto;-webkit-overflow-scrolling:touch} /* wide tables scroll inside the card instead of clipping */
.rs-scope .rs-table{width:100%;border-collapse:collapse;font-size:var(--r-size-small);font-variant-numeric:tabular-nums lining-nums}
.rs-scope .rs-table th{text-align:left;font-size:var(--r-size-micro);font-weight:700;color:var(--r-ink-soft);
text-transform:uppercase;letter-spacing:var(--r-eyebrow-tracking);padding:.5em .8em .6em 0;border-bottom:1.5px solid var(--r-ink);white-space:nowrap;vertical-align:bottom}
.rs-scope .rs-table td{padding:.62em .8em .62em 0;vertical-align:middle}
.rs-scope .rs-table th:last-child,.rs-scope .rs-table td:last-child{padding-right:0}
.rs-scope .rs-table .n{text-align:right;font-family:var(--r-font-num);font-weight:600;white-space:nowrap}
.rs-scope .rs-table .rk{width:2.2em;color:var(--r-ink-faint);font-weight:600}
.rs-scope .rs-table tbody tr + tr td{border-top:1px solid var(--r-rule)}
.rs-scope .rs-table tbody tr:hover td{background:color-mix(in srgb,var(--r-accent) 6%,var(--r-card))}
/* inline bar next to the main value */
.rs-scope .rs-table .bar{display:inline-block;width:5em;height:.5em;margin-left:.7em;vertical-align:.08em;border-radius:4px;background:var(--r-data-track);position:relative;overflow:hidden}
.rs-scope .rs-table .bar::before{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 1%);background:var(--r-series-1);border-radius:4px}
/* sortable headers */
.rs-scope .rs-table th .rs-unit{text-transform:none;letter-spacing:0}
.rs-scope .rs-table th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:.3em}
.rs-scope .rs-table th button::after{content:"↕";font-size:.95em;color:var(--r-ink-faint)}
.rs-scope .rs-table th[aria-sort="descending"] button::after{content:"↓";color:var(--r-ink)}
.rs-scope .rs-table th[aria-sort="ascending"] button::after{content:"↑";color:var(--r-ink)}
.rs-scope .rs-table th button:focus-visible{outline:2px solid var(--r-accent);outline-offset:2px}
/* collapsed: 10 rows (desktop); .is-short (9-13 rows) collapses on mobile only, .is-open (<= 8) never */
.rs-scope .rs-table-wrap:not(.is-open):not(.is-short) tbody tr:nth-child(n+11){display:none}
/* Show all: full-width, easy to see */
.rs-scope .rs-table-more{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;margin-top:.9em;
padding:.8em 1em;border:1.5px solid var(--r-ink);border-radius:var(--r-btn-radius);cursor:pointer;
font:700 var(--r-size-small)/1 var(--r-font-body);color:var(--r-ink);background:var(--r-card)}
.rs-scope .rs-table-more::after{content:"";width:.45em;height:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15em) rotate(45deg)}
.rs-scope .rs-table-wrap.is-open + .rs-table-more::after{transform:translateY(.1em) rotate(-135deg)}
.rs-scope .rs-table-more:hover{background:var(--r-ink);color:var(--r-paper)}
.rs-scope .rs-table-more:focus-visible{outline:2px solid var(--r-accent);outline-offset:2px}
/* 9–13 rows: nothing to expand on desktop (renderer adds .is-short to the wrap) */
@container rs (min-width:561px){ .rs-scope .rs-table-wrap.is-short + .rs-table-more{display:none} }
/* mobile: stacked rows, collapsed = 5 rows */
@container rs (max-width:560px){
.rs-scope .rs-table-wrap:not(.is-open) tbody tr:nth-child(n+6){display:none}
.rs-scope .rs-table .bar{width:3em}
.rs-scope .rs-table thead{display:none}
.rs-scope .rs-table tr{display:grid;grid-template-columns:auto 1fr;gap:.15em .8em;padding:.6em 0}
.rs-scope .rs-table tbody tr + tr{border-top:1px solid var(--r-rule)}
.rs-scope .rs-table td{padding:0;border:0 !important;background:none !important}
.rs-scope .rs-table td.rk{grid-row:1}
.rs-scope .rs-table td:not(.rk){grid-column:-2}
.rs-scope .rs-table-wrap.is-norank .rs-table tr{grid-template-columns:1fr}
.rs-scope .rs-table td.c{font-weight:700}
.rs-scope .rs-table td.n{text-align:left;font-weight:500}
.rs-scope .rs-table td[data-th]::before{content:attr(data-th) ": ";color:var(--r-ink-soft);font-family:var(--r-font-body);font-weight:400}
}
/* ===== library/blocks/faq/faq.css ===== */
/* ---- faq (B17, LOCKED 2026-09-24: accordion, chevron, numbered, first open, one open at a time) ----
{heading}
{question}
{answer with footnotes}
…
Every answer is in the HTML (closed is still crawlable text). One question = one H3.
Tokens only; layout by @container. */
.rs-scope .rs-faq h2{margin-bottom:.6em}
.rs-scope .rs-faq-list{counter-reset:faq}
.rs-scope .rs-faq-item{margin:0}
.rs-scope .rs-faq-q{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:.8em}
.rs-scope .rs-faq-q::-webkit-details-marker{display:none}
.rs-scope .rs-faq-q h3{margin:0;flex:1 1 auto;font:var(--r-weight-head) calc(var(--r-body) * 1.05)/1.35 var(--r-font-head);letter-spacing:var(--r-tracking-head);color:var(--r-ink)}
.rs-scope .rs-faq-a p{margin:.5em 0 0;max-width:var(--r-measure);color:var(--r-ink)}
.rs-scope .rs-faq-q:focus-visible{outline:2px solid var(--r-accent);outline-offset:3px}
/* numbering (tuner) */
.rs-scope .rs-faq[data-faq-num="on"] .rs-faq-item{counter-increment:faq}
.rs-scope .rs-faq[data-faq-num="on"] .rs-faq-q h3::before{content:counter(faq) ". ";color:var(--r-accent-ink)}
/* plus / chevron icon */
.rs-scope .rs-faq-ico{flex:0 0 auto;width:1.1em;height:1.1em;margin-top:.15em;position:relative;color:var(--r-ink)}
.rs-scope .rs-faq[data-faq-ico="plus"] .rs-faq-ico::before,.rs-scope .rs-faq[data-faq-ico="plus"] .rs-faq-ico::after{content:"";position:absolute;left:50%;top:50%;width:.8em;height:2px;background:currentColor;transform:translate(-50%,-50%);transition:transform .2s}
.rs-scope .rs-faq[data-faq-ico="plus"] .rs-faq-ico::after{transform:translate(-50%,-50%) rotate(90deg)}
.rs-scope .rs-faq[data-faq-ico="plus"] details[open] .rs-faq-ico::after{transform:translate(-50%,-50%) rotate(0)}
.rs-scope .rs-faq[data-faq-ico="chevron"] .rs-faq-ico::before{content:"";position:absolute;left:25%;top:15%;width:.45em;height:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.rs-scope .rs-faq[data-faq-ico="chevron"] details[open] .rs-faq-ico::before{transform:translateY(.25em) rotate(-135deg)}
.rs-scope .rs-faq[data-faq-ico="none"] .rs-faq-ico{display:none}
/* A · accordion: ruled rows, answers open on click */
.rs-scope .rs-faq[data-faq-layout="accordion"] .rs-faq-item{border-top:1px solid var(--r-rule)}
.rs-scope .rs-faq[data-faq-layout="accordion"] .rs-faq-item:last-child{border-bottom:1px solid var(--r-rule)}
.rs-scope .rs-faq[data-faq-layout="accordion"] .rs-faq-q{padding:.95em 0}
.rs-scope .rs-faq[data-faq-layout="accordion"] .rs-faq-a{padding:0 2em 1.1em 0}
.rs-scope .rs-faq[data-faq-layout="accordion"] .rs-faq-a p{margin-top:0}
.rs-scope .rs-faq[data-faq-layout="accordion"] .rs-faq-q:hover h3{text-decoration:underline;text-decoration-color:var(--r-accent);text-underline-offset:3px}
/* B · open cards: every Q&A visible, one white panel per question */
.rs-scope .rs-faq[data-faq-layout="cards"] .rs-faq-list{display:grid;gap:12px}
.rs-scope .rs-faq[data-faq-layout="cards"] .rs-faq-item{background:var(--r-panel-bg);box-shadow:var(--r-panel-shadow);padding:16px 20px;border-left:3px solid var(--r-accent)}
.rs-scope .rs-faq[data-faq-layout="cards"] .rs-faq-q{cursor:default;pointer-events:none}
.rs-scope .rs-faq[data-faq-layout="cards"] .rs-faq-ico{display:none}
/* C · split: question left, answer right on wide screens, all open */
.rs-scope .rs-faq[data-faq-layout="split"] .rs-faq-item{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:28px;border-top:1px solid var(--r-rule);padding:1em 0}
.rs-scope .rs-faq[data-faq-layout="split"] .rs-faq-item:last-child{border-bottom:1px solid var(--r-rule)}
.rs-scope .rs-faq[data-faq-layout="split"] .rs-faq-q{cursor:default;pointer-events:none}
.rs-scope .rs-faq[data-faq-layout="split"] .rs-faq-ico{display:none}
.rs-scope .rs-faq[data-faq-layout="split"] .rs-faq-a p{margin-top:0}
@container rs (max-width:560px){
.rs-scope .rs-faq[data-faq-layout="split"] .rs-faq-item{grid-template-columns:1fr}
.rs-scope .rs-faq[data-faq-layout="split"] .rs-faq-a p{margin-top:.5em}
.rs-scope .rs-faq[data-faq-layout="accordion"] .rs-faq-a{padding-right:0}
}
/* ===== library/blocks/methodology/methodology.css ===== */
/* methodology (core block 8): how the numbers were made.
LOCKED 2026-09-15: B8 variant=A (Prose) tuned=[box,cov] | title=method layout=prose box=card cov=on labels=bold
Markup contract (renderer):
Methodology
Period 2024
30 countries
4 sources
Updated May 18, 2025
Definition. …
Data sources. … {footnotes}
Calculations. …
Limitations. …
*/
.rs-scope .rs-md{margin-top:var(--r-space)}
/* coverage strip: items flow and wrap inside the container (long entries must never run wide) */
.rs-scope .rs-md-cov{display:flex;flex-wrap:wrap;gap:.4em 1em;margin:0 0 1.1em;font-size:var(--r-size-small);color:var(--r-ink-soft)}
.rs-scope .rs-md-cov ul{display:flex;flex-wrap:wrap;row-gap:.3em;list-style:none;padding:0;margin:0;max-width:none;min-width:0}
.rs-scope .rs-md-cov li{margin:0;padding:0 .8em;border-left:1px solid var(--r-rule);text-wrap:pretty}
.rs-scope .rs-md-cov li:first-child{padding-left:0;border-left:0}
.rs-scope .rs-md-cov b{color:var(--r-ink)}
@container rs (min-width:620px){
.rs-scope .rs-md-cov{gap:.4em 0}
.rs-scope .rs-md-cov ul + ul li:first-child{padding-left:.8em;border-left:1px solid var(--r-rule)}
}
/* white card with paragraphs, bold lead-ins */
.rs-scope .rs-md-body{background:var(--r-panel-bg);box-shadow:var(--r-panel-shadow);border-radius:var(--r-panel-radius);padding:var(--r-panel-pad)}
.rs-scope .rs-md-item{margin:0 0 1em;max-width:660px}
.rs-scope .rs-md-item:last-child{margin-bottom:0}
.rs-scope .rs-md-lab{font-weight:700;color:var(--r-ink)}
/* fix 2026-09-17: items wrap at every width (replaces the old 420px-only workaround) */
/* ===== library/blocks/related-research/related.css ===== */
/* related-research: links to the most relevant sibling research pages of the same site (bottom of the page).
LOCKED 2026-09-16: B24 variant=A (Cards) untuned | layout=cards count=6 cols=2 cat=on stat=on go=on sub=on
Owner: "for each site, we will be making 10-50 research pages. we must interlink them in this block.
most relevant ones must be linked to."
Relevance (renderer): shared tags x2, +3 same category; top 6; never the page itself; pages with listed: false skipped.
(no photo in site config → )