/* RETT - Brooklyn Multi-Year Tax Strategy Projector
   BrookHaven theme: light paper background, navy ink, blue accent.
   Color tokens defined in :root below; legacy dark-theme rules
   farther down get overridden by the BROOKHAVEN OVERRIDES block at
   the bottom of this file. */

:root {
  /* RETT Brand Palette (Phase 1 uplift, sampled from the printed
     trade-booth + leave-behind visual baseline). The legacy
     --bh-* tokens still resolve so existing components don't break;
     they're remapped to the RETT-branded equivalents.

     --rett-navy      — dominant card/heading background (replaces
                         the prior purple-navy #0a1d3d with the
                         true blue-navy from the booth wall).
     --rett-navy-soft — hover/highlight tier of the navy.
     --rett-blue      — saturated chart-icon / CTA accent.
     --rett-cyan      — light-blue chart accent (used in the wordmark
                         glyph + secondary chart bars).
     --rett-amber     — gold of the numbered step circles + chart bars.
                         Use sparingly for "this matters" moments. */
  /* Final brand tokens per the audit handoff. Sampled to match the
     three booth marketing pieces (front, "1031 Alternative" variant,
     full-page infographic). Colors below are the canonical source
     of truth; legacy --bh-* aliases below remap to these. */
  --rett-navy:       #0B1B3A;  /* primary backgrounds, headers, CTAs */
  --rett-navy-2:     #122A55;  /* gradient pair to navy */
  --rett-navy-soft:  #142a52;  /* soft hover/highlight tier */
  --rett-blue:       #1F6FEB;  /* booth icons + accents (brighter than prior cobalt) */
  --rett-blue-soft:  #4287f0;
  --rett-blue-light: #DCE9FA;  /* tinted bullet boxes, selected tab fill */
  --rett-cyan:       #5BA9FF;  /* uppercase mono section tags, secondary accent */
  --rett-bg:         #F4F7FB;  /* page background gradient top */
  /* Accent "pop" color — replaces the prior booth orange (#E07B2A).
     Used for numbered step circles, selected strategy borders, the
     Interested button, the donut "tax owed" slice, and the Tax
     Baseline delta tile. --rett-amber + --bh-yellow are kept as
     aliases so existing rules resolve without renaming class hooks. */
  --rett-warning:    #5BA9FF;
  --rett-amber:      var(--rett-warning);
  --rett-amber-soft: #8fc6ff;
  --rett-success:    #1F8A4C;  /* green selected, savings deltas */
  --rett-danger:     #C0392B;  /* "no planning" walk-away figure */

  /* Legacy BrookHaven aliases — kept so existing rules keep
     compiling. Each maps to the closest RETT brand counterpart. */
  --bh-trusted:      var(--rett-navy);
  --bh-trusted-soft: var(--rett-navy-soft);
  --bh-blue:         var(--rett-blue);
  --bh-blue-deep:    var(--rett-blue);
  --bh-powder:       var(--rett-cyan);
  --bh-yellow:       var(--rett-amber);

  --ink:        var(--rett-navy);
  --ink-soft:   #1d3460;
  --paper:      #fbfcfe;
  --paper-cool: #f0f4fa;
  --paper-warm: #e9eff8;
  --rule:       #d8e1ec;  /* softer dividers (was #cfdae8) */
  --rule-soft:  #ebf0f7;  /* even softer subtle divider (was #e2e9f2) */
  --muted:      #6B7A99;  /* warmer blue-gray that harmonizes with --rett-navy (was #5b6680, slightly cool/purple) */
  --green:      #2d8659;
  --green-soft: #4ba376;
  --red:        #c44545;
  /* "Cushion" shadows (advisor 2026-05-29): three soft layers — a tight
     contact shadow, a medium ambient, and a wide soft halo — so cards feel
     gently bubbled out / floating rather than sitting flat on the surface.
     Same dark-blue tint as before; just layered for depth. */
  --shadow:    0 2px 4px rgba(14,34,64,0.06),
               0 6px 16px rgba(14,34,64,0.07),
               0 20px 40px rgba(14,34,64,0.05);
  --shadow-lg: 0 4px 10px rgba(14,34,64,0.08),
               0 12px 28px rgba(14,34,64,0.10),
               0 32px 60px rgba(14,34,64,0.08);

  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-mono: 'JetBrains Mono', "SF Mono", Monaco, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Accessibility helpers */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #2c5aa0;
    color: #fff;
    padding: 10px 16px;
    z-index: 1000;
    text-decoration: none;
    font-weight: 600;
}
.skip-link:focus {
    left: 8px;
    top: 8px;
}

/* Visible keyboard focus ring for buttons and tabs */
.nav-tab:focus-visible,
.btn:focus-visible,
button:focus-visible {
    outline: 2px solid #5fa8ff;
    outline-offset: 2px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    background: #0a1929;
    color: #e6edf3;
    line-height: 1.5;
    min-height: 100vh;
}

