/*
 * Calculator-page styling. Inherits the site's bootstrap chrome (header, footer, container) from
 * _Layout.cshtml; this file only carries the calc-specific layout: sticky-left inputs panel,
 * results table, breakdown bar, explanation prose, FAQ, citations footer.
 *
 * Mobile (≤ 768 px) collapses the two-column body into a single stack with non-sticky inputs.
 * Visual continuity with the main app comes from sharing #app-bs's typography and brand colours;
 * we keep this stylesheet free of font-family / colour overrides so a future theme change to
 * the main app propagates here automatically.
 */

.calc-page {
    margin: 18px;
}

/* Sledgehammer text-size reset for the calc page: every text-bearing descendant gets 1.35rem,
   no exceptions. This beats Bootstrap's per-element defaults (h2/h3/dl/dd/li/etc.) and any
   stray rule in app.css. THREE font-size opt-outs follow below (the page H1, the
   result-headline figure and .calc-section-title); the block at their head enumerates them.
   Anything else that needs a different size has to override after this rule and use a more
   specific selector. */
.calc-page,
.calc-page p,
.calc-page span,
.calc-page label,
.calc-page input,
.calc-page select,
.calc-page button,
.calc-page a,
.calc-page strong,
.calc-page em,
.calc-page b,
.calc-page i,
.calc-page td,
.calc-page th,
.calc-page li,
.calc-page dt,
.calc-page dd,
.calc-page h2,
.calc-page h3,
.calc-page h4,
.calc-page h5,
.calc-page h6 {
    font-size: 1.35rem;
}

/* Three font-size opt-outs:
     - the page H1 (the calculator's title)
     - the result-headline figure (the answer headline, currently unused since pills replaced it)
     - .calc-section-title (Information / FAQ / Sources headers - bigger than the body so each
       section is visually distinct from its mini-headings inside).
   Everything else under .calc-page stays at 1.35rem. */
.calc-page h1 {
    font-size: 2.3rem;
}

.calc-page .calc-result-headline {
    font-size: 2.6rem;
}

.calc-page .calc-section-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #000000;
    margin: 30px 0;
    /* Flex-center so the leading section icon sits to the left of the title text while the
       whole pair remains horizontally centred in its column. Spacing comes from the icon's
       own margin-right, not a flex `gap`, so the icon's hit-box stays predictable. */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Section-heading icon. Fixed 35×35 pixels, matched-weight black to keep parity with the
   title text. SVGs are 512×512 black-fill, sized via width/height here. */
.calc-section-icon {
    width: 35px;
    height: 35px;
    margin-right: 15px;
    flex-shrink: 0;
}

/* Anchors stand out from body text - slightly larger so the link text reads as an affordance
   even without underline. Underline is hover-only across the calc surface to keep prose calm;
   the offset detaches the line from glyph descenders so it reads as an affordance rather than
   text decoration. Same pattern as the breadcrumb / source citations / region pills / share
   button - applies to inline cross-links in the Explanation prose and FAQ Q/A.
   `:not(.btn)` excludes anchors carrying Bootstrap's button classes (the handoff CTA) - those
   need their own white-on-blue palette which our default would clobber via specificity. */
.calc-page a:not(.btn) {
    font-size: 1.5rem;
    color: var(--color-blue-accent);
    text-decoration: none;
    text-underline-offset: 0.25em;
}

.calc-page a:not(.btn):hover {
    text-decoration: underline;
}

.calc-header {
    margin-bottom: 1.5rem;
}

.calc-header h1 {
    margin: 0.5rem 0;
    font-size: 2.3rem;
    font-weight: 700;
    text-align: center;
}

.calc-lede {
    color: #444;
    margin: 0 0 0.4rem;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: #ccc solid 1px;
}

/* Tax-year pill above the H1 - reuses the index card's pill look but bigger (calc-page H1 is
   centered so its companion freshness pill needs to read at a similar scale).

   MARGIN ON ALL FOUR SIDES (user, Sep 2026), where it was `0 0 0.6rem`: a bottom-only gap left the pill
   crowding the chrome above it. The side margins are part of the ask rather than a shorthand slip, which
   is worth saying because `margin: 1rem` looks exactly like one. */
.calc-asof-pillrow {
    text-align: center;
    margin: 1rem;
}

.calc-page .calc-asof-pill {
    display: inline-block;
    background: #f4f7fb;
    color: #555;
    padding: 0.1rem 0.9rem;
    border-radius: 12px;
    border: 1px solid #AAAAAA;
    white-space: nowrap;
    font-weight: 500;
    font-size: 1.45rem;
}

.calc-asof-pill-stale {
    background: #fff8e8;
    border-color: #f1d68b;
    color: #5a4a1d;
}

/* Region selector pill row - appears below the as-of pill on calculators with sibling regional
   variants (SDLT / LBTT / LTT for UK property purchase tax). Both states share the same gray
   background and the same intrinsic size; differentiation is colour-only (black for active, blue
   for selectable). Hover on a selectable pill underlines its text - matches the breadcrumb link
   pattern so the row reads as part of the page chrome rather than a custom widget. */
.calc-region-pillrow {
    text-align: center;
    margin: 0 0 0.6rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
}

/* The .calc-page prefix on these selectors raises specificity to (0,2,0) so it beats the global
   `.calc-page a { font-size: 1.5rem }` at (0,1,1) - without that the anchor pills would render
   taller and bigger-font than the matching span pill. line-height + box-sizing further normalise
   the height across the active and selectable variants. */
.calc-page .calc-region-pill {
    display: inline-block;
    background: #f4f7fb;
    color: var(--color-blue-accent);
    padding: 0.15rem 0.7rem;
    border-radius: 10px;
    border: 1px solid #AAAAAA;
    text-decoration: none;
    /* When the hover-state underline appears, render it a touch below the baseline so it reads
       as a separate affordance line rather than a glyph descender. Used consistently across all
       blue underline-on-hover elements on the calc surface - breadcrumb (app.css), source links,
       share button - to keep the pattern uniform. */
    text-underline-offset: 0.25em;
    white-space: nowrap;
    font-size: 1.35rem;
    line-height: 1.5;
    box-sizing: border-box;
}

.calc-page .calc-region-pill:hover {
    text-decoration: underline;
    cursor: pointer;
}

.calc-page .calc-region-pill-active {
    color: #000;
    cursor: default;
}

.calc-page .calc-region-pill-active:hover {
    /* Active pill doesn't link - kill both the underline and the pointer cursor inherited from
       the base hover rule. */
    text-decoration: none;
    cursor: default;
}

.calc-page .calc-region-pill-pending {
    color: #999;
    cursor: not-allowed;
}

.calc-page .calc-region-pill-pending:hover {
    text-decoration: none;
    cursor: not-allowed;
}

.calc-body {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 2rem;
    margin: 1.5rem 0 2.5rem;
}

@media (max-width: 768px) {
    .calc-body {
        /* minmax(0, 1fr) (not a bare 1fr) lets the single column shrink below its content's
           min-content, so a wide grid item can't blow the grid - and the page - past the viewport. */
        grid-template-columns: minmax(0, 1fr);
    }
}

.calc-inputs {
    align-self: start;
    position: sticky;
    top: 1rem;
}

@media (max-width: 768px) {
    .calc-inputs {
        position: static;
    }
}

.calc-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.8rem;
    position: relative;
}

/* Left input column uses a bigger size than the body reset - easier to read at a glance for the
   50+ audience and puts visual weight on the column the user actively types into. */
.calc-page .calc-inputs label,
.calc-page .calc-inputs input,
.calc-page .calc-inputs select {
    font-size: 1.5rem;
}

.calc-field label {
    font-weight: 600;
    margin-bottom: 0.7rem;
}

/* Wrapper for fields whose label carries an (i) tooltip button - keeps label text + the
   icon on the same baseline-aligned row. Without the wrapper the (i) button would have to
   sit INSIDE the <label>, which activates the associated input (toggles a checkbox / focuses
   a text input) when tapped - bad UX on a tooltip-only control. The wrapper sits between
   the label and the input wrapper as a sibling, preserving the vertical stack inside .calc-field. */
.calc-field-label {
    display: flex;
    align-items: center;
    margin-bottom: 0.7rem;
}
.calc-field-label > label {
    margin-bottom: 0;
}

/* Radio-fieldset legend acts as the field label (e.g. "Buyer") - same weight + bottom margin
   as a regular .calc-field label. */
.calc-field-radio legend {
    font-weight: 600;
    margin-bottom: 0.7rem;
    padding: 0;
}

/* Per-option labels INSIDE the radio fieldset are regular weight - the legend carries the
   field-label boldness; individual options stay scannable and not visually competing. */
.calc-field-radio label {
    font-weight: 400;
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

/* ── The INLINE radio row: the second of the two radio idioms, for 2-3 short options that read
   better side by side ("Cash | Stocks & shares") than stacked. The fieldset+legend idiom above is
   for the rest: longer option text ("Main residence (I'll live there)") wraps badly in a row.

   BOTH are shared, and both are emitted by _CalcField. This one used to live in the page-scoped
   isa.css while the SHARED component rendered it, which meant any page other than ISA using
   CalcField.RadioInline would have got unstyled radios. Same defect as the .calc-field-note one, one
   file along. Hoisted; isa.css was nothing but these rules, so it is gone entirely. ────────────── */
.calc-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    align-items: center;
}

