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

/* ==========================================================================
   Accessibility utilities
   ========================================================================== */

/* Visually-hidden but available to assistive tech */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0;
}

/* Skip-to-content link — first focusable element on the page */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: #fff;
  color: #0f172a;
  padding: 8px 12px;
  border-radius: 6px;
  z-index: 1000;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.skip-link:focus { top: 8px; }

/* Global keyboard focus indicator. Uses :focus-visible so mouse clicks don't
   add a ring, but Tab/keyboard activation does. The selectors target every
   interactive surface; inputs/selects keep their custom box-shadow ring below. */
button:focus-visible,
.btn:focus-visible,
.btn-icon:focus-visible,
.tab:focus-visible,
.top-tab:focus-visible,
.iv-subtab:focus-visible,
.file-menu-item:focus-visible,
.modal-x:focus-visible,
a:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* App-bar buttons sit on a dark background — use white outline so the ring
   reads against the gradient as well as the dark surface. */
.appbar button:focus-visible,
.appbar .btn:focus-visible,
.appbar .btn-icon:focus-visible {
  outline-color: #ffffff;
}

/* Reduced motion: collapse transitions and animations for users who request it.
   Keep functional transforms (drag handles, expanded states) but cut their
   transition durations so motion is not used as a primary signal. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}



:root {
  --bg: #eef1f6;
  --bg-sunken: #e4e9f1;
  --card: #ffffff;
  --primary: #4f46e5;          /* indigo accent */
  --primary-hover: #4338ca;
  --primary-soft: #eef2ff;
  --primary-soft-2: #e0e7ff;
  --accent: #0ea5e9;
  --success: #16a34a;
  --success-soft: #dcfce7;
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --danger-soft: #fef2f2;
  --warn-soft: #fef9c3;
  --text: #0f172a;             /* slate-900 */
  --text-2: #334155;           /* slate-700 */
  --muted: #475569;            /* slate-600 — raised from slate-500 for AA contrast on white/card surfaces */
  --muted-dark: #64748b;       /* legacy muted (slate-500) — reserved for ≥18px or supplementary text */
  --border: #e2e8f0;           /* slate-200 */
  --border-strong: #cbd5e1;    /* slate-300 */
  --input-border: #cbd5e1;
  /* Dark app bar */
  --bar-bg: #0f172a;
  --bar-bg-2: #1e293b;
  --bar-text: #e2e8f0;
  --bar-muted: #94a3b8;
  --bar-border: #334155;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.07);
  --shadow-md: 0 4px 14px rgba(15,23,42,.10);
  --shadow-lg: 0 18px 48px rgba(15,23,42,.22);
}

html { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Lock to viewport — the three top panels share a single fixed canvas. */
  margin: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#app {
  max-width: 1040px;
  margin: 0 auto;
  padding: 20px;
  /* Fill remaining viewport height beneath the appbar; children (tabs +
     active panel) lay out vertically and the active panel takes the rest. */
  flex: 1;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Single consolidated top app bar (brand · file · run/optimize · about/settings) */
header.appbar {
  position: sticky;
  top: 0;
  z-index: 90;
  background: linear-gradient(180deg, var(--bar-bg-2), var(--bar-bg));
  border-bottom: 1px solid var(--bar-border);
  box-shadow: 0 1px 3px rgba(15,23,42,.18);
}
.appbar-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; }
.brand-mark {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), #6366f1);
  color: #fff;
  font-weight: 700; font-size: 17px;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(79,70,229,.5);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
