/* ──────────────────────────────────────────────────────────────
 * Signal Synth — signal scoreboard
 * Design tokens + components. One file, organized top-to-bottom:
 *   1. Tokens + reset
 *   2. Typography helpers
 *   3. Masthead / wordmark / waveform
 *   4. Category tabs + content-type rail
 *   5. Explainer strip + toolbar
 *   6. Table + signature + signal cell + album art
 *   7. Slide-over modal
 *   8. Profile page
 *   9. Archive page
 *  10. MCP / developers page
 *  11. Command palette
 *  12. Footer
 *  13. Keyframes
 * ────────────────────────────────────────────────────────────── */

/* 1. Tokens + reset ────────────────────────────────────────── */
:root {
  --ink: #141210;
  --ink-2: #2a2620;
  --muted: #8a8273;
  --muted-2: #b6ae9e;
  --paper: #f7f3ec;
  --paper-2: #efe9dc;
  --rule: #ddd6c7;
  --rule-2: #c9c0ac;
  --accent: oklch(0.66 0.14 55);
  --accent-ink: oklch(0.48 0.14 55);
  --accent-soft: oklch(0.92 0.05 70);
  --good: oklch(0.55 0.12 145);
  --bad:  oklch(0.52 0.16 25);

  --serif: 'Newsreader', 'GT Sectra', Georgia, serif;
  --sans:  'IBM Plex Sans', 'Söhne', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', 'Berkeley Mono', ui-monospace, monospace;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
}

:root.dark {
  --ink: #ede6d6;
  --ink-2: #cfc7b4;
  --muted: #8a8273;
  --muted-2: #6c6556;
  --paper: #0f0e0c;
  --paper-2: #18150f;
  --rule: #2c2821;
  --rule-2: #3d382e;
  --accent-soft: oklch(0.25 0.04 70);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
/* Reserve space for the vertical scrollbar even when content is short.
 * Without this, switching between a scroll-needed view (Scoreboard) and a
 * short view (e.g. the Developers page) causes the viewport to widen/narrow
 * by the scrollbar's width, jittering every fixed-width element horizontally.
 * `scrollbar-gutter: stable` holds the gutter always. */
html { scrollbar-gutter: stable; }
body { font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
::selection { background: var(--accent); color: var(--paper); }

/* Ink focus ring — replaces the browser's default orange for keyboard nav.
 * Only renders via :focus-visible so mouse clicks don't flash it. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}
button:focus-visible { outline-offset: 3px; }
.search-field:focus-within { border-color: var(--ink); }
.search-field input:focus-visible { outline: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* 2. Typography helpers ────────────────────────────────────── */
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.mono  { font-family: var(--mono); font-feature-settings: "zero", "ss01"; }
.caps  { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; color: var(--muted); }
.num   { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.hidden { display: none !important; }

/* 3. Masthead / wordmark / waveform ────────────────────────── */
.app-shell { width: 100%; margin: 0; }

/* Masthead is transparent overall — only the two content bars paint paper, so
 * the waveform underneath can fade into whatever scrolls behind it. */
.masthead {
  background: transparent;
  position: sticky; top: 0; z-index: 40;
  overflow: hidden;
}
.masthead-utility {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 6px 24px; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--paper);
}
.masthead-utility .util-left { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.live-indicator { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.live-dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--good);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent);
  animation: ss-live-pulse 2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes ss-live-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--good) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.masthead-utility .util-right { display: flex; gap: 14px; align-items: center; }
.masthead-utility button { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.masthead-utility button:hover { color: var(--ink); }
.kbd {
  border: 1px solid var(--rule-2); padding: 1px 5px; border-radius: 2px;
  font-family: var(--mono); font-size: 10px; color: var(--ink);
}
.social-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; color: var(--muted);
}
.social-icon-btn:hover { color: var(--ink); }
.social-icon-btn svg { width: 14px; height: 14px; }

.masthead-main {
  padding: 18px 24px 24px;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end;
  background: var(--paper);
}
@media (max-width: 900px) { .masthead-main { grid-template-columns: 1fr; } }
.wordmark {
  display: inline-flex; align-items: baseline; gap: 0;
  font-family: var(--mono); letter-spacing: 0.02em; font-weight: 600;
}
.wordmark .slash { font-size: 13px; color: var(--accent-ink); margin: 0 2px; font-weight: 400; }
.wordmark .left  { font-size: 18px; }
.wordmark .right { font-size: 18px; font-weight: 300; }
.brand-title {
  font-family: var(--serif); font-size: clamp(28px, 5vw, 44px);
  line-height: 0.95; margin: 6px 0 0; letter-spacing: -0.02em; font-weight: 500;
}
.brand-sub { margin-top: 6px; }

.nav-primary { display: flex; gap: 20px; align-items: center; padding-bottom: 6px; flex-wrap: wrap; }
.nav-primary button {
  font-family: var(--serif); font-size: 17px;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  color: var(--muted);
}
.nav-primary button.active { border-bottom-color: var(--ink); color: var(--ink); }
.nav-primary button:hover { text-decoration: none; color: var(--ink); }
.nav-primary .inbox-link { position: relative; display: inline-flex; align-items: baseline; gap: 6px; }
.inbox-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 9px; font-weight: 600; letter-spacing: 0;
  min-width: 18px; height: 16px; padding: 0 5px; border-radius: 999px;
  background: transparent; color: transparent;
  transition: background 160ms ease, color 160ms ease;
}
.inbox-badge.has-unread {
  background: var(--accent-ink);
  color: var(--paper);
}

