/* Styles every calculator page shares.

   Load order on a calculator page:
     brand-shared.css         the whole site: header, footer, fonts, buttons
     calculator-shared.css    this file: what the calculators have in common
     <name>-calculator.css    what's unique to that one calculator

   A rule lives here when at least three of the six calculators had it,
   word for word, and it doesn't touch anything on the others. Where a
   calculator needs something different it says so in its own file, which
   loads after this one and so wins on the same selector.

   Form fields - labels, hints, the boxes you type into, dropdowns and the
   brown glow round the box you're in - are defined here only, so every
   calculator's fields look and behave the same. */

/* ---------- calculator title in the header ---------- */
  .calc-main { flex: 1; }
  .logotype-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--navy-deep);
  }
  .logotype-link:hover .logotype-name { color: var(--brown); }
  .logotype-link .calc-mark {
    height: 36px;
    width: auto;
    flex: none;
    display: block;
  }
  /* The mark is inline SVG (not <img>) so its glyph colours are set here
     rather than baked into a raster file. At rest the pound sign is navy and
     the bar is brown (matching the wordmark); on hover the whole lockup -
     icon, divider and title text - shifts to the same orange/brown accent
     together. */
  .logotype-link .calc-mark .mark-glyph { fill: var(--navy); }
  .logotype-link .calc-mark .mark-bar { fill: var(--brown); }
  .logotype-link:hover .calc-mark .mark-glyph { fill: var(--brown); }
  /* Thin divider between the mark and the title, skewed to the same
     skewX(-12deg) angle as the "B" in the Burgess Software wordmark and
     every other brand fragment on the site. */
  .logotype-divider {
    width: 2px;
    height: 34px;
    background: var(--line);
    transform: skewX(-12deg);
    flex: none;
    display: block;
  }
  .logotype-link:hover .logotype-divider { background: var(--brown); }
  .logotype-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .logotype-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20.5px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--navy-deep);
  }
  .logotype-kind {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.2;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--brown);
  }
  @media (max-width: 560px) {
    .logotype-link .calc-mark { height: 30px; }
    .logotype-divider { height: 27px; }
    .logotype-name { font-size: 17.5px; }
  }

