/* Retirement calculator - extra styles, loaded only on that page.
   Colors and fonts come from the :root block in styles.css. */
.calc{--mute:#4A4A44;--field:#8C8672}
.calc [hidden]{display:none!important}
.calc-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:24px;align-items:start}
.calc-results{display:flex;flex-direction:column;gap:24px}
.calc-panel{background:var(--white);border:1px solid var(--rule);border-radius:10px;padding:24px}
.calc fieldset{border:0;margin:0 0 20px;padding:0;min-width:0}
.calc fieldset:last-child{margin-bottom:0}
.calc legend{font-family:var(--font-head);font-optical-sizing:none;font-size:19px;font-weight:600;color:var(--ink);padding:0;margin-bottom:12px}
.calc label{display:block;font-size:15px;line-height:1.4;color:var(--mute);margin-bottom:14px}
.calc input[type=number],.calc select{display:block;width:100%;margin-top:4px;padding:10px 12px;font:inherit;font-size:16px;color:var(--charcoal);background:var(--paper);border:1px solid var(--field);border-radius:6px}
.calc input:focus-visible,.calc select:focus-visible{outline:3px solid var(--brass);outline-offset:1px}
.calc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calc-row>label{display:flex;flex-direction:column;gap:3px}
.calc-row>label input,.calc-row>label select{margin-top:auto}
.calc label.chk{display:flex;flex-direction:row;gap:10px;align-items:center}
.calc label.chk input{width:18px;height:18px;margin:0}
.calc-hint{display:block;font-size:13px;line-height:1.4;color:var(--mute);margin-top:4px}
.calc-big{font-family:var(--font-head);font-optical-sizing:none;font-size:48px;font-weight:600;line-height:1.1;color:var(--brass-deep);font-variant-numeric:tabular-nums}
.calc-hero p{margin:6px 0 0;color:var(--mute);font-size:16px;line-height:1.5}
.calc-hero{margin-bottom:20px}
.calc-test{margin-top:16px!important;padding-top:16px;border-top:1px solid var(--rule);color:var(--charcoal)!important;font-size:16px!important}
.calc-test .lbl{color:var(--mute)}
.calc dl{display:grid;grid-template-columns:1fr auto;gap:10px 20px;margin:0;font-size:15px}
.calc dt{color:var(--mute)}
.calc dd{margin:0;text-align:right;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.calc dt,.calc dd{white-space:nowrap}
.calc-chart{overflow-x:auto}
.calc-chart strong{font-family:var(--font-head);font-optical-sizing:none;font-size:19px;color:var(--ink)}
.calc-chart svg{display:block;width:100%;min-width:420px;height:auto;margin-top:12px}
.calc-note{font-size:14px;line-height:1.65;color:var(--mute);max-width:80ch}
@media (max-width:900px){
  .calc-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .calc-panel{padding:18px 14px}
  .calc-big{font-size:38px}
  .calc dl{gap:8px 10px;font-size:14px}
  .calc dt{white-space:normal}
}