:root {
  --bg-body: #f4f2ee;
  --bg-card: #fffefb;
  --bg-hover: #f0ece5;
  --bg-table-header: #f9f6f1;
  --bg-table-hover: #fcf6f4;
  --bg-sidebar: #ece7de;
  --bg-sidebar-hover: rgba(32,29,26,0.055);
  --bg-sidebar-active: rgba(32,29,26,0.09);
  --bg-overlay: rgba(0,0,0,0.4);
  --bg-input: #fffefb;
  --bg-badge-clean: #e7f4ea;
  --bg-badge-minor: #fdf3e0;
  --bg-badge-review: #fdeae9;
  --bg-badge-niche: #eceaf7;
  --bg-badge-factor: #fdeede;
  --bg-topic: #f0eff4;
  --bg-topic-rising: #e7f4ea;
  --bg-topic-declining: #fdeae9;
  --bg-keyword: #f0eff4;
  --bg-detail: #f8f5f0;
  /* "Detective red" — ClipDetective's own brand red (deliberately not
     YouTube's). Darkened/sharpened 2026-07-16: 6.25:1 on the body, 6.99:1
     for white button text (was 4.9/5.5). */
  --accent: #ad2114;
  --accent-hover: #8f1a0f;
  --accent-soft: #fdece8;
  --accent-transparent: rgba(173,33,20,0.14);
  --text: #0a0a0a;
  --text-muted: #787167;   /* WCAG AA (4.78:1 on card) — was #8c857b (3.62, failed) */
  --text-dim: #5f5850;
  --text-light: #787167;   /* login-hint; AA on card — was #a49a8f (2.74, failed) */
  --text-sidebar: rgba(32,29,26,0.72);
  --text-sidebar-strong: #201d1a;
  --text-sidebar-muted: rgba(32,29,26,0.5);
  --text-sidebar-heading: rgba(32,29,26,0.42);
  --text-table-header: #726c62;   /* AA (4.83:1) — was #79736a (4.35, just under) */
  --text-link: #9c1e12;
  --text-good: #2e7d44;
  --text-ok: #c07f12;
  --text-bad: #c63a2e;
  --text-niche: #4a3f9e;
  --text-factor: #c2541a;
  --text-danger: #c63a2e;
  --danger: #d64545;
  --danger-hover: #b93636;
  --text-success: #2e7d44;
  --border: #e8e1d8;
  --border-light: #f0eae1;
  --border-table: #f1ece4;
  --border-sidebar: rgba(32,29,26,0.10);
  --border-flash-error: #f6cfca;
  --border-flash-success: #c5e6cd;
  --bar-bg: #ece8e2;
  --bar-good: #3aa564;
  --bar-ok: #e0a020;
  --bar-bad: #e2502d;
  --shadow: 0 1px 2px rgba(40,32,22,0.06);
  --shadow-card: 0 1px 3px rgba(40,32,22,0.08);
  --h2-border: #ece8e2;
}

:root.dark {
  --bg-body: #121110;
  --bg-card: #1c1a18;
  --bg-hover: #272320;
  --bg-table-header: #18161a;
  --bg-table-hover: #221d1c;
  --bg-input: #24221f;
  --bg-sidebar: #131211;
  --bg-sidebar-hover: rgba(255,255,255,0.10);
  --bg-sidebar-active: rgba(255,255,255,0.08);
  --text-sidebar: rgba(255,255,255,0.66);
  --text-sidebar-strong: #ffffff;
  --text-sidebar-muted: rgba(255,255,255,0.5);
  --text-sidebar-heading: rgba(255,255,255,0.32);
  --border-sidebar: rgba(255,255,255,0.08);
  --bg-badge-clean: #173d23;
  --bg-badge-minor: #3d3115;
  --bg-badge-review: #3d1d18;
  --bg-badge-niche: #221f4a;
  --bg-badge-factor: #3d2a15;
  --bg-topic: #232329;
  --bg-topic-rising: #173d23;
  --bg-topic-declining: #3d1d18;
  --bg-keyword: #232329;
  --bg-detail: #161619;
  --bg-overlay: rgba(0,0,0,0.6);
  /* Dark detective red: purer/sharper than the old salmon #f2564a, still
     >=4.5:1 (AA) on body and cards. */
  --accent: #ee4838;
  --accent-hover: #e03a2a;
  --accent-soft: #2e1512;
  --accent-transparent: rgba(238,72,56,0.22);
  --text: #eae7e2;
  --text-muted: #928b82;
  --text-dim: #b4ada3;
  --text-light: #928b82;   /* login-hint dark; AA (5.15:1) — was #726c63 (3.34, failed) */
  --text-link: #e65546;   /* AA on card (4.75) + body (5.17) — #e04a3a passed body but not the lighter card */
  --text-table-header: #8d8d95;
  --text-good: #5dc47e;
  --text-ok: #e0a83a;
  --text-bad: #f0675a;
  --text-niche: #a79ff0;
  --text-factor: #f0a85a;
  --text-danger: #f0675a;
  --danger: #e4685f;
  --danger-hover: #d1544b;
  --text-success: #5dc47e;
  --border: #2c2925;
  --border-light: #242220;
  --border-table: #26231f;
  --border-flash-error: #5c241f;
  --border-flash-success: #1c4329;
  --bar-bg: #2e2e34;
  --bar-good: #3aa564;
  --bar-ok: #e0a020;
  --bar-bad: #ff7a5c;
  --shadow: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-card: 0 2px 10px rgba(0,0,0,0.5);
  --h2-border: #2c2925;
}

/* --- Accent themes -----------------------------------------------------------
   Swap ONLY the accent family; the neutral light/dark bases above and the
   semantic colors (green=good, red=bad, rising/declining) stay fixed so meaning
   never changes with the accent. Default (no theme-* class) = Detective red.
   Each theme has a light variant (:root.theme-X) and a dark one
   (:root.dark.theme-X), tuned per mode. Applied to <html> by app.js. */
