/* Expense Planner lines (2026-09-24) — see js/14b-expense-budget.js */
.xb { --xb-need:var(--c-slate-45b); --xb-pref:var(--c-teal-50); --xb-line:var(--c-gray-95); --xb-ink:var(--c-slate-25); --xb-muted:var(--c-slate-60); }
.xb-intro { margin:0 0 14px; max-width:760px; font-size:14px; line-height:1.55; color:var(--c-slate-45); }
.xb-empty { padding:20px; margin:0 0 14px; border:1px dashed var(--c-sage-85b); border-radius:16px; background:var(--c-gray-99); text-align:center; }
.xb-empty strong { display:block; font-size:16px; color:var(--xb-ink); margin-bottom:4px; }
.xb-empty p { margin:0 auto 14px; max-width:480px; font-size:13.5px; line-height:1.5; color:var(--c-slate-45); }
.xb-btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 18px; border-radius:999px; border:1px solid var(--c-gray-90); background:var(--c-gray-99); color:var(--c-teal-50); font:inherit; font-size:14px; font-weight:750; cursor:pointer; }
.xb-btn-primary { background:var(--c-teal-50); border-color:var(--c-teal-50); color:var(--c-gray-99); }
.xb-legend { display:grid; grid-template-columns:1fr 104px 104px 28px; gap:0; padding:0 14px 6px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.xb-legend .xb-tn, .xb-cat-tot .xb-tn { color:var(--xb-need); text-align:right; }
.xb-legend .xb-tp, .xb-cat-tot .xb-tp { color:var(--xb-pref); text-align:right; }
.xb-cats { display:flex; flex-direction:column; gap:10px; }
.xb-cat { border:1px solid var(--xb-line); border-radius:16px; background:var(--c-gray-99); overflow:visible; box-shadow:0 1px 2px rgba(var(--c-shadow-rgb), 0.04); }
.xb-cat[open] { box-shadow:0 6px 18px rgba(var(--c-shadow-rgb), 0.07); }
.xb-cat-head { display:grid; grid-template-columns:36px minmax(0,1fr) 208px 28px; align-items:center; gap:12px; padding:12px 14px; min-height:60px; cursor:pointer; list-style:none; border-radius:16px; }
.xb-cat-head::-webkit-details-marker { display:none; }
.xb-cat-head:focus-visible { outline:2px solid var(--c-teal-50); outline-offset:2px; }
.xb-badge { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; }
.xb-cat-name { min-width:0; display:flex; flex-direction:column; }
.xb-cat-name strong { font-size:15.5px; font-weight:800; color:var(--xb-ink); line-height:1.25; }
.xb-cat-name em { font-style:normal; font-size:12.5px; color:var(--xb-muted); }
.xb-cat-tot { display:grid; grid-template-columns:1fr 1fr; gap:0; font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; }
.xb-chev { width:28px; height:28px; border-radius:50%; background:var(--c-gray-95); position:relative; }
.xb-chev::after { content:''; position:absolute; left:10px; top:8px; width:7px; height:7px; border-right:2px solid var(--c-slate-45); border-bottom:2px solid var(--c-slate-45); transform:rotate(45deg); transition:transform .15s; }
.xb-cat[open] .xb-chev::after { transform:rotate(225deg); top:11px; }
.xb-cat-body { padding:4px 14px 14px; border-top:1px solid var(--c-gray-95); }
.xb-note { margin:10px 0 4px; padding:8px 12px; border-radius:10px; background:var(--c-gray-99); font-size:12.5px; line-height:1.5; color:var(--c-slate-45); }
.xb-rows { display:flex; flex-direction:column; }
.xb-addline { margin-top:10px; min-height:40px; padding:8px 14px; border:1px dashed var(--c-slate-85); border-radius:12px; background:var(--c-gray-99); color:var(--c-teal-50); font:inherit; font-size:13.5px; font-weight:750; cursor:pointer; width:100%; }
.xb-addline:hover { border-color:var(--c-teal-50); background:var(--c-gray-99); }
.xb-add { margin-top:16px; }
.xb-add-title { font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--xb-muted); margin:0 0 8px; }
.xb-chips { display:flex; flex-wrap:wrap; gap:8px; }
.xb-chip { min-height:38px; padding:7px 14px; border:1px solid var(--c-gray-90); border-radius:999px; background:var(--c-gray-99); color:var(--c-slate-30); font:inherit; font-size:13.5px; font-weight:650; cursor:pointer; }
.xb-chip:hover { border-color:var(--c-teal-50); color:var(--c-teal-50); background:var(--c-gray-99); }

/* one line */
.xb-row { position:relative; display:grid; gap:8px 10px; align-items:center; padding:12px 0; border-bottom:1px solid var(--c-gray-95); }
.xb-row.xb-flash { animation:xbflash 1.6s ease-out; }
@keyframes xbflash { 0%,40% { background:var(--c-sand-95b); } 100% { background:transparent; } }
.xb-c { min-width:0; }
.xb-cap { display:block; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--xb-muted); margin:0 0 3px; }
.xb .xb-row select, .xb .xb-row input[type=text], .xb .xb-row input[type=number] {
  width:100%; min-width:0; box-sizing:border-box; height:40px; min-height:40px; padding:6px 10px; margin:0;
  border:1px solid var(--c-gray-90); border-radius:10px; background:var(--c-gray-99); color:var(--xb-ink); font:inherit; font-size:14px; }
.xb .xb-row select { padding-right:26px; }
.xb .xb-row input:focus, .xb .xb-row select:focus { outline:none; border-color:var(--c-teal-50); box-shadow:0 0 0 3px rgba(var(--c-shadow-rgb), 0.15); }
.xb-money { position:relative; }
.xb-money i { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-style:normal; font-size:14px; color:var(--xb-muted); pointer-events:none; }
/* [type] in the selector: money boxes are text boxes now (js/42), and the wide-screen text-box rule below set 8px under the $ (2026-10-04) */
.xb .xb-row .xb-money input, .xb .xb-row .xb-money input[type="text"] { padding-left:22px; font-variant-numeric:tabular-nums; font-weight:700; }
.xb .xb-mtg-f .xb-money:not(.xb-pct) input[type="text"] { padding-left:22px; }
.xb-need .xb-money input { color:var(--xb-need); }
.xb-prefer .xb-money input { color:var(--xb-pref); }
.xb-when { display:flex; gap:6px; }
.xb .xb-row .xb-when .xb-age { flex:0 0 64px; width:64px; padding:6px 8px; }
.xb-every { display:flex; align-items:center; gap:6px; margin-top:6px; font-size:12.5px; color:var(--xb-muted); white-space:nowrap; }
.xb .xb-row .xb-every input { width:56px; flex:0 0 56px; height:34px; min-height:34px; }
.xb-na { display:inline-block; padding:10px 4px; color:var(--xb-muted); }
.xb-chk { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--c-slate-30); cursor:pointer; }
.xb .xb-chk input[type=checkbox] { width:18px; height:18px; min-height:0; margin:0; accent-color:var(--c-teal-50); flex:0 0 auto; }
.xb-x { width:32px; height:32px; border-radius:50%; border:1px solid var(--c-gray-95); background:var(--c-gray-99); color:var(--c-gray-65); font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center; padding:0; }
.xb-x:hover { color:var(--c-red-50b); border-color:var(--c-rose-85); background:var(--c-gray-95); }
.xb-extra { display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; }
.xb-warn { font-size:12.5px; line-height:1.45; color:var(--c-amber-45); background:var(--c-sand-99); border:1px solid var(--c-amber-90b); border-radius:8px; padding:6px 10px; }
.xb-status { font-size:12.5px; color:var(--xb-muted); }

