/* AI Radar — static UI styles. Tokens first, then layout, then components. */

:root {
  color-scheme: light;
  /* spacing: 4/8 scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r1: 4px; --r2: 6px; --r3: 10px;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px; --fs-lg: 16px; --fs-xl: 20px;
  --topbar-h: 52px;
  --header-h: 52px;  /* measured in app.js; tabs wrap to a second row on phones */
  --toolbar-h: 0px;
  --sidebar-w: 236px;
  --page-max: 1320px;
  --page-pad: 24px;
  --block-gap: 28px;   /* vertical rhythm between toolbar, breakouts and results */
  --ctl-h: 32px;       /* filter controls */
  --ctl-h-lg: 36px;    /* search / sort */

  /* neutral palette (light) */
  --bg: #fbfbfc;
  --bg-elev: #ffffff;
  --bg-sunken: #f3f4f6;
  --bg-hover: #f1f2f5;
  --bg-selected: #eceef2;
  --border: #e4e5ea;
  --border-strong: #cfd1d8;
  --text: #16171c;
  --text-2: #4b4e59;
  --text-3: #6b6e7a; /* AA on --bg and --bg-elev */
  --accent: #4f5bd5;
  --accent-hover: #4350c6;
  --accent-text: #3d47b8;
  --accent-soft: #eef0fd;
  --accent-border: #c9cdf6;
  --on-accent: #ffffff;
  --focus: #4f5bd5;
  --shadow-sm: 0 1px 2px rgba(16, 18, 27, .05);
  --shadow-md: 0 4px 16px rgba(16, 18, 27, .08), 0 1px 3px rgba(16, 18, 27, .06);
  --shadow-lg: 0 12px 32px rgba(16, 18, 27, .14), 0 2px 6px rgba(16, 18, 27, .06);
  --shadow-stuck: 0 6px 12px -8px rgba(16, 18, 27, .14);
  --spark: #4f5bd5;
  --spark-fill: rgba(79, 91, 213, .12);
  --skeleton: #eceef2;
  --skeleton-hi: #f6f7f9;
  --star: #c99400;
  --heart: #d64b6a;

  /* tiers */
  --t-calm-bg: #f1f2f5; --t-calm-fg: #5b5e69; --t-calm-bd: #e1e2e8;
  --t-rising-bg: #e9f7ef; --t-rising-fg: #17713f; --t-rising-bd: #c4e8d2;
  --t-hot-bg: #fff3e6; --t-hot-fg: #a34a00; --t-hot-bd: #fbd8b0;
  --t-viral-bg: #fdecef; --t-viral-fg: #b4233f; --t-viral-bd: #f6c6d0;
  --warn: #b45309;
  --av-fg-l: 30%; --av-bg-s: 62%; --av-bg-l: 92%;

  /* category colours (light): icon/label colour; tint = colour at --cat-tint over the surface.
     Each is >= 4.5:1 against its own tint on white (>= 4.35:1 on the selected sidebar row). */
  --cat-tint: 12%;
  --cat-llm: #4a4ec0;
  --cat-agents: #6c45b8;
  --cat-skills: #a3471a;
  --cat-coding: #285ab0;
  --cat-rag: #24703e;
  --cat-image: #a8346a;
  --cat-video: #b03a30;
  --cat-3d: #0b6971;
  --cat-audio: #9a500c;
  --cat-music: #853a9f;
  --cat-vision: #15668f;
  --cat-infra: #7d5c06;
  --cat-training: #4f6b0e;
  --cat-robotics: #4d5c72;
  --cat-science: #0c6c59;
  --cat-other: #5f626d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d0e12;
    --bg-elev: #15161c;
    --bg-sunken: #101116;
    --bg-hover: #1c1d25;
    --bg-selected: #22232c;
    --border: #262832;
    --border-strong: #363946;
    --text: #ececf1;
    --text-2: #b4b6c2;
    --text-3: #8d909e;
    --accent: #7c86f2;
    --accent-hover: #8f98f5;
    --accent-text: #a5acf8;
    --accent-soft: #1d2040;
    --accent-border: #343a77;
    --on-accent: #0d0e12;
    --focus: #8f98f5;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);
    --shadow-stuck: 0 6px 12px -8px rgba(0, 0, 0, .7);
    --spark: #8f98f5;
    --spark-fill: rgba(143, 152, 245, .14);
    --skeleton: #1a1b22;
    --skeleton-hi: #22232c;
    --star: #e0b03a;
    --heart: #f07a94;
    --t-calm-bg: #1c1d24; --t-calm-fg: #a3a6b3; --t-calm-bd: #2a2c36;
    --t-rising-bg: #10261a; --t-rising-fg: #6fd59a; --t-rising-bd: #1d4430;
    --t-hot-bg: #2b1c0c; --t-hot-fg: #f5a65b; --t-hot-bd: #4c3215;
    --t-viral-bg: #2f1219; --t-viral-fg: #f58ba0; --t-viral-bd: #552030;
    --warn: #f59e0b;
    --av-fg-l: 80%; --av-bg-s: 28%; --av-bg-l: 21%;
    --cat-tint: 16%;
    --cat-llm: #9a9ef5; --cat-agents: #b596f0; --cat-skills: #f0956a; --cat-coding: #7ba8f0; --cat-rag: #6fcf8c;
    --cat-image: #ef8ab5; --cat-video: #f08a7e; --cat-3d: #5ccbd3; --cat-audio: #eba061;
    --cat-music: #d590ea; --cat-vision: #6bbde6; --cat-infra: #d9b347; --cat-training: #a9c95a;
    --cat-robotics: #a3b1c6; --cat-science: #5fcfb5; --cat-other: #a3a6b3;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0e12;
  --bg-elev: #15161c;
  --bg-sunken: #101116;
  --bg-hover: #1c1d25;
  --bg-selected: #22232c;
  --border: #262832;
  --border-strong: #363946;
  --text: #ececf1;
  --text-2: #b4b6c2;
  --text-3: #8d909e;
  --accent: #7c86f2;
  --accent-hover: #8f98f5;
  --accent-text: #a5acf8;
  --accent-soft: #1d2040;
  --accent-border: #343a77;
  --on-accent: #0d0e12;
  --focus: #8f98f5;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);
  --shadow-stuck: 0 6px 12px -8px rgba(0, 0, 0, .7);
  --spark: #8f98f5;
  --spark-fill: rgba(143, 152, 245, .14);
  --skeleton: #1a1b22;
  --skeleton-hi: #22232c;
  --star: #e0b03a;
  --heart: #f07a94;
  --t-calm-bg: #1c1d24; --t-calm-fg: #a3a6b3; --t-calm-bd: #2a2c36;
  --t-rising-bg: #10261a; --t-rising-fg: #6fd59a; --t-rising-bd: #1d4430;
  --t-hot-bg: #2b1c0c; --t-hot-fg: #f5a65b; --t-hot-bd: #4c3215;
  --t-viral-bg: #2f1219; --t-viral-fg: #f58ba0; --t-viral-bd: #552030;
  --warn: #f59e0b;
  --av-fg-l: 80%; --av-bg-s: 28%; --av-bg-l: 21%;
  --cat-tint: 16%;
  --cat-llm: #9a9ef5; --cat-agents: #b596f0; --cat-skills: #f0956a; --cat-coding: #7ba8f0; --cat-rag: #6fcf8c;
  --cat-image: #ef8ab5; --cat-video: #f08a7e; --cat-3d: #5ccbd3; --cat-audio: #eba061;
  --cat-music: #d590ea; --cat-vision: #6bbde6; --cat-infra: #d9b347; --cat-training: #a9c95a;
  --cat-robotics: #a3b1c6; --cat-science: #5fcfb5; --cat-other: #a3a6b3;
}

/* category colour lookup: --cc is the colour, --cc-tint its soft background */
[data-cat] { --cc: var(--cat-other); --cc-tint: color-mix(in srgb, var(--cc) var(--cat-tint), transparent); }
[data-cat="all"] { --cc: var(--text-2); --cc-tint: color-mix(in srgb, var(--text-2) 10%, transparent); }
[data-cat="llm"] { --cc: var(--cat-llm); }
[data-cat="agents"] { --cc: var(--cat-agents); }
[data-cat="skills"] { --cc: var(--cat-skills); }
[data-cat="coding"] { --cc: var(--cat-coding); }
[data-cat="rag"] { --cc: var(--cat-rag); }
[data-cat="image"] { --cc: var(--cat-image); }
[data-cat="video"] { --cc: var(--cat-video); }
[data-cat="3d"] { --cc: var(--cat-3d); }
[data-cat="audio"] { --cc: var(--cat-audio); }
[data-cat="music"] { --cc: var(--cat-music); }
[data-cat="vision"] { --cc: var(--cat-vision); }
[data-cat="infra"] { --cc: var(--cat-infra); }
[data-cat="training"] { --cc: var(--cat-training); }
[data-cat="robotics"] { --cc: var(--cat-robotics); }
[data-cat="science"] { --cc: var(--cat-science); }
[data-cat="other"] { --cc: var(--cat-other); }

/* ---------------- base ---------------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.ic { display: inline-flex; align-items: center; justify-content: center; flex: none; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-base)/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
code { font-family: var(--mono); font-size: .92em; background: var(--bg-sunken); border: 1px solid var(--border); padding: 0 var(--s1); border-radius: var(--r1); }
.num, .tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); }
.dot { color: var(--text-3); margin: 0 5px; }
.i, .src-i { flex: none; display: inline-block; vertical-align: middle; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r1); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s4); top: -40px; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: var(--s2) var(--s3); border-radius: var(--r2);
}
.skip-link:focus { top: var(--s2); }

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--ctl-h); padding: 0 var(--s3);
  border: 1px solid var(--border-strong); border-radius: var(--r2);
  background: var(--bg-elev); color: var(--text);
  font-size: var(--fs-md); font-weight: 500; white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: background-color .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--bg-hover); }
.btn-ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--text-2); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn-sm { height: 30px; padding: 0 10px; font-size: var(--fs-md); }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid transparent; border-radius: var(--r2);
  background: transparent; color: var(--text-2);
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.icon-btn-sm { width: 28px; height: 28px; }
.icon-btn[aria-expanded="true"] { background: var(--bg-selected); color: var(--text); }

.link-btn {
  border: 0; background: none; padding: 2px 4px; border-radius: var(--r1);
  font-size: var(--fs-sm); font-weight: 500; color: var(--accent-text);
}
.link-btn:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---------------- top bar ---------------- */

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: var(--page-max); margin: 0 auto;
  min-height: var(--topbar-h);
  padding: 0 var(--page-pad);
  display: flex; align-items: center; gap: var(--s3);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 15px; letter-spacing: -.01em; }
.brand-mark { border-radius: 6px; }
.sample-badge {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--warn); border: 1px solid currentColor; border-radius: 999px; padding: 1px var(--s2);
  cursor: help;
}
.meta {
  color: var(--text-3); font-size: var(--fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums;
  padding-left: var(--s3); border-left: 1px solid var(--border); line-height: 16px;
}
.meta .dot { margin: 0 4px; }
.source-status {
  display: flex; align-items: center; gap: var(--s3);
  margin-left: auto;
  height: 28px; padding: 0 var(--s3);
  border-radius: 999px; background: var(--bg-sunken);
}
.src-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-sm); color: var(--text-2);
  cursor: default; border-radius: var(--r1);
}
.src-status .src-i { width: 14px; height: 14px; }
.src-status.is-down { opacity: .6; }
.src-status.is-down .src-i { filter: grayscale(1); }
.src-warn { color: var(--warn); display: inline-flex; }
.top-actions { display: flex; align-items: center; gap: 2px; }
.src-i { color: var(--text); }

/* ---------------- layout ---------------- */

.layout {
  max-width: var(--page-max); margin: 0 auto;
  display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: var(--s6);
  padding: 0 var(--page-pad);
}
.main { min-width: 0; padding: 0 0 var(--s7); }
.block { margin-top: var(--block-gap); }

/* ---------------- sidebar ---------------- */

.sidebar {
  position: sticky; top: var(--header-h);
  align-self: start;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto; scrollbar-width: thin;
  padding: var(--s5) 0 var(--s5);
}
.cat-nav { display: flex; flex-direction: column; gap: var(--s4); }
.cat-group { display: flex; flex-direction: column; gap: 2px; }
.cat-group-h {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); padding: 0 var(--s2) var(--s1);
}
.cat-list { display: flex; flex-direction: column; gap: 1px; }
.cat-btn {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 var(--s2) 0 5px;
  border: 0; border-radius: var(--r2);
  background: transparent; color: var(--text-2);
  font-size: var(--fs-md); text-align: left;
  transition: background-color .12s, color .12s;
}
.cat-btn:hover { background: var(--bg-hover); color: var(--text); }
.cat-btn[aria-pressed="true"] { background: var(--bg-selected); color: var(--text); font-weight: 600; }
.cat-btn.is-empty { color: var(--text-3); }
.cat-btn.is-empty .cat-tile { opacity: .45; }
.cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-count { font-size: var(--fs-sm); color: var(--text-3); font-weight: 400; min-width: 3ch; text-align: right; }

/* category icon tile */
.cat-tile {
  display: inline-grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: var(--r2);
  color: var(--cc); background: var(--cc-tint);
}
.cat-tile-sm { width: 18px; height: 18px; border-radius: 5px; }
.cat-i { display: block; }

/* ---------------- toolbar ---------------- */

