/* atlas.css — NEW components for the atlas app (shell, sidebar, panel,
   thread ribbons). Additions the kit doesn't ship; no kit class is
   forked. Brand rules hold: white paper, hairline rules, no shadows,
   radius <= 2px, Poppins UI, Bluu numerals, the map plate (#F2EEE1)
   only ever under cartography. */

/* ---------------------------------------------------------------- shell */
.atlas-shell {
  display: grid;
  grid-template-columns: 21.5rem 1fr;
  height: calc(100dvh - 4.5rem);
  min-height: 34rem;
  border-top: var(--hair) solid var(--rule);
}
.atlas-map { position: relative; background: #fff; }
.atlas-map .maplibregl-map { font: inherit; }

/* --------------------------------------------------------------- sidebar */
.side {
  border-right: var(--hair) solid var(--rule-strong);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: var(--font-body);
  font-size: var(--step--1);
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.22) transparent;
}
.side::-webkit-scrollbar { width: 9px; }
.side::-webkit-scrollbar-track { background: transparent; }
.side::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.16);
  border-left: var(--hair) solid var(--rule);
  border-right: 3px solid #fff;
}
.side::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.34); }

/* sticky context header — always says what you are looking at */
.side__stat {
  position: sticky; top: 0; z-index: 5; background: #fff;
  padding: var(--space-s) var(--space-m) var(--space-xs);
  border-bottom: var(--hair) solid var(--rule-strong);
}
.side__year {
  font-family: var(--font-titling); font-size: var(--step-3);
  line-height: 1; letter-spacing: var(--tracking-tight); margin: 0;
  display: flex; align-items: center; gap: .5rem;
}
.yrstep { display: inline-flex; flex-direction: column; gap: 1px; }
.yrstep button {
  background: none; border: 0; padding: 0 .2rem; cursor: pointer;
  font-size: .5rem; line-height: 1; color: var(--ink-faint);
}
.yrstep button:hover:not(:disabled) { color: var(--accent); }
.yrstep button:disabled { opacity: .25; cursor: default; }
.gov-dl {
  margin: .35rem 0 0; display: grid;
  grid-template-columns: auto 1fr; gap: 0 .5rem;
  font-size: .72rem; line-height: 1.45;
}
.gov-dl dt { color: var(--ink-faint); }
.gov-dl dd { margin: 0; color: var(--ink-muted); }
.gov-dl dd.is-party { color: var(--ink); font-weight: 500; }

/* legend lives outside the accordions — always readable */
.side__legend {
  border-top: var(--hair) solid var(--rule-strong);
  padding: var(--space-s) var(--space-m) var(--space-l);
  font-size: .72rem;
}
.side__figs {
  display: flex; gap: var(--space-m); margin: var(--space-xs) 0 0;
  padding-top: var(--space-2xs);
  border-top: var(--hair) solid var(--rule);
}
.fig { display: flex; flex-direction: column; }
.fig__n { font-family: var(--font-titling); font-size: var(--step-1);
          line-height: 1.1; font-variant-numeric: tabular-nums; }
.fig__l { font-size: .62rem; text-transform: uppercase;
          letter-spacing: var(--tracking-caps); color: var(--ink-faint); }

/* accordion sections */
.acc { border-bottom: var(--hair) solid var(--rule); }
.acc > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: .6rem var(--space-m);
  display: flex; align-items: baseline; gap: .5rem;
  font-weight: 600; font-size: .68rem; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--ink-muted);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { color: var(--ink); background: var(--bg-sunken); }
.acc > summary::after {
  content: "+"; margin-left: auto; font-size: .9rem; line-height: 1;
  color: var(--ink-faint); font-weight: 400;
}
.acc[open] > summary::after { content: "–"; }
.acc__hint { font-weight: 400; text-transform: none; letter-spacing: 0;
             color: var(--ink-faint); }
.acc__body { padding: 0 var(--space-m) var(--space-s); }
.side__note { color: var(--ink-faint); margin: var(--space-2xs) 0 0; }