.calc-radio {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    font-weight: 500;
    margin-bottom: 0;
}

.calc-radio input[type="radio"] {
    cursor: pointer;
    margin: 0;
}

/* NATIVE CONTROL TINT. A native radio or checkbox draws its checked fill in the BROWSER's accent
   colour unless a page names one, so these were never any blue of ours: they were Chrome's, which
   happens to sit close enough to Bootstrap's old #0D6EFD to read as the same colour. Naming it here is
   what brings them into the palette, and accent-color covers radio, checkbox and range in one property
   without dropping the native skin (which is why the control is not rebuilt with appearance:none).

   BLUE HERE, INK IN THE APP, and the split is deliberate rather than drift. app.css sets
   `accent-color: var(--color-black)` on its radios ("monochrome dot, ink not blue") because a plan's
   module forms are dense and a blue dot per row is noise. This is the PUBLIC surface: a checked radio
   is a selection, and selection already reads blue beside it in the active tab and the region pills,
   which is the same call landing.css makes with --lp-accent. Change both together if that ever flips.

   NOT the focus border, which stays ink: the rule below deliberately forces #1a1a1a so an input and a
   select agree, Chromium giving one a black border and the other a blue glow by default. */
.calc-page input[type="radio"],
.calc-page input[type="checkbox"] {
    accent-color: var(--color-blue-accent, #12509E);
}

.calc-radio span {
    cursor: pointer;
    white-space: nowrap;
}

/* Greyed-out state for fieldsets / controls that don't apply to the current top-level selection.
   SDLT uses this for the Current-ownership and Intended-use radio pairs when Buyer type =
   Corporate. Opacity + cursor are the visible signals; the actual disable comes from the
   `disabled` attribute calculator.js sets on each input. */
.calc-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.calc-disabled label {
    cursor: not-allowed;
}

/* The "Doesn't apply to company purchases" inline note inside each disabled fieldset. Hidden by
   default; the .calc-disabled class above flips it visible. Keeps the form layout stable
   regardless of selection. */
.calc-field-disabled-note {
    display: none;
    font-size: 0.95rem;
    font-style: italic;
    margin: 0.4rem 0 0;
    color: #555;
}
.calc-disabled .calc-field-disabled-note {
    display: block;
}

/* Use font-family: inherit (NOT font: inherit) - the shorthand resets font-size to inherit,
   which then walked up to .calc-field's parent and produced 1.35rem on the input but kept the
   select at 1.5rem (different rendering path). Inheriting only family preserves the explicit
   font-size from the inputs-level reset above.

   Width / height: width:100% + box-sizing:border-box ensures the salary input (wrapped in
   .calc-input-wrap) and the fiscal-year select line up exactly. Explicit height keeps the two
   controls the same height - selects have intrinsic browser-specific min-heights that diverge
   from inputs without it. */
.calc-field input[type="text"],
.calc-field input[type="number"],
.calc-field input[type="date"],
.calc-field select {
    width: 100%;
    box-sizing: border-box;
    height: 3.2rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid #c4c4c4;
    border-radius: 4px;
    font-family: inherit;
    line-height: 1.4;
}


/* Uniform focus state: black border, no default browser outline. Default browser focus styling
   diverges between input and select (Chromium puts a black border on input but a blue glow on
   select). Force consistency. */
.calc-field input[type="text"]:focus,
.calc-field input[type="number"]:focus,
.calc-field input[type="date"]:focus,
.calc-field select:focus {
    border-color: #1a1a1a;
    outline: none;
}

/* Bigger, more clickable Scotland checkbox so the toggle isn't a tiny default-size element. */
.calc-page .calc-field-checkbox input[type="checkbox"] {
    width: 2rem;
    height: 2rem;
    cursor: pointer;
}

/* Two side-by-side controls inside one calc-field, sharing one label above (the label uses
   aria-labelledby on the wrapping div so screen readers announce both selects as part of the
   same logical field). Used by the mortgage calcs' Term input - years dropdown next to a months
   dropdown. Equal-width via flex:1 so each takes half the inputs column. */
.calc-page .calc-field-inline-pair {
    display: flex;
    gap: 0.6rem;
}
.calc-page .calc-field-inline-pair > select {
    flex: 1;
    min-width: 0;
}

.calc-field input[type="text"],
.calc-field input[type="number"] {
    padding-left: 1.7rem;
}

/* Currency-prefix vertical alignment is done with a stretched absolute box (top:0, bottom:0)
   that itself becomes a flex container - child text aligns to its centre regardless of font
   metrics or line-height. More reliable than top:50% + translateY(-50%), which depends on the
   span's intrinsic height which varies with font metrics. width:100% so the wrap matches the
   bare select sibling's full-column width. */
.calc-input-wrap {
    position: relative;
    width: 100%;
}

.calc-input-prefix {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   UNIT SUFFIX. The canonical, ONLY home for it. A per-calculator sheet must not restyle it: see
   TestCalculatorStylesheetsDoNotRestyleTheInputSuffix, which fails the build if one tries.

   THE BUG THIS REPLACES, because it cost four pages and kept coming back. The suffix used to be an
   absolutely-positioned box of a FIXED width, and the input reserved a FIXED right padding to clear
   it. Both numbers were sized for a single "%" glyph. Every multi-word unit ("% / year", "years")
   therefore wrapped onto two lines and spilled over the input's border, and the only way out was to
   guess a bigger padding. That guess was made THREE separate times, in three per-page sheets, each
   scoped to its own slug so the next page could not inherit it, and each carrying a comment
   promising the very hoist you are now reading. The fourth page (ISA) duly broke on arrival.

   THE FIX IS TO DELETE THE MAGIC NUMBERS, NOT TO PICK BETTER ONES. A suffixed wrap becomes a flex
   input-group: the border moves to the WRAP, the input goes borderless and flexes, and the suffix
   is a real flex item that simply TAKES the width its own text needs. Nothing has to be reserved,
   so nothing can be reserved wrongly, and a suffix of any length is correct by construction.

   Scoped to :has(.calc-input-suffix) so a prefix-only (£) field and a bare input keep the plain
   bordered-input styling above, untouched. ───────────────────────────────────────────────────── */
.calc-input-suffix {
    display: flex;
    align-items: center;
    /* The unit is one unbreakable token. "% / year" is a UNIT, not a sentence. */
    white-space: nowrap;
    color: #555;
    pointer-events: none;
}

.calc-input-wrap:has(.calc-input-suffix) {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    height: 3.2rem;
    border: 1px solid #c4c4c4;
    border-radius: 4px;
    background: #fff;
}

/* The input keeps its own height/padding rules but sheds the border, which now lives on the wrap.
   min-width:0 is load-bearing: without it a flex item refuses to shrink below its intrinsic width
   and a long suffix would push the input out of the group instead of narrowing it. */
.calc-input-wrap:has(.calc-input-suffix) input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: none;
    background: transparent;
    padding-right: 0.4rem;
}

/* The focus ring follows the border to the wrap, so a focused suffixed field looks identical to a
   focused plain one. Killing the input's own focus border matters: it would otherwise draw a second
   rectangle inside the group. */
.calc-input-wrap:has(.calc-input-suffix):focus-within {
    border-color: #1a1a1a;
}
.calc-input-wrap:has(.calc-input-suffix) input:focus {
    border-color: transparent;
    outline: none;
}

/* Same reasoning for the validation state: the red accent has to move to whatever element is
   actually drawing the border, or an invalid suffixed field would show no red at all. */
.calc-input-wrap:has(input[aria-invalid="true"]),
.calc-input-wrap:has(.calc-invalid-input) {
    border-color: #c1573e;
    box-shadow: 0 0 0 1px #c1573e33;
}

.calc-input-wrap:has(.calc-input-suffix) .calc-input-suffix {
    flex: 0 0 auto;
    padding-right: 0.8rem;
}

/* The small grey caption under a control (the mortgage term's "20 years and 0 months", the compound-interest
   effective-AER line). SHARED, because the shared _CalcField component emits it: a page-scoped rule for a
   class the shared component renders means the note is unstyled on every page that does not happen to load
   that page's sheet.

   It used to be exactly that, and forked in the process: .calc-field-note lived in calculator-charts.css
   ("loaded only on /uk/calculators/mortgage-overpayment") while compound-interest.css carried a near-identical
   .calc-field-hint under a different name for the same thing. Two names, two sheets, one concept. Unified
   here; TestCalculatorStylesheetsDoNotRestyleSharedChrome now fails the build if a page re-forks it. */
.calc-field-note {
    color: #6c757d;
    font-size: 0.875rem;
    margin: 0.4rem 0 0;
    line-height: 1.4;
}

.calc-field-note strong {
    font-weight: 600;
}

/* Checkbox-style field: same column layout as text/select fields (bold label on top, control below)
   so all controls in the inputs panel have a uniform shape. The bigger checkbox sizing comes from
   `.calc-page .calc-field-checkbox input[type="checkbox"]` above. align-items:flex-start keeps the
   2rem checkbox from stretching across the column under flexbox column defaults. */
.calc-field-checkbox {
    align-items: flex-start;
}

/* Buttons reuse Bootstrap's .btn / .btn-primary / .btn-outline-primary / .btn-outline-secondary
   classes from the main app - visual continuity is automatic and a future theme change to
   Bootstrap or app.css propagates here. The only calc-specific helper is the full-width modifier
   for the input-panel stack. */
.calc-cta {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Up-and-right arrow next to "Open full planner" - communicates "this navigates somewhere else"
   without depending on a specific FontAwesome version. Prefix with .calc-page so the selector
   outranks the sledgehammer `.calc-page span` reset above; otherwise the font-size is ignored. */
.calc-page .calc-cta-icon {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 1.4em;
    line-height: 1;
}

.calc-cta-fullwidth {
    display: block;
    width: 100%;
}

/* Text-only link, used for tertiary actions ("Share this calculator") that shouldn't compete
   with the primary Open-full-planner button. Sits below it with extra top margin. No underline
   at rest - surfaces only on hover, matching the breadcrumb and source-citation link pattern so
   all "click me, leaves this view" affordances behave consistently across the calc surface. */
.calc-cta-textlink {
    background: none;
    border: none;
    padding: 0.4rem 0;
    margin-top: 1.2rem;
    color: var(--color-blue-accent);
    text-decoration: none;
    text-underline-offset: 0.25em;
    cursor: pointer;
    text-align: center;
}

.calc-cta-textlink:hover {
    text-decoration: underline;
}

.calc-cta-textlink .fa {
    margin-right: 0.4rem;
}

/* Results panel is a fluid 3-card row: Table | Chart | Pills. On wide screens they sit side
   by side; below ~900px they wrap and stack one per row (each card has flex-basis 280px).
   align-items: stretch (the flex default) makes every card grow to the tallest sibling's
   height, so the v-centring inside each card has space to work with. */
.calc-results {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: stretch;
    /* Size to content; don't stretch to match a taller inputs column. When the form (left grid
       column) is taller than the results, the default grid stretch balloons this flex container's
       height, and align-content:stretch distributes that extra height into the flex lines, leaving
       the full-width commentary box tall and mostly empty. align-self:start keeps results at content
       height regardless of how tall the form gets. */
    align-self: start;
}

/* Result cards are transparent - the table / chart / pills sit directly on the page background.
   The Pills card's children get their own white background (see .calc-pill below) so they read
   as separate boxes, while the Table and Chart cards are pure containers.
   Content vertically centred so a short table next to a tall pie chart still reads as a coherent row. */
.calc-result-card {
    flex: 1 1 280px;
    /* Allow the card to shrink below its content's intrinsic width inside the flex row. Without
       this, a wide child (the breakdown table, the pie) sets a min-content floor that can push the
       card - and the whole results row - wider than a narrow phone viewport. */
    min-width: 0;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Full-width results card: forces the card onto its own row rather than sharing it with a sibling.
   A time-series chart wants the whole width to the right of the inputs (not half of it, squeezed
   beside the pills), so line/area-chart calcs put this on the chart card and the pills card, giving
   a horizontal pill row above a full-width chart. Pie / single-figure calcs leave it off and keep
   the default two-up flow. */
.calc-result-card-full {
    flex: 1 1 100%;
    /* Stretch the content (the chart figure, the pills row) to the full card width. The base card
       centres its content at intrinsic width, which is right for a square pie but leaves a full-width
       chart centred and narrow; stretch makes the SVG (width:100%) fill the whole row. */
    align-items: stretch;
}

/*
 * .calc-pills - a row of pill-shaped result tiles surfacing the most-meaningful numbers a calc
 * produces. Each pill carries a big figure (the number) + a small label (what it means).
 *
 * Display rules:
 *   - Use pills only for headline outputs the user genuinely came to see (PAYE: annual + monthly
 *     take-home). Don't pill every output - the breakdown table covers the rest.
 *   - 1-3 pills per calc. More than 3 dilutes the "headline" framing.
 *   - Pill figures are pre-formatted (currency, decimals) before reaching the view. The view
 *     does no arithmetic.
 */
/* Pills lay out as a compact, centered, wrapping ROW inside the (transparent) Pills card, each pill
   its own white box sized to its own content, NOT stretched to the card width. The card may grow to
   fill the results row, but the pills stay compact and centered within it; they wrap to a new line
   when they do not all fit. (A pill carries only a figure + a short label, so a full-width pill wastes
   the row and reads as an empty banner - the earlier column layout did exactly that.) */
.calc-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    width: 100%;
    justify-content: center;
}

.calc-pill {
    flex: 0 1 auto;
    /* A substantial floor so a headline figure reads as a prominent tile, not a cramped chip.
       min(30rem, 100%) keeps the 30rem floor on desktop but never forces the pill wider than its
       container, so a narrow phone viewport shrinks it to fit instead of overflowing. */
    min-width: min(30rem, 100%);
    padding: 1rem 1.2rem;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;
}

.calc-pill-figure {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: #1a1a1a;
}

.calc-pill-label {
    margin-top: 0.4rem;
    color: #666;
}

/* Optional info-tooltip affordance on a pill label - small i-in-circle that sits inline next to
   the label text. Tooltip text comes from the data-tooltip attribute and renders via a CSS
   pseudo-element on hover (desktop) or focus (keyboard / tap-toggle on mobile via the JS hook).
   Only used on the pills whose label is non-obvious (Effective tax rate, Next pound tax rate). */
.calc-pill-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    margin-left: 0.45rem;
    width: 1.7rem;
    height: 1.7rem;
    /* `help` cursor: native browser arrow with a question-mark badge - signals
       "extra information available, no navigation". Matches the role of the icon. */
    cursor: help;
    vertical-align: middle;
    position: relative;
    /* CSS Anchor Positioning anchor name - the tooltip pseudo-elements below anchor to it, and
       where the browser supports it they are placed against the SCREEN so they cannot leave it
       (the @supports block beside the tooltip rules). Browsers without anchor support silently
       ignore the anchor-name and keep the static `left: 50%` centering. */
    anchor-name: --info-anchor;
}

/* Label-level (i) icon - same SVG + tooltip mechanism as `.calc-pill-info`, smaller sizing
   to sit inline with a label's text baseline rather than next to a pill figure.
   Used on inputs whose precise definition affects the answer (e.g. "Allowable costs" - what
   counts? "Was this ever your main residence?" - HMRC's definition). One-liner tooltip; the
   bottom-of-page Explanation section carries the longer prose.
   See DF.Claude/Features/Calculators.md §"Input-label (i) tooltips". */
.calc-field-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    margin-left: 0.7rem;            /* breathing room from the label text */
    width: 1.5rem;
    height: 1.5rem;
    /* flex-shrink:0 - the .calc-field-label wrapper is a flex container; without this the
       icon would shrink horizontally when the label text wraps tightly, and the icon visibly
       loses size on multi-line labels. Pin its dimensions so it stays consistent regardless
       of label length. */
    flex-shrink: 0;
    cursor: help;
    vertical-align: middle;
    position: relative;
    anchor-name: --info-anchor;     /* shares the anchor name with .calc-pill-info - same fallbacks apply */
}

