/* Take-home pay calculator: the form, the results card with its donut, the tips sign-up.
   Builds on styles.css (tokens, nav, footer, buttons) and articles.css (.a-hero, .a-lede). */
.a-hero .eyebrow { display: block; margin-bottom: 18px; }
.a-hero h1 em { display: block; font-style: italic; color: var(--ink-70); }

/* The donut's colours, one per row, in ring order. Checked with the dataviz palette validator on the
   card's surface: every pair that can sit side by side stays apart for colour-blind readers. NI's amber
   is just under 3:1 against the card, so every segment is also named with its share beside it. */
.calc {
  --c-home: #2e8a5c; --c-tax: #3a3fa8; --c-ni: #c7871a; --c-pension: #4a8fd9; --c-loan: #d4628f;
  --err: #b4233c;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start;
  max-width: 1120px; margin: 56px auto 0; padding: 0 16px;
  scroll-margin-top: 100px;   /* a link that opens it filled in stops below the sticky nav */
}
.calc-in, .calc-out {
  background: var(--surface); border: 1px solid var(--hair); border-radius: 26px;
  box-shadow: 0 30px 60px -36px rgba(39, 37, 30, .35);
}
.calc-in { padding: 10px 34px 26px; }

/* ---------- Questions ---------- */
.q { border: 0; padding: 24px 0; min-width: 0; }
.q + .q { border-top: 1px solid var(--hair); }
/* floated, so the fieldset's top border stays a plain line above the question instead of running through it */
.q-label { float: left; width: 100%; padding: 0; margin-bottom: 14px; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; }
.q-label + * { clear: both; margin-top: 0; }
.q-opt { margin-left: 6px; font-family: var(--sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.q-help { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-70); }
.q-error { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--err); }

.money-field {
  display: flex; align-items: center; gap: 8px; margin-top: 14px; height: 76px; padding: 0 20px;
  background: #fff; border: 1.5px solid var(--hair); border-radius: 18px;
  font-family: var(--serif); font-weight: 300; font-size: 42px; letter-spacing: -.03em;
  transition: border-color .2s, box-shadow .2s;
}
.money-field span { color: var(--faint); }
.money-field input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; letter-spacing: inherit; color: var(--ink); outline: none; }
.money-field input::placeholder { color: var(--ink-30); }
.money-field:focus-within { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(20, 20, 42, .08); }
.money-field.invalid { border-color: var(--err); }

/* Tabs: a radio group drawn as a segmented control, so every choice is in view and arrow keys move between them */
.tabs { display: flex; gap: 2px; margin-top: 14px; padding: 4px; border-radius: 999px; background: var(--canvas-2); }
.tabs label { flex: 1 1 auto; position: relative; display: flex; }
.tabs input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tabs span {
  flex: 1; display: block; padding: 10px 14px; border-radius: 999px; text-align: center; white-space: nowrap;
  font-size: 14.5px; font-weight: 500; color: var(--ink-70); pointer-events: none;
  transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.tabs label:hover span { color: var(--ink); }
.tabs input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(39, 37, 30, .14), 0 0 0 .5px rgba(39, 37, 30, .08); }
.tabs input:focus-visible + span { outline: 2px solid var(--nhs-blue); outline-offset: 1px; }
.tabs--small { margin-top: 0; padding: 3px; }
.tabs--small span { padding: 7px 12px; font-size: 13.5px; }

.sub-field { margin-top: 16px; }
.sub-field > label, .sub-label { display: block; font-size: 14px; font-weight: 500; }
.sub-field input[type="text"] {
  display: block; width: 130px; height: 46px; margin-top: 6px; padding: 0 14px;
  background: #fff; border: 1.5px solid var(--hair); border-radius: 12px;
  font: 16px var(--sans); color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s;
}
.sub-field input[type="text"]:focus { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(20, 20, 42, .08); }
.sub-field input.invalid { border-color: var(--err); }
.sub-field--row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.sub-field--row input[type="text"] { margin-top: 0; width: 96px; }
#taxCode { width: 160px; text-transform: uppercase; letter-spacing: .04em; }
.sub[hidden], .sub-field[hidden] { display: none; }

