/* Components. No raw colours — tokens only. */

/* ── Site header / footer ─────────────────────────────── */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 64px;
}
.brand {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand:hover { color: var(--color-text); text-decoration: none; }
.brand img { width: 30px; height: 30px; }

.site-nav { display: flex; gap: var(--space-5); overflow-x: auto; margin-left: auto; min-width: 0; }
.site-nav a { color: var(--color-muted); font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; text-decoration: none; padding-block: var(--space-2); }
.site-nav a:hover { color: var(--color-accent); }
.site-header__tools { flex: none; display: flex; align-items: center; gap: var(--space-2); }

/* Light / dark toggle: moon in light mode, sun in dark mode */
.theme-toggle { flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--color-input-border); border-radius: 999px; background: var(--color-surface); color: var(--color-muted); cursor: pointer; }
@media (hover: hover) { .theme-toggle:hover { color: var(--color-accent); border-color: var(--color-accent); } } /* no stuck highlight after a tap */
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle__moon path { fill: currentColor; stroke: none; }
.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: block; }
[data-theme="dark"] .theme-toggle__moon { display: none; }

/* Switching animation (site.js): a circle reveal where View Transitions
   are supported, otherwise a colour fade; the icon spins in either way */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-fading, .theme-fading * { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, fill 0.35s ease, stroke 0.35s ease !important; }
.theme-animating .theme-toggle svg { animation: theme-icon-in 0.5s ease; }
@keyframes theme-icon-in { from { transform: rotate(-120deg) scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .theme-animating .theme-toggle svg { animation: none; } }

.country-select {
  flex: none;
  max-width: 11rem;
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

/* Phones: logo + country on the first row, categories scroll on their own row */
@media (max-width: 767px) {
  .site-header__inner { flex-wrap: wrap; row-gap: 0; padding-block: var(--space-2) 0; }
  .site-header__tools { margin-left: auto; }
  .site-nav { order: 3; width: 100%; margin-left: 0; padding-block: var(--space-1) var(--space-2); }
}

.site-main { padding-block: var(--space-5) var(--space-6); }

.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding-block: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; }
.site-footer a { color: var(--color-muted); }

/* Ad slots — hidden until something is injected into them */
.ad-slot { margin-block: var(--space-4); text-align: center; }
.ad-slot:empty { display: none; }

/* ── Cards, buttons, breadcrumbs ──────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--color-accent-hover); color: var(--color-accent-contrast); text-decoration: none; }

.breadcrumb { font-size: var(--text-sm); margin-bottom: var(--space-2); color: var(--color-muted); }
.breadcrumb a { color: var(--color-muted); }

/* ── Form controls ────────────────────────────────────── */
.field { min-width: 0; }
.field[hidden] { display: none; }
input[type="date"].input { min-width: 0; }
.field__label { display: block; font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm); color: var(--color-label); margin-bottom: var(--space-1); }
.field__help { font-size: var(--text-sm); color: var(--color-muted); margin: var(--space-1) 0 0; }
.field__error { font-size: var(--text-sm); font-weight: 700; color: var(--color-danger); margin: var(--space-1) 0 0; }
.field__error:empty { display: none; }

.input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
textarea.input--list { resize: vertical; min-height: 4.5em; line-height: 1.5; }
.input-pair { display: flex; gap: var(--space-2); }
.input-pair > .input-group { flex: 1; min-width: 0; }
.input-pair > .input-group[hidden] { display: none; }
.input-group:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-focus); }
.input-group:has([aria-invalid="true"]) { border-color: var(--color-danger); }

.input-affix {
  display: flex;
  align-items: center;
  padding-inline: var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-family: var(--font-heading); /* plain zeros in typed numbers, like the results */
  font-weight: 500;
  font-size: 1.0625rem; /* ≥16px stops iOS zooming on focus */
}
.input:focus { outline: none; }
select.input { cursor: pointer; }

/* Units / Currency: a select styled like the other inputs */
.input--select {
  width: 100%;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}
.input--select:focus-visible { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-focus); }