.header {
    background: linear-gradient(135deg, #1a3a6e 0%, #2c5aa0 100%);
    padding: 20px 40px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.header h1 {
    font-size: 1.8em;
    letter-spacing: 4px;
    font-weight: 800;
    color: #ffffff;
}
/* Trademark superscript on the RETT wordmark — small, top-right of the
   final letter, no extra letter-spacing to keep it tight. */
.header h1 .rett-tm {
    font-size: 0.32em;
    letter-spacing: 0;
    margin-left: 2px;
    vertical-align: super;
    font-weight: 600;
    color: #b3d4ff;
}

.header h2 {
    font-size: 0.95em;
    font-weight: 400;
    color: #b3d4ff;
    margin: 0;
}

.app-banner {
    padding: 12px 40px;
    font-size: 0.92em;
    font-weight: 500;
    border-bottom: 1px solid;
}
.app-banner.banner-error {
    background: #4a1414;
    color: #fca5a5;
    border-bottom-color: #7f1d1d;
}
.app-banner.banner-warning {
    background: #4a3a14;
    color: #fde68a;
    border-bottom-color: #92400e;
}
.app-banner.banner-info {
    background: #0f3a5a;
    color: #b3d4ff;
    border-bottom-color: #1a3a6e;
}
.app-banner .banner-close {
    float: right;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 700;
    padding: 0 6px;
    line-height: 1;
}

.nav {
    background: #0d2240;
    display: flex;
    border-bottom: 1px solid #1a3a6e;
}

.nav-tab {
    padding: 14px 24px;
    cursor: pointer;
    color: #8899aa;
    font-size: 0.95em;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
}

.nav-tab:hover { color: #b3d4ff; }
.nav-tab.active { color: #5fa8ff; border-bottom-color: #5fa8ff; }

/* Pill toggle rows (Page 2 — Leverage and Horizon).
   Visual segmented-control replacement for the legacy <select>s; the
   underlying selects still exist (hidden) and remain the source of truth. */
.pill-toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    align-items: center;
    margin-bottom: 18px;
    padding: 10px 14px;
    background: rgba(13, 34, 64, 0.4);
    border: 1px solid rgba(26, 58, 110, 0.6);
    border-radius: 6px;
}
.pill-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pill-group-label {
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8fb3e0;
    font-weight: 600;
}
.pill-group-hint {
    font-size: 0.72em;
    color: #5fd97e;
    font-style: italic;
    letter-spacing: 0.04em;
}
.pill-group-hint[hidden] { display: none; }

/* `.pill-group { display: flex }` overrides the user-agent's
   `[hidden] { display: none }` rule because they have equal specificity
   and the class rule comes later in the cascade. Restore the hidden
   semantics explicitly so the slider really disappears when Schwab
   takes over with the preset pills. */
.pill-group[hidden] { display: none !important; }

/* "Revert to optimized" sits in its own bar ABOVE the toggle row so it's
   the first thing the user sees after they override auto-pick. Hidden
   until needed. */
.revert-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}
.btn-revert {
    font-size: 0.85em;
    padding: 6px 14px;
}
.btn-revert[hidden] { display: none; }

/* Locked strategy display — shown in place of the strategy <select>
   when the custodian (Schwab) only permits one strategy. */
.strategy-locked {
    margin: 6px 0 0 0;
    padding: 8px 12px;
    background: rgba(15, 76, 129, 0.18);
    border: 1px solid rgba(26, 58, 110, 0.6);
    border-radius: 4px;
    color: #cfe1ff;
    font-weight: 600;
}
.strategy-locked[hidden] { display: none; }

/* Inline error text under an input — used by the withhold-amount
   field when the entered amount exceeds the sale price. */
.error-text {
    margin: 4px 0 0 0;
    font-size: 0.85em;
    color: #ff6b6b;
    font-weight: 500;
}
.error-text[hidden] { display: none; }
/* The conditional withhold-amount-group is .input-group, so the
   plain `hidden` attribute works (no flex override on .input-group).
   Adding an explicit rule for safety. */
.input-group[hidden] { display: none !important; }
.strategy-locked .muted {
    font-weight: 400;
    color: #8fb3e0;
    margin-left: 4px;
}

.pill-track {
    display: inline-flex;
    background: rgba(15, 76, 129, 0.25);
    border: 1px solid #1a3a6e;
    border-radius: 6px;
    padding: 3px;
    gap: 2px;
}
.pill {
    appearance: none;
    border: none;
    background: transparent;
    color: #b3d4ff;
    padding: 6px 14px;
    font-size: 0.88em;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.pill:hover { color: #ffffff; background: rgba(95, 168, 255, 0.1); }
.pill.active {
    background: #2c5aa0;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.pill:focus-visible {
    outline: 2px solid #5fa8ff;
    outline-offset: 1px;
}
.pill-empty { color: #64748b; font-size: 0.85em; padding: 6px 10px; }

@media (max-width: 768px) {
    .pill-toggle-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .pill-group { justify-content: space-between; }
    .pill { padding: 6px 10px; font-size: 0.82em; }
}

/* Sticky savings ribbon — anchors the bottom-line numbers while the user
   scrolls. Pattern from Instead (Corvee) / Holistiplan. */
.savings-ribbon {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #1a3a6e;
    border: 1px solid #1a3a6e;
    border-radius: 6px;
    padding: 0;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.savings-ribbon.ribbon-4col { grid-template-columns: repeat(4, 1fr); }

/* Section-label header on the sticky ribbon — spans the full grid
   row above the tiles when the ribbon reflects a specific scenario.
   Uses grid-column: 1/-1 so the existing repeat(N, 1fr) tile layout
   stays intact (no display:block hack, no width-calc fragility). */
.savings-ribbon .ribbon-section-label {
  grid-column: 1 / -1;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5fa8ff;
  background: rgba(13, 34, 64, 0.85);
  padding: 6px 12px;
  border-bottom: 1px solid rgba(95, 168, 255, 0.18);
}

/* Leverage slider — replaces the leverage pill row. Auto-positions
   to whatever short% maximizes net savings. Drag to override. */
.leverage-slider-group {
    flex: 1 1 320px;
    min-width: 280px;
}
.leverage-slider-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}
.leverage-slider-wrap input[type="range"] {
    flex: 1;
    accent-color: #5fa8ff;
    height: 22px;
    cursor: pointer;
}
.leverage-slider-readout {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    min-width: 130px;
    font-size: 0.82em;
    line-height: 1.2;
}
.leverage-slider-readout strong {
    color: #ffffff;
    font-size: 1.05em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.leverage-slider-readout span {
    color: #8fb3e0;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .leverage-slider-group { flex-basis: 100%; }
    .leverage-slider-readout { min-width: 100px; }
}

/* Custom leverage section (Page 2). Toggleable expansion below the
   leverage / horizon / recognition pill row. */
.variable-leverage-section {
    margin: 12px 0 18px;
    padding: 12px 14px;
    background: rgba(13, 34, 64, 0.4);
    border: 1px solid rgba(26, 58, 110, 0.6);
    border-radius: 6px;
}
.variable-leverage-section .checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #b3d4ff;
    font-size: 0.9em;
    cursor: pointer;
}
.variable-leverage-section .checkbox-row input[type="checkbox"] {
    margin: 0;
    accent-color: #5fa8ff;
}
.variable-leverage-section .custom-leverage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 18px;
    margin-top: 12px;
}
.variable-leverage-section .custom-leverage-grid output {
    background: rgba(15, 76, 129, 0.25);
    border: 1px solid #1a3a6e;
    border-radius: 4px;
    padding: 8px 10px;
    color: #e6edf3;
    font-size: 0.95em;
    font-variant-numeric: tabular-nums;
}
.variable-leverage-section .subtitle.muted {
    margin-top: 8px;
    font-size: 0.82em;
}
.savings-ribbon[hidden] { display: none; }

.ribbon-tile {
    background: linear-gradient(135deg, rgba(15, 76, 129, 0.6) 0%, rgba(13, 34, 64, 0.85) 100%);
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.ribbon-tile.tile-positive { box-shadow: inset 3px 0 0 #5fd97e; }
.ribbon-tile.tile-negative { box-shadow: inset 3px 0 0 #f87171; }

.ribbon-label {
    font-size: 0.7em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8fb3e0;
    font-weight: 600;
}
.ribbon-value {
    font-size: 1.25em;
    font-weight: 700;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}
.ribbon-tile.tile-positive .ribbon-value { color: #5fd97e; }
.ribbon-tile.tile-negative .ribbon-value { color: #f87171; }

@media (max-width: 768px) {
    .savings-ribbon { grid-template-columns: 1fr; }
    .ribbon-tile { padding: 8px 12px; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; }
    .ribbon-value { font-size: 1.05em; }
}

/* Sub-tabs (within a page) — smaller, secondary tier */
.subnav {
    display: flex;
    gap: 2px;
    background: rgba(13, 34, 64, 0.4);
    border-bottom: 1px solid #1a3a6e;
    margin-bottom: 18px;
}
.subnav-tab {
    background: transparent;
    border: none;
    padding: 10px 18px;
    color: #8899aa;
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
}
.subnav-tab:hover { color: #b3d4ff; }
.subnav-tab.active {
    color: #5fa8ff;
    border-bottom-color: #5fa8ff;
}

.subpage { display: none; }
.subpage.active { display: block; }

.page {
    display: none;
    padding: 30px 40px;
    max-width: 1200px;
    margin: 0 auto;
}
.page.active { display: block; }

.page h2 {
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 8px;
    color: #ffffff;
}

.subtitle {
    color: #8899aa;
    margin-bottom: 20px;
    font-size: 0.95em;
}

.section-title {
    font-size: 1.05em;
    font-weight: 700;
    color: #5fa8ff;
    margin-top: 24px;
    margin-bottom: 12px;
    padding-left: 10px;
    border-left: 3px solid #5fa8ff;
}

/* Case management controls on Page 1 (top section). The case-actions
   container is also an .input-group (sets flex-direction: column), so
   we explicitly switch to row layout for the action buttons. */
.case-controls .case-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}
.case-controls .case-actions .btn {
    padding: 8px 14px;
    font-size: 0.88em;
}
.case-status {
    margin-left: auto;
    color: #8fb3e0;
    font-size: 0.85em;
    font-style: italic;
}
.case-status.case-loaded { color: #5fd97e; font-weight: 600; font-style: normal; }
.case-status.case-dirty  { color: #fbbf24; font-style: normal; }
@media (max-width: 768px) {
    .case-controls .case-actions { flex-direction: column; align-items: stretch; }
    .case-controls .case-actions .btn { width: 100%; }
    .case-status { margin-left: 0; text-align: center; }
}

/* Form section cards on Page 1. Wrap each section's inputs in a subtle
   card to give visual grouping. Pattern: Holistiplan/RightCapital both
   group form fields into cards rather than presenting one long form. */
#page-inputs .input-grid {
    background: rgba(13, 34, 64, 0.4);
    border: 1px solid rgba(26, 58, 110, 0.6);
    border-radius: 6px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
#page-inputs .input-grid + .section-title {
    margin-top: 16px;
}
@media (max-width: 768px) {
    #page-inputs .input-grid {
        padding: 12px 14px;
    }
}

.input-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 18px;
    margin-bottom: 8px;
}

.input-group { display: flex; flex-direction: column; }

.input-group label {
    font-size: 0.85em;
    color: #b3d4ff;
    margin-bottom: 5px;
}

.input-group input,
.input-group select {
    background: #0d2240;
    border: 1px solid #1a3a6e;
    border-radius: 4px;
    padding: 8px 10px;
    color: #e6edf3;
    font-size: 0.95em;
    transition: border-color 0.15s ease;
}

.input-group input:focus,
.input-group select:focus {
    outline: none;
    border-color: #5fa8ff;
}

.input-group input.input-error,
.input-group select.input-error,
input.input-error,
select.input-error {
    border-color: #f87171 !important;
    background: #2a1414;
}

.btn {
    padding: 10px 20px;
    border-radius: 4px;
    border: none;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-primary { background: #2c5aa0; color: #ffffff; }
.btn-primary:hover { background: #3a72c4; }
.btn-secondary { background: #1a3a6e; color: #b3d4ff; }
.btn-secondary:hover { background: #234a8a; }

#projection-output { margin-top: 20px; }

.projection-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 0.9em;
}

.projection-table th,
.projection-table td {
    padding: 10px 12px;
    text-align: right;
    border-bottom: 1px solid #1a3a6e;
}

.projection-table th {
    background: #0d2240;
    color: #5fa8ff;
    font-weight: 700;
    text-align: right;
}

.projection-table th:first-child,
.projection-table td:first-child {
    text-align: left;
    font-weight: 600;
}

.projection-summary {
    background: #0d2240;
    padding: 18px 22px;
    border-radius: 6px;
    border-left: 4px solid #5fa8ff;
    margin-bottom: 20px;
}

.projection-summary h3 {
    color: #5fa8ff;
    font-size: 1.1em;
    margin-bottom: 8px;
}

/* ============ Recommendation panel ============ */
.recommendation {
    background: #0f172a;
    color: #e2e8f0;
    padding: 22px 26px;
    border-radius: 8px;
    border-left: 4px solid #5fa8ff;
    margin-top: 24px;
}
.recommendation h3 { color: #5fa8ff; font-size: 1.2em; margin-bottom: 12px; }
.recommendation h4 { color: #93c5fd; font-size: 1.0em; margin: 16px 0 8px; }
.rec-row { margin: 4px 0; }
.rec-good { color: #4ade80; font-weight: 600; margin: 8px 0; }
.rec-warning { color: #fbbf24; margin: 8px 0; }
.rec-error { color: #f87171; margin: 8px 0; }
.rec-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.rec-table th, .rec-table td { padding: 6px 10px; text-align: right; border-bottom: 1px solid #1e293b; }
.rec-table th { color: #93c5fd; text-align: right; font-weight: 600; }
.rec-table th:first-child, .rec-table td:first-child { text-align: left; }
.muted { color: #64748b; font-size: 0.85em; font-weight: 400; }


/* ===== Tax Comparison Table (Brooklyn Allocator tab) ===== */
.tax-comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 0.9em;
}
.tax-comparison-table th,
.tax-comparison-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-align: right;
}
.tax-comparison-table th:first-child,
.tax-comparison-table td:first-child {
  text-align: left;
}
.tax-comparison-table thead th {
  background: rgba(15,76,129,0.5);
  font-weight: 600;
}
.tax-comparison-table .grp-head td {
  background: rgba(15,76,129,0.4);
  font-weight: 600;
  text-align: left;
  padding-top: 12px;
}
.tax-comparison-table .row-total td {
  background: rgba(15,76,129,0.2);
  font-weight: 600;
}
.tax-comparison-table .row-savings td {
  background: rgba(46,160,67,0.25);
  font-weight: 700;
  color: #5fd97e;
}
.tax-savings-summary {
  color: #fff;
  font-size: 1.05em;
}




/* ============================================================ */
/* RETT Strategy Summary tables (Page 3) - unified styling      */
/* ============================================================ */

.rett-table-wrap {
  background: rgba(13, 34, 64, 0.6);
  border: 1px solid #1a3a6e;
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 8px;
  overflow-x: auto;
}

.rett-kv-table,
.rett-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
}

.rett-kv-table td,
.rett-data-table td,
.rett-data-table th {
  padding: 7px 12px;
  border-bottom: 1px solid rgba(95, 168, 255, 0.08);
}

.rett-kv-table tr:last-child td,
.rett-data-table tbody tr:last-child td {
  border-bottom: none;
}

.rett-kv-table td:first-child {
  color: #b3d4ff;
  text-align: left;
  font-weight: 500;
  width: 60%;
}
.rett-kv-table td:last-child {
  color: #ffffff;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.rett-data-table thead th {
  color: #5fa8ff;
  background: rgba(15, 76, 129, 0.35);
  text-align: right;
  font-weight: 700;
  border-bottom: 1px solid #1a3a6e;
}
.rett-data-table th:first-child,
.rett-data-table td:first-child {
  text-align: left;
}
.rett-data-table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #e6edf3;
}

.rett-total-row td {
  background: rgba(15, 76, 129, 0.25);
  color: #ffffff !important;
  font-weight: 700;
  border-top: 1px solid rgba(95, 168, 255, 0.25);
}

.rett-savings-row td {
  background: rgba(46, 160, 67, 0.18);
  color: #5fd97e !important;
  font-weight: 700;
}

.rett-savings-cell {
  color: #5fd97e;
  font-weight: 600;
}

/* Semantic delta colors — applied to the Savings (Δ) cell so a CPA reads
   green = strategy helps this year, red = strategy hurts this year. */
.rett-delta-positive { color: #5fd97e !important; }
.rett-delta-negative { color: #f87171 !important; }

/* Frozen first column (Year) on the projection details table. Lets a wide
   table scroll horizontally without losing the row label. */
.rett-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rett-data-table-frozen th:first-child,
.rett-data-table-frozen td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: rgba(13, 34, 64, 0.95);
}
.rett-data-table-frozen thead th:first-child {
  background: rgba(15, 76, 129, 0.95);
}
.rett-data-table-frozen .rett-total-row td:first-child {
  background: rgba(15, 76, 129, 0.85);
}
.rett-data-table-frozen th,
.rett-data-table-frozen td {
  white-space: nowrap;
}

/* Column-header cursor hint for the new tooltip (title=) hover affordance. */
.rett-data-table-frozen thead th[title] {
  cursor: help;
  text-decoration: underline dotted rgba(95, 168, 255, 0.5);
  text-underline-offset: 3px;
}

/* Narrative card (top of Page 2 Summary). Pattern: Holistiplan
   Custom Client Observations + RightCapital Insight cards. */
.rett-narrative {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    align-items: flex-start;
    background: rgba(13, 34, 64, 0.55);
    border: 1px solid #1a3a6e;
    border-left: 4px solid #5fa8ff;
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 16px;
}
.rett-narrative.narrative-positive { border-left-color: #5fd97e; }
.rett-narrative.narrative-negative { border-left-color: #f87171; }
.rett-narrative.narrative-neutral { border-left-color: #fbbf24; }

.narrative-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(95, 168, 255, 0.18);
    color: #5fa8ff;
    font-size: 1.4em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rett-narrative.narrative-positive .narrative-icon {
    background: rgba(95, 217, 126, 0.18);
    color: #5fd97e;
}
.rett-narrative.narrative-negative .narrative-icon {
    background: rgba(248, 113, 113, 0.18);
    color: #f87171;
}
.rett-narrative.narrative-neutral .narrative-icon {
    background: rgba(251, 191, 36, 0.18);
    color: #fbbf24;
}

.narrative-body p {
    color: #e6edf3;
    margin: 0 0 6px;
    font-size: 0.95em;
    line-height: 1.5;
}
.narrative-body p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
    .rett-narrative { grid-template-columns: 28px 1fr; gap: 10px; padding: 12px 14px; }
    .narrative-icon { width: 28px; height: 28px; font-size: 1.1em; }
    .narrative-body p { font-size: 0.88em; }
}

/* Hero savings tile (top of Page 3 / Strategy Summary).
   One dominant number — pattern borrowed from Holistiplan / Instead. */
.rett-hero-tile {
    background: linear-gradient(135deg, rgba(15, 76, 129, 0.55) 0%, rgba(13, 34, 64, 0.7) 100%);
    border: 1px solid #1a3a6e;
    border-left: 4px solid #5fa8ff;
    border-radius: 8px;
    padding: 26px 32px;
    margin: 8px 0 20px;
    text-align: center;
}
.rett-hero-tile.hero-positive { border-left-color: #5fd97e; }
.rett-hero-tile.hero-negative { border-left-color: #f87171; }

.rett-hero-label {
    font-size: 0.82em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8fb3e0;
    margin-bottom: 8px;
}
.rett-hero-value {
    font-size: 3.4em;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.rett-hero-tile.hero-positive .rett-hero-value { color: #5fd97e; }
.rett-hero-tile.hero-negative .rett-hero-value { color: #f87171; }

.rett-hero-sub {
    font-size: 0.92em;
    color: #b3d4ff;
    margin-top: 10px;
}
.rett-hero-sub strong { color: #ffffff; font-weight: 700; }

@media (max-width: 768px) {
    .rett-hero-tile { padding: 20px 18px; }
    .rett-hero-value { font-size: 2.4em; }
    .rett-hero-sub { font-size: 0.85em; }
}

/* ============ Tax Baseline — three-block delta display ============
   Reads left-to-right as a math equation:
   [ Without the Sale ]  +  [ Tax Due to the Sale ]  =  [ Total Tax ]
   Visual crescendo from muted (left) → accent (middle) → hero (right)
   so the eye terminates on the total. The middle tile carries the
   accent border because Blake's framing is "this is the new cost the
   sale introduced — and the strategies are designed to reduce it." */
.baseline-trio {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    margin: 12px 0 24px;
    flex-wrap: nowrap;
}
.baseline-tile {
    flex: 1 1 0;
    min-width: 0;
    background: linear-gradient(135deg, rgba(15, 76, 129, 0.30) 0%, rgba(13, 34, 64, 0.55) 100%);
    border: 1px solid #1a3a6e;
    border-left: 3px solid #2c4f86;
    border-radius: 10px;
    padding: 32px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.baseline-tile--without {
    /* Context: what they'd already owe. Slightly less saturated than
       delta/total but readable — no opacity fade so text stays sharp. */
    background: linear-gradient(135deg, rgba(15, 76, 129, 0.45) 0%, rgba(13, 34, 64, 0.65) 100%);
}
.baseline-tile--delta {
    /* The new cost. Accent border draws the eye. */
    border-left: 4px solid var(--rett-warning);
    background: linear-gradient(135deg, rgba(15, 76, 129, 0.55) 0%, rgba(13, 34, 64, 0.75) 100%);
}
.baseline-tile--total {
    /* The answer. Full hero treatment. */
    background: linear-gradient(135deg, rgba(15, 76, 129, 0.65) 0%, rgba(13, 34, 64, 0.88) 100%);
    border-left: 5px solid var(--rett-warning);
    box-shadow: 0 4px 18px rgba(91, 169, 255, 0.18);
}
.baseline-tile-label {
    font-size: 0.95em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 16px;
    font-weight: 800;
}
.baseline-tile-value {
    /* Sized to fit ~10-character dollar values ("$1,535,026") within the
       313px content area when 3 tiles are laid out side-by-side at typical
       desktop widths. Tabular-nums + tight letter-spacing keep digit
       columns aligned and compact. overflow:hidden guards against
       overflow for $10M+ numbers — they will clip rather than spill. */
    font-size: 2.8em;
    font-weight: 800;
    line-height: 1.05;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    overflow: hidden;
}
.baseline-tile--delta .baseline-tile-value {
    font-size: 3.2em;
    color: #ffffff;
}
.baseline-tile--total .baseline-tile-value {
    font-size: 3.6em;
    color: #ffffff;
    /* Subtle black outline so the hero number reads as embossed
       against the navy gradient — adds depth without looking cartoonish. */
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.5),
        0 0 1px rgba(0, 0, 0, 0.7);
}
/* Sublines hidden per spec — three numbers, no clutter. The values
   are still computed and live in the DOM in case a future view wants
   them; CSS-only hide keeps the JS render path unchanged. */
.baseline-tile-sub {
    display: none;
}
.baseline-op {
    align-self: center;
    font-size: 2.6em;
    font-weight: 600;
    color: #6b8bba;
    padding: 0 4px;
    user-select: none;
}
.baseline-table-details {
    margin-top: 18px;
}
.baseline-table-details > summary {
    cursor: pointer;
    font-size: 0.88em;
    color: #6b8bba;
    padding: 8px 12px;
    border: 1px dashed #2c4f86;
    border-radius: 6px;
    display: inline-block;
    list-style: none;
}
.baseline-table-details > summary::-webkit-details-marker { display: none; }
.baseline-table-details > summary::before { content: '▸ '; }
.baseline-table-details[open] > summary::before { content: '▾ '; }
.baseline-table-details > summary:hover { color: #8fb3e0; border-color: var(--rett-warning); }

@media (max-width: 900px) {
    .baseline-trio { flex-wrap: wrap; }
    .baseline-tile { flex: 1 1 100%; padding: 26px 22px; }
    .baseline-op { width: 100%; padding: 6px 0; font-size: 2.4em; }
    .baseline-tile-value { font-size: 2.6em; }
    .baseline-tile--delta .baseline-tile-value { font-size: 3.0em; }
    .baseline-tile--total .baseline-tile-value { font-size: 3.4em; }
}

/* ============ Multi-property scaffold (Q1) ============
   Each property is a self-contained block. Property 1 has no header
   (looks like a single sale today); Properties 2-5 have a small
   header with the property number + Remove button. The + Additional
   Real Estate Sale button sits below all property blocks. The shared
   Strategy Implementation Date sits below the + button. */
.property-block {
    margin: 0 0 14px;
}
.property-block + .property-block {
    /* Visible separator between property blocks — subtle dashed line
       so the advisor can see where one property ends and the next begins
       without overpowering the form. */
    border-top: 1px dashed #c4d2e8;
    padding-top: 14px;
}
.property-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.property-block-title {
    margin: 0;
    font-size: 0.85em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4a5e85;
    font-weight: 700;
}
.property-remove-btn {
    background: transparent;
    border: 1px solid #c4d2e8;
    color: #6b8bba;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8em;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.property-remove-btn:hover {
    border-color: var(--rett-warning);
    color: var(--rett-warning);
}
.property-add-row {
    margin: 16px 0 8px;
}
.property-add-btn {
    width: 100%;
    background: transparent;
    border: 1px dashed var(--rett-warning);
    color: var(--rett-warning);
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-style 0.15s;
}
.property-add-btn:hover {
    background: rgba(91, 169, 255, 0.08);
    border-style: solid;
}
/* Notice that surfaces when two or more property sales fall in
   different calendar years. The strategy engine currently
   aggregates all gain into the earliest year — this banner makes
   the limitation visible to the advisor so they don't unknowingly
   present a year-blind projection. controls.js toggles `hidden`
   on the element based on the dates entered. */
.multi-year-sale-notice {
    margin-top: 14px;
    padding: 12px 16px;
    background: rgba(91, 169, 255, 0.08);
    border: 1px solid rgba(91, 169, 255, 0.35);
    border-left: 4px solid var(--rett-warning, #5BA9FF);
    border-radius: 4px;
    color: var(--ink);
    font-size: 0.88em;
    line-height: 1.45;
}
.multi-year-sale-notice strong { color: var(--rett-warning, #5BA9FF); }
.property-strategy-date-row {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}
/* Q6: Visual separator before the proceeds questions (withhold +
   cover-tax) — sits below the property blocks + strategy impl date
   inside the merged Section 03. */
.property-proceeds-divider {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}

/* Q4: Hide Property 1 header by default (single-property scenario reads
   like one sale with no numbered label). Shown only when 2+ properties
   are active, set by baseline-table.js / controls.js when the user
   clicks "+ Additional Real Estate Sale". */
#property-1 .property-block-header { display: none; }
body.rett-multi-property #property-1 .property-block-header { display: flex; }
body.rett-multi-property #property-1 .property-remove-btn { display: none; }
/* Q4: Insert a header into Property 1 dynamically when multi-property
   mode activates. Defined here so the controls.js JS just injects the
   element; CSS handles visibility. */

/* Q3: Per-property tax breakdown panel — inline expand below the three
   baseline tiles. Toggled by double-click on the middle delta tile. */
.baseline-tile--has-breakdown {
    cursor: pointer;
    position: relative;
}
.baseline-tile--has-breakdown::after {
    content: '▾';
    position: absolute;
    bottom: 6px;
    right: 12px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85em;
    pointer-events: none;
}
.baseline-breakdown-panel {
    background: linear-gradient(135deg, rgba(15, 76, 129, 0.40) 0%, rgba(13, 34, 64, 0.62) 100%);
    border: 1px solid #1a3a6e;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 0 0 24px;
    max-width: 100%;
}
.baseline-breakdown-title {
    font-size: 0.78em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b3d4ff;
    margin-bottom: 10px;
    font-weight: 700;
}
.baseline-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.baseline-breakdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    color: #ffffff;
    font-size: 0.95em;
}
.baseline-breakdown-label {
    color: #d6e6f7;
}
.baseline-breakdown-amt {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rett-strategy-card {
  background: rgba(21, 101, 192, 0.15);
  border: 1px solid rgba(66, 165, 245, 0.3);
  border-radius: 8px;
  padding: 18px 22px;
  text-align: center;
  max-width: 380px;
  margin: 4px auto;
}
.rett-strategy-card-title {
  font-weight: 700;
  font-size: 1.05em;
  color: #90caf9;
  margin-bottom: 6px;
}
.rett-strategy-card-detail {
  font-size: 0.88em;
  color: #b0bec5;
  margin-bottom: 10px;
}
.rett-strategy-card-savings {
  font-size: 1.3em;
  font-weight: 700;
  color: #4fc3f7;
}

.rett-action-row {
  margin-top: 32px;
  display: flex;
  gap: 14px;
}

.page-title {
  font-size: 1.5em;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

/* ============================================================ */
/* RETT Multi-Year Projection Dashboard (Page 2)                */
/* ============================================================ */

.rett-dashboard {
  margin-top: 18px;
}

.rett-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.rett-kpi-tile {
  background: linear-gradient(135deg, rgba(15, 76, 129, 0.45) 0%, rgba(13, 34, 64, 0.65) 100%);
  border: 1px solid #1a3a6e;
  border-left: 3px solid #5fa8ff;
  border-radius: 6px;
  padding: 14px 18px;
}
.rett-kpi-tile.kpi-positive { border-left-color: #5fd97e; }
.rett-kpi-tile.kpi-negative { border-left-color: #f87171; }

.rett-kpi-label {
  font-size: 0.78em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8fb3e0;
  margin-bottom: 6px;
}
.rett-kpi-value {
  font-size: 1.5em;
  font-weight: 700;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.rett-kpi-tile.kpi-positive .rett-kpi-value { color: #5fd97e; }
.rett-kpi-tile.kpi-negative .rett-kpi-value { color: #f87171; }
.rett-kpi-sub {
  font-size: 0.78em;
  color: #8899aa;
  margin-top: 4px;
}

.rett-chart-wrap {
  background: rgba(13, 34, 64, 0.6);
  border: 1px solid #1a3a6e;
  border-radius: 6px;
  padding: 18px;
  margin-bottom: 18px;
}
.rett-chart-title {
  color: #5fa8ff;
  font-size: 0.95em;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rett-chart-legend {
  display: flex;
  gap: 14px;
  font-size: 0.82em;
  font-weight: 500;
  color: #b3d4ff;
}
.rett-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: -1px;
}
.swatch-without { background: #5fa8ff; }
.swatch-with { background: #2c5aa0; }
.swatch-cumulative { background: #5fd97e; }

.rett-chart-svg { width: 100%; height: auto; display: block; }
.rett-bar { transition: opacity 0.12s ease; cursor: pointer; }
.rett-bar:hover { opacity: 0.85; }

/* Floating bar tooltip — fixed to viewport, follows the cursor.
   Wired once by projection-dashboard-render.js; bars carry data-* attrs. */
.rett-bar-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  background: rgba(8, 24, 48, 0.96);
  color: #cfe1ff;
  border: 1px solid #5fa8ff;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 0.85em;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.rett-bar-tooltip strong {
  color: #5fa8ff;
  display: block;
  margin-bottom: 3px;
  font-weight: 700;
}

/* Strategy Comparison panel on Page 2: three scenarios side-by-side
   (sell now / delay close / structured sale). The highest-net row
   gets the rett-scenario-winner class for the colored highlight and
   "RECOMMENDED" badge. */
.rett-scenario-card {
  background: rgba(13, 34, 64, 0.6);
  border: 1px solid #1a3a6e;
  border-radius: 6px;
  padding: 18px;
  margin-bottom: 18px;
}
.rett-scenario-title {
  color: #5fa8ff;
  font-size: 1.05em;
  font-weight: 700;
  margin-bottom: 4px;
}
.rett-scenario-subtitle {
  font-size: 0.85em;
  color: #8fb3e0;
  margin-bottom: 12px;
}
.rett-scenario-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
}
.rett-scenario-table thead th {
  text-align: left;
  font-weight: 600;
  color: #8fb3e0;
  text-transform: uppercase;
  font-size: 0.78em;
  letter-spacing: 0.06em;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(95, 168, 255, 0.18);
}
.rett-scenario-table th.num,
.rett-scenario-table td.num {
  text-align: right;
  white-space: nowrap;
}
.rett-scenario-table tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(95, 168, 255, 0.08);
  color: #cfe1ff;
  vertical-align: top;
}
.rett-scenario-table tbody tr:last-child td { border-bottom: none; }
.rett-scenario-label {
  font-weight: 600;
  color: #cfe1ff;
  margin-bottom: 2px;
}
.rett-scenario-sub {
  font-size: 0.82em;
  color: #8fb3e0;
}
.rett-scenario-schedule {
  font-size: 0.82em;
  color: #d6e4f7;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.rett-scenario-winner {
  background: rgba(95, 217, 126, 0.08);
}
.rett-scenario-winner td:first-child {
  border-left: 3px solid #5fd97e;
}
.rett-scenario-winner td.num strong {
  color: #5fd97e;
}
.rett-scenario-badge {
  display: inline-block;
  background: #5fd97e;
  color: #0a1929;
  font-size: 0.65em;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: 1px;
}
.rett-scenario-badge-warn {
  background: #d9a05f;
  color: #0a1929;
}
.rett-scenario-net-negative td.num strong {
  color: #d96f6f;
}
/* Scenario rows are clickable — clicking activates the scenario in
   the dashboard below. Active scenario gets a stronger highlight than
   the recommendation. */
.rett-scenario-row { cursor: pointer; transition: background-color 0.15s ease; }
.rett-scenario-row:hover { background: rgba(95, 168, 255, 0.06); }
.rett-scenario-row:focus-visible {
  outline: 2px solid #5fa8ff;
  outline-offset: -2px;
}
.rett-scenario-active {
  background: rgba(95, 168, 255, 0.14) !important;
}
.rett-scenario-active td:first-child {
  border-left: 3px solid #5fa8ff;
}
.rett-scenario-active-badge {
  display: inline-block;
  background: #5fa8ff;
  color: #0a1929;
  font-size: 0.65em;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: 1px;
}
/* Checkbox column on scenario table — the visible toggle that drives
   which dashboard sections render below. */
.rett-scenario-table th.rett-scenario-check,
.rett-scenario-table td.rett-scenario-check {
  width: 32px;
  text-align: center;
  padding-right: 0;
}
.rett-scenario-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #5fa8ff;
}
.rett-scenario-checked td:first-child {
  border-left: 3px solid #5fa8ff;
}
.rett-scenario-checked.rett-scenario-winner td:first-child {
  /* Winner + checked = green border (winner takes priority — the
     RECOMMENDED state is louder than the user's selection when both). */
  border-left: 3px solid #5fd97e;
}

/* Dashboard sections — one per checked scenario. Each carries its own
   labeled header so multiple stacked sections stay readable. */
.rett-scenario-section {
  border: 1px solid rgba(95, 168, 255, 0.18);
  border-radius: 6px;
  padding: 16px 18px 18px;
  margin-bottom: 18px;
  background: rgba(13, 34, 64, 0.4);
}
.rett-scenario-section + .rett-scenario-section {
  margin-top: 8px;
}
.rett-scenario-section-header {
  font-size: 1.05em;
  font-weight: 700;
  color: #5fa8ff;
  letter-spacing: 0.02em;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(95, 168, 255, 0.18);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  justify-content: space-between;
}
.rett-scenario-section-config {
  font-size: 0.78em;
  font-weight: 500;
  color: #8fb3e0;
  letter-spacing: 0;
}

/* Per-section controls bar — horizon pills, leverage slider/pills,
   revert button. Sits between section header and KPI tiles. */
.rett-section-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding: 8px 0 14px 0;
  margin-bottom: 8px;
  border-bottom: 1px dashed rgba(95, 168, 255, 0.12);
}
.rett-section-pillgroup {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rett-section-pillgroup .pill-group-label {
  font-size: 0.72em;
  font-weight: 600;
  color: #8fb3e0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rett-section-pillgroup .pill-track {
  display: inline-flex;
  background: rgba(13, 34, 64, 0.7);
  border: 1px solid rgba(95, 168, 255, 0.18);
  border-radius: 5px;
  padding: 2px;
  gap: 1px;
}
.rett-section-pillgroup .pill {
  background: transparent;
  color: #b3d4ff;
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.85em;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}
.rett-section-pillgroup .pill:hover {
  background: rgba(95, 168, 255, 0.1);
}
.rett-section-pillgroup .pill.active {
  background: #5fa8ff;
  color: #0a1929;
  font-weight: 700;
}
.rett-section-slidergroup {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  min-width: 220px;
}
.rett-section-slidergroup .pill-group-label {
  font-size: 0.72em;
  font-weight: 600;
  color: #8fb3e0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.rett-section-leverage-slider {
  flex: 1;
  min-width: 120px;
  accent-color: #5fa8ff;
}
.rett-section-leverage-readout {
  font-size: 0.82em;
  color: #cfe1ff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rett-section-controls .btn-revert {
  font-size: 0.78em;
  padding: 4px 10px;
}
.rett-section-optimized-tag {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5fd97e;
  font-weight: 600;
  padding: 2px 8px;
  background: rgba(95, 217, 126, 0.1);
  border: 1px solid rgba(95, 217, 126, 0.3);
  border-radius: 3px;
}
@media (max-width: 720px) {
  .rett-scenario-table thead { display: none; }
  .rett-scenario-table tbody td {
    display: block;
    border: none;
    padding: 4px 0;
  }
  .rett-scenario-table tbody td.num::before {
    content: attr(data-label) ": ";
    color: #8fb3e0;
    font-size: 0.78em;
    text-transform: uppercase;
    margin-right: 6px;
  }
  .rett-scenario-table tbody tr {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid rgba(95, 168, 255, 0.08);
  }
}

/* Side-by-side comparison pies on Page 2 / Summary. Two cards: "If You
   Do Nothing" and "With Planning". The first shows tax-vs-kept of the
   client's total cash inflow over the horizon (sale + ordinary income),
   the second adds a fees slice for Brooklyn + Brookhaven costs. */
.rett-pies-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.rett-pie-card {
  background: rgba(13, 34, 64, 0.6);
  border: 1px solid #1a3a6e;
  border-radius: 6px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.rett-pie-title {
  color: #5fa8ff;
  font-size: 0.95em;
  font-weight: 700;
  margin-bottom: 4px;
}
.rett-pie-subtitle {
  font-size: 0.82em;
  color: #8fb3e0;
  margin-bottom: 10px;
}
.rett-pie-svg { width: 100%; height: auto; display: block; max-height: 240px; }
.rett-pie-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.85em;
  color: #b3d4ff;
}
.rett-pie-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rett-pie-legend-item strong { color: #cfe1ff; min-width: 56px; }
.rett-pie-legend-item .muted { color: #8fb3e0; font-size: 0.92em; }
.rett-pie-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .rett-pies-row { grid-template-columns: 1fr; }
}

/* Bracket position visualization (Page 2 / Summary) — one row per year. */
.bv-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
    font-size: 0.78em;
    color: #b3d4ff;
    margin-bottom: 10px;
}
.bv-legend-title {
    color: #8fb3e0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-right: 4px;
}
.bv-swatch {
    display: inline-block;
    width: 14px;
    height: 10px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: -1px;
    border: 1px solid rgba(255,255,255,0.1);
}
.bv-tick {
    display: inline-block;
    width: 2px;
    height: 12px;
    background: #ffffff;
    margin-right: 6px;
    vertical-align: -2px;
}

.bv-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bv-row {
    display: grid;
    grid-template-columns: 64px 1fr 140px;
    gap: 12px;
    align-items: center;
    padding: 4px 0;
}
.bv-year {
    color: #b3d4ff;
    font-weight: 600;
    font-size: 0.9em;
}
.bv-bar {
    width: 100%;
    height: 38px;
    display: block;
}
.bv-readouts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.85em;
    line-height: 1.2;
}
.bv-income {
    color: #ffffff;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.bv-rate {
    color: #8fb3e0;
    font-size: 0.88em;
}
.bv-footnote {
    color: #8899aa;
    font-size: 0.78em;
    font-style: italic;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .bv-row { grid-template-columns: 50px 1fr 100px; gap: 6px; }
    .bv-readouts { font-size: 0.78em; }
}

/* ============================================================ */
/* Mobile / responsive                                          */
/* ============================================================ */

/* Wide tables (projection, comparison) get horizontal scroll on small viewports
   so the columns stay legible instead of crushing or wrapping. */
#projection-table,
#tax-comparison-host,
#allocator-output,
#recommendation-panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .header {
        padding: 14px 18px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .header h1 { font-size: 1.4em; letter-spacing: 3px; }
    .header h2 { font-size: 0.85em; }

    .app-banner { padding: 10px 18px; font-size: 0.88em; }

    .nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tab {
        padding: 12px 14px;
        font-size: 0.85em;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .page {
        padding: 18px 16px;
    }
    .page h2 { font-size: 1.25em; }

    .input-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .section-title {
        font-size: 1em;
        margin-top: 18px;
    }

    .projection-table,
    .tax-comparison-table,
    .rett-data-table {
        font-size: 0.82em;
    }
    .projection-table th,
    .projection-table td,
    .tax-comparison-table th,
    .tax-comparison-table td,
    .rett-data-table th,
    .rett-data-table td {
        padding: 6px 8px;
    }

    .rett-kpi-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .rett-kpi-tile { padding: 10px 12px; }
    .rett-kpi-value { font-size: 1.2em; }

    .rett-action-row {
        flex-direction: column;
        gap: 10px;
    }
    .rett-action-row .btn,
    .rett-action-row button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .rett-kpi-row {
        grid-template-columns: 1fr;
    }
    .header h1 { font-size: 1.2em; }
}

/* ============================================================ */
/* Print stylesheet — produces a clean client-ready PDF when the */
/* user clicks Print / Save as PDF on the Strategy Summary page. */
/* Activated by .printing-report on <body>; the @media print     */
/* block below also applies for any direct browser-print action. */
/* ============================================================ */

@media print {
    @page {
        size: letter;
        margin: 0.6in 0.6in 0.7in 0.6in;
    }

    /* Reset to a printable light theme — colored ink wastes toner and
       reads poorly on most office printers. */
    body {
        background: #ffffff !important;
        color: #1a1a1a !important;
        font-size: 10pt;
        line-height: 1.4;
    }

    /* Strip on-screen chrome. */
    .skip-link,
    .nav,
    .subnav,
    .savings-ribbon,
    .app-banner,
    .actions,
    .rett-action-row,
    .btn,
    button,
    #recommendation-panel,
    #variable-leverage-block {
        display: none !important;
    }

    /* During a Strategy-Summary print, hide pages 1 and 2 entirely. */
    body.printing-report #page-inputs,
    body.printing-report #page-projection {
        display: none !important;
    }
    body.printing-report #page-allocator {
        display: block !important;
    }

    /* If the user direct-prints from any page, force-show the active page
       only — keeps Ctrl+P from spilling all 3 pages. */
    .page { page-break-after: always; }
    .page:not(.active) { display: none !important; }
    .page:last-child { page-break-after: auto; }

    /* Page-break hints inside Strategy Summary. */
    .rett-hero-tile,
    .rett-table-wrap,
    .rett-strategy-card {
        page-break-inside: avoid;
    }
    .section-title {
        page-break-after: avoid;
    }

    /* Header banner on the printed first page only. Uses an ::before
       pseudo on the page container so we don't need a separate div.
       When a case is loaded, body[data-case-name] lets us layer the
       client name underneath the product banner. */
    body.printing-report #page-allocator::before {
        content: "RETT — Brooklyn Multi-Year Tax Strategy";
        display: block;
        font-size: 9pt;
        color: #1a3a6e;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        border-bottom: 2pt solid #1a3a6e;
        padding-bottom: 4pt;
        margin-bottom: 6pt;
    }
    body.printing-report[data-case-name]:not([data-case-name=""]) #page-allocator::after {
        content: "Prepared for: " attr(data-case-name);
        display: block;
        font-size: 11pt;
        color: #1a1a1a;
        font-weight: 600;
        margin-bottom: 16pt;
    }

    /* Recolor headings, tables, and tiles for print. Override the dark
       navy theme without touching variables. */
    .header { background: none !important; padding: 0 !important; }
    .header h1, .header h2 { color: #1a3a6e !important; }
    .page { padding: 0 !important; max-width: none !important; }
    .page h2, .page-title { color: #1a3a6e !important; }
    .section-title {
        color: #1a3a6e !important;
        border-left-color: #1a3a6e !important;
        background: transparent !important;
    }
    p, .subtitle { color: #1a1a1a !important; }
    .subtitle { color: #4a4a4a !important; }

    .rett-table-wrap,
    .rett-chart-wrap {
        background: #ffffff !important;
        border: 1pt solid #d1d5db !important;
        box-shadow: none !important;
    }
    .rett-data-table th,
    .rett-data-table td,
    .rett-kv-table td,
    .tax-comparison-table th,
    .tax-comparison-table td {
        color: #1a1a1a !important;
        border-bottom: 0.5pt solid #d1d5db !important;
    }
    .rett-data-table thead th,
    .tax-comparison-table thead th {
        background: #e5e7eb !important;
        color: #1a3a6e !important;
    }
    .rett-savings-cell,
    .rett-delta-positive { color: #166534 !important; }
    .rett-delta-negative { color: #991b1b !important; }
    .rett-total-row td,
    .rett-savings-row td {
        background: #f3f4f6 !important;
        color: #1a1a1a !important;
    }

    /* Hero tile: simplify to a clean printed callout. */
    .rett-hero-tile {
        background: #f3f4f6 !important;
        border: 1pt solid #1a3a6e !important;
        border-left-width: 4pt !important;
        color: #1a1a1a !important;
    }
    .rett-hero-tile.hero-positive { border-left-color: #166534 !important; }
    .rett-hero-tile.hero-negative { border-left-color: #991b1b !important; }
    .rett-hero-label { color: #4a4a4a !important; }
    .rett-hero-value { color: #1a3a6e !important; font-size: 28pt !important; }
    .rett-hero-tile.hero-positive .rett-hero-value { color: #166534 !important; }
    .rett-hero-tile.hero-negative .rett-hero-value { color: #991b1b !important; }
    .rett-hero-sub { color: #1a1a1a !important; }

    /* Footer — repeat-on-every-page disclosure line. */
    body.printing-report::after {
        content: "Generated by RETT (Brooklyn Multi-Year Tax Strategy Projector). Planning estimates only — not a substitute for tax-return preparation.";
        position: fixed;
        bottom: 0.2in;
        left: 0.6in;
        right: 0.6in;
        font-size: 7.5pt;
        color: #6b7280;
        text-align: center;
        font-style: italic;
    }
}

/* ================================================================== */
/* BROOKHAVEN THEME OVERRIDES                                          */
/* Re-skins the legacy dark navy theme above to BrookHaven's light    */
/* paper / navy ink palette. Source order makes these win over any    */
/* equal-specificity rule earlier in the file. We intentionally reuse */
/* every existing class so the JS render code doesn't need touching;  */
/* only colors, fonts, borders, and a few small layout details change. */
/* ================================================================== */

body {
    font-family: var(--font-body);
    background: var(--paper);
    background-image:
        radial-gradient(circle at 0% 0%,   rgba(92,199,230,0.05) 0%, transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(14,34,64,0.04) 0%, transparent 45%);
    color: var(--ink);
}

/* HEADER — RETT brand bar. Two-zone layout: wordmark + tagline on
   the LEFT, BrookHaven 3-line attribution on the RIGHT. The chart-
   icon glyph is inline SVG so no image asset is needed. */
.header {
    background: var(--rett-navy);
    border-bottom: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 12px rgba(10,29,61,0.20);
    padding: 18px 48px 18px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.header::before {
    content: "";
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><rect x='4'  y='16' width='7' height='20' fill='%231e4f9a'/><rect x='15' y='8'  width='7' height='28' fill='%231e4f9a'/><rect x='26' y='3'  width='7' height='33' fill='%236dc5e8'/></svg>") center/contain no-repeat;
    margin-right: 4px;
    align-self: center;
}
.header-left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 auto;
    min-width: 0;
}
.header h1 {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 800;
    font-size: 44px;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 0.95;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    flex: 0 0 auto;
}
.header h1 .rett-tm {
    color: var(--rett-cyan);
    font-size: 0.34em;
    font-weight: 600;
    margin-left: 2px;
    vertical-align: super;
}
.header-dash {
    font-size: 32px;
    font-weight: 300;
    color: rgba(255,255,255,0.5);
    line-height: 1;
    margin-top: 2px;
}
.header-tagline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.15;
}
.header-line-1 {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.01em;
}
.header-line-2 {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.68);
}

/* RIGHT: BrookHaven 3-line attribution, stacked, right-aligned. */
.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex: 0 0 auto;
    border-left: 1px solid rgba(255,255,255,0.12);
    padding-left: 22px;
    line-height: 1.15;
}
.header-bh-mark {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 19px;
    color: #fff;
    letter-spacing: -0.005em;
}
.header-bh-sub {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--rett-amber-soft);
}
.header-bh-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-top: 2px;
}
@media (max-width: 820px) {
    .header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .header-right { align-items: flex-start; border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 10px; }
}

/* Compliance footer — Brookhaven 5-service attribution + small-print
   disclosure. Mirrors the trade-booth tablecloth row. Final compliance
   copy will replace the bracketed placeholder when ready. */
.app-compliance {
    margin-top: 36px;
    padding: 22px 48px 24px;
    background: var(--rett-navy);
    color: rgba(255,255,255,0.78);
    border-top: 0;
    text-align: center;
}
.app-compliance .compliance-brand {
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding-bottom: 14px;
    margin-bottom: 12px;
}
.app-compliance .compliance-brand-mark {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.005em;
    margin-bottom: 12px;
}
.app-compliance .compliance-services {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 32px;
}
.app-compliance .compliance-services li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.85);
}
.app-compliance .compliance-service-icon {
    width: 22px;
    height: 22px;
    color: var(--rett-cyan);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.app-compliance .compliance-service-icon svg {
    width: 100%;
    height: 100%;
}
.app-compliance .compliance-service-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
}
.app-compliance .compliance-line {
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.55;
    color: rgba(255,255,255,0.65);
    letter-spacing: 0.04em;
    margin: 0 0 4px 0;
}
.app-compliance .compliance-attrib {
    font-family: var(--font-body);
    font-size: 10px;
    color: rgba(255,255,255,0.55);
    margin: 0;
}
@media (max-width: 720px) {
    .app-compliance .compliance-services { gap: 16px 22px; }
}

/* ============ Booth-hero + 5-step process flow (Tab 0) ============
   Lifts the booth's tagline + numbered process visualization into
   the in-app meeting opener. Hero is a navy panel with the booth
   tagline; below it sits the 5-step flow as a horizontal row of
   numbered cards (stacks vertically on narrow viewports). Numbers
   live in orange filled circles to match the booth visual. */
/* Booth tagline hero. Slim panel — left-aligned text, amber accent
   bar on the left so it reads as a brand band rather than a hero
   section that dominates the page. */
.rett-hero {
    margin: 0 0 22px 0;
    padding: 18px 26px 18px 28px;
    background:
      linear-gradient(135deg, var(--rett-navy) 0%, var(--rett-navy-2) 100%);
    color: #fff;
    border-radius: 4px;
    border-left: 4px solid var(--rett-warning);
    box-shadow: 0 3px 12px rgba(11,27,58,0.14);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rett-hero-tag {
    font-family: var(--font-body);
    font-weight: 900;
    font-size: 40px;
    letter-spacing: -0.01em;
    line-height: 1.05;
    color: #fff;
    text-transform: uppercase;
}
.rett-hero-tag-em {
    color: var(--rett-cyan);
    font-style: italic;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.98em;
    text-transform: none;
    letter-spacing: -0.005em;
    margin-left: 6px;
}
.rett-hero-sub {
    margin: 12px 0 0 0;
    max-width: 980px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    color: rgba(255,255,255,0.92);
}
@media (max-width: 720px) {
    .rett-hero { padding: 14px 18px; }
    .rett-hero-tag { font-size: 28px; }
    .rett-hero-sub { font-size: 16px; }
}

/* Pre-Meeting hint card — a slim cool-blue band that replaces the
   prior bulky "Questions coming soon" placeholder box. Same width
   as the rest of the page; reads as an intentional note rather
   than a missing-content notice. */
.pmq-hint {
    margin: 18px 0 6px;
    padding: 14px 22px 16px;
    background: var(--rett-blue-light, var(--paper-cool));
    border-left: 4px solid var(--rett-blue);
    border-radius: 4px;
    color: var(--ink);
}
.pmq-hint-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rett-blue);
    margin-bottom: 4px;
}
.pmq-hint-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
}
.pmq-hint-body strong { color: var(--ink); font-weight: 700; }
/* Override the prior pmq-question-host margin so the slim hint
   card hugs the section above it instead of floating in mid-page. */
.pmq-question-host { margin: 0; }

.rett-process {
    list-style: none;
    margin: 0 0 22px 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}
.rett-process-step {
    position: relative;
    background: var(--rett-card, var(--paper));
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 22px 16px 18px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Connector line between consecutive step cards on desktop. Thin
   navy bar that sits at the vertical mid-line of the step circles
   so the row reads as a sequence rather than 5 disconnected cards. */
.rett-process-step::after {
    content: "";
    position: absolute;
    top: 38px;
    right: -7px;
    width: 14px;
    height: 1.5px;
    background: var(--rett-blue);
    opacity: 0.6;
}
.rett-process-step:last-child::after { display: none; }
.rett-process-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--rett-warning);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(224,123,42,0.30);
    align-self: flex-start;
}
.rett-process-icon {
    width: 32px;
    height: 32px;
    color: var(--rett-blue);
    display: inline-flex;
    margin-top: 2px;
}
.rett-process-icon svg { width: 100%; height: 100%; }
.rett-process-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    color: var(--ink);
    margin: 0;
    letter-spacing: 0;
    text-transform: uppercase;
}
.rett-process-meta {
    display: block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--rett-blue);
    margin-top: 2px;
    text-transform: uppercase;
}
.rett-process-body {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
    margin: 0;
}
.rett-process-checks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rett-process-checks li {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--ink);
    padding-left: 16px;
    position: relative;
}
.rett-process-checks li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--rett-success);
    font-weight: 700;
}
@media (max-width: 1100px) {
    .rett-process { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rett-process-step::after { display: none; }
}
@media (max-width: 720px) {
    .rett-process { grid-template-columns: 1fr; }
}

/* NAV TABS */
.nav {
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
    padding: 0 48px;
}
.nav-tab {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.1em;
    color: var(--muted);
    border-right: 1px solid var(--rule);
    padding: 16px 26px;
    background: transparent;
    border-bottom: none;
    position: relative;
}
.nav-tab:last-of-type { border-right: none; }
.nav-tab:hover { color: var(--ink); background: rgba(35,31,85,0.03); }
.nav-tab.active {
    color: var(--ink);
    background: var(--paper-warm);
    border-bottom: none;
}
.nav-tab.active::after {
    content: "";
    position: absolute;
    bottom: -2px; left: 0; right: 0; height: 3px;
    background: var(--bh-blue);
}

/* PAGES */
body { font-size: 16px; }
.page { padding: 32px 48px 96px; max-width: 1440px; margin: 0 auto; }
.page > h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    color: var(--ink);
    font-size: 2em;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.section-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    color: var(--ink);
    font-size: 1.3em;
    margin-top: 32px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 8px;
}
.subtitle {
    color: var(--ink-soft);
    font-size: 1em;
    line-height: 1.55;
    margin-bottom: 16px;
    max-width: 800px;
}

/* Pre-meeting questionnaire — collapsed thin-line accordion above the
   Client Inputs heading. Intentionally low-key so it doesn't pull
   attention from the inputs below. */
.prior-meeting-questionnaire {
    margin: 0 0 16px 0;
    border: 1px solid var(--rule-soft);
    border-radius: 2px;
    background: var(--paper);
}
.prior-meeting-summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.78em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    user-select: none;
    transition: background 0.15s, color 0.15s;
}
.prior-meeting-summary::-webkit-details-marker { display: none; }
.prior-meeting-summary:hover {
    background: var(--paper-warm);
    color: var(--ink);
}
.prior-meeting-glyph {
    font-family: var(--font-mono);
    font-size: 1.4em;
    line-height: 1;
    width: 18px;
    text-align: center;
    color: var(--bh-blue-deep);
    font-weight: 700;
    display: inline-block;
}
.prior-meeting-hint {
    font-weight: 600;
}
.prior-meeting-body {
    /* Legacy class — only retained as a fallback target; the live
       dock is .pmq-compact-host. */
    padding: 0;
    background: transparent;
    border: none;
}

/* ---- Compact import-square dock ----
   Two small icon-square <details> elements pinned to the top-right
   of the Client Inputs page. Collapsed = tiny clickable tile (icon
   + caption). Open = the dropzone expands inline so the advisor
   can drag a file in. Sits above the page title, right-aligned. */
.pmq-compact-host {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: flex-end;
    margin: 0 0 12px 0;
}
/* Pre-Meeting top row: client identity section on the left (uses
   the same dark-header / white-body .input-section pattern as
   Client Inputs), compact import dock on the right. */
.pmq-toprow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.pmq-toprow .pmq-compact-host { margin: 0; flex: 0 0 auto; }
/* Left column wraps the standalone Collapse button above the
   Client section. Width tuned so the section extends most of the
   way toward the CLIENT FORM dock without overlapping its open
   popup. */
.pmq-left-col {
    flex: 1 1 auto;
    min-width: 320px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.pmq-left-col .pmq-collapse-btn { align-self: flex-start; }
.pmq-client-section {
    width: 100%;
}
/* Case Management — second card stacked under the Client identity
   card on PMQ. Moved here from Client Inputs Section 00 so the saved-
   clients dropdown never displays in front of a client. Spacing above
   so the two cards read as related-but-distinct units. */
.pmq-case-section {
    margin-top: 18px;
}
.pmq-case-section .case-actions-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
/* Pack first/last on the same row inside .section-body. The default
   .input-row is a 2-column grid (label | input); the half variants
   sit side-by-side in a 2-column outer grid. */
.pmq-client-section .section-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 14px;
}
.pmq-client-section .input-row { margin-bottom: 0; }
.pmq-client-section .input-row:not(.pmq-input-row-half) { grid-column: 1 / -1; }
.pmq-client-section .input-row > input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--rule);
    border-radius: 3px;
    font: inherit;
    background: #fff;
    color: var(--ink);
}
.pmq-client-section .input-row > input:focus {
    outline: none;
    border-color: var(--ink);
}
/* For half rows the label sits above the input rather than left-of,
   to fit two fields side-by-side without crushing the label width. */
.pmq-input-row-half {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 4px !important;
}
.pmq-input-row-half .label { font-size: 0.95em; }
.pmq-client-status {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--ink);
    opacity: 0.75;
    min-height: 14px;
}
.pmq-client-status.is-loaded { color: #1e5c38; opacity: 1; }
.pmq-client-status.is-new    { color: #2d3f7d; opacity: 1; }
@media (max-width: 720px) {
    .pmq-toprow { flex-direction: column-reverse; align-items: stretch; }
    .pmq-left-col { flex: 1 1 auto; }
    .pmq-client-section { flex: 1 1 auto; }
}
.pmq-compact {
    margin: 0;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--paper);
    transition: border-color 0.15s, box-shadow 0.15s;
    flex: 0 0 auto;
}
.pmq-compact:hover { border-color: var(--ink); }
.pmq-compact[open] {
    flex: 1 1 auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.pmq-compact-summary {
    list-style: none;
    cursor: pointer;
    width: 64px;
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    user-select: none;
    padding: 6px;
    box-sizing: border-box;
    transition: background 0.15s;
}
.pmq-compact-summary::-webkit-details-marker { display: none; }
/* When OPEN: the summary stays a 64×64 button, but background flips
   to indicate it's active. The body floats out as an absolute panel
   to the LEFT of the button (per advisor spec: "still a button, the
   dropdown moves to the left of it"). Click again closes; the panel
   removes, the button stays put. */
.pmq-compact-side {
    position: relative;
}
.pmq-compact-side[open] .pmq-compact-summary {
    background: var(--bh-blue-deep);
    color: var(--paper);
}
.pmq-compact-side[open] .pmq-compact-tag {
    color: var(--paper);
}
.pmq-compact-side[open] .pmq-compact-icon {
    color: var(--paper);
}
.pmq-compact-side .pmq-compact-body {
    /* Hidden when closed (browser default), absolutely positioned
       to the left of the icon when open. */
    position: absolute;
    right: calc(100% + 8px);
    top: 0;
    width: 360px;
    max-width: 90vw;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 10;
    /* Keeps the panel readable across viewports — overflow lets long
       PDF filenames wrap inside instead of pushing the layout. */
    overflow: hidden;
}
.pmq-compact-icon { font-size: 1.3em; line-height: 1; }
.pmq-compact-tag {
    font-family: var(--font-mono);
    font-size: 0.6em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}
.pmq-compact[open] .pmq-compact-tag {
    font-size: 0.85em;
    color: var(--ink);
    text-align: left;
}
.pmq-compact-body { padding: 14px 18px 16px; }
@media (max-width: 720px) {
    .pmq-compact-host { flex-direction: column; align-items: stretch; }
    .pmq-compact-summary { width: 100%; flex-direction: row; height: auto; padding: 10px 14px; }
}

/* ---- Pre-Meeting Questionnaire drop zones ---- */
.pmq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 860px) {
    .pmq-grid { grid-template-columns: 1fr; }
}
.pmq-section {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 14px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pmq-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.pmq-section-title {
    font-family: var(--font-mono);
    font-size: 0.72em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 600;
}
.pmq-badge {
    font-family: var(--font-mono);
    font-size: 0.68em;
    letter-spacing: 0.05em;
    background: #e8f4fd;
    color: #2d6fa8;
    border: 1px solid #b8d9f2;
    border-radius: 4px;
    padding: 2px 7px;
}
.pmq-desc {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
}
.pmq-dropzone {
    border: 1.5px dashed var(--rule);
    border-radius: 8px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: var(--paper-cool);
    text-align: center;
    position: relative;
}
.pmq-dropzone:hover,
.pmq-dropzone.pmq-drop-active {
    border-color: var(--bh-blue-deep);
    background: #edf6fd;
}
.pmq-dropzone.pmq-drop-loading {
    border-color: var(--bh-blue);
    background: #f0f9ff;
    pointer-events: none;
    opacity: 0.8;
}
.pmq-dropzone.pmq-drop-done {
    border-color: var(--green);
    background: #f0f8f4;
}
.pmq-dropzone.pmq-drop-error {
    border-color: var(--red);
    background: #fdf3f3;
}
.pmq-drop-icon {
    font-size: 22px;
    line-height: 1;
    margin-bottom: 2px;
}
.pmq-drop-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.pmq-drop-sub {
    font-size: 12px;
    color: var(--muted);
}
.pmq-browse-link {
    color: var(--bh-blue-deep);
    cursor: pointer;
    text-decoration: underline;
}
.pmq-file-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}
.pmq-api-key-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pmq-key-label {
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.pmq-key-input {
    flex: 1;
    font-size: 12px;
    padding: 5px 9px;
    border: 1px solid var(--rule);
    border-radius: 5px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-mono);
    min-width: 0;
}
.pmq-key-input:focus {
    outline: none;
    border-color: var(--bh-blue-deep);
    box-shadow: 0 0 0 2px rgba(65,185,234,0.15);
}
.pmq-download-btn {
    font-family: var(--font-mono);
    font-size: 0.68em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--bh-trusted);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.pmq-download-btn:hover { background: var(--bh-trusted-soft); }
.pmq-status {
    font-size: 12.5px;
    border-radius: 5px;
    padding: 7px 10px;
    line-height: 1.5;
}
.pmq-status-info    { background: #eef6fd; color: #2d6fa8; border: 1px solid #c2ddf5; }
.pmq-status-success { background: #eef8f2; color: #1e5c38; border: 1px solid #b2d9c2; }
.pmq-status-error   { background: #fdf3f3; color: #8b2222; border: 1px solid #f0c0c0; }

/* ============== INPUT-SECTION LAYOUT (2-column form, mirrors reference) ============== */
.inputs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 32px;
    align-items: start;
    margin-top: 12px;
}
@media (max-width: 1100px) {
    .inputs-layout { grid-template-columns: 1fr; }
}
/* New 2-column layout for the Client Inputs form. Both columns are
   vertical stacks of input-sections (no sticky baseline panel on the
   right anymore — that lives on its own page now). Columns collapse
   to a single stack below 1100px. */
/* Tab 1 form layout (2026-05-27): flattened to single full-width
   column so the advisor scrolls top-to-bottom through Income Sources
   → Real Estate Sale Proceeds → Future Sale. Two inner .inputs-stack
   wrappers still exist in HTML but collapse to one visual flow. */
.inputs-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
    margin-top: 12px;
}
.inputs-stack { display: flex; flex-direction: column; gap: 22px; }

.input-section {
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow);
}
.section-heading {
    padding: 16px 24px;
    background: var(--ink);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.section-heading h2 {
    font-family: var(--font-display);
    font-size: 1.15em;
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.01em;
    color: var(--paper);
    line-height: 1.2;
}
.section-heading .num {
    font-family: var(--font-mono);
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--bh-blue);
}
.section-body {
    padding: 22px 24px;
    background: var(--paper);
}
.section-body > .help {
    font-size: 0.95em;
    color: var(--ink-soft);
    margin-bottom: 14px;
    line-height: 1.5;
}

/* Business Income conditional type-reveal — appears when amount > 0. */
.business-type-reveal {
    margin: 6px 0 14px;
    padding: 14px 16px;
    border-left: 3px solid var(--rule);
    background: rgba(0,0,0,0.02);
}
.business-type-reveal[hidden] { display: none !important; }
.business-type-prompt {
    font-family: var(--font-mono);
    font-size: 0.72em;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.business-type-opt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    font-family: var(--font-body);
    font-size: 0.95em;
    color: var(--ink);
    cursor: pointer;
    line-height: 1.4;
}
.business-type-opt input[type="radio"] {
    margin-top: 4px;
    flex: 0 0 auto;
}
.business-type-opt em {
    font-style: normal;
    color: var(--muted);
    font-size: 0.9em;
}

.input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
}
/* The hidden HTML attribute should fully hide the row. The .input-row
   rule above sets display: grid with class-selector specificity, which
   overrides the browser default [hidden] { display: none } rule. Force
   the hidden behavior with attribute-selector + !important so any row
   with the hidden attribute (conditional rows like the personal-use
   amount input) actually disappears when JS toggles .hidden = true. */
.input-row[hidden] { display: none !important; }
.input-row:last-child { margin-bottom: 0; }
.input-row .label {
    font-family: var(--font-body);
    font-size: 1.1em;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.35;
}
.input-row .label .sub {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7em;
    color: var(--muted);
    font-weight: 500;
    margin-top: 3px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.input-row input,
.input-row select {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 11px 14px;
    font-family: var(--font-mono);
    font-size: 1em;
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
/* Native select arrow eats ~20px on the right; reserve space so long
   labels like "Married Filing Jointly" or "New York" don't crash
   into it. */
.input-row select { padding-right: 36px; }
.input-row input:focus,
.input-row select:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 2px rgba(35,31,85,0.08);
    background: var(--paper-warm);
}
.input-row .currency-input {
    position: relative;
    display: flex;
    align-items: center;
}
.input-row .currency-input::before {
    content: "$";
    position: absolute;
    left: 10px;
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--muted);
    pointer-events: none;
    z-index: 1;
}
.input-row .currency-input input {
    padding-left: 22px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.input-row .toggle-row-label {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--rule);
    margin-top: 6px;
}
.input-row .toggle-help {
    grid-column: 1 / -1;
    font-size: 0.85em;
    color: var(--muted);
    margin-top: -8px;
    margin-bottom: 6px;
    line-height: 1.4;
}
.input-row .yes-no {
    width: 200px;
}

/* BASELINE TAX LIABILITY — now on its own page (#page-baseline). The
   sticky positioning that was useful on the old 2-col Client Inputs
   layout would now stick to the top of the standalone page, which is
   pointless when the table IS the page. Drop sticky and let it flow. */
.baseline-table-wrapper {
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow);
}
/* Center the baseline table on its dedicated page and cap the width
   so it reads as a focused report rather than a stretched panel. */
.baseline-page-wrap {
    max-width: 760px;
    margin: 18px auto 28px;
}
.baseline-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.95em;
}
.baseline-table th {
    text-align: right;
    padding: 12px 18px;
    font-family: var(--font-body);
    font-size: 0.78em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    border-bottom: 1px solid var(--ink);
    background: var(--paper-warm);
}
.baseline-table th:first-child { text-align: left; }
.baseline-table td {
    padding: 10px 18px;
    text-align: right;
    border-bottom: 1px solid var(--rule);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.baseline-table td:first-child {
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.95em;
    color: var(--ink-soft);
}
.baseline-table tr.subtotal td {
    background: var(--paper-warm);
    font-weight: 600;
    color: var(--ink);
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
}
.baseline-table tr.subtotal td:first-child {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
}
.baseline-table tr.indent td:first-child {
    padding-left: 38px;
    font-size: 0.9em;
    color: var(--muted);
}
.baseline-table tr.total td {
    background: var(--ink);
    color: var(--paper);
    font-weight: 600;
    font-size: 1.1em;
    padding: 14px 18px;
}
.baseline-table tr.total td:first-child {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.1em;
    color: var(--paper);
}
.baseline-footnotes {
    padding: 14px 18px 18px;
    border-top: 1px solid var(--rule);
    background: var(--paper-warm);
}
.baseline-footnotes p {
    font-size: 0.82em;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 4px;
}
.baseline-footnotes p:last-child { margin-bottom: 0; }

/* Bigger Client Financial Inputs heading per spec — the page subtitle
   was removed, so the heading itself carries the section weight. */
.page-inputs-title {
    font-size: 2.4em;
    margin: 8px 0 22px;
}
/* Banner variant — applied after Section 00 ("Client") moved to the
   Pre-Meeting tab. The page-inputs heading now acts as the page's
   visual chapter break: bordered card with a left accent rule and
   tinted background so the page lead reads as a section header for
   everything below. */
.page-inputs-title--banner {
    padding: 18px 24px;
    border: 1px solid var(--rule);
    border-left: 6px solid var(--ink);
    background: var(--paper-warm, #fafaf3);
    border-radius: 4px;
    margin: 8px 0 26px;
}

/* Page-1 actions row at the bottom */
.page-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
    gap: 12px;
}
.page-actions .actions-left { display: flex; gap: 10px; }
.page-actions .actions-right { display: flex; gap: 10px; }

/* INPUT GRID + FIELDS (legacy non-section-style — kept for case controls) */
.input-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px 22px;
    margin-bottom: 10px;
}
.input-group { display: flex; flex-direction: column; gap: 6px; }
.input-group label {
    font-family: var(--font-mono);
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-weight: 600;
}
.input-group input,
.input-group select,
.input-group textarea {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 10px 14px;
    font-size: 1em;
    font-family: var(--font-mono);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 2px rgba(35,31,85,0.08);
    background: var(--paper-warm);
}
.input-group input.input-error,
.input-group select.input-error {
    border-color: var(--red);
    box-shadow: 0 0 0 2px rgba(196,69,69,0.1);
}

/* BUTTONS */
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1em;
    padding: 11px 22px;
    border-radius: 3px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
    letter-spacing: 0.02em;
}
.btn-primary {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
.btn-primary:hover { background: var(--bh-trusted-soft); border-color: var(--bh-trusted-soft); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--rule);
}
.btn-secondary:hover { border-color: var(--ink); background: var(--paper-warm); }
.btn-revert {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--rule);
}

/* BANNERS */
.app-banner {
    padding: 12px 48px;
    font-family: var(--font-body);
    font-weight: 500;
    border-bottom: 1px solid;
}
.app-banner.banner-error {
    background: rgba(196,69,69,0.08);
    color: var(--red);
    border-bottom-color: rgba(196,69,69,0.2);
}
.app-banner.banner-warning {
    background: rgba(240,202,23,0.1);
    color: #8a6d00;
    border-bottom-color: rgba(240,202,23,0.3);
}
.app-banner.banner-info {
    background: rgba(65,185,234,0.08);
    color: var(--bh-trusted);
    border-bottom-color: rgba(65,185,234,0.25);
}

/* CASE controls */
.case-controls .case-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.case-status {
    font-family: var(--font-mono);
    font-size: 0.8em;
    color: var(--muted);
    letter-spacing: 0.04em;
    margin-left: 8px;
}
/* Lock the Case Actions row to a single line + fixed height regardless
   of how long the "Saved as <name>" / "Saved ✓ — <name>" status text
   gets. Previously the status sat IN this row with flex-wrap:wrap,
   which meant the auto-save flash (text length jumping between two
   states) sometimes wrapped the status to a 2nd row, sometimes not.
   Every shift pushed Sections 01..07 below it down a few px. The
   status is now its own input-row, so this row only holds the two
   buttons and stays a stable height. */
.case-actions-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: nowrap;
    min-height: 38px;
}
.case-actions-row > .btn {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}
/* The status row's value cell is just the span — give it a stable
   line height so the auto-save flash text changes don't bump
   neighbors as the text grows or shrinks. */
.input-row > #case-status {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-self: center;
    line-height: 1.6;
    min-height: 1.6em;
}

/* PILL TOGGLES (Page 2 controls — repurposed for per-section dashboards) */
.pill-toggle-row,
.rett-section-controls {
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 12px 16px;
}
.pill-group-label {
    font-family: var(--font-mono);
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}
.pill-track {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 3px;
}
.pill {
    color: var(--muted);
    background: transparent;
    font-family: var(--font-body);
}
.pill:hover { background: rgba(35,31,85,0.04); color: var(--ink); }
.pill.active {
    background: var(--ink);
    color: var(--paper);
    box-shadow: none;
}
.pill-group-hint { color: var(--green); }

/* STRATEGY COMPARISON CARD (Page 2) */
.rett-scenario-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow);
    margin-bottom: 28px;
    padding: 0;
}
.rett-scenario-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.45em;
    color: var(--ink);
    padding: 18px 26px;
    border-bottom: 1px solid var(--rule);
    background: var(--paper-warm);
}
.rett-scenario-subtitle {
    padding: 14px 26px;
    color: var(--ink-soft);
    font-size: 1em;
    line-height: 1.5;
    border-bottom: 1px solid var(--rule-soft);
}
.rett-scenario-table {
    width: 100%;
    border-collapse: collapse;
}
.rett-scenario-table th {
    font-family: var(--font-body);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-weight: 600;
    border-bottom: 1px solid var(--ink);
    padding: 14px 18px;
    text-align: right;
    background: transparent;
}
.rett-scenario-table th:nth-child(2) { text-align: left; }
.rett-scenario-table td {
    padding: 18px;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    background: transparent;
    font-size: 1em;
}
.rett-scenario-table td.num {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.05em;
}
.rett-scenario-row { cursor: pointer; transition: background 0.12s; }
.rett-scenario-row:hover { background: rgba(65,185,234,0.05); }
.rett-scenario-row.rett-scenario-checked { background: rgba(65,185,234,0.06); }
.rett-scenario-row.rett-scenario-winner {
    border-left: 4px solid var(--ink);
    background: rgba(65,185,234,0.04);
}
.rett-scenario-row.rett-scenario-winner td:first-child { border-left: none; }
.rett-scenario-winner td.num strong { color: var(--ink); }
.rett-scenario-label {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    color: var(--ink);
    font-size: 1.25em;
}
.rett-scenario-sub {
    color: var(--muted);
    font-size: 0.92em;
    margin-top: 4px;
    line-height: 1.4;
}
.rett-scenario-schedule {
    color: var(--ink);
    font-size: 0.86em;
    margin-top: 4px;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.rett-scenario-badge {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 2px;
    margin-left: 10px;
    vertical-align: 2px;
}
.rett-scenario-badge-warn {
    background: var(--bh-yellow);
    color: var(--ink);
}
.rett-scenario-net-negative td.num strong { color: var(--red); }
.rett-scenario-checkbox { accent-color: var(--ink); width: 18px; height: 18px; cursor: pointer; }

/* SAVINGS RIBBON */
#savings-ribbon {
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow);
    border-radius: 0;
    padding: 22px 28px;
    margin-bottom: 28px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
}
#savings-ribbon[hidden] { display: none; }
.ribbon-section-label {
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bh-blue-deep);
    font-weight: 600;
    margin-bottom: 12px;
}
.ribbon-tile {
    padding: 12px 22px;
    border-right: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ribbon-tile:last-child { border-right: none; }
.ribbon-label {
    font-family: var(--font-mono);
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    font-weight: 600;
}
.ribbon-value {
    font-family: var(--font-display);
    font-size: 2em;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.ribbon-tile.tile-positive .ribbon-value { color: var(--green); }
.ribbon-tile.tile-negative .ribbon-value { color: var(--red); }

/* KPI ROW (per-section dashboard) */
.rett-dashboard {
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow);
    padding: 28px;
    margin-bottom: 28px;
}
.rett-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    margin-bottom: 28px;
}
.rett-kpi-tile {
    padding: 22px 26px;
    border-right: 1px solid var(--rule);
}
.rett-kpi-tile:last-child { border-right: none; }
.rett-kpi-label {
    font-family: var(--font-mono);
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 10px;
}
.rett-kpi-value {
    font-family: var(--font-display);
    font-size: 2.3em;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.rett-kpi-sub {
    font-family: var(--font-mono);
    font-size: 0.8em;
    color: var(--muted);
    margin-top: 8px;
    letter-spacing: 0.04em;
}
.rett-kpi-tile.kpi-positive .rett-kpi-value { color: var(--green); }
.rett-kpi-tile.kpi-negative .rett-kpi-value { color: var(--red); }

/* DATA TABLES */
.rett-data-table,
.tax-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.95em;
    color: var(--ink);
    background: var(--paper);
}
.rett-data-table th,
.tax-comparison-table th {
    font-family: var(--font-body);
    text-transform: uppercase;
    font-size: 0.78em;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--muted);
    border-bottom: 1px solid var(--ink);
    background: var(--paper-warm);
    padding: 12px 16px;
    text-align: right;
}
.rett-data-table th:first-child,
.tax-comparison-table th:first-child { text-align: left; }
.rett-data-table td,
.tax-comparison-table td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--rule);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.rett-data-table td:first-child,
.tax-comparison-table td:first-child { text-align: left; color: var(--ink); font-family: var(--font-body); font-size: 1em; }
.rett-data-table tr.rett-total-row td,
.tax-comparison-table tr.row-total td {
    background: var(--ink);
    color: var(--paper);
    font-weight: 600;
    border-top: 2px solid var(--ink);
    padding: 13px 16px;
}
.rett-data-table tr.rett-total-row td:first-child,
.tax-comparison-table tr.row-total td:first-child { color: var(--paper); }
.tax-comparison-table tr.grp-head td {
    background: var(--paper-warm);
    color: var(--ink);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.05em;
    padding: 10px 16px;
}

.rett-savings-cell.rett-delta-positive { color: var(--green); }
.rett-savings-cell.rett-delta-negative { color: var(--red); }

/* CHART (SVG) */
.rett-chart-svg {
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 8px;
}
/* Chart bar tooltips, axis labels — re-color via stroke/fill where set inline.
   We can't override the inline fill="#5fa8ff" / fill="#2c5aa0" on the bars
   via CSS without !important; the chart code uses var(--font) family
   already, so we use class-based shadow + outline to make bars POP on
   the new light background. */
.rett-bar { transition: opacity 0.15s; }
.rett-bar[data-rett-bar="without"] { fill: var(--bh-blue) !important; }
.rett-bar[data-rett-bar="with"] { fill: var(--ink) !important; }
.rett-bar:hover { opacity: 0.85; }

.rett-bar-tooltip {
    background: var(--ink);
    color: var(--paper);
    border-radius: 3px;
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: 0.8em;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    position: fixed;
    z-index: 999;
}
.rett-bar-tooltip strong {
    font-family: var(--font-body);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: 4px;
    color: var(--bh-blue);
}

/* PIES */
.rett-pies-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
    margin-top: 22px;
}
.rett-pie-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 24px;
    box-shadow: var(--shadow);
}
.rett-pie-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.25em;
    color: var(--ink);
    margin-bottom: 6px;
}
.rett-pie-subtitle {
    font-family: var(--font-mono);
    font-size: 0.8em;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 16px;
}
.rett-pie-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.95em;
    margin-top: 14px;
}
.rett-pie-legend > div {
    display: grid;
    grid-template-columns: 14px 1fr auto auto;
    gap: 10px;
    align-items: center;
}
.rett-pie-legend .muted { color: var(--muted); }

/* NARRATIVE */
.rett-narrative {
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    border-left: 5px solid var(--ink);
    padding: 24px 28px;
    margin-bottom: 28px;
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 18px;
    align-items: start;
}
.rett-narrative.narrative-positive { border-left-color: var(--ink); }
.rett-narrative.narrative-negative { border-left-color: var(--red); }
.rett-narrative.narrative-neutral { border-left-color: var(--muted); }
.narrative-icon {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 2.6em;
    color: var(--ink);
    line-height: 1;
}
.narrative-body p {
    font-family: var(--font-body);
    color: var(--ink);
    font-size: 1.08em;
    line-height: 1.6;
    margin-bottom: 12px;
}
.narrative-body p:last-child { margin-bottom: 0; }
.narrative-rec-tag {
    font-family: var(--font-mono);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bh-blue-deep);
    font-weight: 600;
}
.narrative-rec-tag strong { color: var(--ink); }

/* PER-SECTION SCENARIO DASHBOARDS */
.rett-scenario-section {
    border: 1px solid var(--rule);
    background: var(--paper);
    box-shadow: var(--shadow);
    padding: 28px;
    margin-bottom: 28px;
}
.rett-scenario-section-header {
    border-bottom: 1px solid var(--ink);
    padding-bottom: 14px;
    margin-bottom: 22px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
}
.rett-scenario-section-title-text {
    /* Fraunces capital J — even in upright weight — has a distinctive
       curled descender that reads as a "weird divot" in titles like
       "Payment January 1st". Switch this specific title to Georgia
       (which Fraunces stack falls back to anyway) so the J renders
       conventionally. Other Fraunces elements (body display, etc.)
       are unaffected. */
    font-family: Georgia, 'Times New Roman', serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.55em;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.rett-scenario-section-config {
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--muted);
    letter-spacing: 0.05em;
}
.rett-section-optimized-tag {
    font-family: var(--font-mono);
    font-size: 0.8em;
    color: var(--bh-blue-deep);
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* DETAILS TABLES */
.rett-details-section { margin-bottom: 32px; }
.rett-details-section-title {
    /* Same Fraunces J issue as .rett-scenario-section-title-text - swap
       to Georgia so titles containing "January" render with a normal J. */
    font-family: Georgia, 'Times New Roman', serif;
    font-style: normal;
    font-weight: 500;
    color: var(--ink);
    font-size: 1.4em;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 8px;
}

/* FORM HELPERS */
.help { color: var(--muted); font-size: 0.82em; margin-top: 4px; }
.subtitle strong { color: var(--ink); }
.strategy-locked {
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    color: var(--ink);
    border-radius: 2px;
    padding: 8px 12px;
}
.strategy-locked .muted { color: var(--muted); }

/* No-engagement / no-scenarios callouts */
.rett-no-engagement-card,
.rett-no-scenarios {
    background: var(--paper-warm) !important;
    border: 1px solid var(--rule) !important;
    color: var(--ink-soft) !important;
}

/* Table wrap scroll */
.rett-table-wrap, .rett-table-scroll {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
    overflow-x: auto;
}

/* Scenario-row keyboard focus */
.rett-scenario-row:focus-visible {
    outline: 2px solid var(--bh-blue);
    outline-offset: -2px;
}

/* ============== STRATEGY SELECTION PAGE — 3 large rectangles ============== */
.strategy-pick-page-header {
    margin-bottom: 24px;
}
.strategy-pick-page-header h2 {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--ink);
    font-size: 2em;
    line-height: 1.1;
}
.strategy-pick-page-header p {
    color: var(--ink-soft);
    font-size: 1.05em;
    line-height: 1.55;
    max-width: 800px;
    margin-top: 10px;
}

/* The grid: three equal columns, big enough to take the screen.
   Wraps to a single column under ~1000px so phones / narrow windows
   still read top-to-bottom.
   .strategy-pick-grid--two-only: applied by controls.js when Card 3
   (Structured Installment Sale) is hidden. Switches the grid to a
   centered 2-column auto-width layout with slightly larger columns
   so Cards 1 + 2 read as the "primary pair" rather than two leftover
   cards from a 3-up grid. When Card 3 appears, the two existing cards
   shrink to make room and the third joins them on the same row. */
.strategy-pick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
    justify-content: center;
}
.strategy-pick-grid--two-only {
    grid-template-columns: minmax(0, 460px) minmax(0, 460px);
}
/* Single-card mode — when Strategy A beats both B and C (and the user
   hasn't flagged default-risk), Cards 2 and 3 collapse and Card 1
   centers alone at a slightly larger width so it doesn't feel orphaned
   in dead space. */
.strategy-pick-grid--one-only {
    grid-template-columns: minmax(0, 520px);
}
/* "Hide default-risk question" mode — applied by controls.js when
   Card 3 is already shown (C won on its own merits) OR when C trails
   the best of A/B by ≥10% (not worth considering even as a hedge).
   Collapses the question row across ALL three cards together so the
   Interested / Not Interested button row stays aligned horizontally. */
.strategy-pick-grid--no-default-risk .strategy-default-risk-row {
    display: none;
}
.strategy-pick-grid .strategy-pick-card {
    /* min-width:0 lets the grid track shrink below the card's intrinsic
       min-content width — keeps three cards on one row even when the
       headline copy or strategy name is long. transition smooths the
       resize when Card 3 toggles on/off. */
    min-width: 0;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s, max-width 0.25s ease;
}
@media (max-width: 1000px) {
    .strategy-pick-grid,
    .strategy-pick-grid--two-only { grid-template-columns: 1fr; }
}

/* Default-risk question on Card 2 — sits above the Interested /
   Not Interested buttons. Compact horizontal row with the label on
   the left and the yes/no select on the right. */
/* Default-risk row — sits between the lockup graphic and the
   Interested/Not Interested buttons on Card 2. Cards 1 + 3 emit an
   empty spacer of the same height so all three buttons rows line up
   horizontally. */
.strategy-default-risk-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0 6px;
    margin-top: auto;   /* push down to sit just above the buttons */
    min-height: 48px;
}
.strategy-default-risk-row--spacer {
    visibility: hidden;
    pointer-events: none;
}
.strategy-default-risk-label {
    /* Match the lockup-sub typography so this row reads as part of
       the same shaded-box family rather than a foreign UI element. */
    font-family: var(--font-mono);
    font-size: 0.78em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    flex: 1 1 auto;
}
/* Click toggle: default state is blank (No, unobtrusive); active
   state shades blue and announces Yes. Two clear visual states the
   advisor can read at a glance. */
.strategy-default-risk-toggle {
    flex: 0 0 auto;
    min-width: 64px;
    padding: 6px 14px;
    font-family: var(--font-mono);
    font-size: 0.78em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--muted);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
}
.strategy-default-risk-toggle:hover {
    border-color: var(--bh-blue-deep, #0B1B3A);
}
.strategy-default-risk-toggle.is-yes {
    background: #1F6FEB;
    color: #ffffff;
    border-color: #1F6FEB;
}

/* Generic Yes/No click-toggle — auto-inserted by controls.js next to
   every <select class="yes-no"> in the app. Visually identical to the
   default-risk toggle on Card 2 so the advisor sees one consistent
   Yes/No control everywhere. The hidden <select> stays in the DOM
   for case-storage capture/restore. Per advisor 2026-05-17. */
.yes-no-toggle {
    display: inline-block;
    min-width: 64px;
    padding: 6px 14px;
    font-family: var(--font-mono);
    font-size: 0.78em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--muted);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.yes-no-toggle:hover {
    border-color: var(--bh-blue-deep, #0B1B3A);
}
.yes-no-toggle.is-yes {
    background: #1F6FEB;
    color: #ffffff;
    border-color: #1F6FEB;
}
.yes-no-toggle:focus-visible {
    outline: 2px solid #1F6FEB;
    outline-offset: 2px;
}

/* When controls.js sets card.hidden = true on Card 3 (5% rule fails AND
   default-risk = No), the user-agent `[hidden] { display: none }` rule
   is normally enough. But the .strategy-pick-card rule below sets
   display: grid with a higher-specificity class selector, which beats
   the attribute selector and leaves the "hidden" card visible — it
   falls under Cards 1+2 as an orphan 3rd grid item, breaking the
   centered 2-card layout. This rule restores the intended hide
   semantics with !important. */
.strategy-pick-card[hidden] {
    display: none !important;
}
.strategy-pick-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow);
    padding: 26px 18px 22px;
    /* Six-row template so all three cards align horizontally:
         1 header / 2 name / 3 keyaspect (shaded box) /
         4 lockup graphic / 5 default-risk row / 6 buttons
       Cards 1 + 3 emit an invisible spacer in row 5 so Card 2's
       default-risk toggle doesn't push its buttons out of alignment
       with the siblings. Row 5 uses `auto` height — Card 2 sets its
       size, spacers match via min-height. */
    display: grid;
    grid-template-rows: auto auto auto auto auto auto;
    gap: 16px;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    position: relative;
    min-height: 520px;
}
.strategy-pick-card:hover {
    /* Per advisor spec: thick dark-blue border only on hover. No
       translation (stays in place), no background tint, no layered
       shadow "gradient." A 3px BrookHaven blue border draws the eye
       to the card the cursor is over without any motion or color
       wash. The 2px border-width delta is offset by a 1px outline
       that grows in to keep the card's bounds steady. */
    border: 3px solid var(--bh-blue-deep);
    margin: -2px;
    box-shadow: var(--shadow);
}
.strategy-pick-card.is-recommended {
    border: 2px solid var(--ink);
    box-shadow: var(--shadow-lg);
}
.strategy-pick-card.is-recommended::before {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px;
    height: 5px;
    background: var(--ink);
}
.strategy-pick-card.is-interested:not(.is-recommended) {
    /* Orange border draws the eye to the user's pick — paired with
       the orange-filled Interested button. Replaces prior blue border
       so attention follows the pick, not the static STRATEGY 01/02/03
       badge. */
    border-color: var(--rett-amber);
    box-shadow: 0 0 0 2px rgba(224,123,42,0.20), var(--shadow);
}
.strategy-pick-card.is-featured:not(.is-interested):not(.is-recommended) {
    /* Multi-sale string (future-sale = Yes): the installment card is the
       one we plan to show, so its border is "lit up" — BrookHaven blue with
       a soft glow — to draw the eye WITHOUT marking it Interested (no click
       is implied; the advisor still walks all three). */
    border-color: var(--bh-blue-deep);
    box-shadow: 0 0 0 3px rgba(43,108,176,0.14), 0 0 16px 2px rgba(43,108,176,0.40), var(--shadow);
}
/* Multi-sale string: the default-risk question is moot (we already show all
   three strategies), so hide it on Page 3. visibility:hidden (not display)
   keeps the row's height so the three cards stay aligned with the A/C
   spacer rows. (advisor 2026-06-22.) */
#strategy-pick-list.is-multi-sale .strategy-default-risk-row {
    visibility: hidden;
}
.strategy-pick-card.is-not-interested {
    opacity: 0.6;
    background: var(--rett-blue-light);
}
.strategy-pick-card.is-not-interested:hover { opacity: 0.85; }

