/* T1 Headline Analysis—visual system
   Aligned with data-keywords console: dark, dense, scannable at distance.
   Color is *state*, not decoration. Lifted token-for-token from data-keywords/docs/css/styles.css
   then adapted for static-HTML headline-analysis surface. */

:root {
  /* Surfaces—near-black with subtle blue lift */
  --bg-0: #07090d;          /* page */
  --bg-1: #0c1118;          /* panels */
  --bg-2: #131a24;          /* tiles */
  --bg-3: #1a2331;          /* hover */
  --bg-4: #232f42;          /* active */
  --line: #1e2836;          /* hairline */
  --line-2: #2a3850;
  --line-bright: #3b4d6b;

  /* Text */
  --t-1: #e6edf7;
  --t-2: #a3b1c6;
  --t-3: #6b7a93;
  --t-4: #4a5670;

  /* Verdict states—primary signal carrier (lift / impact / quality) */
  --go: #4ade80;            /* strong / high opportunity—sodium green */
  --go-bg: rgba(74,222,128,.08);
  --go-line: rgba(74,222,128,.30);
  --test: #fbbf24;          /* directional / worth testing—amber */
  --test-bg: rgba(251,191,36,.08);
  --test-line: rgba(251,191,36,.30);
  --skip: #f87171;          /* low / skip—coral */
  --skip-bg: rgba(248,113,113,.07);
  --skip-line: rgba(248,113,113,.30);

  /* Confidence overlay (used alongside verdict on findings) */
  --conf-high: #38bdf8;     /* p<0.05, n large—cyan */
  --conf-mod:  #c084fc;     /* directional p<0.10—violet */
  --conf-low:  #94a3b8;     /* anecdote / no detectable difference—slate */

  /* Lift indicators (preserves prior data-headlines semantics, mapped to new palette) */
  --lift-high: var(--go);
  --lift-pos: #60a5fa;      /* slight positive—blue (vs flat) */
  --lift-neg: var(--skip);

  /* Content type—News (T1s) vs Entertainment (UsW/WW). Drives metric framing. */
  --news-accent:  #3b82f6;  /* news → CTR + Search Ranking lens */
  --ent-accent:   #a855f7;  /* entertainment → Social Shares + Scroll Depth lens */
  --ent-bg:       rgba(168,85,247,.08);
  --news-bg:      rgba(59,130,246,.08);

  /* Vertical accents (Mind/Body, Everyday Living, Experiences) */
  --vert-mb: #10b981;       /* mind/body—emerald */
  --vert-el: #f59e0b;       /* everyday living—amber-orange */
  --vert-ex: #ec4899;       /* experiences—pink */
  --vert-disc: #06b6d4;     /* discover—cyan */

  /* Type */
  --font-sans: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius: 4px;
  --radius-lg: 8px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--t-1);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  font-feature-settings: 'cv11', 'ss01', 'tnum';
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

body {
  /* faint mission-control grid (matches data-keywords) */
  background-image:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 40px 40px;
  min-height: 100vh;
}

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; color: inherit; }
a { color: var(--t-1); text-decoration: none; }
a:hover { color: var(--go); }

/* ── Page chrome—mirrors data-keywords app shell ──────────────────────── */

.app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr minmax(180px, 280px);
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0a0f17 0%, #07090d 100%);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(8px);
}

.brand { min-width: 0; }
.brand b, .brand .ver { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--t-2);
}
.brand-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--go);
  box-shadow: 0 0 10px var(--go);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:.8 } 50% { opacity: .3 } }
.brand b { color: var(--t-1); font-weight: 600; letter-spacing: 0; font-family: var(--font-sans); }
.brand .ver { color: var(--t-4); }

.topbar-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-3);
  text-align: right;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
}

.page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 32px 80px;
}

/* ── Section: tile grid (Findings) ────────────────────────────────────────── */

.findings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 48px;
}

