/* Overpayment calculator (calculator/index.html). Loads after assets/site.css and uses its tokens.
   Thin rules and small radii, no pill shapes, no offset shadows. Inputs are 16px or larger so phones do not zoom on focus. */

section.calcsec { padding-block:48px 72px; }
.calcgrid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:start; }
.calcgrid > * { min-width:0; }
.calcsec h2 { font-size:clamp(26px, 3.2vw, 34px); margin-bottom:16px; }
.calcsec .hint { font-size:15px; line-height:1.5; color:var(--muted); margin-top:8px; }
.calcsec .hint a { color:var(--green); text-underline-offset:3px; }

.panel { border:1px solid var(--line); border-radius:12px; background:var(--white); padding:22px; margin:0; min-width:0; }
fieldset.panel { display:block; }
#mcas { margin-top:22px; }
.panel + .panel { margin-top:22px; }
.mhead { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.mhead h3 { font-size:20px; }

.lab { display:block; font:600 12px/1.2 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.grid2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }

.field { display:flex; align-items:stretch; border:1px solid var(--line-2); border-radius:8px; background:var(--white); overflow:hidden; transition:border-color .15s, box-shadow .15s; }
.field:focus-within { border-color:var(--green); box-shadow:0 0 0 3px rgba(15,91,75,.15); }
.field input { flex:1 1 auto; min-width:0; width:100%; border:0; background:transparent; color:var(--ink); font:500 18px/1.2 var(--body); font-variant-numeric:tabular-nums; padding:13px 12px; border-radius:0; }
.field input:focus { outline:none; }
.field input::placeholder { color:#A9AAAE; }
.field .pre, .field .suf { display:grid; place-items:center; padding-inline:12px; font:500 17px var(--body); color:var(--muted); background:var(--paper); }
.field .pre { border-right:1px solid var(--line); }
.field .suf { border-left:1px solid var(--line); }

.freq { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin-top:16px; }
.freq .fopt { position:relative; display:block; cursor:pointer; }
.freq .fopt input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.freq .fopt span { display:block; text-align:center; padding:12px 8px; border:1px solid var(--line-2); border-radius:8px; background:var(--white); font:600 14.5px/1.25 var(--body); transition:border-color .15s, background .15s; }
.freq .fopt input:checked + span { background:var(--green-t); border-color:var(--green); color:var(--green-2); box-shadow:inset 0 0 0 1px var(--green); }
.freq .fopt input:focus-visible + span { outline:2px solid var(--green); outline-offset:2px; }
.freq .fopt:hover span { border-color:var(--ink); }

.rm { font:600 13.5px/1 var(--body); padding:8px 11px; border:1px solid var(--line-2); border-radius:6px; background:var(--white); color:var(--ink); cursor:pointer; }
.rm:hover { border-color:var(--red); color:var(--red); }

.actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:22px; }
.btn.sm { padding:13px 18px; font-size:15px; cursor:pointer; }
.btn.wide { width:100%; justify-content:center; margin-top:22px; background:var(--white); color:var(--ink); border:1px dashed var(--line-2); }
.btn.wide:hover { border-color:var(--ink); background:var(--white); }
.btn.sm:disabled { opacity:.45; cursor:not-allowed; }
.btn.plain { background:var(--white); color:var(--ink); border-color:var(--line-2); }
.btn.plain:hover { border-color:var(--ink); background:var(--white); }

#out > * + * { margin-top:18px; }
#out .callout { font-size:16px; line-height:1.55; }
#out .callout a { color:var(--green); text-underline-offset:3px; }
#out .math { font-size:14.5px; }
#out .math .r { padding:11px 16px; }
#out .math .r span:first-child { min-width:0; }
#out .math .h { padding:13px 16px; }
.empty { border:1px dashed var(--line-2); border-radius:12px; padding:28px 22px; background:var(--white); }
.empty b { display:block; font:600 18px var(--body); margin-bottom:6px; }
.empty p { color:var(--muted); font-size:16px; line-height:1.55; }

.calcnotes { margin-top:56px; max-width:760px; }
.calcnotes h3 { font-size:21px; margin-bottom:10px; }
.calcnotes p, .calcnotes li { font-size:16px; line-height:1.65; color:var(--muted); }
.calcnotes ul { padding-left:20px; margin:0; }
.calcnotes li + li { margin-top:6px; }
.calcnotes a { color:var(--green); text-underline-offset:3px; }
.calcsec .cta-box { margin-top:48px; }

@media (max-width:900px) {
  .calcgrid { grid-template-columns:minmax(0,1fr); gap:32px; }
  section.calcsec { padding-block:36px 56px; }
}
@media (max-width:520px) {
  .panel { padding:16px; }
  .grid2 { grid-template-columns:minmax(0,1fr); gap:12px; }
  .calcsec .cta-box .btn { justify-self:stretch; justify-content:center; text-align:center; line-height:1.3; }
  .actions .btn { flex:1 1 100%; justify-content:center; }
  #out .math { font-size:14px; }
}

/* ---- calculators hub: tool switcher, example label, read box, bar, worksheet, long-form copy */
.toolnav { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-bottom:32px; padding-bottom:14px; border-bottom:1px solid var(--line); font:500 15.5px/1.3 var(--body); }
.toolnav a { color:var(--muted); text-decoration:none; padding:4px 0; }
.toolnav a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.toolnav a[aria-current="page"] { color:var(--green); font-weight:600; border-bottom:2px solid var(--green); }
.toolnav .sep { color:var(--faint); }
.fgroup + .fgroup { margin-top:18px; }
.fgroup .hint { margin-top:6px; font-size:14.5px; }
.fgroup > .lab { margin-bottom:7px; }
.exlabel { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:10px 14px; background:var(--amber-t); border:1px solid var(--line); border-left:3px solid var(--ink); border-radius:8px; font-size:15px; }
.exlabel b { font:600 12px var(--body); letter-spacing:.08em; text-transform:uppercase; }
.exlabel span { color:var(--ink-2); }
.exlabel.mine { background:var(--green-t); border-left-color:var(--green); }
.extext { font-size:14.5px; color:var(--muted); margin-top:10px; }
#out .extext + * { margin-top:14px; }
.readbox { margin-top:28px; border:1px solid var(--line); border-radius:12px; background:var(--white); padding:20px 22px; }
.readbox h3 { font-size:19px; margin-bottom:10px; }
.readbox ul { margin:0; padding-left:20px; font-size:15.5px; line-height:1.55; color:var(--muted); }
.readbox li + li { margin-top:6px; }
.readbox b { color:var(--ink); }
.toolcopy { margin-top:56px; display:grid; gap:36px; max-width:760px; }
.toolcopy .calcnotes { margin-top:0; }
.calcnotes p + p { margin-top:12px; }
.relguides h3 { font-size:21px; margin-bottom:10px; }
.relguides ul { margin:0; padding-left:20px; }
.relguides li { font-size:16px; line-height:1.65; }
.relguides a { color:var(--green); text-underline-offset:3px; }
.worksheet { margin-top:22px; }
.worksheet summary { cursor:pointer; font:600 15.5px var(--body); padding:4px 0 12px; }
.wout { margin:18px 0 14px; font-size:17px; }
.barwrap { margin-top:18px; border:1px solid var(--line); border-radius:10px; background:var(--white); padding:16px; }
.barlab { font:600 12px var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.bar { display:flex; height:30px; border:1px solid var(--line-2); border-radius:4px; overflow:hidden; background:var(--white); }
.bar i { display:block; height:100%; border-right:1px solid var(--white); }
.bar i.rest { background:var(--paper-2); border-right:0; }
.legend { list-style:none; margin:14px 0 0; padding:0; font-size:15px; }
.legend li { display:flex; align-items:center; gap:10px; padding:6px 0; border-top:1px solid var(--line); }
.legend li:first-child { border-top:0; }
.legend li span:nth-child(2) { flex:1 1 auto; min-width:0; }
.legend .sw { width:14px; height:14px; border-radius:2px; flex:none; }
.legend .sw.rest { background:var(--paper-2); border:1px solid var(--line-2); }
.legend b { font-variant-numeric:tabular-nums; }
@media (max-width:520px) {
  .toolnav { font-size:15px; gap:4px 8px; }
  #out .math .r span:first-child { flex:1 1 55%; }
}