/* Oskett app styles. The system font for the interface (SF Pro on Apple devices, Segoe UI on
   Windows, Roboto on Android); Lora only for the brand mark.
   The shell is a grey canvas holding the sidebar, with the content in one inset white panel.
   The whole system (roles, components, motion, writing) is described in OSKETT_DESIGN.md. */
:root {
  /* ============ COLOUR ============
     Every colour has one job. Pick by role, never by hue.

     Surfaces   canvas (sidebar, page behind the panel, tray strips) · surface (the panel, cards)
                surface-alt (zebra rows) · surface-hover · surface-on (the selected item)
     Lines      line (dividers, card edges) · line-strong (control borders)
     Text       text (content) · text-2 (secondary content) · muted (labels, meta; passes AA on
                every surface) · faint (decoration and disabled only; never readable text)
     Blue       the brand blue (#1F6FEB, the landing page's). Solid primary buttons, and small
                touches for what is yours (Watching, watched bookmarks, active filters, switches
                on, focus). Not on navigation, links or charts.
     Ink        near-black for text; also tooltips and toasts.
     Attention  orange: needs a person. Late filings, held filings, the review count, warnings.
     Live       green: a source is connected and live. Nothing else.
     Danger     red: destructive actions (sign out, delete).
     Charts     grey only: track, mark, line, emphasis. Attention may mark a chart; blue never.

     Each accent has the same four steps: the mark (dots, icons, fills), -ink (text on
     surface or soft), -soft (tinted background) and -edge (tinted border). */
  --canvas: #F7F7F7;
  --surface: #FFFFFF;
  --surface-alt: #FAFAFA;
  --surface-hover: #F3F3F3;
  --surface-on: #EBEBEB;
  --line: #ECECEC;
  --line-strong: #DDDDDD;
  --text: #171717;
  --text-2: #4F4F4F;
  --muted: #686868;
  --faint: #A8A8A8;
  --ink: #171717;
  --ink-hover: #333333;
  --you: #1F6FEB; --you-ink: #1557C9; --you-soft: #EDF3FE; --you-edge: #C9DBFB; --you-hover: #1A5FD0; --you-fill: #1F6FEB;
  --attn: #C96A00; --attn-ink: #B45309; --attn-soft: #FFF6E9; --attn-edge: #F9D9A8;
  --live: #17803F;
  --danger: #C53030;
  --chart-track: #F2F2F2; --chart-mark: #E6E6E6; --chart-mark-hover: #D9D9D9; --chart-line: #8C8C8C; --chart-emph: #262626;
  --shadow-card: 0 1px 2px rgba(0,0,0,.04);
  --shadow-raised: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.03);
  --shadow-pop: 0 12px 32px -12px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04);
  --shadow-float: 0 24px 64px -20px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.05);
  --shadow-edge: 0 10px 12px -12px rgba(0,0,0,.18);
  --scrim: rgba(20,20,20,.22);

  /* ============ TYPE ============
     Six sizes, each with a role. Weight: 400 for reading, 500 for names, figures, controls and
     the selected item, 600 for page and section titles only. Amounts use tabular figures. */
  --fs-caption: 12px;  /* pills, meta under a name, footnotes */
  --fs-label: 13px;    /* labels, column heads, secondary lines, small controls */
  --fs-body: 14px;     /* reading text, rows, buttons */
  --fs-heading: 16px;  /* section and panel headings, page intros */
  --fs-figure: 20px;   /* stat values */
  --fs-title: 28px;    /* the page title */
  --sans: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Lora', Georgia, serif;
  --side: 256px;
  --gutter: 40px;
  --col: 1040px;
  --top-h: 57px;
  --r: 14px;     /* trays and cards */
  --r-in: 11px;  /* a card inside a tray */
  --r-sm: 8px;   /* buttons, fields, rows */
}

/* Dark theme: follows the system unless the viewer picks one in the user menu. */
:root[data-theme="dark"] {
  --canvas: #111111; --surface: #1A1A1A; --surface-alt: #1E1E1E; --surface-hover: #242424; --surface-on: #2A2A2A;
  --line: #2A2A2A; --line-strong: #383838;
  --text: #EDEDED; --text-2: #BDBDBD; --muted: #8E8E8E; --faint: #5E5E5E;
  --ink: #EDEDED; --ink-hover: #FFFFFF;
  --you: #4A8DF7; --you-ink: #8DB6FA; --you-soft: #16243C; --you-edge: #284A7A; --you-hover: #3270D8; --you-fill: #2A69D6;
  --attn: #F0A23B; --attn-ink: #F3B45C; --attn-soft: #2A2012; --attn-edge: #573F1C;
  --live: #4CC27E;
  --danger: #F07878;
  --chart-track: #202020; --chart-mark: #2E2E2E; --chart-mark-hover: #3A3A3A; --chart-line: #7C7C7C; --chart-emph: #E0E0E0;
  --shadow-card: none;
  --shadow-raised: 0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-pop: 0 12px 32px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05);
  --shadow-float: 0 24px 64px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
  --shadow-edge: 0 10px 12px -12px rgba(0,0,0,.8);
  --scrim: rgba(0,0,0,.55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--text);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.5; letter-spacing: -0.006em;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  display: grid; grid-template-columns: var(--side) minmax(0, 1fr); height: 100vh; overflow: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
svg { display: block; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- sidebar ---------- */
.side { display: flex; flex-direction: column; padding: 14px 12px 12px; overflow-y: auto; min-width: 0; scrollbar-width: thin; }
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 12px 6px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--fs-body); }
.brand-mark { width: 24px; height: 24px; border-radius: 7px; background: var(--ink); color: var(--canvas); display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 15px; line-height: 1; }
.search-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 6px 0 10px; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted);
  font-size: var(--fs-body); cursor: pointer; text-align: left; box-shadow: var(--shadow-card);
}
.search-trigger span:first-of-type { flex: 1; }
.search-trigger:hover { border-color: var(--line-strong); color: var(--text-2); }
.search-trigger:focus-visible { outline: 2px solid var(--you); outline-offset: 2px; }
.kbd { font-family: var(--sans); font-size: 11px;  border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; line-height: 18px; color: var(--muted); background: var(--surface); display: inline-block; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--r-sm);
  color: var(--text); font-size: var(--fs-body); min-width: 0;
}
.nav a svg { color: var(--text-2); flex: none; }
.nav a:hover { background: var(--surface-hover); }
.nav a.on { background: var(--surface-on); font-weight: 500; }
.nav a .n { margin-left: auto; font-size: var(--fs-caption); color: var(--muted); }
.nav a .n.c-attn { color: var(--attn-ink); }
.nav a .later { margin-left: auto; font-size: var(--fs-caption); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 5px; padding: 0 5px; line-height: 16px; }
.nav-label { font-size: var(--fs-label); color: var(--muted); padding: 18px 10px 6px; }
.nav a.add { color: var(--muted); font-size: var(--fs-label); }
.nav a.add:hover { color: var(--text); }
/* A watched company: mark, name, amount. */
.nav a.ent { height: 34px; gap: 10px; }
.nav a.ent .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav a.ent .amt { font-size: var(--fs-label); color: var(--text-2); }
.nav a.ent.on { background: var(--surface-on); }

.side-foot { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.side-note { font-size: var(--fs-caption); color: var(--muted); line-height: 1.5; padding: 0 6px; margin: 0; }
.side-bar { display: flex; align-items: center; gap: 8px; position: relative; padding: 2px 0 0 2px; }
.side-bar #nav-foot { margin-left: auto; }
.pill-btn { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 2px 10px; font-size: var(--fs-caption); cursor: pointer; }
.pill-btn:hover { color: var(--text); border-color: var(--line-strong); }
.mode-switch { display: flex; width: 100%; }
.mode-switch button { flex: 1; }

/* ---------- the panel ---------- */
.stage {
  margin: 8px 8px 8px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  overflow-y: auto; overflow-x: hidden; min-width: 0; position: relative; scrollbar-width: thin;
}
body.side-off { grid-template-columns: 0 minmax(0, 1fr); }
body.side-off .side { visibility: hidden; padding: 0; }
body.side-off .stage { margin-left: 8px; }
#expand { display: none; }
body.side-off #expand { display: grid; }

.tabs-bar {
  position: sticky; top: 0; z-index: 30; height: var(--top-h); display: flex; align-items: center; gap: 8px;
  padding: 0 14px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.tabs-hist { color: var(--muted); width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; flex: none; }
.tabs { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; flex: 1; }
.tab { display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 4px 0 8px; border-radius: var(--r-sm); background: var(--canvas); border: 1px solid var(--line); flex: none; max-width: 220px; color: var(--text-2); }
.tab a { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--fs-label); }
.tab .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab button { border: none; background: none; padding: 4px; cursor: pointer; color: var(--faint); border-radius: 6px; }
.tab button:hover { color: var(--text-2); }
.tab:hover { color: var(--text); }
.tab.on { background: var(--surface-on); border-color: var(--surface-on); color: var(--text); font-weight: 500; }
.tabs-empty { font-size: var(--fs-label); color: var(--faint); padding-left: 4px; white-space: nowrap; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; position: relative; flex: none; }

.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid transparent; background: none; cursor: pointer; color: var(--text-2); position: relative; flex: none;
}
.icon-btn.sm { width: 30px; height: 30px; border-radius: var(--r-sm); }
.icon-btn:hover, .icon-btn.on { background: var(--surface-hover); color: var(--text); }
.icon-btn .dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--you); border: 1.5px solid var(--surface); }

.pop {
  position: absolute; top: 42px; right: 0; width: 340px; background: var(--surface);
  border-radius: 12px; box-shadow: var(--shadow-pop); z-index: 40; font-size: var(--fs-label); overflow: hidden;
  animation: rise .14s ease-out;
}
.pop.up { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; width: 300px; }
.pop-head { padding: 11px 14px; border-bottom: 1px solid var(--line); font-weight: 500; background: var(--canvas); }
.pop-row { display: block; padding: 10px 14px; }
.pop-row + .pop-row { border-top: 1px solid var(--line); }
a.pop-row:hover { background: var(--surface-alt); }
.pop-row .m, .pop-row.m { color: var(--muted); }
.suggest {
  position: absolute; top: calc(100% + 8px); left: 0; width: 100%; min-width: 320px;
  background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-pop); overflow: hidden; z-index: 45; padding: 4px;
}
.suggest button { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 10px; border: none; background: none; text-align: left; cursor: pointer; font-size: var(--fs-label); border-radius: 7px; }
.suggest button:hover, .suggest button.on { background: var(--surface-hover); }
.suggest span.m { color: var(--muted); white-space: nowrap; }

/* ---------- content column ---------- */
.main { min-width: 0; padding: 44px max(var(--gutter), calc((100% - var(--col)) / 2)) 96px; }
.main[data-screen="signals"], .main[data-screen="review"], .main[data-screen="today"], .main[data-screen="analytics"] { --col: 1200px; }
.narrow { max-width: 760px; }

