/* fin-v3.css — Finance Visual System v3 (scoped kit for the redesigned finance tools).
   Every rule is scoped under .finv3 so nothing leaks to other tools or site chrome.
   Tokens per the approved Claude UI package; dark is the default (ungated),
   light is derived under [data-theme="light"] per the fin-kit convention. */
@font-face{font-family:'Inter';src:url('/tool-assets/fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/tool-assets/fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/tool-assets/fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/tool-assets/fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/tool-assets/fonts/inter-latin-800-normal.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

.finv3{
  --fv3-surface:#111827; --fv3-inner:#0F1626; --fv3-border:#243049; --fv3-border2:#2C3A5C;
  --fv3-text:#E5E7EB; --fv3-muted:#94A3B8; --fv3-faint:#64748B;
  --fv3-grad:linear-gradient(135deg,#4F46E5,#7C3AED);
  --fv3-accent:#6366F1; --fv3-accent2:#818CF8;
  --fv3-pos:#34D399; --fv3-warn:#FBBF24; --fv3-danger:#F87171;
  --fv3-pos-txt:#34D399; --fv3-warn-txt:#FBBF24; --fv3-danger-txt:#F87171;
  --fv3-ghost-bg:#1B2440; --fv3-track:#243049;
  --fv3-insight-bg:rgba(16,185,129,.10); --fv3-insight-border:rgba(16,185,129,.35);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--fv3-text);
}
html[data-theme="light"] .finv3{
  --fv3-surface:#FFFFFF; --fv3-inner:#F1F5F9; --fv3-border:#E2E8F0; --fv3-border2:#CBD5E1;
  --fv3-text:#0F172A; --fv3-muted:#64748B; --fv3-faint:#94A3B8;
  --fv3-pos-txt:#047857; --fv3-warn-txt:#B45309; --fv3-danger-txt:#DC2626;
  --fv3-ghost-bg:#EEF2F7; --fv3-track:#E2E8F0;
  --fv3-insight-bg:#ECFDF5; --fv3-insight-border:rgba(16,185,129,.35);
}
.finv3 *{box-sizing:border-box}
.finv3 button{font-family:inherit;cursor:pointer}
.finv3 :focus-visible{outline:2px solid var(--fv3-accent);outline-offset:2px}
.finv3 .fv3-num{font-variant-numeric:tabular-nums}

/* ---------- action row (Share / Copy / PDF / CSV) ---------- */
.fv3-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin:2px 0 16px}
.fv3-ghost{background:var(--fv3-ghost-bg);border:1px solid var(--fv3-border2);color:var(--fv3-text);border-radius:10px;padding:8px 12px;font-size:13px;font-weight:600}
.fv3-ghost:hover{border-color:var(--fv3-accent)}

/* ---------- two-column body ---------- */
.fv3-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px;align-items:start}
@media (max-width:900px){.fv3-wrap{grid-template-columns:1fr}}
.fv3-card{background:var(--fv3-surface);border:1px solid var(--fv3-border);border-radius:18px}

/* ---------- inputs ---------- */
.fv3-inputs{padding:22px;display:flex;flex-direction:column;gap:20px}
.fv3-field{display:flex;flex-direction:column;gap:8px}
.fv3-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:600}
.fv3-row label{font-weight:600}
.fv3-num{background:var(--fv3-inner);border:1px solid var(--fv3-border2);border-radius:10px;padding:7px 12px;width:124px;text-align:right;font-weight:700;font-size:14px;color:var(--fv3-text)}
.fv3-num-s{width:88px}
.fv3-num:focus{border-color:var(--fv3-accent);outline:none}
.fv3-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fv3-grid2 .fv3-num{width:104px;max-width:100%}
.fv3-wrap>*,.fv3-below>*{min-width:0}
/* The site theme sets .tool-panel input{width:auto} at higher specificity than a
   single class — restate the kit's input widths at panel scope so they win. */
