/* Research-series additions on top of benchmark-board.css. The page template and its rules:
   docs/comedy/strategy/research-page-rulebook.md (read it before adding or editing a research page).
   Shared components live here (decision D18, 2026-09-12); a page stylesheet holds one-offs only.
   Light-only: dark mode was unshipped 2026-08-12. */

/* ---------- research hub cards ---------- */
.research-mix { align-items:stretch; }
.research-mix .research-module { color:inherit; text-decoration:none; }
.research-mix .research-module:hover { border-color:var(--faint); transform:translateY(-1px); }
.research-mix .module[data-status="next"] { border-color:var(--line); }
.research-mix .preview-module[data-status="soon"] { cursor:default; }
.research-mix .preview-module[data-status="soon"] img { opacity:.68; filter:saturate(.72); }
.research-mix .preview-module[data-status="soon"] .module-status {
  border-color:var(--prov-line);
  background:var(--prov-bg);
  color:var(--prov);
}
.research-mix .module[data-status="published"] .module-status {
  border-color:var(--prov-line);
  background:var(--best-wash);
  color:var(--accent);
}
.preview-module {
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:0;
  overflow:hidden;
  background:var(--card);
}
/* Image keeps the 1200:628 card shape; the date sits in its own row below it so it
   never overlaps the chart labels baked into the card. */
.preview-module img { display:block; width:100%; height:auto; aspect-ratio:1200/628; object-fit:cover; border-bottom:1px solid var(--line-2); }
.preview-module .module-date {
  margin:0; padding:9px 14px;
  font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  background:var(--card-2);
}
.preview-module .preview-status {
  position:absolute;
  top:10px;
  right:10px;
  margin:0;
  box-shadow:0 1px 4px rgba(46,32,40,.12);
}
.intro-lead {
  max-width:74ch;
  margin:22px 0 6px;
  color:var(--ink-2);
  font-size:1.06rem;
  line-height:1.66;
}
.intro-lead b { color:var(--ink); font-weight:700; }

/* ---------- accessibility ---------- */
.skip-link { position:absolute; top:-80px; left:18px; padding:12px 18px; background:var(--card); border:1px solid var(--line); border-radius:8px; color:var(--ink); z-index:100; }
.skip-link:focus { top:8px; }
.table-scroll:focus-visible { outline-offset:-3px; }

/* ---------- links in the body of a report (D15) ---------- */
.stack a { color:var(--accent); text-decoration-color:rgba(169,38,101,.4); text-decoration-thickness:1px; text-underline-offset:3px; }
.stack a:hover { text-decoration-color:var(--accent); }
a.pill-link, a.pill-link:visited, .stack a.pill-link { color:var(--ink-2); text-decoration:none; }
a.pill-link:hover, .stack a.pill-link:hover { color:var(--ink); }
a.button.paper, a.button.paper:visited, .stack a.button.paper, .download-row a { color:var(--ink); text-decoration:none; }
.stack .research-mix a { color:inherit; text-decoration:none; }