/* year list — vertical, bars = allocations announced, party band left */
.years { display: flex; flex-direction: column; }
.yr {
  display: grid; grid-template-columns: 3.6rem 1fr auto;
  align-items: center; gap: .5rem;
  background: none; border: 0; border-left: 3px solid transparent;
  padding: .18rem .35rem .18rem .5rem; margin: 0;
  font: inherit; text-align: left; cursor: pointer; color: var(--ink-muted);
}
.yr:hover { background: var(--bg-sunken); }
.yr.is-on { color: var(--ink); background: var(--bg-sunken); }
.yr__label { font-family: var(--font-titling); font-size: .82rem; }
.yr.is-on .yr__label { font-weight: 700; }
.yr__track { height: 9px; background: rgba(0,0,0,.06); position: relative; }
.yr__bar { position: absolute; inset: 0 auto 0 0; background: var(--rule-strong); }
.yr.is-on .yr__bar { background: var(--accent); }
.yr__n { font-size: .68rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.yr__elect { font-size: .62rem; color: var(--ink-faint); }

.gov {
  display: flex; align-items: baseline; gap: .4rem;
  padding: .4rem .5rem .15rem;
  border-top: var(--hair) solid var(--rule);
  margin-top: .3rem;
  font-size: .62rem; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--ink-faint);
}
.gov:first-child { border-top: 0; margin-top: 0; }
.gov__party { font-weight: 600; color: var(--ink-muted); }

/* top districts — click to open that district's list */
.dists { display: flex; flex-direction: column; gap: 1px; }
.dist {
  display: grid; grid-template-columns: 1fr auto; gap: .5rem;
  align-items: center; background: none; border: 0; padding: .25rem .35rem;
  font: inherit; text-align: left; cursor: pointer; color: var(--ink-muted);
  position: relative;
}
.dist:hover { color: var(--ink); background: var(--bg-sunken); }
.dist__bar {
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--accent); opacity: .45;
}
.dist__amt { font-family: var(--font-titling);
             font-variant-numeric: tabular-nums; font-size: .75rem; }

/* filters */
.side label { display: flex; gap: .45em; align-items: center;
              padding: .1em 0; cursor: pointer; }
.side input[type="checkbox"] { accent-color: var(--ink); }
.side input[type="number"] {
  width: 6em; font: inherit; padding: .1em .3em;
  border: var(--hair) solid var(--rule-strong); border-radius: var(--radius);
}
.sector-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .6rem; }
.side__linkrow { display: flex; gap: .6rem; margin-top: .35rem; }
.side__linkrow button {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--link); text-decoration: underline;
}

/* sources list */
.srcs { list-style: none; padding: 0; margin: 0; }
.srcs li { padding: .18rem 0; }
.srcs a { text-decoration: none; }
.srcs .ev { color: var(--ink-faint); font-size: .68rem;
            text-transform: uppercase; letter-spacing: var(--tracking-caps); }

/* legend */
.legend-row { display: flex; gap: .5em; align-items: flex-start;
              padding: .12em 0; color: var(--ink-muted); }
.legend-swatch { width: .7em; height: .7em; border-radius: 50%;
                 flex: none; margin-top: .35em; }
.legend-swatch--area { border-radius: 0; }
.legend-swatch--line { height: 2px; width: 1em; border-radius: 0; }
.legend-swatch--cluster { border: 1px solid var(--ink); background: #fff; }

/* ----------------------------------------------------------- map panel */
.ov {
  position: absolute; background: #fff;
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--step--1);
}
.ov--panel {
  top: var(--space-s); right: var(--space-s); bottom: var(--space-s);
  width: min(23rem, calc(100% - 2rem));
  padding: var(--space-s) var(--space-m);
  overflow-y: auto; display: none;
}
.ov--panel.is-open { display: block; }

/* map attribution: an ⓘ in the corner, shut by default, small when open */
.atlas-map .maplibregl-ctrl-attrib.maplibregl-compact {
  font-size: .62rem; background: rgba(255,255,255,.92);
  border-radius: var(--radius);
}
.atlas-map .maplibregl-ctrl-attrib.maplibregl-compact-show {
  max-width: 22rem; padding: .3rem 1.7rem .3rem .5rem;
}
.atlas-map .maplibregl-ctrl-attrib a { color: var(--ink-muted); }
.panel-kicker { margin-bottom: var(--space-3xs); }
.panel-title { font-family: var(--font-display); font-size: var(--step-2);
               line-height: var(--leading-snug); margin: 0 0 var(--space-3xs); }
