/* ASI tax calculator. Built on the ASI Design System's web treatment (white page, ASI blue,
   Josefin Sans for headings, labels, numbers and charts, PT Serif for explanatory text), with
   the departures ASI asked for: a vivid, varied palette for the spending chart, and a light
   panel behind the inputs to group them. Interactive patterns are documented in
   DESIGN-EXTENSION.md. */

@font-face { font-family: "Josefin Sans"; src: url("../assets/fonts/JosefinSans.ttf") format("truetype"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Serif"; src: url("../assets/fonts/PTSerif-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Serif"; src: url("../assets/fonts/PTSerif-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "PT Serif"; src: url("../assets/fonts/PTSerif-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --asi-blue: #134079;
  --asi-white: #ffffff;
  --asi-navy: #1b2a4a;
  --ink: #161616;
  --grey: #52585e;          /* 7.2:1 on white, 6.6:1 on the panel */
  --hairline: #c9cdd2;
  --panel: #f3f5f8;         /* departure: groups the inputs */
  --hover: #eef1f6;
  --control-border: #52585e;
  --focus: #134079;
  --sans: "Josefin Sans", system-ui, sans-serif;
  --serif: "PT Serif", Georgia, "Times New Roman", serif;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--asi-white); color: var(--ink); font: 400 17px/1.55 var(--serif); hyphens: none; overflow-wrap: break-word; }
h1, h2, h3, legend, label, summary, button, input, table, .label, .total, .rate, .kicker, .source, .small, .tabs { font-family: var(--sans); }
a { color: var(--asi-blue); text-underline-offset: 3px; }
a:hover { color: var(--asi-navy); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.nw, [data-year-label], [data-spend-year] { white-space: nowrap; }

.page { max-width: 1180px; margin: 0 auto; padding: 20px var(--gutter) 40px; }
@media (min-width: 720px) { :root { --gutter: 32px; } }

/* Masthead */
.masthead { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--hairline); }
h1 { margin: 0 0 4px; color: var(--asi-blue); font-weight: 600; font-size: clamp(30px, 4vw, 44px); line-height: 1.15; }
.subtitle { margin: 0 0 6px; color: var(--asi-blue); font: 300 clamp(20px, 2.4vw, 25px)/1.25 var(--sans); }
.lede { margin: 0; font-size: 17px; color: var(--grey); }
.roundel { flex: none; width: 64px; height: 64px; }
@media (max-width: 560px) { .roundel { width: 48px; height: 48px; } }
.load-error { font: 600 18px/1.4 var(--sans); }

h2 { margin: 0 0 18px; color: var(--asi-blue); font-weight: 600; font-size: 22px; line-height: 1.25; }

/* Layout: details on the left, results on the right; one column on narrow screens */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 960px) { .layout { grid-template-columns: minmax(320px, 390px) minmax(0, 1fr); gap: 48px; } }

/* Inputs panel */
.panel { background: var(--panel); padding: 22px 20px 12px; }
@media (min-width: 720px) { .panel { padding: 26px 26px 14px; } }
.field { margin: 0 0 20px; border: 0; padding: 0; min-width: 0; }
.field > label, .label-row label, .field legend, .label { display: block; font-weight: 600; font-size: 17.5px; line-height: 1.3; color: var(--ink); padding: 0; margin: 0 0 6px; }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.label-row label { margin: 0; }
.hint { margin: -2px 0 8px; font-size: 15px; line-height: 1.4; color: var(--grey); }
input[type="text"] {
  display: block; width: 100%; margin: 0; font: 400 20px/1.3 var(--sans); color: var(--ink); background: var(--asi-white);
  border: 1px solid var(--control-border); border-radius: 0; padding: 9px 12px; min-height: 46px; font-variant-numeric: tabular-nums;
}
.input-short { max-width: 6.5em; }
input[aria-invalid="true"] { border: 2px solid var(--ink); padding: 8px 11px; }
.error { margin: 6px 0 0; font: 600 15.5px/1.35 var(--sans); color: var(--ink); }
.error::before { content: "Error: "; }
.money, .percent { display: flex; align-items: stretch; }
.percent { max-width: 9em; }
.money span, .percent span { display: flex; align-items: center; padding: 0 12px; font: 400 20px/1 var(--sans); background: var(--asi-white); border: 1px solid var(--control-border); color: var(--ink); }
.money span { border-right: 0; }
.percent span { border-left: 0; }

