/* ===================================================================
   App Store Product Insights — report styles
   Built on top of the root site's tokens (../../styles.css is linked
   before this file: --paper, --ink, --accent, --mint/sky/butter/blush,
   --font-display/body, --s1..s7 spacing scale, --r-sm..pill radii,
   --shadow-card/lift, --ease). This file adds a small set of new
   tokens specific to this project's severity/priority language, plus
   all report-specific layout.
   =================================================================== */

:root {
  /* Severity / priority color language. Reuses the existing chip hues
     so this project still feels like part of the same site, but gives
     them one consistent meaning here: red-ish = urgent, amber =
     important, blue = calm/steady, green = minor. Only User Impact and
     Priority use color — Strategic Relevance and Evidence Confidence
     use a plain typographic treatment instead, so a single card never
     shows more than one competing color system at once. */
  --sev-critical-bg: var(--blush);
  --sev-critical-text: #A6371E;
  --sev-high-bg: var(--butter);
  --sev-high-text: #8A5A00;
  --sev-moderate-bg: var(--sky);
  --sev-moderate-text: #1D5C8A;
  --sev-low-bg: var(--mint);
  --sev-low-text: #1F7A54;

  --report-max: 46rem;      /* comfortable reading measure for prose blocks */
  --report-wide: 74rem;     /* matches root --wrap */
}

/* ---------------------------------------------------------------
   Base / layout
--------------------------------------------------------------- */

.report-body { background: var(--paper); }

.report-wrap {
  width: 100%;
  max-width: var(--report-wide);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 640px) { .report-wrap { padding-inline: 2rem; } }

.report-section { padding-block: var(--s5); }
.report-section:first-of-type { padding-top: var(--s4); }

.report-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--s3);
}

.report-kicker {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 0.5rem;
  display: block;
}

.report-lede {
  color: var(--ink-soft);
  max-width: var(--report-max);
  margin-bottom: var(--s4);
}

svg.icon { width: 1.3em; height: 1.3em; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
svg.icon-filled { fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------
   Header + in-page nav
--------------------------------------------------------------- */

.report-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.report-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.1rem;
}

.report-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 0.2s var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}
.report-back:hover { color: var(--ink); }
.report-back svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.label-short { display: none; }

@media (max-width: 480px) {
  .label-full { display: none; }
  .label-short { display: inline; }
  .export-btn { padding: 0.6rem 0.9rem; font-size: 0.8rem; }
}

.report-header-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  display: none;
}
@media (min-width: 640px) { .report-header-title { display: block; } }

.report-toc {
  /* position: sticky doesn't hold here -- the root site sets `overflow-x:
     hidden` on <body> (to stop decorative elements causing horizontal
     scroll), and per the CSS spec that also makes overflow-y compute to
     "auto", which turns <body> into a scroll container that never
     actually scrolls. That silently breaks position:sticky for any
     descendant. report.js toggles a `.is-pinned` class instead, once the
     header has scrolled out of view, and compensates the layout shift
     itself -- see setupTocPin(). */
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.report-toc.is-pinned {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.report-toc-inner {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.7rem;
}
.report-toc-inner::-webkit-scrollbar { display: none; }

.report-toc a {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
  padding-block: 0.2rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.report-toc a:hover { color: var(--ink); }
.report-toc a.is-active { color: var(--ink); border-color: var(--accent); }

/* ---------------------------------------------------------------
   App identity
--------------------------------------------------------------- */

.app-identity {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.app-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
  object-fit: cover;
}

.app-identity-text { min-width: 0; }

.app-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.app-meta {
  color: var(--ink-faint);
  font-size: 0.95rem;
  margin-top: 0.2rem;
}

.app-scope-line {
  margin-top: 0.55rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.storefront-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-faint);
  background: var(--paper-soft);
  border-radius: var(--r-pill);
  padding: 0.15rem 0.55rem;
}

.export-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.65rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #FFFFFF;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.export-btn:hover { background: var(--accent); transform: translateY(-2px); }
.export-btn svg { width: 1rem; height: 1rem; }

/* ---------------------------------------------------------------
   Review snapshot
--------------------------------------------------------------- */

.snapshot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}
@media (min-width: 860px) { .snapshot-grid { grid-template-columns: 0.8fr 1.2fr; gap: var(--s5); } }

.rating-compare {
  display: flex;
  gap: var(--s4);
}

.rating-block { flex: 1; }

.rating-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  letter-spacing: -0.02em;
  line-height: 1;
}

.rating-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-faint);
  margin-top: 0.4rem;
}

.rating-stars { color: var(--accent); margin-top: 0.3rem; display: flex; gap: 0.1rem; }
.rating-stars svg { width: 0.95rem; height: 0.95rem; }

