/* /quotes/ — palette values copied once from cards/embed/tokens.mjs's CANON,
 * which is itself copied once from design.md. See that file's header for why:
 * this repo already carries hand-transcribed, drifted copies of this palette
 * elsewhere, and the point of CANON is that this is not a fourth one. */
/* Dark until a visitor chooses otherwise, which is what every other route on
 * this site does — daily/lib/render.mjs states the rule, and the landing page,
 * the essay and the lexicon all follow it. The first draft of this file keyed
 * off prefers-color-scheme instead, and that is wrong here for two reasons
 * beyond consistency: a reader arriving from the dark daily issue in a
 * light-preferring browser got a white page, and the site-wide bar has to pick
 * one default per page, so a page whose default depends on the visitor's OS is
 * a page the bar cannot match. The choice is carried in the same "ds-theme"
 * key the rest of the site uses, read before first paint. */
:root{
  --bg:#0B1220;--surface:#121B30;--line:#1B2743;--fg:#F4F6FB;--quiet:#93A3C0;--accent:#D9962B;--accent-text:#D9962B;
  --serif:"Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;--sans:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono:"JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
:root[data-theme="dark"]{ --bg:#0B1220;--surface:#121B30;--line:#1B2743;--fg:#F4F6FB;--quiet:#93A3C0;--accent:#D9962B;--accent-text:#D9962B; }
:root[data-theme="light"]{ --bg:#F4F6FB;--surface:#FFFFFF;--line:#D9E1F0;--fg:#0B1220;--quiet:#4A5872;--accent:#D9962B;--accent-text:#8A5B0E; }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased}
a{color:var(--accent-text)}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}
header.masthead{border-bottom:1px solid var(--line);padding:44px 0 30px;margin-bottom:30px}
.eyebrow{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--quiet);margin-bottom:12px}
h1{font-family:var(--serif);font-size:clamp(28px,4.6vw,42px);line-height:1.14;margin:0 0 14px;
  letter-spacing:-.01em;font-weight:600}
.standfirst{color:var(--quiet);max-width:64ch;margin:0;font-size:15.5px}
.rule{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px 22px;
  margin:40px 0 0;font-size:14px;line-height:1.6;color:var(--quiet)}
.rule strong{color:var(--fg)}
.rule h2{font-family:var(--serif);font-size:19px;color:var(--fg);margin:0 0 14px;font-weight:600}
.rule ol{margin:10px 0 14px;padding-left:20px}
.rule li{margin-bottom:5px}
/* Coverage: how far behind the archive this page is, per corpus, stated rather
   than left for a reader to work out from the dates. It is the one block here
   that changes every morning without anybody editing it. */
.rule .cov{border-top:1px solid var(--line);margin:14px 0 0;padding-top:14px}
.rule .cov table{border-collapse:collapse;width:100%;font-size:13px}
.rule .cov th,.rule .cov td{text-align:left;padding:6px 10px 6px 0;border-bottom:1px solid var(--line);
  vertical-align:top}
.rule .cov thead th{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--quiet);
  font-weight:600}
.rule .cov tbody th{color:var(--fg);font-weight:600;white-space:nowrap}
.rule .cov td{font-variant-numeric:tabular-nums}
.rule .cov .behind{color:var(--accent-text)}
.rule .cov p{margin:12px 0 0}
/* The reach matrix — the one block on the page that argues rather than
   records. Five routes down the side, three branches across the top, every
   cell a count a reader can click into and audit. */
.matrix{border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin:26px 0 0;
  background:var(--surface)}
.matrix h2{font-family:var(--serif);font-size:20px;margin:0 0 8px;font-weight:600}
.mx-lede{font-size:14px;color:var(--quiet);margin:0 0 16px;max-width:62ch;line-height:1.55}
/* position:relative is load-bearing, not tidiness. The .sr spans that say
   "none yet" in an empty cell are absolutely positioned, and a static parent
   is not their containing block, so they escaped this clip, landed at the
   table's real x — 466px on a 320px phone — and widened the whole document.
   Every other block on the page then sat a few pixels left of the screen. */