/* ── Calculator page ──────────────────────────────────── */
.calc__header { margin-bottom: var(--space-5); }
.calc__intro { color: var(--color-muted); max-width: 60ch; margin-bottom: 0; }

.calc__body { display: flex; flex-direction: column; gap: var(--space-3); }

/* Results card: summary on the left, the calculator's visual on the right */
.calc__results { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-6); }
.calc__summary { flex: 1 1 280px; min-width: 0; }
.calc__visual { flex: 2 1 420px; min-width: 0; }
.calc__visual:empty { display: none; }

/* Inputs strip: every field (Units and Currency first) in a flowing grid */
.calc__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--space-4);
  align-items: start;
}

/* Phones: inputs first, results after; the result bar covers the gap */
@media (max-width: 767px) {
  .calc__form { order: 1; }
  .calc__results { order: 2; }
  .calc__table { order: 3; }
  .calc { padding-bottom: 64px; }
}

.result-list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: var(--space-3) var(--space-5);
}
.result { display: flex; flex-direction: column; gap: 2px; }
.result dt { color: var(--color-muted); font-size: var(--text-sm); }
.result dd { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.result--primary { grid-column: 1 / -1; }
.result--primary dt { font-size: var(--text-base); }
.result--primary dd { font-weight: 700; font-size: var(--text-result); line-height: 1.05; letter-spacing: -0.02em; }
.result__unit { font-family: var(--font-body); font-weight: 400; color: var(--color-muted); font-size: 0.55em; letter-spacing: 0; }

.calc-results__empty { color: var(--color-muted); margin: 0; }

/* ── Visuals (js/visuals.js) ──────────────────────────── */
.visual { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); height: 100%; justify-content: center; }
.visual__legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); color: var(--color-muted); }
.legend__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend__item strong { color: var(--color-text); font-family: var(--font-heading); font-weight: 600; }
.legend__pct { color: var(--color-muted); }
.legend__caption { margin-left: auto; }
.legend__swatch { width: 12px; height: 12px; border-radius: 3px; }
/* Growth: the newest stack (e.g. interest) is the strong colour. Share: the first part is. */
.legend__swatch--1, .growth__part--1, .share__part--2 { background: var(--color-chart-1); }
.legend__swatch--2, .growth__part--2, .share__part--1 { background: var(--color-chart-2); }

/* Share bar: one total split into parts */
.share { display: flex; height: 40px; border-radius: var(--radius-sm); overflow: hidden; gap: 2px; }
.share__part { flex-basis: 0; min-width: 4px; }

/* Growth chart: stacked bars over time */
.growth { display: flex; flex-direction: column; gap: var(--space-1); }
.growth__bars {
  display: flex;
  align-items: stretch;
  gap: clamp(2px, 1vw, 10px);
  height: 220px;
  border-bottom: 1px solid var(--color-input-border);
}
.growth__bar {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column-reverse;
  padding: 0;
  border: 0;
  border-radius: 4px 4px 0 0;
  background: transparent;
  cursor: pointer;
}
/* The bar whose figures are in the readout: its column is shaded */
.growth__bar.is-active { background: var(--color-accent-faint); }
.growth__bar:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
/* Readout above the chart: "Year 3", the total, then each part */
.growth__readout { display: grid; gap: 2px; }
.readout__label { font-size: var(--text-sm); color: var(--color-muted); }
.readout__total { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-lg); color: var(--color-text); line-height: 1.2; }
.readout__parts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-sm); color: var(--color-muted); min-height: 1.5em; }
.growth__part:last-child { border-radius: 4px 4px 0 0; }
.growth__axis { display: flex; gap: clamp(2px, 1vw, 10px); font-size: var(--text-xs); color: var(--color-muted); }
.growth__label { flex: 1; min-width: 0; text-align: center; }
@media (max-width: 767px) { .growth__bars { height: 160px; } }