.panel-ta { color: var(--ink-muted); margin: 0 0 var(--space-xs); }
.panel-amount { font-family: var(--font-titling); font-size: var(--step-2);
                margin: var(--space-2xs) 0; }
.panel-meta { color: var(--ink-muted); font-size: var(--step--1);
              margin: 0 0 var(--space-xs); }
.panel-quote {
  border-left: 2px solid var(--theme, var(--accent));
  padding-left: var(--space-s); margin: var(--space-s) 0;
  font-size: var(--step--1); line-height: var(--leading-body);
}
.panel-cite { font-size: var(--step--1); color: var(--ink-muted); }
.panel-thread { display: inline-block; margin-top: var(--space-s);
                font-weight: 600; }
.panel-close { position: absolute; top: .4rem; right: .6rem; background: none;
               border: 0; font-size: 1.1rem; cursor: pointer;
               color: var(--ink-muted); }
.tier {
  display: inline-block; font-size: .68rem; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); font-weight: 600;
  border: var(--hair) solid var(--rule-strong); border-radius: var(--radius);
  padding: 0 .45em; color: var(--ink-muted);
}

/* ------------------------------------------------- projects: ribbons */
/* one control bar: search, sector, sort, year range, toggle, count */
.pbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0; margin: var(--space-m) 0;
  border: var(--hair) solid var(--rule-strong); border-radius: var(--radius);
  font-size: var(--step--1);
}
.pbar > * { padding: .5rem .75rem;
            border-right: var(--hair) solid var(--rule); }
.pbar > *:last-child { border-right: 0; }
.pbar input[type="search"] {
  font: inherit; border: 0; outline: 0; min-width: 15rem; flex: 1 1 15rem;
  background: transparent;
}
.pbar select { font: inherit; border: 0; background: transparent;
               margin-left: .35em; outline: 0; }
.pbar__f { display: flex; align-items: center; gap: .3em;
           color: var(--ink-muted); white-space: nowrap; }
.pbar__check { gap: .45em; }
.pbar__count { color: var(--ink-faint); margin-left: auto;
               white-space: nowrap; }
.pbar__range { flex-direction: column; align-items: flex-start; gap: .1em; }
.pbar__rl b { font-family: var(--font-titling); font-weight: 400;
              color: var(--ink); }
.dualrange { position: relative; width: 11rem; height: 1rem; }
.dualrange input[type="range"] {
  position: absolute; inset: 0; width: 100%; margin: 0;
  pointer-events: none; -webkit-appearance: none; appearance: none;
  background: transparent;
}
.dualrange input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: var(--rule-strong);
}
.dualrange input[type="range"]::-moz-range-track {
  height: 2px; background: var(--rule-strong);
}
.dualrange input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto; -webkit-appearance: none; appearance: none;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ink); border: 2px solid #fff; margin-top: -4.5px;
  cursor: ew-resize;
}
.dualrange input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 11px; height: 11px; border-radius: 50%;
  background: var(--ink); border: 2px solid #fff; cursor: ew-resize;
}
.ribbons { border-top: var(--hair) solid var(--rule-strong); }
.rib {
  display: grid;
  grid-template-columns: 1.1rem minmax(10rem, 21rem) 1fr 5.5rem;
  gap: var(--space-s); align-items: center;
  padding: .3rem 0; border-bottom: var(--hair) solid var(--rule);
  font-size: var(--step--1);
}
.rib:hover { background: var(--bg-sunken); }
.rib__sector {
  width: .85rem; height: .85rem; border-radius: 50%;
  justify-self: center; flex: none;
}
.rib__name { text-decoration: none; line-height: 1.3; }
.rib__name .ta { color: var(--ink-faint); }
.rib__meta { display: block; color: var(--ink-faint); font-size: .68rem; }
.rib__grid { position: relative; height: 1.4rem; }
.rib__cell {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%;
}
.rib__span {
  position: absolute; top: 50%; height: 1px; transform: translateY(-50%);
  background: var(--rule-strong);
}
.rib__total { text-align: right; font-family: var(--font-titling);
              font-variant-numeric: tabular-nums; }