.toolbar-sentinel { height: 1px; margin-bottom: -1px; }
.toolbar {
  position: sticky; top: var(--header-h); z-index: 20;
  display: flex; flex-direction: column; gap: var(--s3);
  margin: 0 calc(-1 * var(--s3));
  padding: var(--s5) var(--s3) var(--s3);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .15s, box-shadow .15s;
}
.toolbar.is-stuck { border-bottom-color: var(--border); box-shadow: var(--shadow-stuck); }
.tb-row { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.tb-filters { flex-wrap: wrap; row-gap: var(--s2); }
.tb-divider { width: 1px; height: 20px; background: var(--border); margin: 0 var(--s1); flex: none; }

.search { position: relative; flex: 1 1 280px; min-width: 0; }
.search input {
  width: 100%; height: var(--ctl-h-lg);
  padding: 0 36px 0 34px;
  border: 1px solid var(--border-strong); border-radius: var(--r2);
  background: var(--bg-elev); color: var(--text);
  font-size: var(--fs-base);
  box-shadow: var(--shadow-sm);
}
.search input::placeholder { color: var(--text-3); }
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search input::-webkit-search-cancel-button { cursor: pointer; }
.search-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font: 500 var(--fs-xs)/1 var(--mono); color: var(--text-3);
  border: 1px solid var(--border-strong); border-radius: var(--r1); padding: 2px 5px;
  pointer-events: none;
}
.search input:focus ~ .search-kbd, .search input:not(:placeholder-shown) ~ .search-kbd { display: none; }

.sort { display: flex; align-items: center; gap: var(--s2); }
.sort-label { font-size: var(--fs-sm); color: var(--text-3); }
.select-wrap { position: relative; }
.select-wrap select {
  appearance: none; -webkit-appearance: none;
  height: var(--ctl-h-lg); padding: 0 30px 0 var(--s3);
  border: 1px solid var(--border-strong); border-radius: var(--r2);
  background: var(--bg-elev); color: var(--text);
  font-size: var(--fs-md); font-weight: 500;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.select-ic { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-3); }

.seg {
  display: inline-flex; align-items: center; flex: none;
  height: var(--ctl-h);
  padding: 2px; gap: 2px;
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--r2);
}
.seg-btn {
  height: 26px; padding: 0 10px;
  border: 1px solid transparent; border-radius: var(--r1);
  background: transparent; color: var(--text-2);
  font-size: var(--fs-md); font-weight: 500; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.seg-btn:hover { color: var(--text); }
.seg-btn[aria-pressed="true"] { background: var(--bg-elev); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-sm); }
.seg-icon { height: var(--ctl-h-lg); }
.seg-icon .seg-btn { width: 32px; height: 30px; padding: 0; justify-content: center; }
.tier-glyph { display: inline-flex; }
.tg-rising { color: var(--t-rising-fg); }
.tg-hot { color: var(--t-hot-fg); }
.tg-viral { color: var(--t-viral-fg); }

.toggle {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: var(--ctl-h); padding: 0 var(--s3);
  border: 1px solid var(--border); border-radius: var(--r2);
  background: var(--bg-elev); color: var(--text-2);
  font-size: var(--fs-md); font-weight: 500;
}
.toggle:hover { color: var(--text); border-color: var(--border-strong); }
.toggle .i { color: var(--accent-text); }
.toggle[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text); }

/* dropdown buttons + popovers */
.dd { position: relative; flex: none; }
.dd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--ctl-h); padding: 0 var(--s2) 0 var(--s3);
  border: 1px solid var(--border); border-radius: var(--r2);
  background: var(--bg-elev); color: var(--text-2);
  font-size: var(--fs-md); font-weight: 500; white-space: nowrap;
}
.dd-btn:hover { color: var(--text); border-color: var(--border-strong); }
.dd-btn[aria-expanded="true"] { border-color: var(--border-strong); color: var(--text); background: var(--bg-hover); }
.dd-btn.is-active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text); }
.dd-value::before { content: "·"; margin-right: 6px; opacity: .7; }
.dd-value { font-weight: 600; }
.dd-chev { color: var(--text-3); }
.dd-chev .i { width: 14px; height: 14px; transition: transform .15s; }
.dd-btn.is-active .dd-chev { color: inherit; }
.dd-btn[aria-expanded="true"] .dd-chev .i { transform: rotate(180deg); }

.popover {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r3);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-md); color: var(--text-2);
}
.popover:focus { outline: none; }
.popover.is-fixed { position: fixed; }
.popover[hidden] { display: none; }
.menu { min-width: 200px; padding: var(--s1); display: flex; flex-direction: column; gap: 1px; }
.menu-item, .check-item {
  display: flex; align-items: center; gap: var(--s2);
  height: 32px; padding: 0 var(--s2);
  border: 0; border-radius: var(--r2);
  background: transparent; color: var(--text);
  font-size: var(--fs-md); text-align: left; white-space: nowrap;
  cursor: pointer;
}
.menu-item:hover, .check-item:hover { background: var(--bg-hover); }
.menu-item:focus-visible { outline: none; background: var(--bg-selected); box-shadow: inset 0 0 0 2px var(--focus); }
.menu-check { display: inline-flex; width: 14px; color: var(--accent-text); visibility: hidden; }
.menu-item[aria-checked="true"] { font-weight: 600; }
.menu-item[aria-checked="true"] .menu-check { visibility: visible; }
.check-item { position: relative; }
.check-item input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.check-box {
  display: inline-grid; place-items: center; flex: none;
  width: 16px; height: 16px; border-radius: var(--r1);
  border: 1px solid var(--border-strong); background: var(--bg-elev); color: transparent;
}
.check-item input:checked + .check-box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.check-item:has(input:focus-visible) { background: var(--bg-selected); box-shadow: inset 0 0 0 2px var(--focus); }
.check-label { flex: 1; }
.check-count { color: var(--text-3); font-size: var(--fs-sm); margin-left: var(--s4); }
.check-item .src-i { width: 14px; height: 14px; }

.help-pop { width: min(360px, calc(100vw - 32px)); padding: var(--s4); }
.help-list { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s3); align-items: baseline; }
.help-list dt { font-weight: 600; color: var(--text); white-space: nowrap; }
.help-foot { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); color: var(--text-3); font-size: var(--fs-sm); }

