/* ============================================================
   REPORTS STYLE — same component/class names as the production
   report app (IndustryReports-2026.05/Reports/www/static/style.css),
   reskinned with 0.v2's design tokens: Inter/JetBrains Mono, teal
   accent, and dark-mode-by-default synced to system preference with
   a manual override checkbox (identical mechanism to ../../style.css).
   Self-contained — no dependency on the parent theme's stylesheet.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --nav-h: 3.25rem;
  --sidebar-w: 17rem;
  --subnav-h: 2.75rem;
  --content-pad-x: 1.75rem;
  /* gap between the frame's vertical hairlines and the true edge of the
     content column (sidebar boundary on the left, scrollbar on the right)
     — without this the lines sit flush against those edges */
  --frame-margin: 1rem;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --color-bg:          #FAFAF8;
  --color-card:        #FFFFFF;
  --color-bg-alt:      #F2F3F2;
  --color-border:      #E1E4E2;
  --color-border-strong: #CBD1CE;
  --color-text:        #14181A;
  --color-text-muted:  #565F5E;
  --color-text-faint:  #8B9391;
  --color-grid-line:   #EEF1EF;
  --grid-fine-size: 2.5rem;

  /* deep teal — fixed, ported from the marketing site's Roadmap section */
  --color-teal-deep: #0E2B28;

  --color-accent:       #2F6F68;
  --color-accent-dark:  #1D4842;
  --color-accent-pale:  #E6EFEC;

  /* fixed (non-theme-reactive) accent for chrome that is *always* dark
     regardless of the page theme — #topnav, the .rhero copy. Using
     --color-accent-dark there is a bug: it's a light-teal-on-white
     accent in light mode and would read as near-black text on a
     near-black background. Never changes across themes. */
  --color-teal-on-dark:  #7FDCC8;

  /* shared with the marketing site (0.v2/style.css) so the report app's
     logo, hero accent, and top-bar announcement read as the same brand */
  --gradient-teal:        linear-gradient(135deg, #0E3E3A 0%, #2F9E8F 100%);
  --gradient-teal-bright: linear-gradient(135deg, #17554E 0%, #3FBBA8 60%, #7FDCC8 100%);
  --color-notify: #E5484D;

  /* Chart / signal colors (2026-07-13 palette, harmonized with the brand
     teal and validated per theme for CVD separation + contrast against the
     card surface). Semantic roles: teal (--color-accent) = Score, blue =
     counts + the Fanout channel, dark teal = percentages, green = organic
     search, purple = AI search + backlink/PageRank accents, amber = warm
     status accents. Every theme block overrides all four. */
  --color-blue:   #2E639C;
  --color-green:  #5C8433;
  --color-amber:  #AC6F26;
  --color-purple: #7C4FA0;

  --color-sidebar-bg:          #12181A;
  --color-sidebar-hover:       #1B2426;
  --color-sidebar-active:      #1D4842;
  --color-sidebar-text:        #94a3ac;
  --color-sidebar-text-bright: #F1F5F4;

  --tier-baseline-bg:  #F2F3F2;
  --tier-baseline-fg:  #8B9391;
  --tier-emerging-bg:  #FBF0DC;
  --tier-emerging-fg:  #8a5417;
  --tier-confirmed-bg: #E6EFEC;
  --tier-confirmed-fg: #1D4842;
  --tier-strong-bg:    #DCF3E6;
  --tier-strong-fg:    #155a32;
  --tier-dominant-bg:  #EEE3FA;
  --tier-dominant-fg:  #4b1a7e;

  --heat-0-bg: #F2F3F2; --heat-0-fg: #8B9391;
  --heat-1-bg: #E6EFEC; --heat-1-fg: #1D4842;
  --heat-2-bg: #BFDBD5; --heat-2-fg: #0f2e2a;
  --heat-3-bg: #6FA89F; --heat-3-fg: #ffffff;
  --heat-4-bg: #2F6F68; --heat-4-fg: #ffffff;
  --heat-5-bg: #1D4842; --heat-5-fg: #ffffff;

  --shadow-card: 0 4px 16px rgba(20, 24, 26, 0.07);
}

html { color-scheme: light; }

/* system prefers dark → dark by default, no toggle interaction needed */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-bg:         #0E1416;
    --color-card:       #1B2224;
    --color-bg-alt:     #171D1F;
    --color-border:     #2B3436;
    --color-border-strong: #414D4F;
    --color-text:       #ECEFED;
    --color-text-muted: #A6AEAC;
    --color-text-faint: #74807D;
    --color-grid-line:  rgba(255,255,255,0.05);

    --color-accent:      #5CC2B3;
    --color-accent-dark: #7FDCC8;
    --color-accent-pale: rgba(92, 194, 179, 0.16);

    --color-blue:   #5D9EE8;
    --color-green:  #97C24E;
    --color-amber:  #DE9C42;
    --color-purple: #B98BE8;

    --color-sidebar-bg:          #090D0E;
    --color-sidebar-hover:       #151b1c;
    --color-sidebar-active:      #1D4842;
    --color-sidebar-text:        #74807D;
    --color-sidebar-text-bright: #ECEFED;

    --tier-baseline-bg:  #1B2224;
    --tier-baseline-fg:  #74807D;
    --tier-emerging-bg:  rgba(202,111,30,0.18);
    --tier-emerging-fg:  #e0a35c;
    --tier-confirmed-bg: rgba(92,194,179,0.16);
    --tier-confirmed-fg: #7FDCC8;
    --tier-strong-bg:    rgba(30,132,73,0.22);
    --tier-strong-fg:    #6fd695;
    --tier-dominant-bg:  rgba(108,52,131,0.28);
    --tier-dominant-fg:  #cfa3e8;

    --heat-0-bg: #1B2224; --heat-0-fg: #74807D;
    --heat-1-bg: rgba(92,194,179,0.14); --heat-1-fg: #7FDCC8;
    --heat-2-bg: rgba(92,194,179,0.30); --heat-2-fg: #e7f7f4;
    --heat-3-bg: #2c675f; --heat-3-fg: #ffffff;
    --heat-4-bg: #3f9c8d; --heat-4-fg: #ffffff;
    --heat-5-bg: #5CC2B3; --heat-5-fg: #05201c;
  }
}

/* ============================================================
   Explicit theme choices — [data-theme] set by static/app.js
   (persisted to localStorage), always wins over the
   prefers-color-scheme media query above regardless of source
   order (an attribute selector on :root is more specific than a
   bare :root inside a media query), so these don't need their own
   media-query wrapping. "light"/"dark" are the two defaults from
   above, just re-expressed as explicit choices; nord/github/slate
   are the three added 2026-07-11 preset palettes. Every preset
   keeps the exact same layout/spacing/shadows — only the color
   variables change, see MEMORY.md's theme-picker analysis note.
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg:         #0E1416;
  --color-card:       #1B2224;
  --color-bg-alt:     #171D1F;
  --color-border:     #2B3436;
  --color-border-strong: #414D4F;
  --color-text:       #ECEFED;
  --color-text-muted: #A6AEAC;
  --color-text-faint: #74807D;
  --color-grid-line:  rgba(255,255,255,0.05);

  --color-accent:      #5CC2B3;
  --color-accent-dark: #7FDCC8;
  --color-accent-pale: rgba(92, 194, 179, 0.16);

  --color-blue:   #5D9EE8;
  --color-green:  #97C24E;
  --color-amber:  #DE9C42;
  --color-purple: #B98BE8;

  --color-sidebar-bg:          #090D0E;
  --color-sidebar-hover:       #151b1c;
  --color-sidebar-active:      #1D4842;
  --color-sidebar-text:        #74807D;
  --color-sidebar-text-bright: #ECEFED;

  --tier-baseline-bg:  #1B2224;
  --tier-baseline-fg:  #74807D;
  --tier-emerging-bg:  rgba(202,111,30,0.18);
  --tier-emerging-fg:  #e0a35c;
  --tier-confirmed-bg: rgba(92,194,179,0.16);
  --tier-confirmed-fg: #7FDCC8;
  --tier-strong-bg:    rgba(30,132,73,0.22);
  --tier-strong-fg:    #6fd695;
  --tier-dominant-bg:  rgba(108,52,131,0.28);
  --tier-dominant-fg:  #cfa3e8;

  --heat-0-bg: #1B2224; --heat-0-fg: #74807D;
  --heat-1-bg: rgba(92,194,179,0.14); --heat-1-fg: #7FDCC8;
  --heat-2-bg: rgba(92,194,179,0.30); --heat-2-fg: #e7f7f4;
  --heat-3-bg: #2c675f; --heat-3-fg: #ffffff;
  --heat-4-bg: #3f9c8d; --heat-4-fg: #ffffff;
  --heat-5-bg: #5CC2B3; --heat-5-fg: #05201c;
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-bg:         #FAFAF8;
  --color-card:       #FFFFFF;
  --color-bg-alt:     #F2F3F2;
  --color-border:     #E1E4E2;
  --color-border-strong: #CBD1CE;
  --color-text:       #14181A;
  --color-text-muted: #565F5E;
  --color-text-faint: #8B9391;
  --color-grid-line:  #EEF1EF;

  --color-accent:      #2F6F68;
  --color-accent-dark: #1D4842;
  --color-accent-pale: #E6EFEC;

  --color-blue:   #2E639C;
  --color-green:  #5C8433;
  --color-amber:  #AC6F26;
  --color-purple: #7C4FA0;

  --color-sidebar-bg:          #12181A;
  --color-sidebar-hover:       #1B2426;
  --color-sidebar-active:      #1D4842;
  --color-sidebar-text:        #94a3ac;
  --color-sidebar-text-bright: #F1F5F4;

  --tier-baseline-bg:  #F2F3F2;
  --tier-baseline-fg:  #8B9391;
  --tier-emerging-bg:  #FBF0DC;
  --tier-emerging-fg:  #8a5417;
  --tier-confirmed-bg: #E6EFEC;
  --tier-confirmed-fg: #1D4842;
  --tier-strong-bg:    #DCF3E6;
  --tier-strong-fg:    #155a32;
  --tier-dominant-bg:  #EEE3FA;
  --tier-dominant-fg:  #4b1a7e;

  --heat-0-bg: #F2F3F2; --heat-0-fg: #8B9391;
  --heat-1-bg: #E6EFEC; --heat-1-fg: #1D4842;
  --heat-2-bg: #BFDBD5; --heat-2-fg: #0f2e2a;
  --heat-3-bg: #6FA89F; --heat-3-fg: #ffffff;
  --heat-4-bg: #2F6F68; --heat-4-fg: #ffffff;
  --heat-5-bg: #1D4842; --heat-5-fg: #ffffff;
}

/* Nord Dark — arctic blue-gray on Polar Night. https://www.nordtheme.com/ */
:root[data-theme="nord-dark"] {
  color-scheme: dark;
  --color-bg:         #2E3440;
  --color-card:       #3B4252;
  --color-bg-alt:     #333A46;
  --color-border:     #4C566A;
  --color-border-strong: #5B6779;
  --color-text:       #ECEFF4;
  --color-text-muted: #D8DEE9;
  --color-text-faint: #8792A6;
  --color-grid-line:  rgba(236,239,244,0.06);

  --color-accent:      #88C0D0;
  --color-accent-dark: #8FBCBB;
  --color-accent-pale: rgba(136,192,208,0.16);

  --color-blue:   #5E81AC;
  --color-green:  #A3BE8C;
  --color-amber:  #EBCB8B;
  --color-purple: #B48EAD;

  --color-sidebar-bg:          #242933;
  --color-sidebar-hover:       #2E3440;
  --color-sidebar-active:      #3B4252;
  --color-sidebar-text:        #8792A6;
  --color-sidebar-text-bright: #ECEFF4;

  --tier-baseline-bg:  #3B4252;
  --tier-baseline-fg:  #8792A6;
  --tier-emerging-bg:  rgba(208,135,112,0.18);
  --tier-emerging-fg:  #D08770;
  --tier-confirmed-bg: rgba(136,192,208,0.16);
  --tier-confirmed-fg: #88C0D0;
  --tier-strong-bg:    rgba(163,190,140,0.20);
  --tier-strong-fg:    #A3BE8C;
  --tier-dominant-bg:  rgba(180,142,173,0.25);
  --tier-dominant-fg:  #B48EAD;

  --heat-0-bg: #3B4252; --heat-0-fg: #8792A6;
  --heat-1-bg: rgba(136,192,208,0.14); --heat-1-fg: #88C0D0;
  --heat-2-bg: rgba(136,192,208,0.30); --heat-2-fg: #eaf6f8;
  --heat-3-bg: #81A1C1; --heat-3-fg: #ffffff;
  --heat-4-bg: #5E81AC; --heat-4-fg: #ffffff;
  --heat-5-bg: #4C6A92; --heat-5-fg: #ffffff;
}

