/* ──────────────────────────────────────────────────────────────────
   Portfolio Success Lab — three-screen redesign
   - Persona screen (dark)
   - Workspace screen (light/dark)
   - Results dashboard (light/dark)
   Builds on top of styles.css (already loaded). Uses CSS variables
   so light/dark themes share the same component rules.
   ────────────────────────────────────────────────────────────────── */

/* ─── Theme tokens (light overlay) ─────────────────────────────────── */

[data-theme="light"] {
  color-scheme: light;

  --bg-deep:       #f5f1e7;   /* warm off-white, matches mockup */
  --bg-base:       #faf6ec;
  --bg-elevated:   #ffffff;
  --bg-surface:    #ffffff;
  --bg-glass:      rgba(255, 255, 255, 0.92);
  --bg-glass-2:    rgba(250, 246, 236, 0.85);

  --text-primary:   #1a1f2e;
  --text-secondary: #4a5060;
  --text-muted:     #6b7180;
  --text-accent:    #0f7a5e;

  --teal:         #0f7a5e;
  --teal-dim:     #126652;
  --teal-glow:    rgba(15, 122, 94, 0.12);
  --cyan:         #0e7da6;
  --blue:         #1f4ed8;
  --indigo:       #5946d8;
  --coral:        #c43838;
  --coral-dim:    #983030;
  --amber:        #c87d18;
  --emerald:      #117a4d;

  --border:       rgba(20, 28, 50, 0.10);
  --border-light: rgba(20, 28, 50, 0.18);
  --border-focus: rgba(15, 122, 94, 0.45);

  --shadow-sm:    0 1px 3px rgba(20, 28, 50, 0.08);
  --shadow-md:    0 4px 16px rgba(20, 28, 50, 0.10);
  --shadow-lg:    0 12px 32px rgba(20, 28, 50, 0.14);
  --shadow-glow:  0 0 0 1px rgba(15, 122, 94, 0.10);
}

[data-theme="light"] body {
  background: var(--bg-deep);
}

[data-theme="light"] body::before {
  background: none;
}

/* ─── View router ──────────────────────────────────────────────────── */

[data-screen-content] {
  display: none;
}
body[data-screen="persona"]   [data-screen-content="persona"],
body[data-screen="workspace"] [data-screen-content="workspace"],
body[data-screen="results"]   [data-screen-content="results"] {
  display: block;
}

/* Persona-screen surface tokens — overridable per theme below. */
body[data-screen="persona"] {
  background: var(--bg-deep);
}
body[data-screen="persona"]::before {
  display: none;
}

/* ─── Topbar (shared) ──────────────────────────────────────────────── */

.topbar-redesign {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem clamp(1rem, 4vw, 3rem) 1rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.brand-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--cyan) 100%);
  box-shadow: 0 0 28px rgba(52, 209, 182, 0.38);
  color: #04261c;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.04em;
}
[data-theme="light"] .brand-glyph {
  background: #1a1f2e;
  color: #fff;
  box-shadow: var(--shadow-md);
}

.brand-text .eyebrow {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}
[data-theme="light"] .brand-text .eyebrow {
  color: var(--text-muted);
}
.brand-text h1 {
  margin: 0.1rem 0 0;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.topbar-controls {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

/* Pill toggles (Plain/Pro, Today's $/Future $, sun/moon) */
.pill-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 0;
  font-size: 0.78rem;
  font-weight: 600;
}
.pill-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.78rem;
  transition: background 0.15s, color 0.15s;
}
.pill-toggle button[aria-pressed="true"] {
  background: var(--text-primary);
  color: var(--bg-elevated);
}
[data-theme="light"] .pill-toggle button[aria-pressed="true"] {
  background: #1a1f2e;
  color: #fff;
}

.theme-toggle {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-glass);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary);
  transition: background 0.15s, border-color 0.15s;
}
.theme-toggle:hover { background: var(--bg-glass-2); }
.theme-toggle svg { width: 18px; height: 18px; }