.rib-scale {
  display: grid;
  grid-template-columns: 1.1rem minmax(10rem, 21rem) 1fr 5.5rem;
  gap: var(--space-s); font-size: .62rem; color: var(--ink-faint);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  padding-bottom: .3rem;
}
/* year labels run on the diagonal so all fifteen fit without folding */
.rib-scale { align-items: end; }
.rib-scale__years { position: relative; height: 3.4rem; }
.rib-scale__y {
  position: absolute; bottom: 0; transform-origin: left bottom;
  transform: rotate(-55deg); white-space: nowrap;
  font-family: var(--font-titling); letter-spacing: 0;
  text-transform: none; font-size: .6rem;
}

/* ------------------------------------------------------- data page */
.dl-list { list-style: none; padding: 0; margin: 0 0 var(--space-s); }
.dl-list li { display: flex; gap: var(--space-s); align-items: baseline;
              padding: .35em 0; border-bottom: var(--hair) solid var(--rule);
              flex-wrap: wrap; }
.dl-list span { color: var(--ink-muted); font-size: var(--step--1); }
.srcyear { border-top: var(--hair) solid var(--rule); padding: .6rem 0; }
.srcyear__head { display: flex; gap: var(--space-s); align-items: baseline;
                 margin: 0 0 .25rem; flex-wrap: wrap; }
.srcyear__y { font-family: var(--font-titling); font-size: var(--step-1); }
.srcyear__gov { font-size: .68rem; text-transform: uppercase;
                letter-spacing: var(--tracking-caps); color: var(--ink-muted); }
.srcyear__n { color: var(--ink-faint); font-size: var(--step--1);
              margin-left: auto; }
.srcyear__docs { list-style: none; padding: 0; margin: 0; display: flex;
                 gap: var(--space-m); flex-wrap: wrap;
                 font-size: var(--step--1); }
.srcyear__note { color: var(--ink-faint); }

/* --------------------------------------------- project thread page */
.thread-spark { display: block; margin: var(--space-s) 0; }
/* the project's own quote list. NOT .rail — that kit class is the fixed
   left-hand progress rail and would pin this off-canvas. */
.quotes { display: block; }
.quotes .fitem { border-top: var(--hair) solid var(--rule);
                 padding-top: var(--space-xs); margin-top: var(--space-xs); }
/* one compact header line: year, the amount as printed, then the tags —
   the project's name is already the page title */
.qrow__head {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: nowrap;
  margin: 0 0 .25rem; overflow-x: auto;
}
.qrow__yr { font-family: var(--font-titling); font-size: var(--step-1);
            line-height: 1; flex: none; }
.qrow__amt { font-family: var(--font-titling); color: var(--ink-muted);
             white-space: nowrap; flex: none; }
.qrow__tags { display: flex; gap: .35rem; flex-wrap: nowrap; flex: none; }
.qrow .panel-quote { margin: 0 0 .5rem; }
.qrow .panel-cite { margin: 0; }

.thread-facts {
  display: flex; flex-wrap: nowrap; overflow-x: auto;
  gap: var(--space-l); margin: var(--space-s) 0 var(--space-l);
  padding: var(--space-s) 0;
  border-top: 2px solid var(--ink);
  border-bottom: var(--hair) solid var(--rule);
}
.thread-facts > span { flex: 0 0 auto; }
.tf__n { font-family: var(--font-titling); font-size: var(--step-2);
         line-height: 1.05; display: block; white-space: nowrap; }
.tf__l { font-size: .62rem; text-transform: uppercase;
         letter-spacing: var(--tracking-caps); color: var(--ink-faint); }
.thread-bars { display: flex; align-items: flex-end; gap: 3px;
               height: 4.5rem; margin: var(--space-s) 0; }
.tb { flex: 1; display: flex; flex-direction: column; align-items: center;
      gap: 3px; text-decoration: none; }
.tb__bar { width: 100%; background: var(--rule-strong); min-height: 2px; }
.tb.is-on .tb__bar { background: var(--theme, var(--accent)); }
.tb__y { font-size: .55rem; color: var(--ink-faint);
         font-family: var(--font-titling); }
