/* directory.css — AffiliatesML directory styles.
   The :root tokens below define the canonical design system. Anything that
   loads this stylesheet (Directory layout OR Base layout) gets them.
   Previously these lived in Directory.astro's inline <style>, which meant
   Base pages loading directory.css had undefined --font-sans etc. and
   fell back to browser-default Times. */

:root {
    --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --ink: #0a1730;
    --ink-90: #0e1b3a;
    --ink-70: #384566;
    --ink-50: #5d6c8a;
    --ink-40: #8a96ad;
    --ink-30: rgba(10,23,48,0.30);
    --ink-15: rgba(10,23,48,0.15);
    --ink-08: rgba(10,23,48,0.08);
    --ink-04: rgba(10,23,48,0.04);
    --bg: #fafbfc;
    --bg-elev: #ffffff;
    --bg-tint: #f4f6fa;
    /* Primary accent: vivid violet. Secondary: coral for rising/warm signals. */
    --accent: #7C3AED;
    --accent-soft: rgba(124,58,237,0.10);
    --accent-ink: #5B21B6;
    --accent-warm: #FF6B4A;
    --accent-warm-soft: rgba(255,107,74,0.12);
    --accent-warm-ink: #B23E1F;
    --border: rgba(10,23,48,0.10);
    --border-soft: rgba(10,23,48,0.06);
    --heat-new:      oklch(70% 0.18 155);
    --heat-trend:    oklch(66% 0.20 35);
    --heat-verified: oklch(62% 0.16 220);
    --heat-watch:    oklch(70% 0.16 60);
    --heat-est:      oklch(70% 0.02 250);

    /* Aliases so cookie banner / older components that reference --border /
       --text-soft from older style sheets still resolve. */
    --text-soft: var(--ink-70);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-feature-settings: "ss01", "cv11"; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.app { min-height: 100vh; display: flex; flex-direction: column; }
button { font-family: inherit; }
input, select { font-family: inherit; color: inherit; }
kbd { font-family: var(--font-mono); font-size: 10px; padding: 1px 5px; border-radius: 3px; background: var(--ink-08); color: var(--ink-70); }

/* ───────── Header ───────── */
.hdr { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--border-soft); }
.hdr-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding: 12px 28px; max-width: 1600px; margin: 0 auto; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.logo-wm { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.logo-ml { color: var(--accent); }
.hdr-nav { display: flex; gap: 4px; }
.hdr-nav-a { padding: 6px 10px; border-radius: 6px; color: var(--ink-70); text-decoration: none; font-size: 13px; font-weight: 500; }
.hdr-nav-a:hover { background: var(--ink-04); color: var(--ink); }
.hdr-nav-a.is-active { color: var(--ink); background: var(--ink-08); }
.hdr-actions { display: flex; gap: 8px; align-items: center; }
.btn { padding: 7px 12px; border-radius: 7px; border: 1px solid transparent; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 80ms; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn-ghost { background: transparent; color: var(--ink-70); }
.btn-ghost:hover { background: var(--ink-04); color: var(--ink); }
.btn-primary { background: var(--ink); color: var(--bg-elev); }
.btn-primary:hover { background: var(--ink-90); }
.btn-secondary { background: var(--bg-elev); color: var(--ink); border-color: var(--border); }
.btn-secondary:hover { background: var(--ink-04); border-color: var(--ink-15); }
.btn-accent { background: var(--accent); color: var(--bg-elev); }
.btn-accent:hover { background: color-mix(in oklab, var(--accent), black 12%); }

/* ───────── Mobile menu (hamburger button + slide-in drawer) ─────────
   Button hidden on desktop; drawer hidden by default and slides in from
   the right when `body.mobile-menu-open` is set. Body scroll locks while open. */
.hdr-menu-btn {
    display: none;
    background: none; border: 0; padding: 6px;
    color: var(--ink); cursor: pointer;
    border-radius: 6px;
}
.hdr-menu-btn:hover { background: var(--ink-04); }
.hdr-drawer { display: none; }
@media (max-width: 880px) {
    .hdr-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
    .hdr-actions .btn-ghost { display: none; }
    .hdr-actions .btn-primary { display: none; }
    /* Pin .hdr-actions to the right of the header. Without this, the actions
       block (now containing only the hamburger button) can drift toward the
       logo because the middle 1fr grid track collapses when its nav content
       is hidden. justify-self: end + margin-left: auto belt-and-suspenders. */
    .hdr-actions { justify-self: end; margin-left: auto; }
    .hdr-drawer {
        display: block;
        position: fixed; inset: 0;
        z-index: 200; pointer-events: none;
    }
    .hdr-drawer-bg {
        position: absolute; inset: 0;
        background: rgba(10,23,48,0.45);
        opacity: 0; transition: opacity 180ms ease;
    }
    .hdr-drawer-panel {
        position: absolute; top: 0; right: 0; bottom: 0;
        width: min(280px, 80vw);
        background: var(--bg-elev);
        box-shadow: -8px 0 24px rgba(10,23,48,0.15);
        padding: 16px 14px;
        display: flex; flex-direction: column; gap: 4px;
        transform: translateX(100%);
        transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
        overflow-y: auto;
    }
    .hdr-drawer-close {
        align-self: flex-end;
        background: none; border: 0; cursor: pointer;
        font-size: 24px; line-height: 1; padding: 4px 10px;
        color: var(--ink-50); margin-bottom: 4px;
    }
    .hdr-drawer-close:hover { color: var(--ink); }
    .hdr-drawer-link {
        display: block; padding: 10px 12px;
        font-size: 15px; font-weight: 500;
        color: var(--ink); text-decoration: none;
        border-radius: 6px;
    }
    .hdr-drawer-link:hover { background: var(--ink-04); color: var(--accent); }
    .hdr-drawer-cta {
        background: var(--ink); color: var(--bg-elev);
        margin-top: 4px; text-align: center;
    }
    .hdr-drawer-cta:hover { background: var(--ink-90); color: var(--bg-elev); }
    .hdr-drawer-hr {
        border: 0; height: 1px; background: var(--border-soft);
        margin: 8px 4px;
    }
    /* Open state */
    body.mobile-menu-open { overflow: hidden; }
    body.mobile-menu-open .hdr-drawer { pointer-events: auto; }
    body.mobile-menu-open .hdr-drawer-bg { opacity: 1; }
    body.mobile-menu-open .hdr-drawer-panel { transform: translateX(0); }
}

/* ───────── Ticker ───────── */
.ticker { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-tint) 100%); border-bottom: 1px solid var(--border-soft); overflow: hidden; }
.ticker-inner { display: flex; align-items: center; gap: 18px; padding: 7px 28px; max-width: 1600px; margin: 0 auto; font-size: 12px; white-space: nowrap; }
.ticker-label { display: flex; align-items: center; gap: 6px; color: var(--ink-70); font-weight: 600; flex-shrink: 0; white-space: nowrap; }
.ticker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--heat-new); box-shadow: 0 0 0 0 var(--heat-new); animation: tickerPulse 1.6s ease-out infinite; }
@keyframes tickerPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--heat-new), transparent 30%); }
  70%  { box-shadow: 0 0 0 7px color-mix(in oklab, var(--heat-new), transparent 100%); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--heat-new), transparent 100%); }
}
.ticker-sep { color: var(--ink-30); }
.ticker-feed { display: flex; gap: 16px; overflow: hidden; white-space: nowrap; flex: 1; min-width: 0; }
.ticker-item { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-70); }
/* Ticker entries are now anchor tags pointing to /programs/<id>/. Strip the
   default link styling and add a hover lift so they read as clickable without
   visually breaking the ticker rhythm. */
