/* Shared shell primitives for Deflock Altoona static routes. */
:root {
  color-scheme: light dark;
  --paper: #f5f0e6;
  --paper-deep: #e8dfcf;
  --ground: #e8dfcf;
  --surface: #fffdf7;
  /* Semantic tones: pages use these instead of hard-coded hex so dark mode stays legible. */
  --tone-positive: #2b6b3a;
  --tone-hit: #386b2d;
  --tone-miss: #9b3027;
  --tone-analysis: #704b12;
  --tone-external: #315b68;
  --tone-record: #8b2d24;
  --ink: #20211e;
  --muted: #68635a;
  --rule: #b8ae9d;
  --accent: #7d2e24;
  --accent-dark: #61221a;
  --blue: #315b68;
  --unknown: #315b68;
  /* Gold-and-black accent (editor 2026-10-02: start from black and gold, mixed into the existing
   * scheme, never the whole palette; docs/design-guidelines.md rule 17). Accents only: marks,
   * badges, rules, hover and the folded-section cue. --gold is a mark that clears 3:1 on paper;
   * --gold-ink is gold you can set text in; --gold-fill always carries --on-gold text. */
  --gold: #9c7300;
  --gold-ink: #6e5200;
  --gold-fill: #f2c230;
  --gold-wash: #f7e7b0;
  --on-gold: #161513;
  --night: #161513;
  /* Color jobs (design rule 27, revised 2026-10-04: "don't use gold when proper data visualization
   * requires a range of colors"). Gold is Altoona's identity color and the brand mark only; the
   * --altoona-* names are the ones new code reads, the --gold-* names above stay as aliases.
   * Status reads in the expected red, amber, green and blue, always beside a word or glyph.
   * Structure (section bars, kickers, folds, timelines, the Settings card's rule) takes the area
   * tone, one per part of the site, set on html[data-area] by site-shell.js from the current menu.
   * Every mark clears 3:1 and every -ink 4.5:1 on paper and surface in both themes. */
  --altoona: var(--gold);
  --altoona-ink: var(--gold-ink);
  --altoona-fill: var(--gold-fill);
  --altoona-wash: var(--gold-wash);
  --on-altoona: var(--on-gold);
  --status-good: #1f7a3a;
  --status-good-ink: #1b6632;
  --status-good-wash: #dff0e3;
  --status-warn: #a85a00;
  --status-warn-ink: #8a4a00;
  --status-warn-wash: #fbe6cc;
  --status-bad: #b3261e;
  --status-bad-ink: #9b2018;
  --status-bad-wash: #f9dcd8;
  --status-info: #1d5fb0;
  --status-info-ink: #194f93;
  --status-info-wash: #dbe7f7;
  --on-status: #fffdf7;
  --area-council: #315b68;
  --area-police: #a6317d;
  --area-local: #2b6b3a;
  --area-tools: #0f766e;
  --area-news: #7d2e24;
  --area-accent: var(--accent);
  --focus: var(--accent-dark);
  --on-night: #f2c230;
  /* 4.0 tokens (design rule 31): one type scale, one spacing scale, one corner and one density
   * factor that every shared component reads, so a page inherits the coat instead of setting its
   * own sizes. --density is 1 (Comfortable, the default) or .66 under Settings > Density >
   * Compact (html[data-density="compact"]) and inside any .density-compact block. */
  --font-read: Georgia, "Times New Roman", serif;
  --font-ui: Arial, Helvetica, sans-serif;
  --step--2: .68rem;
  --step--1: .8rem;
  --step-0: .92rem;
  --step-1: 1.08rem;
  --step-2: 1.3rem;
  --step-3: clamp(1.5rem, 4vw, 2.1rem);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --radius: 3px;
  --density: 1;
  --row-alt: color-mix(in srgb, var(--paper-deep) 32%, var(--surface));
  --row-hover: color-mix(in srgb, var(--paper-deep) 70%, var(--surface));
  --lift: 0 1px 2px rgba(52, 43, 29, .08);
}
:root[data-density="compact"], .density-compact { --density: .66; }
.density-comfortable { --density: 1; }

html[data-theme="dark"] {
  --paper: #1d1c19;
  --paper-deep: #141412;
  --ground: #141412;
  --surface: #25231f;
  --tone-positive: #8fd19e;
  --tone-hit: #a7dc8a;
  --tone-miss: #ff9b8c;
  --tone-analysis: #e3b867;
  --tone-external: #8fc3d1;
  --tone-record: #ff9b8c;
  --ink: #f8f4ed;
  --muted: #d1cac0;
  --rule: #7c756c;
  --accent: #f28b78;
  --accent-dark: #ffb4a8;
  --blue: #8ed3e4;
  --unknown: #8ed3e4;
  --gold: #f2c230;
  --gold-ink: #f5cf55;
  --gold-fill: #f2c230;
  --gold-wash: #3a3220;
  --on-gold: #161513;
  --night: #0d0d0c;
  --status-good: #5fc37d;
  --status-good-ink: #8fd9a3;
  --status-good-wash: #1f3326;
  --status-warn: #f0a04b;
  --status-warn-ink: #f5b86f;
  --status-warn-wash: #3a2a12;
  --status-bad: #ff8a80;
  --status-bad-ink: #ffa59c;
  --status-bad-wash: #3d1f1c;
  --status-info: #7eb0f2;
  --status-info-ink: #9cc3f6;
  --status-info-wash: #1b2b40;
  --on-status: #1d1c19;
  --area-council: #8ed3e4;
  --area-police: #d66aa8;
  --area-local: #8fd19e;
  --area-tools: #5ed3c6;
  --area-news: #f28b78;
  --focus: var(--accent);
  --on-night: #f2c230;
  --lift: 0 1px 2px rgba(0, 0, 0, .4);
}

/* A word or link longer than the line (a headline set in a wider font than expected, a source
   URL) breaks instead of pushing the page sideways on a phone. break-word leaves table and
   grid sizing alone; it only breaks a word that cannot fit its line. */
main { overflow-wrap: break-word; }

/* The page sheet (design rule 25): one paper sheet per page, set here once instead of per page.
   Laptops get the 1060px sheet (a page may set --sheet-width); a wide monitor gets a wider sheet
   so figures and tables show more at once, while running text keeps a readable measure (about
   78 characters, the rule's prose cap below). A phone drops the sheet's margins and shadow so the
   text gets the whole width with a 16px gutter, and a short screen (a phone on its side, a split)
   trims the sheet's top and bottom margins so the page starts higher. */
main {
  width: min(var(--sheet-width, 1060px), calc(100% - 32px));
  margin: 24px auto;
  padding: clamp(24px, 5vw, 58px);
  background: var(--paper);
  box-shadow: 0 16px 36px rgba(52, 43, 29, .16);
}
@media (min-width: 1500px) { main { width: min(max(var(--sheet-width, 1060px), 1240px), calc(100% - 64px)); } }
@media (max-height: 560px) and (min-width: 561px) {
  main { margin-block: 10px; padding-block: 18px; }
  main > header h1 { font-size: clamp(1.7rem, 9vh, 2.5rem); line-height: 1.05; }
}
@media (max-width: 560px) {
  main, html[data-theme="dark"] main { width: 100%; margin: 0; padding: 20px 16px 28px; box-shadow: none; }
}
/* Settings > Density: Compact also trims the sheet's own margins and padding (rule 31). */
:root[data-density="compact"] main { margin-block: 14px; padding: clamp(18px, 3.5vw, 40px); }
@media (max-width: 560px) { :root[data-density="compact"] main { margin: 0; padding: 14px 12px 22px; } }
main :is(section, article, details) :is(p:not(.series-legend), :is(ul, ol):not([class]) > li, .method-list > li, .demo-keys > li) { max-width: 78ch; }

/* The hidden attribute always hides. Without this, any component that sets its own display
   (.stat-row's grid, a flex toolbar) overrode the browser's [hidden] rule and stayed visible,
   which is why several components carried their own [hidden] patch. */
[hidden] { display: none !important; }

/* A link no page or component styles takes the site's accent, never the browser's default blue
   and purple (which also failed contrast on the dark theme). Zero specificity (:where), so every
   page and component link rule still wins. */