h1.brand-title, .brand-title { font-size: 16px; font-weight: 650; color: #fff; white-space: nowrap; letter-spacing: .2px; margin: 0; padding: 0; line-height: inherit; }
.brand-sub { font-size: 11px; color: var(--bar-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Top-align so the File / Find Best Plan / Max Spending / hamburger buttons
   line up with the Run Simulation button at the top of its run-wrap, rather
   than centering against the taller run-wrap (button + progress bar). The
   dividers are short and read fine top-aligned too. */
.appbar-actions { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.appbar-actions > .appbar-div { margin-top: 5px; }
.appbar-div { width: 1px; height: 22px; background: var(--bar-border); }
#file-bar { display: flex; gap: 6px; }
.file-menu { position: relative; }
.file-menu-caret { font-size: 10px; margin-left: 4px; opacity: .75; }
.file-menu-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 140px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 4px;
  display: none;
  z-index: 100;
}
.file-menu.open .file-menu-dropdown { display: block; }
.file-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 7px 12px;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.file-menu-item:hover { background: var(--primary-soft); color: var(--primary); }
.file-menu-sep { height: 1px; background: var(--border); margin: 4px 6px; }
.hamburger-dropdown { left: auto; right: 0; min-width: 170px; }
.appbar .run-wrap { margin: 0; }

/* App-bar buttons sit on a dark surface */
.appbar .btn-secondary {
  background: rgba(255,255,255,.08);
  color: var(--bar-text);
  border: 1px solid var(--bar-border);
}
.appbar .btn-secondary:hover { background: rgba(255,255,255,.16); }
.appbar .btn-icon { color: var(--bar-muted); }
.appbar .btn-icon:hover { background: rgba(255,255,255,.12); color: #fff; }
.appbar .btn-icon svg circle[stroke],
.appbar .btn-icon svg path[stroke] { stroke: currentColor; }
.appbar .btn-icon svg circle[fill],
.appbar .btn-icon svg rect[fill] { fill: currentColor; }

@media (max-width: 860px) {
  .appbar-inner { flex-wrap: wrap; }
  .brand-sub { display: none; }
}

/* ============================================================
   Responsive: tablet (≤860px) and phone (≤640px) layouts.
   ============================================================ */

/* iOS Safari auto-zooms when a focused input's font-size <16px.
   Bump inputs to 16px on touch-sized viewports to suppress that. */
@media (max-width: 768px) {
  input[type="text"], input[type="number"], textarea, select,
  #chat-input, #iv-input { font-size: 16px; }
}

@media (max-width: 860px) {
  #app { padding: 14px; }
  .card { padding: 18px; }

  /* Vertical tab rail → horizontal scrollable strip. */
  #baseline-form { flex-direction: column; gap: 14px; align-items: stretch; }
  .tabs {
    flex-direction: row;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0 0 4px;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    gap: 2px;
    scrollbar-width: thin;
  }
  .tab {
    flex: 0 0 auto;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: 7px 7px 0 0;
    padding: 8px 14px;
    white-space: nowrap;
  }
  .tab.active { border-left-color: transparent; border-bottom-color: var(--primary); }
  .tab-spacer { display: none; }

  /* Detail report: allow horizontal scroll of the wide table. */
  #detail-section { width: auto; min-width: 0; max-width: 100%; }
  #detail-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 640px) {
  #app { padding: 10px; }
  .appbar-inner { padding: 8px 10px; gap: 8px; }
  .appbar-actions { gap: 4px; width: 100%; justify-content: flex-start; }
  .appbar-div { display: none; }
  .brand-title { font-size: 15px; }
  .appbar .btn-sm { padding: 5px 9px; font-size: 12px; }
  #file-bar { display: none; }

  .card { padding: 14px; border-radius: 10px; margin-bottom: 12px; }
  .card h2 { font-size: 15px; margin-bottom: 12px; }

  .top-tabs { gap: 2px; padding-top: 8px; }
  .top-tab { padding: 9px 14px; font-size: 13px; border-radius: 8px 8px 0 0; }

  /* Editor popup form grids collapse to single column. */
  #acct-editor-body .form-row,
  #reloc-editor-body .form-row,
  .opt-group .form-row {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
  #acct-editor-body .form-row label,
  #reloc-editor-body .form-row label,
  .opt-group .form-row label { text-align: left; }
  #acct-editor-body .form-row > input,
  #acct-editor-body .form-row > select,
  #reloc-editor-body .form-row > input,
  #reloc-editor-body .form-row > select,
  .opt-group .form-row > input,
  .opt-group .form-row > select { width: 100%; justify-self: stretch; max-width: 100%; }

  /* Inputs stretch by default; let typed-in text fields fill the row. */
  input[type="text"] { width: 100%; max-width: 100%; }
  .form-row { gap: 8px; }

  /* Modals: near-full-screen on phones. */
  .modal { width: 96%; max-width: 96vw !important; max-height: 92vh; }
  .modal-body { padding: 14px 14px 16px; }
  .modal-titlebar { padding: 8px 6px 8px 12px; }
  .modal-titlebar h2, .modal-titlebar h3 { font-size: 15px; }

  /* Chat panel: full width slide-in on phones. */
  #chat-panel { width: 100vw; right: -100vw; }
  .chat-msg-user, .chat-msg-ai { max-width: 92%; }

  /* Scenario header title input stretches to row width. */
  .scenario-header { flex-wrap: wrap; }
  .scenario-header input[type="text"] { width: 100%; min-width: 0; flex: 1 1 100%; order: -1; }

  /* Wrap-aware rows so they don't overflow on phones. */
  .wo-item, .income-period, .transfer-row, .reloc-row > span,
  .override-item, .transfer-item, .account-row { flex-wrap: wrap; }
  .income-period input[type="number"] { width: 70px; }
  .income-period .ip-amount { width: 110px; }
  .ar-name { min-width: 0; flex: 1 1 100%; }
  .ar-meta { flex: 1 1 100%; }

  /* Tooltips wrap on phones (the base style is nowrap). */
  .custom-tooltip { white-space: normal; max-width: calc(100vw - 16px); }
  .custom-tooltip td, .custom-tooltip td:first-child { white-space: normal; }

  /* Detail table: tighter padding so more columns fit before scroll. */
  .detail-table { font-size: 12px; }
  .detail-table th, .detail-table td { padding: 5px 7px; }

  /* Estate summary stacks. */
  .estate-summary { gap: 18px; }
  .es-block { min-width: 0; width: 100%; }
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 16px;
}
.card h2 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Tabs — vertical nav column on the left, content on the right */
#baseline-form { display: flex; align-items: flex-start; gap: 20px; }
.tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
  width: 168px;
  border-right: 1px solid var(--border);
  padding-right: 8px;
  margin: -4px 0 0;
}
.tab {
  padding: 9px 14px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 550;
  font-family: inherit;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  border-left: 2px solid transparent;
  border-radius: 0 7px 7px 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tab:hover { color: var(--text); background: var(--bg-sunken); }
.tab.active { color: var(--primary); border-left-color: var(--primary); font-weight: 650; }
/* Group the first five (wizard-driven) tabs in primary indigo and the two
   "advanced" tabs (Parameters, Scenarios) in the success/emerald accent, so
   the user can see at a glance which controls the Interview is going to
   populate and which ones they configure themselves. */
.tab-wizard.active { color: var(--primary); border-left-color: var(--primary); }
.tab-advanced { color: var(--text-2); }
.tab-advanced.active { color: var(--success); border-left-color: var(--success); }
.tab-divider { height: 1px; background: var(--border); margin: 8px 0; }
.tab-spacer { flex: 1; }
.tab-content { display: none; }
.tab-content.active { display: block; flex: 1; min-width: 0; }
.card h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 16px 0 8px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.card h3:first-child { margin-top: 0; }
.tab-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px 14px;
  margin-bottom: 14px;
  background: var(--card);
}
.tab-section > h3:first-child { margin-top: 0; }
.tab-section + .tab-section { margin-top: 0; }
.view-mode-btn {
  background: var(--card);
  color: var(--muted);
  border: 1px solid var(--input-border);
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.2;
}
.view-mode-btn:first-child { border-radius: 6px 0 0 6px; }
.view-mode-btn:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.view-mode-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.view-mode-btn:hover:not(.active) { background: var(--bg); }

/* Forms */
.form-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.form-row label {
  font-size: 13px;
  color: var(--muted);
  min-width: 50px;
}
input[type="text"], input[type="number"], select {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--input-border);
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.18);
}
input[type="number"] { width: 110px; }
input.money { width: 120px; }
input[type="text"] { width: 160px; }
/* Dropdowns size to their longest option (Chromium auto-sizes a width:auto
   <select> to its widest option); the extra right padding keeps ≥5px between the
   option text and the native arrow. max-width:100% prevents grid/flex overflow. */
select { width: auto; max-width: 100%; padding: 0 30px 0 10px; }

/* Settings field grid (Household & Parameters tabs) */
.settings-grid { display: flex; flex-direction: column; gap: 18px; }
.field-row { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: flex-start; }
.field { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.field > label { font-size: 12px; color: var(--muted); font-weight: 500; line-height: 1.3; }
.field input { width: 100%; min-width: 0; }
/* dropdowns size to their longest option rather than the fixed field width */
.field select { width: auto; max-width: 100%; min-width: 0; }
.field-control { display: flex; align-items: center; gap: 7px; }
.field-control input { flex: 1; }
.field .unit { font-size: 13px; color: var(--muted); }
.field.sm { width: 96px; }
.field.md { width: 144px; }
.field.lg { width: 212px; }
.field.auto { width: auto; }
.field-note { font-size: 12px; color: var(--muted); margin: 12px 0 0; max-width: 680px; line-height: 1.55; }
.reloc-hint { font-size: 12px; color: var(--muted); }

/* ---- Relocate editor: stacked enable-toggle sections ---- */
#reloc-editor-body .form-row {
  display: grid;
  grid-template-columns: 130px 1fr 110px 1fr;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 10px;
}
#reloc-editor-body .form-row label {
  min-width: 0; text-align: right; font-size: 13px; color: var(--text-2); font-weight: 500;
}
#reloc-editor-body .form-row > input { width: 100%; min-width: 0; }
#reloc-editor-body .form-row > select { justify-self: start; min-width: 0; }

.reloc-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fafbfc;
}
.reloc-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--text);
  cursor: pointer; margin: 0;
}
.reloc-check input[type="checkbox"],
.reloc-check input[type="radio"] { width: 16px; height: 16px; accent-color: var(--primary); flex: none; }
.reloc-row > span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; font-size: 13px; color: var(--text-2); }
.reloc-row > span select,
.reloc-row > span input { height: 32px; }
.reloc-row > span input[type="number"] { width: 80px; }
.reloc-row > div { margin-top: 10px; padding-left: 26px; }
.reloc-row .form-row { margin-bottom: 8px; }
.reloc-row .form-row .reloc-check { font-weight: 500; }
.reloc-row .reloc-hint { display: block; margin-top: 4px; width: 100%; }
details.advanced { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
details.advanced > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--primary); list-style: none; display: inline-flex; align-items: center; gap: 7px; user-select: none; }
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary::before { content: '\25B8'; font-size: 11px; transition: transform 0.15s; }
details.advanced[open] > summary::before { transform: rotate(90deg); }
details.advanced > .settings-grid { margin-top: 16px; }