.ticker-item-link { text-decoration: none; padding: 2px 4px; margin: 0 -4px; border-radius: 4px; transition: background 80ms, color 80ms; }
.ticker-item-link:hover { background: var(--accent-soft); color: var(--ink); }
.ticker-item-link:hover .ticker-name { color: var(--accent-ink); }
.ticker-name { color: var(--ink); font-weight: 500; }
.ticker-meta { color: var(--ink-50); font-family: var(--font-mono); font-size: 11px; }
.ticker-bullet { color: var(--ink-30); }
.ticker-stats { margin-left: auto; flex-shrink: 0; padding-left: 16px; border-left: 1px solid var(--border-soft); }
.ticker-stat { color: var(--ink-70); }
.ticker-stat b { color: var(--ink); font-weight: 600; }
.ticker-stat-mono { font-family: var(--font-mono); font-size: 11px; color: var(--ink-50); }
.disc-ago { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; color: var(--heat-new); font-weight: 500; }
.disc-pulse { width: 5px; height: 5px; border-radius: 50%; background: var(--heat-new); animation: discPulse 1.4s ease-out infinite; }
@keyframes discPulse {
  0%   { opacity: 1; transform: scale(1); }
  50%  { opacity: .4; transform: scale(1.4); }
  100% { opacity: 1; transform: scale(1); }
}

/* ───────── Shell ───────── */
.shell { display: grid; grid-template-columns: 264px 1fr; gap: 32px; max-width: 1600px; width: 100%; margin: 0 auto; padding: 20px 28px 80px; align-items: start; }
.sidebar { position: sticky; top: 56px; max-height: calc(100vh - 64px); overflow-y: auto; padding-right: 4px; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--ink-15); border-radius: 3px; }
.main { min-width: 0; }

/* ───────── Sidebar filters ───────── */
.sb-hd { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0 12px; border-bottom: 1px solid var(--border-soft); margin-bottom: 8px; }
.sb-hd-ttl { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-70); }
.sb-hd-clear { background: none; border: 0; color: var(--accent); font-size: 11px; cursor: pointer; padding: 0; }
.sb-hd-clear:hover { text-decoration: underline; }

.flt-grp { border-bottom: 1px solid var(--border-soft); }
.flt-grp-hd { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 12px 0; background: none; border: 0; cursor: pointer; color: var(--ink); }
.flt-grp-title { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.flt-grp-meta { display: flex; align-items: center; gap: 8px; color: var(--ink-50); }
.flt-grp-badge { background: var(--accent-soft); color: var(--accent-ink); font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 10px; font-family: var(--font-mono); min-width: 16px; text-align: center; }
.flt-grp-chev { transition: transform 120ms; }
.flt-grp-body { padding: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }

.flt-check { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 4px 0; color: var(--ink); font-size: 13px; }
.flt-check input { position: absolute; opacity: 0; pointer-events: none; }
.flt-check-box { width: 15px; height: 15px; border: 1px solid var(--ink-30); border-radius: 4px; background: var(--bg-elev); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--bg-elev); transition: background 80ms, border-color 80ms; }
.flt-check input:checked + .flt-check-box { background: var(--ink); border-color: var(--ink); }
.flt-check-lbl { flex: 1; }
.flt-check-cnt { font-family: var(--font-mono); font-size: 11px; color: var(--ink-50); font-variant-numeric: tabular-nums; }
.flt-check:hover .flt-check-box { border-color: var(--ink-50); }

.flt-search { position: relative; margin-bottom: 8px; }
.flt-search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--ink-50); pointer-events: none; }
.flt-search input { width: 100%; padding: 6px 8px 6px 24px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-elev); font-size: 12px; outline: none; }
.flt-search input:focus { border-color: var(--ink-50); }
.flt-list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.flt-empty { font-size: 12px; color: var(--ink-50); padding: 8px 0; }

/* heat chips */
.heat-legend { display: flex; flex-direction: column; gap: 4px; }
.heat-chip { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--ink-04); border: 1px solid transparent; cursor: pointer; text-align: left; transition: background 80ms; }
.heat-chip:hover { background: var(--ink-08); }
.heat-chip.is-on { background: var(--bg-elev); border-color: var(--ink); }
.heat-chip-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.heat-chip-lbl { flex: 1; font-size: 12px; color: var(--ink); }
.heat-chip-cnt { font-family: var(--font-mono); font-size: 11px; color: var(--ink-50); }

/* range slider */
.rng { display: flex; flex-direction: column; gap: 4px; padding: 4px 6px; }
.rng-lbl-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--ink-70); margin-bottom: 2px; }
.rng-vals { display: none; }
.rng-track { position: relative; height: 28px; }
.rng-hist { position: absolute; inset: 4px 0 12px; display: flex; gap: 1px; align-items: flex-end; pointer-events: none; }
.rng-hist-bar { flex: 1; background: var(--ink-15); border-radius: 1px 1px 0 0; min-height: 1px; }
.rng-fill { position: absolute; bottom: 11px; height: 3px; background: var(--ink); border-radius: 2px; }
.rng-handle { position: absolute; bottom: 7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--bg-elev); border: 2px solid var(--ink); cursor: grab; padding: 0; box-shadow: 0 1px 2px rgba(0,0,0,.1); transition: transform 80ms; }
.rng-handle:hover { transform: scale(1.15); }
.rng-handle:active { cursor: grabbing; transform: scale(1.2); }
.rng-track::before { content: ''; position: absolute; left: 0; right: 0; bottom: 11px; height: 3px; background: var(--ink-15); border-radius: 2px; }