/* Nord Light — Snow Storm surfaces, frost accents. https://www.nordtheme.com/ */
:root[data-theme="nord-light"] {
  color-scheme: light;
  --color-bg:         #E5E9F0;
  --color-card:       #ECEFF4;
  --color-bg-alt:     #E1E6EE;
  --color-border:     #D8DEE9;
  --color-border-strong: #B8C2D4;
  --color-text:       #2E3440;
  --color-text-muted: #4C566A;
  --color-text-faint: #7B88A1;
  --color-grid-line:  rgba(46,52,64,0.06);

  --color-accent:      #5E81AC;
  --color-accent-dark: #3C5A80;
  --color-accent-pale: rgba(94,129,172,0.14);

  --color-blue:   #4A7E7D;
  --color-green:  #5B7B46;
  --color-amber:  #92702F;
  --color-purple: #8A627F;

  --color-sidebar-bg:          #242933;
  --color-sidebar-hover:       #2E3440;
  --color-sidebar-active:      #3B4252;
  --color-sidebar-text:        #8792A6;
  --color-sidebar-text-bright: #ECEFF4;

  --tier-baseline-bg:  #E1E6EE;
  --tier-baseline-fg:  #7B88A1;
  --tier-emerging-bg:  rgba(208,135,112,0.18);
  --tier-emerging-fg:  #A85B42;
  --tier-confirmed-bg: rgba(94,129,172,0.14);
  --tier-confirmed-fg: #3C5A80;
  --tier-strong-bg:    rgba(163,190,140,0.28);
  --tier-strong-fg:    #4F7040;
  --tier-dominant-bg:  rgba(180,142,173,0.25);
  --tier-dominant-fg:  #7A5271;

  --heat-0-bg: #E1E6EE; --heat-0-fg: #7B88A1;
  --heat-1-bg: rgba(94,129,172,0.12); --heat-1-fg: #3C5A80;
  --heat-2-bg: rgba(94,129,172,0.28); --heat-2-fg: #2E4763;
  --heat-3-bg: #81A1C1; --heat-3-fg: #ffffff;
  --heat-4-bg: #5E81AC; --heat-4-fg: #ffffff;
  --heat-5-bg: #3C5A80; --heat-5-fg: #ffffff;
}

/* GitHub Light — clean white, blue accent. Matches github.com's default light UI. */
:root[data-theme="github-light"] {
  color-scheme: light;
  --color-bg:         #F6F8FA;
  --color-card:       #FFFFFF;
  --color-bg-alt:     #F6F8FA;
  --color-border:     #D0D7DE;
  --color-border-strong: #AFB8C1;
  --color-text:       #1F2328;
  --color-text-muted: #59636E;
  --color-text-faint: #8C959F;
  --color-grid-line:  #EAEEF2;

  --color-accent:      #0969DA;
  --color-accent-dark: #0550AE;
  --color-accent-pale: #DDF4FF;

  --color-blue:   #0891A6;
  --color-green:  #1A7F37;
  --color-amber:  #9A6700;
  --color-purple: #8250DF;

  --color-sidebar-bg:          #24292F;
  --color-sidebar-hover:       #32383F;
  --color-sidebar-active:      #0D419D;
  --color-sidebar-text:        #9198A1;
  --color-sidebar-text-bright: #FFFFFF;

  --tier-baseline-bg:  #F6F8FA;
  --tier-baseline-fg:  #8C959F;
  --tier-emerging-bg:  #FFF8C5;
  --tier-emerging-fg:  #9A6700;
  --tier-confirmed-bg: #DDF4FF;
  --tier-confirmed-fg: #0550AE;
  --tier-strong-bg:    #DAFBE1;
  --tier-strong-fg:    #1A7F37;
  --tier-dominant-bg:  #FBEFFF;
  --tier-dominant-fg:  #8250DF;

  --heat-0-bg: #F6F8FA; --heat-0-fg: #8C959F;
  --heat-1-bg: #DDF4FF; --heat-1-fg: #0550AE;
  --heat-2-bg: #B6E3FF; --heat-2-fg: #033D8B;
  --heat-3-bg: #54AEFF; --heat-3-fg: #ffffff;
  --heat-4-bg: #0969DA; --heat-4-fg: #ffffff;
  --heat-5-bg: #0550AE; --heat-5-fg: #ffffff;
}

/* GitHub Dark — Primer dark surfaces and hues. Matches github.com's dark UI. */
:root[data-theme="github-dark"] {
  color-scheme: dark;
  --color-bg:         #0D1117;
  --color-card:       #161B22;
  --color-bg-alt:     #11161D;
  --color-border:     #30363D;
  --color-border-strong: #484F58;
  --color-text:       #E6EDF3;
  --color-text-muted: #8B949E;
  --color-text-faint: #6E7681;
  --color-grid-line:  rgba(230,237,243,0.05);

  --color-accent:      #58A6FF;
  --color-accent-dark: #79C0FF;
  --color-accent-pale: rgba(88,166,255,0.15);

  --color-blue:   #39C5CF;
  --color-green:  #3FB950;
  --color-amber:  #D29922;
  --color-purple: #BC8CFF;

  --color-sidebar-bg:          #010409;
  --color-sidebar-hover:       #161B22;
  --color-sidebar-active:      #1F6FEB;
  --color-sidebar-text:        #8B949E;
  --color-sidebar-text-bright: #FFFFFF;

  --tier-baseline-bg:  #161B22;
  --tier-baseline-fg:  #6E7681;
  --tier-emerging-bg:  rgba(210,153,34,0.15);
  --tier-emerging-fg:  #D29922;
  --tier-confirmed-bg: rgba(88,166,255,0.15);
  --tier-confirmed-fg: #58A6FF;
  --tier-strong-bg:    rgba(63,185,80,0.15);
  --tier-strong-fg:    #3FB950;
  --tier-dominant-bg:  rgba(188,140,255,0.16);
  --tier-dominant-fg:  #BC8CFF;

  --heat-0-bg: #161B22; --heat-0-fg: #6E7681;
  --heat-1-bg: rgba(88,166,255,0.15); --heat-1-fg: #58A6FF;
  --heat-2-bg: rgba(88,166,255,0.35); --heat-2-fg: #CAE8FF;
  --heat-3-bg: #1F6FEB; --heat-3-fg: #ffffff;
  --heat-4-bg: #388BFD; --heat-4-fg: #ffffff;
  --heat-5-bg: #79C0FF; --heat-5-fg: #0D1117;
}

/* Slate Light — neutral graphite, minimal color. The conservative option. */
:root[data-theme="slate-light"] {
  color-scheme: light;
  --color-bg:         #F7F7F8;
  --color-card:       #FFFFFF;
  --color-bg-alt:     #EEEFF1;
  --color-border:     #DEE0E3;
  --color-border-strong: #C4C7CC;
  --color-text:       #1C1E21;
  --color-text-muted: #5B5F66;
  --color-text-faint: #8A8F96;
  --color-grid-line:  #EDEEF0;

  --color-accent:      #475569;
  --color-accent-dark: #334155;
  --color-accent-pale: #E7E9EC;

  --color-blue:   #527399;
  --color-green:  #5F824B;
  --color-amber:  #96703B;
  --color-purple: #7D5E96;

  --color-sidebar-bg:          #1E2126;
  --color-sidebar-hover:       #282C33;
  --color-sidebar-active:      #37414F;
  --color-sidebar-text:        #9198A1;
  --color-sidebar-text-bright: #F5F6F7;

  --tier-baseline-bg:  #EEEFF1;
  --tier-baseline-fg:  #8A8F96;
  --tier-emerging-bg:  #F2E9D8;
  --tier-emerging-fg:  #8A6A2F;
  --tier-confirmed-bg: #E7E9EC;
  --tier-confirmed-fg: #334155;
  --tier-strong-bg:    #DCE7DF;
  --tier-strong-fg:    #2F5D3F;
  --tier-dominant-bg:  #E6E1EC;
  --tier-dominant-fg:  #4B3A6B;

  --heat-0-bg: #EEEFF1; --heat-0-fg: #8A8F96;
  --heat-1-bg: #E4E7EA; --heat-1-fg: #475569;
  --heat-2-bg: #C6CCD4; --heat-2-fg: #1C2733;
  --heat-3-bg: #8B96A3; --heat-3-fg: #ffffff;
  --heat-4-bg: #5B6B80; --heat-4-fg: #ffffff;
  --heat-5-bg: #334155; --heat-5-fg: #ffffff;
}