.strategy-pick-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 14px;
    margin-bottom: 4px;
}
/* Step-number badge — uplifted to mirror the numbered step circles
   from the RETT brand visuals (booth wall + leave-behind). The
   number sits inside an amber circle with a white digit; the
   "STRATEGY" / "SUPPLEMENTAL" label runs beneath in mono caps so
   the same .strategy-pick-num element keeps working on Pages 2/4. */
.strategy-pick-num {
    font-family: var(--font-mono);
    font-size: 0.74em;
    letter-spacing: 0.16em;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.strategy-pick-num .num-big {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* Step-circle moved from amber to navy: the strategy NUMBER is
       not the thing that should pop. The Interested-card outline
       (orange, below) is what should draw the eye to the user's
       pick. Number stays present but recedes visually. */
    background: var(--rett-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(11,27,58,0.35), inset 0 -2px 0 rgba(0,0,0,0.06);
}
.strategy-pick-recommended-tag {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 2px;
}
.strategy-pick-name {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 2.15em;
    color: var(--ink);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin-bottom: 0;
    text-align: center;
}
/* "Structured Installment Sale" wraps to 2 lines while "Proceeds at
   Sale" and "Installment Sale" are 1 line. Without a reserved 2-line
   block the shorter titles let the keyaspect / lockup / button rows
   shift up, and Card C sinks ~24px below the other two. Same fix as
   the supplemental cards above (.supp-strategy-card .strategy-pick-name).
   Scoped to the 3 main strategy cards via the grid container so the
   supplemental cards keep their existing rule. */
.strategy-pick-grid .strategy-pick-card .strategy-pick-name {
    min-height: 2.3em;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Page 4 supplemental cards: "Oil & Gas Working Interest" wraps to two
   lines while "Delphi Fund" is one line; without a min-height the
   keyaspect + lockup rows below shift up on the shorter card and
   labels stop aligning across the row. Reserve two lines of name
   height with vertical centering so short names land mid-block. */
.supp-strategy-card .strategy-pick-name {
    min-height: 2.3em;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Supp cards stretch to equal height in the grid, but their "Input Details"
   panels differ in row count (Oil & Gas has 2 rows, Delphi 1). With the
   default stretched 6-row grid that extra card height was distributed AMONG
   the auto rows, so the shorter-panel card (Delphi) had its rows spread apart
   and its Input Details arrow + panel pushed DOWN out of line with the others.
   align-content:start packs every card's rows to the top so the content — and
   the Input Details row — lines up across the row; the leftover stretch height
   simply sits as blank space at the card bottom (advisor 2026-06-30). */
.supp-strategy-card { align-content: start; }
.strategy-pick-tagline {
    font-family: var(--font-body);
    font-size: 1.05em;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 4px;
    /* Min-height ensures all three taglines occupy the same vertical
       space (longest is the Structured Sale one at ~3 lines). With
       equal-height taglines + identical card row templates, the
       tradeoff blocks below align across the 3 cards. */
    min-height: 4.8em;
    text-align: center;
}
.strategy-pick-tradeoffs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
    padding: 18px 20px;
    background: var(--paper-warm);
    border: 1px solid var(--rule-soft);
    border-radius: 2px;
}
.tradeoff {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid var(--rule-soft);
}
.tradeoff:last-child { border-bottom: none; padding-bottom: 0; }
.tradeoff-label {
    /* Uniform light-blue across all three cards — the tradeoff VALUE
       text describes which option carries which risk; the labels
       themselves don't need to be color-coded. */
    font-family: var(--font-mono);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bh-blue-deep);
    font-weight: 600;
}
.tradeoff-value {
    font-family: var(--font-body);
    font-size: 1.05em;
    color: var(--ink);
    line-height: 1.45;
}

/* Page-2 card body: replaces the old 3-row tradeoff table.
   Each card now shows ONE key-aspect callout (blue label + body copy)
   and ONE lockup graphic (icon + value + subtext) so the visual
   hierarchy stays calm and presentation-readable. */
.strategy-keyaspect {
    margin-top: 14px;
    padding: 18px 22px;
    background: var(--paper-cool);
    border: 1px solid var(--rule-soft);
    border-left: 4px solid var(--rett-blue);
    border-radius: 2px;
    /* Sized to absorb the longest body copy (Seller Finance) so all
       three keyaspect blocks align horizontally across the three cards.
       Flex column with center justify so short copy lands on the
       vertical mid-line of the tan box instead of sticking to the top. */
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.strategy-keyaspect-label {
    font-family: var(--font-mono);
    font-size: 1.05em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bh-blue-deep);
    font-weight: 700;
    margin-bottom: 12px;
}
.strategy-keyaspect-body {
    font-family: var(--font-body);
    font-size: 1.3em;
    color: var(--ink);
    line-height: 1.45;
    margin: 0;
}
.strategy-lockup-graphic {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
    padding: 16px 20px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
    /* Keep all three lockup blocks the same height regardless of how
       the sub text wraps at narrow viewports. */
    min-height: 150px;
}
.strategy-lockup-icon {
    width: 56px;
    height: 56px;
    color: var(--bh-blue-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.strategy-lockup-icon svg {
    width: 100%;
    height: 100%;
}
.strategy-lockup-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    /* Reserve space for two lines of value text (font-size 1.6em,
       line-height 1.05 ≈ 1.68em per line). Single-line labels like
       "Rate Arbitrage" then center within the same vertical space
       that two-line labels like "Ordinary Income Deduction" occupy,
       so the lockup row aligns horizontally across cards regardless
       of how each label wraps. */
    min-height: 3.4em;
}
.strategy-lockup-value {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.6em;
    color: var(--ink);
    line-height: 1.05;
    letter-spacing: -0.01em;
}
.strategy-lockup-sub {
    font-family: var(--font-mono);
    font-size: 0.78em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

.strategy-pick-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
}
.strategy-pick-btn {
    border: 1.5px solid var(--rule);
    background: var(--paper);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 1.05em;
    font-weight: 600;
    color: var(--muted);
    border-radius: 3px;
    padding: 12px 16px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.strategy-pick-btn:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.strategy-pick-btn.is-interested {
    /* Popping orange — pair with the orange card border so the
       advisor's eye moves to the picked card, not the static badge. */
    background: var(--rett-amber);
    border-color: var(--rett-amber);
    color: var(--paper);
}
.strategy-pick-btn.is-not-interested {
    /* Faded light-blue — visually recedes; pairs with the light-blue
       card background to communicate "we're moving past this one." */
    background: var(--rett-blue-light);
    border-color: var(--rett-blue-light);
    color: var(--rett-navy);
}
/* Supplemental cards add .is-active to the picked button (the JS uses
   a distinct class name from the Page-2 strategy cards). Mirror the
   filled-bold treatment so the click "holds" visually, instead of
   reverting to the resting state. */
.supp-pick-btn.is-active[data-supx-pick-action="interested"] {
    /* Match the core Oil & Gas / Delphi "Interested" treatment
       (.strategy-pick-btn.is-interested = var(--rett-amber), the light
       blue #5BA9FF) so every supplemental card's Interested button reads
       the same light blue when picked — the extra cards previously went
       dark navy (var(--ink)), which looked inconsistent next to the core
       cards. */
    background: var(--rett-amber);
    border-color: var(--rett-amber);
    color: var(--paper);
}
.supp-pick-btn.is-active[data-supx-pick-action="not-interested"] {
    background: var(--paper-warm);
    border-color: var(--ink-soft);
    color: var(--ink);
}
/* Quick-pick chip row — appears under Interested button when primary
   $ field is still $0. Lets advisor click a ballpark amount instead
   of opening Details mid-meeting. */
.supx-chips-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    border-radius: 4px;
}
.supx-chips-prompt {
    font-size: 0.82em;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
}
.supx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.supx-chip {
    border: 1px solid var(--ink-soft);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.92em;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.12s;
}
.supx-chip:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
}
.supx-chip-custom {
    border-style: dashed;
    color: var(--muted);
}
/* Inline amount box that replaced the quick-pick chips: a single typed
   input for the strategy's primary dollar figure. Reuses .supx-chips-row's
   framed container; the currency box fills the row width. */
.supx-amount-row .supx-amount-input-wrap {
    width: 100%;
}
.supx-amount-row .supx-amount-input {
    width: 100%;
    box-sizing: border-box;
}

.strategy-pick-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
}
.strategy-pick-actions .btn {
    font-size: 0.95em;
    padding: 11px 22px;
}

/* CHART axis lines/text re-color */
.rett-chart-svg line { stroke: rgba(35,31,85,0.1) !important; }
.rett-chart-svg text { fill: var(--muted) !important; font-family: var(--font-mono) !important; }

/* MISC LEGACY OVERRIDES */
.rett-no-engagement-card strong { color: var(--ink); }
.rett-section-pillgroup { display: inline-flex; align-items: center; gap: 10px; margin-right: 18px; }
.rett-section-slidergroup { display: inline-flex; align-items: center; gap: 10px; }
.rett-section-leverage-readout { font-family: var(--font-mono); font-size: 0.8em; color: var(--muted); }

/* Sub-tab nav (Page 2 Summary / Details) */
[id^="subnav-"] {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--rule);
    padding: 10px 20px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1em;
    cursor: pointer;
    border-radius: 2px;
    margin-right: 8px;
}
[id^="subnav-"].active,
[id^="subnav-"]:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

