.viz-root {
  color-scheme: light;
  --page: #f9f9f7; --surface-1: #fcfcfb;
  --text-primary: #0b0b0b; --text-secondary: #52514e; --muted: #898781;
  --grid: #e1e0d9; --axis: #c3c2b7; --border: rgba(11,11,11,0.10); --band: rgba(11,11,11,0.035);
  --s1: #1f4e8c; --s2: #d4a017; --s3: #7fb0db; --s4: #cdb88f; --s5: #3a3f4b; --s6: #2f8a7c;
  --deemph: #c3c2b7; --neg: #e34948;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz-root {
    color-scheme: dark;
    --page: #0d0d0d; --surface-1: #1a1a19;
    --text-primary: #f0efec; --text-secondary: #c3c2b7; --muted: #898781;
    --grid: #2c2c2a; --axis: #383835; --border: rgba(255,255,255,0.10); --band: rgba(255,255,255,0.04);
    --s1: #6a9be0; --s2: #f0c04a; --s3: #a9cdec; --s4: #d8c49a; --s5: #b7bfcc; --s6: #5fb3a5;
    --deemph: #52514e; --neg: #e66767;
  }
}
:root[data-theme="dark"] .viz-root {
  color-scheme: dark;
  --page: #0d0d0d; --surface-1: #1a1a19;
  --text-primary: #f0efec; --text-secondary: #c3c2b7; --muted: #898781;
  --grid: #2c2c2a; --axis: #383835; --border: rgba(255,255,255,0.10); --band: rgba(255,255,255,0.04);
  --s1: #6a9be0; --s2: #f0c04a; --s3: #a9cdec; --s4: #d8c49a; --s5: #b7bfcc; --s6: #5fb3a5;
  --deemph: #52514e; --neg: #e66767;
}
* { box-sizing: border-box; }
body { margin: 0; }
.viz-root { background: var(--page); color: var(--text-primary); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; min-height: 100vh; padding: 28px 20px 48px; }
.wrap { max-width: 1120px; margin: 0 auto; }
header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
h1 { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
.sub { color: var(--text-secondary); margin: 0; max-width: 760px; }
button { font: inherit; font-size: 13px; color: var(--text-primary); background: var(--surface-1); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; cursor: pointer; }
button:hover { background: var(--band); }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px 14px; grid-column: span 12; min-width: 0; }
.half { grid-column: span 6; }
a.dl { font-size: 13px; color: var(--text-primary); background: var(--surface-1); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; text-decoration: none; white-space: nowrap; }
a.dl:hover { background: var(--band); }
.sec { grid-column: span 12; margin: 20px 0 0; }
.sec h2 { font-size: 18px; font-weight: 600; margin: 0; }
.sec p { color: var(--text-secondary); margin: 2px 0 0; max-width: 900px; }
.solo .chart, .solo .legend { max-width: 560px; }
@media (max-width: 860px) { .half { grid-column: span 12; } }
.card h2 { font-size: 15px; font-weight: 600; margin: 0 0 2px; }
.card .note { color: var(--text-secondary); font-size: 12.5px; margin: 2px 0 10px; }
.card .foot { color: var(--muted); font-size: 12px; margin-top: 8px; }
.card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.tiles { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 860px) { .tiles { grid-template-columns: 1fr 1fr; } }
.tile { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.tile .label { color: var(--text-secondary); font-size: 13px; }
.tile .value { font-size: 28px; font-weight: 600; margin: 2px 0; }
.tile.hero .value { font-size: 48px; line-height: 1.05; }
.tile .delta { color: var(--text-secondary); font-size: 12.5px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 8px; color: var(--text-secondary); font-size: 12.5px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.key-rect { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.key-line { width: 14px; height: 2px; border-radius: 1px; display: inline-block; }
svg { display: block; width: 100%; height: auto; overflow: visible; }
svg text { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
svg .lbl { fill: var(--text-secondary); font-size: 11.5px; }
svg .lbl-strong { fill: var(--text-primary); font-size: 12px; font-weight: 600; }
.hit:hover + .mark, .mark.on { filter: brightness(1.12); }
.tip { position: fixed; pointer-events: none; z-index: 10; background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); max-width: 300px; display: none; }
.tip .t-title { color: var(--text-secondary); margin-bottom: 4px; }
.tip .row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.tip .row .k { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.tip .row .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.tip .t-note { color: var(--text-secondary); margin-top: 4px; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; margin-top: 8px; }
th, td { text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--grid); font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--text-secondary); font-weight: 600; }
.tablewrap, .postable { overflow-x: auto; }
.multiples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 18px; }
@media (max-width: 860px) { .multiples { grid-template-columns: repeat(2, 1fr); } }
#c-hist .multiples { grid-template-columns: repeat(2, 1fr); }
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-top: 12px; }
.mini h3 { font-size: 13px; font-weight: 600; margin: 0 0 4px; }
@media (max-width: 860px) { .mini { grid-template-columns: 1fr; } }
.kpis.three { grid-template-columns: repeat(3, 1fr); }
.mini.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .mini.three { grid-template-columns: 1fr; } }
.kpis.two { grid-template-columns: repeat(2, 1fr); margin-top: 10px; }
details.foot summary { cursor: pointer; width: max-content; }
details.foot[open] summary { margin-bottom: 4px; }
.st { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600; color: #fff; margin-right: 6px; }
.st.good { background: #0ca30c; } .st.bad { background: #d03b3b; } .st.warn { background: #fab219; color: #0b0b0b; }
.tile.good { box-shadow: inset 4px 0 0 #0ca30c; } .tile.bad { box-shadow: inset 4px 0 0 #d03b3b; }
.mini .full { grid-column: span 2; }
@media (max-width: 860px) { .mini .full { grid-column: span 1; } }
.ratings { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 2px; font-size: 13px; color: var(--text-secondary); }
table.fixgrid { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
table.fixgrid th, table.fixgrid td { text-align: left; vertical-align: top; padding: 10px 10px; border-top: 1px solid var(--border); }
table.fixgrid tr:first-child th { border-top: none; color: var(--text-secondary); font-weight: 600; }
table.fixgrid th { width: 28%; font-weight: 500; color: var(--text-primary); }
table.fixgrid .sub { color: var(--text-secondary); font-size: 12px; margin-top: 4px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 6px; }
@media (max-width: 860px) { .kpis { grid-template-columns: 1fr 1fr; } }
.multiples h3 { font-size: 12.5px; font-weight: 600; margin: 0; color: var(--text-primary); }
.multiples .chg { color: var(--text-secondary); font-size: 12px; }
ul.plain { margin: 6px 0 0; padding-left: 18px; color: var(--text-secondary); font-size: 13px; }
ul.plain li { margin: 3px 0; }
ol.summary { padding-left: 20px; margin: 8px 0 0; font-size: 14px; color: var(--text-primary); }
ol.summary li { margin: 6px 0; }
details.howto { margin-top: 10px; color: var(--text-secondary); font-size: 13px; }
details.howto summary { cursor: pointer; color: var(--text-primary); font-weight: 600; }

.sources { margin-top: 24px; color: var(--text-secondary); font-size: 13px; max-width: 900px; scroll-margin-top: 16px; }
.sources h2 { font-size: 18px; font-weight: 600; margin: 0 0 4px; color: var(--text-primary); }
.sources h3 { font-size: 14px; font-weight: 600; margin: 16px 0 4px; color: var(--text-primary); }
.sources ul { margin: 0; padding-left: 18px; } .sources li { margin: 3px 0; }
.sources a { color: inherit; }

/* ---------- Civic ledger theme ---------- */
.viz-root {
  --page: #f5f2ea; --surface-1: #fffdf8;
  --text-primary: #17202e; --text-secondary: #4b5262; --muted: #7d8190;
  --grid: #e4e0d4; --axis: #b9b5a8; --border: rgba(23,32,46,0.12); --band: rgba(19,41,75,0.05);
  --ink: #13294b; --gold: #fdb515; --rule: #13294b;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz-root {
    --page: #0c111b; --surface-1: #151c2a; --text-primary: #eef0f4; --text-secondary: #b8bdc9; --muted: #8a90a0;
    --grid: #263044; --axis: #3a4560; --border: rgba(255,255,255,0.10); --band: rgba(255,255,255,0.04);
    --ink: #fdb515; --rule: #3a4560;
  }
}
:root[data-theme="dark"] .viz-root {
  --page: #0c111b; --surface-1: #151c2a; --text-primary: #eef0f4; --text-secondary: #b8bdc9; --muted: #8a90a0;
  --grid: #263044; --axis: #3a4560; --border: rgba(255,255,255,0.10); --band: rgba(255,255,255,0.04);
  --ink: #fdb515; --rule: #3a4560;
}
.viz-root { font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.55; padding: 0 20px 64px; }
.wrap { max-width: 1160px; }
h1, .sec h2, .card h2, .sources h2, .sources h3 { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; }

/* masthead */
header { border-top: 6px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 28px 0 22px; margin-bottom: 28px; align-items: flex-end; }
h1 { font-size: clamp(30px, 4.6vw, 48px); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 10px; }
.sub { font-size: 17px; max-width: 640px; }
a.dl, button { font-family: inherit; border-radius: 999px; padding: 6px 14px; font-weight: 500; border-color: var(--border); }
a.dl { background: var(--ink); color: #fff; border-color: var(--ink); }
a.dl:hover { background: var(--ink); filter: brightness(1.15); }
:root[data-theme="dark"] a.dl { color: #13294b; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) a.dl { color: #13294b; } }

/* headline numbers */
.tiles { gap: 14px; margin-bottom: 22px; }
.tile { border-radius: 4px; padding: 16px 18px; border-top: 3px solid var(--ink); }
.tile .value { font-family: "Source Serif 4", Georgia, serif; font-size: 32px; font-weight: 700; letter-spacing: -0.01em; }
.tile.hero { background: #13294b; border-color: #13294b; color: #fff; }
.tile.hero .label, .tile.hero .delta { color: rgba(255,255,255,0.78); }
.tile.hero .value { color: #fdb515; font-size: 60px; }

/* summary */
section.card[aria-label="The short version"] { border-left: 4px solid var(--gold); }
ol.summary { font-size: 15.5px; }
ol.summary li::marker { font-family: "Source Serif 4", Georgia, serif; font-weight: 700; color: var(--ink); }

/* sections and cards */
.sec { margin: 40px 0 2px; padding-top: 14px; border-top: 1px solid var(--rule); }
.sec h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
.sec p { font-size: 15.5px; margin-top: 4px; }
.card { border-radius: 4px; padding: 20px 22px 16px; box-shadow: 0 1px 0 rgba(23,32,46,0.04); }
.card h2 { font-size: 19px; font-weight: 600; line-height: 1.25; margin-bottom: 4px; }
.card .note { font-size: 13.5px; }
.card .foot, details.foot { font-size: 12.5px; line-height: 1.5; }
details.foot summary { color: var(--text-secondary); font-weight: 500; }
.mini h3, .multiples h3 { font-size: 13.5px; }
.tip { border-radius: 6px; font-size: 13px; box-shadow: 0 8px 24px rgba(19,41,75,0.16); }
th { font-weight: 600; color: var(--text-primary); }

/* sources */
.sources { max-width: none; margin-top: 40px; padding-top: 14px; border-top: 6px solid var(--ink); font-size: 13.5px; }
.sources h2 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.sources h3 { font-size: 16px; font-weight: 600; margin: 18px 0 6px; break-after: avoid; }
.sources ul { break-inside: avoid; }
@media (min-width: 900px) { .sources { column-count: 2; column-gap: 48px; } .sources h2 { column-span: all; } }
.sources a { text-decoration-color: var(--axis); text-underline-offset: 2px; }
.sources a:hover { text-decoration-color: currentColor; }
@media (max-width: 860px) { .tile.hero .value { font-size: 44px; } header { flex-direction: column; align-items: flex-start; } }

/* ---------- Photo masthead, light only ---------- */
#theme { display: none; }
header {
  position: relative; min-height: 380px; margin-bottom: 28px;
  /* the photo bleeds to the page edges so the headline, subhead and eyebrow land on the same
     left edge as the lead sentence and everything below it (they were inset 40px inside the photo) */
  margin-inline: calc(-1 * (50vw - 50%));
  padding: 44px calc(50vw - 50%) 40px;
  border: 0; border-radius: 0; color: #fff;
  background: linear-gradient(to top, rgba(10,22,42,0.88) 0%, rgba(10,22,42,0.55) 45%, rgba(10,22,42,0.10) 100%), url("../images/berkeley-hills.jpg?v=c4dc6cae-4105-4ac3-b9f0-ec75ffb3d6a5") center 45% / cover no-repeat #13294b;
}
header h1 { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
header .sub { color: rgba(255,255,255,0.9); }
header a.dl { background: var(--gold); border-color: var(--gold); color: #13294b; font-weight: 600; }
header a.dl:hover { background: var(--gold); filter: brightness(1.06); }
.credit { position: absolute; right: 16px; bottom: 8px; margin: 0; font-size: 11px; color: rgba(255,255,255,0.72); }
.credit a { color: inherit; }

/* ---------- "Show table" as a small link at the bottom of each card ---------- */
article.card { display: flex; flex-direction: column; }
article.card .card-head { display: contents; }
article.card > details.foot { order: 100; }
article.card > .tablewrap { order: 99; }
button[data-table] {
  order: 98; align-self: flex-start; margin-top: 10px; padding: 2px 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  font-size: 13px; font-weight: 500; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
button[data-table]:hover { background: none; text-decoration-color: var(--ink); }

/* footer row: "Show table" on the left, "Notes and sources" on the right, same link style */
article.card { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
article.card > *, article.card .card-head > div { flex: 0 0 100%; min-width: 0; }
article.card button[data-table] { flex: 0 0 auto; }
article.card > details.foot { flex: 0 0 auto; order: 98; margin: 10px 0 0 auto; }
article.card > details.foot[open] { flex-basis: 100%; order: 100; }
article.card > details.foot > summary {
  list-style: none; margin-left: auto; padding: 2px 0;
  font-size: 13px; font-weight: 500; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
article.card > details.foot > summary::-webkit-details-marker { display: none; }
article.card > details.foot > summary:hover { text-decoration-color: var(--ink); }
article.card > details.foot[open] > summary { margin-bottom: 8px; }

.tldr { border-left: 4px solid var(--gold); }
.solo .chart, .solo .legend { max-width: none; }
.solo .chart > svg { max-width: 560px; }
.kpis .tile .label { margin-bottom: 2px; }

/* ---------- Visual pass 2: performance scorecard ---------- */
.score { --miss: #c2453d; --meet: #2f8a7c; display: grid; gap: 22px; margin-top: 10px; }
.score-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-primary); }
.score-h .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.score-h .n { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.score-group.miss { --c: var(--miss); } .score-group.meet { --c: var(--meet); }
.score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gauge { display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 12px 15px 11px; }
.g-label { font-size: 13px; line-height: 1.35; color: var(--text-secondary); min-height: 2.7em; }
.g-value { font: 600 23px/1.05 "Source Serif 4", Georgia, serif; color: var(--text-primary); margin: 9px 0 9px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.g-value .u { font-size: .68em; font-weight: 500; color: var(--text-secondary); letter-spacing: 0; margin-left: 1px; }
.g-bar { position: relative; height: 8px; border-radius: 4px; background: var(--grid); }
.g-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--c); }
.g-bar .tick { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--text-primary); border-radius: 1px; }
.g-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; font-size: 12.5px; color: var(--text-secondary); }
.g-meta > span:first-child { color: var(--muted); }
.g-st { font-weight: 700; color: var(--c); }
.g-note { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--grid); font-size: 12px; color: var(--muted); }
.g-key { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -6px 0 0; font-size: 12.5px; color: var(--muted); }
.g-key .k-fill { width: 18px; height: 8px; border-radius: 4px; background: var(--text-secondary); }
.g-key .k-tick { width: 2px; height: 14px; background: var(--text-primary); margin-left: 10px; }
/* the chart only ever used the left half of the card; the explanation moves up beside it,
   and its two paragraphs run in two columns so the pair ends level */
#c-perf .mini {
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 10px 28px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--grid); align-items: start;
}
#c-perf .mini > div:last-child {
  display: block; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-1); padding: 14px 18px 12px;
}
#c-perf .mini > div:last-child h3 { margin: 0 0 8px; }
#c-perf .mini > div:last-child > div { display: block; }
#c-perf .mini > div:last-child .note { margin: 0; max-width: none; }
@media (max-width: 900px) {
  #c-perf .mini { grid-template-columns: 1fr; }
  #c-perf .mini > div:last-child > div { grid-template-columns: 1fr; }
}
#c-perf .mini > div:last-child {
  border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px 12px;
  display: block; background: var(--surface-1);
}
#c-perf .mini > div:last-child h3 { margin: 0 0 8px; }
#c-perf .mini > div:last-child .note { margin: 0; max-width: none; }
#c-perf .mini > div:last-child .note + .note { margin-top: 9px; }
@media (max-width: 860px) { #c-perf .mini > div:last-child { grid-template-columns: 1fr; row-gap: 6px; } }
@media (max-width: 860px) { .score-grid { grid-template-columns: 1fr; } .g-label { min-height: 0; } }

/* ---------- Visual pass 3: full-width cards with one chart ---------- */
article.card.solo {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  column-gap: 48px; align-items: start;
}
article.card.solo > .card-head > div { grid-column: 1 / -1; }
article.card.solo .chart { grid-column: 1; grid-row: 2; max-width: none; }
article.card.solo .chart > svg { max-width: none; }
article.card.solo .legend {
  grid-column: 2; grid-row: 2; max-width: none; margin: 0;
  flex-direction: column; flex-wrap: nowrap; gap: 0; align-self: start;
  border-top: 1px solid var(--grid); font-size: 13.5px;
}
article.card.solo .legend > span {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 0; border-bottom: 1px solid var(--grid); color: var(--text-primary);
}
article.card.solo .legend > span > span { display: block; }
/* on a phone the two-column solo layout collapsed but the legend stayed a nowrap column,
   so one long label pushed the page sideways */
@media (max-width: 760px) {
  article.card.solo { grid-template-columns: minmax(0, 1fr); }
  article.card.solo .chart, article.card.solo .legend, article.card.solo button[data-table],
  article.card.solo > details.foot { grid-column: 1; grid-row: auto; }
  article.card.solo .legend { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
  article.card.solo .legend > span { width: auto; padding: 4px 0; border-bottom: 0; font-size: 12.5px; min-width: 0; max-width: 100%; }
}
article.card.solo .legend .key-rect { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
article.card.solo .legend .key-line { width: 16px; height: 3px; border-radius: 2px; flex: 0 0 auto; }
article.card.solo button[data-table] { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 12px; }
article.card.solo > details.foot { grid-column: 2; grid-row: 3; margin: 12px 0 0; justify-self: start; }
article.card.solo > details.foot[open] { grid-column: 1 / -1; grid-row: 4; justify-self: stretch; padding-top: 12px; border-top: 1px solid var(--grid); }
/* the ballot card is a ranked list of bars: give it the whole width, key inline */
#c-bal { grid-template-columns: 1fr; }
#c-bal .legend {
  grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; gap: 6px 22px;
  margin: 0 0 4px; border-top: 0;
}
#c-bal .legend > span { width: auto; padding: 0; border-bottom: 0; }
#c-bal .chart { grid-column: 1; grid-row: 3; }
#c-bal button[data-table] { grid-column: 1; grid-row: 4; }
#c-bal > details.foot { grid-column: 1; grid-row: 4; justify-self: end; margin-top: 12px; }
#c-bal > details.foot[open] { grid-column: 1; grid-row: 5; }
/* ---------- Visual pass 6: consolidation ---------- */
/* contents strip: the page is long, so the top has to say where things are */
nav.toc {
  display: flex; flex-wrap: wrap; gap: 6px 4px;
  margin: 0 0 8px; padding: 14px 0 16px;
  border-bottom: 1px solid var(--rule);
}
nav.toc a {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 4px 11px 4px 8px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: var(--text-primary); text-decoration: none;
  border: 1px solid var(--border); background: var(--surface-1);
}
nav.toc a b {
  font-family: "Source Serif 4", Georgia, serif; font-size: 13px; font-weight: 700;
  color: var(--ink); min-width: 11px; text-align: center;
}
/* hovering a pill fills it, so the whole row feels like a control and not a list of links */
nav.toc a { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
nav.toc a:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
nav.toc a:hover b { color: var(--gold); }
nav.toc a:active { transform: translateY(1px); }
nav.toc a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { nav.toc a { transition: none; } }
:root[data-theme="dark"] nav.toc a b { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) nav.toc a b { color: var(--gold); } }
/* on a phone nine pills would stack into four rows and swallow the top of the page,
   so the strip becomes one row you swipe sideways */
@media (max-width: 760px) {
  nav.toc {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    margin-inline: -12px; padding: 12px 12px 14px;
  }
  nav.toc::-webkit-scrollbar { display: none; }
  nav.toc a { flex: 0 0 auto; scroll-snap-align: start; font-size: 12.5px; padding: 4px 10px 4px 8px; }
}

/* keyboard users can jump the contents strip */
.skip {
  position: absolute; left: 12px; top: -100px; z-index: 20;
  background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* jumping to a section should travel, not teleport */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* anchored section headings clear the top edge when jumped to */
.sec h2[id] { scroll-margin-top: 20px; }

/* department group: one header row, then a bar and three numbers per group.
   No track behind the bars — a full-width track made every row look the same length. */
#c-sp .multiples { display: block; }
.mhead, .mrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(80px, 1.5fr) 60px 60px 66px 56px 56px;
  column-gap: 14px; align-items: center;
}
.mhead {
  padding: 0 0 8px; border-bottom: 1px solid var(--axis);
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.mhead span:not(:first-child) { text-align: right; }
.mrow { padding: 10px 0; border-bottom: 1px solid var(--grid); font-variant-numeric: tabular-nums; }
.mrow.alt { background: rgba(128,128,128,0.06); }
.mrow:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }
.mrow h3 { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.mbar { height: 13px; }
.mbar > span { display: block; height: 100%; border-radius: 2px; background: var(--s1); }
.mnum { text-align: right; font-size: 13px; color: var(--text-secondary); }
.mchg { text-align: right; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.mline { grid-column: 1; font-size: 12.5px; color: var(--text-secondary); }
.multiples.narrow .mhead { display: none; }
.multiples.narrow .mrow { grid-template-columns: minmax(0, 1fr); row-gap: 5px; padding: 12px 0; }
.multiples.narrow .mrow h3 { font-size: 13px; }
.multiples.narrow .mbar { height: 10px; }

/* the one comparison a reader asks for after the growth chart */
.card p.why-sun {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rule);
  max-width: 78ch; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary);
}
.card p.why-sun b { color: var(--text-primary); font-weight: 700; }

/* ---------- November measures: the school-card treatment — a bar and a number per row ---------- */
.opts-head, .opt {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.45fr) minmax(56px, 1fr) 62px minmax(0, 1.1fr) minmax(0, 0.85fr);
  column-gap: 14px; align-items: center;
}
.opts-head {
  padding: 0 0 8px; border-bottom: 1px solid var(--axis);
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.opts-head .h-cost { grid-column: 3 / span 2; }
.opt { padding: 12px 0; border-bottom: 1px solid var(--grid); }
.opt:nth-child(even) { background: rgba(128,128,128,0.06); }
.opt-id { display: flex; align-items: baseline; gap: 9px; }
.opt-id b {
  font-family: "Source Serif 4", Georgia, serif; font-size: 20px; font-weight: 700;
  color: var(--text-primary); line-height: 1; min-width: 20px;
}
.opt-id span { font-size: 13px; font-weight: 600; line-height: 1.3; }
.opt-what { font-size: 13px; color: var(--text-secondary); line-height: 1.35; }
.opt-bar { height: 13px; }
.opt-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--s1); }
.opt-amt { text-align: right; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.opt-amt.none { font-weight: 500; color: var(--muted); }
.opt-gap { font-size: 12.5px; line-height: 1.3; color: var(--text-secondary); }
.opt-gap.yes { color: var(--text-primary); font-weight: 700; }
.opt-lasts { font-size: 12.5px; color: var(--muted); }
.opt-detail { margin-top: 14px; }
.opt-detail summary { font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; }
.opt-detail table { margin-top: 10px; }
@media (max-width: 860px) {
  .opts-head { display: none; }
  .opt { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding: 14px 0; }
  .opt-id { grid-column: 1; grid-row: 1; }
  .opt-amt { grid-column: 2; grid-row: 1; }
  .opt-what, .opt-bar, .opt-gap, .opt-lasts { grid-column: 1 / -1; }
  .opt-bar { height: 10px; }
  .opt-bar:empty { display: none; }
  /* with the header row gone, each value has to say what it is */
  .opt-gap::before, .opt-lasts::before {
    display: block; margin-bottom: 1px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  }
  .opt-gap::before { content: "Effect on the gap"; }
  .opt-lasts::before { content: "Lasts"; }
  .opt-gap { margin-top: 6px; }
  .opt-amt { align-self: start; text-align: right; }
  .opt-amt::before {
    display: block; margin-bottom: 1px;
    content: "Cost"; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  }
}

/* paired per-city charts share one row */
#c-gaps .card-head, #c-eb .card-head { align-items: flex-start; }
@media (min-width: 861px) {
  #c-gaps, #c-eb { align-self: stretch; }
  #c-gaps .chart > svg, #c-eb .chart > svg { width: 100%; }
}

/* stacked panels inside one chart, for phones */
.panel-block + .panel-block { margin-top: 16px; }
.panel-block > h3 {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 14px; font-weight: 600; margin: 0 0 4px;
}

/* ---------- Visual pass 5: the school "what the numbers show" summary ---------- */
section.card.tldr {
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  column-gap: 44px; align-items: start;
  padding: 30px 34px 26px;
}
section.card.tldr > h2 {
  grid-column: 1; font-size: 24px; font-weight: 700; line-height: 1.15;
  letter-spacing: -0.01em; margin: 0; text-wrap: balance;
}
section.card.tldr > h2::after { content: ""; display: block; width: 34px; height: 4px; background: var(--gold); margin-top: 14px; }
section.card.tldr > ol.summary {
  grid-column: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(3, auto); grid-auto-flow: column;
  column-gap: 44px; row-gap: 0;
}
section.card.tldr > ol.summary li { padding: 14px 0 14px 42px; border-top: 1px solid var(--grid); }
section.card.tldr > ol.summary li:nth-child(3n+1) { border-top: 0; padding-top: 0; }
section.card.tldr > ol.summary li:nth-child(3n+1)::before { top: 0; }
section.card.tldr > ol.summary li::before { top: 13px; }
@media (max-width: 1024px) {
  section.card.tldr { grid-template-columns: 1fr; row-gap: 16px; }
  section.card.tldr > h2 { grid-column: 1; }
  section.card.tldr > ol.summary { grid-column: 1; }
}
@media (max-width: 700px) {
  section.card.tldr { padding: 22px 20px 18px; }
  section.card.tldr > ol.summary { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  section.card.tldr > ol.summary li { border-top: 1px solid var(--grid); padding-top: 14px; }
  section.card.tldr > ol.summary li:first-child { border-top: 0; padding-top: 0; }
  section.card.tldr > ol.summary li::before, section.card.tldr > ol.summary li:nth-child(3n+1)::before { top: 13px; }
  section.card.tldr > ol.summary li:first-child::before { top: 0; }
}

/* ---------- Visual pass 4: Berkeley Unified School District ---------- */
#c-sch .mini { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 26px; margin-top: 14px; }
#c-sch .mini .full { grid-column: span 6; }
#c-sch .mini > div:not(.full) { grid-column: span 2; min-width: 0; }
#c-sch .mini h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-secondary); line-height: 1.35; margin: 0 0 8px;
  padding-bottom: 6px; border-bottom: 1px solid var(--grid);
}
#c-sch .mini .full h3 { font-size: 12.5px; }
#c-sch .mini .legend { margin: 0 0 6px; }
#c-sch .mini .note { font-size: 12.5px; }
@media (max-width: 1024px) {
  #c-sch .mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #c-sch .mini .full { grid-column: span 2; }
  #c-sch .mini > div:not(.full) { grid-column: span 1; }
}
@media (max-width: 860px) {
  #c-sch .mini { grid-template-columns: 1fr; }
  #c-sch .mini .full, #c-sch .mini > div:not(.full) { grid-column: span 1; }
}
@media (max-width: 860px) {
  article.card.solo { grid-template-columns: 1fr; }
  article.card.solo .chart,
  article.card.solo .legend,
  article.card.solo button[data-table],
  article.card.solo > details.foot { grid-column: 1; grid-row: auto; }
  article.card.solo .legend { flex-direction: row; gap: 6px 16px; border-top: 0; margin: 4px 0 8px; }
  article.card.solo .legend > span { width: auto; padding: 0; border-bottom: 0; }
}

/* performance scorecard: compact rows, target spelled out, quiet status text */
.kpis.three .tile { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 12px 16px; }
.kpis.three .tile .label { grid-column: 1 / -1; font-size: 13px; }
.kpis.three .tile .value { font-size: 26px; margin: 2px 0 0; }
.kpis.three .tile .delta { font-size: 12.5px; line-height: 1.4; }
.kpis.three .st { display: block; width: max-content; background: none; padding: 0; margin: 0 0 1px; font-size: 12.5px; font-weight: 600; }
.kpis.three .st.good { color: #127a35; } .kpis.three .st.bad { color: #b8322a; }
.kpis.three .tile.good { box-shadow: inset 4px 0 0 #2f9e57; } .kpis.three .tile.bad { box-shadow: inset 4px 0 0 #d1453b; }
/* if Measure V fails */
.ifv { border-left: 4px solid #d1453b; }
.ifv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 28px; margin-top: 14px; }
.ifv-item h3 { font-family: "Source Serif 4", Georgia, serif; font-size: 17px; font-weight: 600; margin: 0 0 2px; }
.ifv-meta { font-size: 12.5px; font-weight: 500; color: var(--muted); margin-bottom: 4px; }
.ifv-item p { margin: 0; font-size: 14px; color: var(--text-secondary); }
.ifv .ifv-src { margin-top: 14px; color: var(--muted); font-size: 12.5px; }
@media (max-width: 560px) { .ifv-grid { grid-template-columns: 1fr; } }

/* three headline boxes and the lead sentence */
.tiles { grid-template-columns: 1.3fr 1fr 1fr; }
/* the lead's measure ends on the gap before the third headline tile, so its right edge lands on a real grid line instead of cutting through a tile */
.lead { font-family: "Source Serif 4", Georgia, serif; font-size: 25px; line-height: 1.35; font-weight: 500; color: var(--text-primary); max-width: calc((100% - 28px) * 2.3 / 3.3 + 14px); margin: 4px 0 22px; text-wrap: pretty; }
@media (max-width: 860px) { .lead { max-width: none; } }
@media (max-width: 560px) { .lead { font-size: 20px; } }

/* ---------- Visual pass 8: the V-fails card ---------- */
.vf-block { margin-top: 20px; }
.vf-h {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--axis); padding-bottom: 7px; margin-bottom: 8px;
}
.vf-row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.75fr) 76px;
  column-gap: 16px; align-items: center; padding: 6px 0;
}
.vf-lbl { grid-column: 1; grid-row: 1; font-size: 13px; line-height: 1.3; color: var(--text-secondary); }
.vf-lbl.is-strong { color: var(--text-primary); font-weight: 600; }
.vf-lbl b { display: block; font-weight: 600; color: var(--text-primary); }
.vf-lbl span { display: block; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.vf-track { grid-column: 2; grid-row: 1; position: relative; height: 15px; }
.vf-bar { position: absolute; top: 0; bottom: 0; display: block; border-radius: 2px; }
.vf-bar.is-surplus { left: 90.9%; background: var(--s1); }
.vf-bar.is-gap { right: 9.1%; background: var(--neg); }
.vf-bar.is-cut { left: 0; background: var(--s1); }
.vf-zero { position: absolute; left: 90.9%; top: -3px; bottom: -3px; width: 1px; background: var(--axis); }
.vf-val { grid-column: 3; grid-row: 1; text-align: right; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vf-val.is-surplus { color: var(--s1); }
.vf-val.is-gap { color: var(--neg); }
.vf-axisrow { padding: 0; }
.vf-axis {
  grid-column: 2; position: relative; display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.vf-zero-lbl { position: absolute; left: 90.9%; transform: translateX(-50%); }
.vf-total { border-top: 1px solid var(--grid); margin-top: 4px; padding-top: 9px; }
.vf-foot { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }
/* the outcome card sits beside the measure chart, so its two bars carry the whole card */
/* without this the flex lines stretch and the bars drift down the card */
#c-vfout { align-content: flex-start; }
.vf-out { margin-top: 14px; }
.vf-out .vf-row { padding: 22px 0; }
.vf-out .vf-track { height: 28px; }
.vf-out .vf-zero { top: -6px; bottom: -6px; }
.vf-out .vf-axisrow { padding: 2px 0 0; }
.vf-out .vf-foot { margin-top: 12px; font-size: 12.5px; }
details.opt-detail { margin-top: 14px; }
details.opt-detail > summary {
  cursor: pointer; width: max-content; font-size: 13px; font-weight: 500; color: var(--text-secondary);
  list-style: none;
}
details.opt-detail > summary::-webkit-details-marker { display: none; }
details.opt-detail > summary::before { content: "\25B8"; display: inline-block; margin-right: 7px; color: var(--gold); }
details.opt-detail[open] > summary::before { content: "\25BE"; }
details.opt-detail > summary:hover { color: var(--text-primary); }
details.opt-detail[open] > summary { margin-bottom: 4px; }
.vf-link { margin: 14px 0 0; font-size: 13px; }
.vf-link a {
  color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.vf-link a:hover { text-decoration-color: var(--text-primary); }
.vf-src { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 700px) {
  .vf-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding: 9px 0; }
  .vf-lbl { grid-column: 1; grid-row: 1; }
  .vf-val { grid-column: 2; grid-row: 1; align-self: start; }
  .vf-track { grid-column: 1 / -1; grid-row: 2; }
  /* keep the scale on a phone: without it the small surplus bar is just a stub at the edge */
  .vf-axisrow { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 2px; }
  .vf-axisrow > span { display: none; }
  .vf-axis { grid-column: 1; }
}

/* ---------- Visual pass 7: sections 8 to 10 ---------- */
/* NOTE: this card shares a row with a taller one, so its chart sits at the top with
   slack beneath. Do NOT make the card a flex column to centre it: the chart host's
   width collapses and the SVG's labels render off the edge of the card. Left alone
   deliberately — cosmetic slack beats a broken chart. */

/* six dots do not need 700px of height: cap the scatter, and keep it on the
   same left edge as the heading and the legend rather than floating in the middle */
#c-busd-value .chart > svg { max-width: 720px; }

/* Berkeley Unified thread: sub-section heads and the "why" card */
.sec.minor { border-top: 0; margin: 22px 0 0; padding-top: 0; }
.sec.minor h2 { font-size: 21px; }
.sec.minor p { font-size: 14.5px; }
#c-busd-why ul.plain { font-size: 14px; margin: 0; max-width: 82ch; }
#c-busd-why ul.plain li { margin: 0 0 8px; }
/* the chart answers the third point, so it gets its own row and says which point it is */
.why-chart { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.why-chart h3 { font-size: 13.5px; font-weight: 600; margin: 0 0 2px; }
.why-chart-sub { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); margin: 0 0 8px; max-width: 76ch; }

table.opts td, table.opts th { text-align: left; vertical-align: top; padding: 9px 10px; }
table.opts td:first-child { font-weight: 600; color: var(--text-primary); min-width: 200px; }
table.opts td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.opts td:last-child { color: var(--text-secondary); min-width: 260px; }
.opts-note { margin-top: 10px; }
.optswrap { overflow-x: auto; }
@media (max-width: 560px) {
  table.opts, table.opts tbody, table.opts tr, table.opts td { display: block; width: 100%; }
  table.opts tr:first-child { display: none; }
  table.opts tr { padding: 10px 0; border-top: 1px solid var(--grid); }
  table.opts td { padding: 2px 0; border: 0; min-width: 0; white-space: normal; }
  table.opts td:nth-child(2)::before { content: "Per year: "; color: var(--muted); font-weight: 500; }
  table.opts td:nth-child(3)::before { content: "Type: "; color: var(--muted); font-weight: 500; }
  table.opts td:nth-child(4)::before { content: "Status: "; color: var(--muted); font-weight: 500; }
}

.measures-h { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); margin: 16px 0 4px; flex-basis: 100%; }
table.measures td, table.measures th { text-align: left; vertical-align: top; padding: 7px 10px; }
table.measures td:first-child { font-weight: 600; color: var(--text-primary); }
table.measures td:last-child, table.measures th:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  table.measures, table.measures tbody, table.measures tr, table.measures td { display: block; width: 100%; }
  table.measures tr:first-child { display: none; }
  table.measures tr { padding: 8px 0; border-top: 1px solid var(--grid); }
  table.measures td { padding: 1px 0; border: 0; text-align: left !important; white-space: normal !important; }
  table.measures td:nth-child(2)::before { content: "Type: "; color: var(--muted); }
  table.measures td:nth-child(4)::before { content: "Per year: "; color: var(--muted); }
}

#c-voter .tablewrap td, #c-voter .tablewrap th { text-align: left; }
#c-voter .tablewrap td:last-child, #c-voter .tablewrap th:last-child { text-align: right; white-space: nowrap; }

table.ballot td, table.ballot th { text-align: left; vertical-align: top; padding: 9px 10px; }
table.ballot td:first-child { font-weight: 600; color: var(--text-primary); min-width: 150px; }
table.ballot td:nth-child(2) { color: var(--text-secondary); min-width: 280px; }
@media (max-width: 560px) {
  table.ballot, table.ballot tbody, table.ballot tr, table.ballot td { display: block; width: 100%; }
  table.ballot tr:first-child { display: none; }
  table.ballot tr { padding: 10px 0; border-top: 1px solid var(--grid); }
  table.ballot td { padding: 2px 0; border: 0; min-width: 0; }
  table.ballot td:nth-child(3)::before { content: "Typical home: "; color: var(--muted); font-weight: 500; }
  table.ballot td:nth-child(4)::before { content: "Effect on gap: "; color: var(--muted); font-weight: 500; }
  table.ballot td:nth-child(5)::before { content: "Lasts: "; color: var(--muted); font-weight: 500; }
}

.kpis.three.plain .tile { box-shadow: none; }
#c-pcalls .kpis { margin-bottom: 14px; }
.pcalls-money { margin-top: 12px; font-size: 14px; color: var(--text-secondary); }
#c-pcalls .tablewrap td, #c-pcalls .tablewrap th { text-align: left; }

#perf-resp > svg { max-width: 600px; }
#c-perf .note + .note { margin-top: 8px; }

/* ---------- Round 6: same gauge cards everywhere ---------- */
.g-bar .band { position: absolute; top: 12px; height: 3px; border-radius: 2px; background: var(--text-secondary); opacity: .6; }
.g-bar:has(.band) + .g-meta { margin-top: 18px; }
.g-key .k-band { width: 18px; height: 3px; border-radius: 2px; background: var(--text-secondary); opacity: .6; margin-left: 10px; }
#c-city-mgmt .score, #c-busd-mgmt .score, #c-busd-results .score { width: 100%; }
#c-busd-opts .opts-note { margin-top: 8px; }

/* ---------- Round 7: general government growth ---------- */
#c-gg .gg-two { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px 40px; margin-top: 4px; }
#c-gg .gg-sub { margin: 0 0 4px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 860px) { #c-gg .gg-two { grid-template-columns: 1fr; } }

/* ---------- Round 12: scorecard bars are two labeled bars from zero ---------- */
.g-pair { display: grid; gap: 5px; margin: 2px 0 2px; }
.g-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 64px; align-items: center; gap: 8px; font-size: 12.5px; }
.g-who { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-track { position: relative; height: 8px; border-radius: 4px; background: var(--grid); }
.g-track .fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--c); }
.g-row.cmp .g-track .fill { background: var(--axis); }
.g-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.g-row.cmp .g-num { font-weight: 500; color: var(--text-secondary); }
.g-pair + .g-meta { justify-content: flex-start; margin-top: 8px; }
.g-pair + .g-meta > .g-st { color: var(--c); }
.g-key { margin-top: -4px; }
/* ---------- Round 12: choice tables (police and fire trade-offs, lasting options) ---------- */
.choices { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 6px; }
.choices th, .choices td, .choices .amt b { text-align: left; }
.choices th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 0 12px 8px 0; border-bottom: 1px solid var(--axis); }
.choices td { vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--grid); line-height: 1.45; color: var(--text-secondary); }
.choices td:first-child { color: var(--text-primary); font-weight: 600; width: 22%; }
.choices td.amt { width: 17%; }
.choices .amt b { display: block; color: var(--text-primary); font-variant-numeric: tabular-nums; margin-bottom: 5px; }
.choices .bar { display: block; position: relative; height: 8px; border-radius: 4px; background: var(--grid); }
.choices .bar span { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--s1); }
.choices .bar span.range { opacity: .45; }
.choices .bar span.none { background: none; border: 1.5px dashed var(--axis); top: -1px; bottom: -1px; }
.choices .src { font-size: 12px; color: var(--muted); }
@media (max-width: 760px) {
  .choices thead { display: none; }
  .choices, .choices tbody, .choices tr, .choices td { display: block; width: auto !important; }
  .choices tr { padding: 12px 0; border-bottom: 1px solid var(--grid); }
  .choices td { border: 0; padding: 3px 0; }
  .choices td[data-h]::before { content: attr(data-h) ": "; font-weight: 600; color: var(--text-primary); }
}

