/* The visual system for every form. Every colour, size, radius and curve is a custom property on
   :root: a site restyles itself by overriding them in its own site.css, and nowhere else. */

@font-face {
  font-family: "Literata Variable"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url("fonts/literata-latin-opsz-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata Variable"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url("fonts/literata-latin-ext-opsz-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next Variable"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next Variable"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* colour roles; a site overrides the accent group in its site.css */
  --paper: #f9f6f2;
  --surface: #fefdfb;
  --ink: #211c17;
  --ink-muted: #615953;
  --rule: #dbd7d0;
  --rule-strong: #848078;
  --accent: #314c7e;
  --accent-strong: #213966;
  --accent-wash: #e5edfc;
  --on-accent: #fafcff;
  --danger: #ac312a;
  --danger-wash: #fcece9;
  --shadow: rgb(33 28 23 / 0.1);

  /* type */
  --font-display: "Literata Variable", Georgia, "Times New Roman", serif;
  --font-text: "Atkinson Hyperlegible Next Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-question: clamp(1.625rem, 1.2rem + 1.9vw, 2.375rem);
  --text-display: clamp(2rem, 1.45rem + 2.4vw, 2.875rem);
  --text-count: 2.25rem;
  --text-ref: 1.75rem;

  /* space, on a 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --badge: 4.5rem;
  --radius-control: 10px;
  --radius-button: 8px;
  --radius-sm: 6px;
  --radius-xs: 4px;
  --measure: 40rem;
  --column: 34rem; /* answers, the review and the total share one right edge */
  --drawing: clamp(7.5rem, 5rem + 8vw, 10rem);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  color-scheme: light;
  accent-color: var(--accent);
  caret-color: var(--accent);
  scrollbar-color: var(--rule-strong) transparent;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  font: 400 var(--text-md) / 1.5 var(--font-text); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-wash); color: var(--ink); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---- frame ---- */
.progress { position: fixed; inset: 0 0 auto; height: 3px; background: var(--rule); z-index: 10; }
.progress span {
  display: block; height: 100%; background: var(--accent);
  transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 320ms var(--ease-out);
}
.top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  width: min(100%, var(--measure)); margin: 0 auto; padding: var(--space-3) var(--space-5) 0;
}
.wordmark {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); font: 600 var(--text-md) / 1 var(--font-display); text-decoration: none;
}
.where { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; text-align: right; }
main { flex: 1; width: min(100%, var(--measure)); margin: 0 auto; padding: var(--space-7) var(--space-5) var(--space-8); }
.foot { padding: var(--space-5); color: var(--ink-muted); font-size: var(--text-xs); text-align: center; }

/* ---- a screen ---- */
.step { animation: arrive 260ms var(--ease-out) both; }
@keyframes arrive { from { opacity: 0; transform: translateX(16px); } }
/* Moving between screens: only the screen moves, so the header, the bar and the footer stay still. The screen left behind
   fades and drifts away, and the next slides in from the side it comes from (engine.js render). */
main { view-transition-name: screen; overflow-x: clip; } /* a screen sliding in never widens the page */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(screen) { animation-duration: 280ms; animation-timing-function: var(--ease-out); }
::view-transition-old(screen) { animation: leave 160ms ease-in both; }
::view-transition-new(screen) { animation: arrive 280ms var(--ease-out) both; }
[data-going="back"]::view-transition-old(screen) { animation-name: leave-back; }
[data-going="back"]::view-transition-new(screen) { animation-name: arrive-back; }
@keyframes leave { to { opacity: 0; transform: translateX(-16px); } }
@keyframes leave-back { to { opacity: 0; transform: translateX(16px); } }
@keyframes arrive-back { from { opacity: 0; transform: translateX(-16px); } }
/* the new screen's own arrival is the transition's, so it does not play twice */
html:active-view-transition .step { animation: none; }
h1 {
  max-width: 26ch; margin: 0 0 var(--space-3);
  font: 460 var(--text-question) / 1.18 var(--font-display); letter-spacing: -0.012em; text-wrap: balance;
}
/* every screen moves focus here so assistive tech announces it; :focus-visible otherwise outranks
   a bare type selector, so a keyboard/touch ring would box the question on every arrival */
h1:focus-visible { outline: none; }
.intro h1, .done h1 { margin-bottom: var(--space-4); font-size: var(--text-display); line-height: 1.1; }
.badge { display: block; width: var(--badge); height: auto; margin-bottom: var(--space-4); }
h2 { margin: var(--space-6) 0 var(--space-2); font: 600 var(--text-lg) / 1.3 var(--font-display); }
.help { max-width: 60ch; margin: 0 0 var(--space-5); color: var(--ink-muted); text-wrap: pretty; }
.lead { max-width: 60ch; margin: 0 0 var(--space-4); text-wrap: pretty; }
.small { margin: var(--space-2) 0; color: var(--ink-muted); font-size: var(--text-sm); }