/* active filter row */
.tb-active { flex-wrap: wrap; row-gap: var(--s2); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 6px 0 4px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-elev); color: var(--text);
  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
}
.pill:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.pill .cat-tile-sm, .pill .src-i { border-radius: 999px; }
.pill > .src-i { margin-left: 3px; }
.pill .tier-glyph, .pill-ic { display: inline-grid; place-items: center; width: 18px; height: 18px; }
.pill-ic { color: var(--text-3); }
.pill-ic.gem-ic { color: var(--accent-text); }
.pill-label { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
.pill-x { display: inline-flex; color: var(--text-3); }
.pill:hover .pill-x { color: var(--text); }
.active-count { margin-left: auto; font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; }
.active-count strong { color: var(--text); font-weight: 600; }

/* ---------------- section headings ---------------- */

.section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--s3); flex-wrap: wrap; min-height: 20px; }
.section-head h2 {
  display: inline-flex; align-items: center; gap: var(--s2); align-self: center;
  font-size: var(--fs-md); font-weight: 600; color: var(--text); letter-spacing: -.003em;
}
.section-sub { font-size: var(--fs-sm); color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ---------------- breakouts ---------------- */
/* A calm ranked "top 6": single-line rows, two columns, column-major (1-3 | 4-6), hairlines between rows. */

.breakout-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto); grid-auto-flow: column;
  column-gap: var(--s6);
}
.breakout { min-width: 0; border-bottom: 1px solid var(--border); }
.breakout:nth-child(3n), .breakout:last-child { border-bottom: 0; }
.breakout-link {
  display: flex; align-items: center; gap: var(--s2);
  height: 40px; padding: 0 var(--s2); margin: 0 calc(-1 * var(--s2));
  border-radius: var(--r2);
  font-size: var(--fs-md);
  transition: background-color .12s;
}
.breakout-link:hover { background: var(--bg-hover); }
.breakout-link:focus-visible { outline-offset: -2px; border-radius: var(--r2); }
.b-rank { flex: none; width: 1.2em; font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); text-align: right; }
.b-cat { display: inline-flex; flex: none; }
.b-name { flex: 0 1 auto; min-width: 0; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breakout-link:hover .b-name { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border-strong); }
.breakout .gem-dot { flex: none; }
.b-vel { flex: none; display: flex; justify-content: flex-end; min-width: 7em; margin-left: auto; padding-left: var(--s1); }
.b-vel .vel { gap: 4px; }
.b-vel .vel-num { font-weight: 600; }
.breakout .est { border: 0; padding: 0; line-height: inherit; font-weight: 400; }
.b-tier { flex: none; width: 4.6em; }
.b-tier .tier-text { font-size: var(--fs-xs); }
.b-age { flex: none; min-width: 3.9em; text-align: right; font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; }
/* narrow two-column and phone widths: tier glyph only (label kept for screen readers + tooltip) */
@media (max-width: 1239px) and (min-width: 900px), (max-width: 560px) {
  .b-tier { width: auto; }
  .b-tier .tier-text > span {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ---------------- results ---------------- */

.results:focus { outline: none; }
.section-head h2 .cat-tile { margin-right: 0; }

.grid {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.card {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  padding: var(--s4);
  background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--r3);
  box-shadow: var(--shadow-sm);
  transition: border-color .12s, box-shadow .12s;
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.card:has(.stretch:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.card-head { display: flex; align-items: center; gap: var(--s2); min-width: 0; height: 22px; }
.card-head .src { display: inline-flex; flex: none; }
.card-title {
  flex: 1; min-width: 0;
  font-size: var(--fs-base); font-weight: 600; line-height: 22px; letter-spacing: -.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-title .owner { color: var(--text-3); font-weight: 450; }
.stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.stretch:focus-visible { outline: none; }
.card .mention, .card .sec-link { position: relative; z-index: 1; }

.card-meta {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: 10px; height: 20px; min-width: 0;
  font-size: var(--fs-sm); color: var(--text-3);
}
.meta-text { display: flex; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; }
.meta-text .dot { margin: 0 4px; }
.byline { max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kind { color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.meta-text time, .meta-text .dot, .meta-text .flags { flex: none; }
.card-meta .gem-mark { margin-left: auto; }

.desc {
  margin-top: 10px;
  font-size: var(--fs-md); color: var(--text-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  height: calc(2 * 1.5em);
}
.card-stats {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--border);
  min-width: 0;
}
.card .desc { margin-bottom: var(--s4); }
.card-stats .vel { min-width: 0; }
.stat-mom { display: inline-flex; align-items: baseline; gap: 5px; flex: none; }
.stat-sub { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }

.vel { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vel-num { font-weight: 600; color: var(--text); }
.vel-big .vel-num { font-size: var(--fs-lg); letter-spacing: -.01em; }
.est {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-3);
  border: 1px dashed var(--border-strong); border-radius: var(--r1); padding: 0 4px; line-height: 16px;
  cursor: help;
}
.accel { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-xs); font-weight: 600; color: var(--t-rising-fg); align-self: center; }

.metric { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--fs-md); color: var(--text); white-space: nowrap; }
.metric .i { color: var(--text-3); }
.metric-stars .i { color: var(--star); }
.metric-likes .i { color: var(--heart); }
.metric .unit { font-weight: 400; color: var(--text-3); font-size: var(--fs-sm); }

.card-foot {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 20px; margin-top: 6px; min-width: 0; overflow: hidden;
}
.mentions, .sec-links { display: inline-flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.sec-links { margin-left: auto; }
.mention {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 7px 0 5px;
  border: 1px solid var(--border); border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-2);
  background: var(--bg-elev);
}
.mention .src-i { width: 12px; height: 12px; }
a.mention:hover, .sec-link:hover { border-color: var(--border-strong); color: var(--text); background: var(--bg-hover); }
.sec-link {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 6px;
  border: 1px solid transparent; border-radius: var(--r1);
  font-size: var(--fs-sm); color: var(--text-2);
}

/* badges */
.cat-badge {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  height: 20px; padding: 0 7px 0 5px;
  border-radius: 5px;
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
  color: var(--cc); background: var(--cc-tint);
}
.cat-badge .i { width: 12px; height: 12px; }
.tier {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: 22px; padding: 0 8px 0 6px;
  border-radius: 999px; border: 1px solid;
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
}
.tier-sm { height: 20px; padding: 0 6px; }
.tier-calm { background: var(--t-calm-bg); color: var(--t-calm-fg); border-color: var(--t-calm-bd); }
.tier-rising { background: var(--t-rising-bg); color: var(--t-rising-fg); border-color: var(--t-rising-bd); }
.tier-hot { background: var(--t-hot-bg); color: var(--t-hot-fg); border-color: var(--t-hot-bd); }
.tier-viral { background: var(--t-viral-bg); color: var(--t-viral-fg); border-color: var(--t-viral-bd); }
.tier-text { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.tt-calm { color: var(--t-calm-fg); }
.tt-rising { color: var(--t-rising-fg); }
.tt-hot { color: var(--t-hot-fg); }
.tt-viral { color: var(--t-viral-fg); }
.gem-mark {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: 20px; padding: 0 6px;
  border-radius: 5px;
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
  color: var(--accent-text); background: var(--accent-soft);
}
.gem-mark-sm { padding: 0 6px 0 5px; gap: 3px; }
.gem-dot { display: inline-flex; color: var(--accent-text); }

/* table view */
.table-wrap {
  border: 1px solid var(--border); border-radius: var(--r3);
  background: var(--bg-elev);
  overflow: clip;
  box-shadow: var(--shadow-sm);
}
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
.table th {
  position: sticky; top: calc(var(--header-h) + var(--toolbar-h)); z-index: 2;
  text-align: left; font-weight: 500; font-size: var(--fs-sm); color: var(--text-3);
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border);
  background: var(--bg-sunken); white-space: nowrap;
}
.table td { padding: 10px var(--s3); border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-sunken) 55%, var(--bg-elev)); }
.table tbody tr:hover td { background: var(--bg-hover); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-rank { width: 44px; color: var(--text-3); font-size: var(--fs-sm); }
/* name column absorbs the remaining width and truncates; every other column sizes to content */
.table td.c-name { width: 100%; max-width: 0; }
.table th.c-name { width: 100%; }
.row-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.row-name .src { display: inline-flex; flex: none; }
.row-link { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-link:hover .name { text-decoration: underline; text-underline-offset: 2px; }
.row-link .owner { color: var(--text-3); font-weight: 450; }
.row-desc { color: var(--text-3); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.table .vel { justify-content: flex-end; }
.c-age time { color: var(--text-2); }
.c-cat, .c-tier { white-space: nowrap; }

/* load more */
.more-wrap { display: flex; justify-content: center; margin-top: var(--s5); }

/* state panels */
.state-panel {
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  text-align: center;
  padding: var(--s7) var(--s5);
  border: 1px dashed var(--border-strong); border-radius: var(--r3);
  color: var(--text-2);
}
.state-panel > .i { color: var(--text-3); width: 24px; height: 24px; }
.state-panel h2 { font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
.state-panel p { max-width: 46ch; font-size: var(--fs-md); }
.state-panel .btn { margin-top: var(--s2); }
.state-panel.is-error > .i { color: var(--warn); }

/* skeleton */
.skeleton {
  height: 236px;
  background: linear-gradient(90deg, var(--skeleton) 0%, var(--skeleton-hi) 50%, var(--skeleton) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-color: var(--border);
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* dialog */
.dialog {
  width: min(600px, calc(100vw - 32px));
  max-height: min(80vh, 760px);
  padding: 0;
  border: 1px solid var(--border); border-radius: var(--r3);
  background: var(--bg-elev); color: var(--text);
  box-shadow: var(--shadow-lg);
}
.dialog::backdrop { background: rgba(10, 11, 15, .45); backdrop-filter: blur(2px); }
.dialog[open] { display: flex; flex-direction: column; }
.dialog-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s3) var(--s3) var(--s5);
  border-bottom: 1px solid var(--border);
}
.dialog-head h2 { font-size: var(--fs-lg); font-weight: 600; }
.dialog-body { padding: var(--s4) var(--s5) var(--s5); overflow-y: auto; font-size: var(--fs-base); color: var(--text-2); line-height: 1.6; }
.dialog-body h3 { font-size: var(--fs-base); font-weight: 600; color: var(--text); margin: var(--s5) 0 var(--s1); }
.dialog-body p + p { margin-top: var(--s2); }
.dialog-body strong { color: var(--text); font-weight: 600; }
.tier-explain { display: grid; gap: var(--s2); margin: var(--s2) 0; }
.tier-explain li { display: flex; align-items: center; gap: var(--s3); }
.tier-explain .tier { min-width: 64px; justify-content: center; }

/* ================= v2: tabs, stages, signals, drawer, feeds, benchmarks ================= */

/* --- header tabs --- */
.tabs { display: flex; align-self: stretch; gap: 2px; margin-left: var(--s3); }
.tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 0 10px;
  border: 0; background: none; color: var(--text-2);
  font-size: var(--fs-md); font-weight: 500; white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  border-radius: 2px 2px 0 0; background: transparent;
}
.tab[aria-selected="true"] { color: var(--text); font-weight: 600; }
.tab[aria-selected="true"]::after { background: var(--accent); }
.tab:focus-visible { outline-offset: -4px; border-radius: var(--r2); }
.tab-count {
  font-size: var(--fs-xs); font-weight: 500; line-height: 16px;
  padding: 0 6px; border-radius: 999px;
  color: var(--text-3); background: var(--bg-sunken);
}
.tab-count:empty { display: none; }
.tab[aria-selected="true"] .tab-count { color: var(--accent-text); background: var(--accent-soft); }
.meta { margin-left: auto; }
.source-status { margin-left: 0; }
.sample-badge:focus-visible { outline-offset: 2px; }

/* panels + sidebar per tab */
.panel:focus { outline: none; }
.main:focus { outline: none; }

/* --- buttons --- */
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s2); }
.state-actions .btn { margin: 0; }
.section-act { margin-left: auto; }

/* --- stage switch --- */
.tb-main { flex-wrap: wrap; row-gap: var(--s2); }
.stage-wrap { display: flex; align-items: center; gap: 2px; flex: none; }
.seg-stage { height: var(--ctl-h-lg); }
.seg-stage .seg-btn { height: 30px; padding: 0 10px; }
.seg-count { font-size: var(--fs-xs); font-weight: 500; color: var(--text-3); }
.seg-count:empty { display: none; }
.seg-btn[aria-pressed="true"] .seg-count { color: var(--text-2); }
.stage-badge {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px;
  border-radius: 5px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
  background: var(--t-calm-bg); color: var(--t-calm-fg);
}
.stage-badge.stage-listed { background: var(--t-rising-bg); color: var(--t-rising-fg); }
.stage-badge.stage-watch { background: var(--accent-soft); color: var(--accent-text); }

/* --- project cards (v2 additions) --- */
.momentum { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -.01em; color: var(--text); line-height: 1.2; }
.signals { display: inline-flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; min-width: 0; }
.signal {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.signal .src-i { width: 13px; height: 13px; }
.signal .i { color: var(--text-3); }
.sig-word { font-weight: 400; color: var(--text-3); }
.variants-chip {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: 20px; padding: 0 7px 0 6px; margin-left: auto;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-sunken); color: var(--text-2);
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
}
.variants-chip .i { color: var(--text-3); }
.row-name .variants-chip { margin-left: 2px; height: 18px; }
.flags { display: inline-flex; gap: 6px; }
.flag { color: var(--text-3); font-style: italic; }
.dialog-body .flag { font-style: italic; }
.c-sig .signals { gap: 4px 10px; flex-wrap: nowrap; }
.c-mom { color: var(--text); font-weight: 600; }
.row-desc .flags { margin-left: 4px; }

/* --- drawer --- */
.drawer {
  position: fixed; inset: 0 0 0 auto;
  margin: 0; padding: 0;
  width: min(600px, 100vw); max-width: 100vw;
  height: 100vh; height: 100dvh; max-height: none;
  border: 0; border-left: 1px solid var(--border);
  background: var(--bg-elev); color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.drawer[open] { display: flex; flex-direction: column; animation: drawer-in .22s cubic-bezier(.2, .8, .2, 1); }
.drawer::backdrop { background: rgba(10, 11, 15, .38); animation: fade-in .2s ease-out; }
@keyframes drawer-in { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
html.has-drawer { overflow: hidden; }
.dr-head {
  display: flex; align-items: flex-start; gap: var(--s3); flex: none;
  padding: var(--s4) var(--s3) var(--s4) var(--s5);
  border-bottom: 1px solid var(--border);
}
.dr-head-slot { flex: 1; min-width: 0; }
.dr-head-main { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.dr-head-main > .cat-tile { width: 40px; height: 40px; border-radius: 10px; }
.dr-head-main > .cat-tile .i { width: 20px; height: 20px; }
.dr-titles { min-width: 0; }
.dr-eyebrow { display: flex; align-items: center; font-size: var(--fs-sm); color: var(--text-3); }
.dr-title { font-size: 18px; font-weight: 650; letter-spacing: -.012em; line-height: 1.3; overflow-wrap: anywhere; margin-top: 1px; }
.dr-title .owner { color: var(--text-3); font-weight: 450; }
.dr-close { flex: none; }
.dr-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s5) var(--s5) var(--s7); }
.dr-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.dr-badges .flags { font-size: var(--fs-sm); }
.dr-desc { font-size: var(--fs-base); line-height: 1.65; color: var(--text-2); max-width: 68ch; }
.dr-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.dr-actions .btn { height: 34px; }
.dr-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  margin-top: var(--s5);
  background: var(--border); border: 1px solid var(--border); border-radius: var(--r3); overflow: hidden;
}
.dr-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--s3); background: var(--bg-elev); }
.dr-stat-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.dr-stat-value { font-size: 18px; font-weight: 650; color: var(--text); letter-spacing: -.01em; white-space: nowrap; }
.dr-stat-sub { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-sec { margin-top: var(--s6); }
.dr-sec-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  margin-bottom: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs); font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em;
}
.dr-sec-aside { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--fs-sm); }
.dr-signals li { display: flex; align-items: center; gap: var(--s2); padding: 5px 0; font-size: var(--fs-md); }
.dr-sig-src { width: 112px; flex: none; color: var(--text-2); }
.dr-sig-vals { color: var(--text-3); }
.dr-sig-vals strong { color: var(--text); font-weight: 600; }
.dr-empty { color: var(--text-3); font-size: var(--fs-md); margin-top: var(--s5); }
.dr-note { color: var(--text-3); font-size: var(--fs-sm); margin-top: var(--s2); }
.dr-id { margin-top: var(--s6); font-size: var(--fs-xs); color: var(--text-3); }
.dr-id code { font-size: var(--fs-xs); color: var(--text-3); overflow-wrap: anywhere; }
.dr-error { display: flex; gap: var(--s3); margin-top: var(--s5); padding: var(--s4); border: 1px solid var(--border); border-radius: var(--r3); color: var(--text-2); font-size: var(--fs-md); }
.dr-error > .i { color: var(--warn); flex: none; margin-top: 2px; }
.dr-error .btn { margin-top: var(--s3); }

/* history chart: small multiples on a shared time axis */
.chart-stack { display: flex; flex-direction: column; gap: var(--s4); }
.chart-panel { margin: 0; }
.chart-panel figcaption { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: 6px; font-size: var(--fs-sm); }
.chart-key { width: 8px; height: 8px; border-radius: 2px; background: var(--series); align-self: center; flex: none; }
.chart-name { color: var(--text-2); font-weight: 500; }
.chart-last { margin-left: auto; font-weight: 650; color: var(--text); font-size: var(--fs-md); }
.chart-delta { color: var(--t-rising-fg); font-size: var(--fs-xs); font-weight: 600; min-width: 4ch; text-align: right; }
.chart { display: block; width: 100%; height: 56px; overflow: visible; }
.chart-line { fill: none; stroke: var(--series); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: var(--series); opacity: .12; stroke: none; }
.chart-grid { stroke: var(--border); stroke-width: 1; fill: none; }
.chart-range { display: none; }
.chart-axis { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-3); margin-top: calc(-1 * var(--s2)); }

/* grouped links */
.dl-group + .dl-group { margin-top: var(--s4); }
.dl-h { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); margin-bottom: 2px; }
.dl-list { display: flex; flex-direction: column; }
.dl-link {
  display: flex; align-items: center; gap: var(--s2); min-width: 0;
  min-height: 34px; padding: 4px var(--s2); margin: 0 calc(-1 * var(--s2));
  border-radius: var(--r2); font-size: var(--fs-md); color: var(--text);
}
a.dl-link:hover { background: var(--bg-hover); }
a.dl-link:hover .dl-name { text-decoration: underline; text-underline-offset: 2px; }
.dl-link.is-disabled { color: var(--text-3); }
.dl-link .src-i, .dl-link > .i { flex: none; }
.dl-link > .i:last-child { color: var(--text-3); }
.dl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-host, .dl-meta { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--text-3); font-size: var(--fs-sm); }
.dl-meta span { display: inline-flex; align-items: center; gap: 3px; }
.rel {
  flex: none; min-width: 70px; text-align: center;
  font-size: var(--fs-xs); font-weight: 600; line-height: 18px; padding: 0 6px; border-radius: 4px;
  background: var(--bg-sunken); color: var(--text-2);
}
.rel-quantized { color: var(--cat-infra); background: color-mix(in srgb, var(--cat-infra) var(--cat-tint), transparent); }
.rel-finetune { color: var(--cat-training); background: color-mix(in srgb, var(--cat-training) var(--cat-tint), transparent); }
.rel-merge { color: var(--cat-agents); background: color-mix(in srgb, var(--cat-agents) var(--cat-tint), transparent); }
.rel-adapter { color: var(--cat-vision); background: color-mix(in srgb, var(--cat-vision) var(--cat-tint), transparent); }

/* quality breakdown */
.qb-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 42%) 40px; align-items: center; gap: var(--s3); padding: 5px 0; font-size: var(--fs-md); }
.qb-name { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-bar { height: 6px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.qb-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.qb-list .is-neg .qb-bar span { background: var(--warn); }
.qb-val { text-align: right; font-weight: 600; color: var(--text); font-size: var(--fs-sm); }

/* stage history */
.sh-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) 0; }
.sh-list li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-md); }
.sh-list li + li::before { content: ""; width: 28px; height: 1px; background: var(--border-strong); margin: 0 var(--s2); }
.sh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.sh-dot.stage-listed { background: var(--t-rising-fg); }
.sh-dot.stage-watch { background: var(--accent); }
.sh-stage { font-weight: 600; }
.sh-time { color: var(--text-3); font-size: var(--fs-sm); }

/* author + facts */
.author { display: flex; align-items: center; gap: var(--s3); }
.author-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-sunken); color: var(--text-2); flex: none; }
.author-name { font-weight: 600; }
.author-kind { font-size: var(--fs-sm); color: var(--text-3); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.facts dt { font-size: var(--fs-xs); color: var(--text-3); }
.facts dd { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.facts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.facts-2 dd { font-weight: 500; overflow-wrap: anywhere; }

/* skeleton bits */
.sk-line, .sk-box, .skeleton-tile {
  display: block;
  background: linear-gradient(90deg, var(--skeleton) 0%, var(--skeleton-hi) 50%, var(--skeleton) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r1);
}
.sk-line { height: 12px; }
.sk-box { height: 160px; border-radius: var(--r3); }
.w40 { width: 40%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; }
.dr-skel { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s5); }
.skeleton.sk-row { height: 128px; border: 1px solid var(--border); border-radius: var(--r3); }
.news-item.skeleton.sk-row { height: 116px; margin-bottom: var(--s3); }

/* --- research --- */
.feed { display: flex; flex-direction: column; gap: var(--s3); }
.paper {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s3);
  padding: var(--s4);
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r3);
  box-shadow: var(--shadow-sm);
}
.paper > .cat-tile { margin-top: 1px; }
.paper-title { font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -.006em; max-width: 80ch; }
.paper-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.paper-meta { display: flex; flex-wrap: wrap; align-items: center; margin-top: 4px; font-size: var(--fs-sm); color: var(--text-3); }
.paper-meta .dot { margin: 0 6px; }
.paper-authors { color: var(--text-2); }
.paper-cat { font-weight: 600; }
.paper-sum {
  margin-top: var(--s2); max-width: 80ch;
  font-size: var(--fs-md); line-height: 1.6; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.paper-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s3); }