/* Student loan plans: several can be ticked, so chips rather than tabs */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chips label { position: relative; display: flex; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips span {
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--hair); pointer-events: none;
  font-size: 14px; letter-spacing: .01em; color: var(--ink-70);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.chips label:hover span { color: var(--ink); border-color: var(--ink-30); }
.chips input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--canvas); }
.chips input:focus-visible + span { outline: 2px solid var(--nhs-blue); outline-offset: 2px; }

details.more > summary { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 14px; cursor: pointer; list-style: none; border-bottom: 1px solid var(--ink-30); }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: "+"; font-size: 15px; line-height: 1; color: var(--ink-50); }
details.more[open] > summary::after { content: "\2212"; }
.plans-list { list-style: none; margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-70); }
.plans-list li + li { margin-top: 6px; }
.plans-list b { color: var(--ink); font-weight: 600; }

/* "Tax code and other details": a question of its own, folded away */
.more--options { padding-bottom: 6px; }
details.more--options > summary { margin-top: 0; border: 0; font-family: var(--serif); font-size: 24px; line-height: 1.15; letter-spacing: -.02em; }
details.more--options > summary::after { margin-left: 4px; font-family: var(--sans); font-size: 20px; }
details.more--options > summary .q-opt { letter-spacing: .12em; }

.check { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; font-size: 15px; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--navy); }
.check small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--ink-70); }

/* a select, and a money (or miles) box with its unit inside the border: shared by every calculator */
.sel {
  height: 44px; max-width: 100%; padding: 0 38px 0 12px; border: 1.5px solid var(--hair); border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2327251e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 12px no-repeat;
  font: 15px var(--sans); color: var(--ink); appearance: none; -webkit-appearance: none; cursor: pointer;
}
.sel:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(20, 20, 42, .08); }
.sel[hidden] { display: none; }

