/* THE DAMOCLES PROTOCOL — the cockpit on black (design D_cockpit, 2026-09-27).
 * Colours come ONLY from the theme tokens below (tools/civic_server.py THEME;
 * pinned by tests/test_civic_surface.py). Every accent has one meaning here:
 * gold = headings and the record's rules; blue / red / purple = parties;
 * green / amber = positions and live / held; cyan = a drill (opens a record).
 * No web font: the display face is a system condensed stack, so the page needs
 * nothing from another origin and works with no network at all.
 * Author / IP holder: ELVIS. */
:root {
  --dp-ground: #0A0D12;
  --dp-panel: #12171F;
  --dp-line: #2A3340;
  --dp-text: #F2F5F9;
  --dp-muted: #9AA7B5;
  --dp-gold: #F5C451;
  --dp-blue: #4DA3FF;
  --dp-red: #FF5A5F;
  --dp-purple: #B388FF;
  --dp-green: #3DDC97;
  --dp-amber: #FFB020;
  --dp-cyan: #35D0FF;
  --dp-paper: #FFFFFF;
  --dp-plate: #000000;
  /* semantic aliases — var() references only, no new hex */
  --dp-party-d: var(--dp-blue); --dp-party-r: var(--dp-red); --dp-party-o: var(--dp-purple);
  --dp-yea: var(--dp-green); --dp-nay: var(--dp-amber);
  --dp-live: var(--dp-green); --dp-held: var(--dp-amber); --dp-drill: var(--dp-cyan);
  --dp-ink: var(--dp-ground);
  --dp-other-1: var(--dp-cyan); --dp-other-2: var(--dp-gold); --dp-other-3: var(--dp-green); --dp-other-4: var(--dp-purple);
  --dp-display: "Bahnschrift", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "DejaVu Sans Condensed", "Liberation Sans Narrow", system-ui, sans-serif;
  --dp-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-contrast: more) { :root { --dp-muted: var(--dp-text); --dp-line: var(--dp-muted); } body { background: var(--dp-ground); } }
* { box-sizing: border-box; }
html { background: var(--dp-ground); }
/* the honeycomb ground (inventor 2026-10-03): the Waggle UI's small honeycomb, as a seamless
   tile laid under the cockpit black on every page; its opacity is baked into the tile so no
   colour literal lives here; removed under prefers-contrast so text keeps full contrast */
body { margin: 0 auto; max-width: 84rem; padding: 0 1rem 2rem; background: var(--dp-ground) url("/brand/honeycomb-tile.png") repeat; color: var(--dp-text); font: 1rem/1.5 var(--dp-body); }
a { color: var(--dp-drill); text-decoration: underline; text-underline-offset: .15em; }
a:hover { color: var(--dp-text); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, main:focus-visible, [tabindex]:focus-visible, svg:focus-visible, path:focus-visible { outline: 3px solid var(--dp-cyan); outline-offset: 2px; }
.vh { position: absolute; left: -999px; width: 1px; height: 1px; overflow: hidden; }
.skip { position: absolute; left: -999px; top: 0; background: var(--dp-gold); color: var(--dp-ink); padding: .5rem; z-index: 40; }
.skip:focus { left: .5rem; }
h1, h2, h3, h4, .eyebrow, .stat .label, .stat .fig, .roll, .tally, .card-name, .legend-btn, .tip-head, .frame-label {
  font-family: var(--dp-display); font-stretch: condensed; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; line-height: 1.2; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); color: var(--dp-gold); margin: 1rem 0 .5rem; }
h2 { font-size: 1.1rem; color: var(--dp-gold); border-bottom: 1px solid var(--dp-line); padding-bottom: .25rem; margin: 0 0 .75rem; }
h3 { font-size: .95rem; color: var(--dp-text); margin: 1rem 0 .35rem; }
h4 { font-size: .85rem; color: var(--dp-muted); margin: .75rem 0 .25rem; }
.eyebrow { font-size: .72rem; color: var(--dp-muted); margin: .5rem 0 .25rem; }
p { margin: .35rem 0; }
code { overflow-wrap: anywhere; color: var(--dp-muted); }
.fig, td.num, .tally, .cell-n { font-variant-numeric: tabular-nums lining-nums; }

/* the header: the logo on a paper plate (it has no transparent master) */
/* the header: the gold-on-black master, centered, no plate (inventor 2026-09-27) */
.dp-header { padding: .75rem 1rem .25rem; background: var(--dp-plate); border-bottom: 2px solid var(--dp-gold); display: flex; justify-content: center; align-items: center; }
.dp-home { display: inline-block; background: none; padding: 0; line-height: 0; }
.dp-logo { display: block; width: min(360px, 80vw); height: auto; margin: 0 auto; }
.dp-nav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem 0; border-bottom: 1px solid var(--dp-line); }
.dp-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.dp-nav a { display: inline-block; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--dp-line); text-decoration: none; color: var(--dp-text);
  font-family: var(--dp-display); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.dp-nav a[aria-current="page"] { background: var(--dp-gold); color: var(--dp-ink); border-color: var(--dp-gold); }
.dp-nav a.nav-mine { border-color: var(--dp-cyan); }
#dp-menu { display: none; }
.dp-banner { background: var(--dp-amber); color: var(--dp-ink); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .5rem .75rem; text-align: center; position: sticky; top: 0; z-index: 20; }

/* the ticker */
.dp-ticker { overflow: hidden; border-bottom: 1px solid var(--dp-line); background: var(--dp-panel); margin: 0 0 .75rem; }
.dp-ticker .track { display: flex; width: max-content; animation: dp-tick 60s linear infinite; }
.dp-ticker:hover .track, .dp-ticker:focus-within .track { animation-play-state: paused; }
/* focus inside a strip STOPS the loop and puts the track back at its start, so the
 * browser can scroll the strip to the focused link (a paused transform had left the
 * focused link 9,500 px to the left of the strip, unreachable — measured 2026-10-03) */
.dp-ticker:focus-within .track { animation: none; }
.dp-ticker.paused .track { animation-play-state: paused; }
.dp-ticker ul { list-style: none; display: flex; gap: 2rem; margin: 0; padding: .4rem 1rem; white-space: nowrap; }
.dp-ticker a { text-decoration: none; color: var(--dp-text); }
.dp-ticker .roll { color: var(--dp-gold); }
.dp-ticker .when { color: var(--dp-muted); font-size: .8rem; }
.ticker-note { margin: 0; padding: 0 1rem .3rem; font-size: .75rem; color: var(--dp-muted); }
@keyframes dp-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* panels */
.panel { background: var(--dp-panel); border: 1px solid var(--dp-line); border-top: 3px solid var(--dp-gold); border-radius: .5rem; padding: .75rem 1rem 1rem; margin: 1rem 0; }
.panel.rail-green { border-top-color: var(--dp-green); }
.panel.rail-cyan { border-top-color: var(--dp-cyan); }
.panel.rail-purple { border-top-color: var(--dp-purple); }
.panel.rail-amber { border-top-color: var(--dp-amber); }
.panel.rail-party-d { border-top-color: var(--dp-party-d); }
.panel.rail-party-r { border-top-color: var(--dp-party-r); }
.panel.rail-party-o { border-top-color: var(--dp-party-o); }
.two-col { display: grid; grid-template-columns: 62fr 38fr; gap: 1rem; align-items: start; }
.two-col > .panel { margin: 0; }
.finder { display: grid; gap: 1rem; }