.paper-foot .sec-links { margin-left: auto; }
.sec-link { border: 1px solid var(--border); }
.sec-link-accent { color: var(--accent-text); border-color: var(--accent-border); background: var(--accent-soft); font-weight: 600; }
a.sec-link-accent:hover { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); }

/* --- news --- */
.ts-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.top-story { min-width: 0; }
.ts-link {
  display: flex; flex-direction: column; gap: var(--s2); height: 100%;
  padding: var(--s3) var(--s4) var(--s4);
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r3);
  box-shadow: var(--shadow-sm);
  transition: border-color .12s, box-shadow .12s;
}
.ts-link:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.ts-src { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); min-width: 0; }
.ts-src-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-title {
  font-size: 15px; font-weight: 600; line-height: 1.38; letter-spacing: -.008em; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ts-link:hover .ts-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ts-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--s2); margin-top: auto; font-size: var(--fs-xs); color: var(--text-3); }
.ts-meta .topic-chip { margin-left: 0; }
.ts-more { margin-left: auto; }
.tb-topics { flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 28px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-elev); color: var(--text-2);
  font-size: var(--fs-md); font-weight: 500; white-space: nowrap;
}
.chip:hover { color: var(--text); border-color: var(--border-strong); }
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text); font-weight: 600; }
.chip-count { font-size: var(--fs-xs); color: var(--text-3); font-weight: 500; }
.chip[aria-pressed="true"] .chip-count { color: inherit; opacity: .8; }
.chip.is-empty { opacity: .5; }
.toggle .chip-count { margin-left: 2px; }
.news-feed { display: flex; flex-direction: column; }
.day-group + .day-group { margin-top: var(--s6); }
.day-h {
  display: flex; align-items: baseline; gap: var(--s2);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--border-strong);
  font-size: var(--fs-sm); font-weight: 650; color: var(--text); letter-spacing: .01em;
}
.day-count { font-weight: 500; color: var(--text-3); font-size: var(--fs-xs); }
.news-item { padding: var(--s4) 0 calc(var(--s4) + 2px); border-bottom: 1px solid var(--border); }
.news-item:last-child { border-bottom: 0; }
.ni-src { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; font-size: var(--fs-sm); color: var(--text-3); }
.ni-src > .avatar { margin-right: 8px; }
.ni-src-name { color: var(--text-2); font-weight: 600; }
.ni-src .dot { margin: 0 6px; }
.top-mark {
  margin-left: var(--s2); padding: 0 6px; border-radius: 4px; line-height: 18px;
  font-size: var(--fs-xs); font-weight: 650; color: var(--accent-text); background: var(--accent-soft);
}
.topic-chip {
  margin-left: auto; padding: 0 8px; border-radius: 999px; line-height: 20px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); background: var(--bg-sunken); white-space: nowrap;
}
.ni-title { margin-top: 6px; font-size: 17px; font-weight: 600; line-height: 1.38; letter-spacing: -.012em; max-width: 64ch; text-wrap: pretty; }
.ni-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ni-sum { margin-top: 6px; max-width: 70ch; font-size: 15px; line-height: 1.62; color: var(--text-2); text-wrap: pretty; }
.ni-foot { margin-top: var(--s2); }
.more-src {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: -4px; padding: 2px 4px; border: 0; border-radius: var(--r1); background: none;
  font-size: var(--fs-sm); font-weight: 500; color: var(--accent-text);
}
.more-src:hover { text-decoration: underline; text-underline-offset: 2px; }
.more-src .i { transition: transform .15s; }
.more-src[aria-expanded="true"] .i { transform: rotate(180deg); }
.ni-more { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s2); padding: 2px 0 2px var(--s3); border-left: 2px solid var(--border); }
.ni-more li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-md); }
.ni-more-link { font-weight: 500; color: var(--text); }
a.ni-more-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.ni-host { color: var(--text-3); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 20px; height: 20px; border-radius: 6px;
  font-size: 11px; font-weight: 700; line-height: 1;
  color: hsl(var(--h, 230) 45% var(--av-fg-l));
  background: hsl(var(--h, 230) var(--av-bg-s) var(--av-bg-l));
}
.avatar-sm { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; }
.avatar-xs { width: 16px; height: 16px; border-radius: 4px; font-size: 9px; }

/* --- benchmarks --- */
.disclaimer {
  display: flex; align-items: flex-start; gap: var(--s2);
  margin-top: var(--s5); padding: var(--s2) var(--s3);
  font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5;
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--r2);
}
.disclaimer .ic { color: var(--text-3); margin-top: 1px; }
.board { margin-top: var(--s5); }
.board-eyebrow { font-size: var(--fs-sm); color: var(--text-3); }
.board-title { margin-top: 2px; font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.015em; }
.board-desc { margin-top: var(--s1); max-width: 75ch; font-size: var(--fs-md); line-height: 1.55; color: var(--text-2); }
.credit {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s5);
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--r3);
}
.credit-main { flex: 1 1 260px; min-width: 0; }
.credit-src { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2); font-size: var(--fs-base); }
.credit-k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.credit-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; color: var(--text); }
.credit-link:hover, .credit-data:hover { text-decoration: underline; text-underline-offset: 2px; }
.credit-line { margin-top: 2px; font-size: var(--fs-md); color: var(--text-2); }
.credit-facts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.credit-facts dt { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.credit-facts dd { font-size: var(--fs-sm); color: var(--text); font-weight: 500; }
.credit-data { display: inline-flex; align-items: center; gap: 4px; }
.board-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: var(--s5) 0 var(--s3); }
.board-tools .section-sub { margin-left: auto; }
.th-sort {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0; border: 0; background: none;
  font: inherit; color: inherit; white-space: nowrap;
}
.th-sort:hover, .th-sort.is-active { color: var(--text); }
.th-sort.is-active { font-weight: 600; }
.th-ic { display: inline-flex; opacity: .55; }
.th-sort.is-active .th-ic { opacity: 1; color: var(--accent-text); }
.bench-table td.c-model { width: 40%; }
.bm-name { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.bm-model { font-weight: 600; overflow-wrap: anywhere; }
a.bm-model:hover { text-decoration: underline; text-underline-offset: 2px; }
.bm-proj {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  padding: 0 7px; border-radius: 999px; line-height: 18px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--accent-text); background: var(--accent-soft);
}
.bm-proj:hover { text-decoration: underline; }
.c-org { color: var(--text-2); white-space: nowrap; }
.bench-table td.c-score { width: 34%; min-width: 180px; }
.bar-cell { display: flex; align-items: center; gap: var(--s3); }
.bar { flex: 1; min-width: 48px; height: 8px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.bar-val { min-width: 52px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.c-open { white-space: nowrap; }
.ow-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 7px; border-radius: 999px; line-height: 18px;
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--t-rising-fg); background: var(--t-rising-bg); border: 1px solid var(--t-rising-bd);
}
.bm-empty { text-align: center; padding: var(--s6) !important; }
.board-skel { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s5); }
.board-skel .sk-line { height: 14px; }
.sk-table { height: 360px; border-radius: var(--r3); }

/* ---------------- responsive ---------------- */

@media (max-width: 1000px) {
  .table .c-sig { display: none; }
}
@media (max-width: 1600px) {
  .c-d7 { display: none; }
}

@media (max-width: 1100px) {
  .table-wrap { overflow-x: auto; }
  .meta { display: none; }
  :root { --sidebar-w: 216px; }
  .layout { gap: var(--s5); }
}

@media (max-width: 899px) {
  :root { --page-pad: 16px; --block-gap: 24px; }
  .topbar-inner { gap: var(--s2); }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
  .sidebar {
    position: relative; top: auto; z-index: 1;
    min-width: 0; max-height: none; overflow: visible;
    padding: var(--s2) 0;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .cat-nav {
    flex-direction: row; gap: 6px;
    overflow-x: auto; scrollbar-width: none;
    padding: 2px var(--s4);
    scroll-padding-inline: var(--s4);
  }
  .cat-nav::-webkit-scrollbar { display: none; }
  .cat-group, .cat-list { display: contents; }
  .cat-group-h { display: none; }
  .cat-btn {
    width: auto; height: 32px; padding: 0 10px 0 5px; gap: 6px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--bg-elev); white-space: nowrap;
  }
  .cat-btn .cat-tile { width: 22px; height: 22px; border-radius: 999px; }
  .cat-btn .cat-tile .i { width: 14px; height: 14px; }
  .cat-btn[aria-pressed="true"] { background: var(--bg-selected); border-color: var(--border-strong); }
  .cat-name { overflow: visible; }
  .cat-count { min-width: 0; }
  .main { padding: 0 var(--s4) var(--s7); }
  .toolbar { position: relative; top: auto; margin: 0; padding: var(--s4) 0 0; background: none; }
  .toolbar.is-stuck { box-shadow: none; border-bottom-color: transparent; }
  .table th { top: 0; position: static; }
  .table-wrap { overflow-x: auto; }
  .source-status { display: none; }
  .top-actions { margin-left: auto; }
  .breakout-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .breakout:nth-child(n) { border-bottom: 1px solid var(--border); }
  .breakout:last-child { border-bottom: 0; }
  .sort-label { display: none; }
}

@media (max-width: 899px) and (min-width: 600px) {
  .source-status { display: flex; }
}

@media (max-width: 560px) {
  .tb-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .tb-main .search { grid-column: 1 / -1; }
  .tb-main .sort { justify-self: start; }
  /* filter row scrolls sideways; popovers switch to fixed positioning (see place() in app.js) */
  .tb-filters {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--s4)); padding: 4px var(--s4);
    scroll-padding-inline: var(--s4);
  }
  .tb-filters::-webkit-scrollbar { display: none; }
  .tb-main { row-gap: var(--s2); }
  .tb-active { margin-top: -4px; }
  .seg-btn { padding: 0 8px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .breakouts .section-sub { display: none; }
  .active-count { margin-left: 0; }
  .c-cat, .c-d7, .c-rank, .c-tier, .c-age, .c-sig { display: none; }
  .table td, .table th { padding: var(--s2) 10px; }
  .row-name .variants-chip { display: none; }
  .table .vel { flex-direction: column; align-items: flex-end; gap: 2px; }
  .table .metric .unit { display: none; }
}

/* v2 responsive */
@media (min-width: 900px) {
  #board-list .cat-btn { height: auto; min-height: 34px; padding-top: 6px; padding-bottom: 6px; align-items: flex-start; }
  #board-list .cat-name { white-space: normal; line-height: 1.35; padding-top: 2px; }
  #board-list .cat-count { padding-top: 3px; }
}
.brand, .sample-badge { white-space: nowrap; flex: none; }
.source-status { flex: none; }
@media (max-width: 1480px) {
  .meta { display: none; }
  .source-status { margin-left: auto; }
}
@media (max-width: 1239px) and (min-width: 900px) {
  .source-status { display: none; }
  .top-actions { margin-left: auto; }
}
@media (max-width: 1100px) {
  .meta { display: none; }
  .top-actions { margin-left: auto; }
}

@media (max-width: 899px) {
  .topbar-inner { flex-wrap: wrap; min-height: 0; }
  .brand { height: 48px; }
  .source-status { margin-left: auto; }
  .source-status + .top-actions { margin-left: 0; }
  .tabs {
    order: 10; flex: 1 0 100%;
    height: 44px; margin: 0 calc(-1 * var(--page-pad)); padding: 0 calc(var(--page-pad) - 10px);
    border-top: 1px solid var(--border);
    overflow-x: auto; scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .ts-list { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .ts-link { padding: var(--s3); }
  .ts-title { -webkit-line-clamp: 2; }
  .disclaimer { margin-top: var(--s4); }
}

@media (max-width: 640px) {
  .drawer { width: 100vw; border-left: 0; }
  .drawer[open] { animation-name: sheet-in; }
  .dr-head { padding: var(--s3) var(--s2) var(--s3) var(--s4); }
  .dr-body { padding: var(--s4) var(--s4) var(--s7); }
  .dr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dr-sig-src { width: auto; }
  .dl-host { display: none; }
}
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-width: 560px) {
  .stage-wrap { grid-column: 1 / -1; }
  .seg-stage { flex: 1; }
  .seg-stage .seg-btn { flex: 1; justify-content: center; padding: 0 6px; }
  .tb-topics {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--s4)); padding: 2px var(--s4);
  }
  .tb-topics::-webkit-scrollbar { display: none; }
  #panel-research .tb-main, #panel-news .tb-main { grid-template-columns: minmax(0, 1fr) auto auto; }
  #panel-research .tb-main .search, #panel-news .tb-main .search { grid-column: 1 / -1; }
  .paper { grid-template-columns: minmax(0, 1fr); padding: var(--s3) var(--s4); }
  .paper > .cat-tile { display: none; }
  .paper-foot .sec-links { margin-left: 0; }
  .ni-title { font-size: 16px; }
  .ni-sum { font-size: 14px; }
  .topic-chip { margin-left: var(--s2); }
  .credit { padding: var(--s3); }
  .c-org { display: none; }
  .bench-table td.c-score { min-width: 0; width: auto; }
  .bar { min-width: 32px; }
  .board-tools .section-sub { margin-left: 0; flex-basis: 100%; }
}