.cta-button {
  appearance: none;
  border: 0;
  background: var(--teal);
  color: #04261c;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.7rem 1.25rem;
  border-radius: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 6px 24px rgba(52, 209, 182, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: background 0.12s, color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.cta-button:hover {
  background: #43dfc5;
  color: #032018;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(52, 209, 182, 0.4);
}
.cta-button:active { transform: translateY(0); }
[data-theme="light"] .cta-button {
  background: #1a1f2e;
  color: #fff;
  box-shadow: var(--shadow-md);
}
[data-theme="light"] .cta-button:hover {
  background: #293244;
  color: #fff;
}

.subtle-button {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  padding: 0.55rem 1rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.subtle-button:hover { background: var(--bg-glass-2); border-color: var(--border-focus); }

/* ─── Persona screen ──────────────────────────────────────────────── */

.persona-screen {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem clamp(1rem, 4vw, 3rem) 4rem;
  position: relative;
  z-index: 1;
  color: var(--text-primary);
}

.persona-step {
  margin-top: 2.5rem;
}

.persona-step-header {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: 0.4rem;
}
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.5rem;
  border-radius: 8px;
  background: rgba(52, 209, 182, 0.14);
  color: var(--teal);
  font-weight: 700;
  font-size: 0.9rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.persona-step h2 {
  margin: 0;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.persona-step .step-sub {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin: 0 0 1.2rem 2.6rem;
}

.persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
}

.persona-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.25rem 1rem;
  border-radius: 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: transform 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-sm);
}
.persona-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-light);
  box-shadow: var(--shadow-md);
}
.persona-card[aria-pressed="true"] {
  border-color: var(--teal);
  background: var(--teal-glow);
  box-shadow: 0 0 0 1px var(--teal), 0 8px 28px var(--teal-glow);
}
.persona-card[aria-pressed="true"]::after {
  content: '✓';
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--teal);
  font-weight: 700;
}
.persona-card .persona-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.persona-card .persona-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.persona-card .persona-sub {
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.45;
}
.persona-card .persona-stats {
  display: flex;
  gap: 1rem;
  margin-top: 0.4rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.persona-card .persona-stats dt {
  display: inline;
  color: var(--text-muted);
  font-weight: 500;
  margin-right: 0.3rem;
}
.persona-card .persona-stats dd {
  display: inline;
  margin: 0;
  color: var(--text-primary);
  font-weight: 700;
}

.outcome-grid {
  display: grid;
  gap: 0.55rem;
}

.outcome-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.95rem 1.1rem;
  border-radius: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, background 0.12s;
  box-shadow: var(--shadow-sm);
}
.outcome-card:hover { border-color: var(--border-light); box-shadow: var(--shadow-md); }
.outcome-card.is-selected {
  border-color: var(--teal);
  background: var(--teal-glow);
  box-shadow: 0 0 0 1px var(--teal);
}
.outcome-radio {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  margin-top: 2px;
  transition: border-color 0.12s;
  background: var(--bg-elevated);
}
.outcome-card.is-selected .outcome-radio {
  border-color: var(--teal);
  background: var(--teal);
  box-shadow: inset 0 0 0 3px var(--bg-elevated);
}
.outcome-card .outcome-title {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.outcome-card .outcome-sub {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-top: 2px;
}
.outcome-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.intake-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
}

.intake-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.1rem 1.1rem 1rem;
  border-radius: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, background 0.12s, box-shadow 0.12s;
  color: inherit;
  font: inherit;
  box-shadow: var(--shadow-sm);
}
.intake-card:hover { border-color: var(--border-light); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.intake-card .intake-icon { font-size: 1.4rem; line-height: 1; }
.intake-card .intake-title { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }
.intake-card .intake-sub   { color: var(--text-secondary); font-size: 0.78rem; line-height: 1.4; }
.intake-card.is-active { border-color: var(--teal); background: var(--teal-glow); }

/* ─── Workspace screen ────────────────────────────────────────────── */

.ws-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 1.4rem;
  padding: 0 clamp(0.75rem, 3vw, 2.5rem) 3rem;
  align-items: start;
}

.module-library {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.1rem;
  border-radius: 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.module-library .lib-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.module-library .lib-toggle-collapse {
  display: none;          /* desktop: hidden, library is always open */
}
.module-library h2 {
  margin: 0.1rem 0 0.25rem;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.module-library .lib-blurb {
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0 0 0.85rem;
}

.module-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background: var(--bg-base);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.module-toggle:hover { background: var(--bg-glass-2); }
.module-toggle.is-active {
  background: var(--bg-glass-2);
  border-color: var(--border-light);
}
.module-toggle .mod-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.module-toggle .mod-name {
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.module-toggle .mod-required {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-glass-2);
  padding: 1px 6px;
  border-radius: 6px;
}
.module-toggle .mod-desc {
  color: var(--text-secondary);
  font-size: 0.74rem;
  line-height: 1.4;
}
.module-toggle .mod-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  background: var(--bg-elevated);
  color: var(--text-muted);
}
.module-toggle.is-active .mod-check {
  background: #1a1f2e;
  color: #fff;
  border-color: #1a1f2e;
}
[data-theme="light"] .module-toggle.is-active .mod-check {
  background: #1a1f2e;
  color: #fff;
}
.module-toggle.is-required {
  cursor: default;
  opacity: 0.95;
}

.ws-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.ws-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.4rem 1.5rem;
  border-radius: 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}
.ws-summary .ws-headline {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}
.ws-summary .ws-pct {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--teal);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ws-summary .ws-pct[data-tier="warn"] { color: var(--amber); }
.ws-summary .ws-pct[data-tier="risk"] { color: var(--coral); }
.ws-summary .ws-pct[data-empty="true"] { color: var(--text-muted); }
.ws-summary .ws-pct-label { font-weight: 700; font-size: 1.05rem; }
.ws-summary .ws-pct-sub { color: var(--text-secondary); font-size: 0.82rem; margin-top: 2px; }
.ws-summary .ws-spark { flex-shrink: 0; }
.ws-summary .ws-spark svg { width: clamp(160px, 22vw, 320px); height: 56px; }

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 1rem;
}

.module-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.2rem 1.3rem 1.3rem;
  border-radius: 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  /* Grid items default to min-width:auto, which lets the card expand to its
     content's min-size (the wide control-grid) instead of shrinking to its
     module-grid track. On a 320px viewport that blew the card out to ~1260px
     and forced horizontal scrolling. min-width:0 lets it shrink to the track. */
  min-width: 0;
}
.module-card[hidden] { display: none !important; }
.module-card .module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  cursor: pointer;
  user-select: none;
}
.module-card[data-collapsed="true"] {
  gap: 0;
  padding-bottom: 1.05rem;
}
.module-card[data-collapsed="true"] .module-body { display: none; }

