/* plan-report.css
   The $49 Retirement Plan, Field Manual design (PREMIUM-V2-PLAN.md, "Look").
   Navy ink, brass accent, Source Serif 4 for headings and the numbers that
   matter, IBM Plex Sans for body and tables, IBM Plex Sans Condensed for
   labels, section tabs on the page edge.

   Every sheet is a Letter page drawn at 96 px to the inch (816 by 1056) and
   is always the light, printed look, in both colour schemes: it is a preview
   of paper. Only the page around the sheets (the toolbar, the notice, the
   backdrop) follows dark mode. js/plan-report.js scales the sheets to the
   window on screen. Print removes the scaling and puts one sheet on each
   page, which scripts/test_plan_report.mjs checks in Chromium. */

:root {
    --rp-ink: #16233b;
    --rp-muted: #5c6878;
    --rp-rule: #d9dde3;
    --rp-brass: #a7843c;
    --rp-brass-text: #8a6a2c;
    --rp-navy: #1f3a5f;
    --rp-panel: #f2f4f7;
    --rp-good: #2f6b4f;
    --rp-bad: #9b3b2a;
    --rp-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --rp-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --rp-cond: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif;
    /* the page around the sheets */
    --rp-page: #e7eaef;
    --rp-card: #ffffff;
    --rp-card-ink: #16233b;
    --rp-card-muted: #4b5563;
    --rp-card-rule: #d1d5db;
}
.dark {
    --rp-page: #0d1420;
    --rp-card: #151e2e;
    --rp-card-ink: #e6e9ef;
    --rp-card-muted: #b4bccb;
    --rp-card-rule: #28344a;
}

html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body.rp-page {
    margin: 0;
    background: var(--rp-page);
    color: var(--rp-card-ink);
    font-family: var(--rp-sans);
    font-variant-numeric: tabular-nums;
}

/* ---------- toolbar, notices ---------- */
.rp-toolbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    padding: 10px 16px;
    background: #16233b; color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.rp-toolbar-title { font: 600 15px/1.2 var(--rp-serif); color: #ffffff; }