/* Table under a calculator (year-by-year schedules, lookups) */
.calc-table { padding: 0; }
.calc-table__summary { cursor: pointer; padding: var(--space-4) var(--space-5); font-family: var(--font-heading); font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.calc-table__summary::-webkit-details-marker { display: none; }
.calc-table__summary::after { content: "▾"; color: var(--color-muted); transition: transform 0.15s; }
.calc-table[open] .calc-table__summary::after { transform: rotate(180deg); }
.calc-table__scroll { overflow-x: auto; padding: 0 var(--space-5) var(--space-4); }
.calc-table table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.calc-table th, .calc-table td { padding: var(--space-2) var(--space-3); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--color-border); }
.calc-table thead th { color: var(--color-muted); font-weight: 600; }
.calc-table td, .calc-table tbody th { font-family: var(--font-heading); } /* plain zeros, like the results */
.calc-table th:first-child, .calc-table td:first-child { text-align: left; padding-left: 0; }
.calc-table tbody th { font-weight: 600; }
.calc-table tbody tr:last-child > * { border-bottom: 0; }

/* Scale visual (e.g. BMI): bands on a track, a marker at the value */
.scale__track { position: relative; display: flex; height: 14px; margin-top: 30px; border-radius: 999px; overflow: visible; }
.scale__band { height: 100%; background: var(--color-chart-1); opacity: 0.6; border-right: 2px solid var(--color-surface); }
.scale__band:first-child { border-radius: 999px 0 0 999px; }
.scale__band:last-of-type { border-radius: 0 999px 999px 0; border-right: 0; }
.scale__band.is-active { background: var(--color-chart-2); opacity: 1; }
.scale__marker { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; background: var(--color-text); border-radius: 2px; }
.scale__value { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm); color: var(--color-text); white-space: nowrap; }
.scale__ticks { position: relative; height: 1.4em; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-muted); }
.scale__tick { position: absolute; transform: translateX(-50%); }
.scale__legend { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 2px; font-size: var(--text-sm); color: var(--color-muted); }
.scale__key strong { color: var(--color-text); font-weight: 600; }
.scale__key.is-active { color: var(--color-accent-strong); }
.scale__key.is-active strong { color: var(--color-accent-strong); }
.scale__key.is-active::before { content: "▸ "; }

/* Diagram visual (e.g. Ohm's law triangle): drawn by the calculator with these classes */
.diagram { align-items: center; }
.diagram__svg { width: 100%; max-width: 340px; height: auto; overflow: visible; }
.diagram__line { fill: none; stroke: var(--color-input-border); stroke-width: 2; stroke-linejoin: round; }
.diagram__area { fill: transparent; }
.diagram__area--active { fill: var(--color-accent-soft); }
.diagram__symbol { font-family: var(--font-heading); font-weight: 700; font-size: 30px; fill: var(--color-text); text-anchor: middle; }
.diagram__symbol--active { fill: var(--color-accent-strong); }
.diagram__value { font-family: var(--font-body); font-size: 13px; fill: var(--color-muted); text-anchor: middle; }
.diagram__value--active { fill: var(--color-accent-strong); font-weight: 700; }
.diagram__caption { justify-content: center; text-align: center; }

/* Quick Convert row under measured results */
.convert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-input-border);
  font-size: var(--text-sm);
}
.convert__label { color: var(--color-muted); }
.convert__select {
  min-height: 38px;
  max-width: 100%;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}
.convert__value { margin-left: auto; font-family: var(--font-heading); font-weight: 600; font-size: var(--text-base); font-variant-numeric: tabular-nums; }

/* Phone result bar: pinned to the bottom while the results card is off screen */
.result-bar {
  position: fixed;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 10;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-bar);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.result-bar[hidden] { display: none; }
.result-bar__label { font-size: var(--text-sm); font-family: var(--font-heading); font-weight: 600; }
.result-bar__value { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .result-bar { display: none !important; } }

