/* ============================================================
   Carbon pillar — NATIVE (matches the Climate Risk pillar pattern).
   Locked window (no page scroll): centred pill nav, fixed two-tone
   title, 40/60 grid, scrollable text left, interactive graphic right.
   Uses .cb-* classes (so it never collides with climate-risk.css's
   .cr-* at merge) and the Brief-07 DS tokens. Slate-blue accent.
   Pattern: docs/patterns/pillar-shell.md.
   ============================================================ */
#tab-carbon { overflow: hidden; }        /* height-locked host for .cb-root (see sizeRoot) */
.cb-root {
  --cr-accent: #3E5069;                 /* Carbon = slate blue */
  position: relative; width: 100%; overflow: hidden;
  height: 100%;                          /* fills #tab-carbon (sizeRoot locks that to the viewport) */
  zoom: var(--app-zoom);                 /* big-screen scale-up — DISPLAY-SCALING RULES (wide page: fills width, no cap) */
  background: #FFFFFF; display: flex; flex-direction: column;
}

/* ---------- centred pill navigation (shared per-pillar pattern) ---------- */
.cb-nav { position: absolute; top: var(--sp-4); left: 0; right: 0; z-index: 4; display: flex; justify-content: center; pointer-events: none; }
/* Soft tint of the pillar colour, not the cream — the active segment is the solid accent.
   Climate uses 9%, but copying that number does NOT copy the effect: #C0453A is saturated,
   so 9% lands on (249,238,237) — 12 points of red over blue, plainly pink. The same 9% of
   this desaturated slate gives (238,239,242), only 4 points apart, which reads as the
   beige-grey Chris saw. Matching Climate's CHROMA needs ~26%, but that's no longer pale.
   20% → (216,220,225): still pale, unmistakably blue. Match the effect, not the number. */
