/*
 * 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.1rem,
   no exceptions. This beats Bootstrap's per-element defaults (h2/h3/dl/dd/li/etc.) and any
   stray rule in app.css. Two visual-headline opt-outs follow below: the page H1 and the
   £result-headline figure. 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.1rem. */
.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). */
.calc-asof-pillrow {
    text-align: center;
    margin: 0 0 0.6rem;
}

.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 {
        grid-template-columns: 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;
}

/* 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;
}

/* 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 calculation") 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;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/*
 * .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 stack vertically inside the (transparent) Pills card, each pill its own white box -
   visually separate but grouped under one card. */
.calc-pills {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
}

.calc-pill {
    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 - used by the tooltip pseudo-elements below to
       opt into position-try-fallbacks (the browser auto-shifts the tooltip when the default
       centered position would overflow the viewport). Browsers without anchor support
       silently ignore the anchor-name and fall back to 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 18em wide.
   Hidden by default; shown on hover, keyboard focus, or `is-open` (set by JS on tap toggle).

   Anchor-positioning layer: when the centered tooltip would overflow the viewport (typically
   on narrow columns where the (i) sits near the left edge), the browser auto-shifts to one
   of the @position-try blocks below. Browsers without anchor positioning ignore the
   `position-anchor` / `position-try-fallbacks` lines and fall back to the centered layout
   they had before. See DF.Claude/Features/Calculators.md §"Tooltip 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;
    max-width: 24em;
    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;
    visibility: hidden;
    transition: opacity 120ms ease, visibility 120ms ease;
    z-index: 100;
    white-space: normal;

    /* Bind to the .calc-pill-info / .calc-field-info anchor so the fallbacks below activate
       when the centered position would clip. */
    position-anchor: --info-anchor;
    position-try-fallbacks: --tooltip-shift-right, --tooltip-shift-left;
}

/* Fallback: tooltip's left edge pinned to the icon's left, extending rightward. Used when
   the centered position would clip on the LEFT (icon near the left edge of the viewport -
   the case the user hit with a long legend that wrapped the (i) onto a new line). */
@position-try --tooltip-shift-right {
    left: 0;
    right: auto;
    transform: none;
}

/* Symmetric fallback: tooltip's right edge pinned to the icon's right, extending leftward.
   Used when the centered position would clip on the RIGHT (icon near the right edge). */
@position-try --tooltip-shift-left {
    left: auto;
    right: 0;
    transform: none;
}

.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 {
    opacity: 1;
    visibility: visible;
}

/* 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;
    visibility: hidden;
    transition: opacity 120ms ease, visibility 120ms ease;
    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 {
    opacity: 1;
    visibility: visible;
}

/* 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;
}

/* 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-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. */
.calc-chart-footnote {
    color: #555;
    font-size: 1.05rem;
    margin: 0.6rem 0 0;
    text-align: center;
    max-width: 30em;
}

/* 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;
}
.calc-page .calc-related-cta a {
    font-size: inherit;
}

.calc-result-pie {
    width: 240px;
    height: 240px;
}

/* 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); }

/* 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;
}

/* 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. */
.calc-page .calc-citation-external-icon {
    font-size: 0.75em;
    margin-left: 0.3em;
    vertical-align: 0.1em;
    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: 1.6rem;
    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.45rem;
    line-height: 1.25;
    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: 0.9rem;
    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;
}

body.plain-page .explore-breadcrumb {
    font-size: 1.5em;
}

/* 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;
}

/* Center the Privacy / Terms 780px-max-width column on plain-page. */
body.plain-page .legal-content {
    margin-left: auto;
    margin-right: auto;
}

.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-planner-only">...</span>. While the planner is gated off the public
   surface pre-launch, the page stamps data-planner-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-planner-gated="true"] .calc-planner-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;
    text-align: center;
}

.calc-page .calc-commentary {
    font-size: 1.6rem;
    color: #333;
}

.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;
}