.sec { padding: 0 0 24px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.sec-head:last-child { margin-bottom: 4px; }
h1 { font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.012em; margin: 0; line-height: 1.25; }
h2 { font-size: var(--fs-heading); font-weight: 600; letter-spacing: -0.012em; margin: 0; line-height: 1.35; }
.sub { color: var(--muted); font-size: var(--fs-heading); margin: 6px 0 0; max-width: 64ch; }
h2 + .sub { font-size: var(--fs-body); margin-top: 3px; }
.sub b { color: var(--text); font-weight: 500; }

/* Today: a main column plus a rail once there is room for both. */
.today { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
@media (min-width: 1440px) {
  .today { grid-template-columns: minmax(0, 1fr) 340px; }
  .today > .col { min-width: 0; }
  .rail .split { grid-template-columns: 1fr; }
  .rail .split > div + div { border-left: none; border-top: 1px solid var(--line); }
  .rail .cards { grid-template-columns: 1fr; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  height: 34px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface);
  font-size: var(--fs-body); font-weight: 500; cursor: pointer; color: var(--text); box-shadow: var(--shadow-card);
  transition: background-color .12s ease, border-color .12s ease, transform .1s ease;
}
.btn:hover { background: var(--surface-alt); border-color: var(--faint); }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.btn.primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.btn.sm { height: 28px; padding: 0 10px; font-size: var(--fs-label); border-radius: 7px; }
.btn.quiet { border-color: transparent; box-shadow: none; color: var(--muted); background: none; }
.btn.quiet:hover { color: var(--text); background: var(--surface-hover); }
.btn .kbd { background: transparent; }
.btn.primary .kbd { color: inherit; border-color: color-mix(in srgb, var(--surface) 40%, transparent); }
.btn:focus-visible, .nav a:focus-visible, .icon-btn:focus-visible, .tab a:focus-visible { outline: 2px solid var(--you); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ---------- stat cards ---------- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px 16px; display: flex; flex-direction: column; min-height: 118px; background: var(--surface); box-shadow: var(--shadow-card); min-width: 0; }
a.stat:hover { border-color: var(--line-strong); }
.stat-h { color: var(--muted); font-size: var(--fs-body); }
.stat-b { margin-top: auto; padding-top: 18px; }
.stat-v { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.stat-v b { font-weight: 500; font-size: var(--fs-figure); line-height: 1.2; letter-spacing: -0.01em; }
.stat-v b.soft { font-size: var(--fs-body); letter-spacing: 0; }
.stat-v .m { color: var(--muted); font-size: var(--fs-label); }
.stat-n { color: var(--muted); font-size: var(--fs-caption); margin-top: 2px; }
.warn { color: var(--attn); flex: none; }
.c-attn { color: var(--attn-ink); }
.c-you { color: var(--you); }
.chart { height: 76px; margin-top: 18px; }
.chart svg { width: 100%; height: 100%; }
.cells { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; height: 64px; margin-top: 14px; }
.hatch { border: 1px solid var(--line); border-radius: 10px; background: repeating-linear-gradient(135deg, transparent 0 9px, var(--line) 9px 10px); }
.hatch-note { height: 64px; margin-top: 14px; display: grid; place-items: center; padding: 0 12px; }
.hatch-note span { background: var(--surface); padding: 3px 8px; font-size: var(--fs-caption); color: var(--muted); border-radius: 6px; text-align: center; }

/* ---------- trays ---------- */
.tray { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 0 4px 4px; min-width: 0; }
.tray-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px 8px 6px 12px; }
.tray-l { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-body); }
.tray-l svg { color: var(--muted); }
.tray-m { color: var(--muted); font-size: var(--fs-label); }
.tray-b { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-in); padding: 5px; box-shadow: var(--shadow-card); min-width: 0; }
.tray-empty { margin: 0; padding: 12px 12px; color: var(--muted); font-size: var(--fs-label); }
.two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }

/* ---------- tables ---------- */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--surface-hover); border-radius: 9px; padding: 2px; gap: 2px; }
.seg button { border: none; background: none; padding: 0 12px; height: 30px; font-size: var(--fs-label); cursor: pointer; color: var(--text-2); border-radius: 7px; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--surface); color: var(--text); font-weight: 500; box-shadow: var(--shadow-raised); }
.seg button .n { font-size: var(--fs-caption); color: var(--muted); margin-left: 6px; font-weight: 400; }
.field {
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 0 11px; height: 34px; font: inherit; font-size: var(--fs-body);
  background: var(--surface); color: var(--text); outline: none; min-width: 0; box-shadow: var(--shadow-card);
}
.field:focus { border-color: var(--you); box-shadow: 0 0 0 3px color-mix(in srgb, var(--you) 16%, transparent); }
.field:disabled { cursor: not-allowed; background: var(--surface-alt); }

.tr { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) 104px 104px 92px 56px 104px 112px; align-items: center; gap: 16px; padding: 0 12px; font-size: var(--fs-body); min-height: 46px; border-radius: var(--r-sm); }
.tray-b > .tr:not(.th):nth-child(even) { background: var(--surface-alt); }
.tray-b > .tr:not(.th):hover { background: var(--surface-hover); }
.tr.th { min-height: 40px; font-size: var(--fs-label); color: var(--muted); padding: 0 18px; }
.tray-b > .tr.th { padding: 0 12px; min-height: 36px; }
.tr .co { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr .co small { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-caption); overflow: hidden; text-overflow: ellipsis; }
.tr .co.with-mono { display: flex; align-items: center; gap: 10px; }
.tr .num { font-size: var(--fs-body); text-align: right; }
.tr.th .num { font-size: var(--fs-label); }
.tr .m { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr .acts { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.tr.sel, .tray-b > .tr.sel:nth-child(even) { background: var(--you-soft); box-shadow: inset 0 0 0 1px var(--you-edge); }
.link-out { display: inline-flex; align-items: center; gap: 3px; height: 28px; padding: 0 8px; border-radius: 7px; font-size: var(--fs-label); font-weight: 500; color: var(--text-2); }
.link-out:hover { color: var(--text); background: var(--surface-hover); }
.compact .tr { grid-template-columns: minmax(0, 1fr) 96px 84px 96px 112px; }
.compact .tr > .hide-md, .compact .tr > .hide-lg { display: none; }
.tr.watch { grid-template-columns: minmax(0, 2.4fr) 130px 120px minmax(0, 1fr) 170px; }
.tr.hist { grid-template-columns: 110px 70px minmax(0, 1fr) minmax(0, 1fr) 110px 90px; }
.empty { padding: 32px 14px; text-align: center; color: var(--muted); }
.ext { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: var(--fs-label); }
.ext:hover { color: var(--text); }
.more { padding: 10px 14px 6px; text-align: center; }
.count-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.count-line { font-size: var(--fs-label); color: var(--muted); margin: 0; }
.count-line b { color: var(--text); font-weight: 500; }
a.co-link:hover { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

/* Signals: the filters, count line and column heads stick under the tab bar, so after the
   page reaches them only the rows scroll. The column heads are the top of the tray. */
.sig-head { position: sticky; top: var(--top-h); z-index: 20; background: var(--surface); padding-top: 16px; margin-top: -16px; }
.sig-head .tr.th { background: var(--canvas); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; padding: 0 22px; }
.sig-body { background: var(--canvas); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r) var(--r); padding: 0 4px 4px; }
@media (max-width: 760px) {
  /* On phones the filters wrap to several rows; pinning them would cover the list. */
  .sig-head { position: static; padding-top: 0; margin-top: 0; }
}

/* ---------- chips (status pills) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 7px; height: 22px; border-radius: 6px;
  font-size: var(--fs-caption); font-weight: 500; border: 1px solid var(--line-strong); color: var(--text-2); background: var(--surface); white-space: nowrap;
}
.chip.you { color: var(--you-ink); border-color: var(--you-edge); background: var(--you-soft); }
.chip.attn { color: var(--attn-ink); border-color: var(--attn-edge); background: var(--attn-soft); }
.chip.quiet { color: var(--muted); background: var(--surface-alt); border-color: var(--line); }
.live { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }

/* ---------- marks and avatars ---------- */
.mono { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-on); color: var(--text-2); display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; flex: none; letter-spacing: 0; }
.mono.xs { width: 18px; height: 18px; font-size: 10px; }
.mono.sm { width: 20px; height: 20px; font-size: 10.5px; }
.mono.xl { width: 72px; height: 72px; font-size: 30px; font-weight: 500; background: var(--canvas); border: 1px solid var(--line); color: var(--text); font-family: var(--serif); font-style: italic; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--surface); display: grid; place-items: center; font-size: 12.5px; font-weight: 600; flex: none; }

/* ---------- cards (Today) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card { border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; background: var(--surface); min-width: 0; overflow: hidden; box-shadow: var(--shadow-card); }
a.card:hover { border-color: var(--line-strong); }
.card-b { padding: 14px 16px 16px; flex: 1; }
.card-t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-d { color: var(--text-2); font-size: var(--fs-label); margin-top: 4px; }
.card-m { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: var(--fs-label); }
.card-m .chip { flex: none; }
.card-f { border-top: 1px solid var(--line); background: var(--canvas); padding: 9px 16px; font-size: var(--fs-caption); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-add { min-height: 150px; display: grid; place-items: center; }

/* ---------- split box ---------- */
.split { display: grid; grid-template-columns: 1fr 200px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.split > div { padding: 20px; }
.split > div + div { border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; background: var(--canvas); }
.split .big { font-size: var(--fs-title); font-weight: 500; line-height: 1.1; }
.split .big-l { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); margin-top: 6px; font-size: var(--fs-body); }
a.split-link:hover .big-l { color: var(--text); }

/* ---------- source cards ---------- */
.src { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.src-art { height: 88px; position: relative; padding: 14px 0 0 54px; background: var(--canvas); border-bottom: 1px solid var(--line); }
.src-art .win { height: 100%; background: var(--surface); border-radius: 8px 0 0 0; border: 1px solid var(--line); border-bottom: none; border-right: none; padding: 8px 12px; }
.src-art .win i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--line-strong); margin-right: 4px; }
.src-art .ico { position: absolute; left: 14px; bottom: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--surface); background: var(--ink); font-weight: 600; font-size: 13px; }
.src.off .ico { background: var(--faint); }
.src.off .src-b .t { color: var(--text-2); }
.src-b { padding: 12px 14px 14px; }
.src-b .t { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 500; }
.src-b .d { color: var(--text-2); font-size: var(--fs-label); margin-top: 2px; }
.rail .src-art { height: 64px; padding-top: 10px; }
.rail .src-art .ico { width: 26px; height: 26px; bottom: 8px; }

