/* Docket.pub — design system */

:root {
  /* warm civic paper */
  --paper:        oklch(0.985 0.005 85);
  --paper-2:      oklch(0.965 0.006 85);
  --paper-3:      oklch(0.94  0.007 85);
  --rule:         oklch(0.88  0.008 85);
  --rule-strong:  oklch(0.78  0.01  85);

  --ink:          oklch(0.20 0.012 250);
  --ink-2:        oklch(0.36 0.012 250);
  --ink-3:        oklch(0.52 0.010 250);
  --ink-4:        oklch(0.68 0.008 250);

  /* civic accent — tweakable; default deep teal */
  --accent:       oklch(0.42 0.085 200);
  --accent-soft:  oklch(0.92 0.04  200);   /* light shade — bg for .cite chips, focus halos, state hits.
                                              Stays light to preserve 9.42:1 text contrast vs --accent-ink. */
  --accent-ink:   oklch(0.32 0.085 200);
  /* Volume-timeline consent fill — split out from --accent-soft because the
     "lighter rubber-stamp" shade needs WCAG SC 1.4.11 ≥ 3:1 against --paper to
     be visible as a graphical object on the page background. The light shade
     above sits at 1.20:1 vs paper (invisible) but can't be darkened without
     breaking the .cite text-on-bg path. New token at 3.40:1 vs paper / 3.32:1
     vs the saturated substantive bar (preserves Decision #68 within-bar gap). */
  --bar-consent:  oklch(0.62 0.06  200);

  /* dollar tiers — slightly desaturated for editorial feel */
  --tier-green:   oklch(0.62 0.13 145);
  --tier-yellow:  oklch(0.78 0.14 88);
  --tier-orange:  oklch(0.66 0.16 55);
  --tier-red:     oklch(0.55 0.18 25);

  /* signal */
  --warn:         oklch(0.62 0.16 55);
  --bad:          oklch(0.55 0.18 25);
  --good:         oklch(0.55 0.13 145);

  --font-display: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-ui:      "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --shadow-1: 0 1px 0 oklch(0.88 0.008 85);
  --shadow-2: 0 8px 24px -12px oklch(0.2 0.01 250 / 0.18);

  --radius:   4px;
  --radius-2: 8px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── type ─────────────────────────────────────────────── */
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.t-mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.t-tnum { font-feature-settings: "tnum" 1, "lnum" 1; }
.t-meta { color: var(--ink-3); font-size: 12px; }
.t-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── shared atoms ─────────────────────────────────────── */
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule-2 { border: 0; border-top: 2px solid var(--ink); margin: 0; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.chip.is-good .dot { background: var(--good); }
.chip.is-warn .dot { background: var(--warn); }
.chip.is-bad  .dot { background: var(--bad); }

/* vote position chips */
.chip-yea     { background: oklch(0.92 0.04 145); color: oklch(0.35 0.10 145); border-color: oklch(0.78 0.08 145); }
.chip-nay     { background: oklch(0.92 0.04 25);  color: oklch(0.40 0.14 25);  border-color: oklch(0.78 0.10 25); }
.chip-abstain { background: var(--paper-2); color: var(--ink-3); }
.chip-absent  { background: var(--paper-3); color: var(--ink-4); }

.tier {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: 12px;
  padding: 2px 8px 3px;
  border-radius: 3px;
  border: 1px solid currentColor;
  background: color-mix(in oklab, currentColor 8%, transparent);
}
.tier-green  { color: var(--tier-green);  }
.tier-yellow { color: oklch(0.55 0.14 88); }
.tier-orange { color: var(--tier-orange); }
.tier-red    { color: var(--tier-red);    }

.cite {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: 3px;
  padding: 1px 5px;
  vertical-align: super;
  line-height: 1.1;
  cursor: pointer;
  user-select: none;
  transition: background .12s;
}
.cite:hover { background: color-mix(in oklab, var(--accent) 22%, transparent); }
.cite.is-active { background: var(--accent); color: var(--paper); }

button { font-family: inherit; cursor: pointer; }

/* link reset */
a { color: inherit; text-decoration: none; }
a.link { color: var(--accent-ink); border-bottom: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); }
a.link:hover { border-bottom-color: var(--accent); }

/* focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* scrollbars */
.thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 4px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

/* Visually hidden but readable by screen readers (used by dollar_tier
   and other a11y partials for sr-only labels). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ──────────────────────────────────────────────────────────────────
   Smart Brevity Card — compact scan (spec 2026-05-12 redesign, PR C)
   ────────────────────────────────────────────────────────────────── */

.smart-brevity-card {
  position: relative;
  display: block;
  padding: 14px 14px 14px 16px;
  margin-bottom: 10px;
  background: rgba(253, 250, 243, 0.7);
  border-left: 3px solid var(--accent-color, #c8cbc0);
  border-radius: 0 4px 4px 0;
  transition: background 0.12s ease;
}
.smart-brevity-card:hover { background: rgba(244, 235, 212, 0.7); }
@media (prefers-reduced-motion: reduce) {
  .smart-brevity-card { transition: none; }
}
.smart-brevity-card.is-failed { opacity: 0.6; }

/* Meta line — date · item ref · category chip · dollar chip · status pill */
.smart-brevity-card .meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: #6b6457;
  margin-bottom: 6px;
}
.smart-brevity-card .meta-line .meta-sep { color: #b8b0a2; }
.smart-brevity-card .meta-date,
.smart-brevity-card .meta-item-ref { white-space: nowrap; }

/* Headline — the only semantic link in the card */
.smart-brevity-card .card-headline {
  font-family: "Source Serif Pro", Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 4px;
}
.smart-brevity-card .card-link {
  color: #1a1814;
  text-decoration: none;
}
.smart-brevity-card .card-link.is-italic {
  font-style: italic;
  color: #4a4540;
}
.smart-brevity-card:hover .card-link {
  text-decoration: underline;
  text-decoration-color: #c4894a;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Pseudo-element click surface — extends the link's click area across
   the whole article. Outline shows on keyboard focus only, not pointer.
   ─────────────────────────────────────────────────────────────────
   FUTURE LANDMINE: if a secondary interactive element is added inside
   the card (e.g., a Download button, inline dropdown, HTMX toggle),
   it WILL be clickable-through by the ::after layer. Fix by giving
   the secondary element ``position: relative; z-index: 2`` so it
   sits above the transparent click surface. The pseudo-element is
   z-index: 1 by being a positioned element inside the position:
   relative article. z-index: 2 on the secondary wins.
   ───────────────────────────────────────────────────────────────── */
.smart-brevity-card .card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.smart-brevity-card .card-link:focus-visible::after {
  outline: 2px solid #c4894a;
  outline-offset: 2px;
}

/* Why-it-matters body */
.smart-brevity-card .why {
  font-family: "Source Serif Pro", Georgia, serif;
  font-size: 13.5px;
  line-height: 1.45;
  color: #3a3530;
  margin: 0 0 8px;
  max-width: 70ch;
}

/* Inline facts line — emoji + value pairs separated by · */
.smart-brevity-card .facts-line {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 12px;
  color: #4a4540;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.smart-brevity-card .facts-line .fact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.smart-brevity-card .facts-line .fact + .fact::before {
  content: "·";
  margin: 0 8px;
  color: #b8b0a2;
}

/* Status pill — pending / failed / degraded / verifying */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: #e9ece1;
  color: #4a4a3d;
  border: 1px solid #c8cbc0;
}
.status-pill--pending   { background: #e9ece1; color: #4a4a3d; }
.status-pill--failed    { background: #f3cdcd; color: #6b1818; border-color: #d97373; }
.status-pill--degraded  { background: #fbe2c2; color: #7a3e10; border-color: #e0a04a; }
.status-pill--verifying { background: #fbf3c7; color: #6b5a10; border-color: #d9c660; }

/* Dollar tier chip */
.dollar-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
}
.dollar-chip--na     { background: #ececec; color: #555;    border: 1px solid #bbb; }
.dollar-chip--green  { background: #e2efd9; color: #2d5519; border: 1px solid #99c878; }
.dollar-chip--yellow { background: #fbf3c7; color: #6b5a10; border: 1px solid #d9c660; }
.dollar-chip--orange { background: #fbe2c2; color: #7a3e10; border: 1px solid #e0a04a; }
.dollar-chip--red    { background: #f3cdcd; color: #6b1818; border: 1px solid #d97373; }

/* Procedural one-line variant (Roll Call, Pledge, etc — decision #5) */
.procedural-line {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 12px;
  margin-bottom: 4px;
  font-size: 12px;
  color: #6b6457;
  border-left: 3px solid var(--accent-color, #c8cbc0);
}

/* ──────────────────────────────────────────────────────────────────
   Volume timeline block (PR D — category-landing redesign)
   ────────────────────────────────────────────────────────────────── */

.volume-timeline-block {
  font-family: "Source Serif Pro", Georgia, serif;
  padding: 16px 24px 18px;
  background: #fdfaf3;
  border-top: 1px solid #e6dfc8;
  border-bottom: 1px solid #e6dfc8;
}

.volume-timeline-block .title-block {
  text-align: center;
  max-width: 64ch;
  margin: 0 auto 10px;
}
.volume-timeline-block .title-block .eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6b6457;
  margin-bottom: 6px;
}
.volume-timeline-block .title-block h2 {
  font-family: "Source Serif Pro", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px;
}
.volume-timeline-block .title-block .caption {
  font-size: 13.5px;
  line-height: 1.5;
  color: #4a4540;
  max-width: 52ch;
  margin: 0 auto;
}

.volume-timeline-block .tally-band {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  max-width: 64ch;
  margin: 18px auto 4px;
  padding: 14px 0;
  border-top: 1px solid rgba(196, 137, 74, 0.25);
  border-bottom: 1px solid rgba(196, 137, 74, 0.25);
}
.volume-timeline-block .tally {
  text-align: center;
}
.volume-timeline-block .tally .tally-label {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b6457;
  margin-bottom: 2px;
}
.volume-timeline-block .tally .tally-value {
  display: block;
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.volume-timeline-block .tally .tally-sub {
  display: block;
  font-size: 11.5px;
  color: #6b6457;
  margin-top: 2px;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}

/* Index-status banner (renamed from "backfill-note" so the citizen-
   jargon regression test stops tripping on the class name). */
.volume-timeline-block .index-status-row {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}
.volume-timeline-block .index-status-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 11.5px;
  color: #5a4a30;
  background: rgba(196, 137, 74, 0.08);
  border-left: 2px solid rgba(196, 137, 74, 0.5);
  padding: 7px 12px;
}

.volume-timeline-block .volume-timeline {
  width: 100%;
  height: 140px;
}
.volume-timeline-block .bar-substantive   { fill: #5a4a30; }
.volume-timeline-block .bar-consent       { fill: #c4894a; opacity: 0.92; }
.volume-timeline-block .bar-consent.is-peak { fill: #a76d2d; opacity: 1; }
.volume-timeline-block .bar-empty         { fill: url(#hatch); opacity: 0.45; }
.volume-timeline-block .axis-x       { fill: #6b6457; font-family: "JetBrains Mono", monospace; font-size: 10px; }
.volume-timeline-block .axis-y-line  { stroke: #d8cfa9; stroke-width: 1; stroke-dasharray: 2 4; }
.volume-timeline-block .axis-y-label { fill: #6b6457; font-family: "JetBrains Mono", monospace; font-size: 9.5px; }
.volume-timeline-block .peak-callout { fill: #5a4a30; font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 10px; font-weight: 500; }
.volume-timeline-block .peak-leader  { stroke: #a76d2d; stroke-width: 1; }

.volume-timeline-block .chart-footnote {
  font-size: 11px;
  color: #6b6457;
  margin-top: 12px;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  text-align: center;
}

.volume-timeline-block a:focus-visible rect {
  outline: 2px solid #c4894a;
  outline-offset: 2px;
}

/* Active-month chip + clear button (PR D) */
.badge-chip--active-month {
  background: #f4e6cb;
  border: 1px solid #d8b97a;
  color: #6b4a15;
}
.chip-clear {
  margin-left: 4px;
  text-decoration: none;
  color: #6b4a15;
  font-weight: 600;
}
.chip-clear:focus-visible {
  outline: 2px solid #c4894a;
  outline-offset: 2px;
}

/* Empty state stability — filtered-empty doesn't visually collapse */
.empty-state {
  min-height: 40vh;
}