@media (max-width: 479px) {
  .tabs { padding: 0 calc(var(--page-pad) - 4px); gap: 0; }
  .tab { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 1px; padding: 0 4px; }
  .tab::after { left: 4px; right: 4px; }
  .tab-count, .tab[aria-selected="true"] .tab-count { background: none; padding: 0; font-size: 10px; line-height: 12px; }
  .sample-badge { font-size: 10px; padding: 0 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .seg-btn[aria-pressed="true"], .toggle[aria-pressed="true"], .cat-btn[aria-pressed="true"], .dd-btn.is-active { outline: 2px solid CanvasText; }
  .check-item input:checked + .check-box { background: Highlight; color: HighlightText; }
}
.row-variants { color: var(--text-2); font-weight: 600; }
.table .c-name { min-width: 180px; }
.table td, .table th { padding-left: 10px; padding-right: 10px; }
@media (max-width: 599px) { .top-actions { margin-left: auto !important; } }
@media (max-width: 899px) {
  .ts-list {
    display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    margin: 0 calc(-1 * var(--s4)); padding: 2px var(--s4) var(--s1); scroll-padding-inline: var(--s4);
  }
  .ts-list::-webkit-scrollbar { display: none; }
  .top-story { flex: 0 0 260px; scroll-snap-align: start; }
  .top-stories .section-sub { display: none; }
}
@media (max-width: 560px) {
  #panel-news .tb-main .toggle, #panel-research .tb-main .toggle { justify-self: start; }
}
@media (max-width: 560px) {
  .bench-table .c-rank { display: table-cell; width: 28px; padding-right: 0; }
  .bm-name { flex-wrap: wrap; row-gap: 2px; }
  .bm-model { overflow-wrap: break-word; min-width: 0; }
  .bench-table td.c-model { width: auto; }
  .bench-table .bar { flex: 0 0 40px; min-width: 40px; }
  .bench-table .bar-cell { gap: var(--s2); }
  .bench-table .bar-val { min-width: 0; }
  .ow-badge { padding: 0 5px; }
}
@media (max-width: 560px) { .paper-foot { flex-direction: column; align-items: flex-start; } }

/* ================= v2.1: hero, footer, sheet, units, too-early, families ================= */

/* Theme swap: no colour transitions, so nothing keeps the old theme's colours mid-swap. */
.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }

.top-actions { margin-left: auto; gap: var(--s1); }
.explain-btn .btn-label { display: inline; }
.src-warn-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--warn);
  font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
}
.src-warn-btn:hover { background: color-mix(in srgb, var(--warn) 18%, transparent); }

/* --- hero: one compact intro line above every tab's toolbar --- */
.hero {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--s5);
  margin-top: var(--s5); padding: 0 40px 0 0;
}
.hero-text { display: contents; }
.hero h1 { grid-column: 1; grid-row: 1; }
.hero-tag { grid-column: 1 / -1; grid-row: 2; }
.hero-meta { grid-column: 2; grid-row: 1; }
.hero h1 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.hero-tag { margin-top: 2px; font-size: var(--fs-base); line-height: 20px; color: var(--text-2); }
.hero-meta { font-size: var(--fs-sm); line-height: 20px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hero-close { position: absolute; top: -2px; right: 0; }
.hero.is-hidden { margin: 0; padding: 0; height: 0; overflow: hidden; }
.hero.is-hidden > :not(.hero-text), .hero.is-hidden .hero-tag { display: none; }
.hero.is-hidden h1 {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* hero sits above the main column (and above the category row on small screens) */
.layout { grid-template-rows: auto 1fr; }
.layout > .hero { grid-column: 2; grid-row: 1; }
.layout > .sidebar { grid-column: 1; grid-row: 1 / span 2; }
.layout > .main { grid-column: 2; grid-row: 2; }
.main .toolbar { padding-top: var(--s4); }
html.hero-hidden .main .toolbar { padding-top: var(--s5); }

/* --- toolbar: same structure on every tab: [search][Filters (phones)][sort] then filters --- */
.filter-panel { display: contents; }
.filter-btn {
  display: none; align-items: center; gap: 6px; flex: none;
  height: var(--ctl-h-lg); padding: 0 var(--s3);
  border: 1px solid var(--border-strong); border-radius: var(--r2);
  background: var(--bg-elev); color: var(--text);
  font-size: var(--fs-md); font-weight: 600; box-shadow: var(--shadow-sm);
}
.filter-btn:hover { background: var(--bg-hover); }
.filter-n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-sm); font-weight: 700; line-height: 20px; text-align: center;
}
.tb-main .search { flex: 1 1 320px; }
@media (min-width: 768px) {
  .toolbar .tb-filters { column-gap: 6px; }
  .toolbar .tb-filters .tb-divider { display: none; }
  .toolbar .tb-filters #tier-seg, .toolbar .tb-filters #dd-age { margin-left: 8px; }
  .toolbar .tb-filters .dd-btn { padding: 0 6px 0 10px; }
  .toolbar .tb-filters .stage-wrap .seg-btn { padding: 0 7px; }
  .toolbar .tb-filters .seg-count { margin-left: -1px; }
  .toolbar .tb-filters .seg-btn { padding: 0 8px; }
  .toolbar .tb-filters .toggle { padding: 0 10px; }
}
.menu-count { margin-left: auto; padding-left: var(--s4); }
.check-item[hidden], .menu-item[hidden] { display: none; }
.has-tip { border-bottom: 1px dotted currentColor; cursor: help; }
.has-tip:focus-visible { outline-offset: 1px; }

/* --- units, too-early, momentum --- */
.too-early {
  display: inline-flex; align-items: center; flex: none;
  font-size: var(--fs-sm); font-weight: 500; font-style: italic; color: var(--text-3);
  white-space: nowrap; cursor: help;
}
.vel-big .too-early { font-size: var(--fs-md); }
.card.is-early .card-stats { align-items: center; }
.accel { cursor: help; }
.b-mom {
  flex: none; min-width: 2.4em; padding: 0 5px; border-radius: 5px;
  font-size: var(--fs-sm); font-weight: 650; line-height: 20px; text-align: center;
  color: var(--accent-text); background: var(--accent-soft); cursor: help;
}
.b-vel { min-width: 9.5em; }
.h-stage { font-weight: 500; color: var(--text-3); }
.h-stage::before { content: "·"; margin-right: 6px; }
.card-head .stage-badge { flex: none; }
.row-name .stage-badge { flex: none; }
.stage-badge.stage-archived { background: var(--bg-sunken); color: var(--text-2); }

/* --- research --- */
.src-label {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); background: var(--bg-sunken);
  border: 1px solid var(--border);
}
.paper-plain { margin-top: var(--s2); max-width: 75ch; font-size: 15px; line-height: 1.55; color: var(--text); font-weight: 450; }
.paper-abs { margin-top: var(--s2); max-width: 80ch; }
.paper-abs > summary {
  display: inline-flex; align-items: center; min-height: 28px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--accent-text); cursor: pointer; list-style: revert;
}
.paper-sum.is-open { display: block; -webkit-line-clamp: unset; overflow: visible; margin-top: var(--s1); }
.why-label { font-size: var(--fs-sm); color: var(--text-3); margin-right: 2px; }
.signals.why { gap: 4px 10px; }
.sub-note { display: block; margin-top: 2px; color: var(--text-3); }
.sub-note .link-btn { padding: 0 2px; }

/* --- news --- */
.ext-mark { display: inline-block; margin-left: 4px; font-size: .8em; color: var(--text-3); font-weight: 500; text-decoration: none; }
.ni-link:hover .ext-mark, .paper-link:hover .ext-mark, .ts-link:hover .ext-mark { color: var(--accent-text); }

/* --- benchmarks --- */
.board-head { margin-top: 0; }
.credit {
  display: block; margin-top: var(--s3); padding: 0;
  background: none; border: 0; border-radius: 0;
  font-size: var(--fs-sm); color: var(--text-2);
}
.credit-line { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; font-size: var(--fs-sm); margin: 0; color: var(--text-2); }
.credit-text { font-weight: 600; color: var(--text); }
.credit-link { font-weight: 600; font-size: var(--fs-sm); }
.credit-more { margin-top: 2px; }
.credit-more > summary {
  display: inline-flex; align-items: center; min-height: 28px; cursor: pointer; list-style: revert;
  font-size: var(--fs-sm); color: var(--accent-text); font-weight: 500;
}
.credit-more[open] { padding: var(--s2) var(--s3) var(--s3); margin-top: var(--s1); background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--r2); }
.credit-more[open] > summary { min-height: 24px; }
.credit-facts { margin-top: var(--s2); }
.credit-facts dd { font-weight: 400; }
.credit-note { margin-top: var(--s2); color: var(--text-3); }
.board-tools { margin: var(--s4) 0 var(--s2); }
.board-tools .section-sub { margin-left: 0; }
.c-change { width: 56px; }
.rc { font-size: var(--fs-sm); font-weight: 650; white-space: nowrap; }
.rc-up { color: var(--t-rising-fg); }
.rc-down { color: var(--t-viral-fg); }
.rc-new { color: var(--accent-text); font-weight: 600; text-transform: lowercase; }
.rc-none, .rc-same { color: var(--text-3); font-weight: 400; }
.bm-variants {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  height: 22px; padding: 0 8px 0 6px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-sunken); color: var(--text-2);
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
}
.bm-variants:hover { color: var(--text); border-color: var(--border-strong); }
.bm-variants .i { transition: transform .15s; transform: rotate(-90deg); }
.bm-variants[aria-expanded="true"] .i { transform: none; }
.bench-table tr.bm-variant td { background: color-mix(in srgb, var(--bg-sunken) 70%, var(--bg-elev)); }
.bm-variant .bm-model { font-weight: 500; color: var(--text-2); }
.bm-branch { color: var(--text-3); flex: none; }

/* --- footer --- */
.site-footer { border-top: 1px solid var(--border); margin-top: var(--s6); background: var(--bg); }
.footer-inner {
  max-width: var(--page-max); margin: 0 auto; padding: var(--s5) var(--page-pad) var(--s6);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5);
  font-size: var(--fs-sm); color: var(--text-3);
}
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.footer-links .link-btn { font-size: var(--fs-md); color: var(--text-2); padding: 4px 2px; }
.footer-links .link-btn:hover { color: var(--text); }
.footer-tracked { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; flex: 1 1 420px; }
.ft-k { font-weight: 600; color: var(--text-2); margin-right: 6px; }
.ft-src { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.footer-updated { white-space: nowrap; margin-left: auto; }

/* --- dialogs: sources list, deep-link flash --- */
.src-list, .credit-list { display: flex; flex-direction: column; gap: var(--s2); margin: var(--s2) 0; }
.src-row { display: flex; align-items: flex-start; gap: var(--s3); }
.src-row .src-i { margin-top: 3px; }
.src-row-main { flex: 1; min-width: 0; }
.src-row-sub { display: block; font-size: var(--fs-sm); color: var(--text-3); line-height: 1.45; }
.src-row.is-down .src-row-sub { color: var(--warn); }
.credit-list li { font-size: var(--fs-md); line-height: 1.5; }
.credit-terms { display: block; font-size: var(--fs-sm); color: var(--text-3); }
.dialog-body h3.is-flash { animation: flash 1.6s ease-out; border-radius: var(--r1); }
@keyframes flash { 0%, 40% { background: var(--accent-soft); } 100% { background: transparent; } }
.dialog-body .accel { display: inline-flex; }

/* --- drawer additions --- */
.dr-collecting { display: flex; align-items: flex-start; gap: var(--s2); margin-top: 0; }
.dr-collecting .i { margin-top: 2px; flex: none; }
.chart-note { font-size: var(--fs-sm); color: var(--text-3); margin-top: calc(-1 * var(--s1)); }
.chart-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2); align-items: stretch; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; min-width: 3ch; font-size: var(--fs-xs); line-height: 1; color: var(--text-3); text-align: right; }
.chart-axis { padding-left: calc(3ch + var(--s2) + 6px); }
.help-link {
  display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 999px; background: none; color: var(--text-3); vertical-align: middle;
}
.help-link:hover { color: var(--accent-text); background: var(--accent-soft); }
.dr-stat-label { display: inline-flex; align-items: center; gap: 2px; }
.dr-stat-label .help-link { width: 18px; height: 18px; margin: -4px 0; }
.dr-stat-value .accel { margin-left: 6px; font-size: var(--fs-sm); }
.dr-stat-value .num { font-size: inherit; }
.dr-translated { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--text-3); }
.dr-orig { display: inline-block; margin-left: var(--s2); vertical-align: middle; }
.dr-orig[open] { display: block; margin: var(--s2) 0 0; }
.tr-badge { display: inline-flex; height: 20px; align-items: center; padding: 0 6px; border-radius: 4px; background: var(--bg-sunken); border: 1px solid var(--border); font-weight: 600; color: var(--text-2); cursor: help; }
.dr-orig summary { cursor: pointer; color: var(--accent-text); }
.dr-orig p { margin-top: var(--s1); color: var(--text-2); }
.qb-intro { margin: 0 0 var(--s3); display: block; }
.qb-intro .help-link { margin-left: 2px; }
.qb-rel { margin-top: var(--s3); }
/* The drawer body is its own scroller: keep each section on its own layer-free paint so long
   lists (variants) never show an unpainted gap while scrolling. */
.dr-body { contain: content; }
.drawer[open] { animation-fill-mode: none; }

/* --- mobile filter sheet --- */
.sheet {
  position: fixed; inset: auto 0 0 0;
  width: 100vw; max-width: 100vw; max-height: 86dvh; margin: 0; padding: 0;
  border: 0; border-top: 1px solid var(--border); border-radius: 16px 16px 0 0;
  background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-lg);
}
.sheet[open] { display: flex; flex-direction: column; animation: sheet-up .2s cubic-bezier(.2, .8, .2, 1); }
.sheet::backdrop { background: rgba(10, 11, 15, .45); }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s2) var(--s2) var(--s2) var(--s4); border-bottom: 1px solid var(--border); flex: none; }
.sheet-head h2 { font-size: var(--fs-lg); font-weight: 650; }
.sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s2) var(--s4) var(--s4); }
.sheet-foot { display: flex; gap: var(--s2); justify-content: flex-end; padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); flex: none; }
.sheet-foot .btn { height: 44px; padding: 0 var(--s4); font-size: var(--fs-base); }
.sheet-foot .btn-primary { flex: 1; justify-content: center; }
.sheet-sec + .sheet-sec { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border); }
.sheet-h { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: var(--s2) 0 var(--s2); }
.sheet .filter-panel { display: block; }
.sheet .tb-filters { display: flex; flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; gap: var(--s2); }
.sheet .tb-divider { display: none; }
.sheet .stage-wrap { width: 100%; }
.sheet .seg-stage { flex: 1; height: 44px; }
.sheet .seg-stage .seg-btn { flex: 1; justify-content: center; height: 38px; }
.sheet .seg { height: 44px; }
.sheet .seg-btn { height: 38px; padding: 0 10px; }
.sheet #tier-seg { width: 100%; }
.sheet #tier-seg .seg-btn { flex: 1; justify-content: center; padding: 0 4px; }
.sheet .toggle, .sheet .dd-btn { height: 40px; }
.sheet .dd { width: 100%; }
.sheet .dd.help { width: auto; }
.sheet .dd-btn { width: 100%; justify-content: space-between; }
.sheet .dd-btn .dd-chev { margin-left: auto; }
.sheet .popover:not(.help-pop) { position: static; margin-top: var(--s1); box-shadow: none; width: 100%; }
.sheet .menu-item, .sheet .check-item { height: 40px; }
.sheet .view-seg { display: none; }
.sheet .sort { width: 100%; }
.sheet .sort-label { display: none; }
.sheet .select-wrap, .sheet .select-wrap select { width: 100%; height: 44px; }
.sheet .cat-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; overflow: visible; padding: 0; }
.sheet .cat-group, .sheet .cat-list { display: contents; }
.sheet .cat-group-h { display: none; }
.sheet .cat-btn {
  width: auto; height: 36px; padding: 0 10px 0 5px; gap: 6px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elev); white-space: nowrap;
}
.sheet .cat-btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text); }
.sheet .cat-btn .cat-tile { width: 24px; height: 24px; border-radius: 999px; }
.sheet .cat-name { overflow: visible; }
.sheet .cat-count { min-width: 0; }
.sheet #board-list .cat-btn { width: 100%; border-radius: var(--r2); height: auto; min-height: 40px; }
.sheet #board-list .cat-name { white-space: normal; }
html.has-sheet { overflow: hidden; }