/* ---------- review ---------- */
.rv { display: grid; grid-template-columns: 340px 1fr; gap: 4px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 4px; min-height: 460px; }
.rv-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-in); max-height: 640px; overflow-y: auto; padding: 5px; scrollbar-width: thin; }
.rv-item { display: block; width: 100%; text-align: left; border: none; background: none; padding: 9px 12px; cursor: pointer; border-radius: var(--r-sm); }
.rv-item:nth-child(even) { background: var(--surface-alt); }
.rv-item:hover { background: var(--surface-hover); }
.rv-item.on, .rv-item.on:nth-child(even) { background: var(--surface-on); }
.rv-item .t { font-size: var(--fs-body); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-item .m { font-size: var(--fs-caption); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-item.done .t { color: var(--muted); font-weight: 400; }
.rv-body { padding: 28px 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-in); min-width: 0; }
.rv-body dl { display: grid; grid-template-columns: 110px minmax(0, 1fr) 110px minmax(0, 1fr); gap: 10px 20px; margin: 24px 0 0; font-size: var(--fs-body); max-width: 760px; }
@media (max-width: 1320px) { .rv-body dl { grid-template-columns: 110px minmax(0, 1fr); } }
.rv-body dt { color: var(--muted); }
.rv-body dd { margin: 0; }
.rv-done { display: grid; place-items: center; text-align: center; padding: 48px 24px; }
.rv-done h2 { margin-top: 10px; }
/* Reasons read like the reference's "For review" rows: a warning mark, then the sentence. */
.reasons { margin: 20px 0 0; padding: 5px; list-style: none; border: 1px solid var(--attn-edge); background: var(--attn-soft); border-radius: var(--r-in); }
.reasons li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; font-size: var(--fs-body); }
.reasons li .warn { margin-top: 2px; }
.reasons.flat { margin: 0; border: 0; background: none; padding: 0; }
.rv-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 14px; padding: 9px 10px 9px 16px; border-radius: 12px;
  background: var(--ink); color: var(--surface); font-size: var(--fs-body); box-shadow: var(--shadow-pop);
  animation: rise .16s ease-out;
}
.toast button { border: none; background: color-mix(in srgb, var(--surface) 14%, transparent); color: inherit; font-weight: 500; cursor: pointer; padding: 3px 10px; border-radius: 7px; }
.toast button:hover { background: color-mix(in srgb, var(--surface) 24%, transparent); }

/* ---------- boxes (settings, alerts) ---------- */
.box { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-card); }
.box-h { padding: 11px 16px; background: var(--canvas); border-bottom: 1px solid var(--line); font-size: var(--fs-body); color: var(--muted); display: flex; justify-content: space-between; gap: 12px; }
.box-h .m { color: var(--muted); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 18px; }
.set-row + .set-row { border-top: 1px solid var(--line); }
.set-row .d { color: var(--muted); font-size: var(--fs-label); margin-top: 2px; }
.switch { width: 40px; height: 24px; border-radius: 999px; border: none; background: var(--line-strong); position: relative; cursor: pointer; flex: none; padding: 0; transition: background .15s ease; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s cubic-bezier(.3,.7,.4,1); }
.switch[aria-checked="true"] { background: var(--you); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }
.note-foot { margin-top: 16px; font-size: var(--fs-label); color: var(--muted); }
.note-foot a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }

@keyframes rise { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.main.enter > * { animation: rise .16s ease-out; }

/* ---------- user menu ---------- */
.user { position: relative; }
.user-btn { display: flex; align-items: center; gap: 4px; padding: 3px 6px 3px 3px; border: none; background: none; border-radius: 999px; cursor: pointer; color: var(--muted); }
.user-btn:hover { background: var(--surface-hover); }
.menu { position: absolute; left: 0; bottom: calc(100% + 8px); min-width: 230px; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 4px; z-index: 50; }
.menu-id { padding: 8px 10px 6px; }
.menu-id .nm { font-weight: 500; }
.menu-id .em { font-size: var(--fs-caption); color: var(--muted); }
.menu button, .menu a { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border: none; background: none; border-radius: 7px; cursor: pointer; font-size: var(--fs-body); text-align: left; }
.menu button:hover, .menu a:hover { background: var(--surface-hover); }
.menu .rule { height: 1px; background: var(--line); margin: 4px 0; }
.menu .danger { color: var(--danger); }

/* ---------- filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.saved { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.saved .chip { cursor: pointer; height: 26px; padding: 0 8px; font-size: var(--fs-label); font-weight: 400; background: var(--canvas); border-color: var(--line); }
.saved .chip:hover { border-color: var(--line-strong); }
.saved .x { border: none; background: none; cursor: pointer; color: var(--muted); padding: 0 0 0 4px; font-size: 15px; line-height: 1; }

/* ---------- company profile ---------- */
.crumb { font-size: var(--fs-label); color: var(--muted); display: flex; gap: 6px; align-items: center; }
.crumb a:hover { color: var(--text); }
.prof-top { padding-bottom: 32px; }
.prof-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 8px; }
.prof-head .mono.xl { margin-bottom: 14px; }
.prof-head h1 { max-width: 20ch; }
.meta-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; color: var(--muted); font-size: var(--fs-body); margin-top: 6px; align-items: center; }
.prof-chip { margin-top: 12px; }
.prof-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.kv { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0; margin: 0; font-size: var(--fs-body); }
.kv dt, .kv dd { padding: 9px 12px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dt:nth-of-type(even), .kv dt:nth-of-type(even) + dd { background: var(--surface-alt); }
.kv dt { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.kv dd { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.people { }
.person { padding: 9px 12px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; border-radius: var(--r-sm); }
.person:nth-child(even) { background: var(--surface-alt); }
.person .r { color: var(--muted); font-size: var(--fs-label); text-align: right; }
.sim { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: var(--fs-body); border-radius: var(--r-sm); }
.sim:nth-child(even) { background: var(--surface-alt); }
.sim a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim a:hover { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.sim .m { color: var(--text-2); white-space: nowrap; }
.table.tray .tray-b > .tr.hist.th { color: var(--muted); }
.speed-line { margin: 10px 0 0; font-size: var(--fs-label); color: var(--text-2); }
.speed-line .speed { font-size: inherit; }
.tr .co small.speed { color: var(--muted); }

/* ---------- alerts ---------- */
.rule-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 110px auto; align-items: center; gap: 16px; padding: 14px 18px; }
.rule-row + .rule-row { border-top: 1px solid var(--line); }
.rule-row .t { font-weight: 500; }
.rule-row .d { color: var(--muted); font-size: var(--fs-label); margin-top: 2px; }
.rule-row .ch { font-size: var(--fs-label); color: var(--text-2); }
.rule-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--canvas); }
.rule-form .lbl { font-size: var(--fs-label); color: var(--muted); }
.rule-form .dd-pop { max-width: 300px; }
.alert-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 18px; font-size: var(--fs-body); }
.alert-row + .alert-row { border-top: 1px solid var(--line); }
.alert-row .m { color: var(--muted); font-size: var(--fs-label); white-space: nowrap; }

/* ---------- analytics ---------- */
.an-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.an-grid .wide { grid-column: 1 / -1; }
.panel { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 0 4px 4px; min-width: 0; }
.panel > .box-h { background: none; border: 0; padding: 12px 12px 10px; }
.panel-b { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-in); padding: 18px 16px 16px; box-shadow: var(--shadow-card); }
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 118px; gap: 12px; align-items: center; font-size: var(--fs-label); }
.bar-row .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.bar-row .v { font-size: var(--fs-label); text-align: right; color: var(--text); white-space: nowrap; }
.bar-row .v em { font-style: normal; color: var(--muted); margin-left: 8px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--fs-caption); color: var(--muted); margin-top: 10px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.big-chart { height: 180px; }
.big-chart svg { width: 100%; height: 100%; overflow: visible; }
.axis { display: flex; justify-content: space-between; font-size: var(--fs-caption); color: var(--muted); margin-top: 8px; }
.brief { margin: 0; padding: 5px; list-style: none; border: 1px solid var(--line); border-radius: var(--r-in); background: var(--surface); }
.brief li { padding: 8px 10px; font-size: var(--fs-body); line-height: 1.55; border-radius: var(--r-sm); }
.brief li:nth-child(even) { background: var(--surface-alt); }
.brief a:hover, .alert-row a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- settings ---------- */
.set-grid { display: grid; grid-template-columns: 200px minmax(0, 720px); gap: 0 32px; }
.subnav { display: flex; flex-direction: column; gap: 2px; }
.subnav a { height: 34px; display: flex; align-items: center; padding: 0 10px; border-radius: var(--r-sm); font-size: var(--fs-body); color: var(--text-2); }
.subnav a:hover { background: var(--surface-hover); color: var(--text); }
.subnav a.on { background: var(--surface-on); color: var(--text); font-weight: 500; }
.meter { height: 6px; background: var(--surface-hover); border-radius: 999px; overflow: hidden; margin-top: 8px; width: 220px; max-width: 100%; }
.meter span { display: block; height: 100%; background: var(--you); border-radius: 999px; }

/* ---------- command palette ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 70; display: grid; place-items: start center; padding: 12vh 16px 16px; animation: fade .12s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.palette { width: 100%; max-width: 600px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-float); overflow: hidden; animation: pop .16s cubic-bezier(.3,.7,.4,1); }
@keyframes pop { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.palette input { width: 100%; border: none; outline: none; border-bottom: 1px solid var(--line); background: transparent; font: inherit; font-size: 16px; color: var(--text); padding: 16px 18px; }
.palette .grp { font-size: var(--fs-caption); color: var(--muted); padding: 10px 18px 4px; }
.palette .it { display: flex; justify-content: space-between; gap: 12px; width: calc(100% - 12px); margin: 0 6px; border: none; background: none; text-align: left; padding: 8px 12px; cursor: pointer; font-size: var(--fs-body); border-radius: var(--r-sm); }
.palette .it.on { background: var(--surface-hover); }
.palette .it .m { color: var(--muted); font-size: var(--fs-label); white-space: nowrap; }
.palette .list { max-height: 50vh; overflow-y: auto; padding-bottom: 6px; }
.palette .foot { border-top: 1px solid var(--line); padding: 9px 18px; font-size: var(--fs-caption); color: var(--muted); display: flex; gap: 14px; background: var(--canvas); }

/* ---------- custom dropdown ---------- */
.dd { position: relative; display: inline-block; }
.dd-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 11px; max-width: 280px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text);
  font-size: var(--fs-label); cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-card);
}
.dd-btn:hover { border-color: var(--faint); }
.dd-btn .dd-l { color: var(--muted); }
.dd-btn .dd-v { overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.dd-btn svg { color: var(--muted); flex: none; transition: transform .15s ease; }
.dd-btn[aria-expanded="true"] { border-color: var(--line-strong); background: var(--surface-hover); }
.dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.dd-btn.set { background: var(--you-soft); border-color: var(--you-edge); }
.dd-btn.set .dd-v { color: var(--you-ink); }
.dd-btn:focus-visible { outline: 2px solid var(--you); outline-offset: 2px; }
.dd.inline .dd-btn { height: 30px; border-style: dashed; box-shadow: none; }
.dd-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 46; min-width: 100%; width: max-content; max-width: 340px;
  background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 4px;
  animation: rise .12s ease-out;
}
.dd-search { width: 100%; border: none; border-bottom: 1px solid var(--line); outline: none; background: transparent; font: inherit; font-size: var(--fs-body); color: var(--text); padding: 8px 10px 9px; margin-bottom: 4px; }
.dd-search::placeholder { color: var(--muted); }
.dd-list { max-height: 300px; overflow-y: auto; }
.dd-opt { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; padding: 7px 10px; border: none; background: none; border-radius: 7px; text-align: left; cursor: pointer; font-size: var(--fs-body); color: var(--text); }
.dd-opt .lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-opt .ck { color: var(--text); font-size: var(--fs-caption); }
.dd-opt .n { font-size: var(--fs-caption); color: var(--muted); padding-left: 12px; }
.dd-opt.at, .dd-opt:hover { background: var(--surface-hover); }
.dd-opt[aria-selected="true"] .lb { font-weight: 500; }
.dd-opt.dis { color: var(--faint); cursor: not-allowed; }
.dd-opt:focus-visible { outline: 2px solid var(--you); outline-offset: -2px; }
.dd-empty { padding: 10px; color: var(--muted); font-size: var(--fs-label); }
.dd.compact .dd-btn { height: 28px; font-size: var(--fs-label); padding: 0 8px 0 9px; }
.dd.compact .dd-pop { left: auto; right: 0; }

