/* 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; }
/* 2026-11-09 (ratchet-a): a defined word or chip past its section's budget of definition
 * buttons opens the glossary entry as a plain link — dressed like a term, never a new box */
a.term-ref { color: inherit; text-decoration: underline dotted var(--dp-cyan); text-underline-offset: .15em; }
a.term-ref:hover { text-decoration-style: solid; }
a.term-ref > .chip, a.term-ref > .pill { cursor: pointer; }
.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; }
/* a definition sentence (S4, ratchet-b): reads as the prose it is, never italic; wraps in its box */
dfn.rule { font-style: inherit; overflow-wrap: anywhere; }
.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; }
/* the vote picture (design B.1, 2026-10-25): fill = the chamber's recorded position (Yea, Nay
   filled; Present outlined; Not Voting outlined and dashed — an empty seat), ring = the party */
.seat-chart { display: block; width: 100%; max-width: 40rem; height: auto; margin: .5rem auto; }
.seat-chart circle.seat { stroke-width: 2; stroke: var(--dp-muted); fill: none; }
.seat-chart circle.party-d { stroke: var(--dp-party-d); }
.seat-chart circle.party-r { stroke: var(--dp-party-r); }
.seat-chart circle.party-o { stroke: var(--dp-party-o); }
.seat-chart circle.seat-yea { fill: var(--dp-yea); }
.seat-chart circle.seat-nay { fill: var(--dp-nay); }
.seat-chart circle.seat-present { fill: none; }
.seat-chart circle.seat-not-voting { fill: none; stroke-dasharray: 2 2; }
.seat-chart a:hover circle, .seat-chart a:focus circle { stroke: var(--dp-gold); stroke-width: 3; }
.seat-legend { text-align: center; font-size: .8rem; }
.seat-key::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .3rem; vertical-align: -.05rem; border: 2px solid var(--dp-muted); }
.seat-key-yea::before { background: var(--dp-yea); } .seat-key-nay::before { background: var(--dp-nay); }
.seat-key-not-voting::before { border-style: dashed; }
.party-tally { width: 100%; border-collapse: collapse; margin: .5rem 0; }
.party-tally th, .party-tally td { border-bottom: 1px solid var(--dp-line); padding: .25rem .4rem; text-align: left; vertical-align: top; }
.party-tally-total th, .party-tally-total td { font-weight: 800; }
/* 2026-10-26 (design Part A, S6): the topic search */
.topic-search { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.topic-search input[type=search] { flex: 1 1 14rem; min-width: 0; padding: .4rem .5rem; font: inherit; }
.topic-rows { list-style: none; padding: 0; margin: .5rem 0; }
.topic-row { border-bottom: 1px solid var(--dp-line); padding: .4rem 0; overflow-wrap: anywhere; }
.topic-row-head { margin: 0 0 .25rem; }
.topic-why { font-size: .92em; }
.topic-why blockquote { margin: .25rem 0 .25rem 1rem; }
.topic-grid-host { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .5rem 0; }
.topic-grid { border-collapse: collapse; font-size: .85em; }
.topic-grid th, .topic-grid td { border-bottom: 1px solid var(--dp-line); padding: .2rem .35rem; text-align: left; white-space: nowrap; }
.topic-area summary { cursor: pointer; }
.topic-nav { overflow-wrap: anywhere; }
.tally-count summary { cursor: pointer; color: var(--dp-drill); text-decoration: underline; }
.tally-members { max-height: 14rem; overflow-y: auto; margin: .25rem 0; padding-left: 1.1rem; font-size: .85rem; }
.vote-picture { border-top: 1px solid var(--dp-line); padding-top: .5rem; margin-top: .75rem; }
.outcome-arithmetic .k-line .tally-count { display: inline-block; font-weight: 800; }
.tally .tally-count { display: inline-block; }
.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; }

/* ---------- THE POWER-ON (inventor 2026-10-19: "add the Waggle Splash on startup, but just like
   on Nexus and Overwatch, show the Damocles logo at the end of the splash"). The Waggle console's
   own splash rules, copied from web/waggle_console.html (only its "what is loading" line is left
   out), its colours re-expressed in this site's theme tokens: the stylesheet holds no colour
   outside the theme, so the console's translucent glows are color-mix() over --dp-gold and
   --dp-plate at the same strengths; /static/civic_splash.js runs it, once per browser session. ---------- */
.boot{position:fixed;inset:0;z-index:120;background:var(--dp-plate);overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.boot .hivecv{position:absolute;inset:0;width:100%;height:100%;display:block}
/* ⚠️ THE GLOW IS THE POWER-ON TREATMENT AND IT STAYS (inventor 2026-07-30, verbatim:
   "the power up logo with the glow was perfect. revert to that"). I had put HIS ©
   artwork on a gold plate because the black lettering read dim to me on the near-black
   field — a treatment he never asked for. His call on his own brand; the drop-shadow
   glow is the look. Do not re-plate this. */
.boot .blogo{position:relative;z-index:1;width:min(58vw,660px);height:auto;
  filter:drop-shadow(0 8px 34px color-mix(in srgb,var(--dp-plate) 55%,transparent)) drop-shadow(0 0 20px color-mix(in srgb,var(--dp-gold) 35%,transparent));
  animation:logoIn 1.1s cubic-bezier(.2,.72,.2,1) both, logoGlow 3s 1s ease-in-out infinite}
@keyframes logoIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes logoGlow{0%,100%{filter:drop-shadow(0 8px 34px color-mix(in srgb,var(--dp-plate) 55%,transparent)) drop-shadow(0 0 14px color-mix(in srgb,var(--dp-gold) 22%,transparent))}
  50%{filter:drop-shadow(0 8px 34px color-mix(in srgb,var(--dp-plate) 55%,transparent)) drop-shadow(0 0 40px color-mix(in srgb,var(--dp-gold) 50%,transparent))}}
.boot.done{opacity:0;transition:opacity .7s ease}
/* an INSTANCE's power-on mark (NEXUS, 2026-10-19): the splash runs exactly as above, then for
   its last 1.5 s the WAGGLE logo fades out and the instance's badge fades in, in its place. */
.boot .blogo.out{animation:logoOut .5s ease forwards}
.boot .bnexus{position:absolute;z-index:1;width:min(42vw,460px);height:auto;opacity:0;
  filter:drop-shadow(0 8px 34px color-mix(in srgb,var(--dp-plate) 55%,transparent)) drop-shadow(0 0 20px color-mix(in srgb,var(--dp-gold) 30%,transparent))}
.boot .bnexus.in{animation:nexusIn .5s ease forwards}
@keyframes logoOut{from{opacity:1}to{opacity:0}}
@keyframes nexusIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.boot .blogo.out{animation:none;opacity:0}.boot .bnexus.in{animation:none;opacity:1}}
/* Damocles: HIDDEN unless civic_splash.js opted this page in before it painted — no script, no
   splash. And a failsafe that needs no script: whatever the script does, the splash stops covering
   the page at 9.5 s (the script's own failsafe removes it at 9 s). */
.boot{display:none}
html.dp-splash .boot{display:flex;animation:dpBootGone 0s linear 9.5s forwards}
@keyframes dpBootGone{to{visibility:hidden;pointer-events:none}}
@media (prefers-reduced-motion:reduce){.boot .blogo{animation:none}.boot.done{transition:none}}