/* Aeon: one stylesheet for every page.
   The names of the custom properties are the design's token names, and dark and light are two value sets for
   the same names, chosen by data-theme on the root. No page has a colour of its own. */

/* Tokens. Dark is the value set a page has before anything is chosen, so a browser with no script still
   draws a finished page rather than an unstyled one. */
:root, [data-theme="dark"] {
  --bg: #161411; --bg-raised: #1E1B17; --bg-sunken: #100F0D;
  --line: #2B2722; --line-strong: #3D3830;
  --text: #F2EEE6; --text-2: #B3ACA0; --text-3: #8A8376;
  --buy: #3FBF7F; --buy-soft: #1B2E24; --sell: #EE6A56; --sell-soft: #33211D;
  --congress: #6FA3E8; --congress-soft: #1C2634;
  --insider: #E0A63A; --insider-soft: #302816;
  --fund: #B48CF0; --fund-soft: #29223A;
  /* The fifth source. Schedules 13D and 13G are not insider trades and not fund holdings, so they carry an
     accent of their own. Checked to 4.5 to 1 on bg, bg-raised and bg-sunken, and on its own soft fill. */
  --stake: #4FC7BE; --stake-soft: #16302E;
  --up: var(--buy); --down: var(--sell);
  --chart-fill: rgba(242,238,230,.06);
  --shadow: 0 1px 2px rgba(0,0,0,.45);
}
[data-theme="light"] {
  --bg: #F6F3EC; --bg-raised: #FFFDF9; --bg-sunken: #ECE8DF;
  --line: #E1DCD1; --line-strong: #C9C2B4;
  /* text-3 and buy are a shade darker than the handoff first set them, so they clear 4.5 to 1 on the
     sunken surface (table headers, the ticker strip, the report header) as well as on the page. */
  --text: #1A1712; --text-2: #5B554B; --text-3: #675F53;
  --buy: #176A3E; --buy-soft: #DDF0E4; --sell: #B83A2D; --sell-soft: #F7DDD7;
  --congress: #2E5FA8; --congress-soft: #DCE7F6;
  --insider: #8C5A0E; --insider-soft: #F4E7CF;
  --fund: #6E45B8; --fund-soft: #E8DFF6;
  --stake: #116B66; --stake-soft: #D8ECEA;
  --up: var(--buy); --down: var(--sell);
  --chart-fill: rgba(26,23,18,.05);
  --shadow: 0 1px 2px rgba(26,23,18,.08);
}

:root {
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --gutter: 32px;
}

* { box-sizing: border-box; }
/* hidden must win over any display rule below, or a row the script hides (a search miss) stays on the page */
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* A link to a section on another page (the feed's "All 16 funds" goes to /people#funds) must land with the
   section's heading in view and not hard against the top of the screen.
   The header does not stick: it scrolls away with the page, so by the time a deep anchor is reached there is
   nothing above the heading to clear and this is breathing room. The values would also clear a header of the
   designed height, 56 and 52, if it is ever made to stick. They would NOT clear the phone header as it is
   drawn today, which is about 115 tall because the row of pages wraps under the wordmark, so anyone making
   the header stick has to come back here. */
[id] { scroll-margin-top: 72px; }
@media (max-width: 640px) { [id] { scroll-margin-top: 68px; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 14px/20px var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
/* Read out by a screen reader, never drawn. */
.offscreen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Every number on the site is read down a column or against the number beside it, so no figure may be
   drawn in a width of its own. */
.num, .v, .stat-v, table.grid td, table.grid th, .mono, .heat, .amt, .tot, .ret, .vs { font-variant-numeric: tabular-nums; }

a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--text); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* A strip that scrolls is exactly as tall as what is in it, so a ring drawn outside would be cut off. */
.tabs :focus-visible, .nav :focus-visible, .sig-grid :focus-visible { outline-offset: -2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; margin: 0; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }

/* Header. The wordmark, the pages, the standing note and the theme button. */
header { border-bottom: 1px solid var(--line); background: var(--bg); }
header .wrap { padding: 0 var(--gutter); }
.top { display: flex; align-items: center; gap: 28px; height: 56px; }
.brand { display: flex; align-items: baseline; gap: 12px; margin: 0; font-weight: 500; }
.brand .name { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1; letter-spacing: -0.01em; }
.brand .tag { font: 400 12px/16px var(--sans); color: var(--text-3); }
.nav { display: flex; gap: 20px; align-items: center; }
.nav a { font: 500 14px/20px var(--sans); color: var(--text-2); text-decoration: none; }
.nav a:hover { color: var(--text); }
.nav a.on { color: var(--text); }
.head-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.head-note { font-size: 12px; line-height: 16px; color: var(--text-3); }

/* The theme button carries both words and shows the one that names where the button goes, so the label is
   right in the first frame and never waits for a script. */
.theme { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--text);
  font: 500 13px/1 var(--sans); cursor: pointer; white-space: nowrap; }
.theme:hover { background: color-mix(in srgb, var(--bg) 94%, var(--text)); }
.theme .to-dark { display: none; }
[data-theme="light"] .theme .to-light { display: none; }
[data-theme="light"] .theme .to-dark { display: inline; }

/* The one live dot, beside the theme button on every page. Green while the stream is open, grey while it is
   not, and a link to the page that says which source stopped answering. */
.live { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; text-decoration: none;
  font: 500 11px/16px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.live:hover { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-strong); }
.live .dot { flex: none; }

.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--buy); margin-right: 6px; vertical-align: middle; }
.dot.off { background: var(--sell); }
.dot.idle { background: var(--line-strong); }