.calc-pill-info:focus-visible,
.calc-pill-info.is-open,
.calc-field-info:focus-visible,
.calc-field-info.is-open {
    outline: none;
}

.calc-pill-info img,
.calc-field-info img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Tooltip itself - positioned above the i-icon, centered, dark background, max 24em wide.
   Hidden (out of layout) by default; shown on hover, keyboard focus, or `is-open` (set by JS on tap
   toggle). This is the placement for a browser WITHOUT anchor positioning; the @supports block below
   replaces it where the browser can anchor to the screen. See DF.Claude/Features/Calculators.PageRules.md
   "Input-label (i) tooltips, and their viewport safety". */
.calc-pill-info::after,
.calc-field-info::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    /* Never wider than the screen, so a popover a phone user tapped open fits beside its icon. */
    max-width: min(24em, calc(100vw - 2rem));
    background: #1a1a1a;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    padding: 0.8rem 1rem;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    opacity: 0;
    /* OUT OF LAYOUT WHILE HIDDEN, not merely invisible (user, 2026-09-24, from a phone pass). A
       visibility:hidden box still occupies space, and this one is up to 24em wide centred on a small
       icon, so an icon right of the middle pushed the page past the screen: /uk/calculators/paye was
       403px wide at a 360px phone, and scrolled sideways. display:none takes it out; allow-discrete
       keeps the 120ms fade (with the @starting-style in the shown rule), and a browser without it
       simply shows the popover without the fade. */
    display: none;
    transition: opacity 120ms ease, display 120ms ease allow-discrete;
    z-index: 100;
    white-space: normal;

    /* Bound to its own icon: each (i) declares --info-anchor, and a pseudo-element anchors to the last
       element before it in tree order carrying that name, which is its originating icon (a headless
       Edge render in review of PR 3668 confirmed each popover anchors to its own icon). */
    position-anchor: --info-anchor;
}