:root.theme-ocean {
  --accent: #2563a8; --accent-hover: #1e5290; --accent-soft: #e8eff8;
  --accent-transparent: rgba(37,99,168,0.15); --text-link: #2f7fd6; --bg-table-hover: #f3f6fb;
}
:root.dark.theme-ocean {
  --accent: #4f9df0; --accent-hover: #3d8ce0; --accent-soft: #14202e;
  --accent-transparent: rgba(79,157,240,0.20); --text-link: #79b4f5; --bg-table-hover: #1a2028;
}
:root.theme-teal {
  --accent: #0f766e; --accent-hover: #0c625b; --accent-soft: #e3f2f0;
  --accent-transparent: rgba(15,118,110,0.15); --text-link: #12958a; --bg-table-hover: #f2f8f7;
}
:root.dark.theme-teal {
  --accent: #2dd4bf; --accent-hover: #22c0ac; --accent-soft: #0f2621;
  --accent-transparent: rgba(45,212,191,0.20); --text-link: #5fe0d0; --bg-table-hover: #16211f;
}
:root.theme-amethyst {
  --accent: #6d4bd0; --accent-hover: #5c3db8; --accent-soft: #ece7f9;
  --accent-transparent: rgba(109,75,208,0.15); --text-link: #7c5ce0; --bg-table-hover: #f5f2fb;
}
:root.dark.theme-amethyst {
  --accent: #a78bfa; --accent-hover: #9575f0; --accent-soft: #1e1a33;
  --accent-transparent: rgba(167,139,250,0.20); --text-link: #b9a3ff; --bg-table-hover: #201d2b;
}
:root.theme-sunset {
  --accent: #c2410c; --accent-hover: #a8380a; --accent-soft: #fbeadd;
  --accent-transparent: rgba(194,65,12,0.15); --text-link: #e0561a; --bg-table-hover: #fcf4ee;
}
:root.dark.theme-sunset {
  --accent: #fb923c; --accent-hover: #f0842e; --accent-soft: #2e1b0f;
  --accent-transparent: rgba(251,146,60,0.20); --text-link: #ffab5e; --bg-table-hover: #241d16;
}
:root.theme-rose {
  --accent: #c2367f; --accent-hover: #a82d6d; --accent-soft: #f9e7f1;
  --accent-transparent: rgba(194,54,127,0.15); --text-link: #d64b96; --bg-table-hover: #fcf3f8;
}
:root.dark.theme-rose {
  --accent: #f472b6; --accent-hover: #ec5da6; --accent-soft: #2e1622;
  --accent-transparent: rgba(244,114,182,0.20); --text-link: #ff8fc6; --bg-table-hover: #241a20;
}

/* Universal reset — INVERTED scope during the Mosaic port: opt IN per legacy
   page instead of opt OUT per chrome element. `main *` seemed narrower than
   `*` but Mosaic wraps the ENTIRE page (chrome AND content) in <main>, so it
   still nuked every Tailwind spacing utility on ported page content, not just
   the sidebar (confirmed live: a p-5 card computed to 0px padding). Each
   still-unported page's template opts into `.legacy-page` (see base.html's
   content_class block, default "legacy-page") to keep this reset; a ported
   page overrides that block to "" and gets pure Tailwind, untouched. */
.legacy-page, .legacy-page *,
.login-wrapper, .login-wrapper *,
.onboard-wrapper, .onboard-wrapper * { margin: 0; padding: 0; box-sizing: border-box; }

/* App-wide text size. --fs drives body font-size; em-relative text scales with
   it. User-adjustable via the A- / A+ control (persisted, applied to <html>). */
:root { --fs: 16px; }
:root.fs-large { --fs: 17.5px; }
:root.fs-xlarge { --fs: 19.5px; }

/* NB: body is a normal BLOCK — the Mosaic app shell (base.html) provides its own
   `flex h-[100dvh]` wrapper as the layout root. A stray `display:flex` here makes
   that wrapper a shrink-to-fit flex item (it stops filling the viewport width,
   stranding a scrollbar mid-page with a gap beside it). Do not re-add flex here. */
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, 'Helvetica Neue', sans-serif; background: var(--bg-body); color: var(--text); line-height: 1.6; min-height: 100vh; font-size: var(--fs); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* Numbers in data contexts use tabular figures so columns and metrics align and
   don't jitter as values change — a small detail that reads as "made for data". */
table, .score-value, .metric-range, .conf-badge, .ret-pattern-stats strong,
.stat-value, .metric-card, td, th { font-variant-numeric: tabular-nums; }

/* Content links default to the readable accent link color (nav/buttons/chips
   set their own color via their class, so they're unaffected). */
/* Scoped to CONTENT areas during the Mosaic port — the chrome (sidebar/header)
   styles its own links with utilities, which this unlayered rule would beat. */
.main-content a, .login-wrapper a { color: var(--text-link); }
.main-content a:hover, .login-wrapper a:hover { text-decoration: underline; }

/* Brand wordmark — used by the brandmark macro (landing / login / legal pages).
   The old pre-Mosaic sidebar CSS (.sidebar / .nav-link / .sidebar-footer / …)
   was removed 2026-07-21: the Mosaic app shell (base.html) owns the sidebar by
   id (#sidebar) with Tailwind classes, so those selectors matched nothing. */
.brand-wordmark { letter-spacing: -0.01em; }
.brand-wordmark .brand-accent { color: var(--accent); }

/* Main content column. Ported (Mosaic) pages supply their own responsive page
   padding + max-width via base.html's inner wrapper, so .main-content must NOT
   add padding of its own (that double-padded them). Legacy (un-ported) pages
   get their page padding from `.legacy-page` instead. */
.main-content { flex: 1; max-width: 100%; }
/* Match the Tailwind-ported pages' inner wrapper: centered, capped at 96rem,
   px-8/py-8. Only bites on very wide screens; identical at the pane width. */
.legacy-page { max-width: 96rem; margin-inline: auto; padding: 32px; box-sizing: border-box; }