/* "Just in": one line, newest first, rolling. */
.strip { height: 36px; background: var(--bg-sunken); border-bottom: 1px solid var(--line); overflow: hidden; white-space: nowrap; position: relative; display: flex; align-items: center; }
.strip .label { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 14px 0 var(--gutter); background: var(--bg-sunken); color: var(--text);
  font: 600 11px/16px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.strip .label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--buy); }
/* The gap the label sits over is a margin, not padding: padding would be part of the track's width and the
   slide, which moves by half the track, would then overshoot by half the gap once a cycle. */
.strip .track { display: inline-block; margin-left: 130px; animation: slide 90s linear infinite; will-change: transform; }
/* Pause on mouse hover only. On phones a tap "sticks" as hover and would freeze the strip. */
@media (hover: hover) and (pointer: fine) { .strip:hover .track { animation-play-state: paused; } }
.strip .t { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--text-2);
  margin-right: 14px; padding-right: 14px; border-right: 1px solid var(--line); }
.strip .t .g { font-size: 9px; }
.strip .t .g.buy { color: var(--buy); } .strip .t .g.sell { color: var(--sell); }
.strip .t b { font: 600 12px/16px var(--mono); color: var(--text); }
.strip .t .s-name { font-weight: 500; }
.strip .t .s-name.congress { color: var(--congress); }
.strip .t .s-name.insider { color: var(--insider); }
.strip .t .s-name.fund { color: var(--fund); }
.strip .t .s-name.stake { color: var(--stake); }
.strip .t .age { color: var(--text-3); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strip .track { animation: none; } }

/* "N new filings", which appears when filings land while the reader is scrolled down. */
.pill { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 50;
  height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--text); color: var(--bg); font: 500 14px/1 var(--sans); cursor: pointer; box-shadow: var(--shadow); }
.pill:hover { background: color-mix(in srgb, var(--text) 94%, var(--bg)); }

/* ---- Chips, badges, tags, source labels ---- */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px;
  font: 600 12px/16px var(--sans); white-space: nowrap; }
.chip::before { font-size: 9px; }
.chip.buy { background: var(--buy-soft); color: var(--buy); }
.chip.buy::before { content: "\25B2"; }
.chip.sell { background: var(--sell-soft); color: var(--sell); }
.chip.sell::before { content: "\25BC"; }
/* A report that is both, and one that is neither, still say which they are in a word. */
.chip.mixed { background: var(--bg-sunken); border: 1px solid var(--line-strong); color: var(--text-2); }
.chip.other { background: var(--bg-sunken); border: 1px solid var(--line-strong); color: var(--text-2); }
.chip.report { background: var(--fund-soft); color: var(--fund); }
/* A notice of a sale to come, and a report of a stake crossing 5 percent. Neither is a trade. */
.chip.notice { background: var(--insider-soft); color: var(--insider); }
.chip.stake { background: var(--stake-soft); color: var(--stake); }

/* The ticker chip, which is also a link wherever a ticker has a page. */
.tk { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
  font: 600 12px/16px var(--mono); letter-spacing: 0.02em; background: var(--bg-sunken);
  border: 1px solid var(--line-strong); color: var(--text); text-decoration: none; white-space: nowrap; }
a.tk:hover { border-color: var(--text-3); text-decoration: none; }
.tk.big { height: 32px; padding: 0 12px; font-size: 18px; }

/* A source, named in its own colour with a dot. No fill: this sits at the top of a card. */
.slabel { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/16px var(--sans); }
.slabel::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.slabel.congress { color: var(--congress); }
.slabel.insider { color: var(--insider); }
.slabel.fund { color: var(--fund); }
.slabel.stake { color: var(--stake); }

.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--line-strong);
  border-radius: 4px; font: 500 11px/16px var(--sans); color: var(--text-2); white-space: nowrap; }

/* A record that is ranked but sits right on the minimum. */
.thin { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; background: var(--bg-sunken);
  border-radius: 4px; font: 500 11px/16px var(--sans); color: var(--text-3); flex: none; cursor: help; }

/* ---- Buttons, links, the segmented control, search ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--line-strong); background: transparent; color: var(--text);
  font: 500 14px/1 var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: color-mix(in srgb, var(--bg) 94%, var(--text)); text-decoration: none; }
.btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn.primary:hover { background: color-mix(in srgb, var(--text) 94%, var(--bg)); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn.wide { align-self: center; margin-top: 4px; }

.link { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong);
  text-underline-offset: 3px; font: 500 13px/18px var(--sans); background: none; border: 0; padding: 0; cursor: pointer; }
.link:hover { text-decoration-color: var(--text); }

/* The period picker. One row of segments, the chosen one raised. */
.seg { display: inline-flex; padding: 2px; background: var(--bg-sunken); border: 1px solid var(--line);
  border-radius: 8px; font: 500 13px/1 var(--sans); }
