/* Calculator pages in The Pensions Report style (21.10.26), matching the new Welcome, About and FAQs pages.
   Loaded straight after calc-cmp3.css on every calculator that uses <body class="cmp3-calc">, and only
   restyles: no id, input or calculation is touched. Remove the one <link> line to roll back. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;700;800&family=IBM+Plex+Mono:wght@500&display=swap");

body.cmp3-calc {
  --pr-surface-100: #f6f4f0; --pr-surface-200: #ece7df; --pr-ink: #373839; --pr-ink-muted: #5f6162;
  --pr-teal: #056a6d; --pr-teal-bright: #0b7f82; --pr-coral: #fb785f; --pr-on-brand: #f6f4f0; --pr-line: #d8d2c8;
  --pr-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--pr-surface-100) !important;
}

/* Page: warm off-white instead of the grey gradient */
body.cmp3-calc section.custom-gradient-bg { background: var(--pr-surface-100) !important; color: var(--pr-ink); }
body.cmp3-calc section.custom-gradient-bg :is(p, li, small, .form-text) { color: var(--pr-ink); }
body.cmp3-calc section.custom-gradient-bg h3 {
  color: var(--pr-ink) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1;
}

/* Cards: flat panels with a teal strip on top, square corners, no shadow */
body.cmp3-calc section.custom-gradient-bg [class*="col-"]:has(h3):not(:has([class*="col-"] h3))::before {
  background: var(--pr-surface-200); border-radius: 4px; box-shadow: none; border-top: 8px solid var(--pr-teal);
}
body.cmp3-calc section.custom-gradient-bg [class*="col-"]:has(h3):not(:has([class*="col-"] h3)) { padding-top: 34px !important; }
body.cmp3-calc section.custom-gradient-bg [class*="col-"]:has(h3):not(:has([class*="col-"] h3)) h3 {
  color: var(--pr-ink) !important; font-size: 26px !important; font-weight: 800 !important; line-height: 1 !important;
}
body.cmp3-calc section.custom-gradient-bg [class*="col-"]:has(h3):not(:has([class*="col-"] h3)) h3:not(:first-child) {
  border-top: 2px solid var(--pr-ink);
}
body.cmp3-calc section.custom-gradient-bg [class*="col-"]:has(h3):not(:has([class*="col-"] h3)) :is(p, li, small, .form-text) {
  color: var(--pr-ink); font-size: 16px; line-height: 1.6;
}
body.cmp3-calc section.custom-gradient-bg [class*="col-"]:has(h3):not(:has([class*="col-"] h3)) :is(label, strong, b, .form-label, .form-check-label, .result-label) {
  color: var(--pr-ink) !important; font-size: 15px;
}
body.cmp3-calc section.custom-gradient-bg [class*="col-"]:has(h3):not(:has([class*="col-"] h3)) :is(.text-white, .text-light) { color: var(--pr-ink) !important; }
body.cmp3-calc section.custom-gradient-bg a:not(.btn),
body.cmp3-calc section.custom-gradient-bg [class*="col-"]:has(h3):not(:has([class*="col-"] h3)) a:not(.btn) {
  color: var(--pr-teal) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}

/* Inputs */
body.cmp3-calc section.custom-gradient-bg .form-control,
body.cmp3-calc section.custom-gradient-bg .form-select {
  font-family: inherit; color: var(--pr-ink) !important; background: var(--pr-surface-100) !important;
  border: 1px solid var(--pr-line) !important; border-radius: 2px;
}
body.cmp3-calc section.custom-gradient-bg :is(.form-control, .form-select):focus {
  border-color: var(--pr-teal) !important; box-shadow: 0 0 0 2px var(--pr-teal) !important; outline: none;
}
body.cmp3-calc section.custom-gradient-bg output.form-control,
body.cmp3-calc section.custom-gradient-bg .result-output {
  color: var(--pr-teal) !important; font-family: var(--pr-mono); font-weight: 500 !important; font-variant-numeric: tabular-nums;
}
body.cmp3-calc section.custom-gradient-bg .result-output {
  background: var(--pr-surface-100); border: 1px solid var(--pr-line); border-radius: 2px;
}
body.cmp3-calc section.custom-gradient-bg .input-group-text {
  background: var(--pr-surface-200) !important; border: 1px solid var(--pr-line) !important; color: var(--pr-ink-muted) !important; border-radius: 2px;
}
body.cmp3-calc section.custom-gradient-bg .form-check-input { border-color: #a9a399; }
body.cmp3-calc section.custom-gradient-bg .form-check-input:checked { background-color: var(--pr-teal) !important; border-color: var(--pr-teal) !important; }
body.cmp3-calc section.custom-gradient-bg .form-check-input:focus { box-shadow: 0 0 0 2px rgba(5, 106, 109, 0.35); border-color: var(--pr-teal); }
body.cmp3-calc section.custom-gradient-bg .form-range { accent-color: var(--pr-teal); }
body.cmp3-calc section.custom-gradient-bg .form-range::-webkit-slider-thumb { background: var(--pr-teal); }
body.cmp3-calc section.custom-gradient-bg .form-range::-moz-range-thumb { background: var(--pr-teal); }
body.cmp3-calc section.custom-gradient-bg .form-range::-webkit-slider-runnable-track { background: var(--pr-line); }
body.cmp3-calc section.custom-gradient-bg .form-range::-moz-range-track { background: var(--pr-line); }
body.cmp3-calc section.custom-gradient-bg .form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(5, 106, 109, 0.35); }
body.cmp3-calc section.custom-gradient-bg .custom-circle-button {
  border-radius: 2px !important; background: var(--pr-surface-100) !important; border: 1px solid var(--pr-line) !important; color: var(--pr-ink) !important;
}
body.cmp3-calc section.custom-gradient-bg .custom-circle-button:hover { background: var(--pr-teal) !important; border-color: var(--pr-teal) !important; color: var(--pr-on-brand) !important; }
body.cmp3-calc section.custom-gradient-bg :is(.bi-info-circle-fill, .bi-info-circle) { color: var(--pr-ink-muted) !important; }