/* "What's this page for?" intro shown at the top of each tab */
details.page-help {
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  background: #f8faff;
  padding: 10px 14px;
  margin-bottom: 16px;
}
details.page-help > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  user-select: none;
}
details.page-help > summary::-webkit-details-marker { display: none; }
details.page-help > summary::before { content: '\25B8'; font-size: 11px; transition: transform 0.15s; }
details.page-help[open] > summary::before { transform: rotate(90deg); }
.page-help-body { font-size: 13px; color: var(--text); line-height: 1.6; margin-top: 10px; max-width: 680px; }
.page-help-body p { margin-bottom: 8px; }
.page-help-body p:last-child { margin-bottom: 0; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 550;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.05s;
  white-space: nowrap;
}
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(79,70,229,0.4); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); }
.btn-secondary { background: #eef2f7; color: var(--text-2); border-color: var(--border); }
.btn-secondary:hover { background: #e2e8f0; }
.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 18px;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
}
.btn-icon:hover { background: var(--danger-soft); color: var(--danger); }

/* Account rows */
.account-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s;
}
.account-row:hover { background: #f9fafb; }
.ar-name { font-weight: 600; min-width: 120px; }
.ar-meta { color: var(--muted); flex: 1; font-size: 12px; }
.ar-bal { font-variant-numeric: tabular-nums; font-weight: 500; min-width: 90px; text-align: right; }
.account-row .wo-btn, .account-row .btn-icon { flex-shrink: 0; }

/* ---- Editor popups: label/control grid with content-sized columns ----
   Columns are auto-sized: each label column hugs its widest label (and is
   right-aligned so labels sit beside their control), each control column is as
   wide as its content, so dropdowns show their longest option and nothing
   stretches across columns. */
#acct-editor-body .form-row {
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: start;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 10px;
}
#acct-editor-body .form-row label {
  text-align: right;
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
}
/* inputs keep their natural widths (110/120/160px base); selects size to their
   widest option via the global select { width:auto }. */

#acct-editor-body h3 {
  grid-column: 1 / -1;
  margin: 16px 0 8px;
  padding-bottom: 5px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
#acct-editor-body h3:first-child { margin-top: 0; }

.row-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  margin: -2px 0 12px;
}
#acct-editor-body .vest-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#acct-editor-body .vest-row input[type="number"] { width: 80px; }

/* Income periods */
.income-period {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.income-period input[type="number"] { width: 90px; }
.income-period .ip-amount { width: 120px; }
.income-period .ip-name { width: 180px; }
.income-period span { color: var(--muted); font-size: 13px; }
/* Pair of "+ Add Period" / "+ Add 1-Time Event" buttons under each schedule. */
.cf-add-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
/* Go/Slow/No grouping — the base-amount textbox sits next to its button so it's
   visually clear that the textbox feeds the button. */
.cf-gogo { display: inline-flex; gap: 8px; align-items: center; margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--border); }
.cf-gogo .cf-gogo-base { width: 110px; }

/* Transfer schedule rows (Transfers tab) */
.transfer-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.transfer-row span { color: var(--muted); font-size: 13px; }
.transfer-row .tr-arrow { font-size: 22px; line-height: 1; color: var(--text); }
.transfer-row select { min-width: 0; max-width: 150px; }
.transfer-row input[type="number"] { width: 61px; }
.transfer-row .tr-amount { width: 120px; }

/* Inherited baseline transfers in the scenario editor (toggle off per scenario) */
.inherited-transfers { margin-bottom: 10px; }
.inherit-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 4px; }
.inherit-transfer { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 2px 0; cursor: pointer; }
.inherit-transfer.tf-off span { text-decoration: line-through; color: var(--muted); }

/* Scenario-only accounts list (synthesized by Find Best Plan or added manually) */
.scen-new-accts { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.scen-new-acct { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: #fafbfc; }
.scen-new-acct-name { font-size: 13px; font-weight: 600; }
.scen-new-acct-meta { font-size: 12px; color: var(--muted); flex: 1; }
.scen-new-acct-empty { font-size: 12px; color: var(--muted); padding: 6px 0; }
/* "Override baseline accounts" row — one per baseline account, opens the
   account editor in scenario-override mode. */
.scen-override-accts { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.scen-override-acct { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: #fafbfc; }
.scen-override-acct-name { font-size: 13px; font-weight: 600; }
.scen-override-acct-meta { font-size: 12px; color: var(--muted); flex: 1; }
.scen-override-acct-flag {
  font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px;
  background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
}
/* Highlight on an input in the account editor when the value differs from the
   baseline (only when the editor is opened in scenarioOverride mode).
   The thick left border is the non-color cue paired with the amber background,
   so users with color-vision deficiencies still see "this differs from
   baseline" at a glance (WCAG 1.4.1). */
.field-override { background: #fffbeb !important; border-color: #fbbf24 !important; border-left-width: 4px !important; }
.field-override::after { /* invisible content marker — paired aria-label below */ }
.acc-holdings tbody tr.field-override > td { background: #fffbeb; }
.acc-holdings tbody tr.field-override > td:first-child { border-left: 4px solid #f59e0b; }
.field-reset-btn {
  margin-left: 4px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 4px;
  width: 22px; height: 22px;
  padding: 0;
  font-size: 13px; line-height: 1;
  cursor: pointer; color: var(--text-2);
  vertical-align: middle;
}
.field-reset-btn:hover { background: var(--bg-sunken); color: var(--primary); }
/* Banner on the account editor when used in scenario-override mode. */
.acct-editor-banner {
  background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe;
  border-radius: 6px; padding: 8px 12px; font-size: 13px;
  margin: -4px 0 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.acct-editor-banner .btn-link {
  border: none; background: transparent; color: #1e40af; font-size: 13px;
  font-weight: 600; cursor: pointer; padding: 0;
}
.acct-editor-banner .btn-link:hover { text-decoration: underline; }

/* Scenarios */
.scenario-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
}
.scenario-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f9fafb;
  cursor: pointer;
}
.scenario-header input[type="text"] {
  font-weight: 600;
  border: none;
  background: transparent;
  font-size: 14px;
  padding: 0;
  height: auto;
  width: 200px;
}
.scenario-header input[type="text"]:focus {
  border-bottom: 1px solid var(--primary);
  box-shadow: none;
}
.scenario-body { padding: 12px; display: none; }
.scenario-card.open .scenario-body { display: block; }
.scenario-card.open .scenario-toggle { transform: rotate(180deg); }
.scenario-toggle {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  transition: transform 0.2s;
}

.override-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 6px 8px;
  background: #eff6ff;
  border-radius: 4px;
  font-size: 13px;
}
.override-item label { color: var(--primary); font-weight: 500; min-width: auto; }

.transfer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 6px 8px;
  background: #f0fdf4;
  border-radius: 4px;
  font-size: 13px;
  flex-wrap: wrap;
}
.transfer-item select, .transfer-item input { height: 28px; font-size: 13px; }
.transfer-item select { min-width: 0; }
.transfer-item input[type="number"] { width: 80px; }

/* Results */
.run-wrap { align-self: center; margin-bottom: 2px; text-align: center; }
.progress-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
  /* Permanent slot — visibility (not display) keeps the bar's space reserved
     so the appbar doesn't bounce when a run starts/ends. */
  visibility: hidden;
}
.progress-bar.active { visibility: visible; }
.progress-fill {
  height: 100%;
  background: var(--primary);
  width: 0%;
  transition: width 0.1s;
  border-radius: 3px;
}

#results-table {
  width: 100%;
  border-collapse: collapse;
}
#results-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  border-bottom: 2px solid var(--border);
}
#results-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
#results-table tr:last-child td { border-bottom: none; }
#results-table td:first-child { font-weight: 600; }
/* p50 is the headline (median) outcome — emphasize its column */
#results-table th.col-p50, #results-table td.col-p50 { font-weight: 700; color: var(--text); }
.ruin-high { color: var(--danger); font-weight: 600; }
.ruin-low { color: #16a34a; }
/* Spending/liability amounts when "show in red" is enabled (Settings). */
.neg-amt { color: var(--danger); }

/* Tooltip */
.tooltip-wrap { position: relative; }
.custom-tooltip {
  visibility: hidden;
  opacity: 0;
  /* position: fixed (relative to the viewport) so the tooltip is never clipped
     by an ancestor's overflow; JS (UI.positionTooltip) sets left/top on hover
     and clamps the box inside the viewport so the browser edges never clip it. */
  position: fixed;
  left: 0;
  top: 0;
  max-width: calc(100vw - 16px);
  background: #fff;
  color: var(--text);
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  z-index: 100;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
  transition: opacity 0.15s 1s, visibility 0s 1s;
}
/* Arrow points down at the trigger when the tooltip sits above it. --arrow-x is
   the trigger's center relative to the (possibly clamped) tooltip's left edge. */
.custom-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--arrow-x, 50%);
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #fff;
}
/* Flipped below the trigger (no room above): arrow points up instead. */
.custom-tooltip.tip-below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #fff;
}
.tooltip-wrap:hover .custom-tooltip,
.tooltip-wrap:focus-within .custom-tooltip { visibility: visible; opacity: 1; }
.custom-tooltip table { border-collapse: collapse; width: 100%; }
.custom-tooltip td { padding: 3px 0; white-space: nowrap; }
.custom-tooltip td:first-child { padding-right: 20px; color: var(--muted); }
.custom-tooltip td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.custom-tooltip .tip-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--primary);
  padding-top: 8px;
}
.custom-tooltip .tip-total td { font-weight: 700; border-top: 1px solid var(--border); padding-top: 6px; }
.custom-tooltip .tip-neg { color: var(--danger); }
/* Footnote / hint text below a tooltip table. Sits OUTSIDE the table so it can
   wrap freely without dragging the table columns wider — the table's other
   white-space:nowrap rows would otherwise set a hard minimum column width. */