/* ---------- the calculator shell ---------- */
  /* Colours common to the calculators. Each calculator adds its own on top
     (--surface, --equity, --growth and so on) in its own file. */
  .calc-shell {
    --bg: #F7F5F1;
    --ink: #142033;
    --ink-soft: #55647a;
    --line: #dce3ee;
    --brand: #143E6F;
    --brand-2: #0D2B4E;
    --accent: #895430;
    /* The fill inside a field, and the ad slots' colours (an empty or
       part-filled slot matches the page in dark mode too, rather than
       sitting there as a pale box). */
    --surface-alt: #f0f3f9;
    --ad: #eef1f7;
    --ad-line: #c7d0e2;
    --ad-ink: #8a94ab;
    --shadow: 0 6px 22px rgba(20, 32, 51, 0.08);
    --radius: 4px;
    /* Spacing between form fields, the same on every calculator: down the
       page between one field and the next, and across between two side by
       side. Each page's layout (grid gaps or field margins) uses these. */
    --field-gap: 14px;
    /* The headline answer on each calculator ("Monthly payment", "Take-home
       pay"...): its size and colour. A page can still colour a particular
       answer (Student Loan turns "Paid off" green). */
    --headline-size: clamp(1.9rem, 5vw, 2.5rem);
    --headline-colour: var(--ink);
    /* The three sizes of ordinary text, so no calculator drifts off them:
       reading text (card introductions, the "Using this calculator" and
       sources cards, tables, warnings); small text (field labels, result
       labels, notes, chart keys); and the finest print (the hint under a
       field, "Results update as you type", the page disclaimer). */
    --text-read: .9rem;
    --text-small: .82rem;
    --text-fine: .78125rem;
    --field-gap-across: 16px;
    /* No local font-family here — it inherits the shared brand font (Inter,
       via --font-body in brand-shared.css) from <body>. A calculator that
       sets its own system-font stack renders every string a few pixels
       narrower and taller than the rest of the site. */
    color: var(--ink);
    margin: 0;
    padding: 0;
    /* Transparent, not a flat fill. The page's cream gradient lives on
       <body>, and an opaque background here would paint straight over it.
       Dark mode restores an opaque background just below, because there the
       shell genuinely is a different surface from the page rather than the
       same one. */
    background: transparent;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  @media (prefers-color-scheme: dark) {
    .calc-shell {
      --bg: #0e1622;
      --ink: #eaf0f7;
      --ink-soft: #a4b2c5;
      --line: #2a3747;
      --brand: #6ea3d8;
      --brand-2: #0D2B4E;
      --accent: #c98a54;
      --surface-alt: #1d2635;
      --ad: #151d2a;
      --ad-line: #2c3850;
      --ad-ink: #6b7690;
      --shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
      background: var(--bg);
    }
  }
  .calc-shell, .calc-shell * { box-sizing: border-box; }
  .calc-shell .wrap { max-width: 1180px; margin-inline: auto; padding-inline: 16px; }

/* ---------- advertisement slots ---------- */
  .calc-shell .ad-slot {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 6px;
    background: var(--ad);
    border: 1px dashed var(--ad-line);
    border-radius: var(--radius);
    color: var(--ad-ink);
    text-align: center;
    padding: 10px;
    overflow: hidden;
    /* Was copied into five of the six calculators' own stylesheets with
       the same value - kept here instead so the 20px card rhythm it's
       meant to match can't drift out of step on just one of them. */
    margin-block: 20px;
  }
  .calc-shell .ad-slot::before {
    content: "Advertisement";
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .calc-shell .ad-slot:has(ins[data-ad-status="filled"])::before { content: none; }
  .calc-shell .ad-slot::after {
    display: block;
    font-size: .58rem;
    letter-spacing: .04em;
    opacity: .65;
    margin-top: -2px;
  }
  .calc-shell .ad-slot:has(ins[data-ad-status="filled"])::after { content: none; }
  .calc-shell .ad-leaderboard::after { content: "(Responsive, 100px tall)"; }
  .calc-shell .ad-inline::after { content: "(Responsive, 100px tall)"; }
  .calc-shell .ad-rectangle::after { content: "(Responsive, up to 320x260)"; }
  .calc-shell .ad-leaderboard { min-height: 100px; }
  .calc-shell .ad-rectangle { min-height: 260px; width: 100%; }
  .calc-shell .ad-inline { min-height: 100px; }
  .calc-shell aside.rail .ad-slot { margin-top: 0; }

/* ---------- layout and cards ---------- */
  .calc-shell .layout { display: grid; }
  .calc-shell .layout > * { min-width: 0; }
  .calc-shell .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
  }
  /* text-wrap: balance keeps a wrapped heading from leaving a single
     orphaned word on its own line - it evens out where the break falls
     instead. Support-only: browsers that don't know the property just
     wrap normally, so there's no fallback needed. */
  .calc-shell .card h2 {
    margin: 0 0 14px;
    font-size: 1.12rem;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  /* A heading with a one-line introduction under it sits close to it, so
     the two read as one unit; the introduction's own margin then spaces
     them from what follows. */
  .calc-shell .card h2:has(+ .sub) { margin-bottom: 4px; }
  /* ~ rather than + on purpose: on mobile the inline ad between two cards
     (#ad-inline) is hidden rather than removed from the markup, so a card
     right after it is still the very next .card in the DOM, just with a
     hidden, non-.card element sitting between them. + only matches an
     immediately-adjacent sibling, so it missed this case entirely and the
     card lost its top spacing whenever the ad above it was hidden - four
     of the six calculators had a card sitting flush against the one above
     it on a phone. ~ matches any later .card with an earlier .card
     sibling, hidden ads or not, and margin collapsing keeps it from
     doubling up with the ad's own spacing on the desktop widths where the
     ad is shown. */
  .calc-shell .card ~ .card { margin-top: 20px; }
  .calc-shell .card .sub {
    margin: 0 0 16px;
    color: var(--ink-soft);
    font-size: var(--text-read);
  }
  /* A card's one-line introduction under its heading ("Work out your
     take-home pay…") gets a little more room below it than the gap between
     fields, so it reads as an introduction rather than the first field's
     label. */
  .calc-shell .card h2 + .sub { margin-bottom: 20px; }
  /* A small note under a result or field - was copied identically into
     four of the six calculators' own stylesheets. */
  .calc-shell .note { font-size: var(--text-small); color: var(--ink-soft); margin-top: 12px; }
  /* Stamp duty and student loan place their inputs and results with
     explicit grid areas rather than the simple content+rail pattern the
     other calculators use, so their .layout keeps the desktop column-gap
     (22px) once they drop to one column on mobile too - the :has() below
     matches only a .layout built that way (identified by its .col-results
     child), so this doesn't touch the other four calculators' .layout,
     which is already single-column-safe without it. Was copied into both
     of those calculators' own stylesheets identically; kept here instead
     so it can't drift the way the disclaimer spacing above once did. */
  @media (max-width: 1080px) {
    .calc-shell .layout:has(> .col-results) { gap: 20px; }
  }

/* ---------- form fields ---------- */
  .calc-shell fieldset {
    border: 0;
    margin: 0 0 18px;
    padding: 0;
  }
  .calc-shell fieldset.first legend { padding-top: 0; }
  .calc-shell .grid-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--field-gap) var(--field-gap-across);
  }
  @media (max-width: 560px) {
    .calc-shell .grid-inputs { grid-template-columns: 1fr; }
  }
  .calc-shell .field.full { grid-column: 1 / -1; }

  /* Labels, hints and the boxes you type into look the same on every
     calculator: grey labels and hints, a light box with the unit (£, %,
     years) inside it, and a brown glow round whichever box you're in. */
  .calc-shell label.lbl,
  .calc-shell span.lbl {
    display: block;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 5px;
  }
  .calc-shell .field .hint,
  .calc-shell p.hint {
    display: block;
    margin: 6px 2px 0;
    font-size: var(--text-fine);
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink-soft);
  }
  /* display: block above outranks the browser's own [hidden] rule, so a
     hint a page hides (Inflation's "Measured by" note) needs this. */
  .calc-shell .field .hint[hidden],
  .calc-shell p.hint[hidden] { display: none; }

  /* The box: border and background live on the wrapper, not the input, so
     the unit sits inside the same box as the figure. */
  .calc-shell .input-money, .calc-shell .input-plain {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface-alt);
    transition: border-color .15s, box-shadow .15s;
  }
  .calc-shell .input-money:focus-within, .calc-shell .input-plain:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  .calc-shell .input-money .prefix, .calc-shell .input-plain .suffix {
    padding-inline: 12px;
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.95rem;
    user-select: none;
  }
  /* Pushed to the right-hand end of the field, and never wrapped: the
     input beside it asks for the full width, so a suffix long enough to
     be a phrase ("% of salary") would otherwise be squeezed onto two
     lines and stretch the field with it. */
  .calc-shell .input-plain .suffix {
    margin-inline-start: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  /* 1rem (16px) is also the smallest text an iPhone will let you type into
     without zooming the whole page in when you tap the field. */
  .calc-shell input[type="number"], .calc-shell input[type="text"], .calc-shell select {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 1rem;
    padding: 11px 12px;
    padding-inline-start: 4px;
    outline: none;
    font-family: inherit;
    /* Neither element sets its own line-height, so both were falling back
       to the browser's "normal" - which Chromium resolves a few px shorter
       for <select> than for <input>, even at the same font-size and
       padding. Pinning both to the same value removes that gap (this
       leaves the input's own height unchanged; only the select's grows to
       match it). */
    line-height: 1.25;
  }
  .calc-shell .input-money input { padding-inline-start: 0; }
  /* Dropdowns draw their own caret (below) rather than the browser's, so
     they match on every platform. Room is kept for it on the right, and an
     option too long for the box ends in "…" instead of running under it. */
  .calc-shell select {
    padding-inline-start: 12px;
    padding-inline-end: 34px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .calc-shell .select-wrap {
    display: block;
    position: relative;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface-alt);
    transition: border-color .15s, box-shadow .15s;
  }
  .calc-shell .select-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  .calc-shell .select-wrap::after {
    content: "\25BE";
    /* Same arrow with empty alternative text, so it isn't read out as part
       of a field's name ("Type ▾"). Browsers that don't know this form keep
       the line above. */
    content: "\25BE" / "";
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--ink-soft);
  }

  /* A word in a label or hint that is itself a choice - Student Loan's
     "Graduated in / First due to repay", PAYE's "£ per year / month". It
     takes the size of the text around it, with a dashed underline and a
     small caret so it reads as changeable. */
  .calc-shell span.mode-lbl { display: inline-block; position: relative; }
  .calc-shell .mode-lbl select {
    width: auto;
    margin: 0;
    padding: 0 18px 1px 0;
    border: 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--ink-soft) 45%, transparent);
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    line-height: 1.25;
    overflow: visible;
  }
  .calc-shell .mode-lbl select:hover,
  .calc-shell .mode-lbl select:focus-visible {
    color: var(--ink);
    border-bottom-color: var(--accent);
    outline: none;
  }
  /* Caret drawn on the wrapper rather than the select, so it sits clear of
     the text at any option's width. */
  .calc-shell .mode-lbl::after {
    content: "";
    position: absolute;
    right: 5px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -4px;
    border-right: 1.5px solid var(--ink-soft);
    border-bottom: 1.5px solid var(--ink-soft);
    transform: rotate(45deg);
    pointer-events: none;
  }
  /* These are the one place a field's text is smaller than 16px. An
     iPhone zooms the whole page in when you tap a field with smaller text,
     so on touch screens they go up to 16px instead. */
  @media (hover: none) and (pointer: coarse) {
    .calc-shell .mode-lbl select { font-size: 16px; }
  }

  .calc-shell button {
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 3px;
    border: 1px solid transparent;
    padding: 11px 20px;
    cursor: pointer;
  }