.calc-pill-info:hover::after,
.calc-pill-info:focus-visible::after,
.calc-pill-info.is-open::after,
.calc-field-info:hover::after,
.calc-field-info:focus-visible::after,
.calc-field-info.is-open::after {
    display: block;
    opacity: 1;

    @starting-style {
        opacity: 0;
    }
}

/* Caret beneath the tooltip pointing at the icon. */
.calc-pill-info::before,
.calc-field-info::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 0.1rem);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a1a1a;
    pointer-events: none;
    opacity: 0;
    /* Out of layout while hidden, for the popover's reason above. */
    display: none;
    transition: opacity 120ms ease, display 120ms ease allow-discrete;
    z-index: 100;
}

.calc-pill-info:hover::before,
.calc-pill-info:focus-visible::before,
.calc-pill-info.is-open::before,
.calc-field-info:hover::before,
.calc-field-info:focus-visible::before,
.calc-field-info.is-open::before {
    display: block;
    opacity: 1;

    @starting-style {
        opacity: 0;
    }
}

/* ANCHORED TO THE SCREEN where the browser can (user, 2026-09-24, from a phone pass). Two
   @position-try fallbacks used to sit here (shift right, shift left), and on a phone they did not
   save an open popover: it ran off the right edge ("...the personal-allowance tape") and widened
   the page to 411px at a 360px screen. Why they never fired is believed, not measured: an absolute
   popover's containing block is its 17px icon, against which every placement overflows, so the
   browser keeps the first. They are gone, because the block below makes them unreachable.

   Fixed positioning makes the SCREEN the containing block, so a fixed box also never widens the page.
   The popover takes the whole strip above its icon (top span-all), centres on the icon, and
   anchor-center shifts it inward rather than let it leave the screen; it flips below when there is no
   room above. Measured in headless Edge at 360px: both PAYE pill popovers fully on screen, document
   360px wide. A browser without anchor positioning keeps the absolute placement above. This block sits AFTER
   the caret rules on purpose: its selectors tie theirs on specificity, so source order decides.

   NO CARET HERE, and that is the price of the flip. The popover and the caret each choose their own
   placement, and a 10px caret fits above its icon in cases where the popover does not, so a flipped
   popover got a caret pointing the other way, detached from it (review of PR 3668, reproduced in
   headless Edge). Nothing lets two boxes flip together, and the popover now sits 0.5rem from its
   icon either way, so the caret goes; the absolute placement above keeps it. */
@supports (position-area: top) {
    .calc-pill-info::after,
    .calc-field-info::after {
        position: fixed;
        position-area: top span-all;
        position-try-fallbacks: bottom span-all;
        justify-self: anchor-center;
        inset: auto;
        transform: none;
        /* Both block sides, so the flipped placement keeps the same gap below the icon. */
        margin: 0.5rem 0.8rem;
    }

    .calc-pill-info::before,
    .calc-field-info::before {
        content: none;
    }
}

/* Breakdown table is sized to its content (not full panel width) and centered, so labels and
   numbers sit close together rather than stretching across the panel. The label column stops at
   max-content; the number column has tight left-padding to keep them adjacent. */
.calc-result-breakdown {
    width: auto;
    margin: 1rem auto;
    border-collapse: collapse;
    font-size: 1.1rem;
}

.calc-result-breakdown th,
.calc-result-breakdown td {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e8eaee;
}

.calc-result-breakdown th {
    text-align: left;
    padding-right: 1.5rem;
    font-weight: 500;
}

.calc-result-breakdown td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.calc-result-breakdown .calc-deduction {
    color: #a04040;
}

/* Totals rows in any breakdown table - bigger font + bold so the bottom-line figure pops out
   of the column. Convention applies across every calc, not just PAYE. */
.calc-page .calc-result-totalrow th,
.calc-page .calc-result-totalrow td {
    border-top: 2px solid #444;
    border-bottom: none;
    font-weight: 700;
    font-size: 1.55rem;
    padding-top: 0.8rem;
}

/* The regime / rate label above a breakdown table ("Standard 40% rate", "Residential rates"): which
   RULESET produced the figures below. Five pages carry one (CGT, IHT, LBTT, LTT, SDLT).

   It had no rule at all until Aug 2026, so it was a bare <caption>: centred, unweighted, and inheriting
   the table size. That read as the weakest thing in the table when it is actually the table's heading,
   and adding the subtotal tier below made it worse by putting more visual weight under it. Styled to
   match the row labels it sits above (same size and weight as a th, left-aligned to the same edge) so it
   reads as a heading rather than an afterthought. */
.calc-page .calc-result-breakdown .calc-result-caption {
    caption-side: top;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 500;
    color: #555;
    padding-bottom: 0.5rem;
}

/* A WAYPOINT in a staged calculation: the running total after one step, with more steps below it.
   Bold like a total because it is one, but visibly lighter than .calc-result-totalrow so a reader
   scanning the column can still find the single bottom line.

   Three tiers, and the middle one was missing until Aug 2026: plain rows at 1.1rem/500, waypoints at
   1.25rem/700 with a hairline rule, the final answer at 1.55rem/700 with a 2px rule. Inheritance Tax
   rendered THREE identical 1.55rem rows (Net estate, Taxable estate, Inheritance Tax due) so the answer
   was indistinguishable from two intermediate steps; Capital Gains was inconsistent within one table,
   giving "Gross gain" the full total treatment while "Gain after relief" and "Taxable gain", the same
   kind of waypoint, were plain rows. */
.calc-page .calc-result-subtotalrow th,
.calc-page .calc-result-subtotalrow td {
    border-top: 1px solid #b9bec6;
    border-bottom: none;
    font-weight: 700;
    font-size: 1.25rem;
    padding-top: 0.6rem;
}

/* Per-band income-tax breakdown rows. Each band emits two rows: a name row (band label across
   both columns) + an amount row ("£X at Y%" on the left, −£tax on the right). Indented but at the
   parent breakdown table's font size so the band figures stay readable next to the totals - the
   table is THE working that backs the headline pills, so the per-band figures need to be legible
   without forcing the user to zoom in. Mirrors the "tax-sub-key" cell class the planner's
   tax-return view uses. */
.calc-page .calc-result-bandname th {
    text-align: left;
    font-size: 1.05rem;
    font-weight: 600;
    color: #444;
    padding-top: 0.5rem;
    padding-bottom: 0.1rem;
    padding-left: 1.5rem;
    border-bottom: none;
}

.calc-page .calc-result-bandrow th,
.calc-page .calc-result-bandrow td {
    font-size: 1.05rem;
    font-weight: 400;
    color: #444;
    padding-top: 0.1rem;
    padding-bottom: 0.3rem;
    border-bottom: none;
}

.calc-page .calc-result-bandrow th {
    padding-left: 1.5rem;
}

.calc-page .calc-result-bandrow .calc-deduction {
    color: #a04040;
}

/* SVG pie chart of the gross-salary split (take-home / tax / NI). Slice paths + label positions
   are server-rendered into the SVG markup at first paint; calculator.js recomputes both on AJAX
   recompute (applyPieChart in calculator.js, hooked via data-bind="pieChart"). No chart library
   needed; the SVG renders without JavaScript on first load. */
.calc-result-piewrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1.5rem 0 0;
    gap: 0.8rem;
}

/* Caption above every calc-page chart - pie, line, bar, whatever. Convention: every <figure>
   that wraps a chart on a calculator page opens with a <figcaption class="calc-chart-caption">
   stating what the chart shows. Single source of truth for the styling means a future palette
   pass touches one rule, not one per calc. See DF.Claude/Features/Calculators.md §"Chart caption
   rule". */
.calc-chart-caption {
    font-size: 1.55rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
}

/* Small comparison note below a chart - used for "without overpayment, X% would have been
   interest"-style framing that gives context to the headline pie without doubling the chart's
   real estate. Sized down from the body reset so it reads as supporting copy. */
/* The measure is deliberately capped and deliberately NOT the chart's width. `.calc-chart` is
   width:100%, so a line chart fills the results column (wider than 600px on desktop) while this stays a
   readable column under it. Matching the chart would run a one-line sentence to ~900px, which is worse
   typography, not better: the cap is a choice, not an inability to know the width.

   30em until Aug 2026, which at this font size is about 60 characters, and every footnote on the surface
   is 76 to 110. So all of them wrapped to two lines, and a narrow two-line block under a full-width chart
   is what read as odd. 42em is about 84 characters: most footnotes now sit on one line, and the measure
   is still inside the comfortable range rather than running the width of the graphic. */
.calc-chart-footnote {
    color: #555;
    font-size: 1.05rem;
    margin: 0.6rem 0 0;
    text-align: center;
    max-width: 42em;
}

/* Collapsed disclosure widget for long below-the-fold tables (e.g. year-by-year amortisation).
   <details><summary>Year-by-year breakdown</summary><table>…</table></details>. Default browser
   styling for <details> looks clean enough that we only need to size the summary to match the
   calc-page body, give it some affordance + a chevron, and inset the expanded content slightly. */