/* Slate Dark — deep graphite, minimal color. The conservative dark option. */
:root[data-theme="slate-dark"] {
  color-scheme: dark;
  --color-bg:         #0F172A;
  --color-card:       #1E293B;
  --color-bg-alt:     #182234;
  --color-border:     #334155;
  --color-border-strong: #475569;
  --color-text:       #E2E8F0;
  --color-text-muted: #94A3B8;
  --color-text-faint: #64748B;
  --color-grid-line:  rgba(226,232,240,0.05);

  --color-accent:      #94A3B8;
  --color-accent-dark: #CBD5E1;
  --color-accent-pale: rgba(148,163,184,0.16);

  --color-blue:   #6FA3DC;
  --color-green:  #8FB871;
  --color-amber:  #CD9A50;
  --color-purple: #B18CD1;

  --color-sidebar-bg:          #0B1120;
  --color-sidebar-hover:       #172033;
  --color-sidebar-active:      #334155;
  --color-sidebar-text:        #8494AA;
  --color-sidebar-text-bright: #F1F5F9;

  --tier-baseline-bg:  #1E293B;
  --tier-baseline-fg:  #64748B;
  --tier-emerging-bg:  rgba(205,154,80,0.16);
  --tier-emerging-fg:  #CD9A50;
  --tier-confirmed-bg: rgba(148,163,184,0.18);
  --tier-confirmed-fg: #CBD5E1;
  --tier-strong-bg:    rgba(143,184,113,0.18);
  --tier-strong-fg:    #8FB871;
  --tier-dominant-bg:  rgba(177,140,209,0.20);
  --tier-dominant-fg:  #B18CD1;

  --heat-0-bg: #1E293B; --heat-0-fg: #64748B;
  --heat-1-bg: rgba(148,163,184,0.14); --heat-1-fg: #94A3B8;
  --heat-2-bg: rgba(148,163,184,0.30); --heat-2-fg: #E2E8F0;
  --heat-3-bg: #64748B; --heat-3-fg: #ffffff;
  --heat-4-bg: #94A3B8; --heat-4-fg: #0F172A;
  --heat-5-bg: #CBD5E1; --heat-5-fg: #0F172A;
}

body {
  font-family: var(--font-sans);
  font-size: 0.9375rem; color: var(--color-text); background: var(--color-bg);
  height: 100%; overflow: hidden;
}
a { color: inherit; }
table { border-collapse: collapse; }

/* ============================================================
   Layout
   ============================================================ */
#layout {
  display: grid;
  grid-template-rows: var(--nav-h) 1fr;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100%;
}
#topnav {
  grid-column: 1 / -1;
  background: var(--color-sidebar-bg);
  color: #fff;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 1.25rem;
  gap: 1rem;
  border-bottom: 1px solid var(--color-border);
  z-index: 100;
}
#topnav .brand {
  display: flex; align-items: center; gap: 0.625rem;
  font-weight: 700; font-size: 1rem; letter-spacing: -0.02em;
  color: #fff; white-space: nowrap;
}
/* The brand is two links since 2026-07-14 (logo -> marketing home,
   report tag -> report app home), so it's a div holding two anchors. */
#topnav .brand-home {
  display: flex; align-items: center; gap: 0.625rem;
  color: #fff; text-decoration: none;
}
#topnav .brand-home:hover .brand-word { color: var(--color-teal-on-dark); }
#topnav a.brand-report-tag { text-decoration: none; }
#topnav a.brand-report-tag:hover { color: var(--color-teal-on-dark); }

/* logo mark — same box/gradient as the marketing site's .brand-mark, ported
   here so the report app reads as the same product, not a separate tool */
.brand-mark {
  position: relative;
  width: 1.75rem; height: 1.75rem; flex-shrink: 0;
  background: var(--gradient-teal);
  color: #fff;
  border-radius: 0.25rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600;
}
.brand-notify {
  position: absolute; top: -0.3125rem; right: -0.3125rem;
  width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--color-notify); color: #fff;
  font-family: var(--font-sans); font-size: 0.5625rem; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-sidebar-bg);
}
.brand-word { font-size: 0.9375rem; }
.brand-report-tag {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 400;
  color: var(--color-sidebar-text); text-transform: uppercase; letter-spacing: 0.06em;
  border-left: 1px solid rgba(255,255,255,0.14); padding-left: 0.625rem; margin-left: 0.125rem;
  white-space: nowrap;
}

/* announcement space — centered in the top bar regardless of brand/actions
   width, via the topnav's 3-column grid above */
#topnav .nav-extra { display: flex; justify-content: center; min-width: 0; }
.announce-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600;
  color: #fff; text-decoration: none;
  background: var(--gradient-teal);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px; padding: 0.375rem 0.875rem 0.375rem 0.625rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: filter .15s ease, box-shadow .15s ease;
}
.announce-link:hover { filter: brightness(1.08); box-shadow: 0 0 0 3px rgba(92,194,179,0.25); }
.announce-badge {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; background: rgba(255,255,255,0.16); color: #fff;
  padding: 0.0625rem 0.4375rem; border-radius: 999px; flex-shrink: 0;
}
.announce-arrow { opacity: 0.85; }

.topnav-actions { display: flex; align-items: center; gap: 1rem; justify-self: end; }
.topnav-actions .site-link {
  font-size: 0.75rem; color: var(--color-sidebar-text); text-decoration: none;
}
.topnav-actions .site-link:hover { color: #fff; }

#sidebar {
  background: var(--color-sidebar-bg);
  overflow: visible;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-border);
  /* Grid items default to min-height: auto (grow to fit content), which
     overrides the grid row's own height constraint from #layout -- without
     this, a tall report-type list just pushes #sidebar past the viewport
     instead of being clipped/scrolled internally. */
  min-height: 0;
}

/* ============================================================
   Industry picker — always shows the current industry (or a
   generic label on the global overview) as a real link; hovering
   or focusing reveals the full searchable list. Pure CSS
   show/hide (:hover/:focus-within, same mechanism as
   .persona-switcher) so every industry link is present in the
   raw HTML at all times — nothing is rendered in by JS, so a
   basic crawler sees the full list.
   ============================================================ */
.industry-picker { position: relative; flex-shrink: 0; }
.industry-picker-btn {
  height: var(--subnav-h); box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0 0.9375rem; border-bottom: 1px solid rgba(255,255,255,0.08);
  color: var(--color-sidebar-text-bright); text-decoration: none;
  font-size: 0.8125rem; font-weight: 600;
  transition: background .12s;
}
.industry-picker-btn:hover { background: var(--color-sidebar-hover); }
.ip-current-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.industry-picker .chevron { transition: transform .15s ease; color: var(--color-sidebar-text); flex-shrink: 0; }
.industry-picker:hover .chevron,
.industry-picker:focus-within .chevron { transform: rotate(180deg); }

.industry-picker-menu {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0; /* flush against the button */
  background: var(--color-sidebar-bg); border: 1px solid var(--color-border);
  border-top: none;
  box-shadow: var(--shadow-card);
  z-index: 300;
  flex-direction: column;
}
.industry-picker:hover .industry-picker-menu,
.industry-picker:focus-within .industry-picker-menu { display: flex; }

.ip-search {
  flex-shrink: 0; box-sizing: border-box;
  display: flex; align-items: center; padding: 0.625rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ip-search input {
  width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 0.25rem;
  color: var(--color-sidebar-text-bright); padding: 0.375rem 0.625rem; font-size: 0.75rem; outline: none;
  font-family: var(--font-sans);
}
.ip-search input::placeholder { color: var(--color-sidebar-text); }
.ip-search input:focus { border-color: var(--color-accent); }

.ip-list {
  max-height: 50vh; overflow-y: auto; list-style: none; padding: 0.25rem 0; margin: 0;
}
.ip-list::-webkit-scrollbar { width: 0.25rem; }
.ip-list::-webkit-scrollbar-track { background: transparent; }
.ip-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 0.125rem; }
.ind-item.hidden { display: none; }