/* segmented + chips */
.seg { display: flex; gap: 4px; background: var(--ink-04); padding: 3px; border-radius: 7px; }
.seg-btn { flex: 1; padding: 5px 8px; background: none; border: 0; border-radius: 5px; font-size: 12px; color: var(--ink-70); cursor: pointer; }
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-on { background: var(--bg-elev); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.cb-row { display: flex; flex-direction: column; gap: 4px; }

.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { padding: 4px 9px; border-radius: 11px; font-size: 11px; background: var(--ink-04); border: 1px solid transparent; color: var(--ink-70); cursor: pointer; font-family: var(--font-mono); }
.chip:hover { background: var(--ink-08); }
.chip.is-on { background: var(--ink); color: var(--bg-elev); }

/* ───────── Toolbar ───────── */
.tb { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 12px 16px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 10px; position: sticky; top: 56px; z-index: 20; margin-bottom: 12px; box-shadow: 0 1px 0 var(--border-soft); }
.tb-search { position: relative; display: flex; align-items: center; }
.tb-search-ic { position: absolute; left: 10px; color: var(--ink-50); pointer-events: none; }
.tb-search-input { width: 100%; padding: 8px 80px 8px 32px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); font-size: 13px; outline: none; }
.tb-search-input:focus { border-color: var(--ink-50); }
.tb-kbd { position: absolute; right: 6px; padding: 3px 6px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 5px; display: flex; gap: 1px; cursor: pointer; }
.tb-kbd kbd { background: transparent; padding: 0; font-size: 10px; color: var(--ink-50); }
.tb-kbd:hover { border-color: var(--ink-50); }

.tb-meta { font-size: 12px; color: var(--ink-70); }
.tb-count-n { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.tb-count-of { color: var(--ink-50); margin-left: 4px; }
.tb-count-flt { margin-left: 6px; color: var(--accent); }
.tb-count { white-space: nowrap; }
.tb-meta { white-space: nowrap; }

.tb-right { display: flex; gap: 12px; align-items: center; }
.tb-sort { display: flex; gap: 6px; align-items: center; }
.tb-sort label { font-size: 12px; color: var(--ink-50); }
.tb-sort select { padding: 5px 24px 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); font-size: 12px; cursor: pointer; outline: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M1 3l3 3 3-3' stroke='%23888' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; }
.tb-density { padding: 2px; }
.tb-density .seg-btn { padding: 5px 8px; line-height: 0; }

/* ───────── Active pills ───────── */
.apl { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.apl-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 4px 10px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-ink); border: 0; font-size: 12px; cursor: pointer; }
.apl-pill svg { opacity: .5; }
.apl-pill:hover svg { opacity: 1; }
.apl-clear { background: none; border: 0; color: var(--ink-50); font-size: 12px; cursor: pointer; padding: 4px 8px; }
.apl-clear:hover { color: var(--ink); text-decoration: underline; }

/* ───────── Rows ───────── */
.rows { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
/* 9-col grid: check / name / commission / cookie / network / vertical /
   rank / trend / cta. Brand column was folded into Rank as a composite
   score on 2026-05-26. */
.rows-hd { display: grid; grid-template-columns: 32px minmax(160px, 1.3fr) 120px 50px 110px 140px 60px 85px 170px; gap: 12px; padding: 8px 16px 8px 22px; align-items: center; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-50); border-bottom: 1px solid var(--border-soft); background: var(--bg-tint); }

.row { display: grid; grid-template-columns: 32px minmax(160px, 1.3fr) 120px 50px 110px 140px 60px 85px 170px; gap: 12px; padding: 14px 16px 14px 22px; align-items: center; position: relative; border-bottom: 1px solid var(--border-soft); transition: background 80ms; }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--ink-04); }
.row.is-checked { background: var(--accent-soft); }
.row.is-hover .row-cta-btn { opacity: 1; }

/* Simple rows variant — used on /networks/[slug] and /verticals/[slug].
   Drops Rank, Trend, and CTA columns; rank is shown inline next to the
   program name via .row-name-rank. Six-column grid; share padding with
   the default .row so heights align between pages if the user navigates
   back to /programs/. */
.rows-simple .rows-hd,
.rows-simple .row { grid-template-columns: 32px minmax(150px, 1.2fr) 110px 45px 100px 120px; }

