/* The debt explorer (/data/explore/). Colours come from the pack's palette (/brand.css): one
   sequential ramp mixed from --primary toward white, one diverging ramp (--link for falls, --primary
   for rises), paper hairlines between counties, and --accent (gold) only for the focused or
   selected county. Fallbacks keep the engine usable with a pack that lacks a token. */
.ex { --ex-paper: #fff; --ex-nr: #e4e4e4; --ex-maroon: var(--primary, #8a1538); --ex-teal: var(--link, #0e7395); }
.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(--surface); 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(--surface); }
@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; }
}
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: 3px solid var(--accent); outline-offset: -3px; }
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(--accent); stroke-width: 2px; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff); }
svg.txmap .labels { pointer-events: none; }
svg.txmap .labels text { font-family: var(--font); font-size: 20px; fill: var(--ink); paint-order: stroke; stroke: #fff; 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%, #fff); }
.k2 { fill: color-mix(in srgb, var(--ex-maroon) 24%, #fff); }
.k3 { fill: color-mix(in srgb, var(--ex-maroon) 42%, #fff); }
.k4 { fill: color-mix(in srgb, var(--ex-maroon) 62%, #fff); }
.k5 { fill: color-mix(in srgb, var(--ex-maroon) 82%, #fff); }
.k6 { fill: var(--primary-dark, #6d0f2a); }
.n2 { fill: var(--ex-teal); }
.n1 { fill: color-mix(in srgb, var(--ex-teal) 38%, #fff); }
.p1 { fill: color-mix(in srgb, var(--ex-maroon) 22%, #fff); }
.p2 { fill: color-mix(in srgb, var(--ex-maroon) 55%, #fff); }
.p3 { fill: var(--primary-dark, #6d0f2a); }
.nr { fill: var(--ex-nr); }
.sel { fill: var(--accent); }
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: 3px; background: var(--surface, #fff); color: var(--ink); box-shadow: 0 3px 12px rgba(0, 0, 0, .18); 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 rgba(0, 0, 0, .25); background: var(--ex-nr); }
.sw.k1 { background: color-mix(in srgb, var(--ex-maroon) 15%, #fff); }
.sw.k2 { background: color-mix(in srgb, var(--ex-maroon) 24%, #fff); }
.sw.k3 { background: color-mix(in srgb, var(--ex-maroon) 42%, #fff); }
.sw.k4 { background: color-mix(in srgb, var(--ex-maroon) 62%, #fff); }
.sw.k5 { background: color-mix(in srgb, var(--ex-maroon) 82%, #fff); }
.sw.k6, .sw.p3 { background: var(--primary-dark, #6d0f2a); }
.sw.n2 { background: var(--ex-teal); }
.sw.n1 { background: color-mix(in srgb, var(--ex-teal) 38%, #fff); }
.sw.p1 { background: color-mix(in srgb, var(--ex-maroon) 22%, #fff); }
.sw.p2 { background: color-mix(in srgb, var(--ex-maroon) 55%, #fff); }
.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: #fff; 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; }
  .ex-chart > svg.ex-bars { height: 170px; }
  .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); }
/* 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 primary colour is principal, gold and charcoal a pledge (tax supported,
   revenue supported), so pledge parts and government types take their own colours. */
.ptax { fill: var(--accent, #f5be0b); }
.prev { fill: var(--header, #333); }
.t1 { fill: #0e7395; }
.t2 { fill: #5b4a9b; }
.t3 { fill: #2f7d4f; }
.t4 { fill: #2b5fae; }
.t5 { fill: #7a4e1d; }
.t6 { fill: #9c2c2c; }
.t7 { fill: #4b5563; }
.sw.pt { background: var(--ex-maroon); }
.sw.pr { background: var(--ex-teal); }
.sw.ptax { background: var(--accent, #f5be0b); }
.sw.prev { background: var(--header, #333); }
.sw.t1 { background: #0e7395; }
.sw.t2 { background: #5b4a9b; }
.sw.t3 { background: #2f7d4f; }
.sw.t4 { background: #2b5fae; }
.sw.t5 { background: #7a4e1d; }
.sw.t6 { background: #9c2c2c; }
.sw.t7 { background: #4b5563; }
.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(--surface); 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: #fff; 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; }
  .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: rgba(0, 0, 0, .5); }
.ex-brief-dialog { max-width: calc(11in + 34px); margin: 0 auto; padding: 12px 16px 14px; background: #fff; 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(--surface); }
@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: #fff; 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(--accent-dark, #8a6d00); border-radius: 3px; background: color-mix(in srgb, var(--accent, #f5be0b) 14%, white); 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%, white); stroke: white; 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: white; 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(--surface); 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(--header, #333); color: white; 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; }
}