/* --- tablets and phones: only the tab bar stays pinned --- */
@media (max-width: 899px) {
  .topbar { top: calc(-1 * var(--brand-row-h, 0px)); }
  .layout > .hero, .layout > .sidebar, .layout > .main { grid-column: 1; grid-row: auto; }
  .hero { margin: var(--s4) var(--s4) var(--s2); }
  .hero.is-hidden { margin: 0; }
  .hero h1 { font-size: 20px; line-height: 26px; }
  .tab-count, .tab[aria-selected="true"] .tab-count { font-size: var(--fs-xs); }
  .footer-updated { margin-left: 0; }
}

/* --- phones: filters behind one button, search always visible --- */
@media (max-width: 767px) {
  .filter-btn { display: inline-flex; }
  .toolbar > .filter-panel, .tb-main > .sort, .tb-main > .view-seg, .sidebar { display: none; }
  .toolbar { padding-top: var(--s3); }
  .tb-main { display: flex; flex-wrap: nowrap; }
  .tb-main .search { flex: 1 1 auto; grid-column: auto; }
  .search input { height: 44px; font-size: 16px; } /* 16px: no iOS zoom on focus */
  .filter-btn { height: 44px; }
  .search-kbd { display: none; }
  .search input { padding-right: 12px; }
  .hero { padding-right: 36px; gap: 2px; }
  .hero-tag { font-size: var(--fs-md); line-height: 18px; }
  .hero-meta { font-size: var(--fs-xs); }
  .hero-meta { grid-column: 1 / -1; grid-row: 3; }
  .main .toolbar, html.hero-hidden .main .toolbar { padding-top: var(--s3); }
  .block { margin-top: var(--s5); }
  /* breakouts first: a compact top 3 on phones */
  .breakout:nth-child(n+4) { display: none; }
  .breakout:nth-child(3) { border-bottom: 0; }
  .b-tier, .b-age { display: none; }
  .b-vel { min-width: 0; }
  .breakout-link { height: 44px; }
  /* tap targets >= 32px */
  .pill { height: 32px; }
  .link-btn { min-height: 32px; }
  .more-src { min-height: 32px; }
  .sec-link { height: 32px; }
  .chip { height: 32px; }
  .th-sort { min-height: 32px; }
  .help-link { width: 32px; height: 32px; }
  .bm-variants { height: 32px; }
  .paper-abs > summary, .credit-more > summary { min-height: 32px; }
  .icon-btn-sm { width: 32px; height: 32px; }
  .footer-links .link-btn { min-height: 36px; }
  .src-warn-btn .sw-label { display: none; }
  .src-warn-btn { width: 32px; padding: 0; justify-content: center; }
  .bench-table .c-open { display: none; }
  .explain-btn { height: 32px; }
  .credit-link, .credit-data, .bm-proj { display: inline-flex; align-items: center; min-height: 32px; }
  .ni-link, .paper-link { padding-block: 7px; }
  .bench-table .c-change { width: 44px; padding-left: 4px; padding-right: 4px; }
  .bench-table .c-model { min-width: 0; }
}

/* --- tablets: filter row wraps (no hidden sideways scroll) --- */
@media (max-width: 899px) and (min-width: 768px) {
  .tb-filters { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .tb-main .sort { justify-self: auto; }
}
@media (max-width: 560px) and (min-width: 0px) {
  .tb-filters { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
}
@media (max-width: 899px) {
  .explain-btn .btn-label { display: none; }
  .explain-btn { width: 32px; padding: 0; justify-content: center; }
}

/* ================= v2.2: round-3 UX fixes ================= */

/* --- one-line subtitle on Research / News / Benchmarks (the full intro is on Projects only) --- */
.panel-lede { margin-top: var(--s5); font-size: var(--fs-base); line-height: 20px; color: var(--text-2); }
.panel-lede + .toolbar-sentinel + .toolbar { padding-top: var(--s3); }
@media (max-width: 899px) { .panel-lede { margin-top: var(--s4); font-size: var(--fs-md); line-height: 18px; } }
@media (max-width: 479px) { .panel-lede { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

/* --- "How it works": keep a visible label on small screens --- */
.explain-btn .btn-label-short { display: none; }
@media (max-width: 899px) {
  .explain-btn { width: auto; padding: 0 10px 0 8px; gap: 5px; }
  .explain-btn .btn-label-long { display: none; }
  .explain-btn .btn-label-short { display: inline; }
}
@media (max-width: 339px) {
  .explain-btn { width: 32px; padding: 0; }
  .explain-btn .btn-label-short { display: none; }
}
/* dev fixture only: the "Sample data" badge needs the room on phones (tooltip + aria-label remain) */
@media (max-width: 479px) {
  .topbar-inner:has(.sample-badge:not([hidden])) .explain-btn { width: 32px; padding: 0; }
  .topbar-inner:has(.sample-badge:not([hidden])) .explain-btn .btn-label-short { display: none; }
}

/* --- stage switch while searching: one static "All stages" state --- */
.seg-static { background: var(--bg-elev); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-sm); cursor: default; }
.seg-static .seg-count { color: var(--text-2); }
.seg-static[hidden] { display: none; }

/* --- breakouts: boxed momentum with a one-line legend in the header, one-line empty state --- */
.b-mom-wrap { display: inline-flex; align-items: center; flex: none; cursor: help; }
/* the word "momentum" is read by screen readers on every row; sighted users get the legend */
.b-mom-word { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.b-legend { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.b-legend .b-mom { min-width: 0; padding: 0 4px; line-height: 18px; font-size: var(--fs-xs); cursor: default; }
.breakouts.is-empty .section-head, .breakouts.is-empty .breakout-list { display: none; }
.breakouts-note { font-size: var(--fs-sm); color: var(--text-3); }
.breakouts-note .link-btn { font-size: inherit; }

/* --- "AI-powered app" (v2.2 ai_kind applied): small and muted --- */
.ai-chip {
  display: inline-flex; align-items: center; flex: none;
  height: 20px; padding: 0 7px;
  border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text-3);
  font-size: var(--fs-xs); font-weight: 600; font-style: normal; white-space: nowrap; cursor: help;
}
.card-foot .ai-chip { margin-left: auto; }
.card-foot .ai-chip + .variants-chip { margin-left: 0; }
.dr-badges .ai-chip { height: 24px; }

/* --- phones: category chips above the feed on Projects (one row, about 44px) --- */
@media (max-width: 767px) {
  .layout[data-tab="projects"] > .sidebar { display: block; padding: 3px 0; }
  .layout[data-tab="projects"] > .sidebar .cat-btn { height: 32px; }
}
/* chips with no results are hidden on phones (chip row and sheet); the sidebar dims them */
@media (max-width: 899px) { .cat-nav li.is-zero { display: none; } }
.sheet .cat-nav li.is-zero { display: none; }

/* --- table: every signal, wrapping to a second line rather than overflowing --- */
.c-sig .signals { flex-wrap: wrap; gap: 2px 8px; }
.table td.c-sig { min-width: 104px; max-width: 168px; }

/* --- top stories: the headline link covers the card; "+N more sources" is its own button --- */
.ts-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s2); height: 100%;
  padding: var(--s3) var(--s4) var(--s4);
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r3);
  box-shadow: var(--shadow-sm);
  transition: border-color .12s, box-shadow .12s;
}
.ts-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.ts-card .ts-link {
  display: inline; height: auto; padding: 0; gap: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit;
}
.ts-card .ts-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.ts-card .ts-link:focus-visible { outline: none; }
.ts-card:has(.ts-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.ts-card:hover .ts-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ts-card .more-src, .ts-card .ni-more { position: relative; z-index: 1; }
.ts-card .more-src { margin-left: auto; font-size: var(--fs-xs); }
.ts-card .ni-more { margin-top: 0; }
.ts-card .ni-more li { font-size: var(--fs-sm); }
@media (max-width: 899px) { .ts-card { padding: var(--s3); } }

/* --- benchmarks: display ranks, older-data badge, data-as-of --- */
.src-rank { font-size: var(--fs-xs); color: var(--text-3); cursor: help; }
.disp-rank { cursor: help; }
.old-data {
  display: inline-flex; align-items: center; gap: 4px; margin-left: var(--s2);
  height: 20px; padding: 0 7px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--warn);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.credit-asof.is-old { color: var(--warn); font-weight: 600; }

/* --- drawer variants: relation chip, id, then counts with units --- */
.vr-link { flex-wrap: wrap; row-gap: 0; }
.vr-main { display: flex; align-items: center; gap: var(--s2); flex: 1 1 240px; min-width: 0; }
.vr-stats { flex: none; margin-left: auto; color: var(--text-3); font-size: var(--fs-sm); white-space: nowrap; }
.dl-h-n { margin-left: 6px; font-weight: 500; color: var(--text-3); }
.rel { min-width: 76px; cursor: help; }
.rel-repackage { color: var(--text-2); background: var(--bg-sunken); }
.rel-sibling { color: var(--accent-text); background: var(--accent-soft); }

/* quality labels are full phrases now: let them wrap instead of truncating */
.qb-name { white-space: normal; overflow: visible; line-height: 1.3; }
@media (max-width: 640px) { .qb-list li { grid-template-columns: minmax(0, 1fr) minmax(64px, 34%) 36px; } }

/* --- round 3: breakout one-liners --- */
/* Row 1: rank · category · name · growth · momentum · tier · age. Row 2: the description, from
   the name to the row's end, so it has room to say what the project is. */
.breakout-link {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-auto-columns: auto;
  align-items: center; column-gap: var(--s2); row-gap: 0;
  height: auto; min-height: 48px; padding-top: 5px; padding-bottom: 6px;
}
.b-main { display: contents; }
.b-title { display: flex; align-items: center; gap: var(--s1); min-width: 0; grid-row: 1; grid-column: 3; }
.b-desc {
  grid-row: 2; grid-column: 3 / span 5; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-xs); line-height: 1.3; color: var(--text-3); font-weight: 400;
}
.breakout-link > :not(.b-main) { grid-row: 1; }
.b-vel { margin-left: 0; min-width: 0; }
@media (max-width: 767px) {
  .breakout-link { min-height: 48px; }
  .b-desc { grid-column: 3 / span 3; } /* tier and age are hidden on phones */
}

/* --- round 3: source labels on signals ("HF 111 likes") --- */
.sig-text { display: inline-flex; align-items: baseline; gap: 3px; }
.sig-tag { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); letter-spacing: .01em; }
.c-sig .sig-word, .c-sig .sig-tag { display: none; }
.src-legend { display: grid; gap: var(--s2); margin: var(--s2) 0; }
.src-legend li { display: flex; align-items: center; gap: var(--s3); }
.src-legend-ic { display: inline-flex; flex: none; }

/* --- round 3: momentum vs growth --- */
.mom-hint { color: var(--accent-text); font-weight: 600; }
.c-mom .mom-hint { display: block; font-size: var(--fs-xs); font-weight: 500; line-height: 1.1; }
.mom-why { display: flex; align-items: center; gap: 6px; margin-top: var(--s2); }
.mom-why .i { flex: none; color: var(--text-3); }
.dr-stat-label .help-link { vertical-align: middle; }

/* --- round 3: default launch window pill --- */
.pill.is-default { border-style: dashed; }

/* --- round 3: drawer signals and judge --- */
.dr-signals li.is-linked { color: var(--text-3); }
.dr-sig-note { margin-top: var(--s1); }
.judge-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.judge-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600; color: var(--text-2); border-bottom: 0;
}
.judge-badge .i { color: var(--accent-text); }
.judge-facts { color: var(--text-3); }

/* --- round 3: benchmarks, tappable ranks and the org under the model on phones --- */
.rank-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px;
  padding: 0 4px; border: 0; border-radius: var(--r2); background: none; color: inherit;
  font: inherit; font-variant-numeric: tabular-nums; cursor: pointer;
  text-decoration: underline dotted var(--text-3); text-underline-offset: 3px;
}
.rank-btn:hover { background: var(--bg-hover); }
.rank-btn[aria-expanded="true"] { text-decoration: none; background: var(--accent-soft); color: var(--accent-text); }
.src-rank-note { display: block; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.bm-org-sub { display: none; }
@media (max-width: 560px) {
  .bm-org-sub { display: block; margin-top: 1px; font-size: var(--fs-xs); color: var(--text-3); }
}

/* ================= v2.3: Home ================= */

/* Home spans the full width (no sidebar); the slim intro heads it. */
.layout[data-tab="home"] { grid-template-columns: minmax(0, 1fr); }
.layout[data-tab="home"] > .hero, .layout[data-tab="home"] > .main { grid-column: 1; }
.layout[data-tab="home"] > .hero { padding-right: 0; }

.home-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start;
  grid-template-areas: "main side" "cats side"; grid-template-rows: auto 1fr;
  gap: 40px; margin-top: var(--s5);
}
.home-main { grid-area: main; min-width: 0; }
.home-side { grid-area: side; display: flex; flex-direction: column; gap: var(--s6); min-width: 0; }

