/* pfos-public-calc.v1.css — the PFOS calculator look for the public SEO pages.
   Rules are the app's own (pfos-main), scoped under .pc-calc so they can never restyle the page
   around the calculator. The landing stylesheet carries a legacy reset that zeroes padding and
   margin on any [class*="row"]; the .pc-calc scope outranks it, which is why .row repeats its
   spacing with !important. Cache-immutable: ship v2 to change it. */

.pc-calc{
  --fh:Optima,Candara,system-ui,sans-serif; --fb:Palatino,Constantia,Georgia,serif; --fd:Didot,Cambria,Georgia,serif;
  --mu:#C1CEC8; --mu-dim:#A9BDB2; --wh:#F4EADE; --gr:#5FE390; --rd:#F9BCBC; --yl:#F8C425; --or:#E3C888;
  --gold-ink:#E4C87A; --bg-card:rgba(11,48,38,.46); --bd:rgba(198,155,60,0.18); --bg-in:rgba(198,155,60,0.07);
  --wh-a4:rgba(244,234,222,.45); --bll:#C69B3C;
  text-align:left; color:var(--wh); font-family:var(--fb);
  max-width:980px; margin:0 auto; padding:clamp(18px,3vw,32px);
  /* the app's card surface (pfos-client 'Card surfaces'): translucent over the canvas, not a dark slab */
  background:rgba(11,48,38,.46); border:1px solid rgba(198,155,60,.22); border-radius:6px;
}
html:root[data-theme="light"] .pc-calc{
  --mu:#3E4741; --mu-dim:#4A5B54; --wh:#0A1C17; --gr:#0B4F25; --rd:#871717; --yl:#5D3F02; --or:#5B3F05;
  --gold-ink:#6E5219; --bg-card:rgba(1,96,85,.10); --bd:rgba(198,155,60,0.22); --bg-in:rgba(198,155,60,.12);
  --wh-a4:#4A5B54; --bll:#80601F;
  background:rgba(1,96,85,.17); border-color:rgba(138,106,36,.26);
}
.pc-calc *{box-sizing:border-box}
.pc-calc #insCalcContent{min-height:220px}

