/* ============================================================
   DISTILL ▲ GRAPH — Stats / data-story page
   Reuses tokens + fonts from styles.css. Editorial report layout.
   ============================================================ */

body.report-page { overflow: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }

/* sticky glass report nav */
.report-nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--s-md);
  padding: 12px max(var(--s-md), env(safe-area-inset-left)) 12px max(var(--s-md), env(safe-area-inset-right));
  background: oklch(0.05 0.012 256 / 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border-bottom: 1px solid var(--hairline);
}
.report-nav .brand { gap: 9px; }
.report-toc { display: none; gap: 2px; margin: 0 auto; }
.report-toc a {
  font-family: var(--body); font-weight: 500; font-size: 13px; color: var(--text-3);
  text-decoration: none; padding: 7px 12px; border-radius: 999px;
  transition: color 0.4s var(--island), background 0.4s var(--island);
}
.report-toc a:hover, .report-toc a.active { color: var(--text-1); background: oklch(0.99 0.01 250 / 0.06); }
.back-pill {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-weight: 500; font-size: 13px; color: var(--ink); text-decoration: none;
  padding: 9px 9px 9px 16px; border-radius: 999px;
  background: oklch(0.99 0.01 250 / 0.05); border: 1px solid var(--hairline); box-shadow: var(--inset-hi);
  transition: background 0.45s var(--island);
}
.back-pill:hover { background: oklch(0.99 0.01 250 / 0.1); }
.back-pill .ic { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: oklch(0.99 0.01 250 / 0.1); transition: transform 0.5s var(--island), background 0.45s var(--island); }
.back-pill:hover .ic { transform: translate(2px,-2px) scale(1.06); background: var(--ink); color: oklch(0.04 0.01 256); }

/* report column */
.report { max-width: 880px; margin: 0 auto; padding: 0 var(--s-md) 120px; }
.report-hero { padding: clamp(48px, 9vw, 96px) 0 clamp(32px, 5vw, 56px); }
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2);
  padding: 6px 13px; border-radius: 999px; background: oklch(0.99 0.01 250 / 0.05); border: 1px solid var(--hairline);
}
.eyebrow-pill .dot { width: 7px; height: 7px; border-radius: 999px; background: oklch(0.9 0.06 72); }
.report-hero h1 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(42px, 9vw, 76px); line-height: 0.96; letter-spacing: 0.01em; margin: 20px 0 18px;
  text-wrap: balance;
}
.lede { font-family: var(--body); font-size: clamp(16px, 2.4vw, 19px); line-height: 1.6; color: var(--text-1); max-width: 60ch; text-wrap: pretty; }
.lede b { color: var(--ink); font-weight: 600; }

/* stat strip */
.stat-strip {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: 40px;
  background: var(--hairline-soft); border: 1px solid var(--hair-soft); border-radius: 16px; overflow: hidden;
}
.stat-cell { background: oklch(0.07 0.012 256); padding: 18px 16px; }
.stat-cell .v { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 5vw, 40px); line-height: 1; font-variant-numeric: tabular-nums; }
.stat-cell .l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-3); margin-top: 8px; text-transform: uppercase; }

/* sections */
.report section { padding: clamp(44px, 7vw, 80px) 0; border-top: 1px solid var(--hair-soft); }
.report section h2 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 4.6vw, 40px); line-height: 1.04; letter-spacing: 0.01em; margin: 16px 0 14px; text-wrap: balance;
}
.report section .prose { font-family: var(--body); font-size: 16px; line-height: 1.65; color: var(--text-2); max-width: 62ch; text-wrap: pretty; }
.report section .prose b { color: var(--text-1); font-weight: 600; }
.section-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }

/* bar charts */
.bars { margin-top: 32px; display: flex; flex-direction: column; }
.bar-row { padding: 11px 0; }
.bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.bar-label { font-family: var(--body); font-weight: 500; font-size: 14.5px; color: var(--text-1); display: inline-flex; align-items: center; gap: 9px; }
.bar-label .sw { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.bar-label .rank { font-family: var(--mono); font-size: 12px; color: var(--text-3); width: 22px; }
.bar-meta { font-family: var(--mono); font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.bar-value { font-family: var(--mono); font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-track { height: 8px; border-radius: 999px; background: oklch(0.99 0.01 250 / 0.05); overflow: hidden; box-shadow: var(--inset-hi); }
.bar-fill { height: 100%; width: 0; border-radius: 999px; transition: width 0.9s var(--island); }

/* segmented relationship bar */
.segbar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; margin-top: 30px; box-shadow: var(--inset-hi); }
.segbar .seg { height: 100%; transition: flex-grow 0.9s var(--island); }
.seg-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 22px; margin-top: 26px; }
.seg-item { display: flex; gap: 11px; }
.seg-item .sw { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; margin-top: 3px; }
.seg-item .t { font-family: var(--body); font-weight: 500; font-size: 14px; color: var(--text-1); }
.seg-item .t .n { font-family: var(--mono); font-size: 12px; color: var(--text-3); margin-left: 8px; font-variant-numeric: tabular-nums; }
.seg-item .d { font-family: var(--body); font-size: 13px; color: var(--text-3); line-height: 1.45; margin-top: 3px; }

/* convergent pairs */
.pairs { margin-top: 30px; display: flex; flex-direction: column; gap: 1px; background: var(--hairline-soft); border: 1px solid var(--hair-soft); border-radius: 16px; overflow: hidden; }
.pair { background: oklch(0.07 0.012 256); padding: 16px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pair .a, .pair .b { font-family: var(--body); font-weight: 500; font-size: 14.5px; color: var(--text-1); }
.pair .vs { font-family: var(--mono); font-size: 12px; color: var(--text-3); padding: 3px 9px; border: 1px solid var(--hairline); border-radius: 999px; }
.pair .why { flex-basis: 100%; font-family: var(--body); font-size: 13px; color: var(--text-3); line-height: 1.45; }

/* decision guide */
.guide { margin-top: 32px; display: grid; gap: 14px; }
.guide-item { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 20px; border-radius: 18px; background: oklch(0.99 0.01 250 / 0.03); border: 1px solid var(--hairline); box-shadow: var(--inset-hi); }
.guide-item .num { font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--text-2); line-height: 1; font-variant-numeric: tabular-nums; }
.guide-item h3 { font-family: var(--body); font-weight: 600; font-size: 16px; color: var(--text-1); margin-bottom: 6px; }
.guide-item p { font-family: var(--body); font-size: 14px; color: var(--text-3); line-height: 1.55; }
.guide-item a { color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; }

.report-foot { border-top: 1px solid var(--hair-soft); margin-top: 40px; padding-top: 28px; font-family: var(--mono); font-size: 12.5px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; }
.report-foot a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(18px); filter: blur(5px); transition: opacity 0.8s var(--island), transform 0.8s var(--island), filter 0.8s var(--island); }
.reveal.in { opacity: 1; transform: none; filter: none; }

@media (min-width: 1000px) { .report-toc { display: flex; } }
@media (max-width: 560px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; filter: none; } body.report-page { scroll-behavior: auto; } }