/* ============ Page 3 — Interested-Only Snapshot ============ */
.rett-interested-hint {
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 0.95em;
    padding: 12px 16px;
    border-radius: 2px;
    margin: 16px 0 20px;
}
.rett-interested-grid {
    display: grid;
    gap: 22px;
    margin-top: 16px;
}
.rett-interested-grid.count-1 { grid-template-columns: minmax(380px, 720px); justify-content: center; }
.rett-interested-grid.count-2 { grid-template-columns: 1fr 1fr; }
.rett-interested-grid.count-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1100px) {
    .rett-interested-grid.count-2,
    .rett-interested-grid.count-3 { grid-template-columns: 1fr; }
}

.rett-interested-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow);
    padding: 26px 28px 22px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rett-interested-card.is-recommended {
    border: 2px solid var(--ink);
    box-shadow: var(--shadow-lg);
}
.rett-interested-card.is-recommended::before {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px;
    height: 5px;
    background: var(--ink);
}
.rett-interested-card.is-chosen {
    /* Chosen ring uses John's Brookhaven-Blue brand accent (--rett-blue,
       #41B9EA in brand-theme.css — the documented primary CTA/accent) so the
       projection's selection treatment matches the lighter blue used across
       the rest of John's app, instead of the darker navy that read as
       off-brand here (advisor 2026-06-30). */
    box-shadow: 0 0 0 3px var(--rett-blue), var(--shadow);
}
.rett-use-strategy-btn {
    margin-top: 14px;
    padding: 12px 16px;
    /* Default (unchosen) state: outlined navy, lighter feel — invites
       the click without already looking "selected." When the user
       picks the strategy, .is-chosen below fills it solid navy and
       the surrounding card border darkens to match. */
    background: var(--paper);
    color: var(--rett-blue);
    border: 1.5px solid var(--rett-blue);
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 0.92em;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.12s;
    width: 100%;
}
.rett-use-strategy-btn:hover {
    background: var(--rett-blue-light);
    transform: translateY(-1px);
}
.rett-interested-card.is-chosen .rett-use-strategy-btn {
    background: var(--rett-blue);
    border-color: var(--rett-blue);
    color: var(--paper);
}
.rett-interested-card.is-chosen .rett-use-strategy-btn:hover {
    background: var(--rett-blue-soft);
}
.rett-interested-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 10px;
    margin-bottom: 6px;
}
.rett-interested-num {
    font-family: var(--font-mono);
    font-size: 1em;
    letter-spacing: 0.18em;
    color: var(--bh-blue-deep);
    font-weight: 600;
    text-transform: uppercase;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}
