/* Page styles for calculator.html (block 2).
   Moved out of an inline <style> tag on 20 Aug 2026 so the CSP no longer needs
   style-src 'unsafe-inline'. Contents unchanged; the <link> replaces the <style>
   at exactly the same point in the document, so the cascade order is identical. */

/* ---- Calculator contrast lock ----------------------------------------
     This page's own <style> block was written for a dark section, but the
     calculators sit in .panel-light (white). site-theme.css patches that
     case rule by rule, which leaves the page one missed selector away from
     white-on-white. This block loads AFTER site-theme.css and states the
     light-panel colours outright, so every calculator reads correctly no
     matter what else changes upstream. All pairs clear WCAG AA. */
  .panel-light .calc-panel,
  .panel-light .calc-panel p,
  .panel-light .calc-panel label,
  .panel-light .calc-panel span,
  .panel-light .calc-panel strong { color: rgba(23,21,44,0.86); }

  .panel-light .calc-panel h2,
  .panel-light .calc-panel h3 { color: #17152c; }

  .panel-light .calc-field label { color: rgba(23,21,44,0.62); }
  .panel-light .calc-field .inp { background: #ffffff; border-color: rgba(23,21,44,0.28); }
  .panel-light .calc-field .inp .pre { color: rgba(23,21,44,0.60); }
  .panel-light .calc-field input,
  .panel-light .calc-field select { color: #17152c; background: transparent; }
  .panel-light .calc-field select option { color: #17152c; background: #ffffff; }

  .panel-light .calc-check { background: rgba(23,21,44,0.04); border-color: rgba(23,21,44,0.16); }
  .panel-light .calc-check,
  .panel-light .calc-check span { color: rgba(23,21,44,0.86); }

  /* The result box is the one deliberately dark surface here. */
  .panel-light .calc-result { background: #17152c !important; }
  .panel-light .calc-result,
  .panel-light .calc-result span,
  .panel-light .calc-result p { color: #ffffff !important; }
  .panel-light .calc-result .res b { color: #ffb3cd !important; }
  .panel-light .calc-result .res span { color: rgba(255,255,255,0.78) !important; }

  .panel-light .assump,
  .panel-light .assump span { color: rgba(23,21,44,0.70); }
  .panel-light .assump strong { color: #17152c; }
  .panel-light .calc-panel .lede { color: rgba(23,21,44,0.80); }

  /* Safety net. The IHT and mortgage panels were once left outside the
     .panel-light section by a stray </section>, which gave them the dark-theme
     white text on a light background — invisible. The structure is fixed, but
     these unscoped rules mean a panel that ever slips out again still reads. */
  .calc-panel h2 { color: #17152c; }
  .calc-panel .lede,
  .calc-panel .calc-field label,
  .calc-panel .calc-check,
  .calc-panel .calc-check span,
  .calc-panel .assump { color: rgba(23,21,44,0.80); }
  .calc-panel .calc-field .inp { background: #ffffff; border-color: rgba(23,21,44,0.28); }
  .calc-panel .calc-field .inp .pre { color: rgba(23,21,44,0.60); }
  .calc-panel .calc-field input,
  .calc-panel .calc-field select { color: #17152c; }
  .calc-panel .assump strong { color: #17152c; }
  .calc-panel .calc-result { background: #17152c; }
  .calc-panel .calc-result .res b { color: #ffb3cd; }
  .calc-panel .calc-result .res span { color: rgba(255,255,255,0.78); }