.cb-nav-pill {
  pointer-events: auto; display: inline-flex; gap: 2px; padding: 5px;
  background: color-mix(in srgb, var(--cr-accent) 20%, #FFFFFF);
  border: 1px solid color-mix(in srgb, var(--cr-accent) 34%, #FFFFFF);
  border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.cb-nav-seg {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  padding: 8px 22px; border: none; background: none; border-radius: 999px;
  color: var(--ink-soft); cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.cb-nav-seg:hover { color: var(--ink); }
.cb-nav-seg.active { background: var(--cr-accent); color: #FFFFFF; box-shadow: 0 2px 9px rgba(0,0,0,0.18); }

/* ---------- 40 / 60 locked grid ---------- */
/* Split at 30/70, not 40/60. Chris: "I want the split to be earlier on and just allow the
   title to overlap the triptych." Two things fall out of that: the donut's column gets more
   room so its left-hand "Supply chain" label stops colliding with the boundary, and the
   title is free to run past 30% instead of being cut ("decode:Decarbonisat"). The title
   overlaps the right pane's whitespace — see .cb-title below. */
.cb-pillar { display: grid; grid-template-columns: 30% 70%; flex: 1 1 auto; min-height: 0; }
.cb-page { display: none; }
.cb-page.active { display: block; }
.cb-right-page { display: none; position: absolute; inset: 0; }
.cb-right-page.active { display: flex; }

/* ---------- LEFT: white, fixed two-tone title, scrollable body, aligned LEFT ---------- */
.cb-left { background: #FFFFFF; display: flex; min-height: 0; }
/* Geometry copied from climate-risk.css .cr-left-inner / .cr-title — measured, not
   eyeballed, so the title sits at the same height as Climate's and Biodiversity's and
   every line below it starts from the same place. sp-7 is what drops the title clear of
   the floating pill; sp-6 is the gap before the body. */
.cb-left-inner {
  display: flex; flex-direction: column; min-height: 0; width: 100%;
  max-width: 600px; margin: 0;
  padding: var(--sp-7) var(--sp-5) var(--sp-5) var(--rail-offset);
}
/* "decode:Decarbonisation" is a long word at the shared 48px — wider than the column, and
   it WAS being cut to "decode:Decarbonisat". Rather than shrink it below the size Climate
   and Biodiversity use, let it run on into the right pane's whitespace, which is what Chris
   asked for. nowrap keeps it one line; the z-index puts it over the triptych, and
   pointer-events:none means it can never swallow a click meant for the donut. */
.cb-title {
  flex: 0 0 auto; margin: 0 0 var(--sp-6);
  font-family: var(--font-display); font-size: 48px; line-height: 1.08;
  letter-spacing: -0.015em; cursor: default;
  white-space: nowrap; position: relative; z-index: 3; pointer-events: none;
}
.cb-t-decode { font-weight: 500; color: #1E1E1E; }                /* Stolzl Medium, near-black — matches .cr-t-decode */
.cb-t-sep    { font-weight: 500; color: var(--ink-soft); }        /* the " ; " separator */
.cb-t-name   { font-weight: var(--w-book); color: var(--cr-accent); }  /* Stolzl Book, slate blue */

.cb-scroll { flex: 1 1 auto; overflow-y: auto; scrollbar-gutter: stable; min-height: 0; padding-right: var(--sp-4); }
.cb-block { margin-bottom: var(--sp-6); }
.cb-block:last-child { margin-bottom: var(--sp-4); }
.cb-block h2 {
  font-family: var(--font-display); font-weight: var(--w-book);
  font-size: 22px; line-height: 30px; color: var(--cr-accent);
  margin: 0 0 var(--sp-3);
}
.cb-block p {
  font-family: var(--font-light); font-weight: var(--w-light);
  font-size: var(--size-lede); line-height: var(--lh-lede);
  color: var(--ink); margin: 0 0 var(--sp-3);
}
.cb-block p:last-child { margin-bottom: 0; }
.cb-hint { font-family: var(--font-detail); font-size: var(--size-small); color: var(--text-tertiary); margin-top: var(--sp-2); }
.cb-stat { font-family: var(--font-display); font-weight: var(--w-book); font-size: 64px; line-height: 1.05; color: var(--ink); letter-spacing: -0.02em; }
.cb-stat small { font-size: 22px; color: var(--ink-soft); font-weight: var(--w-book); }

/* ---------- RIGHT: interactive graphic (all white, no divider) ---------- */
/* overflow VISIBLE: centring the donut on the page (see .cb-fp-mid) reaches its left-hand
   "Supply chain" label back across the 40/60 column boundary, and overflow:hidden was
   slicing it in half. There's only whitespace behind it at that height. The map must still
   clip, so full-bleed puts the hidden back. */
.cb-right { position: relative; display: flex; align-items: center; justify-content: center; background: #FFFFFF; overflow: visible; }
.cb-fullbleed .cb-right { overflow: hidden; }
.cb-stub { display: flex; align-items: center; justify-content: center; height: 100%; padding: var(--sp-6); text-align: center; width: 100%; }
.cb-stub p { max-width: 34ch; font-family: var(--font-light); font-weight: var(--w-light); font-size: var(--size-lede); line-height: var(--lh-lede); color: var(--ink-soft); }   /* --ink-soft, as .cr-stub p */

/* ---------- entrance animation (staged reveal) ----------
   Timings lifted from climate-risk.css / biodiversity.css so all three pillars enter
   identically: title slides in from the left over 0.5s, then the left column's sections
   come up 0.45s apart on the same 0.45/0.56/0.67/0.78 ladder. The title and the text
   below it are one move, not two. */
.cb-title { opacity: 0; transform: translateX(-24px); }
.cb-mounted .cb-title { animation: cbInLeft 0.5s cubic-bezier(.2,.7,.2,1) 0.1s forwards; }
.cb-page.cb-reveal .cb-block,
.cb-page.cb-reveal .cb-acc-item {
  opacity: 0; transform: translateY(10px); animation: cbInUp 0.45s ease forwards;
}
.cb-page.cb-reveal .cb-block:nth-child(1),
.cb-page.cb-reveal .cb-acc .cb-acc-item:nth-child(1) { animation-delay: 0.45s; }
.cb-page.cb-reveal .cb-block:nth-child(2),
.cb-page.cb-reveal .cb-acc .cb-acc-item:nth-child(2) { animation-delay: 0.56s; }
.cb-page.cb-reveal .cb-block:nth-child(3),
.cb-page.cb-reveal .cb-acc .cb-acc-item:nth-child(3) { animation-delay: 0.67s; }
.cb-page.cb-reveal .cb-acc .cb-acc-item:nth-child(4) { animation-delay: 0.78s; }
@keyframes cbInLeft { to { opacity: 1; transform: none; } }
@keyframes cbInUp { to { opacity: 1; transform: none; } }

/* ---------- responsive: stack under ~900px ---------- */
@media (max-width: 900px) {
  .cb-root { overflow: auto; scrollbar-gutter: stable; }
  .cb-pillar { grid-template-columns: 1fr; height: auto; }
  .cb-left { border-bottom: 1px solid var(--line); }
  .cb-scroll { overflow: visible; }
  .cb-right { min-height: 60vh; }
}
@media (prefers-reduced-motion: reduce) {
  /* `forwards` animations outrank normal declarations, so these need !important to win */
  .cb-title, .cb-block, .cb-acc-item { opacity: 1 !important; transform: none !important; animation: none !important; }
  .cb-acc-a { transition: none; }
}

/* ============================================================
   3D campus (carbon-campus.js) — map fills the right column,
   controls overlaid, editor swipes in from the right, list left.
   ============================================================ */
.cb-muted { color: var(--text-tertiary); }
.cb-campus-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.cb-campus-views {
  position: absolute; top: 16px; left: 16px; z-index: 5; display: flex; gap: 4px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px);
  padding: 4px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}
.cb-view-opt {
  border: 0; background: transparent; cursor: pointer; padding: 7px 12px; border-radius: 8px;
  font-family: var(--font-display); font-size: 12.5px; font-weight: var(--w-book); color: var(--ink-soft);
}
.cb-view-opt:hover { background: var(--bg-alt); color: var(--ink); }
.cb-view-opt.active { background: var(--cr-accent); color: #fff; }
.cb-campus-colourby {
  position: absolute; bottom: 16px; left: 16px; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px);
  padding: 8px 12px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}
.cb-cb-label { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.cb-campus-metric, .cb-bedit-fuel { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.cb-mopt {
  border: 0; background: var(--bg-alt); cursor: pointer; padding: 6px 11px; border-radius: 999px;
  font-family: var(--font-detail); font-size: 12.5px; color: var(--ink-soft);
}
.cb-mopt:hover { color: var(--ink); }
.cb-mopt.active { background: var(--cr-accent); color: #fff; }
.cb-campus-legend {
  position: absolute; bottom: 16px; right: 16px; z-index: 5; width: 200px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px);
  padding: 12px 14px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}
.cb-legend-title { font-size: 12.5px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.cb-legend-bar { height: 10px; border-radius: 5px; }
.cb-legend-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-soft); margin-top: 5px; }
.cb-campus-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 40px; z-index: 6; background: var(--bg-alt); }
.cb-empty-inner { text-align: center; max-width: 340px; color: var(--ink-soft); }
.cb-empty-icon { font-size: 40px; display: block; margin-bottom: 12px; }

/* building list (left column, under the explainer) */
.cb-list-h { font-family: var(--font-display); font-weight: var(--w-book); font-size: 15px; color: var(--ink); margin: var(--sp-4) 0 var(--sp-2); }
.cb-campus-list { list-style: none; margin: 0; padding: 0; }
.cb-campus-item { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px; cursor: pointer; transition: background .14s; }
.cb-campus-item:hover { background: var(--bg-alt); }
.cb-campus-item.active { background: color-mix(in srgb, var(--cr-accent) 14%, transparent); }
.cb-swatch { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.12) inset; }
.cb-item-name { flex: 1; font-family: var(--font-detail); font-size: 14px; color: var(--ink); }
.cb-item-val { font-family: var(--font-display); font-size: 13px; font-weight: var(--w-book); color: var(--ink-soft); }

/* swipe-in editor panel */
.cb-panel {
  position: absolute; inset: 0; z-index: 7; background: var(--surface);
  box-shadow: -14px 0 44px rgba(0,0,0,0.10); transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column; padding: var(--sp-5) var(--sp-5); overflow-y: auto; scrollbar-gutter: stable;
}
.cb-panel.open { transform: translateX(0); }
.cb-panel-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.cb-panel-title { flex: 1; margin: 0; font-family: var(--font-display); font-weight: var(--w-book); font-size: 22px; color: var(--ink); }
.cb-panel-close { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: 20px; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.cb-panel-close:hover { background: var(--bg-alt); color: var(--ink); }
.cb-bedit-emis { font-size: 13px; color: var(--ink-soft); margin: 0 0 14px; }
.cb-bedit-big { font-family: var(--font-display); font-size: 26px; font-weight: var(--w-medium); color: var(--ink); }
.cb-bedit-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin: 14px 0 6px; }
.cb-bedit-label .cb-muted { font-weight: 500; }
/* Slim, consistent slider (native accent-color rendered at different weights across
   controls) — a 4px track + 15px thumb everywhere, themed to the pillar / segment. */
.cb-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 16px; margin: 4px 0; background: transparent; cursor: pointer;
}
.cb-range::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: var(--line); }
.cb-range::-moz-range-track { height: 4px; border-radius: 999px; background: var(--line); }
.cb-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 15px; height: 15px; margin-top: -5.5px;
  border-radius: 50%; background: var(--cr-accent); border: 2px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.22);
}
.cb-range::-moz-range-thumb {
  width: 15px; height: 15px; border: 2px solid var(--surface); border-radius: 50%;
  background: var(--cr-accent); box-shadow: 0 1px 3px rgba(0,0,0,0.22);
}
.cb-bedit-rows { list-style: none; margin: 14px 0 0; padding: 0; }
.cb-bedit-rows li { display: flex; justify-content: space-between; padding: 5px 0; font-family: var(--font-detail); font-size: 13px; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.cb-panel-note { font-size: 12px; margin-top: 14px; }

/* ---------- Footprint page (carbon-footprint.js): three-way doughnut ---------- */
.cb-fp-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-5); padding: var(--sp-6); }
.cb-fp-chart canvas { position: absolute; inset: 0; }
.cb-fp-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
/* cloud above the number; the figure and its unit drop below it */
.cb-fp-cloud { display: flex; color: color-mix(in srgb, var(--cr-accent) 55%, transparent); margin-bottom: var(--sp-2); }
.cb-fp-cloud svg { width: 40px; height: 40px; }
.cb-fp-total { font-family: var(--font-display); font-weight: var(--w-book); font-size: 40px; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.cb-fp-unit { font-family: var(--font-detail); font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.cb-fp-legend { display: flex; flex-direction: column; gap: 8px; width: min(80%, 320px); }
.cb-fp-leg { display: flex; align-items: center; gap: 10px; font-family: var(--font-detail); font-size: 14px; }
.cb-fp-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.cb-fp-leg-name { flex: 1; color: var(--ink); }
.cb-fp-leg-val { font-family: var(--font-display); font-weight: var(--w-book); font-size: 13px; color: var(--ink-soft); }

/* ---------- Pathway page (carbon-pathway.js): BAU vs DfE target to 2050 ---------- */
/* 64px of breathing room between the left column and where the graph starts (Chris), and a
   max-width so it doesn't stretch full-bleed on a wide screen — it was reading too wide.
   The wrap centres the capped chart in whatever's left. */
/* The graph is dropped DOWN the pane so it clears the floating pill (96px top), and indented
   from the LEFT (88px) so there's a clear gap between the title column and where 2026 / the
   y-axis start — it was butting up too close. It fills the rest of the width to the right.
   Height is left to fill what remains below the pill. */
.cb-pw-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 96px var(--sp-6) var(--sp-6) 88px; }
.cb-pw-chart { flex: 1 1 auto; min-height: 200px; position: relative; width: 100%; }
.cb-pw-chart canvas { position: absolute; inset: 0; }
.cb-pw-legend { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-3); align-items: flex-start; }
.cb-pw-leg { display: flex; align-items: center; gap: 8px; font-family: var(--font-detail); font-size: 12px; color: var(--ink); }
.cb-pw-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ---------- Explore page (carbon-explore.js): reduction levers ---------- */
.cb-ex-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6) var(--sp-6) var(--sp-5); overflow-y: auto; scrollbar-gutter: stable; }
.cb-ex-result { flex: 0 0 auto; }
.cb-ex-nums { display: flex; align-items: baseline; gap: 10px; }
.cb-ex-total { font-family: var(--font-display); font-weight: var(--w-book); font-size: 48px; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.cb-ex-unit { font-family: var(--font-detail); font-size: 12px; color: var(--ink-soft); }
.cb-ex-saved { font-family: var(--font-detail); font-size: 13px; margin-top: 6px; color: var(--ink); }
.cb-ex-saved-v { font-family: var(--font-display); font-weight: var(--w-medium); color: var(--cr-accent); }
.cb-ex-bar { height: 8px; border-radius: 999px; background: var(--bg-alt); margin-top: 12px; overflow: hidden; }
.cb-ex-bar-fill { height: 100%; border-radius: 999px; background: var(--cr-accent); transition: width .5s cubic-bezier(.22,.61,.36,1); }
.cb-ex-levers { display: flex; flex-direction: column; gap: 10px; }
.cb-lever {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface);
  padding: 14px 16px; transition: border-color .18s, background .18s;
}
.cb-lever:hover { border-color: var(--cr-accent); }
.cb-lever.on { border-color: var(--cr-accent); background: color-mix(in srgb, var(--cr-accent) 8%, transparent); }
.cb-lever-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line); flex-shrink: 0; }
.cb-lever.on .cb-lever-check { background: var(--cr-accent); border-color: var(--cr-accent); }
.cb-lever-main { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cb-lever-label { font-family: var(--font-display); font-weight: var(--w-book); font-size: 15px; color: var(--ink); }
.cb-lever-note { font-family: var(--font-detail); font-size: 12px; color: var(--text-tertiary); }
.cb-lever-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.cb-lever-save { font-family: var(--font-display); font-weight: var(--w-medium); font-size: 13px; color: var(--cr-accent); }
.cb-inds { display: flex; gap: 8px; }
.cb-ind { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; }
.cb-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line); display: inline-block; }
.cb-dot.on { background: var(--ink-soft); }

