/* Debrief (phase 'debrief'): the transformation report — on screen and printed on A4.
   Every selector is prefixed .debrief- (docs/TECH_SPEC.md §10.4). Shared pieces (pillars, trends, heat cells,
   leaderboard rows, section heads) come from results.css. Laptop-first: 1280–1920 px, tablets ≥ 1024. */

.debrief-page { padding-top: 16px; padding-bottom: 48px; }
.debrief-mini { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-on-navy-text); }
.debrief-empty { margin: 4px 0; color: var(--muted); font-size: var(--fs-sm); }
.debrief-card { padding: 18px 20px; }
.debrief-sec { margin-top: 30px; scroll-margin-top: 132px; }
.debrief-sub-k { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-deep); margin: 22px 0 10px; }
.debrief-sub-k:first-child { margin-top: 0; }
.debrief-pair { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .debrief-pair { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }

/* ---------- cover ---------- */
.debrief-cover {
  display: grid; gap: 20px 26px; grid-template-columns: minmax(0, 1fr); position: relative; overflow: hidden;
  background: linear-gradient(125deg, var(--navy-2) 0%, var(--navy) 50%, #0E5E86 100%); color: var(--on-dark-2);
  border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow);
}
.debrief-cover::before {
  content: ""; position: absolute; left: -140px; bottom: -220px; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(7, 159, 195, .2), rgba(7, 159, 195, 0) 70%); pointer-events: none;
}
.debrief-cover::after {
  content: ""; position: absolute; right: -100px; top: -160px; width: 440px; height: 440px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 189, 157, .2), rgba(0, 189, 157, 0) 70%); pointer-events: none;
}
@media (min-width: 1024px) { .debrief-cover { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 260px; } }
.debrief-cover > * { position: relative; z-index: 1; min-width: 0; }
.debrief-kicker { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-on-navy-text); }
.debrief-title { color: #fff; font-size: var(--fs-3xl); margin: 6px 0 2px; letter-spacing: -.025em; }
.debrief-cover-sub { color: var(--on-dark-2); font-weight: var(--fw-strong); font-size: var(--fs-md); }
.debrief-cover-lede { margin: 12px 0 14px; color: #E6EEF4; font-size: var(--fs-md); line-height: 1.5; max-width: 54ch; }
.debrief-cover-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.debrief-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: 3px 11px; }
.debrief-chip svg { color: var(--teal-on-navy); }
.debrief-cover-actions { margin-top: 16px; }
.debrief-cover-phase {
  display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 14px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
}
.debrief-cover-phase p { margin: 0; font-size: var(--fs-sm); color: #E6EEF4; line-height: 1.45; }
.debrief-phase-big { display: flex; flex-direction: column; }
.debrief-phase-big span { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--teal-on-navy-text); letter-spacing: .04em; }
.debrief-phase-big b { color: #fff; font-size: var(--fs-xl); font-weight: var(--fw-heavy); letter-spacing: -.02em; line-height: 1.15; }
.debrief-phase-dots { display: flex; gap: 5px; }
.debrief-phase-dots i { flex: 1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .14); }
.debrief-phase-dots i.on { background: linear-gradient(90deg, var(--teal), var(--teal-on-navy)); }
.debrief-cover-saydo { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--fs-sm); color: #fff; font-weight: var(--fw-strong); }
.debrief-cover-saydo svg { color: var(--teal-on-navy); flex: none; }
.debrief-cover-saydo.is-missed svg { color: var(--salmon); }
.debrief-cover-saydo b { margin-left: auto; font-size: var(--fs-xs); color: var(--on-dark-2); white-space: nowrap; }
.debrief-cover-index { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.debrief-cover-index .results-rank { margin-top: -4px; }

/* ---------- the headline in euros ---------- */
.debrief-headline { margin-top: 18px; }
.debrief-head-card { display: grid; gap: 18px 28px; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 20px 22px; border-left: 5px solid var(--teal-ui); }
@media (min-width: 1100px) { .debrief-head-card { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.debrief-head-title { margin: 4px 0 8px; font-size: var(--fs-xl); }
.debrief-head-lead { margin: 0; font-size: var(--fs-base); line-height: 1.5; color: var(--ink); max-width: 62ch; }
.debrief-head-counter { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; background: var(--band); font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); max-width: 62ch; }
.debrief-head-counter svg { flex: none; margin-top: 2px; color: var(--navy); }
.debrief-head-figs { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.debrief-head-fig { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--band); min-width: 0; }
.debrief-head-fig .role-chip { align-self: flex-start; margin-bottom: 2px; }
.debrief-head-fig.is-main { background: var(--teal-soft); }
.debrief-head-k { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted-on-tint); line-height: 1.3; }
.debrief-head-fig b { font-size: var(--fs-xl); font-weight: var(--fw-heavy); color: var(--ink); letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.debrief-head-fig.is-main b { font-size: clamp(20px, 1.8vw, 28px); color: var(--teal-deep); }
.debrief-head-sub { font-size: var(--fs-xs); color: var(--muted-on-tint); line-height: 1.3; }
.debrief-head-roi { grid-column: 1 / -1; display: flex; gap: 4px 10px; flex-wrap: wrap; align-items: baseline; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--ink-2); padding: 2px 2px 0; }
.debrief-head-roi .muted { font-weight: var(--fw-regular); font-style: italic; }
.debrief-lesson-v { display: inline-block; margin: 0 0 6px; padding: 2px 9px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-deep); font-size: var(--fs-sm); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
/* Printed report only: the logo, the game and the event; the standings copy after the scorecard. */
.debrief-print-head, .debrief-print-only { display: none; }
.debrief-ph-logo { height: 26px; width: auto; }
.debrief-ph-wordmark { font-weight: var(--fw-bold); font-size: var(--fs-lg); letter-spacing: .06em; color: #fff; background: var(--navy); border-radius: 5px; padding: 1px 7px; }
.debrief-ph-game { font-weight: var(--fw-bold); color: var(--ink); font-size: var(--fs-sm); }
.debrief-ph-event { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- section nav ---------- */
.debrief-nav { position: sticky; top: 60px; z-index: 20; margin: 14px 0 0; }
.debrief-nav-inner {
  display: flex; gap: 2px; align-items: center; flex-wrap: wrap; padding: 6px 8px; border-radius: 14px;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
}
.debrief-nav-btn { background: none; border: 0; padding: 7px 11px; border-radius: 999px; font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.debrief-nav-btn:hover { background: var(--band); color: var(--ink); }

/* ---------- scorecard ---------- */
.debrief-score-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .debrief-score-grid { grid-template-columns: 330px minmax(0, 1fr) 300px; } }
.debrief-total { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.debrief-total-v { font-size: var(--fs-4xl); font-weight: var(--fw-heavy); letter-spacing: -.03em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.debrief-total-of { color: var(--muted); font-weight: var(--fw-bold); }
.debrief-kpis { padding: 6px 8px; }
.debrief-kpi-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.debrief-kpi-table th, .debrief-kpi-table td { padding: 7px 10px; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: middle; }
.debrief-kpi-table tr:last-child th, .debrief-kpi-table tr:last-child td { border-bottom: 0; }
.debrief-kpi-table thead th { font-size: var(--fs-xs); font-weight: var(--fw-strong); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.debrief-kpi-table tbody th { font-weight: var(--fw-bold); color: var(--ink); }
.debrief-kpi-table tbody th .role-dot { width: 8px; height: 8px; margin-right: 8px; vertical-align: 1px; }
.debrief-kpi-note { display: block; margin-left: 16px; font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--muted); }
.debrief-kpi-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.debrief-commit-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.debrief-commit-head h4 { margin: 0; }
.debrief-commit-sub { margin: 6px 0 12px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; }
.debrief-commit-row { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 4px 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--hairline); }
.debrief-commit-k { grid-column: 1 / -1; font-size: var(--fs-xs); font-weight: var(--fw-strong); color: var(--ink); }
.debrief-commit-bars { display: flex; flex-direction: column; gap: 5px; }
.debrief-commit-bars > div { display: grid; grid-template-columns: 70px minmax(0, 1fr) 58px; gap: 8px; align-items: center; font-size: var(--fs-xs); color: var(--muted); }
.debrief-commit-bars > div > i { display: block; height: 8px; border-radius: 99px; min-width: 3px; }
.debrief-commit-bars .is-promised { background: repeating-linear-gradient(135deg, var(--sky) 0 3px, #C9D3DA 3px 6px); }
.debrief-commit-bars .is-delivered { background: var(--teal-ink); }
.debrief-commit-row.is-short .is-delivered { background: var(--salmon-ui); }
.debrief-commit-bars b { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.debrief-commit-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--teal-ink); color: #fff; }
.debrief-commit-row.is-short .debrief-commit-mark { background: var(--salmon-ui); }
.debrief-saydo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: var(--teal-soft); font-size: var(--fs-sm); color: var(--teal-deep); font-weight: var(--fw-bold); }
.debrief-saydo b { font-size: var(--fs-lg); color: var(--teal-deep); font-variant-numeric: tabular-nums; }
.debrief-saydo.is-minus { background: var(--salmon-soft); color: var(--salmon-ink); }
.debrief-saydo.is-minus b { color: var(--salmon-ink); }

/* ---------- lessons ---------- */
.debrief-lessons { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .debrief-lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .debrief-lessons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.debrief-lesson { position: relative; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 16px 18px 14px; box-shadow: var(--shadow-xs); border-top: 4px solid var(--teal); }
.debrief-lesson-n { position: absolute; right: 16px; top: 12px; font-size: var(--fs-2xl); font-weight: var(--fw-heavy); color: var(--band-2); letter-spacing: -.03em; line-height: 1; }
.debrief-lesson h4 { margin: 0 34px 6px 0; font-size: var(--fs-base); }
.debrief-lesson p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }

.debrief-playbook { display: grid; gap: 10px 16px; grid-template-columns: minmax(0, 1fr); align-items: start; margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: var(--band); border: 1px solid var(--hairline); }
@media (min-width: 900px) { .debrief-playbook { grid-template-columns: 190px repeat(2, minmax(0, 1fr)); } }
.debrief-playbook-k { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); padding-top: 2px; }
.debrief-playbook-tip { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); }
.debrief-playbook-tip b { color: var(--ink); font-size: var(--fs-sm); }

/* ---------- journey ---------- */
.debrief-journey { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .debrief-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .debrief-journey { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); } }
.debrief-round { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 14px 14px 12px; box-shadow: var(--shadow-xs); min-width: 0; position: relative; }
.debrief-round-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.debrief-round-n { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.debrief-round-label { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink); letter-spacing: -.01em; }
.debrief-verdict { margin-left: auto; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-deep); }
.debrief-verdict.is-watchful { background: var(--amber-soft); color: var(--amber-ink); }
.debrief-verdict.is-concerned { background: var(--salmon-soft); color: var(--salmon-ink); }
.debrief-round-score { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: var(--fs-xs); }
.debrief-round-score b { font-size: var(--fs-xl); font-weight: var(--fw-heavy); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.debrief-round-k { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.debrief-round-event .debrief-round-k { color: var(--muted-on-tint); }
.debrief-round-event { padding: 8px 10px; border-radius: 10px; background: var(--band); }
.debrief-round-event.is-breaking { background: var(--salmon-soft); }
.debrief-round-event.is-breaking .debrief-round-k { color: var(--salmon-ink); }
.debrief-round-ev { font-weight: var(--fw-strong); color: var(--ink); font-size: var(--fs-sm); line-height: 1.3; }
.debrief-round-resp { font-size: var(--fs-xs); color: var(--ink-2); margin-top: 2px; }
.debrief-round-cost { font-weight: var(--fw-strong); color: var(--salmon-ink); white-space: nowrap; }
.debrief-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.debrief-chips li { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink); background: var(--band); border-radius: 7px; padding: 2px 7px; line-height: 1.4; }
.debrief-chips li small { font-weight: var(--fw-medium); color: var(--muted-on-tint); font-size: var(--fs-xs); }
.debrief-chips li.is-stream { background: var(--teal-soft); color: var(--teal-deep); }
.debrief-chips li.is-studio { background: var(--cyan-soft); color: var(--link-hover); }
.debrief-chips li.is-policy { background: #fff; border: 1px dashed var(--border); color: var(--ink-2); }
.debrief-chips li.is-none { background: none; color: var(--muted); font-weight: var(--fw-medium); padding-left: 0; }
/* Planned, but dropped at the close: struck through and labelled, so the journey shows what really happened. */
.debrief-chips li.is-dropped { background: #fff; box-shadow: inset 0 0 0 1px #F4DDA6; color: var(--muted); }
.debrief-chips li.is-dropped s { text-decoration-color: var(--amber-ink); text-decoration-thickness: 1.5px; }
.debrief-dropped-tag { font-style: normal; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--amber-ink); }
.debrief-lines-sm { margin: 0; padding-left: 16px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.4; }
.debrief-lines-sm li + li { margin-top: 2px; }
.debrief-round-block.is-bad .debrief-round-k { color: var(--salmon-ink); }
.debrief-round-block.is-warn .debrief-round-k { color: var(--amber-ink); }
.debrief-round-block.is-lever { padding: 8px 10px; border-radius: 10px; background: var(--band); }
.debrief-round-block.is-lever .debrief-round-k { color: var(--muted-on-tint); }

/* ---------- stack before → after ---------- */
.debrief-stack-list { display: flex; flex-direction: column; gap: 6px; }
.debrief-layer { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--band); border-left: 4px solid var(--navy); }
.debrief-layer.is-org { border-left-style: dashed; margin-top: 4px; }
.debrief-layer-name { font-weight: var(--fw-strong); color: var(--ink); font-size: var(--fs-sm); line-height: 1.25; padding-top: 2px; }
.debrief-layer-rows { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.debrief-prog { display: grid; grid-template-columns: 104px minmax(40px, 1fr) 104px 66px; gap: 8px; align-items: center; font-size: var(--fs-xs); }
.debrief-prog-name { font-weight: var(--fw-strong); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.debrief-prog-bar { position: relative; height: 8px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--hairline); }
.debrief-prog-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; }
.debrief-prog-bar > i.is-after, .debrief-legend i.is-after { background: var(--teal-ui); }
.debrief-prog-bar > i.is-before, .debrief-legend i.is-before { background: var(--navy); opacity: .35; }
.debrief-prog-vals { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.debrief-prog-vals b { color: var(--teal-deep); }
.debrief-prog.is-moved .debrief-prog-name { color: var(--ink); }
.debrief-prog:not(.is-moved) .debrief-prog-name, .debrief-prog:not(.is-moved) .debrief-prog-vals { color: var(--muted-on-tint); }
.debrief-prog-spend { text-align: right; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.debrief-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-2); }
.debrief-legend span { display: inline-flex; align-items: center; gap: 6px; }
.debrief-legend i { display: inline-block; width: 16px; height: 8px; border-radius: 99px; }

/* ---------- heatmap before → after ---------- */
.debrief-heat-pair { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1280px) { .debrief-heat-pair { grid-template-columns: minmax(0, 1fr); } }
.debrief-heat-col { min-width: 0; }
.debrief-heat-lbl { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 0 4px 3px; }
.debrief-heat-foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

/* ---------- designs ---------- */
.debrief-dtable { font-size: var(--fs-sm); }
.debrief-dtable tbody th, .debrief-lb tbody th { text-transform: none; letter-spacing: 0; background: none; font-size: var(--fs-sm); }
.debrief-dtable tbody tr.is-selected th { background: none; }
.debrief-dtable th, .debrief-dtable td { padding: 8px 10px; }
.debrief-dtable tbody tr.is-selected { background: var(--teal-soft); }
.debrief-dname { font-weight: var(--fw-strong); color: var(--ink); }
.debrief-dsub { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-medium); }
.debrief-dtable tr.is-selected .debrief-dsub, .debrief-dtable tr.is-selected .debrief-vs-ref { color: var(--muted-on-tint); }
.debrief-vs { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; font-variant-numeric: tabular-nums; }
.debrief-vs b { color: var(--ink); }
.debrief-vs.is-worse b { color: var(--salmon-ink); }
.debrief-vs-ref { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-strong); }
.debrief-vs-ref::before { content: "HSO "; font-weight: var(--fw-bold); letter-spacing: .03em; }
.debrief-design {
  /* The studio strip's colours (defined on the Studio overlay) for the strip rendered in the report. */
  --studio-agent: var(--teal-ui); --studio-agent-deep: var(--teal-ink); --studio-gate: var(--amber); --studio-gate-ink: var(--amber-ink);
  --studio-human: var(--sky); --studio-gone: #9AA7B1; --studio-hatch: repeating-linear-gradient(135deg, #E3E8EC 0 5px, #F3F5F7 5px 10px);
  margin-top: 16px; padding: 16px; border-radius: 14px; background: var(--band);
}
.debrief-design-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.debrief-design-head h4 { margin: 0; font-size: var(--fs-base); }
.debrief-strips { display: flex; flex-direction: column; gap: 8px; }
.debrief-strip { background: #fff; border-radius: 12px; padding: 10px 12px; border: 1px solid var(--hairline); }
.debrief-strip-lbl { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.debrief-feedback { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .debrief-feedback { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.debrief-feedback li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink); background: #fff; border-radius: 10px; padding: 8px 10px; border: 1px solid var(--hairline); }
.debrief-feedback li svg { flex: none; margin-top: 1px; color: var(--amber-ink); }
.debrief-feedback li.is-good svg { color: var(--teal-ink); }
.debrief-feedback li.is-bad svg { color: var(--salmon-ink); }
.debrief-flows { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
@media (min-width: 1024px) { .debrief-flows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.debrief-flows .flow-step { background-color: #fff; padding: 8px 10px; }
.debrief-flows .flow-text { font-size: var(--fs-xs); }
.debrief-flows .flow-who { font-size: var(--fs-xs); }
.debrief-flows .flow-time { font-size: var(--fs-xs); max-width: 76px; white-space: normal; text-align: right; line-height: 1.2; }
.debrief-flows :is(.flow-who, .flow-time) { color: var(--muted-on-tint); }
.debrief-flows .flow-legacy .flow-step { background: #FBF8F5; }
.debrief-flow-lbl { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.debrief-flow-lbl svg { color: var(--teal-ink); }
.debrief-gone { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--border); background: #fff; }
.debrief-gone svg { flex: none; margin-top: 2px; color: var(--salmon-ink); }

/* ---------- HSO maturity & service lines ---------- */
.debrief-maturity { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .debrief-maturity { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.debrief-phase { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--border); background: var(--band); }
.debrief-phase:not(.is-reached) :is(.debrief-phase-name, .debrief-phase-desc, .debrief-phase-k) { color: var(--muted-on-tint); }
.debrief-phase.is-reached { background: var(--teal-soft); border: 1px solid #A9E3D7; }
.debrief-phase.is-current { background: linear-gradient(135deg, var(--navy), #0B4A74); border-color: transparent; color: var(--on-dark-2); box-shadow: var(--shadow-sm); }
.debrief-phase-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: var(--fw-bold); background: #fff; color: var(--muted); border: 1.5px solid var(--border); }
.debrief-phase.is-reached .debrief-phase-n { background: var(--teal-ink); color: #fff; border-color: var(--teal-ink); }
.debrief-phase-k { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.debrief-phase.is-current .debrief-phase-k { color: var(--teal-on-navy-text); }
.debrief-phase-name { font-weight: var(--fw-bold); color: var(--ink); font-size: var(--fs-md); margin-top: 1px; }
.debrief-phase.is-current .debrief-phase-name { color: #fff; }
.debrief-phase-desc { font-size: var(--fs-sm); line-height: 1.4; margin-top: 3px; color: var(--ink-2); }
.debrief-phase.is-current .debrief-phase-desc { color: #E6EEF4; }
.debrief-lines { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .debrief-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.debrief-line { border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 14px; background: #fff; }
.debrief-line.is-empty { background: var(--band); border-style: dashed; }
.debrief-line.is-empty :is(.debrief-line-name, .debrief-line-desc, .debrief-line-spend b, .debrief-line-spend span) { color: var(--muted-on-tint); }
.debrief-line-head { display: flex; gap: 12px; align-items: flex-start; }
.debrief-line-name { font-weight: var(--fw-bold); color: var(--ink); font-size: var(--fs-md); }
.debrief-line-desc { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; margin-top: 2px; }
.debrief-line-spend { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.debrief-line-spend b { font-size: var(--fs-lg); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.debrief-line-spend span { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-bold); }
.debrief-line-bar { display: block; height: 6px; border-radius: 99px; background: var(--band-2); margin: 10px 0 8px; overflow: hidden; }
.debrief-line-bar > i { display: block; height: 100%; background: var(--teal-ink); border-radius: 99px; }
.debrief-line-progs { list-style: none; margin: 0; padding: 0; }
.debrief-line-progs li { display: grid; grid-template-columns: minmax(0, 1fr) auto 58px; gap: 10px; align-items: baseline; font-size: var(--fs-xs); padding: 5px 0; border-top: 1px solid var(--hairline); color: var(--ink); }
.debrief-ft { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.debrief-line-amt { text-align: right; font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.debrief-vhn { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .debrief-vhn { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.debrief-vhn-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--hairline); background: var(--band); }
.debrief-vhn-card.is-on { background: #fff; border: 1.5px solid var(--teal-ink); box-shadow: 0 0 0 4px var(--teal-soft); }
.debrief-vhn-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.debrief-vhn-name { font-weight: var(--fw-bold); color: var(--ink); font-size: var(--fs-base); }
.debrief-vhn-tag { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-deep); }
.debrief-vhn-desc { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); }
.debrief-vhn-choice { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 10px; background: var(--band); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.debrief-vhn-card:not(.is-on) .debrief-vhn-choice { background: #fff; }
.debrief-vhn-effect { margin: 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--muted-on-tint); }
.debrief-vhn-card.is-on .debrief-vhn-effect { color: var(--teal-deep); font-weight: var(--fw-strong); }

/* ---------- back to reality ---------- */
.debrief-reality-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .debrief-reality-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.debrief-profile, .debrief-inventory { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 8px 0 14px; }
.debrief-profile > div, .debrief-inventory > div { padding: 8px 10px; border-radius: 10px; background: var(--band); min-width: 0; }
.debrief-profile dt, .debrief-inventory dt { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted-on-tint); line-height: 1.25; }
.debrief-profile dd, .debrief-inventory dd { margin: 2px 0 0; font-weight: var(--fw-bold); color: var(--ink); font-variant-numeric: tabular-nums; font-size: var(--fs-md); line-height: 1.25; }
.debrief-profile dd { font-size: var(--fs-lg); }
.debrief-inventory dd { font-size: var(--fs-sm); }
.debrief-needed-k { margin-top: 4px; color: var(--muted); }
.debrief-needed { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.debrief-needed-line { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.debrief-needed-sl { font-size: var(--fs-xs); font-weight: var(--fw-strong); color: var(--ink); }
.debrief-needed-list, .debrief-focus-list { display: flex; flex-wrap: wrap; gap: 4px; }
.debrief-focus-chip { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--teal-deep); background: var(--teal-soft); border-radius: 7px; padding: 2px 8px; }
.debrief-90 { background: linear-gradient(160deg, #F2FAF8, #EEF6FA); border: 1px solid #CDE9E2; border-radius: 14px; padding: 14px 16px; }
.debrief-90-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.debrief-90-head .results-mini { color: var(--teal-deep); }
.debrief-90-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.debrief-90-steps li { display: flex; gap: 12px; align-items: flex-start; }
.debrief-90-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-ink); color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.debrief-90-title { font-weight: var(--fw-bold); color: var(--ink); font-size: var(--fs-sm); }
.debrief-90-desc { font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); margin-top: 2px; }
.debrief-focus { margin-top: 12px; padding-top: 10px; border-top: 1px solid #CDE9E2; display: flex; flex-direction: column; gap: 6px; }
.debrief-questions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.debrief-questions li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-md); line-height: 1.45; color: var(--ink); font-weight: var(--fw-medium); }
.debrief-q-n { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--navy); color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.debrief-proof { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.debrief-proof-item { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: var(--band); }
.debrief-proof-item b { font-size: var(--fs-xl); color: var(--teal-deep); letter-spacing: -.02em; line-height: 1.1; }
.debrief-proof-item span { font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-2); }
.debrief-proof-item small { font-size: var(--fs-xs); color: var(--muted-on-tint); line-height: 1.3; }
.debrief-cta { display: flex; gap: 16px; align-items: flex-start; margin-top: 18px; padding: 18px 20px; border-radius: 14px; background: linear-gradient(120deg, var(--navy), #0B4A74); color: var(--on-dark-2); }
.debrief-cta-mark { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(0, 189, 157, .18); color: var(--teal-on-navy); }
.debrief-cta-k { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-on-navy-text); }
.debrief-cta h3 { color: #fff; margin: 2px 0 4px; font-size: var(--fs-lg); }
.debrief-cta p { margin: 0; color: #E6EEF4; font-size: var(--fs-sm); line-height: 1.5; max-width: 90ch; }
.debrief-cta.has-contact { align-items: center; }
.debrief-contact { flex: none; white-space: nowrap; }
.debrief-cta .debrief-contact { min-height: 46px; padding: 0 22px; font-size: var(--fs-md); }
.debrief-cta .debrief-contact-print { display: none; }

/* ---------- standings & footer ---------- */
.debrief-lb { font-size: var(--fs-sm); }
.debrief-lb tr.is-me { background: var(--teal-soft); }
.debrief-lb tbody th { font-weight: var(--fw-strong); color: var(--ink); white-space: nowrap; }
.debrief-lb .results-lb-sw { display: inline-block; vertical-align: 0; }
.debrief-lb-rank { font-weight: var(--fw-bold); color: var(--muted); width: 36px; }
.debrief-foot { margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--hairline); font-size: var(--fs-xs); color: var(--muted); text-align: center; }

/* ---------- print: A4 portrait ----------
   About six pages: no forced page breaks — cards and headings avoid breaking inside or after themselves instead.
   Text stays at 7 pt or more: trend charts print two to a row, trend tables drop the Start column and never clip. */
@page debrief { size: A4 portrait; margin: 11mm 11mm 13mm; }
@media print {
  .debrief-printing body { background: #fff; }
  .debrief-printing .broadcast, .debrief-printing .banner, .debrief-printing .player-readybar { display: none !important; }
  .debrief-printing #app { display: block; min-height: 0; }
  .debrief-page { page: debrief; padding: 0; max-width: none; font-size: 12px; }
  .debrief-page, .debrief-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .debrief-page .no-print, .debrief-nav, .debrief-flows { display: none !important; }
  .debrief-print-head { display: flex; align-items: center; gap: 10px; padding: 0 0 6px; margin-bottom: 8px; border-bottom: 2px solid var(--navy); }
  .debrief-print-only { display: block; }
  .debrief-cta .debrief-contact-print { display: block; margin-top: 8px; font-weight: 800; color: #fff; }
  .debrief-page .card, .debrief-page .table-wrap { box-shadow: none; }
  .debrief-page .reveal, .debrief-page .reveal-2, .debrief-page .reveal-3 { animation: none; }
  .debrief-page .results-sec-head { break-after: avoid; }
  .debrief-page .results-sec-sub { font-size: 11.5px; }
  .debrief-sec { margin-top: 12px; }

  /* cover and headline */
  .debrief-cover { box-shadow: none; padding: 14px 16px; gap: 12px 18px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 150px; break-inside: avoid; }
  .debrief-title { font-size: 26px; }
  .debrief-cover-lede, .debrief-cover-phase p { display: none; }
  .debrief-cover-meta { margin-top: 8px; }
  .debrief-cover .results-gauge { max-width: 150px; }
  .debrief-headline { margin-top: 10px; }
  .debrief-head-card { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 14px; break-inside: avoid; }
  .debrief-head-lead, .debrief-head-counter { max-width: none; }
  .debrief-head-title { font-size: 18px; margin: 2px 0 4px; }
  .debrief-head-lead { font-size: 13px; }
  .debrief-head-counter { font-size: 12px; padding: 6px 10px; }
  .debrief-head-fig { padding: 7px 9px; }
  .debrief-head-fig b { font-size: 17px; }
  .debrief-head-fig.is-main b { font-size: 20px; }

  /* scorecard and standings: page one */
  /* Pillars and the commitment side by side, the KPI table below: the grid can break between its two rows. */
  .debrief-score-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .debrief-score-grid > .debrief-pillars { grid-column: 1; grid-row: 1; }
  .debrief-score-grid > .debrief-commit { grid-column: 2; grid-row: 1; }
  .debrief-score-grid > .debrief-kpis { grid-column: 1 / -1; grid-row: 2; }
  .debrief-kpi-table th, .debrief-kpi-table td { padding: 4px 8px; }
  .debrief-card { padding: 12px 14px; }
  .debrief-total-v { font-size: 34px; }
  .debrief-page .results-pillars { gap: 6px; }
  .debrief-page .results-foot-note { margin-top: 6px; }
  .debrief-pillars .results-foot-note { display: none; }
  .debrief-kpi-note { font-size: 10px; line-height: 1.25; }
  .debrief-lb { font-size: 11px; }
  .debrief-lb th, .debrief-lb td { padding: 4px 8px; }

  /* lessons and trends */
  .debrief-lessons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .debrief-lesson { padding: 10px 12px; }
  .debrief-lesson p { font-size: 11.5px; }
  /* Three charts to a row; the SVG text is sized in the charts' own units so it prints at about 7 pt. */
  .debrief-page .results-trends { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .debrief-page .results-trend-chart svg text { font-size: 16px; }
  .debrief-page .results-trend { padding: 10px 10px 8px; }
  .debrief-page .results-trend-table { table-layout: fixed; font-size: 7.5pt; }
  .debrief-page .results-trend-table th, .debrief-page .results-trend-table td { padding: 2px 2px; white-space: nowrap; overflow: visible; text-overflow: clip; }
  .debrief-page .results-trend-table thead th:first-child { width: 20%; }
  .debrief-page .results-trend-table thead th { font-size: 7pt; letter-spacing: 0; }
  /* The Start column stays in the grid (the baseline row spans it) but takes no width on paper. */
  .debrief-page .results-trend-table tr > :nth-child(2):not([colspan]) { width: 0; padding: 0; font-size: 0; overflow: hidden; }
  .debrief-page .results-heat thead th { font-size: 7pt; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* journey, stack, designs, roadmap, reality */
  .debrief-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .debrief-round { padding: 10px 11px; gap: 7px; }
  .debrief-round-label { font-size: 14px; }
  .debrief-round-score b { font-size: 17px; }
  .debrief-chips li { font-size: 10px; padding: 1px 6px; }
  .debrief-chips li small { font-size: 9.5px; }
  .debrief-lines-sm { font-size: 10.5px; }
  .debrief-round-ev { font-size: 12px; }
  .debrief-round-resp { font-size: 10.5px; }
  .debrief-pair { display: block; }
  .debrief-pair > * + * { margin-top: 12px; }
  .debrief-stack { padding: 12px 14px; }
  .debrief-stack-list { gap: 4px; }
  .debrief-layer { padding: 5px 8px; }
  .debrief-layer-rows { gap: 3px; }
  .debrief-heat { padding: 12px 14px; }
  .debrief-heat-pair { display: flex; align-items: flex-start; gap: 12px; }
  .debrief-heat-pair > .debrief-heat-col { flex: 1 1 0; min-width: 0; }
  .debrief-page .results-hcell { height: 18px; font-size: 9.5px; }
  .debrief-dtable { font-size: 10.5px; }
  .debrief-dtable th, .debrief-dtable td { padding: 5px 6px; }
  .debrief-dtable thead th { white-space: normal; font-size: 9.5px; }
  .debrief-dtable tbody th { font-size: 11px; }
  .debrief-dtable td.num { white-space: nowrap; }
  .debrief-vs b, .debrief-vs .debrief-vs-ref { display: block; white-space: nowrap; }
  .debrief-dtable .pill { font-size: 9.5px; padding: 1px 7px; white-space: nowrap; box-shadow: inset 0 0 0 1px currentColor; }
  .debrief-dtable tbody tr.is-selected { background: none; }
  .debrief-strips { display: block; }
  /* A strip prints as one unbreakable box; its labels without the screen's line clamps. */
  .debrief-strip { display: inline-block; width: 100%; vertical-align: top; }
  .debrief-strip :is(.studio-gate-lbl, .studio-gate-lbl > *, .studio-node-lbl) { display: block; -webkit-line-clamp: unset; overflow: visible; min-height: 0; }
  .debrief-strip + .debrief-strip { margin-top: 8px; }
  .debrief-strip .studio-track { align-items: flex-start; }
  .debrief-strip .studio-seg-body::after { animation: none; display: none; }
  .debrief-design { display: block; }
  .debrief-maturity, .debrief-vhn { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .debrief-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .debrief-reality-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .debrief-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .debrief-foot { margin-top: 12px; }
  .debrief-page .table-wrap { overflow: visible; }
  .debrief-page .card { break-inside: auto; }
  .debrief-score-grid, .debrief-lessons, .debrief-page .results-trends, .debrief-journey, .debrief-maturity, .debrief-lines, .debrief-vhn, .debrief-reality-grid,
  .debrief-proof, .debrief-feedback { align-items: start; }
  /* Small units never split; the long ones (journey cards, the stack, designs, the roadmap) flow across pages. */
  .debrief-page :is(.debrief-playbook, .debrief-pillars, .debrief-commit, .debrief-lesson, .debrief-round-block, .debrief-round-event, .debrief-line,
  .debrief-vhn-card, .debrief-phase, .results-trend, .debrief-90-steps li, .debrief-cta, .debrief-proof-item, .debrief-lb, .debrief-dtable tr,
  .debrief-kpi-table tr, .debrief-layer, .debrief-heat-col, .debrief-strip, .debrief-feedback li, .debrief-questions li) { break-inside: avoid; }
  .debrief-page :is(.debrief-sub-k, h3, h4) { break-after: avoid; }
}