/* the strip and the terms */
.strip { border-left: 4px solid var(--dp-cyan); padding: .35rem .75rem; margin: .5rem 0 1rem; color: var(--dp-text); }
.strip strong { color: var(--dp-gold); font-family: var(--dp-display); text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; }
.strip-cannot { color: var(--dp-muted); }
.rail-step { font-size: .85rem; }
.terms-strip { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 1rem 0; }
.term-chip, .path-step .pill { text-decoration: none; }
.term-chip { border: 1px solid var(--dp-muted); border-radius: 999px; padding: .1rem .6rem; font-size: .8rem; color: var(--dp-text); }
.term { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted var(--dp-cyan); text-underline-offset: .15em; }
.term::after { content: "?"; font-size: .6em; vertical-align: super; color: var(--dp-cyan); margin-left: .1em; }
.term:hover, .term[aria-expanded="true"] { text-decoration-style: solid; }
.pop { position: relative; background: var(--dp-panel); border: 1px solid var(--dp-muted); border-top: 3px solid var(--dp-cyan); border-radius: .5rem; padding: .75rem 2rem .75rem 1rem; margin: .5rem 0; max-width: 28rem; }
.pop-term { font-family: var(--dp-display); text-transform: uppercase; letter-spacing: .06em; color: var(--dp-gold); font-weight: 800; margin: 0 0 .25rem; }
.pop-close { position: absolute; top: .3rem; right: .4rem; background: none; border: 0; color: var(--dp-muted); font-size: 1.2rem; cursor: pointer; }

/* honesty lines: readable, never hidden, beside the figure they qualify */
.honesty { color: var(--dp-muted); font-size: .8rem; line-height: 1.35; margin: .25rem 0; }
.note, .hint { border-left: 4px solid var(--dp-gold); padding: .25rem .75rem; margin: .5rem 0; }
.held { border-left: 4px solid var(--dp-amber); padding: .25rem .75rem; margin: .5rem 0; font-size: .85rem; }
.sample { font-size: 1rem; font-weight: 600; }
.mark { font-weight: 700; border-bottom: 2px solid var(--dp-amber); }
.demo-note { background: var(--dp-amber); color: var(--dp-ink); font-weight: 700; padding: .35rem .6rem; border-radius: .35rem; }
.explainer { border-left: 4px solid var(--dp-cyan); padding: .25rem .75rem; }
.locate-headline { font-size: 1.2rem; font-weight: 700; }
.disclosure { font-weight: 600; color: var(--dp-text); border: 1px dashed var(--dp-muted); padding: .35rem .6rem; border-radius: .35rem; }

