/* Private Laws Archive, staging (privilegium.dicta.fyi): set the way its source was printed.
   Direction A, chosen by Rob 2026-10-24 from /mock-statutes.html. Paper and ink; a title
   page and a double rule; each law as an act, with the running head and the volume's own
   marginal notes (date, bill, citation) built from its fields, and the archive's
   classification on two lines under the title. Red is kept for one thing, the chapter
   number, as rubrication. Entries are divided by rules, not boxed: no cards, pills,
   stripes or shadows. Libre Caslon Text carries the reading; Source Sans 3 (UH brand) is
   kept for the few controls that must look like controls. Every pairing measured with
   .scripts/contrast.py in both themes; the chart palette passed the dataviz validator
   against both papers. Dark follows the OS unless the running head's word chose one. */

:root {
  color-scheme: light;
  --paper: #F5F0E6;
  --paper-2: #EDE6D8;
  --field: #FFFDF8;
  --ink: #1E1B16;
  --ink-2: #4A4439;
  --muted: #645C4F;
  --rule: #CFC5B3;
  --control: #8A8170;
  --rubric: #9A1426;
  --focus: #1F5BC6;
  --chart-1: #9A1426;
  --chart-2: #2A78D6;
  --chart-3: #B97800;
  --chart-4: #00866C;
  --chart-5: #6250D6;
  --chart-grid: #E2DACA;
  --band-conflict: rgba(74, 68, 57, 0.15);
  --band-crisis: rgba(98, 80, 214, 0.14);
  --text: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --ui: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #17140F; --paper-2: #211D16; --field: #201C16;
    --ink: #EDE6D6; --ink-2: #CFC6B4; --muted: #B3A993; --rule: #4A4337; --control: #8C826F;
    --rubric: #EE8478; --focus: #8EAEF0;
    --chart-1: #E66767; --chart-2: #3987E5; --chart-3: #C98500; --chart-4: #199E70; --chart-5: #9085E9;
    --chart-grid: #2E2920; --band-conflict: rgba(207, 198, 180, 0.2); --band-crisis: rgba(144, 133, 233, 0.3);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #17140F; --paper-2: #211D16; --field: #201C16;
  --ink: #EDE6D6; --ink-2: #CFC6B4; --muted: #B3A993; --rule: #4A4337; --control: #8C826F;
  --rubric: #EE8478; --focus: #8EAEF0;
  --chart-1: #E66767; --chart-2: #3987E5; --chart-3: #C98500; --chart-4: #199E70; --chart-5: #9085E9;
  --chart-grid: #2E2920; --band-conflict: rgba(207, 198, 180, 0.2); --band-crisis: rgba(144, 133, 233, 0.3);
}