/* ---------- foot of the input card ---------- */
  /* There's no Calculate button (results follow the form, see
     live-input.js), so the space it used to take says so, and holds Reset
     as a quiet text control rather than a lone full-size button that
     looked like the thing to press. */
  .calc-shell .card-foot {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .calc-shell .card-foot .live-note {
    margin: 0;
    font-size: var(--text-fine);
    color: var(--ink-soft);
  }
  .calc-shell .reset-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    margin: 0;
    padding: 4px 2px;
    border: 0;
    border-radius: 3px;
    background: none;
    box-shadow: none;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
  }
  .calc-shell .reset-link:hover { color: var(--ink); }
  .calc-shell .reset-link:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
  .calc-shell .reset-link svg { width: 14px; height: 14px; flex: none; }
  .calc-shell .btn-ghost {
    background: var(--surface-alt);
    color: var(--ink);
    border-color: var(--line);
  }

/* ---------- results ---------- */
  .calc-shell .stat-hero {
    border-radius: 12px;
    padding: 18px 20px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface));
    border: 1px solid var(--line);
  }
  /* The label over a result figure, wherever it sits: a headline tile, a
     smaller tile in a grid, or a spotlight card's big figure. */
  .calc-shell .k { font-size: var(--text-small); color: var(--ink-soft); font-weight: 600; }
  /* The answer: the largest thing in the results, the same size on every
     calculator. */
  .calc-shell .stat-hero .v {
    font-size: var(--headline-size);
    color: var(--headline-colour);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-top: 2px;
    /* A very large answer (billions, on a narrow phone) breaks onto a
       second line rather than running out of its box. */
    overflow-wrap: anywhere;
  }
  .calc-shell .stat-hero .sub { font-size: var(--text-small); color: var(--ink-soft); margin-top: 3px; }
  /* Two stat-hero tiles side by side, for the calculators whose headline
     is a pair of results shown together (a total and a breakdown of it,
     say). Was copied identically into four of the six calculators' own
     stylesheets under the name .headline - renamed and moved here so a
     future calculator can use the same layout by name rather than by
     copying the rule again. PAYE's single boxed figure (.headline-card)
     and inflation's plain lead-in line (.headline-line) are the site's
     other two ways of showing a headline result; see those classes for
     the other two. */
  .calc-shell .stat-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
  }
  @media (max-width: 560px) { .calc-shell .stat-hero-grid { grid-template-columns: 1fr; } }
  /* PAYE's headline: one figure in its own card, brand-coloured, rather
     than a tile from the grid above. Was page-specific CSS in
     paye-calculator.css; moved here, under its own name, so a future
     calculator can use the same boxed look without copying it. The
     "nothing changed" year-note line stays in paye-calculator.css - it's
     genuinely specific to that calculator's tax-year switch. */
  .calc-shell .headline-card {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px 20px; margin-bottom: 16px;
  }
  .calc-shell .headline-card .lbl { color: var(--ink-soft); font-size: .9rem; font-weight: 600; }
  .calc-shell .headline-card .big { font-size: var(--headline-size); color: var(--accent); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin-top: 2px; overflow-wrap: anywhere; }
  .calc-shell .headline-card .big small { font-size: .9rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
  .calc-shell .headline-card .mo { color: var(--ink-soft); font-size: var(--text-small); margin-top: 3px; }
  .calc-shell .proj-empty { text-align: center; color: var(--ink-soft); }

  /* The split bar under a headline, and its key */
  .calc-shell .bar {
    margin-top: 14px;
    height: 26px;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    border: 1px solid var(--line);
  }
  .calc-shell .bar span {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
  }
  /* The key under a split bar (.legend) and under a line chart
     (.chart-legend) look the same; they keep separate names only because
     some dot colours differ between the two on the same page (Student
     Loan's written-off dot is a solid block under the bar, a dashed line
     under the chart). */
  .calc-shell .legend,
  .calc-shell .chart-legend {
    display: flex;
    gap: 18px;
    margin-top: 10px;
    font-size: var(--text-small);
    color: var(--ink-soft);
    flex-wrap: wrap;
  }
  .calc-shell .legend .dot,
  .calc-shell .chart-legend .dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 3px;
    margin-inline-end: 6px;
    vertical-align: -1px;
  }

  /* Smaller figures in a grid */
  .calc-shell .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 6px;
  }
  .calc-shell .stat {
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 13px 14px;
  }
  .calc-shell .stat .v { font-size: 1.2rem; font-weight: 700; margin-top: 2px; letter-spacing: -0.01em; }