/* --- lead story: 16:9 media, then outlet line, headline, our summary --- */
.lead {
  position: relative; container-type: inline-size;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "media" "src" "title" "sum" "also";
}
.lead-media {
  grid-area: media; position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; border-radius: var(--r3);
  background: var(--bg-sunken); border: 1px solid var(--border);
}
.lead-src {
  grid-area: src; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
  margin-top: var(--s4); font-size: var(--fs-sm); color: var(--text-3);
}
.lead-outlet { font-weight: 600; color: var(--text-2); }
.lead-src .topic-chip { margin-left: var(--s1); }
.lead-title {
  grid-area: title; margin-top: var(--s2);
  font-size: clamp(22px, 3.4cqi, 30px); line-height: 1.2; font-weight: 700; letter-spacing: -.022em;
  color: var(--text); text-wrap: balance; max-width: 34ch;
}
.lead-link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--r3); }
.lead-link:focus-visible { outline: none; }
.lead:has(.lead-link:focus-visible) .lead-media { outline: 2px solid var(--focus); outline-offset: 2px; }
.lead:hover .lead-link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--cc) 55%, transparent); }
.lead-sum { grid-area: sum; margin-top: var(--s2); max-width: 68ch; font-size: 16px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.lead-also { grid-area: also; margin-top: var(--s2); font-size: var(--fs-sm); color: var(--text-3); }
.lead-title .ext-mark, .hn-title .ext-mark { font-size: .7em; color: var(--text-3); font-weight: 500; }

/* No image in the data: the headline itself is set on the generated card (one heading, no copy). */
.lead.is-gen .lead-title {
  grid-area: media; align-self: end; z-index: 1;
  margin: 0; padding: 0 clamp(16px, 5cqi, 40px) clamp(16px, 5cqi, 36px);
  font-size: clamp(20px, 4.8cqi, 46px); line-height: 1.1; letter-spacing: -.03em; max-width: 25ch;
  color: color-mix(in srgb, var(--cc) 34%, var(--text));
}
.lead.is-gen .lead-title .ext-mark { color: color-mix(in srgb, var(--cc) 60%, transparent); }
.lead.is-gen .lead-src { margin-top: var(--s3); }
.lead[data-media="card"] .lead-src .topic-chip { display: none; } /* the card names the topic */

/* --- generated card: category-tinted gradient + radar rings and sweep (the brand mark) --- */
.gen-card {
  position: absolute; inset: 0; color: var(--cc);
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--cc) 24%, transparent), transparent 62%),
    linear-gradient(165deg, color-mix(in srgb, var(--cc) 13%, var(--bg-elev)) 0%, color-mix(in srgb, var(--cc) 4%, var(--bg-elev)) 100%);
}
.gen-rings { position: absolute; right: -10%; top: -42%; width: 76%; height: auto; aspect-ratio: 1; overflow: visible; }
.gen-glyph {
  position: absolute; top: clamp(14px, 4.5cqi, 32px); left: clamp(16px, 5cqi, 40px);
  display: grid; place-items: center;
  width: clamp(36px, 7cqi, 60px); aspect-ratio: 1; border-radius: 28%;
  background: color-mix(in srgb, var(--cc) 15%, var(--bg-elev));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc) 22%, transparent);
}
.gen-glyph .i { width: 52%; height: 52%; }
.gen-label {
  position: absolute; top: clamp(14px, 4.5cqi, 32px); left: calc(clamp(16px, 5cqi, 40px) + clamp(36px, 7cqi, 60px) + 12px);
  height: clamp(36px, 7cqi, 60px); display: flex; align-items: center;
  font-size: clamp(13px, 1.9cqi, 16px); font-weight: 650; letter-spacing: -.005em;
}

/* real images sit over the generated card; if one fails, tab-home.js removes it */
.media-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.media-img.fit-cover { object-fit: cover; }
.media-img.fit-contain { object-fit: contain; background: var(--bg-elev); }
.lead-skel { padding-bottom: 16px; } /* about the real lead's text height: no jump when it lands */
.lead-skel .lead-media { border: 0; height: auto; }
.lead-skel .sk-line { margin-top: 16px; height: 18px; }
.lead-skel .sk-line + .sk-line { margin-top: 12px; height: 22px; }
.lead-skel .sk-line + .sk-line + .sk-line { margin-top: 8px; }

/* --- news cards under the lead --- */
.home-news { margin-top: var(--s6); }
.hn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.hn-card { min-width: 0; }
.hn-card-in {
  position: relative; display: flex; flex-direction: column; gap: var(--s2); height: 100%;
  padding: var(--s3) var(--s4) var(--s4);
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r3);
  transition: border-color .12s;
}
.hn-card-in:hover { border-color: var(--border-strong); }
.hn-card-in:has(.hn-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.hn-src { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; }
.hn-src .dot { margin: 0 -2px; }
.hn-outlet { font-weight: 600; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.hn-title {
  font-size: 15px; font-weight: 650; line-height: 1.36; letter-spacing: -.01em; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hn-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r3); }
.hn-link:focus-visible { outline: none; }
.hn-card-in:hover .hn-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hn-sum {
  font-size: var(--fs-md); line-height: 1.55; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hn-foot { margin-top: auto; padding-top: 2px; display: flex; }
.hn-foot .topic-chip { margin-left: 0; }
.hn-skel { height: 215px; border-radius: var(--r3); }
/* topic chips on Home take the story's tone */
.panel-home .topic-chip { color: var(--cc); background: var(--cc-tint); }
.hm-all-wrap { margin-top: var(--s4); }
.hm-all { font-size: var(--fs-md); font-weight: 600; color: var(--accent-text); }
.hm-all:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- side modules: separated by a rule, not boxed --- */
.hm-mod { border-top: 1px solid var(--border-strong); padding-top: var(--s3); }
.hm-mod-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.hm-mod-head h2 { font-size: 15px; font-weight: 700; letter-spacing: -.012em; color: var(--text); }
.hm-more { flex: none; font-size: var(--fs-sm); font-weight: 500; color: var(--accent-text); }
.hm-more:hover { text-decoration: underline; text-underline-offset: 2px; }
.hm-mod-sub { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-3); }
.hm-body { margin-top: var(--s2); }
.hm-list li + li, .hm-bench-list li + li { border-top: 1px solid var(--border); }
.hm-row, .hm-bench {
  display: flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 6px var(--s2); margin: 0 calc(-1 * var(--s2));
  border-radius: var(--r2); transition: background-color .12s;
}
.hm-row:hover, .hm-bench:hover { background: var(--bg-hover); }
.hm-row:focus-visible, .hm-bench:focus-visible { outline-offset: -2px; border-radius: var(--r2); }
.hm-rank { flex: none; width: 1em; text-align: right; font-size: var(--fs-sm); font-weight: 650; color: var(--text-3); }
.hm-cat { display: inline-flex; flex: none; }
.hm-main, .hm-bench-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hm-name, .hm-bench-model { font-size: var(--fs-md); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-row:hover .hm-name { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border-strong); }
.hm-desc { font-size: var(--fs-sm); line-height: 16px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-vel { flex: none; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.hm-vel-num { font-weight: 650; color: var(--t-rising-fg); white-space: nowrap; }
.hm-bench-board { font-size: var(--fs-sm); line-height: 16px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-bench-lead { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.hm-bench-org { flex: none; font-size: var(--fs-sm); color: var(--text-3); }
.hm-bench-side { flex: none; display: flex; align-items: baseline; gap: 6px; }
.hm-bench-score { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.hm-empty { padding: var(--s3) 0; font-size: var(--fs-md); color: var(--text-3); }
.hm-empty.is-error { color: var(--warn); }
.hm-skel { display: flex; flex-direction: column; }
.hm-skel-row { height: 46px; margin: 4px 0; border-radius: var(--r2); }
.hm-skel-paper { height: 188px; border-radius: var(--r3); }

/* paper of the day: a lightly tinted panel in its category colour */
.hm-paper {
  padding: var(--s3) var(--s4) var(--s4); border-radius: var(--r3);
  background: color-mix(in srgb, var(--cc) 6%, var(--bg-elev));
  border: 1px solid color-mix(in srgb, var(--cc) 20%, var(--border));
}
.hm-paper-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: var(--fs-sm); color: var(--text-3); }
.hm-paper-meta .cat-tile { margin-right: 2px; }
.hm-paper-cat { font-weight: 600; color: var(--cc); }
.hm-votes { display: inline-flex; align-items: center; gap: 3px; }
.hm-paper-title { margin-top: var(--s2); font-size: 16px; font-weight: 650; line-height: 1.35; letter-spacing: -.01em; text-wrap: pretty; }
.hm-paper-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hm-paper-title .ext-mark { font-size: .75em; color: var(--text-3); font-weight: 500; }
.hm-paper-sum { margin-top: 6px; font-size: var(--fs-base); line-height: 1.55; color: var(--text-2); }
.hm-paper-links { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.hm-paper-links .sec-link { height: 28px; padding: 0 8px; }

/* --- browse by category --- */
.home-cats { grid-area: cats; min-width: 0; }
.cat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: var(--s2); }
.cat-card {
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 var(--s3) 0 var(--s2);
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r3);
  font-size: var(--fs-md); font-weight: 550; color: var(--text);
  transition: border-color .12s, background-color .12s;
}
.cat-card:hover { border-color: color-mix(in srgb, var(--cc) 45%, var(--border)); background: color-mix(in srgb, var(--cc) 5%, var(--bg-elev)); }
.cat-card:focus-visible { outline-offset: 2px; border-radius: var(--r3); }
.cat-card-label { flex: 1; min-width: 0; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cat-card-n { flex: none; font-size: var(--fs-sm); font-weight: 500; color: var(--text-3); }
.cat-cards-skel { height: 216px; border-radius: var(--r3); }

/* momentum-ranked lists: the subtitle carries the "85 = momentum" legend; each row ends in the box */
.hm-mod-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s2); }
.hm-mod-sub .b-legend { margin-left: auto; }
.hm-mod-sub > span:first-child:not(.b-legend) { flex-basis: 100%; }
.hm-vel .b-mom { display: inline-block; }
.hm-mod { scroll-margin-top: calc(var(--header-h) + 12px); } /* the strip's "More" jumps here */

/* --- phones: swipeable "Hottest right now" strip right under the lead --- */
.hm-strip { display: none; }
@media (max-width: 600px) {
  .hm-strip:not([hidden]) { display: block; margin-top: var(--s5); }
  .hs-head { display: flex; align-items: baseline; gap: var(--s2); }
  .hs-h { font-size: 15px; font-weight: 700; letter-spacing: -.012em; color: var(--text); }
  .hs-head .b-legend { margin-left: 0; }
  .hs-head .hm-more { margin-left: auto; }
  .hs-list {
    position: relative; display: flex; gap: var(--s2); margin: var(--s2) calc(-1 * var(--gutter, 16px)) 0; padding: 2px var(--gutter, 16px) 6px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter, 16px);
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .hs-list::-webkit-scrollbar { display: none; }
  .hs-list li { flex: none; scroll-snap-align: start; }
  .hs-list li { width: 232px; }
  .hs-chip {
    position: relative; /* keeps the visually-hidden text inside the scroller (no page-wide overflow) */
    display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 100%; min-height: 64px; padding: 8px 10px;
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r3);
    color: var(--text);
  }
  .hs-chip:active { border-color: color-mix(in srgb, var(--cc) 45%, var(--border)); }
  .hs-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .hs-name { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hs-desc { font-size: var(--fs-sm); line-height: 16px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hs-chip .b-mom { cursor: inherit; }
  .hm-strip:not([hidden]) + .home-news { margin-top: var(--s4); }
}

/* --- footer additions --- */
.footer-extra { display: contents; }
.footer-links a.link-btn { font-size: var(--fs-md); color: var(--text-2); padding: 4px 2px; }
.footer-links a.link-btn:hover { color: var(--text); }
.footer-disclaimer { flex-basis: 100%; font-size: var(--fs-xs); color: var(--text-3); }

/* --- Home responsive --- */
@media (max-width: 1239px) {
  .home-grid { grid-template-columns: minmax(0, 1fr) 300px; column-gap: var(--s6); }
  .hn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side" "cats"; grid-template-rows: none; margin-top: var(--s3); }
  .lead-media { border-radius: var(--r2); }
}
@media (max-width: 560px) {
  .hn-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .hn-skel { height: 168px; }
  .lead-sum { font-size: 15px; }
  .cat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-card { height: 44px; gap: 8px; padding-left: 6px; }
  .cat-cards-skel { height: 408px; }
  .hn-card:nth-child(n+5) { display: none; } /* phones: four stories, then the modules */
}
@media (max-width: 767px) {
  .hm-row, .hm-bench { min-height: 56px; }
}
@media (max-width: 479px) {
  .tab { font-size: var(--fs-sm); }
}

/* tab counts arrive with meta.json: hold their place so the tab row doesn't shift */
@media (min-width: 480px) {
  .tab-count:empty { display: inline-block; visibility: hidden; min-width: 2.4em; }
}

/* --- v2.6: "New since your last visit" marks (accent; text for screen readers) --- */
.new-pill {
  display: inline-flex; align-items: center; flex: none; margin-left: var(--s2); padding: 0 6px; border-radius: 999px; line-height: 18px;
  font-size: var(--fs-xs); font-weight: 650; color: var(--accent-text); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}
.new-dot {
  display: inline-block; flex: none; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%;
  background: var(--accent); vertical-align: middle; position: relative; top: -1px;
}
.card-head .new-pill { margin-left: 0; align-self: center; }
.hn-foot .new-pill, .lead-src .new-pill { margin-left: var(--s1); }
.hm-since {
  display: flex; align-items: flex-start; gap: 8px; margin: calc(-1 * var(--s2)) 0 var(--s3);
  font-size: var(--fs-md); line-height: 18px; color: var(--text-2);
}
.hm-since::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 5.5px; border-radius: 50%; background: var(--accent); }
.hm-since[hidden] { display: none; }

/* --- v2.6: magnitude chip and the "Big this week" strip --- */
.mag-chip {
  display: inline-flex; align-items: center; flex: none; padding: 0 7px; border-radius: 4px; line-height: 18px;
  font-size: var(--fs-xs); font-weight: 650; letter-spacing: .01em;
  color: var(--t-hot-fg); background: var(--t-hot-bg); box-shadow: inset 0 0 0 1px var(--t-hot-bd);
}
.mag-chip.mag-5 { color: var(--t-viral-fg); background: var(--t-viral-bg); box-shadow: inset 0 0 0 1px var(--t-viral-bd); }
.lead-src .mag-chip, .hn-foot .mag-chip { margin-left: var(--s1); }
.hm-big { margin-top: var(--s6); border-top: 1px solid var(--border-strong); padding-top: var(--s3); }
.hm-big[hidden] { display: none; }
.bw-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--s2); }
.bw-h { font-size: 15px; font-weight: 700; letter-spacing: -.012em; color: var(--text); }
.bw-sub { font-size: var(--fs-sm); color: var(--text-3); }
.bw-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s5); margin-top: var(--s2); }
.bw-item { position: relative; min-width: 0; padding: var(--s2) 0 var(--s3); border-top: 1px solid var(--border); }
.bw-list > .bw-item:nth-child(-n+2) { border-top: 0; }
/* one row when there are 1-3 stories (no half-empty second row); 2 x 2 for four */
.bw-list[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.bw-list[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bw-list[data-n="3"] > .bw-item:nth-child(3) { border-top: 0; }
.bw-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; }
.bw-meta .dot { margin: 0 -2px; }
.bw-outlet { font-weight: 600; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.bw-title {
  margin-top: 4px; font-size: var(--fs-base); font-weight: 600; line-height: 1.4; letter-spacing: -.006em; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bw-title .ext-mark { font-size: .75em; color: var(--text-3); font-weight: 500; }
.bw-link::after { content: ""; position: absolute; inset: 0; }
.bw-link:focus-visible { outline: none; }
.bw-item:has(.bw-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r2); }
.bw-item:hover .bw-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (max-width: 1239px) {
  /* narrower main column: three side-by-side headlines get cramped; list them instead */
  .bw-list[data-n="3"] { grid-template-columns: minmax(0, 1fr); }
  .bw-list[data-n="3"] > .bw-item:nth-child(n+2) { border-top: 1px solid var(--border); }
}
@media (max-width: 600px) {
  /* phones keep the strip after the four cards (tried above them: today's cards then started more
     than a screen down, behind 3-5-day-old stories) */
  .hm-big { margin-top: var(--s5); }
  .bw-list, .bw-list[data-n] { grid-template-columns: minmax(0, 1fr); }
  .bw-list > .bw-item:nth-child(n+2), .bw-list[data-n="3"] > .bw-item:nth-child(3) { border-top: 1px solid var(--border); }
}
@media (forced-colors: active) {
  .new-dot, .hm-since::before { background: CanvasText; }
}

/* ================= v2.7: launch week (watchlist, try it, share, density) ================= */

/* --- ☆ save toggles: outline star, filled and gold once saved --- */
.star-btn {
  position: relative; z-index: 1; /* above a card's stretched link */
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; padding: 0; margin: -4px -6px -4px 0;
  border: 0; border-radius: 999px; background: none; color: var(--text-3);
  transition: color .12s, background-color .12s;
}
.star-btn:hover { color: var(--star); background: color-mix(in srgb, var(--star) 12%, transparent); }
.star-btn .i { grid-area: 1 / 1; }
.star-btn .i:last-of-type, .btn-star .i:last-of-type { display: none; }
.star-btn[aria-pressed="true"] .i:first-of-type, .btn-star[aria-pressed="true"] .i:first-of-type { display: none; }
.star-btn[aria-pressed="true"] .i:last-of-type, .btn-star[aria-pressed="true"] .i:last-of-type { display: inline-block; }
.star-btn[aria-pressed="true"] { color: var(--star); }
.star-btn-sm { width: 26px; height: 26px; margin: 0; }
.row-name .star-btn { margin: -4px 0; }
.btn-star[aria-pressed="true"] { color: var(--text); }
.btn-star[aria-pressed="true"] .i { color: var(--star); }
@keyframes star-pop { 50% { transform: scale(1.25); } }
.star-btn[aria-pressed="true"] .i:last-of-type { animation: star-pop .25s ease-out; }

/* Home lists: the ☆ sits beside the row link */
.hm-li { position: relative; display: flex; align-items: center; gap: 2px; }
.hm-li > .hm-row { flex: 1; min-width: 0; }

/* Projects: "☆ Watching N" chip next to the search */
.watch-toggle .i { color: var(--star); }
.watch-toggle[aria-pressed="true"] { background: color-mix(in srgb, var(--star) 12%, var(--bg-elev)); border-color: color-mix(in srgb, var(--star) 45%, var(--border)); color: var(--text); }
.tb-main .watch-toggle { height: var(--ctl-h-lg); }

/* --- tier pill for buzz-driven momentum ("Popular on HN" / "Buzz") instead of "Calm growth" --- */
.tier.tier-buzz { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-border); }
.tt-buzz { color: var(--accent-text); }

/* --- drawer: caution note, actions, sticky phone bar --- */
.dr-caution {
  display: flex; align-items: baseline; gap: 6px; margin: 0 0 var(--s3);
  font-size: var(--fs-sm); line-height: 1.45; color: var(--warn); cursor: help;
}
.dr-actions .btn-try, .dr-bar .btn-try { gap: 5px; }
.dr-actions .btn-star { margin-left: auto; }
.dr-foot { display: none; }
@media (max-width: 640px) {
  .dr-body .dr-actions { display: none; }
  .dr-foot:not(:empty) {
    display: block; flex: none;
    padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border); background: var(--bg-elev);
    box-shadow: 0 -6px 16px -12px rgba(0, 0, 0, .35);
  }
  .dr-bar { display: flex; gap: var(--s2); }
  .dr-bar .btn { flex: 1 1 0; min-width: 0; height: 44px; justify-content: center; padding: 0 8px; font-size: var(--fs-md); }
  .dr-bar .btn-try { flex: 1.4 1 0; }
  .dr-bar .btn > span:not(.visually-hidden) { overflow: hidden; text-overflow: ellipsis; }
  .dr-bar .btn .i { flex: none; }
  .dr-bar .btn-try .i { display: none; } /* room for the words */
  .dr-bar .btn { gap: 5px; padding: 0 6px; }
  .dr-body { padding-bottom: var(--s5); }
}
@media (max-width: 360px) {
  .dr-bar .btn-star .star-label, .dr-bar [data-action="share"] span { display: none; }
}
/* sharing: Post on X / Copy link inline on wide screens; on phones in the bar's "More" menu */
.dr-actions .btn-x .i { width: 13px; height: 13px; }
.dr-more { position: relative; flex: none; }
.dr-more-btn { list-style: none; cursor: pointer; }
.dr-more-btn::-webkit-details-marker { display: none; }
.dr-bar .dr-more-btn { flex: none; width: 44px; padding: 0; }
@media (max-width: 440px) {
  /* five controls in the phone bar: Open and Share become icons (their words stay for screen readers) */
  .dr-bar > .btn:not(.btn-try):not(.btn-star) { flex: none; width: 44px; position: relative; }
  .dr-bar > .btn:not(.btn-try):not(.btn-star) > span:not(.visually-hidden) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
.dr-more-menu {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; min-width: 180px;
  display: flex; flex-direction: column; padding: 4px;
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--r3);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .45);
}
.dr-more-item {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: var(--r2);
  font: inherit; font-size: var(--fs-md); color: var(--text); background: none; border: 0; text-align: left; cursor: pointer;
}
.dr-more-item:hover, .dr-more-item:focus-visible { background: var(--bg-sunken); }

