/* public/css/formats/two-pager.css
 *
 * Two-Pager (Plan #3) layout chrome.
 *
 * Page 1 inherits all the .plan-detailed-one-pager styles (header, story
 * block, KPI strip, snapshot row, etc.) — this file only defines the
 * outer page stack + the page-2 specific bits (per-area cards, mini
 * SVG charts, page-2 header treatment, completed-last-year strip).
 */

/* ─── Outer stack: 2 letter-sized pages stacked with a gap ────────────── */
.plan-two-pager-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;            /* visual page break in the preview pane */
  align-items: center;
}

.plan-two-pager-page {
  width: 1080px;
  min-height: 1397px;   /* 8.5 × 11 letter aspect at 1080w */
  background: #fff;
  color: #1a1a1a;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Page 2 header — quiet section-break style (no hero, no logo, no client
   name/date repeat). The brand-secondary top accent + serif title is enough
   to signal "you're still inside this plan, this is just the action-plan
   page". The client name + date already lives on page 1 + in both footers,
   so repeating it here just confused things. */
.plan-detailed-one-pager .tp-page2-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 44px 16px;
  background: #fff;
  border-top: 3px solid var(--brand-secondary);
  border-bottom: 1px solid var(--d1p-rule, #e8e8e6);
}
.plan-detailed-one-pager .tp-page2-title {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  line-height: 1.1;
  color: var(--d1p-ink, #1a1a1a);
  letter-spacing: -0.2px;
}
.plan-detailed-one-pager .tp-page2-meta {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--d1p-ink-faint, #999);
}

/* ─── Footer variants ──────────────────────────────────────────────────
   .d1p-footer (default, used on page 2) is the standard solid brand band
   — see detailed-one-pager.css. Page 1 wants something quieter so it
   doesn't read as "the end" — a thin top border + muted text on white
   keeps the firm/advisor sign-off present without closing the document. */
.plan-detailed-one-pager .d1p-footer.tp-footer-light {
  background: #fff;
  border-top: 1px solid var(--d1p-rule, #e8e8e6);
  padding: 12px 32px;
}
.plan-detailed-one-pager .d1p-footer.tp-footer-light .footer-firm     { color: var(--d1p-ink-muted, #555); }
.plan-detailed-one-pager .d1p-footer.tp-footer-light .footer-prepared { color: var(--d1p-ink-faint, #999); }

/* Page-number stamp folded into footer-prepared so it never collides
   with that text. Slightly lighter than its parent so it reads as a
   subordinate annotation. Works on both light + solid variants. */
.plan-detailed-one-pager .d1p-footer .footer-page {
  font-weight: 600;
  letter-spacing: 0.12em;
  opacity: 0.7;
  margin-left: 2px;
}

/* ─── Page 1 sizing ────────────────────────────────────────────────────────
   Layout rules (matching Full Plan At a Glance):
   1. Story (Overview + NW Trend) + KPIs glued together — no gap; KPIs
      always sit flush under Overview.
   2. Goals/Values has a fixed gap above it (from KPIs).
   3. Snapshot has the SAME fixed gap above it (from Goals/Values).
   4. Snapshot grows to fill the rest of the page so its light-shaded
      background runs all the way down to the footer. */
.plan-two-pager-stack > .plan-two-pager-page:first-of-type > .d1p-story-block    { flex: 0 0 auto; align-items: stretch; }
.plan-two-pager-stack > .plan-two-pager-page:first-of-type > .d1p-direction-row  { flex: 0 0 auto; margin-top: 20px; border-bottom: none; }
.plan-two-pager-stack > .plan-two-pager-page:first-of-type > .d1p-snapshot-section { flex: 1 1 auto; margin-top: 20px; }

/* NW chart inside the story block: bounded height so Chart.js doesn't
   stretch the canvas. */
.plan-two-pager-stack > .plan-two-pager-page:first-of-type > .d1p-story-block .d1p-nw-chart-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.plan-two-pager-stack > .plan-two-pager-page:first-of-type > .d1p-story-block .d1p-nw-chart-wrap {
  height: 180px;
  overflow: hidden;
}

/* Snapshot internal spacing on page 1 — more breathing room between
   title, NW Breakdown, and the 3-chart row. */
.plan-two-pager-stack > .plan-two-pager-page:first-of-type > .d1p-snapshot-section { padding: 30px 44px; }
.plan-two-pager-stack > .plan-two-pager-page:first-of-type > .d1p-snapshot-section > .d1p-section-head { margin-bottom: 22px; }
.plan-two-pager-stack > .plan-two-pager-page:first-of-type > .d1p-snapshot-section .d1p-nw-breakdown {
  margin-bottom: 32px;
  padding-bottom: 26px;
}

/* ─── Page 2: Action plan / per-area card grid ────────────────────────── */
.plan-detailed-one-pager .tp-areas-section {
  padding: 22px 44px;
  background: var(--d1p-wash-primary, #f6f6f7);
  flex: 1;  /* fills space between header + footer */
  display: flex;
  flex-direction: column;
}

/* Container for JS-driven masonry. Same approach as Detailed 1-Pager's
   .d1p-recs-mosaic: the JS shortest-column / LPT bin-packer (fitAreasGrid
   in two-pager.js) sets each card's position absolute and computes
   placement so cards pack into columns of near-equal height with no
   internal gaps. We just need to make this a positioning context. */
.plan-detailed-one-pager .tp-areas-grid {
  position: relative;
  margin-top: 8px;
}

.plan-detailed-one-pager .tp-area-card {
  background: var(--d1p-card-bg, #fff);
  border: 1px solid var(--d1p-rule, #e8e8e6);
  border-left: 3px solid var(--brand-secondary);
  padding: 11px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan-detailed-one-pager .tp-area-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.plan-detailed-one-pager .tp-area-title {
  font-family: 'DM Serif Display', serif;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: -0.2px;
  color: var(--d1p-ink, #1a1a1a);
}

.plan-detailed-one-pager .tp-area-list {
  list-style: none;
  display: grid;
  gap: 4px;
  padding: 0;
  margin: 0;
}
.plan-detailed-one-pager .tp-area-list li {
  font-size: 11px; line-height: 1.45;
  color: var(--d1p-ink, #1a1a1a);
  padding-left: 13px;
  position: relative;
}
.plan-detailed-one-pager .tp-area-list li::before {
  content: '→'; position: absolute; left: 0; top: 0;
  color: var(--brand-secondary);
  font-weight: 700; font-size: 11px;
}

/* ─── Subsection heading inside an area card ────────────────────────────
   Rendered when a textarea uses '## Subhead' lines to split bullets into
   logical sub-groups (e.g., Insurance card with Auto / Home / Disability
   sub-blocks). Sits between bullets, not above. */
.plan-detailed-one-pager .tp-area-subhead {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d1p-ink-muted, #555);
  padding-top: 4px;
  margin-top: 2px;
  border-top: 1px solid var(--d1p-rule, #e8e8e6);
}
/* First subhead in a card (no bullets above it) doesn't need the divider —
   it sits flush under the chart/title. */
.plan-detailed-one-pager .tp-area-subhead:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.plan-detailed-one-pager .tp-area-list-sub {
  margin-top: -2px;
}
/* Sub-bullets nested under a main bullet (Tab indentation in textarea) */
.plan-detailed-one-pager .tp-area-list-subs {
  list-style: none;
  display: grid;
  gap: 2px;
  padding: 4px 0 0 14px;
  margin: 2px 0 4px 0;
}
.plan-detailed-one-pager .tp-area-list-subs li {
  font-size: 10px;
  line-height: 1.4;
  color: var(--d1p-ink-muted, #555);
  padding-left: 11px;
  position: relative;
}
.plan-detailed-one-pager .tp-area-list-subs li::before {
  content: '·';
  position: absolute;
  left: 0; top: -3px;
  color: var(--brand-secondary);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

/* ─── Mini-chart container (sits between title and bullets) ─────────── */
.plan-detailed-one-pager .tp-mini-chart {
  background: rgba(0,0,0,0.015);
  border-radius: 3px;
  padding: 8px 10px;
  font-size: 10px;
  color: var(--d1p-ink-muted, #555);
}

/* Cash flow mini-chart (stacked horizontal bar) */
.plan-detailed-one-pager .tp-chart-cf-bar {
  display: flex;
  height: 14px;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}
.plan-detailed-one-pager .tp-chart-cf-seg { display: block; height: 100%; }
.plan-detailed-one-pager .tp-chart-cf-legend {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-size: 9.5px; color: var(--d1p-ink-muted, #555);
}
.plan-detailed-one-pager .tp-chart-cf-leg { display: inline-flex; align-items: center; gap: 4px; }
.plan-detailed-one-pager .tp-chart-cf-leg i {
  display: inline-block; width: 8px; height: 8px; border-radius: 1px;
}

/* Allocation mini-donut */
.plan-detailed-one-pager .tp-chart-alloc {
  display: flex; align-items: center; gap: 14px;
}
.plan-detailed-one-pager .tp-chart-alloc-legend {
  flex: 1;
  /* CSS multi-column flow: legend wraps into 2-3 columns based on width.
     min(12em) keeps each column wide enough to read; the wrap point
     auto-adjusts to fit the available card width. */
  column-width: 11em;
  column-gap: 14px;
  font-size: 9.5px;
  color: var(--d1p-ink-muted, #555);
}
.plan-detailed-one-pager .tp-chart-alloc-leg {
  display: flex; align-items: center; gap: 5px;
  /* Don't break a legend item across columns */
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 3px;
}
.plan-detailed-one-pager .tp-chart-alloc-leg i {
  display: inline-block; width: 8px; height: 8px; border-radius: 1px;
}

/* Tax bracket bars */
.plan-detailed-one-pager .tp-chart-tax-row {
  display: grid;
  grid-template-columns: 100px 1fr 36px;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 10px;
  color: var(--d1p-ink-muted, #555);
}
.plan-detailed-one-pager .tp-chart-tax-row:last-child { margin-bottom: 0; }
.plan-detailed-one-pager .tp-chart-tax-lbl {
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
}
.plan-detailed-one-pager .tp-chart-tax-sub {
  font-size: 8.5px;
  font-weight: 500;
  color: var(--d1p-ink-faint, #999);
  letter-spacing: 0.02em;
}
.plan-detailed-one-pager .tp-chart-tax-track {
  display: block; height: 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.plan-detailed-one-pager .tp-chart-tax-fill { display: block; height: 100%; }
.plan-detailed-one-pager .tp-chart-tax-val {
  text-align: right;
  font-family: 'DM Serif Display', serif;
  font-size: 12px;
  color: var(--d1p-ink, #1a1a1a);
}
/* Estimated annual tax — small stat below the bar rows */
.plan-detailed-one-pager .tp-chart-tax-est {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.plan-detailed-one-pager .tp-chart-tax-est-lbl {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d1p-ink-muted, #555);
}
.plan-detailed-one-pager .tp-chart-tax-est-val {
  font-family: 'DM Serif Display', serif;
  font-size: 14px;
  color: var(--d1p-ink, #1a1a1a);
}

/* NW sparkline */
.plan-detailed-one-pager .tp-chart-spark-meta {
  display: flex; justify-content: space-between;
  font-size: 9.5px; color: var(--d1p-ink-muted, #555);
  margin-top: 4px;
}

/* Stat tile (Insurance/Estate/College/Business fallback) */
.plan-detailed-one-pager .tp-stat-tile {
  display: flex; flex-direction: column;
  text-align: center;
  padding: 10px;
}
.plan-detailed-one-pager .tp-stat-val {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  line-height: 1;
  color: var(--d1p-ink, #1a1a1a);
  margin-bottom: 3px;
}
.plan-detailed-one-pager .tp-stat-lbl {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d1p-ink-muted, #555);
}
.plan-detailed-one-pager .tp-stat-hint {
  font-size: 9px;
  color: var(--d1p-ink-faint, #999);
  margin-top: 2px;
}

/* Cash on Hand strip (sits above the cash flow stacked bar) */
.plan-detailed-one-pager .tp-chart-cash-stat {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 6px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.plan-detailed-one-pager .tp-chart-cash-stat .lbl {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d1p-ink-muted, #555);
}
.plan-detailed-one-pager .tp-chart-cash-stat .val {
  font-family: 'DM Serif Display', serif;
  font-size: 16px;
  color: var(--d1p-ink, #1a1a1a);
}

/* ─── Debt: horizontal bars per debt type ──────────────────────────────── */
.plan-detailed-one-pager .tp-chart-debt-row {
  display: grid;
  grid-template-columns: 60px 1fr 86px;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  font-size: 10px;
  color: var(--d1p-ink-muted, #555);
}
.plan-detailed-one-pager .tp-chart-debt-row:last-child { margin-bottom: 0; }
.plan-detailed-one-pager .tp-debt-lbl { font-weight: 600; }
.plan-detailed-one-pager .tp-debt-track {
  display: block; height: 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.plan-detailed-one-pager .tp-debt-fill { display: block; height: 100%; }
.plan-detailed-one-pager .tp-debt-val {
  text-align: right;
  font-family: 'DM Serif Display', serif;
  font-size: 11px;
  color: var(--d1p-ink, #1a1a1a);
  white-space: nowrap;
}
.plan-detailed-one-pager .tp-debt-val em {
  font-style: normal;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: var(--d1p-ink-muted, #555);
  margin-left: 3px;
}

/* ─── Retirement: years + Monte Carlo success gauge ────────────────────── */
.plan-detailed-one-pager .tp-chart-retire {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.plan-detailed-one-pager .tp-retire-years {
  display: flex; flex-direction: column; gap: 0;
}
.plan-detailed-one-pager .tp-retire-years .big {
  font-family: 'DM Serif Display', serif;
  font-size: 28px; line-height: 1;
  color: var(--d1p-ink, #1a1a1a);
}
.plan-detailed-one-pager .tp-retire-years .lbl {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d1p-ink-muted, #555);
  margin-top: 3px;
}
.plan-detailed-one-pager .tp-retire-gauge {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex-shrink: 0;
}
.plan-detailed-one-pager .tp-retire-gauge-lbl {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d1p-ink-muted, #555);
}

/* ─── Status grid (shared by Insurance + Estate) ───────────────────────── */
.plan-detailed-one-pager .tp-chart-status {
  display: grid; gap: 0;
}
/* 2-column variant: kicks in when an area has 4+ status items (e.g.
   Insurance with Life/Disability/LTC/Umbrella/Home/Auto). Pairs rows
   side-by-side so the card stays compact. */
.plan-detailed-one-pager .tp-chart-status-2col {
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
}
.plan-detailed-one-pager .tp-status-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 10.5px;
  color: var(--d1p-ink, #1a1a1a);
}
.plan-detailed-one-pager .tp-status-row:last-child { border-bottom: none; }
/* In 2-col mode, the LAST row in each column shouldn't have a divider.
   With 6 items (3 per col) that's the 3rd and 6th; with 4 items (2 per
   col) it's the 3rd and 4th. nth-last-of-type(-n+2) handles both. */
.plan-detailed-one-pager .tp-chart-status-2col .tp-status-row:nth-last-of-type(-n+2) {
  border-bottom: none;
}
.plan-detailed-one-pager .tp-status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #c8c8c8;
}
.plan-detailed-one-pager .tp-status-dot.s-adequate,
.plan-detailed-one-pager .tp-status-dot.s-done       { background: #4a7c5f; }
.plan-detailed-one-pager .tp-status-dot.s-gap,
.plan-detailed-one-pager .tp-status-dot.s-needs-update { background: #c19a3a; }
.plan-detailed-one-pager .tp-status-dot.s-none,
.plan-detailed-one-pager .tp-status-dot.s-missing      { background: #a05050; }
.plan-detailed-one-pager .tp-status-lbl { font-weight: 600; color: var(--d1p-ink-muted, #555); }
.plan-detailed-one-pager .tp-status-val {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--d1p-ink, #1a1a1a);
  text-transform: uppercase;
}

/* Shared mini-chart section title — small uppercase eyebrow above any
   in-card chart that needs to be named (e.g. 'Annual Cash Flow',
   'Monthly Surplus Planning', 'Projected Taxes'). */
.plan-detailed-one-pager .tp-chart-section-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-primary);
  padding-bottom: 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--d1p-rule, #e8e8e6);
}

/* ─── Monthly Surplus Planning mini-ledger (Full Plan cash recs card) ── */
.plan-detailed-one-pager .tp-chart-ms {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px 0 2px;
}
.plan-detailed-one-pager .tp-ms-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 4px 0;
  font-size: 10.5px;
  color: var(--d1p-ink, #1a1a1a);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.plan-detailed-one-pager .tp-ms-row:last-child { border-bottom: none; }
.plan-detailed-one-pager .tp-ms-lbl { font-weight: 500; }
.plan-detailed-one-pager .tp-ms-amt {
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.plan-detailed-one-pager .tp-ms-row.tp-ms-negative .tp-ms-amt { color: var(--d1p-ink-muted, #555); }
.plan-detailed-one-pager .tp-ms-row.tp-ms-subtotal {
  margin-top: 3px;
  border-top: 1.5px solid var(--d1p-ink, #1a1a1a);
  border-bottom: none;
  padding-top: 6px;
  font-size: 11.5px;
  font-weight: 700;
}
.plan-detailed-one-pager .tp-ms-row.tp-ms-subtotal .tp-ms-lbl,
.plan-detailed-one-pager .tp-ms-row.tp-ms-subtotal .tp-ms-amt { font-weight: 700; }
.plan-detailed-one-pager .tp-ms-alloc-head {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--d1p-ink-faint, #999);
  margin-top: 8px;
  padding-bottom: 4px;
}
.plan-detailed-one-pager .tp-ms-row.tp-ms-alloc {
  font-size: 10px;
  padding: 3px 0;
}
.plan-detailed-one-pager .tp-ms-row.tp-ms-alloc .tp-ms-lbl {
  color: var(--d1p-ink-muted, #555);
  font-weight: 400;
}

/* ─── Projected Taxes mini-ledger (Full Plan tax recs card) ──────────── */
.plan-detailed-one-pager .tp-chart-ptx {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px 0 2px;
}
.plan-detailed-one-pager .tp-ptx-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 4px 0;
  font-size: 10.5px;
  color: var(--d1p-ink, #1a1a1a);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.plan-detailed-one-pager .tp-ptx-row:last-child { border-bottom: none; }
.plan-detailed-one-pager .tp-ptx-lbl { font-weight: 500; }
.plan-detailed-one-pager .tp-ptx-amt {
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.plan-detailed-one-pager .tp-ptx-row.tp-ptx-negative .tp-ptx-amt { color: var(--d1p-ink-muted, #555); }
/* Subtotal: Taxable Income */
.plan-detailed-one-pager .tp-ptx-row.tp-ptx-subtotal {
  margin-top: 3px;
  border-top: 1.5px solid var(--d1p-ink, #1a1a1a);
  border-bottom: none;
  padding-top: 6px;
  font-size: 11.5px;
  font-weight: 700;
}
.plan-detailed-one-pager .tp-ptx-row.tp-ptx-subtotal .tp-ptx-lbl,
.plan-detailed-one-pager .tp-ptx-row.tp-ptx-subtotal .tp-ptx-amt { font-weight: 700; }
/* Final: Remaining Liability or Refund */
.plan-detailed-one-pager .tp-ptx-row.tp-ptx-final {
  margin-top: 4px;
  border-top: 1.5px solid var(--brand-primary);
  border-bottom: none;
  padding-top: 7px;
  font-family: 'DM Serif Display', serif;
  font-size: 14px;
  letter-spacing: -0.1px;
}
.plan-detailed-one-pager .tp-ptx-row.tp-ptx-final .tp-ptx-amt {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
}
.plan-detailed-one-pager .tp-ptx-row.tp-ptx-owe    .tp-ptx-amt { color: #a05050; }
.plan-detailed-one-pager .tp-ptx-row.tp-ptx-refund .tp-ptx-amt { color: #4a7c5f; }

/* ─── College: per-child progress bars ─────────────────────────────────── */
.plan-detailed-one-pager .tp-chart-college {
  display: flex; flex-direction: column; gap: 6px;
}
.plan-detailed-one-pager .tp-college-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10.5px;
  margin-bottom: 2px;
}
.plan-detailed-one-pager .tp-college-name {
  font-weight: 600;
  color: var(--d1p-ink, #1a1a1a);
}
.plan-detailed-one-pager .tp-college-meta {
  font-size: 10px;
  color: var(--d1p-ink-muted, #555);
}
.plan-detailed-one-pager .tp-college-track {
  display: block; height: 6px;
  background: rgba(0,0,0,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.plan-detailed-one-pager .tp-college-fill { display: block; height: 100%; }

/* ─── Business: value + % of net worth ─────────────────────────────────── */
.plan-detailed-one-pager .tp-chart-biz {
  text-align: center;
  padding: 4px 0;
}
.plan-detailed-one-pager .tp-biz-val {
  font-family: 'DM Serif Display', serif;
  font-size: 22px; line-height: 1;
  color: var(--d1p-ink, #1a1a1a);
}
.plan-detailed-one-pager .tp-biz-lbl {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d1p-ink-muted, #555);
  margin-top: 3px;
}
.plan-detailed-one-pager .tp-biz-pct {
  font-size: 10px;
  color: var(--d1p-ink-muted, #555);
  margin-top: 4px;
}

/* ─── Page 2 footer band: Completed Last Year strip ──────────────────── */
.plan-detailed-one-pager .tp-completed-section {
  padding: 16px 44px;
  background: #fff;
  border-top: 1px solid var(--d1p-rule, #e8e8e6);
}
.plan-detailed-one-pager .tp-completed-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 24px;
  row-gap: 5px;
}
.plan-detailed-one-pager .tp-completed-grid .item {
  font-size: 11px;
  line-height: 1.4;
  color: var(--d1p-ink-muted, #555);
  padding: 3px 0 3px 18px;
  position: relative;
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, 0.18);
  text-decoration-thickness: 1px;
}
.plan-detailed-one-pager .tp-completed-grid .item::before {
  content: '✓'; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  color: var(--d1p-status-on, #4a7c5f);
  font-weight: 700; font-size: 11px;
  text-decoration: none;
}

/* filing-status caption under the tax bracket bars */
.tp-chart-tax-filing { font-size: 8.5px; color: #aaa; margin-top: 6px; letter-spacing: 0.03em; }