/* ==========================================================================
   NHS Pay Band Calculator — core stylesheet
   NHS Identity palette, system font stack (zero webfont requests)
   ========================================================================== */

:root {
  /* NHS Identity colours */
  --nhs-blue: #005eb8;
  --nhs-dark-blue: #003087;
  --nhs-bright-blue: #0072ce;
  --nhs-light-blue: #41b6e6;

  /* The result panel. Kept as its own token — it can be moved a few percent
     off --nhs-dark-blue without dragging the hero gradient with it, since
     that token is also the gradient's first stop and the calculator card
     overlaps the bottom of the hero. Currently the same value. */
  --panel-dark: var(--nhs-dark-blue);
  --nhs-aqua: #00a9ce;
  --nhs-green: #009639;
  --nhs-dark-green: #006747;
  --nhs-yellow: #ffb81c;
  --nhs-warm-yellow: #ffb81c;
  --nhs-red: #da291c;
  --nhs-purple: #330072;

  /* Neutrals */
  --grey-1: #425563;
  --grey-2: #768692;
  --grey-3: #aeb7bd;
  --grey-4: #d8dde0;
  --grey-5: #e8edee;
  --white: #ffffff;
  --ink: #212b32;
  --ink-soft: #4c6272;

  /* Headings only. A near-black with a slightly bluer cast than --ink:
     rgb(27,42,58) against rgb(33,43,50), which is 3.8% darker with +8 blue.
     Kept as its own token because --ink also paints the footer background
     and chart text, which must not move with it.

     TO REVERT: set this to var(--ink). Nothing else needs touching. */
  --ink-heading: #1b2a3a;

  --surface: #ffffff;
  --surface-alt: #f0f4f5;

  --radius: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(33, 43, 50, .08);
  --shadow-md: 0 4px 16px rgba(33, 43, 50, .1);
  --shadow-lg: 0 12px 32px rgba(33, 43, 50, .12);

  --wrap: 1140px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --focus: #ffeb3b;
}

/* --------------------------------------------------------------- Reset -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface-alt);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  line-height: 1.25;
  margin: 0 0 .6em;
  color: var(--ink-heading);
  font-weight: 700;
  letter-spacing: -.015em;
}

h1 { font-size: clamp(1.85rem, 5vw, 2.9rem); }
h1 { color: var(--nhs-dark-blue); }
h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.1rem, 2.4vw, 1.35rem); }

/* --------------------------------------------------------------------------
   SECTION MARKER
   Headings used to be dark blue, a shade away from the link blue underneath
   them. At h3 size that reads as clickable, and on a long guide page it puts
   a lot of competing blue on screen.

   So hierarchy is carried by a mark rather than by colour: a short accent
   rule above every section heading. It is the same rule that sits under the
   headline on the social cards, which makes a page and the card that shares
   it read as one system — and it gives the eye a fixed thing to hunt for when
   scanning, which colour alone never did.

   h1 keeps the brand blue: one branded moment per page, and it is far too
   large to be mistaken for a link.
   -------------------------------------------------------------------------- */
/* Section headings only — a direct child of the reading column. Panel headers
   like .calc-head h2 and .compare-head h2 are labels on a component, not the
   start of a section, and a marker above them reads as a false division. */
main .wrap > h2:not(.aside-title)::before,
main .prose > h2::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--nhs-green);
  margin-bottom: .6rem;
}

/* h3 sits inside a section that already carries the mark, so it takes a
   quieter one — a hairline to its left, enough to nest it under the h2
   without starting a new section. */
.prose h3 {
  padding-left: 12px;
  border-left: 3px solid var(--grey-4);
}

/* Arriving from a sidebar jump link: hold the mark lit briefly so it is
   obvious which heading you landed on. */
main .wrap > h2:target::before,
main .prose > h2:target::before { background: var(--nhs-blue); width: 56px; }

@media (prefers-reduced-motion: no-preference) {
  main .wrap > h2::before,
  main .prose > h2::before { transition: width .25s ease, background .25s ease; }
}

p { margin: 0 0 1rem; }

a { color: var(--nhs-blue); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--nhs-dark-blue); text-decoration-thickness: 2px; }

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 0;
  box-shadow: 0 4px 0 0 var(--ink);
  text-decoration: none;
  border-radius: 2px;
}

/* -------------------------------------------------------------- Layout -- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 16px;
}

.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section--tight { padding: clamp(1.75rem, 4vw, 3rem) 0; }
.section--white { background: var(--white); }

/* The title block and the first section are two stacked .section--tight, so
   their padding used to sum to ~6rem — a gap wide enough to read as a mistake
   between a page title and its own opening. The heading, lead and first
   section are one unit; the next section's top padding is the only separation
   they need. */
main > .section--tight:first-of-type { padding-bottom: .25rem; }

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--nhs-yellow);
  color: var(--ink);
  padding: 12px 20px;
  font-weight: 700;
  z-index: 100;
}
.skip-link:focus { left: 0; top: 0; }

/* -------------------------------------------------------------- Header -- */
.site-header {
  background: var(--nhs-blue);
  color: var(--white);
  position: relative;
  z-index: 20;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
}
.brand:hover { color: var(--white); }

/* Site mark. Deliberately not the NHS lozenge — an independent site must not
   wear the identity it disclaims. Sized to accept a replacement logo. */
.brand-mark {
  background: var(--white);
  border-radius: 6px;
  padding: 6px;
  line-height: 0;
  display: inline-flex;
  flex: 0 0 auto;
}
.brand-mark svg {
  width: 20px;
  height: 20px;
  fill: var(--nhs-blue);
  display: block;
}
.brand-mark img { width: 20px; height: 20px; display: block; }

.brand-text { font-size: 1rem; line-height: 1.15; }
.brand-text span { display: block; font-weight: 400; font-size: .78rem; opacity: .9; }

/* Combined logo, used instead of the mark and text when the file is present.
   The 280px ceiling is not decorative: the nav needs 806px of the 915px the
   wrap leaves beside the brand, so anything wider starts pushing menu items
   towards a second line. Height is capped too, because the header bar is only
   68px tall and a taller image would set the bar's height instead of sitting
   inside it. */
/* Text lockup. Proportions measured off the designed artwork: a 25px
   wordmark over a 13px tagline with the lines almost touching. NHS and Pay
   carry the weight, Scale steps back to 300 — the contrast is what makes it
   read as one word rather than three.

   <b> and <i> are used as plain hooks here, not for emphasis, so the styling
   sets weight explicitly and turns the italic off. */
.brand--text,
.footer-brand--text { text-decoration: none; }

.brand-lockup { display: block; line-height: 1.02; }

.brand-word {
  display: block;
  font-size: 1.55rem;
  letter-spacing: -.02em;
  color: var(--white);
  white-space: nowrap;
}
/* 800 against 300 was a five-step jump and read as shouting. 700 against
   400 keeps a clear break between the two halves while letting the whole
   wordmark sit at the weight of a heading rather than a banner. */
.brand-word b { font-weight: 700; }
/* A real word space, not a decorative gap: the name is three words and
   the weight change happens to fall at the first space. */
/* No margin here: the space between NHS and Pay Scale is a real space
   character in the markup, so the wordmark reads as three words to a screen
   reader and copies as three words. A CSS gap would look identical and be
   invisible to both. */
.brand-word i { font-weight: 400; font-style: normal; }

.brand-tag {
  display: block;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .005em;
  color: var(--white);
  white-space: nowrap;
  margin-top: 2px;
}