/* a money (or miles) box: the unit sits inside the border */
.pound { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border: 1.5px solid var(--hair); border-radius: 12px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.pound > span { color: var(--faint); font-size: 15px; }
.pound input { width: 110px; border: 0; background: none; font: 16px var(--sans); color: var(--ink); outline: none; }
.pound:focus-within { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(20, 20, 42, .08); }


/* ---------- Results ---------- */
.calc-out { position: sticky; top: 92px; overflow: hidden; padding: 30px 32px 26px; }
.out-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.out-head h2 { font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: -.02em; }
.out-empty { margin-top: 26px; padding: 40px 20px; border: 1.5px dashed var(--ink-30); border-radius: 18px; text-align: center; color: var(--ink-70); }
.out-total {
  margin-top: 18px; font-family: var(--serif); font-weight: 300; line-height: 1; letter-spacing: -.04em;
  font-size: clamp(50px, 5.4vw, 76px); font-variant-numeric: tabular-nums;
}
.out-total .word { font-family: var(--sans); font-weight: 400; font-size: 19px; letter-spacing: 0; color: var(--ink-70); }
.out-sub { margin-top: 10px; font-size: 15px; color: var(--ink-70); }

.split { display: grid; grid-template-columns: 156px minmax(0, 1fr); gap: 26px; align-items: center; margin-top: 24px; }
.donut { width: 156px; height: 156px; display: block; }
.donut-track { fill: none; stroke: var(--canvas-2); stroke-width: 16; }
.donut-seg { fill: none; stroke-width: 16; transition: stroke-dasharray .5s var(--ease), stroke-dashoffset .5s var(--ease); }
.donut-pc { font-family: var(--serif); font-weight: 300; font-size: 24px; letter-spacing: -.03em; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.donut-word { font-family: var(--sans); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; fill: var(--ink-70); text-anchor: middle; dominant-baseline: central; }
.legend { list-style: none; display: grid; gap: 9px; font-size: 14.5px; }
.legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.legend li b { font-weight: 500; text-align: right; }
.sw { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }

.rows { margin-top: 24px; border-bottom: 1px solid var(--hair); }
.row { border-top: 1px solid var(--hair); }
.row-line { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; font-size: 15px; color: var(--ink-70); }
.row-line .sw { align-self: center; flex: none; }
.row-label { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.row-label small { display: block; font-size: 12.5px; color: var(--faint); }
.row-amt { font-family: var(--serif); font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
details.row > summary { list-style: none; cursor: pointer; }
details.row > summary::-webkit-details-marker { display: none; }
details.row > summary .row-label::after { content: ""; flex: none; width: 7px; height: 7px; margin: -3px 0 0 2px; border: solid var(--ink-50); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s var(--ease); }
details.row[open] > summary .row-label::after { transform: rotate(-135deg); margin-top: 3px; }
details.row > summary:hover .row-label { color: var(--ink); }
.row-more { padding: 0 0 14px 22px; font-size: 13.5px; line-height: 1.5; color: var(--ink-70); }
.row-more p + p { margin-top: 4px; }
.row-more b { font-weight: 500; color: var(--ink); }
.row.total .row-line { color: var(--ink); font-weight: 500; }
.row.home .row-line { color: var(--ink); font-weight: 600; }
.row.home .row-amt { font-size: 24px; }

.notes:empty { display: none; }
.note { margin-top: 12px; padding: 12px 14px 12px 40px; border-radius: 14px; background: var(--slate-bg); font-size: 14px; line-height: 1.5; position: relative; }
.note::before { content: "i"; position: absolute; left: 14px; top: 13px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--slate); color: #fff; font: 600 11px/1 var(--serif); font-style: italic; }
.note.warn { background: var(--amber-bg); }
.note.warn::before { content: "!"; background: var(--amber); font: 700 11px/1 var(--sans); }

.p87 { margin-top: 18px; padding: 18px 20px; border-radius: 18px; background: var(--green-bg); font-size: 14.5px; line-height: 1.5; color: var(--ink-70); }
.p87-lead { margin-bottom: 6px; font-family: var(--serif); font-size: 21px; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.p87-lead b { font-weight: 400; color: var(--green); }
.p87-link { display: inline-block; margin-top: 10px; color: var(--nhs-blue); border-bottom: 1px solid rgba(0, 94, 184, .4); }
.p87-link:hover { border-color: var(--nhs-blue); }

details.how { margin-top: 20px; font-size: 13.5px; line-height: 1.5; color: var(--ink-70); }
details.how > summary { display: inline-flex; gap: 6px; cursor: pointer; list-style: none; font-size: 14.5px; color: var(--ink); border-bottom: 1px solid var(--ink-30); }
details.how > summary::-webkit-details-marker { display: none; }
details.how > summary::after { content: "+"; color: var(--ink-50); }
details.how[open] > summary::after { content: "\2212"; }
details.how ul { margin: 12px 0 0 18px; }
details.how li + li { margin-top: 7px; }
details.how a { color: var(--ink); border-bottom: 1px solid var(--ink-30); }

/* ---------- Reading content: by grade, rates, questions (written by scripts/tax/build-page.js) ---------- */
.a-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.a-jump a { padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--hair); font-size: 14px; font-weight: 500; transition: border-color .2s; }
.a-jump a:hover { border-color: var(--ink-30); }

.tsec { max-width: 1120px; margin: 0 auto; padding: 96px 16px 0; scroll-margin-top: 80px; }
.tsec h2 { max-width: 780px; margin: 0 auto; text-align: center; font-size: clamp(32px, 4vw, 52px); text-wrap: balance; }
.tsec h2 em { font-style: italic; }
.tsec-lede { max-width: 640px; margin: 16px auto 0; text-align: center; font-size: 17px; line-height: 1.5; color: var(--ink-70); text-wrap: pretty; }
.tsec-note { max-width: 760px; margin: 18px auto 0; padding: 14px 18px; border-radius: 16px; background: var(--amber-bg); font-size: 15px; line-height: 1.5; }
.tsec-src { max-width: 760px; margin: 14px auto 0; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }
.tsec-src a, .ta a { color: var(--ink); border-bottom: 1px solid var(--ink-30); }

.ttable-wrap { margin-top: 32px; overflow-x: auto; border-radius: 22px; border: 1px solid var(--hair); background: var(--surface); box-shadow: 0 30px 60px -40px rgba(39, 37, 30, .35); }
.ttable { width: 100%; border-collapse: collapse; font-size: 15px; }
.ttable th, .ttable td { padding: 11px 14px; text-align: left; border-top: 1px solid var(--hair); }
.ttable thead th { border-top: 0; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ttable tbody th { font-weight: 500; }   /* a row's name: as the grades table, not full bold */
.ttable--grades th, .ttable--grades td { padding: 14px 20px; white-space: nowrap; }
.ttable--grades tbody th { font-weight: 500; }
.ttable--grades td:last-child { text-align: right; }
.ttable--grades td a { font-family: var(--serif); font-size: 19px; color: var(--ink); border-bottom: 1px solid rgba(0, 94, 184, .35); transition: border-color .2s; }
.ttable--grades td a::after { content: " \203A"; font-family: var(--sans); font-size: 15px; color: var(--nhs-blue); }
.ttable--grades td a:hover { border-color: var(--nhs-blue); }

.tgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.tcard { padding: 22px 22px 18px; border-radius: 22px; border: 1px solid var(--hair); background: var(--surface); }
.tcard h3 { margin-bottom: 8px; font-family: var(--serif); font-weight: 400; font-size: 21px; letter-spacing: -.01em; }
.tcard .ttable th, .tcard .ttable td { padding: 8px 6px; font-size: 14px; }
.tcard .ttable thead th { font-size: 11.5px; }
.tcard p { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--ink-70); }

.tfaq { max-width: 760px; margin: 32px auto 0; border-bottom: 1px solid var(--hair); }
.tq { border-top: 1px solid var(--hair); }
.tq > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px; cursor: pointer; list-style: none; }
.tq > summary::-webkit-details-marker { display: none; }
.tq > summary::after { content: "+"; flex: none; font-size: 22px; line-height: 1; color: var(--ink-50); }
.tq[open] > summary::after { content: "\2212"; }
.tq h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.25; letter-spacing: -.01em; }
.ta { padding: 0 2px 20px; font-size: 16px; line-height: 1.6; color: var(--ink-70); }

/* ---------- Tips sign-up ---------- */
.tips { max-width: 1120px; margin: 96px auto 0; padding: 0 16px; }
.tips-card {
  position: relative; isolation: isolate; overflow: hidden; padding: 64px 32px; border-radius: var(--radius-l);
  color: var(--canvas); text-align: center;
}
.tips-card .aurora { inset: -60px; }
.tips-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 20, 42, .2), rgba(20, 20, 42, .55)); }
.tips-tag { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(245, 242, 236, .35); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--light-70); }
.tips-card h2 { max-width: 760px; margin: 18px auto 0; font-size: clamp(36px, 4.6vw, 60px); text-wrap: balance; }
.tips-card h2 em { font-style: italic; }
.tips-lede { max-width: 560px; margin: 18px auto 0; font-size: 18px; line-height: 1.45; color: var(--light-70); text-wrap: pretty; }
.tips-card > .btn { margin-top: 30px; }
.tips-small { max-width: 520px; margin: 4px auto 0; font-size: 13px; line-height: 1.5; color: var(--light-70); }
.tips-small a { color: var(--canvas); border-bottom: 1px solid rgba(245, 242, 236, .45); }