.module-card .module-collapse {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.module-card .module-collapse:hover {
  color: var(--text-primary);
  background: var(--bg-glass-2);
}
.module-card .module-collapse svg {
  width: 14px;
  height: 14px;
  display: block;
  transition: transform 0.18s ease;
}
.module-card[data-collapsed="true"] .module-collapse svg {
  transform: rotate(-90deg);
}

.module-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  justify-content: flex-end;
  margin: 0.1rem 0 0.5rem;
}
.module-toolbar .link-button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}
.module-toolbar .link-button:hover {
  color: var(--text-primary);
  background: var(--bg-glass-2);
}
.module-toolbar .link-button-sep {
  color: var(--text-muted);
  user-select: none;
  font-size: 0.8rem;
}
.module-card .module-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1;
  min-width: 0;
}
.module-card .module-icon {
  font-size: 1.2rem;
  line-height: 1;
}
.module-card h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.module-card .module-sub {
  display: block;
  margin-top: 1px;
  color: var(--text-secondary);
  font-size: 0.78rem;
}
.module-card .module-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.module-card .controls-pill {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--teal);
  background: rgba(15, 122, 94, 0.10);
  padding: 3px 9px;
  border-radius: 999px;
}
[data-theme="dark"] .module-card .controls-pill,
:root:not([data-theme]) .module-card .controls-pill {
  color: var(--teal);
  background: rgba(52, 209, 182, 0.12);
}
.module-card .module-remove {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.module-card .module-remove:hover { color: var(--coral); background: rgba(196, 56, 56, 0.08); }

.module-card .module-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.module-card .module-body .control-grid {
  margin: 0;
  gap: 0.75rem 1rem;
  min-width: 0;
  /* min(100%, 170px) lets a single column shrink below 170px when the
     container is narrower than that, instead of overflowing. At desktop
     widths min() resolves to 170px, so multi-column layout is unchanged. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}
.module-card label {
  font-size: 0.78rem;
}
.module-card label > span:first-child {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.module-card input[type="number"],
.module-card input[type="text"],
.module-card input[type="url"],
.module-card input[type="password"],
.module-card select,
.module-card textarea {
  background: var(--bg-base);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
}
.module-card .check-row { font-size: 0.85rem; }
.module-card label small[data-warning="true"] {
  color: var(--coral);
  font-weight: 600;
}
.module-card .assumption-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.45;
}
.module-card details.advanced {
  margin: 0;
  border-top: 1px dashed var(--border);
  padding-top: 0.75rem;
}
.module-card .span-full:empty { display: none; }

.add-module-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.6rem 1rem;
  border-radius: 18px;
  border: 2px dashed var(--border-light);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  min-height: 200px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.add-module-tile:hover { border-color: var(--teal); color: var(--teal); background: rgba(15, 122, 94, 0.06); }
.add-module-tile .plus { font-size: 1.6rem; line-height: 1; }

/* ─── Results dashboard ───────────────────────────────────────────── */

.results-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 clamp(0.75rem, 3vw, 2.5rem) 4rem;
}

.results-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 1rem clamp(0.75rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}
.results-topbar .left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.results-topbar .crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  padding: 0.45rem 0.85rem;
  border-radius: 12px;
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.82rem;
  appearance: none;
}
.results-topbar h1 {
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.results-topbar .crumb-meta {
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-top: 2px;
  display: block;
}

.scenario-tabs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.scenario-tabs .scenario-tabs-label {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 0.4rem;
}
.scenario-tab {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-glass);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.scenario-tab[aria-pressed="true"] {
  border-color: var(--teal);
  background: rgba(52, 209, 182, 0.08);
  box-shadow: inset 0 0 0 1px var(--teal);
}
.scenario-tab .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--scenario-dot, var(--text-muted));
}
.scenario-tab .pct {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-secondary);
}
.scenario-tab[aria-pressed="true"] .pct { color: var(--teal); }
.scenario-tab.add-scenario {
  border-style: dashed;
  background: transparent;
  color: var(--text-secondary);
}

.kpi-strip {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 0.6rem;
  box-shadow: var(--shadow-sm);
}

.kpi-card {
  background: var(--bg-base);
  border-radius: 14px;
  padding: 0.95rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.kpi-card.kpi-hero {
  background: linear-gradient(180deg, rgba(15, 122, 94, 0.08), transparent);
  border: 1px solid rgba(15, 122, 94, 0.18);
}
[data-theme="light"] .kpi-card.kpi-hero {
  background: linear-gradient(180deg, rgba(15, 122, 94, 0.10), rgba(15, 122, 94, 0.02));
}
.kpi-card .kpi-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kpi-card .kpi-value {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kpi-card.kpi-hero .kpi-value {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  color: var(--teal);
}
.kpi-card.kpi-hero .kpi-value[data-tier="warn"] { color: var(--amber); }
.kpi-card.kpi-hero .kpi-value[data-tier="risk"] { color: var(--coral); }
.kpi-card .kpi-sub { color: var(--text-secondary); font-size: 0.78rem; }
.kpi-card .kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(60, 207, 142, 0.15);
  color: var(--emerald);
  width: max-content;
}
.kpi-card .kpi-delta[data-direction="down"] { background: rgba(196, 56, 56, 0.13); color: var(--coral); }

.results-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.results-row .panel { margin: 0; }

/* New compact panel used inside results */
.r-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.1rem 1.25rem 1.2rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}
.r-panel .r-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.r-panel h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.r-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.action-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
}
.action-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-base);
}
.action-list .action-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid currentColor;
  color: var(--text-muted);
  background: transparent;
}
.action-list .action-tag[data-kind="withdraw"]  { color: var(--emerald); }
.action-list .action-tag[data-kind="convert"]   { color: var(--indigo); }
.action-list .action-tag[data-kind="aca"]       { color: var(--amber); }
.action-list .action-tag[data-kind="harvest"]   { color: var(--cyan); }
.action-list .action-tag[data-kind="rmd"]       { color: var(--coral); }
.action-list .action-tag[data-kind="rebalance"] { color: var(--blue); }
.action-list .action-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.action-list .action-title { font-weight: 700; font-size: 0.92rem; }
.action-list .action-sub  { color: var(--text-secondary); font-size: 0.78rem; }
.action-list .action-amt  { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 0.95rem; color: var(--text-primary); }
.action-list .action-confidence {
  margin-top: 0.15rem;
}
.action-confidence {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border-light);
  border-radius: 7px;
  padding: 0.13rem 0.34rem;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: normal;
}
.action-confidence > span {
  color: var(--text-muted);
  font-weight: 600;
}
.action-confidence[data-level="cpa-review-recommended"] {
  border-color: rgba(240, 168, 72, 0.48);
}
.action-confidence[data-level="assumption-sensitive"] {
  border-color: rgba(91, 141, 239, 0.48);
}
.action-confidence[data-level="input-limited"] {
  border-color: rgba(52, 209, 182, 0.42);
}
.action-confidence[data-level="out-of-model"] {
  border-color: rgba(240, 96, 96, 0.5);
}