.calc-result-details {
    margin: 0;
}
.calc-result-details > summary {
    cursor: pointer;
    font-weight: 600;
    color: #333;
    padding: 0.4rem 0;
}
.calc-result-details > summary:hover {
    color: #000;
}
.calc-result-details[open] > summary {
    margin-bottom: 0.6rem;
}

/* "Related calculator" cross-link card - a soft callout below the main result section pointing
   users to a sibling calc. Used on /mortgage-payment to send users to /mortgage-overpayment and
   vice versa. White background + medium border to match the pill aesthetic. The inline <a> is
   scoped to inherit the surrounding font-size so it doesn't read as a giant link (the global
   `.calc-page a { font-size: 1.5rem; }` rule otherwise applies). */
.calc-related-cta {
    margin: 1.5rem 0 0;
    padding: 0.9rem 1.2rem;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
}
.calc-related-cta p {
    margin: 0;
    color: #444;
    font-size: 1.5rem;
}
/* The inline links inherit the 1.5rem paragraph size (rather than the global 1.5rem link rule,
   which is coincidentally the same today but decoupled on purpose per the note above), so a link
   never reads larger than the surrounding sentence. */
.calc-page .calc-related-cta a {
    font-size: inherit;
}
/* The bold lead ("Found your number?") is a <strong>, which the .calc-page strong sledgehammer
   would otherwise pin to 1.35rem; lift it to match the surrounding prose. */
.calc-page .calc-related-cta strong {
    font-size: 1.5rem;
}

.calc-result-pie {
    /* Fluid: fill the (transparent) chart card up to the 240px design size, and scale DOWN on a
       narrow phone card instead of forcing a fixed 240px that overflows the viewport. The
       viewBox="0 0 240 240" preserves the 1:1 aspect, so height follows the width automatically. */
    width: 100%;
    max-width: 240px;
    height: auto;
}

/* Percentage labels rendered as <text> on each slice - white with a subtle text-shadow so the
   numbers stay readable against any slice colour. Slices below 3% suppress the label
   server-side (see Paye.cshtml) so tiny slivers don't overlap. */