/* ---------- search field ---------- */
.searchbox { position: relative; display: flex; align-items: center; flex: 1; min-width: 220px; max-width: 380px; }
.searchbox svg { position: absolute; left: 11px; color: var(--muted); pointer-events: none; }
.searchbox .field { width: 100%; padding-left: 34px; padding-right: 32px; }
.searchbox .clr { position: absolute; right: 5px; width: 24px; height: 24px; border: none; background: none; border-radius: 6px; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; }
.searchbox .clr:hover { background: var(--surface-hover); color: var(--text); }
.kbd-hint { white-space: nowrap; }
@media (max-width: 1200px) { .kbd-hint { display: none !important; } }

/* ---------- charts ----------
   The reference's language: soft, solid, rounded bars; the column a headline number refers
   to is drawn in ink; orange marks only what needs attention. The step area keeps its pale
   wash under a thin line. */
.cells span { border-radius: 4px; background: var(--chart-mark); }
.cells span.hit { background: var(--you); }
.meter-lg { height: 10px; margin-top: 40px; background: var(--chart-mark); border-radius: 999px; overflow: hidden; }
.meter-lg span { display: block; height: 100%; background: var(--you); border-radius: 999px; }
.vc { position: relative; }
.vc.with-axis { margin-left: 30px; }
.vc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sa-fill { fill: var(--chart-track); }
.sa-fill.emph { fill: var(--chart-mark-hover); }
.sa-line { fill: none; stroke: var(--chart-line); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sa-line.emph { stroke: var(--chart-emph); }
.sa-base { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sa-hatch { stroke: var(--line-strong); stroke-width: 1.5; }
.sa-hit { fill: transparent; }
.sa-hit:hover { fill: var(--text); fill-opacity: .05; }
.vc-in { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 12px; }
.vc-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; cursor: default; }
.vc-col i { display: block; width: 100%; max-width: 44px; background: var(--chart-mark); border-radius: 5px 5px 2px 2px; }
.vc-col.emph i { background: var(--chart-emph); }
.vc-col.attn i { background: var(--attn-soft); box-shadow: inset 0 2px 0 var(--attn); }
.vc-col b { font-weight: 500; font-size: var(--fs-caption); color: var(--text); margin-bottom: 6px; }
.vc-col:hover i { background: var(--chart-mark-hover); }
.vc-col.emph:hover i { background: var(--chart-emph); }
.vc-col.attn:hover i { background: var(--attn-soft); }
.vc-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.vc-grid.zero { border-top: none; }
.vc-grid i { position: absolute; right: calc(100% + 6px); top: -8px; font-style: normal; font-size: var(--fs-caption); color: var(--muted); }
.vc-ticks { display: flex; gap: 12px; margin-top: 8px; }
.vc-ticks.with-axis { margin-left: 30px; }
.vc-ticks span { flex: 1; min-width: 0; text-align: center; font-size: var(--fs-caption); color: var(--muted); white-space: nowrap; overflow: visible; }
.cap { font-size: var(--fs-label); color: var(--muted); margin: 14px 0 0; line-height: 1.55; }
.bar-track { height: 12px; display: block; }
.bar-fill { display: block; height: 100%; background: var(--chart-mark); border-radius: 999px; }
.bar-row:hover .bar-fill { background: var(--chart-mark-hover); }
.split-meter { display: flex; gap: 4px; height: 12px; }
.split-meter span { display: block; height: 100%; border-radius: 999px; }
.split-meter .a { background: var(--chart-emph); }
.split-meter .b { background: var(--chart-mark); }
.split-labels { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: var(--fs-label); color: var(--text-2); }
.split-labels b { font-weight: 500; color: var(--text); }
.tip { position: fixed; z-index: 80; pointer-events: none; background: var(--ink); color: var(--surface); font-size: var(--fs-caption);  padding: 4px 9px; border-radius: 7px; box-shadow: var(--shadow-pop); white-space: nowrap; }

/* Deferred screens, and the offline notice: a soft banner at the top of the page. */
.later-note { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; padding: 12px 16px; border-radius: var(--r); background: var(--canvas); border: 1px solid var(--line); color: var(--text-2); font-size: var(--fs-body); }
.later-note .chip { flex: none; }
.later-note:has(.chip.attn) { background: var(--attn-soft); border-color: var(--attn-edge); }

/* Explanations for first-time users: a short note next to the control. */
.hint { position: fixed; z-index: 85; pointer-events: none; max-width: 260px; padding: 7px 10px; border-radius: 9px;
  background: var(--ink); color: var(--surface); font-size: var(--fs-caption); line-height: 1.45; box-shadow: var(--shadow-pop);
  animation: hint-in .12s ease-out; }
@keyframes hint-in { from { opacity: 0; transform: translateY(2px); } }

/* Live mode, first visit: a skeleton of the Signals table while the first page loads. */
.skel-bar { height: 12px; border-radius: 6px; background: var(--surface-hover); animation: skel 1.4s ease-in-out infinite; }
.skel-table { margin-top: 64px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 4px; }
.skel-row { display: flex; gap: 10%; align-items: center; padding: 16px 14px; background: var(--surface); }
.skel-row:first-child { border-radius: var(--r-in) var(--r-in) 0 0; }
.skel-row:last-child { border-radius: 0 0 var(--r-in) var(--r-in); }
@keyframes skel { 50% { opacity: .45; } }

/* ---------- narrower screens ---------- */
@media (max-width: 1320px) {
  .tr { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) 104px 92px 104px 112px; }
  .tr > .hide-lg { display: none; }
}
@media (max-width: 1180px) {
  .stats.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .tr { grid-template-columns: minmax(0, 2fr) 104px 100px 104px 112px; }
  .tr > .hide-md, .tr > .hide-lg { display: none; }
  .tr.watch { grid-template-columns: minmax(0, 2fr) 110px 110px 170px; }
  .two-up { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  :root { --gutter: 16px; }
  body { display: block; height: auto; overflow: visible; background: var(--surface); }
  .side { position: sticky; top: 0; z-index: 35; background: var(--canvas); border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; overflow: visible; }
  .side-top { padding: 0; }
  #collapse, .side-note, .nav-label, .nav a.ent, .nav a.add, .tabs-bar .tabs-hist, #expand { display: none !important; }
  .search-trigger { width: auto; flex: 1; margin: 0; height: 34px; }
  .search-trigger .kbd { display: none; }
  .nav { flex-direction: row; order: 5; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .nav a { flex: none; white-space: nowrap; height: 32px; }
  .nav a .n { margin-left: 4px; }
  .side-foot { margin: 0; padding: 0; flex-direction: row; align-items: center; gap: 8px; }
  .mode-switch { width: auto; }
  .side-bar .pill-btn { display: none; }
  .menu { left: auto; right: 0; bottom: auto; top: calc(100% + 6px); }
  .stage { margin: 0; border: 0; border-radius: 0; overflow: visible; }
  .tabs-bar { position: static; padding: 0 12px; height: 48px; }
  .main { padding-top: 24px; }
  .cards, .an-grid { grid-template-columns: minmax(0, 1fr); }
  .stats, .stats.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 12px 14px; }
  .stat-b { padding-top: 12px; }
  .stat { min-height: 0; }
  .split { grid-template-columns: 1fr; }
  .split > div + div { border-left: none; border-top: 1px solid var(--line); }
  .rv { grid-template-columns: 1fr; }
  .rv-list { max-height: 240px; }
  .rv-body dl { grid-template-columns: 1fr; gap: 2px; }
  .rv-body { padding: 20px 16px; }
  .rv-body dd { margin-bottom: 8px; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .set-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .subnav { flex-direction: row; overflow-x: auto; }
  .subnav a { white-space: nowrap; }
  .kv { grid-template-columns: 1fr; }
  .kv dt { padding-bottom: 0; }
  .kv dt:nth-of-type(even), .kv dt:nth-of-type(even) + dd { background: none; }
  .rule-row { grid-template-columns: minmax(0, 1fr) auto; }
  .rule-row > .hide-sm { display: none; }
  .bar-row { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) 64px; }
  .tr.hist { grid-template-columns: 84px 44px minmax(0, 1fr) auto; }
  .tr.hist > .hide-sm { display: none; }
}
@media (max-width: 600px) {
  .tr, .tr.watch, .compact .tr { grid-template-columns: minmax(0, 1fr) auto; }
  .tr > .hide-sm { display: none; }
  .searchbox { max-width: none; flex-basis: 100%; }
  .dd-btn { max-width: 200px; }
  .bar-row .v em { display: none; }
  .bar-row { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) 40px; }
  .vc.with-axis, .vc-ticks.with-axis { margin-left: 26px; }
  .vc-in, .vc-ticks { gap: 6px; }

}
@media (prefers-reduced-motion: reduce) {
  .main.enter > *, .hint, .palette, .pop, .dd-pop, .toast { animation: none; }
  .switch, .switch::after, .btn { transition: none; }
  .skel-bar { animation: none; }
}

/* Profile actions read as buttons, like the reference's Pause / Edit pair. */
.prof-acts .link-out, .prof-acts .btn.quiet {
  height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font-size: var(--fs-body); box-shadow: var(--shadow-card);
}
.prof-acts .link-out:hover, .prof-acts .btn.quiet:hover { background: var(--surface-alt); border-color: var(--faint); }
/* In a row of stat cards where some carry a note, the others keep the same space, so every
   value sits on one line. */
.stats:has(.stat-n) .stat-b:not(:has(.stat-n))::after { content: ""; display: block; height: 21px; }

/* ---------- Signals controls, second pass ----------
   One toolbar row; filters appear only when used, as chips that open their own list. */