/* ---- answers ---- */
.field input {
  width: 100%; padding: var(--space-2) 0 var(--space-3); border: 0; border-bottom: 2px solid var(--rule-strong); border-radius: 0;
  background: transparent; color: var(--ink); font: 500 var(--text-lg) / 1.3 var(--font-text);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.field.money { position: relative; }
/* the £ sits in the input's left padding, level with the typed text, and lets taps through to the input */
.field.money .pound {
  position: absolute; top: var(--space-2); left: 0; pointer-events: none;
  color: var(--ink); font: 500 var(--text-lg) / 1.3 var(--font-text);
}
.field.money input { padding-left: var(--space-5); }
.field input::placeholder { color: var(--ink-muted); opacity: 1; }
.field input:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 2px 0 var(--accent); }

.options { display: grid; gap: var(--space-2); max-width: var(--column); }
.option {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  min-height: 52px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-control); background: var(--surface);
  font-weight: 500; cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 120ms var(--ease-out);
}
.option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.option .label { flex: 1; }
.option .note { color: var(--ink-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.option kbd {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px;
  border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper);
  color: var(--ink-muted); font: 700 var(--text-xs) / 1 var(--font-text);
}
.option::after {
  content: ""; flex: none; width: 18px; height: 18px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; transform: scale(0.8); transition: opacity 140ms ease, transform 180ms var(--ease-out);
}
.option.on { border-color: var(--accent); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent); }
.option.on kbd { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.option.on .note { color: var(--ink); }
.option.on::after { opacity: 1; transform: none; }
.option:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.option:active { transform: scale(0.985); }

/* a box to tick, with all it says beside it in one card, and what it asks for once ticked */
.tick {
  max-width: var(--column); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-control); background: var(--surface);
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.tick label { display: flex; align-items: center; gap: var(--space-3); width: fit-content; font-weight: 600; cursor: pointer; }
.tick input { flex: none; width: 24px; height: 24px; margin: 0; cursor: pointer; }
.tick .note { margin: var(--space-1) 0 0; color: var(--ink-muted); }
.tick .declaration { margin: var(--space-1) 0 0; font-size: var(--text-sm); line-height: 1.4; text-wrap: pretty; }
.tick:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent); }
.tick:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.tick input:focus-visible { outline: none; }
.asks { max-width: var(--column); margin: var(--space-5) 0 0; padding: 0; border: 0; }
.asks legend { padding: 0; font-weight: 600; }
.asks .help { margin: var(--space-1) 0 0; }
.asks .field { margin-top: var(--space-4); }
.asks label { display: block; color: var(--ink-muted); font-size: var(--text-sm); font-weight: 600; }
.asks .small { margin-top: var(--space-4); }