/* The Mosaic content column (#main-scroll in base.html) is the one scroll area
   on the page — the sidebar is fixed. We keep the scrollbar (it's the scroll
   affordance + position indicator) but slim it to a subtle, theme-aware bar
   instead of the chunky OS default, so it reads as part of the design. */
#main-scroll { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
#main-scroll::-webkit-scrollbar { width: 10px; }
#main-scroll::-webkit-scrollbar-track { background: transparent; }
#main-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
#main-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Login */
/* Full-viewport centered overlay for the logged-out card. Pinned with fixed
   positioning (top/right/bottom/left:0) so it centers identically on every
   browser/device, independent of the body's flex layout — a flex-item
   `width:100%` here sized inconsistently across browsers (card jammed left). */
.login-wrapper { position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto; padding: 24px; box-sizing: border-box; }
.login-subtitle { color: var(--text-muted); font-size: 0.9em; margin-bottom: 24px; }
.login-form { text-align: left; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 0.85em; font-weight: 500; color: var(--text-dim); margin-bottom: 4px; }
.form-group input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.95em; background: var(--bg-input); color: var(--text); }
.form-group input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-transparent); }
.login-hint { margin-top: 16px; font-size: 0.8em; color: var(--text-light); }

/* Buttons */
.btn { display: inline-block; padding: 10px 20px; border: none; border-radius: 7px; font-size: 0.9em; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; text-decoration: none; transition: background 0.15s, box-shadow 0.15s, transform 0.05s; }
.btn-primary { background: var(--accent); color: #fff; width: 100%; box-shadow: 0 1px 2px rgba(60,20,10,0.16); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 2px 6px rgba(60,20,10,0.20); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(60,20,10,0.16); }
.btn-secondary { display: inline-block; padding: 8px 16px; border: 1px solid var(--border); border-radius: 7px; font-size: 0.85em; font-weight: 550; cursor: pointer; text-decoration: none; background: var(--bg-card); color: var(--text); transition: background 0.15s, border-color 0.15s, transform 0.05s; }
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--accent); }
.btn-secondary:active { transform: translateY(1px); }
.btn-danger { display: inline-block; padding: 8px 16px; border: none; border-radius: 6px; font-size: 0.85em; font-weight: 500; cursor: pointer; text-decoration: none; background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); }

.btn:disabled, .btn-loading { opacity: 0.7; cursor: not-allowed; pointer-events: none; }
.btn-loading::before { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: btn-spin 0.6s linear infinite; margin-right: 6px; vertical-align: middle; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Flash messages */
.flash { padding: 11px 15px; border-radius: 8px; margin-bottom: 16px; font-size: 0.9em; }
.flash.error { background: var(--bg-badge-review); color: var(--text-danger); border: 1px solid var(--border-flash-error); }
.flash.success { background: var(--bg-badge-clean); color: var(--text-success); border: 1px solid var(--border-flash-success); }
.flash.info { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-transparent); }

/* Page header (icon + title + subtitle, optional right-aligned actions) */
.page-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.page-head .page-icon { font-size: 1.7em; color: var(--accent); line-height: 1; margin-top: 2px; flex-shrink: 0; }
.page-head .page-titles { flex: 1; min-width: 0; }
.page-head h1 { margin-bottom: 2px; }
.page-head .subtitle { margin-bottom: 0; }
.page-head .page-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Keyboard focus — a clear, consistent focus ring for keyboard users on every
   interactive element (mouse focus stays clean via :focus-visible). Several
   inputs set `outline:none` for their own accent ring; this restores a visible
   indicator for buttons/links/nav/summary that otherwise had none. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Skip-to-content link — visually hidden until focused (keyboard/SR users
   bypass the sidebar). Targets #main-content in base.html. */
.skip-link {
  position: absolute; left: 8px; top: -64px; z-index: 200;
  background: var(--accent); color: #fff; padding: 8px 14px;
  border-radius: 8px; font-size: 0.85em; font-weight: 600;
  text-decoration: none; transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }
/* The skip target is a programmatic focus landing, not an interactive control —
   no ring around the whole content area. */
#main-content:focus, #main-content:focus-visible { outline: none; }

/* Respect reduced-motion — kill transitions/animations for users who ask for it
   (vestibular sensitivity), without changing any layout. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Cards — Mosaic bridge: borderless white/gray-800 with a soft shadow + rounded-xl,
   matching the Tailwind-ported pages (Overview/Videos/Scores) so legacy pages read
   the same. Separation comes from the shadow (light) / bg tone (dark), not a border. */
.card { background: var(--bg-card); border: none; border-radius: 12px; box-shadow: var(--shadow-card); padding: 20px 24px; margin-bottom: 24px; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-header h3 { margin: 0; font-size: 1.05em; font-weight: 600; }
.card > h3:first-child { margin-top: 0; }
/* Tables nested in a card share the card's frame — drop their own border/shadow */
.card table { border: none; box-shadow: none; border-radius: 0; }
.card-title { font-size: 1em; font-weight: 600; margin-bottom: 12px; color: var(--text-dim); }
.card-value { font-size: 2em; font-weight: 600; }
.card-label { font-size: 0.8em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* Score grid */
.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.score-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 16px; text-align: center; }
.score-card .label { font-size: 0.78em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.score-card .value { font-size: 1.8em; font-weight: 600; margin: 6px 0; }
.score-card .bar { height: 4px; background: var(--bar-bg); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.score-card .bar-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.good { color: var(--text-good); } .bar-fill.good { background: var(--bar-good); }
.ok { color: var(--text-ok); } .bar-fill.ok { background: var(--bar-ok); }
.bad, .poor { color: var(--text-bad); } .bar-fill.bad { background: var(--bar-bad); }
.score-excellent { color: var(--text-good); }
.score-good { color: var(--text-ok); }
.score-ok { color: var(--text-ok); }
.score-poor { color: var(--text-bad); }
/* A3: unmeasured is not a bad score. Muted, never the red that reads as a
   judgement of a value we never had. */
.unmeasured, .score-unmeasured { color: var(--text-muted); }

/* Section headers */
h1 { font-size: 1.65em; font-weight: 680; margin-bottom: 6px; letter-spacing: -0.022em; }
h2 { font-size: 1.2em; font-weight: 650; letter-spacing: -0.015em; margin: 26px 0 12px; border-bottom: 1px solid var(--h2-border); padding-bottom: 7px; }
h3 { letter-spacing: -0.01em; }
.subtitle { color: var(--text-muted); font-size: 0.9em; margin-bottom: 20px; }

/* Tables — Mosaic bridge. The card frame (bg/shadow/rounded) is scoped to
   .legacy-page so it doesn't double up on the Tailwind-ported pages, whose tables
   already sit inside a Mosaic card wrapper. th/td spacing stays global (harmless;
   ported tables override it with their own Tailwind classes). */
table { width: 100%; border-collapse: collapse; }
.legacy-page table { background: var(--bg-card); border: none; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); }
.legacy-page th, .legacy-page td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border-table); }
.legacy-page th { background: var(--bg-table-header); font-weight: 600; font-size: 0.72rem; color: var(--text-table-header); text-transform: uppercase; letter-spacing: 0.4px; }
.legacy-page tr:last-child td { border-bottom: none; }
.legacy-page tr:hover td { background: var(--bg-table-hover); }

