/* VAT calculator: site-specific layout. Colours via template tokens only. */
.hero { padding-block: var(--section-pad); }
.calc { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; margin-top: var(--space-lg); }
@media (min-width: 56rem) { .calc { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.calc__form { display: grid; gap: var(--space-lg); margin: 0; }
.calc__inputs { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.field--rate .input-wrap input { text-align: left; }
.calc__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.results { background: var(--c-brand-tint); border-radius: var(--radius-md); padding: clamp(1rem, 0.7rem + 1.5vw, 1.5rem); }
.results__title { font-size: var(--fs-lg); margin-bottom: var(--space-xs); }
.results__summary { color: var(--c-text-muted); font-size: var(--fs-sm); min-height: 3em; }
.results__list { display: grid; gap: var(--space-xs); margin-bottom: var(--space-md); }
.results__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding-block: var(--space-xs); border-bottom: var(--border-w) solid var(--c-border-soft); flex-wrap: wrap; }
.results__row dt { font-weight: 600; }
.results__row dd { margin: 0; display: flex; align-items: center; gap: var(--space-sm); }
.results__row output { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--fs-lg); }
.results__row--total output { font-size: var(--fs-xl); color: var(--c-brand-strong); }
.results__row--total { border-bottom: 0; }
.results__note { margin: 0; }
.source-line { margin: var(--space-md) 0 0; }

.bulk { margin-top: var(--space-lg); padding: 0; }
.bulk > summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--control-h);
  padding: var(--space-sm) clamp(1rem, 0.6rem + 2vw, 2rem); cursor: pointer; font-weight: 700; font-size: var(--fs-lg); list-style: none; }
.bulk > summary::-webkit-details-marker { display: none; }
.bulk > summary::after { content: "+"; color: var(--c-brand); }
.bulk[open] > summary::after { content: "\2212"; }
.bulk__body { padding: 0 clamp(1rem, 0.6rem + 2vw, 2rem) clamp(1rem, 0.6rem + 2vw, 2rem); display: grid; gap: var(--space-md); }
.bulk__body > * { margin: 0; }
.table-wrap { overflow-x: auto; position: relative; } /* contains sr-only spans */
.bulk__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 0; }
.bulk__table th, .bulk__table td { text-align: left; padding: var(--space-xs); border-bottom: var(--border-w) solid var(--c-border-soft); vertical-align: middle; }
.bulk__table td:nth-child(n+3):not(:last-child) { text-align: right; white-space: nowrap; }
.bulk__table thead th:nth-child(n+3) { text-align: right; }
.bulk__table tfoot th, .bulk__table tfoot td { font-weight: 700; border-bottom: 0; }
.bulk__table td:nth-child(2) { min-width: 9rem; }
.input-wrap--compact { min-height: var(--control-h); }

.steps { padding-left: 1.25rem; display: grid; gap: var(--space-xs); }
.formula-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.formula-grid .card > :last-child { margin-bottom: 0; }
.formula-grid code { background: var(--c-bg-alt); padding: 0.125rem var(--space-2xs); border-radius: var(--radius-sm); }

/* Mobile-first: tight first-column padding on small screens, normal from 30rem */
.bulk__table thead th:nth-child(1), .bulk__table tbody th, .bulk__table tfoot th { padding-inline: var(--space-2xs); }
@media (min-width: 30rem) {
  .bulk__table thead th:nth-child(1), .bulk__table tbody th, .bulk__table tfoot th { padding-inline: var(--space-xs); }
}
.calc__reset { margin: 0; }
.calc__reset:has(> [hidden]) { display: none; }
.calc > *, .calc__inputs > * { min-width: 0; }
.results__row output { overflow-wrap: anywhere; }

/* SA vs UK comparison */
.cmp { display: grid; gap: var(--space-xl); margin-top: var(--space-lg); }
.cmp__amount { max-width: 24rem; }
.cmp__grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); margin-bottom: var(--space-md); }
.cmp__col h3 { font-size: var(--fs-lg); margin-bottom: var(--space-xs); }
.cmp__rate { color: var(--c-text-muted); font-weight: 600; }
.cmp__results > :last-child { margin-bottom: 0; }
.cmp__results #cmp-diff { margin: 0 0 var(--space-xs); }
.tools-heading { margin-top: var(--space-xl); }