/* networth.com — calculator suite (shared by every /calculator/<name>/ page)
   Extends calc.css, which the net-worth flagship already established. Anything here is
   generic to the suite: the engine's stat grid, composition bar, SVG chart, year table,
   FAQ and related-calculator cards. */

.suitepage .calc-layout{margin-bottom:34px}
.suitepage .cpanel{padding:20px 24px 14px}
.suitepage .crow{align-items:flex-start;gap:16px}
.suitepage .clabel{padding-top:11px}

/* select + radio + steppers ------------------------------------------------ */
.cinput.csel{width:210px}
.cinput.csel select{width:100%;height:46px;border:1px solid #d5dcea;border-radius:10px;padding:0 34px 0 13px;
  font:600 15px 'Inter',sans-serif;color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2367718c' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center;
  -webkit-appearance:none;appearance:none;cursor:pointer}
.cinput.csel select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.cradio{display:flex;flex-direction:column;gap:8px;padding-top:8px}
.cradio label{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--body);cursor:pointer}
.cradio input{accent-color:var(--blue);width:17px;height:17px}
.cstep{display:flex;flex-direction:column;gap:4px;flex:none;padding-top:2px}
.cstep button{width:26px;height:21px;border:1px solid #d5dcea;border-radius:6px;background:#fff;color:var(--blue);
  font:700 14px/1 'Inter',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cstep button:hover{background:var(--soft);border-color:var(--blue)}
.cstep button:active{transform:translateY(1px)}
.cmore-panel{padding:6px 24px 10px}
.cmore-panel summary{cursor:pointer;font:700 14px 'Inter',sans-serif;color:var(--blue);padding:12px 0;list-style:none}
.cmore-panel summary::-webkit-details-marker{display:none}
.cmore-panel summary::after{content:" +";font-size:15px}
.cmore-panel[open] summary::after{content:" –"}

/* result panel ------------------------------------------------------------- */
.cres-head{background:linear-gradient(180deg,#fff 0%,#f7faff 100%)}
.csplit{margin-top:16px}
.csplit-bar{display:flex;height:12px;border-radius:7px;overflow:hidden;background:#eef1f7}
.csplit-bar i{display:block;height:100%;transition:width .28s cubic-bezier(.4,0,.2,1)}
.csplit-bar .s1{background:#93b4f5}
.csplit-bar .s2{background:var(--blue)}
.csplit-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:11px;font-size:12.5px;color:var(--muted)}
.csplit-key span{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.csplit-key span::before{content:"";width:9px;height:9px;border-radius:3px;flex:none}
.csplit-key .k1::before{background:#93b4f5}
.csplit-key .k2::before{background:var(--blue)}
.csplit-key b{color:var(--ink);font-weight:700}
.csplit-key em{font-style:normal;color:var(--muted)}

.cstats{display:flex;flex-direction:column}
.cstat{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:14px;
  padding:11px 0;border-bottom:1px solid #f1f4fa}
.cstat:last-child{border-bottom:0;padding-bottom:0}
.cstat-l{font-size:13.5px;color:var(--body);line-height:1.4}
.cstat-v{grid-column:2;font:800 19px 'Plus Jakarta Sans',sans-serif;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.cstat-v.good{color:var(--green)}
/* a figure that should give the reader pause — used where a share of take-home pay is high
   enough to be worth flagging, not for errors */
.cstat-v.warn{color:#a8410f}
/* group heading inside the input panel (budget: needs / wants / savings) */
.cgroup{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:18px 0 2px;padding-top:12px;border-top:1px solid var(--line)}
.cgroup:first-of-type{margin-top:6px;padding-top:0;border-top:0}
.cgroup span{font:800 13px 'Plus Jakarta Sans',sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--ink)}
.cgroup em{font:400 12px 'Inter',sans-serif;font-style:normal;color:var(--muted)}
/* the one-line basis under a table row's first cell (three-tier affordability table) */
.ctable .tnote{display:block;font-size:.78rem;line-height:1.35;font-weight:400;color:var(--muted);margin-top:.15rem}
.cstat-s{grid-column:1/-1;font-size:12px;color:var(--muted);margin-top:3px}

/* chart -------------------------------------------------------------------- */
.calc-chart-sec{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 28px 22px;margin-bottom:34px}
.calc-chart-sec h2{font-size:22px;color:var(--ink);font-weight:800;letter-spacing:-.01em}
.csum{font-size:16px;line-height:1.6;color:var(--body);margin:10px 0 20px;max-width:76ch}
.cchart{width:100%}
.cchart svg{max-width:100%;height:auto;display:block;overflow:visible}
.cchart .grid line{stroke:#eef1f7;stroke-width:1}
.cchart .fill-dep{fill:#eaf0fb}
.cchart .fill-int{fill:rgba(37,99,235,.34)}
.cchart .line-dep{fill:none;stroke:#a8c2f2;stroke-width:1.6}
.cchart .line-tot{fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linejoin:round}
.cchart text{font:500 11.5px 'Inter',sans-serif;fill:var(--muted);font-variant-numeric:tabular-nums}
.cchart-key{display:flex;gap:20px;margin-top:14px;font-size:12.5px;color:var(--muted)}
.cchart-key span{display:inline-flex;align-items:center;gap:7px}
.cchart-key span::before{content:"";width:11px;height:11px;border-radius:3px}
.cchart-key .k1::before{background:#eaf0fb;border:1.5px solid #a8c2f2}
.cchart-key .k2::before{background:rgba(37,99,235,.34);border:1.5px solid var(--blue)}

.ctable-wrap{margin-top:20px;border-top:1px solid var(--line);padding-top:6px}
.ctable-wrap summary{cursor:pointer;font:700 14px 'Inter',sans-serif;color:var(--blue);padding:10px 0;list-style:none}
.ctable-wrap summary::-webkit-details-marker{display:none}
.ctable-wrap summary::after{content:" ↓"}
.ctable-wrap[open] summary::after{content:" ↑"}
.ctable{overflow-x:auto;margin-top:6px}
.ctable-scroll{max-height:520px;overflow-y:auto}
.ctable table{width:100%;border-collapse:collapse;font-size:14px;min-width:460px}
.ctable caption{text-align:left;font-size:12.5px;color:var(--muted);padding-bottom:8px}
.ctable th,.ctable td{padding:9px 12px;text-align:right;border-bottom:1px solid #f1f4fa;font-variant-numeric:tabular-nums}
.ctable thead th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:right;background:#fafcff}
.ctable tbody th{text-align:left;color:var(--ink);font-weight:700}
.ctable thead th:first-child{text-align:left}

/* prose + rail ------------------------------------------------------------- */
.calc-prose{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:34px;align-items:start;padding-bottom:44px}
/* The "On this page" rail was removed on 2026-08-06. On the calculators and net-worth it was the
   only rail card, so the aside went with it — without this the grid would still reserve its 300px
   and leave an empty column. Prose line length stays sane via the max-width on p/li. */
.calc-prose.no-rail{grid-template-columns:minmax(0,1fr)}
.calc-body{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 34px 34px}
.calc-body section+section{margin-top:30px;padding-top:28px;border-top:1px solid var(--line)}
.calc-body h2{font-size:23px;line-height:1.25;color:var(--ink);font-weight:800;letter-spacing:-.01em;margin-bottom:12px;text-wrap:balance}
.calc-body p{font-size:16.5px;line-height:1.68;color:var(--body);max-width:70ch}
.calc-body p+p{margin-top:13px}
.calc-body b{color:var(--ink);font-weight:700}
.calc-body ol,.calc-body ul{margin:12px 0 0;padding-left:22px;max-width:70ch}
.calc-body li{font-size:16.5px;line-height:1.62;color:var(--body);margin-bottom:9px}
.calc-body a{color:var(--blue);font-weight:600}
.formula{background:var(--soft);border:1px solid #dbe6fb;border-radius:12px;padding:20px 24px;margin:4px 0 16px}
.formula .fx{font:700 26px/1.3 'Plus Jakarta Sans',sans-serif;color:var(--ink);text-align:center;margin-bottom:14px}
.formula ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:6px 22px}
.formula li{font-size:15px;margin:0}

.cfaq details{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:#fcfdff}
.cfaq summary{cursor:pointer;padding:15px 18px;font:700 16px 'Inter',sans-serif;color:var(--ink);list-style:none;
  display:flex;justify-content:space-between;gap:14px}
.cfaq summary::-webkit-details-marker{display:none}
.cfaq summary::after{content:"+";color:var(--blue);font-size:19px;line-height:1}
.cfaq details[open] summary::after{content:"–"}
.cfaq p{padding:0 18px 16px;font-size:16px}

.crel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:6px}
.crel-card{display:flex;flex-direction:column;gap:5px;padding:18px 18px 16px;border:1px solid var(--line);border-radius:14px;
  background:#fcfdff;text-decoration:none;transition:border-color .16s,transform .16s,box-shadow .16s}
.crel-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 8px 22px rgba(56,54,203,.09)}
.crel-ico{width:46px;height:46px;object-fit:contain;margin-bottom:6px;display:block}
.crel-card b{font-size:15.5px;color:var(--ink);font-weight:700}
.crel-card>span{font-size:13.5px;color:var(--muted);line-height:1.45;font-weight:400}
.crel-cta{margin-top:auto;padding-top:9px;font-size:13px;font-weight:700;color:var(--blue);
  display:inline-flex;align-items:center;gap:5px}
.crel-card:hover .crel-cta{gap:8px}
.crel-cta svg{transition:transform .16s}
.crel-all{margin-top:16px;font-size:15.5px;font-weight:700}

/* /calculator/ index — sections of cards, one per site area */
.cindex-sec{margin:0 0 30px}
/* auto-FILL, not auto-fit: a section with one calculator gets one column-width card rather than
   a card stretched across the whole row */
.cindex-sec .crel{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.cindex-sec h2{display:flex;align-items:center;gap:10px;font:800 21px 'Plus Jakarta Sans',sans-serif;
  color:var(--ink);letter-spacing:-.01em;margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.cindex-sec h2 em{font:700 12px 'Inter',sans-serif;font-style:normal;color:var(--muted);
  background:var(--soft);border-radius:20px;padding:3px 9px}
.cindex-note{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;margin:6px 0 44px}
.cindex-note h2{font:800 20px 'Plus Jakarta Sans',sans-serif;color:var(--ink);margin:0 0 10px}
.cindex-note p{font-size:16px;line-height:1.65;color:var(--body);max-width:78ch}
.cindex-note p+p{margin-top:11px}
.cindex-note a{color:var(--blue);font-weight:600}
.calcindex .calc-hero{margin-bottom:26px}

.calc-rail{position:sticky;top:calc(var(--topbar-h,64px) + 14px)}
.rail-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.rail-card h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800;margin-bottom:12px}
.railtoc{list-style:none;padding:0;margin:0;counter-reset:toc}
.railtoc li{margin-bottom:9px;padding-left:22px;position:relative;counter-increment:toc}
.railtoc li::before{content:counter(toc);position:absolute;left:0;top:1px;font-size:11.5px;font-weight:700;color:#9fb2d6;
  font-variant-numeric:tabular-nums}
.railtoc a{font-size:14.5px;line-height:1.4;color:var(--body);text-decoration:none;font-weight:600}
.railtoc a:hover{color:var(--blue)}

/* responsive --------------------------------------------------------------- */
@media (max-width:1000px){
  .calc-prose{grid-template-columns:minmax(0,1fr)}
  /* order:-1 existed to hoist the "On this page" card above the content on mobile. That card was
     removed on 2026-08-06, so the rail now holds sources and article links — which belong AFTER
     the page, not before it. */
  .calc-rail{position:static;order:0}
  .railtoc{columns:2;column-gap:26px}
}
@media (max-width:820px){
  .suitepage .calc-layout{grid-template-columns:minmax(0,1fr)}
  .cresult{position:static}
  .suitepage .crow{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"label label" "input step";gap:10px 10px;padding:14px 0}
  .suitepage .clabel{grid-area:label;padding-top:0}
  .cinput,.cinput.csel,.cinput.narrow{grid-area:input;width:auto}
  .cradio{grid-area:input;padding-top:0}
  .cstep{grid-area:step;flex-direction:row;padding-top:0;align-self:stretch}
  .cstep button{width:44px;height:46px}
  .chint{max-width:none}
  .calc-chart-sec{padding:20px 16px 16px}
  .calc-body{padding:22px 18px 26px}
  .calc-body h2{font-size:21px}
  .railtoc{columns:1}
}
@media (max-width:520px){
  .cstat{flex-wrap:wrap;gap:2px 14px}
  .cstat-l{max-width:none;flex:1 1 auto}
  .cres-num{font-size:36px}
  .formula .fx{font-size:21px}
}
/* iOS zooms any input under 16px on focus */
@media (max-width:820px){
  .cinput input,.cinput.csel select{font-size:16px}
}

@media print{
  .topbar,.tbar,.calc-rail,.cactions,.crel,.cfaq,.calc-chart-sec .ctable-wrap,footer{display:none!important}
  .calc-prose,.calc-layout{grid-template-columns:1fr!important}
  .cres-card,.calc-body,.calc-chart-sec{border-color:#ccc;break-inside:avoid}
}
@media (prefers-reduced-motion:reduce){
  .csplit-bar i,.crel-card{transition:none}
}

/* ---- schedule calculators: balance chart + tabbed schedule table -------------------------- */
.cchart .fill-bal{fill:#eaf0fb}
.cchart .line-bal{fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linejoin:round}
.cchart .line-int{fill:none;stroke:#e0842f;stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:5 4}
.cchart .cross{stroke:#c3cbdd;stroke-width:1;stroke-dasharray:3 3}
.cchart .crosslab{font:600 10.5px 'Inter',sans-serif;fill:#8a95ad}
.cchart-key .k3::before{background:#eaf0fb;border:1.5px solid var(--blue)}
.cchart-key .k4::before{background:transparent;border:1.5px dashed #e0842f}
.ctabs{display:flex;gap:6px;margin:4px 0 12px}
.ctabs button{border:1px solid #d5dcea;background:#fff;border-radius:8px;padding:7px 14px;
  font:700 13.5px 'Inter',sans-serif;color:var(--muted);cursor:pointer}
.ctabs button.on{border-color:var(--blue);color:var(--blue);background:var(--soft)}
.ctabs button:hover{border-color:var(--blue)}
.ctable tr.grp th,.ctable tr.grp td{background:#f7faff;font-weight:700;color:var(--ink)}
.ctable table{min-width:520px}

/* point-in-time calculators (a tax estimate) carry the answer sentence without a chart */
.calc-summary-sec{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;margin-bottom:34px}
.calc-summary-sec .csum{margin:0;font-size:17px}

/* ---- repeating debt grid (debt-snowball, credit-card-payoff, student-loan) ---------------- */
.crow-debts{display:block}
.dlabel{padding:0 0 10px}
.dgrid{display:block}
.dgrid-h{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 96px minmax(0,1fr);gap:8px;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:0 0 6px}
.drow:not([hidden]){display:grid}
.drow{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 96px minmax(0,1fr);gap:8px;margin-bottom:8px;align-items:center}
.drow input{width:100%;height:42px;border:1px solid #d5dcea;border-radius:9px;padding:0 11px;
  font:600 14.5px 'Inter',sans-serif;color:var(--ink);background:#fff;font-variant-numeric:tabular-nums}
.drow input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.drow .dname{font-weight:500}
.drow .dmoney,.drow .dpct{position:relative;display:flex;align-items:center}
.drow .dmoney em,.drow .dpct em{position:absolute;color:var(--muted);font-style:normal;font-size:13.5px}
.drow .dmoney em{left:10px}
.drow .dmoney input{padding-left:24px;text-align:right}
.drow .dpct em{right:10px}
.drow .dpct input{padding-right:22px;padding-left:6px;text-align:right}
.daddbtn{margin-top:6px;background:none;border:1px dashed #b9c6de;border-radius:9px;padding:10px 16px;
  font:700 13.5px 'Inter',sans-serif;color:var(--blue);cursor:pointer;width:100%}
.daddbtn:hover{border-color:var(--blue);background:var(--soft)}
@media (max-width:820px){
  .dgrid-h{display:none}
  .drow:not([hidden]){display:grid}
  .drow{grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr);gap:6px;padding-bottom:10px;border-bottom:1px solid #f1f4fa}
  .drow .dname{grid-column:1/-1;margin-bottom:2px}
  .drow input{height:46px;font-size:16px}
}

/* a third composition segment (paycheck: take-home / tax / deductions) */
.csplit-bar .s3{background:#f0b429}
.csplit-key .k3::before{background:#f0b429}
/* a fourth segment — budget splits needs / wants / savings / unallocated */
.csplit-bar .s4{background:#cfd7e6}
.csplit-key .k4::before{background:#cfd7e6}