/* ---------- year-by-year table ---------- */
  .calc-shell table.proj {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-read);
    margin-top: 4px;
  }
  .calc-shell table.proj th, .calc-shell table.proj td {
    text-align: end;
    padding: 9px 10px;
    border-bottom: 1px solid var(--line);
  }
  .calc-shell table.proj th:first-child,
  .calc-shell table.proj td:first-child { text-align: start; }
  .calc-shell table.proj thead th {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
  }
  /* The first cell of each row is a row header (<th scope="row">), so a
     screen reader can say which row a figure belongs to. It keeps the look
     of an ordinary cell. */
  .calc-shell table.proj tbody th { font-weight: inherit; }
  .calc-shell table.proj tbody tr:last-child td,
  .calc-shell table.proj tbody tr:last-child th { border-bottom: 0; font-weight: 700; }
  .calc-shell .table-scroll { overflow-x: auto; }

  /* The disclaimer at the foot of every calculator, in its own <aside>
     after the closing ad: the finest print on the page, capped in width
     and centred. */
  .calc-shell .disclaimer {
    max-width: 820px;
    margin: 40px auto 40px;
    font-size: var(--text-fine);
    color: var(--ink-soft);
    text-align: center;
  }
  .calc-shell .rail .card { position: sticky; top: 16px; }