.thread-map { height: 15rem; border: var(--hair) solid var(--rule);
              margin: var(--space-s) 0; background: #F2EEE1; }
.thread-actions { display: flex; gap: var(--space-m); flex-wrap: wrap;
                  margin: var(--space-s) 0 var(--space-l);
                  font-size: var(--step--1); }
/* ---------------------------------------------------- district page */
.dpick {
  display: flex; gap: var(--space-m); align-items: flex-end;
  flex-wrap: wrap; margin: 0 0 var(--space-m); font-size: var(--step--1);
}
.dpick select {
  font: inherit; padding: .35em .6em; border-radius: var(--radius);
  border: var(--hair) solid var(--rule-strong); background: #fff;
  margin-left: .4em;
}
.tb.is-cmp .tb__bar { background: var(--ink-faint); }
.cmp-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); }
body.is-comparing .cmp-grid { grid-template-columns: 1fr 1fr; }
.cmp-label {
  font-size: .62rem; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--ink-faint);
  margin: var(--space-m) 0 -.5rem;
}
#cbars { margin-top: -.4rem; opacity: .85; }
.sectorbars { list-style: none; padding: 0; margin: 0; }
.sectorbars li {
  display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr 4rem;
  gap: var(--space-s); align-items: center; padding: .25rem 0;
  font-size: var(--step--1);
}
.sb__name { display: flex; gap: .4em; align-items: center; }
.sb__track { height: 8px; background: rgba(0,0,0,.06); }
.sb__fill { display: block; height: 100%; }
.sb__amt { text-align: right; font-family: var(--font-titling);
           font-variant-numeric: tabular-nums; }

.sib-list { list-style: none; padding: 0; margin: 0; }
.sib-list li { padding: .3em 0; border-bottom: var(--hair) solid var(--rule); }
.sib-list a { text-decoration: none; }


.attrib { background: var(--bg-sunken); padding: var(--space-xs) var(--space-s);
          border-left: 2px solid var(--accent); font-size: var(--step--1);
          overflow-x: auto; }
.attrib code { font-size: .95em; }

/* districts index */
.dtable { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.dtable th, .dtable td { text-align: left; padding: .45em .75em .45em 0;
  border-bottom: var(--hair) solid var(--rule); vertical-align: middle; }
.dtable th { font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); font-size: .62rem;
  color: var(--ink-muted); }
.dtable td.num, .dtable th.num { text-align: right;
  font-family: var(--font-titling); font-variant-numeric: tabular-nums; }
.dtable a { text-decoration: none; }
.dbar { position: relative; display: inline-block; vertical-align: middle;
  width: min(22rem, 40vw); height: 10px; background: rgba(0,0,0,.05); }