/* table layout on wide screens */
@media (min-width:1101px) {
  .xb-thead, .xb-row { grid-template-columns:minmax(0,1.4fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,.9fr) 58px minmax(0,1fr) minmax(0,1fr) 32px; gap:8px !important; }
  .xb-thead { display:grid; gap:10px; padding:10px 0 6px; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--xb-muted); border-bottom:1px solid var(--c-gray-95); }
  .xb-thead span:nth-child(4) { color:var(--xb-need); } .xb-thead span:nth-child(5) { color:var(--xb-pref); }
  .xb-thead span:nth-child(6) { text-align:center; }
  .xb-thead { font-size:10.5px; letter-spacing:.03em; }
  .xb-row .xb-cap { display:none; }
  .xb-ded { text-align:center; } .xb-ded-txt { display:none; }
  .xb-extra { grid-column:1 / -1; margin-top:-2px; }
  .xb-extra:empty { display:none; }
  .xb-freq { align-self:start; }
  .xb .xb-row select, .xb .xb-row input[type=text] { padding-left:8px; font-size:13.5px; }
  .xb .xb-row select { padding-right:20px; }
}
/* card layout below that */
@media (max-width:1100px) {
  .xb-thead { display:none; }
  .xb-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px; grid-template-areas:"sub sub del" "label label label" "need prefer prefer" "freq ded ded" "start end end" "extra extra extra"; padding:14px 0 16px; }
  .xb-row + .xb-row { border-top:0; }
  .xb-sub { grid-area:sub; } .xb-label { grid-area:label; } .xb-freq { grid-area:freq; } .xb-need { grid-area:need; } .xb-prefer { grid-area:prefer; }
  .xb-ded { grid-area:ded; align-self:end; padding-bottom:10px; } .xb-start { grid-area:start; } .xb-end { grid-area:end; } .xb-extra { grid-area:extra; }
  .xb-del { grid-area:del; align-self:end; justify-self:end; padding-bottom:4px; }
  .xb-cat-head { grid-template-columns:36px minmax(0,1fr) auto 28px; }
  .xb-cat-tot { grid-template-columns:auto; text-align:right; gap:1px; font-size:14px; }
  .xb-cat-tot .xb-tn::before { content:'Need '; font-size:11px; font-weight:700; }
  .xb-cat-tot .xb-tp::before { content:'Prefer '; font-size:11px; font-weight:700; }
  .xb-legend { display:none; }
}
@media (max-width:560px) {
  .xb-cat-body { padding:2px 12px 12px; }
  .xb-cat-head { padding:10px 12px; gap:10px; }
  .xb-cat-name strong { font-size:15px; }
  .xb .xb-row select, .xb .xb-row input[type=text], .xb .xb-row input[type=number] { height:44px; min-height:44px; font-size:16px; }
  .xb .xb-row .xb-when .xb-age { flex-basis:58px; width:58px; }
}

/* sticky totals footer */
.xb-foot { position:sticky; bottom:0; z-index:60; display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap; margin:22px 0 0; padding:12px 18px;
  background:rgba(var(--c-gray-99-rgb), 0.97); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--xb-line, var(--c-gray-95)); border-radius:16px 16px 0 0; box-shadow:0 -8px 24px rgba(var(--c-shadow-rgb), 0.1); }
.xb-foot-sum { flex:1 1 320px; min-width:0; }
.xb-foot-cap { font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--c-slate-60); }
.xb-foot-nums { display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:2px; font-variant-numeric:tabular-nums; }
.xb-foot-nums em { font-style:normal; font-size:13px; font-weight:700; color:var(--c-slate-60); }
.xb-foot-nums b { font-size:20px; font-weight:800; }
.xb-fn b { color:var(--c-slate-45b); } .xb-fp b { color:var(--c-teal-50); }
.xb-foot-sub { font-size:12.5px; color:var(--c-slate-60); }
.xb-basis { display:inline-flex; align-items:center; gap:4px; padding:4px; border-radius:999px; background:var(--c-gray-95); }
.xb-basis span { font-size:12px; font-weight:700; color:var(--c-slate-45); padding:0 6px 0 8px; }
.xb-basis button { min-height:36px; padding:6px 14px; border:0; border-radius:999px; background:transparent; color:var(--c-slate-45); font:inherit; font-size:13.5px; font-weight:750; cursor:pointer; }
.xb-basis button.is-on { background:var(--c-gray-99); color:var(--c-teal-50); box-shadow:0 1px 4px rgba(var(--c-shadow-rgb), 0.15); }
.xb-return { min-height:44px; padding:10px 20px; border:0; border-radius:999px; background:var(--c-teal-50); color:var(--c-gray-99); font:inherit; font-size:14.5px; font-weight:750; cursor:pointer; box-shadow:0 6px 14px rgba(var(--c-shadow-rgb), 0.22); }
.xb-return:hover { background:var(--c-teal-40); }
@media (max-width:700px) {
  .xb-foot { bottom:calc(68px + env(safe-area-inset-bottom, 0px)); margin-left:-4px; margin-right:-4px; padding:8px 12px 10px; gap:6px 8px; border-radius:14px; }
  html.mf-actionbar-on .xb-foot { bottom:calc(136px + env(safe-area-inset-bottom, 0px)); }
  .xb-foot-sum { flex-basis:100%; display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
  .xb-foot-cap { font-size:10.5px; letter-spacing:.04em; }
  .xb-foot-sub { display:none; }
  .xb-foot-nums { margin:0; gap:2px 12px; justify-content:flex-end; }
  .xb-foot-nums b { font-size:16px; }
  .xb-foot-nums em { font-size:11.5px; }
  .xb-basis { flex:1 1 auto; justify-content:flex-start; }
  .xb-basis button { min-height:34px; padding:5px 12px; }
  .xb-return { flex:0 0 auto; min-height:42px; padding:8px 16px; }
}
/* "Age…" chosen: short select + the age box */
.xb .xb-row .xb-when:has(.xb-age) select { flex:0 0 76px; width:76px; }
.xb .xb-row .xb-when:has(.xb-age) .xb-age { flex:1 1 auto; width:auto; min-width:52px; }
@media (max-width:1100px) { .xb-row.is-once .xb-end { display:none; } }
@media (max-width:560px) { .xb .xb-row .xb-when:has(.xb-age) select { flex-basis:88px; width:88px; } }
/* Simplifi import + flexible spending (2026-09-25) */
.xb-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0 0 12px; }
.xb-import { cursor:pointer; }
.xb-import:hover { border-color:var(--c-teal-50); background:var(--c-gray-99); }
.xb-tools-note { font-size:12.5px; color:var(--c-slate-60); }
.xb-import-msg { margin:0 0 14px; padding:12px 14px; border:1px solid var(--c-sage-85b); border-radius:12px; background:var(--c-gray-99); font-size:13.5px; line-height:1.55; color:var(--c-sage-35); }
.xb-import-msg.is-error { border-color:var(--c-rose-85); background:var(--c-gray-95); color:var(--c-red-45); }
.xb-linkbtn { border:0; background:none; padding:0; margin-left:4px; color:var(--c-teal-50); font:inherit; font-weight:750; text-decoration:underline; cursor:pointer; }
.xb-flexrow { margin-top:6px; font-size:13px; line-height:1.5; color:var(--c-slate-45); }
.xb-flexrow select { height:32px; min-height:32px; padding:2px 22px 2px 8px; margin:0 2px; border:1px solid var(--c-gray-90); border-radius:8px; font:inherit; font-size:13px; font-weight:700; color:var(--c-teal-50); background:var(--c-gray-99); width:auto; }
.xb-foot-res { margin-top:4px; font-size:12.5px; color:var(--c-slate-45); }
.xb-foot-res b { color:var(--c-teal-50); }
@media (max-width:700px) { .xb-flexrow { font-size:12px; } .xb-foot-res { font-size:11.5px; } .xb-foot-sum { flex-wrap:wrap; } .xb-flexrow, .xb-foot-res { flex-basis:100%; } }
@media (max-width:700px) { .xb-foot-cap { display:none; } .xb-foot-sum { justify-content:flex-end; } .xb-flexrow select { height:30px; min-height:30px; } }
/* A field that doesn't apply right now (e.g. Pre-65 Healthcare Bridge Cost while the ACA model is on) */
@layer compassNavTop { input.is-unused:disabled { background:var(--c-gray-95) !important; border-style:dashed !important; color:var(--c-gray-65) !important; cursor:not-allowed !important; } }
/* Mortgage (2026-09-25): one loan under Home — js/14b expMortgageHtml */
.xb-mtg { position:relative; margin:10px 0 12px; padding:14px 16px; border:1px solid var(--c-sage-90); border-radius:14px; background:var(--c-gray-99); }
.xb-mtg-head { display:flex; align-items:flex-start; gap:10px 14px; margin-bottom:10px; padding-right:40px; }
.xb-mtg-head .xb-x { position:absolute; top:10px; right:10px; }
.xb-mtg-head strong { flex:0 0 auto; font-size:15px; color:var(--c-sage-30); }
.xb-mtg-head span { flex:1 1 auto; font-size:12.5px; line-height:1.45; color:var(--c-slate-50); }
.xb-mtg-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; align-items:end; }
.xb-mtg-f { display:flex; flex-direction:column; gap:5px; font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--c-slate-50); }
.xb-mtg-f em { font-style:normal; font-weight:500; text-transform:none; letter-spacing:0; }
.xb-mtg-f .xb-money { position:relative; }
.xb-mtg-f input { width:100%; box-sizing:border-box; min-height:40px; padding:6px 10px 6px 22px; border:1px solid var(--c-gray-90); border-radius:10px; background:var(--c-gray-99); font:inherit; font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--c-sage-30);
  -moz-appearance:textfield; appearance:textfield; }
