/* costoffree - deliberately plain. One accent colour, one font stack, no
   framework. Nothing here imitates government branding: this is an
   independent prototype and it has to look like one. */

:root {
  /* ---- the dials ----------------------------------------------------
     The page is white throughout, so the panel frame is the only thing
     giving the page its structure: these five are the ones to experiment
     with. --card-line and --line are kept apart deliberately - thickening
     or darkening a panel frame should not also redraw every rule inside a
     table. */
  --page: #ffffff;        /* the page behind the panels */
  --card: #ffffff;        /* the panels themselves */
  --card-frame: 2px;      /* panel frame thickness */
  --card-line: #c8d2db;   /* panel frame colour */
  --paper: #f5f7f9;       /* tint inside a panel: stat boxes, the purse box */
  /* -------------------------------------------------------------------- */

  --ink: #15202b;
  --ink-soft: #4a5a6a;
  --ink-faint: #71818f;
  --line: #dde3e9;        /* table rules, inner boxes */
  --accent: #0f6b63;
  --accent-soft: #e4f1ef;
  --warn: #9b2c2c;
  /* Chart marks get their own teal, one step brighter than --accent. The UI
     accent is muted enough to read as grey at a 2px stroke and under a 10%
     wash; this step clears the chroma floor and still holds 3:1 against the
     card. Checked with the palette validator, light surface. */
  /* Employer NI is a different kind of money from the rest of the table -
     taken because of your job, but never yours to see - so it gets a hue of
     its own rather than another weight of the accent. The mark step is the
     validated series orange; the text step is that hue darkened until it
     clears 4.5:1 on both the card (5.5:1) and its own wash (5.1:1), because
     a label is text and 3:1 is not enough for text. */
  --employer: #a8500c;
  --employer-mark: #eb6834;
  --employer-wash: #fdf4ec;
  --chart: #018d87;
  --chart-wash: rgba(1, 141, 135, 0.1);
  --grid: #e7ecf0;
  --radius: 10px;
  --wrap: 56rem;
  /* One height for every control on the form row, so their labels line up
     however differently the browser sizes an input, a label and a button. */
  --control: 2.5rem;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- links ---------- */

/* The only links on the page are the project's own account, and they take
   the accent: the browser's blue is the one colour here that belongs to
   nothing else on the page. */
a {
  color: var(--accent);
  text-underline-offset: 0.15em;
}

a:hover { text-decoration-thickness: 2px; }


/* ---------- masthead ---------- */

/* No dark block. The masthead is the same white as everything else and the
   panels are what structure the page. The disclaimer is the one line that
   has to be read before anything else, so it keeps the top of the page, in
   --ink-soft: on white that is 7:1, where the fainter grey it used to have
   against the dark block would be 4:1 here and fail at this size. */
.masthead {
  background: var(--page);
  padding: 1.5rem 0 0;
}

.disclaimer {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.masthead h1 {
  margin: 0;
  font-size: clamp(2.1rem, 6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* Under the headline, small enough not to compete with it: somewhere to
   take a correction, which a page of other people's numbers needs. */
.handle {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* The same invitation again at the end of the answer, which is where
   somebody who disagrees with it has just arrived. */
.follow p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* An assumed income is not a caveat to be tucked away: every figure below
   it is built on a number the visitor did not give us, so it is the first
   panel in the results and it is tinted to say that it is not an answer. */
.assumed p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink);
}

/* .card is declared further down, so this needs the extra specificity to
   win the background and the frame it is overriding. */
.card.assumed {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.assumed strong { white-space: nowrap; }

/* The ask, in its own panel above the form: large, bold, and ending in a
   colon that points at the fields below it. */
.intro p {
  margin: 0;
  max-width: 38rem;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

main { padding-bottom: 4rem; }

/* ---------- cards ---------- */

.card {
  background: var(--card);
  border: var(--card-frame) solid var(--card-line);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.card h3 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
}

form.card { position: relative; }

/* ---------- form ---------- */

/* One row on a desktop, wrapping gracefully as it narrows. align-items:flex-end
   keeps the inputs, the toggles and the button sitting on a common baseline
   even though their labels are different lengths. */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem 0.75rem;
}

.field { margin: 0; border: 0; padding: 0; }

label, legend {
  display: block;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
  padding: 0;
  white-space: nowrap;
}

input[type="text"], select {
  width: 100%;
  height: var(--control);
  padding: 0 0.7rem;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid #9aa7b4;
  border-radius: 6px;
}

input[type="text"]:focus-visible, select:focus-visible, button:focus-visible,
summary:focus-visible, .segmented input:focus-visible + label {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

#postcode { text-transform: uppercase; width: 12.5rem; letter-spacing: 0.04em; }

#age { width: 7rem; }

.amount { display: flex; align-items: stretch; width: 9rem; height: var(--control); }

.amount .prefix {
  display: flex;
  align-items: center;
  padding: 0 0.6rem;
  border: 1px solid #9aa7b4;
  border-right: 0;
  border-radius: 6px 0 0 6px;
  background: var(--paper);
  color: var(--ink-soft);
}

.amount input { border-radius: 0 6px 6px 0; }

/* segmented radio control */

/* Buttons joined into one pill, so the pair reads as a single control. */
.segmented { display: inline-flex; }

.segmented input { position: absolute; opacity: 0; pointer-events: none; }

.segmented label {
  margin: 0 0 0 -1px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  height: var(--control);
  padding: 0 0.8rem;
  border: 1px solid #9aa7b4;
  background: #fff;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  transition: background 0.1s ease, border-color 0.1s ease;
}

.segmented label:first-of-type { margin-left: 0; border-radius: 6px 0 0 6px; }
.segmented label:last-of-type { border-radius: 0 6px 6px 0; }

.segmented label:hover { background: var(--paper); }

.segmented input:checked + label {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent);
  position: relative;  /* so the accent border wins over its neighbour's */
}

.segmented.small label { height: 1.9rem; padding: 0 0.65rem; font-size: 0.85rem; }

button {
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  height: var(--control);
  padding: 0 1.1rem;
  cursor: pointer;
  white-space: nowrap;
}

button:hover { background: #0c564f; }
button[disabled] { background: var(--ink-faint); cursor: progress; }

.hint {
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.error {
  margin: 0.75rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--warn);
}

/* ---------- summary ---------- */

.place h2 { margin: 0; font-size: 1.3rem; letter-spacing: -0.01em; }
.place p { margin: 0.2rem 0 0; color: var(--ink-soft); font-size: 0.92rem; }

.headline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin: 1.4rem 0 0;
}

.stat {
  padding: 0.9rem 1rem;
  background: var(--paper);
  border-radius: 8px;
  border: 1px solid var(--line);
}

.stat.accent { background: var(--accent-soft); border-color: var(--accent); }

.stat-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.stat strong {
  display: block;
  margin: 0.25rem 0 0.15rem;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.stat.accent strong { color: var(--accent); }

.stat-note { display: block; font-size: 0.8rem; color: var(--ink-faint); }

.resolved {
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.period-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- tables ---------- */

table { width: 100%; border-collapse: collapse; }

th, td {
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--line);
}

thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--ink);
}

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* The three money columns are read against each other, so they get one
   width rather than each taking whatever its own largest figure needs -
   GBP 225 beside GBP 166,539 otherwise sets three different columns and the
   eye has to re-find the right edge on every row. The service column takes
   whatever is left, which is most of it. */
#breakdown th:nth-child(n+2),
#breakdown td:nth-child(n+2) { width: 17%; }

tbody tr:hover { background: #fafbfc; }

tfoot td {
  font-weight: 700;
  border-bottom: 0;
  border-top: 2px solid var(--ink);
  padding-top: 0.5rem;
}

.service { font-weight: 500; }

/* share of spending, drawn as a bar under the service name */
.bar {
  display: block;
  height: 3px;
  margin-top: 0.35rem;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.5;
  min-width: 2px;
}

.share { font-size: 0.78rem; color: var(--ink-faint); }

.tax-detail td:first-child { color: var(--ink-soft); }
.tax-detail td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tax-detail tr.total td { font-weight: 700; color: var(--ink); }
.tax-detail tr.total td:first-child { color: var(--ink); }

/* A subtotal, not the total: the payslip line still has to be findable by
   someone holding a payslip, so it is set apart without being the bottom. */
.tax-detail tr.subtotal td {
  font-weight: 600;
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.tax-detail tr.subtotal td:first-child { color: var(--ink); }

/* The employer bracket. The 4px rule down the left is the bracket: it runs
   unbroken because the rows have no gap between them, so three tinted rows
   read as one block rather than three facts that happen to be adjacent. */
.tax-detail tr.employer td { background: var(--employer-wash); }
.tax-detail tr.employer td:first-child {
  border-left: 4px solid var(--employer-mark);
  padding-left: 0.7rem;
  color: var(--employer);
}
.tax-detail tr.employer td:last-child { color: var(--employer); }
.tax-detail tr.employer-top td { border-top: 1px solid var(--employer-mark); }
.tax-detail tr.employer.total td { color: var(--employer); font-weight: 700; }

/* The receipts block. Quieter than the stats above it: it is national
   context, true of every visitor, and it must not compete with the figures
   that actually answer what was asked. */
.purse {
  margin: 1.1rem 0 0;
  padding: 0.85rem 1rem;
  background: var(--paper);
  border-radius: 8px;
  border: 1px solid var(--line);
}

.purse p { margin: 0; font-size: 0.86rem; color: var(--ink-soft); }

.purse summary {
  margin-top: 0.6rem;
  font-size: 0.86rem;
  color: var(--accent);
  cursor: pointer;
}

.purse details[open] summary { margin-bottom: 0.4rem; }

#purse-table { margin-top: 0.5rem; }
#purse-table th, #purse-table td { padding: 0.35rem 0.4rem; font-size: 0.86rem; }
#purse-table th:nth-child(n+2),
#purse-table td:nth-child(n+2) { width: 20%; }
/* A receipt that is not a tax is a different kind of thing and the table
   says so rather than quietly counting it as one. */
#purse-table tr.not-a-tax td:first-child::after {
  content: " - not a tax";
  color: var(--ink-faint);
}
#purse-table tr.on-your-bill td { color: var(--accent); font-weight: 600; }

.tax-note {
  margin: 0.9rem 0 0;
  padding-left: 0.7rem;
  border-left: 4px solid var(--employer-mark);
  color: var(--ink-soft);
  font-size: 0.86rem;
}
.tax-note:empty { display: none; }


/* ---------- the approximate-geography warning ---------- */

.warn-note {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--warn);
  background: #fdf6f6;
  border-radius: 0 6px 6px 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- the summary panel ---------- */

/* It is read before anything else and it is the whole argument of the page in
   two sentences, so the sentences are set larger than body copy and the two
   figures in them larger again. Everything below this card is the working. */
.verdict h2 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
}

.verdict-line {
  margin: 0 0 0.7rem;
  max-width: 44rem;
  font-size: clamp(1.05rem, 2.1vw, 1.25rem);
  line-height: 1.45;
}

.verdict-line:last-of-type { margin-bottom: 1.5rem; }

.verdict-line strong {
  font-weight: 700;
  white-space: nowrap;
  color: var(--accent);
}

/* The service rows are a reading of the same two figures, so they are quieter
   than the sentences and the names are not competing with the money. */
#verdict-table td:first-child { color: var(--ink-soft); }
#verdict-table th:nth-child(n+2),
#verdict-table td:nth-child(n+2) { width: 26%; }
#verdict-table td.num { font-weight: 600; }

/* The savings line answers a different question from the row above it - what
   the same money would be worth, not what it was - so it is tinted and set
   lighter rather than reading as a second subtotal. */
#verdict-table tfoot tr.saved td {
  border-top: 1px solid var(--line);
  font-weight: 600;
  color: var(--accent);
}

#verdict-table tfoot tr.saved td:first-child {
  font-weight: 500;
  color: var(--ink-soft);
}

/* ---------- sub-heads ---------- */

.lede {
  margin: 0;
  max-width: 46rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

/* A table brings no top margin of its own, so a sub-head above one needs
   to make the gap itself. */
.card .lede + table { margin-top: 1.25rem; }

/* ---------- lifetime card ---------- */

/* position:relative anchors the tooltip, which is placed in host coordinates. */
.chart {
  position: relative;
  margin: 1.5rem 0 0;
}

.chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.chart .grid {
  stroke: var(--grid);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart .axis {
  stroke: #cfd8e0;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart .band { stroke: none; }

/* The 2px surface gap that separates touching bands. Drawn as a stroke in the
   card colour along each band's top edge, so white does the separating rather
   than a border round every shape. */
.chart .band-gap {
  fill: none;
  stroke: var(--card);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.chart .total-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.chart .total-end {
  fill: var(--ink);
  stroke: var(--card);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.chart .label-total {
  font-size: 12px;
  font-weight: 600;
  fill: var(--ink-soft);
}

.chart .label-total-value {
  font-size: 15px;
  font-weight: 700;
  fill: var(--ink);
}

/* The chosen age. Dotted is the one place dashing earns its keep here: it is
   a reference line, not a gridline and not data. */
.chart .now {
  stroke: var(--ink-faint);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

.chart .now-label { font-size: 11px; fill: var(--ink-faint); }

.chart .tick {
  font-size: 11px;
  fill: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.chart .end-anchor { text-anchor: end; }
.chart .mid-anchor { text-anchor: middle; }

/* The narrow viewBox is less than half as many units across, so its text
   needs proportionally more of them to come out the same size on screen. */
.chart svg.narrow .tick { font-size: 15px; }
.chart svg.narrow .now-label { font-size: 15px; }
.chart svg.narrow .label-total { font-size: 15px; }
.chart svg.narrow .label-total-value { font-size: 18px; }

.chart .cross line {
  stroke: var(--ink);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart .cross circle {
  fill: var(--ink);
  stroke: var(--card);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.chart .hit { fill: transparent; cursor: crosshair; }

/* ---------- legend ---------- */

.legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.25rem 1.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.legend-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}

.legend-name { flex: 1; color: var(--ink-soft); }

.legend-value {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.legend-total { border-bottom: 0; border-top: 2px solid var(--ink); }
.legend-total .legend-name { color: var(--ink); font-weight: 600; }

.swatch {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  transform: translateY(1px);
}

/* The total is a line on the chart, not a filled band, so its key is a rule. */
.swatch-line {
  height: 3px;
  border-radius: 2px;
  background: var(--ink);
  transform: translateY(-3px);
}

/* ---------- savings card: slider + checkboxes ---------- */

.savings-controls {
  display: grid;
  grid-template-columns: minmax(14rem, 20rem) 1fr;
  gap: 1.25rem 2rem;
  margin: 1.25rem 0 0.25rem;
  padding: 1rem 1.1rem;
  background: var(--paper);
  border-radius: var(--radius);
}

.slider { display: flex; align-items: center; gap: 0.75rem; }

/* The track is wide and the thumb is large: this is a control people drag
   back and forth to compare, not a form field they set once. */
.slider input[type="range"] {
  flex: 1;
  min-width: 0;
  height: var(--control);
  margin: 0;
  accent-color: var(--accent);
  cursor: grab;
}

.slider input[type="range"]:active { cursor: grabbing; }

/* The live value sits beside the thumb, tabular so it does not jiggle the
   layout as it counts through 0.75% / 1% / 1.25%. */
.slider output {
  flex: 0 0 3.6rem;
  text-align: right;
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.2rem 1.25rem;
}

.check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  min-height: 1.9rem;
  padding: 0.2rem 0;
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
}

/* Without this the longest name ("Recreation, culture and religion") refuses
   to wrap and pushes itself off the edge of the card: a flex item will not
   shrink below its own content unless it is told it may. */
.check > span:last-child { min-width: 0; }

.check input {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* The swatch in the label is the only place the chart colour and the service
   name meet before the chart is drawn, so an unticked box still says which
   line will appear. */
.check .swatch { opacity: 0.35; transition: opacity 0.12s; }
.check input:checked + .swatch { opacity: 1; }

.check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- savings chart marks ---------- */

/* One line per service. 2px, round joins, no fill: these are comparable
   quantities on one scale, not parts of a whole, so they are not stacked. */
.chart .series-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.chart .series-end { stroke: var(--card); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* What went in, with no interest. Dashed because it is a reference against
   which the solid lines are read, and muted because it is not the answer. */
.chart .paid-line {
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}

/* Direct labels wear text ink, never the series colour - the dot beside them
   carries the identity. */
.chart .label-series {
  font-size: 11px;
  fill: var(--ink-soft);
}

.chart .label-paid { font-size: 11px; fill: var(--ink-faint); }

.chart svg.narrow .label-series,
.chart svg.narrow .label-paid { font-size: 15px; }

/* Paid in is a dashed reference line, so its key is a dashed rule. */
.swatch-dash {
  height: 0;
  border-radius: 0;
  border-top: 2px dashed var(--ink-faint);
  background: none;
  transform: translateY(-3px);
}

/* ---------- chart tooltip ---------- */

.tip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  padding: 0.6rem 0.7rem;
  background: var(--ink);
  color: #fff;
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.4;
  box-shadow: 0 2px 10px rgba(21, 32, 43, 0.3);
}

.tip strong { display: block; font-size: 0.85rem; }
.tip .tip-sub { display: block; color: #9fb3c8; font-size: 0.75rem; }

.tip-table {
  margin-top: 0.45rem;
  border-collapse: collapse;
  width: 100%;
}

.tip-table td {
  padding: 0.1rem 0 0.1rem 0.75rem;
  border: 0;
  white-space: nowrap;
  color: #dbe4ec;
}

.tip-table td:first-child { padding-left: 0; }
.tip-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tip-table .swatch { display: inline-block; margin-right: 0.4rem; }

.tip-table .tip-total td {
  border-top: 1px solid #3d4c5a;
  padding-top: 0.3rem;
  color: #fff;
  font-weight: 600;
}

/* Touch has no hover: the tooltip would sit under the finger and never clear,
   and the legend and the table above carry every value anyway. */
@media (hover: none) {
  .tip { display: none; }
  .chart .hit { cursor: default; }
}

/* ---------- details + footer ---------- */

details summary {
  cursor: pointer;
  font-weight: 600;
  margin: -0.25rem 0;
}

details[open] summary { margin-bottom: 0.75rem; }

details ul { margin: 0; padding-left: 1.2rem; color: var(--ink-soft); }
details li { margin-bottom: 0.6rem; }

footer {
  margin-top: 2rem;
  font-size: 0.82rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

footer p { margin: 0 0 0.5rem; }

@media (max-width: 48rem) {
  /* The slider and the checkboxes stack rather than share a row - a range
     input squeezed to a few centimetres is unusable. */
  .savings-controls { grid-template-columns: 1fr; }
}

@media (max-width: 30rem) {
  .card { padding: 1.15rem; }
  .stat strong { font-size: 1.3rem; }
  th, td { padding: 0.35rem 0.3rem; }
  .legend { gap: 0 0.75rem; }
  /* Four columns of currency is too many for a phone. The lifetime figure
     is repeated in the legend below, so this hides nothing. */
  #breakdown th:nth-child(2), #breakdown td:nth-child(2) { display: none; }
}

/* "of which" rows beneath a service. Deliberately quieter than the lines
   they sit under: they are a partial breakdown, not another ten services,
   and nothing about them should read as addable to the column above. */
#breakdown tbody tr.subline td {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  border-top: 0;
  color: var(--ink-faint);
  font-size: 0.86rem;
}

#breakdown tbody tr.subline td.sub {
  padding-left: 1.6rem;
  font-weight: 400;
}