.seg button { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text-2); font: 500 13px/1 var(--sans); cursor: pointer; }
.seg button.on { background: var(--bg-raised); color: var(--text); box-shadow: var(--shadow); }

/* Search. The magnifier is two shapes, so the page carries no icon file. */
.search { display: inline-flex; align-items: center; gap: 8px; height: 36px; width: 320px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-raised); color: var(--text-3); }
/* The magnifier: a ring and a handle, the two shapes the design draws, so no icon file is fetched. */
.mag { position: relative; width: 14px; height: 14px; flex: none; }
.mag::before { content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 9px;
  border: 1.5px solid currentColor; border-radius: 50%; box-sizing: border-box; }
.mag::after { content: ""; position: absolute; left: 9px; top: 9px; width: 5px; height: 1.5px;
  background: currentColor; transform: rotate(45deg); transform-origin: 0 50%; }
.search input { flex: 1; min-width: 0; background: none; border: 0; padding: 0; color: var(--text);
  font: 400 14px/20px var(--sans); }
.search input::placeholder { color: var(--text-3); }
.search input:focus { outline: none; }
.search:focus-within { outline: 2px solid var(--text); outline-offset: 2px; }

/* A plain checkbox and a plain select, sized to sit in the tab row beside the search. */
.ctl { display: inline-flex; align-items: center; gap: 7px; height: 30px; font: 500 13px/1 var(--sans); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.ctl input { accent-color: var(--text); margin: 0; }
.ctl:hover { color: var(--text); }
select { height: 30px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--bg-raised); color: var(--text); font: 500 13px/1 var(--sans); }

/* ---- Tabs ---- */
.tabs { display: flex; gap: 24px; align-items: flex-end; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button, .tabs a { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0;
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none;
  font: 500 14px/20px var(--sans); color: var(--text-2); cursor: pointer; text-decoration: none; flex: 0 0 auto; }
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--text); border-bottom-color: var(--text); }
.tabs button span { font: 500 12px/16px var(--sans); color: var(--text-3); }
.tabs button::before { flex: none; }
.tabs button.src-congress::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--congress); }
.tabs button.src-insider::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--insider); }
.tabs button.src-fund::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fund); }
.tabs button.src-stake::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--stake); }
/* The row the tabs sit on, with whatever the page puts at its right. */
.bar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.bar .right { margin-left: auto; margin-bottom: 6px; display: flex; align-items: center; gap: 12px; }
.bar .cap { font-size: 12px; line-height: 16px; color: var(--text-3); }

/* ---- Strength dots and the return pair ---- */
.heat { display: inline-flex; gap: 3px; align-items: center; flex: none; }
.heat i { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--line-strong); }
.heat i.on { background: var(--text); border-color: var(--text); }
.pair { display: inline-flex; align-items: baseline; gap: 8px; }
.pair .ret { font-weight: 600; color: var(--text-2); }
.pair .ret.up { color: var(--up); }
.pair .ret.down { color: var(--down); }
.pair .sp { font-size: 12px; line-height: 16px; color: var(--text-3); }