.footer-brand--text .brand-word { font-size: 1.35rem; }
.footer-brand--text .brand-tag { font-size: .75rem; opacity: .82; }

@media (max-width: 480px) {
  .brand-word { font-size: 1.3rem; }
  .brand-tag { font-size: .72rem; }
}

.brand--lockup { gap: 0; }
.brand--lockup img {
  height: 40px;
  width: auto;
  max-width: 280px;
  display: block;
}

.footer-brand { display: inline-block; }
.footer-brand img { height: 36px; width: auto; max-width: 280px; display: block; }

/* Below the mobile breakpoint the toggle needs room, and a 260px lockup on a
   360px screen leaves almost none. */
@media (max-width: 480px) {
  .brand--lockup img { height: 30px; max-width: 200px; }
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .55);
  color: var(--white);
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  padding: 7px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  align-items: center;
  gap: 8px;
}

.nav-toggle svg { width: 18px; height: 18px; fill: currentColor; }

.site-nav ul {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------- NAV DROPDOWN
   Button and panel, not a hover menu: hover cannot be opened from a keyboard
   and misbehaves on touch, where the first tap follows the link instead of
   revealing the menu. Below the mobile breakpoint the panel is forced open
   and the button hidden, so the whole thing collapses into one plain list.
   ------------------------------------------------------------------------ */
.has-menu { position: relative; }

.nav-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: .93rem;
  font-weight: 600;
  color: var(--white);
  background: transparent;
  border: 0;
  padding: 9px 13px;
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-menu-btn:hover,
.nav-menu-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .14); }
.nav-menu-btn[data-within="true"] { background: var(--nhs-dark-blue); }
.nav-menu-btn svg { width: 10px; height: 7px; transition: transform .15s ease; }
.nav-menu-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  display: flex;
  gap: 28px;
  background: var(--white);
  border: 1px solid var(--grey-4);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 16px 20px;
  min-width: 420px;
}
.nav-menu[hidden] { display: none; }

/* Set by the alignment check in ui.js on the menus near the end of the bar,
   which would otherwise open past the right edge of the window. */
.nav-menu[data-align="right"] { left: auto; right: 0; }

.nav-col-head {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.nav-col ul { display: block; margin: 0; padding: 0; list-style: none; }
.nav-col li { margin: 0; }
.nav-col a {
  display: block;
  padding: 6px 8px;
  margin-left: -8px;
  border-radius: 4px;
  color: var(--ink) !important;
  font-weight: 500;
  font-size: .88rem;
  white-space: nowrap;
}
.nav-col a:hover { background: var(--grey-5); color: var(--nhs-blue) !important; }

/* The dropdown panel is white, but .site-nav a[aria-current] paints the
   header's dark-blue active state, which leaked in here and produced blue text
   on a dark blue block at 1.86:1 — well below any readable threshold. Inside
   the panel the current page is marked the way the rest of the site marks it,
   with a light tint and a left accent rather than a filled block.

   Both selectors carry .site-nav deliberately. Without it they tie on
   specificity with .site-nav a[aria-current="page"] further down the file and
   lose on source order alone, which is exactly how this regressed once
   already. The extra class makes the result independent of rule order. */
.site-nav .nav-col a[aria-current="page"] {
  background: #eaf3fb;
  color: var(--nhs-dark-blue) !important;
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--nhs-blue);
}

.site-nav a {
  display: block;
  color: var(--white);
  text-decoration: none;
  padding: 9px 13px;
  border-radius: var(--radius);
  font-size: .93rem;
  font-weight: 600;
}
.site-nav a:hover { background: rgba(255, 255, 255, .14); color: var(--white); }
.site-nav a[aria-current="page"] { background: var(--nhs-dark-blue); color: var(--white); }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--nhs-dark-blue);
    padding: 8px 16px 16px;
    box-shadow: var(--shadow-md);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 2px; }
  .site-nav a { padding: 12px 14px; }

  /* No dropdown on a phone. The menu is already a vertical list behind a
     toggle, so a second layer of open-and-close buys nothing and costs a tap.
     The button becomes a heading and the panel is always shown. */
  .nav-menu-btn {
    width: 100%;
    justify-content: flex-start;
    pointer-events: none;
    padding: 14px 14px 4px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255, 255, 255, .6);
  }
  .nav-menu-btn svg { display: none; }
  .nav-menu-btn[data-within="true"] { background: transparent; }

  .nav-menu,
  .nav-menu[hidden] {
    display: block;
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
  }
  .nav-col-head {
    color: rgba(255, 255, 255, .62);
    margin: 10px 0 4px;
    padding-inline: 2px;
  }
  .nav-col:first-child .nav-col-head { margin-top: 2px; }
  .nav-col a {
    color: var(--white) !important;
    font-size: .93rem;
    font-weight: 600;
    padding: 12px 14px 12px 26px;
    margin: 0;
    white-space: normal;
  }
  .nav-col a:hover { background: rgba(255, 255, 255, .14); color: var(--white) !important; }
  /* On mobile the panel sits on the dark nav, so the desktop light-blue
     treatment would be invisible. Reset the inset accent too. */
  .site-nav .nav-col a[aria-current="page"] { background: var(--nhs-blue); color: var(--white) !important; box-shadow: none; }
}

/* ---------------------------------------------------------------- Hero -- */
.hero {
  background: linear-gradient(150deg, var(--nhs-dark-blue) 0%, var(--nhs-blue) 55%, var(--nhs-bright-blue) 100%);
  color: var(--white);
  padding: clamp(2.25rem, 6vw, 3.75rem) 0 clamp(3rem, 8vw, 5.5rem);
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  right: -140px;
  top: -120px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(65, 182, 230, .38), transparent 68%);
  pointer-events: none;
}

.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: var(--white); max-width: 18ch; }
.hero .lede {
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  max-width: 62ch;
  color: rgba(255, 255, 255, .93);
  margin-bottom: 1.5rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--white);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--nhs-yellow);
}