.calc-pie-label {
    fill: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.calc-result-pie-legend {
    display: flex;
    gap: 1.2rem;
    color: #555;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.calc-legend-swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-right: 0.3rem;
    border-radius: 2px;
    vertical-align: middle;
}

/* Chart-category swatch colours. Every pie/area legend swatch picks the class matching the
   category of the series it labels - see DF.Claude/Features/Calculators.md §"Chart colour
   rules". Colours resolve from the :root vars emitted by _HeadTags.cshtml, which are sourced
   from DF.UI.Charting.ChartPalette - the single source of truth. */
.calc-swatch-money-in      { background: var(--chart-money-in); }
.calc-swatch-money-out     { background: var(--chart-money-out); }
.calc-swatch-tax-primary   { background: var(--chart-tax-primary); }
.calc-swatch-tax-secondary { background: var(--chart-tax-secondary); }
.calc-swatch-relief        { background: var(--chart-relief); }
.calc-swatch-neutral       { background: var(--chart-neutral); }
.calc-swatch-winner        { background: var(--chart-winner); }
.calc-swatch-loser         { background: var(--chart-loser); }

/* Generic chart-figure column: caption on top, chart, then legend, all centred. Shared here so a
   page that loads only calculator.css (e.g. Mortgage Affordability) styles its chart figure without
   a per-page sheet. Some older per-page sheets (calculator-charts.css, ...) still declare an
   identical .calc-chart-wrap; loaded after this one they win the cascade with the same values, so
   those pages are visually unchanged - this is the single shared source going forward. */
.calc-chart-wrap {
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

/* Area/line chart axis tick labels (Y £-ticks + X year-ticks). Sized in viewBox user units: the
   chart's viewBox is 600 wide and fills the results column, so it renders ~1.25x - 11 here lands
   ~14px on screen. The single shared source: the .calc-page prefix (0,2,1) outranks the older
   per-page `.calc-chart-yticks text` rules (0,1,1) and the `.calc-chart` 0.85rem default, so every
   calculator's ticks render at one size once its chart goes full-width. */
.calc-page .calc-chart-yticks text,
.calc-page .calc-chart-xticks text {
    fill: #6c757d;
    font-size: 11px;
}

/* ── BAR_COMPARISON block ────────────────────────────────────────────────────────────────────────
   Reusable horizontal bar-comparison chart (the shared renderBarComparison in calculator.js drives
   the geometry). Two or more bars share one axis; the "binding" bar (the one the result flags as the
   limiting figure) takes the accent colour, the rest neutral, and a dashed marker line drops at the
   binding value. First used by Mortgage Affordability (income-multiple cap vs affordability cap).
   Colours resolve from the :root chart vars emitted by _HeadTags.cshtml (ChartPalette). Text sizes
   are in viewBox user units (px), matching the area-chart tick convention, so they scale with the SVG. */
.calc-bar-chart {
    width: 100%;
    max-width: 600px;
    height: auto;
}

.calc-bar-label {
    fill: #495057;
    font-size: 25px;
}

.calc-bar-value {
    fill: #212529;
    font-size: 22px;
    font-weight: 700;
}

.calc-bar-track {
    fill: #eceef0;
}

.calc-bar-fill {
    transition: width 0.2s ease;
}

.calc-bar-binding {
    fill: var(--chart-tax-primary);
}

.calc-bar-slack {
    fill: var(--chart-neutral);
}

.calc-bar-marker {
    stroke: #495057;
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

/* Collapsed "Advanced options" disclosure inside a calc form - opens to reveal the less-common
   inputs (income multiple, stress rate, tax year, Scotland) so the primary form stays short. Styled
   like .calc-result-details but scoped to the form context, with a little breathing room above. */
.calc-advanced {
    margin: 0.5rem 0 0;
}
.calc-advanced > summary {
    cursor: pointer;
    font-weight: 600;
    color: #333;
    padding: 0.4rem 0;
}
.calc-advanced > summary:hover {
    color: #000;
}
.calc-advanced[open] > summary {
    margin-bottom: 0.6rem;
}

/* Prose blocks (explanation, FAQ, citations, disclaimer) cap at ~800px for readable line length
   AND centre horizontally so they don't read as cramped against the left edge under the wider
   above-the-fold inputs/results layout.
   The first one (.calc-explanation) carries a top border that visually separates the
   below-the-fold prose from the form / results / pills above. Matches the lede's bottom border. */
.calc-explanation {
    max-width: 800px;
    margin: 2.5rem auto;
    padding-top: 2rem;
    border-top: 1px solid #ccc;
    line-height: 1.6;
}

/* Bump every below-the-fold prose section (Information / FAQ / Sources / Recent changes /
   Disclaimer) one step above the 1.35rem body sledgehammer for readability, uniformly so no
   section reads larger than its neighbours. The sledgehammer sets font-size on each element type
   directly (.calc-page p / dt / dd / li / a / strong / span / ...), so each text element is
   re-listed per section to out-specify it (0,2,1 beats its 0,2,0). The citation external-link
   <i> icon is deliberately NOT listed, so its 0.75em relative size is preserved and scales with
   the link. Section-title <h2> headings keep their own larger size and are not touched. */
.calc-page .calc-explanation p,
.calc-page .calc-explanation strong,
.calc-page .calc-explanation span,
.calc-page .calc-faq dt,
.calc-page .calc-faq dd,
.calc-page .calc-faq p,
.calc-page .calc-faq a,
.calc-page .calc-faq strong,
.calc-page .calc-faq li,
.calc-page .calc-citations li,
.calc-page .calc-citations a,
.calc-page .calc-citations p,
.calc-page .calc-history time,
.calc-page .calc-history p,
.calc-page .calc-disclaimer p {
    font-size: 1.5rem;
}

/* The explanation section uses flat prose with bold-lead paragraphs for sub-topics; no heading
   levels inside it. The single H1 above is the only large heading on the page. */

.calc-faq {
    max-width: 800px;
    margin: 2rem auto;
    font-size: 1.1rem;
}

/* Question and answer share font size - question reads as bold, answer as normal weight. */
.calc-faq dt {
    font-weight: 700;
    margin-top: 1rem;
}

.calc-faq dd {
    margin: 0.4rem 0 0;
    line-height: 1.5;
}

/* Sources and Disclaimer are plain prose sections - same look as Information / FAQ. The
   in-prose mini-headings come from .calc-section-title. No callout box, no accent. */
.calc-citations {
    max-width: 800px;
    margin: 2rem auto;
}

/* Standard disc bullets for source citations - easier to scan when there are several entries. */
.calc-citations ul {
    list-style: disc;
    padding-left: 1.4rem;
    margin: 0;
}

.calc-citations li {
    margin-bottom: 0.4rem;
}

/* Source links open in a new tab (see target="_blank" in the cshtml) and carry a small
   external-link icon as a visual hint that following the link leaves the site. No underline by
   default - matches the breadcrumb pattern - surfaces only on hover so the citation list reads
   as plain prose at rest. The 0.25em offset detaches the hover-underline from the glyph
   descenders so the line reads as an affordance rather than text decoration. */
.calc-page .calc-citations a {
    text-decoration: none;
    text-underline-offset: 0.25em;
}

.calc-page .calc-citations a:hover {
    text-decoration: underline;
}

/* The external-link glyph sits inline after the link text. Slightly smaller than the surrounding
   body font and pushed up a touch so it visually rides the cap-line rather than the baseline.

   The -0.025em is derived, not eyeballed, and it MUST be re-derived if `.fa` changes. This selector
   is (0,2,0) so it overrides `.fa`'s own vertical-align, and the two are aligning different things:
   `.fa` used to be an inline-block CONTAINING a glyph, so its baseline was the glyph's own and
   `0.1em` raised it 0.1em; it is now an EMPTY inline-block, whose baseline is its bottom margin edge.
   A Font Awesome solid glyph's ink spans -0.125em to +0.875em about its baseline (the 448-of-512 box),
   which is exactly the -0.125em `.fa` sets, so reproducing the old position needs 0.1 - 0.125. Leaving
   it at 0.1em would have floated the icon a whole 0.125em higher than it ever sat. */
.calc-page .calc-citation-external-icon {
    font-size: 0.75em;
    margin-left: 0.3em;
    vertical-align: -0.025em;
    color: #888;
}

.calc-citations-meta {
    color: #777;
    margin-top: 0.7rem;
    margin-bottom: 0;
}

.calc-disclaimer {
    max-width: 800px;
    margin: 2rem auto;
    color: #444;
}

.calc-error-banner {
    max-width: 800px;
    margin: 0 auto 1rem;
    padding: 0.7rem 1rem;
    background: #fff4d8;
    border: 1px solid #e8c25a;
    border-radius: 4px;
    color: #6a4f0a;
    font-size: 1.1rem;
}

/* Validation issues - per DF.Claude/Features/Calculators.md §"Input robustness contract".
   Yellow banner above the result panel listing every per-field and cross-field violation.
   Hidden when the issue list is empty. Styled like .calc-error-banner but slightly more
   prominent (left border accent, list of issues rather than single message). */
.calc-validation-issues {
    max-width: 900px;
    margin: 0 auto 1.5rem;
    padding: 0.8rem 1.2rem;
    background: #fff4d8;
    border: 1px solid #e8c25a;
    border-left: 4px solid #e8c25a;
    border-radius: 4px;
    color: #6a4f0a;
    font-size: 1rem;
}

.calc-validation-issues strong {
    display: block;
    margin-bottom: 0.4rem;
}

.calc-validation-issues ul {
    margin: 0;
    padding-left: 1.4rem;
}

.calc-validation-issues li {
    margin: 0.2rem 0;
}

/* Invalid input visual state - applied per-field by JS via the .calc-invalid-input class
   and aria-invalid="true". Red border accent so the user can see WHICH field needs fixing,
   not just the global banner. */
.calc-invalid-input,
input[aria-invalid="true"],
select[aria-invalid="true"] {
    /* Semantic state colour (validation-error red), NOT a chart-series colour - red-for-error is a
       universal web convention. Deliberately a raw hex, governed by Calculators.md §"Off-chart
       colour restraint", not by the chart palette. */
    border-color: #c1573e !important;
    box-shadow: 0 0 0 1px #c1573e33;
}

/* Result panel blank state - driven by data-result-state="blank" on <article class="calc-page">.
   Fades the result panel so the user understands the figures aren't current. The DOM nodes stay
   populated (preserves layout, avoids reflow) but the visual state signals "stale / pending fix".
   Once the user resolves the validation issue, JS sets data-result-state="valid" and the panel
   restores. */
.calc-page[data-result-state="blank"] .calc-results,
.calc-page[data-result-state="blank"] .calc-result-card {
    opacity: 0.4;
    transition: opacity 0.15s ease-out;
}

.calc-page[data-result-state="valid"] .calc-results,
.calc-page[data-result-state="valid"] .calc-result-card {
    opacity: 1;
    transition: opacity 0.15s ease-out;
}

/* Index page (/uk/calculators) and the embedded "all calculators" list on the friendly 404. */

.calc-index-category {
    margin: 0 0 2.5rem;
}

/* Category headings are signposts inside a section, not navigation. Neutral dark colour so they
   read as headings; the id="..." on the parent section is still emitted for sitemap deep-links
   from external sources. */
.calc-index-category > h2 {
    font-size: 2.1rem;
    font-weight: 700;
    margin: 0 0 0.8rem;
    color: #1a1a1a;
    text-align: center;
}

/* Card row uses flex so cards pack at fixed width and centre within available space (grid's
   auto-fill + 1fr would stretch instead of centring). On wide screens cards sit centred and
   close together; on narrow screens they wrap to the next row. */
.calc-index-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.calc-index-cards .calc-card {
    flex: 0 1 320px;
}

.calc-card {
    display: block;
    margin: 15px;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 6px;
    text-decoration: none;
    color: #222;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Hover: only border + shadow change. Title gets the underline cue, card itself does not lift -
   blue + underline are reserved for actionable links, not for shifting layout. */
.calc-card:hover {
    border-color: #2c5fa6;
    box-shadow: 0 2px 8px rgba(44, 95, 166, 0.1);
    text-decoration: none;
}

/* Pill row sits above the title, horizontally centered to match the calc-page header. */
.calc-card-pillrow {
    display: flex;
    justify-content: center;
    margin-bottom: 0.4rem;
}

/* Title is blue at rest so the card reads as a link from first glance - underline only appears
   on card hover so multiple cards in a row don't read as a wall of underlined text. The 0.25em
   offset on the hover underline matches the calc-page / breadcrumb / source-link treatment so
   every interactive blue text in the funnel reads as the same affordance. */
.calc-card-title {
    margin: 1rem 0 1rem;
    font-weight: 700;
    color: #2c5fa6;
    font-size: 1.7rem;
    line-height: 1.4;
    text-align: center;
    text-underline-offset: 0.25em;
}

.calc-card:hover .calc-card-title {
    text-decoration: underline;
}

/* Category H2 on /uk/calculators/ index - banner-pill styling so each category visually
   anchors its card cluster. Soft grey background, light border, rounded corners. */
.calc-index-category > h2 {
    background-color: #f2f2f2;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ddd;
}

/* Rate-change-history section - vertical timeline below the calc. Newest-first chronological list
   of legislative-data slice transitions. SEO content + user education ("how did rates change?").
   Each <li> is one change: bold date on its own line + description below. Left-border accent +
   inset padding produce a subtle timeline feel without overengineering. */
.calc-history {
    max-width: 800px;
    margin: 2rem auto;
}
.calc-history-timeline {
    list-style: none;
    padding-left: 0;
    margin: 0;
    border-left: 3px solid #ccc;
}
.calc-history-item {
    position: relative;
    padding: 0.6rem 0 1.6rem 1.6rem;
}
.calc-history-item::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 1rem;
    width: 13px;
    height: 13px;
    /* Decorative timeline-marker dot on the "Recent changes" list - NOT a chart series. Deliberate
       raw hex, governed by Calculators.md §"Off-chart colour restraint", not the chart palette. */
    background: #4f8a4f;
    border-radius: 50%;
    border: 2px solid #fff;
}
.calc-history-date {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.3rem;
}
.calc-history-description {
    margin: 0;
    color: #555;
    line-height: 1.55;
}

/* Tax-year pill replaces the previous "Tier 1" label. Communicates freshness instead of
   organisational tier. */
.calc-card-asof-pill {
    font-size: 1.2rem;
    font-weight: 500;
    background: #f4f7fb;
    color: #555;
    padding: 0.25rem 0.65rem;
    border-radius: 10px;
    border: 1px solid #AAAAAA;
    white-space: nowrap;
}

.calc-card-lede {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #555;
    margin: 0;
    text-align: center;
}

/* Plain about-text below the cards. No box, no accent - it's secondary context, not a callout.
   Centered so the heading + paragraphs sit aligned with the page's overall centred layout. */
.calc-index-about {
    margin: 2.5rem 0 1rem;
    padding-top: 2rem;
    border-top: 1px solid #ccc;
    color: #555;
    font-size: 0.95rem;
    text-align: center;
}

.calc-index-about > h3 {
    margin: 0 0 0.6rem;
    color: #1a1a1a;
    font-size: 1.6rem;
    font-weight: 700;
}

.calc-index-about > p {
    margin: 0 0 0.6rem;
    line-height: 1.5;
}

/* Page chrome scoping: pages that set ViewData["BodyClass"] = "plain-page" pick up the
   centered-header / larger-breadcrumb layout used across all plain-content pages (calc surface,
   /about, /privacy, /terms). Other site pages (the explore funnel) keep their richer chrome. */
body.plain-page .explore-header .container {
    align-items: center;
}

/* The centred, enlarged breadcrumb lives in app.css now, beside the .explore-breadcrumb base
   rule it overrides and on the one sheet every plain-page surface already loads. It was copied
   byte-identically into this file and its sibling, which is the pair that silently diverges on the
   next tweak. */

/* Tighten the chrome above plain-page surfaces. We override the shared .explore-header on
   plain-page only - drop the border-bottom + reduce padding + shrink the margin-bottom -
   without touching the shared app.css that other pages depend on. */
body.plain-page .explore-header {
    border-bottom: none;
    padding: 10px 0;
    margin-bottom: 8px;
}

body.plain-page .explore-main {
    padding-top: 0;
    margin: 15px;
}

/* Lives in calculator.css, which only loads on calc pages, so this rule won't affect other
   surfaces' <article> elements even though the selector is broad. */
.explore-main article {
    margin: 15px;
    padding: 5px 25px;
}

/* The standalone Privacy / Terms pages: centre the 780px-max-width column, restore the prose
   padding this sheet tightens for the calculators, and set the scale the whole block reads at. */
body.plain-page .legal-content {
    margin-left: auto;
    margin-right: auto;

    /* Restores app.css's own article padding. `.legal-content` IS the <article>, and the rule above
       (.explore-main article) trims it to `5px 25px` for the dense calculator layout, which on a
       long-form prose page left the title hard against the top of the card and the last paragraph
       hard against the bottom. Fixing the PADDING rather than adding a top margin to the h1 treats
       the cause and covers all four edges in one declaration; (0,2,1) beats that rule's (0,1,1).
       The phone override below is required for the same reason: it beats the media query too. */
    padding: 22px 28px;

    /* Body-copy size for the STANDALONE legal pages only. app.css's .legal-content sizes its prose
       at 1em, which is the root 10.8px, because that class is shared with the three Blazor legal
       MODALS, where the surrounding modal already sets the scale. On a full page there is no such
       surround, so the prose rendered at the bare root size, smaller even than the 1.4em the
       sibling .explore-main prose uses, and far smaller than the 1.35rem body copy every other
       public page on this surface (the calculators) renders at.

       Declared on the CONTAINER because every FONT-SIZE inside .legal-content is expressed in em,
       so one value moves the h2s, the list items and the "Last updated" line together. Read that
       narrowly: it is true of the font sizes and NOT of the vertical rhythm, which Bootstrap's
       reboot pins in rem (`p`/`ul` carry `margin-bottom: 1rem`). Growing the type 35% while the
       gaps stand still tightens the prose, so the block below re-expresses those margins in em.
       The h1 is the other exception: 2.2em of the new container would overshoot the page title
       size the rest of the surface uses. */
    font-size: 1.35rem;
}

/* Keep the paragraph and list rhythm proportional to the type. Bootstrap reboot's `margin-bottom:
   1rem` is pinned to the 10.8px root, so at the container's 1.35rem the gap-to-line ratio would
   fall from 0.62 to 0.46 on the very pages this scale exists to make readable. 1em restores it. */
body.plain-page .legal-content p,
body.plain-page .legal-content ul,
body.plain-page .legal-content ol {
    margin-bottom: 1em;
}

/* The legal page's header block: the title and the "Last updated" line beneath it read as one
   centered masthead, matching .calc-header h1 on the sibling calculator pages.

   The title is pinned in REM, not the inherited em, for the reason above: it must stay at the page
   title size this surface uses (.calc-page h1 / .calc-header h1 are both 2.3rem) rather than
   scaling off the body-copy value. */
body.plain-page .legal-content h1 {
    font-size: 2.3rem;
    margin-bottom: 6px;
    text-align: center;
}

/* The date line belongs to the TITLE, not to the body. app.css gives it `margin-bottom: 0` and
   Bootstrap gives the first paragraph `margin-top: 0`, so without this it sat 18px below the title
   and 0px above the prose, i.e. grouped with the wrong half and the "one masthead" above was not
   what the spacing produced. The h1's own bottom margin is trimmed to 6px to close the pair up. */
body.plain-page .legal-content .legal-updated {
    margin-bottom: 1.6em;
    text-align: center;
}

.calc-not-found .calc-header h1 {
    color: #b04a37;
}

.calc-not-found-list {
    margin-top: 2rem;
}

.calc-not-found-list > h2 {
    font-size: 1.3rem;
    margin: 0 0 1rem;
}

/* ── Comparison table (shared) ───────────────────────────────────────────────────────────────
   "Same inputs, different X" two-or-three-column table. Shared pattern: Compound Interest uses it
   for the four compounding frequencies; Salary Sacrifice uses it for the before/after-sacrifice
   columns. Moved here from compound-interest.css when Salary Sacrifice became the second consumer.
   The .calc-page prefix raises specificity past the page's font-size sledgehammer. */
.calc-page .calc-comparison {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2rem 0;
    font-size: 1.1rem;
}

.calc-page .calc-comparison caption {
    text-align: left;
    font-weight: 600;
    padding: 0.4rem 0;
    color: #495057;
}

.calc-page .calc-comparison thead th {
    text-align: left;
    padding: 0.5rem 0.8rem;
    border-bottom: 2px solid #dee2e6;
    color: #6c757d;
    font-weight: 500;
    font-size: 1.2rem;
}

.calc-page .calc-comparison thead th:last-child,
.calc-page .calc-comparison tbody td:last-child,
.calc-page .calc-comparison thead th:nth-child(2),
.calc-page .calc-comparison tbody td:nth-child(2) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.calc-page .calc-comparison tbody th,
.calc-page .calc-comparison tbody td {
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid #e9ecef;
}

.calc-page .calc-comparison tbody tr:last-child th,
.calc-page .calc-comparison tbody tr:last-child td {
    border-bottom: none;
}

.calc-page .calc-comparison tbody th {
    text-align: left;
    font-weight: 500;
}

/* The highlighted row - the user's selected frequency (Compound Interest) or the take-home
   bottom line (Salary Sacrifice). Bolder + a neutral light-grey tint (no funny colours). */
.calc-page .calc-comparison .calc-comparison-selected th,
.calc-page .calc-comparison .calc-comparison-selected td {
    background: #f1f3f5;
    font-weight: 600;
}

/* A comparison table's bottom-line row uses the totals-row convention (.calc-result-totalrow,
   e.g. Salary Sacrifice's "Take-home pay"). Re-assert bold at higher specificity (0,3,1) so it
   beats `.calc-comparison tbody th { font-weight: 500 }` (0,3,0), which otherwise leaves the row
   label un-bold while its values stay bold. */
.calc-page .calc-comparison .calc-result-totalrow th,
.calc-page .calc-comparison .calc-result-totalrow td {
    font-weight: 700;
}

/* ── Planner references (pre-launch gating) ──────────────────────────────────────────────────
   Any user-facing reference to the full planner (funnel prose, FAQ clauses, handoff notes) is
   wrapped in <span class="calc-simulator-only">...</span>. While the planner is gated off the public
   surface pre-launch, the page stamps data-simulator-gated="true" onto the .calc-page article (from
   CalculatorPageModel.PlannerGated) and this rule hides every such reference, so a calc never points
   at a planner that isn't there. Post-launch the attribute is absent and the references show again,
   with no re-editing. The "Open full planner" CTA button is gated separately in _CalculatorCta. See
   CalculatorDesignSchema.md "Planner references". */
.calc-page[data-simulator-gated="true"] .calc-simulator-only {
    display: none;
}

/* ── Commentary box (shared) ─────────────────────────────────────────────────────────────────
   Optional single catchy takeaway sentence at the top of the results area, spanning its full width
   above the pills. Any calc can populate it by returning a pre-formatted Commentary string on its
   result (numbers wrapped in <strong>); calcs that leave it empty keep the box hidden. One box, one
   rule, no per-calc chrome - the standard home for a calc's headline commentary. Rendered as the
   first, full-width flex item inside .calc-results so it sits above the pills / cards. */
.calc-commentary {
    flex: 1 1 100%;
    margin: 5px;
    padding: 1rem 1.2rem;
    background: #f3f3f3;
    border: 1px solid #555555;
    border-radius: 8px;
}

.calc-page .calc-commentary {
    font-size: 1.4rem;
    color: #333;
    line-height: 1.5;   /* looser leading so the two-sentence takeaway reads more easily */
}

.calc-page .calc-commentary strong {
    /* font-size: inherit beats the page font-size sledgehammer (.calc-page strong { 1.35rem }), so the
       bold numbers match the surrounding commentary size instead of rendering visibly smaller. */
    font-size: inherit;
    font-weight: 700;
    color: #1a1a1a;
}

/* ── Salary-Sacrifice "where it goes" anatomy ────────────────────────────────────────────────
   Reuses .calc-result-breakdown; the sub-rows are indented and the saved-tax/NI amounts render in a
   green "saving" colour (a deliberate semantic state colour, like .calc-deduction's red, governed by
   Calculators.md §"Off-chart colour restraint" - not a chart-series colour). */
.calc-page .calc-result-breakdown .calc-anatomy-sub th {
    padding-left: 1.6rem;
    font-weight: 400;
    color: #555;
}

.calc-page .calc-result-breakdown .calc-relief-amount {
    color: #2f7d32;
}

/* ── Salary-Sacrifice annual-allowance status ────────────────────────────────────────────────
   Full-width row under the result cards: "used £X of £Y" + a usage meter + (when over) the yellow
   over-allowance warning reusing the .calc-validation-issues banner styling. */
.calc-aa {
    flex: 1 1 100%;
    padding: 0.8rem 0;
}

.calc-page .calc-aa-status {
    text-align: center;
    color: #555;
    margin: 0;
}

.calc-page .calc-aa-status .ssp-ok {
    color: #2f7d32;
    font-weight: 600;
}

.calc-aa-meter {
    height: 10px;
    max-width: 520px;
    margin: 0.6rem auto 0;
    border-radius: 6px;
    background: #eef1f5;
    border: 1px solid #d8dde4;
    overflow: hidden;
}

.calc-aa-meter > span {
    display: block;
    height: 100%;
    background: var(--chart-money-in);
}

.calc-aa-warning {
    margin-top: 1rem;
}

/* ── Result-level callouts: a full-width note below the result cards ──────────────────────────
   Named for the ROLE, not for the calculator that landed them, because they are in the shared sheet
   and a per-page name would foreclose the reuse being in the shared sheet exists to allow: a pension's
   annual-allowance taper can adopt .calc-callout-warning as-is, whereas it could only have reached a
   .calc-lisa-charge-note by taking a lying class name or by appending a fourth selector, which is
   exactly the forking this is meant to avoid.

   They share the .calc-commentary geometry (a full-width flex item inside .calc-results, same padding
   and radius) so a page reads as one product, and differ only in the accent that carries the tone.
   THREE tones, and the tone is the whole distinction: Warning says this configuration cannot do what
   you asked, Neutral is a standing caveat that renders on the happy path too, and Good says the answer
   came out in your favour. Consumers (Aug 2026): Lifetime ISA (cap + eligibility warnings), Savings
   Goal (unreachable warning, already-met note), Self-employed Tax (loss warning, allowance note),
   Pension Drawdown (pot-exhausted warning), Pension Annuity (the annuity-vs-drawdown note), and
   Student Loan Repayment (the two verdicts).

   The Good tone arrived in Aug 2026 with the student-loan salary-sacrifice mode, which had been using a
   page-local `.calc-verdict-*` family for exactly this job: a second vocabulary for "a coloured box
   stating a conclusion", invisible to anyone reading the shared stylesheet, and a CodingConventions.md
   section 6 violation the moment a second page wanted a positive verdict. Folded in here rather than
   grown further. */
.calc-callout {
    flex: 1 1 100%;
    margin: 5px;
    padding: 1rem 1.2rem;
    border-radius: 8px;
    font-size: 1.4rem;
    line-height: 1.5;
}

/* A hard stop: this configuration cannot do what the user is asking of it. Amber, the palette's "this
   changes your answer" accent, not red: it is not an error and not the user's mistake. A £500,000 home
   is a perfectly legal thing to buy. */
.calc-callout-warning {
    background: #fff8e6;
    border: 1px solid #d9a441;
}

/* A standing caveat rather than a warning about THIS configuration: it renders on the happy path too,
   so amber would cry wolf on the bare-defaults URL. */
.calc-callout-neutral {
    background: #f3f3f3;
    border: 1px solid #555555;
}

/* The answer came out in the reader's favour, and saying so is the point of the box. Green, the
   palette's winner accent, and used only where the page can actually assert a gain: a verdict that is
   merely "not bad" takes Neutral instead, or the reader learns to discount the colour. */
.calc-callout-good {
    background: #eaf6ee;
    border: 1px solid #3f8f5b;
}

/* ────────────────────────────────────── The visually-hidden screen-reader helper ──────────────────────────────────────
   Keeps content in the accessibility tree and in the indexed HTML while rendering nothing. Both names
   are the same helper: .calc-sr-only is the calc-namespaced spelling, .visually-hidden the WAI-standard
   one some pages prefer.

   HERE, in the sheet EVERY calculator loads, and nowhere else. It used to live in calculator-charts.css
   and be copied into three per-page sheets, so a page loading calculator.css alone emitted the class
   with no rule behind it and hid nothing at all: mortgage-affordability rendered its screen-reader
   working, a 303x206px table of intermediate figures, visibly on the page.

   APPLY IT TO A BLOCK, NEVER TO A <table>, which it cannot hide, silently. A table box's used width is
   FLOORED at its min-content width (CSS 2.1 s17.5.2), so `width: 1px` is ignored and the table lays out
   at its data's natural width; `clip` still hides it, so nothing LOOKS wrong while the page gains that
   much horizontal scroll. Measured 2026-09-25 at 375px: 639px wide on premium-bonds-return, 132px of
   sideways scroll, and nine public calculator routes doing the same. `table-layout: fixed` does NOT
   rescue it, it selects the COLUMN algorithm rather than the table box's own width floor, and a rule
   here claiming it did shipped, read as a closed defect, and left those nine pages scrolling for as
   long as it stood. `max-width` and `contain` are floored the same way. `display: block` does lift the
   floor, but it changes how the engine maps the table into the accessibility tree, which is the one
   thing these tables exist for. So the table keeps its display and a <div> carrying this class wraps
   it. Guarded by TestScreenReaderTablesAreWrapped. */
.calc-sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── Mobile robustness ───────────────────────────────────────────────────────────────────────
   Keep the calc surface inside a narrow phone viewport. The base layout stacks a lot of horizontal
   chrome - Bootstrap .container padding + .explore-main margin + the article's own margin + the
   article's side padding (~67px PER SIDE) - which on a ~360px phone left only ~225px for content.
   Combined with the fixed-width pie, the long nowrap freshness pill, and the large body fonts, the
   page overflowed horizontally and the card was clipped on the right. These rules reclaim the side
   room and let the dense elements fit. The structural shrink fixes (fluid .calc-result-pie,
   min-width:0 on .calc-result-card, minmax(0,1fr) on the stacked grid) live with their base rules
   above; the chrome + type trims below are phone-scoped. */

@media (max-width: 768px) {
    /* Reclaim horizontal room: drop the article's own side margin (the card now spans the main's
       width, with a small gutter from the main margin + container padding) and trim its side
       padding; shrink the main's margin to a small gutter. */
    body.plain-page .explore-main {
        margin: 8px;
    }

    .explore-main article {
        margin: 0 0 12px;
        padding: 5px 14px;
    }

    /* body.plain-page .legal-content sets `padding: 22px 28px` at (0,2,1), which beats the rule
       above at (0,1,1) even inside this media query, so the phone trim has to be restated at the
       same specificity or the legal pages keep desktop side padding on a 360px screen. Vertical
       padding is kept: the prose page wants the breathing room the calculator grid does not. */
    body.plain-page .legal-content {
        padding: 16px 14px;
    }

    /* Let the long current breadcrumb crumb wrap onto its own line instead of being squeezed beside
       the chevron, and read a touch smaller on a phone. */
    body.plain-page .explore-breadcrumb {
        flex-wrap: wrap;
        font-size: 1.3em;
    }

    /* "Updated to fiscal year 2026-27" is wider than a phone viewport at its nowrap default; allow
       it to wrap so it can never force horizontal overflow. */
    .calc-page .calc-asof-pill {
        white-space: normal;
    }
}

@media (max-width: 480px) {
    /* Phone-only type trims. A tablet's wider column fits the full-size headings / table, so these
       apply only at true phone widths and stay clearly legible - the design's large-type intent for
       the 50+ audience is preserved, just sized to the screen. */

    /* Section headers ("Information" / "FAQ" / ...) are single unbreakable words beside a fixed
       icon; at 2.2rem the pair can exceed a narrow column. */
    .calc-page .calc-section-title {
        font-size: 1.7rem;
    }

    .calc-page .calc-asof-pill {
        font-size: 1.2rem;
    }

    /* Breakdown table: trim the body-reset rows (1.35rem) and the totals row (1.55rem) and tighten
       the label/number gap so each row sits on one line on a phone instead of wrapping. Re-assert
       the per-band detail rows a step smaller so the main-row / band-row size hierarchy survives
       (the band rules above share this selector's specificity, so source order decides - keep these
       AFTER the breakdown trim). */
    .calc-page .calc-result-breakdown th,
    .calc-page .calc-result-breakdown td {
        font-size: 1.15rem;
    }

    .calc-page .calc-result-breakdown th {
        padding-right: 0.9rem;
    }

    .calc-page .calc-result-totalrow th,
    .calc-page .calc-result-totalrow td {
        font-size: 1.3rem;
    }

    .calc-page .calc-result-subtotalrow th,
    .calc-page .calc-result-subtotalrow td {
        font-size: 1.12rem;
    }

    .calc-page .calc-result-bandname th,
    .calc-page .calc-result-bandrow th,
    .calc-page .calc-result-bandrow td {
        font-size: 1rem;
    }

    /* Pie legend reads fine smaller and packs onto fewer rows on a phone. */
    .calc-page .calc-result-pie-legend li {
        font-size: 1.05rem;
    }
}