:where(a:link, a:visited) { color: var(--accent-dark, #61221a); text-underline-offset: 3px; }

/* AMOLED black (Settings > Dark style, editor 2026-10-03, not the default): the dark theme on
   pure black for OLED screens. Only the surfaces and rules change; borders stay 3:1 on black and
   text, links and the gold marks keep the dark theme's colors, which clear contrast on black too. */
html[data-theme="dark"][data-dark="amoled"] {
  --paper: #000;
  --paper-deep: #000;
  --ground: #000;
  --surface: #0e0e0d;
  --rule: #77716a;
  --gold-wash: #2a2414;
  --night: #000;
}
html[data-theme="dark"][data-dark="amoled"] main { box-shadow: none; }

html[data-theme="dark"] body {
  background: var(--ground, var(--paper-deep));
  color: var(--ink);
}

html[data-theme="dark"] main {
  background: var(--paper);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] :is(
  .card, .freshness, .interpretation, .visit-estimate, .local-corner, .note,
  .status, .record-item, .meeting-card, .meeting-tonight, .source-card,
  .source-footer, .profile-card, .profile-year-card, .period-card,
  .directory-card, .member-summary, .member-disclosure,
  .profile-position-summary div, .profile-meeting, .empty-state, .metric,
  .metric-card, .methodology, .directory-group, .view-tab[aria-selected="true"],
  .category-list li, .notice, .unknowns, .contact-form, .access-gate,
  .alpr-council-year, input, textarea, select
) {
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="dark"] .calculated-miss-card {
  background: #4d1d19;
  border-color: #ff7c68;
  color: #fff1ed;
}

html[data-theme="dark"] .calculated-miss-card .figure { color: #ff9b8c; }
html[data-theme="dark"] .homepage-story-badge.iowa-record { color: #c7df91; }

:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--blue, #315b68);
  outline-offset: 3px;
}

/* One Settings menu (site-shell.js, 2026-10-02): a gear button in the header opens Theme, Detail
   and Heat coloring, each a labeled group with a one-line note and a row of choices. Square
   corners, the rule-colored border and the small uppercase labels match the search box and nav. */
.site-settings-control { position: relative; }
/* A closed <details> must never paint its menu, whatever display the menu's own rule sets. */
.site-settings-control:not([open]) > .site-settings-menu { display: none; }
.site-settings-control > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--rule, #b8ae9d);
  background: var(--surface, #fffdf7);
  color: var(--ink, #20211e);
  cursor: pointer;
  font: 700 0.68rem/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  list-style: none;
}
.site-settings-control > summary::-webkit-details-marker { display: none; }
.site-settings-control > summary::marker { content: ""; }
.site-settings-gear { flex: none; color: var(--muted, currentColor); transition: transform 0.2s ease; }
.site-settings-control > summary:hover .site-settings-gear,
.site-settings-control > summary:focus-visible .site-settings-gear,
.site-settings-control[open] .site-settings-gear { color: var(--area-accent, currentColor); }
.site-settings-control[open] .site-settings-gear { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .site-settings-gear { transition: none; } }
.site-settings-control > summary:hover,
.site-settings-control > summary:focus-visible,
.site-settings-control[open] > summary {
  border-color: var(--accent-dark, #61221a);
  background: var(--accent-dark, #61221a);
  color: var(--paper, #f5f0e6);
}
.site-settings-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 0;
  width: min(300px, calc(100vw - 24px));
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding: 4px 12px 10px;
  border: 1px solid var(--rule, #b8ae9d);
  background: var(--paper, #f5f0e6);
  box-shadow: 0 8px 22px rgba(52, 43, 29, 0.16);
  color: var(--ink, #20211e);
  letter-spacing: normal;
  text-transform: none;
}
.site-settings-group { padding: 10px 0; border-top: 1px solid var(--rule, #b8ae9d); }
/* Section headings (Display, Data, Map): a short gold bar over a small uppercase label, the same
   cue the design pass gives section headings across the site. */
.site-settings-section {
  margin: 12px 0 0;
  padding-top: 8px;
  border-top: 2px solid var(--ink, #20211e);
  color: var(--accent-dark, #61221a);
  font: 700 0.66rem/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.site-settings-section:first-child { margin-top: 6px; border-top: 0; padding-top: 4px; }
.site-settings-section + .site-settings-group { border-top: 0; padding-top: 6px; }
.site-settings-menu { border-top: 3px solid var(--area-accent, #7d2e24); }
.site-settings-group:first-child { border-top: 0; }
.site-settings-label {
  display: block;
  color: var(--muted, #6b6357);
  font: 700 0.62rem/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.site-settings-help {
  margin: 4px 0 8px;
  color: var(--ink, #20211e);
  font: 0.78rem/1.4 Arial, Helvetica, sans-serif;
}
.site-settings-choices { display: flex; border: 1px solid var(--rule, #b8ae9d); }
.site-settings-choices.site-settings-select-row { border: 0; }
.site-settings-select {
  width: 100%;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--rule, #b8ae9d);
  border-radius: 0;
  background: var(--surface, #fffdf7);
  color: var(--ink, #20211e);
  font: 700 0.74rem/1.2 Arial, Helvetica, sans-serif;
}
.site-settings-select:focus-visible { outline: 2px solid var(--focus, #61221a); outline-offset: 1px; }
.site-settings-option {
  flex: 1 1 0;
  min-height: 32px;
  padding: 6px 8px;
  border: 0;
  border-left: 1px solid var(--rule, #b8ae9d);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: 700 0.66rem/1.1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.site-settings-option:first-child { border-left: 0; }
.site-settings-option:hover { background: var(--paper-deep, rgba(0, 0, 0, 0.06)); }
.site-settings-option[aria-pressed="true"] {
  background: var(--accent-dark, #61221a);
  box-shadow: inset 0 -3px 0 var(--area-accent, #7d2e24);
  color: var(--paper, #f5f0e6);
}
.site-settings-foot p { margin: 0 0 8px; }
.site-settings-reset {
  padding: 6px 10px;
  border: 1px solid var(--rule, #b8ae9d);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: 700 0.64rem/1.1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-settings-reset:hover, .site-settings-reset:focus-visible { border-color: var(--accent-dark, #61221a); }
.site-settings-foot {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--rule, #b8ae9d);
  color: var(--muted, #6b6357);
  font: 0.7rem/1.4 Arial, Helvetica, sans-serif;
}
/* Compact layout (editor 2026-10-03, "more compact/dense"): each setting is one row, its label
   on the left and its choices on the right, with a short muted note under the label; the whole
   menu fits one desktop screen. Phones stack the choices under the label. */
.site-settings-menu { width: min(390px, calc(100vw - 24px)); padding: 2px 10px 8px; }
.site-settings-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label choices" "help help";
  align-items: center;
  column-gap: 10px;
  padding: 6px 0;
}
.site-settings-label { grid-area: label; color: var(--ink, #20211e); font-size: 0.64rem; }
.site-settings-help { grid-area: help; margin: 1px 0 0; color: var(--muted, #6b6357); font-size: 0.7rem; line-height: 1.3; }
.site-settings-choices { grid-area: choices; }
/* A row with four or more choices (Map base, Value colors) puts them under its label, so the label
   never squeezes to one letter a line on a phone. */
.site-settings-group:has(> .site-settings-choices > :nth-child(4)) { grid-template-areas: "label label" "choices choices" "help help"; row-gap: 4px; }
.site-settings-group:has(> .site-settings-choices > :nth-child(4)) > .site-settings-choices { justify-self: start; max-width: 100%; flex-wrap: wrap; }
.site-settings-option { flex: 0 0 auto; min-height: 26px; padding: 4px 8px; font-size: 0.6rem; }
.site-settings-select { width: auto; min-height: 26px; padding: 2px 6px; font-size: 0.68rem; }
.site-settings-section { margin-top: 6px; padding-top: 6px; font-size: 0.6rem; }
.site-settings-section:first-child { margin-top: 4px; padding-top: 2px; }
.site-settings-section + .site-settings-group { padding-top: 4px; }
.site-settings-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; }
.site-settings-foot p { margin: 0; font-size: 0.66rem; }
.site-settings-reset { flex: none; padding: 4px 8px; font-size: 0.6rem; }
/* Grouped (editor 2026-10-03, "also group them"): Display, Data and Map are each one bordered
   block with a gold-washed head band; rows inside share the block's border and thin dividers. */
.site-settings-menu { display: grid; gap: 8px; padding: 8px; }
.site-settings-block { border: 1px solid var(--rule, #b8ae9d); background: var(--surface, transparent); }
.site-settings-block > .site-settings-section,
.site-settings-block > .site-settings-section:first-child {
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border-bottom: 1px solid var(--rule, #b8ae9d);
  background: var(--paper-deep, transparent);
  color: var(--ink, #20211e);
}
.site-settings-block > .site-settings-group { padding: 5px 8px; border-top: 1px solid var(--rule, #b8ae9d); }
.site-settings-block > .site-settings-section + .site-settings-group { border-top: 0; padding-top: 5px; }
.site-settings-menu > .site-settings-foot { border-top: 0; padding-top: 0; }
@media (max-width: 500px) {
  .site-settings-group { row-gap: 3px; }
  .site-settings-option, .site-settings-select { min-height: 32px; }
}
.utility.site-utility-bar .site-settings-control { flex: 0 0 auto; }
@media (max-width: 500px) {
  /* Phones show the gear alone at a 44px touch target; its aria-label names every choice. */
  .site-settings-control > summary { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .site-settings-word { display: none; }
  .site-settings-option, .site-settings-select { min-height: 32px; }
}

/* Density policy: per-page "Expand all / Collapse all", mounted next to the "On this page" list
   (or at the top of <main> on a page without one) by site-shell.js once a page has 3+ collapsible
   sections -- the same threshold page-contents.js uses before it shows "On this page" at all. */
.page-density-toggle {
  display: inline-block;
  margin: 10px 0;
  padding: 6px 12px;
  border: 1px solid var(--rule, #b8ae9d);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: 700 0.7rem/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.page-density-toggle:hover,
.page-density-toggle:focus-visible {
  background: var(--accent-dark, #61221a);
  color: var(--paper, #f5f0e6);
  border-color: var(--accent-dark, #61221a);
}
@media print { .page-density-toggle, .site-settings-control { display: none; } }

/* Header strip (.utility), built by site-shell.js on every page. Two rows:
   1. identity (place, desk) on the left; the search box and the theme control on the right.
   2. live figures: the reads counter on the left, the ALPR figures on the right.
   Every page still carries its own copy-pasted `.utility { ... }` rule for base typography;
   these compound selectors (two-plus classes) win over that single-class rule regardless of
   source order. Nothing here clips (the strip used to be `overflow: hidden`, which cut off the
   theme menu and left only its top border showing): each row wraps instead, and every clause
   is its own nowrap unit, so a narrow screen gets more lines, never sideways scroll or a
   dropped figure. */
/* Reserve the header strip's and the nav's built height before site-shell.js (deferred) builds
   them, so the whole page doesn't jump down once it runs (it was most of every page's layout
   shift: the strip grows from one line to two rows plus the ALPR figures, and each page's own
   link list becomes the shared nav bar). Only when scripting is on; without scripts the page's
   own header line and nav links show at their natural size. Heights are the smallest built
   height in each width band, so a page never gets a blank gap, only a smaller jump. */
@media (scripting: enabled) {
  .utility { min-height: 75px; box-sizing: border-box; }
  main > nav:not(.site-navigation) { height: 57px; overflow: hidden; box-sizing: border-box; }
}
@media (scripting: enabled) and (max-width: 1099px) { .utility { min-height: 89px; } }
@media (scripting: enabled) and (max-width: 800px) { main > nav:not(.site-navigation) { height: 65px; } }
@media (scripting: enabled) and (max-width: 500px) { .utility { min-height: 114px; } }
@media (scripting: enabled) and (max-width: 360px) { .utility { min-height: 142px; } }

.utility.site-utility-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  gap: 8px;
  padding: 10px 0;
  overflow: visible;
}
.utility.site-utility-bar span { margin-top: 0; }
.utility.site-utility-bar .utility-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  min-width: 0;
}
.utility.site-utility-bar .utility-row > * { min-width: 0; }
.utility.site-utility-bar .utility-place,
.utility.site-utility-bar .utility-desk { display: inline; white-space: nowrap; }
.utility.site-utility-bar .utility-row-figures:empty { display: none; }

.utility.site-utility-bar #pageview-counter {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em;
  font-variant-numeric: tabular-nums;
}
.utility-reads-detail { color: var(--muted, #68635a); }

/* The ALPR figures: kicker, the two vendor-reported 30-day totals (the accent), this tab's
   estimate (quieter), then which vendors and their data dates. Each clause wraps as a unit. */
.utility.site-utility-bar #pageview-counter { margin-left: auto; }
.utility.site-utility-bar #alpr-tracker-teaser { margin-left: 0; white-space: normal; }
.utility.site-utility-bar #alpr-tracker-teaser a.utility-alpr-link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2em 0.45em;
  color: var(--accent, inherit);
  font-weight: 700;
  text-decoration: none;
}
.utility-alpr-link > span { white-space: nowrap; }
/* The visit clause is the longest; at 320px with larger text it wraps between its words (each
   highlighted number stays whole) rather than pushing the page sideways. */
.utility-alpr-link > span.utility-alpr-detail { white-space: normal; }
.utility-alpr-visit-value { white-space: nowrap; }
.utility-alpr-link:hover .utility-alpr-figure,
.utility-alpr-link:focus-visible .utility-alpr-figure { text-decoration: underline; text-underline-offset: 3px; }
.utility-alpr-figure { color: var(--ink, inherit); font-weight: 400; }
.utility-alpr-value {
  color: var(--accent-dark, inherit);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.utility-alpr-detail {
  color: var(--muted, #68635a);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.utility-alpr-sep { color: var(--rule, #b8ae9d); font-weight: 400; }
/* Header accents (editor 2026-10-02, "use colors to POP"): the 30-day totals keep the site's
   accent, the hotlist hits and this visit's estimate take the gold ink, and the arrow is gold;
   the words around them stay muted, so the numbers are what the eye lands on. */
.utility-alpr-value.utility-alpr-hits,
.utility.site-utility-bar .utility-alpr-visit-value {
  display: inline;
  padding: 0 3px;
  background: var(--paper-deep, transparent);
  color: var(--ink, inherit);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.utility-alpr-arrow { color: var(--accent-dark, inherit); font-weight: 700; }
.utility-alpr-link:hover .utility-alpr-arrow,
.utility-alpr-link:focus-visible .utility-alpr-arrow { color: var(--accent, inherit); }
.utility.site-utility-bar #pageview-counter .utility-reads-now,
.utility.site-utility-bar #pageview-counter .utility-reads-today { color: var(--ink, inherit); }

/* Search box: always visible, never an icon-only flyout. The glass is drawn from a circle and a
   handle (border tricks, not an emoji or SVG) so it stays one flat color in both themes. */
.utility.site-utility-bar .utility-tools {
  display: flex;
  flex: 1 1 240px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 460px;
  margin-left: auto;
}
.utility.site-utility-bar #pageview-counter:not(:empty) + .utility-tools { margin-left: 0; }
/* A page's own margin rules (e.g. /votes' spacing between stacked blocks) must not drop the theme
   button below the search box. */
.utility.site-utility-bar .utility-tools > * { margin: 0; }
/* The box keeps a usable width; the Detail and theme controls wrap under it rather than squeeze
   it below that. site-shell.js picks the longest hint that fits the box whole. */
.utility.site-utility-bar .site-search-control { position: relative; flex: 1 1 0; min-width: min(100%, 6.5rem); }
/* Wider screens: the box never shrinks below the full hint. Where the reads counter and the
   place line fill the first row, the tools wrap onto their own line instead of squeezing it. */
@media (min-width: 481px) {
  .utility.site-utility-bar .utility-tools,
  .utility.site-utility-bar #pageview-counter:not(:empty) + .utility-tools { flex-wrap: nowrap; min-width: max-content; margin-left: auto; }
  .utility.site-utility-bar .site-search-control { min-width: min(100%, 15rem); }
}
.site-search-field { position: relative; display: flex; align-items: center; }
.site-search-glass {
  position: absolute;
  left: 10px;
  top: 50%;
  display: block;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border: 2px solid var(--muted, #68635a);
  border-radius: 50%;
  pointer-events: none;
}
.site-search-glass::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 2px;
  height: 6px;
  background: var(--muted, #68635a);
  transform: rotate(-45deg);
  transform-origin: top;
}
.site-search-input {
  width: 100%;
  min-height: 34px;
  padding: 6px 10px 6px 30px;
  border: 1px solid var(--rule, #b8ae9d);
  border-radius: 0;
  background: var(--surface, #fffdf7);
  color: var(--ink, #20211e);
  font: 0.85rem/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: normal;
  text-transform: none;
}
.site-search-input::placeholder { color: var(--muted, #68635a); opacity: 1; }
.site-search-input:focus-visible { outline-offset: 1px; }
/* The dropdown is position: fixed and placed by site-shell.js from the input's live position. */
.site-search-panel { color: var(--ink, #20211e); text-transform: none; letter-spacing: normal; }
.site-search-panel {
  position: fixed;
  z-index: 40;
  width: min(420px, calc(100vw - 16px));
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--rule, #b8ae9d);
  background: var(--paper, #f5f0e6);
  box-shadow: 0 8px 22px rgba(52, 43, 29, 0.16);
}
.site-search-panel[hidden] { display: none; }
.site-search-group-label {
  margin: 10px 6px 2px;
  color: var(--muted, #68635a);
  font: 700 0.64rem/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-search-listbox > .site-search-group:first-child > .site-search-group-label { margin-top: 4px; }
.site-search-result {
  display: block;
  width: 100%;
  padding: 8px 6px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.site-search-result:hover,
.site-search-result:focus-visible,
.site-search-result[aria-selected="true"] {
  background: var(--accent-dark, #61221a);
  color: var(--paper, #f5f0e6);
}
.site-search-result-title { display: block; font: 700 0.82rem/1.35 Arial, Helvetica, sans-serif; }
.site-search-result-excerpt {
  display: block;
  margin-top: 2px;
  color: inherit;
  opacity: 0.85;
  font: 0.74rem/1.4 Georgia, "Times New Roman", serif;
}
.site-search-result-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid currentColor;
  vertical-align: middle;
  font: 700 0.6rem/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.site-search-empty { padding: 10px 6px; color: var(--muted, #68635a); font: 0.78rem/1.4 Arial, Helvetica, sans-serif; }
.site-search-seeall {
  display: block;
  margin-top: 6px;
  padding: 8px 6px;
  border-top: 1px solid var(--rule, #b8ae9d);
  color: var(--accent-dark, #61221a);
  text-align: center;
  text-decoration: none;
  font: 700 0.72rem/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.site-search-seeall:hover, .site-search-seeall:focus-visible { text-decoration: underline; }
.site-search-hint { margin: 2px 6px 4px; color: var(--muted, #68635a); font: 0.68rem/1.4 Arial, Helvetica, sans-serif; text-align: center; text-transform: none; letter-spacing: normal; }
.site-search-result mark, .site-search-result-excerpt mark { background: transparent; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }


@media (max-width: 480px) {
  /* Phone: the page's own heading restates the place/desk right below the strip, so the first
     row is just the search box and the theme toggle (a 44px touch target), and the ALPR figures
     keep the second row. */
  .utility.site-utility-bar .utility-place,
  .utility.site-utility-bar .utility-desk { display: none; }
  .utility.site-utility-bar .utility-tools { flex-basis: 100%; max-width: none; }
  .utility.site-utility-bar .site-search-input { min-height: 44px; font-size: 1rem; }
  /* The reads counter and the vendor/as-of note step aside here (both one tap away: the
     counter on /about, the per-vendor figures and dates on /alpr/tracker). */
  .utility.site-utility-bar #pageview-counter { display: none; }
}

/* Primary navigation: a slim row of section triggers with fly-out panels.
   Pages style a bare `nav`; these classed selectors override that. */
.site-navigation {
  position: relative;
  display: block;
  padding: 10px 0;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: normal;
  text-transform: none;
}
.site-nav-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.site-navigation .site-nav-home,
.site-navigation .site-nav-label,
.site-nav-trigger,
.site-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: 700 .74rem/1 Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
.site-navigation .site-nav-home { margin-left: -12px; }
/* A tab is a label link plus a chevron button that read as one pill. */
.site-navigation .site-nav-label { padding-right: 2px; border-radius: 999px 0 0 999px; }
.site-nav-trigger { justify-content: center; min-width: 28px; padding: 0 12px 0 6px; border-radius: 0 999px 999px 0; }
.site-nav-trigger::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease, margin .15s ease;
}
.site-nav-trigger[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
.site-navigation .site-nav-home:hover,
.site-nav-group:hover > .site-nav-label,
.site-nav-group:hover > .site-nav-trigger,
.site-nav-group:has(> .site-nav-trigger[aria-expanded="true"]) > .site-nav-label,
.site-nav-trigger[aria-expanded="true"],
.site-nav-toggle:hover,
.site-nav-toggle[aria-expanded="true"] { background: var(--paper-deep); }
.site-navigation .site-nav-home[aria-current="page"],
.site-nav-group[data-current="true"] > .site-nav-label,
.site-nav-group[data-current="true"] > .site-nav-trigger { color: var(--accent-dark); box-shadow: inset 0 -2px 0 var(--accent-dark); border-radius: 0; }
/* The name of a page outside the five sections, marked current like a tab (not a link). */
.site-nav-here[hidden] { display: none; }
.site-nav-here {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  color: var(--accent-dark);
  box-shadow: inset 0 -2px 0 var(--accent-dark);
  font: 700 .74rem/1 Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-footer-sitemap a[aria-current="page"] { color: var(--accent-dark); font-weight: 700; }
.site-nav-group { position: relative; display: inline-flex; }
.site-nav-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  gap: 2px;
  width: min(320px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(52, 43, 29, .18);
  animation: site-nav-in .14s ease-out;
}
.site-nav-panel[hidden], .site-nav-drawer[hidden] { display: none; }
/* Keep the right-most panels inside the page. */
.site-nav-group:nth-last-of-type(-n+2) > .site-nav-panel { left: auto; right: 0; }
@keyframes site-nav-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.site-navigation .site-nav-item {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
}
.site-navigation .site-nav-item:hover,
.site-navigation .site-nav-item:focus-visible { background: var(--paper-deep); }
.site-navigation .site-nav-item[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent-dark); }
.site-navigation .site-nav-item,
.site-navigation .site-nav-item * { letter-spacing: normal; text-transform: none; }
.site-nav-drawer-heading, .site-navigation .site-nav-label, .site-nav-trigger, .site-nav-toggle, .site-navigation .site-nav-home { white-space: nowrap; }
.site-nav-item-label { color: var(--accent-dark); font: 700 .88rem/1.3 Arial, Helvetica, sans-serif; }
/* The page a cross-menu section link lands on ("Public pay > Police pay"), quieter than the item. */
.site-nav-parent, .site-nav-parent-mark { color: var(--muted); font-weight: 400; }
.site-nav-item-detail { color: var(--muted); font: .78rem/1.35 Arial, Helvetica, sans-serif; }
.site-nav-toggle { display: none; margin-left: auto; border: 1px solid var(--rule); }
.site-nav-toggle::before {
  content: "";
  width: 14px;
  height: 10px;
  background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
}
.site-nav-drawer { display: grid; gap: 14px; margin-top: 10px; padding: 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); }
.site-navigation .site-nav-drawer-heading { display: block; margin: 0 0 4px; padding: 6px 12px; border-radius: 8px; color: var(--muted); font: 700 .68rem/1.4 Arial, Helvetica, sans-serif; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.site-navigation .site-nav-drawer-heading::after { content: " \203A" / ""; }
.site-navigation .site-nav-drawer-heading:hover,
.site-navigation .site-nav-drawer-heading:focus-visible { background: var(--paper-deep); color: var(--accent-dark); }
@media (min-width: 801px) { .site-nav-drawer { display: none !important; } }
@media (max-width: 800px) {
  .site-nav-group { display: none; }
  .site-nav-toggle { display: inline-flex; min-height: 44px; }
  .site-navigation .site-nav-home { min-height: 44px; }
  /* Phones: Home, the page name, and Menu share one row that never wraps; the name gives way
     (site-shell.js hides it when it would be cut off). */
  .site-nav-bar { flex-wrap: nowrap; }
  .site-nav-here { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; line-height: 36px; }
}

/* Footer: one block on every page. Pages style their own footer box (rule, margin, font), and
   a few set it to flex, so the shell sets the layout here. At desktop the share block sits beside
   the site map; below 1000px it sits above. The site map's groups (built from the menus, plus
   About) flow into balanced columns: a short group stacks under another instead of leaving a
   tall empty column, and a new group needs no layout change. Two columns on phones. */
.site-footer { display: block; }
.site-footer-main {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(0, 4fr);
  gap: 18px 40px;
  align-items: start;
}
/* The site map is a <nav>, and many pages style bare `nav` (flex, caps, a rule): reset all of it. */
.site-footer .site-footer-sitemap {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  columns: 4 150px;
  column-gap: 28px;
  font: .8rem/1.5 Arial, Helvetica, sans-serif;
}
@media (max-width: 1000px) {
  .site-footer-main { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .site-footer .site-footer-sitemap { columns: 2; column-gap: 16px; }
}
/* Room under the last footer row so the floating pills (the ALPR estimate, bottom right; the
   "On this page" jump button, bottom left; both 14px up, the ALPR pill up to 54px tall when its
   line wraps) never cover a line. Reserved whenever a pill exists so the page does not jump when it appears. The footer
   is the one place this room lives: the page's own bottom padding and margin under a footer
   are dropped, so every page ends the same short distance below the footer's last line. */
body:has(#alpr-edge-tracker, .page-jump) .site-footer { padding-bottom: 76px; }
main:has(> .site-footer) { padding-bottom: 0; margin-bottom: 0; }
/* 6px between links keeps each 19px link's 24px tap area clear of its neighbors (WCAG 2.5.8). */
.site-footer-group { display: grid; align-content: start; gap: 6px; margin: 0 0 18px; break-inside: avoid; }
.site-footer-sitemap a { color: var(--ink); text-decoration: none; text-transform: none; letter-spacing: normal; overflow-wrap: anywhere; }
.site-footer-sitemap a:hover, .site-footer-sitemap a:focus-visible { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.site-footer-sitemap a.site-footer-whats-new { color: var(--muted); }
/* Section hub: the card grid under an area root page's header, one card per page the menu lists
 * there (site-shell.js). Dense by default; a phone shows two columns of titles. */
.section-hub.section-hub { display: block; margin: var(--space-3) 0 var(--space-5); padding: 0; border: 0; font: var(--step-0)/1.4 var(--font-read); letter-spacing: normal; text-transform: none; }
.section-hub .section-hub-heading { margin: 0 0 var(--space-2); }
.section-hub-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--space-2); }
.section-hub-card { display: grid; gap: 2px; text-transform: none; letter-spacing: normal; align-content: start; min-height: 24px; padding: var(--space-2) var(--space-3); border: 1px solid var(--rule); border-left: 3px solid var(--area-accent, var(--accent)); border-radius: var(--radius); background: var(--surface); box-shadow: var(--lift); color: var(--ink); text-decoration: none; }
.section-hub-card:hover, .section-hub-card:focus-visible { background: var(--row-hover); border-color: var(--accent-dark); }
.section-hub-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.section-hub-title { font: 700 var(--step-0)/1.3 var(--font-ui, Arial, Helvetica, sans-serif); color: var(--ink); }
.section-hub-card:hover .section-hub-title, .section-hub-card:focus-visible .section-hub-title { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.section-hub-blurb { font: var(--step--1)/1.4 var(--font-read, Georgia, serif); color: var(--muted); }
.section-hub-when { font: var(--step--2)/1.4 var(--font-ui, Arial, Helvetica, sans-serif); color: var(--muted); letter-spacing: .02em; }
@media (max-width: 640px) {
  .section-hub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-hub-blurb { display: none; }
}
.site-footer-heading { margin: 0 0 4px; color: var(--muted); font: 700 .68rem/1.4 Arial, Helvetica, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
/* The heading is a link to the area's root page: it keeps the heading look at rest and the
 * site's link hover, focus and 24px tap target. */
.site-footer-sitemap .site-footer-heading a { display: inline-flex; align-items: center; min-height: 24px; color: inherit; text-transform: inherit; letter-spacing: inherit; }
.site-footer-sitemap .site-footer-heading a[aria-current="page"] { color: var(--accent-dark); }

/* Page feedback (site-shell.js): one quiet row above the footer on every page, which opens into a
   (Made quieter 2026-10-03, editor: "more subtle under the main page's content": smaller muted type,
   borderless thumbs that show a border on hover or focus, less space; targets stay 28px tall.)
   short follow-up (reason chips, a note, Send or No thanks) and settles into one thank-you line.
   Pages style bare section, p, form, textarea and button (borders, caps, flex, colors), so every
   property the row relies on is set here with a class that outranks those rules. */
.page-feedback.page-feedback {
  display: grid;
  gap: 8px;
  margin: 20px 0 0;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid var(--rule);
  background: none;
  color: var(--muted);
  font: .74rem/1.4 Arial, Helvetica, sans-serif;
  text-transform: none;
  letter-spacing: normal;
}
.page-feedback .page-feedback-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.page-feedback .page-feedback-question { margin: 0; font-weight: 400; }
.page-feedback .page-feedback-thumbs { display: flex; gap: 4px; }
.page-feedback .page-feedback-thumb,
.page-feedback .page-feedback-chip,
.page-feedback .page-feedback-details,
.page-feedback .page-feedback-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  margin: 0;
  padding: 2px 10px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: 700 .78rem/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .02em;
  text-transform: none;
}
.page-feedback .page-feedback-chip { border-radius: 999px; font-weight: 400; }
.page-feedback .page-feedback-thumb { border-color: transparent; color: var(--muted); font-weight: 400; }
.page-feedback .page-feedback-thumb svg { width: 14px; height: 14px; flex: none; }
.page-feedback .page-feedback-thumb[data-thumb="down"] svg { transform: rotate(180deg); }
.page-feedback button:hover:not(:disabled) { border-color: var(--accent-dark); color: var(--accent-dark); }
.page-feedback .page-feedback-thumb[aria-pressed="true"],
.page-feedback .page-feedback-chip[aria-pressed="true"] {
  border-color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent-dark) 12%, var(--surface));
  color: var(--ink);
}
.page-feedback .page-feedback-thumb:disabled { cursor: default; }
/* Second cues beyond color (rule 27): the picked thumb fills in and a picked chip gains a check. */
.page-feedback .page-feedback-thumb[aria-pressed="true"] svg path { fill: currentColor; }
.page-feedback .page-feedback-chip[aria-pressed="true"]::before { content: "\2713"; font-weight: 700; }
.page-feedback .page-feedback-recorded { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; color: var(--ink); }
.page-feedback .page-feedback-recorded[hidden] { display: none; }
.page-feedback .page-feedback-details[aria-expanded="true"] { border-color: var(--accent-dark); }
.page-feedback .page-feedback-thumb:disabled:not([aria-pressed="true"]) { display: none; }
.page-feedback .page-feedback-more {
  display: grid;
  gap: 10px;
  max-width: 640px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--area-accent);
  background: var(--surface);
  animation: page-feedback-open .18s ease-out;
}
.page-feedback .page-feedback-more[hidden] { display: none; }
@keyframes page-feedback-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .page-feedback .page-feedback-more { animation: none; } }
.page-feedback .page-feedback-prompt { margin: 0; font-weight: 700; }
.page-feedback .page-feedback-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.page-feedback .page-feedback-correction { margin: 0; color: var(--muted); }
.page-feedback .page-feedback-correction[hidden] { display: none; }
.page-feedback a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.page-feedback .page-feedback-note-label {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 2px 0 -4px;
  color: var(--ink);
  font: 700 .78rem/1.3 Arial, Helvetica, sans-serif;
  text-transform: none;
  letter-spacing: normal;
}
.page-feedback .page-feedback-optional { color: var(--muted); font-weight: 400; }
.page-feedback .page-feedback-input {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper, var(--surface));
  color: var(--ink);
  font: .85rem/1.4 Arial, Helvetica, sans-serif;
  resize: vertical;
}
.page-feedback .page-feedback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.page-feedback .page-feedback-actions .page-feedback-send { border-color: var(--ink); background: var(--ink); color: var(--paper, var(--surface)); }
.page-feedback .page-feedback-actions .page-feedback-send:hover:not(:disabled) { border-color: var(--accent-dark); background: var(--accent-dark); color: var(--paper, var(--surface)); }
.page-feedback .page-feedback-actions .page-feedback-skip { border-color: transparent; color: var(--muted); font-weight: 400; }
.page-feedback .page-feedback-privacy { flex: 1 1 220px; margin: 0; color: var(--muted); font-size: .74rem; }
.page-feedback .page-feedback-status { margin: 0; }
.page-feedback .page-feedback-status:empty { display: none; }
.page-feedback .page-feedback-check { color: var(--status-good-ink); font-weight: 700; }
.page-feedback.is-done .page-feedback-ask { display: none; }

#pageview-counter:empty,
#alpr-tracker-teaser:empty { display: none; }
#alpr-tracker-teaser { margin-left: auto; white-space: nowrap; }
#alpr-tracker-teaser a {
  color: var(--accent, inherit);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* The floating dock, bottom right: the "On this page" button and the ALPR estimate side by side,
   both square-cornered with the rule border, like the header's search box and Settings button.
   The dock itself takes no clicks, so the page under its empty part stays usable. */
.site-dock {
  position: fixed;
  z-index: 11;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: none;
}
.site-dock > * { pointer-events: auto; }
@media print { .site-dock { display: none !important; } }
#alpr-edge-tracker {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
  min-height: 34px;
  max-width: 100%;
  padding: 0 3px 0 10px;
  border: 1px solid var(--rule, #b8ae9d);
  border-left: 3px solid var(--accent, #7d2e24);
  border-radius: 0;
  background: var(--surface, #fffdf7);
  box-shadow: 0 6px 18px rgba(52, 43, 29, 0.22);
  color: var(--ink, #20211e);
  font: 0.8rem/1.2 Arial, Helvetica, sans-serif;
  opacity: 0.95;
}
.alpr-edge-link::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-radius: 50%;
  background: var(--tone-miss, #9b3027);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone-miss, #9b3027) 60%, transparent);
  animation: alpr-live 2s ease-out infinite;
  align-self: center;
}
@keyframes alpr-live {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone-miss, #9b3027) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .alpr-edge-link::before { animation: none; } }
#alpr-edge-tracker:hover, #alpr-edge-tracker:focus-within { opacity: 1; }
#alpr-edge-tracker[hidden] { display: none; }
.alpr-edge-link {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 2px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.alpr-edge-link:focus-visible, .alpr-edge-close:focus-visible {
  outline: 2px solid var(--accent-dark, #61221a);
  outline-offset: 2px;
}
.alpr-edge-label {
  color: var(--accent, #7d2e24);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.alpr-edge-value { color: var(--accent-dark, #61221a); font-size: 1rem; }
.alpr-edge-context { color: var(--muted, #68635a); }
.alpr-edge-hits { color: var(--tone-hit, #386b2d); font-weight: 700; }
/* Compact by default; details fly out on hover or keyboard focus. */
.alpr-edge-context,
.alpr-edge-hits {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  vertical-align: bottom;
  transition: max-width 0.25s ease, opacity 0.2s ease;
}
#alpr-edge-tracker:hover .alpr-edge-context,
#alpr-edge-tracker:hover .alpr-edge-hits,
#alpr-edge-tracker:focus-within .alpr-edge-context,
#alpr-edge-tracker:focus-within .alpr-edge-hits {
  max-width: 12em;
  opacity: 1;
}
#alpr-edge-tracker .alpr-edge-close { opacity: 0; transition: opacity 0.2s ease; }
#alpr-edge-tracker:hover .alpr-edge-close,
#alpr-edge-tracker:focus-within .alpr-edge-close { opacity: 1; }
@media (hover: none) {
  #alpr-edge-tracker .alpr-edge-close { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .alpr-edge-context, .alpr-edge-hits { transition: none; }
}
.alpr-edge-close {
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted, #68635a);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.alpr-edge-close:hover { background: var(--rule, #b8ae9d); color: var(--ink, #20211e); }

/* On phones the pill keeps its short "ALPR est. N" (the this-visit detail still waits for a
   press, hover or focus), so it never reads as an empty bubble. site-shell.js hides it
   outright while a chart, table or form control is under it. */
@media (max-width: 480px) {
  #alpr-edge-tracker { padding: 2px 2px 2px 6px; }
  .alpr-edge-link { padding: 4px 4px; align-items: center; }
  /* The pill still needs a real touch target, and the close button
     doubles its hit area without growing past the pill's own edge. */
  .alpr-edge-link { min-height: 30px; }
  .alpr-edge-close {
    position: relative;
    width: 30px;
    height: 30px;
  }
  .alpr-edge-close::after {
    content: "";
    position: absolute;
    inset: -7px;
  }
}
@media (max-width: 480px) and (hover: none) {
  /* No hover to reveal on: tapping the pill already opens the tracker, so
     make sure the tap target itself is a full 44px even while the pill looks
     small, rather than relying on the invisible ::after alone. */
  .alpr-edge-link, .alpr-edge-close { min-width: 44px; min-height: 44px; }
}

@media (max-width: 820px) {
  /* The utility bar's own tablet/phone rules live with `.site-utility-bar`
     above, which keeps it a single row at every width instead of the older
     stacked-block layout this used to switch to here. */
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.member-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 5px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;
}
.member-status {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font: 700 0.58rem/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.member-status.is-current { background: var(--tone-positive, #2b6b3a); color: var(--paper, #f5f0e6); }
.member-status.is-former { border: 1px solid var(--rule, #b8ae9d); color: var(--muted, #68635a); }
.term-countdown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted, #68635a);
  font: 700 0.62rem/1.3 Arial, Helvetica, sans-serif;
  text-decoration: none;
  white-space: nowrap;
}
.term-countdown-line {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--rule, #b8ae9d) 70%, transparent);
  overflow: hidden;
}
.term-countdown-line::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--term-fill, 50%);
  border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--term-tone, #2b6b3a) 55%, transparent), var(--term-tone, #2b6b3a));
}
.term-dates { flex-basis: 100%; color: var(--muted, #68635a); font: 0.62rem/1.3 Arial, Helvetica, sans-serif; white-space: nowrap; }
/* Linked badge: a 25px tap target, negative margin keeps the card layout unchanged. */
a.term-countdown { margin: -6px 0; padding: 6px 0; }
a.term-countdown:hover .term-countdown-text, a.term-countdown:focus-visible .term-countdown-text { color: var(--accent-dark, #61221a); text-decoration: underline; }

.context-asterisk-link { margin-left: 3px; color: var(--accent-dark, #61221a); font-size: .8em; font-weight: 700; text-decoration: none; vertical-align: super; }
/* A 24px tap target (WCAG 2.5.8) around the small raised asterisk; the negative margins keep the
   name's line and spacing exactly as they were. */
a.context-asterisk-link { display: inline-block; min-width: 24px; min-height: 24px; margin: -8px -8px -8px -5px; line-height: 24px; text-align: center; }
.context-asterisk-link:hover, .context-asterisk-link:focus-visible { text-decoration: underline; }

/* Shared line-chart pieces (vote-stats.js): direct labels, crosshair, and hover/focus readout. */
.line-chart, .chart-hover { position: relative; margin: 8px 0 16px; }
.line-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid { stroke: var(--rule, #b8ae9d); stroke-width: 1; opacity: .6; }
.chart-axis { fill: var(--muted, #68635a); font: 11px Arial, Helvetica, sans-serif; }
.chart-point-label { fill: var(--muted, #68635a); font: 11px Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--paper, #fffdf8); stroke-width: 3px; }
.chart-point-label.is-strong { fill: var(--ink, #1f1a14); font-weight: 700; }
.chart-crosshair { stroke: var(--muted, #68635a); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.chart-hover svg:focus-visible { outline: 2px solid var(--accent-dark, #7a2e24); outline-offset: 2px; }
.chart-tooltip { position: absolute; z-index: 5; min-width: 140px; max-width: min(21rem, calc(100vw - 24px)); padding: 7px 10px; border: 1px solid var(--rule, #b8ae9d); background: var(--paper, #fffdf8); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); color: var(--ink, #1f1a14); font: .76rem/1.45 Arial, Helvetica, sans-serif; pointer-events: none; }
.chart-tooltip p { margin: 0; }
.chart-tooltip-detail { color: var(--muted, #68635a); }
.chart-tooltip strong { font-variant-numeric: tabular-nums; }
.chart-tooltip-label { color: var(--muted, #68635a); font-weight: 700; }
.chart-tooltip-key { display: inline-block; width: 12px; height: 2px; margin-right: 6px; vertical-align: middle; background: var(--muted, #68635a); }
.chart-tooltip-action { margin-top: 4px !important; color: var(--accent-dark, #7a2e24); font-weight: 700; }
.chart-key-note { margin-top: 4px; color: var(--muted, #68635a); font: .74rem/1.4 Arial, Helvetica, sans-serif; }
/* Shared caveat disclosure (docs/data-components.md, section 7). The one caveat a reader must see
 * stays visible as the <summary> line, beside the number it qualifies; sources, method, and the
 * remaining caveats open beneath it. Native <details>: keyboard and screen-reader operable and
 * readable without JavaScript. VoteStats.caveatNote builds it for charts; static pages write:
 *   <details class="caveat-more">
 *     <summary><span class="caveat-lead">Most important caveat.</span> <span class="caveat-cue">Sources and caveats</span></summary>
 *     <div class="caveat-body"><p>...</p></div>
 *   </details>
 */
/* The opposite case: a caveat that changes how a number reads (an expired contract, a partial year)
 * is surfaced as an obvious status line right above the table or chart, not folded away. */
.caveat-status { margin: 10px 0; padding: 8px 12px; border: 1px solid var(--rule, #b8ae9d); border-left: 4px solid var(--accent-dark, #7a2e24); background: var(--surface, #fffdf7); color: var(--ink, #1f1a14); font: 700 .86rem/1.45 Arial, Helvetica, sans-serif; }
.caveat-status a { color: var(--accent-dark, #7a2e24); }
.caveat-host { margin: 6px 0 0; }
.caveat-more { margin: 6px 0 0; color: var(--muted, #68635a); font: .78rem/1.5 Arial, Helvetica, sans-serif; }
.caveat-host > .caveat-more { margin: 0; }
.caveat-more > summary { cursor: pointer; list-style: none; }
.caveat-more > summary::-webkit-details-marker { display: none; }
.caveat-more > summary::marker { content: ""; }
.caveat-more > summary:focus-visible { outline: 2px solid var(--accent-dark, #7a2e24); outline-offset: 2px; }
.caveat-lead { color: var(--ink, #1f1a14); }
.caveat-cue { color: var(--accent-dark, #7a2e24); font-weight: 700; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.caveat-cue::after { content: "\25B8"; display: inline-block; margin-left: .3em; text-decoration: none; transition: transform .15s; }
.caveat-more[open] .caveat-cue::after { transform: rotate(90deg); }
.caveat-more > summary:hover .caveat-cue { color: var(--ink, #1f1a14); }
.caveat-body { margin: 6px 0 2px; padding: 2px 0 2px 10px; border-left: 3px solid var(--rule, #b8ae9d); }
.caveat-body > :first-child { margin-top: 0; }
.caveat-body > :last-child { margin-bottom: 0; }
.caveat-body p, .caveat-body li { margin: 0 0 6px; }
.caveat-body ul, .caveat-body ol { margin: 0 0 6px; padding-left: 1.2em; }
@media (prefers-reduced-motion: reduce) { .caveat-cue::after { transition: none; } }
/* Chart groups (docs/data-components.md section 7, src/chart-notes.js): one collapsed panel per
 * `[data-chart-group]` section, appended once at the section's end, instead of every figure in
 * it repeating the same milestone legend, modeled-trend method, and note lines. A figure inside a
 * group keeps only a small real-link row (.chart-note-links) pointing into the panel. */
.caveat-group { margin-top: 14px; }
.chart-note-links { margin: 4px 0 0; font: .74rem/1.4 Arial, Helvetica, sans-serif; }
.chart-note-marker { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4em; height: 1.4em; margin-right: 4px; padding: 0 .2em; border: 1px solid var(--rule, #b8ae9d); border-radius: 3px; color: var(--muted, #68635a); font-weight: 700; text-decoration: none; }
.chart-note-marker:hover, .chart-note-marker:focus-visible { color: var(--ink, #1f1a14); border-color: var(--accent-dark, #7a2e24); }
.chart-note-marker:focus-visible { outline: 2px solid var(--accent-dark, #7a2e24); outline-offset: 1px; }

/* Touch targets (design rule 24, WCAG 2.2 target size): on a touch screen every small control in
   the page body gets at least a 24px box, set here once for the shared pieces instead of per page.
   Disclosure toggles and list links (record lists, "Records on file", cited documents) grow to
   24px tall with the label centered; links inside running sentences are left alone (the rule's
   inline exception). A mouse keeps the compact desktop layout. */
/* Rule 28: a <details data-phone-fold open> is open on wider screens and folded on phones (page-contents.js).
   Its summary line only matters where it folds, so it hides while open above 640px. */
details[data-phone-fold] > summary { margin: 4px 0 10px; cursor: pointer; font: 700 0.78rem/1.4 Arial, Helvetica, sans-serif; letter-spacing: 0.04em; }
@media (min-width: 641px) { details[data-phone-fold][open] > summary { display: none; } }

@media (pointer: coarse) {
  main summary { min-height: 24px; align-content: center; }
  main :is(li, dd) > a:only-child { display: inline-block; min-height: 24px; align-content: center; }
  .chart-note-marker { min-width: 24px; height: 24px; }
  .site-share-links :is(a, button) { display: inline-flex; align-items: center; min-height: 24px; }
}
.cumulative-chart { position: relative; margin: 4px 0 0; }
.cumulative-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.cumulative-gap { fill: var(--rule, #b8ae9d); opacity: .45; }
.chart-tooltip-note { color: var(--muted, #68635a); font-style: italic; }
.site-footer-signoff { margin: 10px 0 0; color: var(--muted, #68635a); font: .76rem/1.5 Arial, Helvetica, sans-serif; }
.cumulative-marker { fill: var(--paper, #fffdf8); stroke: var(--accent-dark, #7a2e24); stroke-width: 1.4; }
.cumulative-roles { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0; color: var(--muted, #68635a); font: .72rem/1.4 Arial, Helvetica, sans-serif; }
.cumulative-chart .cumulative-roles svg { display: inline-block; width: 22px; height: 6px; vertical-align: middle; overflow: visible; }
/* A key item stays on one line unless it is wider than the chart (a long job title on a phone). */
.cumulative-roles span { max-width: 100%; white-space: nowrap; }
@media (max-width: 480px) { .cumulative-roles span { white-space: normal; } }
.cumulative-marker-swatch { display: inline-block; width: 7px; height: 7px; border: 1.4px solid var(--accent-dark, #7a2e24); border-radius: 50%; vertical-align: middle; }

/* Shared series and range charts (vote-stats.js seriesChart / rangeChart).
   Categorical slots validated all-pairs (CVD and normal vision) on the paper and surface
   colors in both themes; slots 2-3 sit under 3:1 on light paper, so every chart carries
   direct labels and a table view. */
/* Slots 4-8 extend the same palette for charts with many lines (DataView `context` series, e.g.
   the metro cities on /local); the eight pass the adjacent-pair CVD and normal-vision checks on
   the paper in both themes. Past eight, a line folds into .series-other gray. */
/* Altoona's own line always wears the city's gold (editor 2026-10-03: "altoonas should always
   follow city colors (yellow/gold)"): the palette's gold on light paper, the site's --gold on dark;
   charts then keep the orange and yellow slots off the other lines so gold stays distinct. */
:root { --series-altoona: #eda100; }
html[data-theme="dark"] { --series-altoona: #f2c230; }
:root { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948; }
html[data-theme="dark"] { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767; }
.series-chart, .range-chart { position: relative; margin: 8px 0 12px; }
.series-chart svg, .range-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.series-1 { --series: var(--series-1); }
.series-2 { --series: var(--series-2); }
.series-3 { --series: var(--series-3); }
.series-4 { --series: var(--series-4); }
.series-5 { --series: var(--series-5); }
.series-6 { --series: var(--series-6); }
.series-7 { --series: var(--series-7); }
.series-8 { --series: var(--series-8); }
.series-altoona { --series: var(--series-altoona); }
/* The area tone: one color per part of the site (rule 27), read by section bars, kickers, folds,
 * timelines, the Settings card and `.data-section`'s default tone. */
html[data-area="council"] { --area-accent: var(--area-council); }
html[data-area="police"] { --area-accent: var(--area-police); }
html[data-area="local"] { --area-accent: var(--area-local); }
html[data-area="tools"] { --area-accent: var(--area-tools); }
html[data-area="news"] { --area-accent: var(--area-news); }
.chart-line { fill: none; stroke: var(--series); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-dot { fill: var(--series); stroke: var(--chart-surface, var(--paper, #f5f0e6)); stroke-width: 2; }
.chart-dot.is-partial { fill: var(--chart-surface, var(--paper, #f5f0e6)); stroke: var(--series); }
.chart-line.is-partial { stroke-dasharray: 4 4; }
/* A bridge joins two readings across empty categories (charts.js / vote-stats.js bridgePairs). */
.chart-line.is-bridge { stroke-dasharray: 2 4; stroke-width: 1.25; opacity: .6; }
.chart-marker { stroke: var(--muted, #68635a); stroke-width: 1; stroke-dasharray: 2 3; }
.chart-marker-tag { fill: var(--muted, #68635a); font: 700 10px Arial, Helvetica, sans-serif; }
.chart-marker-key { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 2px 0 0; color: var(--muted, #68635a); font: .74rem/1.4 Arial, Helvetica, sans-serif; }
.chart-error { stroke: var(--series); stroke-width: 1.5; opacity: .7; }
.chart-gap { fill: var(--rule, #b8ae9d); opacity: .28; }
/* Modeled trend (seriesChart `trend`): dashed, faded, over a shaded range, in a shaded zone, so a
   modeled year never reads as a reported one. */
.chart-modeled-zone { fill: var(--rule, #b8ae9d); opacity: .1; }
.chart-modeled-tag { fill: var(--muted, #68635a); font: italic 10px Arial, Helvetica, sans-serif; }
.chart-trend-band { fill: var(--series); opacity: .08; stroke: none; }
.chart-line.is-modeled { stroke-dasharray: 5 4; stroke-width: 1.5; opacity: .75; }
.chart-gutter-head { fill: var(--muted, #68635a); font: 700 10px Arial, Helvetica, sans-serif; }
.chart-gutter-key { fill: var(--series); }
.chart-dot.is-modeled { fill: var(--chart-surface, var(--paper, #f5f0e6)); stroke: var(--series); stroke-width: 1.5; opacity: .85; }
.modeled-key { display: inline-block; width: 18px; height: 8px; margin-right: 6px; vertical-align: middle; border-top: 2px dashed var(--muted, #68635a); background: color-mix(in srgb, var(--muted, #68635a) 18%, transparent); }
.chart-method { margin: 6px 0 0; color: var(--muted, #68635a); font: .78rem/1.45 Arial, Helvetica, sans-serif; }
.chart-method summary { cursor: pointer; }
.chart-method p { margin: 6px 0; }
.chart-method-table { border-collapse: collapse; margin: 4px 0; font-size: .76rem; }
.chart-method-table caption { text-align: left; padding-bottom: 3px; }
.chart-method-table th, .chart-method-table td { padding: 3px 8px 3px 0; text-align: left; border-bottom: 1px solid var(--rule, #b8ae9d); vertical-align: top; }
@media (max-width: 520px) { .chart-method-table { display: block; overflow-x: auto; max-width: 100%; } }
.chart-axis.is-gap { font-style: italic; }
.range-bar { fill: var(--series); }
.range-name { fill: var(--ink, #20211e); font: 700 12px Arial, Helvetica, sans-serif; }
.range-hit { fill: transparent; }
.series-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 4px; color: var(--muted, #68635a); font: .74rem/1.4 Arial, Helvetica, sans-serif; }
/* Key labels wrap onto the next line whole (flex-wrap) and only break inside when one label is
   longer than the line, at any width (the 640px half-screen split once scrolled sideways). */
.series-legend span { white-space: normal; }
.series-legend svg { display: inline-block; width: 22px; height: 6px; margin-right: 6px; vertical-align: middle; overflow: visible; }
.series-key { display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; background: var(--series); }
/* Small multiples (vote-stats.js smallMultipleBars): one hue, one shared scale, every value in a table. */
.multiples-chart { position: relative; margin: 8px 0 12px; }
.multiples-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.multiples-name { fill: var(--ink, #20211e); font: 700 12px Arial, Helvetica, sans-serif; }
.multiples-bar { fill: var(--series); }
.multiples-focus { fill: none; stroke: var(--muted, #68635a); stroke-width: 1; pointer-events: none; }
.chart-tooltip .chart-tooltip-note { white-space: normal; }

/* Stacked bars (vote-stats.js stackedBars), e.g. /whats-new changes over time. Past three hues a
   chart folds the rest into one neutral "other" slot (.series-other) rather than adding a hue;
   blue/orange/aqua plus that gray pass the dataviz validator's separation checks in both themes.
   The chart always ships with a key, a hover readout, and a table view. */
.series-other { --series: var(--muted, #68635a); }
/* A line chart's gray context series (DataView `context: true`, e.g. the metro cities behind
   Altoona's sale-price line on /local): thinner, fainter and with smaller dots, so the hued
   series reads first; the hover card, legend and table still name every line. */
.chart-line.series-other { stroke-width: 1.25; opacity: .55; }
.chart-dot.series-other { r: 1.5; stroke-width: 0; opacity: .55; }
.chart-dot.series-other.is-partial { r: 2.5; stroke-width: 1; }
/* A context line that kept a palette color: thinner and with smaller dots than the primary
   series, but full color, so it matches its key, chip and hover-card mark exactly. */
.chart-line.is-context { stroke-width: 1.4; }
.chart-dot.is-context { r: 2.25; stroke-width: 0; }
.chart-dot.is-context.is-partial { r: 2.75; stroke-width: 1; }
/* Roll-call outcomes reuse the vote-position tones (VoteStats.TONES), never new hues. */
.series-aye { --series: var(--tone-positive, #2b6b3a); }
.series-nay { --series: var(--tone-analysis, #704b12); }
.series-abstain { --series: var(--tone-external, #315b68); }
.series-absent { --series: var(--tone-miss, #9b3027); }
.stacked-chart { position: relative; margin: 8px 0 12px; }
.stacked-chart svg { display: block; width: 100%; height: auto; overflow: visible; cursor: pointer; }
.stacked-chart svg:focus-visible { outline: 3px solid var(--blue, #1c5fd6); outline-offset: 3px; }
.stacked-bar { fill: var(--series); }
.stacked-bar.is-partial { fill-opacity: .3; stroke: var(--series); stroke-width: 1.2; stroke-dasharray: 3 2; }
.series-key.is-block { width: 10px; height: 10px; border-radius: 2px; }
.series-toggle { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; border: 1px solid var(--rule, #b8ae9d); border-radius: 999px; background: transparent; color: var(--ink, #20211e); cursor: pointer; font: 700 .72rem/1.3 Arial, Helvetica, sans-serif; }
.series-toggle[aria-pressed="true"] { border-color: var(--accent-dark, #7a2e24); box-shadow: inset 0 0 0 1px var(--accent-dark, #7a2e24); }
.series-toggle:hover, .series-toggle:focus-visible { border-color: var(--accent-dark, #7a2e24); }
.series-legend:has(.series-toggle) { gap: 6px; }

/* Council meeting record coverage (meeting-coverage-chart.js) on /about: a gap summary and a table. */
.coverage-summary-line { margin: 0 0 8px; }
.coverage-chart-note { margin: 4px 0 8px; color: var(--muted, #68635a); font: .8rem/1.5 Arial, Helvetica, sans-serif; }
.coverage-table-wrap { max-width: 100%; overflow-x: auto; }
.coverage-table { width: 100%; border-collapse: collapse; font: .82rem/1.4 Arial, Helvetica, sans-serif; }
.coverage-table caption { padding-bottom: 6px; color: var(--muted, #68635a); text-align: left; }
.coverage-table th, .coverage-table td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--rule, #b8ae9d); text-align: left; }
.coverage-table td { font-variant-numeric: tabular-nums; }

/* Share links (site-shell.js): a small "Share" disclosure under each page header and a
   row at the top of the footer. Plain links and buttons, 44px touch targets on phones. */
.site-share-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font: 700 .72rem/1.4 Arial, Helvetica, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.site-share-links a { color: var(--accent-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.site-share-links button { padding: 3px 9px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.site-share-links :is(a, button):hover { color: var(--accent); }
.site-share-links :is(a, button):focus-visible, .site-share-inline summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.site-share-inline { margin-top: 14px; }
/* Hold the Share row's place (14px gap + one 18px line) in every page header until the shell
   adds it, so the header does not grow after load and push the page down. */
@media (scripting: enabled) {
  main > header:not(:has(> .site-share-inline))::after { content: ""; display: block; height: 18px; margin-top: 14px; }
}
.site-share-inline summary { display: inline-block; cursor: pointer; color: var(--muted); font: 700 .72rem/1.4 Arial, Helvetica, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.site-share-inline summary::after { content: " \2197"; }
.site-share-inline[open] summary { color: var(--accent-dark); }
.site-share-inline .site-share-links { margin-top: 8px; }
.site-share-footer .site-share-links { margin-top: 4px; }
/* The footer home card: one quiet card under the share links on every page. */
.site-footer .site-footer-home { display: inline-grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; min-height: 24px; margin: 14px 0 0; padding: 8px 12px; border: 1px solid var(--rule); border-left: 3px solid var(--area-accent, var(--accent)); border-radius: var(--radius); background: var(--surface); box-shadow: var(--lift); color: var(--ink); text-decoration: none; text-transform: none; letter-spacing: normal; font: .8rem/1.3 Arial, Helvetica, sans-serif; }
.site-footer .site-footer-home:hover, .site-footer .site-footer-home:focus-visible { background: var(--row-hover); border-color: var(--accent-dark); }
.site-footer .site-footer-home:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.site-footer-home-mark { color: var(--area-accent, var(--accent)); flex: none; }
.site-footer-home-text { display: grid; gap: 1px; }
.site-footer-home-title { font-weight: 700; color: var(--ink); }
.site-footer .site-footer-home:hover .site-footer-home-title, .site-footer .site-footer-home:focus-visible .site-footer-home-title { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.site-footer-home-blurb { color: var(--muted); font-size: .72rem; }
.site-footer .site-footer-home[aria-current="page"] { border-left-color: var(--accent-dark); }
.site-footer .site-footer-home[aria-current="page"] .site-footer-home-title { color: var(--accent-dark); }
@media (max-width: 1000px) { .site-share-footer { padding-bottom: 14px; border-bottom: 1px solid var(--rule); } }
@media (max-width: 480px) {
  .site-share-links { gap: 2px 4px; }
  .site-share-links :is(a, button) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
  .site-share-links button { min-height: 36px; margin: 4px 0; }
}
@media print { .site-share { display: none; } }

/* Item links (site-shell.js SiteShare.itemLinkButton): same pill as the page Copy link button,
   plus the brief outline a deep-linked item gets when it opens. */
.site-item-link { padding: 3px 9px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink); font: 700 .68rem/1.4 Arial, Helvetica, sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.site-item-link:hover { color: var(--accent); }
.site-item-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.is-linked { outline: 2px solid var(--accent); outline-offset: 6px; }
/* A record opened from a search result keeps its outline (the brief .is-linked flash fades), and
   the query's words inside it are marked through the CSS Custom Highlight API (site-shell.js). */
.is-search-landing { outline: 2px solid var(--accent); outline-offset: 4px; scroll-margin-top: 16px; }
::highlight(site-search-hit) { background-color: var(--accent-dark); color: var(--paper); }
:target, .is-linked { scroll-margin-top: 16px; }
.site-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 480px) { .site-item-link { min-height: 36px; } }
@media print { .site-item-link { display: none; } }

/* Reads counter links to the traffic chart on /about (site-shell.js). */
.utility-reads-link { display: inline-flex; align-items: baseline; gap: 0.35em; color: inherit; text-decoration: none; }
.utility-reads-link:hover, .utility-reads-link:focus-visible { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.utility-reads-now { color: var(--accent-dark); }

/* Figure frame (docs/design-guidelines.md, rule 1): a chart or data table and everything that
 * belongs to it -- title, key, controls, notes, caveats, source -- sit inside one bounded block
 * so they read apart from the page's prose. Loaded sitewide from this file, so every page gets
 * it without adding a stylesheet. The chart's own dots take the frame's surface color.
 *   <figure class="figure-frame" aria-labelledby="x-title">
 *     <figcaption class="figure-frame-head">
 *       <p class="figure-frame-title" id="x-title">What is counted, and per what</p>
 *     </figcaption>
 *     <div id="x-chart"></div>                        (chart, table, or list)
 *     <div class="figure-frame-notes">...</div>      (notes, caveat expander, source)
 *   </figure>
 * A frame inside a frame (or a .chart-container inside one) draws no second border. */
.figure-frame {
  --chart-surface: var(--surface, #fffdf7);
  min-width: 0;
  margin: 18px 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--rule, #b8ae9d);
  background: var(--surface, #fffdf7);
}
.figure-frame:empty { display: none; }
.figure-frame > :first-child { margin-top: 0; }
.figure-frame > :last-child { margin-bottom: 0; }
.figure-frame-head { display: block; margin: 0 0 8px; }
.figure-frame-title { margin: 0; color: var(--ink, #20211e); font: 700 .74rem/1.35 Arial, Helvetica, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.figure-frame-dek { margin: 4px 0 0; color: var(--muted, #68635a); font: .8rem/1.45 Arial, Helvetica, sans-serif; }
.figure-frame-notes { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--rule, #b8ae9d); color: var(--muted, #68635a); font: .8rem/1.5 Arial, Helvetica, sans-serif; }
.figure-frame-notes > :first-child { margin-top: 0; }
.figure-frame-notes > :last-child { margin-bottom: 0; }
.figure-frame-notes p, .figure-frame-notes ul, .figure-frame-notes ol { max-width: 80ch; margin: 0 0 8px; }
.figure-frame-notes ul, .figure-frame-notes ol { padding-left: 1.2em; font: inherit; }
.figure-frame-notes li { margin: 0 0 4px; }
.figure-frame-source { margin: 8px 0 0; color: var(--muted, #68635a); font: .72rem/1.4 Arial, Helvetica, sans-serif; }
.figure-frame :is(.figure-frame, .chart-container) { margin: 12px 0 0; padding: 0; border: 0; background: transparent; }
@media (max-width: 480px) { .figure-frame { padding: 12px 10px 12px; } }

/* Record image (rule 22): a crop of a posted record, framed like any figure. The page is the
 * record's own paper, so it keeps a white ground in both themes; dark mode dims it slightly
 * (full brightness on hover or focus) instead of inverting it. The whole image links to the full
 * page of the PDF; there is no lightbox. Markup is written by scripts/build_record_images.py. */
.record-image-link { display: block; margin: 0; color: inherit; text-decoration: none; }
.record-image-link img {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  background: #fff;
  border: 1px solid var(--rule, #b8ae9d);
  box-shadow: 0 1px 0 var(--rule, #b8ae9d);
}
.record-image-open { display: inline-block; margin-top: 6px; color: var(--accent-dark, #61221a); font: .78rem/1.4 Arial, Helvetica, sans-serif; text-decoration: underline; text-underline-offset: 2px; }
.record-image-link:hover img, .record-image-link:focus-visible img { border-color: var(--accent-dark, #61221a); }
.record-image-link:focus-visible { outline: 2px solid var(--accent-dark, #61221a); outline-offset: 3px; }
html[data-theme="dark"] .record-image-link img { filter: brightness(.86); transition: filter .15s; }
html[data-theme="dark"] .record-image-link:is(:hover, :focus-visible) img { filter: none; }
.record-image-source .comment-cite { display: inline-flex; margin: 0 0 0 6px; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { html[data-theme="dark"] .record-image-link img { transition: none; } }
@media print { .record-image-link img { filter: none; } .record-image-open { display: none; } }

/* Record list (rule 2): a short list of records that reads like a table -- one row per record,
 * the City's own item number first, the title as a link to its record, and one outcome label in
 * the same place on every row. Goes inside a .figure-frame. */
.record-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule, #b8ae9d); }
.record-list > li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--rule, #b8ae9d); font-size: .9rem; line-height: 1.45; }
.record-list > li:last-child { border-bottom: 0; }
.record-list > li.notice { display: block; color: var(--muted, #68635a); }
.record-list-num { color: var(--muted, #68635a); font: 700 .74rem/1.4 Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; }
.record-list-main { min-width: 0; overflow-wrap: anywhere; }
.record-list-main > a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.record-list-detail { display: block; margin-top: 2px; color: var(--muted, #68635a); font: .76rem/1.4 Arial, Helvetica, sans-serif; }
.record-outcome { justify-self: end; padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; color: var(--muted, #68635a); font: 700 .66rem/1.5 Arial, Helvetica, sans-serif; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.record-outcome.is-passed { color: var(--tone-positive, #2b6b3a); }
.record-outcome.is-failed { color: var(--tone-miss, #9b3027); }
.record-outcome.is-mixed { border-style: dashed; }
@media (max-width: 480px) {
  .record-list > li { grid-template-columns: 2.4em minmax(0, 1fr); }
  .record-outcome { grid-column: 2; justify-self: start; }
}

/* --------------------------------------------------------------------------------------------
 * Accent layer and section kinds (docs/design-guidelines.md rule 17; /design#section-scan).
 * Gold-and-black marks break a long page into pieces a reader can see at a glance: a short gold
 * bar over each section heading, a black-and-gold kind icon on figures and kinded headings, gold
 * fold markers on every collapsed section, and gold timeline steps. Text keeps --ink and links
 * keep --accent-dark; gold is never the only carrier of meaning. Since 2026-10-04 (rule 27 revised)
 * these marks take the area tone (--area-accent), and gold is Altoona's and the masthead's alone.
 */
main section > h2::before,
main .section-bar::before {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  margin-bottom: 8px;
  border-radius: 2px;
  background: var(--area-accent);
}
/* Kind icons: put data-kind="chart|record|people|timeline|caveat|money|map" on a heading or
 * summary; figure-frame titles are charts unless they say otherwise. Decorative (::before), so
 * the heading text still names the section. */
:is(h2, h3, h4, summary, .figure-frame-title)[data-kind]::before,
.figure-frame-title:not([data-kind])::before {
  content: "";
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  margin-right: .45em;
  border-radius: 4px;
  vertical-align: -0.3em;
  background: var(--night) var(--kind-icon, var(--icon-chart)) center / 72% no-repeat;
}
html[data-theme="dark"] :is(h2, h3, h4, summary, .figure-frame-title)[data-kind]::before,
html[data-theme="dark"] .figure-frame-title:not([data-kind])::before { box-shadow: inset 0 0 0 1px #5a5345; }
main section > h2[data-kind]::before { display: inline-block; width: 1.35em; height: 1.35em; margin-bottom: 0; }
:root {
  --icon-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f2c230' d='M2 13h12v1.5H2zM3 8h2.5v4H3zm3.75-4h2.5v8h-2.5zM10.5 6H13v6h-2.5z'/%3E%3C/svg%3E");
  --icon-record: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f2c230' d='M3 1.5h7l3 3v10H3zm1.5 1.5v10h7V5.5H9.5V3zM6 7.5h4V9H6zm0 2.5h4v1.5H6z'/%3E%3C/svg%3E");
  --icon-people: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f2c230' d='M8 2.5a2.75 2.75 0 1 1 0 5.5 2.75 2.75 0 0 1 0-5.5zM3 14c0-2.9 2.2-4.75 5-4.75S13 11.1 13 14z'/%3E%3C/svg%3E");
  --icon-timeline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f2c230' d='M8 1.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13zm0 1.5a5 5 0 1 0 0 10A5 5 0 0 0 8 3zm-.75 1.5h1.5v3.2l2.3 1.4-.8 1.3-3-1.8z'/%3E%3C/svg%3E");
  --icon-caveat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f2c230' d='M8 1.5 15 14.5H1zm-.75 4.5v4.5h1.5V6zm0 5.5V13h1.5v-1.5z'/%3E%3C/svg%3E");
  --icon-money: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f2c230' d='M7.25 1.5h1.5v1.6c1.5.2 2.6 1 2.9 2.4l-1.5.4c-.2-.8-.9-1.3-2.1-1.3-1.3 0-1.9.5-1.9 1.1 0 .7.6 1 2.2 1.3 2.1.4 3.5 1 3.5 2.8 0 1.4-1.1 2.4-3.1 2.6v1.6h-1.5v-1.6c-1.7-.2-2.9-1.1-3.2-2.6l1.5-.4c.2 1 1.1 1.5 2.5 1.5 1.3 0 1.9-.5 1.9-1.1 0-.8-.7-1.1-2.3-1.4-2-.4-3.4-1-3.4-2.7 0-1.3 1-2.3 3-2.5z'/%3E%3C/svg%3E");
  --icon-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f2c230' d='M8 1a5 5 0 0 1 5 5c0 3.5-5 9-5 9S3 9.5 3 6a5 5 0 0 1 5-5zm0 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E");
}
[data-kind="record"] { --kind-icon: var(--icon-record); }
[data-kind="people"] { --kind-icon: var(--icon-people); }
[data-kind="timeline"] { --kind-icon: var(--icon-timeline); }
[data-kind="caveat"] { --kind-icon: var(--icon-caveat); }
[data-kind="money"] { --kind-icon: var(--icon-money); }
[data-kind="map"] { --kind-icon: var(--icon-map); }
/* Every fold shows the same gold cue, so "there is more here" reads the same on every page. */
main details > summary::marker { color: var(--area-accent); }
main details > summary:hover::marker, main details > summary:focus-visible::marker { color: var(--accent-dark); }
/* Eyebrow labels ("Sources and collection") sit on a gold tick. */
main p.label::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; background: var(--area-accent); vertical-align: -1px; }
@media (forced-colors: active) {
  :is(h2, h3, h4, summary, .figure-frame-title)[data-kind]::before, .figure-frame-title:not([data-kind])::before { forced-color-adjust: none; }
}
@media print {
  :is(h2, h3, h4, summary, .figure-frame-title)[data-kind]::before, .figure-frame-title:not([data-kind])::before { display: none; }
}
/* A court exhibit reproduced on the site (the Oklahoma ruling's bodycam frames of a plate-reader
 * query): one .figure-frame.court-exhibit with its images stacked, credited to the filing. */
.court-exhibit { width: 100%; margin: 14px 0 0; }
.court-exhibit-frames { display: grid; gap: 8px; }
.court-exhibit-frames img { display: block; width: 100%; height: auto; }
/* Rule 20 (docs/design-guidelines.md): a recent card says so. SiteFresh in site-shell.js reads the
 * card's own data-fresh date and, only while it is inside the window (its tier age, or data-fresh-days, default 14;
 * Altoona's calendar), adds .is-fresh and a gold .fresh-flag ("New", "Updated" or "Breaking").
 * Nobody turns it off by hand: an old date simply never gets the mark. */
.is-fresh { box-shadow: inset 4px 0 0 var(--status-info); padding-left: 14px; }
.is-fresh:is(article, li, div, section, p) { scroll-margin-top: 1rem; }
.fresh-flag { display: inline-block; margin: 0 8px 6px 0; padding: 2px 7px; border-radius: 2px; background: var(--status-info); color: var(--on-status); font: 700 0.68rem/1.4 Arial, Helvetica, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 1px; }
/* Three tiers, strongest to quietest: Breaking (solid gold, larger, thick edge), New (outline only,
 * thin edge), Archive (plain dashed, no edge). Ages are set once, in FRESH_TIERS in site-shell.js. */
.fresh-flag.is-breaking { padding: 4px 11px; font-size: 0.82rem; background: var(--status-bad); color: var(--on-status); box-shadow: 0 0 0 2px var(--status-bad-ink); }
.is-fresh:has(> .fresh-flag.is-breaking, > [data-fresh-slot] > .fresh-flag.is-breaking) { box-shadow: inset 8px 0 0 var(--status-bad); padding-left: 20px; }
.fresh-flag.is-new { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--status-good); }
.is-fresh:has(> .fresh-flag.is-new, > [data-fresh-slot] > .fresh-flag.is-new) { box-shadow: inset 2px 0 0 var(--status-good); padding-left: 12px; }
.fresh-flag.is-archive { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); border-style: dashed; }
.fresh-flag time { font-weight: 400; letter-spacing: 0.02em; text-transform: none; }
@media (forced-colors: active) {
  .is-fresh { box-shadow: none; outline: 2px solid Highlight; }
  .fresh-flag { forced-color-adjust: none; border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
  .fresh-flag.is-breaking { border-width: 3px; }
  .fresh-flag.is-archive { border-style: dashed; }
}
@media print { .is-fresh { box-shadow: none; border-left: 3px solid #000; } .fresh-flag { border: 1px solid #000; background: none; } }

/* Breaking band (rule 20): one line under the masthead for the newest featured story while its
 * "Breaking" window is open. The flag and gold edge come from SiteFresh; the band adds the strip. */
.breaking-band { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--rule); background: var(--surface); }
.breaking-band[hidden] { display: none; }
.breaking-band-body { margin: 0; font-size: 1.05rem; line-height: 1.45; }
.breaking-band-link { font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.breaking-band-meta { display: block; margin-top: 4px; color: var(--muted); font-size: 0.85rem; }
@media print { .breaking-band { display: none; } }

/* Image teaser (rule 22): a dense row of record-image thumbnails that opens in place to full width.
 * SiteTeaser in src/site-shell.js adds .is-teaser and the toggle; without JS the images stay full. */
.image-teaser.is-teaser { grid-template-columns: repeat(auto-fill, minmax(min(120px, 45%), 1fr)); }
.image-teaser.is-teaser img { height: clamp(80px, 22vw, 130px); object-fit: cover; object-position: center top; cursor: zoom-in; border: 1px solid var(--rule); }
.image-teaser.is-teaser img:hover { border-color: var(--accent-dark); }
.image-teaser-toggle { margin-top: 8px; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 2px; background: var(--surface); color: var(--ink); font: 700 .74rem/1.4 Arial, Helvetica, sans-serif; letter-spacing: .04em; cursor: pointer; }
.image-teaser-toggle:hover { border-color: var(--accent-dark); }
.image-teaser-toggle:focus-visible { outline: 2px solid var(--accent-dark, #61221a); outline-offset: 2px; }
@media print { .image-teaser.is-teaser { grid-template-columns: 1fr; } .image-teaser.is-teaser img { height: auto; } .image-teaser-toggle { display: none; } }

/* The site's own view beside reported facts, under an "Analysis / opinion" label (design rule 21):
   story pages' "Why this matters" and any page section that states the site's position. */
.story-context { margin-top: 30px; padding: 4px 18px 18px; border: 1px solid var(--rule); border-left: 4px solid var(--tone-analysis); background: var(--surface); }
.story-context-label { font-family: Arial, Helvetica, sans-serif; margin: 14px 0 0; color: var(--tone-analysis); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.story-context h2, .story-context h3 { margin-top: 6px; }
.story-context-note { margin: 0 0 12px; color: var(--muted); font-size: 0.9rem; }
.story-context p { max-width: 68ch; line-height: 1.6; }
.story-context-links { font-family: Arial, Helvetica, sans-serif; font-size: 0.85rem; }