.hero-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: .93rem;
  font-weight: 600;
}
.hero-points li { display: flex; align-items: center; gap: 8px; }
.hero-points li::before {
  content: "";
  width: 18px; height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  background: var(--nhs-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.4 11.8 3.2 8.6l1.1-1.1 2.1 2.1 5.3-5.3 1.1 1.1z'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* ------------------------------------------------------------ Calculator */
.calc-shell {
  margin-top: clamp(-4rem, -7vw, -2.5rem);
  position: relative;
  z-index: 5;
}

.calc {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--grey-4);

  /* Both declarations are deliberate. overflow:hidden clips the children to
     the rounded corners, but it also makes this a scroll container — and a
     sticky descendant sticks to its nearest scroll container, not the
     viewport. Since this box never scrolls, the sticky result panel would
     simply never move.

     overflow:clip clips identically WITHOUT creating a scroll container, so
     stickiness still resolves against the viewport. Browsers that do not know
     it fall back to the line above and lose only the sticky behaviour. */
  overflow: hidden;
  overflow: clip;
}

.calc-head {
  padding: 20px 22px;
  border-bottom: 1px solid var(--grey-4);
  background: linear-gradient(var(--white), var(--surface-alt));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.calc-head h2 { margin: 0; font-size: 1.2rem; }
.calc-head p { margin: 2px 0 0; font-size: .87rem; color: var(--ink-soft); }

.calc-year {
  background: var(--nhs-green);
  color: var(--white);
  font-size: .78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.calc-body {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 0;
}

.calc-inputs { padding: 22px; }
@media (max-width: 900px) {
  .calc-body { grid-template-columns: 1fr; }
  .calc-inputs { padding: 18px 16px; }
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 560px) { .field-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }

/* Fieldsets must stay block-level so <legend> renders predictably */
.field--fieldset {
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.field label,
.fieldset-legend {
  font-weight: 700;
  font-size: .9rem;
  color: var(--ink);
  margin-bottom: 6px;
  display: block;
}

/* A hint sits tight under the thing it annotates, but it had no bottom margin
   at all, so whatever followed started immediately against it and the note
   read as the first line of the next paragraph. */
.hint {
  font-size: .8rem;
  color: var(--ink-soft);
  margin: 5px 0 1.5rem;
  line-height: 1.45;
}
.hint:last-child { margin-bottom: 0; }

select, input[type="number"], input[type="text"] {
  font: inherit;
  font-size: 1rem;
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--grey-1);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  appearance: none;
  min-height: 48px;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23425563' d='M8 11.4 2.6 6l1.2-1.2L8 9l4.2-4.2L13.4 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
}

select:hover, input:hover { border-color: var(--nhs-blue); }

/* Segmented control */
.segmented {
  display: flex;
  border: 2px solid var(--grey-1);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  flex: 1 1 0;
  margin: 0;
  text-align: center;
  padding: 12px 6px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--white);
  color: var(--ink-soft);
  border-right: 1px solid var(--grey-4);
  transition: background .15s ease, color .15s ease;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.segmented label:last-of-type { border-right: 0; }
.segmented input:checked + label {
  background: var(--nhs-blue);
  color: var(--white);
}
.segmented input:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

/* Range slider */
.range-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
input[type="range"] {
  flex: 1;
  appearance: none;
  height: 8px;
  border-radius: 999px;
  background: var(--grey-4);
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 0;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--nhs-blue);
  border: 3px solid var(--white);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--nhs-blue);
  border: 3px solid var(--white);
  cursor: pointer;
}
.range-value {
  flex: 0 0 84px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--surface-alt);
  border-radius: var(--radius);
  padding: 8px 4px;
  font-size: .95rem;
}

/* Advanced options */
.advanced {
  margin-top: 18px;
  border: 1px solid var(--grey-4);
  border-radius: var(--radius);
  background: var(--surface-alt);
}
.advanced > summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  font-size: .93rem;
  color: var(--nhs-blue);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::before {
  content: "+";
  font-size: 1.2rem;
  line-height: 1;
  width: 20px;
  text-align: center;
}
.advanced[open] > summary::before { content: "\2212"; }
.advanced-inner { padding: 0 16px 18px; }

/* ------------------------------------------------------------- Results -- */
/* The panel stretches to match the input column, which is right for the
   block of colour but wrong for the content: open the options disclosure and
   the answer sits at the top of a very tall dark space, often scrolled out of
   view exactly when you are changing the inputs that move it.

   So the colour still fills the column and the CONTENT sticks. Same reasoning
   as the mobile bar below 900px — keep the figure on screen while you work —
   applied to the desktop layout. */
.calc-results {
  background: var(--panel-dark);
  color: var(--white);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
}

/* Only one of these is ever visible, so both can stick — whichever is on
   screen travels down the column as you work through the inputs. Below 900px
   the layout is a single column and the sticky bar takes over, so this is
   scoped to the two-column view. */
@media (min-width: 901px) {
  #result-skeleton,
  #result-live { position: sticky; top: 20px; }
}

.result-headline { margin-bottom: 18px; }
.result-label {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--nhs-light-blue);
  margin: 0 0 4px;
}
.result-big {
  font-size: clamp(2.1rem, 6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--white);
  margin: 0;
}
.result-sub {
  font-size: .9rem;
  color: rgba(255, 255, 255, .82);
  margin: 6px 0 0;
}

.result-toggle {
  display: flex;
  background: rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  padding: 4px;
  gap: 4px;
  margin-bottom: 18px;
}
.result-toggle button {
  flex: 1;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  padding: 9px 6px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .85);
  border-radius: 6px;
  cursor: pointer;
  min-height: 40px;
}
.result-toggle button[aria-pressed="true"] {
  background: var(--white);
  color: var(--panel-dark);
}

.breakdown {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.breakdown li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-size: .92rem;
}
.breakdown .b-label { color: rgba(255, 255, 255, .88); }
.breakdown .b-label small {
  display: block;
  font-size: .75rem;
  color: rgba(255, 255, 255, .62);
}
.breakdown .b-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.breakdown li.is-total {
  border-bottom: 0;
  padding-top: 14px;
  font-size: 1rem;
}
.breakdown li.is-total .b-value { color: var(--nhs-yellow); font-size: 1.15rem; }
.breakdown li.is-deduction .b-value { color: #ffc9c4; }

.result-note {
  font-size: .78rem;
  color: rgba(255, 255, 255, .68);
  margin: 16px 0 0;
  line-height: 1.5;
}

/* Pay progression bar */
.progress-wrap { margin-top: 20px; }
.progress-head {
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.progress-track {
  height: 10px;
  background: var(--grey-4);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--nhs-aqua), var(--nhs-blue));
  border-radius: 999px;
  transition: width .35s ease;
}

/* -------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  padding: 13px 24px;
  min-height: 48px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--nhs-green); color: var(--white); box-shadow: 0 4px 0 var(--nhs-dark-green); }
.btn--primary:hover { background: #00782f; color: var(--white); }
.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .6);
  color: var(--white);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .12); color: var(--white); }
.btn--outline { background: var(--white); border-color: var(--nhs-blue); color: var(--nhs-blue); }
.btn--outline:hover { background: var(--surface-alt); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------- Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.card {
  background: var(--white);
  border: 1px solid var(--grey-4);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--nhs-blue);
}
.card h3 { margin-bottom: .4em; font-size: 1.1rem; }
.card p { font-size: .93rem; color: var(--ink-soft); margin-bottom: 0; }
/* No colour modifiers on .card, deliberately. Green and amber are status
   colours on this site — .badge--verified is green, .badge--provisional is
   amber — so using them decoratively broke the signal: the trust section had
   an amber card headed "Five Years of Verified Pay History", wearing the
   colour that means provisional, and a green card that was not the
   verification card. Every card now takes the NHS blue accent and the
   headings carry the difference. */