.ind-link {
  display: flex; align-items: center; padding: 0.4375rem 0.75rem;
  color: var(--color-sidebar-text); gap: 0.375rem; text-decoration: none;
  transition: background .12s, color .12s;
}
.ind-link:hover  { background: var(--color-sidebar-hover); color: var(--color-sidebar-text-bright); }
.ind-link.active { background: var(--color-sidebar-active); color: #fff; }
.ind-name  { flex: 1; font-size: 0.75rem; line-height: 1.3; }
.ind-count { font-size: 0.625rem; color: var(--color-sidebar-text); flex-shrink: 0; }
.ind-link.active .ind-count { color: rgba(255,255,255,0.6); }

/* ============================================================
   Report-type nav — replaces the old always-expanded industry
   accordion once an industry is selected. Persona switching lives
   in the top persona-switcher dropdown instead, so this list is
   just the flat set of report types for the current industry/persona.
   ============================================================ */
#report-type-nav {
  list-style: none; padding: 0.75rem 0; margin: 0; overflow-y: auto; flex: 1;
  /* Same min-height: auto pitfall as #sidebar above, one level down: a flex
     item won't shrink below its content's natural height by default, which
     silently defeats overflow-y: auto (the list just grows instead of
     scrolling). This is the actual fix for the "can't scroll the sidebar
     nav" bug -- flex: 1 and overflow-y: auto were already here but did
     nothing without this. */
  min-height: 0;
}
#report-type-nav::-webkit-scrollbar { width: 0.25rem; }
#report-type-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 0.125rem; }
.rt-link {
  display: block; padding: 0.5rem 0.9375rem;
  color: var(--color-sidebar-text); text-decoration: none;
  font-size: 0.8125rem; font-weight: 500;
  border-left: 2px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.rt-link:hover  { background: var(--color-sidebar-hover); color: var(--color-sidebar-text-bright); }
.rt-link.active { background: var(--color-sidebar-active); color: #fff; border-left-color: var(--color-teal-on-dark); font-weight: 600; }

.rt-divider {
  height: 1px; margin: 0.25rem 0.9375rem;
  background: rgba(255,255,255,0.1);
}

/* Non-clickable section headers grouping the report-type nav — 2026-07-13
   (scope-prefixed: "Industry UGC & News" / "Persona UGC & News", etc.).
   See REPORT_TYPE_NAV_SECTIONS in _functions.php. Faint top border +
   background tint so each section reads as its own block against the
   volume of links, without competing with the links themselves. */
.rt-section {
  margin-top: 1rem;
  padding: 0.625rem 0.9375rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  font-size: 0.65rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--color-sidebar-text); opacity: 0.7;
  cursor: default; user-select: none;
}
/* First section header (right after the Home link): slightly tighter so
   the Home item sits vertically centered in the gap above it. */
#report-type-nav > li:first-child + .rt-section { margin-top: 0.75rem; }

#main {
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* ============================================================
   Sidebar persona switcher — sits between the industry picker and
   the report-type nav (moved out of a top-of-page bar 2026-07-11).
   Generous top padding/border-top puts real distance between this
   and .industry-picker-btn above it, so aiming for the persona
   dropdown doesn't clip the industry picker's own hover zone on
   the way down.
   ============================================================ */
.sidebar-persona {
  flex-shrink: 0; box-sizing: border-box;
  padding: 1rem 0.9375rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-persona-label {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  color: var(--color-sidebar-text); text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

.persona-switcher { position: relative; }
.persona-switcher-btn {
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  background: var(--color-sidebar-hover); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.375rem; padding: 0.5rem 0.75rem;
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; color: var(--color-sidebar-text-bright);
  cursor: pointer; transition: border-color .12s;
}
.persona-switcher:hover .persona-switcher-btn,
.persona-switcher:focus-within .persona-switcher-btn { border-color: var(--color-accent); }
.persona-switcher .chevron { transition: transform .15s ease; color: var(--color-sidebar-text); flex-shrink: 0; }
.persona-switcher:hover .chevron,
.persona-switcher:focus-within .chevron { transform: rotate(180deg); }
.ps-current-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.persona-switcher-menu {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0; /* flush against the button — no gap, so the
  mouse never crosses dead space between the two and loses :hover */
  background: var(--color-sidebar-bg); border: 1px solid var(--color-border); border-radius: 0.375rem;
  border-top-left-radius: 0; border-top-right-radius: 0;
  box-shadow: var(--shadow-card);
  padding: 0.375rem; z-index: 200;
  max-height: 60vh; overflow-y: auto;
}
.persona-switcher:hover .persona-switcher-menu,
.persona-switcher:focus-within .persona-switcher-menu { display: block; }

.ps-menu-item {
  display: block; padding: 0.5rem 0.625rem; border-radius: 0.25rem;
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500;
  color: var(--color-sidebar-text); text-decoration: none; white-space: nowrap;
}
.ps-menu-item:hover { background: var(--color-sidebar-hover); color: var(--color-sidebar-text-bright); }
.ps-menu-item.active { color: var(--color-teal-on-dark); font-weight: 700; }
.ps-menu-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 0.375rem 0.125rem; }

/* ============================================================
   Scrollable content area below the sub-nav — same rules #main
   used to carry directly.
   ============================================================ */
#main-content {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column;
  /* #main-content, not <html>, is the actual scroll container (body has
     overflow:hidden) — this is what makes native in-page fragment links
     (e.g. #organic-search) scroll smoothly instead of jumping instantly. */
  scroll-behavior: smooth;
}
#main-content::-webkit-scrollbar { width: 0.375rem; }
#main-content::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 0.125rem; }

/* ============================================================
   REPORT FRAME — thin vertical hairlines bracketing the padded
   content column, full report-app equivalent of the marketing
   site's .frame + .shell combined. Every page's content is a
   full-bleed .rhero (edge-to-edge, no inset) followed by exactly
   one .report-frame (padded/framed) — each industry/persona is its
   own URL now, so there's no client-side view-toggling to speak of.

   Auto-height (sized to its own content) rather than #main-content
   (which has a fixed viewport height + overflow:auto) — an
   absolutely-positioned top:0/bottom:0 line on the scroll container
   itself would only span its visible viewport height, not the full
   scrollable content, and would appear to "run out" partway down.
   ============================================================ */
.report-frame {
  position: relative;
  margin: 0 var(--frame-margin);
  padding: 1.5rem var(--content-pad-x);
  display: flex; flex-direction: column; gap: 1.25rem;
  /* direct flex child of #main-content on some pages — see the note
     on .rhero below for why this matters. */
  flex-shrink: 0;
}
.report-frame::before,
.report-frame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
}
.report-frame::before { left: 0; }
.report-frame::after  { right: 0; }

/* ============================================================
   DIVIDER — full-column-width double hairline between sections,
   with corner dots marking where it meets the frame lines above.
   Bleeds out to the frame edge via negative margin equal to the
   report-frame padding, then its own 0%/100% line up with it.
   ============================================================ */
.rdivider {
  position: relative;
  height: 1rem;
  margin: 0.25rem calc(-1 * var(--content-pad-x));
}
.rdivider::before,
.rdivider::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
}
.rdivider::before { top: 0; }
.rdivider::after { bottom: 0; }
.rdot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-border-strong);
  transform: translate(-50%, -50%);
}
.rdot-tl { left: 0;   top: 0; }
.rdot-tr { left: 100%; top: 0; }
.rdot-bl { left: 0;   top: 100%; }
.rdot-br { left: 100%; top: 100%; }

/* ============================================================
   Theme picker — hover dropdown (same :hover/:focus-within
   mechanism as .persona-switcher/.industry-picker), but selecting
   an option needs JS (sets [data-theme] + localStorage — see
   static/app.js). Styled as a real button, not a bare icon, per
   explicit request ("make it look like something you can select
   easily").
   ============================================================ */
.theme-picker { position: relative; height: 100%; display: flex; align-items: center; }
.theme-picker-btn {
  display: flex; align-items: center; gap: 0.4375rem;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 0.375rem; padding: 0.375rem 0.625rem;
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600;
  color: var(--color-sidebar-text); cursor: pointer; transition: border-color .12s, color .12s;
}
.theme-picker:hover .theme-picker-btn,
.theme-picker:focus-within .theme-picker-btn { border-color: var(--color-teal-on-dark); color: #fff; }
.theme-picker .chevron { transition: transform .15s ease; flex-shrink: 0; }
.theme-picker:hover .chevron,
.theme-picker:focus-within .chevron { transform: rotate(180deg); }

.theme-picker-menu {
  display: none;
  position: absolute; top: 100%; right: 0; /* flush against the button — no gap, so the
  mouse never crosses dead space between the two and loses :hover */
  min-width: 10rem;
  background: var(--color-sidebar-bg); border: 1px solid var(--color-border); border-radius: 0.375rem;
  box-shadow: var(--shadow-card);
  padding: 0.375rem; z-index: 400;
}
.theme-picker:hover .theme-picker-menu,
.theme-picker:focus-within .theme-picker-menu { display: block; }

.theme-option {
  display: block; width: 100%; text-align: left; padding: 0.5rem 0.625rem; border-radius: 0.25rem;
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500;
  background: none; border: 0; color: var(--color-sidebar-text); cursor: pointer;
}
.theme-option:hover { background: var(--color-sidebar-hover); color: var(--color-sidebar-text-bright); }
.theme-option.active { color: var(--color-teal-on-dark); font-weight: 700; }
.theme-picker-sep { height: 1px; background: rgba(255,255,255,0.1); margin: 0.375rem 0.125rem; }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: 0.375rem; padding: 1.25rem 1.375rem;
}
.section-desc { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.75; margin-bottom: 1.25rem; }
.section-desc p + p { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--color-text-faint); font-style: italic; }

/* ============================================================
   Insight text
   ============================================================ */
.insight-text { line-height: 1.75; color: var(--color-text-muted); }
.insight-text p { margin-bottom: 0.625rem; }
.insight-text p:last-child { margin-bottom: 0; }
.insight-text strong { color: var(--color-text); font-weight: 600; }

/* ============================================================
   Persona quick-nav
   ============================================================ */
.persona-nav-label { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 0.625rem; }
.persona-nav-row { display: flex; flex-wrap: wrap; gap: 0.4375rem; }
.persona-nav-link {
  display: inline-block; padding: 0.3125rem 0.75rem;
  background: var(--color-accent-pale); border: 1px solid var(--color-accent);
  border-radius: 0.25rem; color: var(--color-accent-dark);
  text-decoration: none; font-size: 0.75rem; font-weight: 600;
  transition: background .12s, color .12s, border-color .12s;
}
.persona-nav-link:hover { background: var(--color-accent); color: #fff; }
.persona-nav-link.neutral { background: var(--color-bg-alt); border-color: var(--color-border); color: var(--color-text-muted); }
.persona-nav-link.neutral:hover { background: var(--color-border); color: var(--color-text); }

.persona-summary {
  font-size: 0.9375rem; line-height: 1.9; color: var(--color-text-muted);
  background: var(--color-accent-pale); border-left: 0.1875rem solid var(--color-accent);
  padding: 0.875rem 1rem; border-radius: 0 0.25rem 0.25rem 0;
}

/* ============================================================
   Signal Table
   ============================================================ */
.signal-table-wrap { overflow-x: auto; }
.signal-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; table-layout: fixed; }
.signal-table th:first-child, .signal-table td:first-child { width: 25%; white-space: normal; }
.signal-table th:nth-child(n+2), .signal-table td:nth-child(n+2) { width: 18.75%; }
.signal-table th {
  text-align: left; padding: 0.5rem 0.625rem; background: var(--color-bg-alt);
  border-bottom: 2px solid var(--color-border); color: var(--color-text-faint);
  font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
.signal-table td { padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; white-space: nowrap; }
.signal-table tr:last-child td { border-bottom: none; }
.signal-table tr:hover td { background: var(--color-bg-alt); }
.sig-name { font-weight: 600; color: var(--color-text); }
.sig-note { display: block; font-size: 0.625rem; font-weight: 400; color: var(--color-text-faint); margin-top: 0.0625rem; }

.lift-cell { min-width: 8.75rem; }
.lift-bar-wrap { display: flex; align-items: center; gap: 0.375rem; }
.lift-bar-bg { flex: 1; height: 0.5rem; background: var(--color-bg-alt); border-radius: 0.125rem; overflow: hidden; }
.lift-bar-fill { height: 100%; border-radius: 0.125rem; background: var(--color-accent); }
.lift-bar-fill.lift-high { background: var(--color-green); }
.lift-bar-fill.lift-low  { background: var(--color-amber); }
.lift-val { font-family: var(--font-mono); font-weight: 700; font-size: 0.75rem; min-width: 2.5rem; text-align: right; }

.tier {
  display: inline-block; padding: 0.125rem 0.4375rem; border-radius: 0.1875rem;
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
}
.tier-baseline  { background: var(--tier-baseline-bg);  color: var(--tier-baseline-fg); }
.tier-emerging  { background: var(--tier-emerging-bg);  color: var(--tier-emerging-fg); }
.tier-confirmed { background: var(--tier-confirmed-bg); color: var(--tier-confirmed-fg); }
.tier-strong    { background: var(--tier-strong-bg);    color: var(--tier-strong-fg); }
.tier-dominant  { background: var(--tier-dominant-bg);  color: var(--tier-dominant-fg); }

.rho-val   { font-family: var(--font-mono); font-weight: 700; color: var(--color-text); }
.r2-val    { color: var(--color-text-muted); }
.n-val     { color: var(--color-text-muted); }
.null-cell { color: var(--color-text-faint); }
.cov-val   { color: var(--color-text-muted); font-size: 0.6875rem; }

/* ============================================================
   Report actions (export button) + paid-access modal (2026-07-14)
   ============================================================ */
/* Lives in the hero, on its own line right under the lede text. */
.report-actions { display: flex; justify-content: flex-start; margin: 1rem 0 1.25rem; }
.export-btn {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  padding: 0.4375rem 0.875rem;
  font-size: 0.8125rem; font-weight: 600; text-decoration: none;
  color: var(--color-accent);
  background: var(--color-card);
  border: 1px solid var(--color-border); border-radius: 0.375rem;
}
.export-btn:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }

.paid-modal { position: fixed; inset: 0; z-index: 300; }
.paid-modal[hidden] { display: none; }
.paid-modal-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  backdrop-filter: blur(2px);
}
.paid-modal-card {
  position: relative; max-width: 28rem; margin: 14vh auto 0; padding: 1.75rem;
  background: var(--color-card); border: 1px solid var(--color-border-strong);
  border-radius: 0.5rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.paid-modal-card h3 { font-size: 1.125rem; margin: 0.375rem 0 0.625rem; color: var(--color-text); }
.paid-modal-card p { font-size: 0.875rem; color: var(--color-text-muted); margin: 0 0 1rem; }
.paid-modal-close {
  position: absolute; top: 0.625rem; right: 0.75rem;
  background: none; border: 0; cursor: pointer;
  font-size: 1.25rem; line-height: 1; color: var(--color-text-muted);
}
.paid-modal-close:hover { color: var(--color-text); }
.paid-modal-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.paid-modal-btn {
  display: block; text-align: center; padding: 0.5625rem 1rem;
  font-size: 0.875rem; font-weight: 600; text-decoration: none;
  color: var(--color-text); background: var(--color-bg-alt);
  border: 1px solid var(--color-border); border-radius: 0.375rem;
}
.paid-modal-btn:hover { border-color: var(--color-border-strong); }
.paid-modal-btn-primary { background: var(--color-accent); color: #0E1416; border-color: transparent; }
.paid-modal-btn-primary:hover { background: var(--color-accent-dark); border-color: transparent; }
.paid-modal-note { font-size: 0.75rem !important; color: var(--color-text-faint) !important; margin-bottom: 0 !important; }

/* ============================================================
   Charts
   ============================================================ */
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 56.25rem) { .chart-grid { grid-template-columns: 1fr; } }
.chart-full { margin-bottom: 1rem; }
/* min-width: 0 everywhere a chart lives inside a grid/flex cell: grid items
   default to min-width auto, so once an ECharts canvas has painted wide the
   cell refuses to shrink with the window and the row overflows the page.
   Zeroing the minimum lets the cell contract, which lets the charts'
   ResizeObserver resize the canvas back down. Same fix on the selects. */
.chart-grid > *, .compare-grid > *, .quad-compare-grid > * { min-width: 0; }
.chart-container { height: 26.25rem; width: 100%; min-width: 0; overflow: hidden; }
/* Full-width row inside any of the two-column chart grids above; used by the
   experimental chart-variety containers (slope, butterfly, 2026-07-13). */
.chart-row-full { grid-column: 1 / -1; }
/* Experimental containers whose data turned out empty are hidden by
   static/app.js via this class rather than left as blank blocks. */
.chart-container.chart-empty { display: none; }

/* ── Chart tabs (2026-07-13) ──────────────────────────────────────────────
   Tabbed chart boxes for the chart-variety review: each box offers the
   original bar chart plus its experimental alternatives, one per tab. The
   tab strip hugs its labels (not full width); panels are full width. Panels
   toggle via .active; static/app.js re-renders a panel's charts on
   activation, so charts never paint into a display:none box. */
/* Each tabbed box opens with breathing room and a thin rule, so stacked
   chart groups (the quad page especially) read as separate sections
   instead of one wall of charts (2026-07-13, per review feedback). */
.chart-tabs {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
/* Full-width strip with the alt background: signals "there are tabs here"
   more strongly than a label-hugging pill row. */
.chart-tab-bar {
  display: flex; gap: 0.25rem; flex-wrap: wrap; width: 100%;
  padding: 0.375rem; margin-bottom: 1.5rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border); border-radius: 0.5rem;
}
.chart-tab {
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem; font-weight: 600; font-family: inherit;
  color: var(--color-text-muted);
  background: transparent; border: 0; border-radius: 0.375rem;
  cursor: pointer; user-select: none; white-space: nowrap;
}
.chart-tab:hover { color: var(--color-text); }
.chart-tab.active {
  background: var(--color-card); color: var(--color-accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.chart-tab-panel { display: none; }
.chart-tab-panel.active { display: block; }

/* ============================================================
   Model filter — LLM Search Visibility's per-model chart
   ============================================================ */
.model-checkbox-table {
  border-collapse: collapse; width: 100%;
  padding: 0.875rem 1rem; margin-bottom: 1.25rem;
  background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 0.375rem;
}
.model-checkbox-table td { padding: 0.3125rem 1.25rem 0.3125rem 0; border: 0; }
.model-checkbox {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  font-size: 0.8125rem; color: var(--color-text); cursor: pointer; user-select: none;
}
/* Reddit display-filter toggles: bare inline row between a chart box's
   tab bar and its chart. Deliberately NO background/border/container
   (explicit instruction 2026-07-16); slight left padding to align with
   the tab bar's inset text. */
.reddit-filter-toggles {
  display: flex; flex-wrap: wrap; gap: 0.375rem 1.75rem;
  margin: -0.5rem 0 1.25rem; padding-left: 0.625rem;
}
/* Hairline between a card's charts and the full data table under them
   (scan-data report cards, 2026-07-16; spacing doubled to 2rem same day,
   1rem read as cramped). */
.chart-table-divider {
  border: 0; border-top: 1px solid var(--color-border);
  margin: 2rem 0;
}

/* Column-header tooltips ride the app's existing th[data-tip] +
   #hdr-tooltip system (further down this file + static/app.js), which
   fires INSTANTLY since 2026-07-16 -- no duplicate CSS tooltip here
   (a first attempt at one double-rendered against the JS tooltip and
   clobbered the ℹ marker). */
.model-checkbox input[type="checkbox"] { accent-color: var(--color-accent); cursor: pointer; }
.model-checkbox input[type="checkbox"]:disabled { cursor: default; }
.model-checkbox:has(input:disabled) { color: var(--color-text-faint); }

.chart-grid-wrap { position: relative; }
.chart-spinner-overlay {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-card) 75%, transparent);
  border-radius: 0.375rem;
}
.chart-spinner-overlay[hidden] { display: none; }
.spinner {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 3px solid var(--color-border); border-top-color: var(--color-accent);
  animation: spin 0.7s linear infinite;
}

/* "Compare two models" — LLM Search Visibility only, 2026-07-11 */
.compare-grid-wrap { position: relative; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 56.25rem) { .compare-grid { grid-template-columns: 1fr; } }
.compare-select-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted); }
.compare-select-label select {
  display: block; width: 100%; margin-top: 0.375rem; padding: 0.5rem 0.625rem;
  border-radius: 0.375rem; border: 1px solid var(--color-border);
  background: var(--color-card); color: var(--color-text); font-size: 0.875rem;
}
.compare-select-label select:disabled { color: var(--color-text-faint); cursor: default; }
@keyframes spin { to { transform: rotate(360deg); } }

/* "LLM vs Fanout vs AI Search vs Organic" — 2026-07-11 */
.quad-grid-wrap { position: relative; }
.quad-compare-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 75rem) { .quad-compare-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .quad-compare-grid { grid-template-columns: 1fr; } }

.domain-link { font-weight: 600; color: var(--color-accent); }
.domain-link:hover { color: var(--color-accent-dark); }
/* JSON-LD token colors (jsonld-pretty.js): per-theme via the semantic
   chart vars, backgrounds come from the .hi-jsonld pre rules below. */
.jl-key { color: var(--color-accent-dark); font-weight: 600; }
.jl-str { color: var(--color-green); }
.jl-num { color: var(--color-purple); }
.jl-lit { color: var(--color-amber); font-weight: 600; }
/* Two-column social/contact layout inside one card */
.hi-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 48rem) { .hi-cols { grid-template-columns: 1fr; } }

/* Hero data-credit line (Common Crawl attribution, 2026-07-18) */
.hero-credit { font-size: 0.6875rem; color: var(--color-text-faint); margin: 0.75rem 0 0.25rem; }

/* Site-info homepage intelligence tables (2026-07-18) */
.hi-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.hi-table th {
  text-align: left; width: 11rem; padding: 0.4375rem 0.625rem; vertical-align: top;
  color: var(--color-text-faint); font-weight: 600; font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-border);
}
.hi-table td { padding: 0.4375rem 0.625rem; border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere; }
.hi-table tr:last-child th, .hi-table tr:last-child td { border-bottom: none; }
.hi-muted { color: var(--color-text-faint); font-size: 0.6875rem; }
.hi-jsonld { margin-top: 0.5rem; font-size: 0.75rem; }
.hi-jsonld summary { cursor: pointer; color: var(--color-text-muted); }
.hi-jsonld pre {
  margin-top: 0.5rem; padding: 0.75rem; background: var(--color-bg-alt);
  border: 1px solid var(--color-border); border-radius: 0.375rem;
  overflow-x: auto; max-height: 20rem; font-size: 0.6875rem; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Backlinks table CSS (.bl-table, .pr-bar-*, .num-*) moved to
   future.backlink_authority_table.php 2026-07-18 (section removed,
   may return). .domain-link above stays: generic. */

/* ============================================================
   Domain Signals Matrix
   ============================================================ */
/* Domain Signals Matrix CSS moved to future.domain_signals_matrix.php
   2026-07-18 (section removed, may return). .heat badges below stay:
   the quad over/under tables use them. */
.heat { border-radius: 0.1875rem; padding: 0.125rem 0.3125rem; }
.heat-0 { background: var(--heat-0-bg); color: var(--heat-0-fg); }
.heat-1 { background: var(--heat-1-bg); color: var(--heat-1-fg); }
.heat-2 { background: var(--heat-2-bg); color: var(--heat-2-fg); }
.heat-3 { background: var(--heat-3-bg); color: var(--heat-3-fg); }
.heat-4 { background: var(--heat-4-bg); color: var(--heat-4-fg); }
.heat-5 { background: var(--heat-5-bg); color: var(--heat-5-fg); }
/* ============================================================
   Quad over/under-performer tables — 2026-07-11
   Deliberately its own table (the retired Domain Signals Matrix table
   carried a 75rem min-width; see future.domain_signals_matrix.php). This
   table lives at half-width next to its over/under counterpart via
   .compare-grid, see pages/industry.php. Reuses the .heat-N badges only.
   ============================================================ */
.quad-aggregate-row { grid-column: 1 / -1; }

.qop-subhead { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 0.625rem; }

.qop-table-wrap { overflow-x: auto; }
.qop-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; table-layout: fixed; }
.qop-table th:first-child, .qop-table td:first-child { width: 28%; white-space: normal; }
.qop-table th:not(:first-child):not(:last-child), .qop-table td:not(:first-child):not(:last-child) { width: 14%; text-align: center; }
.qop-table th:last-child, .qop-table td:last-child { width: 16%; text-align: right; }
.qop-table th {
  text-align: left; padding: 0.5rem 0.4375rem; background: var(--color-bg-alt);
  border-bottom: 2px solid var(--color-border); color: var(--color-text-faint);
  font-weight: 600; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
}
.qop-table td { padding: 0.375rem 0.4375rem; border-bottom: 1px solid var(--color-border); text-align: center; vertical-align: middle; }
.qop-table td:first-child { text-align: left; }
.qop-table tr:last-child td { border-bottom: none; }
.qop-table tr:hover td { background: var(--color-bg-alt); }
.qop-table th.qop-own-col, .qop-table td.qop-own-col { background: var(--color-accent-pale); }
.qop-table td.qop-own-col .heat { outline: 1px solid var(--color-accent); }
.qop-absent { color: var(--color-text-faint); font-style: italic; }
.qop-gap { font-family: var(--font-mono); font-weight: 700; color: var(--color-accent-dark); white-space: nowrap; }