.custom-tooltip .tip-note {
  color: var(--muted);
  font-size: 11px;
  white-space: normal;
  max-width: 280px;
  margin-top: 8px;
  line-height: 1.4;
}

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
#modal-overlay { z-index: 300; }
.modal-overlay.active { display: flex; }
.modal {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  position: relative;
}
.modal-x {
  position: sticky;
  top: 0;
  float: right;
  background: var(--card);
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  padding: 2px 8px;
  margin: -8px -8px 0 8px;
  border-radius: 6px;
  z-index: 2;
}
.modal-x:hover { color: var(--text); background: var(--border); }

/* Button row above the tabs (Run / Find Best Settings / AI Assist),
   right-aligned with breathing room beneath it. */
.toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 18px; padding-bottom: 6px; flex-wrap: wrap; }

/* Draggable popups: a title bar drag handle + a scrollable body. */
.modal.draggable { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.modal-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
  padding: 9px 8px 9px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: move;
  user-select: none;
}
.modal-titlebar h2, .modal-titlebar h3 { margin: 0; font-size: 16px; font-weight: 600; }
.modal-titlebar .modal-x { position: static; float: none; margin: 0; background: none; flex: 0 0 auto; }
.modal-body { padding: 18px 24px 22px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }

/* Optimizer "search over" checklist */
.opt-check { display: flex; align-items: center; margin: 0; font-size: 13px; cursor: pointer; }
.opt-check input { margin-right: 8px; width: 15px; height: 15px; accent-color: var(--primary); flex: none; }

/* grouped sections inside editor/optimizer popups */
.opt-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fafbfc;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.opt-group-title {
  font-size: 11px; font-weight: 650; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.opt-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.opt-check-grid .opt-check-wide { grid-column: 1 / -1; }
/* Unified 2-column table for every "Search over" variable. Plain checkbox
   rows put a checkbox in each cell; controlled-input rows put the checkbox
   in col 1 and the dropdown / text in col 2 — so the left-column checkboxes
   stack consistently and the right column doubles as the home for inline
   controls without disrupting alignment. */
.opt-check-table { width: 100%; border-collapse: collapse; }
.opt-check-table td { padding: 4px 6px; vertical-align: middle; width: 50%; }
.opt-check-table select, .opt-check-table input[type="text"] { width: 100%; max-width: 100%; }
.opt-group .form-row {
  display: grid; grid-template-columns: 130px 1fr; align-items: center;
  gap: 8px 12px; margin-bottom: 10px;
}
.opt-group .form-row label { min-width: 0; text-align: right; font-size: 13px; color: var(--text-2); font-weight: 500; }
.opt-group .form-row input { width: 100%; }
.opt-group .form-row select { justify-self: start; min-width: 0; }
.opt-group .row-hint { margin: 0; }
@media (max-width: 560px) { .opt-check-grid { grid-template-columns: 1fr; } }

/* Optimizer results: comparison table + per-change checklist */
.opt-compare { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.opt-compare th { text-align: right; padding: 6px 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); border-bottom: 2px solid var(--border); }
.opt-compare th:first-child { text-align: left; }
.opt-compare td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: right; }
.opt-compare td:first-child { text-align: left; font-weight: 600; }
.opt-compare tr:last-child td { border-bottom: none; }
.opt-changes-title { font-weight: 600; font-size: 13px; margin: 16px 0 4px; }
.opt-goal-line { font-size: 13px; margin-bottom: 8px; color: var(--text); }
.opt-changes { width: 100%; border-collapse: collapse; font-size: 13px; }
.opt-changes td { padding: 4px 0; vertical-align: middle; }
.opt-changes td:first-child { width: 22px; }
.opt-changes input { cursor: pointer; }
.opt-changes label { cursor: pointer; }
.opt-change-current { color: var(--muted); padding-left: 16px !important; white-space: nowrap; }
.opt-change-gain { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 16px !important; }
.opt-no-changes { font-size: 13px; color: var(--muted); margin: 16px 0; }
.opt-robust { font-size: 12px; margin: 12px 0 4px; padding: 8px 10px; border-radius: 6px; line-height: 1.45; }
.opt-robust.ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.opt-robust.warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.opt-disclaimer { font-size: 11px; color: var(--muted); margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; }
.opt-changes .subtip-i { cursor: help; }
/* The "New Plan Changes" detail tooltips carry a sentence or two, so let them
   wrap (the base .custom-tooltip is nowrap) and reveal quickly like the nested
   cash-flow subtips rather than after the 1s results-table delay. */
.opt-tip { white-space: normal; max-width: 320px; text-align: left; line-height: 1.45;
  transition: opacity 0.12s 0.15s, visibility 0s 0.15s; }

/* Holdings section header — "Holdings" h3 paired with a "Set mix..." button
   that launches the Portfolio Mix wizard popup. */
.hol-header { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 6px; }
.hol-header h3 { margin: 0; }
.hol-mix-btn { padding: 4px 12px; font-size: 12px; }

/* Search Report popup — read-only audit of the optimizer run, opened from
   the result panel's "Search report …" button. Compact tables, no inputs. */
.opt-report-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 13px; }
.opt-report-table th, .opt-report-table td { padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--border-soft, #f0f2f5); }
.opt-report-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--muted); }
.opt-report-table tr:last-child td { border-bottom: none; }
.opt-report-vars .opt-report-count { color: var(--muted); }
.opt-report-vars .opt-report-values { font-size: 12px; color: var(--text-2); }
/* Withdrawal-order rows render each ordering / each account on its own
   line so the row is scannable. */