/* Tile pattern (mirrors data-keywords .brief structure: rail + body + t1/t2 layers) */

.tile {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: border-color 120ms ease;
}

.tile:hover {
  border-color: var(--line-bright);
}

.tile.expanded {
  border-color: var(--line-bright);
  background: var(--bg-2);
}

.tile-rail {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--t-4);
  transition: background 200ms ease, box-shadow 200ms ease;
}

.tile.v-go .tile-rail   { background: var(--go);   box-shadow: 0 0 12px var(--go); }
.tile.v-test .tile-rail { background: var(--test); box-shadow: 0 0 8px var(--test); }
.tile.v-skip .tile-rail { background: var(--skip); }

/* Content-type accent bar (overlays rail when applicable) */
.tile.ct-news .tile-rail   { background: var(--news-accent); box-shadow: 0 0 10px var(--news-accent); }
.tile.ct-ent .tile-rail    { background: var(--ent-accent);  box-shadow: 0 0 10px var(--ent-accent); }

.tile-body {
  padding-left: 14px;       /* leaves room for the 4px rail + breathing */
}

/* T1 row—collapsed view (always visible) */
.t1 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 14px 4px;
  cursor: pointer;
  user-select: none;
}

.verdict-glyph {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--t-4);
}

.tile.v-go .verdict-glyph   { background: var(--go);   box-shadow: 0 0 10px var(--go); }
.tile.v-test .verdict-glyph { background: var(--test); box-shadow: 0 0 8px var(--test); }
.tile.v-skip .verdict-glyph { background: var(--skip); }

.t1-title {
  flex: 1;
  min-width: 0;
}

.t1-title .title {
  font-size: 14px;
  font-weight: 500;
  color: var(--t-1);
  margin-bottom: 4px;
}

.t1-title .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  row-gap: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-3);
}

.t1-title .meta .sep { color: var(--t-4); }

.t1-end {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-4);
  flex: 0 0 auto;
}

.tile.expanded .t1-end::before { content: '▾'; }
.tile:not(.expanded) .t1-end::before { content: '▸'; }

.tile .t1 { cursor: pointer; }
.tile .t1-end { padding: 4px 6px; border-radius: 3px; }
.tile .t1-end:hover::before { color: var(--t-1); }

/* T2—drawer detail. Hidden by default; revealed when .tile.expanded. */

.tile .t2 { display: none; }
.tile.expanded .t2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 0;
  border-top: 1px solid var(--line);
  background: var(--bg-1);
}

@media (max-width: 1100px) {
  .t2 { grid-template-columns: 1fr; }
}

.t2-main {
  padding: 18px 20px;
}

.t2-side {
  padding: 16px 18px;
  border-left: 1px solid var(--line);
  background: var(--bg-0);
}

@media (max-width: 1100px) {
  .t2-side { border-left: none; border-top: 1px solid var(--line); }
}

/* Engagement-rank axis toggle for Top-performers Findings panel
   (R28 Tier C, 2026-05-17). Renders between the section heading and the
   example list; lets operators rank by PV / engaged-session-% / time-on-page
   / cluster-continuation. Active button uses accent color; inactive sit
   muted. Wraps on narrow viewports. */
.top-perf-axis-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 10px;
}
.top-perf-axis-toggle .axis-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: transparent;
  color: var(--t-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.top-perf-axis-toggle .axis-btn:hover {
  color: var(--t-1);
  border-color: var(--t-3);
}
.top-perf-axis-toggle .axis-btn-active {
  background: var(--t-1);
  color: var(--bg-0);
  border-color: var(--t-1);
}
.top-perf-axis-toggle .axis-btn:focus-visible {
  outline: 2px solid var(--t-1);
  outline-offset: 2px;
}

.t2 h3 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-3);
  margin: 0 0 8px;
  font-weight: 600;
}

.t2 .why {
  font-size: 13px;
  line-height: 1.55;
  color: var(--t-1);
  margin-bottom: 16px;
}