.rett-interested-num-big {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 2em;
    color: var(--ink);
    letter-spacing: -0.02em;
}
.rett-interested-rec-tag {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: 0.68em;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 2px;
}
.rett-interested-name {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.85em;
    color: var(--ink);
    line-height: 1.05;
    text-align: center;
    margin: 4px 0 12px;
    /* Reserve 2-line height so all 3 cards align even when only one
       name wraps (e.g. "Structured Installment Sale" wraps to 2 lines
       while "Traditional Sale" + "Installment Sale" fit on one). Without
       this, the lockup + downstream rows on the longer-name card sit
       31px lower than the others. Per advisor 2026-05-27. */
    min-height: calc(1.85em * 1.05 * 2);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.rett-interested-net-label {
    font-family: var(--font-mono);
    font-size: 0.75em;
    letter-spacing: 0.18em;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
}
.rett-interested-net-value {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.9em;
    color: var(--green);
    text-align: center;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
}
/* Savings by Sale table (Strategy Summary, multi-sale string). Big, bold,
   green amounts so the per-sale savings have real pop. */
.savings-table {
    width: 100%;
    border-collapse: collapse;
}
.savings-table thead th {
    font-family: var(--font-mono);
    font-size: 0.72em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    text-align: left;
    padding: 0 6px 10px;
}
.savings-table thead th.savings-amt-head { text-align: right; }
.savings-table td {
    padding: 16px 6px;
    border-bottom: 1px solid var(--rule);
    vertical-align: middle;
}
.savings-sale-label {
    font-size: 1.15em;
    font-weight: 600;
    color: var(--ink);
}
.savings-amt {
    text-align: right;
    font-family: var(--font-mono);
    font-style: normal;
    font-weight: 600;
    font-size: 1.3em;            /* clean mono, matching Fees Baked In */
    color: var(--green);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.savings-total-row td {
    border-top: 2px solid var(--ink);
    border-bottom: none;
    padding-top: 18px;
}
.savings-total-row .savings-sale-label { font-size: 1.25em; }
.savings-total-row .savings-amt { font-size: 1.85em; }

/* Multi-sale string: small breakdown under the collective Net Benefit
   ("This sale $X · future sales $Y"). */
.rett-interested-net-sub {
    margin-top: -8px;
    margin-bottom: 14px;
    text-align: center;
    font-size: 0.82em;
    color: var(--muted);
}
/* Multi-sale recommendation framing (advisor 2026-06-30): all three options
   show; the Installment (middle) card is featured + badged "Recommended"; the
   other two carry a short "lower net / more tax, still strong" note. */
.rett-rec-badge {
    display: inline-block;
    padding: 3px 11px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rett-navy);
    background: var(--rett-blue);
    border-radius: 999px;
    white-space: nowrap;
}
.rett-interested-card.is-multi-rec {
    border: 2px solid var(--rett-blue);
    box-shadow: 0 0 0 4px rgba(65, 185, 234, 0.14), var(--shadow-lg);
}
.rett-interested-card.is-multi-rec::before {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px;
    height: 4px;
    background: var(--rett-blue);
}
.rett-strategy-note {
    margin: 4px 0 2px;
    font-size: 0.8em;
    line-height: 1.42;
    color: var(--muted);
    text-align: center;
}
.rett-strategy-note--best {
    color: var(--rett-navy);
    background: var(--rett-blue-light);
    padding: 9px 11px;
    border-radius: 5px;
    font-weight: 500;
    text-align: left;
}

/* Additional Funds — proportional realized-gain breakdown + suggested
   amount button (Tab 1 Section 03). */
/* Auto-populate hint badge that sits beside the Additional Funds amount
   once the optimizer has filled in the optimal liquidation (the old
   "Use suggested" button is gone — the value auto-fills now). Blue to
   match the optimizer accent used by the breakdown + projection toggle.
   The wrapping currency-input is allowed to wrap so the badge drops to
   its own line under the input instead of squeezing it. */
.input-row .currency-input:has(> #additional-funds) { flex-wrap: wrap; }
.addfunds-auto-note {
    flex: 0 0 auto;
    margin: 5px 0 0 auto;        /* push to the right edge when it wraps below */
    padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: #1d4ed8;
    background: rgba(29, 78, 216, 0.08);
    border: 1px solid rgba(29, 78, 216, 0.28);
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
}
.addfunds-breakdown {
    margin: 8px 0 4px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.02);
    border-left: 3px solid rgba(29, 78, 216, 0.4);
    border-radius: 2px;
}
.addfunds-breakdown-title {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 6px;
}
.addfunds-bd-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 2px 0;
    font-variant-numeric: tabular-nums;
}
.addfunds-bd-row span:last-child { font-weight: 600; }

/* Projection page header row — title left, Additional Funds toggle
   right (small, inline). */
.page-projection-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.proj-addfunds-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.proj-addfunds-toggle input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #1d4ed8;
}

/* "New cash you walk away with" — shown inside Show Details, replacing
   the donut (advisor 2026-05-28). Blue to mirror the Tax Implications
   "Cash Kept from Sale" tile. = cash kept from sale + net benefit. */
.rett-interested-walkaway {
    text-align: center;
    padding: 14px 10px 6px;
}
.rett-walkaway-label {
    font-family: var(--font-mono);
    font-size: 0.72em;
    letter-spacing: 0.12em;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.rett-walkaway-value {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 2.9em;
    color: #1d4ed8;
    letter-spacing: -0.02em;
    line-height: 1.02;
    font-variant-numeric: tabular-nums lining-nums;
}
.rett-walkaway-sub {
    font-size: 0.78em;
    color: var(--muted);
    margin-top: 8px;
}
/* Page-3 Lockup line — replaces the old "Time horizon · Leverage"
   auto-pick text. Centered, bigger font so it reads from across the
   room: blue mono label on top, italic display value under. Leverage
   is intentionally not shown here (discussed verbally). */
.rett-interested-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 4px 0 16px;
    padding: 12px 0;
    border-top: 1px dashed var(--rule);
    border-bottom: 1px dashed var(--rule);
}
.rett-interested-lockup-label {
    font-family: var(--font-mono);
    font-size: 0.85em;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bh-blue-deep);
    font-weight: 700;
}
.rett-interested-lockup-value {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.85em;
    color: var(--ink);
    line-height: 1.05;
    letter-spacing: -0.01em;
}
.rett-interested-details {
    border-top: 1px solid var(--rule);
    padding-top: 12px;
}
.rett-interested-details > summary {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--bh-blue-deep);
    cursor: pointer;
    list-style: none;
    padding: 4px 0;
    font-size: 0.95em;
}
.rett-interested-details > summary::before {
    content: "\25B8";  /* right-pointing triangle */
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.15s;
}
.rett-interested-details[open] > summary::before {
    transform: rotate(90deg);
}
.rett-interested-details > summary::-webkit-details-marker { display: none; }
.rett-interested-detail-list {
    list-style: none;
    padding: 10px 0 4px;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.92em;
}
.rett-interested-detail-list li {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px dashed var(--rule);
    color: var(--ink);
}
.rett-interested-detail-list li:last-child { border-bottom: none; }
.rett-interested-detail-list li.rett-interested-detail-net {
    margin-top: 4px;
    border-top: 1px solid var(--ink);
    border-bottom: none;
    padding-top: 8px;
    font-weight: 700;
}
.rett-interested-detail-list li.rett-interested-detail-net strong {
    color: var(--green);
}
.rett-interested-autopick {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 0.82em;
    color: var(--muted);
    padding: 6px 0;
}

/* Payment Schedule sub-table inside the Structured-Sale card's Show
   Details panel. Renders only for type === 'C'. The seller's real-world
   question is "when does the buyer's cash actually arrive?" — this
   table answers it date-by-date so the advisor can plan liquidity. */
/* Page-3 Structured Sale: payment schedule lives BELOW the Use This
   Strategy button as a chevron-only toggle (no text). Stays out of
   the way until the presenter wants to walk through cash timing. */
.rett-interested-paysched-arrow {
    margin-top: 10px;
}
.rett-interested-paysched-arrow > summary {
    list-style: none;
    cursor: pointer;
    padding: 6px 0;
    text-align: center;
    color: var(--bh-blue-deep);
}
.rett-interested-paysched-arrow > summary::-webkit-details-marker { display: none; }
.rett-paysched-arrow-glyph {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid currentColor;
    transition: transform 0.15s;
    vertical-align: middle;
}
.rett-interested-paysched-arrow[open] .rett-paysched-arrow-glyph {
    transform: rotate(180deg);
}
.rett-interested-payments {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--rule);
}
.rett-interested-payments h4 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95em;
    color: var(--ink);
    margin: 0 0 4px 0;
    letter-spacing: 0.01em;
}
.rett-interested-payments h4 .muted {
    font-weight: 400;
    color: var(--muted);
    font-size: 0.92em;
}
.rett-payments-subtitle {
    margin: 0 0 8px 0;
    font-size: 0.85em;
    line-height: 1.4;
    color: var(--ink-soft);
}

/* ============ Page-3 card visuals: donut + payment timeline ============
   Inline SVG donut showing tax-saved-vs-tax-still-owed (every card),
   plus a horizontal-bar payment timeline for the Structured-Sale card.
   The donut sits between the big Net Benefit number and the
   Show-Details accordion; the timeline (C only) sits right under it. */
.rett-donut-wrap {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 18px;
    align-items: center;
    padding: 12px 0 12px;
    border-bottom: 1px dashed var(--rule);
    margin-bottom: 12px;
    margin-top: 6px;
}
@media (max-width: 600px) {
    .rett-donut-wrap { grid-template-columns: 1fr; justify-items: center; }
}
/* Centered, legend-less donut used inside Page-3 Show Details. The
   chart is the only thing in the accordion now (the dollar legend was
   removed) so it gets the full width and a larger max size for
   presentation readability. */
.rett-donut-wrap-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-template-columns: none;
    border-bottom: none;
    padding: 18px 0 8px;
}
.rett-donut-wrap-centered .rett-donut {
    max-width: 380px;
}
.rett-donut {
    width: 100%;
    max-width: 320px;
    height: auto;
}
.rett-donut .rett-donut-leader {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1;
    opacity: 0.55;
}
.rett-donut .rett-donut-leader-label {
    font-family: var(--font-display, inherit);
    font-size: 13px;
    fill: var(--ink);
    opacity: 0.85;
}
/* Slice 1 — what the client KEPT (would have kept doing nothing).
   Uses a soft neutral-blue so the eye reads it as the "default" /
   already-yours portion of the income pie. */
.rett-donut .rett-donut-kept    { fill: var(--rett-blue); opacity: 0.55; }
/* Slice — net benefit / savings clawed back by the strategy. Bright
   green so it pops as "this is the part the strategy gave you." */
.rett-donut .rett-donut-benefit { fill: var(--green-soft); }
/* Slice — fees paid to operate the strategy (variant A only).
   Mid-blue so it visually sits between "savings" and "tax due." */
.rett-donut .rett-donut-fees    { fill: var(--bh-blue-deep); opacity: 0.85; }
/* Slice — tax still owed under the strategy. Orange to read as
   "this is the cost / loss" — pairs with the Page-2 Interested
   button color for cross-page color consistency. */
.rett-donut .rett-donut-owed    { fill: var(--rett-amber); opacity: 0.92; }
.rett-donut-center-pct {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 38px;
    fill: var(--ink);
    letter-spacing: -0.02em;
}
.rett-donut-center-sub {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    fill: var(--muted);
    font-weight: 600;
}
.rett-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.9em;
    color: var(--ink);
}
.rett-donut-leg-row {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 10px;
}
.rett-donut-leg-row strong {
    font-family: var(--font-mono);
    font-size: 0.92em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.rett-donut-leg-label {
    color: var(--ink-soft);
    font-size: 0.92em;
}
.rett-donut-swatch {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
}
.rett-donut-swatch.sw-kept    { background: var(--rett-blue); opacity: 0.55; }
.rett-donut-swatch.sw-benefit { background: var(--green-soft); }
.rett-donut-swatch.sw-fees    { background: var(--bh-blue-deep); opacity: 0.85; }
.rett-donut-swatch.sw-owed    { background: var(--rett-amber); opacity: 0.92; }
.rett-donut-legend-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rett-donut-fees-callout {
    font-family: var(--font-mono);
    font-size: 0.82em;
    color: var(--ink-soft);
    padding: 8px 0 0;
    border-top: 1px dashed var(--rule);
}
.rett-donut-fees-callout strong {
    color: var(--bh-blue-deep);
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   Page 4 — Strategy Summary (BrookHaven Moving-Forward layout)
   Faithful port of the source tax calculator's Tab 4. Two-column
   layout: setup/notes on the left, ROI hero + compare + viz +
   callout on the right. Px-based sizes match the source so the
   visual hierarchy lands exactly.
   ============================================================ */
.forward-intro {
    margin-bottom: 32px;
    max-width: 760px;
}
.optimizer-callout {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #eef8f0;
    border: 1.5px solid #b2dfc2;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 24px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #1e4d30;
}
.optimizer-callout-icon {
    font-size: 10px;
    color: #2d8659;
    margin-top: 4px;
    flex-shrink: 0;
}
.optimizer-callout-body strong {
    color: #1e4d30;
}
.forward-intro h1 {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 500;
    font-style: italic;
    color: var(--ink);
    margin: 0 0 12px 0;
    letter-spacing: -0.01em;
}
.forward-intro p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
}

.forward-noChoice {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--bh-blue);
    padding: 28px 32px;
    box-shadow: var(--shadow);
    max-width: 760px;
}
.forward-noChoice p {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    margin: 0 0 18px 0;
}