/* ---------- Round 13: compact scorecard rows ---------- */
.score.compact { gap: 16px; }
.score.compact .score-h { margin-bottom: 2px; }
.srows { border-top: 1px solid var(--axis); }
.srow { display: grid; grid-template-columns: minmax(0, 1fr) 150px 170px 130px; gap: 6px 18px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--grid); }
.s-label { font-size: 14px; color: var(--text-primary); line-height: 1.35; }
.s-note { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.s-bars { display: grid; gap: 3px; }
.s-bars .g-track { height: 6px; border-radius: 3px; }
.s-bars .g-track.cmp .fill { background: var(--axis); }
.s-nums { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; line-height: 1.3; }
.s-nums b { display: block; font-size: 15px; color: var(--text-primary); }
.s-st { font-size: 13px; font-weight: 700; color: var(--c); text-align: right; }
@media (max-width: 760px) {
  .srow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "bars st" "nums st"; }
  .s-label { grid-area: label; } .s-bars { grid-area: bars; } .s-nums { grid-area: nums; } .s-st { grid-area: st; align-self: start; }
}

/* ---------- Round 14: City / Schools switcher ---------- */
.view { display: contents; }
.view[hidden], .city-only[hidden] { display: none !important; }
nav.views { display: flex; gap: 0; margin: 18px 0 14px; border-bottom: 2px solid var(--grid); }
nav.views a { padding: 10px 18px 9px; margin-bottom: -2px; border-bottom: 3px solid transparent; font-size: 15px; font-weight: 600; color: var(--text-secondary); text-decoration: none; }
nav.views a.on { color: var(--text-primary); border-bottom-color: var(--gold, #fdb515); }
nav.views a:hover { color: var(--text-primary); }
@media (max-width: 760px) { nav.views a { padding: 9px 12px 8px; font-size: 14px; } }

.choices.pf-why td:first-child { width: 24%; }
.score-group.pf { --c: var(--s1); }
.score.pfwhy { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 36px; }
.score.pfwhy .g-key { grid-column: 1 / -1; }
@media (min-width: 761px) { .score.pfwhy .srow { grid-template-columns: minmax(0, 1fr) 110px 128px 84px; gap: 4px 12px; } }
@media (max-width: 1000px) { .score.pfwhy { grid-template-columns: 1fr; } }
.choices.pf-why td { color: var(--text-primary); }
.choices.pf-why td:first-child { color: var(--text-secondary); font-weight: 600; }

.choices.att td:first-child { width: 22%; }
.choices.att td:nth-child(2) { width: 16%; color: var(--text-primary); }

/* ---------- Round 19: school bar list ---------- */
.barlist { display: grid; gap: 0; margin-top: 6px; }
.bl-h { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 12px 0 4px; border-bottom: 1px solid var(--axis); }
.bl-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px 120px 150px; gap: 4px 16px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--grid); }
.bl-name { font-size: 14px; color: var(--text-primary); }
.bl-name span { display: block; font-size: 12px; color: var(--muted); }
.bl-bar { position: relative; height: 8px; border-radius: 4px; background: var(--grid); }
.bl-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--s1); }
.bl-bar.off span { border-radius: 4px 0 0 4px; background: repeating-linear-gradient(90deg, var(--s1) 0 92%, transparent 92% 94%, var(--s1) 94%); }
.bl-val { font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.bl-val b { display: block; font-size: 14.5px; color: var(--text-primary); }
.bl-care { font-size: 12.5px; color: var(--text-secondary); }
.bl-care.none { color: var(--s2, #b07d00); font-weight: 600; }
@media (max-width: 760px) {
  .bl-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bar bar" "care care"; }
  .bl-name { grid-area: name; } .bl-val { grid-area: val; text-align: right; } .bl-bar { grid-area: bar; } .bl-care { grid-area: care; }
}

.choices tr.grp td { padding-top: 16px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---------- Round 28: planning-horizon steps in a table cell ---------- */
.hz { display: grid; gap: 4px; margin: 2px 0 10px; }
.hz-row { display: grid; grid-template-columns: 44px 120px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12.5px; }
.hz-yrs { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.hz-bar { position: relative; height: 8px; border-radius: 4px; background: var(--grid); }
.hz-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--axis); }
.hz-row.is-b .hz-bar i { background: var(--s1); }
.hz-names { color: var(--text-secondary); line-height: 1.3; }
.hz-names b { color: var(--text-primary); }
.hz-tag { font-style: normal; font-size: 11px; font-weight: 600; color: var(--text-primary); border: 1px solid var(--axis); border-radius: 3px; padding: 0 4px; margin-left: 4px; white-space: nowrap; }
@media (max-width: 760px) { .choices td[data-h] .hz { margin-top: 6px; } }

/* ---------- Round 32: two levers ---------- */
.levers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; margin-top: 6px; }
.lever h3 { margin: 0 0 2px; font-size: 15px; color: var(--text-primary); }
.lever .lv-num { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.lever .lv-num b { font-size: 20px; color: var(--s1); font-variant-numeric: tabular-nums; margin-right: 4px; }
.lever ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
.lever li b { color: var(--text-primary); }
@media (max-width: 760px) { .levers { grid-template-columns: 1fr; } }

/* ---------- Round 34: schools options subsections ---------- */
.sec.minor.sub { margin: 14px 0 0; }
.sec.minor.sub h2 { font-size: 18px; }
.sec.minor.sub p { font-size: 14px; }
.srows.adm { --c: var(--s1); }
.srows.adm .srow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "bars st" "nums st"; }
.srows.adm .s-label { grid-area: label; } .srows.adm .s-bars { grid-area: bars; } .srows.adm .s-nums { grid-area: nums; } .srows.adm .s-st { grid-area: st; align-self: start; }
.adm-list { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
.adm-list b { color: var(--text-primary); }
.levers.three { grid-template-columns: repeat(3, 1fr); }
#sch-admin svg { max-width: 380px; }
@media (max-width: 900px) { .levers.three { grid-template-columns: 1fr; } }

/* ---------- Phone and tablet layout ---------- */
.st { white-space: nowrap; display: inline-block; margin: 0 6px 4px 0; }
.kpis .tile { border-top: 1px solid var(--border); }
@media (max-width: 860px) {
  .kpis.three { grid-template-columns: 1fr 1fr; }
  .tile.hero { grid-column: span 2; }
  /* at phone width the photo was holding 320px of empty sky under the subhead before the Sources button */
  header { min-height: 0; padding: 32px calc(50vw - 50%) 30px; margin-inline: calc(-1 * (50vw - 50%)); gap: 18px; }
}
@media (max-width: 560px) {
  .viz-root { padding: 0 12px 48px; }
  .tiles, .kpis, .kpis.two, .kpis.three { grid-template-columns: 1fr; }
  .tile.hero { grid-column: auto; }
  .card { padding: 16px 14px 12px; }
  .card-head { flex-direction: column; }
  .sec h2, .sources h2 { font-size: 24px; }
  header { margin: 0 -12px 22px; border-radius: 0; }
  .credit { left: 22px; right: auto; }
}

/* ---------- Visual pass 1: masthead, headline numbers, summary ---------- */
header { min-height: 440px; padding-bottom: 48px; }
header .eyebrow { display: inline-block; margin: 0 0 16px; padding: 4px 10px; border-radius: 3px; background: var(--gold); color: #13294b; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
header h1 { font-size: clamp(36px, 5.6vw, 64px); line-height: 1.02; letter-spacing: -0.02em; max-width: 14ch; text-wrap: balance; margin-bottom: 14px; }
header .sub { font-size: 18.5px; line-height: 1.45; max-width: 44ch; text-wrap: pretty; }

.tiles { align-items: stretch; gap: 14px; }
.tile { display: flex; flex-direction: column; padding: 18px 20px 16px; }
.tile .label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; color: var(--muted); }
.tile .value { font-size: 38px; line-height: 1.05; margin: 12px 0 14px; }
.tile .delta { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--grid); font-size: 13px; line-height: 1.45; }
.tile.hero { padding: 20px 24px 18px; }
.tile.hero .label { color: rgba(255,255,255,0.72); }
.tile.hero .value { font-size: 72px; letter-spacing: -0.02em; margin: auto 0 14px; }
.tile.hero .delta { margin-top: 0; border-top-color: rgba(255,255,255,0.18); }

section.card[aria-label="The short version"] { border-left: 1px solid var(--border); padding: 30px 34px 24px; display: grid; grid-template-columns: 200px 1fr; column-gap: 40px; }
section.card[aria-label="The short version"] > h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; margin: 0; line-height: 1.1; }
section.card[aria-label="The short version"] > h2::after { content: ""; display: block; width: 40px; height: 4px; background: var(--gold); margin-top: 14px; }
ol.summary { list-style: none; padding: 0; margin: 0; counter-reset: s; font-size: 16px; line-height: 1.5; }
ol.summary li { counter-increment: s; position: relative; margin: 0; padding: 13px 0 13px 44px; border-top: 1px solid var(--grid); }
ol.summary li:first-child { border-top: 0; padding-top: 0; }
ol.summary li::before { content: counter(s); position: absolute; left: 0; top: 11px; width: 28px; height: 28px; border-radius: 50%; background: #13294b; color: var(--gold); font: 700 14px/28px "Source Serif 4", Georgia, serif; text-align: center; }
ol.summary li:first-child::before { top: -2px; }
ol.summary b { color: #13294b; }
.tile .value { white-space: nowrap; }
.tile .value .to { color: var(--gold); font-weight: 600; padding: 0 2px; }
details.howto { grid-column: 2; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--grid); }
@media (max-width: 860px) {
  section.card[aria-label="The short version"] { grid-template-columns: 1fr; padding: 22px 20px 18px; }
  section.card[aria-label="The short version"] > h2 { margin-bottom: 16px; }
  details.howto { grid-column: 1; }
  .tile.hero .value { font-size: 54px; }
}

/* ---------- Rent Board: fee-funded ledger ---------- */
.view[data-view="rentboard"] > .sec:first-child { margin: 10px 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--grid); }
.view[data-view="rentboard"] > .sec:first-child h2 { font-size: clamp(32px, 4vw, 44px); line-height: 1.04; letter-spacing: -.025em; }
.view[data-view="rentboard"] > .sec:first-child p { max-width: 66ch; margin-top: 9px; font-size: 16px; line-height: 1.5; color: var(--text-secondary); }
.view[data-view="rentboard"] > .tldr { border-top: 3px solid var(--gold); padding: 22px 24px 18px; }
.view[data-view="rentboard"] > .tldr > h2 { margin: 0 0 10px; font-family: "Source Serif 4", Georgia, serif; font-size: 22px; line-height: 1.2; color: var(--text-primary); }
.view[data-view="rentboard"] > .tldr ol.summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; row-gap: 0; font-size: 14px; line-height: 1.48; counter-reset: none; }
.view[data-view="rentboard"] > .tldr ol.summary li,
.view[data-view="rentboard"] > .tldr ol.summary li:first-child { counter-increment: none; padding: 12px 0; border-top: 1px solid var(--grid); }
.view[data-view="rentboard"] > .tldr ol.summary li::before { content: none; }
.view[data-view="rentboard"] > .tldr ol.summary b { display: block; margin: 0 0 3px; color: var(--text-primary); font-weight: 700; }
.view[data-view="rentboard"] .sec.minor { margin: 24px 0 6px; padding-top: 13px; border-top: 1px solid var(--grid); }
.view[data-view="rentboard"] .sec.minor h2 { font-size: 18px; letter-spacing: .01em; }
.view[data-view="rentboard"] .card:not(.tldr) { border-radius: 6px; }
.view[data-view="rentboard"] .card-head h2 { font-size: 17px; letter-spacing: -.01em; }
.view[data-view="rentboard"] .card-head p.note { max-width: 76ch; line-height: 1.48; }
.view[data-view="rentboard"] .mini { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 18px 30px; margin-top: 16px; }
.view[data-view="rentboard"] .mini > div { min-width: 0; padding-top: 11px; border-top: 1px solid var(--grid); }
.view[data-view="rentboard"] .mini h3 { margin-bottom: 8px; font-size: 12px; letter-spacing: .035em; color: var(--text-secondary); }
.view[data-view="rentboard"] .mini .chart { min-width: 0; }
.view[data-view="rentboard"] .chart svg { display: block; max-width: 100%; }
@media (max-width: 860px) {
  .view[data-view="rentboard"] > .tldr ol.summary { grid-template-columns: 1fr; }
  .view[data-view="rentboard"] .mini { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 560px) {
  .view[data-view="rentboard"] > .sec:first-child { margin-top: 4px; padding-bottom: 12px; }
  .view[data-view="rentboard"] > .sec:first-child h2 { font-size: 32px; }
  .view[data-view="rentboard"] > .sec:first-child p { font-size: 14.5px; }
  .view[data-view="rentboard"] > .tldr { padding: 17px 15px 13px; }
  .view[data-view="rentboard"] > .tldr > h2 { font-size: 20px; }
  .view[data-view="rentboard"] > .tldr ol.summary { font-size: 13.5px; }
  .view[data-view="rentboard"] > .tldr ol.summary li,
  .view[data-view="rentboard"] > .tldr ol.summary li:first-child { padding: 11px 0; }
}