* { box-sizing: border-box; }
/* hidden always hides, even where a layout rule sets display (the year boxes in Congress mode did not). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--text);
  /* The footer keeps to the window's bottom on a short page and follows the content on a long one; never fixed over it. */
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
a { color: inherit; text-decoration-color: var(--control); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sc { font-variant: small-caps; letter-spacing: 0.04em; }
/* The hint's syntax (OR, -pension) in the text face at the text's size, set roman so it stands out of the italic. */
code { font: inherit; font-style: normal; letter-spacing: 0.02em; color: var(--ink); border-bottom: 1px dotted var(--control); }
.staging-notice { background: var(--paper-2); color: var(--ink-2); border-bottom: 1px solid var(--rule); text-align: center; font-style: italic; font-size: 0.92rem; padding: 0.45rem 16px; }

.wrap, header.masthead, #hero, #browse-section, main, .doc-page, .trends-page { width: 100%; max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }

input[type=text], input[type=number], select { font: 1rem/1.4 var(--text); color: var(--ink); background: var(--field); border: 1px solid var(--control); border-radius: 2px; padding: 0.4rem 0.55rem; }
input::placeholder { color: var(--muted); opacity: 1; font-style: italic; }
input[type=checkbox] { accent-color: var(--ink); width: 0.95rem; height: 0.95rem; margin: 0; flex-shrink: 0; position: relative; top: 0.12em; }
button { font: inherit; color: inherit; }
.btn, #hero-search-form button, .search-form button, .browse-submit {
  font: 600 0.95rem/1 var(--ui); letter-spacing: 0.02em; color: var(--paper); background: var(--ink);
  border: 1px solid var(--ink); border-radius: 2px; padding: 0.8rem 1.4rem; cursor: pointer; white-space: nowrap;
}
.btn:hover, #hero-search-form button:hover, .search-form button:hover, .browse-submit:hover { background: var(--ink-2); border-color: var(--ink-2); }
.text-btn { font-variant: small-caps; letter-spacing: 0.04em; background: none; border: 0; padding: 0.1rem 0.2rem; color: var(--ink-2); cursor: pointer; text-decoration: underline; text-decoration-color: var(--control); text-underline-offset: 0.2em; }
.text-btn:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ── Masthead: a running head on every page, the full title page on the search page's front ── */
header.masthead { padding-top: 1.1rem; }
.wordmark { display: block; text-align: center; text-decoration: none; font-variant: small-caps; letter-spacing: 0.05em; font-size: 1.15rem; }
.wordmark i { font-variant: normal; letter-spacing: 0; }
body.landing .wordmark { display: none; }
.double-rule { border: 0; border-top: 3px double var(--ink); margin: 0.75rem 0 0; }
nav.running { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; flex-wrap: wrap; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); font-size: 0.98rem; }
nav.running .links { display: flex; gap: 0.4rem 1.4rem; flex-wrap: wrap; }
nav.running .links a { text-decoration: none; padding: 0.1rem 0; }
nav.running .links a:hover { text-decoration: underline; }
nav.running .links a.active { text-decoration: underline; text-decoration-color: var(--ink); text-decoration-thickness: 1px; }
.theme-word { font-variant: small-caps; letter-spacing: 0.04em; background: none; border: 0; color: var(--ink-2); cursor: pointer; padding: 0.1rem 0.2rem; }
.theme-word:hover { color: var(--ink); text-decoration: underline; }

/* ── Title page and search ── */
.title-page { text-align: center; padding: 2rem 0 0.2rem; }
.title-page .kicker { font-variant: small-caps; letter-spacing: 0.05em; font-size: 1.05rem; color: var(--ink-2); margin: 0; }
.title-page h1 { font: 700 clamp(2.2rem, 6.5vw, 3.6rem)/1.05 var(--text); margin: 0.1rem 0 0.15rem; letter-spacing: 0.01em; }
.title-page .of { font-style: italic; color: var(--ink-2); margin: 0; }
.title-page .nation { font-variant: small-caps; letter-spacing: 0.05em; font-size: 1.2rem; margin: 0; }
.title-page .span { margin: 0.4rem 0 0; color: var(--muted); }
.title-page.inner h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
#hero { padding-top: 0; padding-bottom: 0.4rem; }
#hero > #hero-search-form, #hero > .hero-hint { max-width: 900px; margin-left: auto; margin-right: auto; }
#hero .hero-desc { margin: 1.1rem auto 0; max-width: 40rem; text-align: center; color: var(--ink-2); }
#hero-search-form, .search-form { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem 0.9rem; align-items: end; margin: 1.8rem 0 0.4rem; }
#hero-search-form label, .search-form label { grid-column: 1 / -1; font-variant: small-caps; letter-spacing: 0.04em; color: var(--ink-2); }
#hero-search-input, .search-form input[type=text] { font-size: 1.2rem; padding: 0.55rem 0.75rem; min-width: 0; }
.hero-hint, .search-hint { margin: 0.7rem 0 0; font-style: italic; color: var(--muted); font-size: 0.95rem; }
.search-options { margin: 0.6rem 0 0; color: var(--ink-2); }
.search-options label { display: inline-flex; gap: 0.5rem; align-items: baseline; cursor: pointer; }

