/* ===========================================================================
   RBF Works — Case studies, shared styles (HIDDEN PREVIEW).
   Charts (.csc-*), source/quote popovers (.cs-pop), citation markers (.cs-cite),
   quote anchors (.cs-q), the design switcher (.cs-switch) and the gaps note.
   Builds on the tokens in styles.css. Design-specific layout lives in each page.
   =========================================================================== */

:root {
  --cs-s0: var(--blue-700);
  --cs-s1: var(--amber);
  --cs-s2: #8fa2dc;
  --cs-neg: #c9573a;
  --cs-pos: #1c7c39;
  --cs-track: rgba(20, 32, 63, .07);
}

/* ---------------- citation markers ---------------- */
.cs-cite {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 2px;
  font-family: var(--mono); font-weight: 600; color: var(--blue-700);
  transition: background .2s, color .2s;
}
.cs-cite-sup { font-size: 10.5px; vertical-align: super; line-height: 0; padding: 0 2px; margin-left: 2px; }
.cs-cite-sup::before { content: "["; opacity: .5; }
.cs-cite-sup::after { content: "]"; opacity: .5; }
.cs-cite-pill { font-size: 10.5px; padding: 3px 8px; border-radius: 999px; background: var(--blue-100); letter-spacing: .04em; }
.cs-cite-pill::before { content: "Source "; font-weight: 500; opacity: .7; margin-right: 2px; }
.cs-cite:hover, .cs-cite.cs-on, .cs-cite:focus-visible { background: var(--amber); color: var(--blue-900); border-radius: 999px; }
.cs-cite-sep { opacity: .45; padding: 0 1px; }

/* the block a hovered citation belongs to */
[data-cite-block] { transition: background .25s, box-shadow .25s; border-radius: 6px; }
[data-cite-block].cs-lit { background: rgba(247, 148, 30, .09); box-shadow: 0 0 0 6px rgba(247, 148, 30, .09); }

/* ---------------- quote anchors ---------------- */
/* stronger than the **key phrase** highlight: a tinted chip with the speaker's face, a solid amber
   underline, and a quote mark; the chip fills in amber on hover / focus */
.cs-q {
  cursor: pointer; font-weight: 600; color: var(--blue-900);
  background: rgba(43,63,140,.08); border-bottom: 2px solid var(--amber); border-radius: 6px 6px 2px 2px;
  padding: 1px 5px 1px 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cs-q:hover, .cs-q.cs-on, .cs-q:focus-visible { background: rgba(247,148,30,.2); box-shadow: 0 2px 0 var(--amber); outline: none; }
.cs-q-w1 { white-space: nowrap; }
/* organization / term hover anchors ({{o:id|phrase}}): key-phrase look plus a dotted underline, blue box on hover */
.cs-o { cursor: pointer; font-weight: 600; color: var(--blue-900); border-bottom: 2px dotted var(--blue-700); border-radius: 3px 3px 0 0; transition: background-color .2s var(--ease); }
.cs-o:hover, .cs-o.cs-on, .cs-o:focus-visible { background: rgba(43,63,140,.12); outline: none; }
.cs-q-face { display: inline-block; width: 1.45em; height: 1.45em; border-radius: 50%; vertical-align: -.36em; margin-right: .32em;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--amber); }
.cs-q-ico { font-style: normal; font-family: Georgia, serif; font-weight: 700; color: var(--amber); font-size: 1.25em; margin-left: 3px; line-height: 0; vertical-align: -.12em; }