.forward-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
    gap: 32px;
    align-items: start;
}
.forward-inputs {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.forward-results {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Page-5 top row — Selected Strategy + Supplemental Strategies sit
   side-by-side on a 2-col grid. When no supplemental is Interested,
   Selected Strategy renders directly (no .forward-top-row wrapper). */
.forward-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Wider column gap between Selected Strategy and Supplemental
       Strategy cards so the two read as distinct blocks rather than a
       single divided container. */
    gap: 40px;
    /* align-items: stretch ensures both cards fill the same height —
       when Selected Strategy has fewer rows than Supplemental, its
       inner body grows to match the taller card's bottom edge. */
    align-items: stretch;
    /* Aggressive buffer below the row — per advisor spec, when the
       cards are in view in the middle of the screen, that should be
       the ONLY thing the eye lands on. Net Benefit / ROP / walkaway
       sit a comfortable scroll distance below. */
    margin-bottom: 140px;
    /* Top margin nudges the cards down off the viewport's top edge
       so they're framed comfortably (rather than pinned right under
       the page nav). Per advisor spec: "move them just slightly down
       south... move them down just a tab more." */
    margin-top: 36px;
}
.forward-top-row > .input-section {
    margin: 0;
    /* Bigger cards per advisor request — more padding, deeper shadow,
       so the two anchor blocks of the page feel substantial. */
    padding: 32px 34px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Equal-height enforcement: height: 100% makes the card fill its
       grid cell, and the grid's align-items: stretch sizes the cells
       to match the tallest. Without this, Selected Strategy would
       collapse to its own content height (~340px) while Supplemental
       grew to fit its rows (~480px). */
    height: 100%;
    min-height: 320px;
}
.forward-strategy-card {
    /* Solo (no supplemental) layout still needs the same buffer. */
    margin-bottom: 140px !important;
    margin-top: 36px;
    min-height: 320px;
}
/* Selected Strategy body grows to fill the available height so the
   card matches its sibling's bottom edge even with fewer rows. The
   rows space themselves out evenly so the empty space distributes
   between Strategy and Asset Manager rather than piling up at the
   bottom. */
.forward-strategy-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Center the rows vertically in the card body so the content
       doesn't pile up at top + bottom with empty space in the middle.
       Per advisor: "bring it to the middle of its tan box". */
    justify-content: center;
    gap: 22px;
    /* Trim left padding visually by allowing the rows to use the
       full width of the body — keeps the Strategy name and Asset
       Manager value from looking marooned on the right edge. */
}
.forward-strategy-row {
    font-size: 1.05em;
}
.forward-strategy-row .label {
    font-size: 1.05em;
    font-weight: 600;
}
.forward-strategy-row .label .sub {
    font-size: 0.78em;
    font-weight: 400;
}
.forward-strategy-name {
    font-family: var(--font-display);
    font-style: italic;
    /* Shrunk 1.7em → 1.5em per advisor spec ("a little bit less in
       size"). Still the most prominent text in the Selected Strategy
       card but doesn't dominate the box. */
    font-size: 1.5em !important;
    line-height: 1.1;
    color: var(--bh-blue-deep);
}
.forward-strategy-leverage {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.5em !important;
    line-height: 1.1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
/* Selected Strategy as ONE full-width block (was a 2-col card row), with
   the supplemental on/off toggles nested in the same block below the
   strategy rows. Width + spacing now match Fees Baked In / Future Sales. */
.forward-strategy-block {
    margin: 36px 0 32px;
}
.forward-strategy-block .forward-strategy-body {
    /* No tall-card centering now that it's a normal-height section. */
    min-height: 0;
    justify-content: flex-start;
}
.forward-supp-subsection {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
}
.forward-supp-subhead {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted, #6B7A99);
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.forward-supp-hint {
    font-family: inherit;
    font-size: 9px;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--muted, #6B7A99);
    font-weight: 400;
    opacity: 0.85;
}
/* Breathing room between Fees Baked In and the Future Sales Estimator. */
.fsp-section {
    margin-top: 28px;
}
.forward-top-row > .input-section .section-heading {
    margin-bottom: 16px;
}
.forward-top-row > .input-section .section-heading h2 {
    font-size: 1.5em;
}
@media (max-width: 900px) {
    .forward-top-row { grid-template-columns: 1fr; }
}

/* Brooklyn investment slider — sits between the Return-on-Planning
   row and the Fees Baked In breakdown on Page 5. The slider's max is
   Available Capital from Page 1; the marker shows the optimizer cap
   (the level that absorbs gain exactly). Dragging past the marker
   surfaces an "excess loss" callout that segues into future-sale
   planning. Revert / Max buttons snap the slider back. */
/* ---- Page 5: "Another Option — Offset Your Future Sale" callout ----
   Generous top margin per advisor spec: when the user is looking at
   the Fees Baked In total, the next section ("Another Option:
   Offset Your Future Sale") should be out of view. 120px puts a
   full visible gap between the two so each reads independently. */
.future-sale-option {
    margin: 120px 0 28px;
    padding: 22px 24px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
}
/* Same generous gap above Fees Baked In so it separates clearly
   from the Net Benefit / ROP / walkaway block. */
#fee-strategies-section {
    margin-top: 56px !important;
}
.future-sale-option .fs-head h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 24px;
    color: var(--ink);
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
}
.future-sale-option .fs-desc {
    font-size: 0.93em;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0 0 18px 0;
    max-width: 760px;
}
.future-sale-option .fs-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--rule-soft);
}
.future-sale-option .fs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule-soft);
}
.future-sale-option .fs-row.fs-total {
    margin-top: 4px;
    padding-top: 18px;
    padding-bottom: 4px;
    border-bottom: none;
    border-top: 2px solid var(--ink);
}
.future-sale-option .fs-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.95em;
    line-height: 1.35;
}
.future-sale-option .fs-label .fs-sub {
    font-family: var(--font-mono);
    font-size: 0.72em;
    letter-spacing: 0.08em;
    color: var(--muted);
    text-transform: none;
    font-weight: 400;
}
.future-sale-option .fs-row.fs-total .fs-label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.85em;
    font-weight: 700;
}
.future-sale-option .fs-amt {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.5em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.future-sale-option .fs-amt.fs-cost { color: #b3411f; }
.future-sale-option .fs-amt.fs-save { color: var(--green, #1e7d4a); }
.future-sale-option .fs-row.fs-total .fs-amt {
    font-size: 2em;
}
.future-sale-option .fs-amt.fs-benefit-positive { color: var(--green, #1e7d4a); }
.future-sale-option .fs-amt.fs-benefit-negative { color: #b3411f; }
.future-sale-option.fs-hint {
    background: var(--paper-warm);
    border-style: dashed;
}
.future-sale-option.fs-hint .fs-desc { margin-bottom: 0; }
.future-sale-option.fs-absorbing {
    border-color: var(--bh-trusted, #1e7d4a);
    background: linear-gradient(0deg, rgba(30, 125, 74, 0.04), rgba(30, 125, 74, 0.04)), var(--paper);
}
.future-sale-option .fs-apply-row {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.future-sale-option .fs-apply-btn {
    font-family: var(--font-mono);
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--bh-blue-deep, #1a3a6e);
    color: #ffffff;
    border: 1px solid var(--bh-blue-deep, #1a3a6e);
    padding: 12px 22px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.future-sale-option .fs-apply-btn:hover {
    background: var(--bh-trusted, #2c5aa0);
    border-color: var(--bh-trusted, #2c5aa0);
}
.future-sale-option .fs-apply-btn:active { transform: translateY(1px); }
.future-sale-option .fs-apply-btn.fs-apply-undo {
    background: transparent;
    color: var(--ink-soft, #444);
    border-color: var(--rule);
}
.future-sale-option .fs-apply-btn.fs-apply-undo:hover {
    border-color: var(--ink, #222);
    color: var(--ink, #222);
    background: var(--paper-warm, #f7f3ec);
}
@media (max-width: 720px) {
    .future-sale-option .fs-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .future-sale-option .fs-apply-row { justify-content: stretch; }
    .future-sale-option .fs-apply-btn { flex: 1; }
}

/* Grow Your Net Benefit — projection card at the very bottom of Page 5 */
/* ============ Future Sales Estimator (standalone tax ballpark) ============ */
.fsp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.fsp-table thead th {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 700;
    text-align: left;
    padding: 0 10px 9px;
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}
.fsp-table thead th:nth-child(4),
.fsp-table thead th:nth-child(5) { text-align: right; }
.fsp-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--rule);
    vertical-align: middle;
}
.fsp-input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 9px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    background: var(--paper-cool, #fff);
    border: 1px solid var(--rule);
    border-radius: 4px;
    min-width: 110px;
}
.fsp-input:focus {
    outline: none;
    border-color: var(--rett-blue, #1F6FEB);
    box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.15);
}
.fsp-amt {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ink);
}
.fsp-tax { font-weight: 600; color: var(--rett-danger, #C0392B); }
.fsp-covered { font-weight: 500; color: var(--ink); }
.fsp-covered-full { color: var(--rett-success, #1F8A4C); font-weight: 600; }
.fsp-saving { font-weight: 600; color: var(--rett-success, #1F8A4C); }
.fsp-table thead th:nth-child(6),
.fsp-table thead th:nth-child(7) { text-align: right; }
.fsp-del-cell { width: 28px; text-align: center; }
.fsp-del {
    border: none;
    background: none;
    color: var(--muted, #6B7A99);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}
.fsp-del:hover { color: var(--rett-danger, #C0392B); background: rgba(192, 57, 43, 0.08); }
.fsp-total-row td {
    padding: 10px 10px 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 700;
    border-top: 2px solid var(--rule);
}
.fsp-total-row .fsp-amt { font-size: 14px; }
.fsp-total-row .fsp-total-tax { color: var(--rett-danger, #C0392B); }
.fsp-total-row .fsp-total-saving { color: var(--rett-success, #1F8A4C); }
.fsp-total-row .fsp-total-covered { color: var(--ink); }
.fsp-add {
    margin-top: 14px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rett-blue, #1F6FEB);
    background: var(--paper-cool, #fff);
    border: 1px dashed var(--rett-blue, #1F6FEB);
    border-radius: 6px;
    cursor: pointer;
}
.fsp-add:hover { background: rgba(31, 111, 235, 0.08); }
@media (max-width: 760px) {
    .fsp-table, .fsp-table thead, .fsp-table tbody, .fsp-table tfoot,
    .fsp-table tr, .fsp-table td, .fsp-table th { display: block; }
    .fsp-table thead { display: none; }
    .fsp-table tbody td { border-bottom: none; padding: 4px 0; }
    .fsp-row { border-bottom: 1px solid var(--rule); padding: 8px 0; margin-bottom: 6px; }
    .fsp-amt { text-align: left; }
}

.growth-projection {
    margin: 56px 0 28px;
    padding: 22px 24px 26px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
}
.growth-projection .growth-head h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 24px;
    color: var(--ink);
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
}
/* Tax Savings hero band — sits at the top of the section so the
   user sees the principal being grown before reading the inputs. */
.growth-savings-hero {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 6px 0 10px;
    padding: 10px 14px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--paper-cool);
}
.growth-savings-label {
    font-family: var(--font-mono);
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.growth-savings-amt {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 28px;
    color: var(--bh-trusted);
    line-height: 1.05;
}
.growth-projection .growth-desc {
    font-size: 0.93em;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0 0 18px 0;
    max-width: 760px;
}
.growth-input-help {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
    margin-top: 2px;
}
.growth-input-row {
    display: flex;
    gap: 24px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.growth-input-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 220px;
    min-width: 200px;
}
.growth-input-label {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.growth-input-wrap {
    display: flex;
    align-items: center;
    background: var(--paper-cool);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 0 14px;
    height: 52px;
    transition: border-color 0.15s, background 0.15s;
}
.growth-input-wrap:focus-within {
    border-color: var(--bh-blue-deep);
    background: var(--paper);
}
.growth-input {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    outline: none;
    width: 100%;
    -moz-appearance: textfield;
}
.growth-input::-webkit-outer-spin-button,
.growth-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.growth-input-suffix {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--muted);
    margin-left: 8px;
    white-space: nowrap;
}
.growth-chart-host {
    margin: 8px 0 18px;
    min-height: 0;
}
.growth-chart-host[aria-hidden="true"] {
    display: none;
}
.growth-chart-svg {
    width: 100%;
    height: auto;
    max-height: 420px;
    display: block;
}
/* Per-year hover dots: subtle by default, scale on hover. The hit
   target is a transparent 14px circle so the tooltip is easy to
   trigger; the visible 3.5px circle is purely cosmetic. */
.growth-chart-svg .growth-dot-group:hover .growth-dot {
    r: 5.5;
    fill: var(--bh-trusted);
}
.growth-chart-svg .growth-dot-hit { cursor: default; }

/* "What we grew to" hero — replaces the prior summary sentence. */
.growth-final {
    padding-top: 14px;
    border-top: 1px solid var(--rule-soft);
    text-align: center;
}
.growth-final:empty {
    border-top: 0;
    padding-top: 0;
}
.growth-final-label {
    font-family: var(--font-mono);
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}
.growth-final-amt {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 56px;
    line-height: 1.05;
    color: var(--bh-trusted);
    letter-spacing: -0.015em;
}
.growth-final-sub {
    font-size: 0.92em;
    color: var(--ink-soft);
    margin-top: 4px;
}
@media (max-width: 720px) {
    .growth-input-row { flex-direction: column; gap: 16px; }
    .growth-projection .growth-head h2 { font-size: 22px; }
}

/* Return on Planning row — 2-col grid:
     LEFT: walkaway block stacked over the You Save / Fees / Net tile
     RIGHT: a big square showing the savings/fees ratio as a percent
   The right square stretches to the full height of the left content
   so it reads as a single tall callout next to the dollar story. */
.forward-rop-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
    /* Top margin pushes the Net Benefit / ROP / walkaway block
       further down the page so Selected Strategy + Supplemental
       remain visually dominant when the page first comes into view. */
    margin: 60px 0 40px 0;
}
.forward-rop-left {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}
.forward-rop-left .forward-walkaway,
.forward-rop-left .forward-compare,
.forward-rop-left .forward-net-hero {
    margin: 0;
}

/* Net Benefit hero — the visual anchor of Page 5. Big shaded card,
   centered, dwarfs the supporting walkaway tiles below it. The
   shading uses the same blue-deep tone as the section accents so it
   reads as part of the BrookHaven palette rather than a colored alert. */
.forward-net-hero {
    background: linear-gradient(135deg, var(--bh-blue-deep) 0%, var(--ink) 100%);
    color: var(--paper);
    border-radius: 2px;
    padding: 32px 28px 28px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.forward-net-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 30% 20%, rgba(65,185,234,0.14) 0%, transparent 55%),
      radial-gradient(circle at 75% 80%, rgba(255,255,255,0.05) 0%, transparent 60%);
    pointer-events: none;
}
.forward-net-hero > * { position: relative; z-index: 1; }
.forward-net-hero .net-hero-label {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bh-blue);
    font-weight: 600;
    margin-bottom: 12px;
}
.forward-net-hero {
    /* A bit more padding so the bigger amount has breathing room */
    padding: 40px 32px 36px;
}
.forward-net-hero .net-hero-amt {
    /* Clean upright MONO figures matching "Fees Baked In" (.strat-fee), not the
       italic Hanken display the advisor disliked (2026-06-30). */
    font-family: var(--font-mono);
    font-style: normal;
    font-weight: 600;
    /* Tabular LINING figures so the 1s/7s are even-width and full-height in the
       big Hanken Grotesk numbers — the hero was missing this while .rop-amt /
       .supp-strat-amt already had it (advisor 2026-06-30: "1s and 7s look odd"). */
    font-variant-numeric: tabular-nums lining-nums;
    /* 84px: mono is wider than the old Hanken display, so trimmed from 108px so
       even large collective totals (~11 digits) stay within the hero box. Still
       the largest figure on the page. */
    font-size: 84px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
}
.forward-net-hero .net-hero-amt .currency {
    font-size: 0.55em;
    color: var(--bh-blue);
    margin-right: 4px;
    vertical-align: 0.15em;
    letter-spacing: 0;
}

/* Net Benefit hero is double-click to expand. Hint that to the
   advisor with a soft cursor change. */
.forward-net-hero[data-net-hero] {
    cursor: zoom-in;
    user-select: none;
}
.forward-net-hero.is-expanded {
    cursor: zoom-out;
}

/* 3-part breakdown panel under the hero (cash / charity / asset).
   Hidden by default; double-click on the hero toggles [hidden]. */
.net-hero-breakdown {
    margin-top: 18px;
    padding: 14px 18px;
    background: rgba(255,255,255,0.85);
    border-top: 1px solid var(--rule-soft);
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}
.net-hero-breakdown[hidden] {
    display: none;
}
.net-hero-breakdown-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px solid var(--rule-soft);
}
.net-hero-breakdown-row:last-child {
    border-bottom: 0;
}
.net-hero-breakdown-label {
    font-family: var(--font-mono);
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.net-hero-breakdown-sub {
    font-family: var(--font-body);
    font-size: 0.85em;
    font-weight: 400;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0.02em;
    margin-top: 2px;
}
.net-hero-breakdown-amt {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.4em;
    color: var(--bh-trusted);
    font-variant-numeric: tabular-nums;
}

/* Compact walkaway tiles. The hero takes the focus now; these two
   small white cards are context — "here's where that net benefit
   came from." Reduced size so they don't compete with the hero. */
.forward-walkaway-compact .walkaway-grid {
    gap: 12px;
}
.forward-walkaway-compact .walkaway-side {
    border-radius: 2px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
/* Need !important here because the legacy `.walkaway-side.noplan`
   rule below sets paper-warm and matches at the same specificity
   (2 classes). User explicitly asked for "white backdrops" on both
   tiles in the compact view — unshade No Planning. */
.forward-walkaway-compact .walkaway-side.noplan,
.forward-walkaway-compact .walkaway-side.withplan {
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
}
.forward-walkaway-compact .walkaway-label {
    font-size: 0.78em;
    margin-bottom: 4px;
}
.forward-walkaway-compact .walkaway-amt {
    font-size: 1.6em !important;
    margin-bottom: 2px;
}
.forward-walkaway-compact .walkaway-tagline {
    font-size: 0.7em;
    color: var(--muted);
}
.forward-rop-square {
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
    color: var(--paper);
    border-radius: 2px;
    box-shadow: var(--shadow-lg);
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.forward-rop-square::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 20% 30%, rgba(65,185,234,0.18) 0%, transparent 55%),
      radial-gradient(circle at 80% 80%, rgba(65,185,234,0.10) 0%, transparent 60%);
    pointer-events: none;
}
.forward-rop-square > * { position: relative; z-index: 1; }
.forward-rop-square .rop-label {
    font-family: var(--font-mono);
    font-size: 16px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bh-blue);
    font-weight: 600;
    margin-bottom: 22px;
}
.forward-rop-square .rop-amt {
    /* Clean upright mono, matching "Fees Baked In" (advisor 2026-06-30). */
    font-family: var(--font-mono);
    font-style: normal;
    font-weight: 600;
    font-size: 128px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
    margin-bottom: 18px;
}
.forward-rop-square .rop-amt .rop-x {
    font-size: 0.5em;
    color: var(--bh-blue);
    margin-left: 6px;
    vertical-align: baseline;
    letter-spacing: 0;
}
.forward-rop-square .rop-sub {
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
}
@media (max-width: 900px) {
    .forward-rop-row { grid-template-columns: 1fr; }
    .forward-rop-square .rop-amt { font-size: 72px; }
}

/* Walk-away comparison block — lives inside .forward-rop-left in the
   2-col Return-on-Planning row. Left half is do-nothing walk-away in
   red; right half is with-planning in green. Big italic numbers, mono
   caps label above, "what you walk away with" tagline below. */
.forward-walkaway {
    margin: 28px 0;
}
.walkaway-head {
    margin-bottom: 14px;
}
.walkaway-head h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 28px;
    color: var(--ink);
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
}
.walkaway-sub {
    font-size: 0.95em;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0;
}
.walkaway-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
    overflow: hidden;
}
.walkaway-side {
    padding: 28px 32px;
    text-align: center;
}
.walkaway-side.noplan {
    background: var(--paper-warm);
    border-right: 1px solid var(--rule);
}
.walkaway-side.withplan {
    background: var(--paper);
}
.walkaway-label {
    font-family: var(--font-mono);
    font-size: 0.85em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 12px;
}
.walkaway-side.withplan .walkaway-label {
    color: var(--green);
}
.walkaway-amt {
    font-family: var(--font-mono);
    font-style: normal;
    font-weight: 600;
    font-size: 2.4em;
    line-height: 1.05;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
.walkaway-side.noplan .walkaway-amt {
    color: #c0392b;
}
.walkaway-side.withplan .walkaway-amt {
    color: var(--green);
}
.walkaway-tagline {
    font-family: var(--font-body);
    font-size: 0.95em;
    color: var(--ink-soft);
    line-height: 1.4;
    font-style: italic;
}
@media (max-width: 720px) {
    .walkaway-grid { grid-template-columns: 1fr; }
    .walkaway-side.noplan { border-right: none; border-bottom: 1px solid var(--rule); }
    .walkaway-amt { font-size: 2.4em; }
}

.forward-balance {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.forward-fee-display {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding: 10px 12px;
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    border-radius: 1px;
}

/* Fees Baked In - row pattern (mirrors source's .fee-strat-row) */
.fee-strat-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
}
.fee-strat-row:last-child { border-bottom: none; }
.fee-strat-row .strat-info { min-width: 0; }
.fee-strat-row .strat-name {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}
.fee-strat-row .strat-savings-line {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--muted);
    margin-top: 4px;
    letter-spacing: 0.02em;
    font-weight: 400;
    line-height: 1.4;
}
.fee-strat-row .strat-fee {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 90px;
}

.fee-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    margin-top: 4px;
    border-top: 2px solid var(--ink);
}
.fee-summary-row .fee-summary-label {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}
/* REVIEW button — replaces the static REVIEW badge in the section
   heading. Same visual size/feel; click toggles the side-by-side
   reconciliation panel. */
.section-review-btn {
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--ink-soft);
    padding: 4px 10px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.78em;
    letter-spacing: 0.04em;
    color: var(--muted);
    transition: all 0.15s;
}
.section-review-btn:hover {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--paper-warm);
}
.section-review-btn[aria-expanded="true"] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}
/* Side-by-side baseline-vs-strategy reconciliation panel. Hidden by
   default; opened via the REVIEW button on the Fees Baked In header.
   Two-column grid: left is the no-planning tax baseline, right is
   each strategy effect that altered each baseline bucket. The check-
   math line at the bottom verifies subtraction holds. */
.recon-panel {
    margin-top: 24px;
    padding: 18px 20px;
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    border-radius: 4px;
}
.recon-panel[hidden] { display: none; }
.recon-intro {
    font-size: 0.88em;
    color: var(--muted);
    margin-bottom: 14px;
    line-height: 1.4;
}
.recon-intro strong { color: var(--ink); }
.recon-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
.recon-col-head {
    font-family: var(--font-mono);
    font-size: 0.78em;
    letter-spacing: 0.04em;
    color: var(--bh-blue-deep);
    text-transform: uppercase;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1.5px solid var(--bh-blue-deep);
}
.recon-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    font-size: 0.94em;
}
.recon-row .recon-label {
    color: var(--ink);
    flex: 1 1 auto;
    min-width: 0;
}
.recon-row .recon-amt {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    flex-shrink: 0;
    font-size: 0.96em;
}
.recon-row.recon-divider {
    border-top: 1px dashed var(--rule);
    padding: 0;
    margin: 6px 0;
    height: 0;
}
.recon-row.recon-total {
    font-weight: 700;
    padding-top: 8px;
    border-top: 1.5px solid var(--ink);
    margin-top: 4px;
}
.recon-row.recon-total .recon-amt { font-weight: 700; font-size: 1.05em; }
.recon-row.recon-supp .recon-amt { color: #16704a; }  /* offset = green-ish */
.recon-bucket {
    color: var(--muted);
    font-size: 0.86em;
    font-style: italic;
}
.recon-checkmath {
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--ink);
    text-align: center;
    font-family: var(--font-mono);
}
.recon-checkmath strong {
    font-weight: 700;
    color: var(--bh-blue-deep);
}
@media (max-width: 720px) {
    .recon-grid { grid-template-columns: 1fr; gap: 16px; }
}

.fee-summary-row .fee-summary-amt {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* ROI Hero - gradient navy with the big multiplier */
.roi-hero {
    background: linear-gradient(135deg, var(--bh-trusted) 0%, var(--bh-trusted-soft) 100%);
    color: white;
    padding: 48px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: var(--shadow-lg);
}
.roi-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 20% 50%, rgba(65,185,234,0.18) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(65,185,234,0.12) 0%, transparent 60%);
    pointer-events: none;
}
.roi-hero > * { position: relative; z-index: 1; }
.roi-hero .roi-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--bh-blue);
    margin-bottom: 16px;
    font-weight: 600;
}
.roi-hero .roi-multiple {
    font-family: var(--font-display);
    font-size: 144px;
    font-weight: 500;
    line-height: 1;
    color: white;
    letter-spacing: -0.04em;
    font-style: italic;
}
.roi-hero .roi-multiple .x {
    font-size: 72px;
    color: var(--bh-blue);
    margin-left: 6px;
    font-style: normal;
    vertical-align: middle;
}
.roi-hero .roi-sub {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    color: rgba(255,255,255,0.82);
    margin-top: 16px;
}

/* Compare row: Total Fees vs You Save, with Net Benefit footer */
.forward-compare {
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow);
}
.compare-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 32px 24px;
    gap: 32px;
}
.compare-side { text-align: center; }
.compare-side .compare-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
    font-weight: 600;
}
.compare-side .compare-amt {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}
.compare-side.cost .compare-amt { color: var(--bh-blue); }
.compare-side.savings .compare-amt { color: var(--green); }
.compare-side .compare-amt .currency {
    font-size: 22px;
    vertical-align: top;
    line-height: 1.4;
    margin-right: 1px;
    color: var(--muted);
}
.compare-side.cost .compare-amt .currency { color: var(--bh-blue); }
.compare-side.savings .compare-amt .currency { color: var(--green-soft); }
.compare-side .compare-detail {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
    line-height: 1.4;
}
.compare-divider {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    color: var(--muted);
}
.compare-net {
    background: var(--paper-cool);
    padding: 32px 24px 40px;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.compare-net .net-label {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 12px;
}
.compare-net .net-amt {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 64px;
    line-height: 1.05;
    color: var(--green);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.compare-net .net-amt .currency {
    font-size: 36px;
    color: var(--green-soft);
    vertical-align: top;
    line-height: 1.4;
    margin-right: 2px;
}

/* Bar viz */
.forward-viz {
    background: var(--paper);
    border: 1px solid var(--rule);
    padding: 24px;
    box-shadow: var(--shadow);
}
.viz-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
.viz-row:last-child { margin-bottom: 0; }
.viz-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: right;
    font-weight: 600;
}
.viz-bar-wrap {
    position: relative;
    height: 36px;
    background: var(--paper-cool);
    border-radius: 2px;
    overflow: visible;
}
.viz-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
    min-width: 1%;
}
.viz-bar.fee {
    background: linear-gradient(90deg, var(--bh-trusted), var(--bh-trusted-soft));
}
.viz-bar.savings {
    background: linear-gradient(90deg, var(--green), var(--green-soft));
}
.viz-amt {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Bottom-line callout */
.forward-callout {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--bh-blue);
    padding: 20px 24px;
    box-shadow: var(--shadow);
}
.forward-callout .callout-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bh-blue);
    margin-bottom: 8px;
    font-weight: 600;
}
.forward-callout p {
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink);
    font-style: italic;
    margin: 0;
}

/* Page-5 Supplemental Strategies — slim rows inside an .input-section
   panel in the LEFT column, between Selected Strategy and Fees Baked
   In. Toggle · name · signed contribution. No descriptors (Page 4
   already explained the strategy). The hero numbers (You Save / ROI /
   Net Benefit) reflect the combined picture so this block's only job
   is letting the advisor dial each supplemental on/off mid-meeting. */
.supp-strat-row {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--rule);
}
.supp-strat-row:last-child {
    border-bottom: none;
}
.supp-strat-name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1em;
    color: var(--ink);
    line-height: 1.3;
}
.supp-strat-amt {
    font-family: var(--font-mono);
    font-style: normal;
    font-weight: 600;
    font-size: 1.3em;
    color: var(--green);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.supp-strat-amt.is-off {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    opacity: 0.6;
}

/* Toggle switch (CSS-only checkbox skin). Reused from the original
   bottom-of-page supplemental block. */
.supp-row-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}
.supp-row-toggle input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}
.supp-row-toggle input:disabled { cursor: not-allowed; }
.supp-row-switch {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: var(--rule);
    transition: background 0.15s;
    pointer-events: none;
}
.supp-row-switch::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--paper);
    border-radius: 50%;
    transition: transform 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.supp-row-toggle input:checked ~ .supp-row-switch {
    background: var(--green);
}
.supp-row-toggle input:checked ~ .supp-row-switch::before {
    transform: translateX(20px);
}
.supp-row-toggle input:disabled ~ .supp-row-switch {
    opacity: 0.5;
}

.supp-row-pending {
    display: inline-block;
    margin-left: 8px;
    font-family: var(--font-mono);
    font-size: 0.7em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    vertical-align: middle;
}

/* Reason note for an Interested supp that the rivalry rejected.
   Sits inline next to the supp name; the amount column shows $0. */
.supp-row-subnote {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.85em;
    color: var(--muted);
    font-style: italic;
    font-weight: 400;
    vertical-align: middle;
}

/* Page-5 Implementation panel — hidden by default, expanded by clicking
   the tiny triangle on a trailing dash. Advisor audit view, NOT for
   client presentation. Shows the dollar allocation across Brooklyn +
   each enabled supplemental so the math can be checked. */
/* ---- Print button (screen only) ---- */
.forward-print-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--rule-soft);
}
.btn-print {
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 20px;
    background: var(--bh-trusted);
    color: #fff;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-print:hover {
    background: var(--bh-trusted-soft);
    box-shadow: 0 2px 8px rgba(35,31,85,0.18);
}
.forward-print-hint {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}

/* ---- Print view (hidden on screen, shown only when printing) ---- */
.print-view { display: none; }

.forward-implementation {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--rule-soft);
}

/* ================================================================
   @media print — hides all screen UI, shows only .print-view
   ================================================================ */
@media print {
    /* Show ONLY the print view. Using display:none (not
       visibility:hidden) so hidden elements don't reserve layout
       space and create blank trailing pages. We collapse the entire
       ancestor chain down to .print-view and let it occupy the page
       naturally. */
    html, body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* The React build nests the whole app under #root (body > #root > main),
       so the old `body > *:not(main)` hid #root and printed a BLANK page.
       Keep #root + main, hide #root's other children (header / nav) and
       main's non-allocator children. Flat-app safe: with no #root present,
       `main` survives via the :not(main) guard (advisor 2026-06-30 — fixes
       the blank Print / Save-as-PDF). */
    body > *:not(#root):not(main) { display: none !important; }
    #root, #root > main, main { display: block !important; }
    #root > *:not(main) { display: none !important; }
    main { padding: 0 !important; margin: 0 !important; }
    main > *:not(#page-allocator) { display: none !important; }
    #page-allocator { display: block !important; padding: 0 !important; margin: 0 !important; }
    /* The .print-view is rendered INSIDE #strategy-fee-summary-host (the
       same host that holds the on-screen summary), so we must keep the
       host displayed and walk INTO it — hiding the host with
       display:none would collapse the print-view inside it and print a
       blank page (advisor 2026-06-15). Hide page-allocator's other
       direct children (legacy #print-header, the print button row), keep
       the host, then within the host show only the print-view. */
    #page-allocator > *:not(#strategy-fee-summary-host) { display: none !important; }
    #strategy-fee-summary-host { display: block !important; padding: 0 !important; margin: 0 !important; }
    #strategy-fee-summary-host > *:not(.print-view) { display: none !important; }
    .print-view {
        display: block !important;
        position: static !important;
        width: 100%;
    }

    @page {
        margin: 0.5in 0.55in;
        size: letter portrait;
    }

    /* ---------- Print layout ---------- */
    /* Sized up modestly (advisor 2026-06-15) so the leaner page —
       supplemental fees and the optimizer note removed — fills more of
       the sheet rather than sitting at ~3/4. Measured against real print
       typography (extracted @media print rules) to stay on one page. */
    .print-view {
        font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
        font-size: 10pt;
        color: #111;
        background: #fff;
        line-height: 1.5;
    }
    /* Bordered "leave-behind" frame so the printed sheet reads as a
       single professional document rather than a loose page. */
    .print-doc-frame {
        border: 1.5pt solid #0a1d3d;
        border-radius: 6pt;
        padding: 16pt 20pt 14pt;
        background: #fff;
        page-break-inside: avoid;
    }
    /* Force the whole .print-view onto a single page. */
    .print-view { page-break-inside: avoid; }
    .print-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 6pt;
        gap: 14pt;
    }
    /* Header brand: 3-bar glyph + RETT wordmark stacked over the
       italic "Real Estate Transition Trust" subtitle, mirroring the
       trade-booth wordmark layout. */
    .print-header-brand {
        display: flex;
        align-items: center;
        gap: 8pt;
        color: #0a1d3d;
    }
    .print-brand-glyph {
        width: 22pt;
        height: 22pt;
        flex: 0 0 22pt;
    }
    .print-brand-logo {
        height: 30pt;
        width: auto;
        flex: 0 0 auto;
        object-fit: contain;
    }
    .print-brand-text {
        display: flex;
        flex-direction: column;
        line-height: 1;
    }
    .print-brand-rett-line {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-weight: 800;
        font-size: 22pt;
        letter-spacing: -0.015em;
        color: #0a1d3d;
        line-height: 0.95;
    }
    .print-brand-rett-line sup {
        font-size: 0.36em;
        font-weight: 600;
        color: #6dc5e8;
        margin-left: 1pt;
        vertical-align: super;
    }
    .print-brand-sub {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 9pt;
        color: #355281;
        margin-top: 2pt;
        letter-spacing: 0.005em;
    }
    .print-client-email {
        font-size: 8.5pt;
        color: #444;
    }
    .print-email-placeholder {
        color: #999;
        font-style: italic;
    }
    .print-header-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 1pt;
    }
    .print-client-name {
        /* A little smaller than the 22pt RETT wordmark (advisor 2026-06-30). */
        font-size: 18pt;
        font-weight: 700;
        color: #0a1d3d;
    }
    .print-date {
        font-size: 8pt;
        color: #666;
    }
    .print-rule {
        height: 3pt;
        border: none;
        background: linear-gradient(90deg, #0a1d3d 0%, #0a1d3d 60%, #5BA9FF 60%, #5BA9FF 100%);
        margin-bottom: 7pt;
        border-radius: 1pt;
    }
    .print-title-block {
        margin-bottom: 12pt;
    }
    .print-title {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 18pt;
        font-weight: 500;
        font-style: italic;
        color: #0a1d3d;
        margin: 0 0 2pt;
    }
    .print-strategy-tag {
        font-size: 8.5pt;
        color: #555;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    /* "What We Save You" heading sits directly above the hero row as a
       full-width section head (not inside a .print-section column). */
    .print-savings-head {
        margin-top: 6pt;
        margin-bottom: 7pt;
    }
    .print-fees-section { margin-top: 8pt; }

    /* Hero boxes */
    .print-hero-row {
        display: flex;
        gap: 9pt;
        margin-bottom: 13pt;
    }
    .print-hero-box {
        flex: 1;
        border: 1px solid #c8d4e0;
        border-radius: 4pt;
        padding: 10pt 11pt;
        background: #f8fafc;
    }
    /* Net Benefit hero: highlight with the brand amber so it draws
       the eye as the takeaway number on the page. */
    .print-hero-net {
        background: #fdf3e3;
        border-color: #5BA9FF;
        border-width: 1.2pt;
    }
    .print-hero-net .print-hero-value { color: #b06b08; }
    .print-hero-fees {
        background: #f3f6fb;
        border-color: #c0cee0;
    }
    .print-hero-label {
        font-size: 8pt;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #555;
        margin-bottom: 3pt;
    }
    .print-hero-value {
        font-size: 16pt;
        font-weight: 700;
        color: #111;
        line-height: 1.1;
    }
    .print-hero-sub {
        font-size: 7.5pt;
        color: #666;
        margin-top: 2pt;
    }
    /* Future-sales breakout on the leave-behind — compact so the print stays
       on one page (advisor 2026-06-30). */
    .print-future-section { margin-top: 7pt; }
    .print-future-note {
        font-size: 7pt;
        color: #6b7a90;
        font-style: italic;
        margin-top: 3pt;
    }

    /* Body columns */
    .print-body {
        display: flex;
        gap: 16pt;
    }
    .print-col {
        flex: 1;
        min-width: 0;
    }

    /* Sections */
    .print-section {
        margin-bottom: 11pt;
    }
    .print-section-head {
        font-size: 8pt;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #0a1d3d;
        font-weight: 700;
        border-bottom: 1px solid #c8d4e0;
        padding-bottom: 2pt;
        margin-bottom: 5pt;
    }

    /* Tables */
    .print-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 9.5pt;
    }
    .print-table th {
        text-align: left;
        font-weight: 600;
        padding: 2.5pt 5pt;
        border-bottom: 1px solid #c8d4e0;
        font-size: 8pt;
        color: #333;
    }
    .print-table td {
        padding: 4.5pt 5pt;
        color: #111;
        vertical-align: top;
        border-bottom: 1px solid #e8eef4;
    }
    .print-table tr:last-child td { border-bottom: none; }
    .print-num { text-align: right; white-space: nowrap; }
    .print-r   { text-align: right; }
    .print-green { color: #1e5c38; }
    .print-total-row td { border-top: 1.5px solid #c8d4e0 !important; padding-top: 4pt; }
    .print-note { font-size: 7pt; color: #666; }

    /* Optimizer note */
    .print-optimizer-note {
        font-size: 7.5pt;
        color: #1e4d30;
        background: #eef8f2;
        border: 1px solid #b2d9c2;
        border-radius: 4pt;
        padding: 5pt 7pt;
        margin-top: 6pt;
        line-height: 1.5;
    }

    /* ROI */
    .print-roi-display {
        display: flex;
        align-items: baseline;
        gap: 8pt;
        padding: 4pt 0;
    }
    .print-roi-num {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 28pt;
        font-weight: 500;
        color: #0a1d3d;
        line-height: 1;
    }
    .print-roi-label {
        font-size: 8pt;
        color: #444;
        max-width: 160pt;
        line-height: 1.4;
    }

    /* Footer: BrookHaven attribution (italic display, mid weight)
       on the left, compliance disclaimer in tiny mono running
       across the full width. Amber accent rule sits above. */
    .print-footer {
        margin-top: 8pt;
        padding-top: 5pt;
        border-top: 1.5pt solid #5BA9FF;
        font-size: 6.5pt;
        color: #555;
        line-height: 1.4;
    }
    .print-footer-attrib {
        display: flex;
        align-items: baseline;
        gap: 6pt;
        margin-bottom: 3pt;
    }
    .print-footer-bh {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-weight: 500;
        font-size: 10pt;
        color: #0a1d3d;
    }
    .print-footer-bh-sub {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 6.5pt;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #355281;
    }
    .print-footer-disclaimer {
        font-size: 6pt;
        color: #888;
        line-height: 1.4;
        margin: 0;
    }
    .print-roi-num { font-size: 22pt !important; }

    /* Page break control */
    .print-hero-row { page-break-inside: avoid; }
    .print-section   { page-break-inside: avoid; }
}
.forward-implementation-summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}
.forward-implementation-summary::-webkit-details-marker { display: none; }
.impl-dash {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid var(--muted);
    transition: transform 0.15s, border-top-color 0.15s;
}
.forward-implementation-summary:hover .impl-dash {
    border-top-color: var(--ink);
}
.forward-implementation[open] .impl-dash {
    transform: rotate(180deg);
    border-top-color: var(--ink);
}
.forward-implementation-body {
    padding: 18px 22px 22px;
    background: var(--paper-warm);
    border: 1px solid var(--rule-soft);
    border-radius: 2px;
    margin-top: 10px;
}
.impl-head {
    font-family: var(--font-mono);
    font-size: 0.78em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bh-blue-deep);
    font-weight: 700;
    margin-bottom: 4px;
}
.impl-sub {
    font-size: 0.85em;
    color: var(--muted);
    margin: 0 0 14px 0;
    line-height: 1.45;
}
.impl-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 8px 0;
    font-family: var(--font-mono);
    font-size: 0.92em;
    color: var(--ink);
    border-bottom: 1px dashed var(--rule);
}
.impl-row:last-of-type { border-bottom: none; }
.impl-row-supp .impl-name,
.impl-row-brooklyn .impl-name {
    color: var(--ink-soft);
    padding-left: 14px;
}
.impl-row-brooklyn {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--ink);
    font-weight: 600;
}
.impl-amt {
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.impl-warn {
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--paper);
    border-left: 3px solid #c0392b;
    font-size: 0.88em;
    line-height: 1.5;
    color: var(--ink);
}
.impl-section-divider {
    margin: 18px 0 12px;
    border-top: 1px solid var(--rule);
}
.impl-row-strong {
    font-weight: 700;
}
.impl-row-strong .impl-amt {
    color: var(--bh-blue-deep);
}
.impl-recnote {
    margin: 12px 0 0;
    padding: 10px 14px;
    background: var(--paper);
    border-left: 3px solid var(--bh-blue-deep);
    font-size: 0.88em;
    line-height: 1.5;
    color: var(--ink);
}

@media (max-width: 1100px) {
    .forward-layout { grid-template-columns: 1fr; }
    .roi-hero .roi-multiple { font-size: 96px; }
    .roi-hero .roi-multiple .x { font-size: 50px; }
}
@media (max-width: 640px) {
    .compare-row { grid-template-columns: 1fr; gap: 16px; }
    .roi-hero { padding: 32px 24px; }
    .roi-hero .roi-multiple { font-size: 72px; }
    .roi-hero .roi-multiple .x { font-size: 36px; }
    .viz-row { grid-template-columns: 100px 1fr; gap: 12px; }
}
.rett-payments-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.85em;
}
.rett-payments-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--ink);
    color: var(--ink);
    font-weight: 600;
    font-size: 0.78em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.rett-payments-table td {
    padding: 6px 8px;
    border-bottom: 1px dashed var(--rule);
    color: var(--ink);
}
.rett-payments-table td.muted { color: var(--muted); font-size: 0.92em; }
.rett-payments-table tr.rett-payments-total td {
    border-bottom: none;
    border-top: 1px solid var(--ink);
    font-weight: 700;
    padding-top: 8px;
}
.rett-payments-table tr.rett-payments-total td.muted {
    font-weight: 400;
}


/* ============== PAGE 4 — Supplemental strategies (v3)
   Cards reuse .strategy-pick-card from Page 2 wholesale. Grid uses
   the same 3-up template as Page 2 so a lone card occupies one
   column (1/3 width) and additional supplemental strategies fill
   in 3-per-row as we add them. The only net-new chrome is the small
   chevron arrow under the Interested button that toggles a Details
   panel with two simple knobs (Max Investment + Depreciation %). ============== */
.supp-strategies-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
    margin-top: 24px;
}
@media (max-width: 1000px) {
    .supp-strategies-grid { grid-template-columns: 1fr; }
}