/* chips and pills — a filled chip always carries ink text (white fails AA on every accent) */
.chip { display: inline-block; min-width: 1.6em; padding: .05rem .45rem; border-radius: .35rem; background: var(--dp-muted); color: var(--dp-ink); font-weight: 800; font-size: .78rem; text-align: center; letter-spacing: .04em; }
.chip.party-d { background: var(--dp-party-d); } .chip.party-r { background: var(--dp-party-r); } .chip.party-o { background: var(--dp-party-o); }
.chip.pos-yea { background: var(--dp-yea); } .chip.pos-nay { background: var(--dp-nay); }
.chip.pos-other { background: none; color: var(--dp-muted); border: 1px solid var(--dp-muted); }
.chip.class-fact { background: var(--dp-cyan); } .chip.class-claim { background: var(--dp-gold); } .chip.class-inferred { background: var(--dp-purple); }
.chip.term::after { color: var(--dp-ink); }
.pill { display: inline-block; padding: .05rem .5rem; border-radius: 999px; border: 1px solid var(--dp-muted); color: var(--dp-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.pill-green { border-color: var(--dp-green); color: var(--dp-green); }
.pill-amber { border-color: var(--dp-amber); color: var(--dp-amber); }
.pill-cyan { border-color: var(--dp-cyan); color: var(--dp-cyan); }
.pill-gold { border-color: var(--dp-gold); color: var(--dp-gold); }
a.pill { text-decoration: none; }
.toggle { display: inline-flex; gap: .35rem; border: 0; padding: 0; margin: .25rem 0; }
.toggle input[type="radio"] { position: absolute; left: -999px; }
.toggle label { padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--dp-muted); cursor: pointer; font-family: var(--dp-display); font-weight: 800; text-transform: uppercase; font-size: .8rem; letter-spacing: .05em; }
.toggle input:checked + label { background: var(--dp-gold); color: var(--dp-ink); border-color: var(--dp-gold); }
.toggle input:focus-visible + label { outline: 3px solid var(--dp-cyan); outline-offset: 2px; }

/* bars: the label and figure printed on each segment */
.bar { display: flex; width: 100%; height: 1.9rem; border-radius: .35rem; overflow: visible; background: var(--dp-line); margin: .35rem 0; }
.seg { display: flex; align-items: center; justify-content: center; overflow: visible; text-decoration: none; color: var(--dp-ink); font-weight: 800; font-size: .8rem; transition: width .4s ease-out; white-space: nowrap; min-width: 0; }
.seg-yea { background: var(--dp-yea); border-radius: .35rem 0 0 .35rem; }
.seg-nay { background: var(--dp-nay); border-radius: 0 .35rem .35rem 0; }
.seg.thin .seg-label { position: relative; top: -1.6rem; color: var(--dp-text); }
.series { display: grid; gap: .5rem; }
.series-part { border: 1px solid var(--dp-line); border-radius: .35rem; padding: .35rem .6rem; }
.cell-label { margin: .2rem 0; }
.district-series { border-top: 1px solid var(--dp-line); padding-top: .5rem; margin-top: .5rem; }

/* cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; margin: .75rem 0; }
.card { background: var(--dp-panel); border: 1px solid var(--dp-line); border-left: 4px solid var(--dp-muted); border-radius: .5rem; padding: .75rem; display: grid; gap: .35rem; align-content: start; }
.card.party-d { border-left-color: var(--dp-party-d); } .card.party-r { border-left-color: var(--dp-party-r); } .card.party-o { border-left-color: var(--dp-party-o); }
.card.hero { border-left-width: 6px; }
.card-head { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--dp-text); }
.monogram { display: inline-flex; width: 2.4rem; height: 2.4rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--dp-line); color: var(--dp-text); font-weight: 800; font-family: var(--dp-display); }
.card-name { font-size: 1.05rem; flex: 1; }
.card-seat { color: var(--dp-muted); margin: 0; font-size: .85rem; }
.card-stats { display: grid; gap: .25rem; }
/* the member's portrait (idea #36): the image, its credit line (attributed),
 * its licence chip — sized here, never by an inline style (the CSP) */
.portrait { margin: 0 0 .35rem; display: grid; justify-items: start; gap: .2rem; }
.portrait-link { display: inline-block; line-height: 0; border-radius: .35rem; }
.portrait-img { width: 150px; height: 183px; object-fit: cover; border-radius: .35rem; background: var(--dp-line); border: 1px solid var(--dp-line); }
.portrait-credit { margin: 0; color: var(--dp-muted); font-size: .72rem; line-height: 1.3; }
/* what the portrait's OWN Content Credentials record (the manifest's word, a link to
 * the photo's record) — the same quiet size as the credit, never a warning colour */
.portrait-credentials { margin: 0; max-width: 150px; color: var(--dp-muted); font-size: .7rem; line-height: 1.3; }
.portrait-credentials a { color: inherit; text-decoration: underline; text-decoration-color: var(--dp-line); }
.portrait-cap { display: grid; gap: .15rem; }
/* the chip sizes to its words (a grid item stretches by default: 217 px beside a 150 px image) */
.portrait-cap .chip.licence { justify-self: start; }
.chip.licence { background: none; color: var(--dp-cyan); border: 1px solid var(--dp-cyan); font-weight: 700; text-decoration: none; }
.chip.licence-attributed { color: var(--dp-gold); border-color: var(--dp-gold); }
.tip-member { display: flex; align-items: center; gap: .4rem; margin: .25rem 0; }
.tip-portrait { width: 36px; height: 44px; object-fit: cover; border-radius: .2rem; flex: none; }
/* an attributed portrait's credit line, under its thumbnail — the licence's condition */
.tip-credit { margin: 0 0 .25rem; color: var(--dp-muted); font-size: .7rem; line-height: 1.25; }
/* a seat NOT held at the page's instant, with its stated end or start (2026-09-29) */
.seat-not-held, .tip-seat { color: var(--dp-muted); font-style: italic; }
.tip-seat { margin: 0 0 .25rem; font-size: .7rem; line-height: 1.25; }
/* the vote log's count of roll calls closed when no seat was held is a control that
   filters the table to those rows (2026-10-03 — it was a bare number) */
.not-seated-count { background: none; border: 0; padding: 0; font: inherit; color: var(--dp-drill);
  text-decoration: underline; cursor: pointer; }
table.only-not-seated tbody tr:not([data-not-seated]) { display: none; }
.stat { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.stat .label { font-size: .72rem; color: var(--dp-muted); }
.stat .fig { font-size: 1.35rem; color: var(--dp-drill); }
.stat a.fig { text-decoration: none; border-bottom: 2px solid var(--dp-cyan); }
.stat span.fig { color: var(--dp-muted); font-size: 1rem; }
.stat-wrap .honesty { margin-top: 0; }
.member-link { font-weight: 700; }

/* forms and buttons */
form.search { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
form.locate { display: grid; gap: .5rem; }
label { display: flex; flex-direction: column; font-weight: 600; gap: .25rem; }
label.inline { display: inline-flex; flex-direction: row; align-items: center; gap: .4rem; margin-right: .75rem; }
input, select { font: inherit; color: var(--dp-text); background: var(--dp-ground); border: 1px solid var(--dp-muted); padding: .35rem .5rem; border-radius: .25rem; min-height: 44px; }
button, .btn { font: inherit; font-family: var(--dp-display); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; color: var(--dp-text); background: var(--dp-panel); border: 1px solid var(--dp-muted); padding: .45rem .9rem; border-radius: .35rem; min-height: 44px; text-decoration: none; display: inline-block; }
.btn-gold { background: var(--dp-gold); color: var(--dp-ink); border-color: var(--dp-gold); }
.btn-yea { background: var(--dp-yea); color: var(--dp-ink); border-color: var(--dp-yea); }
.btn-nay { background: var(--dp-nay); color: var(--dp-ink); border-color: var(--dp-nay); }
.btn-withdraw, .btn-ghost { background: none; }
.cast { border: 1px solid var(--dp-muted); border-radius: .5rem; padding: .6rem .8rem; margin: .75rem 0; }
.cast-buttons { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }
.cast-prompt { font-weight: 700; font-size: 1.05rem; }
.board-row { border-top: 1px solid var(--dp-line); padding: .5rem 0; }
.board-head { font-size: 1.05rem; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* tables */
table { border-collapse: collapse; width: 100%; margin: .5rem 0; }
th, td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--dp-line); vertical-align: top; }
th { font-weight: 700; color: var(--dp-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
details { margin: .25rem 0; }
summary { cursor: pointer; color: var(--dp-muted); }
dl.axes dt, dl dt { font-weight: 700; margin-top: .5rem; color: var(--dp-muted); }
dl dd { margin: 0 0 .25rem 0; }
dl.glossary dt { color: var(--dp-text); }

/* the map */
/* the map is the hero: ~3/4 of the width, the card column beside it (inventor 2026-09-27:
   "the map is still messed up" — at 62/38 the map sat in half the page beside an empty column) */
.map-wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(15rem, 1fr); gap: 1rem; align-items: start; }
.map-host { min-width: 0; }
.map-side { min-width: 0; }
.map-strip { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.zoom { display: inline-flex; gap: .35rem; }
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: .5rem 0; }
.legend-row { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.legend-btn { background: none; border: 0; padding: 0; min-height: 0; text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--dp-text); text-decoration: underline dotted var(--dp-cyan); }
.legend-def { flex-basis: 100%; color: var(--dp-muted); font-size: .8rem; margin: 0; }
.legend-counts { flex-basis: 100%; color: var(--dp-muted); font-size: .85rem; margin: 0; }
.swatch { display: inline-block; width: 1rem; height: 1rem; border-radius: .2rem; border: 1px solid var(--dp-muted); background: var(--dp-line); }
.map-svg-wrap { position: relative; touch-action: pan-y pinch-zoom; }
#dp-map { width: 100%; height: auto; display: block; background: var(--dp-ground); border: 1px solid var(--dp-line); border-radius: .5rem; }
#dp-map .frame { fill: none; stroke: var(--dp-muted); stroke-width: 1; stroke-dasharray: 4 4; }
#dp-map .frame-label { fill: var(--dp-muted); font-size: 110px; }
/* the HTML `hidden` attribute means nothing to an SVG element (the UA sheet's
   [hidden]{display:none} is HTML's): the Senate layer sat drawn ABOVE the House
   layer and swallowed every real hover and click in House mode — measured in
   the browser 2026-09-27 (elementFromPoint over KS-1 answered s-KS). */
#dp-map [hidden] { display: none; }
/* district lines are HAIRLINES in the ground colour, so 441 fills stay vivid instead of
   turning dense areas grey; state outlines are bright and drawn ON TOP (civic_map.js). */
#dp-map .arc { fill: none; stroke: var(--dp-ground); stroke-opacity: .85; stroke-width: .6; pointer-events: none; }
#dp-map .arc.state { stroke: var(--dp-text); stroke-opacity: .95; stroke-width: 1.25; }
#dp-map[data-chamber="senate"] .arc:not(.state) { display: none; }
/* where the map already has only half the page (the home page's two columns), the card
   goes BELOW the map, never beside it — side by side there, the map shrank to a thumbnail */
.two-col .map-wrap { grid-template-columns: minmax(0, 1fr); }
.map-side-empty { border: 1px dashed var(--dp-line); border-radius: .5rem; padding: .75rem 1rem; color: var(--dp-muted); }
.map-side-head { font-family: var(--dp-display); text-transform: uppercase; letter-spacing: .06em; color: var(--dp-gold); margin: 0 0 .35rem; }
.map-method { margin: .5rem 0 0; color: var(--dp-muted); font-size: .8rem; }
.map-method summary { cursor: pointer; color: var(--dp-text); font-size: .85rem; }
#dp-map .d, #dp-map .s { cursor: pointer; stroke: none; }
#dp-map .hot { fill: none; stroke: var(--dp-gold); stroke-width: 3; vector-effect: non-scaling-stroke; pointer-events: none; }
#dp-map path.tok-pty-dem, .swatch.tok-pty-dem, .tok-mode-both-d { fill: var(--dp-party-d); background: var(--dp-party-d); }
#dp-map path.tok-pty-rep, .swatch.tok-pty-rep, .tok-mode-both-r { fill: var(--dp-party-r); background: var(--dp-party-r); }
#dp-map path.tok-pty-ind, .swatch.tok-pty-ind, .tok-mode-independent { fill: var(--dp-party-o); background: var(--dp-party-o); }
#dp-map rect.tok-pty-dem { fill: var(--dp-party-d); } #dp-map rect.tok-pty-rep { fill: var(--dp-party-r); } #dp-map rect.tok-pty-ind { fill: var(--dp-party-o); }
#dp-map path.tok-other-1, #dp-map rect.tok-other-1, .swatch.tok-other-1 { fill: var(--dp-other-1); background: var(--dp-other-1); }
#dp-map path.tok-other-2, #dp-map rect.tok-other-2, .swatch.tok-other-2 { fill: var(--dp-other-2); background: var(--dp-other-2); }
#dp-map path.tok-other-3, #dp-map rect.tok-other-3, .swatch.tok-other-3 { fill: var(--dp-other-3); background: var(--dp-other-3); }
#dp-map path.tok-other-4, #dp-map rect.tok-other-4, .swatch.tok-other-4 { fill: var(--dp-other-4); background: var(--dp-other-4); }
#dp-map path.tok-no-member, #dp-map rect.tok-no-member, #dp-map path.tok-no-senators, .swatch.tok-no-member, .swatch.tok-no-senators, .tok-mode-vacant, .tok-mode-no-seats { fill: var(--dp-panel); background: var(--dp-panel); stroke: var(--dp-muted); stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }
#dp-map path.tok-unknown, #dp-map rect.tok-unknown, .swatch.tok-unknown, .tok-mode-unknown { fill: var(--dp-line); background: var(--dp-line); stroke: var(--dp-muted); stroke-dasharray: 2 4; }
#dp-map path.tok-zz, #dp-map rect.tok-zz, .swatch.tok-zz { fill: var(--dp-ground); background: var(--dp-ground); stroke: var(--dp-line); }
.swatch.tok-mode-split, .swatch.tok-split { background: linear-gradient(135deg, var(--dp-party-d) 50%, var(--dp-party-r) 50%); }
#dp-map path:hover { stroke: var(--dp-gold); stroke-width: 2; vector-effect: non-scaling-stroke; }
.map-tip { position: absolute; pointer-events: none; background: var(--dp-panel); border: 1px solid var(--dp-muted); border-top: 3px solid var(--dp-gold); border-radius: .35rem; padding: .4rem .6rem; max-width: 20rem; font-size: .85rem; z-index: 10; }
.map-tip p { margin: .15rem 0; }
.tip-head { color: var(--dp-gold); }
.tip-open { color: var(--dp-cyan); }
.map-under { margin-top: .5rem; }
.map-list ol, .map-list ul { padding-left: 1.2rem; }

/* the brand footer: the bee (transparent) on black */
.dp-brand { margin-top: 3rem; padding-top: 1rem; border-top: 2px solid var(--dp-gold); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .9rem; color: var(--dp-muted); }
.dp-bee { width: 60px; height: 28px; }
.dp-mark { font-size: .8rem; color: var(--dp-gold); }
.dp-powered { font-weight: 800; color: var(--dp-text); }

/* motion */
@media (prefers-reduced-motion: reduce) {
  .dp-ticker .track { animation: none; }
  * { transition-duration: 0s !important; }
}

/* mobile: one column, no sideways scroll, 44 px targets */
@media (max-width: 48rem) {
  body { padding: 0 1rem 2rem; }
  .two-col, .map-wrap { grid-template-columns: 1fr; }
  #dp-menu { display: inline-block; }
  .dp-nav ul { display: none; }
  .dp-nav[data-open="1"] ul { display: flex; flex-direction: column; width: 100%; }
  table, thead, tbody, tr, th, td { display: block; }
  thead { position: absolute; left: -999px; }
  td { border: 0; padding: .15rem 0; }
  td[data-label]::before { content: attr(data-label) ": "; color: var(--dp-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
  tr { border-bottom: 1px solid var(--dp-line); padding: .35rem 0; }
  .pop { position: fixed; left: 0; right: 0; bottom: 0; max-width: none; margin: 0; border-radius: .5rem .5rem 0 0; z-index: 30; }
  .grid { grid-template-columns: 1fr; }
}

/* network analysis (build A3): the ring of listed ties — every circle and line is a link */
.net-ring { display: block; width: 100%; max-width: 38rem; height: auto; margin: .5rem auto; }
.net-ring line { stroke: var(--dp-muted); stroke-opacity: .5; }
.net-ring circle { fill: var(--dp-muted); stroke: var(--dp-ink); stroke-width: 1; }
.net-ring circle.party-d { fill: var(--dp-party-d); }
.net-ring circle.party-r { fill: var(--dp-party-r); }
.net-ring circle.party-o { fill: var(--dp-party-o); }
.net-ring a:hover line, .net-ring a:focus line { stroke: var(--dp-gold); stroke-opacity: 1; }
.net-ring a:hover circle, .net-ring a:focus circle { stroke: var(--dp-gold); stroke-width: 3; }
.net-ring a:focus { outline: none; }
.net-group, .net-layer, .net-month { border-top: 1px solid var(--dp-line); margin-top: .6rem; padding-top: .4rem; }
.net-members { line-height: 1.7; }
.net-find select { max-width: 16rem; margin: 0 .4rem .4rem 0; }

/* candidate promises (build A5): a row is the member's own words, dated; a pair is two rows
   to read together. The quote is set off, never coloured — a status is a reading, not a grade. */
.promise-row, .promise-pair { border-top: 1px solid var(--dp-line); margin-top: .6rem; padding-top: .4rem; }
.promise-pair .promise-row { border-top: 0; margin-top: .3rem; padding-left: .75rem; border-left: 2px solid var(--dp-line); }
blockquote.excerpt { margin: .4rem 0; padding: .3rem .75rem; border-left: 3px solid var(--dp-muted); font-style: italic; }
/* In the news (build A2): a row is one outlet's item, relayed; the window is the outlet's
   sentence, set small; a reading word is never coloured — tone is not stance. */
.mention-row { border-top: 1px solid var(--dp-line); margin-top: .6rem; padding-top: .4rem; }
.mention-row p.window { font-size: .92em; color: var(--dp-muted); }
.mention-row p.headline { margin: .2rem 0; }
/* Committees and subcommittees (build A1): a seat row is the chamber's own list's row — the
   role is set as the list's word and is never coloured by party; the compact seat list on a
   representative's card and the holder blocks on a bill page share the panel's rule. */
.stat-row { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: .3rem 0; }
.seat-meta { color: var(--dp-muted); font-size: .85em; }
.role { font-weight: 600; }
.role-member { font-weight: 400; }
.seats-inline { list-style: none; margin: 0; padding: 0; }
.seats-inline li { display: inline; }
.seats-inline li + li::before { content: " · "; color: var(--dp-muted); }
.holder { border-top: 1px solid var(--dp-line); margin-top: .6rem; padding-top: .4rem; }
.holder h3 { margin: .2rem 0; }
.committee-link { font-weight: 600; }

/* a hold: the plain public sentence first; the operator's note beneath it, smaller
   (inventor-approved plain public wording, 2026-10-02) */
.held p { margin: .15rem 0; }
.held-operator { font-size: .75rem; color: var(--dp-muted); }
.held-operator h3.held-operator-label { font-size: .8rem; margin: .6rem 0 .2rem; }
.held-operator-label { font-weight: 600; }

/* a vacant seat (2026-10-03): the card's sentences, each with its source beneath it;
   the Clerk's own words folded; the registrations as a plain table */
.vacancy-line { margin: .3rem 0; }
.vacancy-status { font-weight: 600; }
.vacancy-from { font-size: .8rem; color: var(--dp-muted); }
.vacancy-quotes { margin: .4rem 0; }
.vacancy-quotes summary { cursor: pointer; font-weight: 600; }
.vacancy-candidates { margin: .4rem 0; }
.vacancy-teaser p { margin: .3rem 0; }
.tip-vacancy { font-weight: 600; }
.list-vacancy { color: var(--dp-muted); }

/* contact information (2026-10-03): the Washington telephone first and largest; each
   detail's source beneath its words, smaller; a community-maintained list's details
   marked in the amber of a claim */
.contact-phone { font-size: 1.05rem; margin: .35rem 0; }
.contact-phone .tel { font-weight: 700; }
.contact-website, .contact-page, .contact-office, .contact-social { margin: .25rem 0; }
.contact-src { font-size: .8rem; color: var(--dp-muted); }
.contact-community a, .contact-community span { color: var(--dp-amber); }
.contact-nearest { font-size: .85rem; margin: .2rem 0 0; }
.contact-vacant { margin: .5rem 0; }
.card-contact { font-size: .85rem; margin: .2rem 0; }
.tip-phone { margin: .1rem 0; }

/* findings (2026-10-03): ONE Share button on every analytic panel, the share sheet it
   opens, the Finding card a forum post / a message / a profile embeds, and /verify.
   Tokens only (gold = the record's rules, cyan = a drill, green / amber = genuine /
   not, as everywhere on this surface). */
.dp-share-btn { display: block; margin: .65rem 0 0 auto; padding: .3rem .85rem; border-radius: 999px; border: 1px solid var(--dp-gold); background: none; color: var(--dp-gold);
  font-family: var(--dp-display); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; cursor: pointer; }
.dp-share-btn:hover, .dp-share-btn:focus-visible { background: var(--dp-gold); color: var(--dp-ink); }
.share-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow: auto; z-index: 50; background: var(--dp-panel); border-top: 3px solid var(--dp-gold); padding: 1rem 1rem 1.25rem; }
@media (min-width: 48rem) { .share-sheet { left: 50%; right: auto; bottom: auto; top: 8vh; transform: translateX(-50%); width: min(46rem, 94vw); border: 1px solid var(--dp-line); border-top: 3px solid var(--dp-gold); border-radius: .6rem; } }
.share-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.share-head h2 { border: 0; margin: 0; }
.share-close { padding: .3rem .7rem; border-radius: .4rem; border: 1px solid var(--dp-line); background: none; color: var(--dp-text); cursor: pointer; }
.share-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 .35rem; }
.share-act, #verify-go { display: inline-block; padding: .42rem .85rem; border-radius: .4rem; border: 1px solid var(--dp-cyan); color: var(--dp-cyan); background: none; text-decoration: none; font-weight: 700; font-size: .86rem; cursor: pointer; }
.share-act:hover, .share-act:focus-visible, #verify-go:hover { background: var(--dp-cyan); color: var(--dp-ink); }
.share-destinations { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .35rem; }
.share-later { color: var(--dp-muted); font-size: .86rem; }
.share-refused { color: var(--dp-amber); font-weight: 700; }
.small { font-size: .8rem; color: var(--dp-muted); }
.finding-card { border: 1px solid var(--dp-line); border-left: 3px solid var(--dp-gold); border-radius: .5rem; padding: .65rem .85rem; margin: .65rem 0; background: var(--dp-ground); }
.finding-strip { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.finding-brand { color: var(--dp-gold); font-family: var(--dp-display); font-weight: 800; }
.finding-signed { color: var(--dp-muted); }
.finding-caption { margin: .55rem 0 .2rem; padding-left: .75rem; border-left: 3px solid var(--dp-gold); font-style: italic; }
.finding-figure .fig { font-family: var(--dp-display); font-size: 2rem; font-weight: 800; color: var(--dp-text); margin-right: .35rem; }
.finding-rows { width: 100%; border-collapse: collapse; font-size: .84rem; margin: .45rem 0; }
.finding-rows th, .finding-rows td { text-align: left; padding: .22rem .38rem; border-bottom: 1px solid var(--dp-line); vertical-align: top; }
.finding-changed { color: var(--dp-amber); font-weight: 700; }
.finding-links { font-size: .86rem; }
.finding-mark { vertical-align: middle; margin-right: .35rem; border-radius: .2rem; }
.finding-bee { vertical-align: middle; background: var(--dp-paper); border-radius: .2rem; padding: 1px; }
.finding-caveat { font-weight: 700; color: var(--dp-gold); margin: .35rem 0; }
.verify-verdict.verify-genuine { border-top-color: var(--dp-green); }
.verify-verdict.verify-not { border-top-color: var(--dp-amber); }
.verify-sentence { font-size: 1.15rem; font-weight: 800; }
.verify-genuine .verify-sentence, .verify-yes { color: var(--dp-green); }
.verify-not .verify-sentence, .verify-no { color: var(--dp-amber); }
#verify-upload input[type="file"] { color: var(--dp-text); max-width: 100%; }

/* the NEWS ticker (2026-10-03), directly below the vote ticker: the same track, a
 * slower loop for longer lines, set apart by a cyan rule and the gold outlet name */
.dp-ticker-news { border-top: 2px solid var(--dp-cyan); margin-top: -.75rem; }
.dp-ticker-news .track { animation-duration: 150s; }
.dp-ticker-news ul { gap: 2.5rem; font-size: .9rem; }
.dp-ticker-news .news-tag { font-family: var(--dp-display); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem;
  color: var(--dp-ink); background: var(--dp-cyan); border-radius: .25rem; padding: 0 .35rem; }
.dp-ticker-news a.outlet { color: var(--dp-gold); font-weight: 700; }
.dp-ticker-news a.headline { color: var(--dp-text); text-decoration: underline; text-decoration-color: var(--dp-line); text-underline-offset: .2em; }
.dp-ticker-news a.headline:hover, .dp-ticker-news a.headline:focus-visible { color: var(--dp-cyan); text-decoration-color: var(--dp-cyan); }
.dp-ticker-news .no-source { color: var(--dp-muted); }
.dp-ticker-news a.why, .dp-ticker-news a.rec { color: var(--dp-drill); font-size: .75rem; }
.dp-ticker-news a.chip { display: inline-block; background: none; border: 1px solid var(--dp-drill); border-radius: 999px; padding: 0 .45rem; font-size: .75rem; font-weight: 700; color: var(--dp-drill); }
.dp-ticker-news a.chip.measure { color: var(--dp-gold); border-color: var(--dp-gold); }
.dp-ticker-news a.about { color: var(--dp-drill); font-size: .75rem; }
.dp-ticker-news .ticker-empty { margin: 0; padding: .4rem 1rem; font-size: .85rem; }
/* the fixer round (2026-10-03): the date is the record drill; each member chip is followed
 * by its INFERRED badge (the drill to that member's evidence); under the strip, a pause
 * control, the held counts (each opens its explanation) and "How to read this strip" */
.dp-ticker-news a.when { color: var(--dp-muted); font-size: .8rem; text-decoration: underline dotted; }
.dp-ticker-news a.chip.basis { color: var(--dp-text); background: var(--dp-purple); border-color: var(--dp-purple); font-size: .65rem; margin-left: .2rem; }
.dp-ticker-news .ticker-pause { font: inherit; font-size: .75rem; color: var(--dp-drill); background: none; border: 1px solid var(--dp-drill); border-radius: .25rem; padding: 0 .4rem; cursor: pointer; }
.dp-ticker-news .ticker-held a { color: var(--dp-drill); }
.dp-ticker-news .ticker-held .definition { text-decoration: underline dotted; }
.dp-ticker-news .ticker-how { margin: 0; padding: 0 1rem .4rem; font-size: .75rem; color: var(--dp-muted); }
.dp-ticker-news .ticker-how summary { cursor: pointer; color: var(--dp-drill); }
.dp-ticker-news .ticker-how p { margin: .2rem 0; }
@media (prefers-reduced-motion: reduce) {
  /* no motion: the reports sit still and scroll sideways INSIDE the strip (the page
   * itself never scrolls sideways), and the loop's second copy is not drawn */
  .dp-ticker-news { overflow-x: auto; }
  .dp-ticker-news ul[aria-hidden="true"] { display: none; }
}

/* ---- the community (forums build F1, 2026-10-03): people, your profile, the
 * rules, the moderation log. Mobile first: one column, 44px touch targets; a
 * person's own words wrap inside the column and keep their line breaks, and are
 * set apart from this site's own sentences by a quiet left rule. */
.panel.rail-red { border-top-color: var(--dp-red); }
.user-words { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; border-left: 3px solid var(--dp-line); padding-left: .6rem; margin: .5rem 0; }
.profile-card { background: var(--dp-ground); border: 1px solid var(--dp-line); border-radius: .5rem; padding: .75rem; margin: .5rem 0; min-width: 0; }
.profile-card.compact { padding: .6rem .75rem; }
.profile-head { margin: 0 0 .35rem; text-transform: none; letter-spacing: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.profile-head .profile-name { border: 0; padding: 0; white-space: normal; }
.profile-head .handle { color: var(--dp-muted); font-weight: 400; font-size: .9rem; }
.profile-bio { margin-top: .75rem; }
.profile-links { list-style: none; padding: 0; margin: .5rem 0; }
.profile-links li { margin: .25rem 0; }
.profile-links a.user-words { border: 0; padding: 0; }
.badges { list-style: none; padding: 0; margin: .5rem 0; display: flex; flex-direction: column; gap: .35rem; }
.badge { border: 1px solid var(--dp-green); border-radius: .35rem; padding: .35rem .6rem; font-size: .88rem; overflow-wrap: anywhere; }
.badge.badge-unverified { border-color: var(--dp-amber); }
.badge .badge-out { margin-left: .5rem; font-size: .8rem; }
.tombstone { color: var(--dp-amber); font-style: italic; }
.composer label { display: block; margin: .75rem 0 .2rem; font-weight: 600; }
.composer input, .composer textarea { display: block; width: 100%; max-width: 36rem; box-sizing: border-box; margin-top: .25rem; }
textarea { font: inherit; color: var(--dp-text); background: var(--dp-ground); border: 1px solid var(--dp-muted); padding: .45rem .5rem; border-radius: .25rem; min-height: 44px; resize: vertical; }
.counter { display: block; font-size: .78rem; color: var(--dp-muted); margin-top: .15rem; }
.rule-line { border-left: 3px solid var(--dp-gold); padding-left: .6rem; color: var(--dp-text); }
.rule-line.big { font-size: 1.15rem; font-weight: 600; }
.composer .actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.composer .btn, .report .btn, .step .btn, .queue-row .btn { min-height: 44px; }
.preview { margin: .75rem 0; }
.said-ok { color: var(--dp-green); font-weight: 600; }
.said-no { color: var(--dp-amber); font-weight: 600; }
.step { border-top: 1px solid var(--dp-line); padding-top: .5rem; margin-top: .75rem; }
.step input { max-width: 100%; }
code.token { display: inline-block; padding: .25rem .4rem; border: 1px dashed var(--dp-gold); border-radius: .25rem; color: var(--dp-gold); }
.report summary { cursor: pointer; color: var(--dp-drill); min-height: 44px; display: flex; align-items: center; }
.report select { max-width: 100%; }
.rules dt { font-weight: 700; color: var(--dp-text); margin-top: .75rem; }
.rules dd { margin: .2rem 0 0 0; color: var(--dp-muted); }
.queue-row { border: 1px solid var(--dp-line); border-left: 3px solid var(--dp-amber); border-radius: .4rem; padding: .6rem .75rem; margin: .75rem 0; }
.queue-row h3 { margin-top: 0; }
table.counts { margin: .5rem 0 1rem; }
@media (min-width: 48rem) {
  .badges { flex-direction: row; flex-wrap: wrap; }
  .grid.people { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
}

/* ---- the forums (forums build F2, 2026-10-03). Mobile first: one column, every
 * control 44px tall, a person's words wrap inside the column and keep their line
 * breaks, the office's answer is set apart by a green rule, and the orders sit in
 * one row that scrolls sideways inside itself (the page never does). Nothing here
 * draws a count of anybody's approval: there is none. */
.btn-danger { background: var(--dp-red); color: var(--dp-ink); border-color: var(--dp-red); }
.forum-who { font-size: 1.05rem; }
.forum-stats { display: flex; flex-direction: column; gap: .25rem; margin: .5rem 0; }
.forum-stat { margin: 0; display: flex; align-items: baseline; gap: .35rem; }
.forum-stat .fig.big { font-family: var(--dp-display); font-weight: 800; font-size: 1.6rem; color: var(--dp-gold); }
.forum-stat.small .fig { font-weight: 700; }
.forum-stat-line { font-weight: 600; }
.forum-sorts { display: flex; gap: .4rem; overflow-x: auto; padding: .25rem 0 .5rem; margin: 0 0 .5rem; -webkit-overflow-scrolling: touch; }
.sort-pill { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--dp-line); border-radius: 999px; color: var(--dp-text); text-decoration: none; font-weight: 700; font-size: .85rem; }
.sort-pill[aria-current="page"] { background: var(--dp-cyan); color: var(--dp-ink); border-color: var(--dp-cyan); }
.topic-list { list-style: none; padding: 0; margin: .5rem 0; }
.topic-row { border: 1px solid var(--dp-line); border-radius: .5rem; padding: .6rem .75rem; margin: .5rem 0; background: var(--dp-ground); }
.topic-row .topic-title { margin: 0 0 .3rem; text-transform: none; letter-spacing: 0; font-size: 1.02rem; overflow-wrap: anywhere; }
.topic-row .topic-title a { color: var(--dp-text); }
.topic-meta, .topic-about, .topic-forum { margin: .2rem 0; font-size: .85rem; color: var(--dp-muted); overflow-wrap: anywhere; }
.chip-measure { display: inline-block; border: 1px solid var(--dp-gold); color: var(--dp-gold); border-radius: 999px; padding: 0 .5rem; font-size: .8rem; text-decoration: none; margin: .1rem 0; }
.topic-h1 { text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
/* a person's title in the composer's preview: their own letters, as the page draws them */
.preview .topic-title { text-transform: none; letter-spacing: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.crumbs { margin: .75rem 0 0; }
.post-card { background: var(--dp-ground); border: 1px solid var(--dp-line); border-radius: .5rem; padding: .75rem; margin: .75rem 0; min-width: 0; }
.post-card.is-answer { border-left: 4px solid var(--dp-green); }
.post-card.is-mine { border-color: var(--dp-cyan); }
.post-author { margin: 0 0 .35rem; font-weight: 700; overflow-wrap: anywhere; }
.post-author .handle { color: var(--dp-muted); font-weight: 400; }
.spoke-as { margin: .2rem 0 .4rem; font-size: .85rem; color: var(--dp-green); }
.post-body p.user-words { border-left: 0; padding-left: 0; margin: .5rem 0; }
.post-link { overflow-wrap: anywhere; }
.post-meta { font-size: .8rem; color: var(--dp-muted); margin: .4rem 0 0; }
.post-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; margin-top: .5rem; }
.post-actions .btn, .post-actions summary { min-height: 44px; }
.post-badges summary, .versions summary { cursor: pointer; color: var(--dp-drill); min-height: 44px; display: flex; align-items: center; font-size: .85rem; }
.composer-gate { border-left: 4px solid var(--dp-amber); padding: .25rem .75rem; margin: .5rem 0; }
.kind-choice { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.kind-btn { text-transform: none; letter-spacing: 0; font-family: var(--dp-body); font-weight: 700; border-radius: 999px; }
.kind-btn[aria-pressed="true"] { background: var(--dp-cyan); color: var(--dp-ink); border-color: var(--dp-cyan); }
.lens-box { border: 1px dashed var(--dp-amber); border-radius: .4rem; padding: .5rem .75rem; margin: .5rem 0; max-width: 36rem; }
.lens-title { margin: 0 0 .25rem; font-family: var(--dp-display); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; color: var(--dp-amber); }
.lens-word { font-weight: 700; color: var(--dp-text); }
.lens-clear { color: var(--dp-green); }
.composer-status { margin: .5rem 0; }
.pager { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .75rem 0; }
.district-forums { padding-left: 1.1rem; }
.district-forums li { margin: .4rem 0; }
@media (min-width: 48rem) {
  .forum-stats { flex-direction: row; gap: 1.5rem; flex-wrap: wrap; }
}
/* ---- private messages (forums build F3, 2026-10-03): /messages, drawn by civic_dm.js ---- */
.dm-head .lede { color: var(--dp-muted); max-width: 40rem; margin: .25rem 0 .75rem; }
.dm-box { background: var(--dp-panel); border: 1px solid var(--dp-line); border-radius: .5rem; padding: .75rem; margin: .75rem 0; min-width: 0; }
.dm-box h2 { margin: 0 0 .5rem; overflow-wrap: anywhere; }
.dm-office { border-top: 3px solid var(--dp-green); }
.dm-gate { border-left: 4px solid var(--dp-amber); padding: .25rem .75rem; margin: .75rem 0; max-width: 40rem; }
.dm-warn { border: 1px solid var(--dp-amber); border-left-width: 4px; border-radius: .4rem; padding: .5rem .75rem; margin: .75rem 0; }
.dm-counts { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .5rem 0; }
.dm-list { scroll-margin-top: 6rem; }
.dm-counts a { min-height: 44px; display: inline-flex; align-items: center; }
.dm-list h3 { margin: 1rem 0 .25rem; font-size: 1rem; }
.dm-rows { list-style: none; margin: 0; padding: 0; }
.dm-row { border-top: 1px solid var(--dp-line); padding: .6rem 0; min-width: 0; }
.dm-row .dm-who { font-weight: 700; overflow-wrap: anywhere; min-height: 44px; display: inline-flex; align-items: center; flex-wrap: wrap; gap: .25rem; }
.dm-row .handle, .dm-party .handle { color: var(--dp-muted); font-weight: 400; }
.dm-row-state { margin: .1rem 0; color: var(--dp-muted); font-size: .9rem; }
.dm-request_in { border-left: 3px solid var(--dp-gold); padding-left: .5rem; }
.dm-write { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; margin: .5rem 0; }
.dm-write label { display: flex; flex-direction: column; gap: .2rem; font-weight: 600; flex: 1 1 14rem; }
.dm-write input { width: 100%; box-sizing: border-box; min-height: 44px; }
.dm-write .btn, .dm-actions .btn, .dm-compose .btn, .dm-report .btn, .dm-file .btn, .dm-warn .btn, .dm-gate .btn { min-height: 44px; }
.dm-write .small { flex-basis: 100%; margin: 0; }
.dm-limits { display: grid; grid-template-columns: 1fr; gap: .1rem 1rem; margin: .5rem 0 0; }
.dm-limits dt { color: var(--dp-muted); font-size: .85rem; margin-top: .4rem; }
.dm-limits dd { margin: 0; font-weight: 700; }
.dm-def summary { cursor: pointer; color: var(--dp-drill); min-height: 44px; display: flex; align-items: center; font-size: .9rem; }
.dm-party-name { margin: 0; overflow-wrap: anywhere; }
.dm-as { color: var(--dp-green); font-size: .9rem; }
.dm-state { color: var(--dp-muted); }
.dm-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.dm-codes { list-style: none; padding: 0; margin: .25rem 0; }
.dm-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .05em; overflow-wrap: anywhere; margin: .2rem 0; }
.dm-thread { display: flex; flex-direction: column; gap: .5rem; margin: .75rem 0; }
.dm-msg { border: 1px solid var(--dp-line); border-radius: .6rem; padding: .5rem .75rem; max-width: 40rem; min-width: 0; background: var(--dp-ground); }
.dm-msg.dm-out { align-self: flex-end; border-color: var(--dp-cyan); }
.dm-msg.dm-in { align-self: flex-start; }
.dm-msg.dm-failed { border-style: dashed; color: var(--dp-muted); }
.dm-meta { margin: 0 0 .25rem; font-size: .8rem; color: var(--dp-muted); }
.dm-from { font-weight: 700; color: var(--dp-text); }
.dm-words .post-body p.user-words { margin: .25rem 0; }
.dm-removed { border-left: 4px solid var(--dp-amber); padding-left: .5rem; }
.dm-files, .dm-chips { list-style: none; padding: 0; margin: .4rem 0; display: flex; flex-direction: column; gap: .35rem; }
.dm-file, .dm-chip { border: 1px solid var(--dp-line); border-radius: .4rem; padding: .35rem .5rem; min-width: 0; }
.dm-file-name { font-weight: 700; overflow-wrap: anywhere; }
.dm-file-view { margin-top: .35rem; }
.dm-image { display: block; max-width: 100%; height: auto; border-radius: .3rem; }
.dm-text { max-height: 24rem; overflow: auto; font-size: .85rem; }
.dm-attach { margin: .75rem 0; }
.dm-drop { border: 1px dashed var(--dp-line); border-radius: .5rem; padding: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.dm-drop[data-over="1"] { border-color: var(--dp-gold); }
.dm-drop { position: relative; }
.dm-attach input.dm-pick { position: absolute; left: 0; top: 0; width: 1px; height: 1px; max-width: 1px; margin: 0; padding: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.dm-drop label.btn { cursor: pointer; display: inline-flex; align-items: center; }
.dm-pick:focus-visible + label { outline: 2px solid var(--dp-gold); outline-offset: 2px; }
.dm-meter { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; }
.dm-meter meter { width: 12rem; max-width: 60%; }
.dm-consent { display: flex; align-items: flex-start; gap: .4rem; }
.dm-consent input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; }
@media (min-width: 48rem) {
  .dm-limits { grid-template-columns: max-content 1fr; }
  .dm-limits dt { margin-top: 0; }
}
/* 2026-10-03 (forums fixer F2): the measure a new topic will be listed under, said on the
   composer with one tap to take it off */
.about-chip { border-left: 4px solid var(--dp-amber); padding: .25rem .75rem; margin: .5rem 0; }
.about-chip .btn { min-height: 44px; margin-left: .25rem; }
/* 2026-10-03 (findings design §8, re-import): drop a file anywhere (the overlay), the
   Open-a-finding control every page carries, and the workspace page — then vs now,
   side by side, your rows beside the records. Tokens only (gold = the rules, cyan =
   a drill, amber = not checked against the record, as everywhere on this surface). */
.dp-drop-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem;
  background: var(--dp-ground); opacity: .94; border: 4px dashed var(--dp-gold); color: var(--dp-gold); font-family: var(--dp-display); font-weight: 800; font-size: 1.4rem; pointer-events: none; }
.dp-open-finding { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; max-width: min(22rem, 92vw); }
.dp-open-btn { min-height: 44px; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--dp-gold); background: var(--dp-panel); color: var(--dp-gold);
  font-family: var(--dp-display); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.dp-open-btn:hover, .dp-open-btn:focus-visible { background: var(--dp-gold); color: var(--dp-ink); }
.dp-open-panel { margin-top: .5rem; padding: .75rem; background: var(--dp-panel); border: 1px solid var(--dp-line); border-radius: .5rem; }
.dp-open-panel[hidden] { display: none; }
.ws-genuine { color: var(--dp-cyan); font-weight: 700; }
.ws-label { color: var(--dp-amber); font-weight: 700; }
.ws-sentence { font-weight: 700; }
.ws-table { width: 100%; border-collapse: collapse; font-size: .84rem; margin: .45rem 0; }
.ws-table th, .ws-table td { border-bottom: 1px solid var(--dp-line); padding: .3rem .4rem; text-align: left; vertical-align: top; }
.ws-counts .pill { margin-right: .35rem; }
.ws-pill-added { border-color: var(--dp-cyan); }
.ws-pill-removed { border-color: var(--dp-amber); }
.ws-pill-changed { border-color: var(--dp-gold); }
.ws-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.ws-form input { min-height: 44px; }
.ws-list { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .4rem; }
.ws-sheet .ws-table { max-height: 40vh; display: block; overflow: auto; }
/* 2026-10-03 (design §1): a report's sentence read against the chamber's record — the
 * chip opens the reading; a difference is drawn in the gold of a pointer, never red */
.chip.record-agrees { background: none; color: var(--dp-cyan); border: 1px solid var(--dp-cyan); font-weight: 700; text-decoration: none; }
.chip.record-differs { background: none; color: var(--dp-gold); border: 1px solid var(--dp-gold); font-weight: 700; text-decoration: none; }
.dp-ticker-news a.chip.record-agrees { color: var(--dp-cyan); border-color: var(--dp-cyan); }
.dp-ticker-news a.chip.record-differs { color: var(--dp-gold); border-color: var(--dp-gold); }
.record-reading .chip { vertical-align: baseline; }
/* 2026-10-03 (design §2 + §3): compare — two to four subjects side by side; every layer
 * folds; on a phone the subjects stack and nothing scrolls sideways; no total anywhere */
.cmp-subjects { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; margin: .5rem 0; }
.cmp-subject { border: 1px solid var(--dp-line); border-radius: .5rem; padding: .5rem .75rem; min-width: 0; overflow-wrap: anywhere; }
.cmp-subject h3, .cmp-subject h4 { margin: 0 0 .25rem; }
.cmp-layer { border-top: 1px solid var(--dp-line); margin-top: .6rem; padding-top: .4rem; }
.cmp-layer > summary { cursor: pointer; font-weight: 700; color: var(--dp-text); min-height: 44px; display: flex; align-items: center; }
.cmp-rows, .cmp-race, .cmp-groups { list-style: none; padding: 0; margin: .4rem 0; }
.cmp-rows > li, .cmp-race > li { border-top: 1px solid var(--dp-line); padding: .4rem 0; overflow-wrap: anywhere; }
.cmp-per { list-style: none; padding: 0 0 0 .5rem; margin: .2rem 0; font-size: .9rem; }
.cmp-pos { white-space: normal; }
.cmp-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.cmp-form select { min-height: 44px; max-width: 100%; }
.cmp-method summary { cursor: pointer; color: var(--dp-muted); font-size: .85rem; }
.cmp-table { table-layout: auto; width: 100%; }
@media (max-width: 48rem) { .cmp-subjects { grid-template-columns: 1fr; } }

/* 2026-10-06: the preview note above a page that carries an analytic published before its checks */
.preview-note { border-left: 3px solid var(--dp-muted); padding: .25rem .6rem; margin: .5rem 0; }

/* 2026-10-06 (the inventor: "members are showing up as gold instead of red"): a member's NAME takes
   the party colour — on the card and as the member page's heading — never the site's gold */
.card.party-d .card-name, h1.party-name-d { color: var(--dp-party-d); }
.card.party-r .card-name, h1.party-name-r { color: var(--dp-party-r); }
.card.party-o .card-name, h1.party-name-o { color: var(--dp-party-o); }

/* 2026-10-06 (stage S1): the Analyze button sits beside Share; the browser workspaces */
.dp-analyze-btn { display: block; margin: .35rem 0 0 auto; padding: .3rem .85rem; border-radius: 999px; border: 1px solid var(--dp-cyan); background: none; color: var(--dp-cyan);
  font-family: var(--dp-display); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; cursor: pointer; }
.dp-analyze-btn:hover, .dp-analyze-btn:focus-visible { background: var(--dp-cyan); color: var(--dp-ink); }
.bench-ws { border-top: 1px solid var(--dp-line); padding-top: .5rem; margin-top: .75rem; }
.bench-records { font-size: .85rem; }