/* Chart containers */
.chart-container { background: var(--bg-card); border: none; border-radius: 12px; box-shadow: var(--shadow-card); padding: 20px 24px; margin-bottom: 24px; }
.chart-container canvas { max-height: 350px; }

/* Search */
.search-bar { margin-bottom: 16px; display: flex; gap: 10px; }
.search-bar input { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.95em; background: var(--bg-input); color: var(--text); }
.search-bar input:focus { outline: none; border-color: var(--accent); }
.search-bar select { padding: 10px 14px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.95em; background: var(--bg-input); color: var(--text); }
.search-bar select:focus { outline: none; border-color: var(--accent); }

/* Details/summary for video drill-down */
details.video-detail { background: var(--bg-card); border-radius: 8px; box-shadow: var(--shadow); margin-bottom: 10px; overflow: hidden; }
details.video-detail summary { padding: 12px 16px; cursor: pointer; font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
details.video-detail summary:hover { background: var(--bg-hover); }
details.video-detail .detail-body { padding: 0 16px 16px; }

/* Tags/badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.75em; font-weight: 600; text-transform: uppercase; }
.badge.clean { background: var(--bg-badge-clean); color: var(--text-good); }
.badge.minor { background: var(--bg-badge-minor); color: var(--text-ok); }
.badge.review { background: var(--bg-badge-review); color: var(--text-bad); }
.badge-niche { background: var(--bg-badge-niche); color: var(--text-niche); margin-right: 8px; }
.badge-factor { background: var(--bg-badge-factor); color: var(--text-factor); margin-right: 4px; margin-bottom: 4px; font-size: 0.8em; }

/* Outlier classification badges */
.badge.breakout { background: var(--bg-topic-rising); color: var(--text-success); }
.badge.overperformer { background: var(--bg-badge-niche); color: var(--text-niche); }
.badge.normal { background: var(--bar-bg); color: var(--text-muted); }
.badge.underperformer { background: var(--bg-topic-declining); color: var(--text-danger); }
.badge.unrated { background: var(--bar-bg); color: var(--text-muted); }
tr.is-breakout { background: var(--bg-topic-rising); }

/* Chips (clickable keyword/combo/suggestion pills) */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; padding: 4px 10px; border-radius: 14px; font-size: 0.82em;
        text-decoration: none; color: var(--text); background: var(--bg-topic); border: 1px solid transparent; }
.chip:hover { border-color: var(--accent); }
.chip .muted { color: var(--text-muted); }
.chip.combo { background: var(--bg-badge-niche); color: var(--text-niche); }
.chip.suggest { background: var(--bg-topic-rising); color: var(--text-success); }

/* Score cards with success factor indicator */
.score-factor { font-size: 0.7em; color: var(--text-factor); margin-top: 4px; font-weight: 600; }

/* Factor badges container */
.factor-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

/* Toolbar for critique detail */
.tool-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.inline-form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.inline-form select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.85em; background: var(--bg-input); color: var(--text); }

/* Trend topic lists */
.topic-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.topic-list li { background: var(--bg-topic); color: var(--text-niche); padding: 4px 12px; border-radius: 16px; font-size: 0.85em; }
.topic-list.rising li { background: var(--bg-topic-rising); color: var(--text-success); }
.topic-list.declining li { background: var(--bg-topic-declining); color: var(--text-danger); }

/* Recommendation list */
.rec-list { list-style: none; }
.rec-list li { background: var(--bg-card); padding: 12px 16px; border-radius: 8px; box-shadow: var(--shadow); margin-bottom: 8px; border-left: 3px solid var(--accent); }

/* Idea cards for content planner */
.idea-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 20px; margin-bottom: 14px; border-left: 4px solid var(--accent); }
.idea-card .idea-title { font-size: 1.15em; font-weight: 600; color: var(--accent); margin-bottom: 6px; }
.idea-card .idea-source { font-size: 0.8em; color: var(--text-muted); }
.idea-card .idea-keywords { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.idea-card .idea-keywords span { background: var(--bg-keyword); color: var(--text-niche); padding: 2px 10px; border-radius: 12px; font-size: 0.8em; }

/* Action cards grid */
.action-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
.action-card { background: var(--bg-card); border-radius: 12px; box-shadow: var(--shadow); padding: 20px; text-decoration: none; color: var(--text); transition: all 0.2s; border: 1px solid var(--border); }
.action-card:hover { box-shadow: var(--shadow-card); border-color: var(--accent); transform: translateY(-2px); }
.action-icon { font-size: 1.6em; margin-bottom: 8px; }
.action-title { font-weight: 600; font-size: 1em; margin-bottom: 4px; color: var(--accent); }
.action-desc { font-size: 0.82em; color: var(--text-muted); }

/* Tab bar */
.tab-bar { display: flex; gap: 4px; margin-bottom: 20px; background: var(--bg-card); border-radius: 10px; padding: 4px; box-shadow: var(--shadow); }
.tab-btn { flex: 1; padding: 10px 14px; border: none; background: none; font-size: 0.9em; font-weight: 500; color: var(--text-dim); cursor: pointer; border-radius: 8px; transition: all 0.2s; }
.tab-btn:hover { background: var(--bg-hover); }
.tab-btn.active { background: var(--accent); color: #fff; }

/* Tool forms */
.tool-form .form-group { margin-bottom: 12px; }
.tool-form label { display: block; font-size: 0.82em; font-weight: 500; color: var(--text-dim); margin-bottom: 4px; }
.tool-form input[type="text"],
.tool-form input[type="number"] { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.95em; box-sizing: border-box; background: var(--bg-input); color: var(--text); }
.tool-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-transparent); }