.row-name-ttl-wrap { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.row-name-rank {
    font-size: 11px; color: var(--ink-50); letter-spacing: 0.02em;
    padding: 2px 6px; border-radius: 4px; background: var(--ink-04);
    border: 1px solid var(--border-soft); white-space: nowrap;
    line-height: 1;
}

/* Mini rating shown in row sub-line + card sub-line: single star + decimal
   avg + parenthesized count. Click target is the parent program-name link
   (we don't add interaction to the rating itself — keeps the row clean). */
.row-rating { display: inline-flex; align-items: center; gap: 3px; color: var(--accent-warm, #FFB400); }

/* Kebab button — only rendered/visible on mobile (≤880px) where it replaces
   the View/Visit/Apply pillar with a single ⋮ that opens a popover. Hidden
   at desktop where the three buttons appear directly in the row. */
.row-cta-kebab { display: none; }
.row-rating-star { display: block; }
.row-rating-avg { font-size: 11.5px; color: var(--ink); }
.row-rating-avg b { font-weight: 600; }
.row-rating-count { font-size: 11px; color: var(--ink-50); }

.card-sub-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Brand-size column — shows compact Tranco rank label like "5k" / "120k" / "1.2M".
   Sits between Popularity and Trend; styled like Cookie's compact mono number. */
.row-brand-col { display: flex; align-items: center; justify-content: flex-start; }
.row-brand { font-size: 12px; color: var(--ink); white-space: nowrap; }
.row-brand b { font-weight: 600; font-size: 13px; }
.row-brand--unk { color: var(--ink-40); }

/* Performance filter sub-groups — five stacked panels inside the Performance
   accordion. Each has a small uppercase header and a checkbox/dropdown body. */
.perf-sub { padding: 10px 0 12px; border-bottom: 1px dashed var(--border-soft); }
.perf-sub:last-child { border-bottom: 0; padding-bottom: 0; }
.perf-sub:first-child { padding-top: 4px; }
.perf-sub-hd {
    font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-70);
    margin: 0 0 6px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.perf-sub-hint { font-size: 9.5px; color: var(--ink-50); text-transform: none; font-weight: 400; letter-spacing: 0; }
.perf-rating {
    width: 100%; padding: 7px 10px; border-radius: 6px;
    background: var(--bg-elev); border: 1px solid var(--border);
    font-family: inherit; font-size: 13px; color: var(--ink);
    cursor: pointer;
}
.perf-rating:hover { border-color: var(--ink-15); }
.perf-rating:focus { outline: 0; border-color: var(--accent); }

/* Geo filter section — one-line hint above the region checkboxes explaining
   the "global passes everything" behavior so users don't think their filter
   was ignored. */
.geo-hint { font-size: 11px; color: var(--ink-50); line-height: 1.4; margin: -2px 0 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--border-soft); }

/* heat bar */
.heat-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.heat-pulse::after { content: ''; position: absolute; inset: 0; background: inherit; opacity: .4; animation: barPulse 1.6s ease-out infinite; }
@keyframes barPulse { 0%,100% { opacity: 0; } 50% { opacity: .6; } }

.row-check { display: flex; align-items: center; }
.row-check input { cursor: pointer; }

.row-name { display: flex; gap: 10px; align-items: center; min-width: 0; }
.favi {
    width: 30px; height: 30px; border-radius: 6px;
    background: linear-gradient(135deg, var(--ink-08), var(--ink-15));
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden; position: relative;
}
.favi-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; padding: 3px;
    background: var(--bg-elev);
    /* When the logo fails to load, onerror hides this <img> and the
       .favi-letter span underneath becomes visible automatically. */
}
.favi-letter { font-weight: 600; font-size: 13px; color: var(--ink-70); }
.row-name-text { min-width: 0; flex: 1; }
.row-name-ttl { font-weight: 600; font-size: 14px; color: var(--ink); letter-spacing: -0.01em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; text-decoration: none; }
.row-name-ttl:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.row-name-domain { color: var(--ink-50); text-decoration: none; font-size: 12px; }
.row-name-domain:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.row-name-sub { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-50); margin-top: 3px; flex-wrap: wrap; row-gap: 3px; }
.row-name-sub .mono { font-size: 11px; }
.row-tag { padding: 1px 5px; border-radius: 3px; background: var(--ink-08); font-size: 10px; color: var(--ink-70); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; white-space: nowrap; }

.row-badge { display: inline-flex; align-items: center; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.06em; font-family: var(--font-mono); white-space: nowrap; line-height: 1.4; }
.row-badge-new { background: color-mix(in oklab, var(--heat-new), white 70%); color: color-mix(in oklab, var(--heat-new), black 40%); }
.row-badge-trend { background: color-mix(in oklab, var(--heat-trend), white 70%); color: color-mix(in oklab, var(--heat-trend), black 40%); }
.row-badge-ver { background: color-mix(in oklab, var(--heat-verified), white 75%); color: color-mix(in oklab, var(--heat-verified), black 40%); }
.row-badge-watch { background: color-mix(in oklab, var(--heat-watch), white 70%); color: color-mix(in oklab, var(--heat-watch), black 40%); }

.row-comm { display: flex; align-items: center; gap: 10px; }
.row-comm-main { font-size: 17px; color: var(--ink); display: flex; align-items: baseline; gap: 1px; font-weight: 500; letter-spacing: -0.01em; }
.row-comm-main b { font-weight: 600; font-size: 18px; }
.row-comm-main .mu { color: var(--ink-50); font-size: 13px; }
.row-comm-recur { font-size: 11px; color: var(--ink-50); margin-left: 3px; font-weight: 400; }
.row-comm-spark { opacity: .9; }

.row-cookie { font-size: 14px; color: var(--ink); font-weight: 500; }
.row-cookie .mu { color: var(--ink-50); font-size: 12px; }

.row-network { font-size: 13px; color: var(--ink-70); }
.row-vertical { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.row-vertical-more { font-size: 11px; color: var(--ink-50); font-family: var(--font-mono); }
.row-net-more {
    display: inline-block; position: relative;
    margin-left: 4px; padding: 1px 6px;
    font-size: 10.5px; font-family: var(--font-mono); font-weight: 600;
    color: var(--accent-ink); background: var(--accent-soft);
    border-radius: 10px; line-height: 1.5; cursor: pointer;
}
.row-net-more:hover, .row-net-more:focus-within { background: var(--accent); color: var(--bg-elev); outline: none; }

/* Popover containing clickable network links — hidden by default, shown
   on hover/focus-within of the +N badge. Padding-top creates an invisible
   bridge so the cursor can travel from badge into the popover without it
   disappearing. Each item is a real <a> linking to /networks/<slug>/. */
.row-net-popup {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(2px);
    padding-top: 6px;
    min-width: 140px;
    opacity: 0; pointer-events: none;
    transition: opacity 80ms, transform 80ms;
    z-index: 100;
}
.row-net-popup::before {
    content: ""; display: block;
    background: var(--ink); color: var(--bg-elev);
    border-radius: 8px 8px 0 0;
    box-shadow: 0 4px 16px rgba(10,23,48,0.22);
    height: 0;
}
.row-net-more:hover .row-net-popup,
.row-net-more:focus-within .row-net-popup {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.row-net-popup-item {
    display: block;
    background: var(--ink); color: var(--bg-elev);
    padding: 7px 12px;
    font-family: var(--font-sans); font-size: 12px; font-weight: 500;
    text-decoration: none; letter-spacing: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.row-net-popup-item:first-child { border-radius: 8px 8px 0 0; }
.row-net-popup-item:last-child  { border-radius: 0 0 8px 8px; border-bottom: 0; }
.row-net-popup-item:only-child  { border-radius: 8px; }
.row-net-popup-item:hover, .row-net-popup-item:focus {
    background: var(--accent); color: var(--bg-elev); outline: none;
}
.row-network-link { color: var(--ink); text-decoration: none; }
.row-network-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Custom CSS tooltip — appears instantly on hover (no browser-default 700ms
   delay). Attach to any element with class .has-tip + data-tip="…". */
.has-tip { position: relative; }
.has-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(2px);
    background: var(--ink);
    color: var(--bg-elev);
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-family: var(--font-mono);
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 80ms, transform 80ms;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(10,23,48,0.18);
}
.has-tip::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(2px);
    border: 4px solid transparent;
    border-top-color: var(--ink);
    opacity: 0;
    pointer-events: none;
    transition: opacity 80ms, transform 80ms;
    z-index: 100;
}
.has-tip:hover::after, .has-tip:focus::after,
.has-tip:hover::before, .has-tip:focus::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.pill { display: inline-flex; padding: 2px 7px; border-radius: 4px; font-size: 11px; line-height: 1.4; white-space: nowrap; }
.pill-neutral { background: var(--ink-04); color: var(--ink-70); border: 1px solid var(--border-soft); }
/* Clickable vertical pills: anchor styling without disturbing the pill layout. */
.pill-link { text-decoration: none; cursor: pointer; transition: background 80ms, color 80ms, border-color 80ms; }
.pill-link:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }

/* Rank column — composite popularity ordinal (1 = most popular in catalog). */
.row-rank { display: flex; align-items: center; }
.row-rank-n { font-size: 14px; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }

/* Trend column — 90-day Tranco rank delta. Green up, red down, neutral flat. */
.row-trend { display: flex; align-items: center; font-size: 12.5px; font-weight: 600; }
/* Inside the mobile-meta strip the trend chip must stay inline alongside its
   "TREND" label — its default flex display would force a line break inside
   the row-mobile-meta-v wrapper, leaving the value dangling on the next line. */
.row-mobile-meta .row-trend { display: inline-flex; vertical-align: middle; font-size: 11px; font-weight: 500; }
.row-mobile-meta .row-mobile-meta-v { display: inline-flex; align-items: baseline; }
.row-mobile-meta .row-mobile-meta-v .row-brand,
.row-mobile-meta .row-mobile-meta-v .row-brand b { font-size: 11px; font-weight: 500; }
.row-trend--up   { color: oklch(58% 0.16 155); }
.row-trend--dn   { color: oklch(60% 0.18 25);  }
.row-trend--flat { color: var(--ink-40); }

/* Row CTA cluster — three buttons hidden by default, reveal on row hover
   or when any cell inside the row gains keyboard focus (a11y). */
.row-cta { display: flex; gap: 5px; justify-content: flex-end; align-items: center; flex-wrap: nowrap; }
.row-cta-btn {
    padding: 5px 10px; border-radius: 6px;
    font-size: 11.5px; font-weight: 500;
    cursor: pointer; white-space: nowrap;
    text-decoration: none; display: inline-flex; align-items: center;
    border: 1px solid transparent;
    opacity: 0;
    transition: opacity 80ms, background 80ms, border-color 80ms;
}
.row:hover .row-cta-btn,
.row:focus-within .row-cta-btn { opacity: 1; }
/* Touch devices have no real hover — make the CTAs always visible there so
   they're not perpetually faded out. */
/* Touch-only override (matches phones / tablets where there's no hover at
   all). Force-Touch trackpads on macOS DON'T trigger this — desktop Mac
   users still get the hover-reveal behaviour. */
@media (hover: none) {
    .row-cta-btn { opacity: 1; }
}
.row-cta-view  { background: var(--ink); color: var(--bg-elev); }
.row-cta-view:hover  { background: var(--ink-90); }
.row-cta-visit { background: var(--bg-elev); color: var(--ink); border-color: var(--border); }
.row-cta-visit:hover { background: var(--ink-04); border-color: var(--ink-15); }
.row-cta-apply { background: var(--accent); color: var(--bg-elev); }
.row-cta-apply:hover { background: color-mix(in oklab, var(--accent), black 10%); }

