/* The Annual Budget page (Follow the Money). Nov 4, 2026 (owner's visual brief): the circle leads, a quieter panel beside
   it, a categorical palette that tells the printed groupings apart. Brand tokens come from funding.css; the category
   families below are the one addition, used only to tell groups apart (never good or bad). Red stays the In focus mark,
   the focus ring and the hover of the primary action.
   Nov 6, 2026 (owner's Warm Editorial clarification): the navy and blue-gray family tried earlier today is withdrawn;
   the warm families return as on main. The ground, panel and small text read the Warm Editorial tokens from system.css. */
:root {
  --cat-teal: 186 34%; --cat-sage: 96 22%; --cat-ochre: 38 48%; --cat-slate: 212 30%; --cat-terra: 16 44%;
  --cat-plum: 318 22%; --cat-moss: 68 26%; --cat-sand: 30 24%;
}
main.ff.bm { max-width: 1340px; padding-top: 8px; }

/* The heading row: eyebrow and headline left, the government control and its year right. About 110px tall on a desktop. */
.bm-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s1) var(--s3); margin: 0 0 6px; }
.bm-top-text { min-width: 0; }
.bm-top .eyebrow { margin: 0 0 4px; }
/* Round 3 (Nov 4, 2026): the total is the hero number and the headline steps back, so the scale reads first. */
body.ff-page main.ff.bm h1 { margin: 0; font-size: 28px !important; }
.bm-top-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; }
.bm-gov { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0; }
.bm-gov button { font: inherit; font-size: 16px; min-height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--ink); background: var(--white); color: var(--ink); cursor: pointer; }
.bm-gov button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.bm-gov button:hover { background: var(--hover); color: var(--ink); }
.bm-gov button[aria-pressed="true"]:hover { background: var(--ink); color: var(--white); }
.bm-meta { margin: 0; font-size: 13px; color: var(--slate); }

/* Two columns: the circle takes about two thirds, the panel one third; the list and table sit under the circle. */
.bm-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); grid-template-areas: "map panel" "list panel"; gap: var(--s2) var(--s3); align-items: start; }
.bm-mapwrap { grid-area: map; min-width: 0; }
.bm-panel { grid-area: panel; }
.bm-listwrap { grid-area: list; min-width: 0; }

.bm-total-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; line-height: 1.15; }
.bm-total-amt { font-family: Georgia, "Times New Roman", serif; font-size: 42px; font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.bm-total-what { font-size: 16px; color: var(--body); }
.bm-crumbs ol { list-style: none; margin: 4px 0 var(--s1); padding: 0; display: flex; flex-wrap: wrap; gap: 4px var(--s1); font-size: 16px; }
.bm-crumbs li + li::before { content: "›"; color: var(--slate); margin-right: var(--s1); }
.bm-crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.bm-crumb { font: inherit; font-size: 16px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--link); text-decoration: underline; cursor: pointer; }
.bm-map { position: relative; width: 100%; background: transparent; }
.bm-state { margin: 0; padding: var(--s2); color: var(--body); font-size: 16px; line-height: 1.6; background: var(--soft); border-radius: 8px; }
.bm-state[hidden] { display: none; }
.bm-reload { font: inherit; font-size: 16px; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--ink); background: var(--white); color: var(--ink); cursor: pointer; margin-left: var(--s1); }
.bm-caption { margin: 4px 0 0; font-size: 13px; color: var(--slate); line-height: 1.45; max-width: 96ch; }
.bm-caption strong { color: var(--body); font-weight: 600; }
.bm-keys { margin: 4px 0 0; font-size: 13px; color: var(--slate); }
.bm-keys summary { cursor: pointer; color: var(--link); min-height: 32px; display: inline-flex; align-items: center; }
.bm-keys p { margin: 4px 0 0; max-width: 80ch; line-height: 1.5; }
.bm-keys kbd { font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; background: var(--white); }