.rp-toolbar-grow { flex: 1 1 auto; }
.rp-toolbar a { color: #e8d6a8; font: 500 14px var(--rp-sans); text-decoration: none; }
.rp-toolbar a:hover, .rp-toolbar a:focus-visible { text-decoration: underline; }
.rp-btn {
    background: #d6b56d; color: #16233b; border: 0; border-radius: 6px;
    padding: 9px 16px; font: 600 14px var(--rp-sans); cursor: pointer;
}
.rp-btn:hover { background: #e4c682; }
.rp-btn:disabled { background: #8d97a8; color: #16233b; cursor: progress; }
.rp-toggle {
    background: transparent; color: #ffffff; border: 1px solid #4f6d94; border-radius: 6px;
    padding: 7px 9px; cursor: pointer; line-height: 0;
}
.rp-toggle svg { width: 18px; height: 18px; }
.rp-status { font-size: 13px; color: #c3cddc; }

.rp-banner {
    background: #f6ecd9; color: #5a3d0b; text-align: center;
    padding: 9px 16px; font-size: 14px; line-height: 1.45;
}
.rp-banner a { color: #5a3d0b; font-weight: 600; }
.dark .rp-banner { background: #3b2c10; color: #f6e7c4; }
.dark .rp-banner a { color: #f6e7c4; }

.rp-notice {
    max-width: 560px; margin: 12vh auto 0; padding: 28px 24px;
    background: var(--rp-card); color: var(--rp-card-ink);
    border: 1px solid var(--rp-card-rule); border-radius: 10px;
}
.rp-notice h1 { font: 600 26px/1.2 var(--rp-serif); margin: 0 0 10px; color: var(--rp-card-ink); }
.rp-notice p { margin: 0 0 14px; line-height: 1.6; color: var(--rp-card-muted); }
.rp-notice a.rp-btn { display: inline-block; text-decoration: none; }
.rp-notice .rp-alt { font-size: 14px; }
.rp-notice .rp-alt a { color: var(--rp-card-ink); font-weight: 600; }

/* ---------- the stack of sheets ---------- */
.rp-report {
    display: flex; flex-direction: column; align-items: center;
    padding: 24px 16px 60px;
    box-sizing: border-box; width: 100%; max-width: 848px; margin: 0 auto;
}
.rp-frame {
    position: relative; flex: none;
    width: 816px; margin: 0 0 24px;
    box-shadow: 0 8px 28px rgba(8, 14, 26, .28);
    background: #ffffff;
}
.rp-frame > .rp-sheet, .rp-frame > .sheet { transform-origin: 0 0; }

/* ---------- a sheet ---------- */
.rp-sheet {
    position: relative; overflow: hidden; box-sizing: border-box;
    width: 816px; height: 1056px;
    background: #ffffff; color: var(--rp-ink);
    font: 400 12.5px/1.5 var(--rp-sans);
    font-variant-numeric: tabular-nums; text-align: left;
}
.rp-sheet *, .rp-sheet *::before, .rp-sheet *::after { box-sizing: border-box; }
/* A long word or a pasted address wraps instead of running out of its box. */
.rp-sheet { overflow-wrap: anywhere; }
.rp-sheet .fig, .rp-sheet .pill, .rp-sheet .lab, .rp-phone { overflow-wrap: normal; }
.rp-sheet p { margin: 0 0 9px; }
.rp-run {
    position: absolute; left: 60px; right: 64px; top: 50px;
    display: flex; justify-content: space-between; align-items: baseline;
    font: 600 9px/1 var(--rp-cond); letter-spacing: .17em; text-transform: uppercase;
    color: var(--rp-muted); border-bottom: 1px solid var(--rp-rule); padding-bottom: 10px;
}
.rp-run b { color: var(--rp-ink); font-weight: 600; }
.rp-tab {
    position: absolute; right: 0; width: 30px; height: 96px;
    background: var(--rp-ink); display: flex; align-items: center; justify-content: center;
}
.rp-tab span { font: 600 17px var(--rp-serif); color: #d8b86c; }
.rp-body { position: absolute; left: 60px; right: 64px; top: 98px; bottom: 64px; overflow: hidden; }
.rp-foot {
    position: absolute; left: 60px; right: 64px; bottom: 26px;
    display: flex; justify-content: space-between; gap: 16px;
    font-size: 9px; line-height: 1.3; color: var(--rp-muted);
    border-top: 1px solid var(--rp-rule); padding-top: 8px;
}
.rp-pageno { white-space: nowrap; }
.rp-mark {
    position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
    pointer-events: none; z-index: 3;
}
.rp-mark span {
    display: block; font: 600 170px/1 var(--rp-serif); color: rgba(22, 35, 59, .045);
    transform: rotate(-28deg); letter-spacing: .06em;
}

.rp-sheet h1 { font: 600 31px/1.12 var(--rp-serif); letter-spacing: -.012em; margin: 0 0 8px; color: var(--rp-ink); text-wrap: balance; }
.rp-dek { color: var(--rp-muted); font-size: 13.5px; line-height: 1.5; max-width: 600px; margin: 0 0 16px !important; }
.rp-sheet .lab { font: 600 9.5px/1.2 var(--rp-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--rp-brass-text); }
.rp-sheet .lab.muted, .rp-sheet .muted.lab { color: var(--rp-muted); }
.rp-sheet h3 { font: 600 10px/1.2 var(--rp-cond); letter-spacing: .15em; text-transform: uppercase; color: var(--rp-brass-text); margin: 0 0 9px; }
.rp-sheet .muted { color: var(--rp-muted); }
.rp-sheet .small { font-size: 10.5px; line-height: 1.45; }
.rp-sheet .serif { font-family: var(--rp-serif); }
.rp-sheet .strong { font-weight: 600; }
.rp-block { margin: 0 0 14px; }
.rp-conthead { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; padding-bottom: 8px; border-bottom: 2px solid var(--rp-ink); }
.rp-h1s { font: 600 20px/1.2 var(--rp-serif); color: var(--rp-ink); }

.rp-sheet table { width: 100%; border-collapse: collapse; }
.rp-sheet th {
    font: 600 9px/1.2 var(--rp-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--rp-muted);
    text-align: left; padding: 0 8px 7px 0; border-bottom: 1.5px solid var(--rp-ink); vertical-align: bottom;
}
.rp-sheet td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--rp-rule); vertical-align: top; }
.rp-sheet .num { text-align: right; }
.rp-sheet td.pos { color: var(--rp-good); }
.rp-sheet td.neg { color: var(--rp-bad); }
.pill {
    display: inline-block; font: 600 9px/1 var(--rp-cond); letter-spacing: .1em; text-transform: uppercase;
    padding: 5px 8px 4px; border-radius: 3px; white-space: nowrap;
}
.pill.good { background: #e3efe8; color: var(--rp-good); }
.pill.warn { background: #f6ecd9; color: #7a4f0e; }
.pill.bad { background: #f5e3df; color: var(--rp-bad); }
.rp-panel { background: var(--rp-panel); border-radius: 4px; padding: 16px 18px; margin: 0 0 20px; }
.rp-panel p:last-child { margin-bottom: 0; }
.rp-note { border-top: 1px solid var(--rp-rule); padding-top: 10px; margin-top: 4px; font-size: 9.5px; line-height: 1.45; color: var(--rp-muted); }
.rp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.rp-two > * { min-width: 0; }
.rp-chart svg { display: block; width: 100%; height: auto; overflow: hidden; }
.rp-fig-cap { margin: 4px 0 0 !important; }
.fig { white-space: nowrap; }

/* the guidance beside every chart */
.rp-guide { margin: 0; }
.rp-guide.end { margin-bottom: 22px; }
.rp-guide.end .rp-guide-row { border-bottom: 1px solid var(--rp-rule); }
.rp-guide-row { margin: 0 !important; padding: 6px 0; border-top: 1px solid var(--rp-rule); font-size: 12.5px; line-height: 1.45; }
.rp-guide-row .lab { color: var(--rp-ink); margin-right: 4px; }
.rp-guide-cont { display: none; margin: 0 0 8px; }
.rp-conthead + .rp-guide .rp-guide-cont { display: block; }

/* legends */
.rp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 10px; color: var(--rp-muted); margin: 0 0 8px; }
.rp-key { display: inline-flex; align-items: center; gap: 6px; }
.rp-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.rp-swatch-line { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--rp-ink); }
.rp-swatch-line.solid { border-top: 2.4px solid var(--rp-muted); }
.rp-swatch-line.dashed { border-top: 2px dashed var(--rp-muted); }
.rp-swatch-line.out { border-top: 2.2px solid var(--rp-bad); }
.rp-swatch-ring { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--rp-ink); background: #ffffff; }
.rp-outs { margin: 6px 0 0 !important; color: var(--rp-bad); }

/* A section packed tight to save a sheet (pack() in js/plan-report.js). */
.rp-sheet.tight h1 { font-size: 28px; }
.rp-sheet.tight .rp-dek { margin-bottom: 14px !important; }
.rp-sheet.tight .rp-block { margin-bottom: 13px; }
.rp-sheet.tight .rp-kpis, .rp-sheet.tight .rp-sbp-kpis, .rp-sheet.tight .rp-cards { margin-bottom: 14px; }
.rp-sheet.tight .rp-guide-row { padding: 5px 0; }
.rp-sheet.tight .rp-guide.end, .rp-sheet.tight .rp-story.end { margin-bottom: 14px; }
.rp-sheet.tight td { padding-top: 4px; padding-bottom: 4px; }
.rp-sheet.tight .rp-panel { padding: 12px 16px; margin-bottom: 14px; }

/* ---------- cover ---------- */
.rp-cover { padding: 0; }
.rp-cover-top { position: absolute; left: 0; right: 0; top: 0; height: 636px; background: #16233b; overflow: hidden; }
.rp-cover-art { position: absolute; inset: 0; }
.rp-cover-art svg { display: block; }
.rp-cover-run {
    position: absolute; left: 64px; right: 64px; top: 50px; display: flex; justify-content: space-between;
    font: 600 9px/1 var(--rp-cond); letter-spacing: .2em; text-transform: uppercase; color: #aab6c8;
}
.rp-cover-head { position: absolute; left: 64px; right: 64px; top: 140px; }
.rp-cover-kick { font: 600 11px/1 var(--rp-cond); letter-spacing: .24em; text-transform: uppercase; color: #d8b86c; margin-bottom: 18px; }
.rp-cover-title { font: 600 58px/1.02 var(--rp-serif); color: #ffffff; letter-spacing: -.015em; }
.rp-cover-for { margin-top: 14px; font: 600 19px/1.3 var(--rp-serif); color: #e6ebf2; }
.rp-cover-who { margin-top: 6px; font-size: 13.5px; color: #c3cddc; }
.rp-cover-headline {
    margin: 26px 0 0 !important; max-width: 560px; padding-left: 14px; border-left: 2px solid #d8b86c;
    font: italic 400 var(--hsize, 17px)/1.45 var(--rp-serif); color: #e6ebf2;
}
.rp-cover-big { position: absolute; left: 64px; right: 64px; bottom: 50px; }
.rp-cover-rule { width: 48px; height: 2px; background: #d8b86c; margin-bottom: 16px; }
.rp-cover-num { display: flex; align-items: baseline; gap: 14px; color: #ffffff; }
.rp-cover-amt { font: 600 66px/1 var(--rp-serif); color: #ffffff; }
.rp-cover-unit { font-size: 19px; color: #e6ebf2; }
.rp-cover-sub { margin-top: 8px; font-size: 12.5px; color: #c3cddc; }
.rp-cover-findings { position: absolute; left: 64px; right: 64px; top: 668px; --fsize: 12.5px; }
.rp-cover-findings > .lab { margin-bottom: 12px; }
.rp-findings { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 34px; }
.rp-finding { display: grid; grid-template-columns: 1fr auto; gap: 12px; border-top: 1px solid var(--rp-rule); padding-top: 10px; font-size: var(--fsize); line-height: 1.45; }
.rp-ptr { font: 600 9px/1 var(--rp-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--rp-brass-text); padding-top: 4px; white-space: nowrap; }
.rp-cover-inside { position: absolute; left: 64px; right: 64px; top: 910px; }
.rp-cover-inside > .lab { margin-bottom: 9px; }
.rp-inside { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px 18px; font-size: 11px; }
.rp-inside-n { font-family: var(--rp-serif); color: var(--rp-brass-text); font-weight: 600; margin-right: 6px; }
.rp-cover-inside .small { margin-top: 9px; }
.rp-cover .rp-foot { left: 64px; right: 64px; }

/* ---------- at a glance ---------- */
.rp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--rp-ink); border-bottom: 1px solid var(--rp-rule); margin: 0 0 16px; }
.rp-kpi { padding: 10px 14px 10px 0; min-width: 0; }
.rp-kpi + .rp-kpi { padding-left: 14px; border-left: 1px solid var(--rp-rule); }
.rp-kpi .v { font: 600 24px/1.1 var(--rp-serif); margin: 5px 0 2px; }
.rp-kpi .s { font-size: 10px; color: var(--rp-muted); line-height: 1.35; }
.rp-glance-cover { display: grid; grid-template-columns: 100px 1fr; gap: 26px; align-items: center; margin-bottom: 4px; }
.rp-cov { margin: 4px 0 0 !important; }
.rp-tests td { padding-top: 4px; padding-bottom: 4px; }
.rp-tests-q { width: 37%; font-weight: 500; }
.rp-tests td.muted { font-size: 11.5px; }
.rp-tests td.num { width: 92px; }

/* ---------- paths ---------- */
.rp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 22px; }
.rp-cards.four { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rp-card { border-top: 3px solid var(--rp-navy); background: var(--rp-panel); padding: 13px 14px 14px; border-radius: 0 0 4px 4px; min-width: 0; }
/* The cards share their rows, so a long name or a what-if tag on one card
   never pushes its figures out of line with the others. */
.rp-card { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.rp-cards.four .rp-card { padding: 11px 11px 12px; }
.rp-card-top { display: flex; justify-content: space-between; align-items: center; }
.rp-card-key { font: 600 20px/1 var(--rp-serif); }
.rp-card-name { font-weight: 600; font-size: 12.5px; line-height: 1.3; margin: 8px 0 4px; min-height: 33px; }
.rp-card-sub { font-size: 10px; color: var(--rp-muted); margin-left: 8px; line-height: 1.3; }
.rp-card .lab { margin-top: 8px; }
.rp-card-big { font: 600 19px/1.2 var(--rp-serif); margin: 2px 0 2px; }
.rp-card-val { font: 600 16px/1.25 var(--rp-serif); margin: 2px 0 0; }
.rp-cards.four .rp-card-big { font-size: 17px; }
.rp-cards.four .rp-card-val { font-size: 14px; }
.rp-card-big.pos { color: var(--rp-good); }
.rp-card-big.neg, .rp-card-val.neg { color: var(--rp-bad); }
.rp-story { border-left: 3px solid var(--rp-navy); padding: 2px 0 2px 16px; margin: 0; }
.rp-story.end { margin-bottom: 22px; }
.rp-story-cont { display: none; margin: 0 0 8px; }
.rp-conthead + .rp-story .rp-story-cont { display: block; }
.rp-story > p:last-child { margin-bottom: 0; padding-bottom: 9px; }
.rp-story-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: 0 0 10px; }
.rp-story-key { font: 600 28px/1 var(--rp-serif); }
.rp-story-name { font: 600 15px/1.3 var(--rp-serif); }
.rp-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 10px 0 10px; padding-top: 10px; border-top: 1px solid var(--rp-rule); }
.rp-three > div { min-width: 0; }
.rp-three p { font-size: 11px; line-height: 1.45; margin: 4px 0 0; }
.rp-checks th, .rp-checks td { font-size: 10.5px; padding-top: 5px; padding-bottom: 5px; }
.rp-checks td:first-child { color: var(--rp-muted); }

/* ---------- year by year ---------- */
.rp-keyyears td { font-size: 11px; padding-top: 4px; padding-bottom: 4px; }
.rp-keyyears td:first-child { width: 38%; }

/* ---------- SBP ---------- */
.rp-sbp-kpis { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--rp-ink); border-bottom: 1px solid var(--rp-rule); margin: 0 0 16px; }
.rp-sbp-kpis > div { padding: 11px 18px 11px 0; }
.rp-sbp-kpis > div + div { padding: 11px 0 11px 18px; border-left: 1px solid var(--rp-rule); }
.rp-sbp-big { font: 600 30px/1.15 var(--rp-serif); margin: 4px 0 2px; }
.rp-sbp-big .rp-unit { font: 400 16px var(--rp-sans); color: var(--rp-muted); }
.rp-sbp-charts { margin-bottom: 14px; }
.rp-choices td { padding-top: 6px; padding-bottom: 6px; }
.rp-va { padding: 12px 14px; margin: 0; }
.rp-va > div + div { margin-top: 10px; }
.rp-year-top { display: grid; grid-template-columns: 452px 1fr; gap: 18px; align-items: start; }
.rp-year-top > * { min-width: 0; }
.rp-va h3 { margin-bottom: 5px; }
.rp-choices .rp-pad { padding-left: 24px; }

/* ---------- where to live ---------- */
.rp-map { display: grid; grid-template-columns: 404px 1fr; gap: 22px; align-items: start; margin: 0 0 16px; }
.rp-map-side .rp-panel { margin-bottom: 12px; padding: 14px 16px; }
.rp-map-side .rp-note { margin-top: 0; }
.rp-map-legend > .lab { margin-bottom: 10px; }
.rp-map-key { display: flex; align-items: center; gap: 8px; font-size: 10.5px; margin-bottom: 7px; }
.rp-tile { display: inline-block; width: 16px; height: 16px; border-radius: 2px; border: 1px solid #bfc7d2; }
.rp-tile.out { border: 3px solid var(--rp-brass); background: #ffffff; }
.rp-map-out { margin-top: 14px; }

/* ---------- questions ---------- */
.rp-q { display: grid; grid-template-columns: 36px 1fr; gap: 4px 14px; padding: 18px 0; border-top: 1px solid var(--rp-rule); }
.rp-body > .rp-q:first-of-type, .rp-conthead + .rp-q { border-top: 0; padding-top: 4px; }
.rp-q-mark { font: 600 42px/.9 var(--rp-serif); color: var(--rp-brass); }
.rp-q-text { font: 600 19px/1.3 var(--rp-serif); margin-bottom: 10px; }
.rp-q-row { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 7px 0 0; }
.rp-q-row .lab { padding-top: 3px; color: var(--rp-ink); }
.rp-q-row p { margin: 0; }
.rp-q-see { margin-top: 10px; }

/* ---------- for the spouse ---------- */
.rp-family { margin: 0 0 24px; }
.rp-stops { border-top: 3px solid var(--rp-bad); padding-top: 12px; }
.rp-starts { border-top: 3px solid var(--rp-good); padding-top: 12px; }
.rp-sheet h3.red { color: var(--rp-bad); }
.rp-sheet h3.green { color: var(--rp-good); }
.rp-family td.last { border-bottom: 0; }
.rp-family td.num { white-space: nowrap; width: 1%; padding-left: 10px; }
.rp-family td { padding-top: 6px; padding-bottom: 6px; }
.rp-family-one { max-width: 420px; margin: 0 0 24px; }
.rp-calls td:nth-child(1) { width: 26px; }
.rp-calls td:nth-child(2) { width: 150px; }
.rp-calls td:nth-child(3) { width: 120px; }
.rp-blanks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.rp-blank { display: flex; align-items: flex-end; height: 38px; border-bottom: 1px solid var(--rp-ink); }
.rp-blank span { font-size: 11px; font-weight: 500; white-space: nowrap; padding-bottom: 5px; }
.rp-lines { height: 136px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 33px, var(--rp-rule) 33px, var(--rp-rule) 34px); }

/* ---------- timeline ---------- */
.rp-tl { position: relative; }
.rp-tl::before { content: ""; position: absolute; left: 131px; top: 0; bottom: 0; width: 2px; background: #dbe3ee; }
.rp-tl-row { display: grid; grid-template-columns: 118px 28px 1fr; align-items: start; padding: 7px 0; min-height: 44px; }
.rp-tl-when { text-align: right; font: 600 11px/1.3 var(--rp-cond); letter-spacing: .04em; color: var(--rp-muted); padding-top: 2px; }
.rp-tl-dot { display: flex; justify-content: center; padding-top: 4px; }
.rp-tl-dot i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #ffffff; border: 2px solid var(--rp-navy); position: relative; z-index: 1; }
.rp-tl-row.major .rp-tl-when { color: var(--rp-brass-text); }
.rp-tl-row.major .rp-tl-dot i { width: 14px; height: 14px; background: var(--rp-brass); border-color: var(--rp-brass); margin-top: -2px; }
.rp-tl-item { padding-left: 6px; display: grid; grid-template-columns: 16px 1fr; gap: 0 10px; }
.rp-box { display: block; width: 13px; height: 13px; border: 1.5px solid var(--rp-ink); border-radius: 2px; margin-top: 3px; }
.rp-tl-title { font-weight: 600; font-size: 12.5px; }
.rp-moves { margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--rp-ink); }
.rp-move { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 6px 0; }
.rp-move-n { font: 600 18px/1.1 var(--rp-serif); color: var(--rp-brass-text); }
.rp-move p { margin: 2px 0 0; }

/* ---------- divider ---------- */
.rp-divider-head { position: relative; height: 330px; background: #16233b; border-radius: 3px; overflow: hidden; margin: 0 0 30px; }
.rp-divider-art { position: absolute; inset: 0; }
.rp-divider-art svg { display: block; }
.rp-divider-inner { position: absolute; left: 36px; right: 36px; bottom: 34px; }
.rp-divider-kick { font: 600 11px/1 var(--rp-cond); letter-spacing: .24em; text-transform: uppercase; color: #d8b86c; margin-bottom: 14px; }
.rp-divider-title { font: 600 40px/1.08 var(--rp-serif); color: #ffffff; }
.rp-divider-inner p { color: #c3cddc; font-size: 13.5px; margin: 12px 0 0; max-width: 520px; }
.rp-divider-list { margin: 0 0 26px; }
.rp-divider-item { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--rp-rule); font-size: 13px; }
.rp-disclaimer { background: var(--rp-panel); border-radius: 4px; padding: 16px 18px; }
.rp-disclaimer p { margin: 0; }

/* ---------- the worksheet's own pages (scoped under .ws) ---------- */
/* The report's type on them. While worksheet.js measures a page to decide
   what fits (.ws-native, set by the report's MRC_WORKSHEET_EMBED.native),
   these give way so the page measures in the worksheet's own type, exactly
   as worksheet.html does, and both make the same choices. The report's type
   runs no taller, so the page still fits. scripts/test_plan_report.mjs
   checks both. */
.rp-frame.ws { --accent: #1f3a5f; --ink: #16233b; --muted: #5c6878; --rule: #d9dde3; --zebra: #f6f7f9; background: #ffffff; color: #16233b; }
.rp-frame.ws:not(.ws-native) { font-family: var(--rp-sans); font-size: 10pt; }
.rp-frame.ws .sheet { margin: 0; box-shadow: none; }
.rp-frame.ws:not(.ws-native) h1, .rp-frame.ws:not(.ws-native) h2, .rp-frame.ws:not(.ws-native) h3, .rp-frame.ws:not(.ws-native) .stat-val { font-family: var(--rp-serif); font-weight: 600; }
.rp-frame.ws:not(.ws-native) .kicker, .rp-frame.ws:not(.ws-native) .brandline { font-family: var(--rp-cond); }
.rp-frame.ws .sec-num { color: var(--rp-brass-text); }
.rp-frame.ws tr.hl td { background: #f6ecd9 !important; }
.rp-frame.ws:not(.ws-native) .bar-val, .rp-frame.ws:not(.ws-native) .bar-on { font-family: var(--rp-serif); }
.rp-frame.ws .bar-key-me { fill: #1f3a5f; }
.rp-frame.ws .rp-tab { z-index: 2; }
.rp-wsno { position: absolute; right: .51in; bottom: .2in; font: 9px var(--rp-sans); color: var(--rp-muted); }

@media (max-width: 560px) {
    .rp-toolbar { gap: 8px 12px; }
    .rp-toolbar-title { font-size: 14px; }
}

/* ---------- phone reading ----------
   Under 700px the sheets stop being scaled-down paper and reflow into one
   column at a normal reading size, charts at the width of the screen. The
   report is always packed at the printed geometry first (html.rp-measuring
   while it is built), and print never sees any of this, so the PDF keeps the
   fixed Letter layout. */
@media screen and (max-width: 700px) {
    html:not(.rp-measuring) .rp-report { padding: 12px 0 40px; }
    html:not(.rp-measuring) .rp-frame { width: 100%; height: auto; margin: 0 0 12px; box-shadow: none; }
    html:not(.rp-measuring) .rp-frame > .rp-sheet { transform: none; }
    html:not(.rp-measuring) .rp-sheet { width: 100%; height: auto; overflow: visible; padding: 22px 16px 18px; font-size: 15px; line-height: 1.55; }
    html:not(.rp-measuring) .rp-run, html:not(.rp-measuring) .rp-body, html:not(.rp-measuring) .rp-foot { position: static; }
    html:not(.rp-measuring) .rp-run { margin-bottom: 16px; letter-spacing: .12em; }
    html:not(.rp-measuring) .rp-body { overflow: visible; }
    html:not(.rp-measuring) .rp-foot { margin-top: 18px; flex-direction: column; gap: 4px; font-size: 11px; }
    html:not(.rp-measuring) .rp-tab { display: none; }
    html:not(.rp-measuring) .rp-sheet h1 { font-size: 27px; }
    html:not(.rp-measuring) .rp-dek { font-size: 16px; }
    html:not(.rp-measuring) .rp-sheet .small, html:not(.rp-measuring) .rp-note, html:not(.rp-measuring) .rp-three p,
    html:not(.rp-measuring) .rp-kpi .s, html:not(.rp-measuring) .rp-keyyears td, html:not(.rp-measuring) .rp-checks td { font-size: 13.5px; }
    html:not(.rp-measuring) .rp-guide-row { font-size: 15px; }
    html:not(.rp-measuring) .rp-sheet .lab, html:not(.rp-measuring) .rp-sheet h3 { font-size: 11px; }
    html:not(.rp-measuring) .rp-kpis { grid-template-columns: 1fr 1fr; }
    html:not(.rp-measuring) .rp-kpi:nth-child(3) { padding-left: 0; border-left: 0; }
    html:not(.rp-measuring) .rp-cards, html:not(.rp-measuring) .rp-cards.four,
    html:not(.rp-measuring) .rp-two, html:not(.rp-measuring) .rp-map, html:not(.rp-measuring) .rp-year-top,
    html:not(.rp-measuring) .rp-three, html:not(.rp-measuring) .rp-findings, html:not(.rp-measuring) .rp-blanks { grid-template-columns: 1fr; }
    html:not(.rp-measuring) .rp-inside { grid-template-columns: 1fr 1fr; }
    html:not(.rp-measuring) .rp-glance-cover { grid-template-columns: 1fr; gap: 14px; }
    html:not(.rp-measuring) .rp-glance-cover .rp-ring { width: 110px; }
    html:not(.rp-measuring) .rp-glance-cover .rp-ring svg { width: 110px; height: 110px; }
    html:not(.rp-measuring) .rp-sbp-kpis { grid-template-columns: 1fr; }
    html:not(.rp-measuring) .rp-sbp-kpis > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rp-rule); }
    html:not(.rp-measuring) .rp-onphone { display: block; }
    html:not(.rp-measuring) .rp-paper { display: none; }
    html:not(.rp-measuring) .rp-ms-list, html:not(.rp-measuring) .rp-ends, html:not(.rp-measuring) .rp-map-keylist { font-size: 14px; }
    html:not(.rp-measuring) .rp-legend { font-size: 13px; gap: 4px 14px; }
    /* Who to call: the number and the name on one line, what to say under. */
    html:not(.rp-measuring) .rp-calls tr { display: grid; grid-template-columns: 22px 1fr auto; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--rp-rule); }
    html:not(.rp-measuring) .rp-calls td { display: block; padding: 0; border: 0; }
    html:not(.rp-measuring) .rp-calls td:nth-child(4) { grid-column: 2 / -1; }
    /* Tables keep their words whole. One that does not fit is stacked by
       js/narrow-tables.js: a block a row, each figure beside its heading. */
    html:not(.rp-measuring) #report table td, html:not(.rp-measuring) #report table th { overflow-wrap: normal; word-break: normal; hyphens: none; }
    html:not(.rp-measuring) #report table td.num, html:not(.rp-measuring) #report table th.num { white-space: nowrap; }
    html:not(.rp-measuring) #report table.nt-stacked, html:not(.rp-measuring) #report table.nt-stacked tbody,
    html:not(.rp-measuring) #report table.nt-stacked tr { display: block; width: auto; max-width: none; }
    html:not(.rp-measuring) #report table.nt-stacked thead { display: none; }
    html:not(.rp-measuring) #report table.nt-stacked tr { padding: 8px 0; border-bottom: 1px solid var(--rp-rule); }
    html:not(.rp-measuring) #report table.nt-stacked td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
        width: auto; text-align: right; padding: 2px 0; border: 0; white-space: normal; font-size: 14px; }
    html:not(.rp-measuring) #report table.nt-stacked td::before { content: attr(data-label); text-align: left; color: var(--rp-muted); font-size: 12.5px; font-weight: 400; }
    html:not(.rp-measuring) #report table.nt-stacked td[data-label=""]::before { content: none; }
    html:not(.rp-measuring) #report table.nt-stacked td:first-child { display: block; text-align: left; font-weight: 600; padding-bottom: 4px; }
    html:not(.rp-measuring) #report table.nt-stacked td:first-child::before { content: none; }
    html:not(.rp-measuring) .rp-tl-row { grid-template-columns: 74px 22px 1fr; }
    html:not(.rp-measuring) .rp-tl::before { left: 84px; }
    html:not(.rp-measuring) .rp-q { grid-template-columns: 22px 1fr; gap: 4px 8px; }
    html:not(.rp-measuring) .rp-q-row { grid-template-columns: 1fr; gap: 2px; }
    /* the cover, stacked */
    html:not(.rp-measuring) .rp-cover { padding: 0; }
    html:not(.rp-measuring) .rp-cover-top { position: relative; height: auto; padding: 22px 16px 26px; }
    html:not(.rp-measuring) .rp-cover-art svg { width: 100%; height: 100%; }
    html:not(.rp-measuring) .rp-cover-run, html:not(.rp-measuring) .rp-cover-head, html:not(.rp-measuring) .rp-cover-big,
    html:not(.rp-measuring) .rp-cover-findings, html:not(.rp-measuring) .rp-cover-inside, html:not(.rp-measuring) .rp-cover .rp-foot { position: relative; left: auto; right: auto; top: auto; bottom: auto; }
    html:not(.rp-measuring) .rp-cover-run { flex-direction: column; gap: 6px; }
    html:not(.rp-measuring) .rp-cover-head { margin-top: 36px; }
    html:not(.rp-measuring) .rp-cover-title { font-size: 40px; }
    html:not(.rp-measuring) .rp-cover-big { margin-top: 36px; }
    html:not(.rp-measuring) .rp-cover-num { flex-wrap: wrap; }
    html:not(.rp-measuring) .rp-cover-amt { font-size: 50px; }
    html:not(.rp-measuring) .rp-cover-findings, html:not(.rp-measuring) .rp-cover-inside { padding: 22px 16px 0; --fsize: 15px; }
    html:not(.rp-measuring) .rp-cover .rp-foot { margin: 22px 16px 18px; }
    /* the worksheet's pages */
    html:not(.rp-measuring) .rp-frame.ws .sheet { width: 100%; min-height: 0; padding: 22px 16px; overflow: visible; }
    html:not(.rp-measuring) .rp-frame.ws .stat-grid, html:not(.rp-measuring) .rp-frame.ws .two-col, html:not(.rp-measuring) .rp-frame.ws .fig { grid-template-columns: 1fr; }
    html:not(.rp-measuring) .rp-frame.ws [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    html:not(.rp-measuring) .rp-frame.ws [style*="max-width"] { max-width: none !important; }
    html:not(.rp-measuring) .rp-wsno { position: static; display: block; margin-top: 10px; }
}

/* The line on the worksheet's cover that says what its take-home measures
   against the figure on the plan's cover. */
.ws .rp-ws-xref { font: 400 8.5pt/1.4 var(--rp-sans); color: #4b5563; border-left: 3px solid var(--rp-brass); padding: 1px 0 1px 10px; margin: 0 0 14px; }
.ws .rp-has-xref .stat-grid { margin: 16px 0 12px; }
.ws .rp-has-xref .toc li { padding: 1.5px 0; }

/* ---------- the phone versions of charts and lists ----------
   Drawn with every report, shown only on a phone screen (see the media
   query below). Print and the desktop screen always show the paper ones. */
.rp-onphone { display: none; }
.rp-ms-list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rp-axis, #a9bbd3); }
.rp-ms-list li { padding: 6px 0 6px 14px; position: relative; }
.rp-ms-list li::before { content: ''; position: absolute; left: -6px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--rp-navy); }
.rp-ms-when { display: block; font: 600 12px/1.3 var(--rp-cond); letter-spacing: .05em; text-transform: uppercase; color: var(--rp-muted); }
.rp-ms-what { display: block; font-weight: 500; }
.rp-ends { list-style: none; margin: 10px 0 0; padding: 0; }
.rp-ends li { padding: 3px 0; }
.rp-ends .rp-swatch-line { margin-right: 8px; }
.rp-map-keylist { margin-top: 8px; }
.rp-map-keylist ul { list-style: none; margin: 6px 0 0; padding: 0; }
.rp-map-keylist li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.rp-map-keylist li i { width: 14px; height: 14px; border-radius: 2px; border: 1px solid; flex: none; }
.rp-map-keylist li i.rp-key-short { background: #ffffff; border: 3px solid var(--rp-brass); }

/* ---------- print ---------- */
@page { size: letter; margin: 0; }
@media print {
    body.rp-page { background: #ffffff; }
    .rp-toolbar, .rp-banner, .rp-notice, .rp-status { display: none !important; }
    .rp-report { display: block; padding: 0; max-width: none; }
    .rp-frame { width: auto !important; height: auto !important; margin: 0; box-shadow: none; break-after: page; page-break-after: always; }
    .rp-frame:last-child { break-after: auto; page-break-after: auto; }
    .rp-frame > .rp-sheet, .rp-frame > .sheet { transform: none !important; }
    .rp-sheet { height: 1055px; }
    .rp-frame.ws .sheet { page-break-after: auto; break-after: auto; }
}