.stepper { display: inline-flex; align-items: center; gap: var(--space-4); }
.stepper button {
  display: grid; place-items: center; width: 52px; height: 52px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--ink);
  cursor: pointer; transition: transform 120ms var(--ease-out), border-color 140ms ease;
}
.stepper button::before {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.stepper .less { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.stepper .more { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.stepper button:active { transform: scale(0.95); }
.stepper button:disabled { opacity: 0.4; cursor: default; transform: none; }
.stepper output { min-width: 2ch; text-align: center; font: 500 var(--text-count) / 1 var(--font-display); font-variant-numeric: tabular-nums; }

.total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  max-width: var(--column); margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.total strong { font: 650 var(--text-lg) / 1.2 var(--font-text); }

/* ---- actions ---- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.ok {
  min-height: 52px; padding: 0 var(--space-6); border: 0; border-radius: var(--radius-button);
  background: var(--accent); color: var(--on-accent); font: 650 var(--text-md) / 1 var(--font-text); letter-spacing: 0.01em;
  box-shadow: 0 1px 2px var(--shadow), 0 6px 16px -6px color-mix(in srgb, var(--accent) 45%, transparent);
  cursor: pointer; transition: background-color 140ms ease, transform 120ms var(--ease-out);
}
a.ok { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.ok:active { transform: scale(0.97); }
.back {
  order: -1; min-height: 44px; padding: 0 var(--space-2); border: 0; background: none;
  color: var(--ink-muted); font: 600 var(--text-sm) / 1 var(--font-text); cursor: pointer;
}
.hint { color: var(--ink-muted); font-size: var(--text-sm); }
.hint kbd { padding: 1px 6px; border: 1px solid var(--rule); border-radius: var(--radius-xs); background: var(--surface); font: 600 var(--text-xs) / 1.4 var(--font-text); }
.link {
  min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent); cursor: pointer;
  font: 600 var(--text-sm) / 1 var(--font-text); text-decoration: underline; text-underline-offset: 0.2em;
}
.link.danger { color: var(--danger); }
.later { margin: var(--space-5) 0 0; color: var(--ink-muted); font-size: var(--text-sm); }
@media (hover: hover) and (pointer: fine) {
  .option:hover { border-color: var(--ink-muted); }
  .ok:hover { background: var(--accent-strong); }
  .stepper button:hover:not(:disabled) { border-color: var(--ink-muted); }
}
@media (pointer: coarse) {
  .option kbd, .hint { display: none; }
}

/* ---- messages ---- */
.error {
  max-width: var(--column); margin: var(--space-4) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--danger-wash); color: var(--danger); font-size: var(--text-sm); font-weight: 600;
}
.error:empty { display: none; }
.notice { max-width: 60ch; margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-4); border-radius: var(--radius-control); background: var(--accent-wash); }

/* ---- review ---- */
.summary { display: grid; grid-template-columns: auto 1fr auto; column-gap: var(--space-4); max-width: var(--column); margin: 0; }
.summary .row {
  display: grid; grid-template-columns: 8.5rem 1fr auto; grid-template-columns: subgrid; grid-column: 1 / -1;
  align-items: center; gap: var(--space-1) var(--space-4); padding: var(--space-1) 0; border-bottom: 1px solid var(--rule);
}
.summary .row:last-child { border-bottom: 0; }
.summary dt { color: var(--ink-muted); font-size: var(--text-sm); }
.summary dd { margin: 0; font-weight: 500; overflow-wrap: break-word; }
.summary .change { min-height: 32px; } /* a text link, not a filled button: 32px clears the 24px floor without the full 44px control height */
.turnstile { max-width: var(--column); min-height: 65px; margin: var(--space-3) 0 0; }

/* ---- details, done, lists ---- */
.guide { max-width: var(--column); margin: calc(-1 * var(--space-3)) 0 var(--space-3); }
.intro .guide { margin: 0 0 var(--space-4); }
/* display: flex drops the native triangle, so the chevron is drawn: right when closed, down when open */
.guide summary {
  display: flex; align-items: center; gap: var(--space-2); width: fit-content; min-height: 44px;
  color: var(--accent); font-weight: 600; cursor: pointer; list-style: none;
}
.guide summary::-webkit-details-marker { display: none; }
.guide summary::before {
  content: ""; width: 0.45em; height: 0.45em; margin: 0 0.15em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform 180ms var(--ease-out);
}
.guide[open] summary::before { transform: translateY(-0.15em) rotate(45deg); }
.guide > p { color: var(--ink-muted); }
.howto {
  display: grid; grid-template-columns: var(--drawing) 1fr; align-items: start; gap: var(--space-4);
  margin-top: var(--space-1); padding: var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--surface);
}
.drawing { display: block; width: 100%; height: auto; }
.steps { margin: 0; padding-left: 1.4em; font-size: var(--text-sm); line-height: 1.45; }
.steps li + li { margin-top: var(--space-2); }
.steps li::marker { color: var(--accent); font-weight: 700; }
.example {
  margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--accent-wash); font-size: var(--text-sm); font-weight: 600;
}
.ref { margin: var(--space-4) 0 var(--space-5); font: 500 var(--text-ref) / 1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.ref small { display: block; margin-bottom: var(--space-2); color: var(--ink-muted); font: 400 var(--text-sm) / 1.4 var(--font-text); letter-spacing: 0; }
ol.next { max-width: 60ch; padding-left: 1.25em; }
ol.next li { margin-bottom: var(--space-2); }
.spinner {
  width: 28px; height: 28px; margin-top: var(--space-5);
  border: 3px solid var(--rule); border-top-color: var(--accent); border-radius: 50%; animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.links { display: grid; gap: var(--space-2); max-width: var(--column); padding: 0; list-style: none; }
.links a {
  display: flex; align-items: center; min-height: 52px; padding: 0 var(--space-4);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-control); background: var(--surface);
  color: var(--ink); font-weight: 500; text-decoration: none;
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 480px) {
  .top { padding-inline: var(--space-4); }
  .howto { gap: var(--space-3); padding: var(--space-3); }
  main { padding: var(--space-4) var(--space-4) var(--space-7); }
  .actions { margin-top: var(--space-4); }
  .actions .ok { flex: 1; } /* a thumb-wide button on phones */
}
@media (max-width: 420px) {
  /* label, answer and Change stay on one line, so the total and the button stay on the first screen */
  .summary { column-gap: var(--space-3); }
  .summary .row { grid-template-columns: 6.5rem 1fr auto; grid-template-columns: subgrid; gap: var(--space-1) var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .step { animation: fade 160ms ease both; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  @keyframes fade { from { opacity: 0; } }
  .progress span, .option, .tick, .ok, .stepper button, .guide summary::before { transition: none; }
  .spinner { animation-duration: 2s; }
}