/* Small chevron + "Details" label that appears under the Interested
   button. Closed state = arrow only; open state adds the word. */
.supp-details-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    padding: 4px 6px;
    background: transparent;
    border: none;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.72em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    align-self: flex-start;
}
.supp-details-arrow:hover {
    color: var(--ink);
    background: var(--paper-warm);
}
.supp-details-arrow-chev {
    display: inline-block;
    transform: rotate(-90deg); /* points right when closed */
    transition: transform 0.18s ease-out;
    font-size: 0.95em;
    line-height: 1;
}
.supp-details-arrow.is-open .supp-details-arrow-chev {
    transform: rotate(0deg); /* points down when open */
}
/* Always show the "Input Details" label (not just when open) so the
   user knows what the chevron opens before clicking (advisor 2026-06-15). */
.supp-details-arrow-label { display: inline; }

/* "See Value" button — appears beneath the Details arrow on each
   placeholder card. Disabled until the user marks Interested so the
   solver actually evaluates the strategy. Style matches the primary
   strategy buttons but slimmer so the card stays compact. */
/* "See value" chevron — matches the oilGas / delphi value-arrow
   pattern so all supplemental cards share one affordance. The
   underlying .supp-details-arrow rules (rotation on .is-open,
   muted color, mono uppercase label) carry over via the compound
   class. Adds disabled-state styling for placeholder cards and
   "Interested" gating. */
.supp-details-arrow.supx-value-arrow:disabled,
.supp-details-arrow.supx-value-arrow[aria-disabled="true"] {
    opacity: 0.40;
    cursor: not-allowed;
}

/* Placeholder card treatment — reserved slots awaiting real
   strategy data. Greyed out at the card level and the small
   "Coming Soon" tag in the header makes the state explicit. */
.supp-strategy-card.is-placeholder {
    opacity: 0.55;
    background: var(--paper-cool);
}
.supp-strategy-card.is-placeholder:hover { opacity: 0.78; }
.supx-placeholder-tag {
    display: inline-block;
    margin-left: auto;
    padding: 2px 8px;
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.62em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

/* Result row — three states: value (green), crowded (muted), pending
   (italic muted). All three share padding and rounded corners. */
.supx-result-row {
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 3px;
    border: 1px solid var(--rule-soft);
    background: var(--paper-warm);
    font-family: var(--font-body);
    line-height: 1.35;
}
.supx-result-row[data-state="value"] {
    background: #eef8f2;
    border-color: #a8d4bc;
}
.supx-result-row[data-state="crowded"] {
    background: #f6f4ee;
    border-color: var(--rule);
}
.supx-result-row[data-state="pending"] {
    background: var(--paper-warm);
    border-color: var(--rule-soft);
}
.supx-result-amt {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.4em;
    color: #1e5c38;
    line-height: 1.1;
}
.supx-result-msg {
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}
.supx-result-msg.supx-result-pending {
    font-style: italic;
    color: var(--muted);
    font-weight: 500;
}
.supx-result-sub {
    font-size: 0.85em;
    color: var(--muted);
    margin-top: 2px;
}

/* Details panel content — 2 simple rows: label + input */
.supp-details-panel {
    margin-top: 4px;
    padding: 10px 12px 12px;
    background: var(--paper-warm);
    border-top: 1px solid var(--rule-soft);
}
.supp-details-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 160px);
    gap: 12px;
    align-items: center;
    padding: 6px 0;
}
.supp-details-cell {
    min-width: 0;
}
.supp-details-cell .currency-input {
    display: block;
    width: 100%;
}
.supp-details-cell .currency-input input,
.supp-details-cell .supp-select {
    width: 100%;
    box-sizing: border-box;
}
.supp-details-row + .supp-details-row {
    border-top: 1px solid var(--rule-soft);
}
.supp-details-rowlabel {
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--ink);
}
.supp-details-rowsub {
    color: var(--muted);
    font-size: 0.86em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-left: 4px;
}
.supp-details-cell .currency-input input {
    padding: 7px 10px;
    font-size: 0.92em;
}
.supp-details-cell .currency-input.percent input {
    padding-right: 22px;
}
.currency-input.percent {
    position: relative;
}
.currency-input.percent .pct-suffix {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.9em;
    pointer-events: none;
}

/* ---- Delphi card additions: select dropdown + min-investment warning ---- */
.supp-select {
    width: 100%;
    padding: 7px 28px 7px 10px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                      linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 14px) center, calc(100% - 9px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.supp-select:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 2px rgba(35,31,85,0.08);
    background-color: var(--paper-warm);
}
.supp-min-warning {
    margin: 10px 0 0;
    padding: 8px 10px;
    background: rgba(252,165,165,0.12);
    border-left: 3px solid #d97706;
    color: var(--ink);
    font-size: 0.78em;
    line-height: 1.45;
}

/* ---- Page 4 header + actions row ---- */
.page-supplemental-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0 4px;
    gap: 16px;
}
.page-supplemental-header h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 2.2em;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 0;
    text-align: left;
}
.supp-advance-btn {
    flex-shrink: 0;
    white-space: nowrap;
}
/* Wrap the Reset + Advance buttons together so they sit on the same
   line at the right edge of the page-supplemental header. */
.supp-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}
.supp-reset-btn {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.92em;
}
.page-supplemental-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--rule-soft);
}

/* ---- Not-interested fade animation ---- */
@keyframes supp-card-fade-back {
    from { opacity: 1; }
    to   { opacity: 0.55; }
}
.strategy-pick-card.is-not-interested {
    animation: supp-card-fade-back 0.32s ease-out forwards;
}

/* ---- Second chevron: value added ---- */
.supp-value-arrow {
    margin-top: 6px;
    color: var(--bh-blue-mid, #41b9ea);
}
.supp-value-arrow:hover {
    color: var(--bh-blue-deep, #1a8cb8);
    background: var(--paper-warm);
}

/* ---- Value panel ---- */
.supp-value-panel {
    margin-top: 4px;
    padding: 10px 14px;
    background: var(--paper-warm);
    border-top: 1px solid var(--rule-soft);
}
.supp-value-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.supp-value-label {
    font-family: var(--font-mono);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
}
.supp-value-amt {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.35em;
    font-weight: 700;
    color: var(--bh-blue-deep, #1a8cb8);
    letter-spacing: -0.01em;
}

/* ===========================================================
   Print Header (screen-hidden, print-shown).
   Populated by strategy-summary-render: client name, state,
   tax year, prepared date. Sits at the top of every printout.
   =========================================================== */
.print-header { display: none; }
.print-cta-row {
    margin: 24px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.print-cta-row .cta-btn {
    font-size: 0.95em;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.print-cta-row .cta-btn-secondary {
    background: var(--paper-warm);
    color: var(--ink);
    border: 1.5px solid var(--ink-soft);
}
.print-cta-row .cta-btn-secondary:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

/* ===========================================================
   PRINT STYLESHEET — single-page client-facing report.
   Hide nav, page-strategies/projection/supplemental, the ribbon,
   the case-management bar, supplemental TOGGLES, the
   Implementation panel, the future-sale callout when its the
   no-coverage case, and the print button itself. Reformat the
   page-allocator content to fit a US Letter portrait page in
   a single shot.
   =========================================================== */
/* Native print page setup. The @page rule can ONLY appear inside
   @media print — affects native browser print only. The print-mode
   visual rules below apply via a body class so they work for BOTH
   native print (added by beforeprint listener) AND the html2pdf
   download path (added programmatically before snapshot). */
@media print {
    @page {
        /* margin:0 so the browser drops its own date / page-title / URL
           (localhost) headers — they live in the @page margin (advisor
           2026-06-30). The leave-behind supplies its own inset via padding on
           .print-view below. */
        size: letter portrait;
        margin: 0;
    }
    .print-view { padding: 0.4in 0.45in; }
    /* Native print = the one-page leave-behind ONLY. The on-screen summary (the
       host's other children) is for the screen; printing it too spilled the PDF
       to ~3 pages with a blank trailer (advisor 2026-06-30). */
    #strategy-fee-summary-host > :not(.print-view) { display: none !important; }
}
.print-mode {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5px !important;
}
.print-mode * {
    box-shadow: none !important;
    text-shadow: none !important;
}
.print-mode .nav,
.print-mode .header,
.print-mode .app-banner,
.print-mode .skip-link,
.print-mode #savings-ribbon,
.print-mode #ribbon-spacer,
.print-mode #subnav,
.print-mode .case-management,
.print-mode .pmq-compact-host,
.print-mode .no-print,
.print-mode .print-cta-row,
.print-mode .page:not(#page-allocator) {
    display: none !important;
}
.print-mode #page-allocator {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}
.print-mode main { padding: 0 !important; margin: 0 !important; }

.print-mode .print-header {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid #1a3a5c;
    padding-bottom: 8px;
    margin-bottom: 14px;
}
.print-mode .print-header-brand {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.print-mode .print-header-logo {
    font-family: var(--font-display, Georgia, serif);
    font-style: italic;
    font-weight: 600;
    font-size: 22px;
    color: #1a3a5c;
    letter-spacing: 0.04em;
}
.print-mode .print-header-rett {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #1a3a5c;
    margin-top: 4px;
}
.print-mode .print-header-rett sup { font-size: 0.6em; }
.print-mode .print-header-meta {
    text-align: right;
    line-height: 1.3;
}
.print-mode .print-header-client {
    font-family: var(--font-display, Georgia, serif);
    font-style: italic;
    font-weight: 500;
    font-size: 15px;
    color: #1a3a5c;
}
.print-mode .print-header-sub {
    font-family: var(--font-mono, monospace);
    font-size: 8.5px;
    letter-spacing: 0.06em;
    color: #555;
    margin-top: 3px;
}

.print-mode .forward-intro { display: none !important; }

.print-mode .supp-toggle,
.print-mode .supp-toggle-row,
.print-mode [data-supp-pick-action],
.print-mode .strategy-pick-btn,
.print-mode .supp-pick-btn,
.print-mode .pmq-download-btn {
    display: none !important;
}
.print-mode details.impl-panel,
.print-mode .impl-panel { display: none !important; }

.print-mode .future-sale-option.fs-no-coverage,
.print-mode .future-sale-option.fs-hint { display: none !important; }

.print-mode .forward-top-row {
    gap: 18px !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    page-break-inside: avoid;
}
.print-mode .forward-top-row > .input-section,
.print-mode .forward-strategy-card {
    padding: 14px 16px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    border: 1px solid #1a3a5c !important;
    background: #fff !important;
}
.print-mode .forward-strategy-row { font-size: 1em !important; }
.print-mode .forward-strategy-name,
.print-mode .forward-strategy-leverage { font-size: 1.3em !important; }
.print-mode .forward-top-row > .input-section .section-heading h2 {
    font-size: 1.1em !important;
}

.print-mode .forward-rop-row {
    gap: 16px !important;
    margin: 0 0 14px 0 !important;
    page-break-inside: avoid;
}
.print-mode .forward-rop-left { gap: 10px !important; }
.print-mode .forward-net-hero {
    background: #1a3a5c !important;
    color: #fff !important;
    padding: 14px 18px !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.print-mode .forward-net-hero .net-hero-amt {
    font-size: 36px !important;
    color: #fff !important;
}
.print-mode .forward-net-hero .net-hero-amt .currency { color: #fff !important; }
.print-mode .forward-net-hero .net-hero-label {
    color: #c2dff5 !important;
    font-size: 9px !important;
    margin-bottom: 4px !important;
}
.print-mode .forward-walkaway-compact .walkaway-side {
    padding: 8px 10px !important;
    background: #fff !important;
    border: 1px solid #ccc !important;
}
.print-mode .forward-walkaway-compact .walkaway-amt {
    font-size: 1.05em !important;
}
.print-mode .forward-walkaway-compact .walkaway-tagline {
    font-size: 8.5px !important;
}
.print-mode .forward-rop-square {
    background: #1a3a5c !important;
    color: #fff !important;
    padding: 14px 18px !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.print-mode .forward-rop-square .rop-amt {
    font-size: 60px !important;
    color: #fff !important;
}
.print-mode .forward-rop-square .rop-amt .rop-x { color: #c2dff5 !important; }
.print-mode .forward-rop-square .rop-label {
    color: #c2dff5 !important;
    font-size: 9px !important;
    margin-bottom: 6px !important;
}
.print-mode .forward-rop-square .rop-sub {
    color: #c2dff5 !important;
    font-size: 8.5px !important;
}

.print-mode #fee-strategies-section {
    margin: 0 0 12px 0 !important;
    padding: 10px 14px !important;
    page-break-inside: avoid;
}
.print-mode #fee-strategies-section .section-heading h2 {
    font-size: 1em !important;
}
.print-mode #fee-strategies-section .fee-strat-row {
    padding: 4px 0 !important;
    font-size: 0.95em !important;
}
.print-mode #fee-strategies-section .fee-summary-row {
    padding-top: 6px !important;
    margin-top: 6px !important;
}

.print-mode .future-sale-option {
    margin: 0 0 10px 0 !important;
    padding: 10px 14px !important;
    page-break-inside: avoid;
}
.print-mode .future-sale-option .fs-head h2 { font-size: 1em !important; }
.print-mode .future-sale-option .fs-desc { font-size: 0.92em !important; }
.print-mode .future-sale-option .fs-row { padding: 6px 0 !important; }
.print-mode .future-sale-option .fs-amt { font-size: 1.05em !important; }
.print-mode .future-sale-option .fs-row.fs-total .fs-amt { font-size: 1.4em !important; }

.print-mode #strategy-fee-summary-host > * { page-break-inside: avoid; }

/* ===========================================================
   Supplemental-extra placeholder + PMQ empty state
   =========================================================== */
.supp-details-note {
    margin: 10px 0 0 0;
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: 0.78em;
    letter-spacing: 0.04em;
    color: var(--muted);
    background: var(--paper-warm);
    border-left: 2px solid var(--rule);
    border-radius: 2px;
}
/* Continuous 3-per-row grid spanning both supplemental hosts.
   Cards from #supplemental-strategies-host (oilGas + delphi) and
   #supplemental-extra-host (the 8 placeholder cards) flow into the
   same grid track via display: contents on both hosts and their
   inner .supp-strategies-grid wrappers. So 10 cards lay out as
   3-3-3-1 instead of 2 + 3-3-2. */
.supp-all-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
    margin-top: 24px;
}
.supp-all-grid > #supplemental-strategies-host,
.supp-all-grid > #supplemental-extra-host { display: contents; }
.supp-all-grid .supp-strategies-grid { display: contents; }
/* Fixed presentation order across the two hosts (advisor 2026-06-05).
   The base three (always shown) lead, then the business-gated three.
   Equipment Leasing (slot07) lives in the EXTRA host but must sit
   between Oil & Gas and Delphi (both PRIMARY host) — impossible by DOM
   order since the primary host always precedes the extra host. CSS
   `order` reorders the unified grid items regardless of which host
   rendered them, so each card keeps its own host + event wiring.
   Row 1: Oil & Gas · Equipment Leasing · Delphi
   Row 2: Augusta · PTET · Farm Equipment (when business income > 0).
   Specificity here is (0,3,0); the is-not-interested sink rule below is
   also (0,3,0) and comes LATER in source, so a Not-Interested card
   still wins the order:100 sink. */
.supp-all-grid .strategy-pick-card[data-supp-strategy="oilGas"] { order: 1; }
.supp-all-grid .strategy-pick-card[data-supp-strategy="slot07"] { order: 2; }
.supp-all-grid .strategy-pick-card[data-supp-strategy="delphi"] { order: 3; }
.supp-all-grid .strategy-pick-card[data-supp-strategy="slot08"] { order: 4; }
.supp-all-grid .strategy-pick-card[data-supp-strategy="ptet"]   { order: 5; }
.supp-all-grid .strategy-pick-card[data-supp-strategy="slot12"] { order: 6; }
/* Not-Interested cards float to the bottom of the unified grid via
   CSS order. Neutral and Interested stay at their natural DOM
   position (order: 0). Not-Interested gets a high order value so
   the grid places them last — but still in 3-per-row sequence,
   no gaps in the rows above. The grid auto-flow handles the "rows
   above pull up" behavior automatically.
   Pre-existing behavior: each card-host renderer ALSO sorts its
   own not-interested cards to its local end. Combined with this
   CSS order rule, the union flows correctly even though the two
   hosts (oilGas/delphi vs the 8 extras) remain separately rendered. */
.supp-all-grid .strategy-pick-card.is-not-interested { order: 100; }
@media (max-width: 1000px) {
    .supp-all-grid { grid-template-columns: 1fr; }
}
#supplemental-extra-host {
    margin-top: 0; /* parent grid handles row gap */
}
.pmq-question-host {
    margin: 24px 0;
}
.pmq-empty {
    background: var(--paper);
    border: 1px dashed var(--rule);
    border-radius: 2px;
    padding: 48px 32px;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
    box-shadow: var(--shadow);
}
.pmq-empty-icon {
    font-size: 2.4em;
    margin-bottom: 12px;
    opacity: 0.5;
}
.pmq-empty-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.3em;
    color: var(--ink);
    margin: 0 0 6px 0;
}
.pmq-empty-sub {
    color: var(--muted);
    font-size: 0.95em;
    line-height: 1.45;
    margin: 0;
}

/* ===========================================================
   PMQ Questions — minimal Yes/No question rows.
   Each question is a horizontal row: label + Yes/No buttons.
   Sub-questions get a left border + indent so the dependency
   relationship is visually obvious.
   =========================================================== */
/* Header / progress legacy classes intentionally left in place
   in case other code references them. The renderer no longer
   produces a header row — the question list starts immediately
   under the page title and a footer row holds the Reset button. */
.pmq-q-footer-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

/* Pre-Meeting page titlebar = title on the left + small "Collapse"
   button on the right. The button hides the entire Pre-Meeting tab
   in the workflow nav, replaced by a tiny restore dash next to the
   Client Inputs tab. State persists in localStorage. */
.pmq-page-titlebar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
.pmq-page-titlebar .page-inputs-title {
    margin-bottom: 0;
}
.pmq-collapse-btn {
    font-family: var(--font-mono);
    font-size: 0.72em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 6px 12px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.pmq-collapse-btn:hover {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--paper-warm);
}

/* Restore dash that lives in the workflow nav. Tiny minus sign,
   thin border, positioned exactly where the collapsed Pre-Meeting
   tab used to sit (between left edge and Client Inputs). Hover
   widens slightly so the click target is forgiving. */
.nav-pmq-restore {
    font-family: var(--font-mono);
    font-size: 1.1em;
    line-height: 1;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 6px 10px;
    margin-right: 4px;
    cursor: pointer;
    align-self: center;
    transition: border-color 0.15s, color 0.15s, background 0.15s, padding 0.15s;
}
.nav-pmq-restore:hover {
    border-color: var(--bh-blue-deep);
    color: var(--bh-blue-deep);
    background: var(--paper-warm);
    padding: 6px 14px;
}
.pmq-q-reset {
    font-family: var(--font-body);
    font-size: 0.82em;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 6px 12px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.pmq-q-reset:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.pmq-q-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pmq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 16px 18px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
    transition: border-color 0.15s, background 0.15s;
}
.pmq-q:hover {
    border-color: var(--bh-blue-deep);
}
.pmq-q-sub {
    margin-left: 32px;
    border-left: 3px solid var(--bh-blue-deep);
    background: var(--paper-warm);
}
.pmq-q-text {
    flex: 1;
    min-width: 0;
}
.pmq-q-label {
    font-size: 1.02em;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}
.pmq-q-helper {
    font-size: 0.85em;
    color: var(--muted);
    line-height: 1.4;
    margin-top: 4px;
}
.pmq-q-buttons {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.pmq-q-btn {
    background: var(--paper);
    border: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.9em;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 2px;
    cursor: pointer;
    min-width: 60px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.pmq-q-btn:hover {
    border-color: var(--ink);
}
.pmq-q-btn-yes.is-active {
    background: var(--bh-blue-deep);
    border-color: var(--bh-blue-deep);
    color: var(--paper);
}
.pmq-q-btn-no.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

/* Toggle switch (charitable question, etc.) — slider UI rather than
   yes/no buttons. State is binary (true/false), no null/neutral. */
.pmq-q-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    font: inherit;
    color: var(--ink);
}
.pmq-q-toggle-track {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    background: var(--rule);
    border-radius: 999px;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.pmq-q-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--paper);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.15s ease;
}
.pmq-q-toggle.is-on .pmq-q-toggle-track { background: var(--bh-blue-deep); }
.pmq-q-toggle.is-on .pmq-q-toggle-thumb { transform: translateX(20px); }
.pmq-q-toggle-text {
    font-weight: 600;
    font-size: 0.95em;
    min-width: 28px;
    color: var(--ink);
}
.pmq-q-toggle:focus-visible { outline: 2px solid var(--bh-blue-deep); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 720px) {
    .pmq-q { flex-direction: column; align-items: flex-start; gap: 10px; }
    .pmq-q-sub { margin-left: 16px; }
}

/* ===== Tab 7 Temporary — CPA verification view =====
   Per-year baseline cards laid top-to-bottom. Each card is a 3-column
   grid: relevance tag (LEFT), baseline mini-table (CENTER), activity
   placeholder (RIGHT, phase 2). Not Relevant rows fade so the eye
   skips past them. */
.temp-page-header { margin-bottom: 16px; }
.temp-page-sub {
    color: var(--muted);
    margin: 6px 0 12px;
    max-width: 820px;
    line-height: 1.5;
}
.temp-strategy-pill {
    display: inline-block;
    padding: 6px 12px;
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.82em;
    letter-spacing: 0.04em;
    color: var(--ink);
}
.temp-strategy-pill.temp-pill-empty { color: var(--muted); border-style: dashed; }
.temp-strategy-schedule {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 0.82em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}

.temp-baselines { display: flex; flex-direction: column; gap: 14px; }
.temp-empty {
    padding: 28px 22px;
    text-align: center;
    color: var(--muted);
    background: var(--paper-warm);
    border: 1px dashed var(--rule);
    border-radius: 4px;
}

.temp-year-card {
    display: grid;
    grid-template-columns: 150px 1fr 1fr 1fr;
    gap: 14px;
    align-items: stretch;
    padding: 14px 16px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: var(--shadow);
}
/* Container variant — applied when the client elected to cover the
   tax bill from sale proceeds. Adds a 5th track for the Trust
   Withdrawal callout. All year cards adopt the wider layout so
   alignment stays consistent across the column even when a given
   year has zero tax (withdrawal cell self-suppresses if amount = 0,
   leaving an empty 5th cell — still aligned with siblings above). */
.temp-baselines--withdrawals .temp-year-card {
    grid-template-columns: 150px 1fr 1fr 1fr 175px;
}
.temp-year-card.is-not-relevant { opacity: 0.55; }
.temp-year-card.is-not-relevant .temp-year-baseline,
.temp-year-card.is-not-relevant .temp-year-activity,
.temp-year-card.is-not-relevant .temp-year-results { filter: grayscale(0.4); }

/* Results column header — green-tinted to read as the post-strategy
   outcome (vs baseline neutral + activity muted). */
.temp-year-head-result {
    color: #15803d;
}
.temp-result-saved-row td {
    border-top: 1px solid var(--rule);
    color: #15803d;
}
.temp-result-saved-neg td {
    color: #b91c1c;
}

.temp-year-rel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px 8px;
    border-radius: 3px;
    text-align: center;
}
.temp-rel-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 6px;
}
.temp-rel-tag {
    font-weight: 700;
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.temp-rel-yes {
    background: rgba(34, 134, 58, 0.10);
    border: 1px solid rgba(34, 134, 58, 0.35);
}
.temp-rel-yes .temp-rel-tag { color: var(--green, #1f7a3a); }
.temp-rel-no {
    background: var(--paper-warm);
    border: 1px solid var(--rule);
}
.temp-rel-no .temp-rel-tag { color: var(--muted); }

.temp-year-head {
    font-family: var(--font-mono);
    font-size: 0.74em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--rule);
}
.temp-year-head-muted { color: var(--muted); }

.temp-baseline-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92em;
}
.temp-baseline-table td {
    padding: 4px 0;
    border-bottom: 1px dotted rgba(0,0,0,0.06);
}
.temp-baseline-table tr:last-child td { border-bottom: none; }
.temp-amt {
    text-align: right;
    font-family: var(--font-mono);
    white-space: nowrap;
}
.temp-total-row td { padding-top: 8px; border-top: 1px solid var(--rule); }

.temp-activity-placeholder {
    color: var(--muted);
    font-style: italic;
    font-size: 0.88em;
    padding: 4px 0;
}

/* Trust withdrawal callout — small card on the right of each year row
   showing the April 1 cash outflow from the trust to settle the prior
   year's tax bill. Only rendered when cfg.coverTaxesFromSale is true.
   Visual: tinted box with a thin left accent rule so it reads as a
   distinct "cash leaving the strategy" signal, not part of the activity
   table. */
.temp-year-withdrawal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 14px;
    background: rgba(91, 169, 255, 0.06);
    border: 1px solid rgba(91, 169, 255, 0.30);
    border-left: 4px solid var(--rett-warning, #5BA9FF);
    border-radius: 4px;
}
.temp-year-head-withdraw {
    color: var(--rett-warning, #5BA9FF);
    border-bottom-color: rgba(91, 169, 255, 0.30);
    margin-bottom: 10px;
}
.temp-withdraw-amt {
    font-family: var(--font-mono);
    font-size: 1.25em;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
}
.temp-withdraw-date {
    font-size: 0.85em;
    color: var(--ink);
    margin-top: 6px;
    font-weight: 600;
}
.temp-withdraw-note {
    font-size: 0.75em;
    color: var(--muted);
    margin-top: 2px;
    line-height: 1.3;
}

@media (max-width: 900px) {
    .temp-year-card { grid-template-columns: 1fr; }
    .temp-year-rel { flex-direction: row; gap: 12px; justify-content: flex-start; }
    .temp-rel-eyebrow { margin-bottom: 0; }
}

/* Tab 7 phase 2 — split baseline (income+tax) and activity column */
.temp-baseline-table tr.temp-section-head td {
    font-family: var(--font-mono);
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    padding-top: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rule);
}
.temp-baseline-table tr.temp-section-head:first-child td { padding-top: 0; }

.temp-state-tag {
    font-family: var(--font-mono);
    font-size: 0.85em;
    font-weight: 600;
    color: var(--bh-blue-deep, #1a3a6e);
    letter-spacing: 0.04em;
}

.temp-act-subhead {
    font-family: var(--font-mono);
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-top: 8px;
    margin-bottom: 4px;
    padding-bottom: 3px;
    border-bottom: 1px dotted var(--rule);
}
.temp-act-subhead:first-child { margin-top: 0; }
.temp-act-meta {
    font-family: var(--font-mono);
    font-size: 0.78em;
    color: var(--muted);
    font-weight: 400;
}

.temp-activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}
.temp-activity-table td {
    padding: 3px 0;
    border-bottom: 1px dotted rgba(0,0,0,0.06);
}
.temp-activity-table tr:last-child td { border-bottom: none; }
.temp-activity-empty {
    color: var(--muted);
    font-style: italic;
    font-size: 0.88em;
    padding: 4px 0;
}

.temp-supp-section { margin-top: 10px; }
.temp-supp-block {
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    border-radius: 3px;
}
.temp-supp-name {
    font-weight: 700;
    font-size: 0.92em;
    color: var(--ink);
    margin-bottom: 4px;
}
.temp-supp-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.86em;
    padding: 2px 0;
}
.temp-supp-line.temp-supp-net {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--rule);
    font-weight: 600;
}