/* The circle. Each cell is filled in its group's family, darker for the larger lines; boundaries are fine Paper lines so
   small cells stay visible; the chosen cell takes an Ink border; the group of smaller lines is lighter with a dashed edge;
   red is only the In focus mark and border. The rim arcs carry the group's color and its label sits outside. */
.bm-disc { display: block; width: 100%; height: auto; font-family: inherit; }
.bm-rim { fill: none; stroke: var(--paper); stroke-width: 1.5; pointer-events: none; }
.bm-cell { cursor: pointer; outline: none; }
/* The keyboard focus ring is the cell's own red edge; the page-wide box outline would draw the group's bounding box
   past the circle. */
.bm-disc .bm-cell:focus, .bm-disc .bm-cell:focus-visible, .bm-disc .bm-band:focus, .bm-disc .bm-band:focus-visible { outline: none !important; box-shadow: none; }
.bm-cell path { fill: hsl(var(--cat) var(--l)); stroke: var(--paper); stroke-width: 1; stroke-linejoin: round; }
.bm-cell:hover path { fill: hsl(var(--cat) calc(var(--l) - 8%)); }
.bm-cell:focus-visible path { stroke: var(--red); stroke-width: 3; }
.bm-cell[aria-pressed="true"] path { stroke: var(--ink); stroke-width: 2.5; }
.bm-cell.bm-group path { fill: hsl(var(--cat) 90%); stroke: var(--slate); stroke-dasharray: 4 3; }
.bm-cell.bm-group:hover path { fill: hsl(var(--cat) 84%); }
.bm-cell.bm-infocus path { stroke: var(--red); stroke-width: 1.75; }
.bm-cell.bm-infocus[aria-pressed="true"] path { stroke: var(--red); stroke-width: 2.75; }
.bm-cell-text { pointer-events: none; }
.bm-cell-name { fill: var(--ink); font-weight: 600; }
/* The largest cells carry their name in the brand serif, like the headline. Purpose sentences stay in the panel. */
.bm-cell-name.bm-big { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.01em; }
.bm-group .bm-cell-name { fill: var(--body); font-weight: 400; }
.bm-cell-amt { fill: var(--ink); font-weight: 400; }
.bm-cell-share { fill: var(--body); }
.bm-disc .bm-mark { fill: var(--red); font-weight: 600; }
.bm-band { fill: hsl(var(--cat) 46%); stroke: var(--paper); stroke-width: 2; cursor: pointer; outline: none; }
.bm-band:hover { fill: hsl(var(--cat) 36%); }
.bm-band:focus-visible { stroke: var(--red); stroke-width: 3; }
/* Rim labels in small tracked capitals in the group's own color, the amount beside them in plain figures. */
.bm-band-label { font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; fill: hsl(var(--cat) 32%); font-weight: 700; pointer-events: none; }
.bm-band-amt { fill: var(--slate); font-weight: 500; font-size: 13px; letter-spacing: 0; text-transform: none; }
.bm-bands-list { list-style: none; margin: 0 0 var(--s2); padding: 0; display: flex; flex-wrap: wrap; gap: 4px var(--s1); }
.bm-listwrap .bm-bands-list { margin: var(--s1) 0 0; }
/* In the panel the legend is two columns of compact rows, so eight County groups take four rows. */
.bm-panel .bm-bands-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; }
.bm-panel .bm-band-btn { width: 100%; display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: start; gap: 8px; padding: 6px 8px 6px 6px; line-height: 1.25; border-radius: 8px; text-align: left; }
.bm-panel .bm-band-btn .bm-band-sw { margin-top: 3px; }
.bm-panel .bm-band-btn .ff-meta { white-space: nowrap; }
.bm-band-btn { font: inherit; font-size: 13px; min-height: 44px; padding: 0 10px 0 6px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.bm-band-btn:hover { background: var(--hover); }
.bm-band-sw { width: 14px; height: 10px; border-radius: 3px; background: hsl(var(--cat) 46%); display: inline-block; }
.bm-mark-text { font-size: 13px; color: var(--red); font-weight: 600; }
.bm-zero { margin: var(--s1) 0 0; font-size: 13px; color: var(--slate); }
.bm-tbl-band th { background: var(--soft); }
.bm-tbl-in { padding-left: 24px !important; }

.bm-table { margin: var(--s1) 0 0; }
.bm-table summary { cursor: pointer; color: var(--link); font-size: 16px; min-height: 44px; display: flex; align-items: center; }
.bm-tbl { border-collapse: collapse; width: 100%; background: var(--white); font-size: 16px; margin: var(--s1) 0 0; }
.bm-tbl caption { text-align: left; color: var(--slate); font-size: 13px; padding: 0 0 4px; }
.bm-tbl th, .bm-tbl td { border-top: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.bm-tbl thead th { font-size: 13px; color: var(--slate); font-weight: 600; border-top: 0; }
.bm-tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bm-tbl-link { font: inherit; font-size: 16px; border: 0; background: none; color: var(--link); text-decoration: underline; cursor: pointer; padding: 0; text-align: left; min-height: 28px; }

/* The panel: calm before a selection, then the chosen category in reading order (what, who, a question, the source),
   with the exact figures and accounting notes behind a disclosure. */
.bm-panel { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: var(--s2); position: sticky; top: var(--s1); }
.bm-panel-h { font-size: 22px; font-weight: 600; color: var(--ink); margin: 0 0 6px; line-height: 1.25; }
.bm-panel-lede { margin: 0 0 var(--s2); font-size: 16px; line-height: 1.5; color: var(--body); }
.bm-top5 { list-style: none; margin: 0 0 var(--s2); padding: 0; }
.bm-top5 li { margin: 0; }
.bm-top5 button { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 4px; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; font-size: 16px; color: var(--ink); text-align: left; cursor: pointer; }
.bm-top5 li:last-child button { border-bottom: 1px solid var(--line); }
.bm-top5 button:hover { background: var(--hover); }
.bm-top5 button[aria-pressed="true"] { background: var(--soft); }
.bm-top5 .bm-sw { width: 14px; height: 14px; border-radius: 3px; background: hsl(var(--cat) var(--l)); }
.bm-top5 .ff-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bm-top5 .bm-top5-share { font-size: 13px; color: var(--slate); margin-left: 6px; }
.bm-acct { margin: var(--s1) 0 0; font-size: 13px; color: var(--slate); }
.bm-acct summary { cursor: pointer; color: var(--link); font-size: 16px; min-height: 44px; display: flex; align-items: center; }
.bm-acct p { margin: 6px 0; line-height: 1.5; }
.bm-acct .ff-num { color: var(--ink); }
.bm-where { margin: 0 0 4px; font-size: 13px; color: var(--slate); line-height: 1.5; }
.bm-where button { font: inherit; font-size: 13px; border: 0; background: none; color: var(--link); text-decoration: underline; cursor: pointer; padding: 0; }
.bm-kind { margin: 0 0 4px; }
.bm-panel-title { font-size: 22px; font-weight: 600; color: var(--ink); margin: 0 0 6px; line-height: 1.25; display: flex; align-items: center; gap: 10px; }
.bm-panel-title .bm-sw { width: 16px; height: 16px; border-radius: 4px; flex: none; background: hsl(var(--cat) var(--l)); }
.bm-panel-amt { font-size: 28px; font-weight: 600; color: var(--ink); margin: 0 0 2px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.bm-share { margin: 0 0 var(--s2); }
.bm-bar { display: block; height: 8px; background: var(--soft); border-radius: 4px; overflow: hidden; margin: 0 0 4px; }
.bm-bar span { display: block; height: 100%; background: var(--ink); }
.bm-what { margin: 0 0 var(--s1); font-size: 16px; line-height: 1.5; }
.bm-what .ff-meta { display: block; margin-top: 4px; }
.bm-what-none { color: var(--slate, #53636a); }
.bm-what strong { font-weight: 600; }
.bm-who p { margin: 0 0 6px; font-size: 16px; line-height: 1.5; }
.bm-focus { margin: var(--s1) 0 var(--s2); }
.bm-focus-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 22px; background: var(--ink); color: var(--white) !important; text-decoration: none; font-weight: 600; }
.bm-focus-link:hover { background: var(--red); }
.bm-focus-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bm-locate { font: inherit; font-size: 16px; font-weight: 600; min-height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--ink); background: var(--white); color: var(--ink); cursor: pointer; }
.bm-locate:hover { background: var(--hover); }
.bm-focus-actions { display: flex; flex-wrap: wrap; gap: var(--s1) 12px; align-items: center; margin: var(--s1) 0; }
.bm-mix, .bm-members { list-style: none; margin: 0 0 var(--s1); padding: 0; }
.bm-mix li, .bm-members li { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; border-top: 1px solid var(--line); padding: 6px 0; font-size: 16px; }
.bm-members li { justify-content: flex-start; }
.bm-stages { margin: 0 0 var(--s1); }
.bm-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 4px 12px; border-top: 1px solid var(--line); padding: 6px 0; }
.bm-stage dt { font-size: 16px; color: var(--ink); margin: 0; }
.bm-stage dd { margin: 0; font-size: 16px; }
.bm-stage-off dt { color: var(--slate); }
.bm-na { color: var(--slate); }
.bm-q { margin: 0 0 var(--s1); }
.bm-q-row { margin: 0 0 var(--s1); display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; }
.bm-copy { font: inherit; font-size: 16px; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--ink); background: var(--white); color: var(--ink); cursor: pointer; }
.bm-copy:hover { background: var(--hover); }
.bm-open { font: inherit; font-size: 16px; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--ink); background: var(--ink); color: var(--white); cursor: pointer; }
.bm-open:hover { background: var(--red); }
.bm-nav-row { margin: var(--s2) 0 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
.bm-up { margin: 0; }
.bm-panel-back { display: none; margin: 0 0 8px; font-size: 15px; }
.bm-focus-inside { margin: 0 0 var(--s1); font-size: 16px; }
.bm-source { font-size: 13px; color: var(--slate); line-height: 1.5; margin: 0 0 4px; }

@media (prefers-reduced-motion: no-preference) { .bm-cell path, .bm-band { transition: fill var(--fade); } }
/* Nov 5, 2026 (the owner's choice between two compositions): a wider page, a fixed 360 px panel beside the circle on a
   desktop, the heading row and the total line tightened, so the circle can reach 700 px. Below 1100 px the panel
   stops competing with the circle: the circle takes the content width and the panel follows it. */
main.ff.bm { max-width: 1400px; padding-top: 4px; }
.bm-layout { grid-template-columns: minmax(0, 1fr) 360px; column-gap: var(--s2); }
.bm-top { margin-bottom: 2px; align-items: center; }
.bm-top .eyebrow { margin: 0; }
body.ff-page main.ff.bm h1 { line-height: 1.1; }
.bm-total-line { line-height: 1; }
.bm-crumbs ol { margin: 2px 0 4px; }
/* Inside a fund or a section: the way back and the denominator, under the trail. */
.bm-backline { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; color: var(--body); line-height: 1.45; }
.bm-backline[hidden] { display: none; }
.bm-back { font: inherit; font-size: 15px; font-weight: 600; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--ink); background: var(--white); color: var(--ink); cursor: pointer; }
.bm-back:hover { background: var(--hover); }
.bm-denominator { flex: 1 1 28ch; max-width: 70ch; }
@media (max-width: 1100px) {
  .bm-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "map" "panel" "list"; gap: var(--s2); }
  .bm-panel { position: static; padding: 16px; scroll-margin-top: 8px; }
  .bm-panel .bm-panel-back { display: block; }
}
@media (max-width: 850px) {
  .bm-top { align-items: flex-start; }
  .bm-top-ctl { justify-content: flex-start; }
}
/* Phones: the circle opens the page with compact controls; the chosen category comes right after it, then the list
   that names every line (the rim has no room for labels at this width). */