/* Cards view — same three-CTA stack at the bottom of each card. */
.card-cta { display: flex; gap: 4px; flex-wrap: wrap; }
.row:hover .row-cta-btn { opacity: 1; }
.row-cta-link { width: 26px; height: 26px; border-radius: 6px; background: transparent; border: 1px solid var(--border); color: var(--ink-70); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.row-cta-link:hover { color: var(--ink); border-color: var(--ink-50); }

/* density variants */
.rows-compact .rows-hd, .rows-compact .row { padding-top: 6px; padding-bottom: 6px; }
.rows-compact .favi { width: 22px; height: 22px; border-radius: 4px; }
.rows-compact .favi span { font-size: 11px; }
.rows-compact .row-name-ttl { font-size: 13px; }
/* Compact mode: hide the full sub-line BUT keep the rating chip beside the
   title. row-name-text flips to flex-row so title + rating sit side-by-side. */
.rows-compact .row-name-text { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rows-compact .row-name-sub { display: inline-flex; margin-top: 0; }
.rows-compact .row-name-sub > *:not(.row-rating) { display: none; }
.rows-compact .row-name-sub .row-rating { font-size: 11px; }
.rows-compact .row-comm-main { font-size: 14px; }
.rows-compact .row-comm-main b { font-size: 15px; }
.rows-compact .row-claims-lbl { display: none; }
.rows-compact .row-vertical { flex-wrap: nowrap; overflow: hidden; }
/* CTAs follow the same hover-to-reveal rule as the comfortable view — only
   the size shrinks for compact density. */
.rows-compact .row-cta-btn { padding: 3px 8px; font-size: 11px; }
.rows-compact .row-name-ttl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* row style variants */
.rows-editorial .row { padding-top: 18px; padding-bottom: 18px; }
.rows-editorial .row-name-ttl { font-size: 16px; }
.rows-editorial .row-comm-main { font-size: 20px; }
.rows-editorial .row-comm-main b { font-size: 22px; }

.rows-heatmap .row { background: linear-gradient(90deg, color-mix(in oklab, var(--heat-bg, transparent), transparent 92%) 0%, transparent 12%); }
.rows-heatmap .row-new         { --heat-bg: var(--heat-new); }
.rows-heatmap .row-trending    { --heat-bg: var(--heat-trend); }
.rows-heatmap .row-verified    { --heat-bg: var(--heat-verified); }
.rows-heatmap .row-watch       { --heat-bg: var(--heat-watch); }
.rows-heatmap .row-established { --heat-bg: var(--heat-est); }

/* Cards grid */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.card { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 10px; padding: 16px 16px 14px; position: relative; transition: border-color 80ms; }
.card:hover { border-color: var(--ink-30); }
.card.is-checked { border-color: var(--accent); background: var(--accent-soft); }
.card-hd { display: flex; gap: 10px; align-items: flex-start; }
.card-hd-text { flex: 1; min-width: 0; }
.card-ttl { display: block; font-weight: 600; font-size: 14px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.card-ttl:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.card-sub { display: block; font-size: 11px; color: var(--ink-50); text-decoration: none; }
.card-sub:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.card-check { cursor: pointer; }
.card-stats { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; margin: 14px 0 12px; padding: 12px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.card-stats-4 { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
/* 5-stat card grid — Commission spark on top-left (1.4fr), Cookie + Brand
   fill row 1; Rank + Trend fill row 2. Reflows to 2-col at narrow card widths. */
.card-stats-5 { grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: auto; row-gap: 10px; }
@media (max-width: 1100px) { .card-stats-5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1100px) { .card-stats-4 { grid-template-columns: 1fr 1fr; row-gap: 10px; } }
.card-stat-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-50); margin-bottom: 3px; }
.card-stat-val { font-size: 17px; color: var(--ink); font-weight: 500; }
.card-stat-val b { font-weight: 600; font-size: 19px; }
.card-stat-tag { font-size: 9px; padding: 1px 4px; border-radius: 3px; background: var(--ink-08); color: var(--ink-70); margin-left: 4px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
/* Trend inside a card-stat must inherit the card-stat-val font sizing (17px /
   500-weight, mono) instead of falling back to row-trend's own smaller 12.5px
   / 600-weight chip style. Keep the up/down color tinting (it's on the parent
   .row-trend--up / --dn classes via color: rule). */
.card-stat-val .row-trend { display: inline-flex; font-size: inherit; font-weight: inherit; align-items: baseline; }
.card-stat-val .row-brand,
.card-stat-val .row-brand b { font-size: inherit; font-weight: inherit; }
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-network { font-size: 12px; color: var(--ink-70); display: inline-flex; gap: 4px; align-items: center; }
/* Category page toolbar (used on /networks/[slug], /verticals/[slug], /new, /verified) */
.cat-tb {
    display: flex; align-items: center; gap: 16px;
    margin: 6px 0 14px;
    padding: 10px 14px;
    background: var(--bg-elev);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    box-shadow: 0 1px 0 var(--border-soft);
    flex-wrap: wrap;
}
.cat-tb-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; color: var(--ink-50); }
.cat-tb-input {
    flex: 1; border: 0; outline: 0; background: transparent;
    font-size: 14px; color: var(--ink); font-family: inherit;
}
.cat-tb-input::placeholder { color: var(--ink-40); }
.cat-tb-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cat-tb-lbl { font-size: 12px; color: var(--ink-50); }
.cat-tb-sort {
    padding: 6px 10px; border-radius: 6px;
    background: var(--bg-elev); border: 1px solid var(--border);
    font-family: inherit; font-size: 13px; color: var(--ink);
    cursor: pointer;
}
.cat-tb-sort:hover { border-color: var(--ink-15); }
.cat-tb-full {
    font-size: 12px; color: var(--accent); text-decoration: none;
    margin-left: 6px; padding: 6px 8px; border-radius: 6px;
}
.cat-tb-full:hover { background: var(--accent-soft); text-decoration: underline; }
.cat-tb-empty {
    padding: 36px 16px; text-align: center;
    color: var(--ink-50); font-size: 14px;
}
/* Sort-only variant for /new and /verified (search omitted; pages are short and
   already narrowed by the page itself). The .cat-tb-search element is dropped
   from the markup when sortOnly is set, so we just push the sort cluster to the
   right and keep the toolbar compact. */
.cat-tb--sort-only { justify-content: flex-end; }
.cat-tb--sort-only .cat-tb-right { margin-left: auto; }

/* Slug-page header strip — title + subtitle + "Filter & sort all programs →" link.
   Used at the top of /networks/[slug] and /verticals/[slug] above the row list. */
.cat-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 18px 0 8px; }
.cat-hd-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-50); letter-spacing: 0.06em; text-transform: uppercase; }
.cat-hd-full {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; color: var(--accent); text-decoration: none;
    padding: 8px 12px; border-radius: 6px; border: 1px solid var(--accent-soft);
    background: rgba(124,58,237,0.04);
    font-weight: 500;
    white-space: nowrap;
}
.cat-hd-full:hover { background: var(--accent-soft); border-color: var(--accent); }

/* Cards: CTAs hidden by default, revealed when hovering the card or
   focusing into it (matches the row behaviour). Touch devices override
   below via @media (hover: none). */
.card-cta .row-cta-btn { opacity: 0; transition: opacity 80ms; }
.card:hover .card-cta .row-cta-btn,
.card:focus-within .card-cta .row-cta-btn { opacity: 1; }
@media (hover: none) {
    .card-cta .row-cta-btn { opacity: 1; }
}

/* ───────── Empty ───────── */
.empty { display: flex; flex-direction: column; align-items: center; padding: 64px 24px; text-align: center; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 10px; }
.empty-glyph { color: var(--ink-30); margin-bottom: 12px; }
.empty-ttl { font-size: 18px; margin: 0 0 6px; letter-spacing: -0.01em; }
.empty-sub { font-size: 13px; color: var(--ink-70); margin: 0 0 18px; max-width: 360px; }
.empty-actions { display: flex; gap: 8px; margin-bottom: 24px; }
.empty-hint { font-size: 12px; color: var(--ink-50); padding-top: 18px; border-top: 1px solid var(--border-soft); width: 100%; max-width: 320px; }
.empty-hint-k { padding: 1px 6px; border-radius: 3px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; margin-right: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }

/* ───────── Compare tray ───────── */
.cmp { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; width: min(1100px, calc(100vw - 32px)); background: var(--ink); color: var(--bg-elev); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); z-index: 30; }
.cmp-hd { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; }
.cmp-hd-l { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.cmp-count { background: var(--accent); color: var(--bg-elev); font-weight: 600; padding: 3px 8px; border-radius: 12px; font-family: var(--font-mono); font-size: 12px; min-width: 22px; text-align: center; }
.cmp-lbl { color: var(--bg-elev); }
.cmp-sep { color: rgba(255,255,255,.3); }
.cmp-expand { background: none; border: 0; color: var(--bg-elev); cursor: pointer; display: flex; gap: 4px; align-items: center; font-size: 13px; }
.cmp-expand:hover { text-decoration: underline; }
.cmp-hd-r { display: flex; gap: 8px; align-items: center; }
.cmp-clear { background: none; border: 0; color: rgba(255,255,255,.65); font-size: 13px; cursor: pointer; padding: 6px 10px; }
.cmp-clear:hover { color: var(--bg-elev); }
.cmp-cta { background: var(--accent); color: var(--bg-elev); }
.cmp-cta:hover { background: color-mix(in oklab, var(--accent), black 10%); color: var(--bg-elev); }
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; padding: 8px 16px 16px; border-top: 1px solid rgba(255,255,255,.1); }
.cmp-col { background: rgba(255,255,255,.05); border-radius: 8px; padding: 12px; position: relative; }
.cmp-col-x { position: absolute; top: 6px; right: 6px; background: none; border: 0; color: rgba(255,255,255,.5); cursor: pointer; width: 20px; height: 20px; border-radius: 4px; font-size: 16px; line-height: 1; }
.cmp-col-x:hover { background: rgba(255,255,255,.1); color: var(--bg-elev); }
.cmp-col-hd { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.cmp-col-hd .favi { background: rgba(255,255,255,.08); }
.cmp-col-hd .favi span { color: var(--bg-elev); }
.cmp-col-name { font-size: 13px; font-weight: 600; }
.cmp-col-sub { font-size: 11px; color: rgba(255,255,255,.5); }
.cmp-cell { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 12px; }
.cmp-cell:last-child { border-bottom: 0; }
.cmp-cell-l { color: rgba(255,255,255,.55); }
.cmp-cell-v { color: var(--bg-elev); font-weight: 500; }

/* ───────── Cmd-K ───────── */
.cmdk-bg { position: fixed; inset: 0; background: rgba(10,23,48,.4); backdrop-filter: blur(2px); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; animation: fadeIn 120ms ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.cmdk { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; width: min(560px, calc(100vw - 32px)); box-shadow: 0 16px 48px rgba(0,0,0,.2); overflow: hidden; animation: slideDown 160ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes slideDown { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cmdk-hd { display: flex; align-items: center; gap: 10px; padding: 14px 14px; border-bottom: 1px solid var(--border-soft); }
.cmdk-hd svg { color: var(--ink-50); }
.cmdk-hd input { flex: 1; border: 0; background: none; outline: none; font-size: 14px; }
.cmdk-esc { background: var(--ink-04); border: 1px solid var(--border-soft); }
.cmdk-body { max-height: 360px; overflow-y: auto; padding: 6px; }
.cmdk-sect { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-50); padding: 8px 10px 4px; }
.cmdk-item { width: 100%; display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: none; border: 0; cursor: pointer; border-radius: 6px; text-align: left; color: var(--ink); position: relative; }
.cmdk-item.is-on { background: var(--ink-04); }
.cmdk-item .heat-bar { position: relative; width: 3px; height: 18px; border-radius: 2px; }
.cmdk-item-text { flex: 1; min-width: 0; }
.cmdk-item-name { font-size: 13px; font-weight: 500; }
.cmdk-item-meta { font-size: 11px; color: var(--ink-50); }
.cmdk-empty { padding: 24px 16px; text-align: center; font-size: 13px; color: var(--ink-50); }
.cmdk-empty-cta { margin-top: 8px; }
.cmdk-empty-cta a { color: var(--accent); text-decoration: none; font-weight: 500; }
.cmdk-ft { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--border-soft); background: var(--bg-tint); font-size: 11px; color: var(--ink-50); }
.cmdk-ft kbd { font-size: 9px; padding: 1px 4px; }

/* ───────── Responsive ───────── */
/* Mobile breakpoint */
@media (max-width: 880px) {
  .shell { grid-template-columns: 1fr; padding: 12px; gap: 0; }
  .hdr-inner { grid-template-columns: auto 1fr auto; padding: 12px 16px; gap: 12px; }
  .hdr-nav { display: none; }
  .hdr-actions .btn:not(.btn-primary) { display: none; }
  .hdr-actions .btn-primary { padding: 6px 10px; font-size: 12px; }
  .ticker-inner { padding: 7px 16px; }
  .ticker-stats { display: none; }
  .ticker-feed { mask-image: linear-gradient(90deg, #000 80%, transparent); }

  /* Sidebar becomes a drawer */
  .sidebar { display: none; position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, calc(100vw - 48px)); max-height: none; background: var(--bg-elev); z-index: 50; padding: 0; box-shadow: 4px 0 24px rgba(0,0,0,.12); transform: translateX(-100%); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); overflow-y: auto; }
  .sidebar.is-open { display: block; transform: translateX(0); }
  .sb-drawer-backdrop { position: fixed; inset: 0; background: rgba(10,23,48,.5); z-index: 49; opacity: 0; pointer-events: none; transition: opacity 200ms; }
  .sb-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
  .sb { padding: 0 16px 32px; }
  .sb-drawer-hd { display: flex; justify-content: space-between; align-items: center; padding: 14px 0 12px; border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; background: var(--bg-elev); z-index: 1; margin: 0 0 4px; }
  .sb-drawer-hd-l { display: flex; align-items: center; gap: 8px; }
  .sb-drawer-hd-ttl { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
  .sb-drawer-hd-badge { background: var(--accent); color: var(--bg-elev); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; font-family: var(--font-mono); min-width: 22px; text-align: center; }
  .sb-drawer-x { background: var(--ink-04); border: 0; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink-70); }
  .sb-drawer-x:hover { background: var(--ink-08); color: var(--ink); }
  .sb-drawer-grip { display: flex; justify-content: center; padding: 8px 0 4px; }
  .sb-drawer-grip-bar { width: 40px; height: 4px; border-radius: 2px; background: var(--ink-15); }
  .sb-drawer-foot { position: sticky; bottom: 0; left: 0; right: 0; padding: 12px 0; background: var(--bg-elev); border-top: 1px solid var(--border-soft); display: flex; gap: 8px; margin: 18px -16px -32px; padding: 12px 16px; }
  .sb-drawer-foot .btn { flex: 1; }
  .sb-hd { display: none; }

  /* Mobile filter button (lives in toolbar) */
  .tb-mobile-flt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 7px; background: var(--ink); color: var(--bg-elev); border: 0; font-size: 13px; font-weight: 500; cursor: pointer; position: relative; }
  .tb-mobile-flt-badge { background: var(--accent); color: var(--ink); font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 8px; min-width: 16px; text-align: center; font-family: var(--font-mono); }

  .tb { grid-template-columns: 1fr; gap: 8px; padding: 10px; top: 56px; border-radius: 0; margin: -12px -12px 12px; border-left: 0; border-right: 0; }
  .tb-search-input { padding-right: 8px; }
  .tb-kbd { display: none; }
  .tb-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; padding: 0 2px; }
  .tb-right { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
  .tb-right .tb-sort { flex: 1; }
  .tb-right .tb-sort select { width: 100%; }
  .tb-density { grid-column: 3; }
  .tb-density .seg-btn { padding: 6px 10px; }

  /* Rows reflow to mobile-friendly layout — heat bar + 2 columns */
  .rows-hd { display: none; }
  .row { grid-template-columns: 36px 1fr auto; gap: 10px; padding: 12px 12px 12px 18px; row-gap: 8px; }
  /* Simple rows have no CTA cluster on the right, so we collapse to 2 cols on mobile. */
  .rows-simple .row { grid-template-columns: 36px 1fr; }
  .heat-bar { width: 4px; }
  .row-check { display: none; }
  .row-name { grid-column: 1 / span 2; }
  /* CTAs span BOTH grid rows on mobile so the left column shrinks to its
     natural content height (kills the gap between name and meta strip). */
  .row-cta { grid-column: 3; grid-row: 1 / span 2; align-self: center; position: relative; }
  /* Rows on mobile show a single kebab (⋮) that opens a popover with
     View / Visit / Apply — saves space in the dense row layout. Cards
     have more breathing room and keep all three buttons inline. */
  .row-cta .row-cta-view, .row-cta .row-cta-visit, .row-cta .row-cta-apply { display: none; }
  /* Cards: hide the kebab + show the three buttons inline, side by side. */
  .card-cta .row-cta-kebab { display: none; }
  .card-cta { display: flex; gap: 6px; flex-wrap: wrap; }
  .card-cta .row-cta-btn { display: inline-flex; opacity: 1; padding: 6px 12px; font-size: 12px; }
  .row-cta-kebab {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px;
    color: var(--ink-70); cursor: pointer;
    font-family: inherit;
    transition: background 80ms, border-color 80ms;
  }
  .row-cta-kebab:hover { background: var(--ink-04); border-color: var(--ink-15); }
  .row-cta-kebab[aria-expanded="true"] { background: var(--ink); color: white; border-color: var(--ink); }
  .row-cta.is-open .row-cta-view,
  .row-cta.is-open .row-cta-visit,
  .row-cta.is-open .row-cta-apply { display: inline-flex; }
  .row-cta.is-open {
    flex-direction: column; gap: 4px;
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 25;
    background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 8px;
    padding: 6px; min-width: 110px;
    box-shadow: 0 8px 20px rgba(10, 23, 48, 0.10);
    align-items: stretch;
  }
  .row-cta.is-open .row-cta-btn {
    padding: 8px 12px; font-size: 13px; opacity: 1; justify-content: center;
  }
  .row-cta.is-open .row-cta-kebab { display: none; }
  /* Compact density on mobile: drop the Network entry from the meta strip
     to save horizontal space (network is still visible in the program's
     detail page; saving inches on the directory matters more here). */
  .rows-compact .row-mobile-meta-net { display: none; }
  .row-cta-link { display: none; }
  /* Hide top-level row columns including the standalone .row-comm cell with
     its sparkline — commission value is now folded into the mobile-meta
     strip alongside Rank/Trend/Network, saving a full row of vertical space. */
  .row > .row-comm, .row > .row-cookie, .row > .row-network, .row > .row-vertical, .row > .row-rank, .row > .row-trend { display: none; }

  /* mobile row data strip — second line below name. Now carries commission
     first (slightly larger + bolder for emphasis), then Rank/Trend/Network. */
  .row-mobile-meta { grid-column: 1 / span 2; padding-left: 40px; display: flex; gap: 14px; align-items: center; font-size: 11px; color: var(--ink-50); flex-wrap: wrap; }
  .row-mobile-meta-k { color: var(--ink-50); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 4px; }
  .row-mobile-meta-v { color: var(--ink); font-family: var(--font-mono); font-weight: 500; }
  .row-mobile-meta-comm .row-mobile-meta-v { font-size: 14px; font-weight: 600; color: var(--ink); }
  .row-mobile-meta-comm .row-mobile-meta-v b { font-size: 15px; font-weight: 700; }
  .row-mobile-meta-comm .row-mobile-meta-v .mu { color: var(--ink-50); font-size: 11px; font-weight: 400; }

  /* Active pills strip is sticky right under toolbar */
  .apl { position: sticky; top: 124px; background: var(--bg); padding: 8px 0; margin: -12px 0 12px; z-index: 10; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .apl::-webkit-scrollbar { display: none; }
  .apl-pill { flex-shrink: 0; }
  .apl-clear { flex-shrink: 0; }

  /* Compare tray adjusts */
  .cmp { width: calc(100vw - 16px); bottom: 8px; }
  .cmp-grid { grid-template-columns: 1fr; }
  .cmp-cta { padding: 5px 10px; font-size: 12px; }
  .cmp-cta-lbl { display: none; }

  /* Cmd-K hidden on mobile */
  .cmdk-bg { padding: 0; align-items: flex-start; padding-top: 8vh; }
  .cmdk { width: calc(100vw - 24px); }

  /* Cards grid: single column */
  .cards-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) and (min-width: 881px) {
  .shell { grid-template-columns: 232px 1fr; gap: 20px; }
  .rows-hd, .row { grid-template-columns: 28px minmax(150px, 1.2fr) 100px 45px 90px 120px 50px 75px 70px; gap: 10px; }
  /* Same six-column shape as desktop for simple rows, but tighter. */
  .rows-simple .rows-hd,
  .rows-simple .row { grid-template-columns: 28px minmax(150px, 1.2fr) 100px 45px 90px 120px; }
  /* Stack CTAs vertically at this intermediate width to save horizontal space. */
  .row-cta { flex-direction: column; gap: 3px; align-items: stretch; }
  .row-cta-btn { padding: 3px 8px; font-size: 11px; }
}

@media (min-width: 881px) {
  .tb-mobile-flt { display: none; }
  .sb-drawer-hd, .sb-drawer-grip, .sb-drawer-foot, .sb-drawer-backdrop { display: none; }
  .row-mobile-meta { display: none; }
}