/* Bracket fill */
.bracket-list { display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.bracket-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 70px;
  gap: 0.55rem;
  align-items: center;
  font-size: 0.82rem;
}
.bracket-rate { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-secondary); }
.bracket-bar {
  height: 14px;
  border-radius: 6px;
  background: var(--bg-base);
  overflow: hidden;
  position: relative;
}
.bracket-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal) 0%, var(--cyan) 100%);
  border-radius: 6px;
  transition: width 0.35s ease;
}
.bracket-fill[data-empty="true"] { background: var(--border-light); }
.bracket-amt { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; color: var(--text-primary); }

/* Group header used when both ordinary and preferential brackets are shown */
.bracket-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.5rem 0 0.15rem;
  border-top: 1px solid var(--border);
  list-style: none;
}
.bracket-section-head:first-child { padding-top: 0; border-top: 0; }
.bracket-section-total {
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Capital gains brackets get a distinct (blue→indigo) gradient so the eye
   can tell ordinary and preferential fills apart at a glance. Empty bars
   stay neutral via the existing [data-empty="true"] override. */
.bracket-section-head[data-kind="preferential"] ~ .bracket-row:not(.deduction-row):not(.credit-row) .bracket-fill:not([data-empty="true"]) {
  background: linear-gradient(90deg, var(--blue) 0%, var(--indigo) 100%);
}

/* Deduction & credit rows: the bar is split into two adjacent fills (ord / LT)
   so you can see which type of income absorbed how much of the deduction. */
.deduction-row .deduction-label,
.credit-row .deduction-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bracket-bar.deduction-bar {
  display: flex;
  align-items: stretch;
}
.bracket-bar.deduction-bar .bracket-fill {
  border-radius: 0;
  transition: width 0.35s ease;
  flex-shrink: 0;
}
.bracket-bar.deduction-bar .bracket-fill.ord-fill {
  background: linear-gradient(90deg, var(--teal) 0%, var(--cyan) 100%);
}
.bracket-bar.deduction-bar .bracket-fill.ltcg-fill {
  background: linear-gradient(90deg, var(--blue) 0%, var(--indigo) 100%);
}
.bracket-bar.deduction-bar .bracket-fill[data-empty="true"] {
  display: none;
}
/* The bar's overflow:hidden + border-radius on .bracket-bar already round
   the outer container; individual fills inherit that visually. */

/* Credit rows: no income fills the credit, so we just show a pill +
   the dollar value (credits reduce tax, not income). */
.credit-row .credit-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  padding: 0 0.5rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(240, 168, 72, 0.12);
  border: 1px solid rgba(240, 168, 72, 0.3);
  border-radius: 6px;
  width: max-content;
}
.credit-row .bracket-amt { color: var(--emerald); }