/* ---------------- popover ---------------- */
.cs-pop {
  position: fixed; z-index: 90; width: min(380px, calc(100vw - 24px));
  background: var(--blue-900); color: #fff; border-radius: 12px; padding: 14px 16px;
  box-shadow: var(--shadow-lg); font-size: 13.5px; line-height: 1.45;
  opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .16s, transform .16s;
}
.cs-pop.open { opacity: 1; transform: none; pointer-events: auto; }
.cs-pop.pinned { outline: 2px solid var(--amber); }
.cs-pop-h { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber-2); margin-bottom: 8px; }
.cs-src { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.12); }
.cs-pop-h + .cs-src { border-top: 0; padding-top: 0; }
.cs-src-n { width: 24px; height: 24px; border-radius: 50%; background: var(--amber); color: var(--blue-900); font-weight: 700; font-size: 12px; display: grid; place-items: center; }
.cs-src-kind { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.cs-src-t { font-weight: 600; margin: 2px 0 3px; }
.cs-src-m { color: rgba(255,255,255,.75); font-size: 12.5px; }
.cs-src-note { color: rgba(255,255,255,.6); font-size: 12px; margin-top: 4px; font-style: italic; }
.cs-src-a { display: inline-block; margin-top: 6px; color: var(--amber-2); font-weight: 600; font-size: 12.5px; }
.cs-org-n { font-weight: 600; margin-bottom: 5px; }
.cs-org-bio { margin: 0; color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.5; }
.cs-pop.is-quote { background: #fff; color: var(--ink); border-left: 4px solid var(--amber); }
.cs-quote blockquote { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 500; font-style: italic; color: var(--blue-900); }
.cs-who { margin-top: 8px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
/* quote with an interviewee headshot and role */
.cs-quote.has-img .cs-who { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.cs-who img { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.cs-who b { display: block; color: var(--blue-900); font-size: 13px; }
.cs-who em { display: block; font-style: normal; font-weight: 500; font-size: 12px; line-height: 1.35; }
.cs-ph { display: inline-block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; background: #fde8cc; color: #8a4b00; padding: 2px 7px; border-radius: 5px; margin-bottom: 8px; }

/* ---------------- chart frame ---------------- */
.csc { margin: 28px 0; padding: 22px 24px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--rad); }
.csc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.csc-title { font-weight: 600; font-size: 15.5px; color: var(--blue-900); }
.csc-cap { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.csc-bare { padding: 0; background: none; border: 0; }
.csc-dark { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #fff; }
.csc-dark .csc-title { color: #fff; }
.csc-dark .csc-cap, .csc-dark .csb-note, .csc-dark .csp-sub, .csc-dark .csd-share { color: rgba(255,255,255,.62); }
.csc-dark { --cs-track: rgba(255,255,255,.1); --cs-s0: #8fa2ff; }
.csc-dark .csb-val, .csc-dark .cst-val { color: #fff; }

/* growth animation — bars start at 0 and grow once the figure scrolls into view */
.csc [style*="--w"] { width: 0; transition: width 1s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.csc.in [style*="--w"] { width: var(--w); }
.csc .csb-row .csb-bar, .csc .csp-bar, .csc .csp-ghost { transition-delay: calc(var(--i, 0) * 70ms); }
.csc .csb-row { --i: 0; }
@media (prefers-reduced-motion: reduce) { .csc [style*="--w"] { transition: none; width: var(--w); } }

/* bars */
.csb-row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 14px; align-items: center; padding: 5px 0; }
.csb-lab { font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.csb-note { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
/* the value label sits after the bar end; reserve room for it so a full-length bar never
   pushes its label outside the card (bar widths are % of the track's content box) */
.csb-track { position: relative; display: flex; align-items: center; gap: 8px; padding-right: 84px; }
.csb-bar { height: 14px; border-radius: 4px; background: var(--blue-200); flex: none; }
.csb-row.hl .csb-bar { background: var(--grad-energy); }
.csb-row.hl .csb-lab { color: var(--blue-700); font-weight: 600; }
.csb-val { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--blue-900); white-space: nowrap; }
.csc-bars .csb-row .csb-bar { transition-delay: 0ms; }
/* hover / focus / tap box for bar rows (spec.hover) */
.csb-row.has-tip { position: relative; cursor: default; border-radius: 6px; outline: none; }
.csb-row.has-tip:hover, .csb-row.has-tip:focus-visible { background: rgba(43,63,140,.05); }
.csb-row.has-tip:focus-visible { box-shadow: 0 0 0 2px var(--blue-200); }
.csb-tip { position: absolute; z-index: 5; left: min(calc(34% + 14px), calc(100% - 230px)); top: calc(100% - 2px); width: 230px; box-sizing: border-box; padding: 10px 12px;
  background: var(--blue-900, #14204a); color: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(20,32,74,.25);
  font-size: 12.5px; line-height: 1.35; opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; }
.csb-row.has-tip:hover .csb-tip, .csb-row.has-tip:focus .csb-tip, .csb-row.has-tip:focus-within .csb-tip { opacity: 1; visibility: visible; transform: none; }
.csb-tip b { display: block; font-size: 13px; margin-bottom: 6px; }
.csb-tip dl { margin: 0; display: grid; gap: 3px; }
.csb-tip dl div { display: flex; justify-content: space-between; gap: 16px; }
.csb-tip dt { color: rgba(255,255,255,.7); }
.csb-tip dd { margin: 0; font-family: var(--mono); font-weight: 600; }

/* split (100% stacked) */
.css-row { padding: 6px 0 12px; }
.css-lab { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.css-bar { display: flex; height: 34px; border-radius: 7px; overflow: hidden; background: var(--cs-track); }
.css-seg { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; border-right: 2px solid var(--card); }
.csc-dark .css-seg { border-right-color: var(--blue-900); }
.css-seg:last-child { border-right: 0; }
.css-in { font-family: var(--mono); font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; }
.css-t0 { background: var(--cs-s0); }
.css-t1 { background: var(--cs-s1); }
.css-t1 .css-in { color: var(--blue-900); }
.css-t2 { background: var(--cs-s2); }
.css-neg { background: var(--cs-neg); }
.css-neg .css-in { color: #fff; }
.css-act, .css-o1 { background: var(--cs-s0); }
.css-pos { background: #1c7c39; }
.css-warn, .css-o2 { background: var(--cs-s1); }
.css-warn .css-in, .css-o2 .css-in, .css-o3 .css-in { color: var(--blue-900); }
.css-o3 { background: var(--cs-s2); }
.css-o4 { background: #6d7a99; }
.css-muted { background: var(--blue-200); }
.css-muted .css-in { color: var(--blue-900); }
.css-keys { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.css-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.css-key em { font-style: normal; opacity: .8; }
.css-key b { color: var(--ink); font-family: var(--mono); }
.csc-dark .css-key b { color: #fff; }

/* progress (target vs actual) */
.csp-row { padding: 8px 0 10px; }
.csp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.csp-lab { font-size: 13.5px; font-weight: 600; }
.csp-pct { font-family: var(--mono); font-weight: 700; font-size: 15px; }
.csp-row.over .csp-pct { color: var(--cs-pos); }
.csp-row.under .csp-pct { color: #b8660b; }
.csc-dark .csp-row.over .csp-pct { color: #7ee29a; }
.csc-dark .csp-row.under .csp-pct { color: var(--amber-2); }
.csp-track { position: relative; height: 12px; border-radius: 6px; background: var(--cs-track); margin: 7px 0 5px; }
.csp-bar, .csp-ghost { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.csp-bar { background: var(--cs-s0); }
.csp-row.under .csp-bar { background: var(--amber); }
/* colour by sector (overrides over/under) */
.csp-row.csp-k0 .csp-bar { background: var(--cs-s0); }
.csp-row.csp-k1 .csp-bar { background: var(--amber); }
.csp-row.csp-gap { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--cs-track); }
.csp-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.csp-leg span { display: inline-flex; align-items: center; gap: 6px; }
.csp-leg i { width: 12px; height: 8px; border-radius: 2px; display: inline-block; }
.csp-leg i.csp-k0 { background: var(--cs-s0); }
.csp-leg i.csp-k1 { background: var(--amber); }
.csp-ghost { background: repeating-linear-gradient(135deg, rgba(43,63,140,.25) 0 4px, transparent 4px 8px); }
.csp-target { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--ink); }
.csc-dark .csp-target { background: #fff; }
.csp-target span { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.csp-row:not(.csp-tl) .csp-target span { display: none; }
.csp-sub { font-size: 12px; color: var(--muted); }
.csp-sub b { color: var(--ink); font-family: var(--mono); }
.csc-dark .csp-sub b { color: #fff; }
.csp-gh { opacity: .85; }

/* stacked */
.cst-leg, .csd-leg { display: flex; gap: 16px; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.cst-leg i, .csd-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.cst-row { display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: center; padding: 5px 0; }
.cst-lab { font-size: 13px; font-weight: 600; }
.cst-track { display: flex; align-items: center; gap: 8px; padding-right: 96px; }
.cst-bar { display: flex; height: 22px; border-radius: 5px; overflow: hidden; flex: none; }
.cst-seg { height: 100%; }
.cst-s0 { background: var(--cs-s0); }
.cst-s1 { background: var(--cs-s1); }
.cst-val { font-family: var(--mono); font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* dumbbell */
.csd-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; height: 38px; }
.csd-lab { font-size: 13px; font-weight: 600; line-height: 1.2; }
.csd-share { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.csd-track { position: relative; height: 100%; }
.csd-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.csd-line { position: absolute; top: 50%; height: 3px; margin-top: -1.5px; background: var(--blue-200); border-radius: 2px; }
.csd-line.down { background: rgba(201,87,58,.35); }
.csd-dot { position: absolute; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; transition: left .9s var(--ease); }
.csd-dot span { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.csd-from, .csd-leg .csd-from { background: #fff; border: 2.5px solid var(--blue-500); box-sizing: border-box; }
.csd-to, .csd-leg .csd-to { background: var(--amber); }
.csd-leg i { border-radius: 50%; }
.csd-axis { height: 18px; }
.csd-axis .csd-track span { position: absolute; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; color: var(--muted); }

/* timeline */
.csc-timeline .csc-body { position: relative; }
.cstl-axis { position: relative; height: 16px; margin: 0 8px; }
.cstl-axis span { position: absolute; transform: translateX(-50%); font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.cstl-line { position: relative; height: 4px; margin: 4px 8px 0; border-radius: 2px; background: var(--blue-200); }
.cstl-ext { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--amber) 0 6px, transparent 6px 10px); }
.cstl-ev { list-style: none; margin: 0 8px; padding: 0; position: relative; height: 150px; }
.cstl-e { position: absolute; top: 0; width: 1px; }
.cstl-e i { position: absolute; top: -9px; left: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue-700); border: 2px solid var(--card); z-index: 1; }
/* stem from the dot down to its label; --top/--dx/--ta are set by CS.layoutTimelines() */
.cstl-e::before { content: ""; position: absolute; top: 3px; left: 0; width: 1px; background: var(--line); height: calc(var(--top, 24px) - 6px); }
.cstl-tag { position: absolute; left: 0; top: var(--top, 24px); width: 118px; transform: translateX(var(--dx, -50%)); text-align: var(--ta, center); line-height: 1.25; }
.cstl-tag span { display: block; }
.cstl-d { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-bottom: 2px; }
.cstl-l { font-size: 11.5px; font-weight: 600; }
.cstl-change i { background: var(--amber); }
.cstl-missed i { background: #fff; border-color: var(--cs-neg); }
.cstl-result i { background: var(--cs-pos); }
.cstl-future i { background: #fff; border: 2px dashed var(--blue-700); }
.cstl-list { display: none; list-style: none; margin: 0; padding: 0; font-size: 13px; }
.cstl-list li { padding: 5px 0 5px 14px; border-left: 2px solid var(--blue-200); }
.cstl-list li.cstl-change { border-color: var(--amber); }
.cstl-list b { font-family: var(--mono); font-size: 11.5px; margin-right: 6px; }
@media (max-width: 760px) {
  .cstl-axis, .cstl-line, .cstl-ev { display: none; }
  .cstl-list { display: block; }
}

/* ---------------- gaps ---------------- */
.cs-gaps { margin: 40px 0; padding: 20px 22px; border: 1.5px dashed rgba(20,32,63,.22); border-radius: var(--rad); background: rgba(255,255,255,.5); font-size: 13.5px; }
.cs-gaps-h { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.cs-gaps p { margin: 0 0 10px; color: var(--muted); }
.cs-gaps a { color: var(--blue-700); font-weight: 600; }
.cs-gaps dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.cs-gaps dt { font-weight: 600; font-size: 12.5px; }
.cs-gaps dd { margin: 0; color: var(--muted); font-size: 12.5px; }
@media (max-width: 640px) { .cs-gaps dl { grid-template-columns: 1fr; } .cs-gaps dd { margin-bottom: 6px; } }

/* ---------------- design switcher ---------------- */
.cs-switch {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 70;
  display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px;
  background: rgba(19,31,77,.94); backdrop-filter: blur(10px); box-shadow: var(--shadow-lg);
  font-size: 12.5px; white-space: nowrap; max-width: calc(100vw - 20px); overflow-x: auto;
}
.cs-switch a { color: rgba(255,255,255,.78); padding: 6px 13px; border-radius: 999px; font-weight: 600; }
.cs-switch a:hover { color: #fff; background: rgba(255,255,255,.1); }
.cs-switch a.on { background: var(--grad-energy); color: var(--blue-900); }
.cs-switch-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-2); padding: 0 10px 0 12px; }
.cs-switch-back { border-right: 1px solid rgba(255,255,255,.15); border-radius: 999px 0 0 999px !important; }
@media (max-width: 560px) { .cs-switch-tag { display: none; } }
@media print { .cs-switch, .cs-pop { display: none !important; } }

/* ---------------- key phrases (**…** in the content) ---------------- */
.cs-k {
  font-weight: 600; color: var(--blue-900);
  background: linear-gradient(0deg, rgba(247,148,30,.28), rgba(247,148,30,.28)) no-repeat 0 92% / 100% .32em;
  padding: 0 1px;
}
.bg-blue .cs-k, .csc-dark .cs-k, .cs-dark .cs-k { color: #fff; background-image: linear-gradient(0deg, rgba(253,185,19,.38), rgba(253,185,19,.38)); }

/* ---------------- figures block (row of stat tiles) ---------------- */
.cs-figs { margin: 30px 0; }
.cs-figs-h { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin-bottom: 12px; }
.cs-figs-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); background: var(--card); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; }
.cs-fig { padding: 18px 18px 16px; border-left: 1px solid var(--line); position: relative; }
.cs-fig:first-child { border-left: 0; }
.cs-fig-v { font-weight: 700; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.05; color: var(--blue-900); letter-spacing: -.01em; }
.cs-fig-l { font-size: 13.5px; font-weight: 600; margin-top: 8px; line-height: 1.3; }
.cs-fig-s { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.cs-fig .cs-cite { position: absolute; top: 14px; right: 12px; }
.cs-figs-dark .cs-figs-row { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.cs-figs-dark .cs-fig { border-left-color: rgba(255,255,255,.12); }
.cs-figs-dark .cs-fig-v, .cs-figs-dark .cs-fig-l { color: #fff; }
.cs-figs-dark .cs-fig-s { color: rgba(255,255,255,.62); }
.cs-figs-dark .cs-cite { color: var(--amber-2); }
@media (max-width: 560px) { .cs-figs-row { grid-template-columns: 1fr 1fr; } .cs-fig:nth-child(odd) { border-left: 0; } .cs-fig:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* ---------------- two-column fact values (e.g. Financing: funder | amount) ---------------- */
.cs-ft { width: 100%; border-collapse: collapse; margin: 3px 0 0; font-size: inherit; line-height: 1.35; }
.cs-ft td { padding: 4px 0; vertical-align: top; border-top: 1px solid rgba(20,32,63,.08); }
.cs-ft tr:first-child td { border-top: 0; padding-top: 1px; }
.cs-ft td:last-child { text-align: right; padding-left: 12px; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.cs-ft-note { font-size: .86em; opacity: .72; margin-top: 2px; }
.cs-ft-note:empty { display: none; }
/* grouped bullet facts (f.groups) */
.cs-fg + .cs-fg { margin-top: 8px; }
.cs-fg-h { font-size: .8em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-bottom: 2px; }
.cs-fg-ul { margin: 0; padding-left: 16px; }
.cs-fg-ul li { margin: 2px 0; }
.cs-fg-ul li::marker { color: var(--amber); }

/* ---------------- program + partner logos ---------------- */
.cs-brand { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; }
.cs-brand-logo { height: 52px; width: auto; }
.cs-partners { list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 1px solid var(--line); display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 26px; }
.cs-partners li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cs-partner-role { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cs-partners img { height: 30px; width: auto; max-width: none; align-self: flex-start; filter: grayscale(1); opacity: .72; transition: filter .25s, opacity .25s; }
.cs-partners li:hover img, .cs-brand:focus-within .cs-partners img { filter: none; opacity: 1; }
.cs-partner-org { cursor: pointer; border-radius: 6px; outline-offset: 4px; }
.cs-partner-org:focus-visible { outline: 2px solid var(--blue-700); }
.cs-partner-org.cs-on img { filter: none; opacity: 1; }
@media (max-width: 560px) {
  .cs-brand-logo { height: 42px; }
  .cs-partners { padding-left: 0; border-left: 0; gap: 12px 20px; }
  .cs-partners img { height: 26px; }
}

/* ---------------- photos ---------------- */
.cs-photo { margin: 30px 0; }
.cs-photo img { display: block; width: 100%; height: auto; border-radius: var(--rad); background: var(--paper-2); }
.cs-photo figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 9px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.cs-photo-credit { flex: none; margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.cs-photo.cs-hero img { aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 45%; }
@media (max-width: 560px) { .cs-photo figcaption { flex-direction: column; gap: 3px; } .cs-photo.cs-hero img { aspect-ratio: 16 / 10; } }

/* ---------------- Chart / Map switch + choropleth ---------------- */
.csc-head-views { flex-wrap: wrap; }
.csc-head-views .csc-title { flex: 1 1 auto; }
.csc-views { display: inline-flex; background: var(--paper-2); border-radius: 999px; padding: 3px; }
.csc-views button { all: unset; cursor: pointer; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 5px 13px; border-radius: 999px; transition: background .2s, color .2s; }
.csc-views button[aria-pressed="true"] { background: #fff; color: var(--blue-700); box-shadow: 0 1px 2px rgba(19,31,77,.14); }
.csc-views button:not([aria-pressed="true"]):hover { color: var(--ink); }
.csc-views button:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.csc-map svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.csc-map-loading { padding: 60px 0; text-align: center; color: var(--muted); font-size: 13px; }
.csm-c { stroke: #fff; stroke-width: .8; }
.csm-c:not(.on) { fill: #ece6d9; }
.csm-c.on { cursor: pointer; stroke-width: 1; }
.csm-c.on:hover, .csm-c.on:focus { stroke: var(--amber); stroke-width: 2.5; outline: none; }
.csm-labels text { font-family: var(--sans); font-size: 12px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; pointer-events: none;
  fill: #131f4d; paint-order: stroke; stroke: rgba(255,255,255,.88); stroke-width: 3.5px; stroke-linejoin: round; }
.csm-legend { max-width: 420px; margin: 10px auto 0; font-size: 12px; color: var(--muted); }
.csm-legend-h { display: block; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.csm-ramp { height: 10px; border-radius: 5px; }
.csm-ticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; margin-top: 4px; }
.csm-note { margin: 8px 0 0; font-size: 11.5px; }
.csm-note i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: #ece6d9; margin-right: 6px; vertical-align: -1px; }
.cs-maptip { position: fixed; z-index: 90; pointer-events: none; background: var(--blue-900); color: #fff; padding: 9px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.45; box-shadow: var(--shadow); opacity: 0; transition: opacity .12s; max-width: 240px; }
.cs-maptip.open { opacity: 1; }
.cs-maptip b { color: var(--amber-2); }
.cs-maptip .muted { color: rgba(255,255,255,.65); }

/* map metric switch (e.g. Systems sold / Share of households) */
.csm-metrics { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.csm-metrics button { all: unset; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; transition: background .2s, color .2s, border-color .2s; }
.csm-metrics button[aria-pressed="true"] { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.csm-metrics button:not([aria-pressed="true"]):hover { color: var(--ink); border-color: var(--blue-200); }
.csm-metrics button:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }

/* ---------------- pie (one ring per funder) ---------------- */
.cspie-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px 28px; }
.cspie { display: flex; flex-direction: column; align-items: center; }
.cspie-h { font-weight: 700; font-size: 14px; color: var(--blue-900); margin-bottom: 10px; }
.cspie-ring { position: relative; width: 168px; height: 168px; opacity: 0; transform: scale(.92); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.csc.in .cspie-ring { opacity: 1; transform: none; }
.cspie-ring svg { width: 100%; height: 100%; display: block; }
.cspie-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.15; }
.cspie-c b { font-family: var(--mono); font-size: 17px; color: var(--blue-900); }
.cspie-c span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.cspie-rbf { margin: 10px 0 8px; font-size: 12.5px; color: var(--muted); }
.cspie-rbf b { font-family: var(--mono); color: var(--blue-700); }
.cspie-keys { list-style: none; margin: 0; padding: 0; width: 100%; font-size: 12.5px; }
.cspie-keys li { display: grid; grid-template-columns: 12px 1fr auto 38px; gap: 8px; align-items: baseline; padding: 4px 0; border-top: 1px solid var(--line); }
.cspie-k { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cspie-l { line-height: 1.3; }
.cspie-keys b { font-family: var(--mono); font-size: 12px; color: var(--blue-900); }
.cspie-keys em { font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-align: right; }
@media (prefers-reduced-motion: reduce) { .cspie-ring { opacity: 1; transform: none; transition: none; } }

/* ---------------- columns + cumulative line ---------------- */
.cscol-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.cscol-leg span { display: inline-flex; align-items: center; gap: 7px; }
.cscol-kb { width: 12px; height: 12px; border-radius: 3px; background: var(--blue-200); }
.cscol-kl { width: 18px; height: 3px; border-radius: 2px; background: var(--amber); }
.cscol-plot { position: relative; height: 230px; display: grid; grid-template-columns: repeat(var(--n), 1fr); align-items: end;
  border-bottom: 1px solid var(--line); background: repeating-linear-gradient(0deg, transparent 0 45px, rgba(20,32,63,.05) 45px 46px); }
.cscol-c { height: 100%; display: flex; align-items: flex-end; justify-content: center; outline: none; border-radius: 4px 4px 0 0; }
.cscol-c:hover, .cscol-c:focus-visible { background: rgba(43,63,140,.05); }
.cscol-bar { position: relative; width: 58%; height: 0; background: var(--blue-200); border-radius: 3px 3px 0 0;
  transition: height .9s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.csc.in .cscol-bar { height: var(--h); }
.cscol-c.hl .cscol-bar { background: var(--blue-500); }
.cscol-bar span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 3px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--blue-700); white-space: nowrap; }
.cscol-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cscol-line polyline { fill: none; stroke: var(--amber); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.cscol-line, .cscol-dot, .cscol-end { opacity: 0; transition: opacity .6s var(--ease) .5s; }
.csc.in .cscol-line, .csc.in .cscol-dot, .csc.in .cscol-end { opacity: 1; }
.cscol-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; border: 2px solid var(--amber); pointer-events: none; }
.cscol-end { position: absolute; right: 0; transform: translate(0, -135%); font-family: var(--mono); font-size: 12px; font-weight: 700; color: #b8660b; }
.cscol-x { display: grid; grid-template-columns: repeat(var(--n), 1fr); margin-top: 6px; text-align: center; font-family: var(--mono); font-size: 10.5px; line-height: 1.3; color: var(--muted); }
@media (max-width: 560px) { .cscol-bar span { font-size: 9px; } .cscol-bar { width: 72%; } .cscol-x { font-size: 9.5px; } }
@media (prefers-reduced-motion: reduce) { .cscol-bar { transition: none; height: var(--h); } }