.toolbar { flex-wrap: nowrap; }
.toolbar .searchbox { max-width: 320px; min-width: 180px; }
.toolbar-end { margin-left: auto; flex: none; }
.add-dd .dd-btn { gap: 6px; padding: 0 12px 0 10px; color: var(--text-2); font-weight: 500; }
.add-dd .dd-btn svg { color: var(--text-2); }
.add-dd .dd-btn:hover { color: var(--text); }
.filters { gap: 6px; margin: -2px 0 12px; }
.chip-dd { display: inline-flex; align-items: stretch; height: 30px; border: 1px solid var(--you-edge); background: var(--you-soft); border-radius: var(--r-sm); }
.chip-dd .dd-btn, .chip-dd .dd-btn.set { height: 28px; border: 0; background: none; box-shadow: none; padding: 0 4px 0 10px; font-size: var(--fs-label); }
.chip-dd .dd-btn .dd-l { color: var(--you-ink); opacity: .8; }
.chip-dd .dd-btn .dd-l::after { content: ":"; }
.chip-dd .dd-btn .dd-v { color: var(--you-ink); }
.chip-dd .dd-btn svg { color: var(--you-ink); opacity: .7; }
.chip-dd .dd-btn[aria-expanded="true"] { background: none; }
.chip-dd:has(.dd-btn:not(.set)) { border-style: dashed; }
.dd-x { border: 0; background: none; color: var(--you-ink); opacity: .7; cursor: pointer; padding: 0 9px 0 4px; font-size: 16px; line-height: 1; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.dd-x:hover { opacity: 1; }
.saved { margin: 0 0 12px; }

/* The count line is the top of the table's tray; the column heads follow in the same grey. */
.sig-top { background: var(--canvas); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; padding: 12px 22px 2px; }
.sig-top .count-line { color: var(--muted); }
.sig-head .tr.th { border-top: 0; border-radius: 0; min-height: 34px; }

/* Row actions: the Filing link and an unwatched bookmark wait for the row to be hovered, so
   the company names are the loudest thing in the list. A watched row keeps its filled mark. */
.row-icon { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; border-radius: 7px; color: var(--muted); cursor: pointer; }
.row-icon:hover { background: var(--surface-on); color: var(--text); }
.row-icon.on { color: var(--text); }
.tr .acts .link-out, .tr .acts .row-icon:not(.on) { opacity: 0; transition: opacity .12s ease; }
.tr:hover .acts .link-out, .tr:hover .acts .row-icon, .tr:focus-within .acts .link-out, .tr:focus-within .acts .row-icon, .tr.sel .acts .link-out, .tr.sel .acts .row-icon { opacity: 1; }
@media (hover: none) { .tr .acts .link-out, .tr .acts .row-icon:not(.on) { opacity: 1; } }

/* Speed is data, so it is ink, not blue: a fast one is just a little stronger. */
.tr .co small.speed.fast, .speed-line .speed.fast { color: var(--text-2); font-weight: 500; }

@media (max-width: 760px) {
  .toolbar { flex-wrap: wrap; }
  .toolbar .searchbox { max-width: none; order: 5; flex-basis: 100%; }
}

/* ---------- hierarchy pass ----------
   Order of attention on Signals: the title, then company names and amounts, then everything
   else. Only the table is boxed; the stats and the controls sit on the page without frames. */

/* Stats: a quiet strip, not three cards. Numbers step well below the title. */
.stats.strip { display: flex; gap: 0; border: 0; }
.stats.strip .stat { flex: 1; border: 0; border-radius: 0; box-shadow: none; min-height: 0; padding: 2px 24px 0; background: none; }
.stats.strip .stat:first-child { padding-left: 0; }
.stats.strip .stat + .stat { border-left: 1px solid var(--line); }
.stats.strip .stat-h { font-size: var(--fs-label); }
.stats.strip .stat-b { padding-top: 6px; }
.stats.strip .stat-v { justify-content: flex-start; }
.stats.strip .stat-v b { font-size: var(--fs-figure); }
.stats.strip .stat-n { font-size: var(--fs-label); }
.stats.strip .stat-n a:hover { color: var(--text); }
.stats.strip .stat-b:not(:has(.stat-n))::after { display: none; }
.main[data-screen="signals"] .sec:has(.stats.strip) { padding-bottom: 36px; }

/* Controls: filled, frameless. They are there when reached for. */
.toolbar .searchbox .field { background: var(--surface-hover); border-color: transparent; box-shadow: none; }
.toolbar .searchbox .field:hover { background: var(--surface-on); }
.toolbar .searchbox .field:focus { background: var(--surface); border-color: var(--line-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--you) 12%, transparent); }
.add-dd .dd-btn, .toolbar-end .dd-btn { border-color: transparent; box-shadow: none; background: none; }
.add-dd .dd-btn:hover, .toolbar-end .dd-btn:hover, .toolbar-end .dd-btn[aria-expanded="true"], .add-dd .dd-btn[aria-expanded="true"] { background: var(--surface-hover); border-color: transparent; }
.toolbar-end .dd-btn .dd-v { font-weight: 400; color: var(--text-2); }

/* Rows: names and amounts in ink; the rest of each row steps back. */
.tr .m { color: var(--muted); }
.tr .num { color: var(--text); }
.tr .co small, .tr .co small.speed { font-size: var(--fs-caption); color: var(--muted); font-weight: 400; }
.tr .co small.speed.fast { color: var(--muted); font-weight: 400; }
.sig-top .count-line { font-size: var(--fs-label); }
.sig-top .count-line b { color: var(--text-2); }
/* Pills are for attention only. "Fund" is a plain word. */
.chip.quiet { background: none; border-color: transparent; padding: 0; color: var(--muted); font-weight: 400; }

/* Sidebar: the Later group folds away; its tags are plain words. */
.nav-later summary { list-style: none; display: flex; align-items: center; gap: 4px; cursor: pointer; border-radius: var(--r-sm); }
.nav-later summary::-webkit-details-marker { display: none; }
.nav-later summary svg { transform: rotate(-90deg); transition: transform .15s ease; opacity: .7; }
.nav-later[open] summary svg { transform: none; }
.nav-later summary:hover { color: var(--text); }
.nav-later .nav-label { padding-bottom: 6px; }
.nav a .later { border: 0; padding: 0; color: var(--muted); font-size: var(--fs-caption); }
.tabs-bar .tabs-hist { opacity: .7; }

/* The Shortcuts popover fits the sidebar. */
.pop.up { width: calc(var(--side) - 26px); font-size: var(--fs-label); }
.pop.up .pop-row { padding: 8px 12px; }
.pop.up .pop-row .kbd { margin-left: 2px; }

/* ---------- table spacing ----------
   Filings rows: one rhythm whether or not a row carries a speed line, a clear gutter between
   the right-aligned amounts and the left-aligned dates, and action columns only as wide as
   what they hold. Grids for the header and the rows are the same rule, so they stay aligned. */
.tr { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.3fr) 92px 92px 88px 48px 96px 100px; column-gap: 20px; }
.tray-b > .tr:not(.th) { min-height: 52px; padding-top: 7px; padding-bottom: 7px; }
.tr .co { line-height: 1.35; }
.tr .co small { margin-top: 2px; line-height: 1.3; }
/* First sale starts a new group: dates after amounts. */
.tr:not(.watch):not(.hist) > :nth-child(5) { padding-left: 16px; }
.tr .acts { gap: 2px; }
.sig-top { padding: 14px 22px 4px; }
.sig-head .tr.th { min-height: 36px; }
.compact .tr { grid-template-columns: minmax(0, 1fr) 92px 88px 96px 100px; }
@media (max-width: 1320px) {
  .tr { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.3fr) 92px 88px 96px 100px; }
}
@media (max-width: 1080px) {
  .tr { grid-template-columns: minmax(0, 2fr) 92px 88px 96px 100px; }
}
@media (max-width: 600px) {
  .tr, .tr.watch, .compact .tr { grid-template-columns: minmax(0, 1fr) auto; }
  .tr:not(.watch):not(.hist) > :nth-child(5) { padding-left: 0; }
}
.tr.th .num { color: var(--muted); }
.stats.strip .stat-b { margin-top: 0; }

/* ---------- feed rows, third pass ----------
   Five columns: the company (mark, name, status; then industry, state and speed on a quiet
   second line), the two amounts, the first sale, and hover actions. */
.tr { grid-template-columns: minmax(0, 1fr) 104px 104px 96px 100px; column-gap: 20px; }
.tr:not(.watch):not(.hist) > :nth-child(5) { padding-left: 0; }
.tr:not(.watch):not(.hist):not(.th) > :nth-child(4), .tr.th:not(.watch):not(.hist) > :nth-child(4) { padding-left: 16px; }
.compact .tr { grid-template-columns: minmax(0, 1fr) 104px 96px 100px; }
.tray-b > .tr:not(.th) { min-height: 56px; }
.tr .co.with-mono { gap: 12px; position: relative; overflow: visible; }
.tr .co .mono { width: 28px; height: 28px; font-size: 12px; }
.co-t { min-width: 0; flex: 1; }
.co-n { display: flex; align-items: center; gap: 8px; min-width: 0; }
.co-n .co-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.co-n .chip { flex: none; height: 20px; font-size: var(--fs-caption); padding: 0 6px; }
.co-n .chip.quiet { padding: 0; }
.tr .co small.co-s { display: flex; align-items: center; gap: 0; color: var(--muted); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-s .dot-sep { margin: 0 6px; color: var(--faint); }
.co-s .speed { color: inherit; font-weight: 400; }
.tr .num.off { color: var(--muted); }
.tr[data-row] { cursor: pointer; }
.tr.peeked, .tray-b > .tr.peeked:nth-child(even) { background: var(--surface-on); }
/* New since your last visit: a small blue mark (blue is "you"). */
.fresh { position: absolute; left: -9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--you); }

/* Day sections inside the feed's tray. */
.day-h { display: flex; align-items: center; gap: 8px; padding: 14px 12px 10px; color: var(--text-2); font-size: var(--fs-label); font-weight: 500; }
.day-h svg { color: var(--muted); }
.day-h .day-n { margin-left: auto; color: var(--muted); font-weight: 400; font-size: var(--fs-label); }
.sig-body > .day-h:first-child { padding-top: 10px; }
.sig-body .more { padding: 10px 0 6px; }

/* Sticky filters get a soft edge once rows pass under them. */
.sig-head { transition: box-shadow .15s ease; }
.sig-head.stuck { box-shadow: var(--shadow-edge); }

/* The top bar names the page when no company tabs are open. */
.tabs-page { font-size: var(--fs-body); font-weight: 500; color: var(--text-2); padding-left: 2px; }

/* ---------- peek ---------- */
.peek {
  position: fixed; top: 16px; right: 16px; bottom: 16px; width: 400px; z-index: 55;
  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-float);
  display: flex; flex-direction: column; overflow: hidden; animation: peek-in .2s cubic-bezier(.3,.7,.4,1);
}
@keyframes peek-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.peek-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 16px; background: var(--canvas); border-bottom: 1px solid var(--line); }
.peek-acts { display: flex; align-items: center; gap: 4px; }
.peek-b { padding: 20px; overflow-y: auto; flex: 1; scrollbar-width: thin; }
.pk-id { display: flex; gap: 14px; align-items: center; }
.mono.lg { width: 44px; height: 44px; font-size: 18px; font-family: var(--serif); font-style: italic; font-weight: 500; background: var(--canvas); border: 1px solid var(--line); color: var(--text); }
.pk-id h2 { font-size: var(--fs-heading); overflow-wrap: anywhere; }
.pk-meta { color: var(--muted); font-size: var(--fs-label); margin-top: 2px; }
.pk-tags { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: var(--fs-label); color: var(--muted); }
.pk-tags .speed { font-size: var(--fs-label); }
.pk-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 18px; }
.pk-stat { background: var(--surface); padding: 12px 14px; }
.pk-stat .l { color: var(--muted); font-size: var(--fs-caption); }
.pk-stat .v { font-size: var(--fs-heading); font-weight: 500; margin-top: 4px; letter-spacing: -0.01em; }
.pk-stat .n { color: var(--muted); font-size: var(--fs-caption); }
.pk-sec { margin-top: 22px; }
.pk-sec > .tray-l { margin-bottom: 6px; font-size: var(--fs-label); }
.pk-sec .person { padding: 7px 10px; font-size: var(--fs-body); }
.pk-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.pk-foot .link-out { height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--text); font-size: var(--fs-body); }
.pk-foot .btn.quiet { border-color: var(--line-strong); color: var(--text); }
.pk-keys { margin: 18px 0 0; font-size: var(--fs-caption); color: var(--muted); }
@media (max-width: 860px) { .peek { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 75vh; } .pk-keys { display: none; } }
@media (prefers-reduced-motion: reduce) { .peek { animation: none; } }