/* ── Notices (new calculator, engineering warning) ────── */
.notice {
  display: inline-block;
  margin: var(--space-3) 0 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  max-width: var(--prose-width);
}
.notice--new { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.notice--warning { display: block; background: var(--color-warning-soft); color: var(--color-text); border-left: 4px solid var(--color-warning); padding: var(--space-2) var(--space-3); font-family: var(--font-body); font-weight: 400; }

/* ── Explainer (below every calculator) ───────────────── */
.explainer { margin-top: var(--space-6); max-width: var(--prose-width); }
.explainer__section { margin-bottom: var(--space-6); }
.explainer__section h2 { margin-bottom: var(--space-4); }
.explainer ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.explainer li { margin-bottom: var(--space-2); }
.explainer__checked { font-size: var(--text-sm); color: var(--color-muted); }

.guide { margin: 0; display: grid; gap: var(--space-4); }
.guide dt { font-family: var(--font-heading); font-weight: 600; }
.guide dd { margin: var(--space-1) 0 0; color: var(--color-muted); }
.guide dd p { margin: 0; }

.formula {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow-x: auto;
  margin-bottom: var(--space-4);
}
.formula code { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-lg); line-height: 1.6; }
.formula__where-label { margin-bottom: var(--space-2); }
.formula__where { margin: 0 0 var(--space-4); display: grid; gap: var(--space-1); }
.formula__where div { display: flex; gap: var(--space-3); }
.formula__where dt { font-family: var(--font-heading); font-weight: 700; min-width: 2ch; }
.formula__where dd { margin: 0; color: var(--color-muted); }
.formula__note { color: var(--color-muted); }

.example {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-accent-faint);
  border: 1px solid var(--color-accent-soft);
}
.example > :last-child { margin-bottom: 0; }

.faq { margin-bottom: var(--space-5); }
.faq h3 { margin-bottom: var(--space-2); }
.faq p { color: var(--color-muted); }

/* ── Directory listings (home / category) ─────────────── */
.hero { padding-block: var(--space-4) var(--space-5); }
.hero p { color: var(--color-muted); font-size: var(--text-lg); max-width: 50ch; }

.category-block { margin-top: var(--space-6); }
.category-block h2 a { color: var(--color-text); text-decoration: none; }
.category-block h2 a:hover { color: var(--color-accent); }
.calc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  align-items: start; /* opening one description doesn't stretch its neighbours */
}
/* A tile: the title link stretches over the whole card; the star and
   the "What it does" toggle sit above it so they stay clickable */
.calc-tile { position: relative; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); }
.calc-tile:hover { border-color: var(--color-accent); }
.calc-tile__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.calc-tile h3 { margin: 0; }
.calc-tile__link { color: var(--color-text); text-decoration: none; }
.calc-tile__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.calc-tile__link:hover { color: var(--color-text); text-decoration: none; }
.calc-tile .star, .calc-tile__more { position: relative; z-index: 1; }
.calc-tile__more { align-self: flex-start; }
.calc-tile__more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-muted); }
.calc-tile__more summary::-webkit-details-marker { display: none; }
.calc-tile__more summary::after { content: "▾"; transition: transform 0.15s; }
.calc-tile__more[open] summary::after { transform: rotate(180deg); }
.calc-tile__more summary:hover { color: var(--color-accent); }
.calc-tile__more p { margin: var(--space-2) 0 0; color: var(--color-muted); font-size: var(--text-sm); }
.badge { display: inline-block; vertical-align: middle; margin-left: var(--space-1); padding: 1px var(--space-2); border-radius: 999px; background: var(--color-warning-soft); color: var(--color-warning); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; }
.see-all { display: inline-block; margin-top: var(--space-3); font-weight: 600; }

/* Favourite star (tiles and calculator pages) */
.star { flex: none; width: 40px; height: 40px; margin: -8px -8px 0 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--color-muted); cursor: pointer; }
.star svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.star:hover { color: var(--color-accent); background: var(--color-accent-faint); }
.star[aria-pressed="true"] { color: var(--color-star); }
.star[aria-pressed="true"] svg { fill: currentColor; }
.calc__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.calc__title-row .star { margin-top: 4px; width: 44px; height: 44px; }
.calc__title-row .star svg { width: 26px; height: 26px; }

/* ── Embed variant ────────────────────────────────────── */
.layout--embed .site-main { padding: var(--space-4); }
.powered-by {
  padding: var(--space-3) var(--space-4) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.powered-by img { width: 18px; height: 18px; }