/* Segmented control (tax year) */
.segmented { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--asi-blue); background: var(--asi-white); }
.segmented button {
  font: 600 18px/1.2 var(--sans); color: var(--asi-blue); background: var(--asi-white); border: 0; padding: 9px 10px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px;
}
.segmented button + button { border-left: 1px solid var(--asi-blue); }
.segmented button[aria-pressed="true"] { background: var(--asi-blue); color: var(--asi-white); }
.segmented button:not([aria-pressed="true"]):hover { background: var(--hover); }
.seg-note { font-weight: 300; font-size: 14px; }
.segmented button:focus-visible { outline-offset: -5px; outline-color: currentColor; }

/* "?" help button and its inline explanation */
/* Josefin's "?" sits high in its em box, so the glyph is nudged down to look centred */
.help {
  flex: none; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 15px/1 var(--sans); color: var(--asi-blue); background: var(--asi-white);
  border: 1.5px solid var(--asi-blue); cursor: pointer;
  transition: background-color 150ms, color 150ms;
}
.help::before { content: "?"; display: block; transform: translateY(0.09em); }
.help:hover { background: var(--hover); }
.help[aria-expanded="true"] { background: var(--asi-blue); color: var(--asi-white); }
.help:focus-visible { outline-offset: 3px; }
.explain { margin: 2px 0 12px; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.explain p { margin: 0; }
.explain:not([hidden]) { animation: explain-in 180ms ease-out; }
@keyframes explain-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* Checkboxes and radios */
.check { display: grid; grid-template-columns: 24px 1fr auto; column-gap: 10px; align-items: start; margin: 0 0 14px; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--asi-blue); }
.check label { font: 600 17px/1.35 var(--sans); }
.check .hint { grid-column: 2 / 4; margin: 2px 0 0; }
.check-small { margin: 12px 0 0; }
.check-small label { font-weight: 400; font-size: 16.5px; }
.choices { display: flex; gap: 24px; }
.choice { display: inline-flex !important; align-items: center; gap: 8px; font-weight: 400 !important; }
.choice input { width: 22px; height: 22px; margin: 0; accent-color: var(--asi-blue); }

/* Plus / minus sign: two flat bars, the vertical one hidden when open */
.pm { position: relative; display: inline-block; width: 14px; height: 14px; flex: none; }
.pm::before, .pm::after { content: ""; position: absolute; background: var(--asi-blue); }
.pm::before { left: 0; top: 6px; width: 14px; height: 2px; }
.pm::after { left: 6px; top: 0; width: 2px; height: 14px; }
details[open] > summary .pm::after { display: none; }

/* Optional input groups: one line each until opened */
.groups { margin: 4px -4px 8px; border-top: 1px solid var(--hairline); }
.group { border-bottom: 1px solid var(--hairline); }
.group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 13px 4px; }
.group > summary::-webkit-details-marker { display: none; }
.group > summary:hover .group-name { text-decoration: underline; text-underline-offset: 3px; }
.group-name { font: 600 17px/1.3 var(--sans); color: var(--asi-blue); }
.group-status { margin-left: auto; font: 400 15px/1.3 var(--sans); color: var(--grey); text-align: right; }
.group-body { padding: 4px 4px 6px; }