.xb-mtg-f input::-webkit-outer-spin-button, .xb-mtg-f input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.xb-mtg-f .xb-pct input { padding-left:10px; padding-right:34px; }
.xb-mtg-f .xb-money i { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-style:normal; font-weight:500; color:var(--c-slate-60); }
.xb-mtg-f .xb-money b { position:absolute; right:10px; top:50%; transform:translateY(-50%); font-weight:500; font-size:12px; color:var(--c-slate-60); }
.xb-mtg-ded { display:inline-flex; margin-top:10px; }
.xb-mtg-out { margin-top:10px; }
.xb-mtg-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.xb-mtg-kpis div { padding:8px 12px; border:1px solid var(--c-gray-95); border-radius:10px; background:var(--c-gray-99); }
.xb-mtg-kpis span { display:block; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--c-slate-60); }
.xb-mtg-kpis strong { display:block; font-size:17px; font-weight:800; color:var(--c-sage-30); font-variant-numeric:tabular-nums; }
.xb-mtg-kpis strong small { font-size:12px; font-weight:600; color:var(--c-slate-50); }
.xb-mtg-kpis em { font-style:normal; font-size:12px; color:var(--c-slate-50); }
.xb-mtg-total { margin:10px 0 0; font-size:13px; line-height:1.55; color:var(--c-sage-35); }
.xb-mtg-legacy { display:block; margin-top:10px; }
.xb-mtg-legacy .xb-btn { margin-left:6px; min-height:32px; padding:4px 12px; font-size:12.5px; }
.xb-link { margin-left:8px; padding:0; border:0; background:none; color:var(--c-teal-50); font:inherit; font-weight:700; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.xb-chip-mtg { border-style:solid !important; }
input.nw-from-loan { background:var(--c-gray-95) !important; color:var(--c-slate-45) !important; cursor:default; }
@media (max-width:700px){
  .xb-mtg-grid { grid-template-columns:1fr 1fr; }
  .xb-mtg-kpis { grid-template-columns:1fr; }
  .xb-mtg-head { flex-wrap:wrap; }
}

/* ---------------------------------------------------------------- Retouch (2026-09-27)
   One small on/off switch instead of a section, a question and two big buttons; closed categories as a grid
   of compact tiles (an open one spans the full width, so its table still has room). */
.xp-onoff { display:flex; align-items:center; justify-content:space-between; gap:12px 20px; margin:18px 0 20px; padding:12px 16px; border:1px solid var(--c-gray-90); border-radius:14px; background:var(--c-gray-99); max-width:520px; }
.xp-onoff-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.xp-onoff-text label { font-size:15px; font-weight:800; color:var(--c-slate-25); cursor:pointer; }
.xp-onoff-text span { font-size:12.5px; color:var(--c-slate-55); line-height:1.4; }
html.exp-on .xp-onoff-text span { display:none; }
.xb-cats { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px; }
.xb-cat[open] { grid-column:1 / -1; }
.xb-cat:not([open]) .xb-cat-head { grid-template-columns:34px minmax(0,1fr) auto 22px; gap:10px; min-height:0; padding:10px 12px; }
.xb-cat:not([open]) .xb-badge { width:34px; height:34px; border-radius:10px; }
.xb-cat:not([open]) .xb-cat-name strong { font-size:14.5px; }
.xb-cat:not([open]) .xb-cat-name em { font-size:12px; }
.xb-cat:not([open]) .xb-cat-tot { grid-template-columns:auto; gap:0; text-align:right; font-size:14.5px; }
.xb-cat:not([open]) .xb-cat-tot .xb-tn { order:2; font-size:11.5px; font-weight:600; color:var(--xb-muted); }
.xb-cat:not([open]) .xb-cat-tot .xb-tn::before { content:'need '; }
.xb-cat:not([open]) .xb-cat-tot .xb-tp { order:1; }
.xb-cat:not([open]) .xb-cat-tot .xb-tp::before { content:none; }
.xb-cat:not([open]) .xb-cat-tot.is-same .xb-tn { display:none; }
.xb-cat:not([open]) .xb-chev { width:22px; height:22px; }
.xb-cat:not([open]) .xb-chev::after { left:7px; top:5px; width:6px; height:6px; }
.xb-legend { display:none; }
/* the open category's header still shows both columns, labelled */
.xb-cat[open] .xb-cat-tot .xb-tn::before { content:'Need '; font-size:11px; font-weight:700; }
.xb-cat[open] .xb-cat-tot .xb-tp::before { content:'Prefer '; font-size:11px; font-weight:700; }
.xb-cat[open] .xb-cat-tot { gap:16px; }
@media (max-width:560px) { .xb-cats { grid-template-columns:1fr; } .xp-onoff { margin:12px 0 14px; } }

/* Expense Planner snapshot: the small line under Reliable Income (the age it's measured at, and income that starts later). */
.xp-card-sub { margin-top:4px; font-size:12px; line-height:1.4; color:var(--c-slate-55); }

/* ---------------------------------------------------------------- Roth page retouch (2026-09-27)
   The same on/off switch as the Expense Planner (.xp-onoff), and the settings in one compact card: each
   choice is a label beside a small segmented control; amount and ages share one row. */
@layer compassNavTop {
.rc-card { max-width:860px; margin:4px 0 8px; padding:14px 18px; border:1px solid var(--c-gray-90); border-radius:16px; background:var(--c-gray-99); }
.rc-card .rc-line { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px 16px; margin:0 !important; padding:8px 0; } /* control sits right after its question (2026-10-01; it was pushed to the far right) */
.rc-card .rc-line > label { margin:0 !important; font-size:14px; }
.rc-card .rc-line + .rc-grid, .rc-card .rc-grid + .rc-line { border-top:1px solid var(--c-gray-95); }
.rc-seg { display:inline-flex !important; flex-wrap:wrap; gap:3px !important; padding:3px; border-radius:999px; background:var(--c-gray-95); margin:0 !important; }
.rc-seg .toggle-btn { min-height:32px !important; height:auto !important; padding:6px 14px !important; border-radius:999px !important; border:0 !important; background:transparent !important; box-shadow:none !important; font-size:13px !important; font-weight:700 !important; line-height:1.2 !important; color:var(--c-slate-45) !important; flex:0 0 auto !important; width:auto !important; }
.rc-seg .toggle-btn::before { display:none !important; }
.rc-seg .toggle-btn.active { background:var(--c-gray-99) !important; color:var(--c-teal-45) !important; box-shadow:0 1px 3px rgba(var(--c-shadow-rgb), 0.16) !important; }
.rc-card .rc-grid { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) !important; gap:12px !important; margin:0 !important; padding:10px 0 12px; }
.rc-card .rc-grid .field { margin:0 !important; }
.rc-card .rc-grid label { font-size:12.5px; }
@media (max-width:560px) { .rc-card { padding:10px 12px; } .rc-card .rc-grid { grid-template-columns:1fr 1fr !important; } .rc-card .rc-grid > #rothConvAmountField, .rc-card .rc-grid > #rothBracketTargetField { grid-column:1 / -1; } }
}

/* Find my best strategy (Roth page, 2026-09-29) */
.opt-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.opt-controls label { font-weight:700; font-size:14px; color:var(--c-slate-25); }
.opt-controls select { width:auto; min-width:280px; height:44px; padding:0 12px; border:1px solid var(--c-gray-90); border-radius:10px; background:var(--c-gray-99); color:var(--c-slate-25); font:inherit; font-size:14px; }
.opt-controls .opt-run { margin:0; }
.opt-status { margin-top:10px; font-size:13px; color:var(--c-slate-55); }
.opt-result { margin-top:14px; }
.opt-lead { margin:0 0 12px; font-size:14.5px; line-height:1.55; color:var(--c-slate-25); }
.opt-table-wrap { overflow-x:auto; }
.opt-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.opt-table th, .opt-table td { padding:9px 10px; border-bottom:1px solid var(--c-gray-95); text-align:left; vertical-align:middle; }
.opt-table th { font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--c-slate-55); }
.opt-table td small { color:var(--c-slate-55); }
.opt-table .num-cell { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.opt-table tr.opt-cur td { background:var(--c-gray-95); }
.opt-table tr.opt-best td:first-child { border-left:3px solid var(--c-green-55); }
.opt-table .opt-use { min-height:34px !important; padding:6px 12px !important; white-space:nowrap; }
.opt-note { margin:10px 0 0; font-size:12px; line-height:1.5; color:var(--c-slate-55); }
@media (max-width:700px){
  .opt-controls select { min-width:0; width:100%; } .opt-controls .opt-run { width:100%; }
  .opt-table thead { display:none; }
  .opt-table, .opt-table tbody, .opt-table tr, .opt-table td { display:block; width:100%; }
  .opt-table tr { padding:10px 0; border-bottom:1px solid var(--c-gray-90); }
  .opt-table td { border:0; padding:3px 4px; }
  .opt-table td.num-cell { display:flex; justify-content:space-between; text-align:right; }
  .opt-table td.num-cell::before { content:attr(data-label); color:var(--c-slate-55); font-size:12.5px; }
  .opt-table tr.opt-best td:first-child { border-left:0; }
  .opt-table tr.opt-best { border-left:3px solid var(--c-green-55); padding-left:8px; }
}

/* Roth page, reorganized (2026-09-30): 01 Your Conversions (switch in the card's header) · 02 Find Your Best
   Strategy · 03 Compare Amounts · 04 Is Converting Worth It? — one width, one card style, short labels. */
#rothView .section-title.rc-title { margin-top:30px; }
#rothView .section-desc.rc-desc { margin-top:0; max-width:760px; }
#rothView .rc-card, #rothView .opt-panel, #rothView .rc-panel { max-width:960px; }
#rothView .rc-card { padding:0; overflow:hidden; }
.rc-head { display:flex; align-items:center; justify-content:space-between; gap:12px 20px; padding:14px 18px; }
.rc-head-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.rc-head-text label { margin:0 !important; font-size:15px; font-weight:800; color:var(--c-slate-25); cursor:pointer; }
.rc-off-note { font-size:12.5px; color:var(--c-slate-55); }
.rc-head.is-on .rc-off-note { display:none; }
#rothView #rothSection { padding:4px 18px 8px; border-top:1px solid var(--c-gray-95); }
.rc-card select { font-family:inherit !important; font-size:14px !important; }
#rothView .opt-panel, #rothView .rc-panel { padding:18px 20px; }
.rc-cmp-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:end; }
.rc-cmp-row .field { margin:0 !important; }
.rc-cmp-btn { margin:0 !important; min-height:44px; }
.rc-status { margin-top:10px; font-size:12.5px; }
#rothView .rc-betr-grid { gap:12px !important; margin:0 !important; }
#rothView .rc-betr-grid .field { margin:0 !important; }
.rc-betr { margin-top:14px; padding:14px 16px; border-radius:12px; background:var(--c-gray-95); }
.rc-betr-k { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--c-slate-55); white-space:nowrap; }
.rc-betr-v { font-size:30px; font-weight:800; line-height:1.1; color:var(--c-teal-45); font-variant-numeric:tabular-nums; }
.rc-betr-say { margin:0; font-size:13.5px; line-height:1.5; color:var(--c-slate-25); }
.rc-betr-note { margin:8px 0 0; font-size:12px; line-height:1.45; color:var(--c-slate-55); }
.rc-betr > .rc-betr-note:first-child { margin:0; }
.opt-table th:first-child, .opt-table td:first-child { width:52%; }
.opt-table td:last-child { width:1%; text-align:right; }
@media (max-width:700px) {
  #rothView .opt-panel, #rothView .rc-panel { padding:12px; }
  .rc-head { padding:12px; } #rothView #rothSection { padding:2px 12px 6px; }
  .rc-cmp-row { grid-template-columns:1fr; } .rc-cmp-btn { width:100%; }
    .opt-table th:first-child, .opt-table td:first-child { width:100%; }
  .opt-table td:last-child { text-align:left; }
}
.opt-table td:first-child { white-space:normal !important; overflow-wrap:anywhere; }
@media (max-width:700px) { .opt-table td.num-cell::before { font-family:'Compass Sans',sans-serif; } }
/* Is Converting Worth It? from the plan (2026-09-30): now vs later tiles + a verdict pill. */
.rc-betr-tiles { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.rc-betr-tile { min-width:150px; padding:10px 14px; border-radius:12px; background:var(--c-gray-99); border:1px solid var(--c-gray-90); }
.rc-betr-tile .rc-betr-v { font-size:26px; }
.rc-betr-s { font-size:12px; color:var(--c-slate-55); }
.rc-betr-vs { font-size:13px; font-weight:700; color:var(--c-slate-55); }
.rc-betr-verdict { margin-left:auto; padding:8px 16px; border-radius:999px; font-size:15px; font-weight:800; }
.rc-betr-verdict.is-yes { background:rgba(var(--c-green-55-rgb), 0.14); color:var(--c-green-40); }
.rc-betr-verdict.is-no { background:rgba(var(--c-red-55-rgb), 0.12); color:var(--c-red-45); }
.rc-betr-verdict.is-even { background:rgba(var(--c-amber-65-rgb), 0.16); color:var(--c-amber-45); }
.rc-betr > .rc-betr-say { margin:12px 0 0; }
.rc-more { margin-top:14px; }
.rc-more > summary { cursor:pointer; font-size:13.5px; font-weight:700; color:var(--c-teal-45); padding:4px 0; }
.rc-more[open] > summary { margin-bottom:10px; }
.rc-betr-calc { margin:10px 0 0; font-size:13.5px; line-height:1.5; color:var(--c-slate-25); }
@media (max-width:700px) {
  .rc-betr-tile { flex:1 1 40%; min-width:0; }
  .rc-betr-vs { display:none; }
  .rc-betr-verdict { margin-left:0; width:100%; text-align:center; }
}
.rc-betr-tile .rc-betr-k { white-space:normal; }

/* Social Security from the earnings record (2026-09-30): derived claim amount, the link, the paste dialog. */
.ss-derived { margin-top:4px; font-size:12px; line-height:1.4; color:var(--c-slate-55); }
input.is-derived { background:var(--c-gray-95) !important; color:var(--c-slate-45) !important; }
.ss-rec-link { margin-top:6px; padding:0; border:0; background:none; font:inherit; font-size:12.5px; font-weight:700; color:var(--c-teal-45); cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px; }
.ss-rec-overlay { position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(var(--c-shadow-rgb), 0.45); }
.ss-rec-overlay[hidden] { display:none; }
.ss-rec-box { width:100%; max-width:620px; max-height:calc(100vh - 32px); overflow:auto; padding:18px 20px; border-radius:16px; background:var(--c-gray-99); color:var(--c-slate-25); box-shadow:0 20px 50px rgba(var(--c-shadow-rgb), 0.3); }
.ss-rec-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ss-rec-head h3 { margin:0; font-size:18px; }
.ss-rec-x { border:0; background:none; font-size:26px; line-height:1; color:var(--c-slate-55); cursor:pointer; min-width:40px; min-height:40px; }
.ss-rec-help { margin:8px 0 10px; font-size:13px; line-height:1.5; color:var(--c-slate-45); }
.ss-rec-box textarea { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--c-gray-90); border-radius:10px; background:var(--c-gray-99); color:var(--c-slate-25); font:13px/1.45 ui-monospace,Menlo,Consolas,monospace; resize:vertical; }
.ss-rec-row { display:flex; flex-wrap:wrap; gap:8px 18px; margin:10px 0; font-size:13.5px; }
.ss-rec-row input { width:110px; height:36px; margin-left:6px; padding:0 8px; border:1px solid var(--c-gray-90); border-radius:8px; background:var(--c-gray-99); color:var(--c-slate-25); font:inherit; }
.ss-rec-row #ssRecStop { width:64px; }
.ss-rec-out { min-height:20px; padding:10px 12px; border-radius:10px; background:var(--c-gray-95); font-size:13.5px; line-height:1.5; }
.ss-rec-out:empty { display:none; }
.ss-rec-big { font-size:26px; font-weight:800; color:var(--c-teal-45); }
.ss-rec-big span { margin-left:6px; font-size:13px; font-weight:600; color:var(--c-slate-55); }
.ss-rec-sub { margin-top:6px; font-size:12px; color:var(--c-slate-55); }
.ss-rec-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
@media (max-width:560px) { .ss-rec-actions .xb-btn { flex:1; } }