.snapshot-note {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-top: var(--s3);
  max-width: 34rem;
}

.dist-rows { display: flex; flex-direction: column; gap: 0.55rem; }

.dist-row {
  display: grid;
  grid-template-columns: 2.2rem 1fr 4.2rem;
  align-items: center;
  gap: 0.7rem;
}

.dist-star-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: right;
}

.dist-track {
  display: block;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--paper-soft);
  overflow: hidden;
}

.dist-fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: width 0.6s var(--ease);
}

.dist-count {
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   Product brief
--------------------------------------------------------------- */

.brief-card {
  background: var(--paper-soft);
  border-radius: var(--r-lg);
  padding: var(--s4);
  border-left: 4px solid var(--accent);
}

.brief-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ---------------------------------------------------------------
   Transformation summary
--------------------------------------------------------------- */

.transform-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  text-align: center;
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: var(--s4) var(--s3);
}

.transform-stat { color: #FFFFFF; }
.transform-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  line-height: 1;
}
.transform-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0.3rem;
}
.transform-arrow { color: rgba(255, 255, 255, 0.35); font-size: 1.4rem; }

/* ---------------------------------------------------------------
   Headline signals (2x2)
--------------------------------------------------------------- */

.headline-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
}
@media (min-width: 700px) { .headline-grid { grid-template-columns: repeat(2, 1fr); } }

.headline-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s3);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.headline-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: transparent; }

.headline-icon-row { display: flex; align-items: center; justify-content: space-between; }
.headline-icon {
  width: 2.4rem; height: 2.4rem;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-soft);
  color: var(--ink);
}

.headline-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.headline-theme {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.headline-excerpt {
  font-size: 0.9rem;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------------
   Badges: priority + severity
--------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.6rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.badge-p0 { background: var(--sev-critical-bg); color: var(--sev-critical-text); }
.badge-p1 { background: var(--sev-high-bg); color: var(--sev-high-text); }
.badge-p2 { background: var(--sev-moderate-bg); color: var(--sev-moderate-text); }

.badge-impact-critical { background: var(--sev-critical-bg); color: var(--sev-critical-text); }
.badge-impact-high { background: var(--sev-high-bg); color: var(--sev-high-text); }
.badge-impact-moderate { background: var(--sev-moderate-bg); color: var(--sev-moderate-text); }
.badge-impact-low { background: var(--sev-low-bg); color: var(--sev-low-text); }

.rubric-plain {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.rubric-plain .dot { opacity: 0.5; margin-right: 0.3em; }

/* ---------------------------------------------------------------
   Priority overview table
--------------------------------------------------------------- */

.table-scroll { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); }

table.priority-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-size: 0.88rem;
}

.priority-table th {
  text-align: left;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.9rem 1rem;
  background: var(--paper-soft);
  white-space: nowrap;
}

.priority-table td {
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--line);
  vertical-align: top;
}

.priority-table tr:hover td { background: var(--paper-soft); }

.priority-table a.row-link { font-weight: 700; color: var(--ink); transition: color 0.2s var(--ease); }
.priority-table a.row-link:hover { color: var(--accent-text); }

/* ---------------------------------------------------------------
   Content cards: strengths / pain points / requests / priorities
--------------------------------------------------------------- */

.content-cards { display: flex; flex-direction: column; gap: var(--s3); }

.content-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s3);
  scroll-margin-top: 6rem;
}

.content-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: 0.5rem;
}

.content-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }

.tag {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper-soft);
  border-radius: var(--r-pill);
  padding: 0.28rem 0.65rem;
}

.evidence-count-line {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-bottom: 0.8rem;
}
.evidence-count-line strong { color: var(--ink); }

.rubric-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-bottom: var(--s3);
  padding: 0.8rem 1rem;
  background: var(--paper-soft);
  border-radius: var(--r-md);
}

.rubric-item { font-size: 0.8rem; }
.rubric-item-label { color: var(--ink-faint); font-weight: 600; margin-right: 0.4rem; }

.card-prose { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: var(--s3); }
.card-prose:last-child { margin-bottom: 0; }

.protect-block, .need-block {
  background: var(--paper-soft);
  border-radius: var(--r-md);
  padding: 0.9rem 1rem;
  margin-top: 0.8rem;
}
.protect-label, .need-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: block;
  margin-bottom: 0.35rem;
}

.request-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
@media (min-width: 640px) { .request-split { grid-template-columns: 1fr 1fr; } }
.request-col-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 0.4rem;
}