/* Results */
.results { min-width: 0; }
.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--hairline); margin-bottom: 22px; }
.tabs [role="tab"] { font: 600 19px/1.2 var(--sans); color: var(--grey); background: none; border: 0; border-bottom: 3px solid transparent; padding: 6px 0 10px; margin-bottom: -1px; cursor: pointer; }
.tabs [role="tab"][aria-selected="true"] { color: var(--asi-blue); border-bottom-color: var(--asi-blue); }
.tabs [role="tab"]:hover { color: var(--asi-blue); }
.tab-panel:focus-visible { outline-offset: 6px; }
.kicker { margin: 0 0 4px; font-size: 17px; color: var(--grey); }
.total { margin: 0; color: var(--asi-blue); line-height: 1; }
.total-figure { font-weight: 600; font-size: clamp(52px, 8vw, 76px); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.total-unit { font-weight: 300; font-size: 24px; }
.rate-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.rate { margin: 0; font-size: 21px; }
.rate strong { font-weight: 600; color: var(--asi-blue); }
.compare { margin: 10px 0 18px; font-size: 16.5px; }

table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.num { text-align: right; white-space: nowrap; }
.summary-table th, .summary-table td { padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 18px; font-weight: 400; text-align: left; }
.summary-table td.num { text-align: right; padding-left: 16px; }
.summary-table .total-row th, .summary-table .total-row td { font-weight: 600; color: var(--asi-blue); border-top: 2px solid var(--asi-blue); border-bottom: 0; }
.small { margin: 8px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--grey); }

details.detail { border-bottom: 1px solid var(--hairline); }
.summary-table + details.detail { margin-top: 8px; }
details.detail > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 13px 0; }
details.detail > summary::-webkit-details-marker { display: none; }
details.detail > summary span { font: 600 17px/1.3 var(--sans); color: var(--asi-blue); }
details.detail > summary:hover span { text-decoration: underline; text-underline-offset: 3px; }
details.detail[open] { padding-bottom: 14px; }
.table-scroll { overflow-x: auto; }
.detail-table, .spend-table { margin: 0 0 4px; }
.detail-table thead th, .spend-table thead th { font: 600 14.5px/1.3 var(--sans); color: var(--asi-blue); text-align: left; padding: 6px 8px 6px 0; border-bottom: 2px solid var(--asi-blue); }
.detail-table thead th.num, .spend-table thead th.num { text-align: right; }
.detail-table tbody th, .detail-table tbody td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--hairline); font: 400 14.5px/1.4 var(--serif); text-align: left; vertical-align: top; }
.detail-table tbody td.num { text-align: right; font-family: var(--sans); font-size: 15.5px; }
.detail-table th:last-child, .detail-table td:last-child { padding-right: 0; }
.detail-table .section-row th { font: 600 15.5px/1.3 var(--sans); color: var(--asi-blue); padding-top: 14px; border-bottom: 1px solid var(--asi-blue); }
.detail-table .note-row th, .detail-table .note-row td { color: var(--grey); }
.detail-table .subtotal-row th, .detail-table .subtotal-row td { font-family: var(--sans); font-weight: 600; }
.detail-table .total-row th, .detail-table .total-row td { font: 600 16.5px/1.3 var(--sans); color: var(--asi-blue); border-top: 2px solid var(--asi-blue); border-bottom: 0; padding-top: 10px; }
.spend-table th, .spend-table td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--hairline); font: 400 15px/1.4 var(--sans); text-align: left; }
.spend-table td.num { text-align: right; }
.spend-table .cat-row th, .spend-table .cat-row td { font-weight: 600; color: var(--asi-blue); padding-top: 12px; }
.spend-table .sub-row th { padding-left: 16px; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.button { font: 600 17px/1.2 var(--sans); color: var(--asi-white); background: var(--asi-blue); border: 2px solid var(--asi-blue); border-radius: 0; padding: 11px 20px; cursor: pointer; min-height: 46px; }
.button:hover { text-decoration: underline; text-underline-offset: 4px; }
.button:focus-visible { outline-offset: 3px; }
.button-secondary { color: var(--asi-blue); background: var(--asi-white); }
.button:disabled { cursor: progress; }

/* Pie chart (departure: the vivid category palette comes from the taxonomy) */
.pie-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; margin: 12px 0 18px; }
@media (min-width: 640px) { .pie-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; } }
@media (min-width: 1100px) { .pie-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; } }
.pie-figure { max-width: 280px; width: 100%; margin: 0 auto; }
.pie-svg { display: block; width: 100%; height: auto; }
.slice { stroke: var(--asi-white); stroke-width: 2; stroke-linejoin: round; cursor: pointer; transition: opacity 120ms; }
.has-hot .slice:not(.is-hot) { opacity: 0.35; }
.pie-centre { transition: opacity 160ms ease; }
.pie-centre.is-fading { opacity: 0; }
.pie-centre-value { font-family: var(--sans); font-weight: 600; fill: var(--asi-blue); }
.pie-centre-label { font: 400 15px var(--sans); fill: var(--grey); }
.legend-list .enter { animation: legend-in 280ms ease-out both; }
@keyframes legend-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .slice, .pie-centre, .help { transition: none; }
  .legend-list .enter, .explain:not([hidden]) { animation: none; }
}

