/* Piece styles on top of viz-design-system 2.0.4 (tokens.css, kit/kit.css). Every colour comes from a token. */
main h2 {font-size: var(--viz-type-section); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .75rem;}
main h3 {font-size: 1.2rem; font-weight: 600; line-height: 1.3; margin: 1.25rem 0 .4rem;}
p, li, dd {max-width: 72ch;}
.block {margin-top: 3rem;}
.lede {color: var(--viz-muted); max-width: 66ch;}
.kpi-unit {font-family: var(--viz-font-body); font-size: .5em; letter-spacing: 0; font-weight: 400; color: var(--viz-muted);}
html {scroll-padding-top: 1rem;}

/* In-page section links under the data note. */
.page-nav {display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: .25rem 0 0; font-size: var(--viz-type-small);}
.page-nav a {display: inline-flex; align-items: center; min-height: 44px;}

/* Causal tree: wide from 760 px, tall on phones. Inline SVG so it follows the theme. */
.tree-figure {max-width: 1040px;}
.tree-figure .chart-plot svg.tree {max-width: 100%;}
svg .tree-box {fill: var(--viz-background); stroke: var(--viz-rule-strong); stroke-width: 1.5;}
svg .tree-arrow {fill: none; stroke: var(--viz-foreground); stroke-width: 2.5; stroke-dasharray: 7 5;}
svg .tree-head {fill: var(--viz-foreground);}
svg .tree-title {font-family: var(--viz-font-heading); font-weight: 600; fill: var(--viz-foreground); text-anchor: middle;}
svg .tree-sub {font-family: var(--viz-font-body); fill: var(--viz-muted); text-anchor: middle;}
svg .tree-title.tree-big {font-size: 24px;}
svg .tree-sub.tree-big {font-size: 16px;}
svg .tree-title.tree-small {font-size: 19px;}
svg .tree-sub.tree-small {font-size: 14px;}
svg .tree-note {font-family: var(--viz-font-body); font-size: 15px; fill: var(--viz-muted); text-anchor: middle;}
figure.chart .chart-plot svg.tree-tall {display: none;}
@media (max-width: 759px) {figure.chart .chart-plot svg.tree-wide {display: none;} figure.chart .chart-plot svg.tree-tall {display: block; max-width: 420px;}}
table.kpis {table-layout: fixed;}
@media (max-width: 759px) {table.kpis tbody td {display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start;}}
table.data th.num-head {text-align: right;}

/* Metric definitions. */
.definitions {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 2rem; margin-top: 1.5rem;}
.definitions article {border-top: 2px solid var(--viz-rule-strong); padding-top: .25rem;}
.definitions article:last-child {grid-column: 1 / -1;}
.definitions h3 {margin-top: .5rem;}

details.kit-disclosure {margin-top: 1.25rem; border-top: 1px solid var(--viz-rule); border-bottom: 1px solid var(--viz-rule);}
details.kit-disclosure > summary {font-weight: 600;}
details.kit-disclosure[open] {padding-bottom: .5rem;}

/* Experiments. */
.experiments {display: grid; gap: 1.25rem; margin-top: 1.5rem;}
.experiment {background: var(--viz-surface); border: 1px solid var(--viz-rule); border-top: 2px solid var(--viz-rule-strong); border-radius: 6px; padding: 1rem 1.25rem 1.25rem;}
.experiment .tag {margin: 0; font-size: var(--viz-type-label);}
.experiment h3 {margin-top: .6rem;}
.experiment dl {display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: .6rem 1.5rem; margin: .75rem 0 0;}
.experiment dt {font-weight: 600; font-size: var(--viz-type-small); color: var(--viz-muted);}
.experiment dd {margin: 0;}

/* Sample-size chart: HTML bars so labels keep their size on a phone. */
#size-chart {max-width: 860px; margin-top: 1.5rem;}
ol.bars {list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .55rem;}
.bar-row {display: grid; grid-template-columns: 13.5rem minmax(0, 1fr) 4.5rem; align-items: center; gap: .75rem;}
.bar-label {font-size: var(--viz-type-small);}
.bar-note {color: var(--viz-muted);}
.bar-track {display: block; height: 22px; background: var(--viz-track); border-radius: 2px;}
.bar {display: block; height: 100%; background: var(--viz-bar); border-radius: 2px;}
.is-base .bar {background: var(--viz-highlight);}
.is-base .bar-label {font-weight: 600;}
.bar-value {text-align: right; font-weight: 500;}
@media (max-width: 759px) {
  .bar-row {grid-template-columns: minmax(0, 1fr) 4rem; gap: .2rem .6rem;}
  .bar-label {grid-column: 1 / -1;}
}
#power h3 {margin-top: 2rem;}
#decision-table {max-width: 760px;}
table.data th, table.data td {vertical-align: top;}

.month-list {padding-left: 1.4rem;}
.month-list li {margin: .9rem 0;}
.method-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 1rem 0;}
.method-grid article {background: var(--viz-surface); border: 1px solid var(--viz-rule); border-radius: 6px; padding: 1rem 1.25rem;}
.method-grid h3 {margin-top: 0;}
.method-grid a {display: inline-flex; align-items: center; min-height: 44px;}
section.method details p {margin-top: .25rem;}
pre {padding: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--viz-surface); border: 1px solid var(--viz-rule); border-radius: 6px; font-size: .85rem;}
code {font-family: var(--viz-font-figures); font-size: .9em;}
.snapshot-hero .back {margin: 0;}
.snapshot-hero .back a {display: inline-flex; align-items: center; min-height: 44px;}
.snapshot {margin-top: .5rem;}

@media (max-width: 759px) {
  .definitions, .method-grid {grid-template-columns: 1fr;}
  .definitions article:last-child {grid-column: auto;}
  .experiment {padding: .9rem 1rem 1rem;}
  .experiment dl {grid-template-columns: 1fr; gap: .2rem;}
  .experiment dd {margin-bottom: .6rem;}
}

@media print {
  @page {size: A4; margin: 15mm;}
  body {font-size: 10pt; line-height: 1.45;}
  header.site nav, .kit-skip, .page-nav {display: none;}
  a {color: inherit;}
  details > summary {list-style: none;}
  details::details-content {content-visibility: visible !important; height: auto !important;}
  h2, h3, summary, dt, caption {break-after: avoid;}
  p, li {orphans: 3; widows: 3;}
  .experiment, figure.chart, tr {break-inside: avoid;}
  .table-scroll {overflow: visible;}
  pre {white-space: pre-wrap; overflow: visible;}
}

/* Below-the-fold sections skip layout until near the viewport, so the late font swap stays cheap (first usable control under 2 s). */
@media screen {main > section.block, main > section.method {content-visibility: auto; contain-intrinsic-size: auto 1200px;}}