/* Buttons */
body.cmp3-calc section.custom-gradient-bg .btn-primary,
body.cmp3-calc section.custom-gradient-bg .btn-success {
  background: var(--pr-teal) !important; border-color: var(--pr-teal) !important; color: var(--pr-on-brand) !important;
  border-radius: 2px; font-weight: 700;
}
body.cmp3-calc section.custom-gradient-bg :is(.btn-primary, .btn-success):hover { background: var(--pr-ink) !important; border-color: var(--pr-ink) !important; }
body.cmp3-calc section.custom-gradient-bg :is(.btn-outline-primary, .btn-outline-secondary, .btn-secondary):not(.custom-circle-button) {
  border-radius: 2px; border-color: var(--pr-teal); color: var(--pr-teal); background: transparent;
}
body.cmp3-calc section.custom-gradient-bg :is(.btn-outline-primary, .btn-outline-secondary, .btn-secondary):not(.custom-circle-button):hover {
  background: var(--pr-teal); color: var(--pr-on-brand);
}

/* NHS Pension Calculator: higher option in teal, lower in charcoal, total in teal */
body.cmp3-calc #nhsCalcResults .result-row.nhs-calc-total .result-output,
body.cmp3-calc #nhsCalcResults .result-row .result-output.nhs-calc-higher { color: var(--pr-on-brand) !important; background: var(--pr-teal) !important; border-color: var(--pr-teal) !important; }
body.cmp3-calc #nhsCalcResults .result-row .result-output.nhs-calc-lower { color: var(--pr-on-brand) !important; background: var(--pr-ink) !important; border-color: var(--pr-ink) !important; }
body.cmp3-calc #nhsCalcResults .nhs-calc-col-head,
body.cmp3-calc #nhsCalcResults .nhs-calc-col-head strong,
body.cmp3-calc .nhs-calc-group { color: var(--pr-ink-muted) !important; font-size: 12px !important; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700 !important; }
body.cmp3-calc .nhs-calc-info { color: var(--pr-ink-muted) !important; }

/* Calculation Details */
body.cmp3-calc section.custom-gradient-bg pre {
  background: var(--pr-surface-100); border: 1px solid var(--pr-line); border-radius: 4px;
  font-family: var(--pr-mono); font-size: 12.5px !important; color: var(--pr-ink) !important;
}