.band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.band-tile {
  display: block;
  background: var(--white);
  border: 1px solid var(--grey-4);
  border-left: 5px solid var(--nhs-blue);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.band-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--ink);
  text-decoration: none;
}
.band-tile strong { display: block; color: var(--nhs-dark-blue); font-size: 1.02rem; }
.band-tile span { font-size: .85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- Tables */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--grey-4);
  border-radius: var(--radius);
  background: var(--white);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
  min-width: 560px;
}
caption {
  text-align: left;
  font-weight: 700;
  padding: 14px 16px;
  color: var(--nhs-dark-blue);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--grey-4);
}
th, td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--grey-5);
  font-variant-numeric: tabular-nums;
}
thead th {
  background: var(--nhs-blue);
  color: var(--white);
  font-weight: 700;
  border-bottom: 0;
  white-space: nowrap;
}
tbody tr:nth-child(even) { background: #f8fafb; }
tbody tr:hover { background: #eef5fb; }
tbody th { font-weight: 700; color: var(--nhs-dark-blue); white-space: nowrap; }

/* ------------------------------------------------------------------ FAQ */
.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--white);
  border: 1px solid var(--grey-4);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  padding: 16px 46px 16px 18px;
  font-weight: 700;
  color: var(--nhs-dark-blue);
  position: relative;
  list-style: none;
  font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 11px; height: 11px;
  margin-top: -7px;
  border-right: 2.5px solid var(--nhs-blue);
  border-bottom: 2.5px solid var(--nhs-blue);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq .faq-body { padding: 0 18px 18px; color: var(--ink-soft); }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- Prose  */
.prose { max-width: 72ch; }
.prose ul, .prose ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.prose li { margin-bottom: .45rem; }
/* On a guide page the h2s ARE the sections — the whole article is usually one
   <section>, so section padding never separates them. 2rem left eight major
   topics running into each other. The gap now scales with the page: enough
   that a new heading reads as a new start, not so much that the page feels
   loose on a phone. */
.prose h2 { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.prose h3 { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.prose > h2:first-child,
.prose > h3:first-child { margin-top: 0; }

.callout {
  background: #eaf3fb;
  border-left: 5px solid var(--nhs-blue);
  padding: 16px 18px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 1.4rem;
}
.callout p:last-child { margin-bottom: 0; }
.callout--warn { background: #fff6e5; border-left-color: var(--nhs-yellow); }

.lead { font-size: 1.1rem; color: var(--ink-soft); }

/* ---------------------------------------------------------- Breadcrumbs */
.breadcrumb {
  font-size: .85rem;
  padding: 12px 0;
  color: var(--ink-soft);
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.breadcrumb li + li::before { content: "\203A"; margin-right: 6px; color: var(--grey-2); }

/* -------------------------------------------------------------- Footer  */
.site-footer {
  background: var(--ink);
  color: var(--grey-4);
  padding: 42px 0 26px;
  /* Below body size on purpose: the footer is reference material, not reading
     matter, and setting it a step down keeps it visually subordinate to the
     page. .85rem is about the floor — under that the links stop being
     comfortable tap targets on a phone. */
  font-size: .85rem;
  margin-top: auto;
}
/* Brand and provenance, above the link columns and aligned left. Side by
   side when there is room, stacked when there is not — the sources sentence
   is long and should not be squeezed into a narrow measure. */
.footer-head { margin-bottom: 32px; }
.footer-head .footer-brand { display: block; margin-bottom: 12px; }
/* Held to a readable measure rather than run across the whole footer: a
   110-character sentence set the full 1108px wide is a long way for the eye
   to travel back, and it would sit oddly under a 163px logo. */
.footer-head .footer-note { margin: 0; max-width: 54ch; }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  margin-bottom: 28px;
}
.site-footer h2 {
  color: var(--white);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .8em;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--grey-4); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }

/* The brand is a logo that happens to link home, not a link in a list. An
   underline across the wordmark and tagline reads as damage to the mark. It
   still takes the pointer cursor and the focus ring, so it is discoverable
   and reachable by keyboard without being decorated. */
.site-footer .footer-brand:hover,
.site-footer .footer-brand:focus-visible { text-decoration: none; }
.footer-bottom {
  border-top: 1px solid #3a4750;
  padding-top: 18px;
  font-size: .82rem;
  color: var(--grey-2);
}
.footer-bottom p { margin: 0 0 .4rem; }
.footer-note { color: var(--grey-3); font-size: .85rem; }

/* The two notices are different in kind and were running together at one
   weight, so people read neither: the first is a legal position, the second
   is the warning that protects someone about to act on a figure. Give the
   warning its own marker and a little more contrast. */
.footer-warn {
  border-left: 3px solid var(--nhs-yellow);
  padding-left: 12px;
  margin-top: .9rem !important;
  color: var(--grey-3);
}

/* Copyright sits on its own line below a hairline, separated from the
   notices above it so it reads as the end of the document. */
.footer-legal {
  margin: 1.1rem 0 0 !important;
  padding-top: 1rem;
  border-top: 1px solid #3a4750;
  text-align: center;
  font-size: .8rem;
  color: var(--grey-2);
}
.footer-legal a { color: var(--grey-3); text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { color: var(--white); }

/* ----------------------------------------------------------- Utilities  */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-2 { margin-bottom: 2rem; }
.stack > * + * { margin-top: 1rem; }

.page-flex { display: flex; flex-direction: column; min-height: 100vh; }

/* Same pill shape as the hero eyebrow, so the two read as one family — but
   not the same voice. The eyebrow is a hero label on a dark panel, built from
   translucent white and legible only there. This is metadata, and metadata
   set in bold uppercase would carry more weight than the heading beneath it.

   The dot is the part that earns its place: these badges already say whether
   a page is current, archived or provisional, so the colour states it at a
   glance instead of leaving it to be read. */
.updated-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--ink-soft);
  background: var(--surface-alt);
  border: 1px solid var(--grey-4);
  padding: 5px 13px;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.updated-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nhs-green);
  flex: 0 0 auto;
}

/* Archived: the page is correct but no longer the live year. */
.updated-badge--archived { color: var(--grey-1); }
.updated-badge--archived::before { background: var(--grey-3); }

/* Provisional: figures published ahead of a formal circular. */
.updated-badge--provisional { background: #fff6e5; border-color: #f0d18a; color: #7a5200; }
.updated-badge--provisional::before { background: var(--nhs-yellow); }

@media (forced-colors: active) {
  .updated-badge::before { forced-color-adjust: none; background: CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer, .nav-toggle, .advanced, .btn-row { display: none; }
  body { background: #fff; }
  .calc { box-shadow: none; }
  .calc-results { background: #fff; color: #000; }
  .result-big, .breakdown .b-label, .breakdown .b-value { color: #000; }
}

/* ==========================================================================
   PLATFORM LAYER
   Skeleton state, band picker, provenance badges, assumption chips,
   Explain-my-result trace, toggletips, compare, print-for-payroll.
   ========================================================================== */

/* ------------------------------------------------------ Provenance badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1.3;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 7px;
}
.badge--estimate    { background: #eaf3fb; color: var(--nhs-dark-blue); border-color: #b6d4ee; }
.badge--verified    { background: #e6f5ec; color: #00622a; border-color: #a8dcbd; }
.badge--provisional { background: #fff6e5; color: #7a5200; border-color: #f0d18a; }
.badge--unpublished { background: var(--grey-5); color: var(--grey-1); border-color: var(--grey-3); }

/* ==========================================================================
   PAGE SIDEBAR
   Prose is capped at 72ch for readability and the wrap is 1140px, so wide
   screens leave roughly 460px of empty gutter. This puts the page's own
   contents list there rather than widening the text, which would push the
   measure past 130 characters a line.

   Single column by default. The two-column layout only appears once there is
   genuinely room for both a full reading measure and the sidebar, so nothing
   is ever squeezed.
   ========================================================================== */
.page-aside { margin: 0 0 1.75rem; }

.aside-title {
  font-size: .72rem !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  margin: 0 0 .6rem !important;
}

.aside-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--grey-4);
}
.aside-list li { margin: 0; }
.aside-list a {
  display: block;
  padding: 6px 0 6px 14px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: .88rem;
  line-height: 1.35;
  color: var(--ink-soft);
  text-decoration: none;
}
.aside-list a:hover,
.aside-list a:focus-visible {
  color: var(--nhs-blue);
  border-left-color: var(--nhs-blue);
  background: var(--grey-5);
}

.aside-cta {
  display: block;
  margin-top: 1rem;
  padding: 10px 14px;
  background: var(--nhs-blue);
  color: var(--white);
  border-radius: var(--radius);
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.aside-cta:hover { background: var(--nhs-dark-blue); color: var(--white); }

@media (min-width: 1080px) {
  .wrap--aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 236px;
    column-gap: 44px;
    align-items: start;
  }
  /* Everything that was already in the wrap stays in the reading column.
     Without this a table would be treated as a second grid item and land
     under the sidebar. */
  .wrap--aside > * { grid-column: 1; }

  .page-aside {
    grid-column: 2;
    grid-row: 1 / span 99;   /* span the section so the sticky child can travel */
    margin: 0;
    align-self: stretch;
  }
  .aside-inner { position: sticky; top: 24px; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Breathing room above a heading arrived at from a jump link, so it does not
   sit flush against the top of the viewport. */
:target { scroll-margin-top: 24px; }

/* --------------------------------------------------------------- OPT OUT
   Two sides, deliberately equal weight. The gain is real and should not be
   hidden or shouted down; the page's job is to make sure it is compared
   against the right thing, not to argue a case. */
.optout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0;
  border: 1px solid var(--grey-4);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 1.5rem 0;
  background: var(--white);
}
.optout-side { padding: 20px 22px; }
.optout-side--gain { background: var(--surface-alt); border-right: 1px solid var(--grey-4); }

.optout-label {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.optout-big {
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--nhs-dark-green);
  margin: 0;
}
.optout-sub { font-size: .84rem; color: var(--ink-soft); margin: 8px 0 0; line-height: 1.45; }

.optout-list { list-style: none; margin: 0; padding: 0; }
.optout-list li {
  padding: 8px 0 8px 16px;
  border-left: 3px solid var(--nhs-red);
  margin-bottom: 10px;
  font-size: .9rem;
  line-height: 1.45;
}
.optout-list li:last-child { margin-bottom: 0; }
.optout-list strong { font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  .optout { grid-template-columns: 1fr; }
  .optout-side--gain { border-right: 0; border-bottom: 1px solid var(--grey-4); }
}

/* Step-value table: rows where less than half the gross rise survives
   deductions, and the marker for a step that crosses a pension tier. */
.row-flag > th[scope="row"] { box-shadow: inset 3px 0 0 var(--nhs-red); }
.row-flag td:nth-child(5) { color: var(--nhs-red); font-weight: 700; }

.tag-tier {
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #fff6e5;
  color: #7a5200;
  border: 1px solid #f0d18a;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 5px;
  vertical-align: 1px;
}

.provenance-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fff6e5;
  border: 1px solid #f0d18a;
  border-radius: var(--radius);
  font-size: .87rem;
  color: #5c3d00;
  margin-bottom: 18px;
}
.provenance-bar a { color: #5c3d00; }
.provenance-bar p { margin: 0; }

/* ------------------------------------------------------------ Band picker */
.picker-step {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--nhs-blue);
  margin-bottom: 8px;
}

/* Twelve bands, so six across gives two even rows. auto-fit produced a
   ragged 7 + 5 and squeezed the ranges onto two lines at a size that was
   hard to read. */
.band-picker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
}

/* The button, not the li, is the visible tile. Without this the li stretches
   to the row height and the button sits inside it at its own content height,
   so a tile with fewer lines of text renders visibly shorter than the rest. */
.band-picker li { display: flex; }

.band-btn {
  height: 100%;
  position: relative;   /* so the closed flag can be pinned without changing height */
  font: inherit;
  font-weight: 800;
  font-size: 1.08rem;
  padding: 14px 8px 16px;
  min-height: 78px;
  width: 100%;
  border: 2px solid var(--grey-3);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--nhs-dark-blue);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .12s ease, box-shadow .12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1.1;
}
.band-btn small {
  font-size: .74rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
/* Same hover behaviour as the band cards on /nhs-pay-bands/ — a small lift
   and a shadow — so a band tile feels the same wherever it appears. */
.band-btn:hover {
  border-color: var(--nhs-blue);
  background: #f4f9fd;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.band-btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.band-btn[aria-pressed="true"] {
  background: var(--nhs-blue);
  border-color: var(--nhs-dark-blue);
  color: var(--white);
  box-shadow: inset 0 0 0 2px var(--white);
}
.band-btn[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 2px var(--white), var(--shadow-md); }
.band-btn[aria-pressed="true"] small { color: rgba(255,255,255,.88); }

@media (prefers-reduced-motion: reduce) {
  .band-btn:hover, .band-card:hover { transform: none; }
}

/* ------------------------------------------------------- Skeleton / empty */
.result-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  min-height: 240px;
  padding: 8px 0;
}
.result-empty .skeleton-num {
  width: 62%;
  height: 46px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .14);
}
.result-empty .skeleton-line {
  width: 100%;
  height: 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .1);
}
.result-empty .skeleton-line.is-short { width: 72%; }
.result-empty p {
  color: rgba(255, 255, 255, .9);
  font-weight: 600;
  margin: 6px 0 0;
  font-size: .95rem;
}