.mx-scroll{overflow-x:auto;position:relative}
.matrix table{border-collapse:collapse;width:100%;min-width:420px}
.matrix th,.matrix td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:center}
.matrix thead th{vertical-align:bottom}
.matrix tbody th{text-align:left;font-size:13.5px;font-weight:600;color:var(--fg);white-space:nowrap}
.mx-branch{display:block;font-size:12.5px;font-weight:600;color:var(--fg)}
.mx-src{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--quiet);
  margin-top:2px}
button.mx-cell{font:inherit;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;
  background:transparent;color:var(--accent-text);border:1px solid var(--line);border-radius:8px;
  min-width:44px;padding:5px 10px;cursor:pointer}
button.mx-cell:hover{border-color:var(--accent-text)}
button.mx-cell[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#131209}
.mx-empty{color:var(--quiet)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
nav.top{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:20px;font-size:13px}
.filters{display:flex;flex-wrap:wrap;gap:10px 8px;margin:26px 0;padding:16px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px}
.filters .group{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.filters .glabel{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--quiet);
  margin-right:4px}
.filters .showing{flex-basis:100%;margin:2px 0 0;font-size:12.5px;color:var(--quiet);
  display:flex;gap:10px;align-items:center}
button#reset-filters{font:inherit;font-size:12px;background:transparent;color:var(--quiet);
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;cursor:pointer}
button.chip{font:inherit;font-size:12.5px;background:transparent;color:var(--fg);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer}
button.chip .n{margin-left:6px;font-size:11px;color:var(--quiet);font-variant-numeric:tabular-nums}
button.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#131209}
button.chip[aria-pressed="true"] .n{color:#131209;opacity:.7}
button.chip.reset{color:var(--quiet)}
main{padding-bottom:60px}
.q{border:1px solid var(--line);border-radius:14px;padding:26px 26px 20px;margin-bottom:22px;
  background:var(--surface)}
.q .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.tag{display:inline-block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:3px 10px;font-weight:600;border:1px solid var(--line)}
.tag.sector{color:var(--accent-text);border-color:var(--accent-text)}
.tag.basis{color:var(--quiet)}
/* Which branch said it, first chip on every card. The three are distinguished
   by weight rather than by three new colours — the palette has one accent and
   inventing two more here would be the drift CANON exists to prevent. */
.tag.branch{color:var(--fg);border-color:var(--fg);font-weight:700}
blockquote{font-family:var(--serif);font-size:clamp(19px,2.6vw,25px);line-height:1.42;margin:0 0 16px;
  font-weight:500}
blockquote::before{content:"\201C"}
blockquote::after{content:"\201D"}
/* The four parts under a quote read as a sequence — mechanism, consequence,
 * action, provenance — so each one is labelled and the consequence is the one
 * set in body-text colour rather than the quiet grey. It is the sentence the
 * page exists to deliver; the rest is support. */
.lbl{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);
  margin-bottom:5px}
.bridge{font-size:14.5px;color:var(--quiet);margin:0 0 16px;line-height:1.55}
.sowhat{font-size:16.5px;color:var(--fg);margin:0 0 18px;line-height:1.55}
/* An anchor is a phrase the cited document uses, reproduced inside our
 * sentence. The build proves it occurs on both sides before the page renders
 * — see quotes/schema.mjs's rule 10 — and this is what proof looks like from
 * the reader's chair: the government's words are underlined, ours are not. */
.anchor{border-bottom:1px dotted var(--accent-text)}
.act-block{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;
  padding:14px 16px;margin:0 0 16px;background:var(--bg)}
.act-block.none{border-left-color:var(--line)}
.act-head{margin:0 0 6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-text);font-weight:600}
.act-block.none .act-head{color:var(--quiet)}
/* A week the House can revise does not get a deadline's voice. */
.act-certainty{margin-left:8px;letter-spacing:0;text-transform:none;font-weight:400;
  color:var(--quiet);font-size:11.5px}
.act-block[data-action="watch"]{border-left-style:dashed}
.act-detail{margin:0;font-size:14px;color:var(--fg);line-height:1.55}
.act-block.none .act-detail{color:var(--quiet)}
.act-evidence{margin:8px 0 0;font-size:13.5px;color:var(--quiet);font-style:italic;line-height:1.5}
.act-docket{margin:8px 0 0;font-size:12px;color:var(--quiet);font-family:var(--mono)}
.act-link{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:600;
  text-decoration:none;border-bottom:1px solid var(--accent-text)}
.siblings{margin:0 0 16px;font-size:13.5px;display:flex;flex-direction:column;gap:4px}
.siblings a{color:var(--accent-text);text-decoration:none}
.siblings a:hover{text-decoration:underline}
.query{font-size:12px;color:var(--quiet);margin:0 0 16px;font-family:var(--mono);
  background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px 12px;line-height:1.5}
.cite{font-size:13px;color:var(--quiet);margin:0 0 16px;display:flex;flex-wrap:wrap;gap:4px 12px}
.cite .rec{font-family:var(--mono);font-size:.94em}
/* The line each corpus carries that the other two cannot: whether the Federal
   Register printed a presidential action, who sponsored a bill and whether we
   have looked. Set apart so it does not read as more citation. */
.cite-note{flex-basis:100%;font-style:italic;opacity:.9}
.acts{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-size:13px}
.acts a, .acts button{font:inherit}
button.copy{background:var(--accent);color:#131209;border:none;border-radius:8px;padding:7px 14px;
  cursor:pointer;font-weight:600}
button.copy.done{background:var(--fg);color:var(--bg)}
.acts a{color:var(--accent-text);text-decoration:none;border:1px solid var(--line);border-radius:8px;
  padding:7px 12px}
.acts a:hover{border-color:var(--accent-text)}
.detail blockquote{font-size:clamp(24px,4vw,32px)}
.sharewrap img{width:100%;border:1px solid var(--line);border-radius:12px;display:block;margin:22px 0}
footer{border-top:1px solid var(--line);margin-top:40px;padding:26px 0 60px;color:var(--quiet);
  font-size:13px;line-height:1.6}
footer a{color:var(--accent-text)}
.back{display:inline-block;margin-bottom:22px;font-size:13.5px;text-decoration:none}
/* Phones. The reach matrix is the block that breaks first, and it breaks in
   the one way a matrix cannot survive: three branches plus a route label want
   423px, a 390px phone gives the card 304px, so the table scrolled sideways
   with the Congress column off the screen at rest and the route labels gone
   the moment a reader scrolled to it. Both edges clipped, and a cell with a
   number in it but no row or column left to name it says nothing.

   So below this width the table is allowed to fit rather than to scroll:
   min-width off, labels wrapped instead of nowrap, cells and header type
   tightened. That lands all three branches inside a 360px screen with no
   horizontal scroll at all. Narrower than that, or with the system text size
   turned up, it can still overflow, so the label column is pinned — the
   scroll degrades to readable instead of back to the screenshot. */
@media (max-width:640px){
  .wrap{padding:0 16px}
  .rule{padding:18px 16px}
  .filters{padding:14px}
  button#reset-filters{padding:5px 12px}
  .matrix{padding:18px 14px}
  .matrix table{min-width:0}
  .matrix th,.matrix td{padding:8px 4px}
  .matrix tbody th{white-space:normal;font-size:12.5px;line-height:1.3}
  .mx-branch{font-size:11.5px}
  .mx-src{font-size:9.5px;letter-spacing:.03em}
  button.mx-cell{min-width:40px;padding:6px;font-size:14px}
  /* Pinned, with its right edge drawn as a shadow because border-collapse
     drops the border on a sticky cell. */
  .matrix tbody th,.matrix thead th:first-child{position:sticky;left:0;z-index:1;
    background:var(--surface);box-shadow:1px 0 0 var(--line)}
  .q{padding:20px 18px 16px}
}