.opt-report-multi { display: flex; flex-direction: column; gap: 6px; }
.opt-report-multi-item { padding: 4px 6px; border: 1px solid var(--border-soft, #f0f2f5); border-radius: 4px; }
.opt-report-multi-item > div { font-size: 12px; }
.opt-report-vars td > div { font-size: 12px; line-height: 1.35; }
.opt-report-vars td:nth-child(1) { width: 28%; }
.opt-report-vars td:nth-child(2) { width: 44%; }
.opt-report-vars td:nth-child(3), .opt-report-vars td:nth-child(4) { font-variant-numeric: tabular-nums; }
.opt-report-winner > td { background: #ecfdf5; }

/* Multi-asset-class holdings table in the account editor (taxable / Roth /
   IRA / HSA). 4 visible columns — Balance, Class, Return (μ), … — with the
   other 5 settings (σ, β, α, basis %, yield) tucked into a per-row popup so
   the table stays scannable. */
.acc-holdings { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: 13px; }
.acc-holdings th, .acc-holdings td { padding: 4px 6px; text-align: left; vertical-align: middle; }
.acc-holdings thead th {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--muted); border-bottom: 1px solid var(--border);
}
.acc-holdings tbody tr { border-bottom: 1px solid var(--border-soft, #f0f2f5); }
.acc-holdings tbody tr:last-child { border-bottom: none; }
.acc-holdings input[type="text"], .acc-holdings input[type="number"] { width: 100%; max-width: 130px; height: 28px; padding: 0 6px; font-size: 13px; }
/* Read-only percentage label after each row's balance input. Live-updates
   as the user edits balances so the asset mix is always visible at a glance. */
.acc-holdings .hol-pct {
  display: inline-block; margin-left: 6px;
  font-size: 11px; color: var(--muted);
  vertical-align: middle;
}
.acc-holdings .hol-label { font-weight: 500; color: var(--text); }
.acc-holdings .hol-actions { width: 30px; text-align: right; }
.acc-holdings .hol-total { font-weight: 600; padding-top: 8px; }
.acc-holdings .hol-hint { font-size: 11px; color: var(--muted); padding-top: 8px; }
.hol-edit-more {
  border: 1px solid var(--border); background: var(--card); border-radius: 4px;
  width: 28px; height: 26px; padding: 0; font-size: 16px; line-height: 1; cursor: pointer;
  color: var(--text-2); display: inline-flex; align-items: center; justify-content: center;
}
.hol-edit-more:hover { background: var(--bg-sunken); }
/* Per-row holdings popup sits on top of the account editor modal (both use
   z-index 200; DOM order makes the popup paint above). */
#hol-editor-overlay { z-index: 220; }
/* All non-amount inputs in the popup (μ, σ, β, α, basis %, yield %) shrink
   so a "label + input + label + input" logical line fits on a single HTML
   row in the 380px modal. The Balance input keeps its full width — it's a
   "money"-class text input, not a number input, and is unaffected. */
#hol-editor input[type="number"] { width: 76px; min-width: 76px; }
/* 4-col grid for the popup's non-amount rows: Label | Input | Label | Input.
   Labels right-aligned in their columns; inputs sit flush-left next to their
   matching label so each logical pair reads "Volatility σ: [0.150]". */
.hol-popup-grid { width: 100%; border-collapse: collapse; margin: 6px 0 4px; }
.hol-popup-grid td { padding: 4px 6px; vertical-align: middle; }
.hol-popup-grid td.lbl { text-align: right; font-size: 13px; color: var(--muted); width: 1%; white-space: nowrap; }
.hol-popup-grid td.lbl label { font-size: 13px; color: var(--muted); min-width: 0; }

/* Inline "Save as scenario: [name] [Save]" row in result panels of the three
   search modals (Find Best Plan, Max Spending, When Can I Retire). The name
   field and Save button live on a single line so the naming step is impossible
   to miss; the input flexes to fill the remaining width. */
.save-as-row {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.save-as-row > label { font-size: 13px; color: var(--text-2); font-weight: 600; flex: none; }
.save-as-row > input[type="text"] { flex: 1; min-width: 0; }
.save-as-row > .btn { flex: none; }

/* "Results need a re-run" cues. */
.tab.stale::after { content: "\2022"; color: var(--danger); margin-left: 5px; font-size: 16px; vertical-align: middle; }
.results-stale {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 7px 11px;
  margin-bottom: 12px;
  font-size: 13px;
}
.modal h3 { margin-bottom: 12px; font-size: 16px; }
.modal p { margin-bottom: 16px; color: var(--muted); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Withdrawal order */
.wo-hint { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.wo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 13px;
}
.wo-rank { font-weight: 600; min-width: 20px; color: var(--primary); }
.wo-name { flex: 1; }
.wo-type { color: var(--muted); font-size: 12px; }
.wo-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1;
}
.wo-btn:hover { background: var(--border); color: var(--text); }
.wo-btn:disabled { opacity: 0.3; cursor: default; }

/* Detail table */
.detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.detail-table th, .detail-table td {
  padding: 6px 10px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.detail-table th:first-child, .detail-table td:first-child { text-align: center; }
.detail-table thead { background: #fff; }
.detail-table th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--muted);
  border-bottom: 2px solid var(--border);
  box-shadow: 0 1px 0 var(--border);
}
.detail-table tr:hover td { background: #f9fafb; }
.detail-table .ruin-row td { background: #fef2f2; color: var(--danger); font-weight: 600; }
.detail-table .death-row td { background: #fef9c3; }
.detail-table .estate-row td { background: #f0fdf4; font-style: italic; }
/* Δ MFJ column — orange-tinted to flag survivor-year widow-tax cost. */
.detail-table .widow-tax-cell {
  color: #b45309;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.06);
}
.detail-table tr:hover td.widow-tax-cell { background: rgba(245, 158, 11, 0.14); }

/* Widow Tax callout — sits below the year-by-year table, above the estate
   summary. Amber accent matches the death-row highlight + Δ MFJ column. */
.widow-tax-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 20px 0;
  padding: 16px 18px;
  border: 1px solid #fcd34d;
  border-left: 4px solid #d97706;
  background: #fffbeb;
  border-radius: 8px;
}
.widow-tax-callout .wtc-icon {
  font-size: 30px;
  line-height: 1;
  color: #b45309;
  font-weight: 700;
  flex: 0 0 auto;
  padding-top: 2px;
}
.widow-tax-callout .wtc-body { flex: 1; min-width: 0; }
.widow-tax-callout h3 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 650;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.widow-tax-callout p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: #1f2937; }
.widow-tax-callout p.wtc-note { font-size: 12px; color: var(--muted); margin-bottom: 0; }
.widow-tax-callout strong { color: #b45309; font-variant-numeric: tabular-nums; }
.detail-table .summary-row td { font-weight: 600; border-top: 2px solid var(--border); background: #f9fafb; }
.detail-table .year-col { text-align: center; font-weight: 600; }
.detail-table .cash-cell {
  border: 1px solid var(--primary);
  border-radius: 5px;
  cursor: pointer;
  background: rgba(79, 70, 229, 0.08);
  color: var(--primary);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.15);
  position: relative;
}
.detail-table .cash-cell:hover {
  background: rgba(79, 70, 229, 0.18);
  box-shadow: 0 2px 4px rgba(79, 70, 229, 0.25);
}

/* Any detail-table cell carrying a tooltip-wrap gets a pointer cursor and a
   hover highlight that wins over the row-hover background, so it's clear which
   single cell drives the tooltip you're seeing. Cash-cell keeps its stronger
   indigo styling. */
.detail-table td.tooltip-wrap { cursor: pointer; }
.detail-table tr:hover td.tooltip-wrap:hover {
  background: #e0e7ff;
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.35);
}

/* The page body is locked to viewport height — the detail report becomes an
   overlay below the appbar with its own internal scroll, instead of trying to
   push the canvas downward (which would be clipped). */
#detail-section {
  position: fixed;
  top: var(--appbar-h, 52px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--bg);
  margin: 0;
  padding: 20px;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#detail-section > * { max-width: 1040px; margin-left: auto; margin-right: auto; }

/* Left-aligned end-of-report summary: ending balances + net-estate calc */
.estate-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 20px;
  text-align: left;
}
.es-block { min-width: 320px; }
.es-block h3 {
  font-size: 12px; font-weight: 650; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--muted); margin: 0 0 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.summary-tbl { border-collapse: collapse; font-size: 13px; }
.summary-tbl td { padding: 4px 0; white-space: nowrap; }
.summary-tbl td:last-child {
  text-align: right; padding-left: 40px; font-variant-numeric: tabular-nums;
}
.summary-tbl td.neg { color: var(--danger); }
.summary-tbl tr.subhead td {
  font-weight: 650; color: var(--text-2); padding-top: 10px; text-transform: none;
}
.summary-tbl tr.tot td {
  border-top: 1px solid var(--border); font-weight: 650; padding-top: 6px;
}
.summary-tbl tr.grand td {
  border-top: 2px solid var(--border-strong); font-weight: 700; font-size: 14px; padding-top: 6px;
}
.summary-tbl tr.trust-row td { padding-top: 10px; color: var(--text-2); }

.hidden { display: none !important; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }

/* AI Chat */
#chat-panel {
  position: fixed;
  top: 0; right: -400px;
  width: 400px; height: 100vh;
  background: var(--card);
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  z-index: 250;
  display: flex;
  flex-direction: column;
  transition: right 0.25s ease;
}
#chat-panel.open { right: 0; }

#chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 14px;
}
#chat-header span { flex: 1; }
#chat-model {
  font-size: 12px;
  height: 28px;
  min-width: 0;
}
#chat-header .btn-icon { font-size: 16px; }

#chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-msg-user, .chat-msg-ai {
  max-width: 90%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  word-wrap: break-word;
}
.chat-msg-user {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 2px;
}
.chat-msg-ai {
  align-self: flex-start;
  background: #f3f4f6;
  color: var(--text);
  border-bottom-left-radius: 2px;
}

#chat-status {
  font-size: 12px;
  color: var(--primary);
  padding: 0 14px;
  min-height: 18px;
}

#chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  align-items: flex-end;
}
#chat-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
}
#chat-input:focus { outline: none; border-color: var(--primary); }
#chat-input-row .btn { align-self: flex-end; }

.chat-msg-ai code { background: rgba(0,0,0,0.06); padding: 1px 4px; border-radius: 3px; font-size: 12px; }
.chat-msg-ai pre { background: rgba(0,0,0,0.06); padding: 8px 10px; border-radius: 6px; margin: 6px 0; overflow-x: auto; }
.chat-msg-ai pre code { background: none; padding: 0; font-size: 12px; }

/* Tax Rules & Rates modal (rendered Markdown) */
.tax-doc { font-size: 13px; line-height: 1.6; color: var(--text); }
.tax-doc h2 { font-size: 19px; margin: 0 0 4px; padding: 0; border: none; text-align: center; }
.tax-doc h3 { font-size: 15px; margin: 18px 0 6px; color: var(--primary); border: none; padding: 0; }
.tax-doc h4 { font-size: 13px; margin: 12px 0 4px; color: var(--text); font-weight: 600; }
.tax-doc p { margin: 6px 0; }
.tax-doc em { color: var(--muted); }
.tax-doc ul { margin: 6px 0 6px 18px; padding: 0; }
.tax-doc li { margin: 2px 0; }
.tax-doc code { background: rgba(0,0,0,0.06); padding: 1px 4px; border-radius: 3px; font-size: 12px; }
.tax-doc a { color: var(--primary); text-decoration: none; word-break: break-word; }
.tax-doc a:hover { text-decoration: underline; }
.tax-doc hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.tax-doc table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 12px; }
.tax-doc th, .tax-doc td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; }
.tax-doc th { background: #f9fafb; color: var(--muted); font-weight: 600; }

/* Second-level (nested) tooltip on a cash-flow line. It reuses .custom-tooltip, so
   UI.positionTooltip (which fires for any .tooltip-wrap) places and viewport-clamps
   it like every other tooltip. The outer tooltip's descendant :hover reveal would
   otherwise pop ALL nested ones open at once, so hide them by default and reveal
   only the hovered line's; the short delay replaces the outer's 1s open-delay. */
.subtip-i { color: var(--primary); font-size: 10px; }
.custom-tooltip .tooltip-wrap { cursor: help; }
.custom-tooltip .custom-tooltip { visibility: hidden !important; opacity: 0 !important; transition: opacity 0.12s 0.15s, visibility 0s 0.15s !important; }
.custom-tooltip .tooltip-wrap:hover > .custom-tooltip { visibility: visible !important; opacity: 1 !important; }

/* ===== Top-level Interview / Do-it-yourself / Results tabs =====
   Sticky just below the appbar (--appbar-h is set in JS on each appbar
   resize). The tabs sit as a folder strip on top of the card below — the
   active tab shares the card's background and overlaps the card's top
   border by 1px so the seam reads as one continuous canvas. */
.top-tabs {
  position: sticky;
  top: var(--appbar-h, 52px);
  z-index: 80;
  background: var(--bg);
  display: flex;
  gap: 4px;
  padding-top: 12px;
  margin: 0;
}
.top-tab {
  padding: 10px 22px;
  border: 1px solid var(--border);
  border-bottom: none;
  background: var(--bg-sunken);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--muted);
  cursor: pointer;
  border-radius: 10px 10px 0 0;
  position: relative;
  margin-bottom: -1px;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.top-tab:hover:not(.active) { background: var(--card); color: var(--text); }
.top-tab.active {
  background: var(--card);
  color: var(--primary);
  z-index: 2;
  box-shadow: 0 -2px 4px rgba(15,23,42,.04);
}
.top-panel {
  display: none;
  /* Each panel occupies the same shared canvas slot below the tab strip. */
  flex: 1;
  min-height: 0;
}
.top-panel.active { display: flex; flex-direction: column; overflow: hidden; }
/* Do It Yourself is the only panel allowed to scroll vertically inside the
   shared canvas — Interview and Results size to fit. */
#top-diy.active { display: block; overflow-y: auto; }

/* ===== Interview: progress strip (left rail) =====
   Mirrors the first five DIY tabs. A grey dot before the interview reaches
   that step → primary-blue dot when the wizard is currently asking about it →
   green check once the baseline data is in. */
.iv-progress {
  flex: 0 0 auto;
  width: 200px;
  padding: 18px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: stretch;
  font-size: 13px;
}
.iv-progress-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}
.iv-progress-marker {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  background: transparent;
}
.iv-progress-item.done { color: var(--text); }
.iv-progress-item.done .iv-progress-marker {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.iv-progress-item.done .iv-progress-marker::before { content: '\2713'; }
.iv-progress-item.active {
  color: var(--primary);
  background: var(--primary-soft);
  font-weight: 600;
}
.iv-progress-item.active .iv-progress-marker {
  border-color: var(--primary);
  background: var(--primary);
}
.iv-progress-item.active .iv-progress-marker::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

/* ===== Interview: two-pane layout ===== */
.iv-layout {
  display: flex;
  align-items: stretch;
  gap: 18px;
  /* Fill the panel slot (Interview tab is fit-to-canvas). */
  flex: 1;
  min-height: 0;
}
#iv-chat {
  flex: 1 1 auto;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  /* No vh cap — iv-layout already constrains height. */
  min-height: 0;
}
#iv-chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  background: var(--bg-sunken);
}
#iv-chat-header span { flex: 1; }
#iv-engine-status {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
#iv-engine-status.ready { color: #16a34a; border-color: #bbf7d0; background: #f0fdf4; }
#iv-engine-status.error { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
#iv-chat-header .btn-icon { font-size: 16px; }

/* Interviewer chooser modal — overlays the Interview panel only (so switching
   tabs naturally hides it via the parent's display:none). */