/* --- toast --- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  transform: translateX(-50%); max-width: calc(100vw - 32px);
  padding: 10px 16px; border-radius: 999px;
  background: var(--text); color: var(--bg); box-shadow: var(--shadow-lg);
  font-size: var(--fs-md); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: toast-in .18s ease-out; transition: opacity .2s;
}
.toast.is-out { opacity: 0; }
.drawer .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 641px) { .drawer .toast { bottom: 24px; left: auto; right: 24px; transform: none; } }
@keyframes toast-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* --- Home: "Since yesterday: ..." strip --- */
.hm-since { flex-wrap: wrap; column-gap: 0; }
.hm-since .since-lead { font-weight: 650; color: var(--text); margin-right: 6px; }
.hm-since .dot { margin: 0 6px; }
.since-link { color: var(--accent-text); font-weight: 600; }
.since-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* --- Home: "Your watchlist" --- */
.hm-desc.wl-line { color: var(--text-3); white-space: normal; }
.hm-desc.wl-line.is-up { color: var(--t-rising-fg); font-weight: 550; }
.hm-watch { scroll-margin-top: calc(var(--header-h) + 12px); }

/* --- Home: "Try it in your browser" shelf --- */
.hm-try { margin-top: var(--s6); }
.try-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--s2); }
.try-h { font-size: 15px; font-weight: 700; letter-spacing: -.012em; color: var(--text); }
.try-sub { font-size: var(--fs-sm); color: var(--text-3); }
.try-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s2); }
.try-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: var(--s3); border-radius: var(--r3);
  background: linear-gradient(170deg, color-mix(in srgb, var(--cc) 7%, var(--bg-elev)), var(--bg-elev) 60%);
  border: 1px solid color-mix(in srgb, var(--cc) 18%, var(--border));
}
.try-card.skeleton { height: 146px; border: 0; }
.try-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.try-cat { display: inline-flex; flex: none; }
.try-name { min-width: 0; font-size: var(--fs-base); font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.try-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.try-desc {
  font-size: var(--fs-sm); line-height: 1.45; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.45em);
}
.try-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: auto; padding-top: 4px; }
.btn-try { height: 30px; padding: 0 12px; }
.try-host { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; }
.try-host > span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1099px) { /* four demos from 1100px, three below */
  .try-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .try-list > :nth-child(n+4) { display: none; }
}
@media (max-width: 899px) {
  .hm-try { margin-top: var(--s5); }
}
@media (max-width: 600px) {
  /* phones: one swipeable row, right under the lead */
  .try-list {
    display: flex; gap: var(--s2); margin: var(--s2) calc(-1 * var(--s4)) 0; padding: 2px var(--s4) 6px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--s4); scrollbar-width: none;
  }
  .try-list::-webkit-scrollbar { display: none; }
  .try-list > * { flex: 0 0 248px; scroll-snap-align: start; }
  .try-list > :nth-child(n+4) { display: flex; }
  .try-sub { display: none; }
  .hm-try:not([hidden]) + .hm-strip:not([hidden]) { margin-top: var(--s4); }
  /* the strip under the lead is the only "Hottest" list on phones (no repeat further down) */
  #hm-hot-sec { display: none; }
}

/* --- Projects: breakout rows give the name the room (growth only takes what it needs) --- */
.b-vel { min-width: 0; }
.b-tier { width: auto; }
.b-age { min-width: 0; }

/* --- phones: denser project cards (about 3.5+ per 812px screen): one metric row, the description
   clamped to 2 lines, and one chip row (category · kind · age · gem); signals stay on one line --- */
@media (max-width: 560px) {
  .grid { gap: var(--s2); }
  .card { padding: 14px; }
  .card-meta { margin-top: 6px; }
  .card .desc { margin-top: var(--s2); margin-bottom: 10px; line-height: 1.4; height: calc(2 * 1.4em); }
  .card-stats { padding-top: var(--s2); align-items: baseline; }
  .card-stats .vel-big .vel-num { font-size: 15px; }
  .card .momentum { font-size: 15px; }
  .card-foot { margin-top: 4px; flex-wrap: nowrap; }
  .card-foot .signals { flex-wrap: wrap; height: 18px; overflow: hidden; gap: 0 10px; } /* whole signals only: the ones that do not fit drop out */
  .card-foot .variants-chip, .card-foot .ai-chip { display: none; } /* in the details */
}
@media (max-width: 1239px) and (min-width: 900px) {
  /* two narrow columns: the launch age moves down beside the description, so the name keeps ~50px more */
  .breakout-link { column-gap: 6px; }
  .breakout-link > .b-age { grid-row: 2; grid-column: 4 / span 3; justify-self: end; font-size: var(--fs-xs); line-height: 1.3; }
  .b-desc { grid-column: 3 / span 1; }
}

/* --- Home: news cards fill whole rows (cardGrid in home-stories.js): no card alone on a row --- */
@media (min-width: 1240px) {
  .hn-grid[data-n="4"], .hn-grid[data-n="2"], .hn-grid[data-n="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hn-grid[data-n="5"] > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 561px) and (max-width: 1239px) {
  .hn-grid[data-n="3"] > :first-child, .hn-grid[data-n="5"] > :first-child { grid-column: 1 / -1; }
}
.hn-grid[data-n="1"] { grid-template-columns: minmax(0, 1fr); }

/* four narrow demo cards (1100-1239px): the host hint keeps its icon (and tooltip), not the words */
@media (min-width: 1100px) and (max-width: 1239px) {
  .try-host > span { display: none; }
}

/* --- Home, first visit on desktop and tablets: "Try it in your browser" right under the intro --- */
@media (min-width: 601px) {
  .home-main { display: flex; flex-direction: column; }
  .panel-home.is-first-visit .hm-try { order: -1; margin-top: 0; margin-bottom: var(--s5); }
}

/* --- Home, phones on a return visit: the watchlist sits under the since strip when saved projects moved --- */
.home-main > .hm-watch { margin-top: var(--s3); margin-bottom: var(--s5); }