/* The debt explorer (/data/explore/). Colours come from the palette roles (/brand.css): one
   sequential ramp mixed from --chart-hero toward the surface, one diverging ramp (context grey for
   falls, the hero for rises), surface hairlines between counties, the focus colour on the focused
   county and ink on the selected one. brand.css defines every role, so there are no fallbacks. */
.ex { --ex-paper: var(--surface); --ex-nr: var(--tint); --ex-maroon: var(--chart-hero); --ex-teal: var(--chart-context-strong); }
.ex-band { font-variant-numeric: normal; white-space: nowrap; }
.ex-band-rank { font-variant-numeric: tabular-nums; }
#ranked-grid .ag-header-cell-text { word-break: normal; overflow-wrap: normal; }
.ex-headline { color: var(--text) !important; max-width: 60em; }
.ex-headline a { font-weight: 500; }
.ex-computed { display: inline-block; font-size: .85rem; color: var(--muted); }
.echo { font-size: .95rem; max-width: 60em; }
.echo .muted { display: block; font-size: .85rem; margin-top: 2px; }
.ex-jump { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 0 0 18px; padding: 8px 10px; border: 1px solid var(--line); background: var(--tint); font-size: .875rem; }
.ex-jump span { color: var(--muted); font-weight: 500; }
.ex-jump a { white-space: nowrap; }

.ex-levels ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 14px; padding: 0; border-bottom: 1px solid var(--line); }
.ex-levels a { display: inline-block; padding: 6px 0; text-decoration: none; border-bottom: 3px solid transparent; color: var(--ink); }
.ex-levels a[aria-current="page"] { border-bottom-color: var(--primary); font-weight: 500; }
.ex-controls select { min-width: 10em; }
/* A download link with a long name inside a sentence wraps, so it never widens a 320 px page. */
.ex p > .download { white-space: normal; }

/* Sections below the first screen skip layout and paint until they near the viewport (they stay in
   the accessibility tree and in find-in-page), so the first paint waits only for what is on screen. */
.ex > .section-tight, .ex > .ex-notes, .ex > .source-block { content-visibility: auto; contain-intrinsic-size: auto 900px; }
@media (max-width: 960px) { .ex-ranked, .ex-method { content-visibility: auto; contain-intrinsic-size: auto 1200px; } }

/* Layout: the map (7 columns) beside the top ten (5); the ranked table runs the page's full width below
   both, with no box that scrolls and nothing cut (it ran 1,399 px inside a 461 px box). On
   phones the top ten, then the map, then every county as a phone list. */
.ex-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "map top"; gap: 28px; align-items: start; margin: 8px 0 40px; }
.ex-map-col { grid-area: map; }
.ex-top10 { grid-area: top; padding-top: 36px; }
.ex-top10 h2 { font-size: 1.15rem; margin: 0 0 8px; }
.ex-ranked { margin: 0 0 40px; }
.ex-ranked table.data { width: 100%; min-width: 1200px; }
.ex-ranked table.data { table-layout: auto; }
.ex-ranked table.data th, .ex-ranked table.data td { white-space: normal; overflow-wrap: normal; }

/* A fitting copy is never a tab stop. Container queries expose the keyboard scroll copy only
   below its enforced table width. Older browsers keep the wrapping, non-scrolling copy. */
.ex-table-host { container-type: inline-size; }
.ex-table-overflow { display: none; }
.ex-overflow-cue { display: none; }
.ex-rank-cue:has(+ .ex-rank-scroll[hidden]) { display: none; }
.ex-table-host table.data { table-layout: fixed; }
.ex-table-host table.data th, .ex-table-host table.data td { white-space: normal; overflow-wrap: anywhere; }
.ex-table-fit table.data { width: 100%; min-width: 0; }
.ex-table-overflow table.data { min-width: 800px; }
.ex-table-host--wide .ex-table-overflow table.data { min-width: 1100px; }
.ex-table-host--wide table.data { font-size: .85rem; }
.ex-table-host--wide table.data th, .ex-table-host--wide table.data td { padding: 6px 4px; overflow-wrap: normal; word-break: normal; }
.ex-table-host--wide table.data td.num { white-space: nowrap; }
.ex-table-overflow th[scope="row"], .ex-rank-scroll th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--tint); }
@container (max-width: 799.98px) {
  .ex-overflow-cue { display: block; }
  .ex-table-fit { display: none; }
  .ex-table-overflow { display: block; }
}
@container (max-width: 1099.98px) {
  .ex-table-host--wide > .ex-overflow-cue { display: block; }
  .ex-table-host--wide > .ex-table-fit { display: none; }
  .ex-table-host--wide > .ex-table-overflow { display: block; }
}
/* A short table (four columns: the county's government types) fits its column at every width, so
   desktop shows all of it, Share included, and phones stack it like the trend table (g22 P3). */