/* ---------- highlights summary ---------- */
.report-summary {
  padding:22px 20px 20px;
  border-bottom:1px solid var(--line);
  background:var(--card-2);
}
.report-summary-label {
  display:block;
  margin-bottom:9px;
  color:var(--accent);
  font-size:.66rem;
  font-weight:750;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.report-summary h2 {
  max-width:none;
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.35rem,2.4vw,1.75rem);
  font-weight:400;
  letter-spacing:-.015em;
  line-height:1.2;
  text-wrap:balance;
}
.report-summary p {
  max-width:82ch;
  margin:11px 0 0;
  color:var(--ink-2);
  font-size:.94rem;
  line-height:1.62;
}
/* hero: HTML bar chart under the summary (one-axis charts are HTML, D13) */
.hero-bars { padding:22px 20px 18px; }
.hero-bar-row { display:grid; grid-template-columns:minmax(120px,180px) minmax(0,1fr) 96px; gap:14px; align-items:center; padding:7px 0; }
.hero-bar-row > span:first-child { color:var(--ink-2); font-size:.86rem; }
.hero-bar-row.ref > span:first-child { color:var(--muted); }
.hero-bar-row .track { position:relative; height:14px; border-radius:3px; background:var(--card-2); border:1px solid var(--line-2); overflow:hidden; }
.hero-bar-row .track i { display:block; height:100%; width:var(--value); background:var(--bar); border-radius:2px; min-width:2px; }
.hero-bar-row.ref .track i { background:var(--faint); }
.hero-bar-row.quiet .track i { background:var(--bar-quiet); }
.hero-bar-row .track .plainmark { position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; background:var(--ink-2); border-radius:2px; }
.hero-bar-row > b { text-align:right; font-size:.82rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hero-bar-legend { display:flex; gap:18px; margin:0 0 12px 0; font-size:.72rem; color:var(--muted); }
.hero-bar-legend span { display:inline-flex; align-items:center; gap:6px; }
.hero-bar-legend .k-hea::before { content:""; width:16px; height:9px; border-radius:2px; background:var(--bar); }
.hero-bar-legend .k-plain::before { content:""; width:2px; height:12px; background:var(--ink-2); }
/* diverging delta chart (attack minus plain), with a minus zone */
.delta-row { display:grid; grid-template-columns:minmax(120px,180px) minmax(0,1fr) 74px; gap:14px; align-items:center; padding:7px 0; }
.delta-row > span:first-child { color:var(--ink-2); font-size:.86rem; }
.delta-track { position:relative; height:14px; border-radius:3px; background:var(--card-2); border:1px solid var(--line-2); }
.delta-track .zero { position:absolute; top:-3px; bottom:-3px; width:1.5px; margin-left:-.75px; background:var(--faint); }
.delta-track i { position:absolute; top:0; bottom:0; border-radius:2px; }
.delta-track i.pos { background:var(--bar); }
.delta-track i.neg { background:var(--faint); }
.delta-row > b { text-align:right; font-size:.82rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.delta-axis { display:grid; grid-template-columns:minmax(120px,180px) minmax(0,1fr) 74px; gap:14px; margin-top:4px; }
.delta-axis .scale { grid-column:2; position:relative; height:1em; color:var(--faint); font-size:.68rem; font-variant-numeric:tabular-nums; }
.delta-axis .scale span { position:absolute; transform:translateX(-50%); white-space:nowrap; }
.hero-bar-legend .k-neg::before { content:""; width:16px; height:9px; border-radius:2px; background:var(--faint); }
@media (max-width:720px){ .delta-row, .delta-axis { grid-template-columns:88px minmax(0,1fr) 64px; gap:8px; } .delta-row > span:first-child { font-size:.78rem; } }
.hero-bar-row > b small { display:block; font-weight:400; color:var(--faint); font-size:.7rem; white-space:nowrap; }
.hero-bar-axis { display:grid; grid-template-columns:minmax(120px,180px) minmax(0,1fr) 96px; gap:14px; margin-top:4px; }
.hero-bar-axis span { grid-column:2; display:flex; justify-content:space-between; color:var(--faint); font-size:.68rem; font-variant-numeric:tabular-nums; }

/* ---------- "Why ask this?" (D11) ---------- */
.stack > .why-ask { margin-bottom:-12px; max-width:78ch; }
.why-ask .report-summary-label { display:block; margin-bottom:8px; }
.why-ask p { margin:0; color:var(--ink-2); font-size:.94rem; line-height:1.62; }
.why-ask p + p { margin-top:10px; }

/* ---------- section notes (D10: a note sits after the panel, not inside it) ---------- */
.section-note { max-width:88ch; margin:14px 2px 0; color:var(--muted); font-size:.86rem; line-height:1.6; }
.section-note b { color:var(--ink); }
.sec-head p + p { margin-top:10px; }
section > .panel + .panel { margin-top:18px; }

/* ---------- big numbers: one component (D4) ---------- */
.consensus-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden; }
.consensus-cards.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.consensus-cards.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.panel-head + .consensus-cards { margin-top:16px; border-top:1px solid var(--line); }
.consensus-stat { min-width:0; padding:22px; border-right:1px solid var(--line); }
.consensus-stat:last-child { border-right:0; }
.consensus-stat.best { background-image:var(--best-wash); }
.consensus-stat > b { display:block; margin-bottom:5px; font-family:var(--serif); font-size:1.9rem; font-weight:400; letter-spacing:-.02em; line-height:1.05; font-variant-numeric:tabular-nums; }
.consensus-stat > b small { display:inline-block; margin-left:7px; color:var(--accent); font-family:var(--sans); font-size:.68rem; font-weight:650; letter-spacing:.02em; vertical-align:middle; }
.consensus-stat > span { color:var(--muted); font-size:.74rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.consensus-stat > p { margin:14px 0 0; color:var(--muted); font-size:.78rem; line-height:1.5; }
.consensus-stat > b + p { margin-top:6px; font-size:.82rem; }
.consensus-stat.good > b { color:var(--up); }
.consensus-stat.miss > b { color:var(--down); }

/* ---------- the test: flow panel ---------- */
.test-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; }
.test-flow.simple-flow { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); }
.test-flow.two-up { grid-template-columns:repeat(2,minmax(0,1fr)); }
.flow-step { position:relative; min-width:0; padding:24px; border-right:1px solid var(--line); }
.flow-step:last-child { border-right:0; }
.flow-title { display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.flow-number { display:grid; place-items:center; flex:0 0 auto; width:25px; height:25px; margin-bottom:18px; border-radius:50%; background:var(--best-wash); color:var(--accent); font-size:.72rem; font-weight:750; }
.flow-title .flow-number { margin-bottom:0; }
.flow-step h4 { margin:0 0 14px; font-family:var(--serif); font-size:1.12rem; font-weight:400; }
.flow-title h4 { margin:0; }
.flow-step > p { margin:15px 0 0; color:var(--muted); font-size:.82rem; line-height:1.55; }
.simple-choice { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.simple-choice span { display:grid; place-items:center; min-height:68px; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--card-2); color:var(--ink-2); font-family:var(--serif); text-align:center; }

/* ---------- tables: the whole row tints on hover, row headers included ---------- */
tbody tr:hover > th { background-color:var(--card-2); }
tbody th[scope="row"] { text-align:left; font-weight:600; padding:11px 12px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
tbody tr:last-child th[scope="row"] { border-bottom:0; }

/* ---------- compact comparison tables ---------- */
.compact-metrics { min-width:720px; }
.compact-metrics th:first-child, .compact-metrics td:first-child { width:31%; }
.compact-metrics th:not(:first-child), .compact-metrics td:not(:first-child) { width:auto; }
/* Align headings with their cells; numeric columns opt in on both. */
.compact-metrics th, .compact-metrics td { text-align:left; }
.compact-metrics th.num, .compact-metrics td.num { text-align:right; }
.compact-metrics.text th, .compact-metrics.text td, .compact-metrics.text th:not(:first-child) { text-align:left; width:auto; }
.compact-metrics.text th:first-child, .compact-metrics.text td:first-child { width:16%; }
.metric-cell { display:grid; grid-template-columns:minmax(110px,1fr) 50px; gap:10px; align-items:center; }
.metric-cell b { font-size:.8rem; font-variant-numeric:tabular-nums; text-align:right; }
.mini-bar { min-width:0; height:8px; overflow:hidden; border-radius:99px; background:var(--card-2); }
.mini-bar i { display:block; width:var(--value); height:100%; border-radius:inherit; background:var(--bar); }
.mini-bar.alt i { background:var(--bar-quiet); }
td.cell-best { background-image:var(--best-wash); font-weight:650; }
.legend.in-card { margin:0; padding:10px 20px 14px; }
.panel-body.chart { padding:12px 8px 4px; }
.panel-body.chart svg { display:block; width:100%; max-width:720px; height:auto; margin:0 auto; font-family:inherit; }
.delta-pos { color:var(--up); }
.delta-neg { color:var(--down); }

/* ---------- model marks (D6: colour where the brand has one) ---------- */
.model-cell { min-width:0; }
.mono-mark img { display:block; width:16px; height:16px; }
.mono-mark.ours-mark img { width:18px; height:18px; border-radius:50%; }
.mono-mark.text-mark { font-size:.7rem; font-weight:700; letter-spacing:.02em; color:var(--logo-ink,var(--ink)); }
.inline-model { display:inline-flex; align-items:center; gap:8px; vertical-align:middle; white-space:nowrap; }
.inline-model img { display:inline-block; width:20px; height:20px; object-fit:contain; flex-shrink:0; }

/* ---------- model panel in methodology (D16: card grid, role heading when roles differ) ---------- */
.method-grid.model-panel-grid .panel.method { display:flex; align-items:center; height:76px; min-height:0; padding:14px 16px; }
.method-grid.model-panel-grid .model-cell { margin:0; }
.role-head { margin:0 0 10px; color:var(--accent); font-size:.68rem; font-weight:750; letter-spacing:.09em; text-transform:uppercase; }
.model-panel-grid + .role-head { margin-top:22px; }

/* ---------- prompts and instructions, quoted verbatim ---------- */
.prompt-block { margin:0; padding:16px 18px; border:1px solid var(--line-2); border-radius:8px; background:var(--card-2); color:var(--ink-2); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.8rem; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; overflow-x:auto; }
.prompt-block code { font:inherit; }
.prompt-block b { color:var(--accent); font-family:var(--sans); font-size:.66rem; font-weight:750; letter-spacing:.09em; text-transform:uppercase; }
.panel > .prompt-block { margin:14px 20px 20px; }
.prompt-block.tall { max-height:560px; }

/* ---------- collapsibles: verbatim instructions, full responses, long secondary tables ---------- */
details.research-detail { margin:18px 0 0; }
.research-detail > summary { padding:17px 20px; cursor:pointer; font-size:.94rem; line-height:1.5; font-weight:600; list-style:none; display:flex; align-items:center; gap:10px; }
.research-detail > summary::-webkit-details-marker { display:none; }
.research-detail > summary::before { content:""; width:7px; height:7px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(-45deg); transition:transform .12s ease; flex:0 0 auto; }
.research-detail[open] > summary::before { transform:rotate(45deg); }
.research-detail[open] > summary { border-bottom:1px solid var(--line); }
.research-detail .detail-body { padding:20px; }
.research-detail .detail-body > .panel { border:0; box-shadow:none; }
.research-detail .detail-body > .panel > .panel-head { padding-left:0; padding-right:0; }
.research-detail .detail-body > .panel > .table-scroll { margin-top:14px; }

/* ---------- prior work ---------- */
.prior-table th:first-child, .prior-table td:first-child { width:28%; }
.prior-table td { vertical-align:top; line-height:1.5; }

/* ---------- download rows ---------- */
.download-links { display:flex; flex-wrap:wrap; gap:16px 24px; margin-top:16px; font-size:.875rem; }

/* ---------- tooltip (D14: the one light card, driven by /tooltip.js) ---------- */
.tip {
  position:fixed; z-index:90; pointer-events:none; opacity:0;
  max-width:280px; padding:9px 11px;
  border:1px solid var(--line); border-radius:8px;
  background:var(--card); color:var(--ink);
  font-size:.79rem; line-height:1.45;
  box-shadow:0 8px 28px rgba(30,20,15,.16);
  transition:opacity .1s ease;
}
.tip.on { opacity:1; }
.tip b { display:block; font-weight:700; margin-bottom:2px; }
.tip span { color:var(--muted); }
[data-tip] { cursor:default; }
td[data-tip], .hm td[data-tip] { text-decoration:underline dotted var(--line); text-decoration-thickness:1px; text-underline-offset:3px; }

/* ---------- figures (inline SVG line charts, D13) ---------- */
.figure { margin:18px 0 0; }
.figure figcaption { margin-top:10px; color:var(--muted); font-size:.84rem; line-height:1.5; }
.linefig { display:block; width:100%; height:auto; font-family:var(--sans); }
.linefig .grid { stroke:var(--grid); stroke-width:1; }
.linefig .axis { stroke:var(--line); stroke-width:1; }
.linefig .tick { fill:var(--muted); font-size:11px; }
.linefig .lab { fill:var(--ink-2); font-size:12px; }
.linefig .lab.serif { font-family:var(--serif); font-size:13px; }
.linefig .ln { fill:none; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.linefig .ln.s1 { stroke:var(--s1); }
.linefig .ln.s2 { stroke:var(--s2); }
.linefig .ln.ref { stroke:var(--s1); stroke-dasharray:4 3; stroke-width:1.6; opacity:.75; }
.linefig .dot { stroke:var(--paper); stroke-width:1.6; }
.linefig .dot.s1 { fill:var(--s1); }
.linefig .dot.s2 { fill:var(--s2); }

/* ---------- humor-tax trajectory ---------- */
.tax-trajectory-panel { overflow:hidden; }
.tax-trajectory-panel .panel-head { border-bottom:1px solid var(--line); }
.tax-chart-scroll { overflow-x:auto; padding:18px 22px 12px; }
.tax-trajectory { display:block; width:100%; min-width:760px; height:auto; font-family:var(--sans); }
.tax-trajectory text { fill:var(--muted); }
.tax-trajectory .tax-family { fill:var(--ink); font-family:var(--serif); font-size:18px; text-anchor:middle; }
.tax-trajectory .tax-separator { stroke:var(--line); stroke-width:1; stroke-dasharray:4 5; }
.tax-trajectory .tax-grid { stroke:var(--grid); stroke-width:1; }
.tax-trajectory .tax-baseline { stroke:var(--faint); stroke-width:1.2; stroke-dasharray:4 4; }
.tax-trajectory .tax-plot-label { fill:var(--ink); font-size:14px; font-weight:700; }
.tax-trajectory .tax-plot-note { fill:var(--muted); font-size:12px; }
.tax-trajectory .tax-axis { fill:var(--faint); font-size:11px; text-anchor:end; }
.tax-trajectory .tax-humor-line { fill:none; stroke:var(--bar-quiet); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.tax-trajectory .tax-humor-points circle { fill:var(--bar); stroke:var(--card); stroke-width:3; }
.tax-trajectory .tax-humor-points text { fill:var(--ink); font-size:11px; font-weight:700; text-anchor:middle; font-variant-numeric:tabular-nums; }
.tax-trajectory .tax-range-bars rect { fill:#8063a8; rx:4; }
.tax-trajectory .tax-range-bars rect.gain { fill:var(--up); }
.tax-trajectory .tax-range-bars text { fill:var(--ink-2); font-size:10px; text-anchor:middle; font-variant-numeric:tabular-nums; }
.tax-trajectory .tax-range-bars text.gain-label { fill:var(--up); }
.tax-trajectory .tax-stage-labels text { fill:var(--ink-2); font-size:11px; text-anchor:middle; }

.measure-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.measure-grid .method-card {
  min-height:210px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  box-shadow:var(--shadow);
}
.measure-grid .method-card .eyebrow {
  margin:0 0 22px;
  color:var(--accent);
  font-size:.68rem;
  font-weight:750;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.measure-grid .method-card h4 {
  margin:0;
  font-family:var(--serif);
  font-size:1.22rem;
  font-weight:400;
  line-height:1.25;
}
.measure-grid .method-card > p:last-child {
  margin:14px 0 0;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.6;
}

/* ---------- phones ---------- */
@media (max-width:980px) {
  .test-flow { grid-template-columns:1fr 1fr; }
  .test-flow.simple-flow { grid-template-columns:1fr; }
  .simple-flow .flow-step { border-right:0; border-bottom:1px solid var(--line); }
  .simple-flow .flow-step:last-child { border-bottom:0; }
  .consensus-cards { grid-template-columns:1fr 1fr; }
  .consensus-stat:nth-child(2) { border-right:0; }
  .consensus-stat:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .consensus-cards.three { grid-template-columns:1fr 1fr; }
  .consensus-cards.two .consensus-stat:nth-child(-n+2) { border-bottom:0; }
}
@media (max-width:720px) {
  .tax-chart-scroll { padding:14px 12px 10px; }
  .measure-grid { grid-template-columns:1fr; }
  .measure-grid .method-card { min-height:0; padding:20px; }
  .measure-grid .method-card .eyebrow { margin-bottom:15px; }
  .test-flow, .test-flow.two-up, .consensus-cards, .consensus-cards.three, .consensus-cards.two { grid-template-columns:1fr; }
  .flow-step, .consensus-stat { border-right:0; border-bottom:1px solid var(--line); }
  .flow-step:last-child, .consensus-stat:last-child { border-bottom:0 !important; }
  .consensus-cards.two .consensus-stat:first-child { border-bottom:1px solid var(--line); }
  .simple-choice { grid-template-columns:1fr; }
  .hero-bar-row, .hero-bar-axis { grid-template-columns:88px minmax(0,1fr) 84px; gap:8px; }
  .hero-bar-row > span:first-child { font-size:.78rem; }
  .research-detail > summary, .research-detail .detail-body { padding-left:16px; padding-right:16px; }
  .panel > .prompt-block { margin:12px 12px 16px; }
  .prompt-block { padding:12px 14px; }
}