/* ---------- balance chart ---------- */
  .calc-shell .chart-wrap {
    width: 100%;
    /* currentColor drives the axis text and gridlines inside the SVG. */
    color: var(--ink-soft);
  }
  .calc-shell .chart-wrap svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
  }
  .calc-shell .chart-legend .dot.base {
    background: transparent;
    border-top: 2px dashed var(--ink-soft);
    height: 0;
    border-radius: 0;
    vertical-align: 4px;
    width: 14px;
  }

/* ---------- checkbox and radio rows ---------- */
  .calc-shell .check {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: var(--text-read);
    font-weight: 500;
  }
  .calc-shell .check input { margin-top: 3px; }
  /* A checkbox's own inline annotation ("(no employee National Insurance)"),
     sitting beside the choice on the same line - a different thing from the
     block-level .note under a result or field above, which this selector is
     specific enough to always win against. margin-top: 0 cancels that other
     .note's 12px top margin: unlike font-size and colour, a property one
     rule doesn't set still falls through to a less specific rule that does,
     so without this line every .check .note here would inherit a gap meant
     for a paragraph, not a flex item beside a checkbox - which is what
     pushed PAYE's and Stamp Duty's checkbox notes out of line. */
  .calc-shell .check .note { color: var(--ink-soft); font-weight: 400; font-size: var(--text-small); margin-top: 0; }
  /* .check is a flex row, so the choice text and the .note after it used to
     be two separate flex items (the text a bare, unwrapped node beside
     .note as its own element). Flexbox doesn't let items wrap onto a new
     line by default, so on a narrow phone each one shrank and wrapped its
     own text independently instead - the choice text stacking in one
     narrow column with .note stacking in a second column beside it, rather
     than reading as one sentence. Wrapping the choice text and .note
     together in a single .check-text span makes them one flex item, so
     their combined text wraps as normal inline content: the note trails
     the choice text and the whole thing breaks like an ordinary sentence. */
  .calc-shell .check .check-text { display: inline; }
  .calc-shell .radios { display: grid; gap: 6px; }

  /* The two explanatory cards under the results, on all six calculators:
     "Using this calculator", then "Where the figures come from" (or, on
     Mortgage and Compound interest, which use no published rates, "How the
     figures are worked out"). Both are .info-card: an ordinary card h2, then
     plain paragraphs and lists, all in one size and colour - the same as a
     card's introduction (.sub), --text-read - so neither card reads as small print. The
     sources card is there for anyone checking, and for search engines and
     AI tools, which favour pages that cite primary sources. */
  .calc-shell .info-card p,
  .calc-shell .info-card ul { margin: 0; font-size: var(--text-read); line-height: 1.6; color: var(--ink-soft); }
  .calc-shell .info-card ul { padding-left: 20px; }
  .calc-shell .info-card :is(p, ul) + :is(p, ul) { margin-top: 10px; }
  .calc-shell .info-card li + li { margin-top: 4px; }
  .calc-shell .info-card a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

  /* Published rates, and how current they are - Stamp Duty and Student
     Loan, the two calculators built on figures a government changes each
     year (data-expiry.js runs both). .rate-line states the rules actually
     driving the answer, so the reader can see why without opening the
     FAQ. .data-age is a quiet line under it for most of the year, using
     the palette's own signal colours: --growth while the figures are in
     date, --warn once they are close to lapsing. Past that date it is
     replaced entirely by a .warn-box, the same component Student Loan uses
     to say repayments aren't covering the interest - stale figures deserve
     the loud treatment, not a dimmer version of the quiet one. */
  .calc-shell .rate-line {
    margin: 14px 0 0;
    padding: 11px 13px;
    border-radius: 3px;
    background: var(--surface-alt);
    border: 1px solid var(--line);
    font-size: var(--text-small);
    color: var(--ink-soft);
  }
  .calc-shell .data-age {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 14px 0 0;
    font-size: var(--text-small);
    line-height: 1.45;
    color: var(--ink-soft);
  }
  .calc-shell .data-age .pip {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    /* Nudged down to sit on the first line's optical centre rather than its
       cap height, since the text beside it often wraps. */
    margin-top: .42em;
    background: var(--growth);
    flex: none;
  }
  .calc-shell .data-age.is-due { color: var(--warn); }
  .calc-shell .data-age.is-due .pip { background: var(--warn); }
  .calc-shell .warn-box {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 3px;
    background: var(--warn-soft);
    border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
    border-inline-start: 3px solid var(--warn);
    font-size: var(--text-read);
    color: var(--ink);
  }
  .calc-shell .warn-box strong { color: var(--warn); }
  .calc-shell .warn-box.data-expired { margin-top: 12px; font-size: var(--text-small); }