/* Tables */
body.cmp3-calc section.custom-gradient-bg table { background: var(--pr-surface-100); border-radius: 0; font-variant-numeric: tabular-nums; }
body.cmp3-calc section.custom-gradient-bg table th {
  background: transparent; color: var(--pr-ink-muted); border-bottom: 2px solid var(--pr-ink);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
body.cmp3-calc section.custom-gradient-bg table td { border-color: var(--pr-line); color: var(--pr-ink); }

/* Charts */
body.cmp3-calc section.custom-gradient-bg canvas { background: var(--pr-surface-100); border-radius: 4px; }

/* Inheritance Tax Calculator: its own colour variables, re-pointed at the brand palette */
body.cmp3-calc {
  --bg-card: #f6f4f0; --bg-secondary: #ece7df; --border: #d8d2c8; --border-md: #a9a399;
  --text-primary: #373839; --text-secondary: #5f6162; --text-tertiary: #5f6162;
  --bg-info: #f6f4f0; --text-info: #056a6d; --border-info: #d8d2c8;
  --bg-warn: #fde6df; --text-warn: #373839; --border-warn: #fb785f;
  --green-bg: #dcebea; --green-text: #056a6d; --green-sub: #056a6d;
  --radius-md: 2px; --radius-lg: 4px;
}
body.cmp3-calc .tc-card { border: 0; }
body.cmp3-calc .tc-toggle input:checked + .slider-t { background: var(--pr-teal) !important; border-color: var(--pr-teal) !important; }
body.cmp3-calc .tc-section-label { color: var(--pr-ink-muted) !important; font-weight: 700; letter-spacing: 0.08em; }

/* Carry Forward Calculator: group labels, year headings and highlighted results */
body.cmp3-calc .cf-calc-group { color: var(--pr-ink-muted) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.08em; text-transform: uppercase; }
body.cmp3-calc .cf-calc-year { color: var(--pr-ink) !important; font-weight: 700; border-bottom: 1px solid var(--pr-line) !important; }
body.cmp3-calc .cf-calc-info { color: var(--pr-ink-muted) !important; }
body.cmp3-calc #cfCalcResults .result-row.cf-calc-total .result-output { color: var(--pr-on-brand) !important; background: var(--pr-teal) !important; border-color: var(--pr-teal) !important; border-radius: 2px; }
body.cmp3-calc #cfCalcResults .result-row.cf-calc-charge .result-output { color: var(--pr-ink) !important; background: #fde6df !important; border-color: var(--pr-coral) !important; border-radius: 2px; }
body.cmp3-calc #cfCalcResStatus.cf-calc-warning { color: #9a3a24 !important; }
body.cmp3-calc [id^="cfCalc"][id$="Output"][contenteditable="true"]:focus { outline: 2px solid var(--pr-teal); }

/* Result boxes sit flat on the card */
body.cmp3-calc section.custom-gradient-bg :is(.result-output, output.form-control) { box-shadow: none !important; }

/* Chart panels (Annuity Rate Calibration, NI Top-Up): a clean off-white panel with a hairline edge,
   the chart drawn straight onto it rather than on a separate box */
body.cmp3-calc section.custom-gradient-bg .container.bg-light:has(canvas) {
  background: var(--pr-surface-100) !important; border: 1px solid var(--pr-line); border-radius: 4px !important;
  padding: 20px 20px 16px !important;
}
body.cmp3-calc section.custom-gradient-bg .container.bg-light:has(canvas) canvas { background: transparent; border-radius: 0; }
body.cmp3-calc section.custom-gradient-bg .container.bg-light:has(canvas) > p:first-child {
  color: var(--pr-ink-muted) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.08em !important;
}
body.cmp3-calc section.custom-gradient-bg .container.bg-light:has(canvas) span[style*="font-size: 12px"] { color: var(--pr-ink) !important; font-size: 13px !important; }

/* Split bars under the results (Inheritance Tax and Income Tax & NI): brand colours */
body.cmp3-calc #bar-legacy, body.cmp3-calc #bar-net { background: var(--pr-teal) !important; }
body.cmp3-calc #bar-iht, body.cmp3-calc #bar-tax { background: var(--pr-coral) !important; }
body.cmp3-calc #bar-outside, body.cmp3-calc #bar-ni { background: var(--pr-ink) !important; }
body.cmp3-calc .bar-legend .legend-item:nth-child(1) .legend-dot { background: var(--pr-teal) !important; }
body.cmp3-calc .bar-legend .legend-item:nth-child(2) .legend-dot { background: var(--pr-coral) !important; }
body.cmp3-calc .bar-legend .legend-item:nth-child(3) .legend-dot { background: var(--pr-ink) !important; }
body.cmp3-calc .bar-track { border-radius: 0; }
body.cmp3-calc .bar-seg, body.cmp3-calc .legend-dot { border-radius: 0 !important; }

/* Income Tax & NI Calculator: its input and summary boxes stand on the page as panels
   (on Inheritance Tax the same boxes sit inside a card, so they stay off-white there) */
body.cmp3-calc .tc-sticky:not(:has(h3)) .tc-card {
  background: var(--pr-surface-200); border: 0; border-top: 8px solid var(--pr-teal); border-radius: 4px;
}
body.cmp3-calc .tc-sticky:not(:has(h3)) .tc-card .metric:not(.warn):not(.accent) { background: var(--pr-surface-100); }
body.cmp3-calc .tc-sticky:not(:has(h3)) .tc-card .tc-field :is(input, select) { background: var(--pr-surface-100); }

/* No pink (21.10.26): tax, IHT and charge figures sit on off-white, marked by a coral strip instead */
body.cmp3-calc { --bg-warn: var(--pr-surface-100); --border-warn: var(--pr-coral); --text-warn: var(--pr-ink); }
body.cmp3-calc .metric.warn { background: var(--pr-surface-100) !important; box-shadow: inset 0 4px 0 var(--pr-coral); }
body.cmp3-calc .tc-card .metric.warn { border-radius: 0 0 4px 4px; }
body.cmp3-calc .warn-box { background: var(--pr-surface-100) !important; border: 1px solid var(--pr-line) !important; box-shadow: inset 0 4px 0 var(--pr-coral); color: var(--pr-ink) !important; }
body.cmp3-calc #cfCalcResults .result-row.cf-calc-charge .result-output {
  background: var(--pr-surface-100) !important; color: var(--pr-ink) !important; border: 2px solid var(--pr-coral) !important;
}