/* Pension vs lump sum (2026-09-30). */
.pl-cmp { grid-column:1 / -1; }
.pl-out { margin-top:10px; font-size:13.5px; line-height:1.5; }
.pl-tbl { border-collapse:collapse; margin-top:4px; }
.pl-tbl th, .pl-tbl td { padding:6px 12px 6px 0; text-align:left; border-bottom:1px solid var(--c-gray-95); font-variant-numeric:tabular-nums; }
.pl-tbl th { font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--c-slate-55); }
.pl-note { margin:8px 0 0; font-size:12.5px; color:var(--c-slate-55); }

/* 2026-10-02: the old goal still in the budget, what the Prefer/Need/Flex switch does, import as a small link */
.xb-carry { margin:0 0 12px; padding:12px 14px; border:1px solid rgba(var(--c-orange-55-rgb), 0.45); border-radius:14px; background:rgba(var(--c-orange-55-rgb), 0.07); }
.xb-carry[hidden] { display:none; }
.xb-carry p { margin:0; font-size:13.5px; line-height:1.5; color:var(--c-slate-30); }
.xb-carry .xb-btn { margin-top:10px; }
.xb-basis-note { flex-basis:100%; margin:6px 2px 0; font-size:12.5px; line-height:1.4; color:var(--c-slate-50); }
.xb-tools { margin:14px 0 4px; font-size:13px; color:var(--c-slate-50); }
.xb-tools-lead { font-weight:600; }
html body .xb-import { padding:0; border:0; background:none; color:var(--c-teal-50); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
@media (max-width:700px){ .xb-ded .xb-na { display:none; } .xb-basis-note { display:none; } } /* phones: the bar is full; the intro above the lines explains the switch */
/* Home: one way to add a mortgage (2026-10-02) */
.xb-mtg-add { display:inline-block; margin:2px 0 12px; font-size:14px; }
.xb-mtg-nw { margin:0 0 12px; }
.xb-mtg-nw .xb-btn { margin-left:6px; }

/* One amount per line, folded timing (2026-10-02, js/14b) */
.xb-whensum { display:none; }
.xb-pref-add .xb-link { padding:0; border:0; background:none; font:inherit; font-size:12.5px; font-weight:700; color:var(--c-teal-50); cursor:pointer; text-align:left; }
@media (max-width:1100px) {
  .xb-ded .xb-na { display:none; }
  .xb-row { grid-template-areas:"sub sub del" "label label label" "need freq freq" "prefer prefer prefer" "ded ded ded" "start end end" "extra extra extra"; }
  .xb-row.when-folded { grid-template-areas:"sub sub del" "label label label" "need freq freq" "prefer prefer prefer" "ded ded ded" "when when when" "extra extra extra"; }
  .xb-row.one-sub { grid-template-areas:"label label del" "need freq freq" "prefer prefer prefer" "ded ded ded" "start end end" "extra extra extra"; }
  .xb-row.one-sub.when-folded { grid-template-areas:"label label del" "need freq freq" "prefer prefer prefer" "ded ded ded" "when when when" "extra extra extra"; }
  .xb-row.one-sub .xb-sub { display:none; }
  .xb-row.when-folded .xb-start, .xb-row.when-folded .xb-end { display:none; }
  .xb-whensum { grid-area:when; display:flex; align-items:baseline; gap:10px; font-size:13px; color:var(--c-slate-50); }
  .xb-whensum .xb-link { padding:0; border:0; background:none; font:inherit; font-weight:700; color:var(--c-teal-50); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
  .xb-pref-add { align-self:start; margin-top:-2px; }
}
@media (max-width:1100px) { .xb-row.no-ded .xb-ded { display:none; } } /* nothing to tick: no empty row */
/* 2026-10-04: what Roth conversions do to the plan (with vs without) */
.rc-effect { margin-top:12px; padding:12px 14px; border:1px solid var(--c-gray-90); border-radius:12px; background:var(--c-gray-99); }
.rc-effect-h { font-size:13.5px; font-weight:800; color:var(--c-slate-25); margin-bottom:6px; }
.rc-effect-h small { margin-left:6px; font-size:11.5px; font-weight:500; color:var(--c-slate-55); }
.rc-effect-t { width:100%; border-collapse:collapse; margin-bottom:8px; font-size:13px; }
.rc-effect-t th, .rc-effect-t td { padding:5px 6px; border-top:1px solid var(--c-gray-95); text-align:right; font-variant-numeric:tabular-nums; }
.rc-effect-t th:first-child { text-align:left; font-weight:600; color:var(--c-slate-35); }
.rc-effect-t thead th { border-top:0; font-size:11.5px; font-weight:700; color:var(--c-slate-55); }
.rc-effect-t td.up { color:var(--c-green-50); font-weight:700; } .rc-effect-t td.dn { color:var(--c-red-50b); font-weight:700; }
/* 2026-10-04: Compare conversion amounts — columns that fit */
.cc-table { table-layout:auto; }
.cc-table th { white-space:normal !important; vertical-align:bottom; line-height:1.25; }
.cc-table td.num-cell { white-space:nowrap; }
.cc-table td.cc-end { line-height:1.35; }
.cc-table td.cc-end small { font-size:11px; color:var(--c-slate-55); font-weight:500; }
.cc-mark { margin-top:3px; font-size:11px; font-weight:600; line-height:1.3; white-space:normal; max-width:190px; }
@media (max-width:700px){
  .cc-table thead { display:none; }
  .cc-table, .cc-table tbody { display:block; width:100%; }
  .cc-table tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px 12px; padding:10px 4px; border-bottom:1px solid var(--c-gray-95); }
  .cc-table td { display:block; padding:0 !important; border:0 !important; text-align:left !important; white-space:normal !important; }
  .cc-table td:first-child { grid-column:1 / -1; font-size:15px; }
  .cc-table td.num-cell::before { content:attr(data-label); display:block; font-size:11px; font-weight:700; color:var(--c-slate-55); }
}
/* 2026-10-04: optimizer — what each change adds, actions */
.opt-changes { margin:0 0 10px; padding-left:20px; font-size:14px; line-height:1.55; color:var(--c-slate-25); }
.opt-actions { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.opt-steps { margin:0 0 12px; padding:10px 12px; border:1px solid var(--c-gray-90); border-radius:12px; background:var(--c-gray-99); }
.opt-steps-h { font-size:13.5px; font-weight:800; color:var(--c-slate-25); margin-bottom:6px; }
.opt-steps-h small { margin-left:6px; font-size:11.5px; font-weight:500; color:var(--c-slate-55); }
.opt-steps-t { width:100%; border-collapse:collapse; font-size:13px; }
.opt-steps-t th, .opt-steps-t td { padding:5px 6px; border-top:1px solid var(--c-gray-95); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.opt-steps-t th:first-child, .opt-steps-t td:first-child { text-align:left; white-space:normal; color:var(--c-slate-35); }
.opt-steps-t thead th { border-top:0; font-size:11.5px; font-weight:700; color:var(--c-slate-55); }
.opt-steps-t td.up { color:var(--c-green-50); font-weight:700; } .opt-steps-t td.dn { color:var(--c-red-50b); font-weight:700; }
/* 2026-10-04: more mortgages (second home, rental) */
.xb-xm .xb-mtg-head { flex-wrap:wrap; align-items:center; }
.xb-xm-name { min-width:0; width:12em; max-width:100%; padding:4px 8px; border:1px solid var(--c-gray-90); border-radius:8px; background:var(--c-gray-99); font:inherit; font-size:14px; font-weight:700; color:var(--c-sage-30); }
.xb-xm-kind { min-height:34px; padding:4px 8px; border:1px solid var(--c-gray-90); border-radius:8px; background:var(--c-gray-99); font:inherit; font-size:13px; color:var(--c-slate-35); }
.xb-mtg-add { display:inline-block; margin:2px 0 10px; }
@media (max-width:700px){ .xb-xm-name { width:100%; } }
/* Refinance on a loan card (2026-10-04, js/14b expRefiHtml) */
.xb-refi { margin-top:12px; padding-top:10px; border-top:1px dashed var(--c-sage-90); }
.xb-refi-on { display:inline-flex; flex-wrap:wrap; gap:4px; align-items:center; }
.xb-refi-on span { font-size:12.5px; color:var(--c-slate-55); }
.xb-refi-grid { margin-top:10px; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); }
.xb-refi-when { display:flex; gap:6px; }
.xb-refi-when select { min-height:40px; padding:6px 8px; border:1px solid var(--c-gray-90); border-radius:10px; background:var(--c-gray-99); font:inherit; font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--c-sage-30); }
.xb-mtg-f .xb-refi-when input { width:4.6em; flex:0 0 auto; padding-left:10px; }
.xb-refi-out { margin-top:10px; }
.xb-refi-say p { margin:0 0 6px; font-size:13.5px; line-height:1.5; color:var(--c-slate-25); }
.xb-refi-effect { margin-top:10px; }
.xb-refi-effect { max-width:100%; overflow-x:auto; box-sizing:border-box; contain:inline-size; } /* its table never widens the card */
@media (max-width:700px){
  /* phones: each row stacks — the label, then With / Without / Change in three small columns */
  .xb-refi-effect { padding:10px; }
  .xb-refi-effect .rc-effect-h small { display:block; margin:2px 0 0; }
  .xb-refi-effect .rc-effect-t thead { display:none; }
  .xb-refi-effect .rc-effect-t, .xb-refi-effect .rc-effect-t tbody { display:block; }
  .xb-refi-effect .rc-effect-t tr { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px 8px; padding:6px 0; border-top:1px solid var(--c-gray-95); }
  .xb-refi-effect .rc-effect-t th, .xb-refi-effect .rc-effect-t td { padding:0; border:0; text-align:left; }
  .xb-refi-effect .rc-effect-t th { grid-column:1 / -1; }
  .xb-refi-effect .rc-effect-t td::before { content:attr(data-l); display:block; font-size:10.5px; font-weight:600; color:var(--c-slate-55); }
}
/* Optimizer result for a plan that has since changed (2026-10-04, js/31 isStale) */
.opt-stale { margin:0 0 12px; padding:10px 12px; border:1px solid var(--c-amber-80); border-radius:10px; background:var(--c-amber-95); font-size:13.5px; line-height:1.5; color:var(--c-slate-25); }
.opt-result.is-stale .opt-table, .opt-result.is-stale .opt-changes, .opt-result.is-stale .opt-steps { opacity:.6; }
.opt-result button[disabled] { opacity:.5; cursor:not-allowed; }

/* Where the money goes on Chart.js (js/41, 2026-10-04); shares the .mm-* look with All your money (compass-accounts.css) */
.sm { margin-top:4px; }
.sm[hidden] { display:none; }
.sm-ykeys { margin:6px 0; }
.sm-ychart { height:300px; }
@media (max-width:640px){ .sm-ychart { height:250px; } }
.sm-dot { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; vertical-align:0; }

/* Computer: the budget line is one row — numbers, Plan uses, the live result (docked, compass-live.css) and Return
   to Plan. The explanations stay above the lines; the last-run line duplicates the result (2026-10-04). */
@media (min-width:1001px){
  .xb-foot { padding:8px 14px; gap:8px 16px; margin-top:16px; }
  .xb-foot-sum { flex:0 1 auto; display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 14px; }
  .xb-foot-cap { font-size:11px; }
  .xb-foot-nums { margin:0; gap:2px 14px; }
  .xb-foot-nums b { font-size:17px; }
  .xb-foot-sub, .xb-foot-res, .xb-basis-note { display:none; }
  .xb-flexrow:not([hidden]) { flex-basis:100%; font-size:12.5px; }
  .xb-basis button { min-height:32px; padding:4px 12px; }
  .xb-return { min-height:38px; padding:8px 16px; margin-left:auto; }
}

/* Expense Planner top (2026-10-05, user: smaller top, the chart near the top, no on/off switch, no huge heading):
   a small header; the on/off row only while the budget is off ("Use one yearly amount instead" turns it off);
   the "Where the money goes" chart first; the income-coverage cards folded behind one summary line. */
@layer compassNavTop {
  html body #expensesView > .hero.xp-hero { display:flex !important; flex-wrap:wrap; align-items:baseline; gap:2px 14px; padding:4px 2px 6px !important; margin:0 0 8px !important; border:0 !important; min-height:0 !important; }
  html body #expensesView > .hero.xp-hero :is(h1,.pg-h1) { font-size:22px !important; line-height:1.25 !important; margin:0 !important; }
  html body #expensesView > .hero.xp-hero .hero-sub { flex-basis:100%; order:3; margin:0 !important; font-size:13px !important; line-height:1.45 !important; color:var(--c-slate-55) !important; }
  html body #expensesView > .hero.xp-hero .ug-pagehelp { order:2; margin:0 !important; }
  html body #expensesView .xp-off-link { order:2; margin-left:auto; padding:0; border:0; background:none; font:inherit; font-size:13px; font-weight:650; color:var(--c-teal-50); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
  html:not(.exp-on) body #expensesView .xp-off-link { display:none !important; }
  html.exp-on body #expTurnOnField { display:none !important; }
  html body #expPictureDetails > summary { display:none !important; }
  html body #expPictureDetails > .panel { margin-top:0 !important; padding-top:16px !important; }
  html body #expensesView .xp-more { margin-top:14px; border-top:1px solid var(--c-gray-90); }
  html body #expensesView .xp-more > summary { display:flex; align-items:center; gap:12px; padding:12px 2px 2px; cursor:pointer; list-style:none; font-size:14px; color:var(--c-slate-35); }
  html body #expensesView .xp-more > summary::-webkit-details-marker { display:none; }
  html body #expensesView .xp-more > summary b { color:var(--c-slate-25); }
  html body #expensesView .xp-more-cta { margin-left:auto; flex:none; font-size:13px; font-weight:700; color:var(--c-teal-50); }
  html body #expensesView .xp-more-cta::after { content:" ▾"; }
  html body #expensesView .xp-more[open] .xp-more-cta::after { content:" ▴"; }
  html body #expensesView .xp-more-body { padding-top:12px; }
  /* Phones: the top bar already says Expense Planner — just the two links, on one row. */
  @media (max-width:700px){
    html body #expensesView > .hero.xp-hero :is(h1,.pg-h1), html body #expensesView > .hero.xp-hero .hero-sub { display:none !important; }
    html body #expensesView > .hero.xp-hero { align-items:center; justify-content:space-between; padding:2px 2px 4px !important; margin-bottom:6px !important; }
    html body #expensesView .xp-off-link { order:3; margin-left:0; font-size:12.5px; }
    html body #expensesView > .hero.xp-hero .ug-pagehelp { order:1; }
  }
}
/* An amount typed into the Label box (2026-10-10, js/14b expLabelAmount) */
.xb-lblamt-all { margin:0 0 12px; }
.xb-lblamt .xb-btn, .xb-lblamt-all .xb-btn { margin-left:6px; }
/* Each spouse's pre-tax account in the conversion card (2026-10-12) */
.rc-card .rc-who { margin:12px 0 0; font-size:13px; font-weight:700; color:var(--c-slate-30); }
.rc-card .rc-who[hidden] { display:none; }
.rc-card .rc-note { margin:2px 0 8px; font-size:12.5px; line-height:1.45; color:var(--c-slate-50); }
.rc-card .rc-note:empty { display:none; }
#rothSpouseBlock[hidden] { display:none; }
/* Within a kind with two or more accounts (js/13 payWithinHtml, 2026-10-12) */
.pay-order li .pay-within { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:4px 0 0 38px; padding:8px 10px; border-radius:10px; background:var(--c-gray-99); font-size:13px; }
.pay-within-h { font-weight:600; color:var(--c-slate-40); }
.pay-within-seg { display:inline-flex; gap:2px; padding:2px; border-radius:999px; background:var(--c-gray-95); }
.pay-within-seg button { border:0; background:transparent; padding:4px 10px; border-radius:999px; font:inherit; font-size:12.5px; color:var(--c-slate-50); cursor:pointer; }
.pay-within-seg button.is-on { background:var(--panel); color:var(--c-slate-25); font-weight:600; }
.pay-within-list { flex-basis:100%; display:flex; flex-direction:column; gap:4px; }
.pay-within-list .pw-row { display:flex; align-items:center; gap:10px; }
.pay-within-list .pw-row span:first-child { flex:1; }
.pay-within-move button { width:26px; height:24px; border:1px solid var(--c-gray-90); border-radius:6px; background:var(--panel); cursor:pointer; font-size:11px; }
.pay-within-move button:disabled { opacity:.35; cursor:default; }
.pay-within-note { flex-basis:100%; margin:0; font-size:12px; color:var(--c-slate-50); }
/* Each year's conversion (js/57, 2026-10-12) */
.rc-years { margin:16px 0 0; padding:16px 18px; border:1px solid var(--c-gray-90); border-radius:16px; background:var(--panel); }
.rc-years[hidden] { display:none; }
.rc-years .ry-h { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-bottom:8px; }
.rc-years .ry-h > b { font-size:15px; color:var(--c-slate-25); }
.rc-years .ry-h span { font-size:13px; color:var(--c-slate-50); }
.rc-years .ry-svg { width:100%; height:auto; display:block; }
.rc-years .ry-grid { stroke:var(--c-gray-90); stroke-width:1; }
.rc-years .ry-yl { font-size:10.5px; fill:var(--c-slate-50); text-anchor:end; }
.rc-years .ry-xl { font-size:10.5px; fill:var(--c-slate-50); text-anchor:middle; }
.rc-years .ry-v { font-size:10px; font-weight:700; fill:var(--c-slate-30); text-anchor:middle; }
.rc-years .ry-zero { font-size:10px; fill:var(--c-slate-60); text-anchor:middle; }
.rc-years rect.ry-you { fill:var(--c-purple-65); }
.rc-years rect.ry-sp { fill:var(--c-purple-80); }
.rc-years .ry-key { display:flex; gap:14px; align-items:center; margin:4px 0 0; font-size:12.5px; color:var(--c-slate-50); }
.rc-years .ry-key i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:-8px; }
.rc-years .ry-key i.ry-you { background:var(--c-purple-65); } .rc-years .ry-key i.ry-sp { background:var(--c-purple-80); }
.rc-years .ry-more { margin-top:10px; }
.rc-years .ry-more summary { cursor:pointer; font-size:13.5px; font-weight:600; color:var(--c-teal-50); }
.rc-years .ry-tbl-wrap { overflow-x:auto; margin-top:8px; }
.rc-years .ry-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.rc-years .ry-tbl th { text-align:left; font-weight:600; color:var(--c-slate-50); padding:6px 8px; border-bottom:1px solid var(--c-gray-90); white-space:nowrap; }
.rc-years .ry-tbl td { padding:6px 8px; border-bottom:1px solid var(--c-gray-95); color:var(--c-slate-30); }
.rc-years .ry-tbl .n { text-align:right; white-space:nowrap; }
.rc-years .ry-tbl small { color:var(--c-slate-60); }
.rc-years .ry-fine, .rc-years .ry-none { margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--c-slate-50); }
/* Try other choices: tabs (js/57, 2026-10-12) */
.rc-tabs { display:inline-flex; flex-wrap:wrap; gap:4px; margin:4px 0 12px; padding:4px; border-radius:999px; background:var(--c-gray-95); }
.rc-tabs button { border:0; background:transparent; padding:8px 16px; border-radius:999px; font:inherit; font-size:14px; font-weight:600; color:var(--c-slate-50); cursor:pointer; }
.rc-tabs button.is-on { background:var(--panel); color:var(--c-slate-25); }
.rc-tabs button[hidden] { display:none; }
.rc-tabp[hidden] { display:none; }