/* ============================================================
   Overview grid
   ============================================================ */
/* Industry cards: structure mirrors the marketing homepage's bento
   cards (top row = name/count + tier badge, signal line, domains under
   a hairline), three wide, in this app's palette (Ben, 2026-07-18). */
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 56rem)  { .industry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 36rem)  { .industry-grid { grid-template-columns: 1fr; } }
.industry-card {
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: 0.375rem;
  padding: 1.125rem 1.25rem; text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s; display: block;
}
.industry-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-card); }
.industry-card h3 { font-size: 0.8125rem; font-weight: 700; color: var(--color-text); }
.industry-card .ic-toprow {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 0.875rem;
}
.industry-card .ic-count {
  font-family: var(--font-mono); font-size: 0.625rem;
  color: var(--color-text-faint); margin-top: 0.25rem;
}
.industry-card .ic-signal-line {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 0.875rem;
}
.ic-rho { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; color: var(--color-accent); }
.ic-rho-neg { color: var(--color-amber); }
.industry-card .ic-domains {
  font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-text-muted);
  line-height: 1.5; padding-top: 0.875rem; border-top: 1px solid var(--color-border);
}

/* ============================================================
   Global signals overview table
   ============================================================ */
.overview-sig-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.overview-sig-table th {
  text-align: left; padding: 0.5625rem 0.75rem; background: var(--color-bg-alt);
  border-bottom: 2px solid var(--color-border); color: var(--color-text-faint);
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.overview-sig-table td { padding: 0.5625rem 0.75rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.overview-sig-table tr:last-child td { border-bottom: none; }
.overview-sig-table tr:hover td { background: var(--color-bg-alt); }
.overview-sig-name { font-weight: 700; }
.overview-sig-group { font-size: 0.625rem; color: var(--color-text-muted); }

/* ============================================================
   Content Queries — title n-grams
   ============================================================ */
.ngram-row { display: flex; gap: 1rem; margin-bottom: 1rem; align-items: flex-start; }
.ngram-row:last-child { margin-bottom: 0; }
.ngram-col { flex: 1 1 0; min-width: 0; }
.ngram-col h4 { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ngram-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.ngram-table td { padding: 0.25rem 0.5rem 0.25rem 0; border-bottom: 1px solid var(--color-border); }
.ngram-table td.tbl-num { width: 3rem; text-align: right; padding-right: 0.75rem; color: var(--color-text-muted); }
.ngram-table tr:last-child td { border-bottom: none; }

/* ============================================================
   Full-list data tables — 2026-07-13
   Scrollable full-results tables (see render_results_table() /
   render_scored_table() / render_ugc_questions_list() in _functions.php).
   Interior scroll capped at 60% of the viewport, with a 20rem floor so
   tiny windows still get a usable table (explicit instruction). Each table
   carries a per-column filter row in its sticky header (see .dt-filter-row
   and initDataTableFilters() in static/app.js).
   ============================================================ */
.data-table { border: 1px solid var(--color-border); border-radius: 0.375rem; overflow: hidden; }
.data-table-scroll { max-height: max(60vh, 20rem); overflow: auto; }
/* Scrollbar starts below the sticky header (2026-07-14, TODO.md Misc):
   the native track spans the whole scroll container, header included, so
   push the vertical track down by the measured thead height (--dt-head-h,
   set and kept current by wireDataTable in static/app.js). Styling
   ::-webkit-scrollbar opts out of overlay scrollbars, so the thumb gets
   theme colors on purpose. Firefox ignores these rules and keeps the
   native full-height scrollbar: accepted degradation per the TODO note. */
.data-table-scroll::-webkit-scrollbar { width: 0.625rem; height: 0.625rem; }
.data-table-scroll::-webkit-scrollbar-track { background: transparent; margin-top: var(--dt-head-h, 0px); }
.data-table-scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 0.3125rem; }
.data-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
.data-table-scroll::-webkit-scrollbar-corner { background: transparent; }
.data-table table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8125rem; }
.data-table th {
  position: sticky; z-index: 1; box-sizing: border-box;
  background: var(--color-bg-alt); text-align: left;
  font-weight: 600; color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
/* Column-label row: taller than a data row, darker than everything below
   it, bolder brighter type -- the strongest surface in the table so it
   never melds with the filter row or the data. Labels are click-to-sort
   (see wireDataTable() in static/app.js). */
.data-table thead .dt-head-row th {
  top: 0; height: 2.5rem; vertical-align: middle;
  padding: 0 0.625rem; font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text);
  background: var(--color-bg-alt);
  background: color-mix(in srgb, var(--color-bg-alt) 88%, #000 12%);
  cursor: pointer; user-select: none;
}
.data-table thead .dt-head-row th:hover { color: var(--color-accent); }
.dt-sort-arrow { font-size: 0.5625rem; color: var(--color-accent); }
/* Filter row: sits under the labels, sticky right below them (top must
   equal the label row's fixed height). Keeps the plain --color-bg-alt
   surface, one step lighter than the label row above it. Inputs are
   vertically centered and sized to match a data row's text. */
.data-table thead .dt-filter-row th {
  top: 2.5rem; padding: 0.375rem 0.375rem 0.5rem; vertical-align: middle;
}
/* Inputs sit barely lighter than the filter-row surface (not full card
   white) so the borders do the defining and the row doesn't read as data.
   Enabled and disabled share the same quiet look; disabled reveals itself
   on mouseover (cursor + tooltip) and never focuses. */
.dt-filter {
  display: block; width: 100%;
  font: inherit; font-size: 0.8125rem; line-height: 1.3; color: var(--color-text);
  background: var(--color-bg-alt);
  background: color-mix(in srgb, var(--color-bg-alt) 65%, var(--color-card) 35%);
  border: 1px solid var(--color-border); border-radius: 0.25rem;
  padding: 0.25rem 0.375rem;
}
.dt-filter:focus { outline: none; border-color: var(--color-accent); }
.dt-filter::placeholder { color: var(--color-text-faint); text-transform: none; letter-spacing: normal; }
.dt-filter[disabled] { opacity: 0.55; cursor: not-allowed; }
.dt-filter-min { margin-bottom: 0.25rem; }
.data-table thead .dt-filter-row th.dt-num .dt-filter { font-family: var(--font-mono); }
.data-table tr.dt-empty td { text-align: center; color: var(--color-text-muted); padding: 1.25rem 0.625rem; }
.data-table td { padding: 0.4375rem 0.625rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--color-bg-alt); }
.data-table th.dt-num, .data-table td.dt-num {
  width: 6.5rem; min-width: 6.5rem; text-align: right;
  font-family: var(--font-mono); white-space: nowrap;
}
.data-table td.dt-title {
  min-width: 16rem; max-width: 26rem;
  /* Some titles are bare URLs (title falls back to URL when the scrape has
     none): break inside unbreakable strings only when needed, so real
     titles still wrap at spaces but a space-less URL can't stretch the
     column and push the numeric columns into horizontal scroll. */
  overflow-wrap: anywhere;
}
.data-table td.dt-title a { color: var(--color-accent); text-decoration: none; font-weight: 600; }
.data-table td.dt-title a:hover { color: var(--color-accent-dark); text-decoration: underline; }
.data-table th.dt-url, .data-table td.dt-url { min-width: 14rem; max-width: 22rem; }
.data-table td.dt-url { word-break: break-all; }
.data-table td.dt-url a { color: var(--color-text-faint); text-decoration: none; }
.data-table td.dt-url a:hover { color: var(--color-accent-dark); text-decoration: underline; }

/* Stacked URL lists (UGC Questions table): one block-level link per line
   with breathing room between lines, so each link is its own full-width
   hover target and a many-link cell never reads as one run-on blob. */
.data-table a.dt-url-line { display: block; padding: 0.25rem 0; line-height: 1.45; }
/* Same stacked-line treatment for non-link cells (the fanout queries
   table's LLMs column, 2026-07-16). */
.data-table span.dt-url-line { display: block; padding: 0.25rem 0; line-height: 1.45; }
/* LLM Fanout Queries page: the two compare columns' query lists. */
.fanout-query-list { margin: 0.875rem 0 0; padding-left: 1.375rem; }
.fanout-query-list li { padding: 0.3125rem 0; line-height: 1.5; }
.fanout-query-list li::marker { color: var(--color-text-faint); }
.data-table a.dt-url-line:first-child { padding-top: 0; }
.data-table a.dt-url-line:last-child { padding-bottom: 0; }
.data-table a.dt-url-line:hover { background: var(--color-accent-pale); }
.data-table td.dt-placeholder { color: var(--color-text-faint); }
.data-table-footer {
  display: flex; justify-content: space-between; gap: 0.75rem;
  padding: 0.5rem 0.625rem; background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  font-size: 0.6875rem; color: var(--color-text-muted); font-family: var(--font-mono);
}

/* UGC Questions & FAQs table: non-link question text in the title column,
   same weight/color as the other tables' title links */
.dt-question { font-weight: 600; color: var(--color-text); }

/* ============================================================
   Small-screen notice — 2026-07-13
   Full-screen overlay for viewports too small for the charts.
   Shown purely by media query once app.js has stamped .mn-ready
   (after checking the 24h localStorage dismissal), so there's no
   flash for visitors who already closed it. Growing the window
   past the thresholds hides it again automatically.
   ============================================================ */
#mobile-notice { display: none; }
@media (max-width: 47.9375rem), (max-height: 31.25rem) {
  #mobile-notice.mn-ready:not(.mn-dismissed) {
    display: flex; position: fixed; inset: 0; z-index: 2000;
    background: var(--color-bg);
    overflow-y: auto;
  }
  body:has(#mobile-notice.mn-ready:not(.mn-dismissed)) { overflow: hidden; }
}
.mn-inner { display: flex; flex-direction: column; width: 100%; min-height: 100%; padding: 1rem 1.25rem 2rem; }
.mn-close {
  align-self: flex-end;
  background: none; border: 1px solid var(--color-border); border-radius: 0.25rem;
  padding: 0.4375rem 0.75rem; margin-bottom: 1.5rem;
  font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted);
  cursor: pointer;
}
.mn-close:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.mn-body { max-width: 26rem; margin: auto; width: 100%; }
.mn-body h2 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; margin: 0.5rem 0 0.75rem; }
.mn-body > p { font-size: 0.875rem; line-height: 1.65; color: var(--color-text-muted); margin-bottom: 1.5rem; }
.mn-form {
  border: 1px solid var(--color-border); border-radius: 0.375rem;
  background: var(--color-card); padding: 1rem 1.125rem;
}
.mn-form-label { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.875rem; line-height: 1.5; }
.mn-field { display: block; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 0.75rem; }
.mn-field input {
  display: block; width: 100%; margin-top: 0.3125rem;
  padding: 0.5625rem 0.625rem;
  font: inherit; font-size: 0.875rem; color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0.25rem;
}
.mn-field input:focus { outline: none; border-color: var(--color-accent); }
.mn-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--color-text-muted); margin: 0.875rem 0 1rem; cursor: pointer; }
.mn-check input { accent-color: var(--color-accent); }
.mn-submit {
  display: block; width: 100%;
  background: var(--color-accent); color: #fff;
  border: none; border-radius: 0.25rem; padding: 0.6875rem 1rem;
  font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.mn-submit:hover { background: var(--color-accent-dark); }
.mn-note { font-size: 0.75rem; color: var(--color-text-faint); margin-top: 1rem; }

/* ============================================================
   Misc
   ============================================================ */
.no-data { text-align: center; padding: 1.5rem; color: var(--color-text-muted); font-size: 0.8125rem; }
.tbl-rank   { width: 2rem; color: var(--color-text-muted); font-size: 0.6875rem; }
.tbl-domain { min-width: 10rem; }
.tbl-num    { text-align: right; }

th[data-tip] { cursor: help; }
th[data-tip]::after { content: ' \2139'; font-size: 0.5rem; opacity: 0.6; vertical-align: super; }
/* Signal names + tier badges also carry tooltips (Ben 2026-07-19);
   no info glyph on these, the dotted underline is the affordance. */
.sig-name[data-tip], .overview-sig-name[data-tip] {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-text-faint);
}
.tier[data-tip] { cursor: help; }
#hdr-tooltip {
  position: fixed; background: var(--color-sidebar-bg); color: var(--color-sidebar-text-bright);
  padding: 0.375rem 0.625rem; border-radius: 0.25rem; font-size: 0.6875rem; font-weight: 400;
  line-height: 1.5; white-space: normal; max-width: 18rem; z-index: 2000; pointer-events: none;
  box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.3); display: none; text-transform: none; letter-spacing: 0;
}