/* Tab 7 — carryover loss rows. Sit at top (carry-in) of income block
   and bottom (carry-out) of tax block in muted amber so they read as
   tracking metadata, not as additional income / tax. */
.temp-baseline-table tr.temp-carryin-row td,
.temp-baseline-table tr.temp-carryout-row td {
    color: #8a6f00;
    background: rgba(251, 191, 36, 0.08);
    font-style: italic;
    font-size: 0.88em;
    padding: 4px 6px;
}
.temp-baseline-table tr.temp-carryin-row td:first-child,
.temp-baseline-table tr.temp-carryout-row td:first-child {
    border-left: 2px solid rgba(251, 191, 36, 0.6);
}
.temp-baseline-table tr.temp-carryout-row td {
    border-top: 1px dashed rgba(251, 191, 36, 0.5);
}

/* Tab 7 — gross benefit row (green, bottom of activity column) */
.temp-activity-table tr.temp-gross-row td {
    color: #1f7a3a;
    font-weight: 700;
    border-top: 1px solid rgba(34, 134, 58, 0.4);
    padding-top: 6px;
}

/* Tab 7 — fees & net benefit reconciliation panel */
.temp-fees-panel {
    margin-top: 18px;
    padding: 16px 20px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: var(--shadow);
}
.temp-fees-head {
    font-family: var(--font-mono);
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink);
    padding-bottom: 6px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--rule);
}
.temp-fees-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
}
.temp-fees-table td {
    padding: 5px 0;
    border-bottom: 1px dotted rgba(0,0,0,0.06);
}
.temp-fees-table tr:last-child td { border-bottom: none; }
.temp-fees-table .temp-fees-gross { color: #1f7a3a; font-weight: 700; }
.temp-fees-table tr.temp-fees-total td {
    padding-top: 8px;
    border-top: 1px solid var(--rule);
    font-size: 1.05em;
}
.temp-fees-table tr.temp-fees-check td {
    color: var(--muted);
    font-size: 0.88em;
    font-style: italic;
    padding-top: 6px;
}

/* Strategy C excess-carryover-loss callout — identifies the fee cost of
   the unused short-term loss the structure over-generated. Set apart from
   the fees panel with a left rule so it reads as an advisory sideboard,
   not part of the net-benefit math. */
.temp-excess-loss-panel {
    margin-top: 18px;
    padding: 14px 18px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-left: 4px solid #b45309;
    border-radius: 4px;
    box-shadow: var(--shadow);
}
.temp-excess-loss-head {
    font-family: var(--font-mono);
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #b45309;
    padding-bottom: 6px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--rule);
}
.temp-excess-loss-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
}
.temp-excess-loss-amt {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.05em;
    min-width: 120px;
    text-align: right;
    color: var(--ink);
}
.temp-excess-loss-amt.temp-excess-loss-credit { color: #1f7a3a; }
.temp-excess-loss-label {
    color: var(--muted);
    font-size: 0.92em;
}
.temp-excess-loss-note {
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.84em;
    line-height: 1.45;
}

/* ============================================================
   ADMIN math reveal panel (admin-math-panel.js, Chunk 0).
   Hidden by default; appears below the active page when admin
   mode is unlocked via dbl-click on the RETT logo. Visually
   distinct from client-facing UI so it's never mistaken for
   something to show the client during a live demo.
   ============================================================ */
.rett-admin-trigger { cursor: pointer; user-select: none; }

.rett-admin-badge {
    display: inline-block;
    padding: 4px 10px;
    margin-right: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #fff;
    background: #b91c1c;
    border: 1px solid #7f1d1d;
    border-radius: 4px;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 120ms ease;
}
.rett-admin-badge:hover { background: #991b1b; }
.rett-admin-badge:focus-visible { outline: 2px solid #fca5a5; outline-offset: 2px; }
/* Explicit hide rule - the .rett-admin-badge display: inline-block above
   has higher specificity than the user-agent [hidden] { display: none }
   default, so without this the badge stays visible after _lock() sets
   the hidden attribute. */
.rett-admin-badge[hidden] { display: none; }

.admin-math-panel {
    margin: 32px auto 64px;
    padding: 28px 32px;
    max-width: 1280px;
    background: #0f172a;
    color: #ffffff;
    border: 1px solid #334155;
    border-top: 4px dashed #b91c1c;
    border-radius: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 1.0rem;
    line-height: 1.55;
}
.admin-math-panel[hidden] { display: none; }

.admin-math-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #334155;
}
.admin-math-header h3 {
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}
.admin-math-flag {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #fecaca;
    background: rgba(185, 28, 28, 0.22);
    border: 1px solid rgba(185, 28, 28, 0.5);
    padding: 4px 10px;
    border-radius: 3px;
}

.admin-math-body {
    color: #ffffff;
}
.admin-math-body p { margin: 8px 0; }
.admin-math-body strong { color: #ffffff; font-weight: 700; }
.admin-math-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}
.admin-math-body th,
.admin-math-body td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #334155;
    vertical-align: top;
    color: #ffffff;
}
.admin-math-body th {
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    background: rgba(30, 41, 59, 0.7);
}
.admin-math-empty {
    color: #cbd5e1;
    font-style: italic;
    font-size: 0.95rem;
}
.admin-math-error {
    color: #fecaca;
    font-weight: 700;
}

/* Per-section grouping within a panel body (chunks 1-3 populate
   multiple sections per page so the CPA can scan top-to-bottom). */
.admin-math-section {
    margin: 22px 0;
}
.admin-math-section + .admin-math-section {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px dashed #475569;
}
.admin-math-section h4 {
    margin: 0 0 12px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #bfdbfe;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.admin-math-subtitle {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 12px 0 6px;
}
.admin-math-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.98rem;
}
.admin-math-table td,
.admin-math-table th {
    padding: 7px 12px;
    border-bottom: 1px solid #334155;
    vertical-align: top;
    color: #ffffff;
}
.admin-math-table tbody tr:hover { background: rgba(30, 41, 59, 0.55); }
.admin-math-table tr.admin-math-subtotal td {
    background: rgba(30, 41, 59, 0.7);
    border-top: 1px solid #64748b;
    color: #ffffff;
    font-weight: 700;
}
.admin-math-table tr.admin-math-total td {
    background: rgba(185, 28, 28, 0.28);
    border-top: 2px solid #b91c1c;
    color: #ffffff;
    font-weight: 700;
}
.admin-math-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.admin-math-note-cell {
    color: #e2e8f0;
    font-size: 0.88rem;
    font-style: italic;
}
.admin-math-body code {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid #475569;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.92rem;
    color: #ffffff;
}
.admin-math-scroll {
    overflow-x: auto;
    margin: 12px 0;
}
.admin-math-table-wide {
    min-width: 1180px;
    font-size: 0.92rem;
}
.admin-math-table-wide td,
.admin-math-table-wide th {
    padding: 7px 9px;
}
.admin-math-table-wide {
    min-width: 1280px;
}
.admin-math-withdrawn {
    color: #fbbf24;
    font-weight: 700;
}
.admin-math-callout {
    margin: 14px 0;
    padding: 12px 16px;
    background: rgba(34, 197, 94, 0.18);
    border-left: 4px solid #22c55e;
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.5;
}
.admin-math-callout strong {
    color: #bbf7d0;
}
.admin-math-callout code {
    background: rgba(15, 23, 42, 0.6);
    padding: 1px 6px;
    border-radius: 3px;
    color: #fef3c7;
    font-size: 0.88rem;
}

/* Print: hide entirely so the leave-behind PDF never shows the
   admin drawer to the client. */
@media print {
    .admin-math-panel { display: none !important; }
    .rett-admin-badge { display: none !important; }
}

/* ============================================================
   Supplemental cards: click-to-hide + dynamic numbering (advisor
   2026-05-26). Clicking the SUPPLEMENTAL number badge sets the
   card's is-supp-hidden class (handled in JS); CSS hides the card
   and a counter renumbers the remaining visible cards across the
   unified .supp-all-grid.
   ============================================================ */
.supp-all-grid { counter-reset: supp-num; }
.supp-strategy-card { counter-increment: supp-num; }
.supp-strategy-card.is-supp-hidden { display: none; counter-increment: none; }
/* Inject the dynamic number into the empty .num-big span. The
   leading-zero formatter matches the prior hard-coded "01"/"02" style. */
.supp-strategy-card .strategy-pick-num .num-big::before {
    content: counter(supp-num, decimal-leading-zero);
}
/* Fixed badge numbers matching the CSS-`order` visual sequence above
   (advisor 2026-06-05). The supp-num counter increments in DOM order,
   which no longer matches the visual order once `order` reorders the
   grid — so for the six known cards we pin the badge number to the
   visual slot. Higher specificity (0,4,1) overrides the generic counter
   rule. Note: a card hidden via click-to-hide leaves a number gap here
   rather than resequencing the remainder (the counter path did that);
   acceptable for the fixed-order layout. */
.supp-all-grid .strategy-pick-card[data-supp-strategy="oilGas"] .num-big::before { content: "01"; }
.supp-all-grid .strategy-pick-card[data-supp-strategy="slot07"] .num-big::before { content: "02"; }
.supp-all-grid .strategy-pick-card[data-supp-strategy="delphi"] .num-big::before { content: "03"; }
.supp-all-grid .strategy-pick-card[data-supp-strategy="slot08"] .num-big::before { content: "04"; }
.supp-all-grid .strategy-pick-card[data-supp-strategy="ptet"]   .num-big::before { content: "05"; }
.supp-all-grid .strategy-pick-card[data-supp-strategy="slot12"] .num-big::before { content: "06"; }
/* Clickable affordance on the badge. */
.supp-strategy-card .supp-num-clickable {
    cursor: pointer;
    user-select: none;
    transition: opacity 120ms ease;
}
.supp-strategy-card .supp-num-clickable:hover {
    opacity: 0.7;
}
.supp-strategy-card .supp-num-clickable:focus-visible {
    outline: 2px solid var(--brookhaven-blue, #1a4480);
    outline-offset: 2px;
}

/* ============================================================
   Tab 2 (Tax Baseline) redesigned per advisor 2026-05-26: replace
   the 3-tile equation (without + delta = total) with a single big
   "Tax Due from the Sale" hero card on the left + a pie chart on
   the right showing keep% vs tax% of the sale price.
   ============================================================ */
.baseline-pie-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 22px;
    align-items: stretch;
    max-width: 1280px;
    margin: 24px auto 32px;
}
.baseline-tile--hero {
    padding: 36px 40px;
    background: linear-gradient(135deg, #fff 0%, #fef3f2 100%);
    border: 1px solid #fecaca;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(220, 38, 38, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}
.baseline-tile--hero .baseline-tile-label {
    font-size: 1.2rem;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.01em;
}
.baseline-tile--hero .baseline-tile-value {
    font-family: 'Fraunces', Georgia, serif;
    /* F4 fix (Round 5): clamp font-size so 7-8 digit values don't clip.
       Inherited overflow:hidden from .baseline-tile-value silently cut
       the last digit on \$1M+ values (e.g. "\$1,402,750" → "\$1,402,75").
       clamp() floors at 2.2rem and scales up with viewport width. */
    font-size: clamp(2.2rem, 4.2vw, 3.4rem);
    font-weight: 600;
    line-height: 1.05;
    color: #b91c1c;
    overflow: visible;
    white-space: nowrap;
}
.baseline-tile--hero .baseline-tile-sub {
    color: var(--muted, #6b7280);
    font-size: 0.92rem;
}

/* 2026-05-27 — middle "Cash Kept from Sale" tile (BrookHaven blue). */
.baseline-tile--cash-kept {
    padding: 36px 40px;
    background: linear-gradient(135deg, #fff 0%, #eff6ff 100%);
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(37, 99, 235, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}
.baseline-tile--cash-kept .baseline-tile-label {
    font-size: 1.2rem;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.01em;
}
.baseline-tile--cash-kept .baseline-tile-value {
    font-family: 'Fraunces', Georgia, serif;
    /* F4 fix (Round 5): see hero rule above — same clamp + overflow
       relaxation so cash-kept 8-digit values don't clip. */
    font-size: clamp(2.2rem, 4.2vw, 3.4rem);
    font-weight: 600;
    line-height: 1.05;
    /* BrookHaven brand navy (advisor 2026-06-12) — was the off-brand royal
       blue #1d4ed8; now matches the brand navy used on the LT-gain segment
       of the proceeds breakdown bar so Tab 2 reads cohesively. */
    color: var(--rett-cyan);
    overflow: visible;
    white-space: nowrap;
}
.baseline-tile--cash-kept .baseline-tile-sub {
    color: var(--muted, #6b7280);
    font-size: 0.92rem;
}

.baseline-pie-card {
    padding: 24px 18px 18px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
    align-items: center;
}
/* The "Share of Gain" tile-label sits at top-left of the donut card,
   matching the position of "Tax Due from the Sale" / "Cash Kept from
   Sale" labels on cards 1 and 2. */
.baseline-pie-label {
    align-self: flex-start;
    padding-left: 10px;
}
.baseline-pie-label {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1f2937;
    letter-spacing: 0.01em;
}
.baseline-pie-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.baseline-pie-svg {
    width: 100%;
    max-width: 480px;
    height: auto;
}
/* Center % sized to fit comfortably inside inner ring r=50.
   At ~28px the 29.5% string is ~70px wide → fits inside 100px diameter. */
.baseline-pie-center {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 28px;
    font-weight: 700;
    fill: #b91c1c;
}
/* Leader line + labels drawn inside the SVG (mirrors projection donut) */
.bt-pie-leader {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bt-pie-leader-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.bt-pie-leader-amt {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    fill: #1f2937;
    font-variant-numeric: tabular-nums;
}
.baseline-pie-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.baseline-pie-legend-row {
    display: grid;
    grid-template-columns: 14px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #f3f4f6;
}
.baseline-pie-legend-row:last-child {
    border-bottom: none;
}
.baseline-pie-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
}
.baseline-pie-swatch--keep { background: var(--rett-cyan); }
.baseline-pie-swatch--tax  { background: #dc2626; }
.baseline-pie-legend-label {
    font-size: 0.95rem;
    color: #374151;
    font-weight: 500;
}
.baseline-pie-legend-amt {
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    color: #1f2937;
    font-weight: 600;
}
.baseline-pie-legend-pct {
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem;
    color: #6b7280;
    margin-left: 10px;
    min-width: 50px;
    text-align: right;
}

@media (max-width: 1100px) {
    .baseline-pie-row {
        grid-template-columns: 1fr;
    }
    .baseline-pie-wrap {
        align-items: center;
    }
}

/* §1245 / §1250 recap split sub-block (Section 02).
   Hidden by default; revealed when the parent "Accelerated Depreciation
   Recapture" field has a non-zero value (controls.js sets the .recap-
   split-active class on each .recap-split row). Using a class (not the
   [hidden] attribute) so case-storage restore can't silently re-hide
   the rows on its own pass — the class survives the restore. */
.recap-split { display: none; }
/* When revealed, inherit .input-row's grid layout so the §1245/§1250
   input boxes line up with all the other input boxes in the same
   right-side column. Was display:flex, which broke the column. */
.recap-split.recap-split-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

/* ============================================================
   Tab 2 — Proceeds Bar (Sale Anatomy)
   ------------------------------------------------------------
   Stacked horizontal bar across the full sale price, segmented
   into return-of-basis · §1245 recap · §1250 recap · LT gain.
   Top bracket spans the bar (Sale Price). Bottom bracket spans
   basis + recap (Original Purchase Price) so the taxable gain
   becomes visually obvious as "everything past the original
   purchase price bracket."
   ============================================================ */
.proceeds-wrap {
  /* Brand-aligned palette using only existing RETT tokens — no green.
     Reads as a tonal progression: light slate → danger red →
     brand cyan → brand navy. Anchored by --rett-navy (the dominant
     brand color) on the largest typical segment (LT gain). */
  --pb-basis:     #8b97ad;             /* light slate — return of capital */
  --pb-1245:      var(--rett-danger);  /* danger red — full marginal      */
  --pb-1250:      var(--rett-cyan);    /* brand cyan — 25% capped         */
  --pb-lt:        var(--rett-navy);    /* brand navy — 20% LTCG (anchor)  */
  /* Match width + margins of the 3-tile baseline-pie-row below so
     they line up left/right edge. */
  max-width: 1280px;
  margin: 24px auto 28px;
  padding: 26px 32px 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.proceeds-eyebrow {
  font-family: 'JetBrains Mono', 'Spline Sans Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.proceeds-frame { margin-top: 8px; }
.proceeds-bar {
  height: 64px;
  display: flex;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.proceeds-bar .pseg {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10px;
  color: #fff;
  min-width: 0;
  overflow: hidden;
  transition: flex-basis .25s ease;
}
.proceeds-bar .pseg .pamt {
  font-family: 'JetBrains Mono', 'Spline Sans Mono', monospace;
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}
.proceeds-bar .pseg .pnm {
  /* Smaller, lighter — labels feel like a caption under the number,
     same hierarchy as the friend's HTML calculator. */
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.82;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
  font-weight: 500;
}
/* Brackets — top spans Sale Price, bottom spans Original Purchase Price. */
.bracket { position: relative; width: 100%; }
.bracket.top { height: 38px; }
.bracket.bottom { height: 38px; }
.bracket .bk {
  position: absolute;
  box-sizing: border-box;
}
.bracket.top .bk {
  top: 22px;
  height: 14px;
  border: 2px solid var(--ink);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.bracket.bottom .bk {
  bottom: 22px;
  height: 14px;
  border: 2px solid var(--ink);
  border-top: none;
  border-radius: 0 0 6px 6px;
  opacity: 0.55;
}
.bracket .bk-label {
  position: absolute;
  text-align: center;
  font-family: 'JetBrains Mono', 'Spline Sans Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.bracket.top .bk-label { top: 0; color: var(--ink); }
.bracket.bottom .bk-label { bottom: 0; color: var(--ink-soft); }
.proceeds-key {
  display: flex;
  gap: 22px;
  margin-top: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.proceeds-key .pk { display: flex; align-items: center; gap: 8px; }
.proceeds-key .sw {
  width: 12px; height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}
.proceeds-key .pk-amt {
  font-family: 'JetBrains Mono', 'Spline Sans Mono', monospace;
  font-weight: 600;
  color: var(--ink);
}
.proceeds-hint {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule-soft);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.proceeds-hint b { color: var(--ink); font-weight: 600; }

/* ============================================================
   Tab 2 — Click-to-reveal tax breakdown
   ------------------------------------------------------------
   The proceeds bar owns the top of Tab 2. The 3-tile row stays
   hidden behind a centered button until the user explicitly
   asks to see the tax due. Click → button fades out, scroll
   spacer expands, tiles slide in. Honors reduced-motion.
   ============================================================ */
.baseline-reveal-target {
  display: none;
}
.baseline-reveal-target.baseline-reveal-shown {
  display: grid;       /* matches baseline-pie-row's natural display */
  animation: baselineRevealFadeIn 520ms ease both;
}
@keyframes baselineRevealFadeIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.baseline-reveal-btn-wrap {
  max-width: 1280px;
  margin: 8px auto 24px;
  display: flex;
  justify-content: center;
}
.baseline-reveal-btn {
  padding: 14px 32px;
  background: var(--paper);
  border: 1.5px dashed var(--rett-blue);
  border-radius: 4px;
  color: var(--rett-blue);
  font-family: 'JetBrains Mono', 'Spline Sans Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.baseline-reveal-btn:hover {
  background: var(--rett-blue);
  color: #fff;
  border-style: solid;
}
.baseline-reveal-btn .chev {
  display: inline-block;
  transform: translateY(1px);
  font-size: 14px;
}
.baseline-reveal-btn-wrap.is-revealed {
  display: none;       /* once clicked, button drops out entirely */
}
/* A small spacer kicks in below the bar after reveal so the tiles
   don't slam into the bar — the user can scroll a touch between
   the two views. */
.baseline-reveal-spacer {
  height: 0;
  transition: height 360ms ease;
}
.baseline-reveal-spacer.is-active {
  height: 28px;
}
@media (prefers-reduced-motion: reduce) {
  .baseline-reveal-target.baseline-reveal-shown { animation: none; }
  .baseline-reveal-spacer,
  .baseline-reveal-spacer.is-active { transition: none; }
}

/* === Bubbly polish v1 — advisor 2026-05-29.
   Visible-by-design pass: bumps main card containers from the existing
   4–10px corners up to a soft 18px (12px for stat tiles), and adds a
   gentle hover-lift on dashboard-style cards so they "bubble out" when
   you point at them. Localized in one block to make rollback trivial:
   if you don't like it, delete from here down. */
:root {
  --radius-card: 18px;     /* main cards / panels */
  --radius-soft: 12px;     /* small stat tiles */
  --radius-pill: 999px;    /* future chips / pills */
}

/* Round corners on real container classes used across tabs. */
.strategy-pick-card,
.supp-strategy-card,
.supp-details-panel,
.supp-value-panel,
.rett-pie-card,
.rett-table-wrap,
.input-section,
.pmq-client-section,
.pmq-case-section,
.rett-scenario-section,
.rett-dashboard,
.rett-card,
.admin-math-section {
  border-radius: var(--radius-card) !important;
}

/* Hover lift — dashboard-style cards bubble up on hover. */
.strategy-pick-card,
.supp-strategy-card,
.rett-pie-card,
.rett-scenario-section,
.rett-dashboard,
.rett-card,
.admin-math-section {
  transition: transform 220ms cubic-bezier(.2,.7,.3,1),
              box-shadow 220ms ease;
}
.strategy-pick-card:hover,
.supp-strategy-card:hover,
.rett-pie-card:hover,
.rett-scenario-section:hover,
.rett-dashboard:hover,
.rett-card:hover,
.admin-math-section:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Stat tiles — slightly softer than full bubble (12px). No hover lift —
   these aren't interactive, they're readouts. */
.rett-kpi-tile,
.ribbon-tile,
.baseline-tile {
  border-radius: var(--radius-soft) !important;
}
/* === end Bubbly polish v1 === */

/* === Supplemental Strategy Setup Fees (Temp page footer, advisor input) === */
.temp-supp-fee-section {
  max-width: 1280px;
  margin: 24px auto 28px;
  padding: 22px 28px 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.temp-supp-fee-head {
  font-size: 16px;
  font-weight: 700;
  color: var(--rett-navy);
  margin: 0 0 4px;
}
.temp-supp-fee-note {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.45;
}
.temp-supp-fee-table { width: 100%; border-collapse: collapse; }
.temp-supp-fee-table td { padding: 8px 0; border-bottom: 1px solid var(--rule-soft); }
.temp-supp-fee-table tr:last-child td { border-bottom: none; }
.supp-fee-name { font-size: 14px; color: var(--ink); font-weight: 500; }
.supp-fee-input-cell { text-align: right; width: 180px; }
.supp-setup-fee-input {
  width: 150px;
  padding: 8px 12px;
  font-size: 15px;
  text-align: right;
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font-variant-numeric: tabular-nums;
}
.supp-setup-fee-input:focus { outline: none; border-color: var(--rett-navy); }
.supp-setup-fee-input::placeholder { color: #aab2c0; }

/* "With Planning" walk-away side note (shown when walk-away > sale price) */
.walkaway-sidenote {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  font-style: italic;
  white-space: nowrap;
}