/* Withdrawal mix per year */
.withdrawal-mix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 0.55rem;
  align-items: end;
}
.mix-col {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 2px 6px;
  margin: 0;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.15s, transform 0.12s ease;
}
.mix-col:hover { background: var(--bg-glass-2); }
.mix-col:hover .mix-stack { border-color: var(--border-focus); }
.mix-col:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  background: var(--bg-glass-2);
}
.mix-col[data-selected="true"] {
  background: var(--bg-glass-2);
}
.mix-col[data-selected="true"] .mix-stack {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(52, 209, 182, 0.35);
}
.mix-col[data-selected="true"] .mix-year { color: var(--teal); }
.mix-stack {
  width: 100%;
  height: 130px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
  background: var(--bg-base);
  border: 1px solid var(--border);
}
.mix-stack span {
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.mix-stack .mix-tax  { background: #117a4d; }
.mix-stack .mix-trad { background: #5946d8; }
.mix-stack .mix-roth { background: #1f4ed8; }
.mix-stack .mix-hsa  { background: #0e7da6; }
.mix-stack .mix-ss   { background: #117a4d; opacity: 0.55; }
.mix-stack .mix-rmd  { background: #c43838; }
.mix-stack .mix-other { background: #6b7180; }
.mix-col .mix-year { font-weight: 700; font-size: 0.78rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mix-col .mix-age  { color: var(--text-muted); font-size: 0.68rem; font-variant-numeric: tabular-nums; }
.mix-badges {
  min-height: 18px;
  display: flex;
  justify-content: center;
  gap: 3px;
  flex-wrap: wrap;
}
.mix-badge {
  display: inline-flex;
  align-items: center;
  min-height: 16px;
  padding: 0 5px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg-glass-2);
  color: var(--text-secondary);
  font-size: 0.56rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mix-badge[data-kind="best"] {
  color: var(--emerald);
  border-color: rgba(52, 209, 182, 0.35);
  background: rgba(52, 209, 182, 0.1);
}
.mix-badge[data-kind="worst"] {
  color: var(--amber);
  border-color: rgba(240, 168, 72, 0.35);
  background: rgba(240, 168, 72, 0.1);
}
.mix-legend { display: flex; gap: 0.7rem; flex-wrap: wrap; font-size: 0.72rem; color: var(--text-secondary); }
.mix-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }

/* Sensitivity tornado */
.tornado-list { display: flex; flex-direction: column; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.tornado-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 70px; align-items: center; gap: 0.55rem; font-size: 0.82rem; }
.tornado-label { color: var(--text-secondary); font-weight: 600; }
.tornado-bar { position: relative; height: 22px; background: var(--bg-base); border-radius: 6px; overflow: visible; }
.tornado-axis { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--border); }
.tornado-neg, .tornado-pos {
  position: absolute;
  top: 4px;
  bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  border-radius: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.tornado-neg { right: 50%; background: var(--coral); padding: 0 4px; }
.tornado-pos { left: 50%; background: var(--emerald); padding: 0 4px; }
.tornado-units { color: var(--text-muted); font-size: 0.74rem; text-align: right; font-variant-numeric: tabular-nums; }

.results-tail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.5rem;
}
.results-tail h2 { margin: 0; }
.results-tail .panel { margin: 0; }

/* Decision engine: plain-language verdict + rescue deltas */
.decision-panel {
  margin: 1rem 0 1.1rem;
}
.decision-shell {
  border: 1px solid rgba(52, 209, 182, 0.28);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(52, 209, 182, 0.11), rgba(91, 141, 239, 0.06)), var(--bg-elevated);
  padding: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.55fr);
  gap: 1rem;
}
.decision-shell[data-tone="warn"],
.decision-shell[data-tone="pending"] {
  border-color: rgba(240, 168, 72, 0.32);
  background: linear-gradient(135deg, rgba(240, 168, 72, 0.12), rgba(52, 209, 182, 0.05)), var(--bg-elevated);
}
.decision-shell[data-tone="risk"] {
  border-color: rgba(240, 96, 96, 0.34);
  background: linear-gradient(135deg, rgba(240, 96, 96, 0.12), rgba(240, 168, 72, 0.05)), var(--bg-elevated);
}
.decision-main h2 {
  margin: 0.15rem 0 0.35rem;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.1;
}
.decision-headline {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 700;
  line-height: 1.45;
}
.decision-sub {
  margin: 0.45rem 0 0;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.5;
}
.decision-evidence {
  display: grid;
  gap: 0.45rem;
}
.decision-evidence > div,
.decision-foot > div {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.12);
  padding: 0.7rem 0.75rem;
}
.decision-evidence > div > span,
.decision-foot > div > span,
.decision-rescue > span {
  display: block;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.decision-evidence strong {
  display: block;
  margin-top: 0.15rem;
  color: var(--text-primary);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}
.decision-rescues,
.decision-foot {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}
.decision-rescue {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.11);
  padding: 0.78rem;
}
.decision-rescue strong {
  display: block;
  margin: 0.18rem 0 0.35rem;
  color: var(--text-primary);
  font-size: 1.05rem;
  line-height: 1.25;
}
.decision-rescue small,
.decision-foot small {
  display: block;
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.45;
}
.decision-rescue .action-confidence {
  margin-top: 0.5rem;
}
.decision-foot {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.decision-foot strong {
  display: block;
  margin: 0.16rem 0 0.2rem;
  color: var(--text-primary);
  font-size: 0.98rem;
}
.confidence-list {
  display: grid;
  gap: 0.3rem;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}
.confidence-list li {
  display: grid;
  grid-template-columns: minmax(56px, auto) minmax(0, 1fr);
  gap: 0.38rem;
  align-items: start;
  color: var(--text-secondary);
  font-size: 0.76rem;
  line-height: 1.35;
}
.confidence-list li strong {
  margin: 0;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 0.08rem 0.25rem;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-size: 0.62rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}
/* Out-of-model flags are permanent scope notes, not actionable findings about
   this run. Styling them like situational flags makes them read as scolding.
   Mute the row and badge so the eye lands on the actionable items first. */
.confidence-list li[data-level="out-of-model"] {
  color: var(--text-muted);
  opacity: 0.85;
}
.confidence-list li[data-level="out-of-model"] strong {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}
.sensitivity-list {
  display: grid;
  gap: 0.35rem;
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}
.sensitivity-list li {
  color: var(--text-secondary);
  font-size: 0.76rem;
  line-height: 1.35;
}
.sensitivity-list strong {
  display: block;
  color: var(--text-primary);
  font-size: 0.78rem;
  line-height: 1.25;
}
.sensitivity-list span {
  color: var(--text-secondary);
}

/* ─── Dashboard grid layout (Results · Dashboard) ───────────────────── */

/* Headline strip: equal Monte Carlo and historical cards + shared plan KPIs */
.dash-headline {
  display: grid;
  gap: 1rem;
  margin-bottom: 0.4rem;
}
.dh-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.dh-hero {
  background: linear-gradient(135deg, rgba(52, 209, 182, 0.12), var(--bg-elevated));
  border: 1px solid rgba(52, 209, 182, 0.25);
  border-radius: 18px;
  padding: 1.15rem 1.3rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
[data-theme="light"] .dh-hero {
  background: linear-gradient(135deg, rgba(15, 122, 94, 0.10), rgba(15, 122, 94, 0.02));
}
.dh-historical {
  background: linear-gradient(135deg, rgba(86, 200, 232, 0.10), var(--bg-elevated));
  border-color: rgba(86, 200, 232, 0.24);
}
[data-theme="light"] .dh-historical {
  background: linear-gradient(135deg, rgba(43, 121, 188, 0.09), rgba(43, 121, 188, 0.02));
}
.dh-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dh-result-title {
  color: var(--text-primary);
  font-size: 1.02rem;
  font-weight: 800;
}
.dh-big {
  font-size: clamp(3.35rem, 7vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--teal);
  line-height: 1;
  margin: 0.1rem 0;
  font-variant-numeric: tabular-nums;
}
.dh-big[data-empty="true"] { color: var(--text-muted); opacity: 0.5; }
.dh-big-unit { font-size: 0.5em; font-weight: 700; margin-left: 0.05em; }
.dh-hero[data-tier="warn"] .dh-big { color: var(--amber); }
.dh-hero[data-tier="risk"] .dh-big { color: var(--coral); }
.dh-historical[data-tier="ok"] .dh-big { color: #56c8e8; }
.dh-historical[data-empty="true"] .dh-big { color: var(--text-muted); opacity: 0.55; }
.dh-sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.45;
}
.dh-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--border);
  margin-top: 0.5rem;
}
.dh-mini-grid > div,
.dh-mini-grid > .dh-mini-action {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.25rem;
  background: rgba(0, 0, 0, 0.12);
  padding: 0.65rem 0.7rem;
}
[data-theme="light"] .dh-mini-grid > div,
[data-theme="light"] .dh-mini-grid > .dh-mini-action {
  background: rgba(255, 255, 255, 0.42);
}
.dh-mini-action {
  appearance: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.dh-mini-action:hover {
  background: rgba(52, 209, 182, 0.12);
}
[data-theme="light"] .dh-mini-action:hover {
  background: rgba(30, 144, 255, 0.12);
}
.dh-mini-action:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}
.dh-mini-grid span {
  color: var(--text-muted);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dh-mini-grid strong {
  color: var(--text-primary);
  font-size: clamp(0.95rem, 1.8vw, 1.25rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.dh-mini-grid strong[data-tone="warn"] { color: var(--amber); }
.dh-delta {
  margin-top: 0.55rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.dh-delta .delta {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  margin-right: 0.35rem;
}
.delta.up   { background: rgba(60, 207, 142, 0.15); color: var(--emerald); }
.delta.down { background: rgba(196, 56, 56, 0.13); color: var(--coral); }

.dh-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}
.dh-kpi {
  background: var(--bg-elevated);
  padding: 1rem 1.1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.dh-kpi .kpi-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dh-kpi .kpi-big {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.dh-kpi .kpi-big[data-tone="warn"] { color: var(--amber); }
.dh-kpi .kpi-big[data-tone="risk"] { color: var(--coral); }

/* ─── Dashboard grid (3-column with span variants) ──────────────────── */

.dash-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  grid-auto-rows: auto;
}
.dash-cell {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.1rem 1.25rem 1.2rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}
.dash-cell.span-2 { grid-column: span 2; }
.dash-cell.span-3 { grid-column: span 3; }
.dash-cell.no-pad { padding: 0; gap: 0; }
.dash-cell-pad { padding: 1.1rem 1.25rem 0.4rem; }

/* Shared card-head used inside dash-cell */
.r-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.r-card-head > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.r-section-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.r-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-primary);
}
.dash-cell .ink-3 { color: var(--text-muted); font-size: 0.74rem; }

/* Scrollable table wrapper used inside no-pad dash-cells */
.ledger-wrap-dash {
  max-height: 360px;
  overflow-y: auto;
  padding: 0 1.25rem 1rem;
}
.ledger-wrap-dash.compact-audit {
  max-height: none;
}
.ledger-wrap-dash::-webkit-scrollbar { width: 8px; }
.ledger-wrap-dash::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; }

/* When the ledger holds a pinnable table (year-by-year ledger, asset snapshot),
   that inner `.pinnable-table-wrap` is already the vertical scroller — it has
   the resize handle, pinned columns, and the sticky `th` header row pins to it.
   Drop the outer wrap's own max-height/overflow so we don't get TWO nested
   vertical scrollboxes (and so the sticky header isn't dragged out of view by an
   outer scroll). Plain `.table-wrap` ledgers keep the outer scroll below. The
   `:has()` selector outranks the mobile `.ledger-wrap-dash { max-height }` rule
   on specificity, so this holds at every width. */
.ledger-wrap-dash:has(> .pinnable-table-wrap) {
  max-height: none;
  overflow-y: visible;
}

/* ─── Healthcare timeline strip ─────────────────────────────────────── */

.health-tl {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--health-cols, 35), minmax(0, 1fr));
  gap: 2px;
  height: 32px;
}
.htl-y { border-radius: 4px; background: var(--bg-base); }
.htl-y.aca {
  background: linear-gradient(180deg, var(--blue) 0%, color-mix(in oklab, var(--blue) 55%, var(--bg-base)) 100%);
  opacity: 0.6;
}
.htl-y.medicare {
  background: linear-gradient(180deg, var(--indigo) 0%, color-mix(in oklab, var(--indigo) 55%, var(--bg-base)) 100%);
  opacity: 0.6;
}
.htl-y.self {
  background: var(--bg-base);
  opacity: 0.85;
}
.htl-y.hot {
  opacity: 1;
  box-shadow: 0 0 0 1px var(--amber);
}
.health-tl-axis {
  position: relative;
  margin-top: 0.6rem;
  height: 16px;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.htl-ax {
  position: absolute;
  white-space: nowrap;
}
.htl-ax.start { left: 0; }
.htl-ax.end { right: 0; }
.htl-ax.mid {
  transform: translateX(-50%);
  color: var(--amber);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.htl-ax.mid::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  width: 0;
  height: 16px;
  border-left: 2px dashed var(--amber);
}
.health-legend {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.health-legend > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.health-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.health-swatch.aca { background: var(--blue); opacity: 0.6; }
.health-swatch.medicare { background: var(--indigo); opacity: 0.6; }
.health-swatch.hot { background: transparent; box-shadow: 0 0 0 1px var(--amber); }

/* ─── Dashboard-scoped overrides for legacy chart sizing ────────────── */

/* The legacy sankey + chart CSS forces wide min-widths so they look right
   in the original layout. Inside a dashboard cell, let them shrink with
   the grid (SVG viewBox handles the scaling). */
.dash-cell .sankey {
  width: 100%;
  min-height: 0;
  height: auto;
  aspect-ratio: 16 / 11;
}
.dash-cell .chart {
  width: 100%;
  min-height: 0;
  height: auto;
  aspect-ratio: 16 / 8;
}
.dash-cell .table-wrap {
  margin: 0;
  width: 100%;
}
.rescue-apply-button {
  appearance: none;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-glass);
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.38rem 0.55rem;
  cursor: pointer;
  white-space: nowrap;
}
.rescue-apply-button:hover:not(:disabled) {
  border-color: var(--border-focus);
  background: var(--bg-glass-2);
}
.rescue-apply-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* The action plan ledger lives inside a no-pad span-3 cell; let its
   internal table scroll horizontally on narrow screens. */
.ledger-wrap-dash .table-wrap,
.ledger-wrap-dash .pinnable-table-wrap {
  margin: 0;
}

/* ─── Mobile ───────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .ws-shell { grid-template-columns: 1fr; }
  .module-library { position: static; }
  .results-row { grid-template-columns: 1fr; }

  .dh-result-grid { grid-template-columns: 1fr; }
  .dh-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .decision-shell { grid-template-columns: 1fr; }
  .decision-rescues { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-cell.span-2 { grid-column: span 2; }
  .dash-cell.span-3 { grid-column: span 2; }
}

@media (max-width: 720px) {
  .topbar-redesign { padding: 1rem; gap: 0.65rem; }
  .topbar-controls { width: 100%; justify-content: flex-end; }

  .persona-screen { padding: 0.5rem 1rem 3rem; }
  .persona-step h2 { font-size: 1.25rem; }
  .persona-step .step-sub { margin-left: 0; font-size: 0.85rem; }
  .persona-step-header { gap: 0.5rem; }

  .persona-grid { grid-template-columns: 1fr; }
  .intake-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .module-grid { grid-template-columns: 1fr; }
  .ws-summary  { padding: 1rem 1.1rem; }
  .ws-summary .ws-headline { flex-wrap: wrap; }
  .ws-summary .ws-spark    { display: none; }

  .kpi-strip { grid-template-columns: 1fr 1fr; padding: 0.4rem; }
  .kpi-card.kpi-hero { grid-column: 1 / -1; }
  .results-topbar { padding: 0.85rem 1rem; }

  .dh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dh-mini-grid { grid-template-columns: 1fr; }
  .decision-shell { border-radius: 14px; padding: 0.9rem; }
  .decision-foot { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .dash-cell.span-2,
  .dash-cell.span-3 { grid-column: span 1; }
  .dash-cell { padding: 0.9rem 1rem 1rem; border-radius: 14px; }
  .dash-cell-pad { padding: 0.9rem 1rem 0.4rem; }
  .ledger-wrap-dash { padding: 0 1rem 0.85rem; max-height: 280px; }
  .dh-hero { padding: 1rem 1.15rem 1.1rem; border-radius: 14px; }
  .dh-kpis { border-radius: 14px; }
  .dh-kpi { padding: 0.85rem 0.9rem; }
  /* Health timeline gets cramped at narrow widths — soften it. */
  .health-tl { gap: 1px; height: 26px; }
  .health-tl-axis { font-size: 0.62rem; }
  .health-legend { gap: 0.55rem; font-size: 0.68rem; }
  /* Sankey controls (Flow select + Year scrubber + label) wrap below the
     card title rather than crowding the right edge. */
  .dash-cell .r-card-head { gap: 0.5rem; }
  .dash-cell .inline-controls { width: 100%; }

  .module-library {
    border-radius: 14px;
  }
  .module-library .lib-toggle-collapse {
    display: inline-block;
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.85rem;
    align-self: flex-start;
    padding: 0;
    cursor: pointer;
  }
  .module-library[data-collapsed="true"] #moduleToggleList,
  .module-library[data-collapsed="true"] .lib-eyebrow,
  .module-library[data-collapsed="true"] h2,
  .module-library[data-collapsed="true"] .lib-blurb { display: none; }
  .module-library[data-collapsed="true"] { padding: 0.6rem 1rem; }

  .withdrawal-mix { grid-template-columns: repeat(4, 1fr); gap: 0.45rem; }
  .mix-stack { height: 100px; }

  .tornado-row { grid-template-columns: 110px 1fr 56px; }
}

@media (max-width: 420px) {
  .intake-grid { grid-template-columns: 1fr; }
  .withdrawal-mix { grid-template-columns: repeat(3, 1fr); }
}

/* Action plan table reflows to stacked cards on narrow viewports — a 6-column
   horizontal scroll forces ~6x sideways scrolling at 320px and buries the
   Confidence column off-screen by default. data-label on each <td> is emitted
   by tableHtml() in app.mjs. */
@media (max-width: 640px) {
  #actionPlan { overflow-x: visible; }
  #actionPlan .sticky-x-scroll { display: none; }
  #actionPlan table,
  #actionPlan thead,
  #actionPlan tbody,
  #actionPlan tr,
  #actionPlan td { display: block; width: auto; }
  #actionPlan thead { position: absolute; left: -9999px; }
  #actionPlan tbody { display: flex; flex-direction: column; gap: 0.55rem; }
  #actionPlan tr {
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 0.65rem 0.8rem 0.7rem;
    background: rgba(255, 255, 255, 0.03);
  }
  #actionPlan td {
    padding: 0.2rem 0;
    border: 0;
    font-size: 0.84rem;
    line-height: 1.35;
    /* styles.css sets a global td { white-space: nowrap } that would clip the
       longer cells (Tax / cash impact, Why) off the side of the card. */
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #actionPlan td::before {
    content: attr(data-label);
    display: block;
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.1rem;
  }
  /* Empty cells (e.g. no rmd amount) collapse so the card doesn't get blank
     rows with just a label. */
  #actionPlan td:empty { display: none; }
}

/* ─── Run-model overlay ────────────────────────────────────────────── */

.run-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 11, 22, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* Animation handled via [hidden] toggling and explicit opacity on show */
  opacity: 1;
  transition: opacity 0.18s ease;
}
[data-theme="light"] .run-overlay {
  background: rgba(20, 28, 50, 0.55);
}
.run-overlay[hidden] {
  display: none !important;
  opacity: 0;
}
.run-overlay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 2rem 2.4rem;
  border-radius: 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  max-width: 420px;
  text-align: center;
  color: var(--text-primary);
}
.run-overlay-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid var(--teal-glow);
  border-top-color: var(--teal);
  animation: run-overlay-spin 0.9s linear infinite;
}
.run-overlay-title {
  margin: 0;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.run-overlay-sub {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.run-overlay-note {
  margin: 0.4rem 0 0;
  color: var(--text-muted);
  font-size: 0.75rem;
  max-width: 32ch;
}
@keyframes run-overlay-spin {
  to { transform: rotate(360deg); }
}

/* ─── Confirm dialog ───────────────────────────────────────────────── */
/* Used in place of window.confirm() so the prompt matches the design system
   and is tappable on mobile (native confirm sits at viewport top and reads
   as a system alert, not a planner action). */

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(7, 11, 22, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
[data-theme="light"] .confirm-overlay {
  background: rgba(20, 28, 50, 0.55);
}
.confirm-card {
  width: 100%;
  max-width: 420px;
  padding: 1.2rem 1.3rem 1.1rem;
  border-radius: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.confirm-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.confirm-body {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-line;
}
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: 0.35rem;
}
.confirm-actions button {
  min-height: 40px;
  padding: 0.5rem 0.95rem;
  font-size: 0.85rem;
}
@media (max-width: 480px) {
  .confirm-actions { flex-direction: column-reverse; }
  .confirm-actions button { width: 100%; }
}

/* ─── Streaming run indicators ─────────────────────────────────────── */

@keyframes psl-spin {
  to { transform: rotate(360deg); }
}
@keyframes psl-dash {
  to { stroke-dashoffset: -200; }
}

/* Inline spinner that sits next to a KPI value while the run is still in
   flight. Sized so it doesn't shift baseline alignment of the big number. */
.kpi-spinner {
  display: inline-block;
  width: 0.65em;
  height: 0.65em;
  margin-left: 0.35em;
  vertical-align: middle;
  border-radius: 50%;
  border: 0.13em solid rgba(52, 209, 182, 0.18);
  border-top-color: var(--teal);
  animation: psl-spin 0.85s linear infinite;
}
.dh-big .kpi-spinner { width: 0.32em; height: 0.32em; border-width: 0.06em; margin-left: 0.18em; }
.dh-kpi[data-streaming="true"] .kpi-big { opacity: 0.92; }
.dh-prelim {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(86, 200, 232, 0.13);
  color: #56c8e8;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Spinner used inside the distribution-chart placeholder. */
.dist-spinner {
  transform-origin: center;
  transform-box: fill-box;
  animation: psl-spin 1.1s linear infinite;
}

/* Streaming row that sits in the scenario table footer while runs are still
   coming in. Uses tfoot positioning so user-sorted rows don't push it
   anywhere except below the body. */
.table-wrap tfoot .streaming-row td {
  padding: 0.65rem 0.9rem;
  background: rgba(86, 200, 232, 0.05);
  border-top: 1px dashed rgba(86, 200, 232, 0.25);
  color: var(--text-secondary);
  font-size: 0.8rem;
}
.table-wrap tfoot .streaming-row .streaming-label,
.table-wrap tfoot .streaming-row .streaming-spinner,
.table-wrap tfoot .streaming-row .streaming-remaining {
  vertical-align: middle;
}
.table-wrap tfoot .streaming-row .streaming-spinner { margin-right: 0.55rem; }
.table-wrap tfoot .streaming-row .streaming-remaining { float: right; }
.streaming-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(86, 200, 232, 0.2);
  border-top-color: #56c8e8;
  animation: psl-spin 0.85s linear infinite;
  flex-shrink: 0;
}
.streaming-label { font-weight: 600; color: var(--text-primary); }
.streaming-remaining { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }