:root {
  --bg: #f5f7fa;
  --panel: #ffffff;
  --rail: #0f172a;
  --rail-text: #cbd5e1;
  --ink: #0f172a;
  --ink-soft: #475569;
  --ink-faint: #94a3b8;
  --line: #e2e8f0;
  --accent: #2563eb;
  --accent-soft: #dbeafe;
  --good: #059669;
  --warn: #d97706;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 22px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; }
.sub { margin: 2px 0 0; color: var(--ink-soft); font-size: 12.5px; }
.results-status { color: var(--ink-soft); font-size: 13px; margin: 8px 0; }

/* ---------- layout ---------- */
.shell {
  display: grid;
  grid-template-columns: 216px 340px 1fr;
  height: 100vh;
}

/* ---------- left rail: screens ---------- */
.rail {
  background: var(--rail);
  color: var(--rail-text);
  display: flex;
  flex-direction: column;
  padding: 18px 0;
}
.brand { display: flex; align-items: center; gap: 9px; padding: 0 18px 18px; }
/* The logo links home. It stays a link even when the rail collapses to icons
   and .brand-text is hidden, so there is a way back from every width. */
.brand-home {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  color: inherit; text-decoration: none; border-radius: 8px;
}
.brand-home:hover .brand-text { color: #fff; text-decoration: underline; }
.brand-home:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.brand-mark {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: linear-gradient(140deg, #3b82f6, #0ea5e9);
}
.brand-text { color: #fff; font-weight: 650; font-size: 13.5px; }
/* Holds the screen list and the plan controls so both can collapse behind one
   button when the rail becomes a top bar. On desktop it is transparent: it just
   passes the column layout through. */
.rail-menu { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.rail-toggle { display: none; }
.screens { list-style: none; margin: 0; padding: 0 10px; flex: 1; }
.screens li { margin-bottom: 2px; }
.screens button {
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--rail-text); padding: 9px 12px; font: inherit; font-size: 13px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.screens button:hover:not([disabled]) { background: rgba(255,255,255,.07); color: #fff; }
.screens button[aria-current="page"] { background: var(--accent); color: #fff; font-weight: 600; }
.screens button[disabled] { opacity: .42; cursor: not-allowed; }
/* Workflow steps are numbered; reference screens follow a divider, unnumbered. */
.screens button.is-step { justify-content: flex-start; }
.screens .step-num { flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; background: rgba(255,255,255,.12); color: inherit; }
.screens button[aria-current="page"] .step-num { background: rgba(255,255,255,.28); }
.screens li.nav-divider { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }
.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; }
.soon {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid currentColor; border-radius: 999px; padding: 1px 6px; opacity: .75;
}
.rail-foot { padding: 14px 18px 0; border-top: 1px solid rgba(255,255,255,.09); margin-top: 12px; }
.file-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: #64748b; }
.file-name { font-size: 12px; color: #e2e8f0; word-break: break-all; margin-top: 3px; }
.rail-link {
  display: inline-block; margin-top: 14px; font-size: 11.5px;
  color: #94a3b8; text-decoration: none;
}
.rail-link:hover { color: #e2e8f0; text-decoration: underline; }
.rail-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

/* ---------- assumptions panel ---------- */
.panel {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
.panel-head { padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.controls { flex: 1; overflow-y: auto; padding: 6px 20px 12px; }

.control { padding: 14px 0; border-bottom: 1px solid #f1f5f9; }
.control:last-child { border-bottom: 0; }
.control-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.control-label { font-weight: 560; font-size: 13px; }
.control-value {
  font-variant-numeric: tabular-nums; font-weight: 650; font-size: 13px;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 6px; padding: 1px 7px; white-space: nowrap;
}
.control-value.is-default { color: var(--ink-soft); background: #f1f5f9; }
.control-help { color: var(--ink-faint); font-size: 11.5px; margin: 4px 0 9px; }

input[type=range] {
  width: 100%; -webkit-appearance: none; appearance: none;
  background: transparent; cursor: pointer; margin: 0;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px; background: var(--line);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgba(15,23,42,.25);
}
input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type=range]::-moz-range-track { height: 5px; border-radius: 3px; background: var(--line); }
input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(15,23,42,.25);
}

.scale {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--ink-faint); font-size: 10.5px; margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.scale .mid { color: var(--ink-faint); }
.scale .mid b { font-weight: 600; }

.control-date { display: flex; gap: 8px; align-items: center; }
.control-date input {
  font: inherit; padding: 6px 9px; border: 1px solid var(--line);
  border-radius: 7px; color: var(--ink); background: #fff;
}

.panel-actions {
  display: flex; gap: 8px; padding: 14px 20px;
  border-top: 1px solid var(--line); background: #fbfcfe;
}
.btn {
  font: inherit; font-size: 13px; font-weight: 560; cursor: pointer;
  border-radius: 8px; padding: 8px 14px; border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: #cbd5e1; background: #f8fafc; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.status {
  padding: 0 20px 14px; font-size: 12px; min-height: 18px;
  color: var(--good); background: #fbfcfe;
}
.status.err { color: #dc2626; }

/* ---------- main ---------- */
.main { overflow-y: auto; padding: 20px 24px 32px; min-width: 0; }
.main-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.dirty {
  font-size: 11.5px; font-weight: 600; color: var(--warn);
  background: #fef3c7; border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}

/* Pending edits on a screen the user is not looking at. Still worth showing --
   Save only writes the current one -- but it is not a warning about what is in
   front of them, so it does not shout like one. */
.dirty.is-elsewhere { color: var(--ink-soft); background: var(--line); }

.readonly-notice {
  margin: 14px 0 0; padding: 10px 14px;
  border: 1px solid #cbd5e1; border-left: 4px solid var(--accent);
  border-radius: 8px; background: #f8fafc; color: var(--ink-soft);
  font-size: 12.5px; line-height: 1.5;
}
.readonly-notice[hidden] { display: none; }

.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin: 16px 0 18px;
}
.kpi {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 11px 13px;
}
.kpi-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 600;
}
.kpi-value {
  font-size: 19px; font-weight: 660; margin-top: 3px;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.kpi-note { font-size: 11px; color: var(--ink-soft); margin-top: 1px; }

/* The plan cannot pay for itself. Every other card on the strip is a detail
   about a projection that does not hold, so this one is not styled to blend. */
.kpi.is-alarm { border-color: #dc2626; background: #fef2f2; }
.kpi.is-alarm .kpi-label { color: #991b1b; }
.kpi.is-alarm .kpi-value { color: #dc2626; }
.kpi.is-alarm .kpi-note { color: #b91c1c; }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px 10px; box-shadow: var(--shadow);
  min-width: 0;
}
.card.wide { grid-column: 1 / -1; }
.card h3 { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.card-note { font-weight: 400; font-size: 11.5px; color: var(--ink-faint); }
/* A full-period total pinned to the right of a chart's header. */
.card-total { margin-left: auto; font-weight: 700; font-size: 12.5px;
  color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Ending-balance-by-strategy comparison table. */
.strat-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13px; }
.strat-table th, .strat-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.strat-table thead th { color: var(--ink-soft); font-weight: 600; font-size: 12px;
  text-align: left; vertical-align: bottom; }
.strat-table th.num, .strat-table td.num { text-align: right;
  font-variant-numeric: tabular-nums; }
.strat-table .th-sub { display: block; font-weight: 400; font-size: 10.5px;
  color: var(--ink-faint); }
.strat-table td.strong { font-weight: 700; }
.strat-table td.roth { color: var(--good); font-weight: 600; }
.strat-table td.pretax { color: #b45309; }        /* amber: still owes tax */
/* Slate, deliberately not the green used for spendable Roth dollars: this
   column is wealth the plan cannot draw on. */
.strat-table td.home { color: var(--ink-soft); }
.strat-table .strat-name { font-weight: 600; }
.strat-table .strat-active { display: inline-block; margin-left: 7px; padding: 1px 7px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-size: 10.5px; font-weight: 700; vertical-align: middle; }
.strat-table tr.is-active { background: #f8fbff; }
.strat-table tbody tr:last-child td { border-bottom: 0; }
.strat-foot { margin: 8px 2px 0; font-size: 11px; color: var(--ink-faint); line-height: 1.5; }
.strat-table td.strat-unavailable { text-align: left; font-style: italic; color: var(--ink-faint); }
/* Year-by-year rates under the bar charts: scrolls sideways with the projection,
   keeping the row labels in view. */
/* Social Security claiming age: years and months, with the payment month below. */
.claim-age { display: flex; gap: 14px; margin-top: 6px; }
.claim-age label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
.claim-age select { font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.claim-start { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.year-table-wrap { margin-top: 8px; overflow-x: auto; }
.year-table { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.year-table th, .year-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: center; }
.year-table thead th { color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.year-table .th-sub { display: block; font-weight: 400; font-size: 10px; color: var(--ink-faint); }
.year-table th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--panel);
  text-align: left; color: var(--ink-soft); font-weight: 600; }
.year-table td.num { font-variant-numeric: tabular-nums; }
.year-table td.dash { color: var(--ink-faint); }
.year-table tr.amount-row th[scope="row"] { font-weight: 500; padding-left: 18px; }
.year-table tr.amount-total th, .year-table tr.amount-total td { font-weight: 600; }
.year-table tr.group-end th, .year-table tr.group-end td { border-bottom-color: var(--ink-faint); }
.year-table tbody tr:last-child th, .year-table tbody tr:last-child td { border-bottom: 0; }
.tier-chip { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.tier-standard { background: #ecfdf5; color: #047857; }
.tier-low { background: #fef3c7; color: #b45309; }
.tier-high { background: #fee2e2; color: #b91c1c; }
.chart { margin-top: 8px; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.legend { display: flex; flex-wrap: wrap; gap: 5px 13px; margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-soft); }
.legend i { width: 9px; height: 9px; border-radius: 2px; flex: none; }

.axis text { fill: var(--ink-faint); font-size: 10px; }
.axis line { stroke: var(--line); }
.gridline { stroke: #eef2f7; }
.phase-band { fill: #0f172a; opacity: .028; }
.phase-label { fill: var(--ink-faint); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; }
.hover-line { stroke: var(--ink-faint); stroke-dasharray: 3 3; }

.tip {
  position: fixed; pointer-events: none; z-index: 50;
  background: #0f172a; color: #fff; border-radius: 7px;
  padding: 7px 10px; font-size: 11.5px; line-height: 1.45;
  box-shadow: 0 6px 20px rgba(15,23,42,.28); max-width: 260px;
}
.tip b { font-variant-numeric: tabular-nums; }
.tip .row { display: flex; justify-content: space-between; gap: 12px; }
.tip .row i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; }

/* ---------- line-item screen ---------- */
.lineitems[hidden], .cards[hidden] { display: none; }
.group {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 12px; overflow: hidden;
  box-shadow: var(--shadow);
}
.group-head {
  display: grid; grid-template-columns: 1fr 130px 190px 120px;
  gap: 12px; align-items: center;
  padding: 11px 16px; background: #f8fafc; border-bottom: 1px solid var(--line);
}
.group-name { font-weight: 650; font-size: 13.5px; }
.group-count { font-weight: 400; color: var(--ink-faint); font-size: 11.5px; margin-left: 7px; }
.group-total { font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; font-size: 13.5px; }
.group-delta { font-size: 11px; font-weight: 600; text-align: right; }
.up { color: #dc2626; } .down { color: var(--good); } .flat { color: var(--ink-faint); }

.rows { padding: 2px 0; }
.row-item {
  /* name | base | scale | effective | start-end window */
  /* Name gets a guaranteed floor (minmax) so it never collapses to zero and
     clips its label; the wide scale column flexes/shrinks instead when the main
     area is narrow. */
  display: grid; grid-template-columns: minmax(120px, 1fr) 96px minmax(180px, 2fr) 272px;
  gap: 12px; align-items: center; padding: 7px 16px;
  border-bottom: 1px solid #f6f8fa;
}
.row-item:last-child { border-bottom: 0; }
.row-item.is-off .row-name, .row-item.is-off .row-base { opacity: .4; text-decoration: line-through; }
.row-item.is-zero { opacity: .55; }
.row-name { font-size: 12.5px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.row-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-base, .row-eff { font-variant-numeric: tabular-nums; text-align: right; font-size: 12.5px; }
.row-base { color: var(--ink-faint); }
.row-eff { font-weight: 620; }
.row-scale { display: flex; align-items: center; gap: 7px; }
.row-scale input[type=range] { flex: 1; }
.scale-pct { font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 620;
  width: 46px; text-align: right; color: var(--accent);
}
.scale-pct.at-base { color: var(--ink-faint); font-weight: 500; }
.row-item input[type=checkbox], .group-head input[type=checkbox] { accent-color: var(--accent); cursor: pointer; }
.lineitems-note { color: var(--ink-faint); font-size: 11.5px; margin: 0 0 12px; }

.summary { display: grid; gap: 9px; }
.summary-row { display: flex; justify-content: space-between; font-size: 12.5px; }
.summary-row b { font-variant-numeric: tabular-nums; }
.summary-total { border-top: 1px solid var(--line); padding-top: 9px; font-weight: 650; }

.btn-open {
  margin-top: 9px; width: 100%; font: inherit; font-size: 12px; font-weight: 560;
  cursor: pointer; border-radius: 7px; padding: 6px 10px;
  background: rgba(255,255,255,.08); color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.16);
}
.btn-open:hover { background: rgba(255,255,255,.15); color: #fff; }

.modal-wide { width: min(640px, 94vw); }
.obligations { border-top: 2px solid var(--line); background: #fcfdff; }
.obligations-head {
  padding: 9px 16px 4px; font-size: 12px; font-weight: 650; color: var(--ink-soft);
}
.obligations-note { font-weight: 400; color: var(--ink-faint); font-size: 11px; margin-left: 8px; }
.row-item.is-obligation { padding-top: 9px; padding-bottom: 9px; }
.row-item.is-obligation .row-name span { font-weight: 560; }
.row-sub { font-size: 10px; color: var(--ink-faint); }
.row-item.is-obligation input[type=month] {
  font: inherit; font-size: 12px; padding: 4px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; width: 100%;
}

/* ---------- Roth strategy screen ---------- */
.strategy-grid[hidden] { display: none; }
.strategy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.strat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0;
}
.strat.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow); }
.strat-head { padding: 13px 15px 11px; border-bottom: 1px solid var(--line); }
.strat-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.strat-title h4 { margin: 0; font-size: 13.5px; font-weight: 650; }
.strat-blurb { color: var(--ink-faint); font-size: 11.5px; margin: 5px 0 0; min-height: 30px; }
.strat-pick {
  font: inherit; font-size: 11px; font-weight: 620; cursor: pointer; white-space: nowrap;
  border-radius: 999px; padding: 3px 11px; border: 1px solid var(--line);
  background: #fff; color: var(--ink-soft);
}
.strat-pick:hover { border-color: var(--accent); color: var(--accent); }
.strat.is-active .strat-pick { background: var(--accent); border-color: var(--accent); color: #fff; }
.strat-body { padding: 12px 15px; display: grid; gap: 14px; }
.strat-field .control-top { margin-bottom: 3px; }
.strat-derived { border-top: 1px solid var(--line); padding: 11px 15px 13px; background: #fbfcfe; margin-top: auto; }
.derived-row { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; }
.derived-row b { font-variant-numeric: tabular-nums; }
.derived-row.binds b { color: var(--accent); }
.derived-note { font-size: 10.5px; color: var(--ink-faint); margin-top: 6px; }
.bar-wrap { margin-top: 9px; }
.bar {
  height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 3px;
}
.bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.bar-label { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-faint); }

@media (max-width: 1180px) { .strategy-grid { grid-template-columns: 1fr; } }

/* ---------- modal ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(15,23,42,.42);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
/* `display:flex` above outranks the UA stylesheet's rule for [hidden], so the
   dialog needs this or it shows on load. Same for any other flex/grid element
   toggled with the hidden attribute. */
.modal[hidden], .dirty[hidden], .tip[hidden] { display: none; }
.modal-box {
  background: #fff; border-radius: 12px; padding: 20px 22px;
  width: min(430px, 92vw); box-shadow: 0 18px 50px rgba(15,23,42,.3);
}
.modal-label { display: block; font-size: 12px; font-weight: 560; margin: 14px 0 5px; }
.modal-box input:not([type=checkbox]) {
  width: 100%; font: inherit; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px;
}
.modal-box input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.modal-error { color: #dc2626; font-size: 12px; margin-top: 7px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

@media (max-width: 1180px) {
  .shell { grid-template-columns: 64px 300px 1fr; }
  .brand-text, .screens button span:not(.soon):not(.step-num), .rail-foot { display: none; }
  .cards { grid-template-columns: 1fr; }

}

/* The icon rail only exists between 900px and 1180px: below that the rail turns
   into a top bar with an expanded menu. Bounding the query at both ends keeps
   these rules out of the mobile layout entirely, rather than having the two
   fight over specificity. The Administration page keeps its full-width rail, so
   it is excluded too.

   The icon rail hides the plan controls, but the way back to the public site
   should survive every width, so the link stays — reduced to its arrow. The
   wording remains in the DOM, so the accessible name is unchanged. */
@media (max-width: 1180px) and (min-width: 901px) {
  .shell:not(.is-administration) .rail-foot {
    display: block; padding: 14px 0 0; border-top: 0;
  }
  .shell:not(.is-administration) .rail-foot > *:not(.rail-link) { display: none; }
  .shell:not(.is-administration) .rail-link {
    margin-top: 0; width: 100%; text-align: center; font-size: 15px;
  }
  .shell:not(.is-administration) .rail-link-text { display: none; }
}

/* A bare [hidden] loses to display:flex/grid, so these need saying explicitly.
   The tax-table screen has nothing to save, and hiding the buttons is the only
   honest way to show that. */
.panel-actions[hidden], .kpis[hidden], .params[hidden] { display: none; }

/* ---------------------------------------------------- output dashboard */
.control-block { padding: 13px 16px; border-bottom: 1px solid var(--line); }
.control-head { font-weight: 600; font-size: 12.5px; letter-spacing: .01em; }

/* A segmented picker: one option on at a time. segmented-col stacks them so
   long strategy names stay readable in the narrow left panel. */
.segmented { display: flex; gap: 6px; }
.segmented-col { flex-direction: column; }
.seg-btn {
  flex: 1; text-align: left; padding: 8px 11px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
  font: inherit; font-size: 12px; transition: background .12s, border-color .12s, color .12s;
}
.seg-btn:hover { border-color: #94a3b8; color: var(--ink); }
.seg-btn.is-on {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}

.params-card .card-note { flex: 1 1 100%; }
.params {
  display: grid; gap: 8px; margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}
.param { background: #fff; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; }
.param-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
               color: var(--ink-faint); }
.param-value { font-size: 14px; font-weight: 600; margin-top: 2px; }
.param-note { font-size: 11px; color: var(--ink-soft); margin-top: 1px; line-height: 1.35; }

/* ---------------------------------------------------------- tax tables */
.taxtables[hidden] { display: none; }
.taxtables { display: grid; gap: 14px; }
/* Household profile and RMD screens reuse the tax-table layout. */
.control-age { font-size: 12px; color: var(--ink-soft); margin: 6px 0 0; font-weight: 560; }
.control-age:empty { display: none; }
.control-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; margin: 0 0 8px; }
.profile-error { margin: 4px 20px 10px; color: #b91c1c; font-size: 12.5px; }
.profile-error[hidden] { display: none; }
.save-conflict { margin: 0 20px 12px; padding: 10px 12px; border: 1px solid #fca5a5;
  background: #fef2f2; border-radius: 8px; font-size: 12.5px; color: #7f1d1d; }
.save-conflict[hidden] { display: none; }
.save-conflict p { margin: 0 0 8px; }
.save-conflict-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-notes { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.profile-notes li + li { margin-top: 4px; }
.rmd-table tr.rmd-before td { color: var(--ink-faint); }
.rmd-table tr.rmd-first td { background: #eff6ff; font-weight: 600; }
.table-scroll { overflow-x: auto; margin-top: 10px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-faint); font-weight: 600; padding: 6px 10px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.data-table td { padding: 6px 10px; border-bottom: 1px solid #f1f5f9; white-space: nowrap; }
.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: #f8fafc; }
.dash { color: var(--ink-faint); }

/* The total sits above the parts it sums, so it needs to read as a heading
   rather than as another series. */
.tip .row.is-total {
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  padding-bottom: 4px; margin-bottom: 4px; font-weight: 600;
}
.tip .row.is-total span { color: #fff; }

/* Two legends under the sources-and-uses chart, one per stack, so a colour is
   read against the bar it belongs to rather than a single merged list. */
.legend-group { align-items: baseline; margin-top: 2px; }
.legend-title { font-weight: 600; color: var(--ink); margin-right: 4px; }
.tip-sep { height: 1px; background: rgba(255, 255, 255, .18); margin: 6px 0; }

/* Start / end window per expense line. Blank means the whole projection, so an
   empty box is the normal state and must not read as missing data. */
.row-dates { display: flex; align-items: center; gap: 4px; }
/* A native month input cannot ellipsize: too narrow and it silently clips the
   year, so "December 2061" renders as "December 20". Size it for the longest
   month name plus the picker icon rather than the average one. */
.row-dates input[type=month] {
  font: inherit; font-size: 11px; padding: 2px 4px; width: 124px; min-width: 124px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
  color: var(--ink-soft);
}
.row-dates input[type=month]:hover { border-color: #94a3b8; }
.row-dates-sep { color: var(--ink-faint); font-size: 11px; }
.row-managed {
  grid-column: 1 / -1; font-size: 11px; color: #b45309;
  background: #fffbeb; border-radius: 6px; padding: 4px 8px; margin-top: 2px;
}

/* A blank window shows the projection default in grey; the user's own choice is
   bold. Grey therefore means "inherited", not "empty". */
.row-dates input.is-default { color: var(--ink-faint); font-weight: 400; }
.row-dates input.is-set { color: var(--ink); font-weight: 700; border-color: #94a3b8; }

/* The real ends of the slider's travel. Without them the base amount sitting
   left of the track reads as the range's lower bound, which it is not — the
   track runs from half the base to one and a half times it. */
.range-end {
  font-size: 10px; color: var(--ink-faint); font-variant-numeric: tabular-nums;
  white-space: nowrap; flex: 0 0 auto;
}

/* The amount is editable: the slider is for exploring, the box for when you
   already know the number. Both write the same value. */
.amount-box {
  display: inline-flex; align-items: center; gap: 1px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 7px; padding: 2px 6px; background: #fff;
}
.amount-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(37,99,235,.12); }
.amount-box input {
  font: inherit; font-size: 12px; font-weight: 620; border: 0; outline: none;
  width: 62px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink);
  background: transparent; -moz-appearance: textfield;
}
.amount-box input::-webkit-outer-spin-button,
.amount-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amount-prefix, .amount-suffix { font-size: 10.5px; color: var(--ink-faint); }

/* Save As folder browser. Scrollable so a deep folder cannot push the file-name
   box off screen. */
.save-shortcuts { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.btn-chip {
  font: inherit; font-size: 11.5px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
}
.btn-chip:hover { border-color: #94a3b8; color: var(--ink); }
.save-path {
  font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-soft); background: #f8fafc; border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 9px; margin-bottom: 6px; overflow-wrap: anywhere;
}
.save-path.is-readonly { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.save-browser {
  max-height: 220px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: 9px; margin-bottom: 12px; background: #fff;
}
.save-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  font: inherit; font-size: 12.5px; padding: 7px 11px; border: 0; background: none;
  border-bottom: 1px solid #f1f5f9; cursor: pointer; color: var(--ink);
}
.save-row:last-child { border-bottom: 0; }
.save-row:hover { background: #f8fafc; }
.save-row.is-file { color: var(--ink-faint); cursor: default; }
.save-row.is-file:hover { background: none; }
.save-row.is-up { color: var(--ink-soft); }
.save-icon { color: var(--ink-faint); font-size: 11px; }
.save-empty { padding: 10px 11px; font-size: 12px; color: var(--ink-faint); }

/* ---------- v2 SaaS header bits (rail) ---------- */
.brand-tag {
  font-size: 9px; font-weight: 700; background: var(--accent); color: #fff;
  padding: 1px 5px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
  letter-spacing: .04em;
}
.rail-user { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.09); }
.ws-name { font-size: 11.5px; color: #cbd5e1; word-break: break-word; }
.user-chip { font-size: 11px; color: #94a3b8; margin-top: 2px; word-break: break-all; }

/* ---------- login gate (auth.js) ---------- */
.btn-logout {
  margin-top: 8px; font: inherit; font-size: 11px; cursor: pointer;
  background: transparent; color: #94a3b8; border: 1px solid rgba(255,255,255,.14);
  border-radius: 7px; padding: 4px 10px;
}
.btn-logout:hover { color: #fff; border-color: rgba(255,255,255,.3); }

.login-overlay {
  position: fixed; inset: 0; z-index: 100; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: linear-gradient(150deg, #0f172a, #1e293b);
}
.login-card {
  max-height: calc(100dvh - 40px); overflow-y: auto;
  width: 100%; max-width: 560px; background: #fff; border-radius: 14px;
  padding: clamp(20px, 4vw, 36px); box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.disclaimer-acknowledgment { display:flex; gap:8px; align-items:flex-start; font-size:13px; line-height:1.5; margin:12px 0; }
.disclaimer-acknowledgment input { flex:0 0 auto; margin-top:4px; }
#login-disclaimer details { font-size:13px; line-height:1.5; }
.login-brand { font-weight: 700; font-size: 18px; color: var(--ink); }
/* The login and access-denied overlays cover the whole app, so their brand is
   also the way back to the public site. */
.login-home { display: inline-block; text-decoration: none; }
.login-home:hover { text-decoration: underline; }
.login-note a { color: var(--accent); }
.login-brand span {
  font-size: 10px; font-weight: 700; background: var(--accent); color: #fff;
  padding: 1px 6px; border-radius: 999px; margin-left: 4px; vertical-align: middle;
}
.login-sub { color: var(--ink-soft); font-size: 13px; margin: 6px 0 18px; }
.login-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-size: 13.5px; font-weight: 560; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 9px; padding: 10px;
}
.login-google:hover { background: #f8fafc; border-color: #cbd5e1; }
.g-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: #4285f4; color: #fff;
  font-weight: 700; font-size: 12px;
}
.login-or { display: flex; align-items: center; gap: 10px; color: var(--ink-faint);
  font-size: 11px; margin: 16px 0; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
#login-form { display: flex; flex-direction: column; gap: 9px; }
#login-form input {
  font: inherit; font-size: 13.5px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 9px;
}
#login-form input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.login-submit {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; margin-top: 4px;
  background: var(--accent); color: #fff; border: 0; border-radius: 9px; padding: 10px;
}
.login-submit:hover { background: #1d4ed8; }
.login-submit[disabled] { opacity: .6; cursor: default; }
.login-error { color: #dc2626; font-size: 12.5px; }
.login-note { color: var(--good); font-size: 12.5px; margin-top: 10px; }
.login-toggle { margin-top: 16px; font-size: 12.5px; color: var(--ink-soft); text-align: center; }
.login-toggle a { color: var(--accent); text-decoration: none; margin-left: 5px; font-weight: 560; }
.login-toggle a:hover { text-decoration: underline; }

/* ---------- plan import/export buttons (rail) ---------- */
.rail-files { display: flex; gap: 6px; margin-top: 6px; }
.rail-files .btn-open { flex: 1; margin-top: 0; font-size: 11px; padding: 5px 8px; }

/* ---------- save-state badge: saving only; Excel has its own note ---------- */
.dirty.is-error { color: #dc2626; background: #fee2e2; }

/* ---------- first-run welcome ---------- */
.welcome-card { max-width: 460px; }
.welcome-list {
  margin: 14px 0 18px; padding-left: 18px; color: var(--ink-soft);
  font-size: 13px; line-height: 1.7;
}
.welcome-list b { color: var(--ink); }

.model-scope { margin: 0 0 20px; font-size: 13px; line-height: 1.6; color: #475569; }
.model-scope summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.model-scope[open] { border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; padding: 12px 16px 6px; }
.model-scope li { margin-bottom: 6px; }
.scope-intro { margin: 10px 0 4px; max-width: 760px; }
.scope-sections { max-height: 60vh; overflow-y: auto; padding-right: 6px; }
.scope-section { border-top: 1px solid #e2e8f0; padding: 12px 0 4px; }
.scope-section h3 { margin: 0 0 2px; font-size: 14px; color: var(--ink); }
.scope-summary { margin: 0 0 8px; }
.scope-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.scope-cols h4 { margin: 0 0 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.scope-cols ul { margin: 0 0 8px; padding-left: 18px; }
@media (max-width: 720px) { .scope-cols { grid-template-columns: 1fr; } }

.portfolio-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
  margin: 16px 0 18px;
}
.portfolio-summary[hidden] { display: none; }
.portfolio-pair { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; min-width: 0; }
/* The home-equity pair reads as an aside to the portfolio beside it. */
.portfolio-pair.is-illiquid .kpi { background: #fbfdfb; border-style: dashed; }
.portfolio-pair.is-total .kpi { border-color: #c7d2fe; background: #f5f7ff; }
.kpi-scope { font-size: 10px; color: var(--ink-faint); margin-top: 2px; }
.portfolio-initial { background: #f8fafc; }

.shell.is-administration { grid-template-columns: 216px minmax(0, 1fr); }
.panel[hidden], .administration-page[hidden], .members-editor[hidden] { display: none; }
.administration-page { max-width: 1080px; display: grid; gap: 20px; margin-top: 24px; }

/* ---------- administration tabs ---------- */
.admin-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--line); padding-bottom: 0;
}
.admin-tab {
  font: inherit; font-size: 13px; font-weight: 560; cursor: pointer;
  background: none; border: 1px solid transparent; border-bottom: 0;
  border-radius: 8px 8px 0 0; padding: 9px 16px; margin-bottom: -1px;
  color: var(--ink-soft);
}
.admin-tab[hidden] { display: none; }
.admin-tab:hover { color: var(--ink); background: #f1f5f9; }
.admin-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.admin-tab.is-active {
  background: #fff; border-color: var(--line); color: var(--accent);
  font-weight: 650;
}
.admin-panel { display: grid; gap: 20px; min-width: 0; }
.admin-panel[hidden] { display: none; }

/* Buttons that belong to one card, on one row, sized to their labels rather
   than stretched to full width like the inputs above them. */
.admin-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
/* .admin-card stretches its inputs and selects to full width, which is right for
   a labelled field and wrong for a control sitting on a row of buttons. Declared
   after that rule, since the two have equal specificity. */
.admin-card .admin-actions .btn { width: auto; }
.admin-card .admin-actions select,
.admin-card .admin-actions input { width: auto; min-width: 200px; margin: 0; }

.admin-card.admin-danger { border-color: #fecaca; background: #fffbfb; }
.admin-card.admin-danger h2 { color: #b91c1c; }
.admin-card { min-width: 0; background: white; border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.admin-card h2 { margin-bottom: 8px; font-size: 17px; }
.admin-card label { display: block; font-weight: 600; margin: 18px 0 6px; }
.admin-card input, .admin-card select {
  width: 100%; min-height: 40px; padding: 8px 10px; font: inherit;
  color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 6px;
}
.admin-card .sub { overflow-wrap: anywhere; }
.members-list { margin-top: 18px; }
.member-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.member-row > div { min-width: 0; overflow-wrap: anywhere; }
.members-editor { display: grid; grid-template-columns: minmax(0, 2fr) minmax(120px, 1fr) auto; align-items: end; gap: 14px; }
.members-editor button { min-height: 40px; }
#approved-users-form, #invite-person-card .members-editor, #owner-invites-card .members-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#invite-person-card .members-editor button, #owner-invites-card .members-editor button { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 800px) {
  .members-editor, #approved-users-form, #invite-person-card .members-editor, #owner-invites-card .members-editor { grid-template-columns: 1fr; }
}
.shell.is-administration .screens button span { display: inline; }
.shell.is-administration .brand-text, .shell.is-administration .rail-foot { display: block; }

.approved-user-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border, #ddd); }
.approved-user-row > span:first-child { overflow-wrap: anywhere; }
@media (max-width: 600px) { .approved-user-row { grid-template-columns: minmax(0, 1fr) auto; } .approved-user-row > span:first-child { grid-column: 1 / -1; } }

/* ---------- platform-administrator console ---------- */
.revenue-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin: 14px 0 18px;
}
.revenue-kpis .kpi { background: #f8fafc; border: 1px solid var(--line); }
#revenue-chart svg { max-width: 640px; }

.accounts-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.account-row { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.account-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.account-household {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--ink-soft);
}
.btn-small { padding: 4px 10px; font-size: 12px; }
.btn-danger { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.btn-danger:hover:not([disabled]) { background: #fee2e2; border-color: #fca5a5; }
.badge-ok { background: #dcfce7; color: #166534; }
.badge-off { background: #fee2e2; color: #b91c1c; }

/* ---------- plan management on the admin page ---------- */
.plans-limit { margin: 8px 0; font-weight: 600; color: var(--ink-soft); }
.plans-admin-list { margin-top: 14px; overflow-x: auto; }
.plans-table { width: 100%; border-collapse: collapse; text-align: left; }
.plans-table th, .plans-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.plans-table th { background: #f1f5f9; font-size: 12px; font-weight: 650; color: var(--ink-soft); }
.plans-table td:first-child { width: 50%; }
.plan-admin-name { display: flex; align-items: center; gap: 10px; font-weight: 560; overflow-wrap: anywhere; }
.plans-table .plan-pick { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; padding: 0; }
.plan-admin-name > span { min-width: 0; }
.plan-status { display: inline-block; font-size: 12px; color: var(--ink-soft); }
.plan-status.is-open { color: #166534; font-weight: 650; }
.plan-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 600px) {
  .plans-table th, .plans-table td { padding: 10px 6px; }
  .plans-table td:first-child { width: 40%; }
  .plan-admin-name { gap: 6px; }
}

.ownership-settings { margin: 20px 0; padding: 16px; border: 1px solid #cbd5e1; border-radius: 10px; text-align: left; }
.ownership-settings summary { cursor: pointer; font-weight: 600; }
.ownership-settings label { display: block; margin: 12px 0; }
.ownership-settings select, .ownership-settings input:not([type=checkbox]) { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.ownership-settings .ownership-check { display: flex; align-items: flex-start; gap: 8px; }
.ownership-settings .ownership-check input { width: auto; flex: 0 0 auto; margin-top: 4px; }
.ownership-settings .btn { margin: 8px 8px 0 0; }
.household-access-card { max-width: 560px; max-height: calc(100dvh - 40px); overflow-y: auto; }
.ownership-settings select, .ownership-settings input { font: inherit; }

.trial-banner{padding:12px 24px;background:#fff2d9;border-bottom:1px solid #dec28b;color:#634a20;font-size:14px;line-height:1.5}.trial-banner a{color:#244e74;text-decoration:underline;font-weight:600}.trial-banner[hidden]{display:none}

body.has-trial{display:flex;flex-direction:column;height:100dvh;overflow:hidden}body.has-trial>.trial-banner{flex-shrink:0}body.has-trial>.shell{height:auto;flex:1;min-height:0}

.account-head>div,.account-household>span{min-width:0;overflow-wrap:anywhere}.account-head>.btn,.account-household>.btn{flex-shrink:0}
@media(max-width:640px){.account-head,.account-household{flex-direction:column;align-items:flex-start}}

/* ---------- narrow viewports (tablet portrait and phones) ----------
   The three-pane desktop layout does not survive below ~900px: the rail and
   panel alone eat the whole width and push the charts off screen. Here the rail
   becomes a top bar with a menu, the panel stacks above the charts, and the
   page scrolls as one document instead of three independent panes.

   This makes the app usable on a small screen. It does not make every screen
   pleasant on one — Expense Line Items and the tax tables are wide tables and
   scroll sideways by design, which the landing page says up front. */
@media (max-width: 900px) {
  .shell, .shell.is-administration {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    height: auto;
    min-height: 100vh;
  }

  .rail { padding: 10px 0 0; position: sticky; top: 0; z-index: 30; }
  .brand { padding: 0 14px 10px; justify-content: space-between; gap: 12px; }
  /* Undo the 1180px icon-rail treatment: at this size the rail is a top bar
     with room for words again. */
  .brand-text { display: flex; }
  .screens button span:not(.soon) { display: inline; }

  .rail-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    font: inherit; font-size: 12.5px; font-weight: 560; cursor: pointer;
    background: rgba(255,255,255,.08); color: #e2e8f0;
    border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 7px 12px;
  }
  .rail-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .rail-bars, .rail-bars::before, .rail-bars::after {
    display: block; width: 15px; height: 2px; border-radius: 2px;
    background: currentColor; content: "";
  }
  .rail-bars { position: relative; }
  .rail-bars::before { position: absolute; top: -5px; }
  .rail-bars::after { position: absolute; top: 5px; }

  .rail-menu { display: none; max-height: 70vh; overflow-y: auto; padding-bottom: 12px; }
  .rail.is-open .rail-menu { display: flex; }
  .screens { flex: none; }
  /* The 1180px rule still applies at this width and hides the whole rail-foot;
     the open menu has room for the plan controls, so put it back. */
  .rail-foot { display: block; }

  .panel { border-right: 0; border-bottom: 1px solid var(--line); }
  /* One page scroll, not three: the panel and main are no longer fixed-height
     panes, so their inner scrollers have to be released or content is clipped. */
  .controls, .main { overflow: visible; }
  .panel, .main { min-height: 0; }
  .main { padding: 16px 16px 28px; }
  .panel-head { padding: 14px 16px 10px; }
  .controls { padding: 6px 16px 12px; }

  .main-head { flex-direction: column; gap: 8px; }
  .dirty { white-space: normal; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .administration-page { margin-top: 16px; }
  .admin-card { padding: 18px; }
  .strategy-grid { grid-template-columns: 1fr; }

  /* Wide by nature. Sideways scrolling keeps the columns aligned and readable,
     which reflowing them into cards would not. */
  .lineitems, .taxtables { overflow-x: auto; }
  .lineitems > *, .taxtables > * { min-width: 880px; }
}

@media (max-width: 560px) {
  .modal-box { width: min(430px, 94vw); }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
  .panel-actions { flex-wrap: wrap; }
  .main { padding: 14px 12px 24px; }
}

.invitation-draft:empty{display:none}.invitation-draft{margin-block:16px;padding:16px;border:1px solid var(--line);border-radius:8px}.invitation-draft textarea{display:block;width:100%;margin-block:12px;padding:12px;line-height:1.5;resize:vertical}.invitation-draft summary{cursor:pointer}.invitation-draft>a{display:inline-block;text-decoration:none}

/* Always reachable, including narrow-screen menus and account-access overlays. */
.app-home-button { position:fixed; right:20px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:110; display:inline-flex; align-items:center; gap:8px; background:#fff; color:#183d57; border:1px solid #9bafbf; border-radius:8px; padding:10px 16px; box-shadow:0 3px 14px #0f172a22; text-decoration:none; font-weight:600; }
.app-home-button:hover { background:#edf4f8; }
.app-home-button:focus-visible { outline:3px solid #2563eb; outline-offset:3px; }
.main { padding-bottom:80px; }
.login-overlay { padding-bottom:80px; }
.login-card, .household-access-card { max-height:calc(100dvh - 100px); }

/* Remains visible during authentication and while screen controls are locked. */
.app-activity {
  position: fixed; z-index: 120; top: max(16px, env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%); display: flex; align-items: center;
  gap: 12px; width: max-content; max-width: calc(100vw - 32px);
  padding: 14px 20px; border: 1px solid #cbd5e1; border-radius: 12px;
  background: #fff; color: #183d57; box-shadow: 0 4px 24px #0f172a33;
  font-size: 14px; font-weight: 600; pointer-events: none;
}
.app-activity[hidden] { display: none; }
.activity-spinner {
  flex: 0 0 auto; width: 22px; height: 22px; border: 3px solid #dbeafe;
  border-top-color: #2563eb; border-radius: 50%; animation: activity-spin .8s linear infinite;
}
@keyframes activity-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .activity-spinner { animation: none; } }

/* Current plan context; full management lives under Administration → Plans. */
.current-plan-select {
  display: block; width: 100%; min-width: 0; margin: 5px 0 10px;
  padding: 9px 7px; border: 1px solid #64748b; border-radius: 7px;
  background: #1e293b; color: #f8fafc; font: inherit; font-weight: 600;
}
.current-plan-select:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.plan-default-note { margin: 4px 0 12px; color: #cbd5e1; font-size: 12px; }
.current-plan-select[hidden], .plan-default-note[hidden], #workbook-name[hidden] { display: none; }

#workbook-name { font-size: 14px; font-weight: 650; word-break: normal; overflow-wrap: anywhere; margin-bottom: 8px; }

/* Household roster, invitations, and unoccupied places share one table. */
.members-list { overflow-x: auto; }
.people-table { width: 100%; border-collapse: collapse; text-align: left; }
.people-table th, .people-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.people-table th { font-size: 12px; color: var(--ink-soft); background: #f1f5f9; }
.people-table td:first-child { overflow-wrap: anywhere; min-width: 110px; }
.people-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media(max-width:600px) {
  .people-table th, .people-table td { padding: 10px 5px; font-size: 12px; }
  .people-table .sub { font-size: 11px; }
  .people-table td:first-child { min-width: 85px; }
}

.people-table .member-access-select { width: 220px; max-width: none; }
.people-table .member-access-status { display: block; margin-top: 4px; }

/* Platform product usage */
.usage-controls {display:flex;flex-wrap:wrap;gap:14px;align-items:end;margin:18px 0}
.usage-controls label {display:flex;flex-direction:column;gap:6px;font-size:13px;max-width:100%}
.usage-controls .usage-checkbox {flex-direction:row;align-items:center;align-self:center}
.usage-checkbox input {width:auto}
.usage-tiles {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0}
.usage-tile {padding:16px;background:#f4f7fa;border:1px solid #dae3ec;border-radius:8px;display:flex;flex-direction:column;gap:10px}
.usage-tile span {font-size:13px;color:#40536a}
.usage-tile strong {font-size:24px;color:#15334f}
.usage-table-wrap {overflow-x:auto}
.usage-table {border-collapse:collapse;width:100%;font-size:13px}
.usage-table th,.usage-table td {padding:10px 12px;text-align:left;border-bottom:1px solid #dae3ec;overflow-wrap:anywhere}
.usage-table th {font-weight:600}
.usage-definitions {margin-top:18px}
.usage-definitions summary {cursor:pointer;font-weight:600}

/* Private feedback: native dialogs keep keyboard focus and preserve the plan view. */
.feedback-entry {display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.feedback-entry .rail-link {background:none;border:0;text-align:center;cursor:pointer}
.feedback-dialog {width:min(720px,calc(100vw - 32px));max-height:86vh;overflow:auto;border:1px solid #cad5e2;border-radius:14px;padding:24px;color:#172b42;box-shadow:0 12px 60px #10203840}
.feedback-dialog::backdrop {background:#172b4280}
.feedback-dialog-header {display:flex;align-items:center;justify-content:space-between;gap:16px}
.feedback-dialog h2 {font-size:20px;overflow-wrap:anywhere}
.feedback-dialog p {line-height:1.55}
.feedback-form {display:flex;flex-direction:column;gap:10px;margin-top:18px}
.feedback-form[hidden] {display:none}
.feedback-form textarea {width:100%;box-sizing:border-box;resize:vertical;min-height:90px;font:inherit;border:1px solid #acbace;border-radius:6px;padding:10px}
.feedback-form label {font-weight:600;font-size:14px}
.feedback-form .btn {align-self:start}
.feedback-context {background:#f1f6fc;padding:12px;border-radius:6px;font-size:13px;overflow-wrap:anywhere}
.feedback-list {display:grid;gap:10px;margin:15px 0}
.feedback-list-item {display:flex;flex-direction:column;align-items:start;text-align:left;padding:14px;gap:7px;border:1px solid #d6dfe9;border-radius:8px;background:white;color:#172b42;cursor:pointer;font:inherit;width:100%;overflow-wrap:anywhere}
.feedback-list-item:hover {background:#f1f6fc}
.feedback-list-item small {color:#465b72}
.feedback-pagination {display:flex;gap:10px}
.feedback-message {border-left:3px solid #6c8db5;padding:10px 14px;margin:14px 0;background:#f5f8fc}
.feedback-message p,.feedback-description {white-space:pre-wrap;overflow-wrap:anywhere}
.feedback-internal {background:#fff7e4;border:1px solid #d8b976;padding:14px;border-radius:6px}
.feedback-dialog :focus-visible,.feedback-entry :focus-visible,.feedback-list-item:focus-visible {outline:3px solid #325fbd;outline-offset:3px}

/* Identity and role remain visible while moving between household plans. */
.household-switcher {padding:12px 10px 16px;border-bottom:1px solid #526078;margin-bottom:10px;display:grid;gap:8px}
.household-switcher label {color:#dbeafe;font-size:12px;font-weight:600}
.household-switcher select {width:100%;min-width:0;min-height:40px;border:1px solid #71829c;border-radius:6px;background:#1e293b;color:#f8fafc;padding:6px;font:inherit;font-size:13px}
.household-switcher p {font-size:12px;color:#fde68a;margin:0;overflow-wrap:anywhere}
.household-switcher :focus-visible {outline:3px solid #93c5fd;outline-offset:2px}

/* The single grid row is the viewport, never the rail's content: without the
   row cap and the rail's min-height:0, a long screen list grows the row past the
   window and the rail menu's own scroll bar never appears. */
@media (min-width:901px) {
  .shell {grid-template-rows:minmax(0,1fr)}
  .rail {min-height:0}
  .rail-menu {overflow-y:auto;overscroll-behavior:contain}
  .household-switcher, .screens, .rail-foot {flex-shrink:0}
}
@media (min-width:901px) and (max-width:1180px) {
  .shell:not(.is-administration) {grid-template-columns:216px 260px minmax(0,1fr)}
  .brand-text {display:flex}
  .screens button span:not(.soon) {display:inline}
}

.current-household-role {font-size:12px;color:#e2e8f0}

/* Saving is reported on its own; Excel is an optional download, noted by its button. */
.dirty.is-saved { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.export-note { margin: 6px 0 10px; font-size: 11px; line-height: 1.45; color: var(--rail-text, #cbd5e1); opacity: .85; }
.export-note.is-older { color: #fcd34d; opacity: 1; }
.export-note.is-locked { opacity: 1; }

/* Plan settings: history and the whole-plan reset, away from the editing screens. */
.plan-settings-link { width: 100%; margin: 6px 0 2px; }
.plan-settings h4 { margin: 16px 0 6px; font-size: 13px; }
.history-list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 8px; }
.history-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.history-list li:last-child { border-bottom: 0; }
.history-list .btn { padding: 3px 10px; font-size: 12px; }
.history-current { font-size: 11px; font-weight: 700; color: var(--good, #047857); }
.reset-section { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--line); }
.reset-scope { margin: 4px 0 8px 18px; padding: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }
.reset-confirm { margin-top: 10px; padding: 10px 12px; border: 1px solid #fecaca; background: #fef2f2; border-radius: 8px; }
.btn-danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.btn-danger[disabled] { opacity: .45; cursor: not-allowed; }
.plan-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px;
  padding: 10px 14px; border: 1px solid #93c5fd; background: #eff6ff; border-radius: 10px; font-size: 13px; }
.plan-notice[hidden] { display: none; }
.plan-notice span { flex: 1 1 280px; }

/* Household timeline on the Profile screen. */
.timeline-head { padding-top: 6px; }
.switch-age { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.switch-age label { font-size: 12.5px; color: var(--ink-soft); }
.switch-age input { width: 90px; }
.switch-align { margin-top: 8px; font-size: 12px; padding: 5px 10px; white-space: normal; text-align: left; }
.household-timeline { list-style: none; margin: 6px 0 0; padding: 0; }
.household-timeline li { display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--line); font-size: 13px; }
.household-timeline li:last-child { border-bottom: 0; }
.household-timeline .tl-year { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.household-timeline li.is-switch { color: #7c2d12; font-weight: 600; }
.household-timeline li.is-survival { color: #1e3a8a; font-weight: 600; }
.household-timeline li.is-outside { opacity: .6; }
.household-timeline .tl-note { font-size: 11px; font-weight: 400; color: var(--ink-faint); }
.survivor-status { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.survivor-status.is-ok { background: #ecfdf5; color: #065f46; }
.survivor-status.is-warn { background: #fffbeb; color: #78350f; }

.survivor-planning { display: grid; gap: 18px; }
.survivor-planning[hidden] { display: none; }
.survivor-planning .card { padding: 20px; min-width: 0; }
.survivor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.survivor-field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; font-size: 14px; }
.survivor-field input, .survivor-field select, .survivor-field textarea { padding: 8px; width: 100%; box-sizing: border-box; font: inherit; }
.survivor-planning .sub { font-size: 14px; color: var(--ink-soft); }
.survivor-planning fieldset { margin: 16px 0; border: 1px solid var(--line); }
.survivor-expense { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.survivor-expense input { width: 70px; }
@media(max-width:900px) { .survivor-expense { grid-template-columns: 1fr; } }

.survivor-help { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.survivor-fact { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #e2e8f0; font-size: 14px; }
.survivor-fact span { color: var(--ink-soft); }
.survivor-fact strong { color: var(--ink); text-align: right; }
.survivor-slider { display: block; margin: 14px 0 6px; font-size: 14px; }
.survivor-slider span { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--ink-soft); }
.survivor-slider output { font-weight: 600; color: var(--ink); }
.survivor-slider input { width: 100%; }
.survivor-upgrade { border-left: 3px solid #b45309; margin-bottom: 16px; }
.survivor-upgrade ul { margin: 8px 0 10px; padding-left: 20px; line-height: 1.6; }
.survivor-upgrade .btn { margin-top: 10px; }
.field-error { color: #b91c1c; font-size: 13px; margin: 4px 0 0; }
#survivor-rmds[aria-invalid="true"] { border-color: #b91c1c; outline-color: #b91c1c; }

/* State residence controls share the profile's committed-input autosave flow. */
#state-tax-controls select { display: block; width: 100%; min-height: 38px; margin-top: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: inherit; font: inherit; }
#state-tax-controls summary, .state-tax-detail summary { cursor: pointer; font-weight: 600; }
.state-tax-detail { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.state-tax-detail .table-scroll { max-height: 480px; overflow: auto; }
.state-tax-detail th { position: sticky; top: 0; background: #fff; }

/* Keep calculation state visible while the previous output is on screen. */
.results-status.is-output-pending {
  position: sticky; top: 12px; z-index: 20;
  padding: 16px 20px; border: 2px solid #b45309; border-radius: 10px;
  background: #fffbeb; color: #78350f; font-size: 16px; font-weight: 650;
  box-shadow: 0 3px 12px #00000014;
}
.results-pending { opacity: .48; }
.row-name .row-caption { white-space: normal; overflow: visible; }
.row-caption > span:first-child { white-space: normal; overflow: visible; }
.row-name .row-annual { display: block; white-space: normal; color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 3px; }
.coverage-lines { min-width: 0; margin: 10px 0 0; padding: 0; border: 0; border-top: 1px solid var(--line); }
.coverage-lines legend { margin-left: 16px; padding: 0 6px; font-weight: 650; font-size: 13px; }
.coverage-help { margin: 4px 16px 8px; font-size: 12px; color: var(--ink-soft); }