.dbar__fill { position: absolute; inset: 0 auto 0 0; background: #A9DEC4; }
.dbar__direct { position: absolute; inset: 0 auto 0 0; background: #2E9E6B; }
.dbar__n { margin-left: .6em; font-family: var(--font-titling);
  font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ factsheet */
.fig-chart { margin: var(--space-xl) 0 0; padding: 0; }
.fig-chart figcaption { display: flex; justify-content: space-between;
  align-items: baseline; gap: var(--space-m); flex-wrap: wrap;
  border-bottom: var(--hair) solid var(--rule); padding-bottom: .35rem; }
.fig-chart figcaption h3 { font-family: var(--font-body); font-weight: 600;
  font-size: var(--step-0); margin: 0; }
.chart-legend { display: flex; gap: var(--space-m); margin: 0;
  font-size: var(--step--1); color: var(--ink-muted); }
.chart-legend span { display: flex; align-items: center; gap: .4em; }
.fig-chart svg { width: 100%; height: auto; display: block;
  margin-top: var(--space-2xs); }
.chart-tick { font-family: var(--font-body); font-size: 9px;
  fill: var(--ink-faint); }
.chart-note { font-size: var(--step--1); color: var(--ink-muted);
  margin: .35rem 0 0; max-width: 46rem; }
.chart-src { font-size: .68rem; color: var(--ink-faint); margin-top: .3rem; }
.chart-src summary { cursor: pointer; }
.chart-src p { margin: .25rem 0 0; }
.chart-table { display: none; }
.chart-src[open] ~ .chart-table, .fig-chart:focus-within .chart-table {
  display: table; width: 100%; border-collapse: collapse;
  font-size: var(--step--1); margin-top: var(--space-s); }
.chart-table caption { text-align: left; font-size: .68rem;
  color: var(--ink-faint); padding-bottom: .3rem; }
.chart-table th, .chart-table td { border-bottom: var(--hair) solid var(--rule);
  padding: .25em .6em .25em 0; text-align: left; }
.chart-table .num { text-align: right; font-family: var(--font-titling);
  font-variant-numeric: tabular-nums; }
.chart-band { font-family: var(--font-body); font-size: 8px;
  fill: var(--ink-faint); letter-spacing: .08em; }
.rib__cost { display: block; color: var(--ink-faint); font-size: .8em; }

/* ==================================================================
   MOBILE — built as its own layer rather than patched on. Phones get
   a drawer nav, the atlas becomes map-first with the controls in a
   bottom sheet, and every wide thing scrolls inside its own box so
   the page itself never scrolls sideways.
   ================================================================== */

/* the hamburger only exists below the breakpoint */
.navtoggle { display: none; }

@media (max-width: 900px) {
  /* --- navigation ------------------------------------------------ */
  .nav__inner { grid-template-columns: 1fr auto auto; gap: var(--space-s); }
  .brandline__tag { display: none; }
  .logotype { font-size: var(--step-0); }

  .navtoggle {
    display: flex; flex-direction: column; justify-content: center;
    gap: 4px; width: 44px; height: 44px; padding: 0 10px;
    background: none; border: 0; cursor: pointer;
  }
  .navtoggle span {
    display: block; height: 2px; background: var(--ink);
    transition: transform 200ms var(--ease), opacity 150ms var(--ease);
  }
  .navtoggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .navtoggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .nav__links {
    position: fixed; inset: 3.5rem 0 auto 0;
    background: #fff; border-bottom: var(--hair) solid var(--rule-strong);
    display: block; max-height: 0; overflow: hidden;
    transition: max-height 260ms var(--ease);
  }
  .nav__links.is-open { max-height: 70dvh; overflow-y: auto; }
  .nav__links ul { display: block; padding: var(--space-2xs) 0; }
  .nav__links li { border-top: var(--hair) solid var(--rule); }
  .nav__links li:first-child { border-top: 0; }
  .nav__links a {
    display: block; padding: .85rem var(--gutter); font-size: var(--step-0);
  }
  body.nav-open { overflow: hidden; }
  .nav[data-state="top"] { background: rgba(255,255,255,.96); }

  /* --- atlas: map first, controls in a sheet --------------------- */
  .atlas-shell { display: block; height: auto; border-top: 0; }
  .atlas-map { height: calc(100dvh - 3.5rem - var(--peek, 3.25rem)); }

  .side {
    position: fixed; inset: auto 0 0 0; z-index: 40;
    max-height: 78dvh; height: auto;
    background: #fff; border-right: 0;
    border-top: var(--hair) solid var(--rule-strong);
    /* the peek is the height of the grip itself (set in JS), so the
       year and the headline figures stay readable when it is shut */
    transform: translateY(calc(100% - var(--peek, 3.25rem)));
    transition: transform 280ms var(--ease);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .side.is-open { transform: translateY(0); }
  /* the grab handle is the sticky header, which doubles as the summary */
  .side__stat { cursor: pointer; padding-top: 1.1rem; }
  .side__stat::before {
    content: ""; position: absolute; top: .4rem; left: 50%;
    transform: translateX(-50%); width: 2.5rem; height: 3px;
    background: var(--rule-strong); border-radius: 2px;
  }
  .side__year { font-size: var(--step-2); }
  .side__figs { gap: var(--space-s); }
  .fig__n { font-size: var(--step-0); }
  .fig__l { font-size: .55rem; }
  .gov-dl { font-size: .68rem; }

  .ov--panel {
    position: fixed; inset: auto 0 0 0; top: auto;
    width: auto; max-height: 72dvh; z-index: 60;
    border-left: 0; border-right: 0; border-bottom: 0;
    border-radius: 0; padding-bottom: calc(var(--space-m) + env(safe-area-inset-bottom));
  }
  .maplibregl-ctrl-top-right { top: .5rem; right: .5rem; }

  /* --- everything else ------------------------------------------- */
  .chapter { padding: var(--space-xl) var(--gutter) var(--space-l); }
  .chapter__title { font-size: var(--step-3); }
  .thread-facts { gap: var(--space-m); }
  .tf__n { font-size: var(--step-1); }

  .pbar { flex-direction: column; align-items: stretch; }
  .pbar > * { border-right: 0; border-bottom: var(--hair) solid var(--rule); }
  .pbar > *:last-child { border-bottom: 0; }
  .pbar input[type="search"] { min-width: 0; width: 100%; }
  .pbar__count { margin-left: 0; }
  .dualrange { width: 100%; }

  .rib { grid-template-columns: 1.1rem 1fr 5rem; gap: var(--space-s); }
  .rib__grid, .rib-scale { display: none; }
  .rib__name { font-size: var(--step--1); }

  .cmp-grid, body.is-comparing .cmp-grid { grid-template-columns: 1fr; }
  .dpick { flex-direction: column; align-items: stretch; }
  .dpick select { width: 100%; margin-left: 0; }
  .sectorbars li { grid-template-columns: 1fr 3.5rem;
                   grid-template-areas: "name amt" "track track"; }
  .sb__name { grid-area: name; } .sb__amt { grid-area: amt; }
  .sb__track { grid-area: track; }

  .dtable .dbar { width: 100%; min-width: 6rem; }
  .dl-list li { flex-direction: column; gap: .15rem; }
  .srcyear__head { gap: .5rem; }
  .srcyear__n { margin-left: 0; width: 100%; }

  .fig-chart figcaption { flex-direction: column; gap: .25rem; }
  .chart-legend { flex-wrap: wrap; gap: var(--space-s); }
}

/* wide things always scroll inside themselves, at every width */
.dtable, .chart-table, .ptable { display: block; overflow-x: auto; }
.dtable thead, .chart-table thead, .ptable thead { white-space: nowrap; }

@media (max-width: 560px) {
  .lang { font-size: .68rem; }
  .thread-facts { gap: var(--space-s); }
  .qrow__head { flex-wrap: wrap; }
}

/* pointer-coarse devices get bigger hit targets everywhere */
@media (pointer: coarse) {
  .yr { padding-top: .5rem; padding-bottom: .5rem; }
  .dist { padding-top: .55rem; padding-bottom: .55rem; }
  .acc > summary { padding-top: .85rem; padding-bottom: .85rem; }
  .side label { padding: .3em 0; }
  .sib-list li { padding: .5em 0; }
}

/* --- chart hover readout ------------------------------------------- */
.fig-chart { position: relative; }
.fig-chart svg { cursor: crosshair; touch-action: pan-y; }
.fig-chart svg:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; }
.chart-cross__l { stroke: var(--ink); stroke-width: 1; opacity: .28; }
.chart-cross__d { stroke: #fff; stroke-width: 2; }

.chart-tip {
  position: absolute; top: 2.2rem; left: 50%; z-index: 5;
  min-width: 8rem; padding: .5rem .65rem;
  background: #fff; border: var(--hair) solid var(--rule-strong);
  font-size: var(--step--2); line-height: 1.35;
  opacity: 0; pointer-events: none;
  transition: opacity 120ms var(--ease);
}
.chart-tip.is-on { opacity: 1; }
.chart-tip b {
  display: block; font-family: var(--font-titling);
  font-weight: 400; color: var(--ink-muted); margin-bottom: .25rem;
}
.chart-tip span {
  display: flex; align-items: baseline; gap: .4rem; white-space: nowrap;
}
.chart-tip i {
  width: .5rem; height: .5rem; flex: none; border-radius: 50%;
}
.chart-tip em {
  margin-left: auto; padding-left: .75rem;
  font-style: normal; font-family: var(--font-titling);
}

/* --- bilingual quotes ---------------------------------------------
   The Tamil original is the same paragraph from the Tamil edition of
   the speech, matched by paragraph number. Where one exists the toggle
   swaps it in; where it doesn't, English stays — better an honest gap
   than a machine translation pretending to be the record.            */
html:not([data-ui-lang="ta"]) [data-q="ta"] { display: none; }
html[data-ui-lang="ta"] .panel-quote.has-ta { display: none; }
.qnote {
  display: block; margin-top: .4rem;
  font-family: var(--font-sans); font-size: var(--step--2);
  font-style: normal; color: var(--ink-faint);
}