.t2 .body-block + .body-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
}

/* ── Pills + chips ────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pill.news    { background: var(--news-bg);  color: var(--news-accent); border: 1px solid var(--news-accent); }
.pill.ent     { background: var(--ent-bg);   color: var(--ent-accent);  border: 1px solid var(--ent-accent); }
.pill.vert-mb { background: rgba(16,185,129,.08); color: var(--vert-mb); border: 1px solid var(--vert-mb); }
.pill.vert-el { background: rgba(245,158,11,.08); color: var(--vert-el); border: 1px solid var(--vert-el); }
.pill.vert-ex { background: rgba(236,72,153,.08); color: var(--vert-ex); border: 1px solid var(--vert-ex); }
.pill.vert-disc { background: rgba(6,182,212,.08); color: var(--vert-disc); border: 1px solid var(--vert-disc); }

.pill.conf-high { background: rgba(56,189,248,.10); color: var(--conf-high); border: 1px solid var(--conf-high); }
.pill.conf-mod  { background: rgba(192,132,252,.10); color: var(--conf-mod);  border: 1px solid var(--conf-mod); }
.pill.conf-low  { background: rgba(148,163,184,.10); color: var(--conf-low);  border: 1px solid var(--conf-low); }

.pill.verdict-v-go   { background: var(--go-bg);   color: var(--go);   border: 1px solid var(--go-line); text-transform: lowercase; letter-spacing: 0.02em; }
.pill.verdict-v-test { background: var(--test-bg); color: var(--test); border: 1px solid var(--test-line); text-transform: lowercase; letter-spacing: 0.02em; }
.pill.verdict-v-skip { background: var(--skip-bg); color: var(--skip); border: 1px solid var(--skip-line); text-transform: lowercase; letter-spacing: 0.02em; }

/* Lift values */
.lift {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
}
.lift.high { color: var(--lift-high); }
.lift.pos  { color: var(--lift-pos); }
.lift.neg  { color: var(--lift-neg); }
.lift.flat { color: var(--t-3); }

/* ── Tables ───────────────────────────────────────────────────────────────── */

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.tbl th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-3);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}

.tbl td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--t-1);
  font-variant-numeric: tabular-nums;
}

.tbl tr:hover td { background: var(--bg-3); }

.tbl td.num,
.tbl th.num {
  text-align: right;
}
.tbl td.num { font-family: var(--font-mono); }
.tbl td.center, .tbl th.center { text-align: center; }

.tbl tr.highlight td {
  background: var(--go-bg);
}

/* ── KPI cards ────────────────────────────────────────────────────────────── */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.kpi {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--t-4);
  border-radius: var(--radius);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.kpi-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-3);
  margin-bottom: 2px;
}

.kpi-val {
  font-size: 22px;
  font-weight: 600;
  color: var(--t-1);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}
.kpi-val-text { font-size: 14px; line-height: 1.3; }

.kpi-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--t-4);
  margin-top: 2px;
}

/* Categorical color-coding—each KPI carries a distinct accent */
.kpi-volume    { border-left-color: var(--conf-high); }
.kpi-volume    .kpi-val { color: var(--conf-high); }

.kpi-quality   { border-left-color: var(--t-3); }
.kpi-quality.v-go   { border-left-color: var(--go);    }
.kpi-quality.v-go   .kpi-val { color: var(--go);    }
.kpi-quality.v-test { border-left-color: var(--test);  }
.kpi-quality.v-test .kpi-val { color: var(--test);  }
.kpi-quality.v-skip { border-left-color: var(--skip);  }
.kpi-quality.v-skip .kpi-val { color: var(--skip);  }

.kpi-spread    { border-left-color: var(--conf-mod); }
.kpi-spread    .kpi-val { color: var(--conf-mod); }

.kpi-issue     { border-left-color: var(--skip); background: var(--skip-bg); }
.kpi-issue     .kpi-val { color: var(--skip); }