/* Unified form controls (select + textarea match text inputs) */
.tool-form select, .tool-form textarea,
.form-group select, .form-group textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.95em; box-sizing: border-box; background: var(--bg-input); color: var(--text);
  font-family: inherit;
}
.tool-form select:focus, .tool-form textarea:focus,
.form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-transparent);
}

/* Table wrapper for horizontal scroll */
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrapper table { min-width: 700px; }

/* Horizontal-scroll affordance: app.js tags scrollable containers with these
   classes; a mask fades the cut-off content at the visible edge (masks pin to
   the element's box, not the scrolled content), so hidden columns read as
   "there's more this way" in either theme. */
.scroll-x-more {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
.scroll-x-back {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32px);
  mask-image: linear-gradient(to right, transparent, #000 32px);
}
.scroll-x-more.scroll-x-back {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

/* Responsive form/content rows — auto-fit so columns collapse on narrow
   screens without needing a media query (replaces inline multi-col grids). */
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.split-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

/* Mobile bottom tab bar — hidden on desktop, shown in the mobile media query. */
.mobile-tabbar { display: none; }

/* Lock background scroll while the mobile drawer is open */
html.drawer-open, html.drawer-open body { overflow: hidden; }

/* Responsive */
@media (max-width: 768px) {

  /* Page head: the export/action buttons drop to their own row instead of
     squeezing the title + subtitle into a sliver. */
  .page-head { flex-wrap: wrap; row-gap: 10px; }
  .page-head .page-actions { margin-left: 0; flex-basis: 100%; flex-wrap: wrap; }

  /* Leave room for the fixed bottom tab bar + the phone's home-indicator. Ported
     pages get their horizontal padding from base.html's inner wrapper; legacy
     pages get it from `.legacy-page`. Both need the bottom clearance. */
  .main-content { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .legacy-page { padding: 16px; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* Bottom tab bar for primary destinations; "Menu" opens the full drawer. */
  .mobile-tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
    background: var(--bg-sidebar); border-top: 1px solid var(--border-sidebar);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-tabbar .tab-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 2px 7px; background: none; border: none; cursor: pointer;
    color: var(--text-sidebar); text-decoration: none; font-size: 0.66em; letter-spacing: 0.02em;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-tabbar .tab-item:active { background: var(--bg-sidebar-hover); }
  .mobile-tabbar .tab-item i { font-size: 1.55em; }
  .mobile-tabbar .tab-item.active { color: var(--accent); }
  /* The Menu tab lights up while the drawer it controls is open. */
  .mobile-tabbar .tab-item[aria-expanded="true"] { color: var(--accent); }

  h1 { font-size: 1.3em; }
  h2 { font-size: 1.1em; }

  .score-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .score-card { padding: 12px; }
  .score-card .value { font-size: 1.4em; }

  .action-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .action-card { padding: 14px; }
  .action-icon { font-size: 1.3em; }
  .action-title { font-size: 0.9em; }

  .search-bar { flex-direction: column; gap: 8px; }
  .search-bar input, .search-bar select { width: 100%; }

  .tab-bar { flex-wrap: wrap; }
  .tab-btn { flex: 1 1 auto; font-size: 0.8em; padding: 8px 10px; }

  table { font-size: 0.85em; }
  th, td { padding: 8px 10px; }

  details.video-detail summary { font-size: 0.9em; padding: 10px 12px; }
  details.video-detail .detail-body { font-size: 0.85em; }

  .rec-list li { font-size: 0.9em; padding: 10px 12px; }

  .chart-container { padding: 12px; }
  .chart-container canvas { max-height: 250px; }

  /* Let wide tables/action rows scroll inside the card instead of breaking
     the page; 16px inputs stop iOS Safari from zooming on focus. */
  .card { padding: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .tool-form input[type="text"],
  .tool-form input[type="number"],
  .tool-form input[type="password"],
  .form-group input, .form-group select, .form-group textarea { font-size: 16px; }
}

@media (max-width: 480px) {
  .score-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .score-card .value { font-size: 1.2em; }
  .action-cards { grid-template-columns: 1fr; }
}
/* "Show the videos behind this number" drill-downs (Overview, Scores) */
.drill { margin-top: 8px; text-align: left; }
.drill > summary { cursor: pointer; font-size: 0.72em; color: var(--text-muted); list-style: none; user-select: none; }
.drill > summary::-webkit-details-marker { display: none; }
.drill > summary::before { content: "\25B8 "; }
.drill[open] > summary::before { content: "\25BE "; }
.drill > summary:hover { color: var(--accent); }
.drill-body { margin-top: 6px; }
.drill-note { font-size: 0.72em; color: var(--text-muted); margin-bottom: 4px; }
.drill-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.78em; }
.drill-table td { padding: 3px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.drill-table tr:last-child td { border-bottom: none; }
.drill-title { max-width: 0; width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drill-title a { color: var(--text-link); text-decoration: none; }
.drill-title a:hover { text-decoration: underline; }
.drill-val { text-align: right; white-space: nowrap; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* Playbook: per-metric shared-pattern line, cohort range, moment example link */
.metric-pattern { font-size: 0.74em; color: var(--accent); margin-top: 2px; }
.metric-range { white-space: nowrap; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.moment-example { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 0.8em; color: var(--text-link); text-decoration: none; }
.moment-example:hover { text-decoration: underline; }

/* "Results look off?" feedback widget (result pages) */
.feedback-box { margin-top: 18px; }
.feedback-box > summary { cursor: pointer; font-size: 0.82em; color: var(--text-muted); list-style: none; user-select: none; display: inline-flex; align-items: center; gap: 6px; }
.feedback-box > summary::-webkit-details-marker { display: none; }
.feedback-box > summary:hover { color: var(--accent); }
.feedback-form { margin-top: 10px; max-width: 560px; display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.feedback-form select, .feedback-form textarea { font-size: 14px; }
.feedback-form button { align-self: flex-start; }

/* Getting-started checklist (Overview, first run) */
.onboard-card { border-left: 3px solid var(--accent); }
.onboard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.onboard-dismiss { background: none; border: none; color: var(--text-muted); font-size: 0.8em;
  cursor: pointer; padding: 2px 6px; }
.onboard-dismiss:hover { color: var(--accent); }
.onboard-steps { list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px; }
.onboard-steps li { display: flex; gap: 12px; align-items: flex-start; }
.onboard-mark { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border); display: inline-flex; align-items: center;
  justify-content: center; font-size: 0.82em; color: var(--text-dim); }
.onboard-steps li.done .onboard-mark { border-color: transparent; color: var(--accent); font-size: 1.5em; }
.onboard-steps li.done > div > a { color: var(--text-muted); text-decoration: line-through; }
.onboard-steps a { font-weight: 600; }
.onboard-tag { font-size: 0.72em; color: var(--text-dim); border: 1px solid var(--border);
  border-radius: 999px; padding: 0 7px; margin-left: 6px; vertical-align: middle; }
.onboard-why { font-size: 0.82em; color: var(--text-muted); margin-top: 2px; }

/* Plan quotas (Account page) */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.plan-op-head { display: flex; justify-content: space-between; font-size: 0.85em; margin-bottom: 4px; }
.plan-op-head span:last-child { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.plan-bar { height: 6px; background: var(--bar-bg); border-radius: 999px; overflow: hidden; }
.plan-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.plan-op.maxed .plan-op-head span:last-child { color: var(--accent); font-weight: 600; }

/* Appearance: mode toggle + accent swatches (Account page) */
.appearance-row { display: flex; align-items: flex-start; gap: 16px; margin: 14px 0; flex-wrap: wrap; }
.appearance-label { flex: 0 0 60px; padding-top: 8px; font-size: 0.85em; color: var(--text-dim); }
.mode-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.mode-btn { background: var(--bg-card); border: none; color: var(--text-dim); cursor: pointer;
  padding: 7px 16px; font-size: 0.88em; display: inline-flex; align-items: center; gap: 6px; }
.mode-btn + .mode-btn { border-left: 1px solid var(--border); }
.mode-btn.active { background: var(--accent); color: #fff; }
.swatch-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { background: none; border: 1px solid transparent; border-radius: 10px; cursor: pointer;
  padding: 8px 6px; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.swatch:hover { background: var(--bg-hover); }
.swatch.active { border-color: var(--accent); background: var(--accent-soft); }
.swatch-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--sw-light);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); }
:root.dark .swatch-dot { background: var(--sw-dark); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.swatch.active .swatch-dot { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--accent); }
.swatch-name { font-size: 0.76em; color: var(--text-dim); }
.swatch.active .swatch-name { color: var(--text); }

/* Header quick tone-switcher popover (reuses the .swatch styles above). */
.accent-menu { position: relative; display: inline-flex; }
.accent-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-card); padding: 12px; width: 208px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s; }
.accent-menu.open .accent-popover { opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.12s ease, transform 0.12s ease; }
.accent-popover-title { font-size: 0.7em; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 10px; }
.accent-popover .swatch-grid { gap: 6px; justify-content: center; }
.accent-popover .swatch { width: 88px; padding: 8px 4px; }

/* Header light/dark toggle icon swap. app.js's markThemeControls() toggles
   .active on every [data-mode] element (also used, unscoped, by account.html's
   always-both-visible mode-btn picker) -- .theme-icon scopes the hide/show
   behavior to just these two icons so the picker buttons aren't affected.
   Not Tailwind's dark:hidden/dark:block: those variants were never used
   elsewhere in the ported templates, so they're absent from the pre-compiled
   tailwind.css and silently do nothing (confirmed live 2026-07-25). */
.theme-icon { display: none; }
.theme-icon.active { display: block; }

/* Add-to-folder control (Library) */
.atf-select { font-size: 0.82em; padding: 4px 8px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg-card); color: var(--text-dim); max-width: 160px; }
.atf-btn { background: none; border: 1px solid var(--border); border-radius: 7px; cursor: pointer;
  color: var(--accent); padding: 4px 8px; line-height: 1; }
.atf-btn:hover { background: var(--accent-soft); }
.atf-link { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82em; color: var(--text-muted);
  text-decoration: none; }
.atf-link:hover { color: var(--accent); }

/* Playbook: thin-coverage tag next to a cohort median (n of M measured) */
.metric-coverage { font-size: 0.72em; color: var(--text-dim); border: 1px solid var(--border);
  border-radius: 999px; padding: 0 6px; white-space: nowrap; cursor: help; }

/* Branded error pages (404/403/429/400) */
.error-page { text-align: center; padding: 48px 16px; max-width: 34rem; margin: 0 auto; }
.error-code { font-size: 4.5rem; font-weight: 800; line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums; }
.error-page h1 { margin: 8px 0 4px; }
.error-actions { margin: 22px 0 10px; display: flex; justify-content: center; }
.error-rid { font-size: 0.82em; color: var(--text-dim); margin-top: 18px; }
.error-rid code { background: var(--bg-elevated, #241b1f); padding: 2px 7px; border-radius: 6px; }

/* Account: Studio testing-mode connection-expiry nudge */
.studio-expiry-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(217, 164, 6, 0.10); border: 1px solid rgba(217, 164, 6, 0.45);
  color: var(--text); border-radius: 8px; padding: 10px 12px; margin: 0 0 14px;
  font-size: 0.9em; }
.studio-expiry-note > .ti { color: #d9a406; font-size: 1.2em; flex: 0 0 auto; }
.studio-expiry-note > span { flex: 1 1 220px; }

/* Playbook: per-format tabs (Shorts vs long-form don't share medians) */
.pb-tabs { display: flex; gap: 6px; margin: 16px 0 4px; flex-wrap: wrap; }
.pb-tab { background: var(--card-bg, var(--bg-elevated)); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 14px;
  font-size: 0.9em; font-weight: 600; cursor: pointer; display: inline-flex;
  align-items: center; gap: 7px; transition: color .12s, border-color .12s; }
.pb-tab:hover { color: var(--text); }
.pb-tab.active { color: var(--accent); border-color: var(--accent); }
.pb-tab-count { font-size: 0.78em; font-weight: 700; color: var(--text-dim);
  background: var(--border); border-radius: 999px; padding: 0 7px; }
.pb-tab.active .pb-tab-count { color: #fff; background: var(--accent); }

/* Retention Forensics page */
.retention-report { margin-bottom: 16px; }
.ret-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ret-worst { text-align: right; flex: 0 0 auto; }
.ret-worst-val { display: block; font-size: 1.4em; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; }
.ret-worst-lbl { font-size: 0.72em; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; }
.ret-headline { margin: 10px 0 0; padding: 10px 14px; border-radius: 8px;
  background: var(--bg-card); border-left: 3px solid var(--accent);
  font-size: 0.98em; line-height: 1.5; color: var(--text); }
.ret-patterns { border-left: 3px solid var(--accent); }
.pkg-patterns { border-left: 3px solid var(--accent); }
.keycheck { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border-radius: 8px; font-size: 0.92em; line-height: 1.5; margin-top: 4px;
  background: var(--bg-card); border: 1px solid var(--border); }
.keycheck i { font-size: 1.2em; margin-top: 1px; flex: 0 0 auto; }
.keycheck-ok { border-left: 3px solid #2ea86b; }
.keycheck-ok i { color: #2ea86b; }
.keycheck-bad { border-left: 3px solid #d64545; }
.keycheck-bad i { color: #d64545; }
.keycheck-missing { border-left: 3px solid var(--text-muted); }
/* Keyword branching */
.branch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 20px; }
.branch-list { list-style: none; margin: 0; padding: 0; }
.branch-list li { padding: 3px 0; font-size: 0.9em; line-height: 1.35; }
.branch-list a { color: var(--text-dim); text-decoration: none; }
.branch-list a:hover { color: var(--text-link); text-decoration: underline; }
/* Audience (comment intelligence) */
.aud-headline-card { border-left: 3px solid var(--accent); }
.aud-headline { margin: 0; font-size: 1.05em; font-weight: 600; line-height: 1.5; color: var(--text); }
.aud-sentiment { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.aud-sent-chip { font-size: 0.78em; padding: 2px 10px; border-radius: 999px;
  background: var(--bg-elev, var(--bg-card)); border: 1px solid var(--border); color: var(--text-dim); }
.aud-sent-positive { color: #2ea86b; border-color: #2ea86b55; }
.aud-sent-negative { color: #d64545; border-color: #d6454555; }
.aud-sent-neutral, .aud-sent-mixed { color: var(--text-dim); }
.aud-theme { padding: 9px 0; border-top: 1px solid var(--border); }
.aud-theme:first-of-type { border-top: none; }
.aud-theme-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.aud-term { font-weight: 600; color: var(--text); text-transform: capitalize; }
.aud-quotes { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
.aud-quote { font-size: 0.88em; color: var(--text-dim); font-style: italic; }
.aud-explore { font-size: 0.8em; color: var(--text-muted); text-decoration: none; }
.aud-explore:hover { color: var(--text-link); text-decoration: underline; }
.aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .aud-grid { grid-template-columns: 1fr; } }
.pkg-extremes { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.pkg-extremes > div { display: flex; flex-direction: column; gap: 2px; }
.pkg-extremes strong { font-variant-numeric: tabular-nums; color: var(--accent); }
/* Winning-profile signature: what the top-CTR videos share (owner CTR x content). */
.pkg-signature { border-left: 3px solid var(--accent); }
.pkg-sig-stmt { margin: 0 0 12px; font-size: 1.05em; font-weight: 600; line-height: 1.5;
  color: var(--text); }
.pkg-sig-features { display: flex; flex-direction: column; gap: 8px; }
.pkg-sig-feature { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pkg-sig-label { font-weight: 600; font-size: 0.92em; }
.pkg-sig-shares { font-size: 0.88em; color: var(--text-dim); }
.pkg-sig-shares strong { color: var(--text); font-variant-numeric: tabular-nums; }
.ret-pattern-headline { margin: 0; font-size: 1.05em; font-weight: 600;
  line-height: 1.5; color: var(--text); }
.ret-pattern-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.88em;
  color: var(--text-dim); }
.ret-pattern-stats strong { color: var(--text); font-variant-numeric: tabular-nums; }
/* Recurring-leak fingerprint: each leak with its derived confidence tier. */
.ret-fingerprint { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 10px; }
.ret-fingerprint li { display: flex; align-items: baseline; gap: 10px;
  line-height: 1.5; }
/* The specific measured magnitude + co-occurrence behind a leak (the moat: real
   Studio retention x content signals). Magnitude sits inline; co-occurrence is a
   distinct muted line below it. */
.ret-leak-mag { color: var(--text-dim); }
.ret-leak-co { display: block; margin-top: 3px; font-size: 0.9em; color: var(--text-muted); }
.conf-badge { flex: none; font-size: 0.68em; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-dim); cursor: help;
  font-variant-numeric: tabular-nums; }
.conf-strong { color: #12805c; border-color: #12805c55; background: #12805c14; }
.conf-solid { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent); }
.conf-tentative { color: #9a6a00; border-color: #9a6a0055; background: #9a6a0012; }
.conf-insufficient { color: var(--text-muted); }
@media (prefers-color-scheme: dark) {
  .conf-strong { color: #4ecfa1; }
  .conf-tentative { color: #e0b050; }
}
:root[data-theme="dark"] .conf-strong { color: #4ecfa1; }
:root[data-theme="dark"] .conf-tentative { color: #e0b050; }
:root[data-theme="light"] .conf-strong { color: #12805c; }
:root[data-theme="light"] .conf-tentative { color: #9a6a00; }
/* Editable inferred-promise cell (Promise -> Payoff): subtle until focused. */
.promise-edit { display: flex; align-items: center; gap: 6px; margin: 0; flex-wrap: wrap; }
.promise-input { flex: 1 1 160px; min-width: 120px; font-size: 0.88em;
  color: var(--text-dim); background: transparent; border: 1px solid transparent;
  border-radius: 6px; padding: 4px 6px; }
.promise-input:hover { border-color: var(--border); }
.promise-input:focus { color: var(--text); background: var(--bg-card);
  border-color: var(--accent); outline: none; }
.promise-save { width: auto; padding: 3px 10px; font-size: 0.8em; }
.ret-chart { width: 100%; height: 88px; display: block; margin-top: 10px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; }
.ret-intro-band { fill: var(--text-dim); opacity: 0.10; }
.ret-drop-band { fill: var(--accent); opacity: 0.18; }
.ret-line { display: flex; gap: 10px; align-items: baseline; padding: 7px 0;
  border-top: 1px solid var(--border); font-size: 0.9em; }
.ret-line:first-of-type { border-top: none; }
.ret-badge { flex: 0 0 auto; min-width: 48px; text-align: center; font-size: 0.78em;
  font-variant-numeric: tabular-nums; color: var(--text-dim); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px; }
.ret-badge-open { color: var(--text-muted); }
.ret-baseline-card { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9em;
  color: var(--text-dim); border-left: 3px solid var(--text-muted); }
.ret-baseline-card i { color: var(--text-muted); font-size: 1.2em; flex: none; margin-top: 1px; }
.ret-baseline-line { fill: none; stroke: var(--text-muted); stroke-width: 1;
  stroke-dasharray: 3 3; opacity: 0.55; vector-effect: non-scaling-stroke; }
.ret-yt-rank { font-size: 0.82em; margin-top: 4px; display: inline-flex; align-items: center; gap: 5px; }
.ret-yt-rank i { color: #ff0000; }
.ret-yt-rank.good strong { color: var(--text-success); }
.ret-yt-rank.low strong { color: var(--accent); }
.ret-deepscan { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 10px 14px; margin-bottom: 16px; border: 1px dashed var(--border);
  border-radius: 10px; }

/* Studio audience-retention curve (videos detail panel) */
.retention-chart { width: 100%; height: 64px; display: block; margin-top: 4px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; }
.retention-line { fill: none; stroke: var(--accent); stroke-width: 1.2;
  vector-effect: non-scaling-stroke; }
.retention-fill { fill: var(--accent); opacity: 0.12; stroke: none; }
.retention-axis { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.retention-legend { display: flex; justify-content: space-between;
  font-size: 0.7em; color: var(--text-dim); margin-top: 2px; }

/* Gap report: a value that falls outside the cohort's min–max range */
.gap-out { color: var(--accent); font-weight: 600; }
.gap-out-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 0.72em; color: var(--accent); border: 1px solid var(--accent); white-space: nowrap; }

/* Mobile: a card whose drill-down is open spans the full grid row so the
   per-video table has room to read (instead of being crushed into one cell of
   a 2-up grid). Progressive enhancement via :has(); harmless where unsupported. */
.metric-card:has(.drill[open]),
.score-card:has(.drill[open]),
.dim-avg:has(.drill[open]) { grid-column: 1 / -1; }

/* Trends monthly breakdown: stacked rows (mobile-first), drill spans full width */
.month-breakdown { display: flex; flex-direction: column; gap: 2px; }
.month-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.month-row:last-child { border-bottom: none; }
.month-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.month-row-period { font-weight: 600; min-width: 74px; }
.month-row-value { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.month-row-mom { font-size: 0.82em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.month-row .drill { margin-top: 6px; }

/* Section framing hint (e.g. "Performance — actual reach" vs "Scores — craft") */
.section-hint { font-size: 0.6em; font-weight: 400; color: var(--text-muted); }
h3 .section-hint { font-size: 0.72em; }

/* Critique: unmeasured dimension (no transcript / no shots) — muted "n/a" */
.score-value.score-na { color: var(--text-muted); font-weight: 500; }

/* Playbook "do-this" benchmark sheet — cohort medians at a glance */
.bench-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.bench-tile { text-align: center; padding: 12px 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; }
.bench-val { font-size: 1.6em; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.1; }
.bench-label { font-size: 0.72em; color: var(--text-muted); margin-top: 3px; }
.bench-moments { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bench-moments-label { font-size: 0.8em; color: var(--text-muted); }
.bench-moment { font-size: 0.85em; background: var(--bg-input); border: 1px solid var(--border); border-radius: 14px; padding: 3px 10px; }

/* --- "why this is showing nothing" note (utils/degradation.py) -------------
   Deliberately informational, not an error: the analysis succeeded, one input
   didn't arrive. Styled to be noticed without implying something is broken. */
.degraded-note {
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn, #d08a2c);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 16px;
  background: var(--card-bg, transparent);
}
.degraded-head {
  font-weight: 600;
  font-size: 0.92em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.degraded-head i { color: var(--warn, #d08a2c); }
.degraded-list { margin: 0; padding-left: 18px; }
.degraded-list li { font-size: 0.9em; color: var(--text-muted); margin: 3px 0; }
.degraded-perm { color: var(--text-muted); font-style: italic; }
.degraded-temp { color: var(--text-muted); font-style: italic; }
.degraded-foot {
  font-size: 0.8em;
  color: var(--text-muted);
  margin-top: 8px;
  opacity: 0.85;
}