[hidden] { display: none !important; }

/* ------------------------------------------------------- Assumption chips */
.assumptions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.assumptions h3 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--nhs-light-blue);
  margin: 0 0 8px;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chip {
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  padding: 6px 11px;
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .1);
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: left;
}
.chip:hover { background: rgba(255, 255, 255, .2); }
.chip::after {
  content: "?";
  font-size: .68rem;
  font-weight: 800;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 14px;
}

/* ------------------------------------------------------------- Toggletips
   Click-activated, never hover-dependent, dismissible with Escape.        */
.toggletip { position: relative; display: inline-block; }
.toggletip-bubble {
  position: absolute;
  z-index: 40;
  left: 0;
  top: calc(100% + 8px);
  width: max-content;
  max-width: min(300px, 78vw);
  background: var(--ink);
  color: var(--white);
  font-size: .85rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.toggletip-bubble::before {
  content: "";
  position: absolute;
  top: -6px; left: 16px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid var(--ink);
}
.toggletip-bubble[data-align="right"] { left: auto; right: 0; }
.toggletip-bubble[data-align="right"]::before { left: auto; right: 16px; }

/* Inline jargon buttons in prose */
.term {
  font: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--nhs-blue);
  border-bottom: 2px dotted var(--nhs-blue);
  cursor: pointer;
  font-weight: 600;
}
.term:hover { background: #eaf3fb; }

/* --------------------------------------------------- Explain my result -- */
.explain {
  margin-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: 14px;
}
.explain > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: .93rem;
  color: var(--white);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  min-height: 44px;
}
.explain > summary::-webkit-details-marker { display: none; }
.explain > summary::before {
  content: "";
  width: 9px; height: 9px;
  border-right: 2.5px solid var(--nhs-yellow);
  border-bottom: 2.5px solid var(--nhs-yellow);
  transform: rotate(-45deg);
  transition: transform .2s ease;
  flex: 0 0 9px;
}
.explain[open] > summary::before { transform: rotate(45deg); }
.explain > summary:hover { background: rgba(255, 255, 255, .2); }