/* ── the app's calculator rules (pfos-main), scoped ── */
.pc-calc .row{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin:0 0 10px!important;padding:0!important;width:auto!important;max-width:none!important;background:transparent!important}
@media (min-width:500px){.pc-calc .row{grid-template-columns:1fr 1fr!important}}
@media (max-width:500px){.pc-calc .row{gap:8px!important}}
.pc-calc .fi{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
@media (max-width:500px){.pc-calc .fi{gap:6px;margin-bottom:10px}}
.pc-calc .lb{font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--wh-a4)}
.pc-calc .inp,.pc-calc .sel{background:var(--bg-in);border:1px solid var(--bd);color:var(--wh);font-family:var(--fb);font-size:15px;padding:11px 13px;outline:none;transition:border-color .2s;width:100%;border-radius:2px;min-height:48px}
.pc-calc .inp:focus,.pc-calc .sel:focus{border-color:#C69B3C;box-shadow:0 0 0 2px rgba(198,155,60,.1)}
.pc-calc .inp[aria-invalid="true"],.pc-calc .sel[aria-invalid="true"]{border-color:#E5484D;box-shadow:0 0 0 2px rgba(229,72,77,.12)}
.pc-calc .sel{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23C69B3C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.pc-calc .sel option{background:#05130F;color:#F4EADE}
html:root[data-theme="light"] .pc-calc .sel option{background:#F6EFE1;color:#0A1C17}
.pc-calc .inp-prefix{position:relative}
.pc-calc .inp-prefix .pfx{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--bll);font-family:var(--fh);font-size:14px;font-weight:700;pointer-events:none}
.pc-calc .inp-prefix .inp{padding-left:24px}
.pc-calc input[type="range"]{width:100%;accent-color:#C69B3C}
.pc-calc .dp-val{font-family:var(--fd);font-size:24px;color:#C69B3C}
html:root[data-theme="light"] .pc-calc .dp-val{color:#6E5219}
.pc-calc .dp-lbl{font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mu);margin-top:3px}
.pc-calc .dp-stat{background:var(--bg-card);border:1px solid var(--bd);border-radius:2px;padding:11px;text-align:center}

/* ── public-only: the app's "My Scenario / Someone Else" switch has no "My Scenario" here (no
   profile), so the switch is hidden; the app's own mini-profile panel and Reset stay. ── */
.pc-calc #_csHeader > div:first-child{display:none!important}
.pc-calc #_csHeader{justify-content:flex-end!important}

/* ── the calculator picker (hub) ── */
.pc-pick{max-width:980px;margin:0 auto 18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;text-align:left}
.pc-pick label{font-family:Optima,Candara,system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pc-pick select{flex:1 1 320px;min-width:0;max-width:100%;min-height:52px;padding:12px 40px 12px 14px;font-family:Palatino,Constantia,Georgia,serif;font-size:17px;color:var(--white);
  background:rgba(10,31,24,.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23C69B3C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1px solid rgba(198,155,60,.45);border-radius:4px;appearance:none;cursor:pointer}
html:root[data-theme="light"] .pc-pick select{background-color:#FFFFFF;color:#0A1C17}
.pc-pick select option{background:#05130F;color:#F4EADE}
html:root[data-theme="light"] .pc-pick select option{background:#FFFFFF;color:#0A1C17}
.pc-pick .pc-open{font-family:Optima,Candara,system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bll);text-decoration:none;white-space:nowrap}
.pc-intro{max-width:980px;margin:0 auto 14px;text-align:left;font-size:15px;line-height:1.6;color:var(--muted)}
.pc-next{max-width:980px;margin:18px auto 0;padding:18px 22px;text-align:left;border:1px solid rgba(198,155,60,.28);border-radius:6px;background:rgba(198,155,60,.06)}
.pc-next h3{font-family:var(--fh);font-size:20px;margin:0 0 6px;color:var(--white)}
.pc-next p{margin:0 0 14px;font-size:15px;line-height:1.6;color:var(--muted)}
.pc-note{max-width:980px;margin:12px auto 0;font-size:13px;line-height:1.6;color:var(--muted);text-align:left}

/* ── phones: the app lays its result tiles out four (or three) across with inline grids and
   relies on its modal scrolling sideways; here they reflow instead ── */
.pc-calc [style*="display:grid"] > *{min-width:0}
@media (max-width:640px){
  .pc-calc [style*="repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  .pc-calc [style*="repeat(3,1fr)"]{grid-template-columns:1fr!important}
  .pc-calc [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  .pc-calc .dp-val{font-size:20px}
  .pc-calc{padding:16px}
}

/* ── Debt Payoff Optimizer (condensed) under Debt-Free Date ── */
#pcExtra{margin-top:26px;padding-top:24px;border-top:1px solid var(--bd)}
.pc-dc-head{margin-bottom:16px}
.pc-dc-eyebrow{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--bll)}
.pc-dc-title{font-family:var(--fh);font-size:20px;font-weight:700;color:var(--wh);margin:6px 0 6px;text-wrap:balance}
.pc-dc-sub{font-size:15px;color:var(--mu);line-height:1.6;margin:0;max-width:65ch}
.pc-dc-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.7fr) minmax(0,1fr) 40px;gap:10px;align-items:end;margin-bottom:6px}
.pc-dc-row .fi{margin-bottom:0}
.pc-dc-row + .pc-dc-row{margin-top:8px}
.pc-dc-del{height:48px;border:1px solid var(--bd);background:transparent;color:var(--mu);font-size:20px;border-radius:2px;cursor:pointer}
.pc-dc-del:hover:not(:disabled){color:var(--wh);border-color:var(--bll)}
.pc-dc-del:disabled{opacity:.35;cursor:default}
.pc-dc-actions{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px;margin:12px 0 18px}
.pc-dc-add{min-height:44px;padding:10px 16px;border:1px dashed var(--bd);background:transparent;color:var(--bll);font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:2px;cursor:pointer}
.pc-dc-add:disabled{opacity:.4;cursor:default}
.pc-dc-extra{flex:0 1 240px;margin-bottom:0}
.pc-dc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pc-dc-card{background:var(--bg-card);border:1px solid var(--bd);border-radius:4px;padding:16px;display:flex;flex-direction:column;gap:6px}
.pc-dc-name{font-family:var(--fh);font-size:16px;font-weight:700;color:var(--wh)}
.pc-dc-how{font-size:13px;color:var(--mu)}
.pc-dc-tags{display:flex;flex-wrap:wrap;gap:6px}
.pc-dc-tag{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gr);border:1px solid currentColor;border-radius:99px;padding:1px 8px}
.pc-dc-big{font-family:var(--fd);font-size:28px;color:var(--wh);line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums}
.pc-dc-date{font-size:14px;color:var(--mu)}
.pc-dc-line{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--mu);border-top:1px solid var(--bd);padding-top:6px;font-variant-numeric:tabular-nums}
.pc-dc-line strong{color:var(--wh)}
.pc-dc-good{color:var(--gr)!important}
.pc-dc-olabel{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mu);margin-top:6px}
.pc-dc-order ol{margin:4px 0 0;padding-left:20px;font-size:14px;color:var(--wh);line-height:1.7}
.pc-dc-wm{color:var(--mu);font-size:13px;white-space:nowrap}
.pc-dc-na,.pc-dc-note{font-size:14px;color:var(--mu);line-height:1.6;margin:4px 0 0}
.pc-dc-base{font-size:14px;color:var(--mu);margin:14px 0 0}
.pc-dc-more{font-size:14px;color:var(--mu);line-height:1.6;margin:16px 0 0;padding:12px 14px;border:1px solid var(--bd);border-radius:4px}
@media(max-width:820px){.pc-dc-cards{grid-template-columns:1fr}}
/* desktop: the column labels show on the first row only (every field keeps its label for screen readers) */
@media(min-width:641px){.pc-dc-row + .pc-dc-row .lb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* phone: name across the top, then balance + rate, then minimum + remove */
@media(max-width:640px){.pc-dc-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-bottom:12px;border-bottom:1px solid var(--bd);margin-bottom:12px}.pc-dc-row .fi:first-child{grid-column:1 / -1}.pc-dc-del{grid-column:2;justify-self:end;width:48px}}

/* ── calculators page: a chosen calculator gets the screen; the grid and page header step aside ── */
body.pc-screen-open .hero{display:none}
.pc-screen-bar{max-width:980px;margin:0 auto 14px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.pc-back,.pc-screen-bar .pc-open{font-family:Optima,Candara,system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bll);text-decoration:none;white-space:nowrap;padding:8px 0}
.pc-back:hover,.pc-screen-bar .pc-open:hover{text-decoration:underline}
.pc-back:focus-visible,.pc-screen-bar .pc-open:focus-visible{outline:2px solid var(--bll);outline-offset:3px}
#insCalcTitle:focus{outline:none}

/* a long single-word tile label ("Interest/Principal") must wrap rather than widen a phone screen */
.pc-calc .dp-lbl{overflow-wrap:anywhere}

/* consolidation loan offer + the one-line comparison */
.pc-dc-offer{margin:4px 0 18px;padding:14px 16px;border:1px solid var(--bd);border-radius:4px;background:var(--bg-in)}
.pc-dc-offer-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px}
.pc-dc-offer-row .fi{margin-bottom:0}
.pc-dc-hint{font-size:13px;color:var(--mu);margin:8px 0 0}
.pc-dc-card--con{border-color:rgba(198,155,60,.38)}
.pc-dc-verdict{font-family:var(--fh);font-size:16px;font-weight:700;color:var(--wh);margin:16px 0 0}
@media(max-width:640px){.pc-dc-offer-row{grid-template-columns:1fr 1fr}.pc-dc-offer-row .fi:last-child{grid-column:1 / -1}}