.back-button { font: 600 16px/1.2 var(--sans); color: var(--asi-blue); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.back-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.pie-title { margin: 10px 0 4px; font: 600 22px/1.25 var(--sans); color: var(--ink); }
.pie-title:focus { outline: none; }
.pie-sub { margin: 0 0 12px; font-size: 15.5px; }
.legend-columns, .legend-item { display: grid; grid-template-columns: 16px minmax(0, 1fr) 84px 52px; column-gap: 10px; align-items: baseline; }
.legend-columns { grid-template-columns: minmax(0, 1fr) 84px 52px; padding: 0 6px 6px 32px; font: 400 13.5px/1.3 var(--sans); color: var(--grey); border-bottom: 1px solid var(--hairline); }
.legend-columns span:nth-child(n+2) { text-align: right; }
.legend-list { list-style: none; margin: 0; padding: 0; }
.legend-item { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--hairline); padding: 9px 6px; font: 400 16.5px/1.3 var(--sans); color: var(--ink); }
button.legend-item { cursor: pointer; }
button.legend-item:hover, .legend-item.is-hot { background: var(--hover); }
button.legend-item:hover .legend-name { text-decoration: underline; text-underline-offset: 3px; }
.legend-item:focus-visible { outline-offset: -2px; }
.swatch { width: 14px; height: 14px; align-self: start; margin-top: 2px; }
.legend-name { font-weight: 600; }
.legend-static .legend-name { font-weight: 400; }
.legend-amount, .legend-pence { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.legend-pence { color: var(--grey); }
.legend-desc { grid-column: 2 / -1; margin-top: 4px; font: 400 14px/1.45 var(--serif); color: var(--grey); }

.notable { grid-column: 2 / -1; margin-top: 8px; }
.notable-head { display: block; font: 600 13.5px/1.3 var(--sans); color: var(--grey); margin-bottom: 2px; }
.notable ul { list-style: none; margin: 0; padding: 0; }
.notable-item { display: grid; grid-template-columns: minmax(0, 1fr) auto 84px; column-gap: 10px; align-items: baseline; padding: 4px 0; border-top: 1px dotted var(--hairline); font: 400 15px/1.35 var(--sans); }
.notable-total { color: var(--grey); white-space: nowrap; font-variant-numeric: tabular-nums; }
.notable-yours { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.notable-note { grid-column: 1 / -1; font: 400 13.5px/1.4 var(--serif); color: var(--grey); }
.spend-table .notable-row th { padding-left: 32px; font-style: italic; color: var(--grey); }
.spend-table .notable-row td { color: var(--grey); }
@media (max-width: 560px) { .notable-item { grid-template-columns: minmax(0, 1fr) auto 70px; font-size: 14px; } }
.about { font-size: 15.5px; }
.about p { margin: 0 0 10px; }
.exclusions { margin: 0 0 12px; padding-left: 20px; }
.exclusions li { margin: 0 0 6px; }
.exclusions strong { font-family: var(--sans); font-weight: 600; }
.source { margin: 16px 0 0; font-size: 15px; line-height: 1.45; color: var(--grey); }

@media (max-width: 560px) {
  .tabs { gap: 20px; }
  .tabs [role="tab"] { font-size: 18px; }
  .legend-columns, .legend-item { grid-template-columns: 14px minmax(0, 1fr) 70px 44px; column-gap: 8px; }
  .legend-columns { grid-template-columns: minmax(0, 1fr) 70px 44px; padding-left: 28px; }
  .legend-item { font-size: 15.5px; }
  .detail-table tbody th, .detail-table tbody td, .spend-table th, .spend-table td { font-size: 13.5px; }
  .detail-table tbody td.num { font-size: 14px; }
}

.footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--hairline); font-size: 14.5px; line-height: 1.5; color: var(--grey); max-width: 52em; }
.footer p { margin: 0 0 10px; }