/* Where extra money goes (js/58, 2026-10-12) */
.xm-card { margin-top:16px; padding:14px 16px; border:1px solid var(--c-gray-90); border-radius:12px; background:var(--panel); max-width:640px; }
.xm-h { margin:0 0 4px; font-size:15px; color:var(--c-slate-25); }
.xm-desc { margin:0 0 10px; font-size:13px; color:var(--c-slate-50); }
.xm-list { display:flex; flex-direction:column; gap:6px; }
.xm-row { display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:10px; background:var(--c-gray-99); font-size:13.5px; }
.xm-name { flex:1; min-width:0; }
.xm-name small { display:block; font-size:12px; color:var(--c-slate-50); }
.xm-pct { display:inline-flex; align-items:center; gap:4px; }
.xm-pct input { width:64px; text-align:right; }
.xm-pct i { font-style:normal; color:var(--c-slate-50); }
.xm-rm { border:0; background:transparent; color:var(--c-slate-50); font:inherit; font-size:12px; text-decoration:underline; cursor:pointer; }
.xm-note { margin:8px 0; font-size:12.5px; color:var(--c-slate-50); }
.xm-none { margin:2px 0; font-size:13px; color:var(--c-slate-50); }
.xm-add { border:1px dashed var(--c-gray-90); background:transparent; border-radius:10px; padding:7px 12px; font:inherit; font-size:13px; color:var(--teal); cursor:pointer; }
.xm-form { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; padding:10px 12px; border-radius:10px; background:var(--c-gray-99); font-size:13px; }
.xm-form label { display:flex; flex-direction:column; gap:3px; font-weight:600; color:var(--c-slate-40); }
.xm-form .xm-f-name { flex:1 1 180px; }
.xm-f-note { flex-basis:100%; margin:0; font-size:12.5px; color:var(--c-slate-50); }
.xm-f-btns { display:flex; gap:8px; }
.xm-btn { border:0; border-radius:8px; padding:7px 14px; background:var(--teal); color:var(--panel); font:inherit; font-weight:600; cursor:pointer; }
.xm-btn-2 { background:var(--c-gray-95); color:var(--c-slate-25); }
.xm-rest { margin-top:10px; max-width:420px; }
@media (max-width:560px){ .xm-card { padding:12px; } .xm-form .xm-f-name { flex-basis:100%; } }

/* Other properties in the Expense Planner (js/14b expPropertiesHtml, 2026-10-13) */
.xb-props { margin-top:14px; display:flex; flex-direction:column; gap:12px; }
.xb-props-h { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.xb-props-h strong { font-size:15px; color:var(--c-slate-25); } .xb-props-h span { font-size:13px; color:var(--c-slate-50); }
.xb-prop { padding:12px 14px; border:1px solid var(--c-gray-90); border-radius:12px; background:var(--panel); display:flex; flex-direction:column; gap:8px; }
.xb-prop .xb-xm { margin:4px 0 0; border-style:dashed; }
.xb-prop > .xb-link { align-self:flex-start; }
.xb-prop > .xb-mtg-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.xb-prop { position:relative; } .xb-prop > .xb-mtg-head { padding-right:40px; }