/* ---------- phones: each filing is a two-line card ---------- */
@media (max-width: 600px) {
  .tr, .compact .tr { grid-template-columns: minmax(0, 1fr) auto; }
  .tray-b > .tr:not(.th) { padding-top: 10px; padding-bottom: 10px; }
  .tr.th { display: none; }
}

/* ---------- company profile, second pass ----------
   A compact identity row, left-aligned like every other page, with the actions on the right. */
.prof-top { padding-bottom: 28px; }
.prof-head { flex-direction: row; align-items: flex-start; text-align: left; gap: 16px; margin-top: 14px; }
.prof-head .mono.lg { width: 52px; height: 52px; font-size: 22px; margin: 0; }
.prof-id { flex: 1; min-width: 0; }
.prof-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prof-head h1 { max-width: none; }
.prof-head .meta-line { justify-content: flex-start; font-size: var(--fs-body); gap: 0; }
.meta-line .dot-sep { margin: 0 8px; color: var(--faint); }
.prof-head .speed-line { margin-top: 6px; color: var(--muted); }
.prof-head .prof-acts { margin-top: 4px; justify-content: flex-end; flex: none; }
/* How much of the offering has sold. */
.fill { display: block; height: 4px; border-radius: 999px; background: var(--chart-mark); margin-top: 8px; max-width: 180px; overflow: hidden; }
.fill i { display: block; height: 100%; border-radius: 999px; background: var(--chart-emph); }
/* Funding history: a bar per filing, so the raises read as a shape over time. */
.tr.hist { grid-template-columns: 110px 56px 96px minmax(0, 1fr) 96px 110px 90px; }
.hist-bar { height: 8px; border-radius: 999px; background: var(--chart-track); overflow: hidden; }
.hist-bar i { display: block; height: 100%; border-radius: 999px; background: var(--chart-mark-hover); }
.tr.hist:first-of-type + .tr.hist .hist-bar i { background: var(--chart-emph); }
@media (max-width: 860px) {
  .prof-head { flex-wrap: wrap; }
  .prof-head .prof-acts { width: 100%; justify-content: flex-start; }
  .stats.strip { flex-wrap: wrap; row-gap: 16px; }
  .stats.strip .stat { flex: 1 1 40%; }
  .stats.strip .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .tr.hist { grid-template-columns: 84px 44px minmax(0, 1fr) auto; }
}

/* Secondary text set from markup. */
.muted { color: var(--muted); }

/* Late filing: a fact, shown as a small orange mark and a number of days. */
.late { display: inline-flex; align-items: center; gap: 6px; }
.late-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--attn); flex: none; }
.stat-v .late-dot { width: 7px; height: 7px; }
.pk-tags .late, .prof-name .late, .card-m .late { font-size: var(--fs-label); color: var(--text-2); }

/* ---------- company marks ----------
   Initials on a neutral rounded square: square means a company, circle means a person (the
   account avatar). Radius and type scale with the mark, so two letters stay legible. */
.mono { width: 24px; height: 24px; border-radius: 7px; background: var(--surface-on); color: var(--text-2); font-family: var(--sans); font-style: normal; font-weight: 600; font-size: 10px; letter-spacing: 0.01em; border: 0; }
.mono.xs { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; }
.mono.sm { width: 22px; height: 22px; border-radius: 6px; font-size: 9.5px; }
.tr .co .mono { width: 30px; height: 30px; border-radius: 8px; font-size: 11px; }
.mono.lg, .prof-head .mono.lg { font-family: var(--sans); font-style: normal; font-weight: 600; background: var(--surface-on); border: 0; color: var(--text-2); }
.mono.lg { width: 44px; height: 44px; border-radius: 12px; font-size: 16px; }
.prof-head .mono.lg { width: 52px; height: 52px; border-radius: 14px; font-size: 19px; }
.nav a.ent .mono { width: 22px; height: 22px; border-radius: 6px; font-size: 9.5px; }

/* ---------- review pass, 29 September ---------- */

/* One content column on every screen, so the left edge never moves between pages. */
.main, .main[data-screen] { --col: 1200px; }

/* Motion: every surface leaves the way it came. Entrances ease out; exits ease in and are
   shorter. The toast keeps its centring inside the keyframes, so it no longer jumps. */