.trace {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  counter-reset: trace;
}
.trace > li {
  position: relative;
  padding: 0 0 16px 30px;
  border-left: 2px solid rgba(255, 255, 255, .22);
  margin-left: 9px;
}
.trace > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.trace > li::before {
  counter-increment: trace;
  content: counter(trace);
  position: absolute;
  left: -11px; top: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--nhs-light-blue);
  color: var(--nhs-dark-blue);
  font-size: .7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trace-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-weight: 700;
  font-size: .93rem;
  color: var(--white);
  margin-bottom: 4px;
}
.trace-head .t-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.trace li[data-kind="deduct"] .t-value { color: #ffc9c4; }
.trace li[data-kind="total"] .t-value { color: var(--nhs-yellow); }
.trace-rule {
  font-size: .84rem;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 6px;
  line-height: 1.5;
}
.trace-workings {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: .78rem;
  white-space: pre-wrap;
  background: rgba(0, 0, 0, .22);
  border-radius: 6px;
  padding: 9px 11px;
  margin: 0 0 6px;
  color: rgba(255, 255, 255, .93);
  overflow-x: auto;
}
.trace-sources {
  font-size: .76rem;
  color: rgba(255, 255, 255, .62);
  margin: 0;
}
.trace-sources a { color: var(--nhs-light-blue); }

/* --------------------------------------------------------- Verified line */
.result-verified {
  font-size: .78rem;
  color: rgba(255, 255, 255, .7);
  margin: 8px 0 0;
  line-height: 1.45;
}
.result-verified a { color: var(--nhs-light-blue); }

/* ------------------------------------------------------------ What next -- */
.result-next {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.result-next h3 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--nhs-light-blue);
  margin: 0 0 10px;
}
.result-next-row { display: flex; flex-wrap: wrap; gap: 8px; }

.next-btn {
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  padding: 10px 13px;
  min-height: 44px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .1);
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  justify-content: center;
}
.next-btn:hover { background: rgba(255, 255, 255, .22); }
.next-btn svg { width: 15px; height: 15px; fill: currentColor; flex: 0 0 15px; }

.result-next-status {
  font-size: .78rem;
  color: rgba(255, 255, 255, .8);
  margin: 10px 0 0;
  line-height: 1.5;
}

/* --------------------------------------------------- Sticky mobile result -
   Desktop shows the result beside the inputs, so this is never needed there.
   ------------------------------------------------------------------------ */
.sticky-result { display: none; }

@media (max-width: 900px) {
  .sticky-result {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(0, 48, 135, .97);   /* --panel-dark */
    box-shadow: 0 -4px 16px rgba(33, 43, 50, .28);
  }
  .sticky-result[hidden] { display: none; }

  .sticky-inner {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    border: 0;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .12);
    color: var(--white);
    font: inherit;
    cursor: pointer;
    text-align: left;
  }
  .sticky-inner:hover { background: rgba(255, 255, 255, .2); }

  .sticky-text { display: flex; flex-direction: column; line-height: 1.2; }
  .sticky-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--nhs-light-blue);
    font-weight: 700;
  }
  .sticky-value {
    font-size: 1.3rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  .sticky-cue {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--white);
    white-space: nowrap;
  }
  .sticky-cue svg { width: 16px; height: 16px; fill: currentColor; }

  /* Stop the bar covering the end of the page */
  body { padding-bottom: 76px; }
}

@media print { .sticky-result { display: none !important; } }

