/* app.css — NestMint Component Styles */

/* ========== HEADER ========== */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--color-bg) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.06);
}
.header-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
}
.logo-link {
  display: flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: var(--color-text);
  flex-shrink: 0;
}
.logo-img, .logo-svg { flex-shrink: 0; }
.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.logo-tagline {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: var(--space-2);
  padding-left: var(--space-2);
  border-left: 1px solid var(--color-border);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}
.nav-link {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  transition: all var(--transition-interactive);
}
.nav-link:hover { color: var(--color-text); background: var(--color-surface-offset); }
.nav-link.nav-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}
.nav-link.active { color: var(--color-primary); background: var(--color-primary-highlight); }
.header-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.theme-toggle {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: all var(--transition-interactive);
}
.theme-toggle:hover { color: var(--color-text); background: var(--color-surface-offset); }
.mobile-menu-btn { display: none; padding: var(--space-2); color: var(--color-text-muted); }
.mobile-nav {
  display: none;
  flex-direction: column;
  padding: var(--space-2) var(--space-4) var(--space-4);
  gap: var(--space-1);
}
.mobile-nav-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: all var(--transition-interactive);
}
.mobile-nav-link:hover { background: var(--color-surface-offset); color: var(--color-text); }
.mobile-nav-link.active { color: var(--color-primary); background: var(--color-primary-highlight); }

@media (max-width: 1024px) {
  .header-nav { display: none; }
  .mobile-menu-btn { display: block; }
  .mobile-nav:not([hidden]) { display: flex; }
  .logo-tagline { display: none; }
}

/* ========== VIEWS ========== */
.view { display: none; }
.view.active { display: block; animation: viewFadeIn 300ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes viewFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* v149.389 (Jahn) — PERFORMANCE: style-recalc & layout containment.
   Every view/tab switch previously forced the browser to recalculate styles
   across the ENTIRE ~10k-node DOM (all views stay mounted, toggled by display),
   costing ~24ms of "UpdateLayoutTree" per click — the source of the laggy,
   "unstable" feel. `contain: content` isolates each view's layout+paint so a
   change inside (or the class/attr toggle on) one view no longer invalidates its
   siblings; the recalc scope shrinks to just the view being shown. `content-
   visibility: auto` lets the browser skip rendering work for the currently-
   hidden active-view content until it is on screen. This is a pure rendering-
   layer optimization — no engine, logic, or single-source change. We use
   `contain: content` (layout+paint+style, NOT size) so views never collapse. */
.view.active { contain: content; }
.switchable-view.active { contain: content; }
/* v149.396 (Jahn) — EXCEPTION: `contain: layout` (part of `contain: content`)
   establishes a containing block for position:fixed descendants. The spreadsheet
   Expand mode makes #dash-spreadsheet-card position:fixed to fill the viewport;
   with the view contained, that fixed card was trapped inside the contained view
   box and collapsed to 0×0 — so expanding showed nothing (just the Quick Access
   behind it). When expanded, drop containment on the spreadsheet view AND its
   dashboard-view ancestor so the fixed card resolves against the real viewport.
   Containment still applies in the normal (non-expanded) state, so the perf win
   is unaffected for every other interaction. */
/* NOTE: no :has() here — the charts-spreadsheet-prelude sentinel bans :has() in
   the spreadsheet scope. The #view-dashboard ancestor's containment is dropped
   by the JS expand handler instead (view.style.contain / dashHost.style.contain),
   which is the reliable belt-and-suspenders path anyway. */
#dash-spreadsheet-view.ss-expanded { contain: none !important; }

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-interactive);
  white-space: nowrap;
  cursor: pointer;
  border: none;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover { background: var(--color-surface-offset); }
.btn-accent {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  border: 1px solid oklch(from var(--color-primary) l c h / 0.25);
  font-weight: 600;
}
.btn-accent:hover {
  background: oklch(from var(--color-primary) l c h / 0.15);
}
.btn-ghost { color: var(--color-primary); background: transparent; }
.btn-ghost:hover { background: var(--color-primary-highlight); }
.btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-sm); }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn-block { display: flex; width: 100%; }

/* ========== HERO SECTION ========== */
.hero-section {
  position: relative;
  padding: clamp(var(--space-12), 8vw, var(--space-32)) var(--space-4);
  text-align: center;
  overflow: hidden;
  background: 
    radial-gradient(ellipse at 30% 20%, color-mix(in oklch, var(--color-primary) 8%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, color-mix(in oklch, var(--color-secondary) 6%, transparent) 0%, transparent 50%),
    var(--color-bg);
}
.hero-content {
  max-width: var(--content-default);
  margin: 0 auto;
}
.hero-badge {
  display: inline-flex;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-primary-highlight);
  margin-bottom: var(--space-6);
}
.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}
.hero-accent { color: var(--color-primary); }
.hero-desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin: 0 auto var(--space-8);
  line-height: 1.6;
}
.hero-ctas {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}
.hero-image-wrapper {
  max-width: var(--content-wide);
  margin: var(--space-10) auto 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ========== SECTIONS ========== */
.section-container {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: clamp(var(--space-8), 6vw, var(--space-16)) var(--space-4);
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}
.section-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-10);
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}

/* Steps */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-6);
}
.step-card {
  background: var(--color-surface);
  border: 1px solid oklch(from var(--color-text) l c h / 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  transition: box-shadow var(--transition-interactive);
}
.step-card:hover { box-shadow: var(--shadow-md); }
.step-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}
.step-number {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}
.step-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.step-card p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 auto; }

/* Product Screenshots */
.screenshots-section {
  border-top: 1px solid var(--color-divider);
}
.screenshot-tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.screenshot-tab {
  padding: var(--space-2) var(--space-4);
  border: 2px solid oklch(from var(--color-text) l c h / 0.12);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-interactive);
}
.screenshot-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: oklch(from var(--color-primary) l c h / 0.06);
}
.screenshot-tab.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}
.screenshot-gallery {
  position: relative;
}
.screenshot-panel {
  display: none;
  animation: ssReveal 0.4s ease-out;
}
.screenshot-panel.active {
  display: block;
}
@keyframes ssReveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.screenshot-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 32px oklch(from var(--color-text) l c h / 0.12), 0 2px 8px oklch(from var(--color-text) l c h / 0.06);
  border: 1px solid oklch(from var(--color-text) l c h / 0.08);
  max-width: 960px;
  margin: 0 auto;
}
.screenshot-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.screenshot-caption {
  text-align: center;
  padding: var(--space-5) var(--space-4) 0;
  max-width: 640px;
  margin: 0 auto;
}
.screenshot-caption h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}
.screenshot-caption p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}
@media (max-width: 640px) {
  .screenshot-tabs {
    gap: var(--space-1);
  }
  .screenshot-tab {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
  }
}

/* Real App Screenshots */
.real-app-section {
  border-top: 1px solid var(--color-divider);
}
.real-app-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 1200px;
  margin: 0 auto;
}
.real-app-card {
  text-align: center;
}
.real-app-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
  color: var(--color-text);
}
.real-app-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.real-app-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 24px oklch(from var(--color-text) l c h / 0.1), 0 1px 4px oklch(from var(--color-text) l c h / 0.06);
  border: 1px solid oklch(from var(--color-text) l c h / 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.real-app-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px oklch(from var(--color-text) l c h / 0.14), 0 2px 8px oklch(from var(--color-text) l c h / 0.08);
}
.real-app-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--color-surface-raised, #f5f5f5);
  border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.06);
}
.browser-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.browser-url {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  letter-spacing: 0.02em;
}
.real-app-frame img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 900px) {
  .real-app-grid {
    grid-template-columns: 1fr;
    max-width: 640px;
    gap: var(--space-8);
  }
}

/* Features */
.features-section { border-top: 1px solid var(--color-divider); }
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-4);
}
.feature-card {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid oklch(from var(--color-text) l c h / 0.06);
  background: var(--color-surface);
  transition: box-shadow var(--transition-interactive);
}
.feature-card:hover { box-shadow: var(--shadow-sm); }
.feature-card svg { margin-bottom: var(--space-3); }
.feature-card h4 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-1);
}
.feature-card p { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Pricing */
.pricing-section {
  border-top: 1px solid var(--color-divider);
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: 960px;
  margin: 0 auto;
}
.pricing-card {
  background: var(--color-surface);
  border: 1px solid oklch(from var(--color-text) l c h / 0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  position: relative;
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.pricing-card:hover {
  box-shadow: var(--shadow-md);
}
.pricing-card-featured {
  border-color: var(--color-primary);
  border-width: 2px;
  box-shadow: 0 4px 24px oklch(from var(--color-primary) l c h / 0.12);
}
.pricing-card-featured:hover {
  box-shadow: 0 8px 32px oklch(from var(--color-primary) l c h / 0.18);
  transform: translateY(-2px);
}
.pricing-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.pricing-card-header {
  margin-bottom: var(--space-6);
}
.pricing-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pricing-amount {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  margin: var(--space-2) 0 var(--space-1);
  line-height: 1;
}
.pricing-dollar {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-top: 6px;
}
.pricing-value {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.pricing-cents {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-top: 6px;
}
.pricing-period {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.pricing-savings {
  display: block;
  font-size: 0.7rem;
  color: var(--color-primary);
  font-weight: 600;
  margin-top: var(--space-1);
}
.pricing-trial {
  display: block;
  font-size: 0.7rem;
  color: var(--color-text-faint);
  margin-top: var(--space-1);
  font-style: italic;
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  text-align: left;
}
.pricing-features li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
  border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.04);
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-features svg {
  flex-shrink: 0;
  color: var(--color-primary);
}
.pricing-card-featured .pricing-features svg {
  color: var(--color-primary);
}
.btn-block {
  display: block;
  width: 100%;
}
.pricing-disclaimer {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-6);
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 820px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
  }
}

/* Footer */
.app-footer {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  border-top: 1px solid var(--color-divider);
  margin-top: var(--space-8);
}
.footer-content {
  max-width: 900px;
  margin: 0 auto;
}
.footer-company {
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.footer-disclaimer {
  line-height: 1.6;
  margin-bottom: var(--space-3);
}
.footer-links {
  margin-top: var(--space-2);
}
.footer-links a {
  color: var(--color-primary);
  text-decoration: none;
}
.footer-links a:hover {
  text-decoration: underline;
}
.footer-sep {
  margin: 0 var(--space-2);
  color: var(--color-divider);
}

/* ========== CALCULATOR LAYOUT ========== */
.calc-container {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}
.calc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.page-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.page-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.calc-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 900px) {
  .calc-layout { grid-template-columns: 1fr; }
}

/* ========== FORM ELEMENTS ========== */
.input-card {
  background: var(--color-surface);
  border: 1px solid oklch(from var(--color-text) l c h / 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.input-card-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.form-field {
  margin-bottom: var(--space-4);
}
.form-field:last-child { margin-bottom: 0; }
.form-field label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.form-field input[type="number"],
.form-field input[type="text"],
.form-field select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
.form-field input:focus,
.form-field select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}
.input-with-prefix, .input-with-suffix {
  display: flex;
  align-items: center;
}
.input-prefix, .input-suffix {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-faint);
  padding: var(--space-2) var(--space-2);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}
.input-prefix {
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.input-suffix {
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.input-with-prefix input { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.input-with-suffix input { border-radius: var(--radius-md) 0 0 var(--radius-md); }

/* Special withdrawal/deposit row alignment — all controls on the same baseline */
.special-withdrawal-row .form-field,
.special-deposit-row .form-field {
  margin-bottom: 0;
}

/* Slider */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  outline: none;
  margin-top: var(--space-2);
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-interactive);
}
.slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid var(--color-surface);
  box-shadow: var(--shadow-sm);
}

/* Checkbox */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
  color: var(--color-text);
}
.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Form sections (collapsible) */
.form-section {
  background: var(--color-surface);
  border: 1px solid oklch(from var(--color-text) l c h / 0.06);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.form-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  color: var(--color-text);
  transition: background var(--transition-interactive);
}
.form-section-header::-webkit-details-marker { display: none; }
.form-section-header:hover { background: var(--color-surface-2); }
.form-section-header svg { color: var(--color-primary); flex-shrink: 0; }
.form-section[open] .form-section-header { border-bottom: 1px solid var(--color-divider); }
.form-section .form-grid,
.form-section .form-hint,
.form-section .form-sub-label,
.form-section .spending-tiers,
.form-section .rate-hint,
.form-section .tax-checkbox-group,
.form-section #special-withdrawals-list,
.form-section #special-deposits-list {
  padding: 0 var(--space-5);
}
.form-section .form-grid { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.form-section .form-hint { padding-top: var(--space-3); padding-bottom: var(--space-2); }
.form-section .rate-hint { padding-top: var(--space-3); padding-bottom: var(--space-2); }
.form-section .tax-checkbox-group { padding-bottom: var(--space-4); }
.form-section #special-withdrawals-list,
.form-section #special-deposits-list { padding-top: var(--space-2); padding-bottom: var(--space-4); }
.form-section .form-sub-label { padding-top: var(--space-3); }
.form-section .spending-tiers { padding-bottom: var(--space-4); }
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--space-4);
}
.form-sub-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}
.form-hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary-highlight);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.post-form-layout {
  max-width: 800px;
}

/* ========== KPI CARDS ========== */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.kpi-card {
  background: var(--color-surface);
  border: 1px solid oklch(from var(--color-text) l c h / 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
}
.kpi-card.kpi-primary {
  border-color: var(--color-primary);
  border-width: 2px;
}
.kpi-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 500;
  margin-bottom: var(--space-1);
}
.kpi-value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-text);
}
.tile-sublabel {
  font-size: 11px;
  color: #6B7280;
  margin-top: 2px;
  font-weight: normal;
}
.kpi-delta {
  font-size: var(--text-xs);
  font-weight: 500;
  margin-top: var(--space-1);
}

/* ========== FUN FACT CARD ========== */
.fun-fact-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: linear-gradient(135deg, oklch(0.95 0.04 160), oklch(0.94 0.05 210));
  border: 1px solid oklch(0.85 0.06 180);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  position: relative;
  overflow: hidden;
  animation: funFactFadeIn 0.4s ease;
}
.fun-fact-card::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: oklch(0.90 0.06 180 / 0.35);
  pointer-events: none;
}
@keyframes funFactFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fun-fact-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.fun-fact-content {
  flex: 1;
  min-width: 0;
}
.fun-fact-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(0.40 0.10 180);
  margin-bottom: var(--space-1);
}
.fun-fact-text {
  font-size: 12px;
  font-weight: 600;
  color: oklch(0.25 0.05 200);
  line-height: 1.35;
}
.fun-fact-subtext {
  font-size: 11px;
  color: oklch(0.40 0.06 200);
  margin-top: 1px;
  line-height: 1.3;
}
.fun-fact-shuffle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  background: oklch(1 0 0 / 0.6);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(0.40 0.10 180);
  transition: background 0.2s, transform 0.2s;
}
.fun-fact-shuffle:hover {
  background: oklch(1 0 0 / 0.9);
  transform: rotate(180deg);
}
@media (max-width: 600px) {
  .fun-fact-card { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .fun-fact-icon { width: 40px; height: 40px; font-size: 1.5rem; }
  .fun-fact-text { font-size: var(--text-xs); }
}

/* ========== CHART CARDS ========== */
.chart-card {
  background: var(--color-surface);
  border: 1px solid oklch(from var(--color-text) l c h / 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.chart-card canvas { background: transparent; }
.chart-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.chart-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.chart-wrapper {
  position: relative;
  width: 100%;
  height: 280px;
}
.chart-wrapper.chart-tall { height: 340px; }

.calc-results .chart-card { margin-bottom: var(--space-4); }

/* ========== DASHBOARD ========== */
.dash-container {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}
.dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.dash-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.dash-charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.chart-large { grid-column: span 1; }
@media (max-width: 900px) {
  .dash-charts { grid-template-columns: 1fr; }
}

/* What-If Panel */
.whatif-panel {
  background: var(--color-surface);
  border: 1px solid oklch(from var(--color-text) l c h / 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-md);
}
.whatif-panel:not([hidden]) {
  animation: slideDown 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.whatif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.whatif-header h3 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
}
.whatif-body .form-field { margin-bottom: var(--space-3); }
.whatif-presets {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.whatif-preset {
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
}
.whatif-preset.active {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.whatif-preset-wide {
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}
.whatif-mc-btn {
  background: var(--color-surface-raised, #f1f5f9);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  transition: background var(--transition-interactive),
              color var(--transition-interactive),
              border-color var(--transition-interactive),
              box-shadow var(--transition-interactive);
}
.whatif-mc-btn.active {
  background: var(--color-success);
  color: #fff;
  border-color: var(--color-success);
  box-shadow: 0 0 0 2px oklch(from var(--color-success) l c h / 0.25);
}
.whatif-mc { margin-top: var(--space-4); }

/* 4c: MC spinner animation */
@keyframes wi-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.wi-spinner-icon {
  animation: wi-spin 1s linear infinite;
}

/* 4e: Collapsible analysis sections */
.wi-analysis-section { border: none; }
.wi-analysis-section > summary { list-style: none; }
.wi-analysis-section > summary::-webkit-details-marker { display: none; }
.wi-analysis-section[open] .wi-section-chevron {
  transform: rotate(180deg);
}
.wi-analysis-toggle:hover {
  opacity: 0.8;
}

/* ========== GOAL SIMULATOR PAGE ========== */
/* v149.57 — widened from 400px to 720px so the form-grid-2 inside
   renders two columns (Starting Balance + Retirement Goal) side by side.
   The previous 400px cap collapsed both fields onto a single column. */
.sim-starting-balance {
  max-width: 720px;
  margin-bottom: var(--space-5);
}
.sim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  /* v149.88: each card uses its natural height so inputs + Calculate */
  /* align across cards regardless of whether one has a visible result. */
  align-items: start;
}
@media (max-width: 768px) {
  .sim-grid { grid-template-columns: 1fr; }
}
.sim-card {
  background: var(--color-surface);
  border: 1px solid oklch(from var(--color-text) l c h / 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
}
.sim-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.sim-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sim-card-header h3 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
}
.sim-card-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}
.sim-card-inputs {
  /* v149.88: removed `flex: 1` so inputs sit at their natural height. */
  /* Calculate button now hugs the input rows directly. Combined with */
  /* .sim-grid's align-items:start, cards no longer stretch each other. */
  margin-bottom: var(--space-3);
}
.sim-card-inputs .form-grid-2 {
  grid-template-columns: 1fr 1fr;
}
.sim-calc-btn {
  width: 100%;
}
.sim-result {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary-highlight);
  border: 1px solid oklch(from var(--color-primary) l c h / 0.2);
}
.sim-answer {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.sim-detail {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ========== DATA TABLE ========== */
.table-card {
  background: var(--color-surface);
  border: 1px solid oklch(from var(--color-text) l c h / 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.table-scroll { overflow-x: auto; }
.data-table {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums lining-nums;
}
.data-table th {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  font-weight: 600;
  text-align: right;
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--color-divider);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  color: var(--color-text-muted);
  z-index: 1;
}
.data-table th:first-child { text-align: left; }
.data-table th:hover { color: var(--color-text); }
.data-table td {
  text-align: right;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  white-space: nowrap;
}
.data-table td:first-child { text-align: left; font-weight: 500; }
.data-table tr:hover { background: var(--color-surface-2); }
.data-table tr.highlight { background: var(--color-primary-highlight); }
.data-table tr.depleted { background: var(--color-error-highlight); color: var(--color-error); }
.data-table tr.rmd-warning td { color: var(--color-warning); }

.table-details {
  background: var(--color-surface);
  border: 1px solid oklch(from var(--color-text) l c h / 0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.table-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  color: var(--color-text-muted);
  transition: background var(--transition-interactive);
}
.table-toggle::-webkit-details-marker { display: none; }
.table-toggle:hover { background: var(--color-surface-2); }
.table-details[open] .table-toggle { border-bottom: 1px solid var(--color-divider); }
.table-details .table-scroll { padding: 0 var(--space-5) var(--space-5); max-height: 400px; overflow-y: auto; }

/* ========== PRINT ========== */
@media print {
  .app-header, .whatif-panel, .dash-actions, .hero-section,
  .btn, .theme-toggle, .mobile-menu-btn { display: none !important; }
  .view { display: block !important; }
  .chart-card, .kpi-card, .table-card { break-inside: avoid; page-break-inside: avoid; }
  body { font-size: 11pt; }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 600px) {
  .hero-title { font-size: clamp(1.5rem, 1rem + 3vw, 2.5rem); }
  .hero-ctas { flex-direction: column; align-items: center; }
  .hero-ctas .btn { width: 100%; max-width: 320px; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .dash-actions { width: 100%; }
  .dash-actions .btn { flex: 1; }
  .calc-header { flex-direction: column; align-items: flex-start; }
}

/* ========== VIEW TOGGLE ========== */
.view-toggle-bar {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-surface-offset);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  width: fit-content;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.view-toggle-bar::-webkit-scrollbar {
  display: none;
}
.view-toggle-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  transition: all var(--transition-interactive);
  cursor: pointer;
  border: none;
  flex-shrink: 0;
  white-space: nowrap;
}
.view-toggle-btn:hover { color: var(--color-text); background: var(--color-surface); }
.view-toggle-btn.active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}
.view-toggle-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Switchable views */
.switchable-view { display: none; }
.switchable-view.active { display: block; animation: viewFadeIn 250ms ease; }

/* ========== SPREADSHEET TABLE ========== */
/* Break the spreadsheet view out of the 1200px container to use full viewport width */
#dash-spreadsheet-view {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 0 var(--space-4);
  box-sizing: border-box;
}
.spreadsheet-card {
  background: var(--color-surface);
  border: 1px solid oklch(from var(--color-text) l c h / 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: visible;
  min-width: 320px;
}
.spreadsheet-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.spreadsheet-scroll {
  overflow: auto;
  max-height: 70vh;
  /* Subtle scroll hint shadow on right edge */
  background:
    linear-gradient(to right, var(--color-surface) 30px, transparent),
    linear-gradient(to left, var(--color-surface) 30px, transparent),
    linear-gradient(to right, oklch(from var(--color-text) l c h / 0.12), transparent 30px),
    linear-gradient(to left, oklch(from var(--color-text) l c h / 0.12), transparent 30px);
  background-position: left, right, left, right;
  background-size: 40px 100%, 40px 100%, 20px 100%, 20px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.spreadsheet-table {
  width: max-content;
  min-width: 100%;
  font-size: 9px;
  font-variant-numeric: tabular-nums lining-nums;
  border-collapse: collapse;
}
#pre-spreadsheet {
  width: 100%;
  min-width: 0;
}
.spreadsheet-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface-offset);
  padding: 2px 3px;
  text-align: right;
  font-weight: 600;
  font-size: 8px;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-divider);
  white-space: nowrap;
}
.spreadsheet-table th:first-child,
.spreadsheet-table td:first-child { text-align: center; }
.spreadsheet-table th:nth-child(2),
.spreadsheet-table td:nth-child(2) { text-align: center; }
.spreadsheet-table td {
  padding: 1px 3px;
  text-align: right;
  border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.04);
  color: var(--color-text);
  white-space: nowrap;
}
.spreadsheet-table tbody tr:hover {
  background: var(--color-primary-highlight);
}
.spreadsheet-table tbody tr:nth-child(even) {
  background: oklch(from var(--color-text) l c h / 0.02);
}
.spreadsheet-table tbody tr:nth-child(even):hover {
  background: var(--color-primary-highlight);
}
.spreadsheet-table td.negative { color: var(--color-error); }
.spreadsheet-table th.section-start,
.spreadsheet-table td.section-start {
  border-left: 2px solid var(--color-divider);
}
.spreadsheet-table td.positive { color: var(--color-success); }
.spreadsheet-table td.zero { color: var(--color-text-faint); }

/* Expanded spreadsheet — full viewport overlay */
.spreadsheet-expanded {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw !important;
  height: 100vh !important; height: 100dvh !important; /* v149.461 — iOS visible-viewport height; older browsers keep the vh line */
  z-index: 100;
  border-radius: 0;
  border: none;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  resize: none;
}
.spreadsheet-expanded .spreadsheet-toolbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  flex-shrink: 0;
}
.spreadsheet-expanded .spreadsheet-scroll,
.spreadsheet-expanded .budget-annual-scroll-wrapper {
  max-height: none;
  flex: 1;
  overflow: auto;
}
/* v149.386/387 — expanded view is for SEEING MORE at once: the overlay fills
   the whole viewport and cells are kept EXTRA-COMPACT (tighter/smaller than the
   inline view) so the maximum number of rows and columns fit on screen.
   v149.387 (Jahn #4): sizes reduced again and overlay chrome tightened. */
.spreadsheet-expanded .spreadsheet-table {
  font-size: 8.5px;
}
.spreadsheet-expanded .spreadsheet-table th {
  padding: 1px 3px;
  font-size: 8px;
}
.spreadsheet-expanded .spreadsheet-table td {
  padding: 0px 3px;
}
.spreadsheet-expanded .data-table {
  font-size: 8.5px;
}
.spreadsheet-expanded .data-table th {
  padding: 1px 4px;
  font-size: 8px;
}
.spreadsheet-expanded .data-table td {
  padding: 0px 4px;
  font-size: 8.5px;
}
/* Maximize usable table area: trim the overlay's own chrome/toolbar so the
   grid gets nearly the entire screen. */
.spreadsheet-expanded .spreadsheet-toolbar {
  padding: 6px 10px;
}
.spreadsheet-expanded .spreadsheet-scroll {
  padding: 0;
}
/* v149.387 (Jahn #4) — the dashboard spreadsheet has its own higher-specificity
   table rules (#dash-spreadsheet-view .spreadsheet-table*, 11px + 7px padding)
   that were overriding the generic .spreadsheet-expanded compaction, so Expand
   never actually shrank the dashboard grid. Re-assert the compact sizing with
   matching specificity so Expand shows MORE on every spreadsheet. */
#dash-spreadsheet-view .spreadsheet-card.spreadsheet-expanded .spreadsheet-table { font-size: 8.5px; }
#dash-spreadsheet-view .spreadsheet-card.spreadsheet-expanded .spreadsheet-table thead th { padding: 1px 4px; font-size: 8px; }
#dash-spreadsheet-view .spreadsheet-card.spreadsheet-expanded .ss-group-row .ss-g { padding: 2px 4px; font-size: 8px; }
#dash-spreadsheet-view .spreadsheet-card.spreadsheet-expanded .spreadsheet-table tbody td { padding: 0 4px; font-size: 8.5px; }
/* SE spreadsheet: reassert with view scope in case of future overrides. */
#view-pre-retirement #pre-spreadsheet-card.spreadsheet-expanded .spreadsheet-table { font-size: 8.5px; }
#view-pre-retirement #pre-spreadsheet-card.spreadsheet-expanded .spreadsheet-table th { padding: 1px 3px; font-size: 8px; }
#view-pre-retirement #pre-spreadsheet-card.spreadsheet-expanded .spreadsheet-table td { padding: 0 3px; }

.data-table td.negative { color: var(--color-error); }
.data-table td.positive { color: var(--color-success); }

/* Rate toggle */
.rate-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.rate-toggle-btn {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  border: none;
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.rate-toggle-btn:hover {
  background: var(--color-surface-hover);
}
.rate-toggle-btn.active {
  background: var(--color-primary);
  color: #fff;
}
.rate-panel {
  animation: fadeIn 200ms ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.rate-hint {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin: 0 0 var(--space-3) 0;
}
.rate-tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-faint);
}
.rate-tier:last-child {
  border-bottom: none;
}
.rate-tier label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
  min-width: 80px;
}
.input-sm {
  max-width: 140px;
  flex: 1;
}
.input-sm input {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  width: 100%;
}

/* ========== TAX CHECKBOX GROUP ========== */
.tax-checkbox-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
}
@media (max-width: 600px) {
  .tax-checkbox-group {
    grid-template-columns: 1fr;
  }
}
.tax-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: border-color 0.15s, background 0.15s;
}
.tax-checkbox-label:hover {
  border-color: var(--color-primary);
}
.tax-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.tax-checkbox-label input[type="checkbox"]:checked + span {
  font-weight: 500;
}
.tax-pct {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Capital Gains Options Sub-panel */
.capgains-options {
  grid-column: 1 / -1;
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-top: var(--space-1);
}
.capgains-option-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.capgains-option-row > .form-field {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
}
.capgains-option-row select,
.capgains-option-row .input-with-suffix {
  box-sizing: border-box;
  height: 38px;
}
.capgains-option-row .input-with-suffix input[type="number"] {
  box-sizing: border-box;
  height: 100%;
}
.capgains-option-row .input-with-suffix .input-suffix {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  align-items: center;
}
@media (max-width: 600px) {
  .capgains-option-row { flex-direction: column; }
}

/* ========== TAX METHOD TOGGLE ========== */
.tax-method-toggle {
  display: inline-flex;
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.tax-method-btn, .ltcg-method-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.tax-method-btn:hover, .ltcg-method-btn:hover {
  color: var(--color-text);
  background: var(--color-surface);
}
.tax-method-btn.active, .ltcg-method-btn.active {
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
}
.bracket-preview {
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 11px;
  line-height: 1.5;
}
.bracket-preview table {
  width: 100%;
  border-collapse: collapse;
}
.bracket-preview th {
  text-align: left;
  font-weight: 600;
  padding: 2px 8px 2px 0;
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bracket-preview td {
  padding: 1px 8px 1px 0;
  font-variant-numeric: tabular-nums;
}
.bracket-preview tr.active-bracket td {
  color: var(--color-accent);
  font-weight: 600;
}

/* ========== AUTH BUTTON & MODAL ========== */
.auth-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 180ms ease;
}
.auth-btn:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-primary);
}
.auth-btn.logged-in {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.auth-modal {
  position: relative;
  width: 90%;
  max-width: 400px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  margin: 32px auto;
}
.auth-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: none;
  border: none;
  font-size: 24px;
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1;
  padding: var(--space-1);
}
.auth-close:hover { color: var(--color-text); }
.auth-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.auth-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}
.auth-field {
  margin-bottom: var(--space-4);
}
.auth-field label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.auth-field input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: 'Inter', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color 180ms ease;
  box-sizing: border-box;
}
.auth-field input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(43, 181, 178, 0.15);
}
.auth-error {
  color: var(--color-error);
  font-size: var(--text-xs);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(220, 50, 50, 0.08);
  border-radius: var(--radius-sm);
}
.auth-submit {
  width: 100%;
  margin-top: var(--space-2);
}
.auth-switch {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}
.auth-switch a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.auth-switch a:hover { text-decoration: underline; }

/* Auth: Social Sign-In Buttons */
.auth-social-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.auth-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: background 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  position: relative;
}
.auth-google-btn {
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  color: var(--color-text);
}
.auth-google-btn:hover {
  background: oklch(from var(--color-text) l c h / 0.04);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.auth-apple-btn {
  background: #000;
  border: 1px solid #000;
  color: #fff;
}
.auth-apple-btn:hover:not(:disabled) {
  background: #222;
}
.auth-apple-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.auth-coming-soon {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.2);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: var(--space-1);
}

/* Auth: Divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-divider);
}
.auth-divider span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Auth: Select full-width match */
.auth-select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: 'Inter', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  box-sizing: border-box;
  transition: border-color 180ms ease;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.auth-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(43, 181, 178, 0.15);
}

/* Auth: Sign-in method badge */
.auth-signin-method {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: calc(-1 * var(--space-2));
  margin-bottom: var(--space-2);
}
.auth-info {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  line-height: 1.5;
}

/* Password visibility toggle */
.pw-field-wrap {
  position: relative;
}
.pw-field-wrap input {
  padding-right: 38px;
}
.pw-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 150ms ease;
}
.pw-toggle:hover {
  color: var(--color-text);
}

/* Auth: compact for short viewports */
@media (max-height: 800px) {
  .auth-modal {
    padding: var(--space-5) var(--space-5);
    margin: 16px auto;
  }
  .auth-title { font-size: var(--text-base); margin-bottom: 2px; }
  .auth-subtitle { font-size: var(--text-xs); margin-bottom: var(--space-3); }
  .auth-field { margin-bottom: var(--space-2); }
  .auth-field input,
  .auth-select { padding: 6px var(--space-2); font-size: var(--text-xs); }
  .auth-social-btn { padding: 6px var(--space-2); font-size: var(--text-xs); }
  .auth-social-buttons { gap: 4px; margin-bottom: var(--space-2); }
  .auth-divider { margin: var(--space-2) 0; }
  .auth-submit { padding: 8px; font-size: var(--text-sm); }
  .auth-switch { font-size: var(--text-xs); }
}

/* ========== BUDGET TOOL ========== */
.budget-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 1024px) {
  .budget-layout { grid-template-columns: 1fr; }
}

.budget-forms {
  min-width: 0;
}

.budget-chart-panel {
  position: sticky;
  top: calc(var(--space-16) + var(--space-4));
}

.budget-donut-wrapper {
  height: 360px !important;
}

/* Budget section rows container */
.budget-section {
  padding: var(--space-2) var(--space-5) 0;
}

/* Each budget row: label + input + optional remove */
.budget-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.04);
}
.budget-row:last-of-type {
  border-bottom: none;
}
.budget-row-label {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  min-width: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background 0.15s ease;
}
.budget-row-label:hover {
  background: oklch(from var(--color-primary) l c h / 0.08);
}
.budget-row .input-with-prefix {
  width: 160px;
  flex-shrink: 0;
}
.budget-row .input-with-prefix input {
  width: 100%;
  font-variant-numeric: tabular-nums;
}

/* Budget row action buttons (delete) */
.budget-row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* Drag handle */
.budget-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 28px;
  flex-shrink: 0;
  cursor: grab;
  color: var(--color-text-muted);
  opacity: 0.7;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
  user-select: none;
  touch-action: none;
  border-radius: 4px;
  background: oklch(from var(--color-primary) l c h / 0.06);
}
.budget-drag-handle:hover {
  opacity: 1;
  color: var(--color-text-default);
  background: oklch(from var(--color-primary) l c h / 0.12);
}
.budget-drag-handle:active {
  cursor: grabbing;
}
.budget-row-dragging {
  opacity: 0.35;
  background: oklch(from var(--color-primary) l c h / 0.06);
  border-radius: var(--radius-sm);
}
.budget-row-drop-above {
  box-shadow: inset 0 2px 0 0 var(--color-primary);
}
.budget-row-drop-below {
  box-shadow: inset 0 -2px 0 0 var(--color-primary);
}
.budget-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--color-text-faint);
  cursor: pointer;
  transition: all var(--transition-interactive);
  padding: 0;
}
.budget-action-btn:hover {
  background: var(--color-error-highlight);
  color: var(--color-error);
}
.budget-toggle-btn:hover {
  background: oklch(from var(--color-accent) l c h / 0.1);
  color: var(--color-accent);
}
.budget-row-disabled {
  opacity: 0.4;
  position: relative;
}
.budget-row-disabled .budget-input {
  text-decoration: line-through;
  color: var(--color-text-faint);
}
.budget-row-disabled .budget-row-label {
  text-decoration: line-through;
  color: var(--color-text-faint);
}
.budget-row-disabled .budget-toggle-btn {
  opacity: 1 !important;
  color: var(--color-text-muted);
}

/* Inline label editing input */
.budget-edit-input {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  outline: none;
}

/* Legacy remove button (custom rows that still use old pattern) */
.budget-remove-btn {
  display: none;
}

/* Total row at bottom of each section */
.budget-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0 var(--space-4);
  border-top: 2px solid var(--color-divider);
  margin-top: var(--space-2);
}
.budget-total-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.budget-total-value {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-text);
}

/* Add Category bar below form-section */
.budget-add-bar {
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.budget-add-inline {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.budget-add-name-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.18s;
}
.budget-add-name-input:focus {
  border-color: var(--color-primary);
  border-style: solid;
}
.budget-add-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-primary-highlight);
  border: 1px dashed var(--color-primary);
  cursor: pointer;
  transition: all var(--transition-interactive);
}
.budget-add-btn:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-style: solid;
}

/* Surplus / deficit color coding */
.surplus { color: var(--color-success) !important; }
.deficit { color: var(--color-error) !important; }

/* Outline button variant (hero CTA) */
.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-outline:hover {
  background: var(--color-surface-offset);
  border-color: var(--color-text-muted);
}

/* ========== SAVED SCENARIOS ========== */
.scenario-save-bar {
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--color-divider);
}
.scenario-save-inline {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.scenario-name-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.18s;
  min-width: 0;
}
.scenario-name-input:focus {
  border-color: var(--color-primary);
  border-style: solid;
}
.scenario-name-input::placeholder {
  color: var(--color-text-muted);
}
.scenario-count {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  min-height: 1em;
}
.scenario-hint {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}
.saved-scenarios {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.saved-scenarios-title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.scenario-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.scenario-card {
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  transition: border-color 0.18s;
}
.scenario-card:hover {
  border-color: var(--color-primary);
}
.scenario-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.scenario-card-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.scenario-card-date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.scenario-card-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.scenario-card-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.scenario-card-kpi-label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
.scenario-card-kpi-value {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-text);
}
.scenario-card-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.scenario-delete-btn {
  color: var(--color-text-muted);
}
.scenario-delete-btn:hover {
  color: var(--color-error);
  background: color-mix(in oklch, var(--color-error) 10%, transparent);
}

/* ========== ADVISOR BUTTON ========== */
.advisor-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all 180ms ease;
  white-space: nowrap;
}
.advisor-btn:hover {
  background: color-mix(in oklch, var(--color-primary) 16%, transparent);
  transform: translateY(-1px);
}
.advisor-btn svg { flex-shrink: 0; }

/* ========== ADVISOR PANEL ========== */
.advisor-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background: oklch(from var(--color-text) l c h / 0.15);
  animation: advisorFadeIn 200ms ease;
}
@keyframes advisorFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.advisor-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(440px, 92vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  box-shadow: -4px 0 24px oklch(from var(--color-text) l c h / 0.1);
  animation: advisorSlideIn 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes advisorSlideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.advisor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.08);
  flex-shrink: 0;
}
.advisor-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
}
.advisor-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.advisor-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 180ms ease;
}
.advisor-close:hover {
  background: oklch(from var(--color-text) l c h / 0.08);
  color: var(--color-text);
}
.advisor-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: color-mix(in oklch, var(--color-warning) 10%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--color-warning) 20%, transparent);
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.advisor-disclaimer svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-warning);
}
.advisor-search-wrap {
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-2);
  flex-shrink: 0;
}
.advisor-search-icon {
  position: absolute;
  left: calc(var(--space-4) + 10px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}
.advisor-search {
  width: 100%;
  padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 22px);
  border: 1.5px solid oklch(from var(--color-text) l c h / 0.12);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color 180ms ease;
  outline: none;
}
.advisor-search:focus {
  border-color: var(--color-primary);
}
.advisor-search-clear {
  position: absolute;
  right: calc(var(--space-4) + 8px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: oklch(from var(--color-text) l c h / 0.08);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 180ms ease;
}
.advisor-search-clear:hover {
  background: oklch(from var(--color-text) l c h / 0.14);
}
.advisor-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) var(--space-4) var(--space-4);
  overscroll-behavior: contain;
}
.advisor-category {
  margin-bottom: var(--space-3);
}
.advisor-category-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-2) 0 var(--space-1);
  border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.06);
  margin-bottom: var(--space-1);
}
.advisor-category-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.advisor-item {
  border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.04);
}
.advisor-item:last-child {
  border-bottom: none;
}
.advisor-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-2) var(--space-1);
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: all 180ms ease;
  line-height: 1.4;
}
.advisor-question:hover {
  color: var(--color-primary);
  background: color-mix(in oklch, var(--color-primary) 4%, transparent);
  border-radius: var(--radius-sm);
}
.advisor-question svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  transition: transform 200ms ease;
}
.advisor-item.open .advisor-question svg {
  transform: rotate(180deg);
}
.advisor-answer {
  display: none;
  padding: var(--space-1) var(--space-1) var(--space-3) var(--space-1);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--color-text-secondary);
}
.advisor-item.open .advisor-answer {
  display: block;
}
.advisor-answer strong {
  color: var(--color-text);
  font-weight: 600;
}
.advisor-answer ul {
  margin: var(--space-1) 0;
  padding-left: var(--space-4);
}
.advisor-answer li {
  margin-bottom: 4px;
}
.advisor-answer .advisor-tip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in oklch, var(--color-success) 8%, transparent);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-success);
  font-size: 12px;
}
.advisor-answer .advisor-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in oklch, var(--color-warning) 8%, transparent);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-warning);
  font-size: 12px;
}
.advisor-no-results {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.advisor-no-results svg {
  color: oklch(from var(--color-text) l c h / 0.15);
  margin-bottom: var(--space-2);
}

@media (max-width: 480px) {
  .advisor-btn-text { display: none; }
  .advisor-panel { width: 100vw; }
}

/* ========== BUDGET NET ROW ========== */
.budget-net-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
  background: var(--color-surface);
  border: 1.5px solid oklch(from var(--color-text) l c h / 0.1);
  border-radius: var(--radius-md);
}
.budget-net-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.budget-net-value {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-success);
}
.budget-net-value.deficit {
  color: var(--color-error);
}

/* ========== ANNUAL BUDGET SPREADSHEET ========== */
.budget-annual-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.budget-annual-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
  line-height: 1.2;
}

.budget-annual-table th,
.budget-annual-table td {
  padding: 3px 6px;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: middle;
}

.budget-annual-table thead th {
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 2px solid var(--color-divider);
}

/* Sticky category column */
.budget-annual-table th.ba-col-category,
.budget-annual-table td.ba-col-category {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--color-surface);
  min-width: 120px;
  max-width: 150px;
  font-weight: 500;
  color: var(--color-text);
  border-right: 2px solid var(--color-divider);
}
.budget-annual-table thead th.ba-col-category {
  z-index: 4;
  background: var(--color-surface-offset);
}

/* Frequency column */
.ba-col-freq { min-width: 80px; }
.ba-freq-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ba-freq-select {
  width: 100px;
  padding: 2px 4px;
  font-size: 11px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}
.ba-freq-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px oklch(from var(--color-primary) l c h / 0.15);
}

/* Start month picker (Quarterly/Semi/Annual) */
.ba-start-month {
  width: 100px;
  padding: 2px 4px;
  font-size: 10px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
}
.ba-start-month:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Custom month picker */
.ba-month-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 200px;
}
.ba-month-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-secondary);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s ease;
  user-select: none;
}
.ba-month-chip:hover {
  background: oklch(from var(--color-primary) l c h / 0.08);
}
.ba-month-cb {
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.ba-month-chip:has(.ba-month-cb:checked) {
  color: var(--color-primary);
  font-weight: 600;
}

/* Month columns */
.ba-col-month { min-width: 60px; text-align: right; }
.ba-month-input {
  width: 58px;
  padding: 2px 4px;
  font-size: 11px;
  font-family: 'Inter', system-ui, sans-serif;
  text-align: right;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  -moz-appearance: textfield;
  transition: border-color 180ms ease;
}
.ba-month-input::-webkit-outer-spin-button,
.ba-month-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ba-month-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px oklch(from var(--color-primary) l c h / 0.15);
}

/* Total column */
.ba-col-total {
  min-width: 90px;
  text-align: right;
  font-weight: 600;
  color: var(--color-text);
}

/* Section header rows */
.ba-section-header td {
  background: var(--color-surface-offset) !important;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-2);
  border-bottom: 2px solid var(--color-divider);
}
.ba-section-header td.ba-col-category {
  background: var(--color-surface-offset) !important;
}
.ba-section-header.ba-income-header td {
  color: var(--color-success);
  border-bottom-color: oklch(from var(--color-success) l c h / 0.3);
}
.ba-section-header.ba-expense-header td {
  color: var(--color-error);
  border-bottom-color: oklch(from var(--color-error) l c h / 0.3);
}

/* Alternating row colors */
.ba-data-row:nth-child(even) td {
  background: oklch(from var(--color-surface-offset) l c h / 0.5);
}
.ba-data-row:nth-child(even) td.ba-col-category {
  background: oklch(from var(--color-surface-offset) l c h / 0.5);
}
.ba-data-row:hover td {
  background: oklch(from var(--color-primary) l c h / 0.06);
}
.ba-data-row:hover td.ba-col-category {
  background: oklch(from var(--color-primary) l c h / 0.06);
}

/* Totals rows */
.ba-totals-row td {
  background: var(--color-surface-offset) !important;
  font-weight: 600;
  font-size: 12px;
  border-top: 2px solid var(--color-divider);
  color: var(--color-text);
}
.ba-totals-row td.ba-col-category {
  background: var(--color-surface-offset) !important;
}

/* Grand summary row */
.ba-grand-row td {
  background: var(--color-surface-offset) !important;
  font-weight: 700;
  font-size: 12px;
  border-top: 3px double var(--color-divider);
  color: var(--color-text);
}
.ba-grand-row td.ba-col-category {
  background: var(--color-surface-offset) !important;
}
.ba-grand-row .ba-surplus { color: var(--color-success); }
.ba-grand-row .ba-deficit { color: var(--color-error); }

/* Responsive adjustments */
@media (max-width: 768px) {
  .budget-annual-table th.ba-col-category,
  .budget-annual-table td.ba-col-category {
    min-width: 120px;
    max-width: 140px;
    font-size: 11px;
  }
  .ba-month-input { width: 62px; font-size: 11px; }
  .ba-freq-select { width: 88px; font-size: 10px; }
}

/* ===== Active Scenario Indicator & Card Highlight ===== */
.active-scenario-indicator {
  font-size: 13px;
  font-weight: 600;
  color: #2e7d32;
  margin: 4px 0 0;
  padding: 4px 10px;
  background: #e8f5e9;
  border-radius: 6px;
  display: inline-block;
}
.scenario-card-active {
  border: 2px solid #43a047;
  box-shadow: 0 0 0 3px rgba(67, 160, 71, 0.15);
  position: relative;
}
.scenario-card-active::after {
  content: 'Active';
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #43a047;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* ===== PLANNING TOOLS SECTION ===== */
.planning-tools-section {
  margin-top: var(--space-6, 24px);
  padding-top: var(--space-4, 16px);
  border-top: 3px solid #2bb5b2;
}
.planning-tools-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary, #666);
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.planning-tools-heading svg { opacity: 0.6; }

/* Tool Card Accordion */
.planning-tool-card {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--color-bg, #fff);
  transition: box-shadow 0.18s ease;
}
.planning-tool-card[open] {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.planning-tool-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #1e1e1e);
}
.planning-tool-toggle::-webkit-details-marker { display: none; }
.planning-tool-toggle::marker { content: ''; }
.planning-tool-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}
.planning-tool-label { flex: 1; }
.planning-tool-badge {
  font-size: 11px;
  font-weight: 700;
  color: #2bb5b2;
  background: rgba(43,181,178,0.1);
  padding: 2px 8px;
  border-radius: 10px;
  display: none;
}
.planning-tool-badge:not(:empty) { display: inline-block; }
.planning-tool-chevron {
  transition: transform 0.2s ease;
  opacity: 0.4;
  flex-shrink: 0;
}
.planning-tool-card[open] .planning-tool-chevron {
  transform: rotate(180deg);
}
.planning-tool-body {
  padding: 0 14px 14px;
}
.planning-tool-desc {
  font-size: 13px;
  color: var(--color-text-secondary, #777);
  margin: 0 0 12px 0;
  line-height: 1.5;
}

/* Milestone list */
.milestone-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.milestone-empty {
  font-size: 13px;
  color: #aaa;
  text-align: center;
  padding: 16px 0;
}
.milestone-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,0.02);
}
.milestone-row.milestone-reached {
  background: rgba(43,181,178,0.06);
}
.milestone-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
}
.milestone-check.done {
  background: #2bb5b2;
  color: #fff;
}
.milestone-check.pending {
  background: rgba(0,0,0,0.06);
  color: #bbb;
}
.milestone-info { flex: 1; }
.milestone-target {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text, #1e1e1e);
}
.milestone-year {
  font-size: 12px;
  color: var(--color-text-secondary, #888);
}
.milestone-value {
  font-size: 13px;
  font-weight: 600;
  color: #2bb5b2;
  text-align: right;
}

/* Match Optimizer Results */
.match-inputs { margin-bottom: 14px; }
.match-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.match-result-card {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,0.02);
}
.match-result-card.highlight {
  background: rgba(43,181,178,0.06);
  border: 1px solid rgba(43,181,178,0.15);
}
.match-result-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary, #888);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}
.match-result-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text, #1e1e1e);
}
.match-result-value.accent { color: #2bb5b2; }
.match-result-value.warning { color: #e65100; }
.match-tip {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(43,181,178,0.06);
  font-size: 13px;
  color: var(--color-text, #333);
  line-height: 1.5;
}
.match-tip strong { color: #2bb5b2; }

/* Start Now vs Wait Results */
.start-vs-wait-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.start-vs-wait-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary, #888);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.start-vs-wait-table td {
  padding: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.start-vs-wait-table tr:first-child td {
  font-weight: 600;
  background: rgba(43,181,178,0.04);
}
.start-vs-wait-table .cost-cell {
  color: #c62828;
  font-weight: 600;
}
.start-vs-wait-table .now-label {
  color: #2bb5b2;
  font-weight: 600;
}
.cost-summary {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(198,40,40,0.05);
  font-size: 13px;
  color: #c62828;
  line-height: 1.5;
}

/* Carry-over toggle checkbox */
.carry-over-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-top: 8px;
  background: linear-gradient(135deg, #e0f7f5 0%, #e8f5e9 100%);
  border: 1px solid #b2dfdb;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #2e7d6f;
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s;
  user-select: none;
}
.carry-over-toggle:hover {
  background: linear-gradient(135deg, #d0f0ed 0%, #dcedc8 100%);
  border-color: #80cbc4;
}
.carry-over-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #2bb5b2;
  cursor: pointer;
  flex-shrink: 0;
}
.carry-over-toggle span {
  line-height: 1.3;
}

/* Catch-Up Contribution Planner */
.catchup-limits-table {
  background: rgba(43, 181, 178, 0.06);
  border: 1px solid rgba(43, 181, 178, 0.15);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.catchup-limits-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2bb5b2;
  margin-bottom: 6px;
}
.catchup-limits-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
  gap: 8px;
}
.catchup-limits-label {
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}
.catchup-limits-detail {
  color: #6b7280;
  text-align: right;
}
.catchup-super-note {
  font-size: 12px;
  color: #d97706;
  font-weight: 500;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(43, 181, 178, 0.12);
}
.catchup-note {
  background: rgba(249, 196, 42, 0.1);
  border: 1px solid rgba(249, 196, 42, 0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #92400e;
  margin-bottom: 12px;
}
.catchup-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.catchup-kpi {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}
.catchup-kpi-value {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}
.catchup-kpi-label {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
}
.catchup-kpi-highlight {
  background: rgba(43, 181, 178, 0.08);
  border-color: rgba(43, 181, 178, 0.25);
}
.catchup-kpi-highlight .catchup-kpi-value {
  color: #2bb5b2;
}
.catchup-detail summary {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  padding: 6px 0;
}
.catchup-detail summary:hover {
  color: #2bb5b2;
}
.catchup-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
  margin-top: 6px;
}
.catchup-table th {
  background: #f3f4f6;
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  color: #374151;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid #e5e7eb;
}
.catchup-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
}
.catchup-super-row {
  background: rgba(249, 196, 42, 0.06);
}
.rmd-table-scroll {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.rmd-table-scroll .catchup-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* RMD Planner on results page */
.rmd-planner-card {
  cursor: default;
  border: 1px solid var(--color-border, #e5e7eb);
}
.rmd-planner-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.rmd-planner-summary::-webkit-details-marker { display: none; }
.rmd-planner-summary-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.rmd-planner-summary-left svg:first-child {
  color: var(--color-accent, #2bb5b2);
  flex-shrink: 0;
}
.rmd-planner-chevron {
  transition: transform 0.2s ease;
  color: var(--color-text-muted);
}
.rmd-planner-card[open] .rmd-planner-chevron {
  transform: rotate(180deg);
}
.rmd-planner-body {
  padding: 0 var(--space-5) var(--space-5);
  border-top: 1px solid var(--color-border, #e5e7eb);
  padding-top: var(--space-4);
}

/* Roth Conversion Explorer */
.roth-strategy-btns {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.roth-strategy-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e5e7eb);
  color: var(--color-text);
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.roth-strategy-btn:hover {
  border-color: var(--color-accent);
  background: oklch(from var(--color-accent) l c h / 0.06);
}
.roth-strategy-btn.active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.roth-ex-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.roth-ex-kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
}
.roth-ex-kpi-label {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
  font-weight: 500;
}
.roth-ex-kpi-value {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-display);
}
.roth-ex-kpi-sub {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 3px;
}
.roth-ex-kpi:nth-child(1) .roth-ex-kpi-value { color: var(--color-success, #22c55e); }
.roth-ex-kpi:nth-child(2) .roth-ex-kpi-value { color: var(--color-accent, #2bb5b2); }
.roth-ex-kpi:nth-child(3) .roth-ex-kpi-value { color: var(--color-primary, #3b82f6); }
.roth-ex-kpi:nth-child(4) .roth-ex-kpi-value { color: var(--color-text); }
.roth-ex-table { font-size: 12px; }
.roth-ex-table th { font-size: 11px; white-space: nowrap; }
.roth-ex-table td { padding: 5px 8px; white-space: nowrap; }
.roth-ex-irmaa-flag {
  display: inline-block;
  background: oklch(from var(--color-warning, #f59e0b) l c h / 0.15);
  color: var(--color-warning, #f59e0b);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}
.roth-ex-irmaa-alert {
  background: oklch(from var(--color-warning, #f59e0b) l c h / 0.08);
  border: 1px solid oklch(from var(--color-warning, #f59e0b) l c h / 0.2);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--color-text);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.roth-ex-irmaa-alert svg {
  color: var(--color-warning, #f59e0b);
  flex-shrink: 0;
  margin-top: 1px;
}
@media (max-width: 640px) {
  .roth-ex-kpis { grid-template-columns: repeat(2, 1fr); }
  .roth-ex-kpi-value { font-size: 16px; }
  .roth-strategy-btns { flex-direction: column; }
}

/* Goal Simulator Quick Adjust Sliders */
.sim-slider-panel {
  background: linear-gradient(135deg, oklch(0.97 0.01 180), oklch(0.97 0.01 220));
  border: 1px solid oklch(0.90 0.03 180);
  border-radius: 12px;
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.sim-slider-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.sim-slider-header svg {
  color: #2bb5b2;
}
.sim-slider-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-6);
}
.sim-slider-field label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.sim-sl-val {
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--text-sm);
}
.sim-slider-field input[type="range"] {
  width: 100%;
  margin: 0;
}
@media (max-width: 640px) {
  .sim-slider-grid {
    grid-template-columns: 1fr;
  }
}

/* Spending & Withdrawal Layout */
.spending-section {
  padding: var(--space-4) var(--space-5);
  padding-bottom: 0;
}
.withdrawal-row {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) {
  .withdrawal-row { grid-template-columns: 1fr; }
}

/* Dynamic Spending Phases */
.spend-phase-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.spend-phase-range {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex: 0 0 165px; /* fixed width so all rows align regardless of end-year input */
}
.spend-phase-end {
  width: 52px;
  padding: 4px 6px;
  font-size: var(--text-xs);
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: 6px;
  text-align: center;
  background: #fff;
}
.spend-phase-row .input-with-prefix {
  flex: 1;
  min-width: 0;
  max-width: none;
}
.spend-phase-row .input-sm {
  flex: 1;
  min-width: 0;
  max-width: none;
}
.spend-phase-row .input-with-prefix input {
  min-width: 50px;
  width: 100%;
}
.spend-phase-remainder {
  font-style: italic;
}
.spend-phase-remove {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}
.spend-phase-remove:hover {
  color: var(--color-error, #ef4444);
  background: oklch(from var(--color-error, #ef4444) l c h / 0.08);
}

/* ========== FIELD HELP TOOLTIPS ========== */
.field-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border, #d0d5dd);
  background: transparent;
  color: var(--color-text-muted, #6b7280);
  cursor: pointer;
  padding: 0;
  margin-left: 5px;
  vertical-align: middle;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-body, sans-serif);
  line-height: 1;
  transition: all 0.15s ease;
  position: relative;
  flex-shrink: 0;
}
.field-help-btn:hover {
  border-color: var(--color-accent, #2a9d8f);
  color: var(--color-accent, #2a9d8f);
  background: oklch(from var(--color-accent, #2a9d8f) l c h / 0.08);
}
.field-help-btn.active {
  border-color: var(--color-accent, #2a9d8f);
  color: #fff;
  background: var(--color-accent, #2a9d8f);
}
.field-help-popover {
  display: none;
  position: fixed;
  z-index: 1000;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #d0d5dd);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text, #1a1a1a);
  max-width: 340px;
  min-width: 220px;
  width: max-content;
  word-wrap: break-word;
  animation: fieldHelpFadeIn 0.15s ease;
}
.field-help-popover.show { display: block; }
@keyframes fieldHelpFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.field-help-popover strong {
  color: var(--color-text, #1a1a1a);
  font-weight: 600;
}
.field-help-popover .fh-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--color-accent, #2a9d8f);
}
.field-help-popover .fh-body {
  font-size: 12.5px;
  color: var(--color-text-muted, #6b7280);
}
.field-help-popover .fh-advisor-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--color-accent, #2a9d8f);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ========== HEALTHCARE SUMMARY CARD ========== */
.healthcare-summary-card {
  background: color-mix(in oklch, #00897b 8%, var(--color-surface));
  border: 1px solid color-mix(in oklch, #00897b 25%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.healthcare-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.healthcare-summary-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.healthcare-summary-value {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  color: #00897b;
}
.healthcare-irmaa-warning {
  font-size: var(--text-xs);
  color: #e65100;
  background: color-mix(in oklch, #ff9800 12%, transparent);
  border: 1px solid color-mix(in oklch, #ff9800 30%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
}

/* ========== SCENARIO COMPARISON OVERLAY ========== */
#scenario-compare-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  overflow-y: auto;
}
.scenario-compare-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  max-width: 960px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}
.scenario-compare-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-divider);
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 1;
}
.scenario-compare-header h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.scenario-compare-body {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.scenario-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.scenario-compare-table thead tr {
  background: var(--color-surface-offset);
}
.scenario-compare-table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-divider);
}
.scenario-compare-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  font-variant-numeric: tabular-nums lining-nums;
}
.scenario-compare-table td.scenario-compare-kpi-label {
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.scenario-compare-table tbody tr:nth-child(even) {
  background: var(--color-surface-offset);
}
.scenario-compare-best {
  background: #e8f5e9 !important;
  color: #1b5e20;
  font-weight: 600;
}
.scenario-compare-worst {
  background: #fff8e1 !important;
  color: #e65100;
}
.scenario-compare-chart-wrap {
  height: 260px;
  position: relative;
}
.scenario-compare-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}
.scenario-compare-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.scenario-compare-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.scenario-compare-label input[type="checkbox"] {
  cursor: pointer;
}

/* Dark mode adjustments for comparison */
@media (prefers-color-scheme: dark) {
  .scenario-compare-best {
    background: color-mix(in oklch, #4caf50 18%, var(--color-surface)) !important;
    color: #a5d6a7;
  }
  .scenario-compare-worst {
    background: color-mix(in oklch, #ff9800 15%, var(--color-surface)) !important;
    color: #ffcc80;
  }
  .healthcare-summary-value {
    color: #4db6ac;
  }
  .healthcare-summary-card {
    border-color: color-mix(in oklch, #4db6ac 30%, transparent);
  }
}

/* Mobile: horizontal scroll for comparison table */
@media (max-width: 600px) {
  .scenario-compare-body {
    overflow-x: auto;
    padding: var(--space-3);
  }
  .scenario-compare-table {
    min-width: 480px;
  }
}

/* ========== STRATEGY COMPARISON STEPS ========== */
.strat-compare-step {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  transition: opacity 0.3s;
}
.strat-compare-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.strat-compare-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: oklch(0.55 0.15 250);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.strat-compare-step-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
}
.strat-compare-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.strat-compare-pick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.strat-compare-pick-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: var(--color-bg);
  border-radius: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.strat-compare-pick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-bg);
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.strat-compare-pick-item:hover {
  background: var(--color-surface-offset, var(--color-bg));
}
.strat-compare-pick-item.selected {
  border-color: oklch(0.55 0.15 250);
  background: oklch(0.55 0.15 250 / 0.06);
}
.strat-compare-pick-item .pick-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--color-divider);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.strat-compare-pick-item.selected .pick-checkbox {
  background: oklch(0.55 0.15 250);
  border-color: oklch(0.55 0.15 250);
}
.strat-compare-pick-item .pick-checkbox svg {
  opacity: 0;
  transition: opacity 0.15s;
}
.strat-compare-pick-item.selected .pick-checkbox svg {
  opacity: 1;
}
.strat-compare-pick-info {
  flex: 1;
  min-width: 0;
}
.strat-compare-pick-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text);
}
.strat-compare-pick-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px;
}
.strat-compare-pick-tag {
  font-size: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--color-text-muted);
}
.strat-compare-pick-badge {
  font-size: 10px;
  background: oklch(0.55 0.15 250 / 0.12);
  color: oklch(0.45 0.15 250);
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 600;
}
.strat-compare-snapshot-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 4px;
  border-top: 1px solid var(--color-divider);
}
[data-theme="dark"] .strat-compare-pick-item.selected {
  background: oklch(0.55 0.15 250 / 0.12);
}
[data-theme="dark"] .strat-compare-pick-badge {
  background: oklch(0.55 0.15 250 / 0.2);
  color: oklch(0.70 0.15 250);
}

/* ========== TOAST NOTIFICATIONS ========== */
.toast-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 24px oklch(from var(--color-text) l c h / 0.15);
  background: var(--color-surface);
  border: 1px solid oklch(from var(--color-text) l c h / 0.1);
  max-width: 380px;
  font-size: var(--text-sm);
  line-height: 1.5;
  animation: toastIn 0.3s ease-out;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.toast-exiting {
  opacity: 0;
  transform: translateX(20px);
}
.toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.toast-success .toast-icon { color: var(--color-success); }
.toast-error .toast-icon { color: var(--color-error); }
.toast-warning .toast-icon { color: #e8a735; }
.toast-info .toast-icon { color: var(--color-primary); }
.toast-body {
  flex: 1;
  color: var(--color-text);
}
.toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0;
  line-height: 1;
}
.toast-close:hover { color: var(--color-text); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 640px) {
  .toast-container {
    top: auto;
    bottom: var(--space-4);
    right: var(--space-3);
    left: var(--space-3);
  }
  .toast { max-width: 100%; }
}

/* ========== SUBSCRIPTION BANNER ========== */
.sub-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  text-align: center;
  animation: bannerSlide 0.3s ease-out;
}
.sub-banner.sub-banner-grace {
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
  color: #7a4a00;
  border-bottom: 1px solid #e8a735;
}
.sub-banner.sub-banner-expired {
  background: linear-gradient(135deg, #ffebee, #ffcdd2);
  color: #8b1a1a;
  border-bottom: 1px solid #ef5350;
}
/* v149.464 — info style for the email-verification banner. .sub-banner is an
   abstract base (no background); every concrete banner must carry a modifier
   that gives it one — the verify banner previously carried none and rendered
   TRANSPARENT over the nav. */
.sub-banner.sub-banner-info {
  background: linear-gradient(135deg, #e6f0fb, #d5e6f8);
  color: #1d4d7d;
  border-bottom: 1px solid #7fadd6;
}
.sub-banner-content {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap; /* v149.464 — long copy + CTA wrap; measured offsets absorb the extra height */
  justify-content: center;
  gap: var(--space-2);
}
.sub-banner-close {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
}
.sub-banner-close:hover { opacity: 1; }
@keyframes bannerSlide {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* Body offset when a fixed top banner is visible.
   v149.464 — SUPERSEDES the v149.457 (R2-MIN-02) mechanism, which was
   VACUOUS: its rules targeted .nav-header and .main-content — selectors
   matching NOTHING in the markup (the header is .app-header; the content
   wrapper carries main-content as an ID, not a class). Jahn's screenshot
   showed the consequence: a transparent verify banner painted over the nav.
   Two root fixes here:
   1. TARGETS EXIST: offsets act on body (flow position at scroll 0) and on
      .app-header's sticky `top` (its stuck position while scrolling).
   2. HEIGHT IS MEASURED, NOT ASSERTED: the old fixed 36px token broke the
      moment a banner wrapped on a narrow screen. _nmSyncBannerOffsets()
      (app.js) writes each banner's real offsetHeight into these two vars —
      a hidden banner contributes 0px — so one rule pair covers the
      one-banner and both-banners cases with no 2x matrix. */
:root { --nm-sub-banner-h: 0px; --nm-verify-banner-h: 0px; }
body.has-sub-banner,
body.has-verify-banner {
  padding-top: calc(var(--nm-sub-banner-h) + var(--nm-verify-banner-h));
}
body.has-sub-banner .app-header,
body.has-verify-banner .app-header {
  top: calc(var(--nm-sub-banner-h) + var(--nm-verify-banner-h));
}
/* The verify banner always sits below the subscription banner; when the
   subscription banner is hidden its var is 0px, so this is top: 0. */
#verify-banner {
  top: var(--nm-sub-banner-h);
}

/* ========== ACCOUNT SETTINGS ========== */
.account-section {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid oklch(from var(--color-text) l c h / 0.08);
}
.account-section-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.account-sub-card {
  background: oklch(from var(--color-primary) l c h / 0.06);
  border: 1px solid oklch(from var(--color-primary) l c h / 0.12);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.account-sub-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1) 0;
}
.account-sub-row + .account-sub-row {
  border-top: 1px solid oklch(from var(--color-text) l c h / 0.06);
}
.account-sub-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.account-sub-value {
  font-size: var(--text-sm);
  font-weight: 600;
}
.account-divider {
  margin: var(--space-5) 0;
  border-top: 1px solid oklch(from var(--color-text) l c h / 0.08);
}
.auth-success {
  color: var(--color-success);
  font-size: var(--text-xs);
  margin: var(--space-2) 0;
}

/* Plan selection cards in account panel */
.acct-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (max-width: 600px) {
  .acct-plans {
    grid-template-columns: 1fr;
  }
}
/* Widen auth modal when showing account panel (logged-in state) */
.auth-modal.auth-modal-wide {
  max-width: 560px;
}
.acct-plan-card {
  position: relative;
  border: 2px solid oklch(from var(--color-text) l c h / 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
.acct-plan-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 12px oklch(from var(--color-primary) l c h / 0.12);
}
.acct-plan-featured {
  border-color: var(--color-primary);
  background: oklch(from var(--color-primary) l c h / 0.04);
}
.acct-plan-badge {
  position: absolute;
  top: -10px;
  right: var(--space-3);
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}
.acct-plan-top {
  margin-bottom: var(--space-2);
}
.acct-plan-name {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}
.acct-plan-price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
}
.acct-plan-period {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-muted);
}
.acct-plan-btn {
  width: 100%;
  margin-top: var(--space-2);
}
.acct-plan-note {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: oklch(from var(--color-primary) l c h / 0.06);
  border-radius: var(--radius-sm);
}
.acct-plan-active {
  border-color: var(--color-success);
  background: oklch(from var(--color-success) l c h / 0.05);
}
.acct-plan-active .acct-plan-btn {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
  pointer-events: none;
}

/* ========== FEEDBACK WIDGET ========== */
.feedback-fab {
  position: fixed;
  bottom: var(--space-4);
  left: var(--space-4);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 1000;
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.feedback-fab:hover {
  background: var(--color-primary-hover);
  transform: scale(1.08);
  box-shadow: var(--shadow-lg);
}
.feedback-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 10001;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--space-4);
}
.feedback-panel {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
  border: 1px solid var(--color-divider);
}
.feedback-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-divider);
}
.feedback-header h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
}
.feedback-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  cursor: pointer;
  border: none;
  transition: background 150ms ease;
}
.feedback-close:hover {
  background: var(--color-surface-offset);
}
.feedback-body {
  padding: var(--space-5);
}
.feedback-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  line-height: 1.6;
}
.feedback-field {
  margin-bottom: var(--space-4);
}
.feedback-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: var(--space-1);
  color: var(--color-text);
}
.feedback-field select,
.feedback-field textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  background: var(--color-surface);
  color: var(--color-text);
  resize: vertical;
  transition: border-color 150ms ease;
}
.feedback-field select:focus,
.feedback-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}
.feedback-field textarea {
  min-height: 100px;
}
.feedback-error {
  font-size: 13px;
  color: var(--color-error);
  margin-bottom: var(--space-3);
}
.feedback-success {
  font-size: 13px;
  color: var(--color-success);
  margin-bottom: var(--space-3);
}

@media (max-width: 480px) {
  .feedback-overlay {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }
  .feedback-panel {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-width: 100%;
  }
}

/* ===================== PROFILE PAGE ===================== */
.profile-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.profile-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5ba3d9 0%, #4ecdc4 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
}
.profile-card-meta h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 2px 0;
}
.profile-member-since {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}
.profile-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.profile-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.profile-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.profile-field input,
.profile-field select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 150ms ease;
  box-sizing: border-box;
}
.profile-field input:focus,
.profile-field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}
.profile-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.profile-save-status {
  font-size: var(--text-sm);
  color: var(--color-success);
  transition: opacity 200ms ease;
}

/* Saved Data Dashboard */
.profile-dashboard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.profile-dash-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
}
.profile-dash-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5) 0;
}
.profile-slot-group {
  margin-bottom: var(--space-5);
}
.profile-slot-group:last-child {
  margin-bottom: 0;
}
.profile-slot-group-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.profile-slot-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.profile-slot-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.profile-slot-empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
  padding: var(--space-2) 0;
}
.profile-slot-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, opacity 200ms ease, transform 200ms ease;
}
.profile-slot-item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.profile-slot-item-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.profile-slot-item-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}
.profile-slot-item-arrow {
  font-size: 14px;
  color: var(--color-text-muted);
  transition: transform 150ms ease;
}
.profile-slot-item-info {
  flex: 1;
  min-width: 0;
}
.profile-slot-item-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.profile-slot-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
  padding: 0;
}
.profile-slot-delete:hover {
  background: #fde8e8;
  color: #c53030;
}
.dark-mode .profile-slot-delete:hover {
  background: rgba(197, 48, 48, 0.2);
  color: #fc8181;
}
.profile-slot-item:hover .profile-slot-item-arrow {
  transform: translateX(2px);
  color: var(--color-primary);
}
.profile-slot-confirm {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) 0 0 0;
  margin-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.profile-slot-confirm span {
  flex: 1;
}
.profile-slot-confirm-yes {
  padding: 4px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: #c53030;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease;
}
.profile-slot-confirm-yes:hover {
  background: #9b2c2c;
}
.profile-slot-confirm-no {
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease;
}
.profile-slot-confirm-no:hover {
  background: var(--color-surface);
}

/* Quick Links */
.profile-quick-links {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .profile-row {
    grid-template-columns: 1fr;
  }
  .profile-card {
    padding: var(--space-4);
  }
  .profile-dashboard {
    padding: var(--space-4);
  }
  .profile-avatar {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}

/* ========== SCENARIO ACTIVE BAR (Save / Save As / New) ========== */
.scenario-active-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.scenario-active-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  min-width: 0;
}
.scenario-active-name svg {
  flex-shrink: 0;
  color: var(--color-primary);
}
.scenario-active-name span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scenario-dirty-badge {
  font-size: 11px;
  font-weight: 500;
  color: oklch(0.65 0.15 65);
  background: oklch(0.95 0.05 65);
  padding: 1px 7px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
[data-theme="dark"] .scenario-dirty-badge {
  color: oklch(0.80 0.12 65);
  background: oklch(0.25 0.06 65);
}
.scenario-active-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .scenario-active-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .scenario-active-actions {
    justify-content: flex-end;
  }
}

/* ========== INVESTMENT STRATEGY PLANNER ========== */
.strat-waterfall {
  margin-top: var(--space-4);
}
.strat-waterfall-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: var(--space-3);
  color: var(--color-text);
}
.strat-bucket {
  margin-bottom: var(--space-4);
}
.strat-bucket-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.strat-bucket-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.strat-bucket-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
}
.strat-bucket-amount {
  margin-left: auto;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
  white-space: nowrap;
}
.strat-bucket-bar {
  height: 8px;
  background: var(--color-surface-alt);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}
.strat-bucket-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 400ms ease;
}
.strat-bucket-note {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Asset Allocation Bar */
.strat-alloc {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.strat-alloc-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: var(--space-3);
  color: var(--color-text);
}
.strat-alloc-bar {
  display: flex;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.strat-alloc-seg {
  transition: width 400ms ease;
  min-width: 2%;
}
.strat-alloc-legend {
  display: flex;
  gap: var(--space-4);
  font-size: 13px;
  color: var(--color-text-muted);
  flex-wrap: wrap;
}
.strat-leg-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.strat-alloc-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border-radius: 6px;
  line-height: 1.5;
}

/* ========== SCRATCHPAD ========== */
.scratchpad-fab {
  position: fixed;
  bottom: calc(var(--space-4) + 56px);
  left: var(--space-4);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: oklch(0.50 0.12 250);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 1000;
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.scratchpad-fab:hover {
  background: oklch(0.45 0.14 250);
  transform: scale(1.08);
  box-shadow: var(--shadow-lg);
}
.scratchpad-fab.active {
  background: oklch(0.42 0.14 250);
  box-shadow: 0 0 0 3px oklch(0.50 0.12 250 / 0.3);
}
.scratchpad-panel {
  position: fixed;
  right: -380px;
  top: 50%;
  transform: translateY(-50%);
  width: 340px;
  max-height: 70vh;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transition: right 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.scratchpad-panel.open {
  right: var(--space-4);
}
.scratchpad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-sm);
}
.scratchpad-textarea {
  flex: 1;
  min-height: 260px;
  padding: 14px 16px;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text);
  background: transparent;
}
.scratchpad-textarea::placeholder {
  color: var(--color-text-muted);
  font-style: italic;
}
.scratchpad-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--color-divider);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 600px) {
  .scratchpad-panel {
    width: calc(100vw - 32px);
    right: -100vw;
    max-height: 55vh;
  }
  .scratchpad-panel.open {
    right: 16px;
  }
}

/* ========== INSIGHTS ENGINE ========== */
.insights-panel {
  margin: var(--space-3) 0;
}
.insights-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.insights-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--color-text);
}
.insights-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--color-primary);
  color: white;
  font-size: 11px;
  font-weight: 600;
}
.insights-dismiss-all {
  background: none;
  border: none;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}
.insights-dismiss-all:hover {
  background: var(--color-surface-raised);
  color: var(--color-text);
}
.insights-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.insight-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: 12px;
  line-height: 1.45;
  transition: opacity 0.25s, transform 0.25s;
  position: relative;
}
.insight-card.insight-info {
  background: rgba(59, 130, 246, 0.08);
  border-left: 3px solid rgba(59, 130, 246, 0.5);
  color: var(--color-text);
}
.insight-card.insight-attention {
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid rgba(245, 158, 11, 0.6);
  color: var(--color-text);
}
.insight-card.insight-positive {
  background: rgba(34, 197, 94, 0.08);
  border-left: 3px solid rgba(34, 197, 94, 0.5);
  color: var(--color-text);
}
.insight-icon {
  flex-shrink: 0;
  margin-top: 1px;
}
.insight-card.insight-info .insight-icon { color: #3b82f6; }
.insight-card.insight-attention .insight-icon { color: #f59e0b; }
.insight-card.insight-positive .insight-icon { color: #22c55e; }
.insight-content {
  flex: 1;
}
.insight-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0 var(--space-1);
  opacity: 0.5;
  transition: opacity 0.15s;
}
.insight-dismiss:hover {
  opacity: 1;
}

/* Dark mode adjustments */
[data-theme="dark"] .insight-card.insight-info {
  background: rgba(59, 130, 246, 0.12);
}
[data-theme="dark"] .insight-card.insight-attention {
  background: rgba(245, 158, 11, 0.12);
}
[data-theme="dark"] .insight-card.insight-positive {
  background: rgba(34, 197, 94, 0.12);
}

@media (max-width: 640px) {
  .insight-card {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    gap: var(--space-2);
  }
}

/* ============================================================ */
/* v149.75 — INSIGHTS CAROUSEL                                  */
/* When the cards container has .insights-carousel, only the     */
/* card with .is-active is visible. Other cards are removed from */
/* layout via display:none so the panel's height = one card.     */
/* Arrow buttons + dot indicator live in .insights-carousel-ctl  */
/* in the panel header.                                          */
/* ============================================================ */
.insights-cards.insights-carousel {
  position: relative;
}
.insights-cards.insights-carousel .insight-card {
  display: none;
}
.insights-cards.insights-carousel .insight-card.is-active {
  display: flex;
  animation: v75-carousel-fade 0.18s ease-out;
}
@keyframes v75-carousel-fade {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .insights-cards.insights-carousel .insight-card.is-active { animation: none; }
}

/* Header carousel controls (prev / dots / next) */
.insights-carousel-ctl {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  margin-right: var(--space-3);
}
.insights-carousel-prev,
.insights-carousel-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.insights-carousel-prev:hover,
.insights-carousel-next:hover {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.insights-carousel-prev:focus-visible,
.insights-carousel-next:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.insights-carousel-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.insights-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-divider);
  transition: background 0.15s, transform 0.15s;
}
.insights-carousel-dot.is-active {
  background: var(--color-primary);
  transform: scale(1.25);
}

/* ============================================================ */
/* v149.76 — INSIGHTS PILL (Retirement Planner + Budget Tool)   */
/* Matches the Savings Estimator fun-fact-card visual exactly.   */
/* These rules add only the extras the renderer needs beyond the */
/* base .fun-fact-card style: an index counter inside the label, */
/* a compact actions row beneath, and a slight margin tweak.     */
/* ============================================================ */
.insights-panel .insights-pill {
  margin-bottom: var(--space-2);  /* tighter than the original fun-fact margin-bottom */
}
.insights-pill-index {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: oklch(0.40 0.10 180 / 0.12);
  color: oklch(0.40 0.10 180);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.insights-pill-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-right: var(--space-1);
}
.insights-pill-actions button {
  background: none;
  border: none;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}
.insights-pill-actions button:hover {
  background: var(--color-surface-raised);
  color: var(--color-text);
}
.insights-pill-actions button.insight-dismiss-current:hover {
  color: var(--color-warning);
}
[data-theme="dark"] .insights-panel .insights-pill {
  background: linear-gradient(135deg, oklch(0.28 0.06 160 / 0.55), oklch(0.26 0.07 210 / 0.55));
  border-color: oklch(0.45 0.06 180 / 0.6);
}
[data-theme="dark"] .insights-pill-index {
  background: oklch(0.70 0.10 180 / 0.18);
  color: oklch(0.78 0.10 180);
}

/* ========== EMPLOYER MATCH COLLAPSIBLE ========== */
.match-details {
  margin-top: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.match-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  background: var(--color-surface-raised);
  user-select: none;
  list-style: none;
}
.match-summary::-webkit-details-marker { display: none; }
.match-summary::before {
  content: '▸';
  margin-right: var(--space-2);
  font-size: 12px;
  transition: transform 0.15s;
}
details.match-details[open] > .match-summary::before {
  transform: rotate(90deg);
}
.match-status {
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-left: auto;
}
.match-fields {
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.match-fields .form-field {
  margin-bottom: var(--space-3);
}
.match-fields .form-field:last-of-type {
  margin-bottom: 0;
}

/* ===== SPREADSHEET GRID VIEWER ===== */
.xlsx-grid-wrap {
  overflow: auto;
  max-height: 100%;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md, 6px);
  background: #fff;
}
.xlsx-grid {
  border-collapse: collapse;
  font-size: 12px;
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
  min-width: 100%;
  white-space: nowrap;
}
.xlsx-grid thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
.xlsx-col-header-row {
  background: #f0f2f5;
}
.xlsx-col-header-row th {
  padding: 3px 6px;
  text-align: center;
  font-weight: 600;
  font-size: 10px;
  color: #6b7280;
  border-bottom: 2px solid #d1d5db;
  border-right: 1px solid #e5e7eb;
  letter-spacing: 0.5px;
}
.xlsx-col-letter {
  min-width: 64px;
}
.xlsx-row-num {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #f0f2f5;
  text-align: center;
  font-weight: 600;
  font-size: 10px;
  color: #6b7280;
  padding: 2px 6px;
  min-width: 38px;
  border-right: 2px solid #d1d5db;
  user-select: none;
}
.xlsx-cell {
  padding: 3px 8px;
  border-right: 1px solid #edf0f3;
  border-bottom: 1px solid #edf0f3;
  color: #1e293b;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xlsx-hdr-cell {
  font-weight: 700;
  color: #0f172a;
}
.xlsx-label-cell {
  font-weight: 600;
  color: #334155;
}
/* Column header rows (month names, year headers) */
.xlsx-colhdr-row {
  background: #e8f4f8;
}
.xlsx-colhdr-row td.xlsx-row-num {
  background: #dbeef5;
}
.xlsx-colhdr-row .xlsx-cell {
  font-weight: 700;
  color: #0c4a6e;
  border-bottom: 2px solid #7dd3fc;
  padding-top: 5px;
  padding-bottom: 5px;
}
/* Section title rows (like "Cash In", "Total Income") */
.xlsx-section-row {
  background: #f8fafc;
}
.xlsx-section-row td.xlsx-row-num {
  background: #f0f2f5;
}
.xlsx-section-row .xlsx-cell {
  font-weight: 700;
  color: #1e40af;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 12.5px;
  border-bottom: 1px solid #cbd5e1;
}
/* Empty separator rows */
.xlsx-empty-row {
  height: 8px;
}
.xlsx-empty-row td {
  border-bottom: none;
}
.xlsx-empty-row td.xlsx-row-num {
  background: #f0f2f5;
}
/* Alternating data rows */
.xlsx-alt-row {
  background: #f9fafb;
}
.xlsx-data-row:hover,
.xlsx-alt-row:hover {
  background: #eff6ff;
}
.xlsx-data-row:hover td.xlsx-row-num,
.xlsx-alt-row:hover td.xlsx-row-num {
  background: #dbeafe;
}
/* Truncation notice */
.xlsx-truncated {
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 6px;
  padding: 4px;
}
/* Sheet tabs area - scrollable */
.xlsx-tabs-wrap {
  max-height: 120px;
  overflow-y: auto;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: 6px;
  flex-shrink: 0;
}
.xlsx-tabs-compact {
  max-height: 80px;
}
.xlsx-tabs-inner {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
/* Expanded floating panel transition */
#floating-file-panel {
  transition: all 0.25s ease;
}
.floating-panel-expanded .xlsx-tabs-wrap {
  max-height: 140px;
}
.floating-panel-expanded .xlsx-tabs-compact {
  max-height: 140px;
}

/* ========== READ-ONLY LOCK OVERLAY ========== */
body.read-only-mode .btn-primary:not(.acct-plan-btn):not(.auth-submit):not([id="auth-logout-btn"]),
body.read-only-mode .btn-secondary:not(.acct-plan-btn):not(.auth-submit):not([id="auth-logout-btn"]) {
  position: relative;
  pointer-events: none;
  opacity: 0.5;
}
body.read-only-mode .btn-primary:not(.acct-plan-btn):not(.auth-submit)::after,
body.read-only-mode .btn-secondary:not(.acct-plan-btn):not(.auth-submit)::after {
  content: "🔒";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
}
body.read-only-mode #run-simulation-btn { pointer-events: none; opacity: 0.45; }
body.read-only-mode .spreadsheet-table tbody { opacity: 0.7; }
body.read-only-mode input:not([id^="auth-"]):not([id^="acct-"]):not([id="login-"]),
body.read-only-mode select:not([id^="auth-"]):not([id^="acct-"]) {
  pointer-events: none;
  opacity: 0.6;
}
body.read-only-mode textarea:not(#scratchpad-textarea) { pointer-events: none; opacity: 0.6; }

/* Resubscribe CTA in sub-banner */
.sub-banner-cta {
  display: inline-block;
  margin-left: 12px;
  padding: 3px 14px;
  background: white;
  color: var(--color-error);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background 0.15s, transform 0.1s;
}
.sub-banner-cta:hover { background: #f0f0f0; transform: translateY(-1px); }

/* ========== SESSION TIMEOUT MODAL ========== */
.session-timeout-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0.15 0 0 / 0.65);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}
.session-timeout-modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-8) var(--space-6);
  max-width: 400px;
  width: 90vw;
  box-shadow: 0 16px 48px rgba(0,0,0,0.25);
  text-align: center;
}
.session-timeout-icon {
  width: 56px;
  height: 56px;
  background: oklch(0.92 0.03 80);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}
.session-timeout-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.session-timeout-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  line-height: 1.5;
}
.session-timeout-countdown {
  font-size: var(--text-2xl);
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--color-error);
  margin: var(--space-3) 0;
  font-variant-numeric: tabular-nums;
}
.session-timeout-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.session-timeout-actions .btn { flex: 1; }

/* ========== ACCOUNT SETTINGS ENHANCEMENTS ========== */
.acct-session-pref {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.acct-session-pref label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  min-width: 120px;
}
.acct-session-pref select {
  flex: 1;
  max-width: 200px;
}
.acct-danger-zone {
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: 1px solid oklch(from var(--color-error) l c h / 0.25);
  border-radius: var(--radius-lg);
  background: oklch(from var(--color-error) l c h / 0.03);
}
.acct-danger-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-error);
  margin-bottom: var(--space-2);
}
.acct-danger-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  line-height: 1.5;
}
.acct-delete-btn {
  background: none;
  border: 1px solid var(--color-error);
  color: var(--color-error);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.acct-delete-btn:hover { background: var(--color-error); color: white; }
/* ========== PROMO CODE ========== */
.acct-promo-wrap {
  margin-top: var(--space-4);
  text-align: center;
}
.acct-promo-toggle {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}
.acct-promo-toggle:hover { opacity: 0.8; }
.acct-promo-form {
  margin-top: var(--space-3);
}
.acct-promo-input-row {
  display: flex;
  gap: var(--space-2);
  max-width: 320px;
  margin: 0 auto;
}
.acct-promo-input-row input {
  flex: 1;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  letter-spacing: 1px;
  text-align: center;
}
.acct-promo-error {
  color: var(--color-error);
  font-size: var(--text-xs);
  margin-top: var(--space-2);
}
.acct-promo-success {
  color: var(--color-success);
  font-size: var(--text-xs);
  margin-top: var(--space-2);
  font-weight: 600;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ========== SHOW YOUR WORK — Clickable Cells & Popover ========== */
.syw-cell {
  cursor: pointer;
  transition: background 0.15s ease;
}
.syw-cell:hover {
  background: color-mix(in oklch, var(--color-accent) 12%, transparent) !important;
}
.syw-cell-active {
  background: color-mix(in oklch, var(--color-accent) 22%, transparent) !important;
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
}

.syw-popover {
  position: fixed;
  z-index: 9999;
  width: 340px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.syw-popover.syw-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.syw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-divider);
  background: color-mix(in oklch, var(--color-accent) 8%, var(--color-surface));
  border-radius: 10px 10px 0 0;
}
.syw-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--color-text);
}
.syw-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0 2px;
  line-height: 1;
}
.syw-close:hover {
  color: var(--color-text);
}
.syw-body {
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--color-text);
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
.syw-footer {
  padding: 8px 14px;
  font-size: 11px;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-divider);
  text-align: center;
}

/* ========== STRESS TEST ========== */
.stresstest-panel {
  background: linear-gradient(135deg, oklch(0.97 0.02 70), oklch(0.97 0.01 40));
  border: 1px solid oklch(0.88 0.04 70);
  border-radius: 14px;
  padding: 0;
  margin-bottom: 20px;
  overflow: hidden;
}
[data-theme="dark"] .stresstest-panel {
  background: linear-gradient(135deg, oklch(0.22 0.02 70), oklch(0.20 0.01 40));
  border-color: oklch(0.35 0.04 70);
}
.stresstest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid oklch(0.88 0.04 70);
}
[data-theme="dark"] .stresstest-header {
  border-color: oklch(0.35 0.04 70);
}
.stresstest-header h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-warning, #b58a1b);
  margin: 0;
}
.stresstest-body {
  padding: 18px;
}
.stresstest-intro {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 16px 0;
}

/* Scenario cards */
.st-scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 700px) {
  .st-scenarios { grid-template-columns: 1fr; }
}
.st-scenario-card {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.st-scenario-card:hover {
  border-color: var(--color-warning, #b58a1b);
  box-shadow: 0 2px 12px oklch(0.6 0.1 70 / 0.15);
  transform: translateY(-1px);
}
.st-scenario-card.st-selected {
  border-color: var(--color-warning, #b58a1b);
  background: oklch(from var(--color-warning, #b58a1b) l c h / 0.07);
  box-shadow: 0 2px 12px oklch(0.6 0.1 70 / 0.2);
}
.st-card-icon {
  font-size: 24px;
  line-height: 1;
}
.st-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text);
}
.st-card-desc {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.st-card-pattern {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.st-card-actual {
  font-size: 10px;
  color: var(--color-text-muted);
  opacity: 0.7;
  margin-top: 5px;
  font-style: italic;
  line-height: 1.3;
}
.st-yr-down {
  font-size: 11px;
  font-weight: 700;
  color: #d32f2f;
  background: rgba(211, 47, 47, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
}
.st-yr-up {
  font-size: 11px;
  font-weight: 700;
  color: #2e7d32;
  background: rgba(46, 125, 50, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Stress test results */
.st-results-header {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--color-text);
}
.st-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 600px) {
  .st-kpi-row { grid-template-columns: 1fr; }
}
.st-kpi {
  background: var(--color-surface);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  border: 1px solid var(--color-border);
}
.st-kpi-crash {
  border-color: #d32f2f;
  background: rgba(211, 47, 47, 0.04);
}
.st-kpi-label {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.st-kpi-value {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-display);
}
.st-survival {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 14px;
}
.st-return-strip {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  align-items: center;
}
.st-return-strip .st-strip-yr {
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  min-width: 42px;
}
.st-return-strip .st-strip-yr.st-strip-down {
  background: rgba(211, 47, 47, 0.1);
  color: #d32f2f;
}
.st-return-strip .st-strip-yr.st-strip-up {
  background: rgba(46, 125, 50, 0.1);
  color: #2e7d32;
}
.st-return-strip .st-strip-yr.st-strip-normal {
  background: var(--color-surface);
  color: var(--color-text-muted);
}
.st-return-strip .st-strip-label {
  font-size: 9px;
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 4px;
}

/* Stress test comparison table */
.st-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--color-border);
}
.st-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.st-table-wrap th {
  background: var(--color-surface);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 8px 10px;
  text-align: right;
  border-bottom: 2px solid var(--color-border);
  position: sticky;
  top: 0;
}
.st-table-wrap th:first-child,
.st-table-wrap td:first-child {
  text-align: left;
}
.st-table-wrap td {
  padding: 6px 10px;
  text-align: right;
  border-bottom: 1px solid var(--color-divider, var(--color-border));
}
.st-table-wrap tr.st-crash-row {
  background: rgba(211, 47, 47, 0.04);
}
.st-table-wrap tr.st-rally-row {
  background: rgba(46, 125, 50, 0.04);
}

/* Deduction type toggle */
button.deduction-toggle { transition: background 0.2s, color 0.2s; border: 1px solid var(--color-divider); }
button.deduction-toggle:not(.active) { background: var(--color-surface) !important; color: var(--color-text-muted) !important; }
button.deduction-toggle:not(.active):hover { background: var(--color-surface-alt) !important; }
button.deduction-toggle.active { background: oklch(0.45 0.15 230) !important; color: #fff !important; border-color: oklch(0.45 0.15 230) !important; }
#post-std-deduction[readonly] { background: var(--color-surface-alt); opacity: 0.7; cursor: not-allowed; }

/* Deduction range table */
.deduction-range-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
  margin-bottom: 6px;
}
.deduction-range-table th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  color: var(--color-text-muted);
  padding: 4px 6px;
  border-bottom: 1px solid var(--color-divider);
}
.deduction-range-table td {
  padding: 3px 4px;
  border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.06);
}
.deduction-range-table input[type="number"] {
  width: 100%;
  min-width: 60px;
  padding: 4px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.deduction-range-table input[type="number"]:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary-highlight);
}
.deduction-range-remove {
  background: none;
  border: none;
  color: var(--color-text-faint);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.deduction-range-remove:hover {
  color: var(--color-error, #d32f2f);
  background: oklch(from var(--color-error, #d32f2f) l c h / 0.08);
}
.deduction-add-range-btn {
  display: inline-block;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-highlight);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s;
}
.deduction-add-range-btn:hover {
  background: var(--color-primary);
  color: #fff;
}

/* ========== METRIC HELP TOOLTIPS ========== */
/* v149.383 (D3) — tooltip affordance standardized to the wizard's inline
   info icon (ⓘ). The chip glyph is now a lowercase "i" inside the bordered
   circle (was "?"), so every help control across the app reads as the same
   info affordance the guided wizard and spreadsheet use, instead of a boxed
   "?". Chip sizing/hover tuned so the "i" is optically centered and legible;
   the hover-tooltip behavior below is unchanged. */
.metric-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--color-text-muted);
  color: var(--color-text-muted);
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  font-family: Georgia, 'Times New Roman', serif; /* a serif "i" reads clearly as the info glyph at small size */
  line-height: 1;
  cursor: help;
  position: relative;
  margin-left: 4px;
  vertical-align: middle;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}
.metric-help:hover {
  opacity: 1;
  border-color: var(--color-primary, var(--color-text-secondary));
  color: var(--color-primary, var(--color-text-secondary));
}
.metric-help .metric-help-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface-alt, var(--color-surface));
  color: var(--color-text);
  border: 1px solid var(--color-divider);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  white-space: normal;
  width: 210px;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 100;
  pointer-events: none;
}
.metric-help .metric-help-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-divider);
}
.metric-help:hover .metric-help-tip {
  display: block;
}

/* Budget frequency selector */
.budget-freq-select {
  font-size: 10px;
  padding: 2px 4px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  min-width: 50px;
}
.budget-freq-select:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* ── Pension Cliff Warning ──────────────────────────────── */
.cliff-warning-card {
  background:oklch(0.97 0.04 70);
  border:1px solid oklch(0.88 0.08 70);
  border-top:3px solid var(--color-secondary);
  border-radius:8px; padding:12px 14px;
  margin-bottom:12px; margin-top:var(--space-3);
}
.cliff-warning-header {
  font-size:13px; font-weight:700;
  color:oklch(0.40 0.12 70);
}
.cliff-rates-row {
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; margin-top:10px;
}
.cliff-rate { padding:8px 10px; border-radius:6px; }
.cliff-rate-pre  { background:var(--color-success-highlight,#ecfdf5); }
.cliff-rate-post { background:oklch(0.97 0.02 10); }
.cliff-rate-label {
  font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--color-text-muted);
}
.cliff-rate-value {
  font-size:15px; font-weight:700; margin:3px 0;
}
.cliff-rate-pre  .cliff-rate-value { color:var(--color-success); }
.cliff-rate-post .cliff-rate-value { color:var(--color-error,#dc2626); }
.cliff-rate-sub { font-size:11px; color:var(--color-text-muted); }

/* ════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — Phone-first fixes (≤ 480px)
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Budget grid: stacked row layout ──────────────────────── */
@media (max-width: 480px) {
  .budget-row {
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 10px 0;
  }
  .budget-row-label {
    flex: none;
    width: calc(100% - 40px);  /* full width minus drag handle */
    font-size: 13px;
    order: 0;
  }
  .budget-drag-handle {
    order: -1;
    width: 20px;
    height: 24px;
  }
  .budget-freq-select {
    order: 1;
    min-width: 54px;
    font-size: 11px;
    padding: 4px 6px;
  }
  .budget-row .input-with-prefix {
    order: 2;
    width: 0;
    flex: 1;
    min-width: 100px;
    flex-shrink: 1;
  }
  .budget-row-actions {
    order: 3;
    gap: 4px;
  }
  .budget-action-btn {
    width: 32px;
    height: 32px;
  }
  .budget-total-row {
    font-size: 13px;
  }
  /* Budget section padding */
  .budget-section {
    padding: 0 var(--space-2);
  }
}

/* ── 2. Floating action buttons: move right on mobile ────────── */
@media (max-width: 640px) {
  .feedback-fab {
    left: auto;
    right: var(--space-3);
    bottom: var(--space-3);
    width: 42px;
    height: 42px;
  }
  .scratchpad-fab {
    left: auto;
    right: var(--space-3);
    bottom: calc(var(--space-3) + 50px);
    width: 38px;
    height: 38px;
  }
}

/* ── 3. Spreadsheet table: sticky Age/Year columns ───────────── */
@media (max-width: 768px) {
  .spreadsheet-toolbar {
    flex-wrap: wrap;
    gap: 6px;
    padding: var(--space-2) var(--space-3);
  }
  .spreadsheet-toolbar .chart-title {
    font-size: 14px;
    flex: 0 0 100%;
  }
  .spreadsheet-toolbar > span {
    font-size: 10px;
    margin-left: 0 !important;
    flex: 1;
  }
  .spreadsheet-table th:first-child,
  .spreadsheet-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--color-surface);
  }
  .spreadsheet-table th:first-child {
    background: var(--color-surface-offset);
    z-index: 4;
  }
  .spreadsheet-table th:nth-child(2),
  .spreadsheet-table td:nth-child(2) {
    position: sticky;
    left: 26px;  /* width of Age column */
    z-index: 3;
    background: var(--color-surface);
  }
  .spreadsheet-table th:nth-child(2) {
    background: var(--color-surface-offset);
    z-index: 4;
  }
  /* Shadow hint on sticky edge */
  .spreadsheet-table td:nth-child(2)::after,
  .spreadsheet-table th:nth-child(2)::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(to right, oklch(from var(--color-text) l c h / 0.06), transparent);
    pointer-events: none;
  }
  .spreadsheet-table tbody tr:nth-child(even) td:first-child,
  .spreadsheet-table tbody tr:nth-child(even) td:nth-child(2) {
    background: oklch(from var(--color-text) l c h / 0.02);
  }
  .spreadsheet-table tbody tr:hover td:first-child,
  .spreadsheet-table tbody tr:hover td:nth-child(2) {
    background: var(--color-primary-highlight);
  }
}

/* ── 4. Inline grid overrides: collapse multi-column grids ──── */
@media (max-width: 600px) {
  /* 4-column tax/deduction grids (1.2fr + 3×0.8fr) → 2 columns */
  .form-grid[style*="0.8fr 0.8fr 0.8fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* 3-column tax/deduction grids (1.2fr + 2×0.8fr) → stacked
     Both 3-col and 4-col match the 4-col rule above, which is fine
     because 2-col is better than 3-col on mobile for either. */
  /* Generic 3-column inline grids → 2 columns */
  [style*="1fr 1fr 1fr"],
  [style*="repeat(3,1fr)"],
  [style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* 4-column catchup KPI grids → 2 columns */
  [style*="1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* 5-column MC percentile grid → wrap at 3 */
  #mc-standalone-pct-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Note: #pre-hist-crashes, #hist-crash-drawdowns, #risk-hist-crashes,
     #dash-scenario-inputs all matched by the generic [style*="1fr 1fr 1fr"] rule above */
}
@media (max-width: 400px) {
  /* Tightest screens: single column everywhere */
  .form-grid[style*="0.8fr 0.8fr 0.8fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="1fr 1fr 1fr"],
  [style*="repeat(3,1fr)"],
  [style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  #mc-standalone-pct-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 5. Touch targets: minimum 44px hit areas ────────────────── */
@media (max-width: 768px) {
  /* Withdrawal order buttons */
  .withdrawal-btn {
    min-height: 44px;
    padding: 8px 10px;
    font-size: 12px;
  }
  /* Spending method toggle buttons */
  .tax-method-btn, .ltcg-method-btn {
    min-height: 40px;
    padding: 8px 12px;
  }
  /* Form inputs */
  .form-field input, .form-field select {
    min-height: 44px;
  }
  /* View toggle tabs (Charts / Spreadsheet / Strategies) */
  .view-toggle-btn {
    min-height: 40px;
    padding: 8px 12px;
  }
  /* Nav links in mobile drawer */
  .mobile-nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ── 6. General small-screen polish ──────────────────────────── */
@media (max-width: 480px) {
  /* KPI cards: slightly smaller text */
  .kpi-value {
    font-size: var(--text-base);
  }
  .kpi-label {
    font-size: 10px;
  }
  /* Chart card padding */
  .chart-card {
    padding: var(--space-3);
  }
  /* Form section padding */
  .form-section .form-grid {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  /* Calc header */
  .calc-header h2 {
    font-size: var(--text-lg);
  }
  /* Prevent horizontal overflow from any stray wide element */
  .view {
    overflow-x: hidden;
  }
  /* Footer columns → stack */
  footer .footer-content {
    flex-direction: column;
    gap: var(--space-4);
  }
}

/* ── 7. Cell math popover: fit to screen ────────────────────── */
@media (max-width: 480px) {
  .syw-popover {
    width: calc(100vw - 24px);
    left: 12px !important;
    right: 12px;
    max-width: none;
  }
}

/* ── 8. Scratchpad panel: full-width on mobile ─────────────── */
@media (max-width: 480px) {
  .scratchpad-panel {
    width: 100vw !important;
    right: -100vw;
    border-radius: 0;
  }
  .scratchpad-panel.open {
    right: 0;
  }
}

/* ── 9. Feedback overlay: full-width on mobile ─────────────── */
@media (max-width: 480px) {
  .feedback-modal {
    width: calc(100vw - 24px);
    max-width: none;
    margin: 12px;
  }
}

/* ── 10. Strategy cards: collapse metric grids ─────────────── */
@media (max-width: 600px) {
  .catchup-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 400px) {
  .catchup-kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 11. Savings Estimator: responsive grids ───────────────── */
@media (max-width: 600px) {
  #pre-spreadsheet {
    font-size: 8px;
  }
  #pre-spreadsheet th,
  #pre-spreadsheet td {
    padding: 2px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — Round 3
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   v149.461 — iPhone audit fixes (see NestMint-iPhone-Audit-2026-07-22.md)
   ══════════════════════════════════════════════════════════════════ */

/* H2 — Saved Scenarios: the table declares min-width:620px; this wrapper is
   the same overflow mechanism the spreadsheets use (dedicated class: the
   .table-scroll class carries six context-scoped rule sets this card must
   not inherit). */
.pre-scenarios-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* M3 — metric-help works on touch. aria-expanded on the trigger is the ONE
   state; the tip's visibility keys off it, so the accessibility state and
   the visual state cannot disagree. Hover still reveals for pointers. */
.metric-help[aria-expanded="true"] .metric-help-tip { display: block; }

/* M4 — the live-status banner gets the same home-indicator offset the FABs
   have, and on phones leaves the bottom-left FAB column clear instead of
   spanning nearly the full viewport. Placement aesthetics stay on the
   device-check list. */
.nm-live-status { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }

/* H1 — iOS auto-zoom floor. Safari zooms the page when a focused control's
   font is under 16px; ~19 rule sites styled controls at 9-13px. The defect
   is iOS-conditional, so the fix is: this @supports guard is true only on
   iOS, desktop typography is untouched, and a future undersized control is
   floored automatically instead of silently re-breaking. !important is the
   point — the specific 10-13px rules must lose. Verified at audit time that
   no control rule exceeds 16px, so this floors and never shrinks. */
@supports (-webkit-touch-callout: none) {
  input, select, textarea { font-size: 16px !important; }
}

/* ── 12. Safari safe-area insets for notch/home-indicator phones ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  /* FABs: offset by home indicator */
  .feedback-fab {
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }
  .scratchpad-fab {
    bottom: calc(var(--space-3) + 50px + env(safe-area-inset-bottom, 0px));
  }
  /* Fixed bottom elements */
  .scratchpad-panel {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* Main body padding for notch areas */
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

/* ── 13. Landscape phone (short+wide) ────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  /* Spreadsheet scroll: use more of the short screen */
  .spreadsheet-scroll {
    max-height: 55vh;
  }
  /* Auth overlay: ensure it scrolls so modal content is reachable */
  .auth-overlay {
    display: flex;
    align-items: flex-start;  /* don't center-vertically — allow scroll */
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Auth modal: compact to fit short viewport, scroll if needed */
  .auth-modal {
    padding: var(--space-2) var(--space-4);
    margin: 4px auto;
    max-height: calc(100vh - 8px);
    max-height: calc(100dvh - 8px);
    overflow-y: auto;
    width: min(90%, 460px); /* wider in landscape to reduce height */
  }
  /* Tighter auth spacing to minimise total height */
  .auth-title { font-size: var(--text-base); margin-bottom: 2px; }
  .auth-subtitle { font-size: 11px; margin-bottom: var(--space-2); }
  .auth-field { margin-bottom: var(--space-1); }
  .auth-field label { margin-bottom: 1px; font-size: 11px; }
  .auth-field input,
  .auth-select { padding: 5px var(--space-2); font-size: 13px; }
  .auth-social-btn { padding: 5px var(--space-2); font-size: 12px; }
  .auth-social-buttons { gap: 4px; margin-bottom: var(--space-2); }
  .auth-divider { margin: var(--space-1) 0; font-size: 11px; }
  .auth-submit { padding: 7px; font-size: var(--text-sm); margin-top: var(--space-1); }
  .auth-switch { font-size: 11px; margin-top: var(--space-2); }
  .auth-remember { font-size: 11px; margin-bottom: var(--space-1); }
  /* Also compact the security-question modal in landscape */
  .auth-modal h3 { font-size: var(--text-base); margin-bottom: var(--space-2); }
  /* KPI cards: single row, smaller */
  .kpi-row {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  .kpi-value {
    font-size: var(--text-sm);
  }
  /* Form sections: reduce vertical spacing */
  .form-section {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  .form-section .form-grid {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  /* Chart cards: shorter */
  .chart-card canvas {
    max-height: 200px;
  }
  /* Nav header: thinner */
  .site-header {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }
  /* Authenticated nav: force hamburger in landscape */
  .header-nav { display: none; }
  .mobile-menu-btn { display: block; }
  .mobile-nav:not([hidden]) { display: flex; }
  .logo-tagline { display: none; }
  /* Budget donut: smaller */
  .budget-donut-wrapper {
    height: 220px !important;
  }
  /* Cell popover: shorter */
  .syw-popover {
    max-height: 280px;
  }
  /* FABs: smaller in landscape to save space */
  .feedback-fab { width: 36px; height: 36px; }
  .scratchpad-fab { width: 32px; height: 32px; }
}

/* ── 14. Budget Annual table: tighter mobile pass ────────────── */
@media (max-width: 480px) {
  .budget-annual-table {
    font-size: 10px;
  }
  .budget-annual-table th,
  .budget-annual-table td {
    padding: 2px 4px;
  }
  .budget-annual-table th.ba-col-category,
  .budget-annual-table td.ba-col-category {
    min-width: 90px;
    max-width: 110px;
    font-size: 10px;
  }
  .ba-month-input {
    width: 52px;
    font-size: 10px;
  }
  .ba-freq-select {
    width: 70px;
    font-size: 9px;
  }
}

/* ── 15. Dark mode + sticky column backgrounds ───────────────── */
[data-theme="dark"] .spreadsheet-table th:first-child,
[data-theme="dark"] .spreadsheet-table th:nth-child(2) {
  background: var(--color-surface-offset);
}
[data-theme="dark"] .spreadsheet-table td:first-child,
[data-theme="dark"] .spreadsheet-table td:nth-child(2) {
  background: var(--color-surface);
}
[data-theme="dark"] .spreadsheet-table tbody tr:nth-child(even) td:first-child,
[data-theme="dark"] .spreadsheet-table tbody tr:nth-child(even) td:nth-child(2) {
  background: var(--color-surface-2);
}
[data-theme="dark"] .spreadsheet-table tbody tr:hover td:first-child,
[data-theme="dark"] .spreadsheet-table tbody tr:hover td:nth-child(2) {
  background: var(--color-primary-highlight);
}
/* Dark mode sticky edge shadow */
[data-theme="dark"] .spreadsheet-table td:nth-child(2)::after,
[data-theme="dark"] .spreadsheet-table th:nth-child(2)::after {
  background: linear-gradient(to right, oklch(0 0 0 / 0.15), transparent);
}

/* Dark mode budget annual sticky */
[data-theme="dark"] .budget-annual-table th.ba-col-category {
  background: var(--color-surface-offset);
}
[data-theme="dark"] .budget-annual-table td.ba-col-category {
  background: var(--color-surface);
}
[data-theme="dark"] .ba-data-row:nth-child(even) td.ba-col-category {
  background: var(--color-surface-2);
}

/* System dark mode (no data-theme attribute) — same rules */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .spreadsheet-table th:first-child,
  :root:not([data-theme]) .spreadsheet-table th:nth-child(2) {
    background: var(--color-surface-offset);
  }
  :root:not([data-theme]) .spreadsheet-table td:first-child,
  :root:not([data-theme]) .spreadsheet-table td:nth-child(2) {
    background: var(--color-surface);
  }
  :root:not([data-theme]) .spreadsheet-table tbody tr:nth-child(even) td:first-child,
  :root:not([data-theme]) .spreadsheet-table tbody tr:nth-child(even) td:nth-child(2) {
    background: var(--color-surface-2);
  }
  :root:not([data-theme]) .spreadsheet-table td:nth-child(2)::after,
  :root:not([data-theme]) .spreadsheet-table th:nth-child(2)::after {
    background: linear-gradient(to right, oklch(0 0 0 / 0.15), transparent);
  }
}

/* ── 16. Prevent iOS zoom on input focus ─────────────────────── */
@media (max-width: 768px) {
  /* iOS zooms when font-size < 16px on focus */
  input[type="number"],
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select,
  textarea {
    font-size: max(16px, inherit);
  }
}

/* ── 17. Smooth momentum scrolling (iOS Safari) ──────────────── */
.spreadsheet-scroll,
.budget-annual-scroll-wrapper,
.scratchpad-panel,
.feedback-modal {
  -webkit-overflow-scrolling: touch;
}

/* ── 18. Tap highlight removal for cleaner touch UX ──────────── */
@media (hover: none) and (pointer: coarse) {
  * {
    -webkit-tap-highlight-color: transparent;
  }
  /* Restore visible focus for accessibility */
  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — Round 4 (cont.): Deep Dive mobile fixes
   ══════════════════════════════════════════════════════════════════ */

/* ── 20. Deep Dive: inline flex panels stack on mobile ───────── */
@media (max-width: 600px) {
  /* All inline flex rows inside planning-tool-body: stack vertically */
  .planning-tool-body > div[style*="display:flex"][style*="align-items:center"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  /* The input+suffix group: don't shrink, full-width */
  .planning-tool-body > div[style*="display:flex"] > div[style*="flex-shrink:0"] {
    flex-shrink: 1 !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
  /* The label side: full width */
  .planning-tool-body > div[style*="display:flex"] > div[style*="flex:1"] {
    width: 100% !important;
  }
  /* Form grids inside Deep Dive what-if panels: stack */
  .planning-tool-body .form-grid-2 {
    grid-template-columns: 1fr !important;
  }
  /* Disclaimer boxes: smaller padding */
  .planning-tool-body > div[style*="border-radius:10px"] {
    padding: 10px 12px !important;
  }
}

/* ── 21. Deep Dive accordion: better touch targets ──────────── */
@media (max-width: 768px) {
  .planning-tool-toggle {
    padding: 14px 14px;
    min-height: 48px;
    touch-action: manipulation;  /* prevent 300ms tap delay on iOS */
  }
  .planning-tool-icon {
    width: 36px;
    height: 36px;
  }
  .planning-tool-label {
    font-size: 13px;
  }
  .planning-tool-chevron {
    width: 20px;
    height: 20px;
    padding: 2px;
  }
  /* Ensure the <details> summary acts as a single touch target */
  .planning-tool-card summary {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(43, 181, 178, 0.08);
  }
  /* Active/pressed state feedback */
  .planning-tool-card summary:active {
    background: oklch(from var(--color-primary) l c h / 0.06);
    border-radius: 10px 10px 0 0;
  }
  .planning-tool-card:not([open]) summary:active {
    border-radius: 10px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — Round 4: Tablet breakpoint (769–1024px)
   ══════════════════════════════════════════════════════════════════ */

/* ── 19. Tablet layout: KPIs, grids, budget, spreadsheet ─────── */
@media (min-width: 601px) and (max-width: 1024px) {
  /* --- KPI row: 2×2 grid on tablet --- */
  .kpi-row {
    grid-template-columns: 1fr 1fr !important;
  }

  /* --- Budget layout: stack chart below form --- */
  .budget-layout {
    grid-template-columns: 1fr;
  }
  .budget-chart-panel {
    position: static;  /* un-sticky when stacked */
  }

  /* --- Budget annual table: constrain to scrollable container --- */
  .budget-annual-table th.ba-col-category,
  .budget-annual-table td.ba-col-category {
    min-width: 110px;
    max-width: 130px;
    font-size: 11px;
  }
  .ba-month-input { width: 58px; font-size: 11px; }
  .ba-freq-select { width: 80px; font-size: 10px; }

  /* --- Spreadsheet: sticky first two columns + scroll hint --- */
  .spreadsheet-table th:first-child,
  .spreadsheet-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--color-surface);
  }
  .spreadsheet-table th:first-child {
    background: var(--color-surface-offset);
    z-index: 4;
  }
  .spreadsheet-table th:nth-child(2),
  .spreadsheet-table td:nth-child(2) {
    position: sticky;
    left: 26px;
    z-index: 3;
    background: var(--color-surface);
  }
  .spreadsheet-table th:nth-child(2) {
    background: var(--color-surface-offset);
    z-index: 4;
  }
  /* Shadow hint on sticky edge */
  .spreadsheet-table td:nth-child(2)::after,
  .spreadsheet-table th:nth-child(2)::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(to right, oklch(from var(--color-text) l c h / 0.06), transparent);
    pointer-events: none;
  }
  .spreadsheet-table tbody tr:nth-child(even) td:first-child,
  .spreadsheet-table tbody tr:nth-child(even) td:nth-child(2) {
    background: oklch(from var(--color-text) l c h / 0.02);
  }
  .spreadsheet-table tbody tr:hover td:first-child,
  .spreadsheet-table tbody tr:hover td:nth-child(2) {
    background: var(--color-primary-highlight);
  }
  /* Spreadsheet: tighter cells */
  .spreadsheet-table th,
  .spreadsheet-table td {
    font-size: 10px;
    padding: 3px 4px;
  }

  /* --- Spreadsheet toolbar: wrap --- */
  .spreadsheet-toolbar {
    flex-wrap: wrap;
    gap: 6px;
    padding: var(--space-2) var(--space-3);
  }
  .spreadsheet-toolbar .chart-title {
    font-size: 14px;
    flex: 0 0 100%;
  }
  .spreadsheet-toolbar > span {
    font-size: 10px;
    margin-left: 0 !important;
    flex: 1;
  }

  /* --- Sim cards: single column on tablet --- */
  .sim-grid { grid-template-columns: 1fr; }

  /* --- Calc header: stack --- */
  .calc-header { flex-direction: column; align-items: flex-start; }

  /* --- Hero CTAs: stack --- */
  .hero-ctas { flex-direction: column; align-items: center; }
  .hero-ctas .btn { width: 100%; max-width: 400px; }

  /* --- Inline grid overrides for 3/4-col grids at tablet --- */
  .form-grid[style*="0.8fr 0.8fr 0.8fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* --- Dash actions: full width --- */
  .dash-actions { width: 100%; }
  .dash-actions .btn { flex: 1; }

  /* --- View toggle: scrollable if needed --- */
  .view-toggle-bar {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Form inputs: touch-friendly minimum size --- */
  .form-field input, .form-field select {
    min-height: 44px;
  }

  /* --- iOS zoom prevention for tablet --- */
  input[type="number"],
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select,
  textarea {
    font-size: max(16px, inherit);
  }
}

/* --- 19b. Dark mode sticky columns for tablet range --- */
@media (min-width: 601px) and (max-width: 1024px) {
  [data-theme="dark"] .spreadsheet-table th:first-child,
  [data-theme="dark"] .spreadsheet-table th:nth-child(2) {
    background: var(--color-surface-offset);
  }
  [data-theme="dark"] .spreadsheet-table td:first-child,
  [data-theme="dark"] .spreadsheet-table td:nth-child(2) {
    background: var(--color-surface);
  }
  [data-theme="dark"] .spreadsheet-table tbody tr:nth-child(even) td:first-child,
  [data-theme="dark"] .spreadsheet-table tbody tr:nth-child(even) td:nth-child(2) {
    background: var(--color-surface-2);
  }
  [data-theme="dark"] .spreadsheet-table tbody tr:hover td:first-child,
  [data-theme="dark"] .spreadsheet-table tbody tr:hover td:nth-child(2) {
    background: var(--color-primary-highlight);
  }
  [data-theme="dark"] .spreadsheet-table td:nth-child(2)::after,
  [data-theme="dark"] .spreadsheet-table th:nth-child(2)::after {
    background: linear-gradient(to right, oklch(0 0 0 / 0.15), transparent);
  }
}
@media (min-width: 601px) and (max-width: 1024px) and (prefers-color-scheme: dark) {
  :root:not([data-theme]) .spreadsheet-table th:first-child,
  :root:not([data-theme]) .spreadsheet-table th:nth-child(2) {
    background: var(--color-surface-offset);
  }
  :root:not([data-theme]) .spreadsheet-table td:first-child,
  :root:not([data-theme]) .spreadsheet-table td:nth-child(2) {
    background: var(--color-surface);
  }
  :root:not([data-theme]) .spreadsheet-table tbody tr:nth-child(even) td:first-child,
  :root:not([data-theme]) .spreadsheet-table tbody tr:nth-child(even) td:nth-child(2) {
    background: var(--color-surface-2);
  }
  :root:not([data-theme]) .spreadsheet-table td:nth-child(2)::after,
  :root:not([data-theme]) .spreadsheet-table th:nth-child(2)::after {
    background: linear-gradient(to right, oklch(0 0 0 / 0.15), transparent);
  }
}

/* v149.128 — Survivor age tag in widow years. Renders as a small italic
   muted-color suffix beside the survivor's age. The tooltip on the span
   explains "(s)" to the user. */
.survivor-age-tag {
  font-style: italic;
  font-size: 0.85em;
  color: var(--color-text-muted, #888);
  margin-left: 2px;
  cursor: help;
}

/* v149.136 — Tax Review: sticky thead so column labels stay visible while
   scrolling through the (now full-horizon) tables. The wrapper div has
   max-height:60vh and overflow:auto; thead sticks to its top. */
#post-tax-review-results table thead tr {
  position: sticky;
  top: 0;
  z-index: 2;
}
#post-tax-review-results table thead th {
  background: var(--color-surface-alt, #f1f5f9);
  /* Ensure the background paints the full cell so scrolling content
     doesn't bleed through. */
  box-shadow: inset 0 -1px 0 var(--color-border);
}

/* ============================================================
   Hero Option B — Gradient Ring border treatment
   Applied to product screenshot wrapper and beta-access banner.
   No content/layout changes; pure border restyle.
   ============================================================ */
.hero-image-wrapper {
  position: relative;
  background-clip: padding-box;
  border: 1px solid transparent;
  box-shadow: 0 24px 48px -20px oklch(0.55 0.13 175 / 0.25);
}
.hero-image-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    oklch(0.85 0.10 175) 0%,
    oklch(0.55 0.13 175) 50%,
    oklch(0.38 0.10 175) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Beta-access banner — override the inline 1px solid border with a gradient ring.
   Higher specificity (#id + attribute) beats inline border declarations. */
#beta-banner[id="beta-banner"] {
  position: relative;
  background-clip: padding-box;
  border: 1px solid transparent !important;
}
#beta-banner[id="beta-banner"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    oklch(0.85 0.10 175) 0%,
    oklch(0.55 0.13 175) 50%,
    oklch(0.38 0.10 175) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* v160 workspace + marketing refresh: presentation only; engines untouched */
.nm-v2-hero{background:radial-gradient(circle at 80% 15%,rgba(58,130,246,.13),transparent 35%),linear-gradient(135deg,#fff 0%,#f7fbff 55%,#eef7ff 100%);border-radius:0 0 34px 34px;padding-top:64px;padding-bottom:70px}.nm-v2-hero .hero-title{font-size:clamp(3rem,5vw,5.4rem);line-height:1.03;letter-spacing:-.055em}.nm-v2-hero .hero-desc{max-width:600px;font-size:1.12rem;line-height:1.75}.nm-v2-hero .hero-image{border-radius:22px;box-shadow:0 35px 80px rgba(15,35,70,.18);transform:perspective(1200px) rotateY(-3deg)}.nm-beta-banner{display:inline-flex;flex-direction:column;gap:2px;margin-top:18px;padding:11px 15px;border:1px solid #d9e9df;border-radius:12px;background:rgba(244,253,248,.92);font-size:.8rem;cursor:pointer}.nm-beta-banner span{color:var(--color-text-muted)}.nm-stage-section{padding-top:54px}.nm-stage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.nm-stage-card{position:relative;min-height:260px;padding:24px;border:1px solid var(--color-divider);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(15,35,70,.06)}.nm-stage-card h3{font-size:1.2rem;margin:8px 0}.nm-stage-card p{max-width:210px;color:var(--color-text-muted);font-size:.9rem;line-height:1.55}.nm-stage-kicker{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--color-primary)}.nm-stage-icon{position:absolute;right:22px;bottom:18px;font-size:56px;color:rgba(24,110,84,.28)}.nm-stage-saver{background:linear-gradient(145deg,#fff,#effbf5)}.nm-stage-near{background:linear-gradient(145deg,#fff,#f5f1ff)}.nm-stage-retired{background:linear-gradient(145deg,#fff,#eef7ff)}.nm-stage-legacy{background:linear-gradient(145deg,#fff,#fff5ec)}.nm-core-tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.nm-core-tool{display:block;padding:24px;border:1px solid var(--color-divider);border-radius:16px;background:#fff;color:inherit;text-decoration:none;transition:.2s ease}.nm-core-tool:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(15,35,70,.09)}.nm-core-tool>span{font-size:.75rem;font-weight:800;color:var(--color-primary)}.nm-core-tool h3{margin:12px 0 8px;font-size:1.05rem}.nm-core-tool p{font-size:.86rem;line-height:1.55;color:var(--color-text-muted)}
.nm-workspace-shell{min-height:calc(100vh - 72px);display:grid;grid-template-columns:230px 1fr;background:#f8fafc}.nm-workspace-sidebar{display:flex;flex-direction:column;padding:24px 18px;border-right:1px solid #e8edf5;background:rgba(255,255,255,.94)}.nm-ws-brand{display:flex;align-items:center;gap:10px;font-size:1.2rem;color:#0a2452;margin:0 8px 30px}.nm-workspace-sidebar nav{display:flex;flex-direction:column;gap:5px}.nm-workspace-sidebar nav a,.nm-ws-help{padding:11px 13px;border-radius:10px;text-decoration:none;color:#244064;font-size:.9rem;font-weight:600}.nm-workspace-sidebar nav a:hover,.nm-workspace-sidebar nav a.active{background:#eaf3ff;color:#075ee8}.nm-workspace-sidebar hr{border:0;border-top:1px solid #e7ebf2;margin:12px 6px}.nm-ws-help{margin-top:auto}.nm-workspace-main{padding:34px 38px 50px;max-width:1450px;width:100%;margin:auto}.nm-ws-topline{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px}.nm-ws-topline h1{font-size:2rem;letter-spacing:-.035em;color:#0a2452;margin:0 0 7px}.nm-ws-topline p{margin:0;color:#6d7d95}.nm-ws-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.nm-ws-kpis article{min-height:150px;padding:20px;border:1px solid #e4e9f1;border-radius:16px;background:#fff;box-shadow:0 8px 25px rgba(15,35,70,.04)}.nm-ws-kpis span{display:block;font-size:.78rem;font-weight:750;color:#17335c}.nm-ws-kpis strong{display:block;margin:17px 0 7px;font-size:1.75rem;color:#0b2b5a}.nm-ws-kpis article:first-child strong{color:#0aa86d}.nm-ws-kpis small{color:#79879b}.nm-ws-panel{margin-top:18px;padding:20px;border:1px solid #e4e9f1;border-radius:16px;background:#fff}.nm-ws-panel h2,.nm-ws-section h2{margin:0 0 15px;font-size:1rem;color:#102c55}.nm-consideration-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}.nm-consideration-grid a{display:flex;justify-content:space-between;align-items:center;padding:11px 4px;text-decoration:none;color:#29476d;font-size:.88rem}.nm-consideration-grid a:hover{color:#075ee8}.nm-ws-section{margin-top:24px}.nm-tool-launcher{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.nm-tool-launcher a{min-height:135px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-decoration:none;text-align:center;border:1px solid #e5eaf2;border-radius:16px;background:#fff;color:#14315d;font-size:.86rem;font-weight:700;box-shadow:0 8px 20px rgba(15,35,70,.035);transition:.18s}.nm-tool-launcher a:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(15,35,70,.09)}.nm-tool-launcher b{font-size:1.8rem;color:#0877ef}.nm-tool-launcher a:nth-child(3) b,.nm-tool-launcher a:nth-child(6) b{color:#7a4ce0}.nm-tool-launcher a:nth-child(4) b{color:#f27c24}.nm-tool-launcher a:nth-child(5) b{color:#11a56e}.nm-section-heading{display:flex;align-items:center;justify-content:space-between}.nm-section-heading>a{font-size:.82rem;text-decoration:none;color:#075ee8}.nm-plan-table{overflow:hidden;border:1px solid #e5eaf2;border-radius:14px;background:#fff}.nm-plan-table .head,.nm-plan-table>a,#workspace-plan-rows>a{display:grid;grid-template-columns:2fr 1fr 1fr;align-items:center;padding:12px 16px}.nm-plan-table .head{font-size:.72rem;color:#7e8ba0;background:#fbfcfe}.nm-plan-table>a,#workspace-plan-rows>a{border-top:1px solid #edf0f5;text-decoration:none;color:#1c385f;font-size:.85rem}.nm-plan-table em{font-style:normal;font-size:.67rem;padding:3px 7px;border-radius:999px;background:#eaf3ff;color:#075ee8;margin-left:8px}.nm-plan-table>a span:last-child,#workspace-plan-rows>a span:last-child{text-align:right;font-size:1.2rem}
@media(max-width:1050px){.nm-stage-grid,.nm-core-tool-grid{grid-template-columns:repeat(2,1fr)}.nm-workspace-shell{grid-template-columns:1fr}.nm-workspace-sidebar{display:none}.nm-ws-kpis{grid-template-columns:repeat(2,1fr)}.nm-tool-launcher{grid-template-columns:repeat(3,1fr)}}@media(max-width:680px){.nm-v2-hero{padding:38px 18px}.nm-stage-grid,.nm-core-tool-grid,.nm-ws-kpis,.nm-consideration-grid{grid-template-columns:1fr}.nm-workspace-main{padding:22px 16px}.nm-ws-topline{gap:15px;flex-direction:column}.nm-tool-launcher{grid-template-columns:repeat(2,1fr)}.nm-plan-table .head{display:none}.nm-plan-table>a,#workspace-plan-rows>a{grid-template-columns:1fr auto}.nm-plan-table>a span:nth-child(2),#workspace-plan-rows>a span:nth-child(2){display:none}}

/* v149.294 retirement planner entry — presentation/navigation only */
.nm-rp-entry{max-width:1120px;margin:0 auto;padding:58px 28px 80px}.nm-rp-entry-head{max-width:720px;margin-bottom:30px}.nm-rp-back{display:inline-block;margin-bottom:28px;color:#55708f;text-decoration:none;font-size:.86rem;font-weight:700}.nm-rp-back:hover{color:#075ee8}.nm-rp-kicker,.nm-rp-label{display:block;color:#0877ef;font-size:.72rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.nm-rp-entry-head h1{margin:8px 0 12px;color:#0a2452;font-size:clamp(2.4rem,5vw,4rem);line-height:1.03;letter-spacing:-.05em}.nm-rp-entry-head p{margin:0;color:#64758c;font-size:1.05rem;line-height:1.7}.nm-rp-current{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:22px;padding:28px 30px;border:1px solid #dbe6f5;border-radius:20px;background:linear-gradient(135deg,#f7fbff,#eef6ff);box-shadow:0 16px 38px rgba(15,35,70,.06)}.nm-rp-current h2,.nm-rp-choice h2{margin:7px 0 8px;color:#102c55;font-size:1.35rem}.nm-rp-current p,.nm-rp-choice p{margin:0;color:#67788f;line-height:1.6}.nm-rp-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.nm-rp-choice{display:flex;min-height:330px;flex-direction:column;padding:30px;border:1px solid #e2e8f1;border-radius:20px;background:#fff;box-shadow:0 12px 32px rgba(15,35,70,.045)}.nm-rp-choice-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:22px;border-radius:14px;background:#edf5ff;font-size:1.35rem}.nm-rp-choice:nth-child(2) .nm-rp-choice-icon{background:#f3efff}.nm-rp-choice small{display:block;margin:15px 0 24px;color:#8693a5}.nm-rp-choice .btn{margin-top:auto;align-self:flex-start}.nm-rp-footnote{max-width:860px;margin:26px auto 0;text-align:center;color:#8290a3;font-size:.8rem;line-height:1.6}@media(max-width:720px){.nm-rp-entry{padding:34px 16px 56px}.nm-rp-current{align-items:flex-start;flex-direction:column}.nm-rp-choice-grid{grid-template-columns:1fr}.nm-rp-choice{min-height:0}}

/* v149.295 — Retirement Planner workspace modernization (presentation only) */
.nm-planner-header { margin-bottom: 14px; }
.nm-planner-back { display:inline-flex; margin-bottom:10px; font-size:12px; font-weight:700; color:var(--color-primary); text-decoration:none; }
.nm-planner-back:hover { text-decoration:underline; }
.nm-planner-title-row { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.nm-planner-kicker { display:block; margin-bottom:5px; color:var(--color-text-muted); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.nm-planner-header-actions { display:flex; align-items:center; gap:9px; flex-shrink:0; }
.nm-planner-section-nav { position:sticky; top:0; z-index:20; display:flex; gap:6px; overflow-x:auto; padding:9px; margin:0 0 12px; border:1px solid var(--color-divider); border-radius:14px; background:color-mix(in srgb, var(--color-surface) 92%, transparent); box-shadow:0 5px 18px rgb(15 23 42 / 6%); backdrop-filter:blur(12px); }
.nm-planner-section-nav a { flex:0 0 auto; padding:7px 10px; border-radius:9px; color:var(--color-text-muted); font-size:12px; font-weight:700; text-decoration:none; }
.nm-planner-section-nav a:hover { color:var(--color-primary); background:var(--color-primary-highlight); }
.nm-planner-context { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 15px; margin-bottom:14px; border:1px solid var(--color-divider); border-radius:12px; background:linear-gradient(135deg, var(--color-surface), var(--color-primary-highlight)); }
.nm-planner-context > div { display:flex; flex-direction:column; gap:2px; }
.nm-planner-context strong { font-size:13px; }
.nm-planner-context span { color:var(--color-text-muted); font-size:11.5px; line-height:1.45; }
.nm-planner-context .nm-planner-status { flex-shrink:0; padding:5px 8px; border:1px solid color-mix(in srgb, var(--color-primary) 28%, transparent); border-radius:999px; color:var(--color-primary); background:var(--color-surface); font-weight:800; }
.nm-planner-anchor { scroll-margin-top:82px; }
#view-post-retirement .form-section { border-radius:14px; box-shadow:0 3px 14px rgb(15 23 42 / 4%); overflow:hidden; }
#view-post-retirement .form-section-header { padding-top:14px; padding-bottom:14px; }
#view-post-retirement .form-section[open] > .form-section-header { border-bottom:1px solid var(--color-divider); }
@media (max-width: 760px) {
  .nm-planner-title-row { align-items:flex-start; flex-direction:column; }
  .nm-planner-header-actions { width:100%; }
  .nm-planner-header-actions .btn { flex:1; }
  .nm-planner-context { align-items:flex-start; flex-direction:column; }
  .nm-planner-section-nav { top:0; border-radius:10px; }
}

/* v149.298 — Nestmint Workspace comprehensive UI layer.
   Presentation and navigation only. Existing element IDs, events, simulations,
   tax logic, strategy logic, Roth logic, Deep Dive tools, Legacy results,
   exports, and reports remain intact. */
:root{
  --nm-ink:#0b2347;--nm-muted:#667892;--nm-line:#e4eaf2;--nm-bg:#f7f9fc;
  --nm-blue:#0b67e3;--nm-purple:#7251d6;--nm-orange:#e97822;--nm-violet:#7657cc;
  --nm-radius:16px;--nm-shadow:0 10px 30px rgba(20,42,78,.065);
}
#view-dashboard{background:var(--nm-bg)}
#view-dashboard .dash-container{max-width:1500px;padding-bottom:64px}
#view-dashboard .dash-header{background:linear-gradient(135deg,#fff 0%,#f7fbff 100%);border:1px solid var(--nm-line);border-radius:18px;padding:22px 24px;margin-bottom:16px;box-shadow:var(--nm-shadow)}
#view-dashboard .page-title{color:var(--nm-ink);letter-spacing:-.03em}
#view-dashboard .page-subtitle{color:var(--nm-muted)}
#view-dashboard .view-toggle-bar{position:sticky;top:8px;z-index:35;padding:6px;background:rgba(255,255,255,.93);backdrop-filter:blur(14px);border:1px solid var(--nm-line);border-radius:14px;box-shadow:0 8px 25px rgba(18,42,80,.06)}
#view-dashboard .view-toggle-btn{border-radius:9px;font-weight:700;color:#536984}
#view-dashboard .view-toggle-btn.active{background:#eaf3ff;color:var(--nm-blue);box-shadow:none}
#view-dashboard .kpi-card,#view-dashboard .chart-card,#view-dashboard .spreadsheet-card,#view-dashboard .planning-tool-card{border:1px solid var(--nm-line);border-radius:var(--nm-radius);box-shadow:var(--nm-shadow);background:#fff}
#view-dashboard .kpi-card{min-height:112px}
#view-dashboard .kpi-label{color:#61728a;font-weight:700}
#view-dashboard .kpi-value{color:var(--nm-ink);letter-spacing:-.035em}
.nm-analysis-module>.post-strategy-section{position:relative}
.nm-analysis-module .planning-section-header{padding:18px 20px!important;background:#fff;border:1px solid var(--nm-line);border-radius:var(--nm-radius);box-shadow:var(--nm-shadow)}
.nm-analysis-module .planning-section-header h2{font-size:1.35rem!important;color:var(--nm-ink)}
.nm-analysis-module .planning-section-header p{font-size:.8rem!important;color:var(--nm-muted)!important;margin-top:3px!important}
.nm-strategy-module .planning-section-header svg{color:var(--nm-purple)!important}
.nm-strategy-module #tool-post-compare{border-top:4px solid var(--nm-purple)!important;overflow:hidden}
.nm-strategy-module #tool-post-compare>.planning-tool-heading{padding:17px 18px!important;background:linear-gradient(90deg,#f8f5ff,#fff)}
.nm-strategy-module #tool-post-compare .planning-tool-label{font-size:1rem}
.nm-strategy-module #compare-run-btn{min-height:46px;border-radius:11px;background:linear-gradient(135deg,#6844cf,#805fe0);box-shadow:0 8px 18px rgba(112,79,209,.22)}

.nm-strategy-module .strategy-rank-toggle{border-radius:12px!important;background:#fafbfe!important}
.nm-strategy-module .rank-pill{min-height:30px}
.nm-deepdive-module>.post-strategy-section{display:grid;grid-template-columns:190px minmax(0,1fr) 220px;gap:18px;align-items:start}
.nm-deepdive-module .planning-section-header{grid-column:1/-1}.nm-deepdive-module details.planning-tool-card{scroll-margin-top:88px;margin-bottom:12px;overflow:hidden}
.nm-deepdive-module .planning-tool-toggle{min-height:58px;padding:13px 16px}
.nm-deepdive-module details[open]>.planning-tool-toggle{background:#f7faff;border-bottom:1px solid var(--nm-line)}
.nm-deepdive-module .planning-tool-body{padding:16px 18px 20px}
.nm-legacy-module .planning-section-header svg{color:var(--nm-violet)!important}
.nm-legacy-module #legacy-results{padding:20px;border:1px solid var(--nm-line);border-top:4px solid var(--nm-violet);border-radius:var(--nm-radius);background:#fff;box-shadow:var(--nm-shadow)}
/* Unified buttons and tables */
.btn{border-radius:10px;min-height:38px;font-weight:700;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{box-shadow:0 7px 16px rgba(10,103,227,.16)}
.spreadsheet-table,.scenario-compare-table{border-collapse:separate;border-spacing:0}
.spreadsheet-table thead th,.scenario-compare-table thead th{background:#f4f7fb;color:#536984;font-weight:750}
/* Neutral, factual language blocks */
@media(max-width:1180px){.nm-deepdive-module>.post-strategy-section{grid-template-columns:170px minmax(0,1fr)}}
@media(max-width:820px){.nm-deepdive-module>.post-strategy-section{display:block}.nm-analysis-module .planning-section-header{padding:15px!important}}

/* v149.299 — Deep Dive professional workspace completion.
   Presentation-only: preserves every existing Deep Dive tool, ID, event, and engine. */.nm-deepdive-module>.post-strategy-section{grid-template-columns:210px minmax(0,1fr) 238px}.nm-deepdive-module details.planning-tool-card{transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.nm-deepdive-module details.planning-tool-card:hover{border-color:#d4deeb;box-shadow:0 12px 30px rgba(20,42,78,.075)}.nm-deepdive-module .planning-tool-label{color:var(--nm-ink);font-weight:800}@media(max-width:1260px){.nm-deepdive-module>.post-strategy-section{grid-template-columns:185px minmax(0,1fr)}}

/* v149.300 — Legacy Planner professional workspace.
   Presentation-only; all existing result IDs and calculation paths remain intact. */
.nm-legacy-workspace{position:relative}
.nm-legacy-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:23px 24px;margin-bottom:12px;border:1px solid var(--nm-line);border-radius:18px;background:radial-gradient(circle at 88% 12%,rgba(126,86,194,.12),transparent 32%),linear-gradient(135deg,#fff 0%,#fbf9ff 64%,#f6f1ff 100%);box-shadow:var(--nm-shadow)}
.nm-legacy-eyebrow{display:block;margin-bottom:4px;color:var(--nm-violet);font-size:.69rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.nm-legacy-hero h2{margin:0 0 7px;color:var(--nm-ink);font-size:1.7rem;letter-spacing:-.04em}
.nm-legacy-hero p{max-width:760px;margin:0;color:var(--nm-muted);font-size:.86rem;line-height:1.58}
.nm-legacy-hero-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.nm-legacy-disclaimer{display:flex;align-items:flex-start;gap:7px;padding:11px 14px;margin-bottom:14px;border:1px solid #eadfbd;border-radius:12px;background:#fffaf0;color:#725b24;font-size:.73rem;line-height:1.5}
.nm-legacy-disclaimer strong{white-space:nowrap}.nm-legacy-disclaimer span{color:#806d42}
.nm-legacy-layout{display:grid;grid-template-columns:190px minmax(0,1fr) 230px;gap:18px;align-items:start}
.nm-legacy-nav{position:sticky;top:78px;max-height:calc(100vh - 96px);overflow:auto;padding:11px;border:1px solid var(--nm-line);border-radius:14px;background:#fff;box-shadow:var(--nm-shadow)}
.nm-legacy-nav>strong{display:block;padding:7px 9px 9px;color:var(--nm-ink);font-size:.69rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
.nm-legacy-nav a{display:block;padding:8px 9px;border-radius:9px;color:#596d86;text-decoration:none;font-size:.75rem;font-weight:700;line-height:1.25}
.nm-legacy-nav a:hover{background:#f3effc;color:var(--nm-violet)}
.nm-legacy-main{min-width:0}
.nm-legacy-module #legacy-results{padding:0;border:0;border-top:0;border-radius:0;background:transparent;box-shadow:none}
.nm-legacy-module #legacy-results>.nm-legacy-section,.nm-legacy-module #legacy-results>div{scroll-margin-top:90px;padding:20px;margin:0 0 14px;border:1px solid var(--nm-line);border-radius:16px;background:#fff;box-shadow:var(--nm-shadow)}
.nm-legacy-module #legacy-results>div:first-child{border-top:4px solid var(--nm-violet)}
.nm-legacy-section-title{scroll-margin-top:90px;color:var(--nm-ink)!important;font-size:1.02rem!important;letter-spacing:-.015em}
.nm-legacy-section-title svg{color:var(--nm-violet)!important;stroke:var(--nm-violet)!important}
.nm-legacy-context{position:sticky;top:78px;padding:17px;border-radius:15px;background:linear-gradient(180deg,#39245f,#251842);color:#fff;box-shadow:0 16px 38px rgba(49,29,82,.23)}
.nm-legacy-context-kicker{display:block;margin-bottom:5px;color:#cbbbe8;font-size:.61rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.nm-legacy-context h3{margin:0 0 12px;font-size:.98rem}.nm-legacy-context dl{margin:0}
.nm-legacy-context dl>div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid rgba(255,255,255,.12)}
.nm-legacy-context dt{color:#d1c6e4;font-size:.7rem}.nm-legacy-context dd{margin:0;font-size:.75rem;font-weight:800}
.nm-legacy-context-actions{display:grid;gap:7px;margin-top:12px}
.nm-legacy-context-actions a,.nm-legacy-context-actions button{width:100%;padding:9px 10px;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:transparent;color:#fff;text-align:center;text-decoration:none;font-size:.71rem;font-weight:750;cursor:pointer}
.nm-legacy-context-actions a:hover,.nm-legacy-context-actions button:hover{background:rgba(255,255,255,.09)}
.nm-legacy-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 24px;border:1px dashed #cbd6e5;border-radius:16px;background:#fbfcfe;text-align:center;color:var(--nm-muted)}
.nm-legacy-empty strong{color:var(--nm-ink);font-size:1rem}.nm-legacy-empty span{font-size:.8rem}.nm-legacy-empty .btn{margin-top:7px}
.nm-legacy-module #legacy-results input,.nm-legacy-module #legacy-results select{border-radius:9px!important;border-color:#d7e0ec!important;background:#fbfcfe!important}
.nm-legacy-module #legacy-results button{border-radius:9px!important}
@media(max-width:1220px){.nm-legacy-layout{grid-template-columns:175px minmax(0,1fr)}.nm-legacy-context{position:static;grid-column:1 / -1;margin-top:14px}}
@media(max-width:820px){.nm-legacy-hero{align-items:flex-start;flex-direction:column;padding:18px}.nm-legacy-hero-actions{width:100%;justify-content:flex-start}.nm-legacy-disclaimer{display:block}.nm-legacy-disclaimer strong{display:block;margin-bottom:3px}.nm-legacy-layout{display:block}.nm-legacy-nav{position:static;display:flex;overflow:auto;gap:4px;max-height:none;margin-bottom:12px}.nm-legacy-nav>strong{display:none}.nm-legacy-nav nav{display:flex;gap:4px}.nm-legacy-nav a{flex:0 0 auto;white-space:nowrap}.nm-legacy-module #legacy-results>.nm-legacy-section,.nm-legacy-module #legacy-results>div{padding:16px}}

/* v149.301 — Reports Center */
.nm-reports-shell{max-width:1280px;margin:0 auto;padding:40px 32px 72px;}
.nm-reports-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:28px;}
.nm-reports-header h1{font-family:var(--font-display);font-size:clamp(30px,4vw,46px);letter-spacing:-.035em;margin:4px 0 8px;color:var(--color-text);}
.nm-reports-header p{margin:0;color:var(--color-text-muted);font-size:15px;max-width:680px;line-height:1.6;}
.nm-eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);}
.nm-report-status{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;margin-bottom:34px;border:1px solid color-mix(in srgb,var(--color-primary) 18%,var(--color-border));background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 7%,white),white);border-radius:16px;box-shadow:0 8px 26px rgba(20,31,55,.06);}
.nm-report-status div{display:flex;flex-direction:column;gap:3px}.nm-report-status strong{font-size:14px}.nm-report-status span{font-size:12px;color:var(--color-text-muted)}
.nm-report-group{margin-top:36px}.nm-report-group-heading{display:flex;justify-content:space-between;gap:28px;align-items:end;margin-bottom:14px;padding:0 2px}.nm-report-group-heading span{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--color-primary)}.nm-report-group-heading h2{font-family:var(--font-display);font-size:23px;margin:4px 0 0}.nm-report-group-heading p{max-width:480px;margin:0;color:var(--color-text-muted);font-size:12px;line-height:1.55;text-align:right}
.nm-report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.nm-report-card{min-height:260px;display:flex;flex-direction:column;gap:16px;padding:22px;border:1px solid var(--color-border);border-radius:18px;background:var(--color-surface,#fff);box-shadow:0 8px 28px rgba(20,31,55,.055);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.nm-report-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(20,31,55,.09);border-color:color-mix(in srgb,var(--color-primary) 22%,var(--color-border))}.nm-report-card.nm-report-featured{background:linear-gradient(145deg,color-mix(in srgb,var(--color-primary) 6%,white),white 62%);border-color:color-mix(in srgb,var(--color-primary) 22%,var(--color-border))}.nm-report-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--color-primary) 10%,white);color:var(--color-primary);font-size:20px;font-weight:700}.nm-report-card>div:nth-child(2){flex:1}.nm-report-tag{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:6px}.nm-report-card h3{font-size:17px;margin:0 0 8px}.nm-report-card p{font-size:12px;line-height:1.65;color:var(--color-text-muted);margin:0}.nm-report-card .btn{width:100%;justify-content:center}.nm-report-note{display:flex;gap:10px;align-items:flex-start;margin-top:34px;padding:16px 18px;border-radius:12px;background:var(--color-surface-alt);font-size:12px;color:var(--color-text-muted)}.nm-report-note strong{color:var(--color-text);white-space:nowrap}
@media(max-width:900px){.nm-report-grid{grid-template-columns:1fr 1fr}.nm-report-group-heading{align-items:flex-start;flex-direction:column;gap:6px}.nm-report-group-heading p{text-align:left}.nm-reports-header{flex-direction:column}.nm-report-status{align-items:flex-start;flex-direction:column}.nm-report-status .btn{width:100%}}
@media(max-width:620px){.nm-reports-shell{padding:26px 16px 56px}.nm-report-grid{grid-template-columns:1fr}.nm-report-card{min-height:0}.nm-report-note{flex-direction:column}.nm-report-note strong{white-space:normal}}

/* v149.302 — New retirement plan flow. Presentation and routing only. */
.nm-new-plan-shell{width:min(900px,calc(100% - 32px));margin:0 auto;padding:38px 0 64px}
.nm-new-plan-head{margin:20px 0 24px;text-align:center}
.nm-new-plan-head h1{margin:5px 0 9px;color:var(--nm-ink,#102c55);font-size:2.15rem;letter-spacing:-.045em}
.nm-new-plan-head p{max-width:650px;margin:0 auto;color:var(--nm-muted,#6d7d95);line-height:1.6}
.nm-new-plan-card{padding:28px;border:1px solid var(--nm-line,#e4e9f1);border-radius:20px;background:#fff;box-shadow:0 18px 45px rgba(15,35,70,.08)}
.nm-new-plan-name-field{max-width:560px;margin:0 auto 28px}
.nm-new-plan-name-field label{font-weight:750;color:#17335c}
.nm-new-plan-name-field input{height:50px;font-size:1rem}
.nm-new-plan-name-field small{display:block;margin-top:7px;color:#79879b}
.nm-new-plan-method{padding:0;margin:0;border:0}
.nm-new-plan-method legend{font-size:1rem;font-weight:800;color:#102c55}
.nm-new-plan-method>p{margin:5px 0 14px;color:#79879b;font-size:.85rem}
.nm-new-plan-option{display:grid;grid-template-columns:auto 42px 1fr;align-items:center;gap:12px;margin-top:10px;padding:17px;border:1px solid #e4e9f1;border-radius:15px;background:#fbfcfe;cursor:pointer;transition:.18s}
.nm-new-plan-option:hover{border-color:#a9c9f7;background:#f7fbff}
.nm-new-plan-option:has(input:checked){border-color:#5b9df2;background:#f2f8ff;box-shadow:0 0 0 3px rgba(7,94,232,.08)}
.nm-new-plan-option input{width:18px;height:18px;accent-color:#075ee8}
.nm-new-plan-option-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#fff;font-size:1.2rem;box-shadow:0 4px 12px rgba(15,35,70,.06)}
.nm-new-plan-option strong,.nm-new-plan-option small{display:block}
.nm-new-plan-option strong{color:#14315d;margin-bottom:4px}
.nm-new-plan-option small{color:#718198;line-height:1.4}
.nm-new-plan-note{display:flex;gap:7px;flex-direction:column;margin-top:20px;padding:14px 16px;border-radius:13px;background:#f7f9fc;color:#5f7088;font-size:.83rem;line-height:1.45}
.nm-new-plan-note strong{color:#29476d}
.nm-new-plan-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.nm-new-plan-error{margin:10px 0 0;text-align:right;color:#b42318;font-size:.82rem;font-weight:700}
@media(max-width:620px){.nm-new-plan-shell{width:min(100% - 24px,900px);padding-top:24px}.nm-new-plan-card{padding:20px}.nm-new-plan-head h1{font-size:1.8rem}.nm-new-plan-option{grid-template-columns:auto 1fr}.nm-new-plan-option-icon{display:none}.nm-new-plan-actions{flex-direction:column-reverse}.nm-new-plan-actions .btn{width:100%}.nm-new-plan-error{text-align:left}}

/* v149.303 — Final Nestmint Workspace completion pass.
   UI-only. Preserves financial engines, reports, spreadsheet views, IDs, and state contracts. */
:root{
  --nm-focus:0 0 0 3px rgba(11,103,227,.22);
  --nm-card-radius:16px;
  --nm-control-radius:10px;
  --nm-page-max:1440px;
}
html{scroll-behavior:smooth}
body{background:#f5f7fb}
.skip-to-content{position:fixed;left:14px;top:-60px;z-index:10000;padding:10px 14px;border-radius:10px;background:#102c55;color:#fff;font-weight:800;text-decoration:none;transition:top .16s ease}
.skip-to-content:focus{top:12px}
:where(a,button,input,select,textarea,summary):focus-visible{outline:none;box-shadow:var(--nm-focus)!important}
:where(button,.btn,[role="button"]):disabled{cursor:not-allowed;opacity:.55;transform:none!important}
.page{max-width:var(--nm-page-max);margin-inline:auto}
.card,.chart-card,.planning-tool-card,.kpi-card{border-radius:var(--nm-card-radius)}
input,select,textarea{border-radius:var(--nm-control-radius)}
.table-scroll{border:1px solid var(--nm-line,#e1e7f0);border-radius:13px;background:#fff}
.data-table thead th,.spreadsheet-table thead th{position:sticky;top:0;z-index:2;background:#f2f6fb!important;box-shadow:inset 0 -1px #dde5ef}
.data-table tbody tr:hover,.spreadsheet-table tbody tr:hover{background:#f7faff}

/* Shared product-shell finish */
.desktop-nav{backdrop-filter:saturate(160%) blur(14px);background:rgba(255,255,255,.93)!important;border-bottom:1px solid rgba(214,224,237,.9)}
.nav-link,.mobile-nav-link{border-radius:9px}
.nav-link.active,.mobile-nav-link.active{background:#eaf3ff;color:#075ee8}
.nm-shell-section-label{display:block;padding:13px 12px 5px;color:#98a5b6;font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.nm-route-title{display:flex;align-items:center;gap:8px;color:#6c7c92;font-size:12px;font-weight:700;margin-bottom:10px}
.nm-route-title a{color:#476586;text-decoration:none}.nm-route-title a:hover{color:#075ee8}
.nm-view-enter{animation:nmViewEnter .2s ease both}
@keyframes nmViewEnter{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Strategy Engine — preserve current cards, refine presentation */
.nm-strategy-module{position:relative}
.nm-strategy-module #tool-post-compare{border:1px solid #dedff0!important;border-top:4px solid #6c55c2!important;border-radius:17px!important;box-shadow:0 10px 30px rgba(46,37,92,.075)!important;overflow:hidden}
.nm-strategy-module #tool-post-compare>.planning-tool-heading{padding:16px 18px!important;background:#faf9ff;border-bottom:1px solid #ebe8f7}
.nm-strategy-module #tool-post-compare>.planning-tool-body{padding:18px!important}
.nm-strategy-module .rank-pill{min-height:30px!important}

.nm-strategy-module .strategy-card,.nm-strategy-module [class*="strategy-card"]{height:100%;border:1px solid #e0e3ed!important;border-radius:14px!important;background:#fff!important;box-shadow:0 7px 22px rgba(26,35,64,.055)!important;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.nm-strategy-module .strategy-card:hover,.nm-strategy-module [class*="strategy-card"]:hover{transform:translateY(-2px);border-color:#bfb4ea!important;box-shadow:0 14px 30px rgba(52,40,111,.11)!important}

/* Roth Conversion Explorer completion */
.nm-roth-module{border:1px solid #ecdccc!important;border-top:4px solid #dd7c2f!important;border-radius:17px!important;box-shadow:0 11px 30px rgba(105,62,23,.07)!important;overflow:hidden}
.nm-roth-module>.planning-tool-toggle,.nm-roth-module>.planning-tool-heading{background:linear-gradient(90deg,#fffaf5,#fff)!important}
.nm-roth-module .roth-ex-kpis{gap:11px}.nm-roth-module .roth-ex-kpi{border:1px solid #e8e3dc;border-radius:13px;background:#fff;box-shadow:0 5px 17px rgba(67,43,26,.045)}
.nm-roth-module canvas{border-radius:12px}
.nm-roth-module #roth-ex-optimizer-results>div{background:#faf8ff!important;border-color:#ddd5f2!important}

/* Empty states, feedback, and responsive finishing */
.nm-empty-state{display:grid;place-items:center;min-height:180px;padding:30px;border:1px dashed #cbd6e5;border-radius:15px;background:#fbfcfe;text-align:center;color:#708097}
.nm-empty-state strong{display:block;margin-bottom:5px;color:#18345b;font-size:.95rem}
.nm-live-status{position:fixed;right:18px;bottom:18px;z-index:9999;max-width:360px;padding:11px 14px;border-radius:11px;background:#102c55;color:#fff;box-shadow:0 13px 34px rgba(14,31,57,.25);font-size:.78rem;font-weight:700;transform:translateY(18px);opacity:0;pointer-events:none;transition:.2s}
.nm-live-status.is-visible{transform:none;opacity:1}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* v149.304 — UI integrity fix pass (presentation-only).
   SVG sizing for the icon wrappers converted from Unicode glyphs, honest
   empty/hint states for the data-driven Workspace, and scroll offsets for
   the restored v149.295 planner section navigator. */
.nm-stage-icon svg{display:block;opacity:.85}
.nm-tool-launcher b svg{display:block}
.nm-report-icon{display:grid;place-items:center;color:#0b67e3}
.nm-report-icon svg{display:block}
.nm-rp-choice-icon svg,.nm-new-plan-option-icon svg{display:block;color:#0b67e3}
.nm-ws-kpi-hint{margin:10px 2px 0;color:#79879b;font-size:.78rem}
.nm-ws-kpi-hint[hidden]{display:none}
.nm-plan-empty{padding:26px 18px;border-top:1px solid #edf0f5;text-align:center;color:#7e8ba0;font-size:.82rem;line-height:1.55}
#view-post-retirement .form-section{scroll-margin-top:88px}
#view-post-retirement #roth-conversion-section,#view-post-retirement #healthcare-input-section{scroll-margin-top:88px}

/* ============================================================
   v149.311 — Welcome page rebuild (approved mockup, nm-v2).
   Green brand palette scoped to the marketing page; the in-app
   palette is unchanged (app-wide rebrand is a separate decision).
   ============================================================ */
:root{--v2-green:#1d9f5f;--v2-green-deep:#0f6b3f;--v2-green-soft:#e7f6ee;--v2-ink:#0e2233;--v2-body:#4a5c6b;--v2-line:#e3e9ef;--v2-navy:#0d1f33}
body:has(#view-welcome.active) .app-header{display:none}
.nm-v2-page{background:#fff;color:var(--v2-ink)}
.nm-v2-page .hero-title{color:var(--v2-ink)}
.nm-v2-page .hero-accent{color:var(--v2-green)}
.nm-v2-nav{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1180px;margin:0 auto;padding:18px 22px}
.nm-v2-brand{display:inline-flex;align-items:center;gap:9px;font-size:1.25rem;font-weight:850;color:var(--v2-ink);text-decoration:none;letter-spacing:-.02em}
.nm-v2-navlinks{display:flex;gap:26px}
.nm-v2-navlinks a{color:#3c4f60;font-size:.9rem;font-weight:650;text-decoration:none}
.nm-v2-navlinks a:hover{color:var(--v2-green-deep)}
.nm-v2-navctas{display:flex;gap:10px;align-items:center}
.nm-v2-btn-primary{background:var(--v2-green);border:1px solid var(--v2-green);color:#fff;font-weight:750;border-radius:10px;padding:10px 18px;cursor:pointer}
.nm-v2-btn-primary:hover{background:var(--v2-green-deep);border-color:var(--v2-green-deep)}
.nm-v2-btn-ghost{background:transparent;border:1px solid var(--v2-line);color:var(--v2-ink);font-weight:700;border-radius:10px;padding:10px 16px;cursor:pointer}
.nm-v2-btn-outline{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--v2-line);color:var(--v2-ink);font-weight:700;border-radius:10px;padding:10px 18px;text-decoration:none}
.nm-v2-btn-lg{padding:14px 24px;font-size:1rem;border-radius:12px}
.nm-v2-hero{display:grid;grid-template-columns:minmax(320px,540px) 1fr;gap:38px;align-items:center;max-width:1180px;margin:0 auto;padding:44px 22px 66px}
.nm-v2-badge{display:inline-block;background:#f2f9f5;border:1px solid #cdeadb;color:var(--v2-green-deep);border-radius:999px;padding:7px 14px;font-size:.78rem;font-weight:750;margin-bottom:18px}
.nm-v2-hero-desc{color:var(--v2-body);font-size:1.02rem;line-height:1.65;max-width:460px;margin:14px 0 22px}
.nm-v2-hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.nm-v2-hero-visual{position:relative;min-height:340px}
.nm-v2-laptop{position:relative;margin-right:44px;filter:drop-shadow(0 26px 44px rgba(13,31,51,.18))}
.nm-v2-laptop-screen{border:10px solid #16222e;border-bottom-width:14px;border-radius:16px 16px 4px 4px;overflow:hidden;background:#16222e;aspect-ratio:14/9}
.nm-v2-laptop-screen img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;background:#fff}
.nm-v2-laptop-base{height:12px;background:linear-gradient(#d7dee5,#b9c3cc);border-radius:0 0 14px 14px;margin:0 -26px}
.nm-v2-phone{position:absolute;right:-6px;bottom:-22px;width:120px;aspect-ratio:9/18;border:7px solid #16222e;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 18px 34px rgba(13,31,51,.24)}
.nm-v2-phone img{width:100%;max-width:none;height:100%;object-fit:cover;object-position:center;display:block;background:#fff}
.nm-v2-section{max-width:1180px;margin:0 auto;padding:54px 22px}
.nm-v2-section h2{text-align:center;font-size:1.7rem;letter-spacing:-.03em;color:var(--v2-ink);margin:0 0 8px}
.nm-v2-section-sub{text-align:center;color:var(--v2-body);margin:0 0 30px}
.nm-v2-tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.nm-v2-tool-card{border:1px solid var(--v2-line);border-radius:16px;padding:18px;background:#fff;box-shadow:0 8px 26px rgba(13,31,51,.05)}
.nm-v2-tool-card h3{margin:0 0 12px;font-size:.98rem;color:var(--v2-ink)}
.nm-v2-tool-card p{margin:12px 0 0;color:var(--v2-body);font-size:.83rem;line-height:1.55}
.nm-v2-mini{display:block;width:100%;height:96px;border:1px solid var(--v2-line);border-radius:10px;padding:6px;color:var(--v2-ink);background:#fbfcfe}
.nm-v2-strategy-list{display:flex;flex-direction:column;gap:6px;font-size:.76rem;font-weight:650;color:#54687a;overflow:hidden}
.nm-v2-strategy-list span{border:1px solid var(--v2-line);border-radius:8px;padding:4px 9px;background:#fff}
.nm-v2-strategy-list .is-active{background:var(--v2-green-soft);border-color:#bfe6d1;color:var(--v2-green-deep)}
.nm-v2-stagewrap{background:#f6f9fb;border-radius:24px;max-width:1180px}
.nm-v2-stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.nm-v2-stage-card{position:relative;overflow:hidden;border:1px solid var(--v2-line);border-radius:16px;background:#fff;padding:20px 20px 20px;min-height:200px}
.nm-v2-stage-card h3{margin:12px 0 8px;color:var(--v2-ink);font-size:1.02rem}
.nm-v2-stage-card p{margin:0;color:var(--v2-body);font-size:.84rem;line-height:1.55}
.nm-v2-photos .nm-v2-stage-card p{max-width:60%}
.nm-v2-stage-badge{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;color:#fff}
.nm-v2-badge-green{background:var(--v2-green)}
.nm-v2-badge-blue{background:#3b6bc4}
.nm-v2-badge-purple{background:#7a5fc4}
/* v149.312 — photos render all-or-nothing: the grid gains .nm-v2-photos only
   when every persona asset loads, so a missing photo yields the consistent
   icon layout on all three cards instead of a lopsided partial state. */
.nm-v2-stage-photo{display:none;position:absolute;right:0;bottom:0;width:38%;height:88%;object-fit:cover;object-position:center top;border-top-left-radius:14px}
.nm-v2-photos .nm-v2-stage-photo{display:block}
.nm-v2-ctaband{display:grid;grid-template-columns:1.2fr 1fr auto;gap:26px;align-items:center;max-width:1180px;margin:26px auto 60px;padding:34px 36px;border-radius:22px;background:var(--v2-navy);color:#eaf1f7}
.nm-v2-ctaband h2{margin:0 0 8px;font-size:1.5rem;letter-spacing:-.02em;color:#fff}
.nm-v2-ctaband h2 span{color:#5fd39a}
.nm-v2-ctaband p{margin:0;color:#b9c8d6;font-size:.9rem}
.nm-v2-ctaband-checks{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-weight:700;font-size:.9rem}
.nm-v2-ctaband-actions{text-align:center}
.nm-v2-ctaband-actions p{margin-top:10px;font-size:.82rem}
.nm-v2-ctaband-actions a{color:#5fd39a;font-weight:700;text-decoration:none}
@media(max-width:1020px){.nm-v2-tool-grid{grid-template-columns:repeat(2,1fr)}.nm-v2-hero{grid-template-columns:1fr}.nm-v2-hero-visual{min-height:0}.nm-v2-ctaband{grid-template-columns:1fr;text-align:center}.nm-v2-ctaband-checks{justify-items:center}}
/* v149.460 — the mobile stage photo is ASPECT-bound, not pixel-height
   bound. The old fixed 150px strip showed only ~27% of a portrait source
   at iPhone width (chin cut off), and a px height makes the visible
   fraction a function of viewport width — wider phones cropped MORE. At
   4/3, the top-anchored cover window (anchor lives in the base rule
   only) fits every face with margin: verified against the shipped PNGs
   (rows 0-174/380, 0-315/460, 0-180/380). */
@media(max-width:680px){.scenario-card-kpis{grid-template-columns:1fr}.nm-live-status{max-width:calc(100vw - 96px)}.nm-v2-navlinks{display:none}.nm-v2-tool-grid,.nm-v2-stage-grid{grid-template-columns:1fr}.nm-v2-stage-card p{max-width:100%}.nm-v2-stage-photo{position:static;width:100%;height:auto;aspect-ratio:4/3;border-radius:12px;margin-top:12px}}

/* v149.313 — approved high-fidelity workspace dashboard */
.nm-dash-view{background:#f6f9fd;min-height:calc(100vh - 72px);padding:16px}.nm-dash-shell{max-width:1680px;margin:auto;display:grid;grid-template-columns:270px 1fr;background:#fff;border:1px solid #e3eaf3;border-radius:26px;box-shadow:0 14px 40px rgba(30,55,90,.08);overflow:hidden;min-height:980px;color:#0d2a5b}.nm-dash-sidebar{padding:24px 18px 20px;border-right:1px solid #e5ebf3;display:flex;flex-direction:column}.nm-dash-brand{display:flex;align-items:center;gap:10px;padding:0 14px 24px;color:#08245a;font-size:28px;font-weight:800;text-decoration:none}.nm-dash-brand svg{width:32px;fill:#0d9f60}.nm-dash-nav{display:flex;flex-direction:column;gap:5px}.nm-dash-nav a{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:12px;color:#14335f;text-decoration:none;font-size:14px;font-weight:600}.nm-dash-nav a span{width:18px;text-align:center;color:#6982a7}.nm-dash-nav a:hover,.nm-dash-nav a.active{background:#eaf4ff;color:#0664e8}.nm-dash-nav a.active span{color:#0664e8}.nm-dash-help{margin-top:auto;position:relative;padding:22px 18px;border:1px solid #e1eaf5;background:linear-gradient(145deg,#f7fbff,#fff);border-radius:16px}.nm-dash-help strong{display:block;margin-bottom:8px}.nm-dash-help p{font-size:12px;line-height:1.6;color:#496486}.nm-dash-help a{font-size:12px;color:#0664e8;font-weight:700;text-decoration:none}.nm-dash-help>span{position:absolute;right:16px;bottom:16px;border:1px solid #8bb9ff;border-radius:50%;padding:7px;color:#0664e8}.nm-dash-main{padding:24px 28px 28px;min-width:0}.nm-dash-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}.nm-dash-head h1{font-size:26px;margin:0 0 7px}.nm-dash-head p{margin:0;color:#60789a}.nm-dash-head-actions{display:flex;align-items:center;gap:12px}.nm-dash-head-actions>button{border:0;background:transparent;color:#5d7699;font-size:20px}.nm-dash-user{display:flex;align-items:center;gap:8px;font-size:13px}.nm-avatar{width:34px;height:34px;border-radius:50%;background:#e7f1ff;display:grid;place-items:center;font-weight:800;color:#125aa8}.nm-dash-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.nm-kpi-card,.nm-panel{border:1px solid #dfe7f1;border-radius:16px;background:#fff;box-shadow:0 4px 16px rgba(36,66,102,.035)}.nm-kpi-card{padding:20px 20px 14px;min-height:218px}.nm-kpi-card h2,.nm-panel h2{font-size:14px;margin:0 0 17px;color:#102d61}.nm-kpi-card>strong{display:block;font-size:27px;letter-spacing:-.5px;margin-bottom:5px}.nm-kpi-card>small,.nm-confidence-row small{display:block;color:#607797;font-size:12px}.nm-confidence-row{display:flex;justify-content:space-between;align-items:center}.nm-confidence-row strong{font-size:32px}.nm-green{color:#12a861!important}.nm-ring{width:68px;height:68px;border-radius:50%;background:conic-gradient(#d8f2e5 0 100%);position:relative}.nm-ring:after{content:"";position:absolute;inset:10px;background:white;border-radius:50%}.nm-spark{width:100%;height:52px;margin:16px 0 4px;overflow:visible}.nm-spark path{fill:none;stroke-width:2}.nm-spark.green path{stroke:#10a85d}.nm-spark.blue path{stroke:#0c66ef}.nm-spark.purple path{stroke:#6940dd}.nm-trend{font-size:11px;margin:6px 0 0;color:#627894}.nm-trend.up{color:#0ea45c}.nm-trend span{color:#627894}.nm-trend.down{color:#5d64a5}.nm-dash-hint{font-size:12px;color:#667d9c;margin:9px 3px 0}.nm-dash-middle{display:grid;grid-template-columns:1fr 1.18fr;gap:16px;margin-top:16px}.nm-panel{padding:20px}.nm-portfolio-panel>small{color:#667d9c;font-size:11px}.nm-portfolio-panel>strong{display:block;font-size:24px;margin:4px 0 12px}.nm-portfolio-body{display:flex;align-items:center;gap:34px}.nm-donut{width:180px;height:180px;border-radius:50%;background:conic-gradient(#dfe7f1 0 100%);position:relative;flex:none}.nm-donut:after{content:"";position:absolute;inset:44px;background:#fff;border-radius:50%}.nm-portfolio-body ul{list-style:none;padding:0;margin:0;flex:1}.nm-portfolio-body li{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:9px;padding:9px 0;font-size:12px}.nm-portfolio-body i{width:7px;height:7px;border-radius:50%}.c1{background:#063985}.c2{background:#08ad5f}.c3{background:#6735d7}.c4{background:#ff8b10}.c5{background:#2e8bd8}.nm-recommend-panel>a:not(.nm-view-link){display:grid;grid-template-columns:40px 1fr 16px;align-items:center;gap:11px;padding:10px 8px;border:1px solid #e1e8f2;border-bottom:0;text-decoration:none;color:#11305e}.nm-recommend-panel>a:nth-of-type(1){border-radius:12px 12px 0 0}.nm-recommend-panel>a:nth-of-type(4){border-bottom:1px solid #e1e8f2;border-radius:0 0 12px 12px}.nm-recommend-panel i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-style:normal;font-size:18px}.nm-recommend-panel i.green{background:#e6f8ef;color:#0aa35c}.nm-recommend-panel i.blue{background:#eaf3ff;color:#0664e8}.nm-recommend-panel i.purple{background:#f1ebff;color:#7242dd}.nm-recommend-panel i.orange{background:#fff2e6;color:#f07811}.nm-recommend-panel b{font-size:12px;display:block}.nm-recommend-panel small{font-size:10px;color:#607797}.nm-recommend-panel em{font-size:21px;color:#6480a6;font-style:normal}.nm-view-link{display:inline-block;margin-top:14px;color:#0664e8;font-size:12px;font-weight:700;text-decoration:none}.nm-dash-bottom{display:grid;grid-template-columns:.78fr 1.22fr;gap:16px;margin-top:16px}.nm-plan-table .head,.nm-plan-table #workspace-plan-rows>a{display:grid;grid-template-columns:1.8fr 1fr .8fr;gap:12px;align-items:center}.nm-plan-table .head{padding:8px 10px;border-bottom:1px solid #e1e8f1;color:#607797;font-size:10px}.nm-plan-table #workspace-plan-rows>a{padding:12px 10px;border-bottom:1px solid #edf1f6;text-decoration:none;color:#14315e;font-size:11px}.nm-plan-table em{background:#eaf3ff;color:#0664e8;border-radius:12px;padding:3px 7px;font-size:9px;font-style:normal}.nm-plan-empty{padding:30px 10px;color:#687e9c;font-size:12px}.nm-planner-header-actions{display:none!important}
@media(max-width:1100px){.nm-dash-shell{grid-template-columns:220px 1fr}.nm-dash-kpis{grid-template-columns:repeat(2,1fr)}.nm-dash-middle,.nm-dash-bottom{grid-template-columns:1fr}.nm-portfolio-body{justify-content:flex-start}}@media(max-width:760px){.nm-dash-view{padding:0}.nm-dash-shell{display:block;border-radius:0}.nm-dash-sidebar{display:none}.nm-dash-main{padding:18px}.nm-dash-head{gap:12px}.nm-dash-head-actions>button,.nm-dash-user{display:none}.nm-dash-kpis{grid-template-columns:1fr}.nm-portfolio-body{flex-direction:column;align-items:flex-start}.nm-plan-table .head{display:none}.nm-plan-table #workspace-plan-rows>a{grid-template-columns:1fr auto}}

/* v149.314 — design-system remediation and trustworthy workspace states. */
.nm-beta-banner{font:inherit;color:var(--color-text);text-align:left;border:1px solid #b9dfca;background:var(--brand-green-soft)}
.nm-beta-banner:hover{border-color:var(--brand-green);box-shadow:var(--shadow-sm)}

.nm-dash-view{background:var(--color-bg)}
.nm-dash-shell{color:var(--color-text);background:var(--color-surface);border-color:var(--color-border);box-shadow:var(--shadow-lg)}
.nm-dash-sidebar{background:var(--color-surface);border-color:var(--color-divider)}
.nm-dash-brand{color:var(--brand-navy)}
.nm-dash-brand svg{fill:var(--brand-green)}
.nm-dash-nav a{min-height:46px;color:var(--color-text-secondary)}
.nm-dash-nav a:hover,.nm-dash-nav a.active{background:var(--action-blue-soft);color:var(--action-blue)}
.nm-dash-nav a span{color:var(--color-text-tertiary)}
.nm-dash-help{border-color:var(--color-border);background:linear-gradient(145deg,var(--color-surface-alt),var(--color-surface))}
.nm-dash-help p{color:var(--color-text-secondary)}
.nm-dash-help a,.nm-view-link{color:var(--action-blue)}
.nm-dash-help>span{width:34px;height:34px;padding:7px;border:1px solid #8bb9ff}
.nm-dash-head h1,.nm-kpi-card h2,.nm-panel h2{color:var(--color-text)}
.nm-dash-head p,.nm-kpi-card>small,.nm-confidence-row small,.nm-portfolio-panel>small{color:var(--color-text-muted)}
.nm-dash-head-actions{align-items:center}
.nm-dash-help-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;color:var(--color-text-muted);text-decoration:none}
.nm-dash-help-button:hover{background:var(--color-surface-hover);color:var(--action-blue)}
.nm-dash-user{border:0;background:transparent;color:var(--color-text);border-radius:12px;padding:4px 7px;cursor:pointer;min-height:42px}
.nm-dash-user:hover{background:var(--color-surface-hover)}
.nm-dash-user .nm-chevron{width:14px;height:14px;flex-basis:14px;color:var(--color-text-muted)}
.nm-avatar{background:var(--action-blue-soft);color:var(--action-blue)}
.nm-kpi-card,.nm-panel{background:var(--color-surface);border-color:var(--color-border);box-shadow:var(--shadow-sm)}
.nm-kpi-card{display:flex;flex-direction:column;min-height:218px}
.nm-kpi-card>strong,.nm-confidence-row strong{color:var(--color-text);font-variant-numeric:tabular-nums}
.nm-confidence-row strong{font-size:32px}
.nm-ring{--nm-confidence:0;width:68px;height:68px;background:conic-gradient(var(--status-positive) 0 calc(var(--nm-confidence) * 1%),#d8f2e5 calc(var(--nm-confidence) * 1%) 100%)}
.nm-ring.is-empty{background:conic-gradient(var(--color-border) 0 100%)}
.nm-ring:after{background:var(--color-surface)}
.nm-kpi-context{margin:auto 0 0;color:var(--color-text-muted);font-size:11px;line-height:1.45}
.nm-spark:has(path[d=""]){opacity:.2;background:linear-gradient(to right,transparent 0 100%);border-bottom:1px solid var(--color-border-faint)}
.nm-dash-hint{padding:9px 12px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface-alt);color:var(--color-text-secondary)}
.nm-donut{background:conic-gradient(var(--chart-taxable) 0 100%)}
.nm-donut.is-empty{background:conic-gradient(var(--color-border) 0 100%)}
.nm-donut:after{background:var(--color-surface)}
.nm-portfolio-body li{color:var(--color-text-secondary)}
.nm-portfolio-body li b{color:var(--color-text);font-variant-numeric:tabular-nums}
.nm-portfolio-empty{display:block!important;color:var(--color-text-muted);line-height:1.55;padding:12px 0!important}
.nm-recommend-list{display:grid}
.nm-recommend-list>a{display:grid;grid-template-columns:40px 1fr 16px;align-items:center;gap:11px;padding:11px 9px;border:1px solid var(--color-border);border-bottom:0;text-decoration:none;color:var(--color-text)}
.nm-recommend-list>a:first-child{border-radius:12px 12px 0 0}
.nm-recommend-list>a:last-child{border-bottom:1px solid var(--color-border);border-radius:0 0 12px 12px}
.nm-recommend-list>a:only-child{border-bottom:1px solid var(--color-border);border-radius:12px}
.nm-recommend-list i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-style:normal}
.nm-recommend-list i.green{background:var(--status-positive-soft);color:var(--status-positive)}
.nm-recommend-list i.blue{background:var(--action-blue-soft);color:var(--action-blue)}
.nm-recommend-list i.purple{background:#f1ebff;color:#7242dd}
.nm-recommend-list i.orange{background:var(--status-warning-soft);color:var(--status-warning)}
.nm-recommend-list b{display:block;font-size:12px}
.nm-recommend-list small{display:block;margin-top:2px;color:var(--color-text-muted);font-size:10px}
.nm-recommend-list em{font-style:normal;color:var(--color-text-tertiary);font-size:21px}
.nm-plan-table .head,.nm-plan-table #workspace-plan-rows>a{grid-template-columns:minmax(150px,1.7fr) minmax(92px,.8fr) minmax(112px,.9fr)}
.nm-plan-table .head{color:var(--color-text-muted);border-color:var(--color-border)}
.nm-plan-table #workspace-plan-rows>a{color:var(--color-text);border-color:var(--color-border-faint)}
.nm-plan-table #workspace-plan-rows>a:hover{background:var(--color-surface-hover)}
.nm-plan-confidence{display:inline-flex;align-items:center;justify-content:center;justify-self:start;min-width:52px;padding:4px 8px;border-radius:999px;background:var(--status-positive-soft);color:var(--status-positive);font-weight:800;font-size:10px}
.nm-plan-confidence.is-muted{background:var(--color-surface-offset);color:var(--color-text-muted)}
.nm-plan-wealth{font-weight:800;font-variant-numeric:tabular-nums}
.nm-plan-table em{background:var(--action-blue-soft);color:var(--action-blue)}

[data-theme="dark"] .nm-dash-view{background:var(--color-bg)}
[data-theme="dark"] .nm-dash-shell,[data-theme="dark"] .nm-dash-sidebar,[data-theme="dark"] .nm-kpi-card,[data-theme="dark"] .nm-panel{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text)}
[data-theme="dark"] .nm-dash-brand{color:var(--color-text)}
[data-theme="dark"] .nm-dash-nav a:hover,[data-theme="dark"] .nm-dash-nav a.active{background:var(--color-primary-bg);color:var(--color-primary)}
[data-theme="dark"] .nm-dash-help{background:var(--color-surface-alt);border-color:var(--color-border)}
[data-theme="dark"] .nm-ring{background:conic-gradient(var(--status-positive) 0 calc(var(--nm-confidence) * 1%),#254939 calc(var(--nm-confidence) * 1%) 100%)}
[data-theme="dark"] .nm-ring.is-empty,[data-theme="dark"] .nm-donut.is-empty{background:conic-gradient(var(--color-border-strong) 0 100%)}
[data-theme="dark"] .nm-rp-shell,[data-theme="dark"] .nm-rp-current,[data-theme="dark"] .nm-rp-option{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text)}
[data-theme="dark"] .nm-rp-view{background:linear-gradient(135deg,var(--color-bg),var(--color-surface-alt))}
[data-theme="dark"] .nm-rp-head h1,[data-theme="dark"] .nm-rp-current h2,[data-theme="dark"] .nm-rp-option h2{color:var(--color-text)}
[data-theme="dark"] .nm-rp-head p,[data-theme="dark"] .nm-rp-current p,[data-theme="dark"] .nm-rp-option p,[data-theme="dark"] .nm-rp-option small{color:var(--color-text-muted)}

@media(max-width:760px){
  .nm-dash-help-button,.nm-dash-user{display:none}
  .nm-dash-head-actions{margin-left:auto}
  .nm-dash-head-actions .btn{min-height:44px}
  .nm-plan-table #workspace-plan-rows>a{grid-template-columns:1fr auto}
  .nm-plan-table #workspace-plan-rows>a span:nth-child(2),.nm-plan-table
}

/* v149.314 — final workspace state, icon, legend, and anchor refinements. */
.nm-ui-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px}
.nm-ui-icon svg{display:block;width:100%;height:100%}
.nm-green{color:var(--status-positive)!important}
.nm-warning{color:var(--status-warning)!important}
.nm-danger{color:var(--status-negative)!important}
.nm-portfolio-body li>span{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px}
.nm-portfolio-body li small{display:block;color:var(--color-text-muted);font-size:10px;font-weight:500}
.nm-portfolio-body li b{margin-left:auto}
.nm-scroll-anchor{display:block;position:relative;top:-84px;visibility:hidden}
#profile-accounts,#profile-settings{scroll-margin-top:88px}
[data-theme="dark"] .nm-recommend-list i.purple{background:#2b2146;color:#bca1ff}
[data-theme="dark"] .nm-recommend-list i.orange{background:#442f1f;color:#ffba73}

/* v149.318 — Strategy Engine layout restoration. The redesign imposed a
   repeat(auto-fit,minmax(230px,1fr)) grid on #post-compare-results, whose
   children are ENGINE-GENERATED full-width sections (verdict, cards, Full
   Metrics, charts, Scenario Analysis, disclaimers) — every section became a
   ~230px column: headings rendered as columns, text wrapped one word per
   line, charts collapsed. Engine-generated content owns its own layout;
   the module class now contributes cosmetics only. Sealed by the contract
   spec (no grid on #post-compare-results) and probe lane W-12. */
.nm-strategy-module #post-compare-results{display:block}

/* v149.319 — workspace stage focus (Growth vs Retirement) */
.nm-stage-switch{display:inline-flex;border:1px solid var(--nm-line,#dde3ec);border-radius:10px;overflow:hidden;background:var(--nm-surface,#fff)}
.nm-stage-switch button{border:0;background:transparent;padding:7px 13px;font-size:.78rem;font-weight:750;color:var(--nm-muted,#68788c);cursor:pointer;min-height:40px}
.nm-stage-switch button.is-active{background:var(--nm-blue-soft,#e8f0fe);color:var(--nm-blue,#1d63d8)}
#view-workspace.nm-ws-stage-growth #workspace-kpi-hint{display:none}

/* v149.320 — workspace bottom-left chart cards (Quick Access replacement).
   Same visual language as the KPI sparklines: identical stroke palette
   (blue = spending, purple = taxes), nm-panel chrome, zero-baseline filled
   area with a low-opacity fill so the stroke stays the primary encoding. */
.nm-ws-charts-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.nm-ws-chart-card h2{margin-bottom:10px}
.nm-ws-chart-meta{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#607797;margin:0 0 6px}
.nm-ws-chart{width:100%;height:96px;overflow:visible;display:block}
.nm-ws-chart .nm-ws-area{stroke:none;opacity:.12}
.nm-ws-chart .nm-ws-line{fill:none;stroke-width:2}
/* v149.323 — per-series colors via the chart tokens (dark theme adapts
   through the same variables the Chart.js palette uses). */
.nm-ws-area.cs1{fill:var(--chart-1)}.nm-ws-line.cs1{stroke:var(--chart-1)}
.nm-ws-area.cs2{fill:var(--chart-2)}.nm-ws-line.cs2{stroke:var(--chart-2)}
.nm-ws-area.cs3{fill:var(--chart-3)}.nm-ws-line.cs3{stroke:var(--chart-3)}
.nm-ws-area.cs4{fill:var(--chart-4)}.nm-ws-line.cs4{stroke:var(--chart-4)}
.nm-ws-area.cs5{fill:var(--chart-5)}.nm-ws-line.cs5{stroke:var(--chart-5)}
.nm-ws-area.cs6{fill:var(--chart-6)}.nm-ws-line.cs6{stroke:var(--chart-6)}
.nm-ws-chart-legend{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:4px}
.nm-ws-chart-legend li{display:flex;align-items:center;gap:7px;font-size:11px;color:#607797}
.nm-ws-chart-legend li b{margin-left:auto;font-weight:600;color:#3d5a80;white-space:nowrap}
.nm-ws-chart-legend i{width:8px;height:8px;border-radius:50%;flex:none}
.nm-ws-chart-legend i.cs1{background:var(--chart-1)}.nm-ws-chart-legend i.cs2{background:var(--chart-2)}
.nm-ws-chart-legend i.cs3{background:var(--chart-3)}.nm-ws-chart-legend i.cs4{background:var(--chart-4)}
.nm-ws-chart-legend i.cs5{background:var(--chart-5)}.nm-ws-chart-legend i.cs6{background:var(--chart-6)}
[data-theme="dark"] .nm-ws-chart-legend li{color:var(--color-text-muted)}
[data-theme="dark"] .nm-ws-chart-legend li b{color:var(--color-text-secondary)}
.nm-ws-chart-card .nm-plan-empty{padding:22px 6px}
.nm-ws-chart-card .nm-kpi-context{margin:8px 0 0}
[data-theme="dark"] .nm-ws-chart-meta{color:var(--color-text-muted)}

/* v149.326/327 — planner header alignment. v149.326 stacked the Back link
   above a left-aligned title block (root cause: .calc-header's
   space-between row floated the title toward page center). v149.326's
   full-width tab distribution overshot — nine tabs sprawled across the
   whole page while the input area below is a narrower column (reported:
   "the line going way to the left… align this right above the input
   area"). v149.327: the tab bar hugs its tabs (fit-content) and sits flush
   left, directly above the input column, with a slightly larger gap for
   breathing room. overflow-x scroll behavior on narrow screens unchanged. */
.nm-planner-header{display:block}
.nm-planner-header .nm-planner-title-row{justify-content:flex-start}
.nm-planner-section-nav{justify-content:flex-start;width:fit-content;max-width:100%;gap:10px}
.nm-planner-section-nav a{flex:0 0 auto}

/* v149.327 — [hidden] enforcement for the workspace surface. Root cause of
   the reported stage bleed on the KPI rows: renderWorkspace toggles the
   hidden ATTRIBUTE, but .nm-dash-kpis sets display:grid (and .nm-ws-chart
   display:block, .nm-ws-chart-meta display:flex), which outranks the UA's
   [hidden] rule — so BOTH KPI rows rendered in BOTH stages in the real
   browser while stub-DOM specs (property-based) stayed green. Enforce the
   attribute for the whole workspace surface. */
#view-workspace [hidden]{display:none!important}
/* v149.327 — growth KPI row gains Projected Savings (the SE's own headline
   outcome — the growth-stage equivalent of Projected Ending Wealth); five
   cards on wide screens, standard 2/1-col collapse below. */
@media(min-width:1101px){#workspace-kpis-growth{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ============================================================================
   GUIDED PLANNER WIZARD — v149.328 (Drop 1)
   Namespaced wz-*; no overrides of existing planner classes.
   ========================================================================== */
#view-planner-wizard { padding: 0; }
.wz-shell { display: grid; grid-template-columns: 264px 1fr; min-height: calc(100vh - 60px); background: var(--color-bg, #f6f8f8); }
.wz-side { background: var(--color-surface, #fff); border-right: 1px solid var(--color-border, #e5e7eb); padding: 22px 18px; position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; }
.wz-side-head { margin-bottom: 18px; }
.wz-kicker { font-size: 13px; font-weight: 700; color: var(--color-text, #17303a); display: block; }
.wz-tagline { font-size: 11px; color: var(--color-text-muted, #7c8b91); margin: 2px 0 4px; }
.wz-changeplan { font-size: 11px; color: var(--color-primary, #1B6B6D); text-decoration: none; }
.wz-progress { margin-bottom: 16px; }
.wz-progress-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted, #7c8b91); display: block; }
.wz-progress-count { font-size: 12px; font-weight: 600; color: var(--color-text, #17303a); }
.wz-progress-bar { height: 6px; border-radius: 3px; background: var(--color-border, #e5e7eb); margin-top: 6px; overflow: hidden; }
.wz-progress-fill { height: 100%; width: 12.5%; border-radius: 3px; background: var(--color-primary, #1B6B6D); transition: width .25s ease; }
.wz-side-nav { display: flex; flex-direction: column; gap: 2px; }
.wz-side-step { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: none; background: transparent; border-radius: 8px; font-size: 13px; color: var(--color-text-secondary, #4b5b62); cursor: pointer; text-decoration: none; position: relative; }
.wz-side-step:hover { background: var(--color-bg, #f2f5f5); }
.wz-side-step.active { background: oklch(0.95 0.03 185); color: var(--color-primary, #1B6B6D); font-weight: 600; }
.wz-step-dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--color-border, #d6dcde); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; background: var(--color-surface, #fff); }
.wz-side-step.active .wz-step-dot { border-color: var(--color-primary, #1B6B6D); background: var(--color-primary, #1B6B6D); color: #fff; }
.wz-side-warn::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e5a13a; position: absolute; right: 10px; }
.wz-side-divider { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; color: var(--color-text-muted, #93a1a6); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.wz-side-divider::before, .wz-side-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border, #e5e7eb); }
.wz-help { margin-top: 20px; padding: 12px; border-radius: 10px; background: var(--color-bg, #f2f5f5); font-size: 11px; color: var(--color-text-secondary, #4b5b62); }
.wz-help p { margin: 4px 0 0; line-height: 1.5; }
.wz-main { padding: 30px 36px 60px; max-width: 980px; }
.wz-step-head h1 { font-size: 22px; margin: 0 0 4px; color: var(--color-text, #17303a); }
.wz-step-head p { margin: 0 0 18px; color: var(--color-text-muted, #7c8b91); font-size: 13px; }
.wz-card { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 14px; padding: 20px 22px; margin-bottom: 16px; }
.wz-card h2 { font-size: 15px; margin: 0 0 12px; color: var(--color-text, #17303a); }
.wz-card h3 { font-size: 13px; margin: 14px 0 6px; color: var(--color-text, #17303a); }
.wz-card-toprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.wz-card-toprow h2 { margin: 0; }
.wz-optional { font-weight: 400; font-size: 11px; color: var(--color-text-muted, #93a1a6); }
.wz-grid { display: grid; gap: 14px 18px; }
.wz-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wz-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wz-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wz-field label { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-secondary, #4b5b62); margin-bottom: 5px; }
/* v149.431 — the generic field-label rule above (class+type, 0-1-1) outranks
   .wz-switch (0-1-0), so switches inside .wz-field lost their inline-flex,
   the track collapsed, and the knob rendered on top of the words (Jahn's QA:
   step-7 capital-gains toggle + every advanced-section switch). The switch
   component wins inside fields: */
.wz-field label.wz-switch { display: inline-flex; align-items: center; margin-bottom: 0; }
.wz-sublabel { font-weight: 400; color: var(--color-text-muted, #93a1a6); }
.wz-field input[type=number], .wz-field input[type=text], .wz-field select, .wz-card textarea,
.wz-acct-row input[type=number], .wz-pension-row input[type=number], .wz-event-row input, .wz-event-row select, .wz-phase-row input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--color-border, #d6dcde); border-radius: 8px; font-size: 13px; background: var(--color-surface, #fff); color: var(--color-text, #17303a); }
.wz-field input:focus, .wz-field select:focus, .wz-card textarea:focus { outline: 2px solid oklch(0.75 0.09 185); border-color: var(--color-primary, #1B6B6D); }
.wz-prefix, .wz-suffix { display: flex; align-items: center; border: 1px solid var(--color-border, #d6dcde); border-radius: 8px; background: var(--color-surface, #fff); overflow: hidden; }
.wz-prefix span, .wz-suffix span { padding: 0 8px; font-size: 12px; color: var(--color-text-muted, #93a1a6); }
.wz-prefix input, .wz-suffix input { border: none !important; border-radius: 0 !important; flex: 1; min-width: 0; }
.wz-prefix input:focus, .wz-suffix input:focus { outline: none !important; }
.wz-field-narrow { max-width: 300px; }
.wz-hint { font-size: 11px; color: var(--color-text-muted, #7c8b91); margin: 5px 0 0; line-height: 1.5; }
.wz-hint-block { margin-top: 12px; }
.wz-ro { padding: 8px 10px; border-radius: 8px; background: var(--color-bg, #f2f5f5); font-size: 12.5px; color: var(--color-text-secondary, #4b5b62); border: 1px dashed var(--color-border, #d6dcde); }
.wz-ro-cell { display: inline-block; padding: 4px 8px; font-size: 11px; }
.wz-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; background: oklch(0.96 0.02 185); color: var(--color-primary, #1B6B6D); font-size: 11px; font-weight: 500; }
.wz-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--color-primary, #1B6B6D); color: #fff; font-size: 10px; font-weight: 600; margin-left: 6px; }
.wz-infobar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: oklch(0.97 0.02 220); border: 1px solid oklch(0.9 0.03 220); font-size: 12px; color: var(--color-text-secondary, #37505a); }
.wz-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--color-text-secondary, #4b5b62); }
.wz-switch input { position: absolute; opacity: 0; }
/* v149.431 — display:inline-block belt-and-braces: if the parent ever
   loses flex context, the track keeps its box instead of collapsing to an
   inline span whose absolutely-positioned knob paints over the label. */
.wz-switch-track { display: inline-block; width: 34px; height: 19px; border-radius: 999px; background: var(--color-border, #cfd8da); position: relative; transition: background .15s; flex-shrink: 0; vertical-align: middle; }
.wz-switch-track::after { content: ""; width: 15px; height: 15px; border-radius: 50%; background: #fff; position: absolute; top: 2px; left: 2px; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.wz-switch input:checked + .wz-switch-track { background: var(--color-primary, #1B6B6D); }
.wz-switch input:checked + .wz-switch-track::after { left: 17px; }
.wz-switch input:focus-visible + .wz-switch-track { outline: 2px solid oklch(0.75 0.09 185); }
.wz-mode-toggle { display: inline-flex; border: 1px solid var(--color-border, #d6dcde); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.wz-mode-btn { padding: 8px 16px; border: none; background: var(--color-surface, #fff); font-size: 12.5px; color: var(--color-text-secondary, #4b5b62); cursor: pointer; }
.wz-mode-btn + .wz-mode-btn { border-left: 1px solid var(--color-border, #e5e7eb); }
.wz-mode-btn.active { background: var(--color-primary, #1B6B6D); color: #fff; font-weight: 600; }
.wz-choice-grid { display: grid; gap: 12px; }
.wz-choice-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wz-choice-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wz-choice { text-align: left; padding: 14px 16px; border: 1.5px solid var(--color-border, #d6dcde); border-radius: 12px; background: var(--color-surface, #fff); cursor: pointer; }
.wz-choice strong { font-size: 13px; color: var(--color-text, #17303a); }
.wz-choice p { margin: 6px 0 0; font-size: 11.5px; color: var(--color-text-muted, #7c8b91); line-height: 1.45; }
.wz-choice.active { border-color: var(--color-primary, #1B6B6D); background: oklch(0.97 0.02 185); box-shadow: 0 0 0 1px var(--color-primary, #1B6B6D); }
.wz-advanced { margin-top: 14px; border-top: 1px solid var(--color-divider, #eef1f2); padding-top: 10px; }
.wz-advanced summary { font-size: 12px; font-weight: 600; color: var(--color-primary, #1B6B6D); cursor: pointer; padding: 4px 0; }
.wz-advanced > .wz-grid, .wz-advanced > .wz-field, .wz-advanced > .wz-acct-table { margin-top: 12px; }
.wz-acct-table { display: flex; flex-direction: column; gap: 8px; }
/* v149.402 — the return column was removed from the Accounts step (rates
   live in Investment Assumptions now): 3 columns, not 4. */
.wz-acct-headrow, .wz-acct-row { display: grid; grid-template-columns: 1.5fr 1fr 70px; gap: 12px; align-items: center; }
.wz-acct-headrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted, #93a1a6); padding-bottom: 2px; border-bottom: 1px solid var(--color-divider, #eef1f2); }
.wz-acct-name { font-size: 12.5px; font-weight: 500; color: var(--color-text, #17303a); display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.wz-acct-totalrow { display: flex; align-items: baseline; gap: 14px; padding-top: 10px; border-top: 1px solid var(--color-divider, #eef1f2); font-size: 13px; }
.wz-acct-included { font-size: 12px; color: var(--color-text-muted, #7c8b91); margin-left: auto; }
.wz-toollink { font-size: 12px; color: var(--color-primary, #1B6B6D); text-decoration: none; }
.wz-pension-table { display: flex; flex-direction: column; gap: 8px; }
.wz-pension-headrow, .wz-pension-row { display: grid; grid-template-columns: 1.3fr 1fr .8fr .8fr .9fr; gap: 10px; align-items: center; }
.wz-pension-headrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted, #93a1a6); }
.wz-pension-row > span { font-size: 12.5px; }
.wz-events { margin-top: 8px; }
.wz-events + .wz-events { margin-top: 20px; }
.wz-event-headrow, .wz-event-row { display: grid; grid-template-columns: 1.4fr 1fr .9fr .9fr .8fr; gap: 10px; align-items: center; margin-bottom: 8px; }
.wz-event-headrow-dep, .wz-event-row-dep { grid-template-columns: 1.4fr 1fr .9fr .8fr .7fr; }
.wz-event-headrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted, #93a1a6); margin-bottom: 2px; }
.wz-owner-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--color-text-muted, #7c8b91); padding-left: 2px; }
.wz-owner-row label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.wz-phase-headrow, .wz-phase-row { display: grid; grid-template-columns: 1.4fr .8fr .8fr 1fr .6fr; gap: 10px; align-items: center; margin-bottom: 8px; }
.wz-phase-headrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted, #93a1a6); margin-bottom: 2px; }
.wz-linkbtn { border: none; background: none; color: var(--color-primary, #1B6B6D); font-size: 12px; cursor: pointer; padding: 0; text-align: left; text-decoration: underline; }
.wz-btn { padding: 10px 20px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.wz-btn-primary { background: var(--color-primary, #1B6B6D); color: #fff; }
.wz-btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.wz-btn-ghost { background: var(--color-surface, #fff); border-color: var(--color-border, #d6dcde); color: var(--color-text-secondary, #4b5b62); }
.wz-btn-ghost:disabled { opacity: .4; cursor: not-allowed; }
.wz-btn-run { font-size: 14px; padding: 13px 26px; }
.wz-footer { display: flex; justify-content: space-between; margin-top: 22px; }
.wz-run-row { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* v149.455 — caution at the point of upload. Tokens only.
   Deliberately quiet rather than alarming: this is guidance at a decision
   point, not an error. */
.nm-upload-caution {
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-text-muted);
  margin: 6px 0 0;
  padding: 8px 10px;
  border-left: 2px solid var(--color-border);
  background: transparent;
  text-align: left;
}

/* v149.449 — save/rename surface on the wizard's Review & Confirm step.
   Tokens only (no literal colors) per the v149.422 palette rule. */
.wz-save-row { margin-top: 20px; padding: 16px; border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 10px); background: var(--color-surface-subtle, transparent);
  display: flex; flex-direction: column; gap: 8px; }
.wz-save-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.wz-save-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wz-save-input { flex: 1 1 240px; min-width: 0; padding: 8px 10px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px);
  font-size: var(--text-sm); color: var(--color-text); background: var(--color-surface); }
#new-plan-slot-warning { margin: 0 0 12px; padding: 10px 12px; font-size: var(--text-sm);
  color: var(--color-error); border: 1px solid var(--color-error);
  border-radius: var(--radius-sm, 6px); background: transparent; }
@media (max-width: 560px) {
  .wz-save-controls { flex-direction: column; align-items: stretch; }
}
.wz-review-bar { justify-content: space-between; margin: 0 0 14px; }
.wz-review-card { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.wz-review-card.wz-review-warn { border-color: #e5a13a; }
.wz-review-head { display: flex; align-items: center; justify-content: space-between; }
.wz-review-head h3 { margin: 0; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.wz-warn-dot { width: 9px; height: 9px; border-radius: 50%; background: #e5a13a; display: inline-block; }
.wz-review-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wz-review-chip { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; background: var(--color-bg, #f2f5f5); color: var(--color-text-secondary, #4b5b62); }
.wz-spouse-only.wz-off, .wz-hc-body.wz-off { display: none; }
.wz-card.wz-spouse-only.wz-off { display: none; }
@media (max-width: 900px) {
  .wz-shell { grid-template-columns: 1fr; }
  .wz-side { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--color-border, #e5e7eb); }
  .wz-grid-3, .wz-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wz-choice-2, .wz-choice-4 { grid-template-columns: 1fr; }
  .wz-main { padding: 20px 16px 50px; }
  .wz-acct-headrow, .wz-acct-row { grid-template-columns: 1.2fr 1fr 54px; gap: 8px; }
  .wz-pension-headrow, .wz-pension-row, .wz-event-headrow, .wz-event-row, .wz-phase-headrow, .wz-phase-row { grid-template-columns: 1fr 1fr; }
  .wz-event-headrow, .wz-phase-headrow { display: none; }
}
@media (max-width: 560px) {
  .wz-grid-2, .wz-grid-3, .wz-grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================================
   STRATEGY ENGINE OVERVIEW — v149.329 (Drop 3), namespaced ov-*
   ========================================================================== */
#dash-overview-view { padding-top: 4px; }
.ov-empty { text-align: center; padding: 60px 20px; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 14px; }
.ov-empty h2 { margin: 0 0 8px; font-size: 18px; }
.ov-empty p { max-width: 520px; margin: 0 auto 18px; color: var(--color-text-muted, #7c8b91); font-size: 13px; line-height: 1.6; }
.ov-toprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ov-chip { display: inline-block; padding: 4px 12px; border-radius: 999px; background: oklch(0.96 0.02 185); color: var(--color-primary, #1B6B6D); font-size: 11.5px; font-weight: 600; }
.ov-stale { font-size: 11.5px; color: oklch(0.5 0.13 60); background: oklch(0.96 0.06 60); border: 1px solid oklch(0.88 0.08 60); border-radius: 8px; padding: 4px 10px; margin-left: 8px; }
.ov-toplinks { display: flex; gap: 8px; }
.ov-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ov-kpi { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 12px; padding: 14px 16px; }
.ov-kpi-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted, #93a1a6); margin-bottom: 6px; }
.ov-kpi-value { font-size: 20px; font-weight: 800; color: var(--color-text, #17303a); line-height: 1.2; }
.ov-kpi-sub { font-size: 11px; color: var(--color-text-muted, #7c8b91); margin-top: 6px; line-height: 1.5; }
.ov-mid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.ov-panel { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 12px; padding: 16px 18px; }
.ov-panel-head h3 { margin: 0 0 2px; font-size: 14px; }
.ov-note { margin: 0 0 12px; font-size: 11px; color: var(--color-text-muted, #7c8b91); }
.ov-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--color-bg, #eef1f2); margin-bottom: 10px; }
.ov-bar span { display: block; height: 100%; }
.ov-seg-taxable { background: #1B6B6D; } .ov-seg-ira { background: #4f9ea0; } .ov-seg-roth { background: #8ac6c8; } .ov-seg-other { background: #cfd8da; }
.ov-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--color-text-secondary, #4b5b62); }
.ov-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 7px; }
.ov-total { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--color-divider, #eef1f2); font-size: 12.5px; }
.ov-assum { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.ov-assum div { display: flex; justify-content: space-between; font-size: 12.5px; }
.ov-assum dt { color: var(--color-text-muted, #7c8b91); }
.ov-assum dd { margin: 0; font-weight: 600; color: var(--color-text, #17303a); }
.ov-strategy-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ov-strategy { border: 1.5px solid var(--color-border, #e5e7eb); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ov-strategy-active { border-color: var(--color-primary, #1B6B6D); background: oklch(0.97 0.02 185); }
.ov-strategy-head { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
.ov-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--color-primary, #1B6B6D); padding: 2px 7px; border-radius: 999px; }
.ov-strategy-desc { margin: 0; font-size: 11px; color: var(--color-text-muted, #7c8b91); line-height: 1.45; flex: 1; }
.ov-strategy-kpis { display: flex; flex-direction: column; gap: 4px; }
.ov-strategy-kpis div { display: flex; justify-content: space-between; font-size: 11.5px; }
.ov-strategy-kpis span { color: var(--color-text-muted, #93a1a6); }
.ov-linkbtn { border: none; background: none; color: var(--color-primary, #1B6B6D); font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; text-align: left; }
@media (max-width: 980px) {
  .ov-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-strategy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-mid-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .ov-kpi-grid, .ov-strategy-grid { grid-template-columns: 1fr; } }

/* v149.330 — per-strategy MC rows */
.ov-mc-row strong { color: var(--color-primary, #1B6B6D); }
.ov-mc-pending { font-style: normal; font-size: 10.5px; color: var(--color-text-muted, #93a1a6); }

/* COMPARISON SUMMARY (Drop 4) base styles — RETIRED v149.364 (tier removed; see index.html/app.js supersession comments). */
#view-planner-wizard,
#dash-overview-view { /* v149.364: #cmp-summary selector removed (tier retired) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

/* ---------- Wizard shell ---------- */
#view-planner-wizard {
  --wz-navy: #09154b;
  --wz-text: #17214f;
  --wz-muted: #68728f;
  --wz-green: #079b50;
  --wz-green-dark: #078443;
  --wz-green-soft: #eef8f2;
  --wz-blue: #075fd8;
  --wz-line: #dfe4ee;
  --wz-line-soft: #edf0f5;
  --wz-shadow: 0 1px 2px rgba(9, 21, 75, .025), 0 8px 24px rgba(9, 21, 75, .035);
  background: #fff;
}
#view-planner-wizard .wz-shell {
  grid-template-columns: 290px minmax(0, 1fr);
  min-height: calc(100vh - 60px);
  background: #fff;
}
#view-planner-wizard .wz-side {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 60px);
  padding: 26px 20px 24px;
  background: linear-gradient(180deg, #fff 0%, #fdfefe 100%);
  border-right: 1px solid var(--wz-line);
  box-shadow: 6px 0 24px rgba(9, 21, 75, .018);
}
#view-planner-wizard .wz-side-head {
  margin: 0 10px 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--wz-line-soft);
}
/* v149.401 (Jahn) — Dashboard button back to the workspace, just above the
   "Your progress" block. SUPERSEDES the v149.387 .wz-back-workspace text
   link (same destination, same always-visible intent, button form in the
   requested position — one affordance). */
#view-planner-wizard .wz-dashboard-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 1px solid var(--wz-line-soft, #e5e7eb);
  border-radius: 8px;
  background: var(--color-surface, #fff);
  color: var(--wz-navy, #17303a);
  font-size: 12.5px;
  font-weight: 750;
  text-decoration: none;
}
#view-planner-wizard .wz-dashboard-btn:hover {
  border-color: var(--wz-blue, #0664e8);
  color: var(--wz-blue, #0664e8);
}
#view-planner-wizard .wz-dashboard-btn .nm-ui-icon { width: 15px; height: 15px; flex: none; }
#view-planner-wizard .wz-kicker {
  color: var(--wz-navy);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.012em;
}
#view-planner-wizard .wz-tagline {
  margin: 7px 0 8px;
  color: var(--wz-text);
  font-size: 12.5px;
  line-height: 1.4;
}
#view-planner-wizard .wz-changeplan {
  color: var(--wz-blue);
  font-size: 12.5px;
  font-weight: 650;
}
#view-planner-wizard .wz-progress {
  margin: 0 10px 22px;
}
#view-planner-wizard .wz-progress-label {
  margin-bottom: 8px;
  color: var(--wz-navy);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: .01em;
  text-transform: none;
}
#view-planner-wizard .wz-progress-count {
  display: block;
  color: var(--wz-text);
  font-size: 11.5px;
  font-weight: 500;
}
#view-planner-wizard .wz-progress-bar {
  height: 8px;
  margin-top: 12px;
  border-radius: 999px;
  background: #e8ebf1;
  box-shadow: inset 0 1px 2px rgba(9, 21, 75, .05);
}
#view-planner-wizard .wz-progress-fill {
  border-radius: inherit;
  background: linear-gradient(90deg, #08a85a 0%, #07954d 100%);
  box-shadow: 0 1px 3px rgba(7, 155, 80, .24);
}
#view-planner-wizard .wz-side-nav {
  gap: 3px;
}
#view-planner-wizard .wz-side-step {
  min-height: 42px;
  gap: 12px;
  padding: 8px 11px;
  border-radius: 10px;
  color: var(--wz-text);
  font-size: 12px;
  font-weight: 560;
  letter-spacing: -.005em;
}
#view-planner-wizard .wz-side-step:hover {
  background: #f6f8fb;
}
#view-planner-wizard .wz-side-step.active {
  color: var(--wz-green-dark);
  background: linear-gradient(90deg, #edf8f1 0%, #f3faf6 100%);
  box-shadow: inset 0 0 0 1px rgba(7, 155, 80, .025);
  font-weight: 720;
}
#view-planner-wizard .wz-step-dot {
  width: 22px;
  height: 22px;
  border: 1.5px solid #a9b2c7;
  background: #fff;
  color: #2a3566;
  font-size: 10.5px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(9, 21, 75, .04);
}
#view-planner-wizard .wz-side-step.active .wz-step-dot {
  border-color: var(--wz-green);
  background: var(--wz-green);
  color: #fff;
  box-shadow: 0 2px 6px rgba(7, 155, 80, .22);
}
/* Previous wizard steps become crisp vector-like check circles without changing markup. */
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="2"].active) [data-wiz-goto="1"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="3"].active) [data-wiz-goto="1"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="3"].active) [data-wiz-goto="2"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="4"].active) [data-wiz-goto="1"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="4"].active) [data-wiz-goto="2"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="4"].active) [data-wiz-goto="3"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="5"].active) [data-wiz-goto="1"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="5"].active) [data-wiz-goto="2"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="5"].active) [data-wiz-goto="3"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="5"].active) [data-wiz-goto="4"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="6"].active) [data-wiz-goto="1"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="6"].active) [data-wiz-goto="2"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="6"].active) [data-wiz-goto="3"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="6"].active) [data-wiz-goto="4"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="6"].active) [data-wiz-goto="5"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="7"].active) [data-wiz-goto="1"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="7"].active) [data-wiz-goto="2"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="7"].active) [data-wiz-goto="3"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="7"].active) [data-wiz-goto="4"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="7"].active) [data-wiz-goto="5"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="7"].active) [data-wiz-goto="6"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="8"].active) [data-wiz-goto="1"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="8"].active) [data-wiz-goto="2"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="8"].active) [data-wiz-goto="3"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="8"].active) [data-wiz-goto="4"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="8"].active) [data-wiz-goto="5"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="8"].active) [data-wiz-goto="6"] .wz-step-dot,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="8"].active) [data-wiz-goto="7"] .wz-step-dot {
  border-color: var(--wz-green);
  background: var(--wz-green);
  color: transparent;
  font-size: 0;
}
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="2"].active) [data-wiz-goto="1"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="3"].active) [data-wiz-goto="1"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="3"].active) [data-wiz-goto="2"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="4"].active) [data-wiz-goto="1"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="4"].active) [data-wiz-goto="2"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="4"].active) [data-wiz-goto="3"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="5"].active) [data-wiz-goto="1"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="5"].active) [data-wiz-goto="2"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="5"].active) [data-wiz-goto="3"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="5"].active) [data-wiz-goto="4"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="6"].active) [data-wiz-goto="1"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="6"].active) [data-wiz-goto="2"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="6"].active) [data-wiz-goto="3"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="6"].active) [data-wiz-goto="4"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="6"].active) [data-wiz-goto="5"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="7"].active) [data-wiz-goto="1"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="7"].active) [data-wiz-goto="2"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="7"].active) [data-wiz-goto="3"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="7"].active) [data-wiz-goto="4"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="7"].active) [data-wiz-goto="5"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="7"].active) [data-wiz-goto="6"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="8"].active) [data-wiz-goto="1"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="8"].active) [data-wiz-goto="2"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="8"].active) [data-wiz-goto="3"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="8"].active) [data-wiz-goto="4"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="8"].active) [data-wiz-goto="5"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="8"].active) [data-wiz-goto="6"] .wz-step-dot::after,
#view-planner-wizard .wz-side-nav:has([data-wiz-goto="8"].active) [data-wiz-goto="7"] .wz-step-dot::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}
#view-planner-wizard .wz-side-divider {
  margin: 15px 2px 8px;
  color: #97a0b6;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
}
#view-planner-wizard .wz-help {
  margin: auto 0 0;
  padding: 18px 16px;
  border: 1px solid #e5e8f2;
  border-radius: 12px;
  background: linear-gradient(135deg, #fafbff 0%, #f7f8ff 100%);
  color: var(--wz-text);
  font-size: 11.5px;
  box-shadow: 0 6px 18px rgba(30, 44, 95, .025);
}
#view-planner-wizard .wz-help strong {
  color: var(--wz-navy);
  font-size: 13px;
}
#view-planner-wizard .wz-help a {
  color: var(--wz-blue);
  font-weight: 650;
}

/* ---------- Wizard main content ---------- */
#view-planner-wizard .wz-main {
  width: 100%;
  max-width: none;
  padding: 31px 34px 54px;
  box-sizing: border-box;
  overflow: hidden;
}
#view-planner-wizard .wz-step-head {
  margin-bottom: 22px;
}
#view-planner-wizard .wz-step-head h1 {
  margin: 0 0 8px;
  color: var(--wz-navy);
  font-size: clamp(25px, 2.15vw, 31px);
  font-weight: 760;
  letter-spacing: -.032em;
  line-height: 1.12;
}
#view-planner-wizard .wz-step-head p {
  margin: 0;
  color: var(--wz-text);
  font-size: 14px;
  line-height: 1.5;
}
#view-planner-wizard .wz-card {
  margin-bottom: 18px;
  padding: 22px 26px;
  border: 1px solid var(--wz-line);
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--wz-shadow);
}
#view-planner-wizard .wz-card h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--wz-navy);
  font-size: 16px;
  font-weight: 760;
  letter-spacing: -.012em;
}
#view-planner-wizard .wz-card h2::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  background: var(--wz-green);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M8 2v4M16 2v4M3 9h18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M8 2v4M16 2v4M3 9h18'/%3E%3C/svg%3E");
}
#view-planner-wizard [data-wiz-step="1"] .wz-card h2::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
#view-planner-wizard [data-wiz-step="2"] .wz-card h2::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18M5 10v8M9 10v8M15 10v8M19 10v8M3 18h18M12 3l9 5H3l9-5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18M5 10v8M9 10v8M15 10v8M19 10v8M3 18h18M12 3l9 5H3l9-5z'/%3E%3C/svg%3E");
}
#view-planner-wizard [data-wiz-step="3"] .wz-card h2::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M16 8.5c-.8-.8-2-1.2-3.3-1.2-1.8 0-3.2.9-3.2 2.3 0 3.5 6.8 1.8 6.8 5.3 0 1.4-1.4 2.5-3.5 2.5-1.6 0-3-.6-3.9-1.5M12.5 5.5v13'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M16 8.5c-.8-.8-2-1.2-3.3-1.2-1.8 0-3.2.9-3.2 2.3 0 3.5 6.8 1.8 6.8 5.3 0 1.4-1.4 2.5-3.5 2.5-1.6 0-3-.6-3.9-1.5M12.5 5.5v13'/%3E%3C/svg%3E");
}
#view-planner-wizard [data-wiz-step="4"] .wz-card h2::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h14a2 2 0 0 1 2 2v9H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h13'/%3E%3Cpath d='M16 12h4v4h-4a2 2 0 0 1 0-4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h14a2 2 0 0 1 2 2v9H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h13'/%3E%3Cpath d='M16 12h4v4h-4a2 2 0 0 1 0-4z'/%3E%3C/svg%3E");
}
#view-planner-wizard [data-wiz-step="5"] .wz-card h2::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3Cpath d='M8 12h2l1-2 2 4 1-2h2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3Cpath d='M8 12h2l1-2 2 4 1-2h2'/%3E%3C/svg%3E");
}
#view-planner-wizard [data-wiz-step="6"] .wz-card h2::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20V10M9 20V4M15 20v-7M21 20V7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20V10M9 20V4M15 20v-7M21 20V7'/%3E%3C/svg%3E");
}
#view-planner-wizard [data-wiz-step="7"] .wz-card h2::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E");
}
#view-planner-wizard .wz-card h3 {
  color: var(--wz-navy);
  font-size: 13px;
  font-weight: 720;
}
#view-planner-wizard .wz-card-toprow {
  margin-bottom: 18px;
}
#view-planner-wizard .wz-card-toprow h2 {
  margin-bottom: 0;
}
#view-planner-wizard .wz-optional {
  color: var(--wz-muted);
  font-size: 12px;
  font-weight: 500;
}
#view-planner-wizard .wz-grid {
  gap: 17px 26px;
}
#view-planner-wizard .wz-field label {
  margin-bottom: 8px;
  color: var(--wz-text);
  font-size: 11.5px;
  font-weight: 680;
  line-height: 1.35;
}
#view-planner-wizard .wz-field input[type=number],
#view-planner-wizard .wz-field input[type=text],
#view-planner-wizard .wz-field select,
#view-planner-wizard .wz-card textarea,
#view-planner-wizard .wz-acct-row input[type=number],
#view-planner-wizard .wz-pension-row input[type=number],
#view-planner-wizard .wz-event-row input,
#view-planner-wizard .wz-event-row select,
#view-planner-wizard .wz-phase-row input {
  min-height: 45px;
  padding: 0 13px;
  border: 1px solid #cfd6e3;
  border-radius: 7px;
  background: #fff;
  color: #10183f;
  font-size: 13.5px;
  font-weight: 560;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(9, 21, 75, .018), inset 0 1px 1px rgba(9, 21, 75, .012);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#view-planner-wizard .wz-card textarea {
  min-height: 76px;
  padding-top: 11px;
  resize: vertical;
}
#view-planner-wizard .wz-field input:hover,
#view-planner-wizard .wz-field select:hover,
#view-planner-wizard .wz-card textarea:hover {
  border-color: #b8c2d3;
}
#view-planner-wizard .wz-field input:focus,
#view-planner-wizard .wz-field select:focus,
#view-planner-wizard .wz-card textarea:focus {
  outline: none;
  border-color: #159a58;
  box-shadow: 0 0 0 3px rgba(7, 155, 80, .11);
}
#view-planner-wizard .wz-prefix,
#view-planner-wizard .wz-suffix {
  min-height: 45px;
  border: 1px solid #cfd6e3;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(9, 21, 75, .018);
}
#view-planner-wizard .wz-prefix:focus-within,
#view-planner-wizard .wz-suffix:focus-within {
  border-color: #159a58;
  box-shadow: 0 0 0 3px rgba(7, 155, 80, .11);
}
#view-planner-wizard .wz-prefix span,
#view-planner-wizard .wz-suffix span {
  color: #4d5776;
  font-size: 12.5px;
  font-weight: 650;
}
#view-planner-wizard .wz-prefix input,
#view-planner-wizard .wz-suffix input {
  min-height: 43px;
  box-shadow: none;
}
#view-planner-wizard .wz-ro {
  min-height: 45px;
  display: flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid #d9dee8;
  border-radius: 7px;
  background: #f8f9fb;
  color: #273052;
  font-size: 13px;
  font-weight: 570;
}
#view-planner-wizard .wz-ro-cell {
  min-height: 38px;
  padding: 0 10px;
  font-size: 11.5px;
}
#view-planner-wizard .wz-hint {
  color: var(--wz-muted);
  font-size: 11px;
  line-height: 1.48;
}
#view-planner-wizard .wz-chip {
  padding: 4px 9px;
  border: 1px solid #d7eee1;
  background: #f0faf4;
  color: #087d43;
  font-size: 10px;
  font-weight: 650;
}
#view-planner-wizard .wz-infobar {
  min-height: 48px;
  gap: 10px;
  padding: 11px 15px;
  border: 1px solid #dce5fb;
  border-radius: 9px;
  background: linear-gradient(90deg, #f5f8ff 0%, #fbfcff 100%);
  color: #26365f;
  font-size: 11.5px;
  box-shadow: inset 3px 0 0 #3976ed;
}
#view-planner-wizard .wz-switch {
  gap: 10px;
  color: var(--wz-text);
  font-size: 12px;
  font-weight: 560;
}
#view-planner-wizard .wz-switch-track {
  width: 42px;
  height: 24px;
  background: #bac2d2;
  box-shadow: inset 0 1px 2px rgba(9, 21, 75, .12);
}
#view-planner-wizard .wz-switch-track::after {
  width: 20px;
  height: 20px;
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 4px rgba(9, 21, 75, .25);
}
#view-planner-wizard .wz-switch input:checked + .wz-switch-track {
  background: linear-gradient(180deg, #08a859 0%, #078f4a 100%);
}
#view-planner-wizard .wz-switch input:checked + .wz-switch-track::after {
  left: 20px;
}
#view-planner-wizard .wz-mode-toggle {
  margin-bottom: 18px;
  border-color: #d5dbe7;
  border-radius: 9px;
}
#view-planner-wizard .wz-mode-btn {
  min-height: 39px;
  padding: 0 17px;
  color: #44506f;
  font-size: 12px;
  font-weight: 620;
}
#view-planner-wizard .wz-mode-btn.active {
  background: var(--wz-green);
  color: #fff;
}
#view-planner-wizard .wz-choice-grid {
  gap: 14px;
}
#view-planner-wizard .wz-choice-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#view-planner-wizard .wz-choice {
  min-height: 155px;
  padding: 18px;
  border: 1px solid #d9deea;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(9, 21, 75, .025);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#view-planner-wizard .wz-choice:hover {
  transform: translateY(-1px);
  border-color: #bfc8d9;
  box-shadow: 0 8px 20px rgba(9, 21, 75, .05);
}
#view-planner-wizard .wz-choice strong {
  color: var(--wz-navy);
  font-size: 12.5px;
  font-weight: 730;
}
#view-planner-wizard .wz-choice p {
  color: #4f5b7a;
  font-size: 11px;
  line-height: 1.55;
}
#view-planner-wizard .wz-choice.active {
  border-color: var(--wz-green);
  background: linear-gradient(145deg, #f8fdf9 0%, #f0faf4 100%);
  box-shadow: inset 0 0 0 1px rgba(7, 155, 80, .1), 0 7px 18px rgba(7, 155, 80, .06);
}
#view-planner-wizard .wz-advanced {
  margin-top: 16px;
  padding-top: 13px;
  border-top-color: var(--wz-line-soft);
}
#view-planner-wizard .wz-advanced summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  color: var(--wz-navy);
  font-size: 12.5px;
  font-weight: 720;
  list-style: none;
}
#view-planner-wizard .wz-advanced summary::-webkit-details-marker {
  display: none;
}
#view-planner-wizard .wz-advanced summary::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: var(--wz-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
#view-planner-wizard .wz-advanced summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 1.8px solid #1a2453;
  border-bottom: 1.8px solid #1a2453;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .15s ease;
}
#view-planner-wizard .wz-advanced[open] summary::after {
  transform: rotate(225deg) translate(-2px, -1px);
}

/* ---------- Wizard dense tables ---------- */
#view-planner-wizard .wz-acct-table,
#view-planner-wizard .wz-pension-table {
  gap: 0;
  overflow: hidden;
  border: 1px solid #e3e7ef;
  border-radius: 10px;
  background: #fff;
}
#view-planner-wizard .wz-acct-headrow,
#view-planner-wizard .wz-pension-headrow,
#view-planner-wizard .wz-event-headrow,
#view-planner-wizard .wz-phase-headrow {
  min-height: 39px;
  align-items: center;
  margin: 0;
  padding: 0 13px;
  border-bottom: 1px solid #dfe4ed;
  background: #fafbfc;
  color: #384565;
  font-size: 9.5px;
  font-weight: 760;
  letter-spacing: .045em;
}
#view-planner-wizard .wz-acct-row,
#view-planner-wizard .wz-pension-row {
  min-height: 59px;
  margin: 0;
  padding: 7px 13px;
  border-bottom: 1px solid #edf0f5;
}
#view-planner-wizard .wz-acct-row:last-of-type,
#view-planner-wizard .wz-pension-row:last-of-type {
  border-bottom: 0;
}
#view-planner-wizard .wz-acct-row:hover,
#view-planner-wizard .wz-pension-row:hover,
#view-planner-wizard .wz-event-row:hover,
#view-planner-wizard .wz-phase-row:hover {
  background: #fcfdfd;
}
#view-planner-wizard .wz-acct-name,
#view-planner-wizard .wz-pension-row > span:first-child,
#view-planner-wizard .wz-event-row > span:first-child,
#view-planner-wizard .wz-phase-row > span:first-child {
  color: #1c2856;
  font-size: 12.5px;
  font-weight: 650;
}
#view-planner-wizard .wz-acct-totalrow {
  min-height: 55px;
  margin: 0;
  padding: 0 13px;
  border-top: 1px solid #dfe4ed;
  background: #fafbfc;
  color: var(--wz-navy);
  font-size: 14px;
  font-weight: 760;
}
#view-planner-wizard .wz-event-headrow,
#view-planner-wizard .wz-event-row,
#view-planner-wizard .wz-phase-headrow,
#view-planner-wizard .wz-phase-row {
  margin-bottom: 0;
  padding-left: 11px;
  padding-right: 11px;
}
#view-planner-wizard .wz-event-row,
#view-planner-wizard .wz-phase-row {
  min-height: 56px;
  border-bottom: 1px solid #edf0f5;
}

/* ---------- Wizard review ---------- */
#view-planner-wizard .wz-review-bar {
  margin-bottom: 16px;
  padding: 13px 16px;
}
#view-planner-wizard .wz-review-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, .9fr) minmax(0, 2.1fr);
  align-items: center;
  min-height: 82px;
  margin-bottom: 10px;
  padding: 15px 20px;
  border: 1px solid var(--wz-line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(9, 21, 75, .025);
}
#view-planner-wizard .wz-review-card.wz-review-warn {
  border-color: #e8b45b;
  box-shadow: inset 3px 0 0 #e8a52d;
}
#view-planner-wizard .wz-review-head {
  justify-content: flex-start;
  gap: 12px;
}
#view-planner-wizard .wz-review-head h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: var(--wz-navy);
  font-size: 14px;
  font-weight: 740;
}
#view-planner-wizard .wz-review-head h3::before {
  content: "";
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: #edf9f2;
  box-shadow: inset 0 0 0 1px #d5efdf;
}
#view-planner-wizard .wz-review-head .wz-linkbtn {
  margin-left: auto;
  padding: 7px 14px;
  border: 1px solid #d4dae6;
  border-radius: 7px;
  color: var(--wz-blue);
  font-size: 11px;
  font-weight: 680;
  text-decoration: none;
}
#view-planner-wizard .wz-review-chips {
  flex-wrap: nowrap;
  gap: 0;
  min-width: 0;
  max-height: 28px;
  margin: 0;
  overflow: hidden;
}
#view-planner-wizard .wz-review-card.wz-expanded .wz-review-chips {
  flex-wrap: wrap;
  max-height: none;
}
#view-planner-wizard .wz-review-chip {
  padding: 0 13px;
  border-radius: 0;
  border-right: 1px solid #dfe4ed;
  background: transparent;
  color: #53607e;
  font-size: 11.5px;
  line-height: 1.7;
  white-space: nowrap;
}
#view-planner-wizard .wz-review-chip:first-child {
  padding-left: 0;
}
#view-planner-wizard .wz-review-chip:last-child {
  border-right: 0;
}
#view-planner-wizard .wz-review-chip strong {
  color: #1b2855;
  font-weight: 680;
}
#view-planner-wizard .wz-warn-dot {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 4px rgba(229, 161, 58, .13);
}

/* ---------- Wizard controls and footer ---------- */
#view-planner-wizard .wz-btn {
  min-height: 45px;
  padding: 0 22px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 720;
  box-shadow: none;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}
#view-planner-wizard .wz-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
#view-planner-wizard .wz-btn-primary {
  border-color: #078b48;
  background: linear-gradient(180deg, #0aa859 0%, #078f49 100%);
  box-shadow: 0 5px 12px rgba(7, 155, 80, .18);
}
#view-planner-wizard .wz-btn-ghost {
  border-color: #d4dae6;
  background: #fff;
  color: #16214f;
}
#view-planner-wizard .wz-footer {
  margin-top: 24px;
}
#view-planner-wizard .wz-run-row {
  align-items: flex-end;
}
#view-planner-wizard .wz-btn-run {
  min-width: 215px;
  min-height: 47px;
}

/* ---------- Strategy Overview ---------- */
#dash-overview-view {
  --ov-navy: #09154b;
  --ov-text: #1a2550;
  --ov-muted: #68738f;
  --ov-green: #079b50;
  --ov-blue: #1468df;
  --ov-purple: #7248df;
  --ov-line: #dfe4ee;
  --ov-shadow: 0 1px 2px rgba(9, 21, 75, .02), 0 8px 22px rgba(9, 21, 75, .035);
  padding-top: 6px;
  color: var(--ov-text);
}
#dash-overview-view .ov-empty {
  padding: 72px 24px;
  border: 1px solid var(--ov-line);
  border-radius: 14px;
  background: linear-gradient(145deg, #fff 0%, #f8fcfa 100%);
  box-shadow: var(--ov-shadow);
}
#dash-overview-view .ov-empty h2 {
  color: var(--ov-navy);
  font-size: 22px;
  letter-spacing: -.02em;
}
#dash-overview-view .ov-toprow {
  margin-bottom: 15px;
}
#dash-overview-view .ov-chip {
  padding: 7px 13px;
  border: 1px solid #d7eee1;
  border-radius: 9px;
  background: #f1faf5;
  color: #087d43;
  font-size: 11px;
  font-weight: 700;
}
#dash-overview-view .ov-toplinks {
  gap: 9px;
}
#dash-overview-view .ov-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 11px;
  margin-bottom: 14px;
}
#dash-overview-view .ov-kpi {
  position: relative;
  min-height: 174px;
  overflow: hidden;
  padding: 16px 15px 14px;
  border: 1px solid var(--ov-line);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #fdfefe 100%);
  box-shadow: var(--ov-shadow);
}
#dash-overview-view .ov-kpi::before {
  content: "";
  position: absolute;
  inset: auto 13px 13px 13px;
  height: 42px;
  opacity: .78;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  pointer-events: none;
}
#dash-overview-view .ov-kpi:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 42'%3E%3Cpath d='M2 38 C28 37 36 31 52 30 S76 22 90 23 S113 14 124 12 S141 7 148 2' fill='none' stroke='%23079b50' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M2 38 C28 37 36 31 52 30 S76 22 90 23 S113 14 124 12 S141 7 148 2 L148 42 L2 42 Z' fill='%23079b50' fill-opacity='.08'/%3E%3C/svg%3E");
}
#dash-overview-view .ov-kpi:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 42'%3E%3Cg fill='%231468df' fill-opacity='.18'%3E%3Crect x='4' y='24' width='13' height='16' rx='2'/%3E%3Crect x='25' y='11' width='13' height='29' rx='2'/%3E%3Crect x='46' y='18' width='13' height='22' rx='2'/%3E%3Crect x='67' y='7' width='13' height='33' rx='2'/%3E%3Crect x='88' y='15' width='13' height='25' rx='2'/%3E%3Crect x='109' y='22' width='13' height='18' rx='2'/%3E%3Crect x='130' y='17' width='13' height='23' rx='2'/%3E%3C/g%3E%3C/svg%3E");
}
#dash-overview-view .ov-kpi:nth-child(n+4)::before {
  width: 52px;
  height: 52px;
  left: 50%;
  right: auto;
  bottom: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(7,155,80,.10) 0 54%, rgba(7,155,80,.03) 55% 100%);
  box-shadow: inset 0 0 0 1px rgba(7,155,80,.05);
}
#dash-overview-view .ov-kpi-label {
  position: relative;
  z-index: 1;
  margin-bottom: 7px;
  color: #374262;
  font-size: 10px;
  font-weight: 740;
  letter-spacing: .015em;
  line-height: 1.35;
  text-transform: none;
}
#dash-overview-view .ov-kpi-value {
  position: relative;
  z-index: 1;
  color: var(--ov-navy);
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 790;
  letter-spacing: -.03em;
}
#dash-overview-view .ov-kpi:first-child .ov-kpi-value,
#dash-overview-view .ov-kpi:nth-child(2) .ov-kpi-value {
  color: var(--ov-green);
}
#dash-overview-view .ov-kpi-sub {
  position: relative;
  z-index: 1;
  max-width: 95%;
  margin-top: 7px;
  color: var(--ov-muted);
  font-size: 9.8px;
  line-height: 1.43;
}

#dash-overview-view .ov-mid-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .8fr);
  gap: 13px;
  margin-bottom: 14px;
}
#dash-overview-view .ov-panel {
  border: 1px solid var(--ov-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--ov-shadow);
}
#dash-overview-view .ov-panel-head h3 {
  color: var(--ov-navy);
  font-size: 14px;
  font-weight: 760;
  letter-spacing: -.012em;
}
#dash-overview-view .ov-note {
  color: var(--ov-muted);
  font-size: 10.5px;
  line-height: 1.45;
}
#dash-overview-view #ov-breakdown {
  position: relative;
  display: block;
  padding: 16px 19px;
}
#dash-overview-view #ov-breakdown .ov-panel-head {
  grid-column: 1 / -1;
}
#dash-overview-view .ov-bar {
  display: flex;
  width: 100%;
  height: 14px;
  margin: 0 0 10px;
  overflow: hidden;
  border: 0;
  border-radius: 7px;
  background: #eef1f5;
}

#dash-overview-view .ov-bar span {
  min-width: 2px;
}
#dash-overview-view .ov-seg-taxable { background: #079b50; }
#dash-overview-view .ov-seg-ira { background: #1468df; }
#dash-overview-view .ov-seg-roth { background: #7a54d8; }
#dash-overview-view .ov-seg-other { background: #e6a600; }
#dash-overview-view .ov-legend {
  grid-column: 2;
  grid-row: 2;
  gap: 11px;
  color: var(--ov-text);
  font-size: 11px;
}
#dash-overview-view .ov-legend li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid #eef1f5;
}
#dash-overview-view .ov-legend strong {
  color: var(--ov-navy);
  font-weight: 720;
}
#dash-overview-view .ov-dot {
  width: 9px;
  height: 9px;
  margin: 0;
}
#dash-overview-view .ov-total {
  z-index: 2;
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  width: 90px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ov-muted);
  font-size: 9px;
  line-height: 1.25;
  text-align: center;
}
#dash-overview-view .ov-total strong {
  display: block;
  margin-top: 3px;
  color: var(--ov-navy);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.03em;
}
#dash-overview-view #ov-assumptions {
  min-height: 235px;
  padding: 17px 19px;
}
#dash-overview-view .ov-assum {
  gap: 0;
  margin: 3px 0 11px;
}
#dash-overview-view .ov-assum div {
  min-height: 31px;
  align-items: center;
  border-bottom: 1px solid #eef1f5;
  font-size: 11px;
}
#dash-overview-view .ov-assum dt {
  color: #596581;
}
#dash-overview-view .ov-assum dd {
  color: var(--ov-navy);
  font-weight: 720;
}
#dash-overview-view .ov-strategy-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}
#dash-overview-view .ov-strategy {
  min-height: 186px;
  padding: 15px;
  border: 1px solid var(--ov-line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(9, 21, 75, .025);
}
#dash-overview-view .ov-strategy-active {
  border-color: var(--ov-green);
  background: linear-gradient(145deg, #f8fdf9 0%, #f0faf4 100%);
  box-shadow: inset 0 0 0 1px rgba(7,155,80,.08), 0 6px 17px rgba(7,155,80,.055);
}
#dash-overview-view .ov-strategy-head {
  color: var(--ov-navy);
  font-size: 11.5px;
  font-weight: 720;
}
#dash-overview-view .ov-tag {
  padding: 3px 7px;
  background: #e1f5e9;
  color: #087d43;
  font-size: 8.5px;
}
#dash-overview-view .ov-strategy-desc {
  color: #5c6783;
  font-size: 10px;
  line-height: 1.48;
}
#dash-overview-view .ov-strategy-kpis {
  gap: 0;
  border-top: 1px solid #edf0f5;
}
#dash-overview-view .ov-strategy-kpis div {
  min-height: 29px;
  align-items: center;
  border-bottom: 1px solid #edf0f5;
  font-size: 10px;
}
#dash-overview-view .ov-strategy-kpis span {
  color: #68738f;
}
#dash-overview-view .ov-strategy-kpis strong {
  color: var(--ov-navy);
  font-weight: 720;
}
#dash-overview-view .ov-mc-row strong {
  color: var(--ov-green);
}
#dash-overview-view .ov-linkbtn {
  color: var(--ov-blue);
  font-size: 10.5px;
  font-weight: 680;
  text-decoration: none;
}

/* ---------- Comparison Summary designer reskin — RETIRED v149.364 (tier removed). ---------- */
/* ---------- Approved responsive refinements ---------- */
@media (max-width: 1240px) {
  #view-planner-wizard .wz-shell { grid-template-columns: 258px minmax(0, 1fr); }
  #view-planner-wizard .wz-main { padding-left: 24px; padding-right: 24px; }
  #view-planner-wizard .wz-choice-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dash-overview-view .ov-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #dash-overview-view .ov-kpi { min-height: 154px; }
}
@media (max-width: 900px) {
  #view-planner-wizard .wz-shell { grid-template-columns: 1fr; }
  #view-planner-wizard .wz-side {
    min-height: 0;
    padding: 18px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--wz-line);
  }
  #view-planner-wizard .wz-help { display: none; }
  #view-planner-wizard .wz-main { padding: 24px 16px 44px; }
  #view-planner-wizard .wz-review-card { grid-template-columns: 1fr; gap: 9px; }
  #view-planner-wizard .wz-review-chips { padding-left: 35px; }
  #view-planner-wizard .wz-pension-headrow,
  #view-planner-wizard .wz-event-headrow,
  #view-planner-wizard .wz-phase-headrow { display: none; }
  #view-planner-wizard .wz-pension-row,
  #view-planner-wizard .wz-event-row,
  #view-planner-wizard .wz-phase-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  #dash-overview-view .ov-mid-grid { grid-template-columns: 1fr; }
  #dash-overview-view .ov-strategy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  #view-planner-wizard .wz-card { padding: 18px 15px; }
  #view-planner-wizard .wz-step-head h1 { font-size: 24px; }
  #view-planner-wizard .wz-choice-4 { grid-template-columns: 1fr; }
  #view-planner-wizard .wz-choice { min-height: 0; }
  #view-planner-wizard .wz-acct-headrow { display: none; }
  #view-planner-wizard .wz-acct-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  #view-planner-wizard .wz-acct-name { grid-column: 1 / -1; }
  #view-planner-wizard .wz-review-chips { flex-wrap: wrap; max-height: none; padding-left: 0; }
  #view-planner-wizard .wz-review-chip { width: 100%; padding: 2px 0; border-right: 0; }
  #dash-overview-view .ov-kpi-grid,
  #dash-overview-view .ov-strategy-grid { grid-template-columns: 1fr; }
  #dash-overview-view #ov-breakdown {
    grid-template-columns: 1fr;
    grid-template-rows: auto 156px auto;
  }
  #dash-overview-view #ov-breakdown .ov-bar,
  #dash-overview-view #ov-breakdown .ov-total { grid-column: 1; grid-row: 2; }
  #dash-overview-view #ov-breakdown .ov-legend { grid-column: 1; grid-row: 3; }
}

/* ============================================================================
   v149.333 — ENGINEERING-REVIEW CORRECTIONS (2 items)
   The visual-fidelity pass was accepted except for two decorative elements
   that visually encode quantities they do not represent:
     1. The ending-wealth "donut": a circular mask over width-percentage
        spans renders vertical chords of a circle — segment AREAS no longer
        match the engine's percentages (center slices amplified, edge slices
        compressed). The legend was right; the graphic was wrong.
     2. The probability "gauge": a conic arc with a FIXED 28%-turn fill
        rendered a constant visual reading beneath the live Monte Carlo
        number, contradicting it for any value the engine produces.
   Display-layer rule going forward: no decorative element may encode a
   quantity unless driven by the live value. Both revert to the accurate
   baseline treatments; all other fidelity work is retained.
   ========================================================================== */
/* Corrections applied at source above; no overrides needed. */

/* ============================================================================
   DEEP DIVE LANDING — v149.334 (Drop 5), namespaced dd-*
   ========================================================================== */
#dd-landing { margin-bottom: 26px; }.dd-out { position: absolute; right: 10px; bottom: 10px; color: var(--color-primary, #1B6B6D); }
.dd-howit { display: flex; flex-direction: column; gap: 3px; padding: 13px 18px; border-radius: 12px; background: oklch(0.97 0.03 160); border: 1px solid oklch(0.91 0.04 160); }
.dd-howit strong { font-size: 12.5px; }
.dd-howit span { font-size: 11.5px; color: var(--color-text-secondary, #4b5b62); line-height: 1.5; }

/* ============================================================================
   LEGACY RESKIN — v149.334 (Drop 5). CSS-only: markup and renderLegacy
   untouched; scoped under #dash-legacy-view in the new design language.
   ========================================================================== */
#dash-legacy-view .nm-legacy-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 4px 2px 16px; }
#dash-legacy-view .nm-legacy-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--color-primary, #1B6B6D); }
#dash-legacy-view .nm-legacy-hero h2 { font-size: 21px; margin: 4px 0 6px; letter-spacing: -.02em; }
#dash-legacy-view .nm-legacy-hero p { margin: 0; font-size: 12.5px; color: var(--color-text-muted, #7c8b91); max-width: 640px; line-height: 1.55; }
#dash-legacy-view .nm-legacy-hero-actions { display: flex; gap: 10px; flex-shrink: 0; }
#dash-legacy-view .nm-legacy-disclaimer { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 12px; background: oklch(0.97 0.04 80); border: 1px solid oklch(0.90 0.06 80); font-size: 11.5px; line-height: 1.55; color: var(--color-text-secondary, #5a5140); margin-bottom: 16px; }
#dash-legacy-view .nm-legacy-disclaimer strong { font-size: 12px; }
#dash-legacy-view .nm-legacy-layout { display: grid; grid-template-columns: 168px minmax(0, 1fr) 250px; gap: 16px; align-items: start; }
#dash-legacy-view .nm-legacy-nav { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 14px; padding: 14px; position: sticky; top: 12px; }
#dash-legacy-view .nm-legacy-nav strong { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted, #93a1a6); display: block; margin-bottom: 8px; }
#dash-legacy-view .nm-legacy-nav a { display: block; padding: 7px 10px; border-radius: 8px; font-size: 12px; color: var(--color-text-secondary, #4b5b62); text-decoration: none; }
#dash-legacy-view .nm-legacy-nav a:hover { background: var(--color-bg, #f2f5f5); color: var(--color-primary, #1B6B6D); }
#dash-legacy-view .nm-legacy-main { min-width: 0; }
#dash-legacy-view .nm-legacy-section { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; box-shadow: 0 2px 8px rgba(20,40,60,.04); }
#dash-legacy-view .nm-legacy-section-title { font-size: 14px; margin: 0 0 12px; letter-spacing: -.01em; }
#dash-legacy-view .nm-legacy-main table { width: 100%; border-collapse: collapse; font-size: 12px; }
#dash-legacy-view .nm-legacy-main th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted, #93a1a6); background: var(--color-bg, #f7f9f9); padding: 8px 12px; text-align: right; }
#dash-legacy-view .nm-legacy-main th:first-child, #dash-legacy-view .nm-legacy-main td:first-child { text-align: left; }
#dash-legacy-view .nm-legacy-main td { padding: 8px 12px; border-bottom: 1px solid var(--color-divider, #eef1f2); text-align: right; }
#dash-legacy-view .nm-legacy-empty { padding: 34px 18px; text-align: center; color: var(--color-text-muted, #7c8b91); font-size: 12.5px; background: var(--color-surface, #fff); border: 1px dashed var(--color-border, #d6dcde); border-radius: 14px; }
#dash-legacy-view .nm-legacy-context { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 14px; padding: 16px 18px; position: sticky; top: 12px; }
#dash-legacy-view .nm-legacy-context-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted, #93a1a6); }
#dash-legacy-view .nm-legacy-context h3 { font-size: 14px; margin: 4px 0 12px; }
#dash-legacy-view .nm-legacy-context dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
#dash-legacy-view .nm-legacy-context dl div { display: flex; justify-content: space-between; font-size: 12.5px; }
#dash-legacy-view .nm-legacy-context dt { color: var(--color-text-muted, #7c8b91); }
#dash-legacy-view .nm-legacy-context dd { margin: 0; font-weight: 700; }
#dash-legacy-view .nm-legacy-context dl div:first-child dd { color: var(--color-primary, #1B6B6D); font-size: 15px; }
#dash-legacy-view .nm-legacy-context-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-divider, #eef1f2); }
#dash-legacy-view .nm-legacy-context-actions a, #dash-legacy-view .nm-legacy-context-actions button { font-size: 12px; color: var(--color-primary, #1B6B6D); background: none; border: none; text-align: left; padding: 0; cursor: pointer; text-decoration: underline; }
@media (max-width: 1080px) { #dash-legacy-view .nm-legacy-layout { grid-template-columns: 1fr; } #dash-legacy-view .nm-legacy-nav, #dash-legacy-view .nm-legacy-context { position: static; } }

/* ============================================================================
   HIGH-RES FIDELITY PASS — Deep Dive Landing + Legacy Planner
   Targeted presentation-only refinement for the approved v149.334 mocks.
   No IDs, data attributes, controls, copy, calculations, or wiring changed.
   ========================================================================== */

/* --- shared rendering clarity on the two scoped surfaces --- */
#dash-deepdive-view,
#dash-legacy-view {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* ==========================================================================
   DEEP DIVE LANDING — high-resolution fidelity
   ========================================================================== */
/* The runtime workspace builder makes the section a three-column grid. The
   landing is a direct grid child, so it must explicitly span the full canvas. */
#dd-landing {
  grid-column: 1 / -1 !important;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0 0 30px;
  color: #071542;
}

/* Remove the older generated Deep Dive hero so the authored page header is
   the single visual heading. Navigation and tool wiring remain untouched. */#dash-deepdive-view .planning-section-header {
  grid-column: 1 / -1 !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 2px 0 18px !important;
  padding: 0 2px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#dash-deepdive-view .planning-section-header > svg {
  width: 56px !important;
  height: 56px !important;
  padding: 13px;
  box-sizing: border-box;
  border-radius: 13px;
  color: #078a52 !important;
  background: linear-gradient(145deg, #eaf8f0 0%, #dff4ea 100%);
  box-shadow: inset 0 0 0 1px rgba(8,138,82,.05);
}
#dash-deepdive-view .planning-section-header h2 {
  margin: 0 0 5px !important;
  color: #071542 !important;
  font-family: var(--font-display, "Plus Jakarta Sans", sans-serif) !important;
  font-size: clamp(30px, 2.5vw, 40px) !important;
  font-weight: 800 !important;
  letter-spacing: -.045em !important;
  line-height: 1.04 !important;
}
#dash-deepdive-view .planning-section-header p {
  color: #26375e !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}#dd-landing .dd-out { display: none; }

#dd-landing .dd-howit {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  min-height: 72px;
  box-sizing: border-box;
  padding: 14px 18px 14px 56px;
  border: 1px solid #cfdbfb;
  border-radius: 11px;
  background: linear-gradient(90deg, #f5f8ff 0%, #f8faff 100%);
}
#dd-landing .dd-howit::before {
  content: "?";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 2px solid #1461de;
  border-radius: 50%;
  color: #1461de;
  background: #fff;
  font-size: 15px;
  font-weight: 800;
}
#dd-landing .dd-howit strong {
  color: #0b57d0;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}
#dd-landing .dd-howit span {
  color: #26375e;
  font-size: 11.5px;
  line-height: 1.55;
}
@media (max-width: 560px) {
  #dash-deepdive-view .planning-section-header > svg { width: 48px !important; height: 48px !important; }
  #dash-deepdive-view .planning-section-header h2 { font-size: 28px !important; }  #dd-landing .dd-howit { display: block; padding-left: 56px; }
  #dd-landing .dd-howit strong { display: block; margin-bottom: 3px; }
}

/* ==========================================================================
   LEGACY PLANNER — high-resolution fidelity
   ========================================================================== */
#dash-legacy-view .nm-legacy-workspace {
  color: #071542;
  background: transparent;
}
#dash-legacy-view .nm-legacy-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 13px;
  padding: 2px 2px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#dash-legacy-view .nm-legacy-eyebrow {
  display: block;
  margin: 0 0 3px;
  color: #078b4d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: none;
}
#dash-legacy-view .nm-legacy-hero h2 {
  margin: 0 0 5px;
  color: #071542;
  font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.08;
}
#dash-legacy-view .nm-legacy-hero p {
  max-width: 700px;
  margin: 0;
  color: #26375e;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.55;
}
#dash-legacy-view .nm-legacy-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
  flex-shrink: 0;
}
#dash-legacy-view .nm-legacy-hero-actions .btn {
  min-height: 42px;
  padding: 0 19px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 750;
}
#dash-legacy-view .nm-legacy-hero-actions .btn-primary {
  min-width: 175px;
  background: linear-gradient(180deg, #079454 0%, #078148 100%);
  border-color: #078148;
  box-shadow: 0 6px 14px rgba(4,126,69,.14);
}

#dash-legacy-view .nm-legacy-disclaimer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
  min-height: 68px;
  margin: 0 0 14px;
  padding: 12px 18px 12px 54px;
  color: #20345f;
  border: 1px solid #cbd8f6;
  border-radius: 9px;
  background: #f7f9ff;
}
#dash-legacy-view .nm-legacy-disclaimer::before {
  content: "i";
  position: absolute;
  left: 17px;
  top: 13px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #1747aa;
  font: 800 15px/1 Georgia, serif;
}
#dash-legacy-view .nm-legacy-disclaimer strong {
  color: #0c2c72;
  font-size: 12px;
  font-weight: 800;
  white-space: normal;
}
#dash-legacy-view .nm-legacy-disclaimer span {
  color: #20345f;
  font-size: 10.8px;
  line-height: 1.48;
}

#dash-legacy-view .nm-legacy-layout {
  display: grid;
  grid-template-columns: 185px minmax(0, 1fr) 270px;
  gap: 18px;
  align-items: start;
}
#dash-legacy-view .nm-legacy-nav {
  position: sticky;
  top: 14px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 10px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#dash-legacy-view .nm-legacy-nav > strong {
  display: block;
  margin: 0 0 7px;
  padding: 0 2px;
  color: #071542;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}
#dash-legacy-view .nm-legacy-nav a {
  display: block;
  margin: 0 0 4px;
  padding: 9px 11px;
  border-radius: 6px;
  color: #2a3c62;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
}
#dash-legacy-view .nm-legacy-nav a:first-child,
#dash-legacy-view .nm-legacy-nav a:hover {
  color: #087744;
  background: #e8f6ed;
}
#dash-legacy-view .nm-legacy-main { min-width: 0; }
#dash-legacy-view .nm-legacy-module #legacy-results {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#dash-legacy-view .nm-legacy-module #legacy-results > .nm-legacy-section,
#dash-legacy-view .nm-legacy-module #legacy-results > div {
  box-sizing: border-box;
  margin: 0 0 12px;
  padding: 13px 14px !important;
  border: 1px solid #dce3ec;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(18,38,72,.025);
}
#dash-legacy-view .nm-legacy-module #legacy-results > div:first-child {
  border-top: 1px solid #dce3ec;
}
#dash-legacy-view .nm-legacy-section-title {
  margin: 0 0 5px !important;
  color: #071542 !important;
  font-family: var(--font-display, "Plus Jakarta Sans", sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: -.015em !important;
  line-height: 1.35 !important;
}
#dash-legacy-view .nm-legacy-section-title svg {
  width: 17px;
  height: 17px;
  color: #154eb8 !important;
  stroke: #154eb8 !important;
}
#dash-legacy-view .nm-legacy-section-title + p {
  margin: 0 0 8px !important;
  color: #425374 !important;
  font-size: 10.5px !important;
  line-height: 1.45 !important;
}

/* Estate Snapshot section: the live total and account mix remain the source
   of truth; this pass only changes their containers and typography. */
#dash-legacy-view #legacy-results > .nm-legacy-section:first-child > div:nth-of-type(1) {
  margin: 0 0 8px !important;
  padding: 4px 12px 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#dash-legacy-view #legacy-results > .nm-legacy-section:first-child > div:nth-of-type(1) > div:first-child {
  margin-bottom: 2px !important;
  color: #425374 !important;
  font-size: 9.5px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
#dash-legacy-view #legacy-results > .nm-legacy-section:first-child > div:nth-of-type(1) > div:last-child {
  color: #078a43 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -.025em;
}
#dash-legacy-view #legacy-results > .nm-legacy-section:first-child > div:nth-of-type(2) {
  gap: 10px !important;
  margin: 0 0 9px !important;
}
#dash-legacy-view #legacy-results > .nm-legacy-section:first-child > div:nth-of-type(2) > div {
  min-height: 106px;
  box-sizing: border-box;
  padding: 10px 12px !important;
  border: 1px solid #dfe5ed !important;
  border-radius: 7px !important;
  background: #fff !important;
  box-shadow: none !important;
}
#dash-legacy-view #legacy-results > .nm-legacy-section:first-child > div:nth-of-type(2) > div > div:first-child {
  float: left;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin: 0 9px 34px 0 !important;
  border-radius: 50%;
  color: #fff;
  background: #079454;
  font-size: 16px !important;
}
#dash-legacy-view #legacy-results > .nm-legacy-section:first-child > div:nth-of-type(2) > div:nth-child(2) > div:first-child { background: #7137d7; }
#dash-legacy-view #legacy-results > .nm-legacy-section:first-child > div:nth-of-type(2) > div:nth-child(3) > div:first-child { background: #0a6ce5; }
#dash-legacy-view #legacy-results > .nm-legacy-section:first-child > div:nth-of-type(2) > div > div:nth-child(2) {
  margin: 0 0 1px !important;
  color: #071542 !important;
  font-size: 10.2px !important;
  font-weight: 750 !important;
}
#dash-legacy-view #legacy-results > .nm-legacy-section:first-child > div:nth-of-type(2) > div > div:nth-child(3) {
  margin: 0 0 1px !important;
  color: #071542 !important;
  font-size: 16.5px !important;
  font-weight: 800 !important;
}
#dash-legacy-view #legacy-results > .nm-legacy-section:first-child > div:nth-of-type(2) > div > div:nth-child(4) {
  margin: 0 0 5px !important;
  color: #5b6c88 !important;
  font-size: 9.5px !important;
}
#dash-legacy-view #legacy-results > .nm-legacy-section:first-child > div:nth-of-type(2) > div > div:nth-child(5) {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  color: #071542 !important;
  background: transparent !important;
  font-size: 9.6px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}
/* Long methodology copy on each account remains in the DOM but is collapsed
   visually so the summary matches the approved compact account cards. */
/* v149.335 review: duplicate positional hide removed (caught by the new spec pin). */
#dash-legacy-view #legacy-results > .nm-legacy-section:first-child > div:nth-of-type(3) {
  height: 14px !important;
  margin: 0 0 6px !important;
  border-radius: 4px !important;
}
#dash-legacy-view #legacy-results > .nm-legacy-section:first-child > div:nth-of-type(4) {
  justify-content: space-around;
  gap: 12px !important;
  margin: 0 !important;
  color: #35486b !important;
  font-size: 9.5px !important;
}

/* Beneficiary controls */
#dash-legacy-view #legacy-results > .nm-legacy-section:nth-child(2) > div:nth-of-type(1) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(105px, 1fr)) auto !important;
  align-items: end !important;
  gap: 8px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
#dash-legacy-view #legacy-results > .nm-legacy-section:nth-child(2) > div:nth-of-type(1) > div {
  min-width: 0 !important;
}
#dash-legacy-view #legacy-results > .nm-legacy-section:nth-child(2) > div:nth-of-type(2) {
  display: grid !important;
  grid-template-columns: minmax(220px, 1.6fr) minmax(120px, .7fr) !important;
  align-items: end !important;
  gap: 10px !important;
  margin: 0 0 7px !important;
  padding: 9px 10px !important;
  border: 1px solid #e1e6ee !important;
  border-radius: 7px !important;
  background: #fbfcfe !important;
}
#dash-legacy-view #legacy-results label {
  color: #52617d !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
#dash-legacy-view #legacy-results input,
#dash-legacy-view #legacy-results select {
  height: 34px !important;
  box-sizing: border-box;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  color: #071542 !important;
  border: 1px solid #d9e0eb !important;
  border-radius: 6px !important;
  background: #fff !important;
  font-size: 10.5px !important;
  box-shadow: none !important;
}
#dash-legacy-view #legacy-results #legacy-calc-btn {
  min-width: 145px;
  height: 34px;
  padding: 0 17px !important;
  border-radius: 6px !important;
  background: #071b62 !important;
  border-color: #071b62 !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
}
#dash-legacy-view #legacy-results #legacy-heir-edb {
  width: 15px !important;
  height: 15px !important;
  accent-color: #078a4a;
}

/* Live beneficiary result summary cards and tables */
#dash-legacy-view #legacy-beneficiary-results > div:first-child {
  gap: 9px !important;
  margin: 0 0 8px !important;
}
#dash-legacy-view #legacy-beneficiary-results > div:first-child > div {
  min-height: 58px;
  padding: 8px 10px !important;
  border: 1px solid #dfe5ee !important;
  border-radius: 6px !important;
  background: #fff !important;
}
#dash-legacy-view #legacy-beneficiary-results > div:first-child > div > div:first-child {
  margin-bottom: 1px !important;
  color: #52617d !important;
  font-size: 9px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
#dash-legacy-view #legacy-beneficiary-results > div:first-child > div > div:nth-child(2) {
  color: #078a43 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}
#dash-legacy-view #legacy-beneficiary-results > div:first-child > div:nth-child(2) > div:nth-child(2) { color: #7137d7 !important; }
#dash-legacy-view .nm-legacy-main table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  color: #071542;
  border: 1px solid #dfe5ed;
  border-radius: 6px;
  font-size: 9.5px;
}
#dash-legacy-view .nm-legacy-main th {
  padding: 6px 8px !important;
  color: #52617d !important;
  background: #f8f9fc !important;
  border-bottom: 1px solid #dfe5ed;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: right;
}
#dash-legacy-view .nm-legacy-main td {
  padding: 5px 8px !important;
  color: #071542;
  border-bottom: 1px solid #edf0f5;
  font-size: 9.2px !important;
  text-align: right;
}
#dash-legacy-view .nm-legacy-main tr:last-child td { border-bottom: 0; }
#dash-legacy-view .nm-legacy-main th:first-child,
#dash-legacy-view .nm-legacy-main td:first-child { text-align: left; }
#dash-legacy-view #legacy-beneficiary-results details {
  margin-top: 7px !important;
  overflow: hidden;
  border: 1px solid #dfe5ed !important;
  border-radius: 6px !important;
  background: #fff !important;
}
#dash-legacy-view #legacy-beneficiary-results details > summary {
  padding: 8px 10px !important;
  color: #071542 !important;
  font-size: 10px !important;
  font-weight: 750 !important;
}

#dash-legacy-view .nm-legacy-context {
  position: sticky;
  top: 14px;
  padding: 16px 17px;
  color: #071542;
  border: 1px solid #dce3ec;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(18,38,72,.025);
}
#dash-legacy-view .nm-legacy-context::before {
  content: "▧";
  float: left;
  margin: 0 10px 0 0;
  color: #1162dd;
  font-size: 23px;
  line-height: 1;
}
/* v149.335 review: kicker restored — it states the snapshot timeframe (plan horizon), without which the rail can be misread as current assets. */
#dash-legacy-view .nm-legacy-context h3 {
  margin: 0 0 16px;
  color: #071542;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}
#dash-legacy-view .nm-legacy-context dl {
  clear: both;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}
#dash-legacy-view .nm-legacy-context dl > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid #edf0f4;
  font-size: 11px;
}
#dash-legacy-view .nm-legacy-context dl > div:first-child {
  display: block;
  padding: 0 0 14px;
  border-top: 0;
  border-bottom: 1px solid #edf0f4;
}
#dash-legacy-view .nm-legacy-context dt {
  color: #52617d;
  font-size: 10px;
}
#dash-legacy-view .nm-legacy-context dd {
  margin: 0;
  color: #071542;
  font-size: 12px;
  font-weight: 800;
}
#dash-legacy-view .nm-legacy-context dl > div:first-child dt {
  display: block;
  margin-bottom: 4px;
}
#dash-legacy-view .nm-legacy-context dl > div:first-child dd {
  color: #078a43;
  font-size: 19px;
  letter-spacing: -.02em;
}
#dash-legacy-view .nm-legacy-context-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #edf0f4;
}
#dash-legacy-view .nm-legacy-context-actions a,
#dash-legacy-view .nm-legacy-context-actions button {
  width: auto;
  padding: 0;
  color: #0b5fd6;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 10.5px;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
}
#dash-legacy-view .nm-legacy-context-actions a:hover,
#dash-legacy-view .nm-legacy-context-actions button:hover {
  color: #0848a4;
  background: transparent;
  text-decoration: underline;
}

#dash-legacy-view .nm-legacy-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 46px 22px;
  color: #52617d;
  border: 1px dashed #cbd5e2;
  border-radius: 9px;
  background: #fbfcfe;
  text-align: center;
}
#dash-legacy-view .nm-legacy-empty strong { color: #071542; font-size: 14px; }

@media (max-width: 1220px) {
  #dash-legacy-view .nm-legacy-layout { grid-template-columns: 165px minmax(0, 1fr); }
  /* v149.337 audit: duplicate context hide removed (rail stacks, never hides). */
}
@media (max-width: 860px) {
  #dash-legacy-view .nm-legacy-hero { flex-direction: column; }
  #dash-legacy-view .nm-legacy-hero-actions { justify-content: flex-start; padding-top: 0; }
  #dash-legacy-view .nm-legacy-layout { display: block; }
  #dash-legacy-view .nm-legacy-nav {
    position: static;
    display: flex;
    max-height: none;
    margin: 0 0 10px;
    overflow-x: auto;
  }
  #dash-legacy-view .nm-legacy-nav > strong { display: none; }
  #dash-legacy-view .nm-legacy-nav nav { display: flex; gap: 4px; }
  #dash-legacy-view .nm-legacy-nav a { flex: 0 0 auto; white-space: nowrap; }
  #dash-legacy-view #legacy-results > .nm-legacy-section:nth-child(2) > div:nth-of-type(1) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px) {
  #dash-legacy-view .nm-legacy-hero-actions { width: 100%; flex-wrap: wrap; }
  #dash-legacy-view .nm-legacy-hero-actions .btn { flex: 1 1 160px; }
  #dash-legacy-view .nm-legacy-disclaimer { padding-left: 48px; }
  #dash-legacy-view #legacy-results > .nm-legacy-section:first-child > div:nth-of-type(2) {
    grid-template-columns: 1fr !important;
  }
  #dash-legacy-view #legacy-results > .nm-legacy-section:nth-child(2) > div:nth-of-type(1),
  #dash-legacy-view #legacy-results > .nm-legacy-section:nth-child(2) > div:nth-of-type(2) {
    grid-template-columns: 1fr !important;
  }
  #dash-legacy-view #legacy-results #legacy-calc-btn { width: 100%; }
}
/* Final specificity correction: neutralize the pre-v149.334 violet section cap. */
#dash-legacy-view .nm-legacy-module #legacy-results > div:first-child,
#dash-legacy-view .nm-legacy-module #legacy-results > .nm-legacy-section:first-child {
  border-top: 1px solid #dce3ec !important;
}

/* v149.336 — Drop 6: returns mode + volatility presets + inert-column cue */
.wz-mode-sub { margin: -6px 0 14px 8px; transform: scale(.94); transform-origin: left; }
.wz-rate-panel { margin-bottom: 4px; }
/* v149.402 — column-dimming rules removed with the step-2 return column. */
[data-wiz-volcustom] { margin-top: 8px; max-width: 200px; }

/* ============================================================================
   WORKSPACE MODES — v149.339: Savings|Retirement toggle, state panel, band
   ========================================================================== */
.nm-ws-modes { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--color-bg, #eef2f3); border: 1px solid var(--color-border, #e2e7e9); margin-right: 10px; }
.nm-ws-mode-btn { border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 650; color: var(--color-text-secondary, #4b5b62); cursor: pointer; }
.nm-ws-mode-btn.active { background: var(--color-surface, #fff); color: var(--color-primary, #1B6B6D); box-shadow: 0 1px 4px rgba(20,40,60,.10); }
.nm-ws-state { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 16px; padding: 34px 36px; margin-bottom: 20px; max-width: 720px; box-shadow: 0 2px 10px rgba(20,40,60,.05); }
.nm-ws-state h2 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.01em; }
.nm-ws-state p { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--color-text-secondary, #4b5b62); max-width: 520px; }
.nm-ws-state-list { margin: 0 0 16px; padding-left: 18px; font-size: 12.5px; color: var(--color-text-secondary, #4b5b62); display: grid; gap: 4px; }
.nm-ws-state-list:empty { display: none; margin: 0; }
.nm-ws-state-icon { width: 44px; height: 44px; border-radius: 12px; background: oklch(0.94 0.05 160); margin-bottom: 14px; }
/* no-zeros rule: when a designed state is active, the mode's dashboard
   content yields to it */
.nm-ws-stated .nm-dash-kpis,
.nm-ws-stated .nm-panel { display: none; }
.nm-ws-stated #workspace-state-panel { display: block; }
/* modeled percentile band on the savings trajectory */
.nm-ws-band { stroke-dasharray: 4 4; opacity: .65; }
.nm-ws-band-low { opacity: .5; }

/* ============================================================================
   WORKSPACE HIGH-RES PASS — v149.339
   Approved Savings/Growth + Retirement workspace visual treatment.
   CSS-only, fully scoped to #view-workspace; no IDs, data attributes,
   copy, values, renderers, or quantity-driven geometry changed.
   ========================================================================== */
#view-workspace {
  --ws-ink: #0b214f;
  --ws-ink-soft: #526786;
  --ws-muted: #73839d;
  --ws-line: #dce5f0;
  --ws-line-soft: #edf2f7;
  --ws-blue: #0868e9;
  --ws-blue-soft: #eaf3ff;
  --ws-green: #0ba85f;
  --ws-green-soft: #e9f8f0;
  --ws-teal: #0ca7a9;
  --ws-purple: #7147df;
  --ws-orange: #ee8b20;
  --ws-card-shadow: 0 5px 16px rgba(32, 62, 100, .055);
  --ws-panel-shadow: 0 8px 24px rgba(32, 62, 100, .06);
  min-height: 100vh;
  padding: 8px;
  background: #f3f7fb;
  color: var(--ws-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

#view-workspace .nm-dash-shell {
  grid-template-columns: 238px minmax(0, 1fr);
  max-width: 1760px;
  min-height: calc(100vh - 16px);
  border: 1px solid #dfe7f1;
  border-radius: 20px;
  box-shadow: 0 16px 44px rgba(31, 57, 92, .09);
}

#view-workspace .nm-dash-sidebar {
  padding: 22px 16px 18px;
  border-right-color: #e4eaf2;
}

#view-workspace .nm-dash-brand {
  gap: 9px;
  padding: 0 12px 20px;
  color: #071b49;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -.035em;
}

#view-workspace .nm-dash-brand svg {
  width: 31px;
  height: 31px;
}

#view-workspace .nm-dash-nav { gap: 3px; }

/* v149.386 — grouped sidebar sections (Savings Estimator / Retirement Planner
   / General). Section labels are quiet uppercase headers so each planning world
   reads as its own group of destinations. */
#view-workspace .nm-dash-nav .nm-nav-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
}
#view-workspace .nm-dash-nav .nm-nav-section:first-of-type { margin-top: 8px; }
#view-workspace .nm-dash-nav .nm-nav-section-label {
  padding: 4px 12px 5px;
  color: #8394ad;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

#view-workspace .nm-dash-nav a {
  min-height: 42px;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #17345f;
  font-size: 12.75px;
  font-weight: 650;
  line-height: 1.25;
}

#view-workspace .nm-dash-nav a .nm-ui-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  color: #7d91ad;
}

#view-workspace .nm-dash-nav a:hover,
#view-workspace .nm-dash-nav a.active {
  color: #075fd2;
  background: #e9f2ff;
}

#view-workspace .nm-dash-help {
  padding: 18px 15px;
  border-color: #dce5f0;
  border-radius: 13px;
  background: linear-gradient(145deg, #f8fbff 0%, #ffffff 100%);
  box-shadow: none;
}

#view-workspace .nm-dash-help strong {
  color: #10284f;
  font-size: 12px;
}

#view-workspace .nm-dash-help p {
  margin: 6px 0 10px;
  color: #607491;
  font-size: 10.5px;
}

#view-workspace .nm-dash-help a { font-size: 10.5px; }
#view-workspace .nm-dash-help > span { display: none; }

#view-workspace .nm-dash-main {
  min-width: 0;
  padding: 20px 24px 26px;
  background:
    radial-gradient(circle at 86% 0%, rgba(219, 236, 255, .34), transparent 27%),
    #ffffff;
}

#view-workspace .nm-dash-head {
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 17px;
}

#view-workspace .nm-dash-head h1 {
  margin: 0 0 4px;
  color: #071b49;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
}

#view-workspace .nm-dash-head p {
  color: #687b98;
  font-size: 12px;
  line-height: 1.45;
}

#view-workspace .nm-dash-head-actions {
  flex-wrap: nowrap;
  gap: 8px;
}

/* v149.340 review: the legacy switch was removed at source (see app.js); the hide rule is retired with it. */

#view-workspace .nm-ws-modes {
  order: -10;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border: 1px solid #d7e1ee;
  border-radius: 10px;
  background: #f7f9fc;
  box-shadow: 0 1px 2px rgba(25, 53, 90, .03);
}

#view-workspace .nm-ws-mode-btn {
  min-width: 82px;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 7px;
  color: #5c6f8d;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: -.005em;
}

#view-workspace .nm-ws-mode-btn:hover {
  color: #075fd2;
  background: #edf4ff;
}

#view-workspace .nm-ws-mode-btn.active {
  color: #075fd2;
  background: #e8f2ff;
  box-shadow: 0 2px 6px rgba(6, 100, 232, .10);
}

#view-workspace .nm-dash-help-button {
  width: 37px;
  height: 37px;
  border: 1px solid #dce5f0;
  border-radius: 9px;
  background: #fff;
  color: #536987;
}

#view-workspace .nm-dash-user {
  min-height: 38px;
  padding: 3px 8px 3px 4px;
  border: 1px solid #dce5f0;
  border-radius: 9px;
  background: #fff;
  color: #10284f;
  font-size: 11px;
}

#view-workspace .nm-avatar {
  width: 29px;
  height: 29px;
  color: #28577e;
  background: #e7f1fa;
  font-size: 10px;
}

#view-workspace .nm-dash-head-actions > .btn {
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 9px;
  box-shadow: 0 6px 15px rgba(6, 100, 232, .18);
  font-size: 11px;
  font-weight: 750;
}

#view-workspace .nm-dash-kpis {
  gap: 12px;
}

#view-workspace .nm-kpi-card,
#view-workspace .nm-panel {
  border-color: var(--ws-line);
  border-radius: 13px;
  background: rgba(255, 255, 255, .98);
  box-shadow: var(--ws-card-shadow);
}

#view-workspace .nm-kpi-card {
  position: relative;
  min-height: 176px;
  overflow: hidden;
  padding: 15px 16px 13px;
}

#view-workspace .nm-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 13px 0 0 13px;
  background: var(--ws-blue);
}

#view-workspace #workspace-kpis-retirement .nm-kpi-card:nth-child(1)::before { background: var(--ws-green); }
#view-workspace #workspace-kpis-retirement .nm-kpi-card:nth-child(2)::before { background: var(--ws-blue); }
#view-workspace #workspace-kpis-retirement .nm-kpi-card:nth-child(3)::before { background: var(--ws-teal); }
#view-workspace #workspace-kpis-retirement .nm-kpi-card:nth-child(4)::before { background: var(--ws-purple); }

#view-workspace .nm-kpi-card h2,
#view-workspace .nm-panel h2 {
  margin: 0 0 11px;
  color: #112b59;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: -.006em;
}

#view-workspace .nm-kpi-card > strong,
#view-workspace .nm-confidence-row strong {
  color: #0a224f;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.035em;
}

#view-workspace .nm-kpi-card > small,
#view-workspace .nm-confidence-row small {
  color: #74839a;
  font-size: 10.25px;
  line-height: 1.35;
}

#view-workspace .nm-confidence-row {
  min-height: 68px;
  gap: 10px;
}

#view-workspace .nm-ring {
  width: 67px;
  height: 67px;
  flex: 0 0 67px;
  box-shadow: inset 0 0 0 1px rgba(11, 168, 95, .05);
}

#view-workspace .nm-ring::after { inset: 9px; }

#view-workspace .nm-spark {
  height: 39px;
  margin: 12px 0 4px;
}

#view-workspace .nm-spark path {
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#view-workspace .nm-kpi-context {
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid var(--ws-line-soft);
  color: #73839a;
  font-size: 9.75px;
  line-height: 1.4;
}

#view-workspace #workspace-tax-note,
#view-workspace #workspace-g-goal-note {
  color: #526987;
  font-weight: 600;
}

#view-workspace .nm-dash-hint {
  margin: 8px 0 0;
  padding: 8px 11px;
  border-color: #dde7f2;
  border-radius: 9px;
  background: #f8fbff;
  color: #5d718e;
  font-size: 10.5px;
}

/* Growth hero: projected savings leads, with the remaining facts in a
   compact stat row. All quantity displays remain the live, ID-backed values. */
#view-workspace #workspace-kpis-growth {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

#view-workspace #workspace-kpis-growth .nm-kpi-card {
  min-height: 174px;
}

#view-workspace #workspace-kpis-growth .nm-kpi-card:nth-child(3) {
  order: -5;
  grid-column: span 4;
  background:
    radial-gradient(circle at 88% 12%, rgba(102, 220, 175, .20), transparent 31%),
    linear-gradient(145deg, #ffffff 0%, #f4fcf8 100%);
}

#view-workspace #workspace-kpis-growth .nm-kpi-card:nth-child(1) { order: -4; grid-column: span 2; }
#view-workspace #workspace-kpis-growth .nm-kpi-card:nth-child(2) { order: -3; grid-column: span 2; }
#view-workspace #workspace-kpis-growth .nm-kpi-card:nth-child(4) { order: -2; grid-column: span 2; }
#view-workspace #workspace-kpis-growth .nm-kpi-card:nth-child(5) { order: -1; grid-column: span 2; }

#view-workspace #workspace-kpis-growth .nm-kpi-card:nth-child(3)::before { background: var(--ws-green); }
#view-workspace #workspace-kpis-growth .nm-kpi-card:nth-child(1)::before { background: var(--ws-blue); }
#view-workspace #workspace-kpis-growth .nm-kpi-card:nth-child(2)::before { background: var(--ws-teal); }
#view-workspace #workspace-kpis-growth .nm-kpi-card:nth-child(4)::before { background: #1d75e7; }
#view-workspace #workspace-kpis-growth .nm-kpi-card:nth-child(5)::before { background: var(--ws-orange); }

#view-workspace #workspace-kpis-growth .nm-kpi-card:nth-child(3) > strong {
  color: #078d50;
  font-size: 31px;
}

#view-workspace #workspace-kpis-growth .nm-kpi-card:nth-child(3) > small {
  max-width: 230px;
}

#view-workspace .nm-panel {
  padding: 16px;
  box-shadow: var(--ws-panel-shadow);
}

#view-workspace .nm-dash-middle {
  grid-template-columns: minmax(0, 1.28fr) minmax(330px, .92fr);
  gap: 12px;
  margin-top: 12px;
}

#view-workspace .nm-portfolio-panel {
  min-height: 222px;
}

#view-workspace .nm-portfolio-panel > small {
  color: #76869d;
  font-size: 9.75px;
}

#view-workspace .nm-portfolio-panel > strong {
  margin: 2px 0 8px;
  color: #0a224f;
  font-size: 24px;
  letter-spacing: -.03em;
}

#view-workspace .nm-portfolio-body {
  gap: 24px;
}

#view-workspace .nm-donut {
  width: 128px;
  height: 128px;
  flex-basis: 128px;
  box-shadow: 0 0 0 1px rgba(20, 47, 82, .03);
}

#view-workspace .nm-donut::after { inset: 34px; }

#view-workspace .nm-portfolio-body li {
  gap: 8px;
  padding: 6px 0;
  color: #526987;
  font-size: 10.5px;
}

#view-workspace .nm-portfolio-body li small { font-size: 9px; }
#view-workspace .nm-portfolio-body li b { color: #19345e; font-size: 10px; }

#view-workspace .nm-recommend-panel {
  position: relative;
  min-height: 222px;
  padding-top: 16px;
}

#view-workspace .nm-recommend-panel > h2 { padding-right: 110px; }

#view-workspace .nm-recommend-panel .nm-view-link {
  position: absolute;
  top: 16px;
  right: 16px;
  margin: 0;
}

#view-workspace .nm-recommend-list {
  gap: 8px;
}

#view-workspace .nm-recommend-list > a {
  grid-template-columns: 34px minmax(0, 1fr) 12px;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #dfe7f1;
  border-radius: 10px !important;
  background: #fff;
  box-shadow: 0 2px 7px rgba(28, 56, 92, .025);
}

#view-workspace .nm-recommend-list > a:hover {
  border-color: #c8d9ee;
  background: #f9fbfe;
  transform: translateY(-1px);
}

#view-workspace .nm-recommend-list i {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

#view-workspace .nm-recommend-list b {
  color: #132f5c;
  font-size: 10.75px;
}

#view-workspace .nm-recommend-list small {
  color: #72839b;
  font-size: 9.2px;
  line-height: 1.3;
}

#view-workspace .nm-recommend-list em { font-size: 18px; }
#view-workspace .nm-view-link { color: #0664e8; font-size: 10px; }

#view-workspace .nm-dash-bottom {
  grid-template-columns: minmax(0, .88fr) minmax(440px, 1.12fr);
  gap: 12px;
  margin-top: 12px;
}

#view-workspace .nm-ws-charts-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#view-workspace .nm-ws-chart-card {
  min-width: 0;
  min-height: 198px;
}

#view-workspace .nm-ws-chart-card h2 { margin-bottom: 3px; }

#view-workspace .nm-ws-chart-meta {
  margin: 0 0 4px;
  color: #71839c;
  font-size: 9px;
}

#view-workspace .nm-ws-chart {
  height: 82px;
  margin-top: 3px;
}

#view-workspace .nm-ws-chart .nm-ws-area { opacity: .10; }

#view-workspace .nm-ws-chart .nm-ws-line {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#view-workspace .nm-ws-band {
  stroke-dasharray: 7 6;
  stroke-width: 1.55 !important;
  opacity: .72;
}

#view-workspace .nm-ws-band-low { opacity: .56; }

#view-workspace .nm-ws-chart-legend {
  gap: 3px;
  margin-top: 6px;
}

#view-workspace .nm-ws-chart-legend li {
  gap: 5px;
  color: #6c7f98;
  font-size: 8.7px;
  line-height: 1.25;
}

#view-workspace .nm-ws-chart-legend li b {
  color: #526987;
  font-size: 8.4px;
}

#view-workspace .nm-ws-chart-legend i {
  width: 6px;
  height: 6px;
}

#view-workspace .nm-ws-chart-card .nm-kpi-context {
  margin-top: 7px;
  padding-top: 7px;
  font-size: 8.75px;
}

#view-workspace .nm-plans-panel {
  position: relative;
  min-width: 0;
  min-height: 198px;
}

#view-workspace .nm-plans-panel > h2 { padding-right: 90px; }

#view-workspace .nm-plans-panel > .nm-view-link {
  position: absolute;
  top: 16px;
  right: 16px;
  margin: 0;
}

#view-workspace .nm-plan-table .head,
#view-workspace .nm-plan-table #workspace-plan-rows > a {
  grid-template-columns: minmax(150px, 1.65fr) minmax(78px, .8fr) minmax(100px, .85fr);
  gap: 9px;
}

#view-workspace .nm-plan-table .head {
  padding: 7px 8px;
  color: #8090a6;
  border-color: #e5ebf2;
  font-size: 8.8px;
}

#view-workspace .nm-plan-table #workspace-plan-rows > a {
  min-height: 38px;
  padding: 9px 8px;
  color: #17335f;
  border-color: #edf1f6;
  font-size: 9.6px;
}

#view-workspace .nm-plan-table #workspace-plan-rows > a b { font-size: 9.8px; }
#view-workspace .nm-plan-table em { padding: 2px 6px; font-size: 7.5px; }
#view-workspace .nm-plan-confidence { min-width: 44px; padding: 3px 6px; font-size: 8.5px; }
#view-workspace .nm-plan-empty { padding: 22px 8px; font-size: 10px; }

/* Growth mode uses the same workspace shell but changes the content rhythm:
   trajectory + next steps lead, then contribution detail + saved plans,
   with the savings mix retained below. */
#view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-dash-main {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .95fr);
  grid-auto-rows: auto;
  gap: 12px;
  align-content: start;
}

#view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-dash-head,
#view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) #workspace-kpis-growth,
#view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) #workspace-growth-hint {
  grid-column: 1 / -1;
}

#view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-dash-head { grid-row: 1; margin-bottom: 0; }
#view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) #workspace-kpis-growth { grid-row: 2; }
#view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) #workspace-growth-hint { grid-row: 3; margin-top: -4px; }

#view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-dash-middle,
#view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-dash-bottom,
#view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-ws-charts-col {
  display: contents;
}

#view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-ws-chart-card:nth-child(1) {
  grid-column: 1;
  grid-row: 4;
  min-height: 278px;
}

#view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-ws-chart-card:nth-child(1) .nm-ws-chart {
  height: 145px;
}

#view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-recommend-panel {
  grid-column: 2;
  grid-row: 4;
  min-height: 278px;
}

#view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-ws-chart-card:nth-child(2) {
  grid-column: 1;
  grid-row: 5;
  min-height: 206px;
}

#view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-plans-panel {
  grid-column: 2;
  grid-row: 5;
  min-height: 206px;
}

#view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-portfolio-panel {
  grid-column: 1 / -1;
  grid-row: 6;
  min-height: 196px;
}

#view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-portfolio-panel .nm-portfolio-body {
  align-items: center;
}

/* State-aware first-run / draft / bridge surface. The same live structure
   styles all variants; no variant-specific copy or data is introduced. */
#view-workspace .nm-ws-state {
  position: relative;
  max-width: none;
  min-height: 450px;
  margin: 12px 0 0;
  overflow: hidden;
  padding: 58px 48% 52px 52px;
  border: 1px solid #d9e5f0;
  border-radius: 18px;
  background:
    radial-gradient(circle at 83% 23%, rgba(252, 210, 112, .42) 0 28px, transparent 29px),
    radial-gradient(circle at 77% 22%, rgba(255,255,255,.92) 0 38px, transparent 39px),
    radial-gradient(circle at 89% 26%, rgba(255,255,255,.86) 0 31px, transparent 32px),
    linear-gradient(135deg, #ffffff 0%, #f5fbff 55%, #effbf6 100%);
  box-shadow: 0 14px 34px rgba(31, 61, 98, .08);
}

#view-workspace .nm-ws-state::before {
  content: "";
  position: absolute;
  right: 2.5%;
  bottom: 0;
  width: 43%;
  height: 63%;
  background:
    linear-gradient(145deg, transparent 0 43%, rgba(115, 195, 184, .88) 44% 65%, transparent 66%) 8% 100% / 48% 100% no-repeat,
    linear-gradient(145deg, transparent 0 40%, rgba(74, 150, 206, .55) 41% 67%, transparent 68%) 48% 100% / 56% 96% no-repeat,
    linear-gradient(145deg, transparent 0 46%, rgba(118, 218, 180, .82) 47% 72%, transparent 73%) 75% 100% / 40% 86% no-repeat;
  opacity: .88;
  pointer-events: none;
}

#view-workspace .nm-ws-state::after {
  content: "";
  position: absolute;
  right: 11%;
  bottom: -18%;
  width: 25%;
  height: 67%;
  border: 13px solid rgba(26, 77, 112, .86);
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(19deg) skewY(-6deg);
  box-shadow: 8px 0 0 rgba(255,255,255,.38);
  pointer-events: none;
}

#view-workspace .nm-ws-state-icon {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 0 0 17px;
  border: 1px solid #bce8d1;
  border-radius: 14px;
  background: linear-gradient(145deg, #ecfbf3, #dff6ea);
  box-shadow: 0 5px 14px rgba(11, 168, 95, .10);
}

#view-workspace .nm-ws-state-icon::before,
#view-workspace .nm-ws-state-icon::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: var(--ws-green);
}

#view-workspace .nm-ws-state-icon::before {
  left: 14px;
  top: 23px;
  width: 21px;
  height: 3px;
  transform: rotate(-42deg);
}

#view-workspace .nm-ws-state-icon::after {
  left: 25px;
  top: 12px;
  width: 3px;
  height: 20px;
  transform: rotate(-10deg);
}

#view-workspace .nm-ws-state h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  color: #092352;
  font-size: 27px;
  line-height: 1.12;
  letter-spacing: -.035em;
}

#view-workspace .nm-ws-state p {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 0 18px;
  color: #5b6f8d;
  font-size: 13px;
  line-height: 1.65;
}

#view-workspace .nm-ws-state-list {
  position: relative;
  z-index: 1;
  max-width: 540px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  color: #294667;
  font-size: 12px;
}

#view-workspace .nm-ws-state-list li {
  position: relative;
  padding-left: 27px;
}

#view-workspace .nm-ws-state-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  color: #087e49;
  background: #dcf5e8;
  font-size: 10px;
  font-weight: 900;
}

#view-workspace .nm-ws-state #workspace-state-action {
  position: relative;
  z-index: 1;
  min-height: 42px;
  padding: 11px 18px;
  border-radius: 9px;
  box-shadow: 0 8px 18px rgba(6, 100, 232, .20);
  font-size: 11.5px;
  font-weight: 750;
}

#view-workspace.nm-ws-stated .nm-dash-head { margin-bottom: 0; }

@media (max-width: 1260px) {
  #view-workspace .nm-dash-shell { grid-template-columns: 218px minmax(0, 1fr); }
  #view-workspace .nm-dash-main { padding: 18px 20px 24px; }
  #view-workspace .nm-dash-nav a { padding-inline: 10px; font-size: 12px; }
  #view-workspace #workspace-kpis-growth { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  #view-workspace #workspace-kpis-growth .nm-kpi-card:nth-child(3) { grid-column: span 4; }
  #view-workspace #workspace-kpis-growth .nm-kpi-card:nth-child(1),
  #view-workspace #workspace-kpis-growth .nm-kpi-card:nth-child(2),
  #view-workspace #workspace-kpis-growth .nm-kpi-card:nth-child(4) { grid-column: span 2; }
  #view-workspace #workspace-kpis-growth .nm-kpi-card:nth-child(5) { grid-column: span 2; }
  #view-workspace .nm-ws-mode-btn { min-width: 72px; }
}

@media (max-width: 1100px) {
  #view-workspace .nm-dash-kpis,
  #view-workspace #workspace-kpis-growth { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-workspace #workspace-kpis-growth .nm-kpi-card { grid-column: auto !important; }
  #view-workspace #workspace-kpis-growth .nm-kpi-card:nth-child(3) { grid-column: 1 / -1 !important; }
  #view-workspace .nm-dash-middle,
  #view-workspace .nm-dash-bottom { grid-template-columns: 1fr; }
  #view-workspace .nm-ws-charts-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-dash-main { display: block; }
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-dash-middle,
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-dash-bottom { display: grid; }
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-ws-charts-col { display: grid; }
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-ws-chart-card,
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-recommend-panel,
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-plans-panel,
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-portfolio-panel { grid-column: auto; grid-row: auto; }
  #view-workspace .nm-ws-state { padding-right: 38%; }
}

@media (max-width: 820px) {
  #view-workspace { padding: 0; }
  #view-workspace .nm-dash-shell { min-height: 100vh; border: 0; border-radius: 0; }
  #view-workspace .nm-dash-main { padding: 16px; }
  #view-workspace .nm-dash-head { align-items: flex-start; flex-direction: column; }
  #view-workspace .nm-dash-head-actions { width: 100%; flex-wrap: wrap; }
  #view-workspace .nm-ws-modes { order: 0; }
  #view-workspace .nm-dash-head-actions > .btn { margin-left: auto; }
  #view-workspace .nm-ws-charts-col { grid-template-columns: 1fr; }
  #view-workspace .nm-ws-state {
    min-height: 520px;
    padding: 38px 28px 250px;
  }
  #view-workspace .nm-ws-state::before { right: -5%; width: 75%; height: 48%; }
  #view-workspace .nm-ws-state::after { right: 24%; width: 35%; height: 45%; }
}

[data-theme="dark"] #view-workspace .nm-dash-main { background: var(--color-bg); }
[data-theme="dark"] #view-workspace .nm-ws-modes,
[data-theme="dark"] #view-workspace .nm-dash-help-button,
[data-theme="dark"] #view-workspace .nm-dash-user,
[data-theme="dark"] #view-workspace .nm-recommend-list > a { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] #view-workspace .nm-ws-mode-btn.active { background: var(--color-primary-bg); color: var(--color-primary); }
[data-theme="dark"] #view-workspace .nm-ws-state { background: var(--color-surface); border-color: var(--color-border); }

/* Workspace browser fidelity corrections discovered during the visual pass. */
#view-workspace .nm-ws-chart[hidden]:has(path) {
  display: block !important;
}
#view-workspace.nm-ws-stated .nm-dash-hint {
  display: none !important;
}
#view-workspace .nm-plan-wealth {
  font-size: 9.6px;
  white-space: nowrap;
}
#view-workspace .nm-plan-confidence {
  font-size: 8.5px;
  white-space: nowrap;
}

@media (min-width: 1101px) {
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-dash-main {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-ws-chart-card:nth-child(1) {
    grid-column: 1 / 8;
  }
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-recommend-panel {
    grid-column: 8 / 13;
  }
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-ws-chart-card:nth-child(2) {
    grid-column: 1 / 6;
  }
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-plans-panel {
    grid-column: 6 / 13;
  }
}

/* ============================================================================
   COMPARISON RESULTS BASELINE — v149.341 (strategies prelude)
   Mechanical class-ification of _runStrategyComparisonAsync output:
   each cmp-r-s* class reproduces the exact former inline style, so this
   change is visually inert. The class system exists so the designer
   engagement can restyle the detailed results CSS-only. Dynamic styles
   (variable-driven widths/colors) remain inline by necessity.
   ========================================================================== */
#post-compare-results .cmp-r-s1, #post-scenario-compare-results .cmp-r-s1 { min-width:0; }
#post-compare-results .cmp-r-s2, #post-scenario-compare-results .cmp-r-s2 { text-align:center;padding:32px;color:var(--color-error); }
#post-compare-results .cmp-r-s3, #post-scenario-compare-results .cmp-r-s3 { font-size:12px; }
#post-compare-results .cmp-r-s4, #post-scenario-compare-results .cmp-r-s4 { text-align:center;padding:32px;color:var(--color-text-muted);font-size:13px; }
#post-compare-results .cmp-r-s5, #post-scenario-compare-results .cmp-r-s5 { margin-bottom:8px; }
#post-compare-results .cmp-r-s6, #post-scenario-compare-results .cmp-r-s6 { display:inline-block;width:18px;height:18px;border:2px solid var(--color-text-faint);border-top-color:var(--color-primary);border-radius:50%;animation:spin 0.8s linear infinite;margin-bottom:6px; }
#post-compare-results .cmp-r-s8, #post-scenario-compare-results .cmp-r-s8 { font-size:11px; }
#post-compare-results .cmp-r-s9, #post-scenario-compare-results .cmp-r-s9 { background:oklch(0.92 0.04 80);border:1px solid oklch(0.82 0.08 80);border-radius:8px;padding:10px 14px;margin-bottom:var(--space-3);font-size:11px;color:oklch(0.35 0.08 60);line-height:1.5; }
#post-compare-results .cmp-r-s10, #post-scenario-compare-results .cmp-r-s10 { font-size:11px;color:var(--color-text-tertiary);margin-bottom:var(--space-3);padding:8px 12px;background:var(--color-surface-alt,#f9fafb);border:1px solid var(--color-border);border-radius:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
#post-compare-results .cmp-r-s11, #post-scenario-compare-results .cmp-r-s11 { font-weight:700; }
#post-compare-results .cmp-r-s12, #post-scenario-compare-results .cmp-r-s12 { color:var(--color-text-muted);margin-left:4px;cursor:help; }
#post-compare-results .cmp-r-s13, #post-scenario-compare-results .cmp-r-s13 { color:oklch(0.55 0.18 25);font-weight:600; }
#post-compare-results .cmp-r-s14, #post-scenario-compare-results .cmp-r-s14 { margin-bottom:var(--space-3);font-size:11px; }
#post-compare-results .cmp-r-s15, #post-scenario-compare-results .cmp-r-s15 { cursor:pointer;font-weight:600;color:var(--color-text-secondary);padding:6px 0; }
#post-compare-results .cmp-r-s16, #post-scenario-compare-results .cmp-r-s16 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px 16px;padding:8px 12px;background:var(--color-surface-alt,#f9fafb);border:1px solid var(--color-border);border-radius:8px;color:var(--color-text-secondary);line-height:1.7; }
#post-compare-results .cmp-r-s17, #post-scenario-compare-results .cmp-r-s17 { color:oklch(0.55 0.15 25); }
#post-compare-results .cmp-r-s18, #post-scenario-compare-results .cmp-r-s18 { grid-column:1/-1;border-top:1px solid var(--color-border);padding-top:4px;margin-top:2px; }
#post-compare-results .cmp-r-s19, #post-scenario-compare-results .cmp-r-s19 { font-size:11px;color:var(--color-text-secondary);margin-bottom:var(--space-3);padding:8px 12px;background:oklch(0.96 0.02 250);border:1px solid oklch(0.90 0.04 250);border-radius:8px;line-height:1.6; }
#post-compare-results .cmp-r-s20, #post-scenario-compare-results .cmp-r-s20 { background:oklch(0.97 0.02 250);border:1px solid oklch(0.88 0.06 250);border-radius:12px;padding:20px;margin-bottom:var(--space-4); }
#post-compare-results .cmp-r-s21, #post-scenario-compare-results .cmp-r-s21 { font-size:18px;font-weight:800;color:oklch(0.40 0.15 250);margin-bottom:6px; }
#post-compare-results .cmp-r-s22, #post-scenario-compare-results .cmp-r-s22 { font-size:14px;color:var(--color-text);line-height:1.7;margin-bottom:10px; }
#post-compare-results .cmp-r-s23, #post-scenario-compare-results .cmp-r-s23 { font-size:12px;color:var(--color-text-secondary);line-height:1.6;margin-bottom:10px;padding:8px 12px;background:var(--color-surface);border-radius:8px; }
#post-compare-results .cmp-r-s24, #post-scenario-compare-results .cmp-r-s24 { font-size:12px;color:var(--color-text-secondary);line-height:1.6; }
#post-compare-results .cmp-r-s25, #post-scenario-compare-results .cmp-r-s25 { font-size:14px;color:var(--color-text);line-height:1.7; }
#post-compare-results .cmp-r-s26, #post-scenario-compare-results .cmp-r-s26 { background:oklch(0.96 0.03 250);border:1px solid oklch(0.88 0.05 250);border-radius:10px;padding:12px 16px;margin-bottom:var(--space-3);font-size:12px;color:var(--color-text-secondary);line-height:1.6; }
#post-compare-results .cmp-r-s27, #post-scenario-compare-results .cmp-r-s27 { margin-bottom:var(--space-3); }
#post-compare-results .cmp-r-s28, #post-scenario-compare-results .cmp-r-s28 { font-size:11px;color:var(--color-text-muted);cursor:pointer;padding:6px 0; }
#post-compare-results .cmp-r-s29, #post-scenario-compare-results .cmp-r-s29 { font-size:11px;color:var(--color-text-secondary);line-height:1.7;padding:10px 14px;background:var(--color-surface-alt,#f9fafb);border:1px solid var(--color-border);border-radius:8px;margin-top:4px; }
#post-compare-results .cmp-r-s30, #post-scenario-compare-results .cmp-r-s30 { margin:6px 0 6px 18px;padding:0; }
/* v149.420 — the apples-to-apples methodology note; previously the page's only unstyled element. */
#post-scenario-compare-results .cmp-r-s29-note { font-size:11px;color:var(--color-text-secondary);line-height:1.6;margin:8px 0 2px; }
#dash-strategies-view #post-compare-results .cmp-r-s29-note { margin:12px 0 0;padding:10px 12px;border:1px solid var(--color-border);border-left:3px solid var(--color-primary);border-radius:8px;background:var(--color-primary-bg);color:var(--color-text-secondary);font-size:11.5px;line-height:1.6; }
#post-compare-results .cmp-r-s49, #post-scenario-compare-results .cmp-r-s49 { font-size:9px;color:var(--color-text-muted);font-weight:400; }
#post-compare-results .cmp-r-s52, #post-scenario-compare-results .cmp-r-s52 { font-size:9px;font-weight:700;color:oklch(0.52 0.18 25);margin-top:2px; }
#post-compare-results .cmp-r-s66, #post-scenario-compare-results .cmp-r-s66 { font-size:8px;color:var(--color-text-muted);font-weight:400; }
#post-compare-results .cmp-r-s68, #post-scenario-compare-results .cmp-r-s68 { margin-top:4px;font-size:9px;color:oklch(0.40 0.15 30);background:oklch(0.97 0.04 50);border:1px solid oklch(0.88 0.08 50);border-radius:4px;padding:4px 6px;line-height:1.4; }
#post-compare-results .cmp-r-s95, #post-scenario-compare-results .cmp-r-s95 { font-size:9px;line-height:1.5;color:oklch(0.40 0.10 60);background:oklch(0.96 0.04 60);border:1px solid oklch(0.88 0.07 60);border-radius:6px;padding:5px 8px;margin-bottom:8px; }
#post-compare-results .cmp-r-s98, #post-scenario-compare-results .cmp-r-s98 { font-size:10px;color:oklch(0.55 0.15 25);padding:4px 8px;background:oklch(0.95 0.04 25);border-radius:4px;margin-bottom:8px; }
#post-compare-results .cmp-r-s99, #post-scenario-compare-results .cmp-r-s99 { font-size:10px;color:oklch(0.50 0.12 60);padding:6px 8px;background:oklch(0.96 0.04 60);border:1px solid oklch(0.90 0.06 60);border-radius:6px;margin-bottom:6px;line-height:1.5; }
#post-compare-results .cmp-r-s101, #post-scenario-compare-results .cmp-r-s101 { flex:0;white-space:nowrap;background:var(--color-surface);border:1px solid var(--color-border);font-weight:600;font-size:10px;padding:5px 8px;border-radius:8px;cursor:pointer;color:var(--color-text-secondary); }
#post-compare-results .cmp-r-s103, #post-scenario-compare-results .cmp-r-s103 { margin-bottom:var(--space-4); }
#post-compare-results .cmp-r-s104, #post-scenario-compare-results .cmp-r-s104 { font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;cursor:pointer;margin-bottom:8px; }
#post-compare-results .cmp-r-s105, #post-scenario-compare-results .cmp-r-s105 { text-align:left; }
#post-compare-results .cmp-r-s106, #post-scenario-compare-results .cmp-r-s106 { font-weight:600;white-space:nowrap; }
#post-compare-results .cmp-r-s107, #post-scenario-compare-results .cmp-r-s107 { border-top:2px solid var(--color-divider); }
#post-compare-results .cmp-r-s108, #post-scenario-compare-results .cmp-r-s108 { font-weight:700;padding-top:10px; }
#post-compare-results .cmp-r-s109, #post-scenario-compare-results .cmp-r-s109 { font-weight:600; }
#post-compare-results .cmp-r-s110, #post-scenario-compare-results .cmp-r-s110 { text-align:right; }
#post-compare-results .cmp-r-s111, #post-scenario-compare-results .cmp-r-s111 { text-align:right;font-size:10px; }
#post-compare-results .cmp-r-s112, #post-scenario-compare-results .cmp-r-s112 { font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;margin-bottom:8px; }
#post-compare-results .cmp-r-s113, #post-scenario-compare-results .cmp-r-s113 { position:relative;height:280px; }
#post-compare-results .cmp-r-s114, #post-scenario-compare-results .cmp-r-s114 { font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;margin:var(--space-4) 0 4px 0; }
#post-compare-results .cmp-r-s115, #post-scenario-compare-results .cmp-r-s115 { font-size:10px;color:var(--color-text-muted);margin-bottom:8px; }
#post-compare-results .cmp-r-s116, #post-scenario-compare-results .cmp-r-s116 { position:relative;height:240px; } /* v149.430 — room for horizontal labels + y title */
/* v149.385 — .cmp-r-s117/.cmp-r-s118 removed: the free-form per-strategy bullet
   list they styled was replaced by the approach + metric-ladder design. */
#post-compare-results .cmp-r-s119, #post-scenario-compare-results .cmp-r-s119 { margin-top:var(--space-4); }
#post-compare-results .cmp-r-s120, #post-scenario-compare-results .cmp-r-s120 { font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px; }
#post-compare-results .cmp-r-s121, #post-scenario-compare-results .cmp-r-s121 { font-size:11px;font-weight:400;color:var(--color-text-muted); }
#post-compare-results .cmp-r-s122, #post-scenario-compare-results .cmp-r-s122 { overflow-x:auto;margin-bottom:12px; }
#post-compare-results .cmp-r-s123, #post-scenario-compare-results .cmp-r-s123 { width:100%;border-collapse:collapse;font-size:11px; }
#post-compare-results .cmp-r-s124, #post-scenario-compare-results .cmp-r-s124 { border-bottom:2px solid var(--color-divider); }
#post-compare-results .cmp-r-s125, #post-scenario-compare-results .cmp-r-s125 { padding:8px;text-align:left; }
#post-compare-results .cmp-r-s126, #post-scenario-compare-results .cmp-r-s126 { padding:8px; }
#post-compare-results .cmp-r-s127, #post-scenario-compare-results .cmp-r-s127 { padding:8px;text-align:right; }
#post-compare-results .cmp-r-s128, #post-scenario-compare-results .cmp-r-s128 { padding:10px 14px;border-radius:8px;font-size:12px;line-height:1.6;margin-bottom:10px;background:oklch(0.94 0.04 60);border:1px solid oklch(0.84 0.08 60); }
#post-compare-results .cmp-r-s129, #post-scenario-compare-results .cmp-r-s129 { padding:10px 14px;border-radius:8px;font-size:12px;line-height:1.6;background:oklch(from var(--color-success) l c h / 0.08);border:1px solid oklch(from var(--color-success) l c h / 0.2); }
#post-compare-results .cmp-r-s130, #post-scenario-compare-results .cmp-r-s130 { padding:12px 16px;border-radius:10px;font-size:12px;line-height:1.7;margin-top:10px;background:oklch(0.96 0.03 250);border:1px solid oklch(0.88 0.06 250); }
#post-compare-results .cmp-r-s131, #post-scenario-compare-results .cmp-r-s131 { font-size:10px;color:var(--color-text-muted);margin-top:var(--space-3);text-align:center;font-style:italic; }

/* v149.341 comparison-chart prelude baseline — RETIRED v149.364 (summary tier removed). */
   STRATEGIES HIGH-RES PASS — v149.341
   CSS-only fidelity pass for the Strategies lower tier and live comparison
   charts. Engine values, dynamic colors/heights/widths, IDs and wiring remain
   untouched. The Comparison Summary above this tier is intentionally unchanged.
   ========================================================================== */
#dash-strategies-view {
  /* v149.365 visual pass: NestMint strategy palette and shared surfaces. */
  --cmp-ink: #0d2a5b;
  --cmp-text: #233c61;
  --cmp-muted: #6f8199;
  --cmp-line: #dbe5ef;
  --cmp-soft-line: #eaf0f6;
  --cmp-surface: #ffffff;
  --cmp-soft: #f6f9fd;
  --cmp-blue: #0664e8;
  --cmp-green: #1d9f5f;
  --cmp-purple: #7242dd;
  --cmp-orange: #d96f16;
  --cmp-amber: #a86408;
  --cmp-shadow: 0 10px 28px rgba(13, 42, 91, .065);
  color: var(--cmp-ink);
}

#dash-strategies-view .post-strategy-section {
  padding-bottom: 28px;
}

/* Live comparison charts (#cmp-charts / cmpc-*) — RETIRED v149.364 (summary tier removed). */
/* Focused Customize & Run panel. */
#dash-strategies-view #tool-post-compare {
  margin-top: 18px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
}

#dash-strategies-view #tool-post-compare > .planning-tool-heading {
  gap: 10px !important;
  padding: 0 0 9px !important;
  color: var(--cmp-ink) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
}

#dash-strategies-view #tool-post-compare .planning-tool-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #edf3ff !important;
}

#dash-strategies-view #tool-post-compare .planning-tool-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 245px;
  gap: 10px 18px;
  align-items: end;
  padding: 15px 16px 16px;
  border: 1px solid var(--cmp-line);
  border-radius: 13px;
  background: var(--cmp-surface);
  box-shadow: var(--cmp-shadow);
}

#dash-strategies-view #tool-post-compare .planning-tool-desc {
  grid-column: 1;
  margin: 0;
  color: var(--cmp-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

#dash-strategies-view #tool-post-compare .strategy-rank-toggle {
  grid-column: 1;
  margin-top: 0 !important;
  padding: 10px 11px !important;
  border-color: var(--cmp-soft-line) !important;
  border-radius: 10px !important;
  background: var(--cmp-soft) !important;
}

#dash-strategies-view #tool-post-compare .strategy-rank-toggle > div {
  gap: 8px !important;
}

#dash-strategies-view #tool-post-compare .strategy-rank-toggle > div > div:first-child {
  color: #71849d !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
}

#dash-strategies-view #tool-post-compare .strategy-rank-toggle [role="group"] {
  gap: 2px !important;
  padding: 2px !important;
  border-color: #dce5ef !important;
  border-radius: 8px !important;
  background: #f1f5fa !important;
}

#dash-strategies-view #tool-post-compare .rank-pill {
  min-height: 28px;
  padding: 5px 11px !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

#dash-strategies-view #tool-post-compare .rank-pill.active {
  color: #17395f !important;
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(26, 53, 88, .09) !important;
}

#dash-strategies-view #tool-post-compare .strategy-rank-toggle p {
  max-width: 760px;
  margin-top: 7px !important;
  color: #7a8ca2 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#dash-strategies-view #tool-post-compare .planning-tool-body > div:has(> #compare-run-btn) {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  margin-top: 0 !important;
  padding: 12px;
  border: 1px solid #e2e9f2;
  border-radius: 11px;
  background: linear-gradient(145deg, #f8fbff 0%, #fff 72%);
}

#dash-strategies-view #compare-run-btn {
  min-height: 38px;
  border-radius: 9px;
  background: var(--cmp-blue);
  box-shadow: 0 7px 16px rgba(11, 103, 227, .18);
  font-size: 13px;
  font-weight: 800;
}

#dash-strategies-view #compare-run-btn + div {
  margin-top: 7px !important;
  color: #7588a0 !important;
  font-size: 12px !important;
  line-height: 1.4;
}

#dash-strategies-view #post-compare-results,
#dash-strategies-view #compare-scenario-details,
#dash-strategies-view #compare-scenarios {
  grid-column: 1 / -1;
}

/* Detailed results: keep the engine's top-level block flow but use flex to
   align the selected recommendation beside the remaining three cards. */
#dash-strategies-view #post-compare-results {
  /* Mock v3 flow: context, banner, hero, alternatives, charts, analysis. */
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
  margin-top: 20px !important;
  padding-top: 16px;
  border-top: 1px solid var(--cmp-soft-line);
}

#dash-strategies-view #post-compare-results > * {
  flex: 0 0 100%;
  min-width: 0;
}

#dash-strategies-view #post-compare-results .cmp-r-s9 {
  margin-bottom: 0;
  padding: 9px 11px;
  border-color: #f0dcae;
  border-radius: 10px;
  background: #fffaf0;
  color: #725727;
  font-size: 12px;
  line-height: 1.5;
}

#dash-strategies-view #post-compare-results .cmp-r-s10 {
  margin-bottom: 0;
  padding: 8px 11px;
  border-color: #e0e8f1;
  border-radius: 9px;
  background: #f8fafc;
  color: #667991;
  font-size: 12px;
}

#dash-strategies-view #post-compare-results .cmp-r-s14,
#dash-strategies-view #post-compare-results .cmp-r-s27 {
  margin: 0;
  padding: 0 11px;
  border: 1px solid var(--cmp-line);
  border-radius: 9px;
  background: #fff;
}

#dash-strategies-view #post-compare-results .cmp-r-s15,
#dash-strategies-view #post-compare-results .cmp-r-s28 {
  padding: 9px 0;
  color: #526a87;
  font-size: 12.5px;
  font-weight: 750;
}

#dash-strategies-view #post-compare-results .cmp-r-s16,
#dash-strategies-view #post-compare-results .cmp-r-s29 {
  margin: 0 0 10px;
  border-color: var(--cmp-soft-line);
  border-radius: 8px;
  background: var(--cmp-soft);
  color: #5d728e;
  font-size: 12px;
}

#dash-strategies-view #post-compare-results .cmp-r-s19,
#dash-strategies-view #post-compare-results .cmp-r-s20,
#dash-strategies-view #post-compare-results .cmp-r-s26 {
  margin-bottom: 0;
  border-radius: 10px;
  box-shadow: none;
}

#dash-strategies-view #post-compare-results .cmp-r-s19 {
  padding: 9px 11px;
  border-color: #dce7f6;
  background: #f6f9fe;
  color: #536d8c;
  font-size: 12px;
}

#dash-strategies-view #post-compare-results .cmp-r-s20 {
  padding: 13px 15px;
  border-color: #cfe0f5;
  background: linear-gradient(135deg, var(--color-primary-bg, #f2f7ff), var(--color-surface, #fff));
}

#dash-strategies-view #post-compare-results .cmp-r-s21 {
  margin-bottom: 4px;
  color: #174f9c;
  font-size: 14px;
}

#dash-strategies-view #post-compare-results .cmp-r-s22,
#dash-strategies-view #post-compare-results .cmp-r-s25 {
  margin-bottom: 6px;
  font-size: 13.5px;
  line-height: 1.55;
}

#dash-strategies-view #post-compare-results .cmp-r-s23,
#dash-strategies-view #post-compare-results .cmp-r-s24 {
  font-size: 12px;
  line-height: 1.5;
}

#dash-strategies-view #post-compare-results .cmp-r-s52{
  font-size: 10px;
  line-height: 1.35;
}

/* The approved card treatment uses metrics and deltas{
  margin-top: auto;
  padding: 6px 7px;
  border-radius: 7px;
  font-size: 10.5px;
}

/* Alternative cards occupy the remaining three columns. */
/* v149.342 review: content hide rejected — the section now lives behind a real expander in the renderer. */
/* v149.362 SUPERSEDES the v149.342 selector path. That ruling moved this
   section into <details class="cmp-r-alt"><summary class="cmp-r-s58">… in the
   RENDERER{
  /* v149.364 supersedes v149.363's (n-1)/n column: mock v2 gives the
     alternatives their own FULL-WIDTH row under the hero, one column per
     alternative — the grid rule below carries the var-driven count. */
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
}
#dash-strategies-view #post-compare-results .cmp-r-s95,
#dash-strategies-view #post-compare-results .cmp-r-s98,
#dash-strategies-view #post-compare-results .cmp-r-s99 {
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.4;
}

#dash-strategies-view #post-compare-results .cmp-r-s101 {
  min-height: 28px;
  padding: 5px 7px;
  border-color: #dce4ed;
  border-radius: 7px;
  font-size: 10.5px;
}

/* Collapsed metrics section and sensitivity material. */
#dash-strategies-view #post-compare-results .cmp-r-s103 {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--cmp-line);
  border-radius: 10px;
  background: #fff;
}

#dash-strategies-view #post-compare-results .cmp-r-s104 {
  margin: 0;
  padding: 10px 12px;
  color: var(--cmp-text);
  font-size: 12.5px;
  font-weight: 750;
}

#dash-strategies-view #post-compare-results .cmp-r-s103[open] .cmp-r-s104 {
  border-bottom: 1px solid var(--cmp-soft-line);
  background: #f8fafc;
}

#dash-strategies-view #post-compare-results .cmp-r-s103 .table-scroll {
  padding: 0 10px 10px;
}

#dash-strategies-view #post-compare-results .cmp-r-s103 table {
  font-size: 11px;
}

/* The live prelude charts above are the approved chart implementation; remove
   the older duplicate canvas presentation from the detailed renderer. */
#dash-strategies-view #post-compare-results .cmp-r-s112,
#dash-strategies-view #post-compare-results .cmp-r-s113,
#dash-strategies-view #post-compare-results .cmp-r-s114,
#dash-strategies-view #post-compare-results .cmp-r-s115,
#dash-strategies-view #post-compare-results .cmp-r-s116,
/* v149.342 review: content hide rejected — the section now lives behind a real expander in the renderer. */

#dash-strategies-view #post-compare-results .cmp-r-s119 {
  margin-top: 0;
  padding: 12px;
  border: 1px solid var(--cmp-line);
  border-radius: 10px;
  background: #fff;
}

#dash-strategies-view #post-compare-results .cmp-r-s120 {
  margin-bottom: 8px;
  color: var(--cmp-text);
  font-size: 13px;
}

#dash-strategies-view #post-compare-results .cmp-r-s121 {
  color: var(--cmp-muted);
  font-size: 11.5px;
}

#dash-strategies-view #post-compare-results .cmp-r-s122 {
  margin-bottom: 8px;
  border: 1px solid var(--cmp-soft-line);
  border-radius: 8px;
}

#dash-strategies-view #post-compare-results .cmp-r-s123 {
  font-size: 11px;
}

#dash-strategies-view #post-compare-results .cmp-r-s125,
#dash-strategies-view #post-compare-results .cmp-r-s126,
#dash-strategies-view #post-compare-results .cmp-r-s127 {
  padding: 7px;
}

#dash-strategies-view #post-compare-results .cmp-r-s128,
#dash-strategies-view #post-compare-results .cmp-r-s129,
#dash-strategies-view #post-compare-results .cmp-r-s130 {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.5;
}

#dash-strategies-view #post-compare-results .cmp-r-s131 {
  margin-top: 0;
  color: #8190a4;
  font-size: 11px;
}

#dash-strategies-view #compare-scenario-details {
  margin-top: 12px !important;
  padding-top: 9px;
  border-top: 1px solid var(--cmp-soft-line);
}

#dash-strategies-view #compare-scenario-details > summary {
  color: #6e8199 !important;
  font-size: 12.5px !important;
}

@media (max-width: 900px) {
  #dash-strategies-view #tool-post-compare .planning-tool-body{ /* v149.362: routed via .cmp-r-alt */
    grid-template-columns: 1fr !important;
  }

  #dash-strategies-view #tool-post-compare .planning-tool-desc,
  #dash-strategies-view #tool-post-compare .strategy-rank-toggle,
  #dash-strategies-view #tool-post-compare .planning-tool-body > div:has(> #compare-run-btn) {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ============================================================================
   v149.363 — STRATEGY ENGINE MOCK LAYOUT (approved strategy-engine mock)
   Applies the approved mock's design system to the ENGINE'S real output.
   Supersedes (with rationale) pieces of the v149.341/342 pass and the
   v149.362 25%/75% geometry:
     • The mock renders ONE uniform card row: the recommended "Potential
       Scenario" card leads it at equal width, alternatives follow, Current
       last (the retargeted order:99 rule from v342/v362 still does that).
       Geometry is driven by var(--nm-strat-n) — the renderer writes the
       ACTUAL bundle count; mock card counts are placeholders.
     • Mock's "Recommended" badge is NOT reproduced — "recommend" language
       is a permanent liability exclusion; the engine's "Potential Scenario"
       eyebrow (cmp-r-s33) is the approved equivalent.
     • Section order per mock (cards → charts → collapsed expanders) is done
       with flex order on the existing flex container — no content moves,
       nothing hidden; the collapsed rows are real <details>.
   Sentinel: tests/v149.362-orphaned-selector-sentinel.spec.js (updated). */

#dash-strategies-view #post-compare-results { --nm-strat-n: 5; }

/* Section heading emitted by the renderer (v149.363) */
#dash-strategies-view #post-compare-results .cmp-r-shead {
  /* v149.429 — masthead treatment: a full-width rule anchors the header
     across the section so the title block no longer reads as text floating
     at the left edge (Jahn's QA note). */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 2px 0 14px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 14px;
}
#dash-strategies-view #post-compare-results .cmp-r-shead-title {
  margin: 0;
  color: var(--cmp-ink);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.025em;
}

/* --- Unified card row geometry lives IN PLACE at the v149.341/342 rule
   sites above (superseded there with rationale — no shadowed duplicates,
   per the v149.361 audit's own finding class). Below: additions only. --- */
/* Slim{
  padding: 2px 2px 9px;
  color: var(--cmp-ink);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.015em;
}
#dash-strategies-view #post-compare-results > .cmp-r-scen {
  width: 100%;
  border: 1px solid var(--cmp-line);
  border-radius: 12px;
  background: #fff;
  padding: 0 16px;
}
#dash-strategies-view #post-compare-results > .cmp-r-scen > summary {
  cursor: pointer;
  padding: 13px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--cmp-text);
}
#dash-strategies-view #post-compare-results > .cmp-r-scen > summary .cmp-r-s121 {
  font-weight: 500;
  color: var(--cmp-muted);
  font-size: 12px;
}

/* --- Section order per mock: cards → charts → collapsed rows → disclaimer.
   Flex `order` only — DOM (and reading) order is unchanged, no content moves. */
/* v149.364 (mock v2): Scenario Analysis is VISIBLE content above the
   collapsed Full Metrics row; disclaimer last. */
#dash-strategies-view #post-compare-results > .cmp-r-scen { order: 5; }
#dash-strategies-view #post-compare-results > .cmp-r-s103 { order: 6; }
#dash-strategies-view #post-compare-results > .cmp-r-s131 { order: 7; }

/* v149.364 — chart pair enabler (mock v2 shows the two charts side by side).
   Wrappers emitted by the renderer; designer refines within this scope. */
#dash-strategies-view #post-compare-results > .cmp-r-chwrapL { flex: 1 1 57%; min-width: 340px; }
#dash-strategies-view #post-compare-results > .cmp-r-chwrapR { flex: 1 1 39%; min-width: 300px; }

/* ============================================================================
   v149.363 — "Customize & Run a New Comparison" panel (mock tier 2)
   Static markup in index.html; same controls and IDs as the old tool card. */
#dash-strategies-view #tool-post-compare { padding: 0; border: 0; background: transparent; box-shadow: none; }
#tool-post-compare .cnr-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 26px 0 14px;
}
#tool-post-compare .cnr-title { margin: 0; font-size: 19px; font-weight: 780; letter-spacing: -.02em; color: var(--cmp-ink); }
#tool-post-compare .cnr-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--cmp-muted); }
#tool-post-compare .cnr-plan-note { font-size: 12px; font-weight: 650; color: var(--cmp-blue); white-space: nowrap; }
#tool-post-compare .cnr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
#tool-post-compare .cnr-panel {
  border: 1px solid var(--cmp-line);
  border-radius: 13px;
  background: #fff;
  padding: 18px 20px;
  box-shadow: 0 8px 22px rgba(9, 21, 75, .035);
}
#tool-post-compare .cnr-panel-title { font-size: 14px; font-weight: 750; color: var(--cmp-ink); margin-bottom: 4px; }
#tool-post-compare .cnr-panel-sub { margin: 0 0 14px; font-size: 12px; color: var(--cmp-muted); line-height: 1.55; }
#tool-post-compare .strategy-rank-toggle {
  border: 1px solid var(--cmp-soft-line);
  border-radius: 10px;
  background: var(--cmp-soft);
  padding: 12px 14px;
}
#tool-post-compare .cnr-rank-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#tool-post-compare .cnr-rank-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cmp-muted); }
#tool-post-compare .cnr-rank-pills { display: inline-flex; gap: 2px; background: #eef2f7; border: 1px solid var(--cmp-line); border-radius: 8px; padding: 2px; }
#tool-post-compare .rank-pill { border: 0; background: transparent; color: var(--cmp-muted); font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 6px; cursor: pointer; }
#tool-post-compare .cnr-rank-explain { margin: 10px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--cmp-muted); }
#tool-post-compare .cnr-run-row { margin-top: 14px; }
#tool-post-compare .cnr-run-row .btn { width: 100%; justify-content: center; }
#tool-post-compare .cnr-run-note { font-size: 11px; color: var(--cmp-muted); text-align: center; margin-top: 7px; }
#tool-post-compare .cnr-engine-row { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--cmp-soft-line); }
#tool-post-compare .cnr-engine-row:last-of-type { border-bottom: 0; }
#tool-post-compare .cnr-engine-ico {
  flex: 0 0 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--cmp-line); border-radius: 9px; color: var(--cmp-blue); background: var(--cmp-soft);
}
#tool-post-compare .cnr-engine-row b { display: block; font-size: 12.5px; color: var(--cmp-text); }
#tool-post-compare .cnr-engine-row small { display: block; font-size: 11.5px; color: var(--cmp-muted); line-height: 1.5; }
#tool-post-compare .cnr-engine-note {
  margin-top: 10px; padding: 9px 12px; border-radius: 9px;
  background: #eefaf2; border: 1px solid #d8efe0; color: #16744a;
  font-size: 11.5px;
}
#tool-post-compare .cnr-results { margin-top: var(--space-3); }
#tool-post-compare .cnr-saved { margin-top: var(--space-4); }
#tool-post-compare .cnr-saved > summary { font-size: 13px; font-weight: 600; cursor: pointer; color: var(--color-text-muted); padding: 8px 0; }

@media (max-width: 1180px) {
  #tool-post-compare .cnr-grid { grid-template-columns: 1fr; }
}

/* ── v149.365 — mock-v3 enabler styles (baseline; designer refines) ────── */
#dash-strategies-view #post-compare-results .cmp-r-shead-ctx {
  /* v149.429 — quiet meta line instead of a boxed pill (the pill's inner
     margin-left:auto floated it oddly inside the title column), and the
     three pre-v149.422 hardcoded hexes replaced with tokens. */
  margin: 3px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#dash-strategies-view #post-compare-results > .cmp-r-stale {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid #efcf91;
  border-left: 4px solid #d79524;
  border-radius: 12px;
  background: #fff8e9;
  display: grid;
  gap: 7px;
  justify-items: start;
}
#dash-strategies-view #post-compare-results > .cmp-r-stale .cmp-r-stale-head { font-weight: 750; color: #8a5a00; font-size: 13px; }
#dash-strategies-view #post-compare-results > .cmp-r-stale .cmp-r-stale-body { font-size: 12px; color: #6d5a2e; }
#dash-strategies-view #post-compare-results > .cmp-r-stale .cmp-r-stale-when { font-size: 11px; color: var(--cmp-muted); }
#dash-strategies-view #post-compare-results .cmp-r-learn {
  float: right; border: 1px solid var(--cmp-line); background: #fff; color: var(--cmp-blue);
  font-size: 11px; font-weight: 650; border-radius: 8px; padding: 4px 10px; cursor: pointer;
}
#tool-post-compare .cnr-prerun-assumes {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid #d9e5f0; background: #f7faff; border-radius: 10px;
  padding: 10px 14px; margin: 12px 0; font-size: 11.5px; color: var(--cmp-text);
}
#tool-post-compare .cnr-empty {
  /* v149.432 — hero treatment: the pre-run CTA was a small icon and a
     lone button floating in a void. Contained card, tinted icon chip,
     stronger title, bounded copy width, generous but finite padding. */
  border: 1px solid var(--cmp-line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--color-primary-bg, #f7fafc), var(--color-surface, #fff) 70%);
  padding: 44px 24px 40px;
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  width: 100%;
}
#tool-post-compare .cnr-empty-ico {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--color-primary);
  background: var(--color-primary-bg, #eef4fb);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
}
#tool-post-compare .cnr-empty-title { font-size: 18px; font-weight: 750; color: var(--cmp-ink); letter-spacing: -.01em; }
#tool-post-compare .cnr-empty-sub { max-width: 52ch; color: var(--color-text-secondary); font-size: 13px; line-height: 1.55; }
#tool-post-compare .cnr-prerun-run { padding: 10px 24px; font-size: 14px; margin-top: 4px; }
#tool-post-compare .cnr-empty-title { font-size: 15px; font-weight: 750; color: var(--cmp-ink); }
#tool-post-compare .cnr-empty-sub { font-size: 12px; color: var(--cmp-muted); max-width: 420px; line-height: 1.5; }
/* v149.413 (Jahn): explicit-run pre-run CTA — assumption chips + prominent
   Run Strategies button (auto-run removed; the user triggers the sweep). */
#tool-post-compare .cnr-prerun-assumes-lead { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; }
#tool-post-compare .cnr-prerun-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
#tool-post-compare .cnr-prerun-run { margin-top: 6px; padding: 11px 24px; font-size: 14px; font-weight: 700; }
#tool-post-compare .cnr-prerun-run:disabled { opacity: .55; cursor: not-allowed; }

/* v149.365 TARGETED STRATEGY ENGINE VISUAL PASS
   Rule groups below implement mock-v3 regions that had only renderer baselines.
   They remain inside the approved strategy scopes and do not alter content. */

/* Banner tones: attribute-driven exact/tight answer treatment. */
#dash-strategies-view #post-compare-results .cmp-r-s20,
#dash-strategies-view #post-compare-results .cmp-r-s26 {
  padding: 12px 14px;
  border-width: 1px;
  border-style: solid;
  border-radius: 11px;
  font-size: 12px;
  line-height: 1.5;
}
#dash-strategies-view #post-compare-results [data-banner-tone="success"] { background: #eef9f2; border-color: #cbe8d6; color: #176b45; }
#dash-strategies-view #post-compare-results [data-banner-tone="warning"] { background: #fff8e9; border-color: #efd39c; color: #7c5414; }
#dash-strategies-view #post-compare-results [data-banner-tone="info"] { background: #f1f7ff; border-color: #cfdef3; color: #28527f; }
#dash-strategies-view #post-compare-results .cmp-r-learn { margin-left: 12px; }

/* Hero internals: rationale, settings row{
  margin: 0 0 12px;
  border-top: 1px solid var(--cmp-soft-line);
  border-bottom: 1px solid var(--cmp-soft-line);
  padding: 9px 0;
}
#dash-strategies-view #post-compare-results .cmp-r-s1 { color: #50647e; font-size: 10px; font-weight: 700; }

/* Chart pair: clean cards, stable canvas heights for browser resize check. */
#dash-strategies-view #post-compare-results > .cmp-r-chwrapL,
#dash-strategies-view #post-compare-results > .cmp-r-chwrapR {
  padding: 14px 15px 12px;
  border: 1px solid var(--cmp-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--cmp-shadow);
}
#dash-strategies-view #post-compare-results .cmp-r-s112,
#dash-strategies-view #post-compare-results .cmp-r-s114 { margin: 0; color: var(--cmp-ink); font-size: 14px; font-weight: 800; }
#dash-strategies-view #post-compare-results .cmp-r-s115 { margin: 3px 0 10px; color: var(--cmp-muted); font-size: 10.5px; }
#dash-strategies-view #post-compare-results .cmp-r-s113 { height: 280px; }
#dash-strategies-view #post-compare-results .cmp-r-s116 { height: 200px; }

/* Five-up strategy blurb strip; engine count remains natural and wraps. */
#dash-strategies-view #post-compare-results > .cmp-r-taxnotes { width: 100%; }
#dash-strategies-view #post-compare-results > .cmp-r-taxnotes > summary { padding: 9px 0; color: var(--cmp-ink); font-size: 13px; font-weight: 750; cursor: pointer; }
/* v149.385 — the old 5-col bullet grid rule was retired; .cmp-r-diffgrid now
   owns the strategy comparison layout (see the redesigned block below). */
/* v149.385 — .cmp-r-s117/.cmp-r-s118 (old free-form per-strategy bullets) were
   retired when "How each strategy differs" became the approach + metric-ladder
   design below; their CSS is removed to keep the sentinel clean. */

/* v149.385 — redesigned "How each strategy differs": approach + aligned metric
   ladder with color-coded ±delta pills. Same family surfaces as the SE cards. */
#dash-strategies-view #post-compare-results .cmp-r-diffgrid { align-items: stretch; }
#dash-strategies-view #post-compare-results .cmp-r-diff-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cmp-line, #dbe3ec);
  border-radius: 11px;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  box-shadow: 0 2px 8px rgba(20,40,60,.045);
  overflow: hidden;
}
#dash-strategies-view #post-compare-results .cmp-r-diff-head {
  padding: 11px 13px 9px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#dash-strategies-view #post-compare-results .cmp-r-diff-approach {
  padding: 0 13px 11px;
  border-bottom: 1px solid var(--cmp-line, #eef1f5);
}
#dash-strategies-view #post-compare-results .cmp-r-diff-approach p {
  margin: 0 0 6px;
  color: #46586e;
  font-size: 11px;
  line-height: 1.5;
}
#dash-strategies-view #post-compare-results .cmp-r-diff-approach p:last-child { margin-bottom: 0; }
#dash-strategies-view #post-compare-results .cmp-r-diff-ladder {
  padding: 9px 13px 12px;
  display: grid;
  gap: 2px;
}
#dash-strategies-view #post-compare-results .cmp-r-ladder-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-height: 26px;
  padding: 4px 0;
  border-bottom: 1px solid #f1f4f8;
}
#dash-strategies-view #post-compare-results .cmp-r-ladder-row:last-child { border-bottom: 0; }
#dash-strategies-view #post-compare-results .cmp-r-ladder-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #71829a;
  font-size: 10.5px;
  font-weight: 650;
}
#dash-strategies-view #post-compare-results .cmp-r-ladder-val {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  color: #10234a;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
#dash-strategies-view #post-compare-results .cmp-r-diff-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}
#dash-strategies-view #post-compare-results .cmp-r-diff-pill.is-good {
  color: #0c7a45;
  background: #e5f6ec;
  border: 1px solid #c2e7d1;
}
#dash-strategies-view #post-compare-results .cmp-r-diff-pill.is-bad {
  color: #b4341f;
  background: #fdecea;
  border: 1px solid #f5cdc6;
}
#dash-strategies-view #post-compare-results .cmp-r-ladder-cap {
  margin: -1px 0 4px;
  color: #8a97ab;
  font-size: 9.5px;
  font-style: italic;
  line-height: 1.35;
}

/* Scenario analysis table and side takeaway. */
#dash-strategies-view #post-compare-results > .cmp-r-scen[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .36fr);
  gap: 12px;
  padding: 0 14px 14px;
}
#dash-strategies-view #post-compare-results > .cmp-r-scen[open] > summary { grid-column: 1 / -1; }
#dash-strategies-view #post-compare-results > .cmp-r-scen .cmp-r-s122 { margin: 0; }
#dash-strategies-view #post-compare-results > .cmp-r-scen .cmp-r-s129 {
  margin: 0;
  align-self: stretch;
  border-left: 4px solid var(--cmp-green);
  background: #eef9f2;
  border-color: #c8e7d5;
}
#dash-strategies-view #post-compare-results > .cmp-r-scen .cmp-r-s130 { grid-column: 1 / -1; margin-top: 0; }
#dash-strategies-view #post-compare-results .cmp-r-s123 tbody tr:nth-child(2) { background: #eef8f2; }

/* Quiet collapsed metrics row and always-visible disclaimer. */
#dash-strategies-view #post-compare-results .cmp-r-s103 { width: 100%; box-shadow: none; }
#dash-strategies-view #post-compare-results .cmp-r-s104 { display: flex; justify-content: space-between; align-items: center; min-height: 40px; }
#dash-strategies-view #post-compare-results .cmp-r-s131 { width: 100%; padding: 4px 8px 0; line-height: 1.5; }

/* Customize & Run: mock-v3 two-panel hierarchy and controls. */
#tool-post-compare .cnr-panel { min-width: 0; }
#tool-post-compare .cnr-rank-pills { border-radius: 9px; background: #f0f4f8; }
#tool-post-compare .rank-pill { min-height: 30px; }
#tool-post-compare .cnr-run-row .btn { min-height: 38px; border-radius: 9px; font-weight: 800; }
#tool-post-compare .cnr-engine-row { padding: 11px 0; }
#tool-post-compare .cnr-saved { border: 1px solid var(--cmp-line); border-radius: 10px; background: #fff; padding: 0 12px; }
#tool-post-compare .cnr-edit-inputs { min-height: 28px; border-radius: 7px; }

@media (max-width: 1180px) {
  #dash-strategies-view #post-compare-results .cmp-r-diffgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #dash-strategies-view #post-compare-results > .cmp-r-scen[open] { grid-template-columns: 1fr; }
  #dash-strategies-view #post-compare-results > .cmp-r-scen .cmp-r-s129,
  #dash-strategies-view #post-compare-results > .cmp-r-scen .cmp-r-s130 { grid-column: 1; }
}
@media (max-width: 900px) {
  #dash-strategies-view #post-compare-results .cmp-r-shead { align-items: flex-start; flex-wrap: wrap; }
  #dash-strategies-view #post-compare-results .cmp-r-shead-ctx { margin-left: 0; }
  #dash-strategies-view #post-compare-results .cmp-r-diffgrid { grid-template-columns: 1fr !important; }
  #dash-strategies-view #post-compare-results > .cmp-r-chwrapL,
  #dash-strategies-view #post-compare-results > .cmp-r-chwrapR { min-width: 0; }
  #tool-post-compare .cnr-head,
  #tool-post-compare .cnr-prerun-assumes { align-items: flex-start; flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════════════════
   v149.422 — Strategy RESULTS design refinement (display-only; no engine paths).
   One-page compact layout matching image.jpg: header → assumptions chips →
   one-clear-answer banner → unified card row → 3-up charts+scenario →
   collapsed detail rows → disclaimer. Section sequencing via flex `order`
   (DOM order unchanged). New classes only under the cmp-r-* prefix.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Section order (flex order; later rule wins over the v149.364 block) ── */
#dash-strategies-view #post-compare-results > .cmp-r-shead      { order: 1; }
#dash-strategies-view #post-compare-results > .cmp-r-stale      { order: 2; }
/* v149.433 — the entire pre-run composition lives in ONE wrapper with one
   order (supersedes the v149.432 per-child pair): children flow in source
   order inside it, immune to the post-run flex-order map. */
#dash-strategies-view #post-compare-results > .cnr-prerun-wrap { order: 2; width: 100%; }
#dash-strategies-view #post-compare-results > .cmp-r-s10        { order: 3; }
#dash-strategies-view #post-compare-results > .cmp-r-s20,
#dash-strategies-view #post-compare-results > .cmp-r-s26        { order: 4; }
#dash-strategies-view #post-compare-results > .cmp-r-cardrow    { order: 5; }
#dash-strategies-view #post-compare-results > .cmp-r-3up        { order: 6; }
#dash-strategies-view #post-compare-results > .cmp-r-taxnotes   { order: 7; }
#dash-strategies-view #post-compare-results > .cmp-r-s27        { order: 8; }
#dash-strategies-view #post-compare-results > .cmp-r-s103       { order: 9; }
/* verbose pre-card blocks demoted below the fold, kept compact (no deletion) */
#dash-strategies-view #post-compare-results > .cmp-r-s14        { order: 10; }
#dash-strategies-view #post-compare-results > .cmp-r-s19        { order: 11; }
#dash-strategies-view #post-compare-results > .cmp-r-s9         { order: 12; }
#dash-strategies-view #post-compare-results > .cmp-r-s131       { order: 13; }

/* ── Results header ─────────────────────────────────────────────────── */
#dash-strategies-view #post-compare-results .cmp-r-shead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  margin: 0;
}
#dash-strategies-view #post-compare-results .cmp-r-shead-titlewrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
#dash-strategies-view #post-compare-results .cmp-r-shead-title {
  margin: 0;
  color: var(--color-text);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.025em;
}
#dash-strategies-view #post-compare-results .cmp-r-shead-sub {
  color: var(--color-text-secondary);
  font-size: 12.5px;
  line-height: 1.45;
}
#dash-strategies-view #post-compare-results .cmp-r-shead-ctx {
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-tertiary);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.45;
  white-space: normal;
}
#dash-strategies-view #post-compare-results .cmp-r-shead-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
/* Rank control stays compact so it reads as a comparison lens, not a primary action. */
#dash-strategies-view #post-compare-results .cmp-r-ranktoggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-surface-alt);
}
#dash-strategies-view #post-compare-results .cmp-r-ranktoggle-label {
  padding: 0 4px 0 6px;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
#dash-strategies-view #post-compare-results .cmp-r-ranktoggle .rank-pill {
  padding: 5px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, color .12s;
}
#dash-strategies-view #post-compare-results .cmp-r-ranktoggle .rank-pill.active {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 750;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-text) 8%, transparent);
}
#dash-strategies-view #post-compare-results .cmp-r-refresh {
  padding: 7px 12px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 11.5px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
#dash-strategies-view #post-compare-results .cmp-r-refresh:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}
/* D2 is intentionally left as a product ruling: keep the existing chip copy,
   but visually demote it so per-card Monte Carlo Success remains the detail. *//* ── Assumptions chip strip ─────────────────────────────────────────── */
#dash-strategies-view #post-compare-results .cmp-r-chipstrip {
  gap: 6px;
  flex-wrap: wrap;
  padding: 9px 11px;
  border-color: var(--color-border);
  background: var(--color-surface-alt);
}
#dash-strategies-view #post-compare-results .cmp-r-chip-label {
  color: var(--color-text);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
#dash-strategies-view #post-compare-results .cmp-r-chip {
  padding: 4px 9px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

/* ── Unified strategy card row ────────────────────────────────────────
   Five engine-derived cards retain one architecture. The recommendation is
   emphasized by treatment only; Current remains a full peer card/baseline. */
#dash-strategies-view #post-compare-results .cmp-r-cardrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  width: 100%;
  align-items: stretch;
}
#dash-strategies-view #post-compare-results .cmp-r-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  padding: 15px 14px 14px;
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--cmp-r-accent, var(--color-primary));
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--color-text) 5%, transparent);
}
#dash-strategies-view #post-compare-results .cmp-r-card.is-rec {
  border-color: color-mix(in srgb, var(--color-success) 28%, var(--color-border));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--color-success) 12%, transparent);
}
#dash-strategies-view #post-compare-results .cmp-r-card.is-current {
  background: var(--color-surface-alt);
}
#dash-strategies-view #post-compare-results .cmp-r-card-hd {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}
#dash-strategies-view #post-compare-results .cmp-r-card-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cmp-r-accent, var(--color-primary)) 24%, var(--color-border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--cmp-r-accent, var(--color-primary)) 10%, var(--color-surface));
  font-size: 16px;
  line-height: 1;
}
#dash-strategies-view #post-compare-results .cmp-r-card-name {
  min-width: 0;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.25;
}
#dash-strategies-view #post-compare-results .cmp-r-badge {
  margin-left: 0;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
}
#dash-strategies-view #post-compare-results .cmp-r-badge.is-rec {
  border: 1px solid color-mix(in srgb, var(--color-success) 24%, var(--color-border));
  background: var(--color-success-highlight);
  color: var(--color-success);
}
#dash-strategies-view #post-compare-results .cmp-r-badge.is-base {
  border: 1px solid var(--color-border);
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
}
#dash-strategies-view #post-compare-results .cmp-r-badge.is-alt {
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
#dash-strategies-view #post-compare-results .cmp-r-card-desc {
  min-height: 50px;
  padding: 0 1px;
  color: var(--color-text-secondary);
  font-size: 11.5px;
  line-height: 1.48;
}

/* The strategy mechanism is a compact three-row summary, identical on all cards. */
#dash-strategies-view #post-compare-results .cmp-r-struct {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px 9px;
  border: 1px solid var(--color-border-faint);
  border-radius: 10px;
  background: var(--color-surface-alt);
}
#dash-strategies-view #post-compare-results .cmp-r-struct-row {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 10.5px;
  line-height: 1.35;
}
#dash-strategies-view #post-compare-results .cmp-r-struct-row:last-child { border-bottom: 0; }
#dash-strategies-view #post-compare-results .cmp-r-struct-k {
  color: var(--color-text-muted);
}
#dash-strategies-view #post-compare-results .cmp-r-struct-v {
  color: var(--color-text-secondary);
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

/* Outcome metric stack. Keeping each metric as a horizontal row makes the five
   cards scan like a comparison table while preserving every engine value. */
#dash-strategies-view #post-compare-results .cmp-r-face {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}
#dash-strategies-view #post-compare-results .cmp-r-metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: baseline;
  padding: 8px 9px;
  border: 0;
  border-bottom: 1px solid var(--color-divider);
  border-radius: 0;
  background: var(--color-surface);
}
#dash-strategies-view #post-compare-results .cmp-r-metric:last-child { border-bottom: 0; }
#dash-strategies-view #post-compare-results .cmp-r-metric-k {
  color: var(--color-text-muted);
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: .035em;
  line-height: 1.3;
  text-transform: uppercase;
}
#dash-strategies-view #post-compare-results .cmp-r-metric-v {
  color: var(--color-text);
  font-size: 13.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}
#dash-strategies-view #post-compare-results .cmp-r-metric-d {
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: 0;
  font-size: 9.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  text-align: right;
}
#dash-strategies-view #post-compare-results .cmp-r-metric-d.is-good { color: var(--color-success); }
#dash-strategies-view #post-compare-results .cmp-r-metric-d.is-bad  { color: var(--color-error); }
#dash-strategies-view #post-compare-results .cmp-r-metric-d.is-flat { color: var(--color-text-muted); font-weight: 600; }
#dash-strategies-view #post-compare-results .cmp-r-s49 { color: var(--color-text-muted); font-size: 9px; font-weight: 400; }

/* Actions remain identical on every strategy card; only the engine-selected
   accent colors the Apply action. */
#dash-strategies-view #post-compare-results .cmp-r-card-actions {
  display: flex;
  gap: 7px;
  margin-top: auto;
  padding-top: 2px;
}
#dash-strategies-view #post-compare-results .cmp-r-card-viewbtn,
#dash-strategies-view #post-compare-results .cmp-r-card-apply {
  min-height: 34px;
  flex: 1;
  border-radius: 9px;
  padding: 7px 8px;
  font-size: 11.5px;
  font-weight: 750;
  text-align: center;
}
#dash-strategies-view #post-compare-results .cmp-r-card-viewbtn {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
}
#dash-strategies-view #post-compare-results .cmp-r-card-viewbtn:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
}
#dash-strategies-view #post-compare-results .cmp-r-card-viewbtn.is-open {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
#dash-strategies-view #post-compare-results .cmp-r-card-apply {
  border: 1px solid var(--cmp-r-accent, var(--color-primary));
  background: var(--cmp-r-accent, var(--color-primary));
  color: var(--color-text-inverse);
  cursor: pointer;
}
#dash-strategies-view #post-compare-results .cmp-r-card-apply:hover { filter: brightness(.96); }
#dash-strategies-view #post-compare-results .cmp-r-card-apply.is-current {
  border-color: var(--color-border);
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
  font-weight: 650;
  cursor: default;
}

/* Per-card details favor readability inside a narrow comparison column. */
#dash-strategies-view #post-compare-results .cmp-r-cardmore {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border-strong);
}
#dash-strategies-view #post-compare-results .cmp-r-cardmore[hidden] { display: none; }
#dash-strategies-view #post-compare-results .cmp-r-more-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}
#dash-strategies-view #post-compare-results .cmp-r-more-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 9px;
  border: 1px solid var(--color-border-faint);
  border-radius: 8px;
  background: var(--color-surface-alt);
}
#dash-strategies-view #post-compare-results .cmp-r-more-k {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--color-text-muted);
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: .03em;
  text-transform: uppercase;
}
#dash-strategies-view #post-compare-results .cmp-r-more-v {
  color: var(--color-text);
  font-size: 12.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
#dash-strategies-view #post-compare-results .cmp-r-more-v.is-warn { color: var(--color-error); }
#dash-strategies-view #post-compare-results .cmp-r-liqbadge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: fit-content;
  margin-top: 2px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 700;
}
#dash-strategies-view #post-compare-results .cmp-r-s52 { color: var(--color-error); font-size: 9px; font-weight: 700; }
#dash-strategies-view #post-compare-results .cmp-r-s66 { margin-top: 1px; color: var(--color-text-muted); font-size: 8.5px; }
#dash-strategies-view #post-compare-results .cmp-r-s68,
#dash-strategies-view #post-compare-results .cmp-r-s99,
#dash-strategies-view #post-compare-results .cmp-r-s98,
#dash-strategies-view #post-compare-results .cmp-r-s95 {
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 10.5px;
  line-height: 1.5;
}
#dash-strategies-view #post-compare-results .cmp-r-s68,
#dash-strategies-view #post-compare-results .cmp-r-s99,
#dash-strategies-view #post-compare-results .cmp-r-s98 {
  border: 1px solid color-mix(in srgb, var(--color-warning) 28%, var(--color-border));
  background: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface));
  color: var(--color-text-secondary);
}
#dash-strategies-view #post-compare-results .cmp-r-s95 {
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
  background: var(--color-primary-bg);
  color: var(--color-text-secondary);
}
#dash-strategies-view #post-compare-results .cmp-r-more-actions { display: flex; justify-content: flex-end; }
#dash-strategies-view #post-compare-results .cmp-r-s101 { font-size: 11px; }

/* ── 3-up: charts + scenario analysis ───────────────────────────────── */
#dash-strategies-view #post-compare-results .cmp-r-3up {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(320px, 1.1fr);
  gap: 12px;
  width: 100%;
  align-items: stretch;
}
#dash-strategies-view #post-compare-results .cmp-r-3up > * {
  min-width: 0;
  margin: 0;
}
#dash-strategies-view #post-compare-results .cmp-r-3up .cmp-r-chwrapL,
#dash-strategies-view #post-compare-results .cmp-r-3up .cmp-r-chwrapR,
#dash-strategies-view #post-compare-results .cmp-r-3up .cmp-r-scen {
  border: 1px solid var(--color-border);
  border-radius: 13px;
  background: var(--color-surface);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--color-text) 4%, transparent);
}
#dash-strategies-view #post-compare-results .cmp-r-3up .cmp-r-chwrapL,
#dash-strategies-view #post-compare-results .cmp-r-3up .cmp-r-chwrapR {
  padding: 14px 14px 10px;
}
#dash-strategies-view #post-compare-results .cmp-r-3up .cmp-r-scen {
  padding: 0 14px;
}
#dash-strategies-view #post-compare-results .cmp-r-3up .cmp-r-scen[open] { padding-bottom: 12px; }
#dash-strategies-view #post-compare-results .cmp-r-3up .cmp-r-scen > summary {
  padding: 13px 0;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

/* ── F2 skeleton + honest progress ──────────────────────────────────── */
#post-compare-results .cmp-r-skel { display: flex; flex-direction: column; gap: 14px; width: 100%; }
#post-compare-results .cmp-r-sk-status { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--cmp-ink, #1c2a3a); }
#post-compare-results .cmp-r-sk-spin { width: 16px; height: 16px; border: 2px solid #d9e2ee; border-top-color: var(--cmp-blue, #2f6fd0); border-radius: 50%; animation: spin .8s linear infinite; flex: 0 0 auto; }
#post-compare-results .cmp-r-sk-chipstrip { display: flex; gap: 8px; flex-wrap: wrap; }
#post-compare-results .cmp-r-sk-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
#post-compare-results .cmp-r-sk-card { display: flex; flex-direction: column; gap: 9px; border: 1px solid #e8eef6; border-radius: 13px; background: #fff; padding: 14px; }
#post-compare-results .cmp-r-sk-face { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#post-compare-results .cmp-r-sk-cell { height: 46px; border-radius: 9px; }
#post-compare-results .cmp-r-sk-line { border-radius: 6px; height: 12px; }
#post-compare-results .cmp-r-sk-hd { height: 16px; width: 62%; }
#post-compare-results .cmp-r-sk-sm { width: 88%; }
#post-compare-results .cmp-r-sk-btn { height: 30px; margin-top: 4px; }
#post-compare-results .cmp-r-sk-chip { height: 22px; width: 92px; border-radius: 999px; }
#post-compare-results .cmp-r-sk-line,
#post-compare-results .cmp-r-sk-cell,
#post-compare-results .cmp-r-sk-chip {
  background: linear-gradient(90deg, #eef2f7 25%, #f6f9fc 37%, #eef2f7 63%);
  background-size: 400% 100%; animation: cmpRShimmer 1.4s ease-in-out infinite;
}
@keyframes cmpRShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  #post-compare-results .cmp-r-sk-line,
  #post-compare-results .cmp-r-sk-cell,
  #post-compare-results .cmp-r-sk-chip,
  #post-compare-results .cmp-r-sk-spin { animation: none; }
}

/* ── Responsive (iPad) ──────────────────────────────────────────────── */
@media (max-width: 1194px) {
  #dash-strategies-view #post-compare-results .cmp-r-cardrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dash-strategies-view #post-compare-results .cmp-r-3up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dash-strategies-view #post-compare-results .cmp-r-3up .cmp-r-scen { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  #dash-strategies-view #post-compare-results .cmp-r-shead { grid-template-columns: 1fr; }
  #dash-strategies-view #post-compare-results .cmp-r-shead-actions { justify-content: flex-start; }
}
@media (max-width: 834px) {
  #dash-strategies-view #post-compare-results .cmp-r-cardrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dash-strategies-view #post-compare-results .cmp-r-3up { grid-template-columns: 1fr; }
  #dash-strategies-view #post-compare-results .cmp-r-3up .cmp-r-scen { grid-column: auto; }
}
@media (max-width: 640px) {
  #dash-strategies-view #post-compare-results .cmp-r-cardrow { grid-template-columns: 1fr; }
  #dash-strategies-view #post-compare-results .cmp-r-card-desc { min-height: 0; }
  #dash-strategies-view #post-compare-results .cmp-r-shead-actions { align-items: stretch; }
}

/* v149.344 — charts/spreadsheet enabler baseline (designer restyles) */
.ss-group-row .ss-g { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted, #93a1a6); border-bottom: 1px solid var(--color-border, #e5e7eb); padding: 6px 8px 4px; text-align: left; background: var(--color-surface, #fff); }
.ss-controls { display: flex; align-items: center; gap: 14px; padding: 10px 12px 4px; font-size: 11.5px; color: var(--color-text-secondary, #4b5b62); flex-wrap: wrap; }
.ss-years select { margin-left: 6px; }
.ss-foot-note { color: var(--color-text-muted, #93a1a6); }
.ss-scroll-hint { margin-left: auto; color: var(--color-text-muted, #93a1a6); font-size: 10.5px; }
.chart-note { margin: 6px 2px 0; font-size: 10.5px; color: var(--color-text-muted, #93a1a6); }

/* v149.344 — High-resolution Charts + Spreadsheet pass
   Presentation-only. Preserves existing IDs, copy, rendering, and behavior. */
#dash-charts-view {
  margin-top: 10px;
}
#dash-charts-view .dash-charts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
#dash-charts-view .chart-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 286px;
  padding: 18px 18px 14px;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 14px 32px rgba(18, 42, 79, 0.06);
  overflow: hidden;
}
#dash-charts-view .chart-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #19a463 0%, #2d76f0 55%, #8b5cf6 100%);
  opacity: 0.96;
}
#dash-charts-view .chart-card.chart-large {
  min-height: 304px;
}
#dash-charts-view .chart-title {
  margin: 0;
  font-size: 1.03rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f2350;
}
#dash-charts-view .chart-subtitle,
#dash-charts-view .chart-note {
  margin: -4px 0 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: #71839d;
}
#dash-charts-view .chart-wrapper {
  position: relative;
  flex: 1 1 auto;
  min-height: 194px;
  padding: 10px 10px 4px;
  border: 1px solid #edf2f8;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(244, 248, 253, 0.82) 0%, rgba(255,255,255,0.98) 18%),
    repeating-linear-gradient(to bottom, rgba(128, 147, 168, 0.08) 0 1px, transparent 1px 42px),
    linear-gradient(90deg, rgba(128,147,168,0.08) 0 1px, transparent 1px) 0 0 / 68px 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
#dash-charts-view .chart-wrapper.chart-tall {
  min-height: 214px;
}
#dash-charts-view .chart-wrapper canvas,
#dash-charts-view .chart-wrapper svg {
  width: 100% !important;
  height: 100% !important;
}
#dash-charts-view .chart-card:hover {
  box-shadow: 0 18px 36px rgba(18, 42, 79, 0.08);
}
/* v149.345 — the per-position nth-child accent variants were removed: they
   key card colors to DOM position, so any card insert/remove/hide silently
   reshuffles the palette. All cards take the base accent; per-card variants
   may return keyed to stable IDs (as #dash-healthcare-card is below). */
#dash-charts-view #mc-fan-chart-card .chart-wrapper {
  background:
    linear-gradient(180deg, rgba(246, 251, 255, 0.98) 0%, rgba(255,255,255,1) 30%),
    radial-gradient(circle at 25% 20%, rgba(37, 193, 123, 0.08), transparent 30%),
    radial-gradient(circle at 76% 32%, rgba(80, 125, 249, 0.09), transparent 34%),
    #fff;
}
#dash-charts-view #dash-healthcare-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfefe 100%);
}
#dash-charts-view #dash-healthcare-card::before {
  background: linear-gradient(90deg, #0ea5a4 0%, #3dcfa6 100%);
}
@media (max-width: 1240px) {
  #dash-charts-view .dash-charts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  #dash-charts-view .dash-charts {
    grid-template-columns: 1fr;
  }
  #dash-charts-view .chart-card,
  #dash-charts-view .chart-card.chart-large {
    min-height: 272px;
  }
}

#dash-spreadsheet-view {
  /* v149.345 — single-source layout constants. The group-row height and the
     first sticky column's width each appear in TWO places (an element's own
     size and a dependent offset); a magic number in each spot is how sticky
     layouts silently break. One var, both consumers. */
  --ss-group-row-h: 31px;
  --ss-col1-w: 72px;
  margin-top: 10px;
  padding-left: 0;
  padding-right: 0;
}
#dash-spreadsheet-view .spreadsheet-card {
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 16px 34px rgba(18, 42, 79, 0.065);
  overflow: hidden;
}
#dash-spreadsheet-view .ss-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 20px 10px;
  border-bottom: 1px solid #eef3f8;
  background: linear-gradient(180deg, rgba(250,252,255,0.9) 0%, rgba(255,255,255,1) 100%);
}
#dash-spreadsheet-view .ss-years {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #0f2350;
}
#dash-spreadsheet-view .ss-years select,
#dash-spreadsheet-view .spreadsheet-toolbar .btn {
  min-height: 38px;
  border: 1px solid #d9e4f2;
  border-radius: 11px;
  background: #fff;
  color: #0f2350;
  box-shadow: 0 2px 8px rgba(15, 35, 80, 0.05);
}
#dash-spreadsheet-view .ss-years select {
  min-width: 132px;
  padding: 8px 34px 8px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #6b7c93 50%), linear-gradient(135deg, #6b7c93 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 1px), calc(100% - 13px) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
#dash-spreadsheet-view .ss-foot-note {
  font-size: 0.73rem;
  color: #75849a;
}
#dash-spreadsheet-view .ss-scroll-hint {
  justify-self: end;
  margin-left: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #5b7ab7;
}
#dash-spreadsheet-view .spreadsheet-toolbar {
  padding: 14px 20px;
  gap: 12px;
  border-bottom: 1px solid #eef3f8;
  background: #fff;
}
#dash-spreadsheet-view .spreadsheet-toolbar .chart-title {
  margin: 0;
  font-size: 1.04rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f2350;
}
#dash-spreadsheet-view .spreadsheet-toolbar > span {
  color: #75849a !important;
  font-size: 0.73rem !important;
  font-weight: 600 !important;
}
#dash-spreadsheet-view .spreadsheet-toolbar .btn {
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0 12px;
}
#dash-spreadsheet-view .spreadsheet-scroll {
  max-height: 72vh;
  padding-bottom: 4px;
  background:
    linear-gradient(to right, rgba(255,255,255,0.98) 0, rgba(255,255,255,0.98) 14px, transparent 34px),
    linear-gradient(to left, rgba(255,255,255,0.98) 0, rgba(255,255,255,0.98) 14px, transparent 34px);
  background-repeat: no-repeat;
  background-position: left top, right top;
  background-size: 42px 100%, 42px 100%;
}
#dash-spreadsheet-view .spreadsheet-table {
  width: max-content;
  min-width: 100%;
  font-size: 11px;
  color: #183153;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}
#dash-spreadsheet-view .spreadsheet-table thead tr:first-child th {
  top: 0;
}
#dash-spreadsheet-view .spreadsheet-table thead tr:nth-child(2) th {
  top: var(--ss-group-row-h);
}
#dash-spreadsheet-view .spreadsheet-table thead th {
  position: sticky;
  z-index: 4;
  padding: 8px 10px;
  background: #f7faff;
  color: #61728a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.01em;
  border-bottom: 1px solid #dce6f1;
  border-right: 1px solid #edf2f7;
  white-space: nowrap;
}
#dash-spreadsheet-view .ss-group-row .ss-g {
  height: var(--ss-group-row-h);
  box-sizing: border-box;
  white-space: nowrap;
  padding: 8px 10px 7px;
  background: #ffffff;
  color: #0f2350;
  font-size: 10px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid #dfe8f4;
}
#dash-spreadsheet-view .spreadsheet-table tbody td {
  padding: 7px 10px;
  border-right: 1px solid #eef3f8;
  border-bottom: 1px solid #eef3f8;
  background: #fff;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
#dash-spreadsheet-view .spreadsheet-table tbody tr:nth-child(even) td {
  background: #fbfcfe;
}
#dash-spreadsheet-view .spreadsheet-table tbody tr:hover td {
  background: #eef5ff;
}
#dash-spreadsheet-view .spreadsheet-table th.section-start,
#dash-spreadsheet-view .spreadsheet-table td.section-start {
  border-left: 2px solid #dde8f4;
}
/* v149.345 — sticky Year/Age columns. `background: inherit` resolved to
   TRANSPARENT (no <tr> in this table has a background), so scrolled columns
   bled through beneath the sticky cells. Backgrounds are now explicit and
   opaque at every state (base, stripe, header, hover); the second column's
   left offset derives from the first column's declared width. */
#dash-spreadsheet-view .spreadsheet-table th:first-child,
#dash-spreadsheet-view .spreadsheet-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
  background: #fff;
  box-shadow: 1px 0 0 #edf2f7;
}
#dash-spreadsheet-view .spreadsheet-table th:first-child:not(.ss-g),
#dash-spreadsheet-view .spreadsheet-table td:first-child {
  width: var(--ss-col1-w);
  min-width: var(--ss-col1-w);
}
#dash-spreadsheet-view .spreadsheet-table th:nth-child(2),
#dash-spreadsheet-view .spreadsheet-table td:nth-child(2) {
  position: sticky;
  left: var(--ss-col1-w);
  z-index: 5;
  min-width: 72px;
  background: #fff;
  box-shadow: 1px 0 0 #edf2f7;
}
#dash-spreadsheet-view .spreadsheet-table thead th:first-child,
#dash-spreadsheet-view .spreadsheet-table thead th:nth-child(2) {
  z-index: 7;
  background: #f7faff;
}
#dash-spreadsheet-view .spreadsheet-table tbody tr:nth-child(even) td:first-child,
#dash-spreadsheet-view .spreadsheet-table tbody tr:nth-child(even) td:nth-child(2) {
  background: #fbfcfe;
}
#dash-spreadsheet-view .spreadsheet-table tbody tr:hover td:first-child,
#dash-spreadsheet-view .spreadsheet-table tbody tr:hover td:nth-child(2) {
  background: #eef5ff;
}
#dash-spreadsheet-view .spreadsheet-card > div[style*="columns:2"] {
  margin: 12px 18px 18px !important;
  padding: 14px 16px !important;
  border: 1px solid #e7eef7;
  border-radius: 14px;
  background: #fcfdff;
  color: #576b86 !important;
  font-size: 0.74rem !important;
  line-height: 1.7 !important;
  column-gap: 2.25rem !important;
  column-rule: 1px solid #edf2f7 !important;
}
#dash-spreadsheet-view .spreadsheet-card > div[style*="columns:2"] strong {
  color: #0f2350;
}
/* v149.346 — accounting-style outflows (Planned Spending). The engine emits
   class="neg" on outflow cells; the parentheses are generated content and the
   value itself stays a clean engine-rendered number (textContent unchanged,
   so the CSV export — which serializes this table — is unaffected). These
   rules replace the v149.344 pass's :has() rules, which targeted markup the
   engine did not emit. */
#dash-spreadsheet-view .spreadsheet-table tbody td.neg {
  color: #dc2626;
  font-weight: 700;
}
#dash-spreadsheet-view .spreadsheet-table tbody td.neg::before { content: "("; }
#dash-spreadsheet-view .spreadsheet-table tbody td.neg::after { content: ")"; }

#syw-popover {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 18px 38px rgba(18, 42, 79, 0.12);
  overflow: hidden;
}
#syw-popover .syw-header {
  padding: 12px 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  border-bottom: 1px solid #e6eef7;
}
#syw-popover .syw-title {
  color: #0f2350;
  font-weight: 800;
  letter-spacing: -0.01em;
}
#syw-popover .syw-body {
  color: #51657e;
  line-height: 1.6;
}
#syw-popover .syw-footer {
  background: #f8fbff;
  color: #75849a;
  border-top: 1px solid #e6eef7;
}
#dash-spreadsheet-view td.syw-cell,
#dash-spreadsheet-view td.syw-cell:hover {
  cursor: pointer;
}
#dash-spreadsheet-view td.syw-cell.syw-cell-active,
#dash-spreadsheet-view td.syw-cell.syw-focused {
  background: #e8f1ff !important;
  box-shadow: inset 0 0 0 2px rgba(47, 109, 230, 0.22);
  position: relative;
  z-index: 2;
}
@media (max-width: 1120px) {
  #dash-spreadsheet-view .ss-controls {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  #dash-spreadsheet-view .ss-scroll-hint {
    justify-self: start;
  }
}
@media (max-width: 760px) {
  #dash-spreadsheet-view .spreadsheet-toolbar {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  #dash-spreadsheet-view .spreadsheet-toolbar > div {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  #dash-spreadsheet-view .spreadsheet-card > div[style*="columns:2"] {
    columns: 1 !important;
  }
}

/* v149.347 — SE enabler baseline (designer restyles). Neutral layout only,
   so the new elements render sanely unstyled; the engagement pass owns the
   visual treatment. The se-hero--sheet state class implements the approved
   per-state fourth card (charts: Employer Match; spreadsheet: Current
   Savings) — engineering-owned behavior, like the MC fan card. */
.se-hero { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.se-hero-card { border: 1px solid var(--color-border, #e5e7eb); border-radius: 12px; padding: 14px; background: var(--color-surface, #fff); }
.se-hero-label { font-size: 11px; font-weight: 700; color: var(--color-text-secondary, #4b5b62); margin-bottom: 6px; }
.se-hero-main { display: flex; gap: 14px; align-items: center; }
.se-hero-ring { width: 84px; height: 84px; flex: 0 0 auto; }
.se-hero-ring-track { stroke: var(--color-border, #e5e7eb); }
.se-hero-ring-fill { stroke: var(--color-success, #16a34a); transition: stroke-dashoffset .3s ease; }
.se-hero-ring-text { font-size: 16px; font-weight: 800; fill: var(--color-text-primary, #111827); }
.se-hero-value { font-size: 22px; font-weight: 800; color: var(--color-text-primary, #111827);
  /* v149.459 (R2-MAJ-02): at the per-field cap a long-horizon projection is
     legitimately a 13+ digit figure; it must degrade by WRAPPING, never by
     clipping mid-number — a truncated dollar amount reads as a different,
     wrong number. */
  overflow-wrap: anywhere; line-height: 1.15; }
.se-hero-target { font-size: 15px; font-weight: 700; color: var(--color-text-secondary, #4b5b62); }
.se-hero-sub, .se-hero-note { font-size: 10.5px; color: var(--color-text-muted, #93a1a6); margin: 2px 0 0; }
.se-hero .se-hero-sheet-only { display: none; }
.se-hero.se-hero--sheet .se-hero-sheet-only { display: block; }
.se-hero.se-hero--sheet .se-hero-charts-only { display: none; }
@media (max-width: 1100px) { .se-hero { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .se-hero { grid-template-columns: 1fr; } }

.pre-scenarios-card { margin-top: 18px; border: 1px solid var(--color-border, #e5e7eb); border-radius: 12px; padding: 16px; background: var(--color-surface, #fff); }
.pre-scenarios-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pre-scenarios-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pre-scenarios-table th { text-align: left; font-size: 10.5px; color: var(--color-text-muted, #93a1a6); padding: 6px 8px; border-bottom: 1px solid var(--color-border, #e5e7eb); }
.pre-scenarios-table td { padding: 8px; border-bottom: 1px solid var(--color-divider, #f1f5f9); }
.pre-scenarios-table tr.is-active td { background: oklch(0.97 0.02 165); }
.pre-scenario-active-badge { font-size: 9px; font-weight: 800; letter-spacing: .05em; color: oklch(0.35 0.14 150); background: oklch(0.92 0.07 150); border-radius: 4px; padding: 2px 6px; }
.pre-scenarios-empty { color: var(--color-text-muted, #93a1a6); font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ========================================================================== 
   Savings Estimator — final high-resolution visual pass (v149.347 handback)
   Scope: presentation only inside #view-pre-retirement. No engine, copy,
   state, control, row, column, or conditional-element behavior is changed.
   ========================================================================== */
#view-pre-retirement {
  --se-ink: #10234a;
  --se-ink-2: #314866;
  --se-muted: #728299;
  --se-line: #dfe8f2;
  --se-line-soft: #edf2f7;
  --se-surface: #ffffff;
  --se-surface-soft: #f8fbfe;
  --se-green: #17a36b;
  --se-green-dark: #0b7b50;
  --se-blue: #1677e8;
  --se-blue-soft: #eef6ff;
  --se-purple: #7566dc;
  --se-amber: #d89425;
  --se-radius: 14px;
  --se-radius-lg: 18px;
  --se-shadow: 0 12px 30px rgba(19, 45, 81, .065);
  --se-shadow-soft: 0 5px 16px rgba(19, 45, 81, .05);
  background:
    radial-gradient(circle at 75% 6%, rgba(32, 163, 111, .045), transparent 28%),
    linear-gradient(180deg, #f9fbfe 0, #f5f8fc 100%);
  color: var(--se-ink);
}

#view-pre-retirement .calc-container {
  width: min(100%, 1480px);
  max-width: 1480px;
  padding: 26px 24px 42px;
}

#view-pre-retirement .calc-header {
  margin-bottom: 20px;
  padding: 0 2px;
}

#view-pre-retirement .page-title {
  color: var(--se-ink);
  font-size: clamp(1.62rem, 2vw, 2.08rem);
  font-weight: 820;
  letter-spacing: -.035em;
}

#view-pre-retirement .page-subtitle {
  max-width: 760px;
  color: var(--se-muted);
  font-size: .82rem;
  line-height: 1.55;
}

#view-pre-retirement .dash-actions .btn,
#view-pre-retirement .view-toggle-bar .btn,
#view-pre-retirement .spreadsheet-toolbar .btn,
#view-pre-retirement .pre-scenarios-head .btn,
#view-pre-retirement .planning-tool-body > .btn {
  min-height: 36px;
  border-radius: 9px;
  font-weight: 760;
  box-shadow: 0 2px 8px rgba(16, 35, 74, .045);
}

#view-pre-retirement .calc-layout {
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 20px;
}

/* Input rail: retain every live input, but sharpen the visual hierarchy. */
#view-pre-retirement .calc-inputs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 14px;
}

#view-pre-retirement .calc-inputs .input-card,
#view-pre-retirement .calc-inputs .form-section {
  border: 1px solid var(--se-line);
  border-radius: var(--se-radius);
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  box-shadow: var(--se-shadow-soft);
}

#view-pre-retirement .calc-inputs .input-card {
  padding: 16px;
}

#view-pre-retirement .calc-inputs .input-card-title,
#view-pre-retirement .calc-inputs .form-section-header {
  color: var(--se-ink);
  font-weight: 800;
  letter-spacing: -.015em;
}

#view-pre-retirement .calc-inputs .input-card-title {
  margin-bottom: 13px;
  padding-bottom: 10px;
  border-color: var(--se-line-soft);
}

#view-pre-retirement .calc-inputs .form-field {
  margin-bottom: 13px;
}

#view-pre-retirement .calc-inputs .form-field label {
  color: #61738c;
  font-size: .69rem;
  font-weight: 720;
}

#view-pre-retirement .calc-inputs input[type="number"],
#view-pre-retirement .calc-inputs input[type="text"],
#view-pre-retirement .calc-inputs select {
  min-height: 38px;
  border-color: #d9e3ef;
  background: #fff;
  color: var(--se-ink);
  font-weight: 680;
}

#view-pre-retirement .calc-inputs .input-prefix,
#view-pre-retirement .calc-inputs .input-suffix {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border-color: #d9e3ef;
  background: #f5f8fc;
}

#view-pre-retirement .calc-inputs .slider {
  height: 5px;
  background: #dfe8f2;
}

#view-pre-retirement .calc-inputs .prex-savings-subtotal-row,
#view-pre-retirement .calc-inputs .prex-savings-grand-total,
#view-pre-retirement .calc-inputs .match-details {
  border-color: var(--se-line-soft);
}

/* The results canvas is a true 12-column design surface. The planning-tools
   wrapper becomes layout-transparent only; its children and native details
   behavior remain intact. */
#view-pre-retirement .calc-results {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

#view-pre-retirement .calc-results > #se-hero,
#view-pre-retirement .calc-results > .view-toggle-bar,
#view-pre-retirement .calc-results > .kpi-row,
#view-pre-retirement .calc-results > #pre-fun-fact,
#view-pre-retirement .calc-results > #pre-charts-view,
#view-pre-retirement .calc-results > #se-ctx-row,
#view-pre-retirement .calc-results > #pre-insights-panel,
#view-pre-retirement .calc-results > #pre-spreadsheet-view,
#view-pre-retirement .calc-results > #pre-window-alert,
#view-pre-retirement .calc-results > #pre-scenarios-card {
  /* v149.380 FIX: .calc-results is a 12-col grid; any direct child WITHOUT an
     explicit grid-column defaults to a single 1/12 track. #se-ctx-row (added
     v149.355) was missing from this full-bleed list, so its inner 3-card grid
     was crushed into ~1/12 of the width — the squished, character-wrapping
     columns seen on the SE landing. Span the full row like its siblings. */
  grid-column: 1 / -1;
  min-width: 0;
}

/* v149.381 — Smart Planning Tools own a dedicated, self-contained 2-column
   grid instead of dissolving into the 12-col .calc-results grid via
   display:contents. Sharing the parent grid caused masonry-style gaps and
   visual reordering because the <details> tool cards have different natural
   heights — grid auto-placement then broke the strict mock pairing and let
   Saved Scenarios appear mid-stack. A private 2-col grid flows the eight
   cards in exact DOM order (Match|Milestones, RothContrib|RothConv,
   StartVsWait|Strategy, CatchUp|Backtest) and keeps the section as one
   full-width block within .calc-results, with the Quick table and Saved
   Scenarios below it. */
#view-pre-retirement .planning-tools-section {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

#view-pre-retirement .planning-tools-heading {
  /* v149.381: heading spans the full row (was 1 / 11, which left a dead 2-col
     gap to its right). The mock shows the heading full-bleed above a uniform
     2-column tool grid. */
  grid-column: 1 / -1;
  min-height: 44px;
  margin: 4px 0 0;
  padding: 10px 13px;
  border: 1px solid #cfeadd;
  border-radius: 11px;
  background: linear-gradient(90deg, #f2fcf7 0%, #f7fbff 100%);
  color: var(--se-ink);
  font-size: .73rem;
  font-weight: 820;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 4px 14px rgba(13, 109, 73, .045);
}

#view-pre-retirement .planning-tools-heading svg {
  color: var(--se-green);
  opacity: 1;
}

/* v149.381 — within the section's own 2-col grid, the heading spans both
   columns and every tool card takes one column (strict DOM-order pairing). */
#view-pre-retirement .planning-tools-heading {
  grid-column: 1 / -1;
}
#view-pre-retirement .planning-tools-section > .planning-tool-card {
  grid-column: auto;
  min-width: 0;
}
/* v149.381 — CRITICAL for strict pairing: any NON-card child of the section
   (inline <style> blocks nested between tool cards, plus the header controls)
   must NOT consume a card grid-cell, or it offsets the 2-up pairing and swaps
   rows (e.g. Start-vs-Wait dropping below Strategy). Inline styles are hidden;
   the header/insight controls span the full row so cards always start a fresh
   pair. */
#view-pre-retirement .planning-tools-section > style {
  display: none;
}
#view-pre-retirement .planning-tools-section > .se-insight,
#view-pre-retirement .planning-tools-section > #se-tools-collapse-all {
  grid-column: 1 / -1;
}

#view-pre-retirement .calc-results > .table-details {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Hero band */
#view-pre-retirement .se-hero {
  grid-template-columns: minmax(310px, 1.9fr) repeat(3, minmax(150px, 1fr));
  gap: 12px;
  margin: 0;
}

#view-pre-retirement .se-hero-card {
  position: relative;
  min-height: 154px;
  padding: 16px;
  border: 1px solid var(--se-line);
  border-radius: var(--se-radius-lg);
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  box-shadow: var(--se-shadow);
  overflow: hidden;
}

#view-pre-retirement .se-hero-card::after {
  content: "";
  position: absolute;
  inset: auto -30px -42px auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(38, 122, 224, .045);
  pointer-events: none;
}

#view-pre-retirement .se-hero-card.se-hero-primary {
  border-color: #bfe5d3;
  background:
    radial-gradient(circle at 92% 18%, rgba(28, 174, 112, .11), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #f2fcf7 100%);
}

#view-pre-retirement .se-hero-card.se-hero-primary::after {
  background: rgba(24, 165, 106, .07);
}

#view-pre-retirement .se-hero-label {
  margin-bottom: 8px;
  color: #5f718a;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}

#view-pre-retirement .se-hero-primary .se-hero-label {
  color: var(--se-green-dark);
}

#view-pre-retirement .se-hero-main {
  gap: 13px;
}

#view-pre-retirement .se-hero-ring {
  width: 86px;
  height: 86px;
  filter: drop-shadow(0 4px 7px rgba(14, 117, 77, .08));
}

#view-pre-retirement .se-hero-ring-track {
  stroke: #dce9e3;
}

#view-pre-retirement .se-hero-ring-fill {
  stroke: var(--se-green);
}

#view-pre-retirement .se-hero-ring-text {
  fill: var(--se-ink);
  font-size: 15px;
  font-weight: 850;
}

#view-pre-retirement .se-hero-value {
  color: var(--se-ink);
  font-size: clamp(1.28rem, 1.8vw, 1.72rem);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -.035em;
}

#view-pre-retirement .se-hero-target {
  color: var(--se-green-dark);
  font-size: .98rem;
  font-weight: 800;
}

#view-pre-retirement .se-hero-sub,
#view-pre-retirement .se-hero-note {
  color: var(--se-muted);
  font-size: .63rem;
  line-height: 1.45;
}

#view-pre-retirement #se-hero-goal-empty {
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px dashed #b8d9ca;
  border-radius: 8px;
  background: rgba(243, 252, 247, .9);
  color: #4d715f;
}

/* Charts / Spreadsheet state toggle */
#view-pre-retirement .view-toggle-bar {
  margin: 0;
  min-height: 46px;
  padding: 5px;
  border: 1px solid var(--se-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--se-shadow-soft);
}

#view-pre-retirement .view-toggle-btn {
  min-height: 34px;
  padding: 7px 13px;
  border-radius: 8px;
  color: #62748e;
  font-size: .72rem;
  font-weight: 780;
}

#view-pre-retirement .view-toggle-btn.active {
  border-color: #cde7da;
  background: #edf9f3;
  color: var(--se-green-dark);
  box-shadow: inset 0 0 0 1px rgba(19, 145, 92, .025);
}

/* Sub-KPI strip */
#view-pre-retirement .kpi-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

#view-pre-retirement .kpi-card {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--se-line);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  box-shadow: var(--se-shadow-soft);
}

#view-pre-retirement .kpi-card.kpi-primary {
  border-width: 1px;
  border-color: #bfe5d3;
  background: linear-gradient(180deg, #f6fcf9 0%, #fff 100%);
}

#view-pre-retirement .kpi-label {
  min-height: 27px;
  margin-bottom: 5px;
  color: #718198;
  font-size: .62rem;
  font-weight: 720;
  line-height: 1.35;
}

#view-pre-retirement .kpi-value {
  color: var(--se-ink);
  font-size: clamp(1rem, 1.35vw, 1.34rem);
  font-weight: 850;
  letter-spacing: -.028em;
}

/* Insight strip */
#view-pre-retirement .fun-fact-card {
  gap: 12px;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid #cbe9dc;
  border-radius: 11px;
  background: linear-gradient(90deg, #f1fbf6 0%, #f7fbff 100%);
  box-shadow: var(--se-shadow-soft);
}

#view-pre-retirement .fun-fact-card::before {
  width: 120px;
  height: 120px;
  top: -55px;
  right: -35px;
  background: rgba(30, 161, 106, .06);
}

#view-pre-retirement .fun-fact-icon {
  width: 34px;
  height: 34px;
  border: 1px solid #d5eadf;
  border-radius: 9px;
  box-shadow: none;
}

#view-pre-retirement .fun-fact-label {
  color: var(--se-green-dark);
  font-size: .6rem;
  font-weight: 820;
}

#view-pre-retirement .fun-fact-text {
  color: var(--se-ink);
  font-size: .72rem;
}

#view-pre-retirement .fun-fact-subtext {
  color: var(--se-muted);
  font-size: .64rem;
}

/* Overview charts */
#view-pre-retirement #pre-charts-view.active {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

#view-pre-retirement #pre-charts-view .chart-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 352px;
  margin: 0;
  padding: 17px 17px 13px;
  border: 1px solid var(--se-line);
  border-radius: var(--se-radius-lg);
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  box-shadow: var(--se-shadow);
  overflow: hidden;
}

#view-pre-retirement #pre-charts-view .chart-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--se-green), #3688e8 62%, var(--se-purple));
}

#view-pre-retirement #pre-charts-view .chart-title {
  margin: 1px 0 4px;
  color: var(--se-ink);
  font-size: .92rem;
  font-weight: 830;
  letter-spacing: -.018em;
}

#view-pre-retirement #pre-charts-view .chart-note {
  margin: 0 0 6px;
  color: var(--se-muted);
  font-size: .67rem;
  line-height: 1.45;
}

#view-pre-retirement #pre-charts-view .chart-wrapper {
  flex: 1 1 auto;
  min-height: 282px;
  height: auto;
  padding: 8px;
  border: 1px solid var(--se-line-soft);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(247, 250, 254, .9), rgba(255, 255, 255, .98) 18%),
    repeating-linear-gradient(to bottom, rgba(119, 143, 171, .07) 0 1px, transparent 1px 48px);
}

#view-pre-retirement #pre-charts-view canvas {
  width: 100% !important;
  height: 100% !important;
}

#view-pre-retirement #pre-insights-panel {
  margin: 0;
  border: 1px solid var(--se-line);
  border-radius: var(--se-radius);
  background: #fff;
  box-shadow: var(--se-shadow-soft);
}

/* Savings spreadsheet */
#view-pre-retirement #pre-spreadsheet-view {
  --ss-group-row-h: 32px;
  --ss-first-col-w: 78px;
  min-width: 0;
}

#view-pre-retirement #pre-spreadsheet-view.active {
  display: block;
}

#view-pre-retirement #pre-spreadsheet-card {
  min-width: 0;
  border: 1px solid var(--se-line);
  border-radius: var(--se-radius-lg);
  background: #fff;
  box-shadow: var(--se-shadow);
  overflow: hidden;
}

#view-pre-retirement #pre-spreadsheet-view .spreadsheet-toolbar {
  min-height: 58px;
  padding: 12px 16px;
  border-color: var(--se-line-soft);
  background: linear-gradient(180deg, #fff, #fbfdff);
}

#view-pre-retirement #pre-spreadsheet-view .spreadsheet-toolbar .chart-title {
  margin: 0;
  color: var(--se-ink);
  font-size: .94rem;
  font-weight: 830;
  letter-spacing: -.018em;
}

#view-pre-retirement #pre-spreadsheet-view .spreadsheet-toolbar .btn {
  border: 1px solid #d8e3ef;
  background: #fff;
  color: var(--se-ink-2);
}

#view-pre-retirement #pre-spreadsheet-view .ss-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--se-line-soft);
  background: #f8fbfe;
}

#view-pre-retirement #pre-spreadsheet-view .ss-years {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--se-ink);
  font-size: .7rem;
  font-weight: 800;
}

#view-pre-retirement #pre-spreadsheet-view .ss-years select {
  min-height: 35px;
  min-width: 126px;
  padding: 7px 30px 7px 10px;
  border: 1px solid #d7e3ef;
  border-radius: 9px;
  background: #fff;
  color: var(--se-ink);
  font-size: .7rem;
  font-weight: 720;
}

#view-pre-retirement #pre-spreadsheet-view .ss-foot-note,
#view-pre-retirement #pre-spreadsheet-view .ss-scroll-hint {
  color: var(--se-muted);
  font-size: .66rem;
  line-height: 1.4;
}

#view-pre-retirement #pre-spreadsheet-view .ss-scroll-hint {
  justify-self: end;
  color: #5377ad;
  font-weight: 720;
}

#view-pre-retirement #pre-spreadsheet-view .spreadsheet-scroll {
  max-height: 68vh;
  overflow: auto;
  background: #fff;
}

#view-pre-retirement #pre-spreadsheet {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  color: #173251;
  font-size: 10.5px;
}

#view-pre-retirement #pre-spreadsheet thead tr:first-child th {
  top: 0;
}

#view-pre-retirement #pre-spreadsheet thead tr:nth-child(2) th {
  top: var(--ss-group-row-h);
}

#view-pre-retirement #pre-spreadsheet thead th {
  position: sticky;
  z-index: 4;
  padding: 8px 9px;
  border-right: 1px solid #e8eef5;
  border-bottom: 1px solid #d8e3ee;
  background: #f5f8fc;
  color: #5c708b;
  font-size: 9.5px;
  font-weight: 820;
  text-align: right;
  white-space: nowrap;
}

#view-pre-retirement #pre-spreadsheet .ss-group-row .ss-g {
  box-sizing: border-box;
  height: var(--ss-group-row-h);
  padding: 8px 9px 7px;
  border-bottom: 1px solid #d8e3ee;
  background: #fff;
  color: var(--se-ink);
  font-size: 9.7px;
  font-weight: 850;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
}

#view-pre-retirement #pre-spreadsheet .ss-group-row .ss-g:nth-child(1) {
  background: #f3f7fc;
}
#view-pre-retirement #pre-spreadsheet .ss-group-row .ss-g:nth-child(2) {
  background: #eef9f4;
  color: #256c50;
}
#view-pre-retirement #pre-spreadsheet .ss-group-row .ss-g:nth-child(3) {
  background: #eef6ff;
  color: #2f6096;
}
#view-pre-retirement #pre-spreadsheet .ss-group-row .ss-g:nth-child(4) {
  background: #f5f1ff;
  color: #5e4da8;
}

/* Single-source row backgrounds: sticky Year/Age cells and the scrolling
   body cells MUST reference the same tokens so striping can never mismatch
   under the frozen columns on horizontal scroll (v149.348 look-item). */
:root {
  --ss-row-bg: #fff;
  --ss-row-bg-even: #fbfcfe;
  --ss-row-bg-hover: #eef6ff;
}

#view-pre-retirement #pre-spreadsheet tbody td {
  padding: 7px 9px;
  border-right: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
  background: var(--ss-row-bg);
  color: #203a58;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

#view-pre-retirement #pre-spreadsheet tbody tr:nth-child(even) td {
  background: var(--ss-row-bg-even);
}

#view-pre-retirement #pre-spreadsheet tbody tr:hover td {
  background: var(--ss-row-bg-hover);
}

#view-pre-retirement #pre-spreadsheet th:first-child,
#view-pre-retirement #pre-spreadsheet td:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
  width: var(--ss-first-col-w);
  min-width: var(--ss-first-col-w);
  background: var(--ss-row-bg);
  text-align: center;
  box-shadow: 1px 0 #edf2f7;
}

#view-pre-retirement #pre-spreadsheet th:nth-child(2),
#view-pre-retirement #pre-spreadsheet td:nth-child(2) {
  position: sticky;
  left: var(--ss-first-col-w);
  z-index: 5;
  min-width: 58px;
  background: var(--ss-row-bg);
  text-align: center;
  box-shadow: 1px 0 #e1e9f1;
}

#view-pre-retirement #pre-spreadsheet thead th:first-child,
#view-pre-retirement #pre-spreadsheet thead th:nth-child(2) {
  z-index: 7;
  background: #f5f8fc;
}

#view-pre-retirement #pre-spreadsheet tbody tr:nth-child(even) td:first-child,
#view-pre-retirement #pre-spreadsheet tbody tr:nth-child(even) td:nth-child(2) {
  background: var(--ss-row-bg-even);
}

#view-pre-retirement #pre-spreadsheet tbody tr:hover td:first-child,
#view-pre-retirement #pre-spreadsheet tbody tr:hover td:nth-child(2) {
  background: var(--ss-row-bg-hover);
}

/* Planning-tool cards */
#view-pre-retirement .planning-tool-card,
#view-pre-retirement .table-details,
#view-pre-retirement .pre-scenarios-card {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--se-line);
  border-radius: var(--se-radius);
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  box-shadow: var(--se-shadow-soft);
  overflow: hidden;
}

#view-pre-retirement .planning-tool-card[open] {
  border-color: #d6e3ef;
  box-shadow: var(--se-shadow);
}

#view-pre-retirement .planning-tool-toggle {
  min-height: 50px;
  gap: 10px;
  padding: 10px 12px;
  color: var(--se-ink);
  font-size: .78rem;
  font-weight: 820;
  letter-spacing: -.01em;
  background: rgba(255, 255, 255, .96);
}

#view-pre-retirement .planning-tool-card[open] > .planning-tool-toggle {
  border-bottom: 1px solid var(--se-line-soft);
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}

#view-pre-retirement .planning-tool-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(35, 65, 94, .025);
}

#view-pre-retirement .planning-tool-chevron {
  color: #77879d;
  opacity: .72;
}

#view-pre-retirement .planning-tool-badge {
  border: 1px solid #cbe7da;
  background: #edf9f3;
  color: var(--se-green-dark);
  font-size: .58rem;
  font-weight: 820;
}

#view-pre-retirement .planning-tool-body {
  min-width: 0;
  padding: 12px 13px 14px;
}

#view-pre-retirement .planning-tool-desc {
  margin: 0 0 11px;
  color: var(--se-muted);
  font-size: .66rem;
  line-height: 1.5;
}

#view-pre-retirement .planning-tool-body .form-field label {
  color: #66778e;
  font-size: .62rem;
  font-weight: 720;
}

#view-pre-retirement .planning-tool-body input[type="number"],
#view-pre-retirement .planning-tool-body input[type="text"],
#view-pre-retirement .planning-tool-body select {
  min-height: 35px;
  border-color: #d8e3ef;
  border-radius: 8px;
  background: #fff;
  color: var(--se-ink);
  font-size: .7rem;
  font-weight: 680;
}

#view-pre-retirement .planning-tool-body .input-prefix,
#view-pre-retirement .planning-tool-body .input-suffix {
  min-height: 35px;
  display: inline-flex;
  align-items: center;
  border-color: #d8e3ef;
  background: #f5f8fc;
  font-size: .64rem;
}

#view-pre-retirement .planning-tool-body .form-grid {
  gap: 9px;
}

/* Employer match optimizer */
#view-pre-retirement #tool-match .match-inputs {
  margin-bottom: 10px;
}

#view-pre-retirement #tool-match .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#view-pre-retirement #tool-match .match-results-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

#view-pre-retirement #tool-match .match-result-card {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--se-line-soft);
  border-radius: 9px;
  background: #f8fbfe;
}

#view-pre-retirement #tool-match .match-result-card.highlight {
  border-color: #c6e8d8;
  background: #effaf5;
}

#view-pre-retirement #tool-match .match-result-label {
  color: var(--se-muted);
  font-size: .55rem;
  font-weight: 740;
}

#view-pre-retirement #tool-match .match-result-value {
  color: var(--se-ink);
  font-size: .91rem;
  font-weight: 840;
}

#view-pre-retirement #tool-match .match-tip {
  border: 1px solid #cbe9dc;
  background: #f2fbf7;
  color: var(--se-ink-2);
  font-size: .64rem;
}

/* Goal milestones as a horizontal rail. */
#view-pre-retirement #tool-milestones .milestone-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 0;
  padding: 8px 4px 2px;
}

#view-pre-retirement #tool-milestones .milestone-list::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 25px;
  height: 2px;
  background: linear-gradient(90deg, #bde5d3, #c9d9ec);
}

#view-pre-retirement #tool-milestones .milestone-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 0 5px;
  background: transparent;
  text-align: center;
}

#view-pre-retirement #tool-milestones .milestone-check {
  width: 27px;
  height: 27px;
  margin-bottom: 4px;
  border: 2px solid #9ed5bd;
  background: #fff;
  color: var(--se-green-dark);
  font-size: .59rem;
  font-weight: 830;
  box-shadow: 0 2px 7px rgba(20, 116, 79, .09);
}

#view-pre-retirement #tool-milestones .milestone-check.done {
  border-color: var(--se-green);
  background: var(--se-green);
  color: #fff;
}

#view-pre-retirement #tool-milestones .milestone-info {
  width: 100%;
}

#view-pre-retirement #tool-milestones .milestone-target,
#view-pre-retirement #tool-milestones .milestone-value {
  color: var(--se-ink);
  font-size: .62rem;
  font-weight: 790;
  text-align: center;
}

#view-pre-retirement #tool-milestones .milestone-year {
  color: var(--se-muted);
  font-size: .55rem;
}

#view-pre-retirement #tool-milestones .milestone-empty {
  grid-column: 1 / -1;
  position: relative;
  z-index: 2;
  padding: 16px;
  border: 1px dashed #cfdce9;
  border-radius: 9px;
  background: #fafcff;
  color: var(--se-muted);
}

/* Roth Contribution Planner */
#view-pre-retirement #tool-pre-roth-contrib .v49-callout,
#view-pre-retirement #tool-pre-roth-contrib .v49-profile,
#view-pre-retirement #tool-pre-roth-contrib .prex-capacity-frame,
#view-pre-retirement #tool-pre-roth-contrib .prex-allocate-section,
#view-pre-retirement #tool-pre-roth-contrib .v49-drivers,
#view-pre-retirement #tool-pre-roth-contrib .v49-tradeoff-note,
#view-pre-retirement #tool-pre-roth-contrib .v49-crosslink,
#view-pre-retirement #tool-pre-roth-contrib .v49-footnote {
  border-color: var(--se-line) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
}

#view-pre-retirement #tool-pre-roth-contrib .v49-callout {
  background: linear-gradient(90deg, #f2fbf7, #f8fbff) !important;
  color: var(--se-ink-2) !important;
}

#view-pre-retirement #tool-pre-roth-contrib .v49-section-header,
#view-pre-retirement #tool-pre-roth-contrib .prex-section-header {
  border-bottom-color: var(--se-line-soft) !important;
}

#view-pre-retirement #tool-pre-roth-contrib .v49-title,
#view-pre-retirement #tool-pre-roth-contrib .prex-title,
#view-pre-retirement #tool-pre-roth-contrib .v49-scenarios-title {
  color: var(--se-ink) !important;
  font-weight: 820 !important;
}

#view-pre-retirement #tool-pre-roth-contrib .prex-capacity-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#view-pre-retirement #tool-pre-roth-contrib .prex-capacity-tile {
  border-color: var(--se-line) !important;
  border-radius: 9px !important;
  background: #f8fbfe !important;
}

#view-pre-retirement #tool-pre-roth-contrib .prex-capacity-total-value,
#view-pre-retirement #tool-pre-roth-contrib .prex-capacity-tile-value {
  color: var(--se-ink) !important;
  font-weight: 850 !important;
}

#view-pre-retirement #tool-pre-roth-contrib .prex-allocate-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#view-pre-retirement #tool-pre-roth-contrib .prex-bucket {
  min-width: 0;
  border-color: var(--se-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
}

#view-pre-retirement #tool-pre-roth-contrib .prex-bucket-recommend,
#view-pre-retirement #tool-pre-roth-contrib .prex-bucket-status {
  font-size: .56rem !important;
}

#view-pre-retirement #tool-pre-roth-contrib .prex-allocate-total-row,
#view-pre-retirement #tool-pre-roth-contrib .prex-projection,
#view-pre-retirement #tool-pre-roth-contrib .v49-scenarios-footnote {
  border-color: var(--se-line-soft) !important;
  background: #f8fbfe !important;
}

#view-pre-retirement #tool-pre-roth-contrib .v49-scenarios {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

#view-pre-retirement #tool-pre-roth-contrib .v49-scenario {
  min-width: 0;
  border: 1px solid var(--se-line) !important;
  border-radius: 11px !important;
  background: #fff !important;
  box-shadow: var(--se-shadow-soft) !important;
}

#view-pre-retirement #tool-pre-roth-contrib .v49-scenario.is-yours {
  border-color: #a8dfc7 !important;
  background: linear-gradient(180deg, #f3fbf7 0%, #fff 52%) !important;
  box-shadow: 0 8px 22px rgba(18, 133, 87, .08) !important;
}

#view-pre-retirement #tool-pre-roth-contrib .v49-scenario-label {
  color: var(--se-green-dark) !important;
  font-size: .6rem !important;
  font-weight: 840 !important;
  letter-spacing: .025em !important;
}

#view-pre-retirement #tool-pre-roth-contrib .v49-scenario-headline {
  color: var(--se-ink) !important;
  font-weight: 860 !important;
}

#view-pre-retirement #tool-pre-roth-contrib .v49-scenario-row {
  border-bottom-color: var(--se-line-soft) !important;
  font-size: .62rem !important;
}

#view-pre-retirement #tool-pre-roth-contrib .v49-scenario-row-val {
  color: var(--se-ink) !important;
  font-weight: 780 !important;
}

#view-pre-retirement #tool-pre-roth-contrib .v49-driver {
  border-bottom-color: var(--se-line-soft) !important;
}

/* Roth Conversion Explorer */
#view-pre-retirement #tool-pre-roth .planning-tool-body {
  padding: 13px;
}

#view-pre-retirement #tool-pre-roth .prex-section,
#view-pre-retirement #tool-pre-roth .prex-advanced,
#view-pre-retirement #tool-pre-roth #pre-roth-impact-card,
#view-pre-retirement #tool-pre-roth #pre-roth-compare-summary,
#view-pre-retirement #tool-pre-roth .roth-ex-irmaa-alert,
#view-pre-retirement #tool-pre-roth .table-scroll,
#view-pre-retirement #tool-pre-roth div[style*="background:var(--color-surface-alt)"] {
  border-color: var(--se-line) !important;
  border-radius: 11px !important;
}

#view-pre-retirement #tool-pre-roth .prex-section-header {
  margin-bottom: 9px !important;
  border-bottom-color: var(--se-line-soft) !important;
}

#view-pre-retirement #tool-pre-roth .prex-title {
  color: var(--se-ink) !important;
  font-weight: 820 !important;
}

#view-pre-retirement #tool-pre-roth .prex-num {
  background: #eef7ff !important;
  color: #2667a5 !important;
}

#view-pre-retirement #tool-pre-roth .prex-amount-wrap,
#view-pre-retirement #tool-pre-roth .prex-bracket-readout,
#view-pre-retirement #tool-pre-roth .prex-advanced,
#view-pre-retirement #tool-pre-roth .prex-impact-rows {
  border-color: var(--se-line) !important;
  background: #f8fbfe !important;
}

#view-pre-retirement #tool-pre-roth .prex-pay-option,
#view-pre-retirement #tool-pre-roth .prex-radio-chip {
  border-color: var(--se-line) !important;
  border-radius: 9px !important;
  background: #fff !important;
}

#view-pre-retirement #tool-pre-roth .prex-pay-option:has(input:checked),
#view-pre-retirement #tool-pre-roth .prex-radio-chip:has(input:checked) {
  border-color: #a8d9c2 !important;
  background: #eff9f4 !important;
}

#view-pre-retirement #tool-pre-roth #pre-roth-impact-card {
  background: linear-gradient(135deg, #f4fbf7 0%, #f6f9ff 100%) !important;
  box-shadow: var(--se-shadow-soft) !important;
}

#view-pre-retirement #tool-pre-roth .roth-ex-kpis {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#view-pre-retirement #tool-pre-roth .roth-ex-kpi {
  min-width: 0;
  padding: 11px 10px !important;
  border: 1px solid var(--se-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: var(--se-shadow-soft) !important;
}

#view-pre-retirement #tool-pre-roth .roth-ex-kpi-label {
  color: var(--se-muted) !important;
  font-size: .57rem !important;
  font-weight: 760 !important;
  line-height: 1.35 !important;
}

#view-pre-retirement #tool-pre-roth .roth-ex-kpi-value {
  color: var(--se-ink) !important;
  font-size: 1rem !important;
  font-weight: 860 !important;
}

#view-pre-retirement #tool-pre-roth .roth-ex-kpi-sub {
  color: var(--se-muted) !important;
  font-size: .54rem !important;
}

#view-pre-retirement #tool-pre-roth #pre-roth-compare-summary {
  background: #f8fbfe !important;
}

#view-pre-retirement #tool-pre-roth #pre-roth-compare-summary h4,
#view-pre-retirement #tool-pre-roth h4 {
  color: var(--se-ink) !important;
  font-weight: 830 !important;
  letter-spacing: -.012em !important;
}

#view-pre-retirement #tool-pre-roth #pre-roth-chart {
  width: 100% !important;
  max-height: 320px;
}

#view-pre-retirement #tool-pre-roth .table-scroll {
  overflow-x: auto !important;
  background: #fff;
}

#view-pre-retirement #tool-pre-roth .data-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 10px !important;
}

#view-pre-retirement #tool-pre-roth .data-table th {
  padding: 7px 8px !important;
  border-bottom: 1px solid #dce5ef !important;
  background: #f5f8fc !important;
  color: #5c6f88 !important;
  font-size: 9px !important;
  font-weight: 820 !important;
  white-space: nowrap;
}

#view-pre-retirement #tool-pre-roth .data-table td {
  padding: 7px 8px !important;
  border-bottom: 1px solid #edf2f7 !important;
  color: #243d59 !important;
  white-space: nowrap;
}

#view-pre-retirement #tool-pre-roth .data-table tbody tr:nth-child(even) td {
  background: #fbfcfe;
}

/* Compact lower tool row */
#view-pre-retirement #tool-start-vs-wait .planning-tool-body,
#view-pre-retirement #tool-strategy .planning-tool-body,
#view-pre-retirement #tool-catchup .planning-tool-body {
  padding: 11px 12px 13px;
}

#view-pre-retirement #tool-start-vs-wait .start-vs-wait-table,
#view-pre-retirement #tool-strategy .strategy-results,
#view-pre-retirement #tool-catchup .catchup-results {
  font-size: .64rem;
}

#view-pre-retirement #tool-start-vs-wait .start-vs-wait-table th,
#view-pre-retirement #tool-start-vs-wait .start-vs-wait-table td,
#view-pre-retirement #tool-catchup .catchup-table th,
#view-pre-retirement #tool-catchup .catchup-table td {
  border-color: var(--se-line-soft);
}

#view-pre-retirement #tool-strategy .strategy-results,
#view-pre-retirement #tool-catchup .catchup-limits-table,
#view-pre-retirement #tool-catchup .catchup-kpi,
#view-pre-retirement #tool-start-vs-wait .cost-summary {
  border: 1px solid var(--se-line);
  border-radius: 9px;
  background: #f8fbfe;
}

#view-pre-retirement #tool-catchup .catchup-kpi-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

/* Historical Backtest */
#view-pre-retirement #tool-pre-backtest #pre-hist-results > div {
  border-color: var(--se-line) !important;
  border-radius: 11px !important;
  background: #f8fbfe !important;
}

#view-pre-retirement #tool-pre-backtest #pre-hist-results canvas {
  width: 100% !important;
}

#view-pre-retirement #tool-pre-backtest #pre-hist-crashes {
  gap: 7px !important;
}

#view-pre-retirement #tool-pre-backtest #pre-hist-crashes > * {
  border: 1px solid var(--se-line-soft) !important;
  border-radius: 9px !important;
  background: #fff !important;
}

/* Quick year-by-year */
#view-pre-retirement .table-details {
  align-self: stretch;
}

#view-pre-retirement .table-toggle {
  min-height: 50px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--se-line-soft);
  color: var(--se-ink);
  font-size: .76rem;
  font-weight: 820;
  background: #fff;
}

#view-pre-retirement .table-details .table-scroll {
  max-height: 315px;
  overflow: auto;
}

#view-pre-retirement #pre-table {
  width: max-content;
  min-width: 100%;
  font-size: 9.5px;
}

#view-pre-retirement #pre-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 7px 8px;
  background: #f5f8fc;
  color: #60738c;
  font-size: 8.7px;
  font-weight: 820;
  white-space: nowrap;
}

#view-pre-retirement #pre-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--se-line-soft);
  color: #223d59;
  white-space: nowrap;
}

/* Saved scenarios */
#view-pre-retirement .pre-scenarios-card {
  padding: 0;
}

#view-pre-retirement .pre-scenarios-head {
  min-height: 57px;
  margin: 0;
  padding: 11px 14px;
  border-bottom: 1px solid var(--se-line-soft);
  background: linear-gradient(180deg, #fff, #fbfdff);
}

#view-pre-retirement .pre-scenarios-head .chart-title {
  margin: 0;
  color: var(--se-ink);
  font-size: .9rem;
  font-weight: 830;
}

#view-pre-retirement .pre-scenarios-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .69rem;
}

#view-pre-retirement .pre-scenarios-table th {
  padding: 8px 10px;
  border-bottom: 1px solid #dce5ef;
  background: #f5f8fc;
  color: #65768c;
  font-size: .59rem;
  font-weight: 820;
  white-space: nowrap;
}

#view-pre-retirement .pre-scenarios-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--se-line-soft);
  color: #243c58;
  font-variant-numeric: tabular-nums;
}

#view-pre-retirement .pre-scenarios-table tr.is-active td {
  background: #eff9f4;
}

#view-pre-retirement .pre-scenario-active-badge {
  border: 1px solid #bfe2d1;
  border-radius: 999px;
  background: #e8f7ef;
  color: #176746;
  font-size: .53rem;
  font-weight: 850;
}

#view-pre-retirement .pre-scenarios-empty {
  padding: 22px 14px;
  color: var(--se-muted);
  text-align: center;
}

/* Responsive fidelity: preserve all controls and cells; only reflow cards.
   Wide tables remain horizontally scrollable by design. */
@media (max-width: 1220px) {
  #view-pre-retirement .calc-layout {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 16px;
  }

  #view-pre-retirement .se-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-pre-retirement .se-hero-primary {
    grid-column: span 2;
  }

  #view-pre-retirement .kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* v149.404 (Jahn) — iPad 2-col fix (re-applied on top of v149.403). The six
     #tool-* cards live in the dedicated 2-column .planning-tools-section grid
     (v149.381). The old `grid-column: span 6` here is a leftover from the
     retired 12-column parent layout: on a 2-track grid, `span 6` forces 6
     implicit tracks and makes each card full-width, so the 2-column look
     collapsed on iPad (900–1220px range, i.e. portrait AND landscape). The
     cards must occupy exactly ONE column so two sit side by side; the base
     `auto` placement already does that, so they are removed from this override
     entirely. */
  /* v149.407 (Jahn) — Quick Year-by-Year Breakdown half-width on iPad. The
     surviving `span 6` below was the same leftover from the retired
     12-column layout: .calc-results IS a 12-track grid in this range, so
     span 6 = exactly half the page (measured 49% at 1024px, landscape iPad
     and portrait iPad Pro). The base rule already declares the correct
     full-width placement (grid-column: 1 / -1); the override is DELETED so
     the one base rule is the single source at every width. */

  #view-pre-retirement #tool-pre-roth-contrib .prex-allocate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  #view-pre-retirement .calc-container {
    padding: 20px 16px 34px;
  }

  #view-pre-retirement .calc-layout {
    grid-template-columns: 1fr;
  }

  #view-pre-retirement .calc-inputs {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  #view-pre-retirement #pre-charts-view.active {
    grid-template-columns: 1fr;
  }

  #view-pre-retirement #tool-match,
  #view-pre-retirement #tool-milestones,
  #view-pre-retirement #tool-start-vs-wait,
  #view-pre-retirement #tool-strategy,
  #view-pre-retirement #tool-catchup,
  #view-pre-retirement #tool-pre-backtest,
  #view-pre-retirement .calc-results > .table-details {
    grid-column: 1 / -1;
  }

  #view-pre-retirement #tool-pre-roth .roth-ex-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  #view-pre-retirement .calc-container {
    padding: 16px 10px 28px;
  }

  #view-pre-retirement .calc-header {
    align-items: flex-start;
    margin-bottom: 14px;
  }

  #view-pre-retirement .calc-inputs {
    grid-template-columns: 1fr;
  }

  #view-pre-retirement .calc-results {
    gap: 10px;
  }

  #view-pre-retirement .se-hero {
    grid-template-columns: 1fr;
  }

  #view-pre-retirement .se-hero-primary {
    grid-column: auto;
  }

  #view-pre-retirement .se-hero-card {
    min-height: 126px;
  }

  #view-pre-retirement .kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-pre-retirement .view-toggle-bar {
    flex-wrap: wrap;
  }

  #view-pre-retirement .view-toggle-bar .btn {
    width: 100%;
    justify-content: center;
  }

  #view-pre-retirement #pre-spreadsheet-view .spreadsheet-toolbar,
  #view-pre-retirement #pre-spreadsheet-view .ss-controls,
  #view-pre-retirement .pre-scenarios-head {
    align-items: flex-start;
  }

  #view-pre-retirement #pre-spreadsheet-view .spreadsheet-toolbar {
    flex-direction: column;
    gap: 10px;
  }

  #view-pre-retirement #pre-spreadsheet-view .ss-controls {
    grid-template-columns: 1fr;
  }

  #view-pre-retirement #pre-spreadsheet-view .ss-scroll-hint {
    justify-self: start;
  }

  #view-pre-retirement #tool-pre-roth-contrib .prex-capacity-grid,
  #view-pre-retirement #tool-pre-roth-contrib .prex-allocate-grid,
  #view-pre-retirement #tool-pre-roth-contrib .v49-scenarios,
  #view-pre-retirement #tool-pre-roth .roth-ex-kpis,
  #view-pre-retirement #tool-match .match-results-grid,
  #view-pre-retirement #tool-catchup .catchup-kpi-grid {
    grid-template-columns: 1fr !important;
  }

  #view-pre-retirement #tool-milestones .milestone-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #view-pre-retirement #tool-milestones .milestone-list::before {
    content: none;
  }

  #view-pre-retirement .pre-scenarios-card {
    overflow-x: auto;
  }

  #view-pre-retirement .pre-scenarios-table {
    min-width: 620px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v149.349 — Retirement Planner cohesion pass (engineering).
   The Savings Estimator pass (v149.347, the current family standard)
   defines the visual language; the values below mirror its tokens and
   treatments so the dash Charts/Spreadsheet tabs and the Deep Dive
   landing read as the same product. Accent color variants return —
   removed in v149.345 for positional (nth-child) fragility — now keyed
   to the stable card IDs added in this version and assigned
   SEMANTICALLY: green = balances/growth, blue = income/cash flow,
   purple = tax/RMD. Nothing hidden; copy and engine rendering untouched.
   ════════════════════════════════════════════════════════════════════ */
#dash-charts-view, #dash-spreadsheet-view, #dash-deepdive-view {
  --se-ink: #10234a; --se-ink-2: #314866; --se-muted: #728299;
  --se-line: #dfe8f2; --se-line-soft: #edf2f7;
  --se-green: #17a36b; --se-blue: #1677e8; --se-purple: #7566dc;
  --se-radius: 14px; --se-radius-lg: 18px;
  --se-shadow: 0 12px 30px rgba(19, 45, 81, .065);
  --se-shadow-soft: 0 5px 16px rgba(19, 45, 81, .05);
}

/* ── Charts tab: family card treatment ── */
#dash-charts-view .chart-card {
  position: relative;
  min-width: 0;
  border: 1px solid var(--se-line);
  border-radius: var(--se-radius-lg);
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  box-shadow: var(--se-shadow);
  overflow: hidden;
  padding: 17px 17px 13px;
}
#dash-charts-view .chart-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--se-green), #3688e8 62%, var(--se-purple));
}
/* Semantic accent variants — stable IDs only (the display-integrity
   sentinel bans positional hides; positional ACCENTS died in v149.345). */
#dash-charts-view #dash-card-networth::before,
#dash-charts-view #dash-card-totalvalue::before,
#dash-charts-view #dash-card-balancetype::before,
#dash-charts-view #dash-card-alloc::before,
#dash-charts-view #mc-fan-chart-card::before {
  background: linear-gradient(90deg, #16a34a 0%, #4fcd89 100%);
}
#dash-charts-view #dash-card-income::before,
#dash-charts-view #dash-card-spendincome::before,
#dash-charts-view #dash-card-spending::before,
#dash-charts-view #dash-healthcare-card::before {
  background: linear-gradient(90deg, #1976f3 0%, #2ec5ff 100%);
}
#dash-charts-view #dash-card-taxsummary::before,
#dash-charts-view #dash-card-taxinc::before,
#dash-charts-view #dash-card-rmd::before,
#dash-charts-view #dash-card-taxrate::before {
  background: linear-gradient(90deg, #6d50d8 0%, #9a70ec 100%);
}
#dash-charts-view .chart-title {
  margin: 1px 0 4px;
  color: var(--se-ink);
  font-size: .92rem;
  font-weight: 830;
  letter-spacing: -.018em;
}
#dash-charts-view .chart-note {
  margin: 0 0 6px;
  color: var(--se-muted);
  font-size: .67rem;
  line-height: 1.45;
}

/* ── Spreadsheet tab: family chrome ── */
#dash-spreadsheet-view .spreadsheet-card {
  min-width: 0;
  border: 1px solid var(--se-line);
  border-radius: var(--se-radius-lg);
  background: #fff;
  box-shadow: var(--se-shadow);
  overflow: hidden;
}
#dash-spreadsheet-view .spreadsheet-toolbar .chart-title {
  margin: 0;
  color: var(--se-ink);
  font-size: .94rem;
  font-weight: 830;
  letter-spacing: -.018em;
}
#dash-spreadsheet-view .spreadsheet-toolbar .btn {
  min-height: 36px;
  border-radius: 9px;
  font-weight: 760;
  box-shadow: 0 2px 8px rgba(16, 35, 74, .045);
}
#dash-spreadsheet-view .ss-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--se-line-soft);
  background: #f8fbfe;
}
#dash-spreadsheet-view .ss-years {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--se-ink);
  font-size: .7rem;
  font-weight: 800;
}
#dash-spreadsheet-view .ss-years select {
  min-height: 35px;
  min-width: 126px;
  padding: 7px 30px 7px 10px;
  border: 1px solid #d7e3ef;
  border-radius: 9px;
  background: #fff;
  color: var(--se-ink);
  font-size: .7rem;
  font-weight: 720;
}
#dash-spreadsheet-view .ss-foot-note,
#dash-spreadsheet-view .ss-scroll-hint {
  color: var(--se-muted);
  font-size: .66rem;
  line-height: 1.4;
}
#dash-spreadsheet-view .spreadsheet-table .ss-group-row .ss-g {
  color: var(--se-ink);
  font-size: 9.7px;
  font-weight: 850;
}

/* v149.350 — dd-landing rules removed with the landing layer. */

/* ════════════════════════════════════════════════════════════════════
   v149.351 — Dash Spreadsheet: mock page treatment on the REAL table.
   The approved spreadsheet mock's chrome (title hierarchy, roomy rows,
   banded group header, footer) applied to the engine's 42-column table
   as-is. Engine-truth deltas from the mock, per review: no "today's
   dollars" claim (series are nominal), no Print (deferred, logged), no
   simplified column set. The see-the-math cell affordance is retained
   and now named in the subtitle. Sticky architecture untouched — the
   roomier group row raises --ss-group-row-h at its single source.
   ════════════════════════════════════════════════════════════════════ */
#dash-spreadsheet-view { --ss-group-row-h: 36px; }
#dash-spreadsheet-view .spreadsheet-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--se-line-soft);
}
#dash-spreadsheet-view .ss-title-wrap { min-width: 0; }
#dash-spreadsheet-view .ss-subtitle {
  margin: 3px 0 0;
  color: var(--se-muted);
  font-size: .7rem;
  line-height: 1.45;
}
/* Roomier table per the mock — density change only; every column, row,
   and cell remains; horizontal scroll remains the overflow. */
#dash-spreadsheet-view .spreadsheet-table thead tr:nth-child(2) th {
  padding: 9px 10px;
  font-size: 10px;
}
#dash-spreadsheet-view .spreadsheet-table tbody td {
  padding: 9px 10px;
  font-size: 11.5px;
}
/* Group band per the mock: soft band, centered labels, span dividers. */
#dash-spreadsheet-view .ss-group-row .ss-g {
  background: #f8fbfe;
  text-align: center;
  border-left: 1px solid #e3ecf5;
}
#dash-spreadsheet-view .ss-group-row .ss-g:first-child { border-left: 0; text-align: left; }

/* v149.354 — dd-landing CSS restored (v149.334 rules) with the landing. */

.dd-actions { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 14px; }

.dd-banner { display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; border-radius: 12px; background: oklch(0.97 0.02 250); border: 1px solid oklch(0.92 0.03 250); margin-bottom: 18px; }

.dd-banner strong { font-size: 13.5px; color: var(--color-text, #17303a); }

.dd-banner span { font-size: 12px; color: var(--color-text-secondary, #4b5b62); }

.dd-sections-title { font-size: 14px; margin: 0 0 12px; }

.dd-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }

.dd-card { text-align: left; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 14px; padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 2px 8px rgba(20,40,60,.04); transition: box-shadow .15s, transform .15s; }

.dd-card:hover { box-shadow: 0 6px 18px rgba(20,40,60,.10); transform: translateY(-1px); }

.dd-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--color-text, #17303a); }

.dd-card strong { font-size: 13px; line-height: 1.3; color: var(--color-text, #17303a); }

.dd-card p { margin: 0; font-size: 11px; line-height: 1.5; color: var(--color-text-muted, #7c8b91); flex: 1; }

.dd-impact { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-primary, #1B6B6D); border-top: 1px solid var(--color-divider, #eef1f2); padding-top: 8px; }

.dd-tags { font-size: 10.5px; color: var(--color-text-secondary, #4b5b62); border: 1px solid var(--color-border, #e5e7eb); border-radius: 999px; padding: 3px 9px; align-self: flex-start; }

.dd-strip-wrap { border: 1px solid var(--color-border, #e5e7eb); border-radius: 14px; padding: 14px 16px; background: var(--color-bg, #f8fafa); margin-bottom: 18px; }

.dd-strip-wrap h4 { margin: 0 0 10px; font-size: 12px; }

.dd-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }

.dd-strip-card { text-align: left; display: flex; gap: 10px; align-items: flex-start; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 11px; padding: 12px; cursor: pointer; position: relative; }

.dd-strip-card:hover { border-color: var(--color-primary, #1B6B6D); }

.dd-strip-icon { color: var(--color-text-secondary, #4b5b62); flex-shrink: 0; margin-top: 1px; }

.dd-strip-body strong { display: block; font-size: 11.5px; margin-bottom: 3px; }

.dd-strip-body p { margin: 0; font-size: 10.5px; line-height: 1.45; color: var(--color-text-muted, #7c8b91); }

.dd-strip-link { background: oklch(0.97 0.03 160); border-color: oklch(0.90 0.05 160); }

.dd-outside { font-weight: 400; font-size: 9.5px; color: var(--color-text-muted, #93a1a6); }
/* v149.359 — the @media wrappers were lost in the v354 CSS removal, making
   these overrides unconditional: the last rule forced 1-column at every
   width (the production stacking bug). Restored as true breakpoints. */
@media (max-width: 1280px) {
  .dd-grid, .dd-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dd-grid, .dd-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .dd-grid, .dd-strip { grid-template-columns: 1fr; }
}

#dd-landing .dd-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin: -68px 0 30px;
  min-height: 48px;
  position: relative;
  z-index: 2;
}

#dd-landing .dd-actions .btn {
  min-height: 48px;
  padding: 0 24px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 750;
  letter-spacing: -.01em;
  box-shadow: none;
}

#dd-landing .dd-actions .btn-secondary {
  color: #071542;
  background: #fff;
  border: 1px solid #cfd8ea;
}

#dd-landing .dd-actions .btn-secondary:hover {
  border-color: #99a9c8;
  background: #fafcff;
}

#dd-landing .dd-actions .btn-primary {
  min-width: 220px;
  background: linear-gradient(180deg, #079454 0%, #078148 100%);
  border-color: #078148;
  box-shadow: 0 7px 16px rgba(4,126,69,.16);
}

#dd-landing .dd-banner {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-height: 108px;
  box-sizing: border-box;
  gap: 4px;
  margin: 0 0 20px;
  padding: 22px 220px 22px 88px;
  overflow: hidden;
  border: 1px solid #cbd6fb;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(248,250,255,.98) 0%, rgba(248,249,255,.96) 58%, rgba(244,247,255,.90) 100%);
}

#dd-landing .dd-banner::before {
  content: "i";
  position: absolute;
  left: 28px;
  top: 50%;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  box-sizing: border-box;
  border: 3px solid #0965e8;
  border-radius: 50%;
  color: #0965e8;
  background: #fff;
  font: 800 22px/1 Georgia, serif;
}

#dd-landing .dd-banner::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: 0;
  width: 190px;
  height: 82px;
  opacity: .78;
  background:
    linear-gradient(#aebdf3,#aebdf3) 10px 58px/12px 24px no-repeat,
    linear-gradient(#9fb2ef,#9fb2ef) 34px 43px/12px 39px no-repeat,
    linear-gradient(#91a8eb,#91a8eb) 58px 29px/12px 53px no-repeat,
    linear-gradient(#bdc8f5,#bdc8f5) 82px 51px/12px 31px no-repeat,
    linear-gradient(#9fb2ef,#9fb2ef) 106px 37px/12px 45px no-repeat,
    linear-gradient(#b6c3f3,#b6c3f3) 130px 20px/12px 62px no-repeat,
    radial-gradient(circle at 112px 32px, transparent 0 21px, #21335f 22px 27px, transparent 28px),
    linear-gradient(48deg, transparent 0 68%, #21335f 69% 75%, transparent 76%) 116px 35px/54px 48px no-repeat;
}

#dd-landing .dd-banner strong {
  color: #071542;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

#dd-landing .dd-banner span {
  color: #26375e;
  font-size: 12.5px;
  line-height: 1.55;
}

#dd-landing .dd-sections-title {
  margin: 0 0 12px;
  color: #071542;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
}

#dd-landing .dd-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}

#dd-landing .dd-card {
  --dd-accent: #079455;
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto minmax(86px, 1fr) auto auto;
  column-gap: 11px;
  row-gap: 9px;
  min-height: 228px;
  box-sizing: border-box;
  padding: 16px 15px 15px;
  overflow: hidden;
  text-align: left;
  color: #071542;
  border: 1px solid #d9dfeb;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #fefeff 100%);
  box-shadow: 0 2px 4px rgba(22,40,75,.025);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

#dd-landing .dd-card:nth-child(2) { --dd-accent: #6741d9; }

#dd-landing .dd-card:nth-child(3) { --dd-accent: #2456c8; }

#dd-landing .dd-card:nth-child(4) { --dd-accent: #ef7200; }

#dd-landing .dd-card:nth-child(5) { --dd-accent: #008b98; }

#dd-landing .dd-card:nth-child(6) { --dd-accent: #ee336d; }

#dd-landing .dd-card:nth-child(7) { --dd-accent: #eda600; }

#dd-landing .dd-card:nth-child(8) { --dd-accent: #1685e5; }

#dd-landing .dd-card:nth-child(9) { --dd-accent: #269b55; }

#dd-landing .dd-card:nth-child(10) { --dd-accent: #7f43d9; }

#dd-landing .dd-card:hover,
#dd-landing .dd-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--dd-accent) 42%, #d9dfeb);
  box-shadow: 0 12px 25px rgba(20,39,75,.10);
  outline: none;
}

#dd-landing .dd-card::after {
  content: "→";
  position: absolute;
  right: 14px;
  bottom: 16px;
  color: #071542;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

#dd-landing .dd-icon {
  grid-column: 1;
  grid-row: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff !important;
  background: var(--dd-accent) !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}

#dd-landing .dd-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.05;
}

#dd-landing .dd-card > strong {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  color: #071542;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: -.012em;
}

#dd-landing .dd-card > p {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  color: #142452;
  font-size: 11.6px;
  font-weight: 500;
  line-height: 1.55;
}

#dd-landing .dd-impact {
  grid-column: 1 / -1;
  grid-row: 3;
  padding: 0;
  border: 0;
  color: var(--dd-accent);
  font-size: 9.6px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

#dd-landing .dd-tags {
  grid-column: 1 / -1;
  grid-row: 4;
  align-self: end;
  justify-self: start;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
  padding: 5px 9px;
  overflow: hidden;
  border: 1px solid #e0e5ee;
  border-radius: 7px;
  color: #071542;
  background: #f7f8fb;
  font-size: 9.5px;
  font-weight: 650;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#dd-landing .dd-strip-wrap {
  box-sizing: border-box;
  margin: 0 0 18px;
  padding: 13px 10px 10px;
  border: 1px solid #dfe4ee;
  border-radius: 12px;
  background: #fbfcfe;
}

#dd-landing .dd-strip-wrap h4 {
  position: relative;
  margin: 0 0 10px;
  padding-left: 33px;
  color: #071542;
  font-size: 13px;
  font-weight: 800;
}

#dd-landing .dd-strip-wrap h4::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background:
    linear-gradient(#071542,#071542) 0 0/7px 7px no-repeat,
    linear-gradient(#071542,#071542) 11px 0/7px 7px no-repeat,
    linear-gradient(#071542,#071542) 0 11px/7px 7px no-repeat,
    linear-gradient(#071542,#071542) 11px 11px/7px 7px no-repeat;
  border-radius: 2px;
}

#dd-landing .dd-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

#dd-landing .dd-strip-card {
  position: relative;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 9px;
  min-height: 112px;
  box-sizing: border-box;
  padding: 14px 30px 13px 12px;
  text-align: left;
  border: 1px solid #dde3ee;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

#dd-landing .dd-strip-card::after {
  content: "→";
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #071542;
  font-size: 17px;
  font-weight: 800;
}

#dd-landing .dd-strip-card:hover,
#dd-landing .dd-strip-card:focus-visible {
  transform: translateY(-1px);
  border-color: #9eabc2;
  box-shadow: 0 7px 18px rgba(22,40,75,.08);
  outline: none;
}

#dd-landing .dd-strip-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #32426c;
  margin: 0;
}

#dd-landing .dd-strip-icon svg { width: 20px; height: 20px; }

#dd-landing .dd-strip-body strong {
  display: block;
  margin: 0 0 6px;
  color: #071542;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.35;
}

#dd-landing .dd-strip-body p {
  margin: 0;
  color: #26375e;
  font-size: 10.5px;
  line-height: 1.5;
}

#dd-landing .dd-strip-link {
  border-color: #bfe4ce;
  background: linear-gradient(135deg, #f1fbf5 0%, #e8f8ef 100%);
}

#dd-landing .dd-strip-link::after { content: "↗"; color: #078a52; }

#dd-landing .dd-strip-link .dd-strip-icon { color: #078a52; }

#dd-landing .dd-outside {
  display: block;
  margin-top: 1px;
  color: #071542;
  font-size: 9.5px;
  font-weight: 500;
}

/* v149.374 FIX: this #dd-landing block lost its @media wrapper in the v354 CSS
   removal (same bug class as the v359 note for the generic .dd-grid, but this
   #dd-landing copy was missed). Unwrapped, the final rule
   (#dd-landing .dd-grid { grid-template-columns: 1fr }) applied at EVERY width,
   and because #dd-landing .dd-grid (0-1-1) outranks the base .dd-grid 5-col rule
   (0-1-0), the Deep Dive landing stacked to one column on desktop. Restored as
   true breakpoints mirroring the working generic .dd-grid cascade. Desktop
   (>1280px) now falls through to the base 5-column grid. */
@media (max-width: 1280px) {
  #dd-landing .dd-actions { margin-top: 0; }
  #dd-landing .dd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #dd-landing .dd-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #dd-landing .dd-actions { justify-content: flex-start; flex-wrap: wrap; margin-bottom: 18px; }
  #dd-landing .dd-actions .btn-primary { min-width: 0; }
  #dd-landing .dd-banner { padding: 22px 26px 22px 78px; }
  #dd-landing .dd-banner::after { display: none; }
  #dd-landing .dd-card { min-height: 205px; }
}

@media (max-width: 900px) {
  #dd-landing .dd-grid,
  #dd-landing .dd-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  #dd-landing .dd-grid,
  #dd-landing .dd-strip { grid-template-columns: 1fr; }
}

/* v149.354 — landing cohesion (re-applied from v149.349): family surfaces. */
#dash-deepdive-view .dd-card,
#dash-deepdive-view .dd-strip-card {
  min-width: 0;
  border: 1px solid var(--se-line);
  border-radius: var(--se-radius);
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  box-shadow: var(--se-shadow-soft);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#dash-deepdive-view .dd-card:hover,
#dash-deepdive-view .dd-strip-card:hover {
  transform: translateY(-2px);
  border-color: #cfe0f0;
  box-shadow: var(--se-shadow);
}
#dash-deepdive-view .dd-banner {
  border: 1px solid var(--se-line);
  border-radius: var(--se-radius);
  background: linear-gradient(90deg, #eef6ff 0%, #f2fbf6 100%);
  box-shadow: var(--se-shadow-soft);
}

/* v149.355 — approved-mock context cards (family standard). */
#view-pre-retirement .se-ctx-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin: 14px 0; }
#view-pre-retirement .se-ctx-card { min-width: 0; border: 1px solid var(--se-line, #dfe8f2); border-radius: 14px; background: linear-gradient(180deg, #fff 0%, #fbfdff 100%); box-shadow: 0 5px 16px rgba(19,45,81,.05); padding: 14px 16px; }
#view-pre-retirement .se-ctx-kicker { font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; color: var(--se-muted, #728299); margin-bottom: 5px; }
#view-pre-retirement .se-ctx-title { font-size: .82rem; font-weight: 800; color: var(--se-ink, #10234a); margin-bottom: 4px; }
#view-pre-retirement .se-ctx-body { margin: 0; font-size: .68rem; line-height: 1.5; color: var(--se-muted, #728299); }
@media (max-width: 1100px) { #view-pre-retirement .se-ctx-row { grid-template-columns: 1fr; } }

/* ============================================================================
   DEEP DIVE FOCUS MODE — v149.356 (approved landing model)
   The landing is the navigation layer: sections render as their own content
   on card click. All sections remain in the DOM (navigation, not omission).
   ========================================================================== */
#dash-deepdive-view .planning-tool-card { display: none; }
#dash-deepdive-view.dd-focus #dd-landing { display: none; }
#dash-deepdive-view.dd-focus .planning-tool-card.dd-active { display: block; }
.dd-back { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.dd-back-title { font-weight: 650; font-size: 14px; color: var(--color-text, #17303a); }

/* v149.359 — Deep Dive landing to the approved mock: main + right rail */
#dd-landing { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
#dd-landing > .dd-actions, #dd-landing > .dd-banner, #dd-landing > .dd-sections-title, #dd-landing > .dd-grid, #dd-landing > .dd-strip-wrap, #dd-landing > #dd-context { grid-column: 1; }
/* v149.388 — the Assumptions footer spans the full landing width at the bottom. */
#dd-landing > #dd-assumptions-footer { grid-column: 1 / -1; }
#dd-landing .dd-rail { grid-column: 2; grid-row: 1 / span 8; display: flex; flex-direction: column; gap: 14px; }
.dd-rail-card { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 14px; padding: 16px; box-shadow: 0 2px 8px rgba(20,40,60,.04); }
.dd-rail-card h4 { margin: 0 0 8px; font-size: 13px; display: flex; align-items: center; gap: 7px; }
.dd-rail-card p, .dd-rail-card li { font-size: 11.5px; line-height: 1.55; color: var(--color-text-secondary, #4b5b62); }
.dd-rail-card p { margin: 0 0 6px; }
.dd-rail-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.dd-rail-card li { display: flex; justify-content: space-between; gap: 8px; }
.dd-rail-card li b { color: var(--color-text, #17303a); font-weight: 650; white-space: nowrap; }
.dd-rail-tips { background: oklch(0.98 0.02 90); border-color: oklch(0.92 0.04 90); }
@media (max-width: 1100px) { #dd-landing { grid-template-columns: 1fr; } #dd-landing .dd-rail { grid-column: 1; grid-row: auto; } }

/* v149.384 (D4) — rail refinements to the approved Deep Dive mock:
   heading icons, Plan Health status rows (engine-earned), and rail links. */
.dd-rail-card h4 { color: #071542; font-weight: 800; }
.dd-rail-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; flex: 0 0 22px; }
.dd-rail-ico svg { width: 15px; height: 15px; }
.dd-rail-ico-health { color: #0c8a4f; background: #e7f6ee; }
.dd-rail-ico-how { color: #1461de; background: #e8f0ff; }
.dd-rail-ico-tips { color: #b7791f; background: #fdf3dc; }

.dd-health-card { border-color: #d9dfeb; }
.dd-health-verdict { margin: 0 0 12px; font-size: 12px; font-weight: 750; line-height: 1.45; }
.dd-health-verdict.is-good { color: #0c8a4f; }
.dd-health-verdict.is-warn { color: #9a6a10; }
.dd-health-verdict.is-pending { color: var(--color-text-muted, #7c8b91); font-weight: 600; }

.dd-health-list { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 9px; }
/* override the generic .dd-rail-card li space-between so rows stay left-aligned */
.dd-rail-card .dd-health-row { display: grid; grid-template-columns: 18px minmax(0,1fr); justify-content: start; align-items: start; gap: 9px; font-size: 11.5px; line-height: 1.4; }
.dd-health-mark { position: relative; width: 18px; height: 18px; border-radius: 50%; display: inline-block; flex: 0 0 18px; margin-top: 1px; }
.dd-health-text { justify-self: start; text-align: left; color: #142452; font-weight: 600; }

/* good = earned green check */
.dd-health-row.is-good .dd-health-mark { background: #0c8a4f; }
.dd-health-row.is-good .dd-health-mark::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dd-health-row.is-good .dd-health-text { color: #0f2e1e; }
/* warn = amber, needs attention (dash glyph, never a false check) */
.dd-health-row.is-warn .dd-health-mark { background: #e7a417; }
.dd-health-row.is-warn .dd-health-mark::after { content: ""; position: absolute; left: 4px; top: 8px; width: 10px; height: 2px; background: #fff; border-radius: 1px; }
.dd-health-row.is-warn .dd-health-text { color: #6b4a08; }
/* pending = neutral, no simulation yet */
.dd-health-row.is-pending .dd-health-mark { background: #fff; border: 1.5px solid #c2ccdb; }
.dd-health-row.is-pending .dd-health-mark::after { content: ""; position: absolute; left: 6px; top: 6px; width: 4px; height: 4px; border-radius: 50%; background: #c2ccdb; }
.dd-health-row.is-pending .dd-health-text { color: #8a97ab; font-weight: 500; }

.dd-health-note { margin: 0; font-size: 10px; color: var(--color-text-muted, #8a97ab); font-style: italic; }

.dd-rail-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 11.5px; font-weight: 750; color: #1461de; text-decoration: none; }
.dd-rail-link:hover { text-decoration: underline; }
.dd-rail-link-tips { color: #b7791f; }

/* v149.360 — spreadsheet Expand mode + tab controls (approved mock).
   Expand gives the REAL 43-column table near-full viewport; nothing is
   hidden in either mode — horizontal scroll remains the overflow. */
.ss-controls .btn { margin-right: 2px; }
#dash-spreadsheet-view.ss-expanded .spreadsheet-card { position: fixed; inset: 14px; z-index: 1200; overflow: auto; box-shadow: 0 24px 64px rgba(10,30,50,.28); }
/* v149.397 (Jahn) — once expanded, the card is PORTALED to <body> (see the
   expand handler) so no ancestor containing-block can trap its fixed position.
   Style it in that portaled location. z-index sits above the app chrome. */
body.nm-ss-expanded-portal > #dash-spreadsheet-card {
  position: fixed; inset: 14px; z-index: 4000; overflow: auto;
  background: var(--color-surface, #fff); border-radius: 12px;
  box-shadow: 0 24px 64px rgba(10,30,50,.28); display: flex; flex-direction: column;
  /* v149.398 — the card now ALSO carries the legacy .spreadsheet-expanded
     class (single engine, one visual state), whose 100vw/100vh !important
     sizing would defeat the 14px inset here. This id-scoped rule has higher
     specificity, so auto !important wins and the inset sizing survives. */
  width: auto !important;
  height: auto !important;
}
/* v149.398 — a portaled card must sit above ALL app chrome (the legacy
   .spreadsheet-expanded z-index of 100 predates the portal and sits below
   parts of the header/nav). Applies to every card the engine portals —
   dash, pre-retirement, and budget. */
.spreadsheet-card.nm-portaled { z-index: 4000; }
/* keep the compact expanded cell sizing when portaled (mirrors the in-view rules) */
body.nm-ss-expanded-portal > #dash-spreadsheet-card .spreadsheet-table { font-size: 8.5px; }
body.nm-ss-expanded-portal > #dash-spreadsheet-card .spreadsheet-table thead th { padding: 1px 4px; font-size: 8px; }
body.nm-ss-expanded-portal > #dash-spreadsheet-card .spreadsheet-table tbody td { padding: 0 4px; font-size: 8.5px; }
body.nm-ss-expanded-portal > #dash-spreadsheet-card .spreadsheet-scroll { max-height: none; flex: 1; overflow: auto; }
#dash-spreadsheet-view.ss-expanded { position: static; }
@media print { .ss-controls, .nm-dash-sidebar, .view-toggle-bar { display: none !important; } }

/* ── v149.370 — Savings Estimator approved-mock refinements ──────────────
   New enabler elements are integrated into the existing twelve-column canvas.
   Engine visibility and behavior remain untouched. */
#view-pre-retirement #se-tools-collapse-all {
  /* v149.381: the section is now its own 2-col grid; place the collapse-all
     control full-width and right-align it (mock puts "Collapse all" at the
     top-right of the tools header). Was grid-column: 11 / -1 for the old
     12-col parent, which forced the section grid to expand to 10+ columns. */
  grid-column: 1 / -1;
  align-self: center;
  justify-self: end;
  width: auto;
  min-width: 112px;
  min-height: 32px;
  padding: 0 14px;
  margin: 4px 0 0;
  border: 1px solid var(--se-line);
  border-radius: 9px;
  background: #fff;
  color: var(--se-ink-2);
  font-size: 10px;
  font-weight: 780;
  box-shadow: var(--se-shadow-soft);
}

#view-pre-retirement .se-insight {
  /* v149.381: full-width within the section's 2-col grid (unchanged intent;
     1 / -1 now resolves against 2 columns instead of 12). */
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  margin: -2px 0 0;
  padding: 11px 14px;
  border: 1px solid #cbe9dc;
  border-radius: 11px;
  background: linear-gradient(90deg, #f1fbf6 0%, #f7fbff 100%);
  color: #315b48;
  font-size: 11px;
  line-height: 1.5;
  box-shadow: var(--se-shadow-soft);
}

#view-pre-retirement .se-insight-ico {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #d5eadf;
  border-radius: 8px;
  background: #fff;
  color: var(--se-green);
  font-size: 14px;
  font-weight: 850;
}

#view-pre-retirement .se-last-updated {
  position: absolute;
  top: 24px;
  right: 24px;
  max-width: 230px;
  padding: 9px 12px 9px 30px;
  border: 1px solid var(--se-line);
  border-radius: 10px;
  background: rgba(255,255,255,.96);
  color: var(--se-muted);
  font-size: 10px;
  font-weight: 680;
  line-height: 1.35;
  box-shadow: var(--se-shadow-soft);
}

#view-pre-retirement .se-last-updated::before {
  content: "✓";
  position: absolute;
  left: 11px;
  top: 10px;
  color: var(--se-green);
  font-weight: 900;
}

#view-pre-retirement #pre-spreadsheet-view.se-sheet-expanded {
  position: fixed;
  inset: 12px;
  z-index: 9999;
  padding: 18px;
  border: 1px solid var(--se-line);
  border-radius: 14px;
  background: #f7faff;
  overflow: auto;
  box-shadow: 0 24px 64px rgba(9,21,75,.28);
}

#view-pre-retirement #pre-spreadsheet-view.se-sheet-expanded #pre-spreadsheet-card {
  min-height: calc(100vh - 60px);
  min-height: calc(100dvh - 60px); /* v149.461 */
}

#view-pre-retirement #pre-spreadsheet-view.se-sheet-expanded .spreadsheet-scroll {
  max-height: calc(100vh - 190px);
  max-height: calc(100dvh - 190px); /* v149.461 */
}

@media (max-width: 1180px) {
  /* v149.381: the tools section is its own 2-col grid now; keep header +
     control full-width (was 1/10 and 10/-1 for the retired 12-col parent). */
  #view-pre-retirement .planning-tools-heading { grid-column: 1 / -1; }
  #view-pre-retirement #se-tools-collapse-all { grid-column: 1 / -1; justify-self: end; }
  #view-pre-retirement .se-last-updated { position: static; grid-column: 1 / -1; justify-self: end; }
}

@media (max-width: 900px) {
  #view-pre-retirement .planning-tools-heading,
  #view-pre-retirement #se-tools-collapse-all { grid-column: 1 / -1; }
  #view-pre-retirement #se-tools-collapse-all { justify-self: end; width: auto; min-width: 112px; }
  #view-pre-retirement .se-insight { font-size: 10px; }
  #view-pre-retirement #pre-spreadsheet-view.se-sheet-expanded { inset: 6px; padding: 10px; }
  /* v149.381: single-column tool stack on narrow screens (matches the mock's
     responsive collapse; the section grid drops to one column). */
  #view-pre-retirement .planning-tools-section { grid-template-columns: 1fr; }
}

/* ============================================================================
   v149.388 (Jahn) — Deep Dive & Strategies: drop the shared old-design top block.
   The KPI strip, "Scenario Inputs" summary, and "Assumptions & Limitations"
   final-year block render above EVERY dashboard sub-tab. On Overview / Charts /
   Spreadsheet they are real context, but on the redesigned Deep Dive and
   Strategies landings they are redundant clutter (those landings carry their own
   context). Hidden here only for those two sub-tabs, keyed on the container's
   data-dash-sub attribute. Scenario switching + Quick Access are reintroduced
   inside the Deep Dive landing itself (see #dd-context below).
   ========================================================================== */
#view-dashboard[data-dash-sub="dash-deepdive-view"] > .nm-dash-main #dash-kpis,
#view-dashboard[data-dash-sub="dash-deepdive-view"] #dash-kpis,
#view-dashboard[data-dash-sub="dash-deepdive-view"] #dash-scenario-summary,
#view-dashboard[data-dash-sub="dash-deepdive-view"] #dash-final-year-assumptions,
#view-dashboard[data-dash-sub="dash-deepdive-view"] #dash-quick-access-panel,
#view-dashboard[data-dash-sub="dash-deepdive-view"] #yr1-withdrawal-warn,
#view-dashboard[data-dash-sub="dash-strategies-view"] #dash-kpis,
#view-dashboard[data-dash-sub="dash-strategies-view"] #dash-scenario-summary,
#view-dashboard[data-dash-sub="dash-strategies-view"] #dash-final-year-assumptions,
#view-dashboard[data-dash-sub="dash-strategies-view"] #dash-quick-access-panel,
#view-dashboard[data-dash-sub="dash-strategies-view"] #yr1-withdrawal-warn,
/* v149.390 (Jahn) — Overview also renders its OWN richer KPI grid, ending-
   wealth breakdown, assumptions panel and strategy grid inside #dash-overview-
   view. The shared top block just duplicated the KPI cards + Quick Access above
   it ("why do I need to see it on top when I see it on the bottom"). Hide the
   shared KPI cards, Quick Access and duplicate final-year assumptions on
   Overview too; the small collapsible Scenario Inputs stays as light context. */
#view-dashboard[data-dash-sub="dash-overview-view"] #dash-kpis,
#view-dashboard[data-dash-sub="dash-overview-view"] #dash-final-year-assumptions,
#view-dashboard[data-dash-sub="dash-overview-view"] #dash-quick-access-panel,
#view-dashboard[data-dash-sub="dash-overview-view"] #yr1-withdrawal-warn,
/* v149.394 (Jahn) — the Legacy tab now has its own Quick Access in the right
   sidebar (below the Estate Snapshot), so the shared top Quick Access panel is
   redundant there. Hide it (and the duplicate KPI / final-year assumptions /
   yr1 warning) on Legacy too, matching Overview. Legacy's Scenario Inputs stays
   as light context. */
#view-dashboard[data-dash-sub="dash-legacy-view"] #dash-kpis,
#view-dashboard[data-dash-sub="dash-legacy-view"] #dash-final-year-assumptions,
#view-dashboard[data-dash-sub="dash-legacy-view"] #dash-quick-access-panel,
#view-dashboard[data-dash-sub="dash-legacy-view"] #yr1-withdrawal-warn {
  display: none !important;
}

/* ==========================================================================
   v149.391 (Jahn) — FLASH-PROOF the shared top block. The explicit per-tab hide
   rules above only fire once data-dash-sub is set to a specific value. On a fresh
   dashboard entry (e.g. clicking Deep Dive from the workspace sidebar) there is a
   window where the attribute is UNSET while the dashboard is already painted with
   the default Charts tab — so the KPI cards + Quick Access flashed visible for up
   to ~0.5s before the tab handler set the attribute and hid them.
   Fix: invert to an ALLOWLIST. The KPI cards, Quick Access and final-year
   assumptions belong ONLY to Charts and Spreadsheet (where they are real
   context). Hide them by DEFAULT — including when data-dash-sub is missing — and
   re-show them only on those two sub-tabs. This makes the correct state the
   default, so there is no unset-attribute gap for the old block to flash through,
   regardless of how the dashboard is entered. (Scenario Inputs keeps its own
   per-tab rules above: shown everywhere except Deep Dive / Strategies.) */
/* Always-visible shared content (KPI row = display:grid; final-year assumptions
   = display:block): hidden by DEFAULT (covers the unset-attribute gap), shown
   only on Charts + Spreadsheet with their true display values. */
#view-dashboard #dash-kpis,
#view-dashboard #dash-final-year-assumptions {
  display: none !important;
}
/* v149.397 (Jahn) — the shared KPI cards + final-year assumptions now show ONLY
   on Charts. Spreadsheet was removed from this allowlist: the user wants the 4
   KPI cards gone from the Spreadsheet tab (they added clutter above the table and
   were what showed on Expand). Everything stays hidden-by-default per the
   allowlist above, so Spreadsheet now shows neither the KPI row, the final-year
   assumptions, nor (via the hide rule below) the Quick Access panel. */
#view-dashboard[data-dash-sub="dash-charts-view"] #dash-final-year-assumptions {
  display: block !important;
}
#view-dashboard[data-dash-sub="dash-charts-view"] #dash-kpis {
  display: grid !important; /* .kpi-row is a grid, not flex */
}
/* v149.397 — also hide the shared Quick Access panel on Spreadsheet. */
#view-dashboard[data-dash-sub="dash-spreadsheet-view"] #dash-quick-access-panel,
#view-dashboard[data-dash-sub="dash-spreadsheet-view"] #yr1-withdrawal-warn {
  display: none !important;
}
/* #dash-quick-access-panel and #yr1-withdrawal-warn start display:none inline and
   are shown conditionally by their own JS. We only need to guarantee they stay
   hidden on the tabs that should not show them (Overview / Deep Dive /
   Strategies); the explicit per-tab hide rules above already cover Deep Dive,
   Strategies and Overview, so no inversion is needed for them here (leaving their
   JS-driven visibility intact on Charts / Spreadsheet). */

/* Deep Dive in-landing context row: Quick Access + collapsible Scenario, placed
   right under the action row (Edit Assumptions / View Overview / Run). Keeps the
   still-useful bits without the heavy old block. */
#dd-context { margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
#dd-context .dd-ctx-qa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#dd-context .dd-ctx-qa-label,
#dd-context .dd-ctx-scn-label {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #8394ad;
}
#dd-context .dd-ctx-qa-cards { display: flex; gap: 6px; flex-wrap: wrap; }
#dd-context .dd-ctx-qa-cards:empty::after {
  content: "No saved scenarios yet"; color: #9aa7bb; font-size: 11px; font-style: italic;
}
/* reuse the compact chip look for quick-access scenario buttons */
#dd-context .dd-ctx-qa-cards .qa-chip,
#dd-context .dd-ctx-qa-cards button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: 1px solid #d9dfeb; border-radius: 999px;
  background: #fff; color: #16305b; font-size: 11px; font-weight: 650; cursor: pointer;
  transition: border-color .15s, background .15s;
}
#dd-context .dd-ctx-qa-cards .qa-chip:hover,
#dd-context .dd-ctx-qa-cards button:hover { border-color: #0664e8; background: #f2f7ff; }
#dd-context .dd-ctx-scn { border: 1px solid #e2e8f2; border-radius: 10px; background: #fbfcfe; }
#dd-context .dd-ctx-scn > summary {
  cursor: pointer; list-style: none; padding: 9px 13px;
  font-size: 11px; font-weight: 750; color: #46586e; display: flex; align-items: center; gap: 8px;
}
#dd-context .dd-ctx-scn > summary::-webkit-details-marker { display: none; }
#dd-context .dd-ctx-scn > summary::before {
  content: "\25B8"; color: #8394ad; font-size: 10px; transition: transform .15s;
}
#dd-context .dd-ctx-scn[open] > summary::before { transform: rotate(90deg); }
#dd-context .dd-ctx-scn-body {
  padding: 0 13px 12px; font-size: 11px; line-height: 1.7; color: #46586e;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px 16px;
}
@media (max-width: 900px) { #dd-context .dd-ctx-scn-body { grid-template-columns: 1fr; } }

/* v149.389 (Jahn) — Quick Access relocated to the bottom of the right rail,
   under Tips. In the narrow rail the scenario chips stack full-width instead of
   flowing horizontally. Same data + click path as before. */
#dd-rail-qa .dd-rail-qa-cards { display: flex; flex-direction: column; gap: 7px; }
#dd-rail-qa .dd-rail-qa-cards:empty::after {
  content: "No saved scenarios yet"; color: #9aa7bb; font-size: 11px; font-style: italic;
}
#dd-rail-qa .dd-rail-qa-cards .qa-chip,
#dd-rail-qa .dd-rail-qa-cards button {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  padding: 8px 11px; border: 1px solid #d9dfeb; border-radius: 9px;
  background: #fff; color: #16305b; font-size: 11.5px; font-weight: 650; cursor: pointer;
  transition: border-color .15s, background .15s;
}
#dd-rail-qa .dd-rail-qa-cards .qa-chip:hover,
#dd-rail-qa .dd-rail-qa-cards button:hover { border-color: #0664e8; background: #f2f7ff; }
#dd-rail-qa .dd-rail-ico-qa { color: #b7791f; }

/* v149.389 (Jahn) — #3 Option A: contextual "← Back to Deep Dive" link atop
   Overview, shown only when the user arrived via Deep Dive's View Overview. */
.ov-back-deepdive {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 14px; padding: 6px 12px;
  border: 1px solid #cddaf0; border-radius: 999px;
  background: #f2f7ff; color: #0664e8; font-size: 12px; font-weight: 650; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ov-back-deepdive:hover { border-color: #0664e8; background: #e6f0ff; }
.ov-back-deepdive[hidden] { display: none; }

/* v149.393 (Jahn) — Overview bottom Quick Access + Assumptions footer. */
#ov-qa { margin-top: 16px; }
#ov-qa .ov-qa-cards { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
#ov-qa .ov-qa-cards:empty::after { content: "No saved scenarios yet"; color: #9aa7bb; font-size: 12px; font-style: italic; }
#ov-qa .ov-qa-cards .qa-chip, #ov-qa .ov-qa-cards button {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border: 1px solid #d9dfeb; border-radius: 999px; background: #fff; color: #16305b;
  font-size: 12px; font-weight: 650; cursor: pointer; transition: border-color .15s, background .15s;
}
#ov-qa .ov-qa-cards .qa-chip:hover, #ov-qa .ov-qa-cards button:hover { border-color: #0664e8; background: #f2f7ff; }
#ov-assumptions-footer { margin-top: 16px; }
#ov-assumptions-footer:empty { display: none; }

/* v149.393 (Jahn) — Legacy sidebar Quick Access (below Estate Snapshot) +
   full-width Assumptions footer at the bottom of the Legacy tab. */
#dash-legacy-view .nm-legacy-qa { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border, #e5e7eb); }
#dash-legacy-view .nm-legacy-qa h3 { margin: 0 0 10px; font-size: 13px; }
#dash-legacy-view .nm-legacy-qa-cards { display: flex; flex-direction: column; gap: 7px; }
#dash-legacy-view .nm-legacy-qa-cards:empty::after { content: "No saved scenarios yet"; color: #9aa7bb; font-size: 11px; font-style: italic; }
#dash-legacy-view .nm-legacy-qa-cards .qa-chip, #dash-legacy-view .nm-legacy-qa-cards button {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; padding: 8px 11px;
  border: 1px solid #d9dfeb; border-radius: 9px; background: #fff; color: #16305b;
  font-size: 11.5px; font-weight: 650; cursor: pointer; transition: border-color .15s, background .15s;
}
#dash-legacy-view .nm-legacy-qa-cards .qa-chip:hover, #dash-legacy-view .nm-legacy-qa-cards button:hover { border-color: #0664e8; background: #f2f7ff; }
#dash-legacy-view .nm-legacy-assumptions-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border, #e6ebf3); }
#dash-legacy-view .nm-legacy-assumptions-footer:empty { display: none; }

/* "Assumptions & Limitations" moved to the BOTTOM of the Deep Dive page. */
#dd-assumptions-footer {
  margin: 22px 0 4px; padding-top: 16px; border-top: 1px solid #e6ebf3;
}


/* ── v149.433 — pre-run composition (Jahn's approved mock) ─────────────── */
#tool-post-compare .cnr-prerun-wrap { display: grid; gap: 16px; }
#tool-post-compare .cnr-assume-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#tool-post-compare .cnr-assume-hd h4 { margin: 0; font-size: 15px; font-weight: 750; color: var(--cmp-ink); }
#tool-post-compare .cnr-assume-hd-sub { font-weight: 500; color: var(--color-text-muted); font-size: 12.5px; }
#tool-post-compare .cnr-prerun-assumes { display: block; border: 0; background: transparent; padding: 0; }
#tool-post-compare .cnr-prerun-chips { display: flex; flex-wrap: wrap; gap: 10px; }
#tool-post-compare .cnr-assume-card { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--cmp-line); border-radius: 10px; background: var(--color-surface, #fff); }
#tool-post-compare .cnr-assume-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--color-primary); background: var(--color-primary-bg, #eef4fb); }
#tool-post-compare .cnr-assume-txt { display: flex; flex-direction: column; line-height: 1.25; }
#tool-post-compare .cnr-assume-txt b { font-size: 13px; color: var(--cmp-ink); font-weight: 700; }
#tool-post-compare .cnr-assume-txt small { font-size: 11px; color: var(--color-text-secondary); }
#tool-post-compare .cnr-customize { border: 1px solid var(--cmp-line); border-radius: 14px; background: var(--color-surface, #fff); padding: 18px 18px 20px; display: grid; gap: 14px; }
#tool-post-compare .cnr-customize-title { margin: 0; font-size: 15px; font-weight: 750; color: var(--cmp-ink); }
#tool-post-compare .cnr-customize-sub { margin: -8px 0 0; font-size: 12.5px; color: var(--color-text-secondary); }
#tool-post-compare .cnr-cust-grid { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 14px; align-items: stretch; }
#tool-post-compare .cnr-rank-box { border: 1px solid var(--cmp-line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
#tool-post-compare .cnr-rank-label { font-size: 12px; font-weight: 700; color: var(--cmp-ink); }
#tool-post-compare .cnr-rank-select { width: 100%; padding: 9px 10px; border: 1px solid var(--cmp-line); border-radius: 9px; font-size: 13px; color: var(--cmp-ink); background: var(--color-surface, #fff); }
#tool-post-compare .cnr-engine-info { display: flex; gap: 12px; align-items: flex-start; border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border)); border-radius: 10px; background: var(--color-primary-bg, #f2f7fd); padding: 13px 15px; }
#tool-post-compare .cnr-engine-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: var(--color-primary); background: var(--color-surface, #fff); border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border)); }
#tool-post-compare .cnr-engine-txt b { display: block; font-size: 13px; color: var(--color-primary); margin-bottom: 4px; }
#tool-post-compare .cnr-engine-txt p { margin: 0 0 4px; font-size: 12.5px; line-height: 1.5; color: var(--color-text-secondary); }
#tool-post-compare .cnr-customize .cnr-empty { border-style: dashed; background: transparent; }
@media (max-width: 860px) { #tool-post-compare .cnr-cust-grid { grid-template-columns: 1fr; } }

/* v149.434-prerun-cleanup — targeted polish for the first Strategies page
   (Run Strategies pre-run state only). Design-only; no content, engine, or
   behavior changes. Keeps the approved structure and simply tightens layout,
   hierarchy, spacing, and visual treatment to match the reviewed mock. */
#dash-strategies-view #tool-post-compare {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#dash-strategies-view #tool-post-compare > #post-compare-results { order: 1; margin-top: 0; }
#dash-strategies-view #tool-post-compare > .cnr-prerun-wrap { 
  order: 2;
  border: 1px solid var(--cmp-line);
  border-top: 3px solid var(--color-primary);
  border-radius: 16px;
  background: var(--color-surface, #fff);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
  padding: 18px 18px 20px;
}
#dash-strategies-view #tool-post-compare > .cmp-r-s9 {
  order: 3;
  margin: 0;
  background: #fffaf0;
  border: 1px solid #f1d9a4;
  color: #7a5616;
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 12.5px;
  line-height: 1.55;
}
#dash-strategies-view #tool-post-compare > .cnr-saved {
  order: 4;
  margin-top: 0;
  border: 1px solid var(--cmp-line);
  border-radius: 12px;
  background: var(--color-surface, #fff);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
  padding: 0 16px;
}
#dash-strategies-view #tool-post-compare > .cnr-saved > summary {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--cmp-ink);
  padding: 0;
  list-style: none;
}
#dash-strategies-view #tool-post-compare > .cnr-saved > summary::-webkit-details-marker { display: none; }
#dash-strategies-view #tool-post-compare > .cnr-saved > summary::after {
  content: '\203A';
  font-size: 22px;
  line-height: 1;
  color: var(--cmp-muted);
  transition: transform .18s ease;
}
#dash-strategies-view #tool-post-compare > .cnr-saved[open] > summary::after { transform: rotate(90deg); }

#tool-post-compare .cnr-prerun-wrap { gap: 18px; }
#tool-post-compare .cnr-assume-hd {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cmp-soft-line);
}
#tool-post-compare .cnr-assume-hd h4 { font-size: 16px; letter-spacing: -.01em; }
#tool-post-compare .cnr-edit-inputs {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  font-weight: 700;
}
#tool-post-compare .cnr-prerun-chips { gap: 12px; }
#tool-post-compare .cnr-assume-card {
  min-width: 148px;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}
#tool-post-compare .cnr-assume-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
#tool-post-compare .cnr-assume-txt b { font-size: 13.5px; }
#tool-post-compare .cnr-assume-txt small { font-size: 11.5px; }

#tool-post-compare .cnr-customize {
  gap: 16px;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
#tool-post-compare .cnr-customize-title { font-size: 16px; letter-spacing: -.01em; }
#tool-post-compare .cnr-customize-sub { margin: -6px 0 0; }
#tool-post-compare .cnr-cust-grid { 
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: 16px;
}
#tool-post-compare .cnr-rank-box {
  padding: 14px 15px 15px;
  border-radius: 12px;
  background: #fff;
}
#tool-post-compare .cnr-rank-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}
#tool-post-compare .cnr-rank-label::after {
  content: '\24D8';
  font-size: 12px;
  color: var(--cmp-muted);
  font-weight: 500;
}
#tool-post-compare .cnr-rank-select {
  min-height: 46px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 14px;
}
#tool-post-compare .cnr-engine-info {
  min-height: 110px;
  padding: 16px 18px;
  border-radius: 12px;
  background: #f7faff;
}
#tool-post-compare .cnr-engine-ico {
  width: 44px;
  height: 44px;
}
#tool-post-compare .cnr-engine-txt b { font-size: 13.5px; margin-bottom: 5px; }
#tool-post-compare .cnr-engine-txt p { margin: 0 0 5px; }

#tool-post-compare .cnr-customize .cnr-empty {
  min-height: 240px;
  padding: 42px 24px 38px;
  border-radius: 14px;
  border-width: 2px;
  border-color: #d6e6ff;
  background: linear-gradient(180deg, rgba(245, 249, 255, .75) 0%, rgba(255,255,255,.9) 100%);
}
#tool-post-compare .cnr-empty-ico {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
#tool-post-compare .cnr-empty-title {
  font-size: 18px;
  font-weight: 780;
  letter-spacing: -.015em;
}
#tool-post-compare .cnr-empty-sub {
  font-size: 13px;
  line-height: 1.6;
  max-width: 520px;
}
#tool-post-compare .cnr-prerun-run {
  min-height: 44px;
  padding: 0 22px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

@media (max-width: 980px) {
  #tool-post-compare .cnr-cust-grid { grid-template-columns: 1fr; }
  #tool-post-compare .cnr-engine-info { min-height: 0; }
}
@media (max-width: 720px) {
  #dash-strategies-view #tool-post-compare > .cnr-prerun-wrap { padding: 15px 14px 16px; }
  #tool-post-compare .cnr-assume-hd { align-items: flex-start; flex-direction: column; }
  #tool-post-compare .cnr-edit-inputs { min-height: 36px; }
  #tool-post-compare .cnr-prerun-chips { gap: 10px; }
  #tool-post-compare .cnr-assume-card { min-width: calc(50% - 5px); }
  #tool-post-compare .cnr-customize .cnr-empty { min-height: 220px; padding: 34px 18px; }
}

/* v149.438 (MAJ-09) — marketing nav responsive: desktop shows inline links,
   <=900px collapses to the hamburger (cures both the <=680px no-affordance
   state and the 681-900px two-line wrap the QA report measured at 768px). */
.nm-v2-menu-btn { display: none; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 6px 8px; color: var(--color-text); cursor: pointer; align-items: center; }
.nm-v2-mobilelinks { display: none; }
@media (max-width: 900px) {
  .nm-v2-navlinks { display: none; }
  .nm-v2-menu-btn { display: inline-flex; }
  .nm-v2-mobilelinks { display: flex; flex-direction: column; gap: 2px; padding: 8px 16px 12px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
  .nm-v2-mobilelinks[hidden] { display: none; }
  .nm-v2-mobilelinks a { padding: 10px 8px; border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; font-weight: 600; }
}

/* v149.438 (MAJ-07) — visible invalid state for numeric inputs holding
   non-numeric text (validity.badInput); paired with the change-time
   rejection so display always matches computation. */
input.nm-input-invalid { border-color: var(--color-error) !important; box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-error) 22%, transparent); }

/* v149.439 (MIN-10) — the JS-built budget frequency select clipped to "Mo";
   give it room for its longest option. */
.budget-freq-select { min-width: 96px; }

/* v149.442 (MIN-10) — SE numeric inputs: explicit horizontal padding so
   typed values are never clipped at the field edge (QA: "8" cut at left). */
#view-pre-retirement input[type="number"] { padding-left: 10px; padding-right: 8px; }

/* v149.442 (MIN-10) — disabled social sign-in buttons LOOK disabled; the
   Coming Soon badge previously sat on an enabled-looking button. */
.auth-social-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ==========================================================================
   v149.444 — QA design polish (design-only, no engine / PlanState changes)
   Design brief items addressed here: withdrawal-order discoverability and
   accessibility follow-up for helper-text contrast + large-number resilience.
   ========================================================================== */

/* SUG-05 — make the existing withdrawal-order comparison read as the same
   "Smart Withdrawal Strategies" feature named on the public surface. The
   comparison itself and every value remain the existing sealed-run output. */
#dash-overview-view .ov-withdrawal-panel {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  box-shadow: 0 7px 20px rgba(15, 35, 70, .055);
}
#dash-overview-view .ov-withdrawal-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--color-primary);
}
#dash-overview-view .ov-withdrawal-panel .ov-panel-head {
  padding-top: 17px;
}
#dash-overview-view .ov-withdrawal-panel .ov-panel-head h3 {
  color: var(--color-text-primary);
  font-weight: 820;
  letter-spacing: -.018em;
}
#dash-overview-view .ov-toplinks .btn {
  min-height: 34px;
  border-radius: 9px;
  font-weight: 700;
}

/* Accessibility follow-up — helper/muted text on the dense planning surfaces
   uses the stronger secondary token. This improves readability without
   changing the app/marketing palette ruling or any semantic color. */
#view-dashboard .chart-note,
#view-dashboard .ov-note,
#view-dashboard .ov-kpi-sub,
#view-dashboard .dd-card p,
#view-dashboard .dd-strip-body p,
#view-dashboard .dd-outside,
#view-dashboard .dd-rail-card p,
#view-dashboard .nm-legacy-disclaimer,
#view-dashboard .nm-legacy-context-kicker,
#view-dashboard .nm-legacy-context dt,
#view-pre-retirement .chart-note,
#view-pre-retirement .se-ctx-body,
#view-pre-retirement .kpi-draw-sublabel,
#view-pre-retirement .field-hint,
#view-pre-retirement .wz-hint {
  color: var(--color-text-secondary);
}

/* Large-number rule: preserve the engine's exact display text. Values shrink
   fluidly where useful, wrap as a last resort, and never clip out of a card. */
.kpi-value,
.kpi-draw-value,
.scenario-card-kpi-value,
.catchup-kpi-value,
.roth-ex-kpi-value,
.st-kpi-value,
#dash-overview-view .ov-kpi-value,
#dash-legacy-view .nm-legacy-context dd {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  font-variant-numeric: tabular-nums;
}
#dash-overview-view .ov-kpi-value {
  font-size: clamp(17px, 1.45vw, 24px);
}
#dash-legacy-view .nm-legacy-context dl > div {
  min-width: 0;
}
#dash-legacy-view .nm-legacy-context dd {
  text-align: right;
}

@media (max-width: 760px) {
  #dash-overview-view .ov-toplinks {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }
  #dash-overview-view .ov-toplinks .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================================
   WORKSPACE / DASHBOARD REFINEMENT — v149.450 DESIGN HANDOFF
   Design-only implementation of the approved two-state Workspace mock.
   Existing IDs, routes, renderers, plan-state logic, charts, metrics and
   actions are preserved. This block changes hierarchy and stage identity only.
   ========================================================================== */
#view-workspace .nm-dash-head-copy { min-width: 0; }
#view-workspace .nm-dash-subrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
#view-workspace .nm-dash-head h1 {
  font-size: 29px;
  line-height: 1.05;
}
#view-workspace .nm-dash-head p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}
#view-workspace .nm-dash-subrow .nm-ws-modes {
  order: 0;
  flex: 0 0 auto;
}
#view-workspace .nm-ws-mode-btn {
  min-width: 84px;
  min-height: 32px;
}
#view-workspace.nm-ws-stage-growth .nm-ws-mode-btn[data-ws-stage-btn="growth"].active {
  color: #087b49;
  background: #e7f7ee;
  box-shadow: 0 2px 6px rgba(10, 155, 91, .12);
}
#view-workspace.nm-ws-stage-retirement .nm-ws-mode-btn[data-ws-stage-btn="retirement"].active {
  color: #075fd2;
  background: #e9f2ff;
  box-shadow: 0 2px 6px rgba(6, 100, 232, .10);
}

/* Make the selected planning world unmistakable without removing access to
   the other world. The non-selected group remains visible, simply quieter. */
#view-workspace .nm-dash-nav .nm-nav-section {
  padding: 6px 4px 7px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: opacity .16s ease, background .16s ease, border-color .16s ease;
}
#view-workspace.nm-ws-stage-growth .nm-nav-stage-savings {
  background: #f2fbf6;
  border-color: #d8efe4;
}
#view-workspace.nm-ws-stage-growth .nm-nav-stage-savings .nm-nav-section-label { color: #358667; }
#view-workspace.nm-ws-stage-growth .nm-nav-stage-retirement { opacity: .64; }
#view-workspace.nm-ws-stage-retirement .nm-nav-stage-retirement {
  background: #f2f7ff;
  border-color: #dbe8fb;
}
#view-workspace.nm-ws-stage-retirement .nm-nav-stage-retirement .nm-nav-section-label { color: #4776b5; }
#view-workspace.nm-ws-stage-retirement .nm-nav-stage-savings { opacity: .64; }
#view-workspace .nm-nav-general { opacity: .82; }
#view-workspace .nm-nav-stage-savings:hover,
#view-workspace .nm-nav-stage-retirement:hover { opacity: 1; }

/* Stronger, easier-to-scan typography for both pre-retirees and retirees. */
#view-workspace .nm-kpi-card h2,
#view-workspace .nm-panel h2 {
  font-size: 13px;
  font-weight: 800;
}
#view-workspace .nm-kpi-card > strong,
#view-workspace .nm-confidence-row strong {
  font-size: 30px;
  font-weight: 820;
}
#view-workspace .nm-kpi-card > small,
#view-workspace .nm-confidence-row small {
  font-size: 10.75px;
  line-height: 1.4;
}
#view-workspace .nm-kpi-context {
  font-size: 10px;
  line-height: 1.45;
}
#view-workspace .nm-dash-kpis { gap: 13px; }
#view-workspace .nm-kpi-card {
  min-height: 174px;
  padding: 17px 18px 13px;
  border-radius: 15px;
}
#view-workspace .nm-kpi-card::before { width: 4px; }
#view-workspace #workspace-kpis-growth .nm-kpi-card:nth-child(3) > strong {
  color: #078d50;
  font-size: 38px;
}

/* Roomier dashboard panels: same content and live wiring, clearer hierarchy. */
#view-workspace .nm-panel {
  padding: 18px;
  border-radius: 15px;
}
#view-workspace .nm-dash-middle {
  grid-template-columns: minmax(0, 1.22fr) minmax(330px, .98fr);
  gap: 13px;
  margin-top: 13px;
}
#view-workspace .nm-portfolio-panel,
#view-workspace .nm-recommend-panel { min-height: 286px; }
#view-workspace .nm-portfolio-panel > small { font-size: 10px; }
#view-workspace .nm-portfolio-panel > strong {
  margin: 1px 0 10px;
  font-size: 27px;
}
#view-workspace .nm-donut {
  width: 124px;
  height: 124px;
  flex-basis: 124px;
}
#view-workspace .nm-donut::after { inset: 33px; }
#view-workspace .nm-portfolio-body { gap: 28px; }
#view-workspace .nm-portfolio-body li {
  padding: 7px 0;
  font-size: 10.5px;
}
#view-workspace .nm-portfolio-body li small { font-size: 9.5px; }
#view-workspace .nm-portfolio-body li b { font-size: 10.5px; }
#view-workspace .nm-recommend-list { gap: 9px; }
#view-workspace .nm-recommend-list > a {
  min-height: 46px;
  grid-template-columns: 36px minmax(0, 1fr) 14px;
  padding: 9px 10px;
}
#view-workspace .nm-recommend-list i { width: 34px; height: 34px; }
#view-workspace .nm-recommend-list b { font-size: 11px; }
#view-workspace .nm-recommend-list small { font-size: 9.7px; line-height: 1.35; }
#view-workspace .nm-view-link { font-size: 10.5px; }

/* Retirement layout: four outcome cards, portfolio/next-steps pair, then two
   charts plus Recent Plans. This is the approved retiree information order. */
#view-workspace.nm-ws-stage-retirement:not(.nm-ws-stated) .nm-dash-bottom {
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  gap: 13px;
  margin-top: 13px;
}
#view-workspace.nm-ws-stage-retirement:not(.nm-ws-stated) .nm-ws-charts-col { gap: 13px; }
#view-workspace.nm-ws-stage-retirement:not(.nm-ws-stated) .nm-ws-chart-card,
#view-workspace.nm-ws-stage-retirement:not(.nm-ws-stated) .nm-plans-panel { min-height: 252px; }
#view-workspace.nm-ws-stage-retirement:not(.nm-ws-stated) .nm-ws-chart { height: 126px; }

/* Savings layout: Projected Savings leads. Row two is trajectory + next steps;
   row three is Contributions + Recent Plans + Savings Snapshot. */
@media (min-width: 1101px) {
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-dash-main {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 13px;
  }
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-dash-head,
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) #workspace-kpis-growth,
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) #workspace-growth-hint { grid-column: 1 / -1; }
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-ws-chart-card:nth-child(1) {
    grid-column: 1 / 9;
    grid-row: 4;
    min-height: 292px;
  }
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-ws-chart-card:nth-child(1) .nm-ws-chart { height: 135px; }
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-recommend-panel {
    grid-column: 9 / 13;
    grid-row: 4;
    min-height: 292px;
  }
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-ws-chart-card:nth-child(2) {
    grid-column: 1 / 5;
    grid-row: 5;
    min-height: 243px;
  }
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-plans-panel {
    grid-column: 5 / 9;
    grid-row: 5;
    min-height: 243px;
  }
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-portfolio-panel {
    grid-column: 9 / 13;
    grid-row: 5;
    min-height: 243px;
  }
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-portfolio-panel .nm-portfolio-body {
    gap: 18px;
  }
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-portfolio-panel .nm-donut {
    width: 112px;
    height: 112px;
    flex-basis: 112px;
  }
  #view-workspace.nm-ws-stage-growth:not(.nm-ws-stated) .nm-portfolio-panel .nm-donut::after { inset: 30px; }
}

/* Savings scenarios do not have a Monte Carlo confidence value. Keep the
   same row links/data but suppress that irrelevant column in Savings mode. */
#view-workspace.nm-ws-stage-growth .nm-plan-table .head,
#view-workspace.nm-ws-stage-growth .nm-plan-table #workspace-plan-rows > a {
  grid-template-columns: minmax(140px, 1.6fr) minmax(72px, .8fr) minmax(96px, .9fr);
}
#view-workspace.nm-ws-stage-growth .nm-plan-table .head > span:nth-child(3),
#view-workspace.nm-ws-stage-growth .nm-plan-table #workspace-plan-rows > a > span:nth-child(3) { display: none; }

/* More legible table/chart detail without changing any data. */
#view-workspace .nm-plan-table .head { font-size: 9.4px; }
#view-workspace .nm-plan-table #workspace-plan-rows > a { font-size: 10.5px; }
#view-workspace .nm-plan-table #workspace-plan-rows > a b { font-size: 10.5px; }
#view-workspace .nm-plan-wealth { font-size: 10.5px; }
#view-workspace .nm-plan-confidence { font-size: 9px; }
#view-workspace .nm-ws-chart-meta { font-size: 9.5px; }
#view-workspace .nm-ws-chart-legend li { font-size: 9px; }
#view-workspace .nm-ws-chart-legend li b { font-size: 8.8px; }
#view-workspace .nm-ws-chart-card .nm-kpi-context { font-size: 9.25px; }

@media (max-width: 1100px) {
  #view-workspace .nm-dash-subrow { align-items: flex-start; flex-direction: column; gap: 8px; }
  #view-workspace.nm-ws-stage-retirement:not(.nm-ws-stated) .nm-dash-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  #view-workspace .nm-dash-head-copy { width: 100%; }
  #view-workspace .nm-dash-subrow { width: 100%; }
  #view-workspace .nm-dash-subrow .nm-ws-modes { align-self: flex-start; }
}

[data-theme="dark"] #view-workspace.nm-ws-stage-growth .nm-nav-stage-savings,
[data-theme="dark"] #view-workspace.nm-ws-stage-retirement .nm-nav-stage-retirement {
  background: var(--color-primary-bg);
  border-color: var(--color-border);
}

/* ============================================================================
   v149.473 — WORKSPACE DASHBOARD RESPONSIVE COLLAPSE (iPhone report, 7/24)
   Root cause: the workspace shell was a desktop-only grid — 270px sidebar
   column, 4-across KPIs, and .nm-dash-middle with a HARD minmax(330px, .92fr)
   second column. No @media rule anywhere touched these, so on a ~390px phone
   viewport the middle grid could not satisfy its 330px minimum, the track
   overflowed, and the "Planning Next Steps" panel painted OVER the shrunk
   Portfolio Snapshot (screenshot on record). This block is the missing
   responsive treatment: one column at phone widths, sidebar nav becomes a
   horizontal scroll strip. Scoped to #view-workspace — the only .nm-dash-shell
   in the markup — matching the existing override pattern above.
   ========================================================================== */
@media (max-width: 900px) {
  #view-workspace .nm-dash-shell { grid-template-columns: 1fr; min-height: 0; border-radius: 18px; }
  #view-workspace .nm-dash-sidebar {
    border-right: 0;
    border-bottom: 1px solid #e5ebf3;
    padding: 12px 14px 8px;
  }
  #view-workspace .nm-dash-brand { padding: 0 4px 10px; font-size: 22px; }
  #view-workspace .nm-dash-brand svg { width: 26px; }
  #view-workspace .nm-dash-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  #view-workspace .nm-dash-nav a { flex: 0 0 auto; padding: 9px 12px; font-size: 13px; white-space: nowrap; }
  #view-workspace .nm-dash-nav .nm-nav-section { flex: 0 0 auto; }
  #view-workspace .nm-dash-help { display: none; } /* support entry remains via Profile & Settings; the card's column placement has no honest home in the strip layout */
  #view-workspace .nm-dash-main { padding: 16px 14px 20px; }
  #view-workspace .nm-dash-head { flex-wrap: wrap; gap: 10px; }
  #view-workspace .nm-dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #view-workspace .nm-dash-middle { grid-template-columns: 1fr; } /* kills the 330px hard min — the overlap's root cause */
  #view-workspace .nm-dash-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  #view-workspace .nm-dash-kpis { grid-template-columns: 1fr; }
  #view-workspace .nm-kpi-card { min-height: 0; }
  #view-workspace .nm-portfolio-body { flex-wrap: wrap; justify-content: center; gap: 18px; }
  #view-workspace .nm-recommend-panel > h2 { padding-right: 96px; }
}

/* v149.502-design-step5 — literal approved-mock treatment, markup/CSS only */
#view-planner-wizard [data-wiz-step="5"].wz5-literal {
  --wz5-green:#079b50;
  --wz5-navy:#09154b;
  --wz5-text:#233052;
  --wz5-muted:#66758e;
  --wz5-line:#dde4ed;
  --wz5-soft:#f8fafc;
}
#view-planner-wizard .wz5-summary {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:-2px 0 18px;
  border:1px solid var(--wz5-line);
  border-radius:13px;
  background:#fff;
  overflow:hidden;
}
#view-planner-wizard .wz5-summary-item {
  min-height:86px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px 18px;
}
#view-planner-wizard .wz5-summary-item + .wz5-summary-item { border-left:1px solid #e8edf3; }
#view-planner-wizard .wz5-icon {
  width:36px;height:36px;flex:0 0 36px;border-radius:10px;background:#eaf7ef;position:relative;
}
#view-planner-wizard .wz5-icon::before {
  content:"";position:absolute;inset:9px;border:2px solid var(--wz5-green);border-radius:5px;
}
#view-planner-wizard .wz5-heart::after { content:"♥"; position:absolute; inset:0; display:grid; place-items:center; color:var(--wz5-green); font-size:15px; }
#view-planner-wizard .wz5-calendar::after { content:"▦"; position:absolute; inset:0; display:grid; place-items:center; color:var(--wz5-green); font-size:15px; font-weight:700; }
#view-planner-wizard .wz5-users::after { content:"◉"; position:absolute; inset:0; display:grid; place-items:center; color:var(--wz5-green); font-size:16px; }
#view-planner-wizard .wz5-stack::after { content:"≡"; position:absolute; inset:0; display:grid; place-items:center; color:var(--wz5-green); font-size:18px; font-weight:800; }
#view-planner-wizard .wz5-shield::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:var(--wz5-green); font-size:15px; font-weight:800; }
#view-planner-wizard .wz5-tip-icon::after { content:"?"; position:absolute; inset:0; display:grid; place-items:center; color:var(--wz5-green); font-size:14px; font-weight:800; }
#view-planner-wizard .wz5-summary-label,.wz5-summary-sub { display:block; color:var(--wz5-muted); }
#view-planner-wizard .wz5-summary-label { font-size:11.5px; margin-bottom:4px; }
#view-planner-wizard .wz5-summary-value { display:block; color:var(--wz5-navy); font-size:14.5px; line-height:1.25; margin-bottom:3px; }
#view-planner-wizard .wz5-summary-sub { font-size:10.5px; }
#view-planner-wizard .wz5-layout { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:18px; align-items:start; }
#view-planner-wizard .wz5-main { min-width:0; }
#view-planner-wizard .wz5-aside { position:sticky; top:18px; }
#view-planner-wizard .wz5-card { padding:18px 18px 16px; border-radius:14px; box-shadow:none; }
#view-planner-wizard .wz5-card h2::before { display:none !important; }
#view-planner-wizard .wz5-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
#view-planner-wizard .wz5-card-titlewrap { display:flex; align-items:flex-start; gap:11px; min-width:0; }
#view-planner-wizard .wz5-card-titles h2 { margin:1px 0 3px; font-size:14.5px; color:var(--wz5-navy); }
#view-planner-wizard .wz5-card-sub { margin:0; color:var(--wz5-muted); font-size:10.8px; line-height:1.45; }
#view-planner-wizard .wz5-model-toggle { margin-top:3px; flex:0 0 auto; }
#view-planner-wizard .wz5-model-toggle .wz-switch-label { font-size:10.5px; }
#view-planner-wizard .wz5-exp-head,.wz5-exp-row { display:grid; grid-template-columns:2.15fr .9fr 1fr 1.55fr 1.1fr; gap:12px; align-items:center; }
#view-planner-wizard .wz5-exp-head { min-height:32px; padding:0 6px 7px; border-bottom:1px solid #e5eaf0; color:#4d5c76; font-size:9.8px; font-weight:760; }
#view-planner-wizard .wz5-exp-row { padding:10px 6px; border-bottom:1px solid #edf1f5; }
#view-planner-wizard .wz5-exp-row:last-of-type { border-bottom:0; }
#view-planner-wizard .wz5-phase strong { display:block; color:var(--wz5-navy); font-size:11.5px; margin-bottom:2px; }
#view-planner-wizard .wz5-phase small { display:block; color:var(--wz5-muted); font-size:9.8px; line-height:1.35; }
#view-planner-wizard .wz5-who { display:flex; gap:5px; flex-wrap:wrap; }
#view-planner-wizard .wz5-chip { display:inline-flex; align-items:center; min-height:22px; padding:0 8px; border:1px solid #d8e0e9; border-radius:999px; background:#fafbfd; color:#596a82; font-size:9.5px; font-weight:650; }
#view-planner-wizard .wz5-start-ro { min-height:34px; padding:0 8px; border:0; background:transparent; color:#273652; font-size:10.5px; line-height:1.3; }
#view-planner-wizard .wz5-person-line { display:grid; grid-template-columns:42px minmax(0,1fr); gap:5px; align-items:center; }
#view-planner-wizard .wz5-person-line + .wz5-person-line { margin-top:5px; }
#view-planner-wizard .wz5-person-line > small { color:#718199; font-size:9px; }
#view-planner-wizard .wz5-money,.wz5-pct { min-height:34px; border-radius:6px; }
#view-planner-wizard .wz5-money input,.wz5-pct input,#view-planner-wizard .wz5-age-stack input,#view-planner-wizard .wz5-filing select { min-height:32px !important; padding:0 8px !important; border:0 !important; font-size:10.8px !important; box-shadow:none !important; }
#view-planner-wizard .wz5-money span,.wz5-pct span { font-size:10px !important; min-width:26px; }
#view-planner-wizard .wz5-postmed-ro { min-height:34px; padding:6px 8px; border:1px solid #d9e0e8; background:#fff; font-size:9.4px; line-height:1.35; }
#view-planner-wizard .wz5-infl-read,.wz5-static { color:#687991; font-size:10px; }
#view-planner-wizard .wz5-ltc-row { background:#fcfdfd; }
#view-planner-wizard .wz5-infobar { display:flex; gap:10px; align-items:flex-start; margin-top:12px; padding:10px 12px; border:1px solid #ccddf9; border-radius:8px; background:#f2f7ff; color:#3264c6; font-size:10.5px; line-height:1.45; }
#view-planner-wizard .wz5-info-i { width:17px;height:17px;display:grid;place-items:center;flex:0 0 17px;border-radius:50%;background:#2f6ee8;color:#fff;font-size:10px;font-weight:800; }
#view-planner-wizard .wz5-infobar .wz-linkbtn { padding:0; margin-left:3px; color:#2160c6; font-size:10.5px; font-weight:720; text-decoration:none; }
#view-planner-wizard .wz5-med-cols { display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:start; }
#view-planner-wizard .wz5-med-cols > section + section { padding-left:18px; border-left:1px solid #e5eaf0; }
#view-planner-wizard .wz5-med-cols h3 { margin:0 0 8px; color:var(--wz5-navy); font-size:11.5px; }
#view-planner-wizard .wz5-prem-row { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:8px; align-items:center; min-height:30px; padding:5px 0; border-bottom:1px solid #edf1f5; }
#view-planner-wizard .wz5-prem-head { color:#4f5e78; font-size:9.5px; font-weight:760; }
#view-planner-wizard .wz5-prem-label { color:#273652; font-size:10.3px; }
#view-planner-wizard .wz5-prem-row .wz-prefix { min-height:29px; border:0; box-shadow:none; }
#view-planner-wizard .wz5-prem-row .wz-prefix span { display:none; }
#view-planner-wizard .wz5-prem-row .wz-prefix input { min-height:27px; padding:0 5px; border:0; background:transparent; font-size:10.5px; box-shadow:none; }
#view-planner-wizard .wz5-prem-total { border-bottom:0; color:var(--wz5-navy); font-size:10.5px; }
#view-planner-wizard .wz5-med-note { margin:9px 0 0; color:#66758e; font-size:9.6px; line-height:1.4; }
#view-planner-wizard .wz5-filing { margin:9px 0 11px; }
#view-planner-wizard .wz5-filing label { margin-bottom:5px; font-size:10px; }
#view-planner-wizard .wz5-magi-row { display:grid; grid-template-columns:1.1fr 1fr; gap:9px; align-items:center; min-height:34px; padding:5px 0; border-bottom:1px solid #edf1f5; color:#4f5f78; font-size:9.8px; }
#view-planner-wizard .wz5-magi-head { font-weight:760; color:#34435f; }
#view-planner-wizard .wz5-magi-row .wz-prefix { min-height:30px; }
#view-planner-wizard .wz5-magi-row .wz-prefix input { min-height:28px; padding:0 6px; font-size:10.4px; }
#view-planner-wizard .wz5-irmaa-chip { display:inline-block; margin-top:9px; }
#view-planner-wizard .wz5-irmaa-note { margin:9px 0 0; color:#65758d; font-size:9.7px; line-height:1.4; }
#view-planner-wizard .wz5-tip { padding:18px 16px; border:1px solid #cfe7d8; border-radius:13px; background:#fff; }
#view-planner-wizard .wz5-tip-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
#view-planner-wizard .wz5-tip h2 { margin:0; color:var(--wz5-navy); font-size:13px; }
#view-planner-wizard .wz5-tip-lead { margin:0 0 17px; color:#526781; font-size:10.5px; line-height:1.65; }
#view-planner-wizard .wz5-tip h3 { margin:0 0 10px; color:var(--wz5-navy); font-size:11px; }
#view-planner-wizard .wz5-tip-list { margin:0; padding:0; list-style:none; display:grid; gap:14px; }
#view-planner-wizard .wz5-tip-list li { position:relative; padding-left:20px; color:#526781; font-size:10.4px; line-height:1.55; }
#view-planner-wizard .wz5-tip-list li::before { content:"✓"; position:absolute; left:0; top:1px; width:13px;height:13px;display:grid;place-items:center;border:1.4px solid var(--wz5-green);border-radius:50%;color:var(--wz5-green);font-size:8px;font-weight:800; }
#view-planner-wizard .wz5-learn { display:inline-block; margin-top:17px; color:var(--wz5-green); font-size:10.5px; font-weight:720; text-decoration:none; }
#view-planner-wizard .wz5-contract-advanced { display:none !important; }
@media (max-width:1180px) {
  #view-planner-wizard .wz5-layout { grid-template-columns:1fr; }
  #view-planner-wizard .wz5-aside { position:static; }
  #view-planner-wizard .wz5-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #view-planner-wizard .wz5-summary-item:nth-child(3) { border-left:0; border-top:1px solid #e8edf3; }
  #view-planner-wizard .wz5-summary-item:nth-child(4) { border-top:1px solid #e8edf3; }
}
@media (max-width:820px) {
  #view-planner-wizard .wz5-summary,#view-planner-wizard .wz5-med-cols { grid-template-columns:1fr; }
  #view-planner-wizard .wz5-summary-item + .wz5-summary-item { border-left:0; border-top:1px solid #e8edf3; }
  #view-planner-wizard .wz5-exp-head { display:none; }
  #view-planner-wizard .wz5-exp-row { grid-template-columns:1fr 1fr; }
  #view-planner-wizard .wz5-med-cols > section + section { padding-left:0; border-left:0; border-top:1px solid #e5eaf0; padding-top:16px; }
}

/* v149.503-design-step4 — literal approved-mock treatment, markup/CSS only */
#view-planner-wizard [data-wiz-step="4"].wz4-literal{--wz4-green:#079b50;--wz4-navy:#09154b;--wz4-muted:#66758e;--wz4-line:#dde4ed}
#view-planner-wizard .wz4-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:-2px 0 18px;border:1px solid var(--wz4-line);border-radius:13px;background:#fff;overflow:hidden}
#view-planner-wizard .wz4-summary-item{min-height:66px;display:flex;align-items:center;gap:13px;padding:13px 18px}
#view-planner-wizard .wz4-summary-item+.wz4-summary-item{border-left:1px solid #e8edf3}
#view-planner-wizard .wz4-summary-item strong{display:block;color:var(--wz4-navy);font-size:14.5px;margin-bottom:3px}
#view-planner-wizard .wz4-summary-item div>span{display:block;color:var(--wz4-muted);font-size:10.8px}
#view-planner-wizard .wz4-icon{width:36px;height:36px;flex:0 0 36px;border-radius:10px;background:#eaf7ef;position:relative}
#view-planner-wizard .wz4-icon:before{content:"";position:absolute;inset:9px;border:2px solid var(--wz4-green);border-radius:5px}
#view-planner-wizard .wz4-wallet:after{content:"▭"}#view-planner-wizard .wz4-trend:after{content:"↗"}#view-planner-wizard .wz4-calendar:after{content:"▦"}#view-planner-wizard .wz4-dollar:after{content:"$"}#view-planner-wizard .wz4-phases-icon:after{content:"⌁"}#view-planner-wizard .wz4-guard-icon:after{content:"↕"}#view-planner-wizard .wz4-pencil:after{content:"✎"}#view-planner-wizard .wz4-tip-icon:after{content:"?"}
#view-planner-wizard .wz4-icon:after{position:absolute;inset:0;display:grid;place-items:center;color:var(--wz4-green);font-size:16px;font-weight:800}
#view-planner-wizard .wz4-contract-ro{display:none!important}
#view-planner-wizard .wz4-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:18px;align-items:start}
#view-planner-wizard .wz4-main{min-width:0}#view-planner-wizard .wz4-aside{position:sticky;top:18px}
#view-planner-wizard .wz4-card{padding:16px 17px;border-radius:13px;box-shadow:none}
#view-planner-wizard .wz4-card h2:before{display:none!important}
#view-planner-wizard .wz4-card-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:12px}
#view-planner-wizard .wz4-card-head-between{justify-content:space-between}.wz4-card-titlewrap{display:flex;align-items:flex-start;gap:11px;min-width:0}
#view-planner-wizard .wz4-card h2{margin:2px 0 0;color:var(--wz4-navy);font-size:14px}
#view-planner-wizard .wz4-card-head p,#view-planner-wizard .wz4-notes p{margin:3px 0 0;color:var(--wz4-muted);font-size:10.4px;line-height:1.4}
#view-planner-wizard .wz4-annual-grid{display:grid;grid-template-columns:1fr .85fr 1.3fr;gap:18px;align-items:end}
#view-planner-wizard .wz4-card .wz-field label{margin-bottom:5px;color:#263552;font-size:10.5px;font-weight:720}
#view-planner-wizard .wz4-card input,#view-planner-wizard .wz4-card select,#view-planner-wizard .wz4-card textarea{min-height:34px!important;border-radius:6px!important;font-size:10.5px!important}
#view-planner-wizard .wz4-card .wz-prefix span,#view-planner-wizard .wz4-card .wz-suffix span{font-size:10px;min-width:27px}
#view-planner-wizard .wz4-mode-toggle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid #d8e0e9;border-radius:6px;overflow:hidden}
#view-planner-wizard .wz4-mode-toggle .wz-mode-btn{min-height:34px;border:0;border-right:1px solid #e5eaf0;border-radius:0;background:#fff;padding:0 7px;color:#41516b;font-size:9.8px;font-weight:680}
#view-planner-wizard .wz4-mode-toggle .wz-mode-btn:last-child{border-right:0}#view-planner-wizard .wz4-mode-toggle .wz-mode-btn.active{color:var(--wz4-green);background:#f0faf4;box-shadow:inset 0 0 0 1px #8fd2aa}
#view-planner-wizard .wz4-info{display:flex;align-items:center;gap:9px;margin-top:11px;padding:8px 10px;border:1px solid #cbdcf8;border-radius:7px;background:#f2f7ff;color:#3264c6;font-size:9.8px;line-height:1.4}
#view-planner-wizard .wz4-info-i{width:15px;height:15px;display:grid;place-items:center;flex:0 0 15px;border-radius:50%;background:#2f6ee8;color:#fff;font-size:9px;font-weight:800}
#view-planner-wizard .wz4-fixed-panel{margin-top:10px;padding-top:10px;border-top:1px dashed #e1e7ee}#view-planner-wizard .wz4-fixed-panel .wz-switch-label{font-size:9.8px}#view-planner-wizard .wz4-fixed-panel .wz-hint{margin:5px 0 0;font-size:9.3px}
#view-planner-wizard .wz4-optional{display:inline-block;padding:4px 9px;border:1px solid #dce3eb;border-radius:6px;color:#60718a;font-size:9.5px;background:#fbfcfd}
#view-planner-wizard .wz4-phase-chip{display:inline-block;margin:-3px 0 10px;color:#65758e;font-size:9.5px}
#view-planner-wizard .wz4-phase-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#view-planner-wizard .wz4-phase-list .wz-phase-headrow{display:none}
#view-planner-wizard .wz4-phase-list .wz-phase-row{display:grid;grid-template-columns:1fr;gap:7px;align-content:start;padding:12px;border:1px solid #e1e7ee;border-radius:9px;background:#fff}
#view-planner-wizard .wz4-phase-list .wz-phase-row>input[type="text"]{min-height:26px!important;border:0!important;padding:0!important;color:var(--wz4-navy);font-size:11px!important;font-weight:760;box-shadow:none!important}
#view-planner-wizard .wz4-phase-list .wz-ro-cell{min-height:25px;padding:5px 7px;border:0;background:#f8fafc;color:#65758e;font-size:9.5px}
#view-planner-wizard .wz4-phase-list .wz-linkbtn{justify-self:start;padding:0;color:#8a4a55;font-size:9px}
#view-planner-wizard .wz4-add-phase{margin-top:10px;min-height:30px;padding:0 11px;font-size:9.5px}
#view-planner-wizard .wz4-guardrails .wz-grid{gap:12px}#view-planner-wizard .wz4-guardrails .wz-hint{margin-top:9px;font-size:9.5px;line-height:1.45}
#view-planner-wizard .wz4-event-tabs{display:flex;justify-content:flex-end;gap:0;margin:-36px 0 10px}
#view-planner-wizard .wz4-event-tabs span{min-height:28px;display:grid;place-items:center;padding:0 13px;border:1px solid #d8e0e9;border-left:0;color:#52647d;background:#fff;font-size:9.5px}
#view-planner-wizard .wz4-event-tabs span:first-child{border-left:1px solid #d8e0e9;border-radius:6px 0 0 6px}#view-planner-wizard .wz4-event-tabs span:last-child{border-radius:0 6px 6px 0}#view-planner-wizard .wz4-event-tabs span.active{color:var(--wz4-green);border-color:#83caa2;background:#f2fbf6}
#view-planner-wizard .wz4-event-group+.wz4-event-group{margin-top:13px;padding-top:12px;border-top:1px solid #e5eaf0}
#view-planner-wizard .wz4-event-label{margin-bottom:6px;color:var(--wz4-navy);font-size:10.5px;font-weight:740}#view-planner-wizard .wz4-event-label span{color:#7a889c;font-size:9px;font-weight:500}
#view-planner-wizard .wz4-event-head,#view-planner-wizard .wz4-event-row{display:grid;grid-template-columns:1.35fr 1fr .82fr .82fr .86fr;gap:8px;align-items:center}
#view-planner-wizard .wz4-event-head{padding:6px 7px;border-top:1px solid #e7ebf0;border-bottom:1px solid #e7ebf0;background:#fbfcfd;color:#53637c;font-size:8.9px;font-weight:720}
#view-planner-wizard .wz4-event-row{padding:6px 7px;border-bottom:1px solid #edf1f5}
#view-planner-wizard .wz4-event-row>input,#view-planner-wizard .wz4-event-row>select,#view-planner-wizard .wz4-event-row .wz-prefix{min-height:30px!important}#view-planner-wizard .wz4-event-row .wz-prefix input{min-height:28px!important}
#view-planner-wizard .wz4-owner{grid-column:1/-1;display:flex;align-items:center;gap:11px;padding:3px 4px 1px;color:#677890;font-size:8.9px}#view-planner-wizard .wz4-owner label{display:inline-flex;align-items:center;gap:3px}#view-planner-wizard .wz4-owner input{min-height:0!important}
#view-planner-wizard .wz4-dep-head,#view-planner-wizard .wz4-dep-row{grid-template-columns:1.35fr 1fr .82fr .86fr .82fr}#view-planner-wizard .wz4-dep-row .wz-ro-cell{min-height:30px;display:grid;place-items:center;border:0;background:#f8fafc;color:#596b84;font-size:9.3px}
#view-planner-wizard .wz4-notes{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}#view-planner-wizard .wz4-notes .wz4-card-titlewrap{align-items:flex-start}#view-planner-wizard .wz4-notes-input textarea{width:100%;min-height:62px!important;resize:vertical}#view-planner-wizard .wz4-notes-input small{display:block;margin-top:4px;text-align:right;color:#718199;font-size:8.8px}
#view-planner-wizard .wz4-tip{padding:17px 15px;border:1px solid #cfe7d8;border-radius:13px;background:#fff}#view-planner-wizard .wz4-tip-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}#view-planner-wizard .wz4-tip h2{margin:0;color:var(--wz4-navy);font-size:12.5px}#view-planner-wizard .wz4-tip>p{margin:0 0 18px;color:#526781;font-size:10.2px;line-height:1.65}#view-planner-wizard .wz4-tip h3{margin:0 0 10px;color:var(--wz4-navy);font-size:10.8px}#view-planner-wizard .wz4-tip ul{margin:0;padding:0;list-style:none;display:grid;gap:16px}#view-planner-wizard .wz4-tip li{position:relative;padding-left:20px;color:#526781;font-size:10.1px;line-height:1.55}#view-planner-wizard .wz4-tip li:before{content:"✓";position:absolute;left:0;top:1px;width:13px;height:13px;display:grid;place-items:center;border:1.4px solid var(--wz4-green);border-radius:50%;color:var(--wz4-green);font-size:8px;font-weight:800}#view-planner-wizard .wz4-tip a{display:inline-block;margin-top:18px;color:var(--wz4-green);font-size:10.3px;font-weight:720;text-decoration:none}
@media(max-width:1180px){#view-planner-wizard .wz4-layout{grid-template-columns:1fr}#view-planner-wizard .wz4-aside{position:static}}
@media(max-width:900px){#view-planner-wizard .wz4-summary,#view-planner-wizard .wz4-annual-grid,#view-planner-wizard .wz4-phase-list,#view-planner-wizard .wz4-notes{grid-template-columns:1fr}#view-planner-wizard .wz4-summary-item+.wz4-summary-item{border-left:0;border-top:1px solid #e8edf3}#view-planner-wizard .wz4-event-head{display:none}#view-planner-wizard .wz4-event-row,#view-planner-wizard .wz4-dep-row{grid-template-columns:1fr 1fr}}

/* v149.504-design-step1 — literal approved-mock treatment, markup/CSS only */
#view-planner-wizard [data-wiz-step="1"].wz1-literal{--wz1-green:#079b50;--wz1-navy:#09154b;--wz1-muted:#66758e;--wz1-line:#dde4ed}
#view-planner-wizard .wz1-head{margin-bottom:20px}#view-planner-wizard .wz1-head h1{margin-bottom:7px}
#view-planner-wizard .wz1-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch;margin-bottom:20px}
#view-planner-wizard .wz1-card{margin:0;padding:24px;border-radius:14px;box-shadow:none}
#view-planner-wizard .wz1-profile,#view-planner-wizard .wz1-house{min-height:490px}
#view-planner-wizard .wz1-card h2::before{display:none!important}
#view-planner-wizard .wz1-card-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:24px}
#view-planner-wizard .wz1-card-head-between{justify-content:space-between;gap:18px}#view-planner-wizard .wz1-titlewrap{display:flex;align-items:flex-start;gap:12px;min-width:0}
#view-planner-wizard .wz1-icon{width:36px;height:36px;flex:0 0 36px;border-radius:10px;background:#eaf7ef;position:relative}
#view-planner-wizard .wz1-icon::before{content:"";position:absolute;inset:9px;border:2px solid var(--wz1-green);border-radius:5px}
#view-planner-wizard .wz1-person::after{content:"○"}#view-planner-wizard .wz1-house-icon::after{content:"⌂"}#view-planner-wizard .wz1-shield::after{content:"✓"}
#view-planner-wizard .wz1-icon::after{position:absolute;inset:0;display:grid;place-items:center;color:var(--wz1-green);font-size:15px;font-weight:800}
#view-planner-wizard .wz1-card h2{margin:2px 0 3px;color:var(--wz1-navy);font-size:15px;font-weight:760}
#view-planner-wizard .wz1-card-sub{margin:0;color:var(--wz1-muted);font-size:10.8px;line-height:1.45}
#view-planner-wizard .wz1-stack{display:grid;gap:18px}
#view-planner-wizard .wz1-card .wz-field label{margin-bottom:6px;color:#263552;font-size:11px;font-weight:730}
#view-planner-wizard .wz1-card input,#view-planner-wizard .wz1-card select,#view-planner-wizard .wz1-ro{min-height:38px!important;border-radius:6px!important;font-size:11px!important}
#view-planner-wizard .wz1-unit{display:grid;grid-template-columns:minmax(0,1fr) 50px;align-items:stretch}
#view-planner-wizard .wz1-unit>input,#view-planner-wizard .wz1-unit>.wz1-ro{width:100%;border-radius:6px 0 0 6px!important}
#view-planner-wizard .wz1-unit>span{display:grid;place-items:center;min-height:38px;border:1px solid #d8e0e9;border-left:0;border-radius:0 6px 6px 0;background:#fbfcfd;color:#65758e;font-size:9.8px}
#view-planner-wizard .wz1-ro{display:flex;align-items:center;padding:0 10px;border:1px solid #d8e0e9;background:#fff;color:#253551}
#view-planner-wizard .wz1-card .wz-hint{margin-top:5px;color:#718199;font-size:9.7px;line-height:1.45}
#view-planner-wizard .wz1-info{display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding:11px 12px;border:1px solid #cbdcf8;border-radius:7px;background:#f2f7ff;color:#3264c6;font-size:10px;line-height:1.45}
#view-planner-wizard .wz1-info-i{width:16px;height:16px;display:grid;place-items:center;flex:0 0 16px;border-radius:50%;background:#2f6ee8;color:#fff;font-size:9px;font-weight:800}
#view-planner-wizard .wz1-spouse-toggle{flex:0 0 auto;margin-top:2px}#view-planner-wizard .wz1-spouse-toggle .wz-switch-label{color:#4f6078;font-size:9.8px;font-weight:650}
#view-planner-wizard .wz1-spouse-panel{padding:17px 18px 16px;border:1px solid #dfe5ec;border-radius:9px;background:#fff}
#view-planner-wizard .wz1-spouse-panel h3{margin:0 0 16px;color:var(--wz1-navy);font-size:11px;font-weight:760}#view-planner-wizard .wz1-name{margin-bottom:16px}#view-planner-wizard .wz1-ages{gap:18px;margin-bottom:16px}
#view-planner-wizard .wz1-survivor{padding:18px 20px 16px;border-radius:14px}#view-planner-wizard .wz1-survivor-details{margin:0}
#view-planner-wizard .wz1-survivor-details>summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:12px}#view-planner-wizard .wz1-survivor-details>summary::-webkit-details-marker{display:none}
#view-planner-wizard .wz1-survivor-copy{display:flex;flex-direction:column;gap:3px}#view-planner-wizard .wz1-survivor-copy strong{color:var(--wz1-navy);font-size:13px;font-weight:760}#view-planner-wizard .wz1-survivor-copy small{color:var(--wz1-muted);font-size:10px}
#view-planner-wizard .wz1-chevron{position:relative;width:18px;height:18px;margin-left:auto;margin-top:4px}#view-planner-wizard .wz1-chevron::before,#view-planner-wizard .wz1-chevron::after{content:"";position:absolute;top:8px;width:8px;height:2px;background:#263552;border-radius:2px}#view-planner-wizard .wz1-chevron::before{left:2px;transform:rotate(-45deg)}#view-planner-wizard .wz1-chevron::after{right:2px;transform:rotate(45deg)}#view-planner-wizard .wz1-survivor-details:not([open]) .wz1-chevron::before{transform:rotate(45deg)}#view-planner-wizard .wz1-survivor-details:not([open]) .wz1-chevron::after{transform:rotate(-45deg)}
#view-planner-wizard .wz1-survivor-grid{gap:22px;margin-top:17px}#view-planner-wizard .wz1-survivor-grid .wz-suffix span{min-width:28px;font-size:10px}
#view-planner-wizard .wz1-ss-auto-note{display:none!important}
@media(max-width:980px){#view-planner-wizard .wz1-layout,#view-planner-wizard .wz1-ages,#view-planner-wizard .wz1-survivor-grid{grid-template-columns:1fr}#view-planner-wizard .wz1-profile,#view-planner-wizard .wz1-house{min-height:0}}
@media(max-width:700px){#view-planner-wizard .wz1-card-head-between{flex-direction:column}}

/* v149.501 work order — Step 2 literal mock treatment with per-owner account contract */
#view-planner-wizard .wz2-literal .wz-step-head{margin-bottom:18px}
#view-planner-wizard .wz2-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #dde5ed;border-radius:14px;background:#fff;overflow:hidden;margin-bottom:22px}
#view-planner-wizard .wz2-summary-item{display:flex;align-items:center;gap:14px;min-height:92px;padding:16px 18px}
#view-planner-wizard .wz2-summary-item+.wz2-summary-item{border-left:1px solid #e9eef3}
#view-planner-wizard .wz2-icon{width:42px;height:42px;border-radius:13px;background:#e9f8ef;position:relative;display:inline-block;flex:0 0 auto}
#view-planner-wizard .wz2-icon:before{content:"";position:absolute;inset:10px;border:2px solid #0aa05a;border-radius:5px}
#view-planner-wizard .wz2-icon:after{content:"";position:absolute;width:9px;height:9px;right:8px;top:8px;border-radius:50%;background:#0aa05a;opacity:.15}
#view-planner-wizard .wz2-summary-label,#view-planner-wizard .wz2-summary-sub{display:block;color:#697a91}
#view-planner-wizard .wz2-summary-label{font-size:12px;margin-bottom:4px}
#view-planner-wizard .wz2-summary-value{display:block;color:#102b50;font-size:16px;line-height:1.2;margin-bottom:4px}
#view-planner-wizard .wz2-summary-sub{font-size:10.8px}
#view-planner-wizard .wz2-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:18px;align-items:start}
#view-planner-wizard .wz2-card,#view-planner-wizard .wz2-snapshot{border:1px solid #dde5ed;border-radius:15px;box-shadow:0 1px 2px rgba(15,39,71,.02);padding:18px;background:#fff}
#view-planner-wizard .wz2-card-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}
#view-planner-wizard .wz2-card-head h2,#view-planner-wizard .wz2-snapshot h2{margin:0;color:#102b50;font-size:15px;font-weight:800}
#view-planner-wizard .wz2-carry{display:flex;align-items:center;gap:10px}
#view-planner-wizard .wz2-carry-label{font-size:11.5px;color:#5f7189}
#view-planner-wizard .wz2-info{display:flex;align-items:center;gap:10px;min-height:40px;padding:9px 12px;margin-bottom:14px;border:1px solid #c9dcf8;border-radius:8px;background:#eef5ff;color:#2e69ce;font-size:11.5px}
#view-planner-wizard .wz2-info-i{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:#2f6fe5;color:#fff;font-size:10px;font-weight:800;flex:0 0 auto}
#view-planner-wizard .wz2-headrow,#view-planner-wizard .wz2-row{display:grid;grid-template-columns:2.2fr .62fr 1fr 1.15fr .48fr;gap:12px;align-items:center}
#view-planner-wizard .wz2-headrow{padding:9px 12px;background:#fbfcfd;border:1px solid #e5eaf0;border-radius:9px 9px 0 0;color:#5f7189;font-size:10.5px;font-weight:700}
#view-planner-wizard .wz2-rows{border:1px solid #e5eaf0;border-top:0;border-radius:0 0 9px 9px;overflow:hidden}
#view-planner-wizard .wz2-group{padding:7px 12px;background:#f6f9f7;color:#087d47;font-size:10.5px;font-weight:800;letter-spacing:.03em;border-bottom:1px solid #e8edf2}
#view-planner-wizard .wz2-spouse-group>.wz2-group{border-top:1px solid #e8edf2}
#view-planner-wizard .wz2-row{min-height:59px;padding:8px 12px;border-bottom:1px solid #edf1f5}
#view-planner-wizard .wz2-row:last-child{border-bottom:0}
#view-planner-wizard .wz2-asset{display:flex;align-items:center;gap:10px;min-width:0}
#view-planner-wizard .wz2-asset .wz2-icon{width:34px;height:34px;border-radius:50%;background:#ebf8f0}
#view-planner-wizard .wz2-asset .wz2-icon:before{inset:8px}
#view-planner-wizard .wz2-asset .wz2-icon:after{width:7px;height:7px;right:6px;top:6px}
#view-planner-wizard .wz2-asset-copy{min-width:0}
#view-planner-wizard .wz2-asset-copy strong{display:block;color:#173453;font-size:11.5px;line-height:1.25}
#view-planner-wizard .wz2-asset-copy small{display:block;color:#728197;font-size:9.8px;line-height:1.35;margin-top:2px}
#view-planner-wizard .wz2-owner,#view-planner-wizard .wz2-note,#view-planner-wizard .wz2-note-ro{color:#4f647e;font-size:10.8px}
#view-planner-wizard .wz2-money{width:100%}
#view-planner-wizard .wz2-money input{min-height:36px;border-radius:7px;font-size:11.5px}
#view-planner-wizard .wz2-money>span{min-width:30px;font-size:11px}
#view-planner-wizard .wz2-inc-cell{display:flex;justify-content:center}
#view-planner-wizard .wz2-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:15px;margin-top:15px;border-top:1px solid #edf1f5}
#view-planner-wizard .wz2-fixed-schema{display:flex;align-items:center;gap:8px;color:#718196;font-size:10.5px;max-width:70%}
#view-planner-wizard .wz2-lock{width:16px;height:16px;border:1.5px solid #91a0b1;border-radius:4px;position:relative;flex:0 0 auto}
#view-planner-wizard .wz2-lock:before{content:"";position:absolute;width:8px;height:6px;border:1.5px solid #91a0b1;border-bottom:0;border-radius:8px 8px 0 0;left:2.5px;top:-6px}
#view-planner-wizard .wz2-included-total{text-align:right}
#view-planner-wizard .wz2-included-total span{display:block;color:#718196;font-size:10.5px}
#view-planner-wizard .wz2-included-total strong{display:block;color:#102b50;font-size:18px;margin-top:2px}
#view-planner-wizard .wz2-aside{position:sticky;top:18px}
#view-planner-wizard .wz2-snapshot{padding:20px 16px}
#view-planner-wizard .wz2-subtle{margin:8px 0 16px;color:#74849a;font-size:11px}
#view-planner-wizard .wz2-chartwrap{display:flex;align-items:center;gap:16px;margin-bottom:20px}
#view-planner-wizard .wz2-donut{
  /* Individual bucket shares. Engineering can set these from the same
     percentages used by the read-only legend hooks. Defaults intentionally
     collapse every colored arc to zero size until those values are wired. */
  --wz2-arc-zero:0turn;
  --wz2-arc-trad:0turn;
  --wz2-arc-taxable:0turn;
  --wz2-arc-roth:0turn;
  --wz2-arc-cash:0turn;
  --wz2-arc-full:1turn;
  width:92px;
  height:92px;
  border-radius:999px;
  background:#e6ecf2;
  background-image:conic-gradient(
    #119658 var(--wz2-arc-zero) var(--wz2-arc-trad),
    #057642 var(--wz2-arc-trad) calc(var(--wz2-arc-trad) + var(--wz2-arc-taxable)),
    #7359d9 calc(var(--wz2-arc-trad) + var(--wz2-arc-taxable)) calc(var(--wz2-arc-trad) + var(--wz2-arc-taxable) + var(--wz2-arc-roth)),
    #f0bd19 calc(var(--wz2-arc-trad) + var(--wz2-arc-taxable) + var(--wz2-arc-roth)) calc(var(--wz2-arc-trad) + var(--wz2-arc-taxable) + var(--wz2-arc-roth) + var(--wz2-arc-cash)),
    #e6ecf2 calc(var(--wz2-arc-trad) + var(--wz2-arc-taxable) + var(--wz2-arc-roth) + var(--wz2-arc-cash)) var(--wz2-arc-full)
  );
  position:relative;
  flex:0 0 auto
}
#view-planner-wizard .wz2-donut:after{content:"";position:absolute;inset:23px;background:#fff;border-radius:999px}
#view-planner-wizard .wz2-chart-total span{display:block;color:#74849a;font-size:10.5px;margin-bottom:5px}
#view-planner-wizard .wz2-chart-total strong{color:#102b50;font-size:17px}
#view-planner-wizard .wz2-legend{display:grid;gap:12px;margin-bottom:20px}
#view-planner-wizard .wz2-legend-row{display:grid;grid-template-columns:minmax(0,1fr) auto 28px;gap:8px;align-items:center;font-size:10.5px;color:#50667f}
#view-planner-wizard .wz2-legend-left{display:flex;align-items:center;gap:8px;min-width:0}
#view-planner-wizard .wz2-dot{width:10px;height:10px;border-radius:999px;flex:0 0 auto}
#view-planner-wizard .wz2-dot.trad{background:#119658}#view-planner-wizard .wz2-dot.taxable{background:#057642}#view-planner-wizard .wz2-dot.roth{background:#7359d9}#view-planner-wizard .wz2-dot.cash{background:#f0bd19}
#view-planner-wizard .wz2-legend-row strong{font-size:10.5px;color:#314c68;font-weight:600}
#view-planner-wizard .wz2-pct{color:#718196;text-align:right}
#view-planner-wizard .wz2-side-note{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid #cce6d5;border-radius:9px;background:#f4fbf6;color:#50677e;font-size:10.5px;line-height:1.55}
#view-planner-wizard .wz2-side-shield{width:17px;height:17px;border:2px solid #11a05a;border-radius:5px;flex:0 0 auto}
@media(max-width:1180px){#view-planner-wizard .wz2-layout{grid-template-columns:1fr}#view-planner-wizard .wz2-aside{position:static}}
@media(max-width:900px){#view-planner-wizard .wz2-summary{grid-template-columns:1fr 1fr}#view-planner-wizard .wz2-summary-item:nth-child(3){border-left:0;border-top:1px solid #e9eef3}#view-planner-wizard .wz2-summary-item:nth-child(4){border-top:1px solid #e9eef3}}
@media(max-width:760px){#view-planner-wizard .wz2-headrow{display:none}#view-planner-wizard .wz2-row{grid-template-columns:1fr 1fr}#view-planner-wizard .wz2-notes{grid-column:1/-1}#view-planner-wizard .wz2-inc-cell{justify-content:flex-start}}
#view-planner-wizard .wz2-carry{flex-wrap:wrap;justify-content:flex-end;max-width:430px}
#view-planner-wizard .wz2-carry-hint{width:100%;margin:2px 0 0;text-align:right;font-size:10px;line-height:1.35;color:#728197}

/* ============================================================
   STEP 3 — INCOME — v149.501 WORK-ORDER LITERAL MATCH
   ============================================================ */
#view-planner-wizard .wz3-head{margin-bottom:16px}
#view-planner-wizard .wz3-head h1{margin:0 0 5px;font-size:28px;line-height:1.15;color:#0b2147}
#view-planner-wizard .wz3-head p{margin:0;color:#60718a;font-size:13px}
#view-planner-wizard .wz3-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #dfe6ee;border-radius:14px;background:#fff;margin:0 0 16px;overflow:hidden}
#view-planner-wizard .wz3-summary-item{display:flex;align-items:center;gap:14px;min-height:72px;padding:14px 18px;position:relative}
#view-planner-wizard .wz3-summary-item+.wz3-summary-item:before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:1px;background:#e8edf3}
#view-planner-wizard .wz3-summary-item strong{display:block;color:#10284d;font-size:15px;line-height:1.15;margin-bottom:4px}
#view-planner-wizard .wz3-summary-item span:not(.wz3-icon){display:block;color:#687a91;font-size:11.5px}
#view-planner-wizard .wz3-icon,#view-planner-wizard .wz3-card-icon{width:38px;height:38px;flex:0 0 auto;border-radius:11px;background:#eaf8ef;position:relative}
#view-planner-wizard .wz3-icon:before,#view-planner-wizard .wz3-card-icon:before{content:"";position:absolute;inset:10px;border:2px solid #119b51;border-radius:5px}
#view-planner-wizard .wz3-money:after{content:"$";position:absolute;inset:0;display:grid;place-items:center;color:#119b51;font-weight:800;font-size:14px}
#view-planner-wizard .wz3-shield:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#119b51;font-weight:800;font-size:12px}
#view-planner-wizard .wz3-briefcase:after{content:"";position:absolute;left:13px;right:13px;top:12px;height:4px;border:2px solid #119b51;border-bottom:0;border-radius:3px 3px 0 0}
#view-planner-wizard .wz3-pie:after{content:"";position:absolute;width:9px;height:9px;right:8px;top:8px;background:#119b51;border-radius:50%;opacity:.22}
#view-planner-wizard .wz3-wallet:after{content:"";position:absolute;left:11px;right:11px;top:17px;height:7px;border-top:2px solid #119b51}
#view-planner-wizard .wz3-layout{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:18px;align-items:start}
#view-planner-wizard .wz3-main{min-width:0}
#view-planner-wizard .wz3-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
#view-planner-wizard .wz3-card{border:1px solid #dfe6ee;border-radius:14px;box-shadow:0 1px 2px rgba(15,37,66,.025);padding:16px;margin:0;background:#fff}
#view-planner-wizard .wz3-card-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:14px}
#view-planner-wizard .wz3-card-head-split{justify-content:space-between;gap:14px}
#view-planner-wizard .wz3-head-title{display:flex;align-items:flex-start;gap:11px;min-width:0}
#view-planner-wizard .wz3-card-head h2{margin:1px 0 3px;color:#10284d;font-size:14px;line-height:1.2}
#view-planner-wizard .wz3-card-head p{margin:0;color:#708197;font-size:10.8px;line-height:1.45}
#view-planner-wizard .wz3-ss-grid{grid-template-columns:.8fr 1.25fr .95fr;gap:14px}
#view-planner-wizard .wz3-literal .wz-field label{color:#203955;font-size:10.8px;font-weight:700;margin-bottom:6px}
#view-planner-wizard .wz3-literal input,#view-planner-wizard .wz3-literal select{min-height:36px;border-radius:7px;border:1px solid #d5dde7;background:#fff;font-size:11.5px;color:#173352}
#view-planner-wizard .wz3-literal .wz-prefix>span,#view-planner-wizard .wz3-literal .wz-suffix>span,#view-planner-wizard .wz3-unit>span{font-size:10.8px;color:#687a90;min-width:34px}
#view-planner-wizard .wz3-unit{display:grid;grid-template-columns:minmax(0,1fr) 48px}
#view-planner-wizard .wz3-unit input{border-radius:7px 0 0 7px}
#view-planner-wizard .wz3-unit>span{display:grid;place-items:center;border:1px solid #d5dde7;border-left:0;border-radius:0 7px 7px 0;background:#fbfcfe}
#view-planner-wizard .wz3-unit-note{margin:9px 0 0;font-size:10.2px;color:#8190a3}
#view-planner-wizard .wz3-mode{display:inline-grid;grid-template-columns:1fr 1fr;margin:0 0 12px;border:1px solid #d6dee8;border-radius:8px;overflow:hidden}
#view-planner-wizard .wz3-mode .wz-mode-btn{min-height:32px;padding:0 10px;border:0;border-right:1px solid #e5eaf0;background:#fff;color:#4d6179;font-size:10.5px;font-weight:700}
#view-planner-wizard .wz3-mode .wz-mode-btn:last-child{border-right:0}
#view-planner-wizard .wz3-mode .wz-mode-btn.active{background:#eff9f3;color:#078c45;box-shadow:inset 0 0 0 1px #83cfa6}
#view-planner-wizard .wz3-add-slot{margin-left:auto;position:relative}
#view-planner-wizard .wz3-add-slot>summary{list-style:none;cursor:pointer;border:1px solid #d7dee8;border-radius:7px;background:#fff;color:#52667f;min-height:30px;display:flex;align-items:center;padding:0 10px;font-size:10.5px;font-weight:700;white-space:nowrap}
#view-planner-wizard .wz3-add-slot>summary::-webkit-details-marker{display:none}
#view-planner-wizard .wz3-slot-note{margin-top:8px;width:220px;padding:8px 10px;background:#fff;border:1px solid #e0e6ed;border-radius:8px;font-size:10px;color:#718196}
#view-planner-wizard .wz3-add-slot .wz3-second-slot{margin-top:8px;width:510px;max-width:72vw;padding:13px;background:#fff;border:1px solid #dfe6ee;border-radius:10px;box-shadow:0 8px 22px rgba(18,44,72,.08)}
#view-planner-wizard .wz3-second-slot-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px}
#view-planner-wizard .wz3-second-slot-head strong{font-size:12px;color:#153251}
#view-planner-wizard .wz3-second-slot-head span{font-size:10px;color:#8090a2}
#view-planner-wizard .wz3-second-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#view-planner-wizard .wz3-pension-table{border:1px solid #e4eaf0;border-radius:10px;overflow:hidden}
#view-planner-wizard .wz3-pension-head,#view-planner-wizard .wz3-pension-row{display:grid;grid-template-columns:1.35fr .72fr 1.05fr .72fr .62fr;gap:10px;align-items:center}
#view-planner-wizard .wz3-pension-head{padding:8px 10px;background:#fbfcfd;border-bottom:1px solid #e8edf3;color:#61748b;font-size:9.6px;font-weight:700;line-height:1.25}
#view-planner-wizard .wz3-pension-head small{font-size:8.8px;font-weight:600}
#view-planner-wizard .wz3-pension-row{padding:10px}
#view-planner-wizard .wz3-pension-row input{min-height:32px;font-size:10.8px}
#view-planner-wizard .wz3-source strong{display:block;color:#203955;font-size:10.8px}
#view-planner-wizard .wz3-source small{display:block;margin-top:2px;color:#8694a5;font-size:9.3px}
#view-planner-wizard .wz3-survivor-ro{font-size:10.8px;color:#203955;text-align:center}
#view-planner-wizard .wz3-advanced-row{margin-top:10px}
#view-planner-wizard .wz3-advanced-row>summary{cursor:pointer;list-style:none;color:#118f49;font-size:10.5px;font-weight:700}
#view-planner-wizard .wz3-advanced-row>summary::-webkit-details-marker{display:none}
#view-planner-wizard .wz3-advanced-grid{display:grid;grid-template-columns:170px;gap:10px;margin-top:9px;padding-top:9px;border-top:1px dashed #dde5ec}
#view-planner-wizard .wz3-spouse-employ-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:9px;padding-top:9px;border-top:1px dashed #dde5ec}
#view-planner-wizard .wz3-spouse-employ-grid .wz3-wide{grid-column:1/-1}
#view-planner-wizard .wz3-info{display:flex;align-items:center;gap:8px;margin-top:11px;padding:8px 10px;border:1px solid #cfe0fa;border-radius:7px;background:#edf5ff;color:#276bd1;font-size:9.8px;line-height:1.4}
#view-planner-wizard .wz3-info-i{width:15px;height:15px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#2f73db;color:#fff;font-size:9px;font-weight:800}
#view-planner-wizard .wz3-employ-card{margin-bottom:16px}
#view-planner-wizard .wz3-employ-head,#view-planner-wizard .wz3-employ-row{display:grid;grid-template-columns:1.45fr 1fr .55fr .72fr;gap:12px;align-items:center}
#view-planner-wizard .wz3-employ-head{padding:8px 10px;background:#fbfcfd;border:1px solid #e4eaf0;border-bottom:0;border-radius:9px 9px 0 0;color:#60738a;font-size:9.8px;font-weight:700}
#view-planner-wizard .wz3-employ-head small{font-size:8.8px}
#view-planner-wizard .wz3-employ-row{padding:10px;border:1px solid #e4eaf0;border-radius:0 0 9px 9px}
#view-planner-wizard .wz3-employ-row input{min-height:32px;font-size:10.8px}
#view-planner-wizard .wz3-aside{position:sticky;top:18px}
#view-planner-wizard .wz3-tip{padding:16px 14px;border-color:#cde8d8;background:linear-gradient(180deg,#fff 0%,#fbfefc 100%)}
#view-planner-wizard .wz3-tip-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
#view-planner-wizard .wz3-tip-head h2{margin:0;color:#173452;font-size:13px}
#view-planner-wizard .wz3-tip-icon{width:30px;height:30px;border-radius:9px;background:#eaf8ef;position:relative}
#view-planner-wizard .wz3-tip-icon:before{content:"?";position:absolute;inset:0;display:grid;place-items:center;color:#159c52;font-weight:800;font-size:13px}
#view-planner-wizard .wz3-tip p{margin:0 0 15px;color:#5c7189;font-size:10.8px;line-height:1.6}
#view-planner-wizard .wz3-tip h3{margin:0 0 10px;color:#173452;font-size:11.3px}
#view-planner-wizard .wz3-tip ul{margin:0;padding-left:20px;display:grid;gap:12px}
#view-planner-wizard .wz3-tip li{color:#456079;font-size:10.6px;line-height:1.55}
#view-planner-wizard .wz3-tip li::marker{color:#13a155}
#view-planner-wizard .wz3-learn{display:inline-block;margin-top:15px;color:#119b51;font-size:10.6px;font-weight:700;text-decoration:none}
@media(max-width:1220px){#view-planner-wizard .wz3-layout{grid-template-columns:1fr}#view-planner-wizard .wz3-aside{position:static}}
@media(max-width:900px){#view-planner-wizard .wz3-summary,#view-planner-wizard .wz3-grid2{grid-template-columns:1fr 1fr}#view-planner-wizard .wz3-pension-head,#view-planner-wizard .wz3-pension-row,#view-planner-wizard .wz3-employ-head,#view-planner-wizard .wz3-employ-row{grid-template-columns:1fr 1fr}#view-planner-wizard .wz3-ss-grid{grid-template-columns:1fr}}
@media(max-width:640px){#view-planner-wizard .wz3-summary,#view-planner-wizard .wz3-grid2,#view-planner-wizard .wz3-spouse-employ-grid,#view-planner-wizard .wz3-second-grid{grid-template-columns:1fr}}

/* v149.501 design work-order — Step 6 literal visual treatment with functional corrections */
#view-planner-wizard .wz6-literal-workorder .wz-step-head{margin-bottom:18px}
#view-planner-wizard .wz6-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #dfe5ed;border-radius:14px;background:#fff;overflow:hidden;margin-bottom:18px}
#view-planner-wizard .wz6-summary-item{display:flex;align-items:center;gap:14px;min-height:82px;padding:16px 20px}
#view-planner-wizard .wz6-summary-item+.wz6-summary-item{border-left:1px solid #edf2f7}
#view-planner-wizard .wz6-summary-text span{display:block;color:#6e7d92;font-size:12px;margin-bottom:4px}
#view-planner-wizard .wz6-summary-text strong{display:block;color:#112b4a;font-size:15px;line-height:1.25}
#view-planner-wizard .wz6-icon{width:42px;height:42px;flex:0 0 auto;border-radius:12px;background:#ecf8f0;position:relative}
#view-planner-wizard .wz6-icon::before{content:"";position:absolute;inset:10px;border:2px solid #169e50;border-radius:5px}
#view-planner-wizard .wz6-icon::after{content:"";position:absolute;width:10px;height:10px;right:8px;top:8px;border-radius:50%;background:#169e50;opacity:.14}
#view-planner-wizard .wz6-grid-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-bottom:18px;align-items:stretch}
#view-planner-wizard .wz6-card{border:1px solid #dfe5ed;border-radius:16px;box-shadow:0 1px 2px rgba(15,39,71,.03);padding:18px;margin:0}
#view-planner-wizard .wz6-card-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
#view-planner-wizard .wz6-card-head h2{margin:0 0 3px;font-size:16px;color:#112b4a}
#view-planner-wizard .wz6-card-sub{margin:0;color:#718097;font-size:11.5px;line-height:1.5}
#view-planner-wizard .wz6-label,#view-planner-wizard .wz6-section-title{color:#203a59;font-size:12px;font-weight:700;margin:14px 0 8px}
#view-planner-wizard .wz6-mode-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative;border:1px solid #d8e0e9;border-radius:9px;overflow:hidden;margin-bottom:16px}
#view-planner-wizard .wz6-seg,#view-planner-wizard .wz6-vol-btn{appearance:none;border:0;border-right:1px solid #e5eaf0;background:#fff;color:#203a59;min-height:42px;padding:0 9px;font-size:12px;font-weight:600;cursor:pointer}
#view-planner-wizard .wz6-seg:last-of-type,#view-planner-wizard .wz6-vol-btn:last-child{border-right:0}
#view-planner-wizard .wz6-mode-support{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
#view-planner-wizard .wz6-mode-strip:has([data-wiz-click="rate-variable"].active) [data-wz6-mode="variable"],
#view-planner-wizard .wz6-mode-strip:has([data-wiz-click="rate-fixed"].active):has([data-wiz-click="acct-blended"].active) [data-wz6-mode="blended"],
#view-planner-wizard .wz6-mode-strip:has([data-wiz-click="rate-fixed"].active):has([data-wiz-click="acct-peraccount"].active) [data-wz6-mode="peraccount"]{background:#f0faf4;color:#0b9146;box-shadow:inset 0 0 0 1px #78c99c}
#view-planner-wizard .wz6-rate-panel{border-top:1px solid #edf1f5;padding-top:2px}
#view-planner-wizard .wz6-rate-panel[hidden]{display:none!important}
#view-planner-wizard .wz6-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#view-planner-wizard .wz6-return-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}
#view-planner-wizard .wz6-return-col:first-child{padding-right:20px;border-right:1px solid #edf2f7}
#view-planner-wizard .wz6-return-col h3{margin:0 0 10px;color:#203a59;font-size:12px}
#view-planner-wizard .wz6-return-col .wz-field{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:10px;align-items:center;margin-bottom:10px}
#view-planner-wizard .wz6-return-col .wz-field label{margin:0;font-size:11.5px;font-weight:500;color:#62738a}
#view-planner-wizard .wz6-card .wz-field>label{font-size:12px;font-weight:700;color:#203a59;margin-bottom:6px}
#view-planner-wizard .wz6-card input,#view-planner-wizard .wz6-card select,#view-planner-wizard .wz6-ro-suffix .wz-ro{min-height:40px;border-radius:8px;border:1px solid #d7dfe9;background:#fff;font-size:12px}
#view-planner-wizard .wz6-ro-suffix .wz-ro{display:flex;align-items:center;padding:0 12px;width:100%}
#view-planner-wizard .wz6-card .wz-suffix span{min-width:34px}
#view-planner-wizard .wz6-info{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;border:1px solid #cfe0ff;border-radius:9px;background:#eef5ff;color:#3264c6;font-size:11px;line-height:1.5}
#view-planner-wizard .wz6-info-dot{width:16px;height:16px;border-radius:50%;background:#2f6ee8;position:relative;flex:0 0 auto}
#view-planner-wizard .wz6-info-dot::after{content:"i";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800}
#view-planner-wizard .wz6-vol-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;border:1px solid #d8e0e9;border-radius:9px;overflow:hidden;margin-bottom:16px}
#view-planner-wizard .wz6-vol-master{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
#view-planner-wizard .wz6-vol-strip:has(.wz6-vol-master option[value="conservative"]:checked) [data-wz6-vol="conservative"],
#view-planner-wizard .wz6-vol-strip:has(.wz6-vol-master option[value="moderate"]:checked) [data-wz6-vol="moderate"],
#view-planner-wizard .wz6-vol-strip:has(.wz6-vol-master option[value="aggressive"]:checked) [data-wz6-vol="aggressive"],
#view-planner-wizard .wz6-vol-strip:has(.wz6-vol-master option[value="custom"]:checked) [data-wz6-vol="custom"]{background:#f0faf4;color:#0b9146;box-shadow:inset 0 0 0 1px #78c99c}
#view-planner-wizard .wz6-vol-advanced{margin-top:14px;border-top:1px dashed #dfe5ed;padding-top:12px}
#view-planner-wizard .wz6-vol-advanced summary{cursor:pointer;color:#11964c;font-size:12px;font-weight:700}
#view-planner-wizard .wz6-other{padding:18px}
#view-planner-wizard .wz6-other .wz6-card-head{margin-bottom:8px}
#view-planner-wizard .wz6-other-grid{display:grid;grid-template-columns:minmax(280px,1fr) 2fr;gap:20px}
#view-planner-wizard .wz6-other-grid>.wz-field{max-width:420px}
#view-planner-wizard .wz6-card .wz-hint{font-size:11px;line-height:1.5;color:#75849a}
@media(max-width:1100px){#view-planner-wizard .wz6-grid-main{grid-template-columns:1fr}#view-planner-wizard .wz6-return-columns{grid-template-columns:1fr}#view-planner-wizard .wz6-return-col:first-child{border-right:0;padding-right:0}}
@media(max-width:760px){#view-planner-wizard .wz6-summary,#view-planner-wizard .wz6-mode-strip,#view-planner-wizard .wz6-three,#view-planner-wizard .wz6-vol-strip{grid-template-columns:1fr}#view-planner-wizard .wz6-summary-item+.wz6-summary-item{border-left:0;border-top:1px solid #edf2f7}#view-planner-wizard .wz6-seg,#view-planner-wizard .wz6-vol-btn{border-right:0;border-bottom:1px solid #e5eaf0}#view-planner-wizard .wz6-return-col .wz-field{grid-template-columns:1fr}}

/* ========================================================================
   v149.501 design work order — Step 7 Taxes & Strategy
   Literal approved visual treatment wrapped around the gate-verified
   v149.476 functional reference markup. Markup/CSS only; no engine edits.
   ======================================================================== */
#view-planner-wizard [data-wiz-step="7"].wz7-workorder {
  --wz7-green:#0aa054;
  --wz7-green-dark:#078643;
  --wz7-green-soft:#eef9f2;
  --wz7-navy:#0b2450;
  --wz7-text:#203858;
  --wz7-muted:#6b7c96;
  --wz7-line:#dfe6ee;
  --wz7-blue:#1d68e8;
  color:var(--wz7-text);
}
#view-planner-wizard [data-wiz-step="7"] .wz7-context {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  margin:0 0 18px;
}
#view-planner-wizard [data-wiz-step="7"] .wz7-context-item {
  min-height:42px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid var(--wz7-line);
  border-radius:7px;
  background:#fff;
  box-shadow:0 1px 1px rgba(10,35,70,.02);
}
#view-planner-wizard [data-wiz-step="7"] .wz7-context-icon {
  width:18px;height:18px;position:relative;flex:0 0 auto;
}
#view-planner-wizard [data-wiz-step="7"] .wz7-context-icon::before {
  content:"";position:absolute;inset:2px;border:1.7px solid #627795;border-radius:4px;
}
#view-planner-wizard [data-wiz-step="7"] .wz7-context-copy {display:flex;align-items:center;gap:6px;min-width:0;}
#view-planner-wizard [data-wiz-step="7"] .wz7-context-copy span {color:#728099;font-size:11.5px;white-space:nowrap;}
#view-planner-wizard [data-wiz-step="7"] .wz7-context-copy strong {color:var(--wz7-navy);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-planner-wizard [data-wiz-step="7"] .wz7-head {margin:0 0 14px;}
#view-planner-wizard [data-wiz-step="7"] .wz7-head h1 {margin:0 0 5px;font-size:26px;line-height:1.15;letter-spacing:-.025em;color:var(--wz7-navy);}
#view-planner-wizard [data-wiz-step="7"] .wz7-head p {margin:0;font-size:13px;color:#5c7090;}
#view-planner-wizard [data-wiz-step="7"] .wz7-summary {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  background:#fff;
  border:1px solid var(--wz7-line);
  border-radius:9px;
  overflow:hidden;
  margin:0 188px 16px 0;
}
#view-planner-wizard [data-wiz-step="7"] .wz7-summary-item {min-height:70px;display:flex;align-items:center;gap:12px;padding:12px 15px;}
#view-planner-wizard [data-wiz-step="7"] .wz7-summary-item + .wz7-summary-item {border-left:1px solid #e7edf3;}
#view-planner-wizard [data-wiz-step="7"] .wz7-summary-item span:not(.wz7-icon) {display:block;color:#667993;font-size:10.8px;margin-bottom:3px;}
#view-planner-wizard [data-wiz-step="7"] .wz7-summary-item strong {display:block;color:var(--wz7-navy);font-size:11.8px;font-weight:700;}
#view-planner-wizard [data-wiz-step="7"] .wz7-icon {
  width:36px;height:36px;border-radius:9px;background:#e7f7ed;position:relative;display:inline-block;flex:0 0 auto;
}
#view-planner-wizard [data-wiz-step="7"] .wz7-icon::before {content:"";position:absolute;left:9px;top:9px;width:16px;height:16px;border:2px solid var(--wz7-green);border-radius:4px;box-sizing:border-box;}
#view-planner-wizard [data-wiz-step="7"] .wz7-icon::after {content:"";position:absolute;right:7px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--wz7-green);opacity:.22;}
#view-planner-wizard [data-wiz-step="7"] .wz7-layout {display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:18px;align-items:start;}
#view-planner-wizard [data-wiz-step="7"] .wz7-functional-main {min-width:0;}
#view-planner-wizard [data-wiz-step="7"] .wz7-zone {margin:0 0 8px;padding:0;border:0;}
#view-planner-wizard [data-wiz-step="7"] .wz7-zone h3 {margin:0;color:#6b7c96;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:800;}
#view-planner-wizard [data-wiz-step="7"] .wz7-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px;align-items:stretch;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card {
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:14px 14px 12px;
  border:1px solid var(--wz7-line);
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 2px rgba(11,36,80,.025);
}
#view-planner-wizard [data-wiz-step="7"] .wz7-card > h2,
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-card-toprow > h2 {
  position:relative;
  margin:0 0 14px;
  min-height:32px;
  padding:2px 0 0 42px;
  color:var(--wz7-navy);
  font-size:12.8px;
  line-height:1.2;
  font-weight:800;
  text-transform:none;
}
#view-planner-wizard [data-wiz-step="7"] .wz7-card > h2::before,
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-card-toprow > h2::before {
  content:"";position:absolute;left:0;top:0;width:32px;height:32px;border-radius:8px;background:#e7f7ed;
}
#view-planner-wizard [data-wiz-step="7"] .wz7-card > h2::after,
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-card-toprow > h2::after {
  display:block;margin-top:3px;color:#71819a;font-size:9.6px;line-height:1.35;font-weight:400;
}
#view-planner-wizard [data-wiz-step="7"] .wz7-tax-profile > h2::after {content:"Tell us about your tax situation.";}
#view-planner-wizard [data-wiz-step="7"] .wz7-taxability > h2::after {content:"Choose how each income type is treated.";}
#view-planner-wizard [data-wiz-step="7"] .wz7-tax-funding > h2::after {content:"How should we plan for taxes?";}
#view-planner-wizard [data-wiz-step="7"] .wz7-withdrawal > h2::after {content:"Choose how withdrawals are prioritized.";}
#view-planner-wizard [data-wiz-step="7"] .wz7-roth .wz-card-toprow > h2::after {content:"Set your conversion approach.";}
#view-planner-wizard [data-wiz-step="7"] .wz7-harvest > h2::after {content:"Manage taxable gains proactively.";}
#view-planner-wizard [data-wiz-step="7"] .wz7-card > h2::before,
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-card-toprow > h2::before {box-shadow:inset 0 0 0 2px rgba(10,160,84,.15);}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-card-toprow {display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:0;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-card-toprow > h2 {flex:1 1 auto;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-card-toprow > .wz-switch {flex:0 0 auto;margin-top:2px;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card > .wz-hint {
  order:90;
  margin:10px 0 0;
  padding:8px 9px 8px 25px;
  position:relative;
  border-top:1px solid #edf1f5;
  background:linear-gradient(180deg,rgba(248,250,253,.35),rgba(248,250,253,.95));
  color:#76869c;
  font-size:8.6px;
  line-height:1.45;
}
#view-planner-wizard [data-wiz-step="7"] .wz7-card > .wz-hint::before {content:"i";position:absolute;left:7px;top:9px;width:11px;height:11px;border-radius:50%;display:grid;place-items:center;background:#eaf2ff;color:#1d68e8;font-size:7px;font-weight:800;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-grid {display:grid;grid-template-columns:1fr;gap:9px;margin-top:8px!important;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-field {margin:0 0 4px;min-width:0;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-field > label:not(.wz-switch),
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-subhead {display:block;margin:0 0 5px;color:#253d5c;font-size:9.8px;font-weight:700;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-sublabel {color:#7d8ca0;font-size:8.2px;font-weight:500;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card input[type="number"],
#view-planner-wizard [data-wiz-step="7"] .wz7-card input[type="text"],
#view-planner-wizard [data-wiz-step="7"] .wz7-card select,
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-ro {
  width:100%;min-height:34px;box-sizing:border-box;border:1px solid #d6dfe9;border-radius:5px;background:#fff;color:#203858;font-size:10.2px;padding:0 9px;outline:none;
}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-ro {display:flex;align-items:center;background:#fbfcfe;line-height:1.35;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card select:focus,
#view-planner-wizard [data-wiz-step="7"] .wz7-card input:focus {border-color:#75c79a;box-shadow:0 0 0 2px rgba(10,160,84,.08);}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-prefix,
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-suffix {display:grid;align-items:stretch;min-width:0;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-prefix {grid-template-columns:28px minmax(0,1fr);}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-suffix {grid-template-columns:minmax(0,1fr) 32px;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-prefix > span,
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-suffix > span {display:grid;place-items:center;border:1px solid #d6dfe9;background:#fbfcfe;color:#667792;font-size:9px;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-prefix > span {border-right:0;border-radius:5px 0 0 5px;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-suffix > span {border-left:0;border-radius:0 5px 5px 0;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-prefix input {border-radius:0 5px 5px 0;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-suffix input {border-radius:5px 0 0 5px;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-prefix > .wz-hint {grid-column:1/-1;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-hint {color:#7b8aa0;font-size:8.3px;line-height:1.45;margin:5px 0 0;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-hint a {color:#0b9b50;font-weight:700;text-decoration:none;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-switch {display:flex;align-items:flex-start;gap:8px;min-width:0;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-switch-label {font-size:9px;line-height:1.35;color:#253d5c;font-weight:650;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-choice-grid {display:grid;grid-template-columns:1fr;gap:7px;margin:0 0 8px;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-choice {
  position:relative;display:block;width:100%;min-height:43px;padding:8px 9px 8px 26px;text-align:left;border:1px solid #dce3eb;border-radius:6px;background:#fff;color:#24405f;
}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-choice::before {content:"";position:absolute;left:8px;top:11px;width:10px;height:10px;border:1.5px solid #8ea0b8;border-radius:50%;box-sizing:border-box;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-choice.active {border-color:#9bd8b6;background:#f2fbf5;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-choice.active::before {border-color:var(--wz7-green);background:var(--wz7-green);box-shadow:inset 0 0 0 3px #fff;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-choice strong {display:block;margin:0 0 2px;font-size:9.6px;color:#23405f;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-choice p {margin:0;color:#7b8aa0;font-size:8.1px;line-height:1.3;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-badge {display:inline-block;margin:3px 0 0;padding:2px 5px;border-radius:999px;background:#eaf8ef;color:#0a9149;font-size:7.5px;font-weight:750;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-owner-row {display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;padding:9px;border:1px solid #e3e9ef;border-radius:6px;background:#fbfcfe;font-size:8.8px;color:#516a85;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-owner-row > span {font-weight:700;color:#28415e;}
#view-planner-wizard [data-wiz-step="7"] .wz7-card .wz-field-narrow {max-width:none;}
#view-planner-wizard [data-wiz-step="7"] .wz7-advanced-card {margin-top:2px;padding:0;overflow:hidden;}
#view-planner-wizard [data-wiz-step="7"] .wz7-advanced-card details {margin:0;border:0;padding:0;}
#view-planner-wizard [data-wiz-step="7"] .wz7-advanced-card summary {cursor:pointer;list-style:none;padding:14px 16px;color:var(--wz7-navy);font-size:10.5px;font-weight:800;background:#fbfcfe;}
#view-planner-wizard [data-wiz-step="7"] .wz7-advanced-card summary::-webkit-details-marker {display:none;}
#view-planner-wizard [data-wiz-step="7"] .wz7-advanced-card details[open] {padding-bottom:14px;}
#view-planner-wizard [data-wiz-step="7"] .wz7-advanced-card details > .wz-hint {margin:0 16px 10px;}
#view-planner-wizard [data-wiz-step="7"] .wz7-advanced-card .wz-grid {grid-template-columns:repeat(4,minmax(0,1fr));margin:0 16px!important;}
#view-planner-wizard [data-wiz-step="7"] .wz7-aside {position:sticky;top:16px;margin-top:-86px;}
#view-planner-wizard [data-wiz-step="7"] .wz7-tip {min-height:430px;padding:16px 14px;border:1px solid #bfe1cb;border-radius:9px;background:#fbfefc;color:#314c68;}
#view-planner-wizard [data-wiz-step="7"] .wz7-tip-head {display:flex;align-items:center;gap:9px;margin-bottom:10px;}
#view-planner-wizard [data-wiz-step="7"] .wz7-tip-head .wz7-icon {width:28px;height:28px;border-radius:8px;background:#eef9f2;}
#view-planner-wizard [data-wiz-step="7"] .wz7-tip h2 {margin:0;color:var(--wz7-navy);font-size:11.5px;}
#view-planner-wizard [data-wiz-step="7"] .wz7-tip > p {margin:0 0 20px;color:#566c87;font-size:9.6px;line-height:1.65;}
#view-planner-wizard [data-wiz-step="7"] .wz7-tip h3 {margin:0 0 12px;color:var(--wz7-navy);font-size:10px;}
#view-planner-wizard [data-wiz-step="7"] .wz7-tip ul {list-style:none;margin:0;padding:0;display:grid;gap:17px;}
#view-planner-wizard [data-wiz-step="7"] .wz7-tip li {display:flex;align-items:flex-start;gap:8px;color:#4f6883;font-size:9.2px;line-height:1.55;}
#view-planner-wizard [data-wiz-step="7"] .wz7-check {width:14px;height:14px;display:grid;place-items:center;border:1px solid #14a45b;border-radius:50%;color:#14a45b;font-size:8px;font-weight:800;flex:0 0 auto;margin-top:1px;}
#view-planner-wizard [data-wiz-step="7"] .wz7-learn {display:inline-block;margin-top:20px;color:#0c9a50;font-size:9.4px;font-weight:700;text-decoration:none;}
@media(max-width:1180px){
  #view-planner-wizard [data-wiz-step="7"] .wz7-summary{margin-right:0;}
  #view-planner-wizard [data-wiz-step="7"] .wz7-layout{grid-template-columns:1fr;}
  #view-planner-wizard [data-wiz-step="7"] .wz7-aside{position:static;margin-top:0;}
  #view-planner-wizard [data-wiz-step="7"] .wz7-tip{min-height:auto;}
}
@media(max-width:900px){
  #view-planner-wizard [data-wiz-step="7"] .wz7-grid,
  #view-planner-wizard [data-wiz-step="7"] .wz7-summary,
  #view-planner-wizard [data-wiz-step="7"] .wz7-context{grid-template-columns:1fr 1fr;}
  #view-planner-wizard [data-wiz-step="7"] .wz7-advanced-card .wz-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:620px){
  #view-planner-wizard [data-wiz-step="7"] .wz7-grid,
  #view-planner-wizard [data-wiz-step="7"] .wz7-summary,
  #view-planner-wizard [data-wiz-step="7"] .wz7-context,
  #view-planner-wizard [data-wiz-step="7"] .wz7-advanced-card .wz-grid{grid-template-columns:1fr;}
}

/* ========================================================================== 
   v149.501 design work order — Step 8 literal Review & Confirm treatment
   Markup/CSS only. Existing app.js owns review chips, readiness and save/run.
   ========================================================================== */
#view-planner-wizard .wz8-literal {
  --wz8-navy: #0e1d4d;
  --wz8-text: #203154;
  --wz8-muted: #697994;
  --wz8-green: #079b50;
  --wz8-green-dark: #078a48;
  --wz8-line: #dfe5ed;
  --wz8-soft: #f7faf8;
  padding-bottom: 0;
}
#view-planner-wizard .wz8-context {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
#view-planner-wizard .wz8-context-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--wz8-line);
  border-radius: 8px;
  background: #fff;
}
#view-planner-wizard .wz8-context-icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 1.5px solid #637390;
  border-radius: 6px;
}
#view-planner-wizard .wz8-context-icon::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  right: 3px;
  top: 3px;
  border-radius: 50%;
  background: #637390;
  opacity: .2;
}
#view-planner-wizard .wz8-context-copy {
  min-width: 0;
  display: flex;
  gap: 5px;
  align-items: baseline;
  white-space: nowrap;
}
#view-planner-wizard .wz8-context-copy span {
  color: #6d7a91;
  font-size: 11.5px;
}
#view-planner-wizard .wz8-context-copy strong {
  overflow: hidden;
  color: var(--wz8-navy);
  font-size: 11.5px;
  font-weight: 750;
  text-overflow: ellipsis;
}
#view-planner-wizard .wz8-head {
  margin-bottom: 14px;
}
#view-planner-wizard .wz8-head h1 {
  margin-bottom: 5px;
  color: var(--wz8-navy);
  font-size: 24px;
  line-height: 1.18;
}
#view-planner-wizard .wz8-head p {
  margin: 0;
  color: #5f708c;
  font-size: 12.5px;
}
#view-planner-wizard .wz8-ready {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  margin-bottom: 14px;
  padding: 13px 18px 13px 14px;
  border: 1px solid #c7e6d3;
  border-radius: 11px;
  background: linear-gradient(90deg, #fbfefc 0%, #f3fbf6 100%);
}
#view-planner-wizard .wz8-ready-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
#view-planner-wizard .wz8-ready-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--wz8-green);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}
#view-planner-wizard .wz8-ready-copy {
  display: grid;
  gap: 3px;
}
#view-planner-wizard .wz8-ready-title {
  color: var(--wz8-green-dark);
  font-size: 13px;
  font-weight: 800;
}
#view-planner-wizard .wz8-ready-warn { display: none; color: #a6640a; }
#view-planner-wizard .wz8-ready-default,
#view-planner-wizard .wz8-readiness-note {
  margin: 0;
  color: #536983;
  font-size: 11.25px;
  line-height: 1.45;
}
#view-planner-wizard .wz8-ready-check {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid #b8e5c8;
  border-radius: 50%;
  background: #dcf7e6;
  color: var(--wz8-green);
  font-size: 18px;
  font-weight: 900;
}
#view-planner-wizard .wz8-ready:has(.wz8-readiness-note:not(:empty)) {
  border-color: #edc37b;
  background: linear-gradient(90deg, #fffdf8 0%, #fff8e9 100%);
}
#view-planner-wizard .wz8-ready:has(.wz8-readiness-note:not(:empty)) .wz8-ready-icon,
#view-planner-wizard .wz8-ready:has(.wz8-readiness-note:not(:empty)) .wz8-ready-check {
  background: #fff2d8;
  border-color: #efc36f;
  color: #b06a07;
}
#view-planner-wizard .wz8-ready:has(.wz8-readiness-note:not(:empty)) .wz8-ready-ok,
#view-planner-wizard .wz8-ready:has(.wz8-readiness-note:not(:empty)) .wz8-ready-default {
  display: none;
}
#view-planner-wizard .wz8-ready:has(.wz8-readiness-note:not(:empty)) .wz8-ready-warn { display: block; }
#view-planner-wizard .wz8-planbar {
  display: grid;
  grid-template-columns: auto minmax(210px, 360px) 1fr;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
#view-planner-wizard .wz8-planbar > label {
  color: #263858;
  font-size: 11.5px;
  font-weight: 720;
}
#view-planner-wizard .wz8-plan-input {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid #d8dfe9;
  border-radius: 7px;
  background: #fff;
  color: var(--wz8-navy);
  font-size: 11.5px;
}
#view-planner-wizard .wz8-save-status {
  margin: 0;
  color: #6a7990;
  font-size: 10.5px;
}
#view-planner-wizard .wz8-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 22px;
  align-items: start;
}
#view-planner-wizard .wz8-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
#view-planner-wizard .wz8-review-grid .wz-review-card {
  display: block;
  min-height: 142px;
  margin: 0;
  padding: 15px 16px 13px;
  border: 1px solid var(--wz8-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}
#view-planner-wizard .wz8-review-grid .wz-review-card:nth-child(8) { display: none; }
#view-planner-wizard .wz8-review-grid .wz-review-card.wz-review-warn {
  border-color: #e8b45b;
  box-shadow: inset 3px 0 0 #e8a52d;
}
#view-planner-wizard .wz8-review-grid .wz-review-head {
  display: flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: 10px;
}
#view-planner-wizard .wz8-review-grid .wz-review-head h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--wz8-navy);
  font-size: 13px;
  font-weight: 780;
}
#view-planner-wizard .wz8-review-grid .wz-review-head h3::before {
  width: 25px;
  height: 25px;
  flex-basis: 25px;
  border-radius: 8px;
  background: #ecf8f0;
  box-shadow: inset 0 0 0 1px #d6efdf;
}
#view-planner-wizard .wz8-review-grid .wz-review-head .wz-linkbtn {
  margin-left: auto;
  padding: 0;
  border: 0;
  color: var(--wz8-green);
  background: transparent;
  font-size: 11px;
  font-weight: 800;
}
#view-planner-wizard .wz8-review-grid .wz-review-head .wz-linkbtn::after {
  content: " ✎";
}
#view-planner-wizard .wz8-review-grid .wz-review-chips,
#view-planner-wizard .wz8-review-grid .wz-review-card.wz-expanded .wz-review-chips {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-height: none;
  margin: 0;
  overflow: visible;
}
#view-planner-wizard .wz8-review-grid .wz-review-chip {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  min-height: 24px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: #687994;
  font-size: 10.8px;
  line-height: 1.35;
  white-space: normal;
}
#view-planner-wizard .wz8-review-grid .wz-review-chip strong {
  color: #263858;
  font-size: 10.8px;
  font-weight: 680;
  text-align: right;
}
#view-planner-wizard .wz8-aside {
  display: grid;
  gap: 13px;
}
#view-planner-wizard .wz8-sidecard {
  padding: 15px 16px;
  border: 1px solid var(--wz8-line);
  border-radius: 11px;
  background: #fff;
}
#view-planner-wizard .wz8-side-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
#view-planner-wizard .wz8-side-head h2 {
  margin: 0;
  color: var(--wz8-navy);
  font-size: 13px;
  font-weight: 800;
}
#view-planner-wizard .wz8-side-icon {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: #e7f7ed;
}
#view-planner-wizard .wz8-side-icon::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid var(--wz8-green);
  border-radius: 4px;
}
#view-planner-wizard .wz8-snapshot-box {
  padding: 8px 12px;
  border: 1px solid #e2e7ef;
  border-radius: 9px;
}
#view-planner-wizard .wz8-snapshot-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 8px 0;
  color: #314260;
  font-size: 10.6px;
}
#view-planner-wizard .wz8-snapshot-row strong { font-weight: 700; }
#view-planner-wizard .wz8-snapshot-row span { color: #556681; text-align: right; }
#view-planner-wizard .wz8-next {
  border-color: #cce6d5;
  background: linear-gradient(145deg, #fbfefc 0%, #f3faf6 100%);
}
#view-planner-wizard .wz8-next-row {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 10px;
}
#view-planner-wizard .wz8-next-row p {
  margin: 0;
  color: #526681;
  font-size: 10.6px;
  line-height: 1.55;
}
#view-planner-wizard .wz8-num {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--wz8-green);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}
#view-planner-wizard .wz8-dest-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #edf0f4;
  color: inherit;
  text-decoration: none;
}
#view-planner-wizard .wz8-dest-row:first-of-type { border-top: 0; }
#view-planner-wizard .wz8-dest-row strong,
#view-planner-wizard .wz8-dest-row small { display: block; }
#view-planner-wizard .wz8-dest-row strong { color: var(--wz8-navy); font-size: 11px; }
#view-planner-wizard .wz8-dest-row small { margin-top: 2px; color: #74839a; font-size: 9.8px; }
#view-planner-wizard .wz8-actions {
  display: grid;
  grid-template-columns: 160px 1fr minmax(240px, 330px);
  gap: 18px;
  align-items: center;
  margin: 18px -30px -28px;
  padding: 14px 30px;
  border-top: 1px solid #dfe4eb;
  background: #fff;
}
#view-planner-wizard .wz8-actions .wz8-back { justify-self: start; }
#view-planner-wizard .wz8-actions .wz8-save { justify-self: center; }
#view-planner-wizard .wz8-actions .wz8-run {
  justify-self: stretch;
  width: 100%;
  min-height: 46px;
}
#view-planner-wizard .wz8-actions .wz8-run:disabled {
  cursor: not-allowed;
  opacity: .45;
}
/* Step 8 owns its literal bottom action bar. Keep the shared footer unchanged
   for Steps 1–7, but remove it when Step 8 is the visible panel. */
#view-planner-wizard:has(.wz8-literal:not([hidden])) .wz-footer { display: none; }

@media (max-width: 1180px) {
  #view-planner-wizard .wz8-layout { grid-template-columns: 1fr; }
  #view-planner-wizard .wz8-aside { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  #view-planner-wizard .wz8-context,
  #view-planner-wizard .wz8-review-grid,
  #view-planner-wizard .wz8-aside { grid-template-columns: 1fr 1fr; }
  #view-planner-wizard .wz8-actions { grid-template-columns: 1fr 1fr; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  #view-planner-wizard .wz8-actions .wz8-run { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  #view-planner-wizard .wz8-context,
  #view-planner-wizard .wz8-review-grid,
  #view-planner-wizard .wz8-aside,
  #view-planner-wizard .wz8-planbar,
  #view-planner-wizard .wz8-actions { grid-template-columns: 1fr; }
  #view-planner-wizard .wz8-planbar { align-items: stretch; }
  #view-planner-wizard .wz8-actions .wz8-back,
  #view-planner-wizard .wz8-actions .wz8-save,
  #view-planner-wizard .wz8-actions .wz8-run { justify-self: stretch; width: 100%; }
}

/* v149.507 — Jahn QA item 4: Spending pattern aligns to the card's left
   edge with Annual Spending (was indented by the grid column offset). */
#view-planner-wizard .wz4-pattern-field { grid-column: 1 / -1; justify-self: start; margin-left: 0; padding-left: 0; }

/* v149.509 — How-to-Use modal (Jahn mock). Token-driven; no hardcoded palette. */
.nm-howto-overlay{position:fixed;inset:0;background:rgba(13,42,91,.45);display:grid;place-items:center;z-index:1200;padding:20px}
.nm-howto-overlay[hidden]{display:none}
.nm-howto-dialog{background:var(--color-surface,#fff);border-radius:18px;max-width:1100px;width:100%;max-height:92vh;overflow:auto;padding:0 34px 26px;box-shadow:0 24px 70px rgba(20,45,80,.35)}
.nm-howto-topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--color-border,#e3eaf3);margin:0 -34px 8px;padding-left:34px;padding-right:22px}
.nm-howto-kicker{color:var(--color-primary-strong,#0b6b43);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.nm-howto-x{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:var(--color-text,#0d2a5b)}
.nm-howto-dialog h1{text-align:center;margin:18px 0 6px;font-size:34px}
.nm-howto-sub{text-align:center;color:var(--color-text-muted,#60789a);margin:0 0 22px}
.nm-howto-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.nm-howto-card{border:1px solid var(--color-border,#e3eaf3);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px}
.nm-howto-num{width:34px;height:34px;border-radius:50%;background:var(--color-primary-strong,#0b6b43);color:#fff;display:grid;place-items:center;font-weight:800}
.nm-howto-card h2{margin:2px 0 0;font-size:19px;color:var(--color-primary-strong,#0b6b43)}
.nm-howto-card p{margin:0;font-size:13.5px;line-height:1.55;flex:1}
.nm-howto-card a{color:var(--color-primary-strong,#0b6b43);font-weight:700;text-decoration:none;border-top:1px solid var(--color-border,#e8eef6);padding-top:10px}
.nm-howto-strip{display:flex;gap:14px;justify-content:center;align-items:center;background:var(--color-surface-alt,#f4f7fb);border-radius:12px;padding:12px;margin-top:20px;font-weight:700;font-size:13px;flex-wrap:wrap}
.nm-howto-strip i{font-style:normal;background:var(--color-primary-strong,#0b6b43);color:#fff;border-radius:50%;width:22px;height:22px;display:inline-grid;place-items:center;margin-right:6px;font-size:12px}
.nm-howto-foot{text-align:center;margin:18px 0 0;color:var(--color-text-muted,#60789a)}
.wz-howto-link{margin-top:10px;border:0;background:transparent;color:var(--color-primary-strong,#0b6b43);font-weight:700;font-size:13px;cursor:pointer;text-align:left;padding:0}
.nm-howto-navlink{border:0;background:transparent;color:var(--color-primary-strong,#0b6b43);font-weight:700;cursor:pointer}
@media (max-width:900px){.nm-howto-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.nm-howto-grid{grid-template-columns:1fr}}

/* v149.510 — How-to-Use trigger in the WORKSPACE left sidebar (Jahn: the
   placement he asked for; styled as a nav row, button element for a11y). */
.nm-dash-nav .nm-howto-sidelink{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:12px;color:#14335f;font-size:14px;font-weight:600;border:0;background:transparent;cursor:pointer;text-align:left;width:100%}
.nm-dash-nav .nm-howto-sidelink:hover{background:#eaf4ff;color:#0664e8}
.nm-dash-nav .nm-howto-sidelink .nm-ui-icon{width:18px;text-align:center;color:#6982a7}

/* v149.514 — footer Run on steps 1-7 (one shared handler with step 8). */
.wz-footer .wz-footer-run{margin-left:auto;margin-right:12px}