/* Trade of the House — public site.
   Chart series keep the validated data-viz palette; page neutrals are biased
   cool toward the blue accent so the whole thing reads as one system. */
:root {
  color-scheme: light;
  --page:      #f4f6f8;
  --surface:   #ffffff;
  --surface-2: #eef1f5;
  --ink:       #0d1117;
  --ink-2:     #4a5461;
  --ink-3:     #7c8794;
  --line:      #dde3ea;
  --line-2:    #edf1f5;
  --accent:    #1f5fa8;
  --s1:        #2a78d6;   /* strategy */
  --s2:        #eb6834;   /* S&P 500  */
  --buy:       #006300;
  --sell:      #c0392f;
  --chip:      rgba(31, 95, 168, .09);
  --hot:       rgba(235, 104, 52, .13);
  --shadow:    0 1px 2px rgba(13, 17, 23, .05), 0 8px 24px rgba(13, 17, 23, .06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page:      #0b0e12;
    --surface:   #14181e;
    --surface-2: #1b2029;
    --ink:       #eef2f7;
    --ink-2:     #a6b1be;
    --ink-3:     #737f8c;
    --line:      #232a34;
    --line-2:    #1a1f27;
    --accent:    #6aa9f0;
    --s1:        #3987e5;
    --s2:        #d95926;
    --buy:       #3fae3f;
    --sell:      #e06a60;
    --chip:      rgba(106, 169, 240, .14);
    --hot:       rgba(217, 89, 38, .18);
    --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0b0e12; --surface: #14181e; --surface-2: #1b2029;
  --ink: #eef2f7; --ink-2: #a6b1be; --ink-3: #737f8c;
  --line: #232a34; --line-2: #1a1f27; --accent: #6aa9f0;
  --s1: #3987e5; --s2: #d95926; --buy: #3fae3f; --sell: #e06a60;
  --chip: rgba(106,169,240,.14); --hot: rgba(217,89,38,.18);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------------ chrome */
header.site {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.bar { display: flex; align-items: center; gap: 26px; height: 58px; }
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 15.5px; color: var(--ink);
  letter-spacing: -.015em;
}
.brand span { color: var(--accent); }
/* The logo art is dark-outlined with a transparent ground, so it reads on both
   themes without a plate behind it. */
.brand .mark { width: auto; height: 30px; display: block; }
header nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
header nav a { color: var(--ink-2); font-size: 14px; font-weight: 500; }
header nav a.on { color: var(--ink); font-weight: 650; }

/* The bar above is one fixed-height row, which only works while everything
   fits on it. On a phone it did not: "Trade of the House" broke across three
   lines and the seven links wrapped into three rows, all of it overflowing the
   58px and colliding with the page beneath.

   So below 720px the bar stacks - wordmark on its own row, links on a second
   that scrolls sideways rather than wrapping. Scrolling keeps the header two
   rows tall no matter how many sections exist; wrapping grows it every time one
   is added. */
@media (max-width: 720px) {
  .bar {
    height: auto; flex-direction: column; align-items: stretch; gap: 0;
    padding-top: 10px; padding-bottom: 4px;
  }
  .brand { white-space: nowrap; }
  header nav {
    margin-left: 0; flex-wrap: nowrap; gap: 18px;
    overflow-x: auto; padding: 9px 0 7px;
    /* The strip is short and the cut-off link is the affordance; a scrollbar
       under seven words is noise. */
    scrollbar-width: none;
  }
  header nav::-webkit-scrollbar { display: none; }
  header nav a { white-space: nowrap; }
}

footer.site {
  border-top: 1px solid var(--line); margin-top: 64px;
  padding: 26px 0 44px; color: var(--ink-3); font-size: 13px;
}
footer.site p { margin: 0 0 8px; max-width: 78ch; }
footer .warn strong { color: var(--ink-2); }
footer .stamp { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
/* Stale data is a correctness problem, not a footnote: every figure above it
   is priced to an older date than the reader assumes. Loud enough to be read,
   not so loud it looks like an outage. */
footer .stamp.stale {
  font-family: inherit; font-size: 13px; line-height: 1.5;
  color: var(--ink-2); background: var(--surface-2);
  border-left: 3px solid var(--sell); border-radius: 0 8px 8px 0;
  padding: 10px 14px; margin-top: 10px; max-width: 78ch;
}
footer .stamp.stale strong { color: var(--ink); }

/* -------------------------------------------------------------------- hero */
/* Vertical padding only, as longhand. Every hero is `class="wrap hero"`, and
   the shorthand `padding: 46px 0 8px` silently reset .wrap's `0 22px` to zero
   on both sides - same specificity, declared later, so it won. That pulled the
   heading and lede 22px left of the tables and cards below them on all
   thirteen pages. */
.hero { padding-top: 46px; padding-bottom: 8px; }
.eyebrow {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 12px;
}
h1 {
  font-size: clamp(28px, 4.2vw, 42px); line-height: 1.1;
  letter-spacing: -.025em; font-weight: 700; margin: 0 0 14px;
  text-wrap: balance; max-width: 20ch;
}
.lede { color: var(--ink-2); font-size: 17px; max-width: 66ch; margin: 0 0 6px; }
h2 {
  font-size: 20px; letter-spacing: -.015em; font-weight: 680;
  margin: 44px 0 12px; text-wrap: balance;
}
h3 { font-size: 15px; font-weight: 650; margin: 0 0 10px; letter-spacing: -.01em; }
p { margin: 0 0 12px; }

/* ------------------------------------------------------------------- cards */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 20px; box-shadow: var(--shadow);
}
.grid2 { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.grid3 { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
/* A grid item defaults to min-width:auto, which refuses to shrink below its
   own min-content. A card holding a table or a long unbroken name therefore
   stays wider than its column and pushes the page sideways instead of
   scrolling - the landing feed cards were 295px inside a 276px column at
   320px. min-width:0 lets the column win; the table inside still needs its own
   scroll wrapper. */
.grid2 > *, .grid3 > *, .cardgrid > * { min-width: 0; }

/* Trade page: a true two-column grid rather than CSS columns. A masonry flow
   packs tightly but lets the two sides drift out of step, so nothing lines up
   across the page. A grid keeps each row's cards starting on the same line,
   which is what makes the pairings readable. align-items:start stops a short
   card being stretched to match a tall neighbour. */
.cardgrid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px; align-items: start;
}
@media (max-width: 900px) { .cardgrid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- freshness */
.freshcard {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.freshcard.live { border-left: 3px solid var(--buy); }
.freshcard.waiting { border-left: 3px solid var(--ink-3); }
.freshhead { display: flex; align-items: center; gap: 9px; font-size: 15.5px; }
.pulse, .dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
}
.pulse { background: var(--buy); box-shadow: 0 0 0 0 rgba(0, 99, 0, .5); animation: pulse 2.4s infinite; }
.dot { background: var(--ink-3); }
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(0, 99, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 99, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* ------------------------------------------------------------------- news */
.newsitem { margin-bottom: 14px; }
.newsitem h3 { font-size: 16px; line-height: 1.35; }
.newsitem h3 a { color: var(--ink); }
.newsitem h3 a:hover { color: var(--accent); }
.newsmeta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* -------------------------------------------------------------- stat tiles */
.stats {
  display: grid; gap: 14px; margin: 22px 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px; padding: 15px 17px;
}
.stat .k {
  font-family: ui-monospace, Consolas, monospace; font-size: 10.5px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3);
}
.stat .v {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 25px; font-weight: 640; letter-spacing: -.02em; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.stat .s { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.up { color: var(--buy); } .down { color: var(--sell); } .muted { color: var(--ink-3); }

/* ------------------------------------------------------------------ charts */
.chart-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--ink-2); margin-left: auto; }
.legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }
/* chart.js is shared with the research dashboard and reads that stylesheet's
   token names. Alias them onto this site's palette rather than forking the
   chart code — the two must stay visually identical anyway. */
.chart {
  --series-1: var(--s1);
  --series-2: var(--s2);
  --surface-1: var(--surface);
  --grid: var(--line-2);
  --axis: var(--line);
  --text-muted: var(--ink-3);
  --neg: var(--sell);
}
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.gridline { stroke: var(--line-2); stroke-width: 1; }
.axisline { stroke: var(--line); stroke-width: 1; }
.tick { fill: var(--ink-3); font-size: 11px; font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
.serieslabel { font-size: 12px; font-weight: 650; font-family: ui-monospace, Consolas, monospace; }
.tooltip {
  position: absolute; pointer-events: none; opacity: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 11px; font-size: 12.5px;
  box-shadow: var(--shadow); transition: opacity .09s; white-space: nowrap; z-index: 5;
}
.tooltip .tt-date { color: var(--ink-3); margin-bottom: 3px; }
.tooltip .tt-row { display: flex; gap: 12px; justify-content: space-between; }
.tooltip .tt-row b { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ tables */
.scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
/* A table set inline in prose. Same horizontal scrolling as .scroll, without
   the border and background that would turn a three-row figure into a card.
   Any table wide enough to need it must have one of the two: five bare tables
   on /methodology pushed the whole document 105px wider than a 375px screen,
   so the entire page scrolled sideways rather than the table. */
.tscroll { overflow-x: auto; max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; font-family: ui-monospace, Consolas, monospace;
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; padding: 11px 12px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
  background: var(--surface-2); position: sticky; top: 0;
}
td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--chip); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; font-family: ui-monospace, Consolas, monospace; white-space: nowrap; }
td.name, th.name { white-space: nowrap; }
.sym { font-family: ui-monospace, Consolas, monospace; font-weight: 650; }
.sub { font-size: 12px; color: var(--ink-3); }

/* -------------------------------------------------------------------- feed */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px solid var(--line-2);
}
.feed li:last-child { border-bottom: none; }
.side {
  flex: 0 0 auto; font-family: ui-monospace, Consolas, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 7px; border-radius: 5px; margin-top: 1px;
}
.side.buy  { background: rgba(0, 99, 0, .12); color: var(--buy); }
.side.sell { background: rgba(192, 57, 47, .12); color: var(--sell); }
.feed .who { font-weight: 600; }
.feed .meta { font-size: 12.5px; color: var(--ink-3); }
.feed .amt { margin-left: auto; text-align: right; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; white-space: nowrap; }

/* ------------------------------------------------------------------- chips */
.chip {
  display: inline-block; background: var(--chip); color: var(--ink-2);
  border-radius: 999px; padding: 2px 9px; font-size: 11.5px; margin: 2px 3px 2px 0;
  white-space: nowrap;
}
.chip.remit { background: var(--hot); color: var(--ink); font-weight: 600; }
/* Leadership access is a different thing from a committee seat and must never
   read as one. */
.chip.lead {
  background: var(--chip); color: var(--ink); font-weight: 650;
  border: 1px dashed var(--accent);
}
/* Committee lists are long; let them wrap inside the cell instead of pushing
   the whole table into a horizontal scroll. */
td.chips { max-width: 42ch; white-space: normal; }
/* The committees table stacks jurisdiction chips and a most-traded ticker list
   beneath the committee name. td.name is nowrap so member names never break
   mid-name, but that made one long ticker list widen the column until the
   volume column was pushed off the page. Let the sub-lines wrap; the name
   itself still cannot. */
td.name > .chips, td.name > .sub { white-space: normal; max-width: 46ch; }
/* Committee names are long enough ("Commerce, Science, and Transportation")
   that keeping them on one line pushed the volume column off the page. Here
   the first column wraps and is capped, so the nine columns fit without a
   horizontal scroll. */
table.committees td.name, table.committees th.name { white-space: normal; max-width: 34ch; }
/* Outside a table the same class needs to lay itself out, and chips carry no
   margin of their own — inline-block whitespace is not a reliable gap. */
div.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ------------------------------------------------------------------ grades */
/* A–E runs from a committed, in-jurisdiction position to routine rebalancing.
   Deliberately NOT the good/bad status palette — a high grade is a description
   of a trade's shape, not a verdict on it. */
.gradebox, .gradepill {
  font-family: ui-monospace, Consolas, monospace; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.gradebox {
  width: 54px; height: 54px; border-radius: 12px; font-size: 26px; flex: 0 0 auto;
  border: 1px solid var(--line);
}
.gradepill {
  width: 22px; height: 22px; border-radius: 6px; font-size: 12px;
  border: 1px solid var(--line);
}
.gA { background: rgba(235, 104, 52, .18); color: #c2410c; border-color: rgba(235, 104, 52, .45); }
.gB { background: rgba(235, 104, 52, .10); color: #b45309; }
.gC { background: var(--chip); color: var(--ink-2); }
.gD, .gE { background: var(--surface-2); color: var(--ink-3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gA { color: #f0915f; }
  :root:not([data-theme="light"]) .gB { color: #d99a5f; }
}
:root[data-theme="dark"] .gA { color: #f0915f; }
:root[data-theme="dark"] .gB { color: #d99a5f; }

/* Named .meter, not .bar: the header's layout row is `.wrap.bar`, and a
   generic `.bar` rule here silently collapsed it to a 7px strip. */
.meter {
  display: block; height: 7px; border-radius: 4px;
  background: var(--surface-2); overflow: hidden;
}
.meter span { display: block; height: 100%; background: var(--s1); border-radius: 4px; }

tr.clickable { cursor: pointer; }

/* ---------------------------------------------------------------- controls */
.controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0; }
.controls label { font-size: 13px; color: var(--ink-2); }
select, input[type=text], input[type=number] {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; font-family: inherit; font-size: 13.5px;
}
button.btn, a.btn {
  background: none; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink-2); padding: 6px 12px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; text-decoration: none; display: inline-block;
}
button.btn[aria-pressed="true"], a.btn.on {
  border-color: var(--accent); color: var(--ink); font-weight: 620; background: var(--chip);
}
.pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 18px 0 0; font-size: 13.5px; color: var(--ink-3); }

/* ------------------------------------------------------------------ notice */
.notice {
  border: 1px solid var(--line); border-left: 3px solid var(--s2);
  background: var(--surface); border-radius: 10px; padding: 14px 16px;
  margin: 20px 0; font-size: 13.5px; color: var(--ink-2);
}
.notice strong { color: var(--ink); }
.prose { max-width: 68ch; color: var(--ink-2); }
.prose li { margin-bottom: 7px; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; background: var(--chip); padding: 1px 5px; border-radius: 4px; color: var(--ink); }
pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: 13px; }
pre code { background: none; padding: 0; }

/* Marks a trade date the filer typed impossibly - corrected or merely flagged.
   Deliberately a quiet asterisk rather than a warning colour: it is a clerical
   slip in a public document, not a finding about the trade. */
.datefix { color: var(--muted); cursor: help; margin-left: 2px; font-weight: 600; }

/* Does this row enter the strategy? Over half the trades table is sales the
   strategy never acts on, and before this the page gave a reader no way to tell
   which rows were actually the thing being described. */
.inbadge { font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
           padding: 2px 7px; border-radius: 999px; white-space: nowrap;
           font-weight: 600; cursor: help; }
.inbadge.yes { background: rgba(74, 222, 128, .14); color: #4ade80;
               border: 1px solid rgba(74, 222, 128, .3); }
.inbadge.no  { background: transparent; color: var(--muted);
               border: 1px solid rgba(148, 163, 184, .28); }
/* Rows the strategy ignores stay readable but recede. */
tr.passive td:not(:first-child) { opacity: .62; }

/* A sale paired with the purchase it closes. Set apart from the surrounding
   prose because it is the one block on a sale page that tells a reader what,
   if anything, to actually do. */
.roundtrip { border: 1px solid var(--line); border-radius: 10px;
             padding: 14px 16px; margin: 0 0 14px;
             background: rgba(148, 163, 184, .05); }
.roundtrip h4 { font-size: 14px; letter-spacing: .02em; }

/* The live row in the outcome table. It is deliberately the only highlighted
   row: its position among the fixed horizons is what carries the meaning, so it
   has to be findable at a glance. */
tr.nowrow > td { background: rgba(96, 165, 250, .09); }
tr.nowrow > td:first-child { box-shadow: inset 2px 0 0 var(--s1); }

/* A member who has left Congress. They are full participants for the years they
   served - point-in-time committee data gives them a real remit - so this marks
   them without setting them apart. */
.chip.former { background: transparent; color: var(--muted);
               border: 1px dashed rgba(148, 163, 184, .45); cursor: help; }

/* Disclosure lag. Coloured because it grades cleanly: in-remit alpha runs
   +16.4% inside two weeks and -3.4% past 45 days, so the band is information
   rather than decoration. */
.lag { display: inline-block; font-size: 11px; font-weight: 600;
       letter-spacing: .03em; padding: 2px 8px; border-radius: 999px;
       white-space: nowrap; cursor: help; }
.lag.fast   { background: rgba(74, 222, 128, .15); color: #4ade80;
              border: 1px solid rgba(74, 222, 128, .32); }
.lag.normal { background: rgba(148, 163, 184, .12); color: var(--fg);
              border: 1px solid rgba(148, 163, 184, .28); }
.lag.slow   { background: rgba(251, 191, 36, .12); color: #fbbf24;
              border: 1px solid rgba(251, 191, 36, .3); }
.lag.late   { background: rgba(248, 113, 113, .12); color: #f87171;
              border: 1px solid rgba(248, 113, 113, .3); }

/* How many members were already in this name. Only the 3+ case is highlighted,
   because that is the only band with a measured difference behind it. */
.cluster { display: inline-block; font-size: 11px; font-weight: 600;
           letter-spacing: .03em; padding: 2px 8px; border-radius: 999px;
           white-space: nowrap; background: rgba(148, 163, 184, .12);
           color: var(--fg); border: 1px solid rgba(148, 163, 184, .28); }
.cluster.hot { background: rgba(129, 140, 248, .16); color: #a5b4fc;
               border-color: rgba(129, 140, 248, .38); }