/* ---- Filing card. The feed and every person's page draw the same card. ---- */
.card { display: flex; flex-direction: column; gap: 10px; background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 20px; }
.card.fresh { border-color: var(--line-strong); animation: land 0.5s ease-out; }
@keyframes land { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .card.fresh { animation: none; } }
.card .row1 { display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 16px; }
.card .src { color: var(--text-3); }
.card .age { margin-left: auto; color: var(--text-3); }
.card .ids { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card .co { font-weight: 500; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* What the filing was worth. The design leaves the figure in the sentence; ours is a field of its own, so it
   sits at the end of this row rather than being dropped. */
.card .amt { margin-left: auto; font: 600 20px/24px var(--sans); letter-spacing: -0.01em; color: var(--text); white-space: nowrap; }
.card .amt small { display: block; font: 400 12px/16px var(--sans); color: var(--text-3); text-align: right; }
.card .h { margin: 0; font: 400 15px/22px var(--sans); color: var(--text); }
.card .h b { font-weight: 600; }
.card .h b.buy { color: var(--buy); } .card .h b.sell { color: var(--sell); }
.card .when { font-size: 12px; line-height: 16px; color: var(--text-3); }
.card .links { display: flex; gap: 16px; align-items: center; }
.card .details { display: none; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--text-2); }
.card .details ul { margin: 0; padding-left: 18px; } .card .details li { margin: 3px 0; }
.card.open .details { display: block; }
/* The day a run of cards belongs to. */
.day { display: flex; align-items: center; gap: 12px; margin: 8px 0 2px;
  font: 500 11px/16px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.day::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---- The signals box and its cards ---- */
.signals { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.sig-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.sig-head h2 { font-size: 22px; line-height: 28px; }
.sig-head p { margin: 0; font-size: 12px; line-height: 16px; color: var(--text-3); }
.sig-head .link { margin-left: auto; }
.sig-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sig { display: flex; flex-direction: column; gap: 10px; min-width: 0; background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; color: inherit; text-decoration: none; }
.sig:hover { border-color: var(--line-strong); text-decoration: none; }
.sig .r1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sig .co { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sig .tot { font: 600 20px/24px var(--sans); letter-spacing: -0.01em; }
.sig ul { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none;
  font-size: 12px; line-height: 16px; color: var(--text-2); }
.sig .res { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; padding-top: 8px;
  border-top: 1px solid var(--line); font-size: 12px; line-height: 16px; color: var(--text-3); }
.sig .res b { font-weight: 600; color: var(--text-2); }
.sig .res b.up { color: var(--up); } .sig .res b.down { color: var(--down); }

/* ---- Person card: the top three on a board ---- */
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pcard { display: flex; align-items: center; gap: 16px; background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: 12px; padding: 18px 20px; color: inherit; text-decoration: none; }
.pcard:hover { border-color: var(--line-strong); text-decoration: none; }
.pcard .who { min-width: 0; flex: 1; }
.pcard .nm { display: flex; align-items: center; gap: 8px; }
.pcard .nm b { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 26px; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .meta { font-size: 12px; line-height: 16px; color: var(--text-3); }
.pcard .pair { margin-top: 6px; font-size: 12px; line-height: 16px; }
.pcard .pair .lbl { color: var(--text-3); }
.pcard .big { text-align: right; flex: none; }
.pcard .big .v { font: 600 32px/36px var(--sans); letter-spacing: -0.02em; color: var(--text-2); }
.pcard .big .v.up { color: var(--up); } .pcard .big .v.down { color: var(--down); }
.pcard .big .l { font-size: 11px; line-height: 14px; color: var(--text-3); }

/* ---- Tables ---- */
/* The box a table lives in. On a phone the table scrolls inside it and the page never does. */
.tbox { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tbox .hint { display: none; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 16px; color: var(--text-3); }
.tbox .foot { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px; font-size: 12px; line-height: 16px; color: var(--text-3); }
.scroll { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
table.grid th { height: 40px; padding: 0 0 0 8px; background: var(--bg-sunken); border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: middle; font: 500 11px/16px var(--mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
table.grid td { height: 52px; padding: 0 0 0 8px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--text); }
table.grid tr:last-child td { border-bottom: 0; }
table.grid th:first-child, table.grid td:first-child { padding-left: 20px; }
table.grid th:last-child, table.grid td:last-child { padding-right: 20px; }
table.grid td.num, table.grid th.num { text-align: right; white-space: nowrap; }
table.grid td.num b { font-weight: 600; color: var(--text-2); }
table.grid td.num b.up { color: var(--up); } table.grid td.num b.down { color: var(--down); }
table.grid td.soft, table.grid td.d { color: var(--text-2); }
table.grid td small { display: block; font: 400 11px/14px var(--sans); color: var(--text-3); }
table.grid td.d { font: 500 12px/16px var(--mono); white-space: nowrap; }
table.grid td.rank { font: 500 12px/16px var(--mono); color: var(--text-3); }
table.grid td.co { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.grid th[data-sort] { cursor: pointer; user-select: none; }
table.grid th[data-sort]:focus-visible { outline-offset: -2px; }
table.grid th[data-sort]:hover { color: var(--text); }
table.grid th[data-dir] { color: var(--text); }
table.grid th[data-dir]::after { content: " \2193"; }
table.grid th[data-dir="up"]::after { content: " \2191"; }
/* A name cell: portrait, name, and the thin tag when it applies. */
a.who { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--text); }
a.who > span:last-child { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.who:hover > span:last-child { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
table.grid td .cellrow { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* ---- Side boxes ---- */
.box { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; }
.box h2, .box h3 { font-size: 18px; line-height: 24px; margin: 0 0 12px; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.kpi .v { display: flex; align-items: center; gap: 8px; font: 600 28px/32px var(--sans); letter-spacing: -0.01em; color: var(--text); }
.kpi .v.buy::before { content: "\25B2"; font-size: 11px; color: var(--buy); }
.kpi .v.sell::before { content: "\25BC"; font-size: 11px; color: var(--sell); }
.kpi .l { font-size: 12px; line-height: 16px; color: var(--text-3); }
.box p.big { font-size: 12px; line-height: 16px; color: var(--text-3); margin: 12px 0 0; }
.box p.big b { color: var(--text-2); font-weight: 500; }
/* A list of rows inside a side box: a dot, a name, and a figure at the right. */
.rows { display: flex; flex-direction: column; }
.rows .r { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; }
.rows .r i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.rows .r .n { font-weight: 500; }
.rows .r .d { margin-left: auto; color: var(--text-2); text-align: right; }
.rules { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 18px; }
.rules li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-2); }
.rules li .heat { margin-top: 5px; }
.box .link { display: inline-block; margin-top: 12px; }

/* ---- Footer ---- */
footer { border-top: 1px solid var(--line); }
footer .wrap { display: flex; align-items: flex-start; gap: 24px; padding: 20px var(--gutter);
  font-size: 12px; line-height: 16px; color: var(--text-3); }
footer p { margin: 0 0 8px; max-width: 90ch; }
footer p:last-child { margin-bottom: 0; }
footer .fnav { margin-left: auto; display: flex; gap: 16px; flex: none; }
footer .fnav a { color: var(--text-3); text-decoration: none; }
footer .fnav a:hover { color: var(--text); }

/* ---- Portraits ---- */
.portrait { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: var(--bg-sunken);
  border: 1px solid var(--line-strong); color: var(--text-2); font: 600 10px/1 var(--sans); }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.portrait.md { width: 40px; height: 40px; font-size: 14px; }
.portrait.big { width: 56px; height: 56px; font-size: 16px; }
.portrait.xl { width: 96px; height: 96px; font-size: 28px; }

/* ---- Waiting and nothing to show ---- */
.empty { display: flex; flex-direction: column; gap: 8px; background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: 12px; padding: 20px; color: var(--text-2); font-size: 14px; line-height: 20px; }
.empty h2, .empty h3 { font-size: 18px; line-height: 24px; color: var(--text); }
.empty .lead { margin: 0; font-size: 15px; line-height: 22px; color: var(--text); }
.empty .note { margin: 0; font-size: 12px; line-height: 16px; color: var(--text-3); max-width: 80ch; }
.skel { background: var(--bg-sunken); border-radius: 8px; height: 20px; }

/* ---- Page shells ---- */
/* The feed: the tab row, the signals box, then the cards beside the side boxes. */
.content { display: flex; flex-direction: column; gap: 24px; padding: 20px var(--gutter) 40px; max-width: 1280px; margin: 0 auto; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 368px; gap: 48px; align-items: start; }
.feedcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.feedcol .head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 2px; }
.feedcol .head .label { font: 500 11px/16px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.feedcol .head .sub { font-size: 12px; line-height: 16px; color: var(--text-3); }
aside { display: flex; flex-direction: column; gap: 16px; }

/* Every other page: a title, some notes, and whatever the page is. */
.page { display: flex; flex-direction: column; gap: 20px; padding: 28px var(--gutter) 40px; max-width: 1280px; margin: 0 auto; }
.page h1 { font-size: 36px; line-height: 40px; margin: 0 0 6px; }
.page h2 { font-size: 22px; line-height: 28px; margin: 0 0 8px; }
.page h3 { font-size: 18px; line-height: 24px; margin: 0 0 8px; }
.page > p { margin: 0; color: var(--text-2); max-width: 90ch; }
.page > p.note, .page .note { font-size: 12px; line-height: 16px; color: var(--text-3); max-width: 90ch; }
.page > .lead { font-size: 15px; line-height: 22px; color: var(--text-2); }
.page > .crumb { font-size: 13px; line-height: 18px; color: var(--text-3); }
.page .title { display: flex; flex-direction: column; gap: 6px; }
.page .title p { margin: 0; color: var(--text-2); max-width: 90ch; }
.page section { display: flex; flex-direction: column; gap: 16px; }
.page .stack { display: flex; flex-direction: column; gap: 12px; }

/* The status page's source table: the name of a source, and under it the paper it reads. */
table.grid.sources td small { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--text-3); }
table.grid.sources td.note { white-space: normal; }
table.grid.sources .c-src { width: 30%; }
table.grid.sources .c-every { width: 14%; }
table.grid.sources .c-ans { width: 14%; }
table.grid.sources .c-when { width: 16%; }
table.grid.sources td { height: auto; padding-top: 12px; padding-bottom: 12px; }

/* ---- Phone ---- */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; gap: 24px; }
  .sig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcards { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .top { height: auto; min-height: 52px; gap: 12px; flex-wrap: wrap; padding: 6px 0; }
  .brand .name { font-size: 24px; }
  .brand .tag { font-size: 11px; }
  .head-right { gap: 10px; }
  .kpi .v { font-size: 22px; line-height: 26px; }
  .head-note { font-size: 11px; line-height: 16px; }
  .head-note .long { display: none; }
  /* The pages move to a row of their own rather than behind a menu, so every page stays one tap away and
     nothing has to slide out. The row scrolls itself if it ever grows past the screen. */
  .nav { order: 3; width: 100%; gap: 20px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { height: 44px; display: inline-flex; align-items: center; flex: 0 0 auto; }
  .strip .label { padding-left: var(--gutter); }
  .strip .track { margin-left: 108px; }
  .content { gap: 16px; padding: 12px var(--gutter) 32px; }
  .page { gap: 16px; padding: 20px var(--gutter) 32px; }
  .page h1 { font-size: 30px; line-height: 34px; }
  .page h2 { font-size: 20px; line-height: 26px; }
  /* The tab row scrolls inside its own box, and the page does not. */
  .bar { flex-wrap: wrap; }
  /* Full bleed on both sides: the width carries the two gutters the negative margins give back. */
  .tabs { gap: 20px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); width: calc(100% + var(--gutter) * 2); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button, .tabs a { height: 44px; }
  .bar .right { width: 100%; margin-left: 0; margin-bottom: 10px; justify-content: space-between; flex-wrap: wrap; }
  .search { width: 100%; height: 44px; }
  .seg button { height: 38px; padding: 0 14px; font-size: 14px; }
  .ctl, select, .theme { height: 44px; }
  /* The signals become a strip that scrolls sideways inside itself. */
  .signals { background: none; border: 0; border-radius: 0; padding: 0; }
  .sig-head { margin-bottom: 10px; gap: 10px; }
  .sig-head h2 { font-size: 20px; line-height: 26px; }
  .sig-head p { display: none; }
  .sig-grid { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; }
  .sig-grid::-webkit-scrollbar { display: none; }
  .sig { width: 212px; flex: none; background: var(--bg-raised); padding: 14px; }
  .sig .tot { font-size: 18px; line-height: 22px; }
  .card { padding: 14px 16px; }
  .card .amt { font-size: 18px; line-height: 22px; }
  .card .links a, .card .links button { min-height: 44px; display: inline-flex; align-items: center; }
  .pcard { padding: 14px 16px; gap: 14px; }
  .pcard .nm b { font-size: 19px; line-height: 24px; }
  .pcard .big .v { font-size: 28px; line-height: 32px; }
  .portrait.big { width: 48px; height: 48px; font-size: 14px; }
  /* The table keeps its columns and scrolls inside its box. */
  .tbox .hint { display: flex; }
  table.grid { min-width: 760px; table-layout: fixed; }
  table.grid td { height: 56px; }
  table.grid th:first-child, table.grid td:first-child { padding-left: 14px; }
  table.grid th:last-child, table.grid td:last-child { padding-right: 14px; }
  .tbox .foot { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 14px; }
  .tbox .foot .btn { height: 44px; }
  .btn.wide { width: 100%; height: 44px; }
  footer .wrap { flex-direction: column; gap: 10px; padding: 16px var(--gutter); }
  footer .fnav { margin-left: 0; }
}

/* ---- The pages below the front of the site ---- */
/* A back link at the top of a page a reader arrived at from somewhere else. */
.back { margin: 0; font: 500 13px/18px var(--sans); }
.back a { color: var(--text-2); text-decoration: none; }
.back a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

/* The label and the count that head a run of cards or blocks. */
.head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 2px; flex-wrap: wrap; }
.head .label { font: 500 11px/16px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.head .sub { font-size: 12px; line-height: 16px; color: var(--text-3); }

/* The top of a person's page or a ticker's: the face, the name, and the one number. */
.hero { display: flex; align-items: flex-start; gap: 24px; }
.hero .id { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hero h1 { font-size: 40px; line-height: 44px; margin: 0; }
.hero .line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero .meta { font-size: 14px; line-height: 20px; color: var(--text-2); }
.hero .note { margin: 0; }
.hbig { flex: none; text-align: right; max-width: 380px; }
.hbig .v { font: 600 48px/52px var(--sans); letter-spacing: -0.02em; color: var(--text-2); }
.hbig .v.up { color: var(--up); } .hbig .v.down { color: var(--down); }
.hbig .l { font-size: 12px; line-height: 16px; color: var(--text-3); }
.hbig .l .sp { margin-left: 8px; }
.hbig .vs { margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--text-2); }
.hbig .vs b { font-weight: 600; color: var(--text-2); }
.hbig .vs b.up { color: var(--up); } .hbig .vs b.down { color: var(--down); }

/* The source, named in its own colour on a fill of the same colour. */
.schip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px;
  font: 600 12px/16px var(--sans); white-space: nowrap; }
.schip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.schip.congress { background: var(--congress-soft); color: var(--congress); }
.schip.insider { background: var(--insider-soft); color: var(--insider); }
.schip.fund { background: var(--fund-soft); color: var(--fund); }
.schip.stake { background: var(--stake-soft); color: var(--stake); }

/* A row of ticker chips under a heading. */
.chiprow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chiprow .label { font: 500 11px/16px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.chiprow .note { margin: 0; }

/* The head of a box: its title, a note, and whatever control belongs to it. */
.bhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bhead h2 { font-size: 18px; line-height: 24px; margin: 0; }
.bhead .note { margin: 0; }
.bhead .seg, .bhead .cap, .bhead .legend { margin-left: auto; }
.bhead .cap { font-size: 12px; line-height: 16px; color: var(--text-3); }

/* A row of numbers: the six of a record, the three on a ticker or a scoreboard card. */
.stats { display: grid; gap: 16px 20px; }
.stats.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { min-width: 0; }
.stat-v { display: flex; align-items: center; gap: 8px; font: 600 28px/32px var(--sans); letter-spacing: -0.01em; color: var(--text); }
.stat-v.up { color: var(--up); } .stat-v.down { color: var(--down); } .stat-v.soft { color: var(--text-2); }
.stat-v .thin { font-size: 11px; letter-spacing: 0; }
.stat-v .withdot::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--buy); margin-right: 8px; vertical-align: middle; }
.stat-l { font-size: 12px; line-height: 16px; color: var(--text-3); }
.box.record .stats { margin-bottom: 14px; }
.box.record .note { margin: 0; }

/* ---- A report and its trades, on a member's page ---- */
.report { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rhead { display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: var(--bg-sunken);
  border-bottom: 1px solid var(--line); font-size: 12px; line-height: 16px; color: var(--text-3); flex-wrap: wrap; }
.rhead .facts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.rhead .facts b { font-weight: 600; color: var(--text); }
.rhead .sep { color: var(--line-strong); }
.rhead .link { margin-left: auto; flex: none; }
.rbody { display: flex; flex-direction: column; }
.rbody .note { margin: 0; padding: 14px 20px; }
.thead, .trow { display: grid; grid-template-columns: 84px 80px minmax(0, 1fr) 80px 180px 220px; gap: 12px;
  align-items: center; padding: 0 20px; }
.thead { height: 32px; font: 500 11px/16px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.trow { min-height: 48px; border-top: 1px solid var(--line); }
.trow .c-co { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .c-day, .trow .c-size { font-size: 13px; line-height: 18px; color: var(--text-2); }
.trow .c-ret { text-align: right; }
.trow .c-ret .pair { justify-content: flex-end; flex-wrap: wrap; }
.pair .ret { white-space: nowrap; }
.trow .c-ret .sp { text-align: right; }
.trow .c-ret .lbl { display: none; }
.trow .none { font-size: 12px; line-height: 16px; color: var(--text-3); }
.pair .ret { color: var(--text-2); }

/* ---- The price chart on a ticker page ---- */
/* The plot is drawn in a box of its own and stretched to the width the page has. The line keeps its true
   thickness, and everything with a size (the dots, the labels, the month marks) is placed over the plot in
   the page itself, so nothing is stretched out of shape. */
.chartbox .bhead { margin-bottom: 12px; }
.legend { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--text-3); }
.legend .dot { background: var(--buy); margin: 0; }
.plotwrap { position: relative; height: 240px; }
.plot { display: block; width: 100%; height: 100%; overflow: visible; }
.plot .parea { fill: var(--chart-fill); stroke: none; }
.plot .pline { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.mmark { position: absolute; top: 0; bottom: 18px; width: 0; border-left: 1px dashed var(--line); }
.mlabel { position: absolute; bottom: 0; padding-left: 6px; font: 500 11px/16px var(--mono);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.hi, .lo { position: absolute; right: 0; z-index: 2; padding: 1px 4px; background: var(--bg-raised); border-radius: 4px;
  font: 500 11px/16px var(--mono); color: var(--text-3); }
.hi { top: 0; } .lo { bottom: 18px; }
/* A day an insider bought. The dot is the tap target on a phone, so it carries its own 44px reach. */
.bdot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--buy); box-shadow: 0 0 0 2px var(--bg-raised); text-decoration: none; }
.bdot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px;
  transform: translate(-50%, -50%); }
.bdot .callout { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: none; padding: 4px 8px; border-radius: 6px; background: var(--text); color: var(--bg);
  font: 400 12px/16px var(--sans); white-space: nowrap; z-index: 3; pointer-events: none; }
.bdot:hover .callout, .bdot:focus-visible .callout { display: block; }
.cnotes { display: none; margin: 12px 0 0; padding: 0; list-style: none; }
.cnotes li { padding: 6px 0; border-top: 1px solid var(--line); font-size: 12px; line-height: 16px; color: var(--text-2); }
.cnotes a { color: var(--text-2); }

/* ---- The signal history beside a ticker ---- */
.srows { display: flex; flex-direction: column; }
.srow { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.srows .srow:first-child { border-top: 0; padding-top: 0; }
.srow .r1 { display: flex; align-items: center; gap: 10px; }
.srow .d { font: 600 12px/16px var(--mono); letter-spacing: 0.02em; color: var(--text); }
.srow .slabel { margin-left: auto; }
.srow .why { font: 500 13px/18px var(--sans); color: var(--text-2); }
.srow .res { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.srow .lbl { display: block; font-size: 11px; line-height: 16px; color: var(--text-3); }

/* ---- The signals page ---- */
.scards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.scard { padding: 18px 20px; }
.scard .bhead h2 { font-family: var(--serif); font-size: 20px; line-height: 26px; }
.scard .vs { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12px; line-height: 16px; color: var(--text-3); }
.scard .vs b { font-weight: 600; color: var(--text-2); }
.scard .vs b.up { color: var(--up); } .scard .vs b.down { color: var(--down); }
.scard .note { margin: 0; }
table.grid td.soft small { display: block; font-size: 11px; line-height: 14px; color: var(--text-3); }
/* A member who has left the House fills the party and the state with one line rather than two gaps. */
table.grid td.left { color: var(--text-3); }

/* ---- The people page ---- */
ul.people { list-style: none; margin: 0; padding: 0; }
ul.people li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  min-height: 52px; padding: 6px 0; border-top: 1px solid var(--line); }
ul.people li:first-child { border-top: 0; }
ul.people .who { flex: 1; min-width: 0; }
ul.people .meta { font-size: 12px; line-height: 16px; color: var(--text-3); white-space: nowrap; }
ul.people .d { margin-left: auto; font: 500 12px/16px var(--mono); color: var(--text-3); white-space: nowrap; }
.page[data-people] .bar { border-bottom: 0; align-items: center; }
.page[data-people] .bar .right { margin-bottom: 0; }

/* ---- The phone, at 390 ---- */
@media (max-width: 900px) {
  .scards { grid-template-columns: 1fr; }
  .stats.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .thead, .trow { grid-template-columns: 76px 72px minmax(0, 1fr) 72px 150px 190px; gap: 10px; padding: 0 14px; }
}
@media (max-width: 640px) {
  /* The hero stacks and centres, and the one big number sits under the name. */
  .hero { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .hero .id { align-items: center; width: 100%; }
  .hero h1 { font-size: 32px; line-height: 36px; }
  .hero .line { justify-content: center; }
  .hero .badges { justify-content: center; }
  .hbig { text-align: center; max-width: none; }
  .hbig .v { font-size: 40px; line-height: 44px; }
  .portrait.xl { width: 96px; height: 96px; }
  .tk.big { height: 28px; font-size: 15px; }

  .stats { gap: 12px 14px; }
  .stat-v { font-size: 22px; line-height: 26px; }
  .stats.three { padding: 12px 14px; background: var(--bg-sunken); border-radius: 12px; }
  .chartbox .stats.three, .box .stats.three { padding: 0; background: none; }

  /* Each trade becomes a two line block, and the filing link ends the report 44 tall. */
  /* The facts wrap on a phone, so the gap between them does the separating and a dot cannot be left
     dangling at the end of a line. */
  .rhead { padding: 12px 14px; }
  .rhead .facts { gap: 2px 14px; }
  .rhead .sep { display: none; }
  .rhead .link { margin-left: 0; width: 100%; min-height: 44px; display: inline-flex; align-items: center; }
  .thead { display: none; }
  /* Two lines and a result: the chips and the size, then the company and the day it was traded, then what
     it has done since it became public. */
  .trow { grid-template-columns: auto auto minmax(0, 1fr); gap: 6px 10px; padding: 12px 14px; align-items: center; }
  .trow .c-side { grid-column: 1; grid-row: 1; }
  .trow .c-tk { grid-column: 2; grid-row: 1; justify-self: start; }
  .trow .c-size { grid-column: 3; grid-row: 1; justify-self: end; text-align: right; }
  .trow .c-co { grid-column: 1 / 3; grid-row: 2; }
  .trow .c-day { grid-column: 3; grid-row: 2; justify-self: end; }
  .trow .c-ret { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
  .trow .c-ret .lbl { display: inline; font-size: 12px; line-height: 16px; color: var(--text-3); }

  /* On a phone the signal history comes before the filings, which is the order the design gives it. */
  .page.ticker .layout aside { order: -1; }

  /* The plot is shorter, its dots smaller, and the callouts become notes under it. */
  .plotwrap { height: 160px; }
  .bdot { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
  .bdot .callout { display: none !important; }
  .cnotes { display: block; }

  .srow .res { grid-template-columns: 1fr; gap: 4px; }
  .scard { padding: 16px; }

  /* Every link a finger has to hit gets its 44. Chips are the exception: the design pins a chip to 22 and
     puts it inside a row that is 48 or taller, which is the thing being tapped. */
  .back a, footer .fnav a, .sig-head .link, .box > .link, .cnotes a {
    min-height: 44px; display: inline-flex; align-items: center; }
  a.who { min-height: 44px; }
  ul.people li { min-height: 56px; }
  ul.people .meta { width: 100%; margin-left: 50px; }
  .page[data-people] .bar .right { margin-bottom: 0; }
  .page[data-people] .bar .cap { font-size: 12px; }
}
/* ---- The board's columns, at the widths the design gives them ---- */
/* Each width carries the 8px that sits between one column and the next, and the first and last carry the
   padding at the edge of the box, because a cell's padding sits inside its width here. */
table.grid.board { table-layout: fixed; }
col.c-rank { width: 56px; }
col.c-party { width: 72px; }
col.c-state { width: 64px; }
col.c-n { width: 104px; }
col.c-spx { width: 140px; }
col.c-up { width: 100px; }
table.grid td .cellrow .rank { font: 500 12px/16px var(--mono); color: var(--text-3); flex: none; }

/* A figure named the older way still reads as a gain or a loss. */
table.grid td.num b.buy, .pair .ret.buy { color: var(--up); }
table.grid td.num b.sell, .pair .ret.sell { color: var(--down); }

@media (max-width: 640px) {
  table.grid.board { min-width: 920px; }
  col.c-rank { width: 42px; }
  col.c-who { width: 190px; }
  col.c-party { width: 64px; }
  col.c-state { width: 60px; }
  col.c-n { width: 92px; }
  col.c-spx { width: 118px; }
  col.c-up { width: 78px; }
}

/* ---- The signal history table, at the widths the design gives it ---- */
table.grid.history { table-layout: fixed; }
table.grid.history col.c-day { width: 116px; }
table.grid.history col.c-tk { width: 92px; }
table.grid.history col.c-co { width: auto; }
table.grid.history col.c-heat { width: 88px; }
table.grid.history col.c-strat { width: 150px; }
table.grid.history col.c-n { width: 124px; }
table.grid.history col.c-spx { width: 140px; }
table.grid.history col.c-res { width: 104px; }
/* The result reads as its own column, not as a word stuck to the figure before it. */
table.grid.history th:last-child, table.grid.history td:last-child { padding-left: 20px; }
table.grid.history td b.up { color: var(--up); } table.grid.history td b.down { color: var(--down); }

@media (max-width: 640px) {
  table.grid.history { min-width: 720px; }
  table.grid.history col.c-day { width: 92px; }
  table.grid.history col.c-tk { width: 80px; }
  table.grid.history col.c-co { width: 140px; }
  table.grid.history col.c-heat { width: 70px; }
  table.grid.history col.c-strat { width: 110px; }
  table.grid.history col.c-n { width: 96px; }
  table.grid.history col.c-spx { width: 104px; }
  table.grid.history col.c-res { width: 76px; }
}