/* ---------- Intro page: accordions (left) + hero (right) ---------- */
.cb-acc { border-top: 1px solid var(--line); }
.cb-acc-item { border-bottom: 1px solid var(--line); }
.cb-acc-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: none; border: 0; cursor: pointer; text-align: left; padding: var(--sp-4) 0;
  font-family: var(--font-display); font-weight: var(--w-book);
  color: var(--cr-accent);
}
/* chevron greys back like Climate's, so the accent belongs to the heading alone */
.cb-acc-chev { flex: 0 0 auto; display: flex; transition: transform .22s ease; color: var(--ink-soft); }
.cb-acc-item.open .cb-acc-chev { transform: rotate(180deg); }
/* The dropdown MOVES like Climate's: 0fr→1fr animates the content's real height, so the
   panel unfolds instead of snapping. display:none/block (what this was) can't be animated
   at all — that was the whole difference in feel. .cb-acc-inner is what the grid clips. */
.cb-acc-a {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 0.45s cubic-bezier(.22,.61,.36,1), opacity 0.35s ease;
}
.cb-acc-item.open .cb-acc-a { grid-template-rows: 1fr; opacity: 1; }
.cb-acc-inner { overflow: hidden; }
/* a line's space before the divider, so the rule never sits hard against the text */
.cb-acc-inner > *:last-child { margin-bottom: var(--sp-5); }