.tool-panel .finv3 input.fv3-num{width:124px}
.tool-panel .finv3 input.fv3-num.fv3-num-s{width:88px}
.tool-panel .finv3 .fv3-grid2 input.fv3-num{width:104px}
.tool-panel .finv3 input.fv3-range{width:100%}
@media (max-width:460px){.fv3-grid2{grid-template-columns:1fr}}
.fv3-sub{font-size:12px;color:var(--fv3-muted);font-weight:600}
.fv3-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:linear-gradient(90deg,#6366F1,#8B5CF6) 0 0/var(--p,0%) 100% no-repeat,var(--fv3-track);outline-offset:4px;cursor:pointer}
.fv3-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.5);border:0;cursor:pointer}
.fv3-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.5);border:0;cursor:pointer}
.fv3-range::-moz-range-progress{height:6px;border-radius:6px;background:linear-gradient(90deg,#6366F1,#8B5CF6)}
.fv3-range::-moz-range-track{height:6px;border-radius:6px;background:var(--fv3-track)}
.fv3-seg{display:flex;background:var(--fv3-inner);border:1px solid var(--fv3-border);border-radius:12px;padding:4px;gap:4px}
.fv3-seg button{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;background:transparent;color:var(--fv3-muted);padding:8px 0;border-radius:9px;font-size:13px;font-weight:600}
.fv3-results>*,.fv3-inputs>*{min-width:0}
.fv3-seg button.on,.fv3-seg button[aria-pressed="true"]{background:var(--fv3-grad);color:#fff}
.fv3-btnrow{display:flex;gap:8px}
.fv3-btnrow .fv3-ghost{flex:1}
.fv3-savednote{display:none;font-size:12.5px;color:var(--fv3-muted);align-items:center;gap:8px}
.fv3-savednote.show{display:flex}
.fv3-savednote button{background:none;border:0;color:var(--fv3-accent2);font-weight:700;font-size:12.5px;padding:0}
html[data-theme="light"] .fv3-savednote button{color:#4F46E5}

/* ---------- results column ---------- */
.fv3-results{display:flex;flex-direction:column;gap:16px;position:sticky;top:12px}
@media (max-width:900px){.fv3-results{position:static}}
.fv3-hero{border-radius:20px;padding:26px;background:var(--fv3-grad);box-shadow:0 20px 50px rgba(99,102,241,.35);color:#fff}
.fv3-hero-lbl{font-size:13px;font-weight:600;opacity:.85;letter-spacing:.4px;text-transform:uppercase}
.fv3-hero-num{font-size:56px;font-weight:800;letter-spacing:-1.5px;margin:6px 0;line-height:1.05;font-variant-numeric:tabular-nums}
.fv3-hero-num .fv3-cents{font-size:24px;opacity:.8;letter-spacing:0}
@media (max-width:480px){.fv3-hero-num{font-size:42px}}
.fv3-hero-sub{font-size:14px;opacity:.9;line-height:1.55}
.fv3-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1180px){.fv3-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fv3-stat{padding:16px;border-radius:14px;background:var(--fv3-inner);border:1px solid var(--fv3-border);min-width:0}
.fv3-stat-l{font-size:12px;color:var(--fv3-muted);font-weight:600}
.fv3-stat-b{font-size:22px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums}
@media (max-width:480px){.fv3-stat-b{font-size:18px}}
.fv3-stat-b.is-danger{color:var(--fv3-danger-txt)}
.fv3-stat-b.is-warn{color:var(--fv3-warn-txt)}

/* ---------- tabs card ---------- */
.fv3-tabs-card{padding:20px}
.fv3-tabseg{max-width:460px;margin-bottom:18px}
.fv3-panel{display:none}
.fv3-panel.on{display:block}
.fv3-donut-row{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.fv3-legend{display:flex;flex-direction:column;gap:12px;font-size:14px;flex:1;min-width:210px}
.fv3-leg-row{display:flex;align-items:center;gap:10px}
.fv3-leg-dot{width:12px;height:12px;border-radius:4px;flex:none}
.fv3-leg-val{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- insight ---------- */
.fv3-insight{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:16px;background:var(--fv3-insight-bg);border:1px solid var(--fv3-insight-border);font-size:14px;line-height:1.6}
.fv3-insight .fv3-insight-ic{font-size:26px;line-height:1}
.fv3-insight b{color:var(--fv3-pos-txt)}
.fv3-insight .fv3-ghost{margin-left:auto;white-space:nowrap;flex:none}
@media (max-width:640px){.fv3-insight{flex-wrap:wrap}.fv3-insight .fv3-ghost{margin-left:0}}

/* ---------- charts ---------- */
.fv3-chart-card{padding:22px;margin-top:20px}
.fv3-chart-head{display:flex;align-items:center;margin-bottom:12px;gap:12px}
.fv3-lbl{font-size:12px;font-weight:700;letter-spacing:.8px;color:var(--fv3-muted);text-transform:uppercase}
.fv3-chart-note{margin-left:auto;font-size:12px;color:var(--fv3-muted)}
.fv3-chartbox{position:relative}
.fv3-chartbox svg{display:block;width:100%}
.fv3-tip{position:absolute;display:none;pointer-events:none;background:var(--fv3-surface);border:1px solid var(--fv3-border2);border-radius:10px;padding:8px 11px;font-size:12px;line-height:1.5;color:var(--fv3-text);box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:6;white-space:nowrap}
.fv3-chart-legend{display:flex;gap:20px;font-size:13px;color:var(--fv3-muted);margin-top:6px;flex-wrap:wrap}

/* ---------- tables ---------- */
.fv3-table{width:100%;border-collapse:collapse;font-size:14px}
.fv3-table th{color:var(--fv3-muted);text-align:left;padding:8px 0;font-weight:600}
.fv3-table th.is-cur,.fv3-table td.is-cur{color:var(--fv3-accent2)}
html[data-theme="light"] .fv3-table th.is-cur,html[data-theme="light"] .fv3-table td.is-cur{color:#4F46E5}
.fv3-table td{padding:12px 0;font-variant-numeric:tabular-nums;font-weight:700}
.fv3-table td:first-child{color:var(--fv3-muted);font-weight:400}
.fv3-table tbody tr{border-top:1px solid var(--fv3-border)}
.fv3-sched{width:100%;border-collapse:collapse;font-size:13px}
.fv3-sched th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--fv3-muted);text-align:right;padding:6px 8px;border-bottom:1px solid var(--fv3-border)}
.fv3-sched th:first-child{text-align:left}
.fv3-sched td{padding:6px 8px;border-bottom:1px solid var(--fv3-border);text-align:right;font-variant-numeric:tabular-nums}
.fv3-sched td:first-child{text-align:left}
.fv3-tblwrap{max-height:340px;overflow:auto;margin-top:8px}
.fv3-comparebox{overflow-x:auto}
.fv3-comparebox .fv3-table{min-width:520px}

/* ---------- below-the-grid row (compare + reserved ad slot) ---------- */
.fv3-below{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;margin-top:20px;align-items:start}
@media (max-width:900px){.fv3-below{grid-template-columns:1fr}}
.fv3-adslot{height:250px}
@media (max-width:900px){.fv3-adslot{display:none}}
.fv3-footnote{font-size:12px;color:var(--fv3-muted);margin:12px 0 0}

/* ---------- sticky mobile result bar ---------- */
.fv3-mobilebar{display:none}
.fv3-mbar-spacer{display:none}
@media (max-width:900px){
  .fv3-mobilebar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--fv3-surface);border-top:1px solid var(--fv3-border);padding:10px 16px;align-items:center;gap:14px;box-shadow:0 -8px 24px rgba(0,0,0,.28)}
  .fv3-mbar-spacer{display:block;height:62px}
}
.fv3-mbar-l{font-size:11px;color:var(--fv3-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.fv3-mbar-b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.fv3-mbar-r{margin-left:auto;font-size:12px;color:var(--fv3-muted);text-align:right;line-height:1.45}

/* ---------- print report (finPrint) ---------- */
.fv3-print{display:none}
@media print{
  body:has(.finv3) .tool-topbar,body:has(.finv3) .tool-hero,body:has(.finv3) .tool-footer,
  body:has(.finv3) .tool-moved-intro,body:has(.finv3) .fv3-screen,body:has(.finv3) .fv3-mobilebar,
  body:has(.finv3) .fv3-mbar-spacer{display:none!important}
  .fv3-print{display:block;color:#000;font-family:system-ui,sans-serif;font-size:13px;line-height:1.6}
  .fv3-print h2{font-size:19px;margin:0 0 4px}
  .fv3-print h3{font-size:14px;margin:18px 0 6px}
  .fv3-print table{width:100%;border-collapse:collapse;font-size:12px}
  .fv3-print th,.fv3-print td{border-bottom:1px solid #ccc;padding:4px 6px;text-align:right;font-variant-numeric:tabular-nums}
  .fv3-print th:first-child,.fv3-print td:first-child{text-align:left}
  .fv3-print .fv3-print-kv td:first-child{color:#444}
}

@media (prefers-reduced-motion:reduce){.finv3 *{transition:none!important;animation:none!important}}

/* ---------- Theme-override layer ----------
   theme.css brute-forces panel fonts, span/label colours, div background-images
   and amber buttons with !important (the old fin-kit fought it the same way).
   These scoped rules — panel scope + doubled root class for specificity —
   restore the v3 design inside .finv3 only. Nothing here touches site chrome. */
.tool-panel .finv3.finv3{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important}
.tool-panel .finv3.finv3 *{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important}
.tool-panel .finv3.finv3 .fv3-row label{color:var(--fv3-text) !important}
.tool-panel .finv3.finv3 .fv3-leg-val{color:var(--fv3-text) !important}
.tool-panel .finv3.finv3 .fv3-hero{background-image:var(--fv3-grad) !important}
.tool-panel .finv3.finv3 button.fv3-ghost{background:var(--fv3-ghost-bg) !important;color:var(--fv3-text) !important;border:1px solid var(--fv3-border2) !important;border-radius:10px !important;padding:8px 12px !important;font-size:13px !important;font-weight:600 !important;box-shadow:none !important;text-shadow:none !important;transform:none !important}
.tool-panel .finv3.finv3 button.fv3-ghost:hover{border-color:var(--fv3-accent) !important;background:var(--fv3-ghost-bg) !important}
.tool-panel .finv3.finv3 .fv3-seg button{background:transparent !important;color:var(--fv3-muted) !important;border:none !important;border-radius:9px !important;padding:8px 0 !important;font-size:13px !important;box-shadow:none !important;text-shadow:none !important;transform:none !important}
.tool-panel .finv3.finv3 .fv3-seg button.on,.tool-panel .finv3.finv3 .fv3-seg button[aria-pressed="true"]{background-color:transparent !important;background-image:var(--fv3-grad) !important;color:#fff !important}
.tool-panel .finv3.finv3 input.fv3-num{background:var(--fv3-inner) !important;border:1px solid var(--fv3-border2) !important;border-radius:10px !important;padding:7px 12px !important;font-size:14px !important;font-weight:700 !important;color:var(--fv3-text) !important;text-align:right !important;box-shadow:none !important}
.tool-panel .finv3.finv3 input.fv3-num:focus{border-color:var(--fv3-accent) !important}
.tool-panel .finv3.finv3 input.fv3-range{background-color:transparent !important;background-image:linear-gradient(90deg,#6366F1,#8B5CF6),linear-gradient(var(--fv3-track),var(--fv3-track)) !important;background-size:var(--p,0%) 100%,100% 100% !important;background-repeat:no-repeat !important;border:none !important;padding:0 !important}
.tool-panel .finv3.finv3 table.fv3-table,.tool-panel .finv3.finv3 table.fv3-sched{border:none !important}
.tool-panel .finv3.finv3 table.fv3-table th,.tool-panel .finv3.finv3 table.fv3-table td{border:none !important;color:var(--fv3-text) !important}
.tool-panel .finv3.finv3 table.fv3-table td{padding:12px 0 !important}
.tool-panel .finv3.finv3 table.fv3-table td:first-child{color:var(--fv3-muted) !important}
.tool-panel .finv3.finv3 table.fv3-table tbody tr{border-top:1px solid var(--fv3-border) !important}
.tool-panel .finv3.finv3 table.fv3-sched th,.tool-panel .finv3.finv3 table.fv3-sched td{border:none !important;border-bottom:1px solid var(--fv3-border) !important;padding:6px 8px !important;color:var(--fv3-text) !important}
.tool-panel .finv3.finv3 table.fv3-sched th{color:var(--fv3-muted) !important}
.tool-panel .finv3.finv3 .fv3-savednote button{background:none !important;border:none !important;color:var(--fv3-accent2) !important;padding:0 !important;box-shadow:none !important}
html[data-theme="light"] .tool-panel .finv3.finv3 .fv3-savednote button{color:#4F46E5 !important}
@media print{.tool-panel .finv3.finv3 .fv3-print *{color:#000 !important}}

/* =====================================================================
   PHASE 2 ADDITIONS (append-only, 2026-10-22) — Debt Payoff (.finv3-dp)
   and 401(k) (.finv3-k4). Every rule is page-scoped; nothing above this
   line is modified. Later phases: append below, never rewrite.
   ===================================================================== */

/* ---------- shared: 3-across stats + stat sub-line ---------- */
.finv3 .fv3-stats.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1180px){.finv3 .fv3-stats.n3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.finv3 .fv3-stats.n3{grid-template-columns:1fr}}
.fv3-statsub{font-size:12px;color:var(--fv3-muted);font-weight:600;margin-top:3px}

/* ---------- Debt Payoff ---------- */
.finv3-dp .dp-debt{background:var(--fv3-inner);border:1px solid var(--fv3-border);border-radius:14px;padding:14px;margin-bottom:12px}
.finv3-dp .dp-debt-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.finv3-dp .dp-name{flex:1;min-width:0;background:transparent;border:1px solid transparent;border-radius:8px;color:var(--fv3-text);font-size:15px;font-weight:700;padding:5px 8px;font-family:inherit}
.finv3-dp .dp-name:focus{border-color:var(--fv3-accent);outline:none;background:var(--fv3-surface)}
.finv3-dp .dp-rm{flex:none;padding:5px 10px;font-size:12px}
.finv3-dp .dp-debt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.finv3-dp .dp-debt-grid label{display:block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--fv3-muted);margin-bottom:5px}
.finv3-dp .dp-debt-grid>div{min-width:0}
/* the wide-screen overlap fix from the live blade, carried into the kit:
   debt inputs always fill their grid cell */
.tool-panel .finv3-dp .dp-debt input.fv3-num{width:100%!important;min-width:0!important}
@media (max-width:460px){.finv3-dp .dp-debt-grid{grid-template-columns:1fr 1fr}}
.finv3-dp .dp-add{width:100%;margin-bottom:4px}
.finv3-dp .dp-strat-note{font-size:12.5px;color:var(--fv3-muted);line-height:1.55}
.finv3-dp .dp-warn{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.45);border-radius:14px;padding:13px 15px;font-size:13.5px;line-height:1.6}
html[data-theme="light"] .finv3-dp .dp-warn{background:#FEF2F2;border-color:rgba(220,38,38,.35)}
.finv3-dp .dp-cmp .fv3-stat{transition:outline-color .15s}
.finv3-dp .dp-cmp .fv3-stat.on{outline:2px solid var(--fv3-accent);outline-offset:-2px}
.finv3-dp .dp-tl-row{display:grid;grid-template-columns:minmax(110px,150px) 1fr 92px;gap:12px;align-items:center;font-size:14px;margin:12px 0}
.finv3-dp .dp-tl-name{font-weight:600;min-width:0}
.finv3-dp .dp-tl-sub{display:block;font-size:12px;color:var(--fv3-muted);font-weight:600;margin-top:2px}
.finv3-dp .dp-tl-track{height:22px;position:relative;background:var(--fv3-inner);border-radius:6px;overflow:hidden}
.finv3-dp .dp-tl-bar{position:absolute;top:0;bottom:0;left:0;border-radius:6px;background:linear-gradient(90deg,#6366F1,#8B5CF6)}
.tool-panel .finv3-dp .dp-tl-bar{background-image:linear-gradient(90deg,#6366F1,#8B5CF6)!important}
.finv3-dp .dp-tl-when{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
@media (max-width:560px){.finv3-dp .dp-tl-row{grid-template-columns:minmax(90px,120px) 1fr 76px;font-size:13px}}
.finv3-dp .dp-cardfoot{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ---------- 401(k) ---------- */
.finv3-k4 .fv3-wrap{grid-template-columns:minmax(0,4fr) minmax(0,6fr)}
@media (max-width:900px){.finv3-k4 .fv3-wrap{grid-template-columns:1fr}}
.finv3-k4 .k4-chartcard{padding:22px;margin-bottom:20px}
.finv3-k4 .k4-chart-top{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap;margin-bottom:8px}
.finv3-k4 .k4-hero-num{font-size:54px;font-weight:800;letter-spacing:-1.5px;line-height:1.05;font-variant-numeric:tabular-nums;margin-top:4px}
@media (max-width:480px){.finv3-k4 .k4-hero-num{font-size:40px}}
.finv3-k4 .k4-hero-note{font-size:13.5px;color:var(--fv3-muted);margin-top:5px;line-height:1.5}
.finv3-k4 .k4-segwrap{min-width:230px;flex:1;max-width:430px}
.finv3-k4 .k4-segwrap .fv3-lbl{display:block;margin-bottom:7px}
.finv3-k4 .k4-chartbox{position:relative;margin-top:10px}
.finv3-k4 .k4-chartbox svg{display:block;width:100%}
.finv3-k4 .k4-age-unset .fv3-range{opacity:.45}
.finv3-k4 .k4-derived{opacity:.55}
.finv3-k4 .k4-warn{background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.5);border-radius:14px;padding:13px 15px;font-size:13.5px;line-height:1.6}
html[data-theme="light"] .finv3-k4 .k4-warn{background:#FFFBEB;border-color:rgba(217,119,6,.4)}
.finv3-k4 .k4-cmp .fv3-stat.on{outline:2px solid var(--fv3-accent);outline-offset:-2px}
.finv3-k4 .fv3-adslot{height:120px}
.finv3-k4 .k4-matchgrid{margin-top:2px}
@media (max-width:480px){.tool-panel .finv3.finv3-k4 .fv3-seg button{font-size:11.5px!important;white-space:normal;line-height:1.3;text-overflow:clip}}

/* ================= Phase 3 additions (2026-10-22) =================
   US Paycheck (.finv3-us), UK Take-Home (.finv3-uk), UK Stamp Duty
   (.finv3-sd). Append-only; every rule stays scoped under .finv3. */
.finv3 [hidden]{display:none!important}

/* selects + text inputs (state picker, loan plan, tax code) */
.fv3-select{width:100%;background:var(--fv3-inner);border:1px solid var(--fv3-border2);border-radius:10px;padding:9px 12px;font-size:14px;font-weight:600;color:var(--fv3-text);font-family:inherit}
.fv3-select:focus{border-color:var(--fv3-accent);outline:none}
.fv3-text{width:100%;background:var(--fv3-inner);border:1px solid var(--fv3-border2);border-radius:10px;padding:9px 12px;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fv3-text);font-family:inherit}
.fv3-text:focus{border-color:var(--fv3-accent);outline:none}
.fv3-text::placeholder{color:var(--fv3-faint);letter-spacing:.02em;text-transform:none;font-weight:600}
.tool-panel .finv3.finv3 select.fv3-select{background:var(--fv3-inner) !important;border:1px solid var(--fv3-border2) !important;border-radius:10px !important;padding:9px 12px !important;font-size:14px !important;font-weight:600 !important;color:var(--fv3-text) !important;box-shadow:none !important}
.tool-panel .finv3.finv3 input.fv3-text{background:var(--fv3-inner) !important;border:1px solid var(--fv3-border2) !important;border-radius:10px !important;padding:9px 12px !important;font-size:15px !important;font-weight:700 !important;color:var(--fv3-text) !important;box-shadow:none !important;text-align:left !important}
.fv3-codenote{font-size:12.5px;line-height:1.55;color:var(--fv3-muted)}
.fv3-codenote.is-err{color:var(--fv3-danger-txt)}
.fv3-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;font-weight:600;line-height:1.45;cursor:pointer}
.fv3-check input{width:18px;height:18px;margin-top:1px;accent-color:var(--fv3-accent);flex:none}
.fv3-kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px;border-top:1px solid var(--fv3-border)}
.fv3-kv:first-child{border-top:none}
.fv3-kv span{color:var(--fv3-muted)}
.fv3-kv b{font-variant-numeric:tabular-nums;text-align:right}

/* US filing-status seg: four long labels read better as a 2x2 grid */
.finv3-us #pcStatusSeg{flex-wrap:wrap}
.finv3-us #pcStatusSeg button{flex:1 1 42%}

/* --- US Paycheck: waterfall --- */
.finv3-us .fv3-wf{display:flex;flex-direction:column;gap:9px}
.finv3-us .fv3-wf-row{display:grid;grid-template-columns:158px minmax(0,1fr) 118px;gap:12px;align-items:center;font-size:13.5px}
.finv3-us .fv3-wf-lbl{color:var(--fv3-muted);font-weight:600;line-height:1.3}
.finv3-us .fv3-wf-track{height:22px;border-radius:6px;background:var(--fv3-track);overflow:hidden}
.finv3-us .fv3-wf-fill{height:100%;border-radius:6px;min-width:2px}
.finv3-us .fv3-wf-val{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.finv3-us .fv3-wf-val small{display:block;font-weight:600;color:var(--fv3-faint);font-size:11.5px}
.finv3-us .fv3-wf-row.is-total{border-top:1px solid var(--fv3-border);padding-top:10px}
.finv3-us .fv3-wf-row.is-total .fv3-wf-lbl{color:var(--fv3-text);font-weight:700}
@media (max-width:560px){.finv3-us .fv3-wf-row{grid-template-columns:104px minmax(0,1fr) 92px;font-size:12.5px}}

/* --- UK Take-Home: stacked bar --- */
.finv3-uk .fv3-stack{display:flex;height:46px;border-radius:12px;overflow:hidden;background:var(--fv3-track)}
.finv3-uk .fv3-stack-seg{height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#0B1120;white-space:nowrap;overflow:hidden;min-width:0}
.finv3-uk .fv3-bandwrap{overflow-x:auto}
.finv3-uk .fv3-bandwrap .fv3-sched{min-width:430px}

/* --- UK Stamp Duty: wide input bar + staircase --- */
.finv3-sd .fv3-topinputs{padding:22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr);gap:20px;margin-bottom:20px}
@media (max-width:640px){.finv3-sd #sdKindSeg,.finv3-sd #sdCountrySeg{flex-wrap:wrap}.finv3-sd #sdKindSeg button,.finv3-sd #sdCountrySeg button{flex:1 1 45%}}
.finv3-sd .fv3-topinputs>*{min-width:0}
@media (max-width:900px){.finv3-sd .fv3-topinputs{grid-template-columns:minmax(0,1fr)}}
.finv3-sd .fv3-stair{display:flex;flex-direction:column;gap:8px}
.finv3-sd .fv3-stair-row{display:grid;grid-template-columns:172px minmax(0,1fr) 118px;gap:12px;align-items:center;font-size:13px}
.finv3-sd .fv3-stair-lbl{color:var(--fv3-muted);font-weight:600;line-height:1.3}
.finv3-sd .fv3-stair-track{height:20px;border-radius:6px;background:var(--fv3-track);overflow:hidden}
.finv3-sd .fv3-stair-fill{height:100%;border-radius:6px;background:var(--fv3-border2)}
.finv3-sd .fv3-stair-row.is-on .fv3-stair-fill{background:var(--fv3-grad)}
.finv3-sd .fv3-stair-row.is-on .fv3-stair-lbl{color:var(--fv3-text)}
.finv3-sd .fv3-stair-val{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.finv3-sd .fv3-stair-val small{display:block;font-weight:600;color:var(--fv3-faint);font-size:11.5px}
.finv3-sd .fv3-stair-row.is-off{opacity:.55}
@media (max-width:560px){.finv3-sd .fv3-stair-row{grid-template-columns:118px minmax(0,1fr) 92px;font-size:12px}}
/* Phase 3 fix: SD top-bar segs — 12px labels so "Additional property" never truncates */
.tool-panel .finv3.finv3.finv3-sd .fv3-topinputs .fv3-seg button{font-size:12px !important}

/* ================= Phase 5 additions (2026-10-22) =================
   Mortgage Calculator (.finv3-mg). Append-only; every rule stays scoped
   under .finv3. Later phases: append below, never rewrite. */
.finv3-mg .mg-divider{font-size:12px;font-weight:700;letter-spacing:.8px;color:var(--fv3-muted);text-transform:uppercase;border-top:1px solid var(--fv3-border);padding-top:14px}
.finv3-mg .mg-stack{display:flex;height:26px;border-radius:8px;overflow:hidden;background:var(--fv3-track);margin-top:12px}
.finv3-mg .mg-dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:-1px}
.finv3-mg .mg-until{color:var(--fv3-faint);font-weight:600;font-size:12px}
.finv3-mg .mg-charts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:20px}
@media (max-width:900px){.finv3-mg .mg-charts{grid-template-columns:1fr}}
.finv3-mg .mg-schedseg{margin-left:auto;width:230px;flex:none}
@media (max-width:560px){.finv3-mg .mg-schedseg{width:180px}}
.tool-panel .finv3.finv3-mg input.fv3-num.mg-month{width:100%!important;text-align:left!important}

/* ================= Width pass (2026-10-22) =================
   Owner order: the finance tools use 75% of the page width — at the old
   1240px cap the Auto Loan result values overflowed their stat tiles.
   theme.css sets .tool-stage{width:min(1240px,100%)}; this rule widens the
   stage on finance pages only: the :has() can only match when a .finv3 root
   sits inside the panel, and the .finv3 markup plus this stylesheet exist
   only on the 7 finance tools. Effective stage width:
   min(100%, max(1240px, 75%)) — 75% wherever that is an increase (1440px at
   a 1920px viewport), never narrower than today's 1240px at any viewport;
   below the desktop breakpoint the shared layout stands untouched. */
@media (min-width:1101px){
  .tool-stage:has(> .tool-panel > .finv3){width:min(100%,max(1240px,75%))}
}
/* Auto Loan only: its stat totals are the longest in the wave (price +
   interest + tax). Even at the 75% stage, a 6-figure total ($244,289.28
   at a $200k price) overflowed its tile at the kit's 22px — value steps
   down and tile padding narrows on this page only, so totals fit through
   $1,188,863.43 (measured). Sibling tools' tiles are untouched. */
.autoloan .fv3-stat{padding:16px 10px}
.autoloan .fv3-stat-b{font-size:18px}

/* --- Wave 1 maths trio (2026-10-23): Hourly to Salary / Refinance / Savings Goal ---
   Appended only; every rule is page-prefixed (.finv3-hs / .finv3-rf / .finv3-sg) so
   the seven existing finance pages are untouched. */
.finv3-hs .fv3-stat-b.is-pos,.finv3-rf .fv3-stat-b.is-pos,.finv3-sg .fv3-stat-b.is-pos{color:var(--fv3-pos-txt)}
@media (min-width:1181px){
  .finv3-hs .fv3-results>.fv3-stats,.finv3-rf .fv3-results>.fv3-stats,.finv3-sg .fv3-results>.fv3-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:901px){
  .finv3-hs .fv3-below,.finv3-rf .fv3-below,.finv3-sg .fv3-below{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.finv3-hs .tiles3,.finv3-rf .tiles3,.finv3-sg .tiles3{grid-template-columns:repeat(3,minmax(0,1fr))}
.finv3-hs .tiles2,.finv3-rf .tiles2,.finv3-sg .tiles2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){
  .finv3-hs .tiles3,.finv3-rf .tiles3,.finv3-sg .tiles3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.finv3-hs .fv3-related,.finv3-rf .fv3-related,.finv3-sg .fv3-related{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}
@media (max-width:900px){.finv3-hs .fv3-related,.finv3-rf .fv3-related,.finv3-sg .fv3-related{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.finv3-hs .fv3-related,.finv3-rf .fv3-related,.finv3-sg .fv3-related{grid-template-columns:1fr}}
.finv3-hs .fv3-relcard,.finv3-rf .fv3-relcard,.finv3-sg .fv3-relcard{display:block;padding:16px;text-decoration:none}
.finv3-hs .fv3-relcard b,.finv3-rf .fv3-relcard b,.finv3-sg .fv3-relcard b{display:block;font-size:15px;color:var(--fv3-text)}
.finv3-hs .fv3-relcard span,.finv3-rf .fv3-relcard span,.finv3-sg .fv3-relcard span{font-size:13px;color:var(--fv3-muted)}
.finv3-hs .fv3-newtag,.finv3-rf .fv3-newtag,.finv3-sg .fv3-newtag{font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px;background:#10B981;color:#04281d;margin-left:6px;font-style:normal;vertical-align:2px;text-transform:uppercase;letter-spacing:.4px}
/* Switch rows (mock toggle) for the trio */
.finv3-hs .fv3-switchrow,.finv3-rf .fv3-switchrow,.finv3-sg .fv3-switchrow{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:600;cursor:pointer}
.finv3-hs .fv3-switch,.finv3-rf .fv3-switch,.finv3-sg .fv3-switch{position:relative;flex:none;width:40px;height:22px}
.finv3-hs .fv3-switch input,.finv3-rf .fv3-switch input,.finv3-sg .fv3-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2}
.finv3-hs .fv3-switch-tr,.finv3-rf .fv3-switch-tr,.finv3-sg .fv3-switch-tr{display:block;width:40px;height:22px;border-radius:12px;background:var(--fv3-track);transition:background .2s;position:relative}
.finv3-hs .fv3-switch-tr::after,.finv3-rf .fv3-switch-tr::after,.finv3-sg .fv3-switch-tr::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s}
.finv3-hs .fv3-switch input:checked+.fv3-switch-tr,.finv3-rf .fv3-switch input:checked+.fv3-switch-tr,.finv3-sg .fv3-switch input:checked+.fv3-switch-tr{background:var(--fv3-accent)}
.finv3-hs .fv3-switch input:checked+.fv3-switch-tr::after,.finv3-rf .fv3-switch input:checked+.fv3-switch-tr::after,.finv3-sg .fv3-switch input:checked+.fv3-switch-tr::after{left:21px}
.finv3-hs .fv3-switch input:focus-visible+.fv3-switch-tr,.finv3-rf .fv3-switch input:focus-visible+.fv3-switch-tr,.finv3-sg .fv3-switch input:focus-visible+.fv3-switch-tr{outline:2px solid var(--fv3-accent);outline-offset:2px}
/* Hourly: same-pay period bars */
.finv3-hs .hs-bar-row{display:grid;grid-template-columns:110px minmax(0,1fr) 96px;gap:12px;align-items:center;font-size:13.5px;margin:10px 0}
.finv3-hs .hs-bar-lbl{color:var(--fv3-muted);font-weight:600}
.finv3-hs .hs-bar-track{height:22px;border-radius:6px;background:var(--fv3-track);overflow:hidden}
.finv3-hs .hs-bar-fill{height:100%;border-radius:6px;min-width:2px;transition:width .3s ease}
.finv3-hs .hs-bar-val{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:560px){.finv3-hs .hs-bar-row{grid-template-columns:74px minmax(0,1fr) 82px;font-size:12.5px}}
/* Refinance: disabled term input in same-term mode */
.finv3-rf input:disabled{opacity:.45}
/* Savings: milestone chips + saved-goal bars */
.finv3-sg .sg-chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.finv3-sg .sg-chip{display:inline-flex;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;border:1px solid var(--fv3-border2);background:var(--fv3-inner);color:var(--fv3-muted)}
.finv3-sg .sg-chip.on{background:rgba(99,102,241,.22);border-color:#6366F1;color:var(--fv3-accent2)}
html[data-theme="light"] .finv3-sg .sg-chip.on{color:#4F46E5}
.finv3-sg .sg-goalbar{height:10px;border-radius:6px;background:var(--fv3-track);overflow:hidden;margin-top:5px}
.finv3-sg .sg-goalbar i{display:block;height:100%;background:#34D399;border-radius:6px}
.finv3-sg .sg-goalrow{border-top:1px solid var(--fv3-border);padding:12px 0}
.finv3-sg .sg-goalrow:first-child{border-top:none;padding-top:0}
.finv3-sg .sg-goalhead{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;flex-wrap:wrap}
.finv3-sg .sg-goalhead span{color:var(--fv3-muted)}
.finv3-sg .sg-goalbtns{display:flex;gap:8px;margin-top:8px}
.finv3-sg .fv3-sched tr.is-cur td{color:var(--fv3-accent2);font-weight:700}

/* ---------- Wave 1 US trio (2026-10-23): Roth IRA / Credit Card Payoff /
   Student Loan Payoff. Shared trio pieces first, then page-prefixed rules.
   The below-the-fold cards sit three-across at full width; the reserved ad
   slot keeps its own full-width row underneath them (kit .fv3-adslot). */
.fv3-cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px;align-items:start}
@media (max-width:1180px){.fv3-cards3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.fv3-cards3{grid-template-columns:1fr}}
.fv3-cards3>*{min-width:0}
.finv3 .fv3-newtag{font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px;background:#10B981;color:#04281d;margin-left:6px;font-style:normal;letter-spacing:.4px;vertical-align:2px}
.finv3 .ri-cardline{font-size:13.5px;color:var(--fv3-muted);line-height:1.6;margin:10px 0 0}
.finv3 .ri-verdict{font-size:13.5px;line-height:1.6;margin:10px 0 0;color:var(--fv3-text)}
.finv3 .ri-meter{height:10px;border-radius:6px;background:var(--fv3-track);overflow:hidden;margin-top:12px}
.finv3 .ri-meter i{display:block;height:100%;border-radius:6px;background:#34D399;transition:width .3s ease}
.finv3-ri .ri-warn,.finv3-cp .cp-warn{background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.40);border-radius:14px;padding:13px 15px;font-size:13.5px;line-height:1.6;color:var(--fv3-text)}
html[data-theme="light"] .finv3-ri .ri-warn,html[data-theme="light"] .finv3-cp .cp-warn{background:#FFFBEB;border-color:rgba(217,119,6,.4)}
.finv3-cp .cp-warn{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.45)}
html[data-theme="light"] .finv3-cp .cp-warn{background:#FEF2F2;border-color:rgba(220,38,38,.35)}
.finv3-ri .ri-hl{border-color:var(--fv3-accent);box-shadow:0 0 0 1px var(--fv3-accent)}
.finv3-sl .sl-hl{border-color:var(--fv3-accent);box-shadow:0 0 0 1px var(--fv3-accent);border-radius:18px}
.finv3-sl #slExtraFields.sl-hl{padding:10px;border:1px solid var(--fv3-accent)}
.finv3-sl #slExtraFields{display:flex;flex-direction:column;gap:20px}

/* ---------- Credit Card Payoff: switches + extra-card rows ---------- */
.finv3-cp .cp-tgrow{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600;padding:2px 0}
.finv3-cp .cp-sw{width:40px;height:22px;border-radius:12px;background:var(--fv3-track);position:relative;border:0;flex:none;padding:0;cursor:pointer}
.finv3-cp .cp-sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .18s ease}
.finv3-cp .cp-sw.on{background:#6366F1}
.finv3-cp .cp-sw.on::after{left:21px}
.finv3-cp .cp-xcard{background:var(--fv3-inner);border:1px solid var(--fv3-border);border-radius:14px;padding:14px;margin-bottom:12px}
.finv3-cp .cp-xcard-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.finv3-cp .cp-name{flex:1;min-width:0;background:transparent;border:1px solid transparent;border-radius:8px;color:var(--fv3-text);font-size:15px;font-weight:700;padding:5px 8px;font-family:inherit}
.finv3-cp .cp-name:focus{border-color:var(--fv3-accent);outline:none;background:var(--fv3-surface)}
.finv3-cp .cp-rm{flex:none;padding:5px 10px;font-size:12px}
.finv3-cp .cp-xcard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.finv3-cp .cp-xcard-grid label{display:block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--fv3-muted);margin-bottom:5px}
.finv3-cp .cp-xcard-grid>div{min-width:0}
.tool-panel .finv3-cp .cp-xcard input.fv3-num{width:100%!important;min-width:0!important}
@media (max-width:460px){.finv3-cp .cp-xcard-grid{grid-template-columns:1fr 1fr}}
.finv3-cp .cp-order-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:9px 0;border-top:1px solid var(--fv3-border)}
.finv3-cp .cp-order-row b{font-variant-numeric:tabular-nums;text-align:right}

/* ---------- Student Loan Payoff: notes + refinance chips ---------- */
.finv3-sl .sl-note{background:rgba(99,102,241,.10);border:1px solid rgba(99,102,241,.40);border-radius:14px;padding:13px 15px;font-size:13.5px;line-height:1.6;color:var(--fv3-text)}
html[data-theme="light"] .finv3-sl .sl-note{background:#EEF2FF;border-color:rgba(79,70,229,.35)}
.finv3-sl .sl-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;border:1px solid var(--fv3-border2);background:var(--fv3-inner);color:var(--fv3-text);cursor:pointer;font-family:inherit}
.finv3-sl .sl-chip.on{background:rgba(99,102,241,.22);border-color:#6366F1;color:var(--fv3-accent2)}
html[data-theme="light"] .finv3-sl .sl-chip.on{color:#4F46E5}