.auth-slot { display: inline-flex; align-items: center; }
.auth-slot a { color: var(--muted); }
.auth-slot a:hover { color: var(--ink); }
.auth-menu { position: relative; }
.auth-menu > summary { list-style: none; cursor: pointer; color: var(--muted); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.auth-menu > summary::-webkit-details-marker { display: none; }
.auth-menu > summary:hover { color: var(--ink); }
.auth-menu .auth-dropdown {
  position: absolute; top: 110%; right: 0; min-width: 140px;
  background: var(--paper); border: 1px solid var(--ink);
  padding: 6px 0; z-index: 60; box-shadow: 4px 4px 0 var(--rule);
}
.auth-menu .auth-dropdown a { display: block; padding: 6px 12px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.auth-menu .auth-dropdown a:hover { color: var(--ink); background: var(--paper-2); text-decoration: none; }

/* Fresh-snapshot flash — a single ochre shimmer sweeps across the masthead's
 * bottom edge when the background poll lands a new snapshot. Subtle
 * acknowledgement without stealing attention. */
.masthead::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(to right,
    transparent 0%,
    color-mix(in srgb, var(--accent) 70%, transparent) 30%,
    color-mix(in srgb, var(--accent) 70%, transparent) 70%,
    transparent 100%);
  opacity: 0; transform: translateX(-100%);
  pointer-events: none;
}
.masthead.fresh::after { animation: ss-fresh 1800ms cubic-bezier(.4,0,.2,1) both; }
@keyframes ss-fresh {
  0%   { opacity: 0;    transform: translateX(-100%); }
  20%  { opacity: 0.9; }
  100% { opacity: 0;    transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .masthead.fresh::after { animation: none; opacity: 0; }
}

/* Waveform border — acts as the masthead divider. `currentColor` in the SVG paths
 * picks up `color` here: dark grey on light paper, cream on dark paper.
 *
 * The bottom 50% of the SVG is faded to transparent via mask-image so the waves
 * dissolve into the content instead of sitting on a hard rule. */
.waveform-dock {
  display: block; width: 100%; height: 36px;
  color: var(--ink);
  background: transparent;
  opacity: 0.85;
  /* Pull the wave upward so its top rides into the masthead's paper and only
   * the lower crest (the already-fading half) protrudes into the content. */
  margin-top: -18px;
  /* Bottom half of the SVG strokes fade out so the waves dissolve into the
   * content beneath instead of sitting on a hard rule. */
  mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .waveform-dock { opacity: 0.55; }
}

/* 4. Category tabs + content-type rail ─────────────────────── */
.cat-tabs {
  display: flex; gap: 6px; padding: 10px 24px;
  border-bottom: 1px solid var(--rule); overflow-x: auto;
  align-items: center;
}
.cat-tab {
  padding: 2px 10px; border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 12px; line-height: 1.25; white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 0;
}
.cat-tab:hover { border-color: var(--rule-2); }
.cat-tab.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cat-tab .cnt { opacity: 0.6; font-family: var(--mono); font-size: 10px; }
/* Drop the "0" badge on empty pills and mute their colour to signal "nothing here". */
.cat-tab.empty { color: var(--muted-2); }
.cat-tab.empty .cnt { display: none; }
.cat-tab.empty:hover { border-color: var(--rule); }

.content-rail {
  display: flex; gap: 0; padding: 10px 24px; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--paper-2); overflow-x: auto;
}
.content-rail .rail-label { color: var(--muted); margin-right: 18px; flex-shrink: 0; }
.content-rail button {
  display: inline-flex; align-items: baseline; gap: 8px; margin-right: 20px; flex-shrink: 0;
  color: var(--muted); cursor: pointer; opacity: 1;
}
.content-rail button.active { color: var(--ink); }
.content-rail button.active .label { border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
.content-rail button:disabled { color: var(--muted-2); cursor: not-allowed; opacity: 0.75; }
.content-rail .dot-live { color: var(--good); font-size: 10px; }
.content-rail .dot-soon { color: var(--muted-2); font-size: 10px; }

/* 5. Explainer strip + toolbar ─────────────────────────────── */
.explainer { border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.explainer .head {
  padding: 14px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.explainer .head .lede {
  font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; margin-top: 2px; font-weight: 400;
}
.explainer .legend { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.explainer .legend span {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.06em;
}
.explainer .legend span .chip { width: 10px; height: 10px; display: inline-block; }
.explainer .rubric-toggle {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 6px 10px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  transition: background 120ms ease, color 120ms ease;
}
.explainer .rubric-toggle:hover { background: var(--ink); color: var(--paper); }
/* Accordion wrapper — grid-template-rows trick lets us transition height to
 * auto-content size. Keeps the rubric as-is when open, collapses smoothly. */
.rubric-accordion {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(.4,0,.2,1);
}
.rubric-accordion.open { grid-template-rows: 1fr; }
.rubric-accordion > .rubric-inner { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) { .rubric-accordion { transition: none; } }

.explainer .rubric {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.explainer .rubric .cell { padding: 14px 16px; border-right: 1px solid var(--rule); }
.explainer .rubric .cell:last-child { border-right: 0; }
.explainer .rubric .cell h4 {
  font-family: var(--serif); font-size: 17px; margin: 2px 0 4px; letter-spacing: -0.005em; font-weight: 400;
}
.explainer .rubric .cell .desc { font-size: 12px; color: var(--muted); line-height: 1.4; }
.explainer .foot {
  padding: 10px 24px; font-size: 12px; color: var(--muted);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.explainer .foot b { color: var(--ink); }
@media (max-width: 900px) {
  .explainer .rubric { grid-template-columns: repeat(2, 1fr); }
  .explainer .rubric .cell:nth-child(2n) { border-right: 0; }
}

.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px; border-bottom: 1px solid var(--rule); flex-wrap: wrap;
}
.toolbar .left { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; flex: 1; min-width: 0; }
.toolbar .right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 720px) {
  .toolbar { padding: 12px 16px; }
  .toolbar .left, .toolbar .right { width: 100%; }
  .search-field { min-width: 0; width: 100%; flex: 1; }
}

.search-field {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  border: 1px solid var(--rule); background: var(--paper); min-width: 260px;
}
.search-field svg { color: var(--muted); flex-shrink: 0; }
.search-field input {
  border: 0; outline: none; background: transparent; flex: 1;
  font-family: var(--sans); font-size: 13px;
}
.search-field .kbd { margin-left: auto; }

.seg {
  display: inline-flex; border: 1px solid var(--rule); flex-shrink: 0;
}
.seg button {
  padding: 5px 10px; font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  border-left: 1px solid var(--rule);
}
.seg button:first-child { border-left: 0; }
.seg button.active { background: var(--ink); color: var(--paper); }

.btn-pill {
  padding: 6px 12px; border: 1px solid var(--rule);
  background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn-pill.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-pill:hover { border-color: var(--ink); }

.btn-ink {
  padding: 8px 14px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-ink:hover { background: var(--ink-2); text-decoration: none; }

.btn-ghost {
  padding: 8px 14px; border: 1px solid var(--rule); background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-ghost:hover { border-color: var(--ink); text-decoration: none; }

/* 6. Table + signature + signal cell + album art ──────────── */
.board-grid { display: grid; grid-template-columns: 1fr; gap: 0; }

.table-wrap { overflow-x: auto; min-width: 0; }
.ss-table {
  width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 13px;
}
.ss-table thead tr {
  color: var(--muted); text-transform: uppercase;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
}
.ss-table th {
  padding: 14px 24px; text-align: left; font-weight: 400;
  border-bottom: 1px solid var(--rule); white-space: nowrap; user-select: none;
}
.ss-table th.sortable { cursor: pointer; }
.ss-table th.active { color: var(--ink); }
.ss-table th .sort-arrow { margin-left: 6px; opacity: 0.7; }
.ss-table th.right { text-align: right; }
.ss-table th.center { text-align: center; }

.ss-table tbody .ss-row {
  border-top: 1px solid var(--rule);
  animation: ss-row-in 520ms cubic-bezier(.22,.8,.2,1) both;
  transition: background 160ms ease, box-shadow 160ms ease;
  cursor: pointer;
  box-shadow: inset 3px 0 0 0 transparent;
}
.ss-table tbody .ss-row:hover {
  background: color-mix(in srgb, var(--accent-soft) 35%, transparent);
  /* An editorial left-edge accent on hover — a single 3px ochre stroke. */
  box-shadow: inset 3px 0 0 0 var(--accent);
}
.ss-table tbody .ss-row.listened {
  background: color-mix(in srgb, var(--paper-2) 60%, transparent);
}
.ss-table tbody td {
  padding: 18px 24px; vertical-align: middle;
}
/* Comfort density (default) — a bit more generous than the JS-rendered 36px
 * default, so the album art gets its own presence on desktop rows. */
@media (min-width: 721px) {
  .ss-table tbody:not(.compact) .album-art-wrap,
  .ss-table tbody:not(.compact) .album-art-wrap img,
  .ss-table tbody:not(.compact) .album-art-wrap svg { width: 48px !important; height: 48px !important; }
}
/* Compact density — tighter vertical rhythm, smaller art, shorter title.
 * The point of compact is to fit more rows per screen; make the difference
 * from comfort obvious enough that the segmented control feels responsive. */
.ss-table tbody.compact td { padding: 8px 24px; }
.ss-table tbody.compact .album-art-wrap,
.ss-table tbody.compact .album-art-wrap img,
.ss-table tbody.compact .album-art-wrap svg { width: 28px !important; height: 28px !important; }
.ss-table tbody.compact .episode-title { font-size: 15px; line-height: 1.2; }
.ss-table tbody.compact .episode-meta { font-size: 11px; margin-top: 2px; }
.ss-table tbody.compact .episode-cell { gap: 10px; }
.ss-table tbody.compact .row-btn { padding: 4px 8px; font-size: 10px; }

@media (max-width: 720px) {
  /* Mobile row order: art + title/show → signature bars → signal score, far
   * right. Actions cell (Detail / Listen) is dropped — tapping the row still
   * opens the sheet, which carries the Listen button. */
  .ss-table thead { display: none; }
  .ss-table tbody td.aired,
  .ss-table tbody td.actions-cell { display: none; }
  .ss-table tbody td { padding: 12px 6px; vertical-align: middle; }
  .ss-table tbody .ss-row td:first-child { padding-left: 14px; }
  .ss-table tbody .ss-row td.center { padding: 12px 8px; }
  .ss-table tbody .ss-row td.signal-cell { padding: 12px 14px 12px 6px; }

  /* Episode cell: tighter gap, smaller art, two-line title, condensed meta. */
  .episode-cell { gap: 10px; }
  .album-art-wrap,
  .album-art-wrap img,
  .album-art-wrap svg { width: 36px !important; height: 36px !important; }
  .episode-title { font-size: 15px; line-height: 1.25; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; }
  .episode-meta { gap: 8px; flex-wrap: nowrap; overflow: hidden; margin-top: 2px; }
  .episode-meta .dur,
  .episode-meta .cat-pill,
  .episode-meta .verdict-chip,
  .episode-meta .hype-flag { display: none; }
  .episode-meta .show { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

  /* Signal score: number-only on mobile — drop the inline progress bar that
   * rides next to it on desktop, keep just the colored digits at the far
   * right edge. Specificity bump (.ss-table prefix) so this wins over the
   * base .signal-num-bar .bar rule that appears later in the cascade. */
  .ss-table .signal-num-bar .bar { display: none; }
  .ss-table .signal-num-bar .n { font-size: 20px; min-width: 0; }

  .mark-btn { display: none; }
}
@media (max-width: 720px) {
  .masthead-utility { padding: 6px 14px; gap: 8px; flex-wrap: nowrap; }
  .masthead-utility .util-left { gap: 10px; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
  .masthead-utility .util-right { gap: 12px; flex-wrap: nowrap; }
  /* Strip mobile chrome: utility bar keeps only the Live indicator + theme;
   * ⌘K, MCP shortcut, social icons, and the auth slot move off-screen because
   * the bottom tab bar now owns primary navigation. */
  .masthead-utility #util-date { display: none; }
  .masthead-utility #cmdk-open { display: none; }
  .masthead-utility button[data-nav="mcp"] { display: none; }
  .masthead-utility #social-twitter,
  .masthead-utility #social-discord { display: none; }
  .masthead-utility .auth-slot { display: none; }
  /* Brand goes horizontal — wordmark and "The Signal Scoreboard" sit on one
   * baseline instead of stacking. Wraps if the viewport is extremely narrow. */
  .masthead-main { padding: 12px 14px 8px; grid-template-columns: 1fr; gap: 8px; }
  .masthead-main > button[data-nav="board"] {
    display: flex !important; align-items: baseline; gap: 10px; flex-wrap: wrap; width: 100%;
  }
  .brand-title { display: none; }
  .brand-sub { display: none; }
  /* Desktop primary nav hidden on mobile — replaced by the bottom tab bar. */
  .nav-primary { display: none; }
  .cat-tabs { padding: 8px 16px; }
  .content-rail { padding: 8px 16px; }
  .explainer .head { padding: 12px 16px; gap: 10px; }
  .explainer .head .lede { font-size: 18px; }
  .explainer .foot { padding: 10px 16px; }
  .table-foot { padding: 12px 16px; }
  .footer { padding: 24px 16px 40px; }
  .footer .legal { flex-direction: column; align-items: flex-start; gap: 8px; }
  .profile-header, .profile-section, .mcp-hero, .archive-masthead {
    padding-left: 16px !important; padding-right: 16px !important;
  }
  .profile-tabs, .mcp-tools .detail { padding-left: 16px !important; padding-right: 16px !important; }
  .sheet-hero .main { padding: 20px 18px 18px; }
  .sheet-hero h1 { font-size: 28px; }
  .sheet-hero .signal { padding: 20px 18px; }
  .sheet-hero .signal .big .n { font-size: 48px; }
  .sheet-body { padding: 18px 18px 32px; }
  /* Transcript: 56/110/1fr becomes two rows — timestamp + speaker inline, then line. */
  .sheet-body .transcript .line { grid-template-columns: auto auto; grid-template-areas: 't speaker' 'l l'; gap: 4px 10px; }
  .sheet-body .transcript .t { grid-area: t; }
  .sheet-body .transcript .speaker { grid-area: speaker; justify-self: start; }
  .sheet-body .transcript .l { grid-area: l; }
  .sheet-body .meth-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  /* Very narrow — keep the wordmark readable. */
  .wordmark .left, .wordmark .right { font-size: 16px; }
}

/* Mobile bottom tab bar ────────────────────────────────────────
 * Desktop-hidden by default. At ≤720px it becomes the primary nav and the
 * body gets bottom padding so the last row of the scoreboard isn't buried
 * under it. Safe-area inset is respected for iOS devices with a home bar. */
.mobile-tabbar { display: none; }
@media (max-width: 720px) {
  .mobile-tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    z-index: 50;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -1px 0 var(--rule);
  }
  .mobile-tabbar button {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 9px 0 8px;
    color: var(--muted);
    font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
    min-height: 54px;
    transition: color 140ms ease;
  }
  .mobile-tabbar button svg { width: 22px; height: 22px; }
  .mobile-tabbar button.active { color: var(--ink); }
  .mobile-tabbar button.active::before {
    content: ''; position: absolute; top: 0; left: 24%; right: 24%; height: 2px;
    background: var(--accent);
  }
  .mobile-tabbar .tabbar-badge {
    position: absolute; top: 6px; right: calc(50% - 18px);
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--accent-ink);
    opacity: 0; transition: opacity 160ms ease;
  }
  .mobile-tabbar .tabbar-badge.has-unread { opacity: 1; }

  /* Body padding so fixed tab bar doesn't cover the footer's legal row. */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)); }

  /* Kill the in-board density + insights controls and the insights side
   * panel on mobile. The user can still hit the Insights tab for the
   * explainer page; the live panel doesn't fit on a phone. */
  .toolbar .right { display: none; }
}
.ss-table tbody td.right { text-align: right; }
.ss-table tbody td.center { text-align: center; }
.ss-table tbody td.aired {
  font-family: var(--mono); color: var(--muted); font-size: 12px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.episode-cell { display: flex; gap: 14px; align-items: center; min-width: 0; }
.album-art-wrap { position: relative; flex-shrink: 0; }
.album-art-wrap .listened-overlay {
  position: absolute; inset: 0; background: color-mix(in srgb, var(--paper) 55%, transparent);
  display: grid; place-items: center; color: var(--ink); font-size: 14px;
}
.episode-text { min-width: 0; flex: 1; }
.episode-title {
  font-family: var(--serif); font-size: 17px; line-height: 1.25; letter-spacing: -0.005em;
  color: var(--ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  font-weight: 400;
}
.ss-row.listened .episode-title { color: var(--muted); }
.episode-meta {
  margin-top: 4px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  color: var(--muted); font-size: 12px;
}
.episode-meta .show {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px; color: var(--muted);
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
button.show:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.episode-meta .dur { font-family: var(--mono); font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.cat-pill {
  border: 1px solid var(--rule-2); padding: 2px 6px;
  font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted);
}
.hype-flag {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--bad); font-size: 10px;
}

.mark-btn {
  width: 22px; height: 22px; flex-shrink: 0; border: 1px solid var(--rule-2);
  background: transparent; color: var(--muted);
  font-family: var(--mono); font-size: 11px; line-height: 1;
  opacity: 0; transition: opacity 160ms ease;
}
.ss-row:hover .mark-btn, .ss-row.listened .mark-btn { opacity: 1; }
.ss-row.listened .mark-btn { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mark-btn:hover { border-color: var(--ink); color: var(--ink); }

.signature-svg { display: inline-block; vertical-align: middle; }
/* Bars wake up from the baseline on appear. transform-box: fill-box makes
 * transform-origin resolve relative to each rect instead of the SVG origin. */
.signature-svg rect.bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: ss-bar-wake 560ms cubic-bezier(.25,.9,.25,1) both;
}
.signature-svg rect.bar:nth-child(2) { animation-delay: 30ms; }
.signature-svg rect.bar:nth-child(4) { animation-delay: 60ms; }
.signature-svg rect.bar:nth-child(6) { animation-delay: 90ms; }
.signature-svg rect.bar:nth-child(8) { animation-delay: 120ms; }
.signature-svg rect.bar:nth-child(10) { animation-delay: 150ms; }
.signature-svg rect.bar:nth-child(12) { animation-delay: 180ms; }
@keyframes ss-bar-wake { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.metric-mini { display: inline-block; vertical-align: middle; }
.metric-mini .bar { width: 56px; height: 6px; background: var(--rule); position: relative; }
.metric-mini .bar > i { position: absolute; inset: 0; transition: width 360ms cubic-bezier(.4,0,.2,1); }
.metric-mini .n { display: block; font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 3px; text-align: right; font-variant-numeric: tabular-nums; }

.signal-big {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
}
.signal-num-bar {
  display: inline-flex; align-items: center; gap: 8px;
}
.signal-num-bar .n {
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 600;
  min-width: 30px; text-align: right;
}
.signal-num-bar .bar { display: inline-block; width: 54px; height: 6px; background: var(--rule); position: relative; }
.signal-num-bar .bar > i { position: absolute; inset: 0; transition: width 360ms cubic-bezier(.4,0,.2,1); }

/* Row actions column */
.ss-table tbody td.actions-cell { padding-left: 8px; padding-right: 16px; }
.row-actions {
  display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; flex-wrap: nowrap;
}
/* Icon-only toggle buttons (save, mark-listened) that sit next to the
 * primary Listen pill. Muted when off, accent when on. Star fills solid
 * when saved; circle becomes a checkmark when listened. */
.row-icon {
  width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); background: transparent; color: var(--muted);
  border-radius: 2px;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
  cursor: pointer;
  flex-shrink: 0;
}
.row-icon:hover { color: var(--ink); border-color: var(--rule-2); }
.row-icon.on.saved    { color: var(--accent-ink); border-color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.row-icon.on.listened { color: var(--good);       border-color: var(--good);       background: color-mix(in srgb, var(--good)   18%, transparent); }
.row-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  background: transparent; color: var(--ink);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  white-space: nowrap; line-height: 1;
}
.row-btn:hover { border-color: var(--ink); text-decoration: none; }
.row-btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.row-btn.primary:hover { background: var(--ink-2); }
.row-btn.disabled { color: var(--muted-2); cursor: not-allowed; border-style: dashed; }
.row-btn .arrow { display: inline-block; transition: transform 180ms cubic-bezier(.3,.8,.3,1); }
.row-btn.primary:hover .arrow { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { .row-btn.primary:hover .arrow { transform: none; } }
@media (max-width: 720px) {
  .row-actions { justify-content: flex-start; }
  .row-btn { padding: 4px 8px; }
}

.table-foot {
  padding: 14px 24px; color: var(--muted);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
}

/* 7. Slide-over modal ──────────────────────────────────────── */
.ss-scrim {
  position: fixed; inset: 0; background: rgba(20,18,16,0.45); z-index: 110;
  display: flex; justify-content: flex-end;
  animation: ss-scrim-in 220ms ease-out both;
}
.ss-sheet {
  width: min(960px, 92vw); height: 100%; background: var(--paper); overflow-y: auto;
  border-left: 1px solid var(--ink); box-shadow: -8px 0 0 var(--rule);
  animation: ss-sheet-in 380ms cubic-bezier(.2,.85,.2,1) both;
}
.sheet-header {
  position: sticky; top: 0; background: var(--paper); z-index: 2;
  border-bottom: 1px solid var(--rule);
  padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.sheet-header .slug { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-header .actions { display: flex; gap: 12px; flex-shrink: 0; }
.sheet-header .actions button.close { border: 1px solid var(--ink); padding: 4px 10px; white-space: nowrap; color: var(--ink); }
.sheet-header .actions button:hover { color: var(--ink); }

.sheet-hero {
  display: grid; grid-template-columns: 1fr 280px; gap: 0; border-bottom: 1px solid var(--rule);
}
@media (max-width: 760px) { .sheet-hero { grid-template-columns: 1fr; } }
.sheet-hero .main { padding: 28px 28px 24px; }
.sheet-hero .main .topline { display: flex; gap: 14px; align-items: flex-start; }
.sheet-hero h1 { font-family: var(--serif); font-size: 38px; line-height: 1.05; margin: 6px 0 10px; letter-spacing: -0.02em; text-wrap: balance; font-weight: 500; }
.sheet-hero .byline { font-size: 15px; color: var(--ink-2); }
.sheet-hero .cta-row { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.sheet-hero .bestfor { margin-top: 18px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sheet-hero .bestfor .chip { border: 1px solid var(--rule-2); padding: 2px 8px; font-size: 12px; font-family: var(--mono); }

.sheet-hero .signal {
  border-left: 1px solid var(--rule); padding: 28px 22px; background: var(--paper-2);
}
@media (max-width: 760px) { .sheet-hero .signal { border-left: 0; border-top: 1px solid var(--rule); } }
.sheet-hero .signal .big {
  display: flex; align-items: baseline; gap: 8px;
}
.sheet-hero .signal .big .n {
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 64px; line-height: 0.9; font-weight: 600;
}
.sheet-hero .signal .band { margin-top: 2px; }
.sheet-hero .signal .confidence { font-size: 11px; color: var(--muted); margin-top: 4px; }
.sheet-hero .signal .metrics { margin-top: 16px; display: grid; gap: 10px; }
.sheet-hero .signal .metric-row { display: grid; gap: 4px; }
.sheet-hero .signal .metric-row .head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sheet-hero .signal .metric-row .head .label { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-hero .signal .metric-row .head .val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.sheet-hero .signal .metric-row .track { height: 3px; background: var(--rule); position: relative; }
.sheet-hero .signal .metric-row .track > i { position: absolute; inset: 0; }
.sheet-hero .signal .hype-row { border-top: 1px solid var(--rule); padding-top: 6px; display: flex; justify-content: space-between; }
.sheet-hero .signal .hype-row .label, .sheet-hero .signal .hype-row .val { color: var(--bad); }

.sheet-tabs {
  padding: 0 28px; border-bottom: 1px solid var(--rule);
  display: flex; gap: 24px; overflow-x: auto;
  position: relative;
}
.sheet-tabs button {
  padding: 12px 0; font-family: var(--serif); font-size: 16px; white-space: nowrap;
  color: var(--muted); font-weight: 400;
  transition: color 200ms ease;
}
.sheet-tabs button.active { color: var(--ink); }
/* Shared sliding underline. Position is set by JS via --tx and --tw CSS vars. */
.sheet-tabs .tab-indicator,
.profile-tabs .tab-indicator {
  position: absolute; bottom: -1px; left: 0; height: 2px;
  width: var(--tw, 0); transform: translateX(var(--tx, 0));
  background: var(--ink);
  transition: transform 260ms cubic-bezier(.3,.8,.3,1), width 260ms cubic-bezier(.3,.8,.3,1);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .sheet-tabs .tab-indicator, .profile-tabs .tab-indicator { transition: none; }
}

.sheet-body { padding: 24px 28px 40px; }
.sheet-body .prose { font-family: var(--serif); font-size: 19px; line-height: 1.5; text-wrap: pretty; margin-top: 8px; color: var(--ink); }
/* Editorial drop cap — pulls the first letter of the summary out like a
 * magazine lede. Ochre tint ties it to the accent system. */
.sheet-body .prose.drop-cap::first-letter {
  font-family: var(--serif); font-weight: 500;
  font-size: 3.6em; line-height: 0.85;
  float: left; margin: 4px 10px -2px 0;
  color: var(--accent-ink);
}
.sheet-body .takeaways { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sheet-body .takeaways li { display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: baseline; }
.sheet-body .takeaways .num { color: var(--muted); }
.sheet-body .takeaways .t { font-family: var(--serif); font-size: 16px; line-height: 1.4; }
.sheet-body .takeaways-big li { grid-template-columns: 48px 1fr; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.sheet-body .takeaways-big .mark { font-family: var(--serif); font-size: 26px; color: var(--accent-ink); }
.sheet-body .takeaways-big .t { font-size: 20px; }

.sheet-body .transcript { margin-top: 12px; display: grid; gap: 12px; }
.sheet-body .transcript .line { display: grid; grid-template-columns: 56px 110px 1fr; gap: 12px; }
.sheet-body .transcript .t { font-family: var(--mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sheet-body .transcript .speaker { font-family: var(--mono); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }
.sheet-body .transcript .l { font-family: var(--serif); font-size: 16px; line-height: 1.5; }
.sheet-body .transcript .end, .sheet-body .end { padding: 18px 0; border-top: 1px solid var(--rule); text-align: center; color: var(--muted); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.sheet-body mark { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--ink); padding: 0 2px; }

.sheet-body .meth-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8px; }
.sheet-body .meth-grid .card { border: 1px solid var(--rule); padding: 12px; }
.sheet-body .meth-grid ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 3px; font-family: var(--mono); font-size: 12px; }

/* Per-dimension evidence block — one row per scoring dimension, with a
 * verbatim transcript quote under the score so readers can audit why
 * the model scored what it did. Falls back to a "no quote" line for
 * older scored rows missing score_evidence. */
.sheet-body .meth-evidence {
  display: grid; gap: 14px; margin-top: 6px;
  padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.sheet-body .meth-evidence-row { display: grid; gap: 4px; }
.sheet-body .meth-evidence-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--sans);
}
.sheet-body .meth-label { font-size: 14px; color: var(--ink); font-weight: 500; }
.sheet-body .meth-score {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 600;
}
.sheet-body .meth-quote {
  font-family: var(--serif); font-size: 15px; line-height: 1.45;
  color: var(--ink-2); font-style: italic;
  margin: 2px 0 0; padding: 2px 0 2px 12px;
  border-left: 2px solid var(--accent);
}
.sheet-body .meth-noquote {
  font-family: var(--mono); font-size: 11px; color: var(--muted-2);
  font-style: italic;
}

.sheet-body .related {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule);
}
.sheet-body .related .grid { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .sheet-body .related .grid { grid-template-columns: 1fr; } }
.sheet-body .related .card {
  text-align: left; border: 1px solid var(--rule); padding: 12px; background: var(--paper-2);
  display: flex; gap: 10px; align-items: flex-start; min-width: 0;
}
.sheet-body .related .card .text { min-width: 0; }
.sheet-body .related .card .t { font-family: var(--serif); font-size: 15px; line-height: 1.25; font-weight: 400; }
.sheet-body .related .card .sub { color: var(--muted); font-size: 11px; margin-top: 2px; }
.sheet-body .related .card .sig { font-family: var(--mono); font-size: 14px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* 8. Profile page ─────────────────────────────────────────── */
.profile-header {
  padding: 36px 32px; border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: 1fr auto; gap: 24px;
}
@media (max-width: 900px) { .profile-header { grid-template-columns: 1fr; } }
.profile-header .who { display: flex; gap: 20px; align-items: center; }
.profile-header .avatar {
  width: 72px; height: 72px; border: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 32px; background: var(--paper-2);
}
.profile-header h1 { font-family: var(--serif); font-size: 42px; margin: 4px 0 2px; letter-spacing: -0.02em; font-weight: 500; }
.profile-header .meta { color: var(--muted); }
.profile-header .stats {
  display: grid; grid-template-columns: repeat(3, auto); gap: 28px; align-items: center;
}
.stat .big { font-family: var(--serif); font-size: 36px; line-height: 1; font-weight: 500; }
.stat .unit { color: var(--muted); font-size: 12px; margin-left: 6px; }

.profile-tabs {
  padding: 0 32px; border-bottom: 1px solid var(--rule);
  display: flex; gap: 28px; overflow-x: auto;
  position: relative;
}
.profile-tabs button {
  padding: 14px 0; font-family: var(--serif); font-size: 17px;
  color: var(--muted); white-space: nowrap; font-weight: 400;
  transition: color 200ms ease;
}
.profile-tabs button.active { color: var(--ink); }

.profile-section { padding: 24px 32px; }
.profile-section .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; gap: 16px; flex-wrap: wrap; }
.profile-section .head .lede { font-family: var(--serif); font-size: 26px; margin-top: 2px; font-weight: 400; }

.history-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.history-list li {
  display: grid; grid-template-columns: 48px 1fr 100px 60px 40px; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
@media (max-width: 700px) {
  .history-list li { grid-template-columns: 32px 1fr 60px; }
  .history-list li .aired-col, .history-list li .remove-col { display: none; }
}
.history-list li button.title { font-family: var(--serif); font-size: 17px; text-align: left; font-weight: 400; }
.history-list li .meta { color: var(--muted); font-size: 12px; }

.weights-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .weights-layout { grid-template-columns: 1fr; } }
.weights-layout .right { border-left: 1px solid var(--rule); padding-left: 40px; }
@media (max-width: 900px) { .weights-layout .right { border-left: 0; padding-left: 0; padding-top: 24px; border-top: 1px solid var(--rule); } }
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.presets button {
  padding: 6px 12px; border: 1px solid var(--rule); background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
}
.presets button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.presets button:disabled { color: var(--muted); cursor: default; }
.weights-rows { margin-top: 24px; display: grid; gap: 16px; }
.weights-rows .row .head { display: flex; justify-content: space-between; align-items: baseline; }
.weights-rows .row .dim-title { font-family: var(--serif); font-size: 17px; }
.weights-rows .row .dim-desc { font-size: 11px; color: var(--muted); }
.weights-rows .row .v { font-family: var(--mono); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.weights-rows .row input[type=range] { width: 100%; accent-color: var(--ink); margin-top: 4px; }

.preview-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.preview-list li {
  display: grid; grid-template-columns: 32px 1fr 60px 60px; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--rule); align-items: baseline;
}
.preview-list li button.title { font-family: var(--serif); font-size: 15px; text-align: left; line-height: 1.25; font-weight: 400; }
.preview-list .sig { font-family: var(--mono); font-size: 14px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.preview-list .delta { font-family: var(--mono); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }

.digest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 900px) { .digest-grid { grid-template-columns: 1fr; } }
.digest-grid .right { border-left: 1px solid var(--rule); padding-left: 32px; }
@media (max-width: 900px) { .digest-grid .right { border-left: 0; padding-left: 0; padding-top: 24px; border-top: 1px solid var(--rule); } }
.toggle-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.toggle {
  width: 40px; height: 22px; border: 1px solid var(--ink); background: transparent; position: relative; border-radius: 0; cursor: pointer;
}
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--ink);
  transition: left 120ms ease, background 120ms ease;
}
.toggle.on { background: var(--ink); }
.toggle.on::after { left: 20px; background: var(--paper); }

.signed-out {
  max-width: 520px; margin: 64px auto; padding: 48px 24px; text-align: center;
}

/* Follow tab — per-category episode lists built from the user's Spotify
 * subscriptions. Scored first, unscored at the bottom, within each category. */
.follow-cat { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.follow-cat:last-child { border-bottom: 0; }
.follow-cat-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 6px;
}
.follow-eps { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 0; }
.follow-ep {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--rule);
  cursor: pointer;
  transition: background 120ms ease;
}
.follow-ep:hover { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.follow-ep.unscored { opacity: 0.65; }
.follow-ep-text { min-width: 0; }
.follow-ep-title {
  font-family: var(--serif); font-size: 15px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.follow-ep-meta { color: var(--muted); font-size: 11px; margin-top: 2px; }
.follow-ep-signal {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 18px; font-weight: 600; text-align: right; min-width: 40px;
}
.follow-ep-signal.unscored { color: var(--muted-2); font-size: 14px; font-weight: 400; }

/* Insights page — dashboard-style aggregates of the corpus this week. */
.insight-grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
@media (max-width: 720px) { .insight-grid-3 { grid-template-columns: 1fr; } }
.insight-stat { }
.insight-stat-big {
  font-family: var(--serif); font-size: 36px; line-height: 1; margin-top: 4px;
  font-weight: 500; color: var(--ink);
}
.insight-stat-sub { color: var(--muted); font-size: 13px; margin-top: 6px; }

.trending-list { display: grid; gap: 10px; margin-top: 10px; }
.trending-row {
  display: grid; grid-template-columns: 32px 1fr 140px 48px 48px; gap: 12px;
  align-items: center; padding: 4px 0;
}
.trending-rank {
  font-family: var(--serif); font-size: 20px; color: var(--muted); font-weight: 400;
}
.trending-topic {
  font-family: var(--serif); font-size: 16px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-transform: capitalize;
}
.trending-bar {
  height: 6px; background: var(--rule); position: relative;
}
.trending-bar > i {
  position: absolute; inset: 0; background: var(--accent);
  transition: width 360ms cubic-bezier(.4,0,.2,1);
}
.trending-count {
  font-family: var(--mono); font-size: 14px; font-weight: 600; text-align: right;
}
.trending-delta {
  font-family: var(--mono); font-size: 11px; text-align: right; font-weight: 500;
}
@media (max-width: 720px) {
  .trending-row { grid-template-columns: 28px 1fr 40px 40px; }
  .trending-bar { display: none; }
}

.cat-leaderboard { display: grid; gap: 6px; margin-top: 10px; }
.cat-leader-row {
  display: grid; grid-template-columns: 140px 72px 1fr 48px 48px; gap: 12px;
  align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule);
  cursor: pointer; transition: background 120ms ease;
}
.cat-leader-row:hover { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.cat-leader-name { font-size: 16px; color: var(--ink); }
.cat-leader-count { color: var(--muted); font-size: 11px; font-family: var(--mono); }
.cat-leader-bar { height: 6px; background: var(--rule); position: relative; }
.cat-leader-bar > i { position: absolute; inset: 0; transition: width 360ms; }
.cat-leader-signal {
  font-family: var(--mono); font-size: 16px; font-weight: 600; text-align: right;
}
.cat-leader-delta { font-family: var(--mono); font-size: 11px; text-align: right; font-weight: 500; }
@media (max-width: 720px) {
  .cat-leader-row { grid-template-columns: 1fr 44px 44px; }
  .cat-leader-count, .cat-leader-bar { display: none; }
}

.distribution {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px;
  margin-top: 10px;
}
.dist-col { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.dist-bar {
  width: 100%; height: 140px;
  background: var(--paper-2);
  display: flex; align-items: flex-end;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.dist-bar > i {
  width: 100%; display: block;
  min-height: 2px;
  transition: height 360ms cubic-bezier(.4,0,.2,1);
}
.dist-label {
  font-family: var(--mono); font-size: 10px; color: var(--muted-2);
  text-align: center;
}
.dist-count {
  font-family: var(--mono); font-size: 11px; color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: center; font-weight: 600;
}
.dist-col:has(.dist-bar > i[style*="height: 0"]) .dist-count { color: var(--muted-2); font-weight: 400; }

.extremes-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  margin-top: 10px;
}
@media (max-width: 720px) { .extremes-grid { grid-template-columns: 1fr; } }
.extreme-block { }
.extreme-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 0; }
.extreme-list li {
  display: grid; grid-template-columns: 1fr 60px; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--rule);
  cursor: pointer; transition: background 120ms ease;
}
.extreme-list li:hover { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.extreme-title {
  font-family: var(--serif); font-size: 14px; line-height: 1.25; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.extreme-meta { color: var(--muted); font-size: 11px; margin-top: 2px; font-family: var(--mono); }
.extreme-metric { text-align: right; }
.extreme-metric .num {
  font-family: var(--mono); font-size: 18px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.extreme-metric-sub {
  display: block; font-family: var(--mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
  margin-top: 2px;
}

/* Spotify link card — a distinct green accent so it reads as an external
 * provider rather than a native Signal Synth feature. Shows both pre-link
 * (the big "Link Spotify" CTA + explanation) and post-link (account info +
 * show list with match badges) states. */
.spotify-card { border-top: 1px solid var(--rule); }
.spotify-link {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.spotify-copy { flex: 1; min-width: 260px; }
.spotify-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-spotify {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 1px solid #1db954; background: #1db954; color: #fff;
  font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  border-radius: 999px; text-decoration: none; font-weight: 600;
  transition: background 120ms ease, border-color 120ms ease;
}
.btn-spotify:hover { background: #169442; border-color: #169442; text-decoration: none; }
.spotify-shows {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px; margin-top: 18px;
}
.spotify-show {
  padding: 10px 14px; border: 1px solid var(--rule); background: var(--paper-2);
  border-radius: 2px;
}
.spotify-show.matched { border-color: color-mix(in srgb, #1db954 50%, var(--rule)); background: color-mix(in srgb, #1db954 7%, var(--paper)); }
.spotify-show-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.spotify-show-name {
  font-family: var(--serif); font-size: 15px; font-weight: 400; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spotify-show-publisher {
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spotify-show-badge {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 2px 7px; border: 1px solid currentColor; flex-shrink: 0;
}
.spotify-show-badge.matched { color: #1db954; }
.spotify-show-badge.unmatched { color: var(--muted); }

/* Signal Sendouts — profile tab card pair.
 * Two stacked cards (email, podcast). Each has a header row with channel
 * label + last-sent timestamp + a toggle, and a body that dims (via .dim)
 * when the channel is off. Body of the email card carries the 9-category
 * picker; body of the podcast card carries the feed URL + quick-add links. */
.sendout-channels { display: grid; gap: 18px; margin-top: 16px; }
.sendout-channel { border: 1px solid var(--rule); padding: 18px 20px; background: var(--paper); }
.sendout-channel-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.sendout-channel-label { font-family: var(--serif); font-size: 20px; margin-top: 4px; line-height: 1.2; font-weight: 400; }
.sendout-channel-meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--muted); margin-top: 4px;
}
.sendout-channel-body { padding-top: 14px; transition: opacity 160ms ease; }
.sendout-channel-body.dim { opacity: 0.55; }
.sendout-categories { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* Selected = filled with the ochre accent + a solid checkmark puck.
 * Unselected = hollow, with a dashed empty circle.
 * The visual distance between the two states is: color + fill + mark shape.
 * No ambiguity about which is which. */
.sendout-cat {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 8px; border: 1px solid var(--rule-2);
  border-radius: 999px;
  background: var(--paper); color: var(--ink-2);
  font-family: var(--sans); font-size: 13px; font-weight: 400;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  cursor: pointer;
}
.sendout-cat:hover { border-color: var(--ink); background: var(--paper-2); }
.sendout-cat.on {
  background: var(--accent-ink);
  color: var(--paper);
  border-color: var(--accent-ink);
  font-weight: 500;
}
.sendout-cat.on:hover { background: var(--ink); border-color: var(--ink); }
.sendout-cat-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px;
  border: 1.5px solid var(--muted-2);
  background: transparent; color: var(--muted);
  font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1;
  flex-shrink: 0;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.sendout-cat.on .sendout-cat-mark {
  background: var(--paper);
  color: var(--accent-ink);
  border-color: var(--paper);
}
.sendout-cat-label { line-height: 1; }
.sendout-cat-note {
  font-family: var(--sans); font-size: 12px; color: var(--muted);
  margin-top: 4px; line-height: 1.45;
}
.sendout-feed-row {
  display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap;
}
.sendout-feed-url {
  font-family: var(--mono); font-size: 12px; color: var(--ink);
  background: var(--paper-2); padding: 6px 10px; border: 1px solid var(--rule);
  border-radius: 0; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 720px) {
  .sendout-channel { padding: 14px 16px; }
  .sendout-channel-head { flex-direction: column; align-items: stretch; }
  .sendout-channel-head > .toggle { align-self: flex-start; margin-top: 4px; }
}
.signed-out p { color: var(--muted); }

.digest-code {
  margin-top: 10px; padding: 14px; background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
}
.digest-code .comment { color: var(--accent-soft); }

.empty-state {
  padding: 36px 0; text-align: center; color: var(--muted);
}

/* Inbox page ──────────────────────────────────────────────── */
.inbox-section { padding: 20px 24px; border-bottom: 1px solid var(--rule); }
.inbox-section:last-child { border-bottom: 0; }
.inbox-day { margin-top: 14px; }
.inbox-day .day-label {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted-2); margin-bottom: 8px;
}
.inbox-day ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.inbox-day li {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--rule);
  align-items: center; cursor: pointer;
  transition: background 160ms ease;
}
.inbox-day li:first-child { border-top: 0; }
.inbox-day li:hover { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.inbox-day li .title { font-family: var(--serif); font-size: 17px; line-height: 1.25; }
.inbox-day li .meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.inbox-day li .meta .must { color: var(--ink); font-family: var(--mono); text-transform: uppercase; font-size: 10px; font-style: normal; letter-spacing: 0.08em; }
.inbox-day li .signal { font-size: 18px; font-weight: 600; flex-shrink: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .inbox-section { padding: 16px 16px; }
}

/* Hype Watch page ──────────────────────────────────────────────
 * The brand-defining "only ranker that penalizes hype" view. Top 10
 * most overhyped + per-category hype bars. Uses the bad-color (red)
 * accent so a visitor immediately reads "these are the ones to skip". */
.hype-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 0; }
.hype-list li {
  display: grid; grid-template-columns: 36px 40px 1fr auto; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: center;
  cursor: pointer;
  transition: background 160ms ease;
}
.hype-list li:hover { background: color-mix(in srgb, var(--bad) 6%, transparent); }
.hype-list .rank {
  font-family: var(--serif); font-size: 28px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hype-list .text { min-width: 0; }
.hype-list .text .title {
  font-family: var(--serif); font-size: 17px; line-height: 1.25;
  color: var(--ink); font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.hype-list .text .meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.hype-list .hype-metrics {
  text-align: right; display: grid; gap: 2px; justify-items: end;
  min-width: 160px;
}
.hype-list .hype-penalty {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 24px; font-weight: 600; color: var(--bad); line-height: 1;
}
.hype-list .hype-meta {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted);
}
.hype-cat-bars { display: grid; gap: 10px; margin-top: 12px; }
.hype-cat-row {
  display: grid; grid-template-columns: 140px 1fr 48px 70px; gap: 14px;
  align-items: center;
  padding: 6px 0;
}
.hype-cat-label { font-family: var(--serif); font-size: 15px; }
.hype-cat-track { height: 6px; background: var(--rule); position: relative; }
.hype-cat-track > i {
  position: absolute; inset: 0;
  transition: width 360ms cubic-bezier(.4,0,.2,1);
}
.hype-cat-avg { font-size: 14px; text-align: right; font-weight: 600; color: var(--ink); }
.hype-cat-count {
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  text-align: right;
}
@media (max-width: 720px) {
  .hype-list li { grid-template-columns: 26px 32px 1fr auto; gap: 10px; padding: 12px 16px; }
  .hype-list .rank { font-size: 22px; }
  .hype-list .hype-metrics { min-width: 90px; }
  .hype-list .hype-penalty { font-size: 20px; }
  .hype-list .hype-meta { display: none; }
  .hype-cat-row { grid-template-columns: 100px 1fr 40px; padding: 6px 16px; }
  .hype-cat-count { display: none; }
}

/* 9. Archive page ─────────────────────────────────────────── */
.archive-masthead { padding: 28px 32px; border-bottom: 1px solid var(--rule); }
.archive-masthead h1 { font-family: var(--serif); font-size: clamp(28px, 5vw, 46px); margin: 8px 0 4px; letter-spacing: -0.02em; font-weight: 500; }
.archive-masthead .lede { color: var(--muted); font-size: 15px; max-width: 720px; }

.archive-layout { display: grid; grid-template-columns: 240px 1fr; border-bottom: 1px solid var(--rule); min-height: 520px; }
@media (max-width: 900px) { .archive-layout { grid-template-columns: 1fr; } }
.archive-weeks { border-right: 1px solid var(--rule); padding: 16px 0; }
@media (max-width: 900px) { .archive-weeks { border-right: 0; border-bottom: 1px solid var(--rule); } }
.archive-weeks .cap { padding: 0 18px 10px; }
.archive-weeks button {
  width: 100%; text-align: left; padding: 10px 18px;
  border-left: 3px solid transparent; background: transparent;
  display: flex; justify-content: space-between; align-items: center;
}
.archive-weeks button.active { background: var(--paper-2); border-left-color: var(--ink); }
.archive-weeks .id { font-family: var(--mono); font-size: 12px; }
.archive-weeks .rng { font-size: 11px; color: var(--muted); }
.archive-body .head {
  padding: 16px 24px; display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--rule); gap: 16px; flex-wrap: wrap;
}
.archive-body .head .t { font-family: var(--serif); font-size: 30px; letter-spacing: -0.01em; font-weight: 400; }
.archive-body ol { list-style: none; padding: 0; margin: 0; }
.archive-body li {
  display: grid; grid-template-columns: 64px 1fr 110px 90px; gap: 14px;
  padding: 14px 24px; border-bottom: 1px solid var(--rule); align-items: baseline;
}
@media (max-width: 700px) {
  .archive-body li { grid-template-columns: 40px 1fr 60px; }
  .archive-body li .cat-col { display: none; }
}
.archive-body .rank { font-family: var(--serif); font-size: 28px; color: var(--muted); font-weight: 400; }
.archive-body .title { font-family: var(--serif); font-size: 20px; text-align: left; letter-spacing: -0.005em; font-weight: 400; }

/* 10. MCP / Developers page ────────────────────────────────── */
.mcp-hero { padding: 36px 32px; border-bottom: 1px solid var(--rule); }
.mcp-hero .grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 36px; }
@media (max-width: 900px) { .mcp-hero .grid { grid-template-columns: 1fr; } }
.mcp-hero h1 { font-family: var(--serif); font-size: clamp(32px, 5vw, 56px); line-height: 1; margin: 10px 0 14px; letter-spacing: -0.025em; text-wrap: balance; font-weight: 500; }
.mcp-hero .lede { font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 640px; }
.mcp-hero .ctas { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }

/* "Add to…" install dropdown — expands from the Add-to button on the
 * developers hero. Editorial-style list with per-tool install hints on the
 * right; copy-button entries flash a small "Copied" label. */
.install-menu { position: relative; display: inline-block; }
.install-menu > summary {
  list-style: none; cursor: pointer;
  padding: 8px 14px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 120ms ease;
}
.install-menu > summary::-webkit-details-marker,
.install-menu > summary::marker { display: none; content: ''; }
.install-menu > summary:hover { background: var(--ink-2); }
.install-menu > summary .caret { display: inline-block; transition: transform 200ms cubic-bezier(.3,.8,.3,1); font-size: 10px; }
.install-menu[open] > summary .caret { transform: rotate(180deg); }
.install-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
  min-width: 320px; max-width: calc(100vw - 24px);
  background: var(--paper); border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 var(--rule);
  padding: 6px 0;
  animation: ss-hover-in 180ms ease-out both;
}
.install-group-label {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); padding: 10px 14px 4px;
}
.install-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  width: 100%; text-align: left; border: 0; background: transparent;
  padding: 7px 14px; color: var(--ink); cursor: pointer;
  transition: background 120ms ease;
}
.install-item:hover { background: var(--paper-2); text-decoration: none; }
.install-item .label { font-family: var(--sans); font-size: 13px; }
.install-item .hint {
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  text-transform: lowercase; letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}
.install-sep { height: 1px; background: var(--rule); margin: 4px 0; }
.install-toast {
  position: absolute; top: 10px; right: 14px;
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--good); opacity: 0; pointer-events: none;
  transition: opacity 180ms ease;
}
.install-toast.show { opacity: 1; }

@media (max-width: 720px) {
  .install-menu { width: 100%; }
  .install-menu > summary { width: 100%; justify-content: space-between; }
  .install-dropdown { left: 0; right: 0; min-width: 0; }
}
.mcp-hero .config {
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper); padding: 18px;
  font-family: var(--mono); font-size: 12px; line-height: 1.6; overflow-x: auto;
}
.mcp-hero .config .comment { color: var(--accent-soft); margin-bottom: 6px; }
.mcp-hero .config .meta { margin-top: 12px; color: var(--muted-2); }

.mcp-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); }
@media (max-width: 900px) { .mcp-stats { grid-template-columns: repeat(2, 1fr); } }
.mcp-stats .cell { padding: 20px 24px; border-right: 1px solid var(--rule); }
.mcp-stats .cell:last-child { border-right: 0; }
.mcp-stats .big { font-family: var(--serif); font-size: 34px; line-height: 1; margin-top: 4px; font-weight: 500; }
.mcp-stats .sub { color: var(--muted); font-size: 12px; margin-top: 4px; }

.mcp-tools { display: grid; grid-template-columns: 320px 1fr; border-bottom: 1px solid var(--rule); }
@media (max-width: 900px) { .mcp-tools { grid-template-columns: 1fr; } }
.mcp-tools aside { border-right: 1px solid var(--rule); }
@media (max-width: 900px) { .mcp-tools aside { border-right: 0; border-bottom: 1px solid var(--rule); } }
.mcp-tools aside button {
  width: 100%; text-align: left; padding: 12px 20px;
  border-left: 3px solid transparent; background: transparent;
  border-bottom: 1px solid var(--rule);
}
.mcp-tools aside button.active { background: var(--paper-2); border-left-color: var(--ink); }
.mcp-tools aside .id { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.mcp-tools aside .desc { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.mcp-tools .detail { padding: 24px 28px; }
.mcp-tools .sig { font-family: var(--mono); font-size: 17px; margin-top: 4px; color: var(--ink); }
.mcp-tools .pair { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .mcp-tools .pair { grid-template-columns: 1fr; } }
.mcp-tools .pair pre {
  margin: 6px 0 0; padding: 14px; font-family: var(--mono); font-size: 12px; line-height: 1.5; overflow-x: auto;
}
.mcp-tools .pair pre.req { background: var(--ink); color: var(--paper); }
.mcp-tools .pair pre.res { border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink); }
.mcp-tools .facts { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); }
@media (max-width: 700px) { .mcp-tools .facts { grid-template-columns: 1fr; } }
.mcp-tools .facts .cell { padding: 14px; border-right: 1px solid var(--rule); }
.mcp-tools .facts .cell:last-child { border-right: 0; }

.mcp-recipes { padding: 28px 32px; border-bottom: 1px solid var(--rule); }
.mcp-recipes .grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .mcp-recipes .grid { grid-template-columns: 1fr; } }
.mcp-recipes .card { border: 1px solid var(--rule); padding: 16px; }
.mcp-recipes .card h3 { font-family: var(--serif); font-size: 20px; margin: 0; font-weight: 400; }
.mcp-recipes .card ol { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }

.mcp-sdks { padding: 28px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; border-bottom: 1px solid var(--rule); }
@media (max-width: 900px) { .mcp-sdks { grid-template-columns: 1fr; } }
.mcp-sdks ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.mcp-sdks li {
  display: grid; grid-template-columns: 100px 1fr auto; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
.mcp-sdks li .p { font-family: var(--mono); font-size: 13px; }
.mcp-sdks li .cmd { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* Hover preview ────────────────────────────────────────────── */
.hover-preview {
  position: fixed; z-index: 95;
  width: 360px; max-width: calc(100vw - 24px);
  background: var(--paper); border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 var(--rule);
  padding: 14px 16px;
  pointer-events: none;
  animation: ss-hover-in 160ms ease-out both;
}
.hover-preview ol {
  margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px;
  counter-reset: hp;
}
.hover-preview li {
  counter-increment: hp;
  padding-left: 22px; position: relative;
  font-family: var(--serif); font-size: 14px; line-height: 1.35;
}
.hover-preview li::before {
  content: counter(hp, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--mono); font-size: 10px; color: var(--muted);
}
.hover-preview .why {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule);
  font-size: 12px; color: var(--muted); font-style: italic;
}
@keyframes ss-hover-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .hover-preview { animation: none; } }
@media (max-width: 900px) { .hover-preview { display: none; } }

/* 11. Command palette ─────────────────────────────────────── */
.cmdk-scrim {
  position: fixed; inset: 0; background: rgba(20,18,16,0.4); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 80px;
  animation: ss-scrim-in 180ms ease-out both;
}
.cmdk {
  width: 600px; max-width: calc(100vw - 48px); background: var(--paper); border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 var(--rule);
}
.cmdk .head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.cmdk .head .prompt { font-family: var(--mono); color: var(--accent-ink); font-size: 13px; }
.cmdk input {
  border: 0; outline: none; background: transparent; flex: 1; font-family: var(--mono); font-size: 14px;
}
.cmdk .esc { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.cmdk .results { padding: 6px 0; max-height: 50vh; overflow-y: auto; }
.cmdk .results button {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 8px 14px; font-family: var(--mono); font-size: 13px; color: var(--ink);
  text-align: left; gap: 12px;
}
.cmdk .results button:hover, .cmdk .results button.sel { background: var(--paper-2); }
.cmdk .cmdk-row { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; }
.cmdk .cmdk-kind {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--accent-ink);
  border: 1px solid var(--rule-2); padding: 1px 5px;
  flex-shrink: 0;
}
.cmdk .cmdk-label { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk .cmdk-sub { color: var(--muted); font-size: 11px; font-style: italic; flex-shrink: 0; }
.cmdk .empty-row { padding: 14px; color: var(--muted); font-size: 13px; }
.cmdk .foot {
  padding: 6px 14px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--muted);
}

/* 12. Footer ──────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--rule); margin-top: 48px;
  padding: 32px 24px 60px; background: var(--paper);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer .blurb { color: var(--muted); font-size: 13px; max-width: 320px; margin-top: 10px; }
.footer ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.footer ul button { font-size: 14px; color: var(--ink); text-align: left; }
.footer ul button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer .legal {
  margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* Loading skeleton ─────────────────────────────────────────── */
.skeleton-strip { padding: 0 24px; }
.skeleton-row {
  display: grid; grid-template-columns: 36px 1fr 120px 100px; gap: 14px;
  padding: 18px 0; border-top: 1px solid var(--rule); align-items: center;
}
.skeleton-row:first-child { border-top: 0; padding-top: 24px; }
.cat-tab.skeleton, .skeleton-row span {
  display: block; border-radius: 4px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--rule) 60%, transparent) 0%,
    color-mix(in srgb, var(--rule) 90%, transparent) 50%,
    color-mix(in srgb, var(--rule) 60%, transparent) 100%);
  background-size: 200% 100%;
  animation: ss-shimmer 1.4s ease-in-out infinite;
}
.skeleton-row .sk-art { width: 36px; height: 36px; border-radius: 0; }
.skeleton-row .sk-text { height: 18px; max-width: 480px; }
.skeleton-row .sk-signature { height: 24px; }
.skeleton-row .sk-signal { height: 22px; justify-self: end; width: 80px; }

/* "New since last visit" dot */
.new-dot {
  position: absolute; top: -3px; right: -3px;
  width: 8px; height: 8px; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 0 2px var(--paper);
}
.ss-row.listened .new-dot { display: none; }

/* Verdict chip */
.verdict-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 2px;
  font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
}
.verdict-chip.must { background: var(--ink); color: var(--paper); }

/* 13. Keyframes ──────────────────────────────────────────── */
@keyframes ss-row-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes ss-scrim-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes ss-sheet-in {
  from { transform: translateX(120px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes ss-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Reduced motion — honor the user's OS preference everywhere that currently
 * animates. Transitions (width/color/bg) are left alone; they're short and
 * contribute to feedback rather than motion. */
@media (prefers-reduced-motion: reduce) {
  .ss-row, .ss-scrim, .ss-sheet, .cmdk-scrim,
  .skeleton-row span, .cat-tab.skeleton, .live-dot, .waveform-dock path {
    animation: none !important;
  }
  .waveform-dock { opacity: 0.5; }
}

/* 14. Insights editorial weekly ──────────────────────────── */
@keyframes ssFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

#view-insights-info { display: block; }

/* Shared panel chrome. Every "strip" is a <section> with 1px bottom rule.
 * Panels inside use a 1px right-rule when adjacent, set per-strip below. */
.ins-strip {
  display: grid;
  border-bottom: 1px solid var(--rule);
}
.ins-two-14 { grid-template-columns: 1.4fr 1fr; }
.ins-two-13 { grid-template-columns: 1.3fr 1fr; }
.ins-two-135 { grid-template-columns: 1.35fr 1fr; }
.ins-two-eq { grid-template-columns: 1fr 1fr; }

.ins-panel {
  padding: 24px 28px;
  min-width: 0;
}
.ins-panel.ins-panel-r { border-right: 1px solid var(--rule); }
.ins-panel > .caps { color: var(--muted); }
.ins-panel-sub {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  margin: 2px 0 0;
  text-wrap: pretty;
}
.ins-panel-body { margin-top: 16px; }

.ins-kicker-accent { color: var(--accent-ink); }
.ins-muted-s { font-size: 10px; color: var(--muted); }
.ins-muted2 { color: var(--muted-2); }
.ins-right { text-align: right; }

.ins-empty {
  color: var(--muted);
  font-style: italic;
  padding: 16px 0;
  font-size: 13px;
}
.ins-empty-sm { padding: 10px 14px; font-size: 12px; }

/* Masthead ─────────────────────────────────────────── */
.ins-masthead {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  padding: 28px 28px 22px;
  border-bottom: 1px solid var(--rule);
}
.ins-h1 {
  font-family: var(--serif);
  font-size: 52px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 6px 0 0;
  text-wrap: balance;
}
.ins-mast-sub {
  margin-top: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ins-mast-filters { display: flex; gap: 16px; align-items: center; }
.ins-range { display: inline-flex; border: 1px solid var(--rule); }
.ins-range-btn {
  padding: 5px 10px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.ins-range-btn + .ins-range-btn { border-left: 1px solid var(--rule); }
.ins-range-btn.active { background: var(--ink); color: var(--paper); }
.ins-cat {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 8px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
}

/* For You ──────────────────────────────────────────── */
.ins-foryou {
  position: relative;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.ins-foryou-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent-ink);
}
.ins-foryou-inner { padding: 22px 28px 24px; }
.ins-foryou-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.ins-foryou-sub {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  margin-top: 2px;
  line-height: 1.25;
  text-wrap: pretty;
}
.ins-foryou-ctx { flex-shrink: 0; color: var(--muted); }
.ins-foryou-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1.2fr 1fr;
  border: 1px solid var(--rule);
}
.ins-pick {
  text-align: left;
  padding: 16px 18px 14px;
  background: var(--paper);
  border: 0;
  border-right: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  transition: background 180ms;
  color: inherit;
  cursor: pointer;
  display: block;
  width: 100%;
}
.ins-pick:hover { background: var(--paper-2); }
.ins-pick-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.ins-lift { font-size: 11px; }
.ins-pick-body { display: flex; gap: 12px; }
.ins-pick-text { min-width: 0; flex: 1; }
.ins-pick-title {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.ins-pick-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.ins-pick-score {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.ins-pick-p {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.ins-pick-bar-wrap { flex: 1; }
.ins-pick-bar {
  height: 3px;
  background: var(--rule);
  position: relative;
}
.ins-pick-bar i {
  position: absolute; inset: 0;
  display: block;
}
.ins-pick-bar-wrap .caps { margin-top: 3px; }

.ins-backlog {
  padding: 16px 18px 14px;
  background: var(--ink);
  color: var(--paper);
}
.ins-backlog .caps { color: var(--muted-2); }
.ins-backlog-count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 8px;
}
.ins-backlog-count .num {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.ins-backlog-count .serif { font-size: 14px; }
.ins-backlog-min { font-size: 14px; margin-top: 2px; }
.ins-shortcut {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-2);
  text-align: left;
  display: block;
  width: 100%;
  color: var(--paper);
  background: none;
  border-right: 0; border-bottom: 0; border-left: 0;
  cursor: pointer;
}
.ins-shortcut .caps { color: var(--muted-2); font-size: 9px; }
.ins-shortcut-title {
  font-family: var(--serif);
  font-size: 14px;
  margin-top: 3px;
  text-wrap: pretty;
  line-height: 1.25;
}
.ins-shortcut-meta { font-size: 11px; color: var(--muted-2); margin-top: 2px; }
.ins-shortcut-empty {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-2);
  font-size: 12px;
  color: var(--muted-2);
}

/* Lede + Quote ─────────────────────────────────────── */
.ins-lede {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.45;
  text-wrap: pretty;
  margin: 8px 0 0;
  color: var(--ink);
}
.ins-lede-byline { margin-top: 14px; }
.ins-quote-wrap {
  padding: 28px;
  background: var(--paper-2);
  min-width: 0;
}
.ins-quote-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.ins-quote-dots { display: flex; gap: 4px; }
.ins-quote-dot {
  width: 18px; height: 2px;
  background: var(--rule);
  transition: background 300ms;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.ins-quote-dot.active { background: var(--accent-ink); }
.ins-quote-q {
  font-family: var(--serif);
  margin: 10px 0 0;
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  border-left: 3px solid var(--accent-ink);
  padding-left: 14px;
  text-wrap: pretty;
  min-height: 100px;
}
.ins-quote-meta { margin-top: 10px; font-size: 13px; color: var(--muted); }
.ins-quote-dim { color: var(--accent-ink); }
.ins-open-ep-btn {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  padding: 0;
}

/* Headline strip ─────────────────────────────────────── */
.ins-headline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-bottom: 1px solid var(--rule);
}
.ins-head-cell {
  padding: 18px 20px;
  border-right: 1px solid var(--rule);
}
.ins-head-cell:last-child { border-right: 0; }
.ins-head-v {
  font-size: 26px;
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: -0.01em;
  display: block;
}
.ins-head-delta { font-size: 11px; }

/* Movers ─────────────────────────────────────────────── */
.ins-movers-wrap { padding: 24px 28px; grid-column: 1 / -1; }
.ins-movers-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}
.ins-ctx { color: var(--muted); }
.ins-movers-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  border: 1px solid var(--rule);
}
.ins-movers-left { border-right: 1px solid var(--rule); }
.ins-movers-sub {
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ins-mover-row {
  display: grid;
  grid-template-columns: 34px 1fr 200px 70px;
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer;
  color: inherit;
}
.ins-mover-row:last-child { border-bottom: 0; }
.ins-mover-row:hover { background: var(--paper-2); }
.ins-mover-title {
  font-size: 15px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ins-mover-meta { font-size: 11px; color: var(--muted); }
.ins-jump {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
}
.ins-jump-center {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: var(--rule-2);
}
.ins-jump-bar {
  position: absolute;
  top: 4px; bottom: 4px;
  width: 0%;
  opacity: 0.8;
  transition: width 600ms cubic-bezier(.2,.8,.2,1);
}
.ins-mover-delta { text-align: right; }
.ins-mover-delta .num { font-size: 16px; font-weight: 600; }
.ins-fresh-row {
  display: grid;
  grid-template-columns: 30px 1fr 42px;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  cursor: pointer;
  color: inherit;
}
.ins-fresh-row:last-child { border-bottom: 0; }
.ins-fresh-row:hover { background: var(--paper-2); }
.ins-fresh-title { font-size: 14px; line-height: 1.2; }
.ins-fresh-meta {
  font-size: 10px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ins-fresh-s { font-size: 14px; font-weight: 600; text-align: right; }

/* Over / Under ───────────────────────────────────────── */
.ins-ou-list {
  display: grid;
  gap: 0;
  border: 1px solid var(--rule);
}
.ins-ou-row {
  display: grid;
  grid-template-columns: 28px 36px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: inherit;
  cursor: pointer;
}
.ins-ou-row:hover { background: var(--paper-2); }
.ins-ou-rank { font-size: 11px; color: var(--muted); }
.ins-ou-title {
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ins-ou-meta { font-size: 11px; color: var(--muted); }
.ins-ou-right { text-align: right; min-width: 60px; }
.ins-ou-s { font-size: 18px; font-weight: 600; }
.ins-ou-right .caps { font-size: 9px; }
.ins-ou-foot {
  padding: 10px 14px;
  background: var(--paper-2);
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  border-top: 1px solid var(--rule);
}

/* Scatter + Donut ──────────────────────────────────── */
.ins-scatter {
  width: 100%;
  display: block;
  border: 1px solid var(--rule);
}
.ins-scatter-dot {
  cursor: pointer;
  opacity: 0;
  transition: opacity 250ms;
}
.ins-scatter-dot.revealed { opacity: 1; }
.ins-scatter-dot:hover circle { stroke: var(--ink); stroke-width: 1.5; }
.ins-donut-wrap {
  display: flex;
  gap: 22px;
  align-items: center;
}
.ins-legend { flex: 1; display: grid; gap: 6px; }
.ins-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.ins-legend-sq {
  width: 12px; height: 12px;
  display: inline-block;
  flex-shrink: 0;
}
.ins-legend-lbl { flex: 1; }
.ins-legend-pct { width: 32px; text-align: right; }

/* Topic stream + Echo ──────────────────────────────── */
.ins-stream {
  width: 100%;
  display: block;
  border: 1px solid var(--rule);
}
.ins-topic-legends {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.ins-topic-legend {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  min-width: 0;
}
.ins-topic-legend .ins-legend-sq { width: 10px; height: 10px; }
.ins-topic-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ins-echo-list { display: grid; gap: 8px; }
.ins-echo-row {
  display: grid;
  grid-template-columns: 160px 1fr 48px;
  gap: 10px;
  align-items: center;
}
.ins-echo-name {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ins-echo-track {
  position: relative;
  height: 12px;
  background: var(--rule);
}
.ins-echo-bar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  transition: width 700ms cubic-bezier(.2,.8,.2,1);
}
.ins-echo-pct {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}
.ins-echo-axis {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
}

/* Distribution ────────────────────────────────────── */
.ins-dist {
  width: 100%;
  display: block;
  border: 1px solid var(--rule);
  user-select: none;
}
.ins-dist-bar {
  transition: y 600ms cubic-bezier(.2,.8,.2,1), height 600ms cubic-bezier(.2,.8,.2,1), fill 180ms;
}
.ins-thresh-handle { cursor: ew-resize; }
.ins-dist-cells {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--rule);
}
.ins-dist-cell {
  padding: 10px 12px;
  border-right: 1px solid var(--rule);
}
.ins-dist-cell:last-child { border-right: 0; }
.ins-dist-cell-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ins-dist-cell-head .ins-legend-sq { width: 8px; height: 8px; }
.ins-dist-cell-v { font-size: 20px; font-weight: 600; margin-top: 2px; }
.ins-dist-hint { margin-top: 8px; color: var(--muted); }

/* Evidence ─────────────────────────────────────────── */
.ins-evidence-list { display: grid; gap: 14px; }
.ins-evidence-row {
  text-align: left;
  padding: 0;
  background: none;
  border: 0;
  display: block;
  color: inherit;
  cursor: pointer;
}
.ins-evidence-q {
  font-family: var(--serif);
  margin: 3px 0 4px;
  font-size: 16px;
  line-height: 1.4;
  text-wrap: pretty;
}
.ins-evidence-meta { font-size: 12px; color: var(--muted); }

/* Standings ───────────────────────────────────────── */
.ins-stand-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 13px;
}
.ins-stand-table thead th {
  padding: 8px;
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
}
.ins-stand-table thead th.ins-right { text-align: right; }
.ins-stand-art {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: cover;
  background: var(--rule);
  flex-shrink: 0;
}
.ins-stand-table tbody td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--rule);
}
.ins-stand-row { cursor: pointer; }
.ins-stand-row:hover td { background: var(--paper-2); }
.ins-stand-rank { color: var(--muted); width: 30px; }
.ins-stand-show { display: flex; align-items: center; gap: 10px; }
.ins-stand-cat {
  font-size: 9px;
  border: 1px solid var(--rule-2);
  padding: 1px 6px;
}
.ins-stand-eps { color: var(--muted); text-align: right; }
.ins-stand-avg { text-align: right; font-weight: 600; }
.ins-stand-trend { text-align: right; }

/* Coverage footer ─────────────────────────────────── */
.ins-coverage {
  padding: 14px 28px;
  background: var(--paper-2);
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.ins-coverage b { color: var(--ink); font-weight: 600; }

/* Skeleton (first paint) ────────────────────────── */
.ins-skel {
  padding: 28px;
  display: grid;
  gap: 12px;
}
.ins-skel-row {
  height: 48px;
  background: linear-gradient(90deg, var(--paper-2), var(--rule), var(--paper-2));
  background-size: 200% 100%;
  animation: ss-shimmer 2s infinite linear;
}

/* Mobile — collapse multi-column grids, trim headline numbers to 3 rows */
@media (max-width: 820px) {
  .ins-masthead { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .ins-h1 { font-size: 36px; }
  .ins-mast-filters { justify-content: flex-start; flex-wrap: wrap; }
  .ins-foryou-inner { padding: 18px 20px; }
  .ins-foryou-head { flex-direction: column; gap: 4px; align-items: flex-start; }
  .ins-foryou-grid { grid-template-columns: 1fr 1fr; }
  .ins-backlog { grid-column: 1 / -1; }
  .ins-pick { border-right: 0; border-bottom: 1px solid var(--rule); }
  .ins-two-14, .ins-two-13, .ins-two-135, .ins-two-eq {
    grid-template-columns: 1fr;
  }
  .ins-panel.ins-panel-r {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .ins-panel { padding: 18px 20px; }
  .ins-movers-wrap { padding: 18px 20px; }
  .ins-movers-body { grid-template-columns: 1fr; }
  .ins-movers-left { border-right: 0; border-bottom: 1px solid var(--rule); }
  .ins-mover-row { grid-template-columns: 28px 1fr auto; }
  .ins-mover-row .ins-jump { display: none; }
  .ins-headline { grid-template-columns: repeat(2, 1fr); }
  .ins-head-cell { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .ins-head-cell:nth-child(2n) { border-right: 0; }
  .ins-donut-wrap { flex-direction: column; gap: 12px; }
  .ins-topic-legends { grid-template-columns: repeat(2, 1fr); }
  .ins-echo-row { grid-template-columns: 110px 1fr 40px; }
  .ins-dist-cells { grid-template-columns: repeat(3, 1fr); }
  .ins-coverage { padding: 14px 20px; gap: 14px; }
  .ins-stand-table th:nth-child(3), .ins-stand-table td:nth-child(3) { display: none; }
}