.quote-block {
  border-left: 3px solid var(--line-strong);
  padding-left: 0.9rem;
  margin: 0.7rem 0;
  font-size: 0.92rem;
  color: var(--ink);
}
.quote-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 0.35rem;
}
.quote-meta .stars { color: var(--accent); display: inline-flex; }
.quote-meta .stars svg { width: 0.8rem; height: 0.8rem; }

.view-evidence-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-text);
  margin-top: 0.6rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-body);
}
.view-evidence-link:hover { text-decoration: underline; }
.view-evidence-link svg { width: 0.9rem; height: 0.9rem; }

/* ---------------------------------------------------------------
   Deep dive <details>
--------------------------------------------------------------- */

details.deep-dive {
  margin-top: var(--s3);
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}

details.deep-dive summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
}
details.deep-dive summary::-webkit-details-marker { display: none; }

details.deep-dive summary .chevron {
  width: 1rem; height: 1rem;
  transition: transform 0.2s var(--ease);
  color: var(--ink-faint);
}
details.deep-dive[open] summary .chevron { transform: rotate(180deg); }

.deep-dive-body { padding-top: var(--s3); display: flex; flex-direction: column; gap: var(--s3); }

.field-block .field-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 0.3rem;
}
.field-block .field-value { color: var(--ink-soft); font-size: 0.92rem; }

.chip-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* ---------------------------------------------------------------
   Evidence explorer
--------------------------------------------------------------- */

.evidence-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: var(--s3);
  align-items: center;
}

.evidence-select {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.55rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
}