/* ============================================================
   EYEBROW — ported verbatim from the marketing site (0.v2/style.css).
   Small mono label with a teal square bullet, used above every H1/H2.
   ============================================================ */
.eyebrow {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent);
}
.eyebrow::before {
  content: ""; width: 0.5rem; height: 0.5rem;
  background: var(--gradient-teal); border-radius: 1px; flex-shrink: 0;
}

/* ============================================================
   RHERO — the report app's version of the marketing homepage's
   full-bleed hero (id="research" in home.php): a bg-grid-fine
   section sitting directly on the page background (adapts with
   the theme, unlike the old dashboard-card treatment this
   replaced), with a two-column .hero-grid — copy on the left,
   a dark schematic .panel on the right showing this page's real
   signal data. NOT inset by .report-frame's padding — it bleeds
   to the true edges of the content column, matching the marketing
   site's full-bleed hero, and .report-frame (with its own divider)
   starts immediately after it.
   ============================================================ */
.rhero {
  position: relative;
  /* content-pad-x + frame-margin so the hero copy lines up with
     .report-frame's content below it (which is inset by content-pad-x
     from the frame line, itself inset by frame-margin from the true
     edge) — the hero has no frame line of its own, but its content
     should still start at the same x position as the framed cards. */
  padding: 3rem calc(var(--content-pad-x) + var(--frame-margin)) 2.5rem;
  flex-shrink: 0; /* direct flex child of #main-content on pages with no
                      persona views (overview.php, 404.php) — see the
                      note on .report-frame above for why this matters */
}
.bg-grid-fine {
  background-image:
    linear-gradient(to bottom, transparent 0%, var(--color-bg) 100%),
    linear-gradient(to right, var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-grid-line) 1px, transparent 1px);
  background-size: 100% 100%, var(--grid-fine-size) var(--grid-fine-size), var(--grid-fine-size) var(--grid-fine-size);
  background-repeat: no-repeat, repeat, repeat;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 64rem) { .hero-grid { grid-template-columns: 1fr; } }

.hero-copy .eyebrow { margin-bottom: 0.75rem; }
.hero-copy h1 {
  font-size: 2.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--color-text); margin-top: 0.25rem;
}
/* H1 → optional .report-type-label → optional .hero-tier-row: always three
   stacked lines (never side-by-side), so a long persona name or long tier
   label can never wrap into an inconsistent order. */
.hero-tier-row { margin-top: 0.875rem; }
.hero-copy .lede {
  margin-top: 1rem; font-size: 1.0625rem; color: var(--color-text-muted);
  max-width: 34rem; line-height: 1.6;
}
.hero-meta {
  display: flex; gap: 1.75rem; flex-wrap: wrap;
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border);
}
.hero-meta-item {
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-text-faint);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.hero-meta-item strong {
  display: block; font-family: var(--font-sans); font-size: 1.375rem; color: var(--color-text);
  font-weight: 700; letter-spacing: 0; text-transform: none; margin-bottom: 0.25rem;
}

/* ---- panel (hero's dark schematic visual) — theme-reactive as of
   2026-07-11: reuses the sidebar family (already themed per-preset — see
   :root[data-theme="..."] blocks) for its dark chrome, and --color-accent/
   --color-accent-dark for its highlight color, instead of the old fixed
   teal-only look. #topnav stays fixed dark regardless of theme by explicit
   request; this panel does not. ---- */
.panel {
  background: var(--color-sidebar-bg);
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  position: relative;
}
.panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent));
}
.panel-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.panel-titlebar .dots { display: flex; gap: 0.5rem; }
.panel-titlebar .dots span {
  width: 0.5rem; height: 0.5rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 1px;
}
.panel-titlebar .label {
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-sidebar-text-bright);
  opacity: 0.65; letter-spacing: 0.06em; text-transform: uppercase;
}
.panel-body { padding: 1.5rem; }
.panel-row-label {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-sidebar-text-bright);
  opacity: 0.6; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem;
}
.signal-row {
  display: grid; grid-template-columns: 9rem 1fr 3.5rem; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0; border-top: 1px solid rgba(255,255,255,0.1);
}
.signal-row:first-of-type { border-top: none; }
.signal-name { font-size: 0.75rem; color: var(--color-sidebar-text-bright); }
.signal-bar-track { height: 0.375rem; background: rgba(255,255,255,0.08); border-radius: 0.25rem; overflow: hidden; }
.signal-bar-fill { height: 100%; background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent)); border-radius: 0.25rem; }
.signal-value { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-accent); text-align: right; }
.panel-footer {
  display: flex; justify-content: space-between; padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-sidebar-text);
}

/* empty variant — persona heroes reuse the same panel shell (titlebar
   with a label) but with no data yet; a fixed min-height keeps the
   hero-grid's two columns visually balanced until it's filled in */
.panel-body-empty { min-height: 14rem; }

/* image variant — industry-overview heroes use this in place of the panel:
   just a plain black slot for a generated per-industry image, still framed
   by .panel's border/radius/top accent bar for visual consistency. .panel
   already has overflow:hidden, so this gets clipped to the rounded corners
   for free without needing its own border-radius. */
.panel-image-slot { background: #000; min-height: 20rem; }

/* Industry hero image (2026-07-13) — fills the hero panel at its native
   4:3 ratio (1448x1086 source). The panel frame itself (thin border, top
   gradient bar) stays, plus a soft drop shadow to lift it off the grid
   background; deliberately no extra glow so the image does the talking. */
.panel-image { box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35); }
.panel-image-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* ============================================================
   STAT STRIP — ported from the marketing homepage's "145 industries,
   1,595 buyer personas..." section: bordered cells, big bold number,
   small mono label underneath. Sits inside .report-frame (not the
   hero), matching the homepage's own structure where this is its
   own section right after the hero, not part of it.
   ============================================================ */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-border);
}
.stat-strip-flex { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
/* stat-strip-5: every cell fully bordered (Ben 2026-07-19; the base
   nth-child(4n) border removal below is built for the 4-col strip and
   left mid-row gaps in the 5-col grid). */
.stat-strip-5 {
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--color-border);
}
.stat-strip-5 .stat-cell,
.stat-strip-5 .stat-cell:nth-child(4n) {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.stat-strip-5 .stat-cell:nth-child(5n) { border-right: none; }
.stat-strip-5 .stat-cell:nth-child(n+6) { border-bottom: none; }
@media (max-width: 48rem) {
  .stat-strip-5 { grid-template-columns: repeat(2, 1fr); }
  .stat-strip-5 .stat-cell,
  .stat-strip-5 .stat-cell:nth-child(4n),
  .stat-strip-5 .stat-cell:nth-child(5n),
  .stat-strip-5 .stat-cell:nth-child(n+6) {
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }
  .stat-strip-5 .stat-cell:nth-child(2n) { border-right: none; }
  .stat-strip-5 .stat-cell:nth-child(n+9) { border-bottom: none; }
}
.stat-cell { padding: 1.25rem 1.25rem; border-right: 1px solid var(--color-border); }
.stat-cell:nth-child(4n) { border-right: none; }
.stat-strip-flex .stat-cell:last-child { border-right: none; }
.stat-cell .value { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text); }
.stat-cell .label {
  margin-top: 0.25rem; font-family: var(--font-mono); font-size: 0.6875rem;
  color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.06em;
}
@media (max-width: 40rem) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(4n) { border-right: 1px solid var(--color-border); }
  .stat-cell:nth-child(2n) { border-right: none; }
}

/* ============================================================
   MODELS-SAMPLED STRIP — ported verbatim from the marketing homepage.
   ============================================================ */
.models-strip {
  display: flex; align-items: center; justify-content: center; gap: 2rem;
  padding: 1.25rem 0; flex-wrap: wrap;
}
.models-strip-label {
  font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-text-faint);
  padding-right: 2rem; border-right: 1px solid var(--color-border);
}
.models-strip-list { display: flex; align-items: center; gap: 2rem; }
.models-strip-list span { font-size: 1rem; font-weight: 600; color: var(--color-text-muted); }

/* Column layout (Ben 2026-07-19): one column per provider, its models
   listed underneath ordered by influence weight, highest first. */