#top-interview { position: relative; }
#iv-chooser-overlay { position: absolute; }
.iv-choice-list { display: flex; flex-direction: column; gap: 10px; }
.iv-choice {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.05s;
  font: inherit;
  color: inherit;
}
.iv-choice:hover { border-color: var(--primary); background: #f5f6ff; }
.iv-choice:active { transform: translateY(1px); }
.iv-choice[disabled] { opacity: 0.5; cursor: not-allowed; }
.iv-choice[disabled]:hover { border-color: var(--border); background: var(--card); }
.iv-choice-title { font-weight: 650; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.iv-choice-desc { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.iv-choice-tag {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.iv-tag-cloud { background: #eff6ff; color: #2563eb; }
.iv-tag-local { background: #f0fdf4; color: #16a34a; }
.iv-tag-none  { background: #f1f5f9; color: #475569; }
#iv-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#iv-status {
  font-size: 12px;
  color: var(--primary);
  padding: 0 14px;
  min-height: 18px;
}
/* When the programmed wizard is active the inline controls are rendered
   below the last message inside #iv-messages — the legacy persistent row
   would just be a stale duplicate, so hide it. */
.iv-inline-controls > #iv-input-row { display: none; }
.iv-controls {
  margin: 6px 0 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.iv-controls .iv-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.iv-controls .iv-choice-btn {
  border: 1px solid var(--border); background: var(--card); border-radius: 6px;
  padding: 6px 12px; font-size: 13px; cursor: pointer; color: var(--text);
}
.iv-controls .iv-choice-btn:hover { background: var(--bg-sunken); border-color: var(--primary); }
.iv-controls .iv-input-line {
  display: flex; gap: 8px; align-items: stretch;
}
.iv-controls .iv-input-line textarea {
  flex: 1; min-height: 36px; resize: vertical;
  padding: 6px 10px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--input-border); border-radius: 7px;
}
.iv-controls .iv-input-line textarea:focus { outline: none; border-color: var(--primary); }
.iv-controls .iv-skip-btn {
  border: 1px solid var(--border); background: var(--card); border-radius: 6px;
  padding: 0 12px; font-size: 13px; cursor: pointer; color: var(--text-2);
  flex: none;
}
.iv-controls .iv-skip-btn:hover { background: var(--bg-sunken); }
.iv-controls .iv-meta-row { display: flex; gap: 8px; }
.iv-controls .iv-meta-btn {
  border: none; background: transparent; padding: 2px 6px;
  font-size: 12px; cursor: pointer; color: var(--muted);
}
.iv-controls .iv-meta-btn:hover { color: var(--primary); text-decoration: underline; }

#iv-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  align-items: flex-end;
}
#iv-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
}
#iv-input:focus { outline: none; border-color: var(--primary); }

/* ===== Interview: results pane (plot + gauge) ===== */
#iv-results {
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  display: flex;
  flex-direction: column;
}
/* The stale banner spans the full canvas above this row; the row hosts the
   subtab sidebar + the subtab content side-by-side (the original layout). */
.iv-results-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
}
.iv-stale-banner { margin: 8px 12px 0; }
.iv-subtab-content { overflow: hidden; }
/* Report subtabs hold a single tall body (year-by-year table, percentile
   table, search-report audit). Flex+overflow on the inner .iv-report-body
   intermittently failed to engage in Chromium — the cleanest, dependency-
   free fix is to give the subtab content itself the scrollbar whenever its
   subtree contains a report body. :has() scopes the override so plot tabs
   (which need a fixed-canvas layout for the SVG + summary) are unaffected. */
.iv-subtab-content:has(> .iv-report-body),
.iv-subtab-content:has(> .iv-print-target.iv-report-body) {
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Report subtab: the detailed year-by-year table can be wide and tall;
   let the body scroll within the canvas instead of overflowing it. */
.iv-report-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#iv-results > .iv-empty { margin: auto; padding: 32px; }
.iv-subtabs {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 8px 16px 12px;
  border-right: 1px solid var(--border);
  background: var(--bg-sunken);
  border-radius: var(--radius) 0 0 var(--radius);
}
.iv-subtab {
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
}
.iv-subtab:hover { background: var(--card); color: var(--text); }
.iv-subtab.active { background: var(--card); color: var(--primary); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
/* Horizontal divider between the "plot" subtabs (above) and the "report"
   subtabs (below). A thicker, darker line with generous vertical breathing
   room so the two groups are unmistakably separate on the rail. */
.iv-subtab-divider {
  height: 2px;
  background: var(--text);
  opacity: 0.35;
  margin: 14px 4px;
  border-radius: 1px;
}

/* Print mode for the report subtabs. When the user clicks "Save PDF" the
   body gets `iv-printing` and the browser print dialog opens — we hide every
   chrome element and unhide only the active report content, so a single
   clean page (or multi-page report for Year-by-year) prints / saves to PDF. */
@media print {
  body.iv-printing { background: #fff; }
  body.iv-printing > * { visibility: hidden; }
  body.iv-printing .iv-print-target,
  body.iv-printing .iv-print-target * { visibility: visible; }
  body.iv-printing .iv-print-target {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    padding: 24px;
    overflow: visible;
    background: #fff;
    color: #000;
    font-size: 12px;
  }
  body.iv-printing .iv-no-print { display: none !important; }
  /* Sticky table headers should re-flow normally when printing. */
  body.iv-printing .detail-table th { position: static; box-shadow: none; }
  body.iv-printing .iv-onepage h2 { color: #000; }
  body.iv-printing .iv-onepage h3 { color: #444; }
  /* Avoid splitting table rows across pages where possible. */
  body.iv-printing table tr { page-break-inside: avoid; }
  body.iv-printing .es-block, body.iv-printing .iv-onepage-section { page-break-inside: avoid; }
}
/* 1-page summary card — printer-friendly width, clean section headings. */
.iv-onepage { max-width: 720px; margin: 0 auto; padding: 4px; }
.iv-onepage h2 { font-size: 18px; margin: 0 0 14px; color: var(--text); border-bottom: 2px solid var(--border); padding-bottom: 6px; }
.iv-onepage h3 { font-size: 13px; margin: 16px 0 6px; color: var(--primary); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.iv-onepage table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.iv-onepage td { padding: 3px 0; }
.iv-onepage td:first-child { color: var(--muted); padding-right: 16px; width: 50%; }
.iv-onepage td:last-child { text-align: right; }
.iv-onepage .iv-onepage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.iv-onepage .iv-onepage-grand td { border-top: 2px solid var(--border); font-weight: 700; padding-top: 6px; color: var(--text); }
.iv-onepage .iv-onepage-section { margin-bottom: 12px; }
.iv-subtab-content {
  flex: 1;
  min-width: 0;
  /* min-height: 0 lets this flex item shrink below its content size; without
     it the giant year-by-year table forced the container to grow past the
     viewport and the inner .iv-report-body's overflow:auto never engaged. */
  min-height: 0;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
}
.iv-empty {
  margin: auto;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
}
.iv-results-title { font-size: 16px; font-weight: 650; margin: 0; }
.iv-results-header { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.iv-header-spacer { flex: 1; }
.iv-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.iv-checks-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 12px;
  flex-wrap: wrap;
}
.iv-checks-row .iv-series-checks { margin: 0; }
.iv-plan-select {
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  font-family: inherit;
  min-width: 0;
  max-width: 100%;
}
.iv-plan-select:hover { background: var(--bg-sunken); border-color: var(--border); }
.iv-plan-select:focus { outline: none; background: var(--card); border-color: var(--primary); }
.iv-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
  font-size: 13px;
  color: var(--muted);
}
.iv-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.iv-swatch { width: 22px; height: 4px; border-radius: 2px; display: inline-block; }
.iv-swatch.band { height: 12px; opacity: 0.25; }
.iv-series-checks {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  margin: 8px 0 12px; font-size: 13px; color: var(--text-2);
}
.iv-series-check {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  user-select: none;
}
.iv-series-check input { margin: 0; }
.iv-plot-wrap {
  width: 100%;
  position: relative;
  /* Stretch to fill the remaining vertical space in the subtab content so the
     plot scales with the shared canvas; preserveAspectRatio on the SVG keeps
     it from distorting. */
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#iv-plot { flex: 1; min-height: 0; display: flex; }
#iv-plot svg { width: 100%; height: 100%; display: block; }
/* The PDF-export wrapper for plot tabs sits between iv-subtab-content (flex
   column) and iv-plot-wrap. Without flex on the wrapper, iv-plot-wrap's
   `flex:1` collapsed and the plot grew tall enough to push the gauge below
   the visible area. Inherit the flex-column behavior so the chain reaches the
   plot and the summary row keeps its space. */
.iv-subtab-content > .iv-print-target {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* …but report-tab targets (Year-by-year, Percentile Summary, 1-Page Summary)
   ARE the iv-report-body — they own the scrollable region directly. Turning
   them into flex columns disabled the body's overflow:auto in Chromium when
   the table grew taller than the canvas, so opt them back to block layout and
   keep the overflow:auto / min-height:0 from .iv-report-body intact. */
.iv-subtab-content > .iv-print-target.iv-report-body {
  display: block;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#iv-gauge svg { display: block; width: 100%; height: auto; }
.iv-marker { cursor: crosshair; }
.iv-tip {
  /* position: fixed (viewport coordinates) so the tooltip can never be clipped
     by an ancestor's overflow (iv-subtab-content / iv-plot-wrap). JS sets
     left/top from clientX/clientY and clamps to the viewport edges. */
  position: fixed;
  display: none;
  pointer-events: none;
  background: #1f2937;
  color: #fff;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(15,23,42,.32);
  z-index: 100;
  max-width: 260px;
}
.iv-tip-head { font-weight: 600; margin-bottom: 2px; }
.iv-tip-sub { font-size: 11px; color: #cbd5e1; margin-bottom: 4px; letter-spacing: 0.3px; }
.iv-tip-total { font-size: 13px; font-weight: 650; margin-bottom: 4px; }
.iv-tip-bd { border-collapse: collapse; font-size: 11.5px; color: #cbd5e1; }
.iv-tip-bd td { padding: 1px 0; white-space: nowrap; }
.iv-tip-bd td:last-child { text-align: right; padding-left: 14px; color: #fff; font-variant-numeric: tabular-nums; }
/* 1-time-event rows: a slightly warmer color (matches the gold star on the
   chart marker) so the user can quickly spot which line is the event. */
.iv-tip-bd .iv-tip-event td { color: #fde68a; }
.iv-tip-bd .iv-tip-event td:last-child { color: #fde68a; }
/* Event markers on the plot — kept large enough to be obvious even when
   several lines stack at the same year. */
.iv-event-marker { cursor: pointer; }
.iv-summary {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.iv-gauge-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  cursor: help;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: center;
}
.iv-gauge-wrap:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
#iv-gauge { width: 186px; max-width: 66%; }
.iv-gauge-label { font-size: 13px; color: var(--muted); margin-top: 2px; text-align: center; }
.iv-gauge-tip {
  /* position: fixed so the tip is never clipped by an ancestor's overflow
     (iv-subtab-content has overflow:hidden). JS (wireChipTooltips) measures
     the trigger on hover and sets left/top in viewport coords, then clamps. */
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  width: 300px;
  max-width: calc(100vw - 16px);
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: var(--shadow-md);
  z-index: 100;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: normal;
  text-align: left;
}
.iv-gauge-tip-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.iv-gauge-tip p { margin: 0; }
.iv-gauge-tip p + p { margin-top: 8px; }
.iv-gauge-tip strong { color: var(--text); font-variant-numeric: tabular-nums; }
.iv-gauge-wrap:hover .iv-gauge-tip,
.iv-gauge-wrap:focus .iv-gauge-tip,
.iv-gauge-wrap:focus-visible .iv-gauge-tip { display: block; }

.iv-ending-nw {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-sunken);
  cursor: help;
  font: inherit;
  color: inherit;
  text-align: center;
}
.iv-ending-nw:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.iv-ending-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
/* Widow Tax chip: amber-tinted to match the Δ MFJ column + callout + chart band. */
.iv-ending-widow { background: #fffbeb; border-color: #fcd34d; }
.iv-ending-widow .iv-ending-label { color: #92400e; }
.iv-ending-widow .iv-ending-value { color: #b45309; }
.iv-widow-dagger { font-size: 16px; line-height: 0; vertical-align: middle; margin-left: 2px; color: #b45309; }
.iv-ending-value { font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.iv-ending-tip {
  /* position: fixed so the tip is never clipped by an ancestor's overflow
     (iv-subtab-content has overflow:hidden). JS (wireChipTooltips) measures
     the trigger on hover and sets left/top in viewport coords, then clamps. */
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: var(--shadow-md);
  z-index: 100;
  max-width: calc(100vw - 16px);
  white-space: nowrap;
  font-size: 12.5px;
}
.iv-ending-nw:hover .iv-ending-tip,
.iv-ending-nw:focus .iv-ending-tip,
.iv-ending-nw:focus-visible .iv-ending-tip { display: block; }
.iv-ending-tip table { border-collapse: collapse; }
.iv-ending-tip td { padding: 3px 0; }
.iv-ending-tip td:first-child { padding-right: 24px; color: var(--muted); }
.iv-ending-tip td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.iv-ending-tip .iv-tip-neg td:last-child { color: var(--danger); }
.iv-ending-tip .iv-tip-grand td { font-weight: 700; border-top: 1px solid var(--border); padding-top: 6px; color: var(--text); }
.iv-ending-tip .iv-tip-section td {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--primary);
  padding-top: 8px;
}
/* The explanatory note at the bottom of the Widow Tax chip tooltip is long
   prose — wrap it instead of stretching the tooltip into a single line that
   spills off the canvas. white-space normal overrides the parent's nowrap,
   and max-width caps the tooltip even when the table rows themselves are
   short. */
.iv-ending-tip .iv-tip-note {
  white-space: normal;
  max-width: 320px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* Phone overrides for the interview panes. These re-assert the values from the
   ≤860px responsive block earlier in the file — the base #iv-chat / #iv-results
   / .iv-layout rules sit later in source order and would otherwise win the
   cascade and force a 400px-wide chat pane on the iPhone. */
@media (max-width: 860px) {
  .iv-layout { flex-direction: column; gap: 14px; min-height: 0; }
  #iv-chat { flex: 1 1 auto; width: 100%; min-height: 0; }
  .iv-subtab-content { padding: 16px; }
  .iv-subtab { padding: 7px 10px; font-size: 12px; }

  /* Results pane: a side-by-side subtab rail + content is too narrow on phones
     (the plots/report get squeezed into ~120px). Stack vertically so the
     subtab strip sits on top and the active subtab gets the full width. */
  .iv-results-inner { flex-direction: column; }
  .iv-subtabs {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    padding: 8px 8px;
    gap: 4px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    scrollbar-width: thin;
  }
  .iv-subtab { flex: 0 0 auto; white-space: nowrap; }
  /* The vertical divider becomes a thin horizontal separator between the
     "plot" subtabs and the "report" subtabs when the rail goes horizontal. */
  .iv-subtab-divider {
    width: 2px;
    height: auto;
    margin: 4px 6px;
    align-self: stretch;
  }
}

/* Chart data-table fallback (collapsed by default) — provides a structured
   non-visual alternative to SVG line charts for screen-reader users. */
.iv-chart-data { margin-top: 8px; font-size: 12px; }
.iv-chart-data > summary {
  cursor: pointer;
  color: var(--muted);
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-block;
}
.iv-chart-data > summary:hover { color: var(--primary); }
.iv-chart-data-tbl {
  margin-top: 6px;
  border-collapse: collapse;
  width: 100%;
  max-height: 240px;
  font-variant-numeric: tabular-nums;
}
.iv-chart-data-tbl th, .iv-chart-data-tbl td {
  border: 1px solid var(--border);
  padding: 3px 8px;
  text-align: right;
}
.iv-chart-data-tbl th[scope="col"] { background: var(--bg-sunken); }
.iv-chart-data-tbl th[scope="row"] { background: #fafbfc; text-align: left; }