/* ── Browse (front page): three columns divided by rules ── */
#browse-section { padding-top: 1.6rem; padding-bottom: 1rem; }
#browse-section > .section-label { font-variant: small-caps; letter-spacing: 0.04em; color: var(--ink-2); border-bottom: 1px solid var(--ink); padding-bottom: 0.35rem; margin: 0; }
.browse-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.browse-control { padding: 1rem 1.25rem 1.1rem; border-right: 1px solid var(--rule); }
.browse-control:first-child { padding-left: 0; }
.browse-control:last-child { border-right: 0; padding-right: 0; }
.browse-label { display: block; font-variant: small-caps; letter-spacing: 0.04em; font-size: 1.02rem; color: var(--ink); margin-bottom: 0.6rem; }
.time-toggle, .toggle-group { display: inline-flex; margin-bottom: 0.65rem; border: 1px solid var(--control); border-radius: 2px; overflow: hidden; }
.time-mode, .toggle-group button { font-variant: small-caps; letter-spacing: 0.04em; font-size: 0.98rem; padding: 0.25em 0.85em; background: var(--field); color: var(--ink-2); border: 0; border-right: 1px solid var(--control); cursor: pointer; }
.time-mode:last-child, .toggle-group button:last-child { border-right: 0; }
.time-mode:hover, .toggle-group button:hover { color: var(--ink); background: var(--paper-2); }
.time-mode.active, .toggle-group button.active { background: var(--ink); color: var(--paper); }
.browse-control select { width: 100%; }
.browse-year-range { display: flex; align-items: center; gap: 0.4rem; }
.browse-year-range input { width: 6.2rem; }
.browse-minor-options { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.3rem; }
.browse-minor-options label { font-size: 0.95rem; color: var(--ink-2); display: flex; gap: 0.5rem; align-items: baseline; cursor: pointer; }
.browse-submit { display: block; margin: 0.6rem auto 0; padding: 0.8rem 2.2rem; }
@media (max-width: 760px) {
  .browse-bar { grid-template-columns: 1fr; }
  .browse-control, .browse-control:first-child, .browse-control:last-child { padding: 0.9rem 0; border-right: 0; border-bottom: 1px solid var(--rule); }
}

main { padding-top: 1.2rem; padding-bottom: 3rem; }

/* ── Results: a sidebar of limits beside the acts ── */
.layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 0 2.2rem; align-items: start; margin-top: 1.6rem; }
.sidebar { position: sticky; top: 1rem; font-size: 0.95rem; }
.results-col { min-width: 0; }
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; margin-bottom: 1.25rem; }
  #hero-search-form, .search-form { grid-template-columns: 1fr; }
}
.filter-group { border-bottom: 1px solid var(--rule); padding: 0.15rem 0 0.55rem; margin-bottom: 0.4rem; }
.filter-group > summary { cursor: pointer; list-style: none; font-variant: small-caps; letter-spacing: 0.04em; font-size: 1.02rem; padding: 0.3rem 0; }
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-group > summary::before { content: "+ "; color: var(--muted); font-variant: normal; }
.filter-group[open] > summary::before { content: "\2212  "; }
.filter-group-body { padding: 0.2rem 0 0.2rem; }
.filter-time-row { display: flex; flex-direction: column; gap: 0.55rem; }
.filter-time-row .year-range { display: flex; align-items: center; gap: 0.35rem; }
.filter-time-row input[type=number] { width: 5.6rem; font-size: 0.95rem; padding: 0.3rem 0.45rem; }
.filter-time-row select { width: 100%; font-size: 0.95rem; padding: 0.3rem 0.45rem; }
.relief-major { margin-bottom: 0.3rem; }
.relief-major-label { font-style: italic; color: var(--ink-2); margin: 0.5rem 0 0.15rem; }
.relief-major:first-child .relief-major-label { margin-top: 0.1rem; }
ul.filter-list { list-style: none; margin: 0; padding: 0; }
ul.filter-list li { padding: 0.12rem 0; }
ul.filter-list label { display: flex; gap: 0.5rem; align-items: baseline; cursor: pointer; line-height: 1.35; }
ul.filter-list .count { color: var(--muted); font-size: 0.88em; flex-shrink: 0; font-variant-numeric: oldstyle-nums tabular-nums; }
ul.filter-list li.zero label { color: var(--muted); }
.clear-filters-btn { font-variant: small-caps; letter-spacing: 0.04em; background: none; border: 0; padding: 0.3rem 0; color: var(--ink-2); cursor: pointer; text-decoration: underline; text-decoration-color: var(--control); text-underline-offset: 0.2em; }
.clear-filters-btn:hover { color: var(--ink); text-decoration-color: currentColor; }

.chips { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin: 0 0 0.6rem; font-style: italic; color: var(--ink-2); }
.chips::before { content: "Limited to"; font-style: normal; font-variant: small-caps; letter-spacing: 0.04em; color: var(--muted); }
.chip { display: inline-flex; align-items: baseline; gap: 0.25rem; }
.chip button { background: none; border: 0; padding: 0 0.15rem; cursor: pointer; color: var(--muted); font-style: normal; font-size: 1.05em; line-height: 1; }
.chip button:hover { color: var(--rubric); }

.status-line { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; flex-wrap: wrap; margin: 0; padding-bottom: 0.4rem; border-bottom: 1px solid var(--ink); color: var(--ink-2); }
.status-line strong { color: var(--ink); }
.status-line .order { font-style: italic; color: var(--muted); }

/* ── An act: the volume's marginal notes beside the running head, title and classification ── */
.act { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0 1.6rem; padding: 1.1rem 0 1.15rem; border-bottom: 1px solid var(--rule); }
.act .margin { font-size: 0.84rem; line-height: 1.45; color: var(--muted); font-style: italic; text-align: right; padding-top: 0.15rem; overflow-wrap: anywhere; }
.act .margin span { display: block; }
.act .head { display: flex; justify-content: space-between; gap: 0.2rem 1rem; flex-wrap: wrap; font-variant: small-caps; letter-spacing: 0.04em; font-size: 0.95rem; color: var(--ink-2); }
.act .ch { color: var(--rubric); font-weight: 700; }
.act h3, .act h2.title { font: italic 400 1.2rem/1.4 var(--text); margin: 0.25rem 0 0.45rem; }
.act h2.title { font-size: 1.45rem; }
.act h3 a { text-decoration: none; }
.act h3 a:hover { text-decoration: underline; }
.an { font-style: normal; font-variant: small-caps; letter-spacing: 0.04em; }
.classes { margin: 0; font-size: 0.94rem; line-height: 1.5; color: var(--ink-2); }
.classes .sc { color: var(--ink); }
@media (max-width: 640px) {
  .act { grid-template-columns: 1fr; }
  .act .margin { order: 2; text-align: left; display: flex; flex-wrap: wrap; gap: 0 0.9rem; margin-top: 0.4rem; }
}

.pagination { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.4rem; color: var(--ink-2); font-style: italic; }
.pagination button { font-style: normal; font-variant: small-caps; letter-spacing: 0.04em; background: none; border: 0; padding: 0.3rem 0.2rem; color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--control); text-underline-offset: 0.2em; }
.pagination button:hover:not(:disabled) { text-decoration-color: currentColor; }
.pagination button:disabled { color: var(--muted); text-decoration: none; cursor: default; }

/* ── A law's own page ── */
.back-link { display: inline-block; margin: 0.2rem 0 0.4rem; font-variant: small-caps; letter-spacing: 0.04em; color: var(--ink-2); }
.law-page .act { border-bottom: 1px solid var(--ink); }
dl.meta-grid { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 1.2rem; margin: 0.9rem 0 0; font-size: 0.95rem; }
dl.meta-grid dt { font-variant: small-caps; letter-spacing: 0.04em; color: var(--muted); }
dl.meta-grid dd { margin: 0; overflow-wrap: anywhere; }
.full-text { white-space: pre-wrap; margin: 1.4rem 0 0; font: 1.05rem/1.75 var(--text); max-width: 42rem; hyphens: auto; }
.law-page section { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0 1.6rem; margin-top: 1.8rem; padding-top: 0.6rem; border-top: 3px double var(--rule); }
.law-page section h2 { font: inherit; font-variant: small-caps; letter-spacing: 0.04em; color: var(--ink-2); text-align: right; margin: 0; }
.event, .opinion { margin-bottom: 0.75rem; font-size: 0.97rem; }
.event .when, .opinion .when { font-style: italic; color: var(--muted); }
@media (max-width: 640px) { .law-page section { grid-template-columns: 1fr; } .law-page section h2 { text-align: left; margin-bottom: 0.5rem; } }
.loading { font-style: italic; color: var(--muted); }

/* ── About and Methodology ── */
.doc-page { padding-top: 0.4rem; padding-bottom: 3rem; max-width: 760px; }
.doc-page h1 { font: 700 2.3rem/1.15 var(--text); text-align: center; margin: 1.6rem 0 0.3rem; }
.doc-nav { text-align: center; font-variant: small-caps; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 1.6rem; }
.doc-nav a { color: var(--ink-2); }
.doc-page h2 { font: inherit; font-size: 1.15rem; font-variant: small-caps; letter-spacing: 0.04em; margin: 2rem 0 0.5rem; padding-top: 0.6rem; border-top: 1px solid var(--rule); }
.doc-page p, .doc-page li { line-height: 1.7; }
.doc-page p { margin: 0 0 0.85rem; text-align: justify; hyphens: auto; }
.doc-page .placeholder { border: 1px dashed var(--control); color: var(--ink-2); padding: 0.7rem 0.9rem; font-style: italic; text-align: left; }

/* ── Case Law ── */
.case-cites { margin: 0.1rem 0 0.3rem; color: var(--ink-2); font-size: 0.97rem; }
.case-cites a { color: var(--ink); }
.no-fulltext-note { margin: 0.3rem 0 0; font-style: italic; color: var(--muted); font-size: 0.9rem; }
.case-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.6rem 0 0.2rem; border-top: 1px solid var(--ink); }
.case-filters .browse-control { padding-top: 0.8rem; }
@media (max-width: 760px) { .case-filters { grid-template-columns: 1fr; } }

/* ── Trends ── */
.trends-page { padding-top: 0.4rem; padding-bottom: 3rem; }
.trends-page h1 { font: 700 2.3rem/1.15 var(--text); text-align: center; margin: 1.6rem 0 0.3rem; }
.trends-intro { color: var(--ink-2); margin: 0 auto 1.4rem; max-width: 44rem; text-align: center; font-style: italic; }
.trends-panel { border-top: 1px solid var(--ink); padding: 0.9rem 0 1rem; margin-bottom: 0.4rem; }
.trends-controls-row { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin-bottom: 0.6rem; }
.trends-control-group .browse-label { margin-bottom: 0.4rem; }
.trends-markers { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; margin-top: 0.4rem; }
@media (max-width: 700px) { .trends-markers { grid-template-columns: 1fr; } }
.trends-markers h3 { font: inherit; font-variant: small-caps; letter-spacing: 0.04em; color: var(--ink-2); margin: 0.8rem 0 0.35rem; grid-column: 1 / -1; }
.marker-list { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.95rem; }
.marker-list label, .category-checks label { display: flex; gap: 0.45rem; align-items: baseline; cursor: pointer; color: var(--ink-2); }
.crisis-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.25rem 1.5rem; }
@media (max-width: 500px) { .crisis-grid { grid-template-columns: 1fr; } }
.trends-category-picker { border-top: 1px solid var(--rule); padding: 0.6rem 0 0; margin-top: 0.6rem; }
.trends-category-picker p { margin: 0 0 0.45rem; font-style: italic; color: var(--muted); }
.category-checks { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: 0.95rem; }
.trends-chart-wrap { overflow-x: auto; position: relative; }
.trends-chart-wrap svg:focus-visible { outline-offset: 4px; }
.trends-chart-wrap svg { display: block; font-family: var(--ui); }
.chart-axis { fill: var(--muted); }
.chart-gridline { stroke: var(--chart-grid); stroke-width: 1; }
.chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.chart-area { opacity: 0.12; }
.chart-marker-band.band-conflict { fill: var(--band-conflict); }
.chart-marker-band.band-crisis { fill: var(--band-crisis); }
.chart-marker-line { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.6; }
/* Chart text is sized inline in real pixels by trends.html; the halo, in the paper's color, keeps lines and bands out of the letters. */
.chart-marker-label { fill: var(--ink-2); paint-order: stroke; stroke: var(--paper); stroke-width: var(--halo, 3); stroke-linejoin: round; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; margin-top: 0.6rem; font-size: 0.95rem; color: var(--ink-2); }
.chart-legend-item { display: flex; align-items: center; gap: 0.45rem; }
.chart-legend-swatch { width: 18px; height: 3px; display: inline-block; }
/* A band's key is the band's own tint, edged in --muted (5.8:1 light, 7.9:1 dark) so it reads against the paper. */
.chart-legend-swatch.band-conflict, .chart-legend-swatch.band-crisis { height: 13px; width: 16px; border: 1px solid var(--muted); }
.chart-legend-swatch.band-conflict { background: var(--band-conflict); }
.chart-legend-swatch.band-crisis { background: var(--band-crisis); }
.chart-tooltip { position: absolute; background: var(--ink); color: var(--paper); font: 0.85rem var(--ui); padding: 0.4rem 0.6rem; pointer-events: none; white-space: nowrap; z-index: 5; }
.trends-table-toggle { margin-top: 0.6rem; }
.trends-table-wrap { overflow-x: auto; margin-top: 0.6rem; }
.trends-table-wrap table { border-collapse: collapse; width: 100%; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.trends-table-wrap th, .trends-table-wrap td { border-bottom: 1px solid var(--rule); padding: 0.3rem 0.6rem; text-align: right; white-space: nowrap; }
.trends-table-wrap th:first-child, .trends-table-wrap td:first-child { text-align: left; }
.trends-table-wrap th { font-weight: 400; font-variant: small-caps; letter-spacing: 0.04em; color: var(--ink-2); border-bottom-color: var(--ink); }

/* ── Footer ── */
footer { margin-top: auto; border-top: 3px double var(--rule); padding: 1.1rem 20px 1.6rem; text-align: center; color: var(--muted); font-size: 0.95rem; }
footer a { color: var(--ink-2); }
@media (min-width: 641px) { .law-page dl.meta-grid, .law-page .full-text { margin-left: 11.1rem; } }
.toggle-group button { white-space: nowrap; }
.trends-note { margin: 1.2rem 0 0; max-width: 46rem; font-style: italic; color: var(--ink-2); font-size: 0.95rem; }

/* Trends: one row of controls over a full-width chart. The markers live in three menus that
   open as panels under their buttons; the legend under the chart turns whole groups on and off. */
.trends-controls-row { align-items: flex-end; }
.marker-menus { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.marker-menu { position: relative; }
.marker-menu > summary { list-style: none; cursor: pointer; font-variant: small-caps; letter-spacing: 0.04em; font-size: 0.98rem; padding: 0.25em 0.75em; border: 1px solid var(--control); border-radius: 2px; background: var(--field); color: var(--ink); white-space: nowrap; }
.marker-menu > summary::-webkit-details-marker { display: none; }
.marker-menu > summary::after { content: " \25BE"; color: var(--muted); font-variant: normal; }
.marker-menu[open] > summary { background: var(--paper-2); }
.marker-count { font-variant: normal; letter-spacing: 0; font-style: italic; color: var(--muted); font-size: 0.9em; }
.marker-pop { position: absolute; z-index: 10; top: calc(100% + 4px); left: 0; min-width: 17rem; padding: 0.7rem 0.85rem; background: var(--paper); border: 1px solid var(--ink); }
.legend-toggle { background: none; border: 0; padding: 0.15rem 0.1rem; cursor: pointer; color: var(--ink-2); font: inherit; }
.legend-toggle:hover { color: var(--ink); text-decoration: underline; }
.legend-toggle[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; }
.legend-toggle[aria-pressed="false"] .chart-legend-swatch { opacity: 0.35; }
.chart-legend-swatch.swatch-statute { width: 18px; height: 0; border-top: 2px dashed var(--ink-2); }
@media (max-width: 640px) { .marker-pop { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; min-width: 0; max-height: 70vh; overflow: auto; } }
@media (max-width: 480px) { .toggle-group button { padding: 0.25em 0.55em; font-size: 0.92rem; } }

.field-error { margin: 0.4rem 0 0; color: var(--rubric); font-size: 0.92rem; font-style: italic; }
input[aria-invalid="true"] { border-color: var(--rubric); outline: 1px solid var(--rubric); }
/* The control row aligns from the top; its toggles drop the browse switch's bottom margin, and the
   marker menus match the toggles' height, so View, Metric and Markers sit level. */
.trends-controls-row { align-items: flex-start; }
.trends-controls .toggle-group { margin-bottom: 0; }
.trends-controls .toggle-group button, .marker-menu > summary { font-size: 0.98rem; line-height: 1.5; padding: 0.25em 0.85em; }

/* The readout: a guide, a dot on each line, and a box of values, inverted from the page so it reads over the chart. */
.chart-guide { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-dot { stroke: var(--paper); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--ink); color: var(--paper); font: 0.92rem/1.4 var(--ui); padding: 0.55rem 0.75rem; min-width: 12rem; max-width: 19rem; }
.chart-tip .tip-head { margin: 0; }
.chart-tip ul { list-style: none; margin: 0.35rem 0 0; padding: 0; }
.chart-tip li { display: flex; align-items: center; gap: 0.45rem; }
.chart-tip li b { margin-left: auto; padding-left: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-tip .tip-events { margin: 0.4rem 0 0; font-style: italic; }
.marker-key { margin: 0.6rem 0 0; padding-left: 1.6rem; columns: 2 14rem; column-gap: 2rem; font-size: 0.95rem; color: var(--ink-2); }