.cb-intro-hero { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--sp-6); }
.cb-hero-inner { max-width: 420px; width: 100%; }
.cb-hero-eyebrow { font-family: var(--font-detail); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-tertiary); margin: 0 0 10px; }
.cb-hero-stat { font-family: var(--font-display); font-weight: var(--w-book); font-size: 64px; line-height: 1.05; color: var(--ink); letter-spacing: -0.02em; }
.cb-hero-stat small { font-size: 20px; color: var(--ink-soft); }
.cb-hero-sub { font-family: var(--font-detail); font-size: 13px; color: var(--ink-soft); margin: 8px 0 var(--sp-5); }
.cb-hero-split { display: flex; flex-direction: column; gap: 10px; }
.cb-hero-row { display: flex; align-items: center; gap: 10px; font-family: var(--font-detail); font-size: 14px; }
.cb-hero-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.cb-hero-label { flex: 1; color: var(--ink); }
.cb-hero-val { font-family: var(--font-display); font-weight: var(--w-book); font-size: 13px; color: var(--ink-soft); }

/* ---------- Footprint: donut with labels BESIDE each slice ---------- */
.cb-fp-labels { position: absolute; inset: 0; pointer-events: none; }
.cb-fp-label {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
  display: flex; align-items: center; gap: 10px; background: none; border: 0;
  cursor: pointer; padding: 6px 8px; border-radius: 10px; transition: background .16s;
}
.cb-fp-label:hover { background: var(--bg-alt); }
.cb-fp-ico {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--seg); background: color-mix(in srgb, var(--seg) 14%, transparent);
}
.cb-fp-ico svg { width: 19px; height: 19px; }
.cb-fp-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.cb-fp-name { font-family: var(--font-detail); font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.cb-fp-num { font-family: var(--font-display); font-weight: var(--w-book); font-size: 20px; color: var(--ink); white-space: nowrap; }
.cb-fp-num small { font-size: 13px; color: var(--ink-soft); }

/* ---------- Footprint: three columns — text | donut | drill-down ---------- */
.cb-fp-cols { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
/* The donut hangs under the centred pill, i.e. on the ROOT's centre line (50%).
   Left to itself it doesn't: this column sits inside the 70%-wide right pane and takes half
   of it, so its natural centre is 30% + (70% / 4) = 47.5% of the root — 2.5% too far LEFT
   now the split moved to 30/70 (at 40/60 it was 55%, i.e. too far right; the correction
   changed sign, which is exactly why it's derived here rather than eyeballed).
   `left`/`right` on a grid ITEM resolve against its GRID AREA — 35% of the root, half the
   right pane — NOT the 70% container. So the nudge is 2.5 / 35 = 7.143%, rightwards.
   Ratios only, so it holds at any width. Undone below 900px, where the pillar stacks. */
.cb-fp-mid { position: relative; left: 7.143%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-4); min-width: 0; }
@media (max-width: 900px) { .cb-fp-mid { left: 0; } }
/* The donut waits for the words: the left column's sections land on the shared
   0.45→0.78s ladder, so the stage fades up at 0.85s, after them. */
.cb-fp-mid { opacity: 0; }
.cb-fp-mid.cb-fp-in { animation: cbFpIn 0.55s cubic-bezier(.22,1,.36,1) 0.85s forwards; }
@keyframes cbFpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cb-fp-mid { opacity: 1 !important; animation: none !important; } }
/* No divider at rest — the empty third just holds the "Click a theme" ring, and a lone
   vertical rule there looked odd (no other tab has one). The border appears ONLY once a
   theme is open (.cb-th present), and the panel slides in from the right with it, so the
   line reads as "this drawer opened" rather than a permanent split. */