.rating-filter { display: flex; gap: 0.4rem; }
.rating-filter button {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.rating-filter button.is-active { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }

.evidence-count-summary { font-size: 0.85rem; color: var(--ink-faint); margin-bottom: var(--s3); }

.evidence-grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
@media (min-width: 780px) { .evidence-grid { grid-template-columns: repeat(2, 1fr); } }

.evidence-card {
  background: var(--paper-soft);
  border-radius: var(--r-md);
  padding: 0.9rem 1rem;
}
.evidence-card-body { font-size: 0.9rem; color: var(--ink); margin: 0.4rem 0; }
.evidence-card-title { font-weight: 700; font-size: 0.88rem; }
.evidence-empty { color: var(--ink-faint); font-size: 0.9rem; padding: var(--s3) 0; }

/* ---------------------------------------------------------------
   Methodology
--------------------------------------------------------------- */

.method-grid { display: flex; flex-direction: column; gap: var(--s3); max-width: var(--report-max); }
.method-block .field-label { margin-bottom: 0.4rem; }
.method-list { color: var(--ink-soft); font-size: 0.92rem; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.method-list li { padding-left: 0.2rem; }
.method-list strong { color: var(--ink); font-weight: 700; }

/* Each numbered methodology block now carries several paragraphs and lists
   instead of one string, so the pieces inside it need their own rhythm. */
.method-block > * + * { margin-top: 0.6rem; }
.method-block > .field-label + * { margin-top: 0; }

/* ---------------------------------------------------------------
   Selector intro
   The picker page explains the problem before the app grid, so it
   needs paragraph rhythm the report pages (one lede each) never did.
   Same type scale, same tokens, same components -- only the vertical
   rhythm and the reading measure are new.
--------------------------------------------------------------- */

.intro-title { max-width: 30ch; }

.intro-copy {
  max-width: 38rem;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.intro-copy p { color: var(--ink-soft); }
.intro-copy p.intro-lead { color: var(--ink); font-size: 1.05rem; }
.intro-copy strong { color: var(--ink); font-weight: 700; }

/* The problem-to-solution pivot. Plain display type, no card or callout:
   it earns its prominence from size and weight, not from a container. */
.intro-pivot {
  max-width: 38rem;
  margin-block: var(--s4);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* A step down from the page title so the app grid reads as the next
   move rather than a second headline. */
.intro-choose {
  font-size: clamp(1.15rem, 1rem + 0.55vw, 1.45rem);
  max-width: 30ch;
}

/* ---------------------------------------------------------------
   Footer
--------------------------------------------------------------- */

.report-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s4);
  text-align: center;
}
.report-footer a { font-weight: 600; color: var(--ink-soft); }
.report-footer a:hover { color: var(--accent-text); }

/* ---------------------------------------------------------------
   Loading / error states
--------------------------------------------------------------- */

.report-loading, .report-error {
  padding: var(--s7) var(--s3);
  text-align: center;
  color: var(--ink-faint);
}
.report-error { color: var(--accent-text); }

/* ---------------------------------------------------------------
   Reduced motion
--------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .headline-card, .card-hover, .export-btn { transition: none !important; }
}

/* ---------------------------------------------------------------
   V1.1 — counterevidence, null-strength finding, print
--------------------------------------------------------------- */

/* Counterevidence: reviews that qualify a claim. Visually distinct from
   supporting quotes so a reader can never mistake one for the other. */
.counter-block {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--line-strong);
  background: var(--paper-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.counter-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}

.counter-quote {
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-style: italic;
}

.counter-quote + .counter-quote { margin-top: 0.75rem; }
.counter-quote .quote-meta { font-style: normal; margin-top: 0.3rem; }

/* "No strong current positive theme emerged" — a finding, not an error state,
   so it is styled as a deliberate result rather than an empty placeholder. */
.null-finding {
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--paper-soft);
  padding: var(--s3);
  max-width: var(--measure);
}

.null-finding-head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.null-finding-body { color: var(--ink-soft); font-size: 0.95rem; }

.headline-card-null { opacity: 0.72; }
.headline-card-null .headline-theme { color: var(--ink-faint); }

/* ---------------------------------------------------------------
   Print / PDF export
   The priority table sat at min-width:640px inside an overflow-x:auto
   container. On paper there is no scrolling, so anything past the
   printable width (~624px on Letter) was silently clipped — the
   Confidence column vanished. Every report was affected, not just one.
--------------------------------------------------------------- */
@media print {
  .table-scroll { overflow: visible !important; border: none; }

  table.priority-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed;
    font-size: 0.72rem;
  }

  .priority-table th,
  .priority-table td {
    padding: 0.4rem 0.45rem;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Give the signal column the room; keep rubric columns narrow but present. */
  .priority-table th:nth-child(1), .priority-table td:nth-child(1) { width: 8%; }
  .priority-table th:nth-child(2), .priority-table td:nth-child(2) { width: 34%; }
  .priority-table th:nth-child(3), .priority-table td:nth-child(3) { width: 12%; }
  .priority-table th:nth-child(4), .priority-table td:nth-child(4) { width: 14%; }
  .priority-table th:nth-child(5), .priority-table td:nth-child(5) { width: 16%; }
  .priority-table th:nth-child(6), .priority-table td:nth-child(6) { width: 16%; }

  .rubric-plain { white-space: normal; }

  /* Sticky nav and controls are meaningless on paper. */
  .report-toc, #report-toc-wrap, .evidence-controls, .view-evidence-link,
  .export-btn, #export-markdown-btn { display: none !important; }

  /* Deep dives are part of the analysis — always expanded in print. */
  .deep-dive > .deep-dive-body { display: block !important; }
  details.deep-dive[open] > summary, details.deep-dive > summary { display: none; }

  /* Long analytical cards MAY flow across pages -- forcing them whole was
     pushing each one onto its own sheet and roughly doubling page counts.
     Only small, self-contained components are held together. */
  .content-card, .null-finding, .counter-block, .evidence-card {
    box-shadow: none;
  }

  .evidence-card, .counter-block, .quote-block, .field-block, .null-finding,
  .dist-row, .transform-strip, .headline-card {
    break-inside: avoid;
  }

  /* A heading must never be the last thing on a page. */
  .report-section-title, .content-card-title, .field-label, .counter-label,
  .content-advisory-label {
    break-after: avoid;
  }

  .content-card, .brief-card, .method-grid, p, li {
    orphans: 3;
    widows: 3;
  }

  /* The Product Brief heading was being orphaned at the foot of page 1 with
     its body starting on page 2. Keep the heading with its opening text. */
  #brief { break-inside: avoid-page; }

  /* Reclaim vertical space that only exists to breathe on screen. */
  .section, .report-section { padding-block: 0.9rem !important; }
  .content-cards { gap: 0.75rem !important; }
  .content-card { padding: 0.85rem 1rem !important; margin-bottom: 0 !important; }
  .evidence-grid { gap: 0.6rem !important; }
  .report-lede { margin-bottom: 0.6rem !important; }

  /* Evidence bodies collapsed behind an advisory must still print in full. */
  .evidence-collapse > summary { display: none; }
  .evidence-collapse > .evidence-card-body { display: block !important; }

  body { background: #fff; }
}

/* Content advisory — shown only when the analysis sets contentAdvisory.
   Deliberately plain: a warning that restates the material defeats itself. */
.content-advisory {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper-soft);
  padding: 0.9rem 1.1rem;
  margin-bottom: var(--s3);
  max-width: var(--measure);
}
.content-advisory-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-faint);
}
.content-advisory p { font-size: 0.9rem; color: var(--ink-soft); }

.evidence-collapse > summary {
  cursor: pointer; font-size: 0.85rem; font-weight: 600;
  color: var(--accent-text); padding: 0.3rem 0;
}
.evidence-collapse[open] > summary { margin-bottom: 0.4rem; }