/* ------------------------------------------------------------- Actions -- */
.calc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--grey-4);
}
.action-btn {
  font: inherit;
  font-size: .87rem;
  font-weight: 700;
  padding: 10px 15px;
  min-height: 44px;
  border-radius: var(--radius);
  border: 2px solid var(--grey-3);
  background: var(--white);
  color: var(--nhs-blue);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.action-btn:hover { border-color: var(--nhs-blue); background: #f4f9fd; }
.action-btn svg { width: 16px; height: 16px; fill: currentColor; flex: 0 0 16px; }
.action-btn.is-done { border-color: var(--nhs-green); color: var(--nhs-dark-green); background: #e6f5ec; }

.action-status {
  font-size: .84rem;
  color: var(--nhs-dark-green);
  font-weight: 600;
  margin: 8px 0 0;
  width: 100%;
}

/* ------------------------------------------------------------- Compare -- */
.compare {
  margin-top: 20px;
  border: 1px solid var(--grey-4);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
}
.compare-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--grey-4);
  background: var(--surface-alt);
}
.compare-head h2 { margin: 0 0 3px; font-size: 1.05rem; }
.compare-head p { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.compare-body { padding: 18px; }

.compare-table { width: 100%; min-width: 0; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 10px 8px; font-size: .9rem; }
.compare-table thead th { background: transparent; color: var(--nhs-dark-blue); border-bottom: 2px solid var(--grey-4); }
.compare-table tbody th { text-align: left; font-weight: 600; color: var(--ink); }
.compare-table td { text-align: right; font-variant-numeric: tabular-nums; }
.delta { font-weight: 700; }
.delta--up { color: var(--nhs-dark-green); }
.delta--down { color: var(--nhs-red); }
.delta--flat { color: var(--grey-2); }

/* -------------------------------------------------------------- Sources -- */
.source-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.source-list li {
  background: var(--white);
  border: 1px solid var(--grey-4);
  border-left: 4px solid var(--nhs-aqua);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.source-list h3 { margin: 0 0 4px; font-size: 1rem; }
.source-list .meta { font-size: .84rem; color: var(--ink-soft); margin: 0 0 6px; }
.source-list .meta strong { color: var(--ink); }

/* --------------------------------------------------------- Change log --- */
.log { list-style: none; margin: 0; padding: 0; }
.log > li {
  position: relative;
  padding: 0 0 26px 26px;
  border-left: 2px solid var(--grey-4);
}
.log > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.log > li::before {
  content: "";
  position: absolute;
  left: -8px; top: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--nhs-blue);
  border: 3px solid var(--surface-alt);
}
.log time {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--nhs-blue);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 3px;
}
.log h3 { font-size: 1.02rem; margin: 0 0 .35em; }
.log p { margin: 0 0 .5rem; font-size: .93rem; }
.log .tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--grey-5);
  color: var(--grey-1);
  margin-right: 6px;
}
.log .tag--data { background: #eaf3fb; color: var(--nhs-dark-blue); }
.log .tag--fix  { background: #ffe9e7; color: #a5150a; }
.log .tag--feat { background: #e6f5ec; color: #00622a; }

/* ------------------------------------------------------------- Print ---- */
@media print {
  .band-picker, .calc-actions, .compare, .explain > summary { display: none; }
  .explain { border: 0; }
  .chip::after { display: none; }
  .trace-workings { background: #f2f2f2; color: #000; border: 1px solid #ccc; }
  .trace > li::before { background: #ddd; color: #000; }
  .trace-head, .trace-rule, .trace-sources, .chip { color: #000 !important; }
  .trace > li { border-left-color: #ccc; }
  .badge, .provenance-bar { border: 1px solid #999; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; word-break: break-all; }
}

/* ------------------------------------------------ Accessibility polish -- */
@media (forced-colors: active) {
  .band-btn[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .progress-fill { forced-color-adjust: none; background: Highlight; }
}

.no-js-note {
  background: #fff6e5;
  border: 1px solid #f0d18a;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 18px;
  font-size: .9rem;
  color: #5c3d00;
}

/* ==========================================================================
   MULTI-YEAR / MULTI-NATION LAYER
   Nation and year pickers, shift entry, scenarios, mobile refinements.
   ========================================================================== */

/* ------------------------------------------------- Segmented pickers ----- */
.seg-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
}

.seg-btn {
  font: inherit;
  font-weight: 700;
  font-size: .92rem;
  padding: 11px 10px;
  min-height: 52px;
  width: 100%;
  border: 2px solid var(--grey-3);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--nhs-dark-blue);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.2;
  transition: border-color .12s ease, background .12s ease;
}
.seg-btn small {
  font-size: .7rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.seg-btn:hover { border-color: var(--nhs-blue); background: #f4f9fd; }
.seg-btn[aria-pressed="true"] {
  background: var(--nhs-blue);
  border-color: var(--nhs-dark-blue);
  color: var(--white);
  box-shadow: inset 0 0 0 2px var(--white);
}
.seg-btn[aria-pressed="true"] small { color: rgba(255, 255, 255, .88); }

/* Band 1 is closed to new entrants. It stays the same size and shape as every
   other tile — a different height would read as a rendering fault rather than
   as meaning. The dashed border and muted tone carry the distinction, and the
   flag is absolutely positioned so it cannot push the tile taller. */
.band-btn.is-closed {
  opacity: .72;
  border-style: dashed;
  padding-bottom: 18px;
}
/* Fills the second line on a single-point band so it matches the rhythm of
   the two-line ranges beside it, and explains the difference. */
.band-note {
  font-size: .62rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--grey-2) !important;
}
.band-btn[aria-pressed="true"] .band-note { color: rgba(255, 255, 255, .75) !important; }

.band-flag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  font-size: .55rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--grey-1) !important;
  background: transparent;
  padding: 0;
  margin: 0;
}
.band-btn[aria-pressed="true"] .band-flag {
  background: rgba(255, 255, 255, .25);
  color: var(--white) !important;
}

/* ------------------------------------------------------- Shift entry ----- */
.shift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.shift-field label {
  font-weight: 700;
  font-size: .85rem;
  display: block;
  margin-bottom: 4px;
}
.shift-field .rate-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  /* Was --nhs-aqua, which is 2.78:1 against white — below AA for text this
     small. Dark green is 6.93:1 and reads as an uplift, which is what the
     figure is. Deliberately NOT --nhs-green: that is the status colour on
     the verified badge and the primary button, and it would fail here too
     at 3.87:1. */
  background: var(--nhs-dark-green);
  color: var(--white);
  margin-left: 6px;
  vertical-align: middle;
}
.shift-field input { min-height: 48px; }
.shift-field .hint { font-size: .75rem; }

/* ---------------------------------------------------- Loan checkboxes ---- */
.check-list { display: grid; gap: 6px; }
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  min-height: 48px;
  border: 2px solid var(--grey-4);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
}
.check:hover { border-color: var(--nhs-blue); }
.check input { width: 22px; height: 22px; accent-color: var(--nhs-blue); flex: 0 0 22px; margin: 0; min-height: 0; }
.check.is-unavailable { opacity: .55; cursor: not-allowed; }
.check.is-unavailable:hover { border-color: var(--grey-4); }

/* -------------------------------------------------------- Scenarios ------ */
.scenarios {
  margin-top: 20px;
  border: 1px solid var(--grey-4);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
}
.scenarios > .compare-head p { margin-top: 4px; }
/* Fixed layout so the columns keep the same widths as the numbers change.
   With auto layout the widest cell in each column sets the width, so
   switching to annual view (five digits instead of four) shifted every
   boundary and the table appeared to rebuild itself. */
.scenario-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
}
/* Widest to narrowest: what moved, scenario, then the two money columns
   equal. The money columns need only fit "−£1,234.56", so anything more is
   dead space between a left-aligned label and a right-aligned figure. */
.scenario-table th:nth-child(1) { width: 26%; }
.scenario-table th:nth-child(2),
.scenario-table th:nth-child(3) { width: 15%; }
.scenario-table th:nth-child(4) { width: 44%; }

.scenario-table thead th {
  background: transparent;
  color: var(--nhs-dark-blue);
  border-bottom: 2px solid var(--grey-4);
  font-size: .85rem;
  padding: 10px 8px;
  text-align: left;
}
/* A right-aligned number under a left-aligned label reads as a broken
   column. Header and data share an edge. */
.scenario-table thead th:nth-child(2),
.scenario-table thead th:nth-child(3) { text-align: right; }

/* Difference is right-aligned and "what moved" is left-aligned, so without
   this the two run straight into each other with only the cell padding
   between them. Pulls the figures back towards Take-Home. */
.scenario-table th:nth-child(3),
.scenario-table td:nth-child(3) { padding-right: 28px; }
.scenario-table tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  font-size: .9rem;
  padding: 12px 8px;
}
.scenario-table tbody th small {
  display: block;
  font-weight: 500;
  font-size: .74rem;
  color: var(--ink-soft);
}
.scenario-table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: .9rem;
  padding: 12px 8px;
}
.scenario-why {
  text-align: left !important;
  font-size: .78rem !important;
  color: var(--ink-soft);
  font-variant-numeric: normal !important;
}

/* ========================================================================
   MOBILE
   The calculator is used one-handed, often at the end of a shift. Targets
   stay ≥44px, the result stays reachable, and nothing needs a horizontal
   scroll except tables, which scroll inside their own container.
   ======================================================================== */
@media (max-width: 700px) {
  /* Four across keeps the ranges on one line; three rows of four for the
     twelve bands. */
  .band-picker { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .band-btn { min-height: 70px; padding: 12px 6px 14px; font-size: 1rem; }
  .band-btn small { font-size: .7rem; }

  .seg-picker { grid-template-columns: repeat(2, 1fr); }

  .calc-head { padding: 16px; }
  .calc-inputs { padding: 16px 14px; }
  .calc-results { padding: 20px 16px; }

  .result-big { font-size: clamp(2rem, 11vw, 2.6rem); }

  /* Give the answer room: the breakdown is scannable, not a data table. */
  .breakdown li { padding: 13px 0; font-size: .95rem; }
  .breakdown .b-label small { font-size: .72rem; }

  .result-toggle button { font-size: .82rem; padding: 11px 4px; }

  .trace > li { padding-left: 24px; }
  .trace-workings { font-size: .72rem; padding: 8px 9px; }

  .calc-actions { gap: 6px; }
  .action-btn { flex: 1 1 100%; justify-content: center; }

  .shift-grid { grid-template-columns: 1fr 1fr; }

  .scenario-table thead th:nth-child(4),
  .scenario-table tbody td:nth-child(4) { display: none; }  /* "why" folds away */

  /* Three columns left, so restate the widths — the desktop percentages
     would leave 16% of the table unclaimed. */
  .scenario-table th:nth-child(1) { width: 46%; }
  .scenario-table th:nth-child(2),
  .scenario-table th:nth-child(3) { width: 27%; }

  .footer-grid { gap: 20px; }
  .section { padding: 2rem 0; }
}

@media (max-width: 420px) {
  .band-picker { grid-template-columns: repeat(3, 1fr); }
  .seg-picker { grid-template-columns: 1fr; }
  .shift-grid { grid-template-columns: 1fr; }
  .wrap { padding-inline: 12px; }
  .result-toggle { gap: 2px; }
}

/* Stop iOS zooming the page when a field is focused: 16px minimum. */
@media (max-width: 700px) {
  select, input[type="number"], input[type="text"] { font-size: 16px; }
}

/* ==========================================================================
   CHARTS — inline SVG, no library.
   Reserve height before render so lazy mounting cannot shift the layout.
   ========================================================================== */
[data-chart] { min-height: 260px; }

.chart {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--grey-4);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.chart-title {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--nhs-dark-blue);
  margin-bottom: 14px;
  line-height: 1.3;
}

/* Only the doughnut is SVG now. It is square, so it scales uniformly and its
   text is not distorted. Bars, columns and the waterfall are HTML: a viewBox
   stretched to fill a container squashes every glyph inside it. */
.chart-svg { width: 100%; display: block; overflow: visible; }
.chart-svg--donut { width: 220px; height: 220px; flex: 0 0 220px; }
.chart-svg text { font-family: var(--font); fill: var(--ink); dominant-baseline: middle; }

/* ------------------------------------------------------ Horizontal bars -- */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }

.bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.bar-label { font-weight: 700; font-size: .92rem; color: var(--ink); }
.bar-figures { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.bar-value {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--nhs-dark-blue);
  font-variant-numeric: tabular-nums;
}
.bar-sub { font-size: .78rem; color: var(--ink-soft); }

.bar-track {
  height: 16px;
  background: var(--grey-5);
  border-radius: 3px;
  overflow: hidden;
}
.bar-fill { height: 100%; border-radius: 3px; width: 0; }

.bar-delta {
  font-size: .78rem;
  color: var(--ink-soft);
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.bar-delta.is-base { color: var(--grey-2); font-style: italic; }

/* ------------------------------------------------------------- Columns --- */
.columns {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
  align-items: end;
}
.column { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.column-value {
  font-size: .88rem;
  font-weight: 800;
  color: var(--nhs-dark-blue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.column-track {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(var(--grey-5), var(--grey-5)) no-repeat center / 100% 1px;
}
.column-fill {
  width: 100%;
  height: 0;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--nhs-bright-blue), var(--nhs-blue));
}
.column-label { font-size: .82rem; font-weight: 700; color: var(--ink); }
.column-note {
  font-size: .72rem;
  color: var(--ink-soft);
  min-height: 1em;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------- Waterfall --- */
.waterfall {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  align-items: end;
}
.wf-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wf-value {
  font-size: .8rem;
  font-weight: 800;
  color: var(--nhs-dark-blue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wf-value.is-deduct { color: #8a1538; }
.wf-track { position: relative; width: 100%; height: 165px; }
.wf-seg {
  position: absolute;
  left: 12%;
  right: 12%;
  border-radius: 3px;
  height: 0;
  min-height: 3px;
}
.wf-seg.is-edge { left: 4%; right: 4%; }
.wf-label { font-size: .8rem; font-weight: 700; color: var(--ink); text-align: center; }

.donut-centre {
  font-size: 20px; font-weight: 800; text-anchor: middle;
  fill: var(--nhs-dark-blue);
}
.donut-centre-sub { font-size: 10px; text-anchor: middle; fill: var(--ink-soft); }

.donut-wrap {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.chart-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 220px;
  display: grid;
  gap: 7px;
}
.chart-legend li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .88rem;
}
.legend-dot { width: 13px; height: 13px; border-radius: 3px; flex: 0 0 13px; }
.legend-label { flex: 1; }
.legend-value { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.chart-note {
  font-size: .84rem;
  color: var(--ink-soft);
  margin: 14px 0 0;
  line-height: 1.5;
}

.chart-data { margin-top: 12px; }
.chart-data > summary {
  cursor: pointer;
  font-size: .85rem;
  font-weight: 700;
  color: var(--nhs-blue);
  padding: 8px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.chart-data table { min-width: 0; font-size: .85rem; }

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
}

@media (max-width: 700px) {
  .chart { padding: 16px 14px; }
  .chart-svg--donut { width: 180px; height: 180px; flex: 0 0 180px; margin-inline: auto; }
  .donut-wrap { gap: 16px; justify-content: center; }
 .bar-head { flex-direction: column; gap: 2px; }
  .bar-figures { gap: 6px; }
  .column-value { font-size: .72rem; }
  .column-label { font-size: .72rem; }
  .column-note { font-size: .64rem; }
  .column-track { height: 110px; }
  .columns { gap: 5px; }
  .wf-value { font-size: .66rem; }
  .wf-label { font-size: .68rem; }
  .wf-track { height: 120px; }
  .waterfall { gap: 4px; }
  .chart-grid { grid-template-columns: 1fr; }
}

@media (forced-colors: active) {
  .chart-svg rect, .chart-svg circle, .chart-svg path { forced-color-adjust: none; }
  .legend-dot { forced-color-adjust: none; }
}

@media print {
  .chart-data { display: none; }
  .chart { break-inside: avoid; border-color: #999; }
}


/* ------------------------------------------------------------ Band cards -
   Four across on desktop, so eight bands land as a balanced 4×2 rather than
   an awkward 6+2. Each card is a comparison, not a label: pay, what it
   actually leaves you, and how many jobs sit in the band.
   ------------------------------------------------------------------------ */
.band-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.band-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 18px 18px 16px;
  background: var(--white);
  border: 1px solid var(--grey-4);
  border-top: 4px solid var(--nhs-blue);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--ink);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.band-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-top-color: var(--nhs-aqua);
  color: var(--ink);
  text-decoration: none;
}

.band-card-name {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--nhs-dark-blue);
  line-height: 1.15;
}
.band-card-name small {
  font-size: .68rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--grey-5);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

.band-card-pay {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.band-card-net {
  display: flex;
  flex-direction: column;
  font-size: .92rem;
  font-weight: 700;
  color: var(--nhs-dark-green);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}
.band-card-net small {
  font-size: .72rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.band-card-meta {
  margin-top: auto;
  padding-top: 10px;
  font-size: .76rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--grey-5);
}

@media (max-width: 1000px) { .band-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .band-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 420px)  {
  .band-cards { grid-template-columns: 1fr; }
  .band-card { padding: 14px; }
}

/* ---------------------------------------------------- Band page roles ----
   A flat index, everything visible. Accordions per job family meant clicking
   thirty times to read one list, and hid the content from Ctrl+F and from
   crawlers. Columns keep it compact without hiding anything.
   ------------------------------------------------------------------------ */
.role-index {
  columns: 3;
  column-gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .92rem;
}
.role-index li {
  break-inside: avoid;
  padding: 7px 0;
  border-bottom: 1px solid var(--grey-5);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.role-title { color: var(--ink); line-height: 1.35; }
.role-family {
  font-size: .72rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
}

@media (max-width: 1000px) { .role-index { columns: 2; } }
@media (max-width: 620px)  { .role-index { columns: 1; } }

/* Pay step date calculator (increment dates page). Same component as the
   homepage calculator; only the pieces that differ are set here. A date is
   longer than a money figure, so the headline is sized down to stay on one
   line in the results column. */
#sd-nation-picker { grid-template-columns: repeat(4, 1fr); }
#sd-nation-picker li,
#sd-band-picker li { display: flex; }
#sd-nation-picker .seg-btn { height: 100%; }
.sd-big { font-size: clamp(1.6rem, 4.2vw, 2.2rem); }
#sd-steps li.is-total .b-label { color: var(--white); font-weight: 700; }
#sd-ics { width: 100%; justify-content: center; }
@media (max-width: 600px) {
  #sd-nation-picker { grid-template-columns: repeat(2, 1fr); }
}

/* Pay dates page: a month row whose date moved because of a weekend or
   bank holiday. */
.moved { font-size: .78rem; color: var(--text-secondary, #4c6272); display: block; }