.cb-fp-drill { position: relative; min-width: 0; overflow-y: auto; scrollbar-gutter: stable; }
.cb-fp-drill:has(.cb-th) { border-left: 1px solid var(--line); }
.cb-fp-drill .cb-th { animation: cbDrillIn 0.34s cubic-bezier(.22,.61,.36,1); }
@keyframes cbDrillIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cb-fp-drill .cb-th { animation: none; } }
.cb-fp-label.active { background: var(--bg-alt); box-shadow: 0 0 0 1px var(--seg) inset; }
/* when a slice is open, the other two labels recede to match the greyed donut segments */
.cb-fp-labels.has-sel .cb-fp-label:not(.active) { opacity: 0.4; }
.cb-fp-label { transition: background .16s, opacity .3s ease; }
/* big icon, small name, tonnes below — a clean vertical stack */
.cb-fp-label { flex-direction: column; gap: 2px; text-align: center; }
.cb-fp-ico { width: 46px; height: 46px; border-radius: 13px; }
.cb-fp-ico svg { width: 26px; height: 26px; }
.cb-fp-name { font-size: 11.5px; }
.cb-fp-num { font-size: 19px; }

/* ---------- theme drill-down panel ---------- */
.cb-th { padding: var(--sp-5) var(--sp-4) var(--sp-5) var(--sp-5); opacity: 0; transform: translateX(12px); transition: opacity .35s ease, transform .35s cubic-bezier(.22,.61,.36,1); }
.cb-th.in { opacity: 1; transform: none; }
/* Selected-theme heading: icon + name — number, all at title scale in the segment colour. */
.cb-th-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-4); }
.cb-th-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--seg); background: color-mix(in srgb, var(--seg) 12%, transparent);
}
.cb-th-ico svg { width: 24px; height: 24px; }
.cb-th-title {
  flex: 1; min-width: 0; margin: 0;
  font-family: var(--font-display); font-weight: var(--w-book);
  font-size: 30px; line-height: 1.12; letter-spacing: -0.015em; color: var(--seg);
}
.cb-th-dash { opacity: 0.55; margin: 0 1px; }
.cb-th-title small { font-size: 14px; font-weight: var(--w-book); color: var(--ink-soft); }
.cb-th-close { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: 18px; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.cb-th-close:hover { background: var(--bg-alt); color: var(--ink); }
.cb-th-explain { font-family: var(--font-light); font-weight: var(--w-light); font-size: 15px; line-height: 24px; color: var(--ink-soft); margin: 0 0 var(--sp-4); }
.cb-th-empty { font-family: var(--font-light); font-weight: var(--w-light); font-size: 15px; line-height: 24px; color: var(--text-tertiary); }
.cb-th-facts { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.cb-th-facts .cb-fact { display: flex; flex-direction: column; }
.cb-th-facts .cb-fact-v { font-family: var(--font-display); font-weight: var(--w-book); font-size: 18px; color: var(--ink); }
.cb-th-facts .cb-fact-l { font-family: var(--font-detail); font-size: 11px; color: var(--text-tertiary); }

/* buildings grid — same UX for 1 building or 20 */
.cb-bgrid { display: flex; flex-direction: column; gap: 2px; }
.cb-bgrid-head, .cb-brow { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr 0.5fr; gap: 8px; align-items: center; }
.cb-bgrid-head { font-family: var(--font-detail); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.cb-brow { padding: 8px 0; border-bottom: 1px solid var(--line); }
.cb-brow-name { font-family: var(--font-detail); font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-brow-fuel { font-family: var(--font-detail); font-size: 12px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); cursor: pointer; width: 100%; }
.cb-brow-eui { display: flex; align-items: center; gap: 6px; }
.cb-brow-eui .cb-range { flex: 1; min-width: 0; }
.cb-brow-euiv { font-family: var(--font-detail); font-size: 11px; color: var(--ink-soft); width: 26px; text-align: right; }
.cb-brow-val { font-family: var(--font-display); font-weight: var(--w-book); font-size: 13px; color: var(--ink); }
.cb-r { text-align: right; }

/* lever rows (transport + supply) — room between the label and its slider */
.cb-lrow { margin-bottom: var(--sp-4); }
.cb-lrow-l { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-family: var(--font-detail); font-size: 13px; color: var(--ink); margin-bottom: 7px; }
.cb-lrow-v { font-family: var(--font-detail); font-size: 12px; color: var(--ink-soft); }
.cb-cat-t { font-family: var(--font-display); font-weight: var(--w-book); color: var(--ink); }
.cb-cat-cut { color: var(--seg); font-weight: 600; }

/* ============================================================
   FULL-BLEED map view (campus): the map takes the whole pillar,
   the text column folds away, the title floats over the map.
   ============================================================ */
.cb-fullbleed .cb-pillar { grid-template-columns: 1fr; }
.cb-fullbleed .cb-left { display: none; }
.cb-map-chrome { display: none; }
.cb-fullbleed .cb-map-chrome {
  display: flex; align-items: center; gap: 10px;
  position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: 6;
}
.cb-map-title {
  margin: 0; font-family: var(--font-display); font-size: 22px; letter-spacing: -0.015em;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.cb-map-info {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  font-family: var(--font-display); font-size: 14px; color: var(--ink-soft);
}
.cb-map-info:hover { color: var(--cr-accent); border-color: var(--cr-accent); }
.cb-map-pop {
  position: absolute; top: 52px; left: 0; width: 340px; z-index: 7;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: var(--sp-4); box-shadow: var(--shadow);
}
.cb-map-pop .cb-block { margin-bottom: var(--sp-3); }
.cb-map-pop .cb-block:last-child { margin-bottom: 0; }
.cb-map-pop .cb-block h2 { font-size: 15px; line-height: 22px; margin-bottom: 6px; }
.cb-map-pop .cb-block p { font-size: 13px; line-height: 20px; }

/* Move the view presets clear of the centred nav pill — they now sit under the title. */
.cb-fullbleed .cb-campus-views { top: 76px; left: var(--sp-4); }

/* ============================================================
   Map rail — circular buttons on the left; each expands its pills.
   ============================================================ */
.cb-fullbleed .cb-campus-views { display: none; }        /* superseded by the rail */
.cb-campus-colourby { display: none; }                    /* ditto */
.cb-rail {
  position: absolute; top: 76px; left: var(--sp-4); z-index: 6;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.cb-rail-item { position: relative; display: flex; align-items: center; gap: 8px; }
.cb-rail-btn {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(0,0,0,0.08); color: var(--ink-soft);
  transition: color .16s, border-color .16s;
}
.cb-rail-btn svg { width: 18px; height: 18px; }
.cb-rail-btn:hover { color: var(--cr-accent); border-color: var(--cr-accent); }
.cb-rail-item.open .cb-rail-btn { background: var(--cr-accent); border-color: var(--cr-accent); color: #fff; }
.cb-rail-pop {
  display: none; align-items: center; gap: 3px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.10); white-space: nowrap;
}
.cb-rail-item.open .cb-rail-pop { display: flex; }
.cb-rail-item[data-rail="info"] .cb-rail-pop { border-radius: var(--radius-card); padding: var(--sp-4); white-space: normal; }
.cb-rail-info { width: 320px; max-height: 44vh; overflow-y: auto; scrollbar-gutter: stable; }
.cb-rail-info .cb-block { margin-bottom: var(--sp-3); }
.cb-rail-info .cb-block:last-child { margin-bottom: 0; }
.cb-rail-info .cb-block h2 { font-size: 15px; line-height: 22px; margin-bottom: 6px; }
.cb-rail-info .cb-block p { font-size: 13px; line-height: 20px; }

/* ============================================================
   Building panel — a quarter of the screen, not a full swipe.
   ============================================================ */
.cb-panel { left: auto; right: 0; width: min(27%, 380px); border-left: 1px solid var(--line); padding: var(--sp-4); }
.cb-panel-head { align-items: flex-start; }
.cb-panel-id { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.cb-panel-kicker { font-family: var(--font-detail); font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-tertiary); }
.cb-panel-title { font-size: 19px; }
.cb-bedit-emis { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-4); }
.cb-bedit-big { font-family: var(--font-display); font-size: 34px; font-weight: var(--w-book); color: var(--ink); line-height: 1; }
.cb-bedit-u { font-family: var(--font-detail); font-size: 12px; color: var(--ink-soft); }
.cb-bedit-share { font-family: var(--font-detail); font-size: 11px; color: #fff; background: var(--cr-accent); border-radius: 999px; padding: 2px 8px; margin-left: auto; }
.cb-fld { margin-bottom: var(--sp-4); }

/* fuel picker with icons */
.cb-fuelgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.cb-fuel {
  display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  padding: 7px 2px; color: var(--ink-soft); transition: all .16s;
}
.cb-fuel svg { width: 17px; height: 17px; }
.cb-fuel-l { font-family: var(--font-detail); font-size: 9px; line-height: 1; }
.cb-fuel:hover { border-color: var(--cr-accent); color: var(--ink); }
.cb-fuel.active { background: var(--cr-accent); border-color: var(--cr-accent); color: #fff; }

/* floors stepper (not a slider) */
.cb-step { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cb-step-b {
  width: 34px; height: 32px; border: 0; background: var(--surface); cursor: pointer;
  font-family: var(--font-display); font-size: 17px; color: var(--ink-soft);
}
.cb-step-b:hover { background: var(--bg-alt); color: var(--cr-accent); }
.cb-step-v { min-width: 40px; text-align: center; font-family: var(--font-display); font-weight: var(--w-book); font-size: 15px; color: var(--ink); border-left: 1px solid var(--line); border-right: 1px solid var(--line); line-height: 32px; }

/* ============================================================
   Map view polish (Chris, 17 Jul)
   ============================================================ */
/* Title matches the Footprint/Pathway title exactly — same size (48) and same
   place (rail-offset 48 / sp-4 top) — just with a backdrop so it reads on satellite. */
.cb-fullbleed .cb-map-chrome { top: var(--sp-4); left: var(--rail-offset); }
.cb-map-title {
  font-size: 48px; line-height: 1.08; padding: 4px 14px 6px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 0; border-radius: 14px; box-shadow: 0 4px 22px rgba(0,0,0,0.10);
}

/* Rail: vertically centred on the left, and the pills expand smoothly. */
.cb-rail { top: 50%; transform: translateY(-50%); left: var(--rail-offset); gap: 10px; }
.cb-rail-pop {
  display: flex; opacity: 0; pointer-events: none;
  transform: translateX(-10px) scale(.96); transform-origin: left center;
  max-width: 0; padding: 0; border-width: 0; overflow: hidden;
  transition: opacity .26s ease, transform .34s cubic-bezier(.22,.61,.36,1),
              max-width .34s cubic-bezier(.22,.61,.36,1), padding .2s ease;
}
.cb-rail-item.open .cb-rail-pop {
  opacity: 1; pointer-events: auto; transform: none; max-width: 660px; padding: 4px; border-width: 1px;
}
.cb-rail-item[data-rail="info"].open .cb-rail-pop { padding: var(--sp-4); }
/* explainer body — deliberately small (Chris: "size 10") */
.cb-rail-info .cb-block h2 { font-size: 13px; line-height: 18px; margin-bottom: 4px; }
.cb-rail-info .cb-block p { font-size: 10px; line-height: 15px; }

/* Heating fuel: three across so the labels can actually be read. */
.cb-fuelgrid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cb-fuel { padding: 9px 4px; gap: 5px; }
.cb-fuel svg { width: 19px; height: 19px; }
.cb-fuel-l { font-size: 11px; }

/* Share of building emissions — a little proportion bar. */
.cb-bedit-emis { margin-bottom: var(--sp-2); }
.cb-bedit-share { display: none; }
.cb-share { margin-bottom: var(--sp-4); }
.cb-share-bar { height: 7px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; }
.cb-share-fill { height: 100%; border-radius: 999px; background: var(--cr-accent); transition: width .45s cubic-bezier(.22,.61,.36,1); }
.cb-share-txt { font-family: var(--font-detail); font-size: 11.5px; color: var(--ink-soft); margin-top: 5px; }
.cb-share-txt strong { font-family: var(--font-display); font-weight: var(--w-book); color: var(--cr-accent); }

/* ---------- Pathway levers (left column) ---------- */
/* a section heading like any other: Stolzl Book 22/28 in the pillar colour, same as
   .cb-block h2 / .cb-acc-q / Climate's .cr-acc-title. Was 15px grey — the odd one out. */
.cb-pw-lh { font-family: var(--font-display); font-weight: var(--w-book); font-size: 22px; line-height: 28px; color: var(--cr-accent); margin: var(--sp-5) 0 var(--sp-3); }
.cb-pwl { border: 1px solid var(--line); border-radius: var(--radius-card); margin-bottom: 8px; overflow: hidden; transition: border-color .18s, background .18s; }
.cb-pwl.on { border-color: var(--cr-accent); background: color-mix(in srgb, var(--cr-accent) 6%, transparent); }
.cb-pwl-top { width: 100%; display: flex; align-items: center; gap: var(--sp-3); text-align: left; background: none; border: 0; cursor: pointer; padding: 11px 12px; }
/* The icon IS the tick box — big, ghosted when off, filled with the pillar colour when on.
   No separate checkbox: clicking the picture is the switch. */
.cb-pwl-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); background: transparent;
  color: var(--text-tertiary);                       /* ghosted: off */
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.cb-pwl-ico svg { width: 22px; height: 22px; }
.cb-pwl-top:hover .cb-pwl-ico { border-color: color-mix(in srgb, var(--cr-accent) 45%, var(--line)); color: var(--cr-accent); }
.cb-pwl.on .cb-pwl-ico {
  background: var(--cr-accent); border-color: var(--cr-accent);
  color: #FFFFFF; transform: scale(1.04);            /* lit: on */
}
.cb-pwl-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-pwl-label { font-family: var(--font-display); font-weight: var(--w-book); font-size: 14px; color: var(--ink); }
.cb-pwl-note { font-family: var(--font-detail); font-size: 11px; color: var(--text-tertiary); }
.cb-pwl-save { font-family: var(--font-display); font-weight: var(--w-medium); font-size: 13px; color: var(--cr-accent); flex-shrink: 0; }
.cb-pwl-when { display: none; align-items: center; gap: 10px; padding: 0 12px 11px; }
.cb-pwl.on .cb-pwl-when { display: flex; }
.cb-pwl-when label { font-family: var(--font-detail); font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.cb-pwl-when strong { font-family: var(--font-display); color: var(--cr-accent); }
.cb-pwl-when .cb-range { flex: 1; min-width: 0; }
.cb-pw-foot { font-family: var(--font-detail); font-size: 12px; line-height: 18px; color: var(--ink-soft); margin-top: var(--sp-3); }
.cb-pw-foot strong { font-family: var(--font-display); color: var(--ink); }
.cb-pw-legend { display: none; }   /* labels sit on the curves now */

/* ============================================================
   Footprint polish (Chris, 17 Jul): bigger donut, bigger icons,
   theme-coloured controls, denser body text.
   ============================================================ */
/* Let the donut own the space — bigger stage, thinner surround, labels ride outside. */
.cb-fp-mid { padding: var(--sp-3); overflow: visible; }
/* ONE rule for the stage — there were three at equal specificity (560 / 430 / 720),
   last-wins by source order, which is not a decision. Bigger radius per Chris; the
   30/70 split gives the column the room for it. */
.cb-fp-stage { position: relative; width: min(100%, 620px); aspect-ratio: 1 / 1; }
/* ONE rule for the chart box. There were three (relative+width:min(64%,360px), then
   absolute+inset:21%, then inset:19%) and they combined into a bug: the later rules never
   cleared the first's `width`, so `width` beat the right-hand inset. The donut was pinned
   to 360px — refusing to grow with the stage — and hung 12px left of centre while its
   labels, which orbit the STAGE, stayed put. inset alone: square, centred, and it scales.
   16% (was 19%) = a bigger radius, per Chris. */
.cb-fp-chart { position: absolute; inset: 16%; }
.cb-fp-total { font-size: 46px; }
.cb-fp-unit { font-size: 13px; }

/* Bigger icons, calmer text — the number does the talking. */
.cb-fp-ico { width: 56px; height: 56px; border-radius: 16px; }
.cb-fp-ico svg { width: 31px; height: 31px; }
.cb-fp-name { font-size: 12px; }
.cb-fp-num { font-size: 22px; }
.cb-fp-num small { font-size: 14px; }

/* Drill-down controls take the THEME colour (blue / yellow / green), not slate. */
.cb-th .cb-range::-webkit-slider-thumb { background: var(--seg); }
.cb-th .cb-range::-moz-range-thumb { background: var(--seg); }
.cb-th .cb-cat-t { color: var(--seg); }
.cb-th .cb-brow-val { color: var(--seg); }
.cb-th .cb-brow-fuel:focus { outline: 2px solid var(--seg); outline-offset: 1px; }
.cb-th .cb-fact-v { color: var(--seg); }

/* Body text at 10 (Chris) — the buildings table and the explainer column. */
.cb-th-explain { font-size: 10px; line-height: 16px; }
.cb-th-empty { font-size: 10px; line-height: 16px; }
.cb-bgrid-head { font-size: 9px; }
.cb-brow-name, .cb-brow-fuel { font-size: 10px; }
.cb-brow-euiv { font-size: 9.5px; }
.cb-brow-val { font-size: 12px; }
.cb-lrow-l, .cb-lrow-v { font-size: 10px; }
.cb-th-facts .cb-fact-l { font-size: 9px; }

/* ---------- Map view: decodED wordmark in white (no title text) ---------- */
.cb-map-title { display: none; }
.cb-map-logo {
  width: 176px; height: 48px;            /* matches the topbar logo's box */
  background-color: #FFFFFF;             /* white on satellite AND on the map base */
  -webkit-mask: url('/assets/decoded-logo.svg') no-repeat left center / contain;
  mask: url('/assets/decoded-logo.svg') no-repeat left center / contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45));   /* holds up over pale map tiles */
}

/* ============================================================
   TEXT RAMP — matched to the Climate pillar (measured, not guessed).
   climate-risk.css: .cr-acc-body p = var(--font-detail) Inter,
   var(--size-small) 13 / var(--lh-small) 20 — "shared ramp with
   Biodiversity's left column so the two pillars read continuously";
   .cr-acc-title = Stolzl Book 22/28. This is the ONE place the left
   column's type is set — an earlier 10px rule and the original 19px
   lede both used to fight it from elsewhere in this file.
   ============================================================ */
/* left explainer column (Footprint accordions) */
.cb-acc-a p {
  font-family: var(--font-detail); font-weight: var(--w-book);
  font-size: var(--size-small); line-height: var(--lh-small); color: var(--ink);
  margin: 0 0 var(--sp-3);
}
.cb-acc-q { font-size: 22px; line-height: 28px; }
/* left column on the other pages (Pathway) — same ramp, was --size-lede */
.cb-block p {
  font-family: var(--font-detail); font-weight: var(--w-book);
  font-size: var(--size-small); line-height: var(--lh-small);
}
/* the drill-down box on the right */
.cb-th-explain, .cb-th-empty {
  font-family: var(--font-detail); font-weight: var(--w-book);
  font-size: var(--size-small); line-height: var(--lh-small); color: var(--ink-soft);
}
/* buildings table + lever rows */
.cb-brow-name, .cb-brow-fuel, .cb-lrow-l, .cb-lrow-v { font-size: var(--size-small); }
.cb-brow-euiv { font-size: 11px; }
.cb-brow-val { font-size: var(--size-small); }
.cb-bgrid-head { font-size: 10px; }
.cb-th-facts .cb-fact-l { font-size: 11px; }
/* map explainer popup stays denser (it floats over the map) */
.cb-rail-info .cb-block p { font-size: 11px; line-height: 17px; }

/* ---------- lever + category icons ----------
   Big icon on the left of the whole row (Chris: "genuinely four times as big"), the
   label+value above the slider on the right. The icon sits beside the slider; the slider is
   pushed in next to it. */
.cb-lrow { display: flex; align-items: center; gap: 14px; }
.cb-lrow-main { flex: 1; min-width: 0; }
.cb-lrow-l { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cb-lico {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--seg); background: color-mix(in srgb, var(--seg) 12%, transparent);
}
.cb-lico svg { width: 40px; height: 40px; }   /* ~4x the old 15px glyph */
.cb-lrow-t { flex: 1; min-width: 0; color: var(--ink); }
.cb-lrow-v { flex-shrink: 0; margin-left: auto; }

/* ---------- "Click a theme to explore" — the SHARED prompt ----------
   Deliberately identical to climate-risk.css's .cr-hint-ring: a 190px circle, 1px border at
   22% of the pillar accent, Stolzl Medium 17/1.35 ghosted to 46%, and the same 2.8s pulse
   delayed 2.2s so it starts only once the entrance has landed. Biodiversity's was a 44px
   rounded rect — brought into line too, so all three pillars ask the same way.
   Ghosting is done with the COLOUR's alpha, not opacity, so the entrance keeps opacity. */
.cb-hint-panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.cb-hint-ring {
  position: relative; flex: none;
  width: 190px; height: 190px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--cr-accent) 22%, transparent);
}
.cb-hint-ring p {
  margin: 0;
  font-family: var(--font-display); font-weight: 500;   /* Stolzl Medium */
  font-size: 17px; line-height: 1.35; text-align: center;
  color: color-mix(in srgb, var(--cr-accent) 46%, transparent);
}
.cb-hint-ring::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  box-shadow: 0 0 0 0 var(--cr-accent); opacity: 0; pointer-events: none;
  animation: cbHintPulse 2.8s ease-out infinite;
  animation-delay: 2.2s;
}
@keyframes cbHintPulse {
  0%   { box-shadow: 0 0 0 0 var(--cr-accent); opacity: 0.5; }
  70%  { box-shadow: 0 0 0 16px var(--cr-accent); opacity: 0; }
  100% { box-shadow: 0 0 0 16px var(--cr-accent); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cb-hint-ring::after { animation: none; } }