.toast { animation: toast-in .18s cubic-bezier(.2,.8,.2,1); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast.leaving { animation: toast-out .12s cubic-bezier(.4,0,1,1) forwards; }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, 4px); } }
.peek.leaving { animation: peek-out .16s cubic-bezier(.4,0,1,1) forwards; pointer-events: none; }
@keyframes peek-out { to { opacity: 0; transform: translateX(12px); } }
.leaving .scrim { animation: fade-out .12s cubic-bezier(.4,0,1,1) forwards; }
.leaving .palette { animation: palette-out .12s cubic-bezier(.4,0,1,1) forwards; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes palette-out { to { opacity: 0; transform: scale(.98); } }
/* Menus grow out of the button that opened them. */
.dd-pop { transform-origin: top left; animation: grow .14s cubic-bezier(.2,.8,.2,1); }
.dd.compact .dd-pop { transform-origin: top right; }
.pop { transform-origin: top right; animation: grow .14s cubic-bezier(.2,.8,.2,1); }
.pop.up { transform-origin: bottom left; }
@keyframes grow { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
/* Ease-out for anything answering the user. */
.btn { transition: background-color .12s ease-out, border-color .12s ease-out, transform .1s ease-out; }
.dd-btn svg, .nav-later summary svg { transition-timing-function: ease-out; }
/* On phones the peek is a bottom sheet, so it rises from the bottom and sinks back. */
@media (max-width: 860px) {
  .peek { animation-name: peek-up; }
  .peek.leaving { animation-name: peek-down; }
  @keyframes peek-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  @keyframes peek-down { to { opacity: 0; transform: translateY(24px); } }
}
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.leaving, .peek.leaving, .leaving .scrim, .leaving .palette, .dd-pop, .pop, .scrim { animation: none; }
  .dd-btn svg, .nav-later summary svg { transition: none; }
}

/* Yours is blue: the Watching button, and watched rows' bookmarks. Hover says what a click does. */
.btn.mine { background: var(--you-soft); border-color: var(--you-edge); color: var(--you-ink); box-shadow: none; }
.btn.mine:hover { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.btn.mine .off-l { display: none; }
.btn.mine:hover .on-l, .btn.mine:focus-visible .on-l { display: none; }
.btn.mine:hover .off-l, .btn.mine:focus-visible .off-l { display: inline; }
.prof-acts .btn.mine, .pk-foot .btn.mine { border-color: var(--you-edge); color: var(--you-ink); }
.row-icon.on { color: var(--you); }

/* The top bar always names the page; company tabs follow after a divider. */
.tabs-sep { width: 1px; height: 18px; background: var(--line-strong); margin: 0 4px; flex: none; }
.tabs .tabs-page { flex: none; align-self: center; }
.tab button { color: var(--muted); }

/* The held reason sits right under the name in the peek, where the pill is. */
.reasons.pk-held { margin: 14px 0 0; }

/* Type: letter-spacing depends on size. Small text opens up, titles tighten. */
body { letter-spacing: 0; }
.tr, .btn, .nav a, .field, .dd-btn, .sub { letter-spacing: -0.006em; }
.chip, .kbd, .co-s, .stat-n, .tray-m, .note-foot, .cap, .side-note { letter-spacing: 0.01em; }

/* Higher contrast when the viewer asks for it. */
@media (prefers-contrast: more) {
  :root:not([data-theme="dark"]) { --line: #BDBDBD; --line-strong: #8A8A8A; --muted: #4F4F4F; --text-2: #333333; --faint: #767676; }
  :root[data-theme="dark"] { --line: #555555; --line-strong: #777777; --muted: #B0B0B0; --faint: #8E8E8E; }
}
.fill i { background: var(--chart-line); }
/* The body is a grid (sidebar + panel), so anything appended to it must sit outside the flow,
   or it becomes a grid row and squashes the app. */
.palette-root { position: fixed; inset: 0; z-index: 70; }
.palette-root.leaving { pointer-events: none; }

/* ---------- Watchlist in the sidebar: one item, its companies nested under it ---------- */
.nav-kids { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 17px; padding-left: 9px; border-left: 1px solid var(--line-strong); }
.nav-kids a.ent { height: 32px; padding: 0 8px; }
.nav-kids a.add { height: 30px; padding: 0 8px; }
.phone-only { display: none; }

/* ---------- phones: one bar on top, three destinations at the bottom ----------
   The top bar holds the brand, search and the account menu (which also carries Demo/Product
   and Settings). Signals, Watchlist and Review queue become a bottom tab bar. The company tab
   strip is a desktop aid and is hidden, so the page title is the first thing under the bar. */
@media (max-width: 860px) {
  .side { flex-wrap: nowrap; height: 52px; padding: 0 12px; gap: 6px; }
  .side-top { flex: 1; }
  .search-trigger { flex: none; width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 10px; box-shadow: none; }
  .search-trigger span { display: none; }
  .side-foot .mode-switch, .side-foot #nav-foot, .side-bar .pill-btn { display: none !important; }
  .side-foot, .side-bar { padding: 0; margin: 0; }
  .phone-only { display: block; padding: 4px 4px 0; }
  .menu-mode { display: flex; width: 100%; margin-bottom: 4px; }
  .menu-mode button { flex: 1; }
  .tabs-bar { display: none; }
  .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; order: 0; width: auto;
    flex-direction: row; justify-content: space-around; gap: 0; overflow: visible;
    background: var(--canvas); border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .nav > a { flex: 1; flex-direction: column; justify-content: center; gap: 2px; height: 48px; padding: 0 4px; font-size: 11px; position: relative; border-radius: 10px; }
  .nav > a.on { background: var(--surface-on); }
  .nav > a svg { width: 20px; height: 20px; }
  .nav > a .n { position: absolute; top: 3px; left: calc(50% + 6px); margin: 0; font-size: 10px; line-height: 16px; min-width: 16px; padding: 0 4px; border-radius: 999px; background: var(--surface-on); text-align: center; }
  .nav > a .n.c-attn { background: var(--attn-soft); }
  .nav-kids, .nav .nav-later { display: none; }
  .main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .peek { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 860px) {
  .tr.hist { grid-template-columns: 112px 28px minmax(0, 1fr) auto; }
  .phone-only { padding: 0; }
  .menu-mode { margin: 4px 0; }
}

/* ---------- peek backdrop ----------
   While the peek is open, the app behind it softens and dims so attention stays on the panel.
   Clicking the backdrop closes it. It fades with the panel, and becomes a plain dim layer when
   the viewer asks for less transparency. */
.peek-veil {
  position: fixed; inset: 0; z-index: 54; cursor: default;
  background: color-mix(in srgb, var(--canvas) 38%, transparent);
  -webkit-backdrop-filter: blur(6px) saturate(.9); backdrop-filter: blur(6px) saturate(.9);
  animation: veil-in .2s cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="dark"] .peek-veil { background: color-mix(in srgb, #000 35%, transparent); }
@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }
.peek-veil.leaving { animation: fade-out .16s cubic-bezier(.4,0,1,1) forwards; pointer-events: none; }
@media (prefers-reduced-transparency: reduce) {
  .peek-veil { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--text) 22%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .peek-veil, .peek-veil.leaving { animation: none; } }

/* Share of the offering sold: a number and a short grey bar. */
.pct { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.pct-n { min-width: 34px; text-align: right; color: var(--text-2); }
.pct-bar { width: 36px; height: 4px; border-radius: 999px; background: var(--chart-track); overflow: hidden; }
.pct-bar i { display: block; height: 100%; border-radius: 999px; background: var(--chart-line); }
.pct.none { color: var(--muted); }
/* The panel takes focus when it opens so screen readers announce it; it is a container, not
   a control, so it shows no ring. Its buttons and links keep theirs. */
.peek:focus, .peek:focus-visible { outline: none; }

/* Type follows the browser's text size: the scale in rem (16px root). */
:root { --fs-caption: 0.75rem; --fs-label: 0.8125rem; --fs-body: 0.875rem; --fs-heading: 1rem; --fs-figure: 1.25rem; --fs-title: 1.75rem; }
body { font-size: var(--fs-body); }

/* ---------- Signals header cards ----------
   Four light cards: a label on top; the figure bottom-left with its context on the same line,
   right-aligned. Links in the context get a dotted underline, like the reference. */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 14px 16px 14px; min-height: 108px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.kpi-l { color: var(--muted); font-size: var(--fs-body); }
.kpi-b { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.kpi-b b { font-weight: 500; font-size: var(--fs-figure); letter-spacing: -0.01em; white-space: nowrap; }
.kpi-of { color: var(--muted); font-weight: 400; font-size: var(--fs-body); letter-spacing: 0; }
.kpi-r { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-label); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kpi-r > span { overflow: hidden; text-overflow: ellipsis; }
.kpi-link, .kpi-r a { color: var(--text-2); text-decoration: underline dotted; text-decoration-color: var(--faint); text-underline-offset: 3px; overflow: hidden; text-overflow: ellipsis; }
.kpi-link:hover, .kpi-r a:hover { color: var(--text); text-decoration-color: currentColor; }
.main[data-screen="signals"] .sec:has(.kpis) { padding-bottom: 28px; }
@media (max-width: 1180px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .kpi { min-height: 92px; padding: 12px 14px; } .kpis { gap: 8px; } }
/* The company page shows only the cards it has data for, so the row fits their number. */
.kpis[style*="--n"] { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.kpi-r .pct-bar { width: 32px; flex: none; }
@media (max-width: 1180px) { .kpis[style*="--n"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The toast is centred with left: 50%, which alone would cap its width at half the screen and
   wrap it into a column on phones. It sizes to its text, up to the screen width. */
.toast { width: max-content; max-width: calc(100vw - 32px); }
.toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* On phones the peek is a bottom sheet; a toast at the bottom would cover its buttons, so while
   the sheet is open the toast shows at the top instead. */
@media (max-width: 860px) { body:has(#peek) .toast { bottom: auto; top: 60px; } }

/* ---------- people named in a filing ----------
   A round avatar for a person, the square company mark for a firm; the name; roles as small
   neutral tags on the right. No zebra: thin dividers keep a short list calm. */
.people { display: flex; flex-direction: column; }
.person { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 0; }
.person:nth-child(even) { background: none; }
.person + .person { border-top: 1px solid var(--line); }
.person .mono.sm { width: 26px; height: 26px; border-radius: 7px; font-size: 10px; }
.avatar-p { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-alt); border: 1px solid var(--line); color: var(--text-2); font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; }
.person-t { min-width: 0; display: flex; flex-direction: column; }
.person-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body); color: var(--text); }
.person-note { font-size: var(--fs-caption); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roles { display: inline-flex; gap: 4px; flex: none; }
.role { font-size: var(--fs-caption); line-height: 20px; padding: 0 7px; border-radius: 6px; background: var(--surface-hover); color: var(--text-2); white-space: nowrap; }
.pk-sec .people { border: 1px solid var(--line); border-radius: 12px; padding: 2px 4px; }
.pk-sec .person { padding: 9px 8px; }
.pk-n { margin-left: 6px; font-size: var(--fs-caption); color: var(--muted); }
.tray-b > .people { padding: 0 2px; }

/* ---------- alerts: one component for every notice ----------
   Icon, title, optional lines, optional action. The variant is the colour role:
   attn (a person should look), info (neutral), you (yours), danger (destructive). */
.alert { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 2px 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-alt); color: var(--text-2); font-size: var(--fs-body); }
.alert-i { display: flex; padding-top: 1px; color: var(--muted); }
.alert-i svg { width: 16px; height: 16px; }
.alert-t { font-weight: 500; color: var(--text); }
.alert-l { margin: 3px 0 0; padding: 0; list-style: none; }
.alert-l li { color: var(--text-2); line-height: 1.45; }
.alert-l li + li { margin-top: 3px; }
.alert-a { align-self: center; }
.alert.attn { background: var(--attn-soft); border-color: var(--attn-edge); }
.alert.attn .alert-i { color: var(--attn); }
.alert.attn .alert-t { color: var(--attn-ink); }
.alert.you { background: var(--you-soft); border-color: var(--you-edge); }
.alert.you .alert-i, .alert.you .alert-t { color: var(--you-ink); }
.alert.danger { background: color-mix(in srgb, var(--danger) 7%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 30%, var(--surface)); }
.alert.danger .alert-i, .alert.danger .alert-t { color: var(--danger); }
.alert .btn.sm { background: var(--surface); }
.alert.later-note { margin: 0 0 24px; }
#peek .alert { margin-top: 14px; }
.rv-body .alert { margin-top: 18px; }
@media (max-width: 600px) { .alert { grid-template-columns: 18px minmax(0, 1fr); } .alert-a { grid-column: 2; justify-self: start; margin-top: 8px; } }

/* System font: SF adjusts its own tracking by size, so body and small text keep the face's
   defaults rather than the hand-tuned spacing the Inter build used. */
.tr, .btn, .nav a, .field, .dd-btn, .sub, .chip, .kbd, .co-s, .stat-n, .tray-m, .note-foot, .cap, .side-note { letter-spacing: normal; }

/* ---------- funding history, third pass ----------
   Filed date with the first sale beneath; the amount; a bar whose length is the round's offering
   (to scale across rounds) and whose fill is what sold; the offering; the filing link. */
.tr.hist { grid-template-columns: 150px 96px minmax(0, 1fr) 110px 90px; min-height: 56px; }
.tray-b > .tr.hist:not(.th):nth-child(even) { background: none; }
.tray-b > .tr.hist:not(.th) + .tr.hist { border-top: 1px solid var(--line); border-radius: 0; }
.h-when { display: flex; flex-direction: column; min-width: 0; }
.h-date { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.h-date .chip { height: 18px; font-size: 11px; }
.h-sub { font-size: var(--fs-caption); color: var(--muted); }
.h-sold { font-weight: 500; }
.h-bar { height: 10px; display: flex; align-items: center; }
.h-track { display: block; height: 8px; border-radius: 999px; background: var(--chart-track); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; min-width: 6px; }
.h-track.open { background: repeating-linear-gradient(135deg, var(--chart-track) 0 4px, transparent 4px 8px); }
.h-track i { display: block; height: 100%; border-radius: 999px; background: var(--chart-mark-hover); }
.tr.hist.latest .h-track i { background: var(--chart-line); }
@media (max-width: 860px) { .tr.hist { grid-template-columns: minmax(0, 1fr) auto auto; } }
/* On narrow screens a card's context goes under its figure instead of being clipped beside it. */
@media (max-width: 860px) {
  .kpi-b { flex-direction: column; align-items: flex-start; gap: 2px; }
  .kpi-r { white-space: normal; }
}

/* ---------- blue: the solid button ----------
   The brand blue is the fill of primary buttons (Watch, Add, Keep as company). Everywhere else
   the interface stays ink and grey; small "yours" touches (Watching, bookmarks, active filters,
   switches, focus) keep their tint. */
.btn.primary { background: var(--you-fill); border-color: var(--you-fill); color: #fff; }
.btn.primary:hover { background: var(--you-hover); border-color: var(--you-hover); }
.btn.primary .kbd { border-color: rgba(255,255,255,.45); color: #fff; }

/* ---------- welcome (see the WELCOME STORYBOARD in app.js) ----------
   Stages add classes s1..s5; each rule keys off the stage that reveals it. Springs are CSS
   linear() curves: a soft one (no overshoot) for text, a lively one for cards. */
:root {
  --wl-soft: linear(0, .09 4%, .32 11%, .62 21%, .82 31%, .93 42%, .985 56%, 1);
  --wl-lively: linear(0, .17 5%, .52 12%, .86 21%, 1.04 30%, 1.07 36%, 1.03 47%, .995 62%, 1);
}
body.wl-open { overflow: hidden; }
.wl { position: fixed; inset: 0; z-index: 90; overflow-y: auto; color: #fff; font-family: var(--sans); }
.wl-sky { position: fixed; left: 0; right: 0; top: 0; height: 240vh;
  background: linear-gradient(180deg, #1238C9 0%, #1D5FE3 13.3%, #3A8EF2 26.7%, #7DBDF7 36.7%, #BFE0FA 41.6%, #EEF3F9 41.7%, var(--canvas) 56%);
  transition: transform 1100ms cubic-bezier(.65, 0, .25, 1); }
.wl-land { position: absolute; left: 0; right: 0; top: 70vh; width: 100%; height: 30vh; object-fit: cover; object-position: center top; pointer-events: none;
  opacity: 0; transform: translateY(24px); transition: opacity 900ms ease, transform 1200ms var(--wl-soft); }
.wl-land.glow { filter: blur(30px) saturate(1.15); }
.wl.s1 .wl-land { opacity: 1; transform: none; }
.wl.s1 .wl-land.glow { opacity: .55; }
.wl-sky::after { content: ""; position: absolute; left: 0; right: 0; top: 84vh; height: 16.2vh; background: linear-gradient(180deg, transparent, #EEF3F9 96%); }
.wl-skip { position: fixed; top: 18px; right: 20px; z-index: 2; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff;
  border-radius: 999px; padding: 6px 14px; font: 500 13px var(--sans); cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wl-skip:hover { background: rgba(255,255,255,.22); }
.wl-col { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; padding: 9vh 24px 22vh; display: flex; flex-direction: column; align-items: center; text-align: center; }

/* 0ms: the O settles */
.wl-mark { width: 56px; height: 56px; border-radius: 15px; background: #fff; color: #1238C9; display: grid; place-items: center;
  font: italic 500 34px/1 var(--serif); box-shadow: 0 18px 40px -16px rgba(8,30,120,.6);
  opacity: 0; transform: scale(.6); transition: opacity 400ms ease, transform 700ms var(--wl-lively); }
.wl.s1 .wl-mark { opacity: 1; transform: none; }

/* 300ms: the welcome words rise and sharpen, one by one */
.wl-title { margin: 26px 0 0; font: italic 500 clamp(40px, 6vw, 68px)/1.05 var(--serif); letter-spacing: -0.02em; text-shadow: 0 2px 30px rgba(8,30,120,.25); }
.wl-title span { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(14px);
  transition: opacity 600ms ease, filter 700ms ease, transform 800ms var(--wl-soft); transition-delay: calc(var(--i) * 90ms); }
.wl.s2 .wl-title span { opacity: 1; filter: none; transform: none; }

/* 1050ms: the line beneath */
.wl-sub { margin: 14px 0 0; font-size: 18px; color: rgba(255,255,255,.88); opacity: 0; transform: translateY(8px); transition: opacity 600ms ease, transform 700ms var(--wl-soft); }
.wl.s3 .wl-sub { opacity: 1; transform: none; }

/* 1700ms: the day's filings drift in around the counter */
.wl-stage { position: relative; width: 100%; margin-top: 30px; min-height: 420px; }
.wl-field { position: absolute; inset: -10px -60px; pointer-events: none; transition: filter 700ms ease, opacity 700ms ease; }
.wl-chip { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%) scale(.85); display: inline-flex; gap: 8px; align-items: baseline;
  white-space: nowrap; max-width: 210px; overflow: hidden; text-overflow: ellipsis;
  padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 13px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0;
  transition: opacity 500ms ease, transform 900ms var(--wl-lively); transition-delay: calc(var(--i) * 45ms); }
.wl-chip span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wl-chip b { font-weight: 600; flex: none; }
.wl.s4 .wl-chip { opacity: 1; transform: translate(-50%, -50%); animation: wl-drift 7s ease-in-out var(--d) infinite alternate; }
@keyframes wl-drift { to { translate: 0 -6px; } }
.wl-count { position: relative; padding-top: 130px; text-shadow: 0 2px 24px rgba(8,30,120,.35); opacity: 0; transform: scale(.94); transition: opacity 500ms ease, transform 800ms var(--wl-lively); }
.wl-count b { display: block; font: 600 clamp(64px, 10vw, 112px)/1 var(--sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.wl-count span { display: block; margin-top: 6px; font-size: 18px; color: rgba(255,255,255,.9); }
.wl.s4 .wl-count { opacity: 1; transform: none; }

/* 3800ms: the field steps back; nine cards lift in */
.wl.s5 .wl-field { filter: blur(6px); opacity: .22; }
.wl.s5 .wl-count { opacity: 0; transform: translateY(-16px) scale(.96); pointer-events: none; }
.wl-picks { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.wl.s5 .wl-picks { pointer-events: auto; }
.wl-ask { margin: 0 0 16px; font-size: 18px; font-weight: 500; opacity: 0; transition: opacity 500ms ease; }
.wl-ask span { margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.18); font-size: 14px; font-variant-numeric: tabular-nums; }
.wl.s5 .wl-ask { opacity: 1; }
.wl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wl-card, .wl-card * { text-align: left; }
.wl-card { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 40px 12px 12px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.94); color: #171717; cursor: pointer; font: inherit;
  box-shadow: 0 18px 40px -24px rgba(8,30,120,.55);
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity 400ms ease, transform 700ms var(--wl-lively), box-shadow 200ms ease, border-color 200ms ease;
  transition-delay: calc(var(--i) * 50ms), calc(var(--i) * 50ms), 0ms, 0ms; }
.wl.s5 .wl-card { opacity: 1; transform: none; }
.wl.s5 .wl-card:hover { transform: translateY(-2px); box-shadow: 0 24px 46px -24px rgba(8,30,120,.65); transition-delay: 0ms; }
.wl.s5 .wl-card:active { transform: scale(.98); transition-delay: 0ms; }
.wl-card .mono { width: 30px; height: 30px; border-radius: 8px; font-size: 11px; }
.wl-ct { display: flex; flex-direction: column; min-width: 0; }
.wl-cn { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-cs { font-size: 12px; color: #686868; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-amt { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.wl-bm { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #A8A8A8; display: flex; transition: color 150ms ease, transform 300ms var(--wl-lively); }
.wl-card.on { border-color: #1F6FEB; box-shadow: 0 0 0 3px rgba(31,111,235,.25), 0 24px 46px -24px rgba(8,30,120,.65); transform: translateY(-3px); transition-delay: 0ms; }
.wl-card.on .wl-bm { color: #1F6FEB; transform: translateY(-50%) scale(1.15); }
.wl-card.nope { animation: wl-nope 360ms ease; }
@keyframes wl-nope { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }
.wl-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; opacity: 0; transition: opacity 500ms ease 450ms; }
.wl.s5 .wl-foot { opacity: 1; }
.wl-promise { margin: 0; font-size: 15px; color: rgba(255,255,255,.92); text-align: left; }
.wl-go.btn.primary { height: 44px; padding: 0 22px; font-size: 15px; border-radius: 12px; background: #fff; border-color: #fff; color: #1238C9; box-shadow: 0 16px 34px -16px rgba(8,30,120,.6); }
.wl-go.btn.primary:hover { background: #EEF3F9; border-color: #EEF3F9; }

/* "Open Oskett": the descent. The camera pans down through the horizon into mist the colour of
   the app's canvas; then the welcome dissolves and the app settles in. Picks fly (spring in JS). */
.wl.leaving .wl-sky { transform: translateY(-140vh); }
.wl.leaving .wl-col, .wl.leaving .wl-skip { opacity: 0; transform: translateY(-60px); transition: opacity 320ms ease, transform 900ms cubic-bezier(.65, 0, .25, 1); }
.wl.leaving { pointer-events: none; }
.wl.dissolve { opacity: 0; transition: opacity 400ms ease; }
body.wl-arrive .side, body.wl-arrive .stage { animation: wl-arrive 700ms var(--wl-soft) both; }
body.wl-arrive .stage { animation-delay: 60ms; }
@keyframes wl-arrive { from { opacity: 0; transform: translateY(12px); } }
.wl-flyer { position: fixed; left: 0; top: 0; z-index: 95; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 10px;
  background: #fff; color: #171717; box-shadow: 0 16px 40px -14px rgba(8,30,120,.5); font-size: 14px; font-weight: 500; overflow: hidden; white-space: nowrap; pointer-events: none; }
.wl-flyer .mono { flex: none; }
.nav a.ent.landed { animation: wl-land 700ms ease; }
@keyframes wl-land { 0% { background: var(--you-soft); } 100% { background: transparent; } }

@media (max-width: 860px) {
  .wl-grid { grid-template-columns: minmax(0, 1fr); }
  .wl-stage { min-height: 300px; }
  /* Phones: the filings wrap in a short band above the number instead of a ring around it. */
  .wl-field { position: relative; inset: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-height: 72px; overflow: hidden; margin: 0 -8px; }
  .wl-chip { position: static; transform: scale(.85); max-width: calc(50% - 4px); }
  .wl.s4 .wl-chip { transform: none; }
  .wl.s5 .wl-field { display: none; }
  .wl-count { padding-top: 18px; }
  .wl-foot { flex-direction: column; align-items: stretch; }
  .wl-picks { position: relative; }
  .wl.s5 .wl-count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wl *, .wl-sky { transition: opacity 200ms ease !important; animation: none !important; transform: none !important; filter: none !important; }
  .wl.s5 .wl-field { opacity: .22; }
}

/* ---------- Signals table head: one row ----------
   The totals sit in the first column of the column heads; the day is a light divider label. */
.sig-top { display: none; }
.sig-head .tr.th { border-top: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; min-height: 44px; padding: 0 22px; }
.sig-head .tr.th .count-line { margin: 0; color: var(--muted); font-size: var(--fs-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig-head .tr.th .count-line b { color: var(--text); font-weight: 500; }
.cl-sep { margin: 0 6px; color: var(--faint); }
.day-h { padding: 12px 14px 6px; gap: 10px; font-size: var(--fs-caption); font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0.01em; }
.day-h .day-n { font-size: var(--fs-caption); }
.sig-body > .day-h:first-child { padding-top: 4px; }

/* ---------- Signals table, fourth pass: one white card ----------
   No grey tray: the column names are the card's quiet top row, directly over their values; days
   are tinted section rows inside the same card; the count lives in the toolbar beside Sort. */
.toolbar-end { display: flex; align-items: center; gap: 14px; }
.toolbar-end .count-line { margin: 0; font-size: var(--fs-label); color: var(--muted); white-space: nowrap; }
.toolbar-end .count-line b { color: var(--text); font-weight: 500; }
.sig-head { padding-bottom: 0; }
.sig-head .tr.th { background: var(--surface); border: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0;
  min-height: 38px; padding: 0 17px; font-size: var(--fs-caption); color: var(--muted); letter-spacing: 0.01em; }
.sig-body { background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r) var(--r); padding: 4px; }
.sig-body > .tray-b { border: 0; box-shadow: none; padding: 0; background: none; border-radius: 0; }
.day-h { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 2px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--surface-alt);
  font-size: var(--fs-label); font-weight: 400; color: var(--muted); }
.day-h:first-child { margin-top: 0; }
.day-h b { color: var(--text); font-weight: 500; }
.day-h .day-n { margin-left: 0; }
.day-h .day-n::before { content: "·"; margin-right: 8px; color: var(--faint); }
/* the zebra restarts in each day, so no stripe lines up with a section row */
.sig-body .tray-b > .tr:not(.th):nth-child(even) { background: none; }
.sig-body .tray-b > .tr:not(.th) + .tr:not(.th) { box-shadow: inset 0 1px 0 var(--line); border-radius: 0; }
.sig-body .tray-b > .tr:not(.th):hover { background: var(--surface-hover); border-radius: var(--r-sm); box-shadow: none; }
.sig-body .tray-b > .tr.sel, .sig-body .tray-b > .tr.peeked { border-radius: var(--r-sm); box-shadow: none; }
.sig-body .tray-b > .tr:not(.th):hover + .tr, .sig-body .tray-b > .tr.peeked + .tr, .sig-body .tray-b > .day-h + .tr { box-shadow: none; }
.sig-body .more { border-top: 1px solid var(--line); margin-top: 4px; }
@media (max-width: 860px) { .toolbar-end .count-line { display: none; } }

/* ---------- since your last visit; watched companies first ---------- */
.since { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: -8px 0 16px; font-size: var(--fs-body); color: var(--text-2); }
.since b { color: var(--text); font-weight: 500; }
.since .fresh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--you); flex: none; }
.since-w { color: var(--text-2); }
.since-w a { color: var(--text); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.since-w a:hover { text-decoration-color: currentColor; }
/* a watched row: its mark carries a thin blue ring, so pinned rows read as yours */
.tr .co.mine .mono { box-shadow: 0 0 0 1.5px var(--you); background: var(--you-soft); color: var(--you-ink); }