.models-strip-cols { align-items: flex-start; }
.models-strip-cols .models-strip-label { padding-top: 0.25rem; }
.models-strip-grid {
  display: flex; gap: 3rem; flex-wrap: wrap; justify-content: center;
}
.models-col { display: flex; flex-direction: column; gap: 0.375rem; }
.models-col-head {
  font-size: 1rem; font-weight: 600; color: var(--color-text-muted);
  margin-bottom: 0.25rem; padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--color-border);
}
.models-col span {
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--color-text-faint); white-space: nowrap;
}

/* ============================================================
   SECTION HEAD — eyebrow + big heading, replaces the old small
   pill-bar .section-title so card sections read as part of the
   same editorial system as the hero rather than a dashboard widget.
   The detailed multi-paragraph .section-desc (unchanged) still
   carries the deeper explanatory text below it.

   Two-column flex, matching the marketing homepage exactly: title
   block on the left, an optional .lede on the right. Most call sites
   only pass a title block (no lede), which just renders as a single
   left-aligned item — same visual as before this supported a lede.
   ============================================================ */
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1rem;
}
.section-head .eyebrow { margin-bottom: 0.5rem; }
/* Unlock link appended inside section headlines for free visitors
   (oa_upsell_link_html). Rides --color-accent so every theme colors it
   itself: bright teal on the default dark theme, blue on the light
   GitHub theme, etc. */
.upsell-link {
  font-size: 0.875rem; font-weight: 600; margin-left: 0.75rem;
  color: var(--color-accent);
  text-decoration: underline; text-underline-offset: 3px;
  white-space: nowrap; vertical-align: middle;
}
.upsell-link:hover { text-decoration: none; }
.upsell-link .upsell-ext {
  width: 0.75em; height: 0.75em; margin-left: 0.3em;
  vertical-align: -0.05em;
}

/* Free-preview truncation notices (oa_truncation_notice). Tinted off
   --color-green (hub banner) and --color-amber (report pages), which
   every theme block defines, so all 8 themes shade these themselves. */
.trunc-notice {
  margin: 1.25rem 0; padding: 0.875rem 1.25rem;
  border-radius: 6px; font-size: 0.9375rem; line-height: 1.5;
  color: var(--color-text);
}
.trunc-notice strong { font-weight: 700; }
.trunc-notice .upsell-link { font-size: 0.9375rem; }
/* Free boxes (Ben 2026-07-19): stay inside the site's design system.
   Border = the accent (same color as the CTA button), background = the
   page background nudged darker, no tinted greens/ambers. */
.trunc-notice-hub, .trunc-notice-page {
  background: color-mix(in srgb, var(--color-bg) 94%, #000);
  border: 2px solid var(--color-accent);
}
/* Paid visitors: the full-access variant of the notice. */
.trunc-notice-paid {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
}
/* Free-preview sales styling (Ben 2026-07-19): bigger, attention-first,
   with a solid CTA button naming the industry. */
.trunc-notice-hub, .trunc-notice-page {
  padding: 1.5rem 1.75rem;
  text-align: center;
}
.trunc-title {
  font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}
.trunc-notice p { margin: 0 auto 1rem; max-width: 52rem; }
.trunc-btn-ind { text-decoration: underline; text-underline-offset: 3px; }
.trunc-btn-arrow { margin-left: 0.375rem; }
.trunc-btn {
  display: inline-block; padding: 0.625rem 1.25rem;
  background: var(--color-accent); color: var(--color-bg);
  border-radius: 6px; font-size: 0.9375rem; font-weight: 700;
  text-decoration: none;
}
.trunc-btn:hover { filter: brightness(1.1); }

/* Mobile-notice form result messages (Fluent Forms submit, app.js). */
.mn-msg {
  margin-top: 0.75rem; padding: 0.625rem 0.875rem;
  border-radius: 6px; font-size: 0.9375rem; line-height: 1.45;
}
.mn-msg-ok {
  background: color-mix(in srgb, var(--color-green) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-green) 40%, transparent);
}
.mn-msg-error {
  background: color-mix(in srgb, var(--color-amber) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-amber) 40%, transparent);
}
.section-head h2 {
  font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text);
}
.section-head .lede {
  max-width: 26rem; color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.6;
}

/* larger variant of the .tier badge, used inline in hero headings */
.tier-lg { font-size: 0.75rem; padding: 0.3125rem 0.8125rem; }

/* ============================================================
   CHANNEL SECTIONS — ported from the marketing homepage's Roadmap
   section (deep-teal band, 3-box status grid). Used as a rounded
   card here (reports has no full-bleed sections outside .rhero)
   rather than an edge-to-edge band. See render_channel_section().
   ============================================================ */
.section-roadmap {
  background: var(--color-teal-deep);
  border-radius: 0.375rem;
  padding: 1.5rem 1.5rem 1.75rem;
}
.section-roadmap .eyebrow { color: #6FBBB0; }
.section-roadmap .eyebrow::before { background: var(--gradient-teal-bright); }
.section-roadmap .section-head h2 { color: #FFFFFF; }
.section-roadmap .section-head .lede { color: rgba(255,255,255,0.65); }

.roadmap-list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 0.375rem; overflow: hidden;
}
.roadmap-step { padding: 1.25rem 1.125rem; border-right: 1px solid rgba(255,255,255,0.14); }
.roadmap-step:last-child { border-right: none; }
.roadmap-status {
  display: inline-block; font-family: var(--font-mono); font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.1875rem 0.625rem; border-radius: 999px; margin-bottom: 0.75rem;
}
.status-live {
  background: rgba(111,187,176,0.15); color: #6FBBB0; border: 1px solid rgba(111,187,176,0.4);
}
.status-building {
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.2);
}
/* Report explainer pills (How It's Calculated / Overview) — same neutral
   look as status-building, its own name so the roadmap semantics don't
   leak into the explainer (see render_report_explainer()). */
.status-info {
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.2);
}
.report-explainer { margin-bottom: 1.5rem; }
.status-planned {
  background: transparent; color: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.16);
}
.roadmap-step h4 { font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; margin-bottom: 0.375rem; }
.roadmap-step p { font-size: 0.8125rem; line-height: 1.5; color: rgba(255,255,255,0.6); }
@media (max-width: 48rem) {
  .roadmap-list { grid-template-columns: 1fr; }
  .roadmap-step { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.14); }
  .roadmap-step:last-child { border-bottom: none; }
}

/* ============================================================
   Report-type label — sits under the H1 on a report page (e.g.
   "LLM Search Visibility" under a persona name), same size as the
   H1 so it reads as a second half of the heading, colored to sit
   apart from it.
   ============================================================ */
.report-type-label {
  font-size: 2.5rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--color-accent); margin-top: 0.125rem;
}

/* ============================================================
   Explore-reports card — links out to the report-type pages from
   an industry/persona hub page.
   ============================================================ */
.report-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 56.25rem) { .report-type-grid { grid-template-columns: 1fr; } }
.report-type-card {
  display: block; padding: 1.125rem 1.25rem;
  background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 0.375rem;
  text-decoration: none; position: relative;
  transition: border-color .12s, background .12s;
}
.report-type-card:hover { border-color: var(--color-accent); background: var(--color-accent-pale); }
.report-type-card h3 { font-size: 0.9375rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.375rem; padding-right: 1.5rem; }
.report-type-card p { font-size: 0.8125rem; line-height: 1.5; color: var(--color-text-muted); }
.rt-card-arrow {
  position: absolute; top: 1.125rem; right: 1.25rem;
  color: var(--color-accent); font-weight: 700; opacity: 0; transform: translateX(-0.25rem);
  transition: opacity .12s, transform .12s;
}
.report-type-card:hover .rt-card-arrow { opacity: 1; transform: translateX(0); }

/* ============================================================
   Process sections
   ============================================================ */
.process-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: stretch; }
@media (max-width: 64rem) { .process-grid { grid-template-columns: 1fr; } }
.process-card { padding: 1.25rem 1.375rem; height: 100%; }
.process-steps { display: flex; flex-direction: column; gap: 1.125rem; margin-top: 0.25rem; }
.process-step { display: flex; gap: 0.875rem; align-items: flex-start; }
.ps-icon {
  flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 0.375rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em; color: #fff;
}
.ps-icon-llm    { background: linear-gradient(135deg,#2F6F68,#1D4842); }
.ps-icon-crawl  { background: linear-gradient(135deg,#5a6a72,#374249); }
.ps-icon-reddit { background: linear-gradient(135deg,#c45a1e,#8b3a00); }
.ps-icon-serp   { background: linear-gradient(135deg,#5C8433,#3E5A22); }
.ps-icon-wiki   { background: linear-gradient(135deg,#7C4FA0,#57366F); }
.ps-icon-bl     { background: linear-gradient(135deg,#2c5f9e,#1a3d6e); }
.ps-icon-html   { background: linear-gradient(135deg,#1e7a4a,#0f4a2a); }
.ps-icon-site   { background: linear-gradient(135deg,#7a6e1e,#4a420a); }
.ps-icon-score  { background: linear-gradient(135deg,#2F6F68,#1D4842); font-size: 0.875rem; }
.ps-icon-sig    { background: linear-gradient(135deg,#5C8433,#3E5A22); font-size: 1rem; font-style: italic; }
.ps-icon-corr   { background: linear-gradient(135deg,#AC6F26,#7A4E19); font-size: 1rem; font-style: italic; font-weight: 800; }
.ps-icon-lift   { background: linear-gradient(135deg,#7C4FA0,#57366F); font-size: 1.125rem; }
.ps-icon-tier   { background: linear-gradient(135deg,#2c5f9e,#1a3d6e); font-size: 0.9375rem; }
.ps-icon-persona { background: linear-gradient(135deg,#5a6a72,#374249); font-size: 0.9375rem; }
.ps-body { flex: 1; min-width: 0; }
.ps-heading { font-size: 0.8125rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.375rem; }
.ps-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.ps-list li { font-size: 0.75rem; line-height: 1.6; color: var(--color-text-muted); padding-left: 0.875rem; position: relative; }
.ps-list li::before { content: '▸'; position: absolute; left: 0; color: var(--color-accent); font-size: 0.5625rem; top: 0.28em; }
.ps-list li strong { color: var(--color-text); font-weight: 700; }
.ps-model {
  display: inline-block; font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; background: var(--color-accent-pale); color: var(--color-accent-dark);
  border: 1px solid var(--color-accent); border-radius: 0.1875rem; padding: 0.0625rem 0.375rem;
  vertical-align: middle; margin-left: 0.375rem;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 60rem) {
  #layout { grid-template-columns: 1fr; grid-template-rows: var(--nav-h) auto 1fr; }
  #sidebar { display: none; }
  .brand-report-tag { display: none; }
  #topnav .nav-extra { display: none; }
}