/* Legacy aliases for backward-compat with old generate_site.py output */
.kpi-v { font-size: 22px; font-weight: 600; color: var(--t-1); font-variant-numeric: tabular-nums; line-height: 1.0; margin-bottom: 6px; }
.kpi-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-3); }

/* ── Help bubble (?) ──────────────────────────────────────────────────────── */

.help {
  position: relative;
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}

.help-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--t-4);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.help-icon:hover, .help-icon.active {
  color: var(--t-1);
  background: var(--bg-2);
  border-color: var(--t-3);
}

.help-pop {
  display: none;
  position: absolute;
  z-index: 100;
  top: calc(100% + 6px);
  left: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  text-align: left;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--t-2);
}

.help.open .help-pop { display: block; }
/* Flip-side variant—when the icon sits near the right edge of the
   viewport, anchor the popover to the right of the icon instead of
   the left so it extends inward and doesn't overflow off-screen. */
.help.help-flip .help-pop { left: auto; right: 0; }

/* Reset inherited typographic transforms—popovers can be nested in
   uppercased headings (.t2 h3, .section-label, etc.) and must always
   render as normal-case body prose regardless of host context. */
.help-pop {
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--t-2);
}
.help-pop strong, .help-pop b { color: var(--t-1); font-weight: 600; }
.help-pop p { margin: 6px 0 0; }
.help-pop p:first-of-type { margin-top: 8px; }
.help-pop .help-when, .help-pop .help-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  color: var(--t-3);
  font-size: 12px;
}

/* ── Grader integration: inline pill + sidecar drawer ─────────────────────── */

.grade-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.grade-pill.A { background: var(--go-bg);   color: var(--go);   border: 1px solid var(--go-line); }
.grade-pill.B { background: rgba(96,165,250,.10); color: var(--lift-pos); border: 1px solid rgba(96,165,250,.30); }
.grade-pill.C { background: var(--test-bg); color: var(--test); border: 1px solid var(--test-line); }
.grade-pill.D { background: var(--skip-bg); color: var(--skip); border: 1px solid var(--skip-line); }
.grade-pill.F { background: var(--skip-bg); color: var(--skip); border: 1px solid var(--skip-line); font-weight: 700; }

/* ── Section labels + dividers ────────────────────────────────────────────── */

.section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-3);
  margin: 32px 0 12px;
  font-weight: 600;
}

.section-divider {
  height: 1px;
  background: var(--line);
  margin: 24px 0;
}

/* ── Plotly chart wrapper (preserves dark theme) ──────────────────────────── */

.chart-wrap {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin: 12px 0;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.page-foot {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-3);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.page-foot a { color: var(--t-2); }
.page-foot a:hover { color: var(--go); }

/* ── Top-level nav (mirrors keywords .lenses pill strip) ──────────────────── */

.subnav {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: fit-content;
  margin: 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.subnav a {
  background: transparent;
  border: 0;
  color: var(--t-2);
  font-size: 11px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 3px;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .12s, color .12s;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

.subnav a:hover { color: var(--t-1); background: var(--bg-2); }
.subnav a.active {
  background: var(--bg-3);
  color: var(--t-1);
  box-shadow: inset 0 0 0 1px var(--line-bright);
}

/* ── Status flags + run badges (preserves existing semantics) ─────────────── */

.flag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.flag.live { background: var(--go-bg); color: var(--go); border: 1px solid var(--go-line); }
.flag.pending { background: var(--test-bg); color: var(--test); border: 1px solid var(--test-line); }
.flag.deprecated { background: var(--skip-bg); color: var(--skip); border: 1px solid var(--skip-line); }

/* ── Print ────────────────────────────────────────────────────────────────── */

@media print {
  body {
    background: white !important;
    color: black !important;
  }
  .tile, .kpi, .chart-wrap { background: white !important; border-color: #ccc !important; }
  .help, .subnav, .page-foot { display: none !important; }
}