@media (max-width: 600px) {
  main.ff.bm { padding-top: 10px; }
  .bm-top { margin-bottom: 8px; gap: 6px; }
  .bm-top .eyebrow { margin-bottom: 2px; }
  body.ff-page main.ff.bm h1 { font-size: 26px !important; }
  .bm-gov button { font-size: 14px; padding: 0 12px; }
  .bm-meta { font-size: 12px; }
  .bm-total-amt { font-size: 22px; }
  .bm-total-what { font-size: 14px; }
  .bm-keys { display: none; }
  .bm-panel-changed { animation: bm-flash 900ms ease-out 1; }
  .bm-panel-note { margin: 0 0 8px; font-size: 13px; color: var(--slate); }
}
@keyframes bm-flash { from { box-shadow: inset 0 0 0 3px var(--ink); } to { box-shadow: inset 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .bm-panel-changed { animation: none; box-shadow: inset 0 0 0 2px var(--ink); } }

/* The phone list: each band as a heading, each line a bar sized by amount, colored in its family. */
.bm-bars-note { margin: 0 0 var(--s1); }
.bm-bars { list-style: none; margin: 0; padding: 0; }
.bm-bars li { margin: 0; }
.bm-bar-row, .bm-bar-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name amt" "bar bar"; gap: 2px 12px; width: 100%; min-height: 56px; padding: 8px 10px; border: 1px solid var(--line); border-top: 0; background: var(--white); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.bm-bars li:first-child .bm-bar-row, .bm-bars li:first-child .bm-bar-head { border-top: 1px solid var(--line); border-radius: 8px 8px 0 0; }
.bm-bars li:last-child .bm-bar-row { border-radius: 0 0 8px 8px; }
.bm-bar-head { background: var(--soft); font-weight: 600; }
.bm-bar-row:hover, .bm-bar-head:hover { background: var(--hover); }
.bm-bar-row[aria-pressed="true"] { background: var(--soft); box-shadow: inset 0 0 0 2px var(--ink); }
.bm-bar-row.bm-group { background: var(--paper); border-style: dashed; }
.bm-bar-row.bm-group .bm-bar-name { font-weight: 400; color: var(--body); }
.bm-bar-row.bm-infocus { box-shadow: inset 3px 0 0 var(--red); }
.bm-bar-in { padding-left: 18px; }
.bm-bar-name { grid-area: name; font-size: 16px; font-weight: 600; line-height: 1.3; }
.bm-bar-amt { grid-area: amt; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.bm-bar-track { grid-area: bar; display: block; height: 8px; background: var(--soft); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.bm-bar-head .bm-bar-track { background: var(--white); }
.bm-bar-fill { display: block; height: 100%; background: hsl(var(--cat) 46%); }
.bm-bar-head .bm-bar-fill-band { background: hsl(var(--cat) 46%); }

/* Measure A beneath the overview as the in-focus example; the research behind it opens on request. */
.bm-focus-sec .bm-mark { margin-right: 10px; vertical-align: middle; }
.bm-focus-sec .ff-lede { max-width: 62ch; }
.bm-more { margin-top: 14px; }
.bm-more ul { margin: 10px 0 0; padding-left: 20px; }
.bm-more li { margin: 0 0 8px; line-height: 1.5; }
.bm-focus-chain { margin: 10px 0 14px; padding-left: 22px; max-width: 66ch; }
.bm-focus-chain li { margin: 0 0 10px; line-height: 1.55; }

/* Nov 5, 2026 (owner): the page shows its settled structure from the first paint. While main[data-loading] is set
   (the static HTML carries it; the module removes it once the circle is drawn, or when loading fails), the map keeps
   the height the circle will have (the module's own geometry: on a desktop D = clamp(420, width - 224, 700) and
   H = D + 70; on a phone D = width - 16 and H = D + 16), the total line keeps its line box, the panel keeps the
   height its idle content will have where it sits above other content, and the loading note sits quietly in the
   reserved space. Nothing below the circle moves when it arrives. */
.bm-mapwrap { container-type: inline-size; }
main.bm[data-loading] .bm-map { min-height: clamp(490px, calc(100cqw - 154px), 770px); }
main.bm[data-loading] .bm-map .bm-state { background: none; padding: 0; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: var(--slate); }
main.bm[data-loading] .bm-total-line { visibility: hidden; } /* the line keeps its height; its words wait for the amount */
main.bm[data-loading] .bm-caption { min-height: calc(2 * 1.6em); }
main.bm[data-loading] [data-list] { min-height: 52px; } /* the City’s rim legend under the circle; the County’s is taller */ /* two lines at the caption’s 16 px / 1.6 once the module appends the source; scales with the text */
/* The panel’s min-height is its content box: the idle panel measures 532 px outside at these widths (16 px padding, 1 px border). */
@media (max-width: 1100px) { main.bm[data-loading] .bm-panel { min-height: calc(5 * 44px + 17.4em); } }
@media (max-width: 600px) {
  main.bm[data-loading] .bm-map { min-height: 100cqw; }
  main.bm[data-loading] .bm-panel { min-height: calc(5 * 44px + 22.7em); } /* the idle panel measures 617 px outside at 375 to 390 wide */
  main.bm[data-loading] .bm-caption { min-height: calc(4 * 1.6em); } /* four lines at 390 wide with the source line; scales with the text */
}
/* Nov 5, 2026: the unavailable state names the source documents under the error note; hidden until the figures fail. */
.bm-fallback { margin-top: 8px; background: none; padding: 0 var(--s2); font-size: 14px; }
.bm-fallback[hidden] { display: none; }

/* Nov 6, 2026 (design preview): the opening composition. On a desktop the whole circle fits the first screen under the
   government, year and total; the panel is narrower and supports the overview (its five-largest list folded until
   asked); the chosen category's detail replaces the panel's invitation in the same place. Proportions and labels are
   untouched: the circle scales as a whole. */
@media (min-width: 1101px) {
  /* The budget page keeps its 1400 px width: the heading row's government, year and total sit on one line at 1440 and the
     circle needs the room. The side gutters match the other pages. */
  main.ff.bm { padding-left: var(--ca-gutter, 5%); padding-right: var(--ca-gutter, 5%); }
  .bm-layout { grid-template-columns: minmax(0, 1fr) 340px; column-gap: var(--s3); }
  .bm-map { display: flex; justify-content: center; }
  /* With the narrower panel the circle's own geometry already fits the first screen at 1280 × 800 and 1440 × 900;
     no height cap, so the reserved space and the drawn circle stay the same size. */
  .bm-panel { padding: var(--s2); }
  .bm-panel-lede { font-size: 15px; }
}
.bm-top5-wrap > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--slate); list-style: none; }
.bm-top5-wrap > summary::-webkit-details-marker { display: none; }
.bm-top5-wrap > summary::before { content: "▸"; font-size: 11px; }
.bm-top5-wrap[open] > summary::before { transform: rotate(90deg); }
/* Nov 6, 2026 (design preview): the In focus caption on the first screen, under the circle, before the budget caption. */
.bm-focus-cap { margin: 4px 0 2px; font-size: 13px; color: var(--slate); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.bm-focus-cap strong { color: var(--ink); }
.bm-focus-swatch { display: inline-block; width: 14px; height: 14px; border: 1.75px solid var(--red); border-radius: 3px; box-sizing: border-box; }
.bm-focus-cap-btn { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.bm-focus-cap-btn:hover { color: var(--red); }