/* shared by the calculators: a narrower reading table, and the pitch after the calculator (the dark card from
   the tips sign-up below, with three numbered steps) */
.ttable-wrap--narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.pitch { margin-top: 64px; scroll-margin-top: 90px; }
.pitch-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 920px; margin: 32px auto 0; text-align: left; }
.pitch-steps li { counter-increment: step; display: grid; gap: 6px; padding: 20px 20px 22px; border-radius: 20px; background: rgba(245, 242, 236, .08); border: 1px solid rgba(245, 242, 236, .14); }
.pitch-steps li::before { content: counter(step); display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 6px; border-radius: 50%; background: var(--canvas); color: var(--navy); font: 600 14px/1 var(--sans); }
.pitch-steps b { font-family: var(--serif); font-weight: 400; font-size: 21px; letter-spacing: -.01em; color: var(--canvas); }
.pitch-steps span { font-size: 15px; line-height: 1.5; color: var(--light-70); }
.pitch .get-app { margin-top: 30px; }
.pitch .tips-small { margin-top: 18px; }

@media (max-width: 860px) { .pitch-steps { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }


/* ---------- Get the app ---------- */
.calc-end { max-width: 1040px; margin: 0 auto; padding: 120px 16px 0; text-align: center; }
.calc-end .display { font-size: clamp(40px, 5vw, 68px); }
.calc-end .display em { font-style: italic; }
.calc-end p { max-width: 560px; margin: 18px auto 30px; font-size: 18px; color: var(--ink-70); }

/* ---------- Narrower screens ---------- */
@media (max-width: 960px) {
  .calc { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .calc-out { position: static; }
  .tgrid { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 560px) {
  .pitch { margin-top: 48px; }
  .calc { margin-top: 40px; gap: 16px; }
  .calc-in { padding: 4px 18px 18px; border-radius: 22px; }
  .calc-out { padding: 26px 18px 20px; border-radius: 22px; }
  .q-label, details.more--options > summary { font-size: 21px; }
  .money-field { height: 64px; font-size: 34px; padding: 0 16px; }
  .tabs span { padding: 9px 8px; font-size: 13.5px; }
  /* five equal tabs, so "Hourly" isn't pushed off the end */
  .tabs--five label { flex: 1 1 0; min-width: 0; }
  .tabs--five span { padding: 9px 0; font-size: 12.5px; }
  .tabs--small span { padding: 7px 8px; font-size: 13px; }
  .tabs--out { width: 100%; }
  .split { grid-template-columns: 124px minmax(0, 1fr); gap: 18px; }
  .donut { width: 124px; height: 124px; }
  .legend { font-size: 13.5px; gap: 7px; }
  .row-amt { font-size: 18px; }
  .row.home .row-amt { font-size: 21px; }
  .tsec { padding-top: 72px; }
  .tsec-lede { font-size: 16px; }
  /* four columns in a phone's width: tighter cells, no chevron */
  .ttable-wrap { border-radius: 18px; }
  .ttable--grades th, .ttable--grades td { padding: 11px 6px; white-space: normal; font-size: 13px; }
  .ttable--grades th:first-child, .ttable--grades td:first-child { padding-left: 12px; }
  .ttable--grades th:last-child, .ttable--grades td:last-child { padding-right: 12px; }
  .ttable--grades thead th { font-size: 10.5px; letter-spacing: .06em; }
  .ttable--grades td a { font-size: 16px; white-space: nowrap; }
  .ttable--grades td a::after { content: none; }
  .tq h3 { font-size: 19px; }
  .ta { font-size: 15.5px; }
  .tips { margin-top: 72px; }
  .tips-card { padding: 48px 20px; border-radius: 26px; }
  .tips-form { flex-direction: column; }
  .tips-form .btn { width: 100%; }
  .calc-end { padding-top: 88px; }
}
@media (max-width: 360px) {
  .tabs--five span { font-size: 11.5px; }
  .split { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .legend { width: 100%; }
}