.ex-table-host--fit > .ex-overflow-cue, .ex-table-host--fit > .ex-table-overflow { display: none; }
.ex-table-host--fit > .ex-table-fit { display: block; }
table.ex-rank thead th, table.ex-num thead th { vertical-align: bottom; line-height: 1.3; white-space: normal; }
.ex-rl { display: none; }
.ex-phone-all { margin-top: 8px; }
.ex-phone-all summary { cursor: pointer; color: var(--link); min-height: 44px; display: inline-flex; align-items: center; }
@media screen and (min-width: 768px) {
  .ex-ranked:not(:has(.ex-phone-all[open], tr:target)) .ex-rank tbody tr:nth-child(n+26) { display: none; }
}
@media (max-width: 960px) {
  .ex-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .ex-map-col, .ex-top10 { grid-area: auto; }
  .ex-top10 { order: -1; padding-top: 0; }
}
/* Under 768 px: every county is a line of a phone list, the figure tables stack label over value, and
   every link or tab a thumb presses is 44 px tall. */
@media screen and (max-width: 767.98px) {
  /* Stacked phone lists use their real heights instead of the desktop paint placeholders. */
  .ex-rank-cue, .ex-table-host--stack > .ex-overflow-cue { display: none; }
  .ex > .section-tight, .ex > .ex-notes, .ex > .source-block, .ex-ranked, .ex-method { content-visibility: visible; contain-intrinsic-size: none; }
  .ex-ranked .ex-rank-scroll { display: none; }
  .ex-table-host--stack > .ex-table-overflow { display: none; }
  .ex-table-host--wide.ex-table-host--stack > .ex-table-fit { display: none; }
  .ex-table-host--wide.ex-table-host--stack > .ex-table-overflow { display: block; overflow-x: auto; }
  .ex-table-host--stack > .ex-table-fit { display: block; }
  .ex-rl { display: block; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
  .ex-rl li { display: grid; grid-template-columns: 2em minmax(0, 1fr); align-items: center; gap: 2px 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .ex-rl__rank { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .ex-rl__name { display: inline-flex; align-items: center; min-height: 44px; }
  .ex-rl__v { grid-column: 2; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
  .ex-rl__metric, .ex-rl__p { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: baseline; }
  .ex-rl__p { font-size: .8rem; color: var(--muted); }
  .ex-rl__label { color: var(--muted); font-size: .8rem; line-height: 1.25; font-weight: 400; text-align: left; }
  .ex-rl__amount { text-align: right; }
  .ex-phone-all { margin: 8px 0 0; border-top: 1px solid var(--line); }
  .ex-phone-all summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--link); }
  .ex-stack-wrap { overflow: visible; }
  .ex-stack-wrap table.ex-pledge-types caption { display: block; width: 100%; text-align: left; }
  .ex-stack-wrap table.ex-stack, .ex-stack-wrap table.ex-stack tbody { display: block; width: 100%; }
  .ex-stack-wrap table.ex-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ex-stack-wrap table.ex-stack tr { display: block; border-bottom: 1px solid var(--line); padding: 6px 0; }
  .ex-stack-wrap table.ex-stack tbody th { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border: 0; padding: 4px 0; font-weight: 500; text-align: left; overflow-wrap: normal; word-break: normal; }
  .ex-stack-wrap table.ex-stack tbody th > .definition-stack-label { order: -1; }
  .ex-stack-wrap table.ex-stack tbody th[scope="row"] a { display: inline-flex; align-items: baseline; min-height: 44px; }
  .ex-stack-wrap table.ex-stack .phone-definition { min-width: 0; min-height: 0; }
  .ex-stack-wrap table.ex-stack td { display: flex; align-items: baseline; justify-content: space-between; min-width: 0; gap: 12px; border: 0; padding: 2px 0; }
  .ex-stack-wrap table.ex-stack td::before { content: attr(data-label); content: attr(data-label) / ""; color: var(--muted); text-align: left; white-space: normal; }
  .ex-stack-wrap table.ex-local-issuers tbody th { justify-content: flex-start; background: transparent; }
  .ex-stack-wrap table.ex-local-issuers tbody th > .definition-stack-label { display: none; }
  .ex-stack-wrap table.ex-local-issuers td:nth-child(2)::before { content: "Type"; }
  .ex-stack-wrap table.ex-stack tbody td:empty { display: none; }
  .ex-table-overflow .ex-stack .definition-stack-label { display: none; }
  .ex-table-overflow .ex-stack td::before { display: none; }
  .ex-levels a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .ex-toplist li { padding: 0; }
  .ex-toplist li a { display: inline-flex; align-items: center; min-height: 44px; }
  .ex-toplist .v { line-height: 44px; }
  .ex-top10 > p a, .ex-skip { display: inline-flex; align-items: center; min-height: 44px; }
}
.ex-toplist { margin: 0 0 8px; padding-left: 1.6rem; }
.ex-toplist li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.ex-toplist .v { float: right; font-variant-numeric: tabular-nums; }
.ex-rank-note { margin: 0 0 8px; color: var(--muted); font-size: .85rem; }

/* Ranked and figure tables: numbers right-aligned in tabular figures; text cells marked .txt. */
table.ex-rank, table.ex-num { font-size: .875rem; }
table.ex-rank td, table.ex-num td, table.ex-num thead th:not(:first-child), table.ex-rank thead th:not(:nth-child(2)) { text-align: right; font-variant-numeric: tabular-nums; }
table.ex-rank td, table.ex-num td { white-space: nowrap; } /* figures stay whole; headings wrap */
.ex-table-host table.ex-num td:not(.txt), .ex-ranked table.ex-rank td:not(.txt) { white-space: nowrap; overflow-wrap: normal; }
/* Issuer names take the width left after the whole figures; number headings may wrap. */
@media screen and (min-width: 1100px) {
  .ex-table-host table.ex-issuer-names { table-layout: auto; }
  .ex-table-host table.ex-issuer-names td { width: 1%; }
  .ex-table-host table.ex-issuer-names th { overflow-wrap: normal; }
  .ex-table-host table.ex-issuer-names .ex-figure--amount { min-width: 12em; }
  .ex-table-host table.ex-issuer-names .ex-figure--total { min-width: 10.5em; }
  .ex-table-host table.ex-issuer-names .ex-figure--share { min-width: 6.5em; }
  .ex-table-host table.ex-issuer-names .ex-figure--change { min-width: 8em; }
}
.ex-rl__v, .ex-rl__p { white-space: nowrap; }
table.ex-num td.txt, table.ex-num th.txt, table.ex-num thead th.txt { text-align: left; white-space: normal; }
table.ex-rank thead th { position: sticky; top: 0; z-index: 1; }
table.ex-rank tbody tr:target { outline: 2px solid var(--focus); outline-offset: -2px; }
table.ex-num tr.total th, table.ex-num tr.total td { font-weight: 500; border-top: 2px solid var(--ink); }

/* The map */
.ex-skip { display: inline-block; margin: 0 0 6px; font-size: .875rem; }
svg.txmap { display: block; width: 100%; height: auto; }
svg.txmap path { stroke: var(--ex-paper); stroke-width: .6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
svg.txmap a:hover path { stroke: var(--ink); stroke-width: 1.5px; }
svg.txmap a:focus { outline: none; }
svg.txmap a:focus-visible { outline: none; box-shadow: none; }
svg.txmap a:focus-visible path { stroke: var(--focus); stroke-width: 2px; filter: drop-shadow(0 0 1.5px var(--surface)) drop-shadow(0 0 1px var(--surface)); }
svg.txmap .labels { pointer-events: none; }
svg.txmap .labels text { font-family: var(--font); font-size: 20px; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
svg.txmap .labels .ln { font-weight: 600; }
@media (max-width: 560px) { svg.txmap .labels { display: none; } } /* too small to read; the top ten lead on phones */
svg.txmap .labels line { stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
svg.txmap.locator { max-width: 260px; margin: 0 0 12px; }
.k1 { fill: color-mix(in srgb, var(--ex-maroon) 15%, var(--surface)); }
.k2 { fill: color-mix(in srgb, var(--ex-maroon) 24%, var(--surface)); }
.k3 { fill: color-mix(in srgb, var(--ex-maroon) 42%, var(--surface)); }
.k4 { fill: color-mix(in srgb, var(--ex-maroon) 62%, var(--surface)); }
.k5 { fill: color-mix(in srgb, var(--ex-maroon) 82%, var(--surface)); }
.k6 { fill: color-mix(in srgb, var(--ex-maroon) 80%, var(--ink)); }
.n2 { fill: var(--ex-teal); }
.n1 { fill: color-mix(in srgb, var(--ex-teal) 38%, var(--surface)); }
.p1 { fill: color-mix(in srgb, var(--ex-maroon) 22%, var(--surface)); }
.p2 { fill: color-mix(in srgb, var(--ex-maroon) 55%, var(--surface)); }
.p3 { fill: color-mix(in srgb, var(--ex-maroon) 80%, var(--ink)); }
.nr { fill: var(--ex-nr); }
.sel { fill: var(--ink); }
svg.txmap path.sel { stroke: var(--ink); stroke-width: 1px; }
.ex-map-tooltip { position: fixed; z-index: 20; max-width: min(28rem, calc(100vw - 24px)); padding: 7px 10px; border: 1px solid var(--ink); border-radius: var(--r-control); background: var(--surface); color: var(--ink); box-shadow: var(--e1); font-size: .875rem; line-height: 1.35; pointer-events: none; }
.ex-map-tooltip[hidden] { display: none; }

/* Legend and keys: each swatch has its words beside it. */
.ex-legend { margin: 10px 0 18px; font-size: .875rem; }
.ex-legend-title { font-weight: 500; margin-bottom: 4px; }
.ex-legend ul, .ex-key { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .875rem; }
.sw { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; border: 1px solid var(--rule-strong); background: var(--ex-nr); }
.sw.k1 { background: color-mix(in srgb, var(--ex-maroon) 15%, var(--surface)); }
.sw.k2 { background: color-mix(in srgb, var(--ex-maroon) 24%, var(--surface)); }
.sw.k3 { background: color-mix(in srgb, var(--ex-maroon) 42%, var(--surface)); }
.sw.k4 { background: color-mix(in srgb, var(--ex-maroon) 62%, var(--surface)); }
.sw.k5 { background: color-mix(in srgb, var(--ex-maroon) 82%, var(--surface)); }
.sw.k6, .sw.p3 { background: color-mix(in srgb, var(--ex-maroon) 80%, var(--ink)); }
.sw.n2 { background: var(--ex-teal); }
.sw.n1 { background: color-mix(in srgb, var(--ex-teal) 38%, var(--surface)); }
.sw.p1 { background: color-mix(in srgb, var(--ex-maroon) 22%, var(--surface)); }
.sw.p2 { background: color-mix(in srgb, var(--ex-maroon) 55%, var(--surface)); }
.sw.nr { background: var(--ex-nr); }

/* Charts: server SVG, with the table under each. Type colours for the one stacked chart only. */
svg.ex-bars { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 0 8px; }
svg.ex-bars text { fill: var(--muted); font-size: 12px; font-family: var(--font); }
svg.ex-bars text.tot { fill: var(--ink); font-size: 11px; }
svg.ex-bars rect { stroke: var(--surface); stroke-width: .5px; }
svg.ex-bars.small { max-width: none; }
svg.ex-bars line.base { stroke: var(--line); }
.ex-chart { margin: 0 0 8px; }
.ex-chart > svg.ex-bars { margin: 0; max-width: none; }
#pledge > svg.ex-bars { max-width: none; }
.ex-phone-caption { display: none; margin: 4px 0 8px; font-size: .875rem; color: var(--muted); }
@media (max-width: 767.98px) {
  svg.ex-bars text { font-size: 22px; }
  svg.ex-bars text.tot { font-size: 20px; }
  svg.ex-bars text.phone-hide { display: none; }
  svg.ex-bars text.ex-bar-value { display: none; }
  svg.ex-bars.small text { font-size: 16px; }
  .ex-phone-caption { display: block; }
  /* Phone charts keep their viewBox aspect (height: auto above): a fixed height stretched the
     statewide stack and letterboxed the others. */
  .ex-chart > svg.ex-bars text { font-size: 28px; }
  svg.ex-bars.small text:first-of-type { text-anchor: start; }
  svg.ex-bars.small text:last-of-type { text-anchor: end; }
}

/* The phone rules above intentionally keep the scroll copy visible for some tables.  A chart
   copy controlled by the scale toggle is different: hidden must always win, or both scale sets
   render together on a narrow screen. */
[data-ex-scale][hidden] { display: none !important; }
svg.ex-hbars { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 0 12px; }
@media (min-width: 600px) { svg.ex-hbars { max-width: 360px; } }
svg.ex-hbars text { fill: var(--ink); font-size: 11px; font-family: var(--font); }
/* Under 600 px the chart can render below its 280-unit viewBox, which shrank 11-unit labels to
   about 9 px: 14 units keeps them at 11 px or more down to a 220 px chart. */
@media (max-width: 599.98px) { svg.ex-hbars text { font-size: 14px; } }
/* The state issuer page uses the shared horizontal chart component.  Its top-ten
   bars are data marks, so keep them as plain rectangular bars rather than the
   rounded empty tracks used by the other board charts. */
#state-issuer-chart.bchart .bchart-row-bar { border: 0; border-radius: 0; background: transparent; }
.sm, .pt { fill: var(--ex-maroon); }
.pr { fill: var(--ex-teal); }
/* One colour, one meaning: the hero is principal and revenue supported, context-strong tax supported (hub board
   STATE_ISSUER and the OG card); government types take steps of the context family, never the principal or a
   pledge colour. */
.ptax { fill: var(--chart-context-strong); }
.prev { fill: var(--chart-hero); }
.t1 { fill: var(--chart-hero-soft); }
.t2 { fill: color-mix(in srgb, var(--chart-second) 55%, var(--ink)); }
.t3 { fill: var(--chart-context); }
.t4 { fill: color-mix(in srgb, var(--chart-context-strong) 60%, var(--ink)); }
.t5 { fill: color-mix(in srgb, var(--chart-hero-soft) 50%, var(--chart-context)); }
.t6 { fill: color-mix(in srgb, var(--chart-second) 45%, var(--chart-context)); }
.t7 { fill: color-mix(in srgb, var(--chart-context-strong) 50%, var(--surface)); }
.sw.pt { background: var(--ex-maroon); }
.sw.pr { background: var(--ex-teal); }
.sw.ptax { background: var(--chart-context-strong); }
.sw.prev { background: var(--chart-hero); }
.sw.t1 { background: var(--chart-hero-soft); }
.sw.t2 { background: color-mix(in srgb, var(--chart-second) 55%, var(--ink)); }
.sw.t3 { background: var(--chart-context); }
.sw.t4 { background: color-mix(in srgb, var(--chart-context-strong) 60%, var(--ink)); }
.sw.t5 { background: color-mix(in srgb, var(--chart-hero-soft) 50%, var(--chart-context)); }
.sw.t6 { background: color-mix(in srgb, var(--chart-second) 45%, var(--chart-context)); }
.sw.t7 { background: color-mix(in srgb, var(--chart-context-strong) 50%, var(--surface)); }
.ex-sub { margin-top: 18px; }
.ex-scale-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; margin: 0 0 4px; font-weight: 500; }
.ex-scale-toggle input { width: 1.1rem; height: 1.1rem; }
.ex-multiples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; margin: 8px 0 16px; }
.ex-multiples figure { margin: 0; display: flex; flex-direction: column; } /* captions of one or two lines; bars share a baseline */
.ex-multiples figure svg { margin-top: auto; }
.ex-multiples figcaption { font-size: .875rem; margin-bottom: 2px; }
@media (max-width: 860px) { .ex-multiples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Method box with its flow picture (tables, then attribution, then per resident). */
.ex-method { background: var(--tint); border-radius: 8px; padding: 16px 18px; margin: 8px 0 0; font-size: .9rem; }
.ex-method h2 { font-size: 1.15rem; }
.ex-method h3 { font-size: 1rem; margin-top: 14px; }
.ex-method ul { padding-left: 1.1rem; }
.ex-flow { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ex-flow li { position: relative; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--primary); border-radius: 6px; padding: 10px 12px; font-size: .85rem; }
.ex-flow li + li::before { content: ""; position: absolute; left: -17px; top: 44%; border: 7px solid transparent; border-left: 9px solid var(--muted); }
.ex-flow .step { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; color: var(--muted); }
.ex-flow .big { display: block; font-size: 1.5rem; font-weight: 500; color: var(--ink); line-height: 1.2; }
@media (max-width: 560px) {
  .ex-flow { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ex-flow li + li::before { left: 46%; top: -17px; border: 7px solid transparent; border-top: 9px solid var(--muted); }
}

.ex-note, .ex-since { max-width: 60em; }
.ex-since-list li { margin-bottom: 4px; }
.table-scroll-cue { margin: 0 0 5px; color: var(--muted); font-size: .8rem; }
@media (max-width: 767.98px) {
  .ex-table-host--stack:not(.ex-table-host--wide) > .table-scroll-cue { display: none; }
}
.ex-notes { border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; margin: 0 0 28px; }
.ex-notes summary { cursor: pointer; font-weight: 500; color: var(--ink); }
.ex-notes[open] summary { margin-bottom: 10px; }

/* County page */
.ex-il, .grid-foot.ex-il-foot { display: none; }
@media screen and (max-width: 767.98px) {
  .ex-issuers .ex-table-host > .table-scroll { display: none; }
  /* The phone list stands in for both table copies, so nothing scrolls and no scroll cue shows (polish44). */
  .ex-table-host:has(> .ex-il) > :is(.ex-overflow-cue, .table-scroll-cue) { display: none; }
  .ex-il { display: block; list-style: none; margin: 0 0 8px; padding: 0; border-top: 1px solid var(--line); }
  .grid-foot.ex-il-foot { display: flex; }
  .ex-il li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: center; padding: 2px 0 6px; border-bottom: 1px solid var(--line); }
  .ex-il__who { min-width: 0; }
  .ex-il__name { display: inline-flex; align-items: center; min-height: 44px; }
  .ex-il__sub { display: block; font-size: .8rem; line-height: 1.3; color: var(--muted); }
  .ex-il__v { text-align: right; font-variant-numeric: tabular-nums; line-height: 1.25; white-space: nowrap; }
  .ex-il__p { display: block; font-size: .8rem; color: var(--muted); }
}
.ex-county-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; margin: 8px 0 36px; }
@media (max-width: 860px) { .ex-county-top { grid-template-columns: minmax(0, 1fr); } }
.ex-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0 0 12px; }
.ex-figures div { border-top: 1px solid var(--line); padding-top: 6px; }
.ex-figures dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ex-figures dd { margin: 0; font-size: 1.15rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .ex-figures { grid-template-columns: minmax(0, 1fr); } }

/* ---- H8: "Print county brief" (board fold 7; FD7-04) ---- */
/* The press at the right of the county's name, an outline button ("Show" stays the only filled
   control); on a phone it runs full width under the name. */
.ex-headrow { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 0 0 10px; }
.ex-headrow h1 { margin-bottom: 0; }
.ex-press { display: inline-flex; align-items: center; gap: 10px; flex: none; padding: 6px 14px; text-align: left; }
.ex-press__icon { flex: none; }
.ex-press__text { display: flex; flex-direction: column; line-height: 1.25; }
.ex-press__meta { font-size: .8rem; font-weight: 400; }
@media (max-width: 767.98px) { .ex-press { flex: 1 1 100%; min-height: 44px; } }

/* The brief's window: open while #brief is the address's target, over the page, with no script. */
.ex-brief-layer { display: none; }
.ex-brief-layer:target { display: block; position: fixed; inset: 0; z-index: 50; overflow: auto; padding: 24px 12px; background: var(--scrim); }
.ex-brief-dialog { max-width: calc(11in + 34px); margin: 0 auto; padding: 12px 16px 14px; background: var(--surface); border-radius: 6px; }
.ex-brief-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 10px; }
.ex-brief-bar h2 { margin: 0; font-size: 1.15rem; }
.ex-brief-meta { margin: 2px 0 0; font-size: .8rem; color: var(--muted); }
.ex-brief-close { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.ex-brief-scroll { overflow: auto; border: 1px solid var(--line); background: var(--tint); }
@media screen {
  .ex-brief-dialog { max-height: calc(100dvh - 48px); display: flex; flex-direction: column; }
  .ex-brief-bar, .ex-brief-note { flex: none; }
  .ex-brief-scroll { min-height: 0; flex: 0 1 auto; }
  .ex-brief-scroll { container-type: inline-size; }
  .ex-brief { zoom: min(1, calc(100cqw / 1056px)); }
}
.ex-brief-note { margin: 10px 0 0; font-size: .875rem; color: var(--muted); }

/* The brief: one US Letter page, landscape (11 x 8.5 in), 0.5 in margins all round; one colour for
   data (the primary colour, dark enough to hold in greyscale), every bar labelled, nothing to press. */
.ex-brief { box-sizing: border-box; width: 11in; height: 8.5in; padding: 0.5in; display: flex; flex-direction: column; gap: 10px; overflow: hidden; background: var(--surface); color: var(--ink); font-size: 10px; line-height: 1.4; }
.ex-brief p { margin: 0; }
.ex-brief__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 24px; align-items: end; padding-bottom: 6px; border-bottom: 2px solid var(--primary); }
.ex-brief__title { margin: 0; font-size: 20px; line-height: 1.2; color: var(--ink); }
.ex-brief__mark { grid-row: 1 / span 2; grid-column: 2; text-align: right; font-size: 12px; font-weight: 600; color: var(--primary); }
.ex-brief__mark small { display: block; font-size: 9px; font-weight: 400; color: var(--muted); }
.ex-brief__sub { font-size: 10px; color: var(--muted); }
.ex-brief__banner { padding: 4px 10px; border: 1px solid var(--rule-strong); border-radius: var(--r-tag); background: var(--tint); font-size: 9px; line-height: 1.35; }
.ex-brief__lead { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: center; }
.ex-brief__map { display: block; width: 112px; height: auto; }
.ex-brief__map path { fill: color-mix(in srgb, var(--line) 70%, var(--surface)); stroke: var(--surface); stroke-width: .5px; vector-effect: non-scaling-stroke; }
.ex-brief__map path.sel { fill: var(--primary); stroke: var(--ink); stroke-width: 1px; }
.ex-brief__map text { font-family: var(--font); font-size: 96px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 14px; stroke-linejoin: round; }
.ex-brief__sentence { font-size: 14px; line-height: 1.45; margin: 0 0 9px !important; }
.ex-brief__sentence b { font-weight: 600; }
.ex-brief__figs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 14px; margin: 0; }
.ex-brief__figs div { display: flex; flex-direction: column; border-top: 2px solid var(--primary); padding-top: 4px; }
.ex-brief__figs dt { font-size: 8px; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ex-brief__figs dd { margin: auto 0 0; padding-top: 2px; font-size: 14px; font-weight: 500; line-height: 1.25; font-variant-numeric: tabular-nums; }
.ex-brief__figs dd small { display: block; font-size: 9px; font-weight: 400; color: var(--muted); }
.ex-brief__cols { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: 24px; flex: 0 0 auto; }
.ex-brief__cols section { min-width: 0; }
.ex-brief__cols section > .ex-brief__table + .ex-brief__band { margin-top: 12px; }
.ex-brief__band { margin: 0 0 6px; padding: 3px 8px; background: var(--tint); border-left: 3px solid var(--primary); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.ex-brief__table { width: 100%; border-collapse: collapse; font-size: 9px; line-height: 1.3; }
.ex-brief__table thead th { padding: 4px; background: var(--footer); color: var(--on-footer); font-weight: 500; text-align: left; vertical-align: bottom; }
.ex-brief__table tbody th, .ex-brief__table td { padding: 2.5px 4px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.ex-brief__table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ex-brief__table tr.total > * { font-weight: 600; border-top: 1.5px solid var(--ink); border-bottom: 0; }
.ex-brief__bar { display: block; width: 52px; height: 7px; margin-top: 2px; }
.ex-brief__bar rect, .ex-brief__trend rect { fill: var(--primary); }
.ex-brief__trend { display: block; width: 100%; height: auto; }
.ex-brief__trend text { font-family: var(--font); font-size: 10px; fill: var(--ink); }
.ex-brief__trend .yr { fill: var(--muted); }
.ex-brief__more { margin-top: 5px !important; font-size: 9px; overflow-wrap: anywhere; }
.ex-brief__notes { font-size: 9px; line-height: 1.4; }
.ex-brief__source { font-size: 8.5px; line-height: 1.35; color: var(--muted); }
.ex-brief__foot { display: flex; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line); font-size: 8.5px; color: var(--muted); }
@media screen and (max-width: 380px) {
  .ex-brief { gap: 6px; }
}

/* While the brief is open, print it alone: one letter sheet, landscape, with no sheet margin
   (the brief's own 0.5 in padding is the margin), colours kept. */
@page brief { size: letter landscape; margin: 0; }
@media print {
  body:has(#brief:target) { margin: 0; }
  body:has(#brief:target) *:not(:has(.ex-brief)):not(.ex-brief):not(.ex-brief *) { display: none !important; }
  body:has(#brief:target) *:has(.ex-brief) { display: block !important; position: static !important; inset: auto !important; width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; transform: none !important; }
  #brief:target .ex-brief { page: brief; margin: 0 !important; zoom: 1 !important; break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Print one complete server table within the page, without the screen's scroll widths. Narrow
   print emulation scales the type and cell padding with the page width; Letter stays at 10 px. */
@media print {
  .ex-skip { display: none !important; }
  .ex > .section-tight, .ex > .ex-notes, .ex > .source-block, .ex-ranked, .ex-method { content-visibility: visible; contain-intrinsic-size: none; }
  .ex .table-scroll { overflow: visible !important; }
  .ex-table-host > .ex-table-fit { display: block; }
  .ex-table-host > .ex-table-overflow { display: none; }
  .ex .table-scroll table.data { width: 100%; min-width: 0; table-layout: auto; font-size: min(10px, 1vw); }
  .ex .table-scroll th, .ex .table-scroll td { padding: min(4px, .4vw); overflow-wrap: normal; }
  .ex-issuers table.data th .small { font-size: .9em; }
  .ex-il, .grid-foot.ex-il-foot { display: none !important; }
  .ex-issuers .grid-foot { display: none !important; }
  .ex-issuers .ex-table-host, .ex-issuers .ex-table-host[hidden] { display: block !important; }
  .ex-ranked .ex-rank-scroll, .ex-ranked .ex-rank-scroll[hidden] { display: block !important; overflow: visible !important; }
  .ex-ranked .dc-grid, .ex-ranked .skip-grid, .ex-ranked .grid-foot, .ex-ranked .ex-rl { display: none !important; }
}

/* The pack's "do not sum" line under the state total (data_center.state_total_note; board fold 15, STATE) */
.ex-nosum { display: block; width: fit-content; max-width: 60em; margin: 10px 0 0; padding: 8px 12px;
  border-left: 3px solid var(--primary); background: var(--surface); font-size: .925rem; color: var(--text); }
.ex-nosum strong { font-weight: 500; }