/* ===========================================================
   OnFinance, Calculator Suite
   Task-first redesign: land on "What do you want to work out?"
   (search + quick picks + compact grouped list), then work in a
   focused calculator with an always-reachable switcher and, on
   mobile, a floating live-result bar.
=========================================================== */

.calc-app{ position: relative; }
.calc-app[data-view="gallery"] .calc-workspace{ display: none; }
.calc-app[data-view="workspace"] .calc-gallery{ display: none; }

/* Page-scoped compact hero: get people to the tool inside one scroll. */
.page-hero--compact{ padding-block: var(--space-lg) var(--space-md); }
.page-hero--compact h1{ font-size: var(--text-2xl); }
.page-hero--compact p.lede{ font-size: var(--text-base); max-inline-size: 46ch; }
@media (max-width: 720px){
  .page-hero--compact{ padding-block: var(--space-md) var(--space-sm); }
  .page-hero--compact h1{ font-size: var(--text-xl); }
  .page-hero--compact .breadcrumb{ margin-block-end: var(--space-2xs); }
}

/* ============ Finder (app landing state) ============ */
.calc-gallery{
  display: grid;
  gap: var(--space-md);
  /* No entrance fade. The gallery is what the page is for, and a
     half second of it fading up on load is indistinguishable from
     the page still loading. The workspace below keeps its
     transition, because that one is a view the visitor asked for
     by tapping a calculator, so they are already watching it. */
}
@keyframes calc-gallery-in{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .calc-gallery{ animation: none; } }

/* ---- The question + search ---- */
.calc-finder__ask{ display: grid; gap: var(--space-2xs); }
.calc-finder__question{
  font-family: var(--font-display); font-weight: 800; letter-spacing: var(--tracking-tight);
  font-size: var(--text-lg); color: var(--color-text);
}
.calc-search{ position: relative; display: flex; align-items: center; max-inline-size: 560px; }
.calc-search__icon{
  position: absolute; inset-inline-start: 1em; display: inline-flex; pointer-events: none;
  color: var(--brand-red-600);
}
.calc-search__icon svg{ inline-size: 1.25em; block-size: 1.25em; }
.calc-search__input{
  inline-size: 100%; font: inherit; font-weight: 600; font-size: var(--text-base);
  padding: 0.85em 2.8em 0.85em 2.8em; min-block-size: 52px;
  border-radius: var(--radius-full); border: 1.5px solid var(--color-border-strong);
  background: var(--surface); color: var(--color-text); box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.calc-search__input::placeholder{ color: var(--ink-400); font-weight: 500; }
.calc-search__input:focus-visible{
  outline: none; border-color: var(--color-focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-focus) 18%, transparent);
}
.calc-search__input::-webkit-search-cancel-button{ display: none; }
.calc-search__clear{
  position: absolute; inset-inline-end: 0.55em;
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.2em; block-size: 2.2em; border-radius: 50%;
  border: none; background: var(--ink-100); color: var(--ink-700); cursor: pointer;
}
.calc-search__clear svg{ inline-size: 1em; block-size: 1em; }
.calc-search__clear:hover{ background: var(--ink-200); }

/* ---- Quick picks ---- */
.calc-quick{ display: grid; gap: var(--space-2xs); }
.calc-quick__label{
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--color-text-muted); margin: 0;
}
.calc-quick__row{ display: flex; flex-wrap: wrap; gap: 0.5em; }
.calc-quick__chip{
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.6em 1.1em; min-block-size: var(--tap-min);
  border-radius: var(--radius-full); border: 1.5px solid var(--color-border-strong);
  background: var(--surface); font: inherit; font-weight: 700; font-size: var(--text-sm);
  color: var(--color-text); cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.calc-quick__chip svg{ inline-size: 1.15em; block-size: 1.15em; color: var(--brand-red-600); flex: none; }
.calc-quick__chip:hover, .calc-quick__chip:focus-visible{
  transform: translateY(-2px); border-color: var(--brand-red-400); box-shadow: var(--shadow-md); outline: none;
}
.calc-quick__chip:focus-visible{ box-shadow: var(--shadow-md), 0 0 0 3px color-mix(in srgb, var(--color-focus) 30%, transparent); }
@media (max-width: 640px){
  /* Two-across grid so all four picks sit in one thumb-height block. */
  .calc-quick__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
  .calc-quick__chip{ justify-content: flex-start; padding-inline: 0.9em; }
}

/* ---- Grouped list ---- */
.calc-finder__groups{ display: grid; gap: var(--space-md); }
.calc-group__title{
  display: flex; align-items: center; gap: 0.6em;
  font-size: var(--text-md); margin-block-end: var(--space-xs);
  padding-inline-start: 0.7em; border-inline-start: 4px solid var(--brand-red-500);
}
.calc-group__count{
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
  color: var(--color-text-muted); background: var(--ink-100);
  border-radius: var(--radius-full); padding: 0.15em 0.7em;
}
/* Counts describe the full group, so hide them while a search filters it. */
.calc-gallery.is-searching .calc-group__count{ display: none; }
.calc-list{
  display: grid; gap: var(--space-2xs);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.calc-item{
  display: flex; align-items: center; gap: 0.8em; text-align: start;
  padding: 0.8em 1em; min-block-size: var(--tap-min);
  border-radius: var(--radius-md); border: 1.5px solid var(--color-border);
  background: var(--surface); font: inherit; cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out-quart), box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.calc-item:hover, .calc-item:focus-visible{
  transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-red-400); outline: none;
}
.calc-item:focus-visible{ box-shadow: var(--shadow-md), 0 0 0 3px color-mix(in srgb, var(--color-focus) 30%, transparent); }
.calc-item__icon{
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  inline-size: 2.4em; block-size: 2.4em; border-radius: var(--radius-sm);
  background: var(--ink-950); color: var(--sand-500);
}
.calc-item__icon svg{ inline-size: 1.25em; block-size: 1.25em; }
.calc-item__text{ display: grid; gap: 0.1em; min-inline-size: 0; }
.calc-item__title{ font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--color-text); }
.calc-item__sub{ font-size: var(--text-xs); color: var(--color-text-muted); }
.calc-item__chev{ display: inline-flex; margin-inline-start: auto; color: var(--brand-red-600); flex: none; }
.calc-item__chev svg{ inline-size: 1em; block-size: 1em; transition: transform var(--duration-fast) var(--ease-out-quart); }
.calc-item:hover .calc-item__chev svg{ transform: translateX(3px); }
@media (max-width: 640px){
  .calc-finder__groups{ gap: var(--space-sm); }
  .calc-list{ grid-template-columns: 1fr; }
  .calc-item{ padding: 0.7em 0.85em; }
}

/* ---- Empty state ---- */
.calc-empty{
  padding: var(--space-md); border-radius: var(--radius-md);
  background: var(--sand-050); border: 1px solid var(--sand-100); text-align: center;
}
.calc-empty__title{ font-weight: 700; margin-block-end: 0.3em; }
.calc-empty p{ margin: 0; color: var(--ink-700); font-size: var(--text-sm); }
.calc-empty a{ color: var(--brand-red-700); font-weight: 600; }

/* ============ Workspace (a single calculator, in use) ============ */
.calc-workspace{
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  animation: calc-gallery-in var(--duration-slow) var(--ease-out-quart) both;
}
@media (prefers-reduced-motion: reduce){ .calc-workspace{ animation: none; } }
@media (min-width: 1080px){
  .calc-workspace{ grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-lg); }
}

/* ---- Top bar: back + switcher (mobile & tablet) ---- */
.calc-nav__bar{ display: flex; gap: 0.5em; align-items: stretch; margin-block-end: var(--space-2xs); }
.calc-nav__backrow{
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.75em 0.9em; border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border-strong);
  background: var(--surface); font: inherit; font-weight: 700; font-size: var(--text-sm);
  color: var(--color-text); cursor: pointer; min-block-size: var(--tap-min);
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.calc-nav__backrow:hover{ background: var(--ink-050); }
.calc-nav__backrow svg{ inline-size: 1.1em; block-size: 1.1em; color: var(--brand-red-600); transform: scaleX(-1); flex: none; }
.calc-nav__switch{
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 0.6em;
  padding: 0.75em 0.9em; border-radius: var(--radius-md);
  border: 1.5px solid var(--ink-950); background: var(--ink-950); color: #fff;
  font: inherit; font-weight: 700; font-size: var(--text-sm); cursor: pointer; min-block-size: var(--tap-min);
  min-inline-size: 0;
}
.calc-nav__switch-label{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-nav__switch-chev{ display: inline-flex; flex: none; color: var(--sand-500); }
.calc-nav__switch-chev svg{ inline-size: 1.1em; block-size: 1.1em; }

@media (min-width: 1080px){
  /* Desktop has the full sidebar, so the switcher pill is unnecessary. */
  .calc-nav__switch{ display: none; }
  .calc-nav__backrow{ inline-size: 100%; }
}
@media (max-width: 1079px){
  /* Block layout (not grid) so the sticky nav can travel the full height
     of the workspace, a sticky grid item is trapped inside its own row. */
  .calc-app[data-view="workspace"] .calc-workspace{ display: block; }
  .calc-app[data-view="workspace"] .calc-nav__group{ display: none; }
  /* The bar floats with you as you scroll a calculator, so both escaping
     to the finder and switching tools are always one thumb-tap away. */
  .calc-app[data-view="workspace"] .calc-nav{
    position: sticky; inset-block-start: calc(var(--header-h) + var(--space-2xs)); z-index: 30;
    margin-block-end: var(--space-sm);
  }
  .calc-app[data-view="workspace"] .calc-nav__bar{ margin-block-end: 0; }
  .calc-app[data-view="workspace"] .calc-nav__backrow{
    box-shadow: var(--shadow-md);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .calc-app[data-view="workspace"] .calc-nav__switch{ box-shadow: var(--shadow-md); }
  .calc-app[data-view="workspace"] .calc-nav__backrow span{ display: none; }
}

/* ---- Category nav (sidebar on desktop) ---- */
.calc-nav{
  position: relative;
  /* Grid items default to min-width:auto, force the track to respect
     the column width so inner lists can manage their own overflow. */
  min-inline-size: 0;
}
@media (min-width: 1080px){
  .calc-nav{ position: sticky; inset-block-start: calc(var(--header-h) + var(--space-md)); max-block-size: calc(100dvh - var(--header-h) - var(--space-md) - var(--space-xs)); overflow-y: auto; scrollbar-width: thin; }
  /* Fade hint at the foot of the sidebar's own internal scroll. */
  .calc-nav::after{
    content: ""; position: sticky; display: block; inset-block-end: 0; inset-inline: 0;
    block-size: 28px; margin-block-start: -28px; pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--color-bg));
  }
}
.calc-nav__group{ margin-block-end: var(--space-xs); }
.calc-nav__group h3{
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-muted);
  margin-block-end: 0.35em;
}
.calc-nav__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
@media (max-width: 1079px){
  .calc-nav__group h3{ margin-inline: var(--gutter); }
  .calc-nav__list{
    flex-direction: row; flex-wrap: nowrap; gap: 0.5em; padding-block: 0.25em;
    overflow-x: auto; scrollbar-width: thin;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  }
}

.calc-tab{
  display: flex; align-items: center; gap: 0.65em;
  padding: 0.75em 0.9em; border-radius: var(--radius-md);
  border: 1px solid transparent; background: none; cursor: pointer;
  font: inherit; font-weight: 600; font-size: var(--text-sm); color: var(--color-text-muted);
  text-align: start; white-space: nowrap; flex: none; min-block-size: var(--tap-min);
  transition: background var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart);
}
.calc-tab svg{ inline-size: 1.2em; block-size: 1.2em; flex: none; color: var(--brand-red-600); }
.calc-tab:hover{ background: var(--ink-050); color: var(--color-text); }
.calc-tab[aria-selected="true"]{ background: var(--ink-950); color: #fff; }
.calc-tab[aria-selected="true"] svg{ color: var(--sand-500); }

/* ---- Bottom-sheet switcher (mobile) ---- */
.calc-sheet{
  position: fixed; inset-block-end: 0; inset-block-start: auto; inset-inline: 0;
  margin: 0 auto; inline-size: 100%; max-inline-size: 560px;
  max-block-size: min(78dvh, 640px);
  display: none; flex-direction: column;
  border: none; padding: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface); color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
.calc-sheet[open]{ display: flex; animation: calc-sheet-up var(--duration-base) var(--ease-out-quart) both; }
@keyframes calc-sheet-up{ from{ transform: translateY(24px); opacity: 0.4; } to{ transform: none; opacity: 1; } }
.calc-sheet::backdrop{ background: rgba(20, 24, 28, 0.45); }
@media (prefers-reduced-motion: reduce){ .calc-sheet[open]{ animation: none; } }
.calc-sheet__head{
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 1.4em 1.1em 0.8em; border-block-end: 1px solid var(--color-border);
  font-size: var(--text-base);
}
.calc-sheet__handle{
  position: absolute; inset-block-start: 0.55em; inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 42px; block-size: 4px; border-radius: var(--radius-full); background: var(--ink-200);
}
.calc-sheet__close{
  position: absolute; inset-inline-end: 0.8em; inset-block-start: 50%; transform: translateY(-38%);
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.4em; block-size: 2.4em; border-radius: 50%;
  border: none; background: var(--ink-100); color: var(--ink-700); cursor: pointer;
}
.calc-sheet__close svg{ inline-size: 1.1em; block-size: 1.1em; }
.calc-sheet__body{ overflow-y: auto; padding: var(--space-xs) var(--space-sm) var(--space-md); overscroll-behavior: contain; }
.calc-sheet__group{
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-muted);
  margin: var(--space-sm) 0 0.4em;
}
.calc-sheet__group:first-child{ margin-block-start: 0.2em; }
.calc-sheet__item{
  display: flex; align-items: center; gap: 0.7em; inline-size: 100%;
  padding: 0.75em 0.8em; min-block-size: var(--tap-min);
  border: none; border-radius: var(--radius-md); background: none;
  font: inherit; font-weight: 600; font-size: var(--text-base); color: var(--color-text);
  text-align: start; cursor: pointer;
}
.calc-sheet__item svg{ inline-size: 1.2em; block-size: 1.2em; flex: none; color: var(--brand-red-600); }
.calc-sheet__item:hover{ background: var(--ink-050); }
.calc-sheet__item[aria-current="true"]{ background: var(--ink-950); color: #fff; }
.calc-sheet__item[aria-current="true"] svg{ color: var(--sand-500); }
.calc-sheet__now{
  margin-inline-start: auto; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--sand-500);
}

/* ---- Floating live-result bar (mobile) ---- */
.calc-livebar{
  position: fixed; inset-inline: 0.75rem; z-index: 85;
  inset-block-end: calc(62px + env(safe-area-inset-bottom, 0px) + 0.6rem);
  display: flex; align-items: center; justify-content: space-between; gap: 0.8em;
  margin-inline: auto; max-inline-size: 560px;
  padding: 0.6em 1.1em; min-block-size: var(--tap-min);
  border: none; border-radius: var(--radius-full); cursor: pointer;
  background: var(--ink-950); color: #fff; box-shadow: var(--shadow-lg);
  font: inherit; text-align: start;
  transition: transform var(--duration-base) var(--ease-out-quart), opacity var(--duration-base) var(--ease-standard);
}
.calc-livebar__text{ display: grid; gap: 0; min-inline-size: 0; }
.calc-livebar__label{
  font-size: var(--text-xs); font-weight: 600; color: var(--color-text-on-dark-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calc-livebar__figure{
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-md);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.calc-livebar__chev{ display: inline-flex; flex: none; color: var(--sand-500); }
.calc-livebar__chev svg{ inline-size: 1.2em; block-size: 1.2em; }
.calc-livebar.is-off{ transform: translateY(12px); opacity: 0; pointer-events: none; }
@media (min-width: 900px){ .calc-livebar{ display: none; } }
/* Breathing room so the panel foot never hides behind the floating bar. */
@media (max-width: 899px){
  .calc-app[data-view="workspace"]{ padding-block-end: var(--space-lg); }
}

/* ---- Panel shell ---- */
.calc-panel{
  view-transition-name: calc-panel;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: clip;
}
.calc-panel__head{
  padding: var(--space-md) var(--space-lg);
  border-block-end: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--surface-sunken), var(--surface));
}
.calc-panel__head h2{ font-size: var(--text-xl); margin-block-end: 0.15em; }
.calc-panel__head p{ color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
@media (max-width: 640px){
  .calc-panel{ border-radius: var(--radius-lg); }
  .calc-panel__head{ padding: var(--space-sm) var(--space-md); }
  .calc-panel__head h2{ font-size: var(--text-lg); }
}

.calc-panel__body{
  display: grid; gap: var(--space-lg);
  padding: var(--space-lg);
  grid-template-columns: 1fr;
  container-type: inline-size;
  container-name: calcpanel;
}
@container calcpanel (min-width: 640px){
  .calc-panel__body{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px){
  .calc-panel__body{ padding: var(--space-md) var(--space-sm); gap: var(--space-md); }
}

::view-transition-old(calc-panel){ animation: calc-out var(--duration-base) var(--ease-standard) both; }
::view-transition-new(calc-panel){ animation: calc-in var(--duration-slow) var(--ease-out-quart) both; }
@keyframes calc-out{ to{ opacity: 0; transform: translateY(-10px) scale(0.99); } }
@keyframes calc-in{ from{ opacity: 0; transform: translateY(10px) scale(0.99); } to{ opacity: 1; transform: none; } }

/* ---- Inputs ---- */
.calc-form{ display: grid; gap: var(--space-sm); align-content: start; }
.calc-field{ display: grid; gap: 0.4em; }
.calc-field__label{ display: flex; align-items: baseline; justify-content: space-between; gap: 0.5em; font-weight: 700; font-size: var(--text-sm); }
.calc-field__value{ font-family: var(--font-display); font-weight: 600; color: var(--brand-red-600); font-variant-numeric: tabular-nums; }
.calc-field .hint{ font-size: var(--text-xs); color: var(--color-text-muted); }

.calc-input-group{ position: relative; display: flex; align-items: center; }
.calc-input-group__prefix, .calc-input-group__suffix{
  position: absolute; font-weight: 600; color: var(--color-text-muted); pointer-events: none; font-size: var(--text-sm);
}
.calc-input-group__prefix{ inset-inline-start: 1em; }
.calc-input-group__suffix{ inset-inline-end: 1em; }
.calc-input-group input[type="number"], .calc-input-group input[type="text"]{
  inline-size: 100%; font: inherit; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 0.85em 1em; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border-strong);
  background: var(--surface); color: var(--color-text); min-block-size: var(--tap-min);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.calc-input-group.has-prefix input{ padding-inline-start: 1.9em; }
.calc-input-group.has-suffix input{ padding-inline-end: 3em; }
.calc-input-group input:focus-visible{ border-color: var(--color-focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-focus) 18%, transparent); outline: none; }

.calc-range{
  -webkit-appearance: none; appearance: none; inline-size: 100%; block-size: 6px;
  border-radius: var(--radius-full); background: var(--ink-150, var(--ink-200)); outline: none; cursor: pointer;
  accent-color: var(--brand-red-500);
}
.calc-range::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none; inline-size: 22px; block-size: 22px; border-radius: 50%;
  background: var(--brand-red-500); border: 3px solid #fff; box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring);
}
.calc-range::-webkit-slider-thumb:hover{ transform: scale(1.12); }
.calc-range::-moz-range-thumb{
  inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--brand-red-500); border: 3px solid #fff; box-shadow: var(--shadow-sm); cursor: pointer;
}

.calc-select, select.calc-select{
  inline-size: 100%; font: inherit; font-weight: 700; padding: 0.85em 1em; min-block-size: var(--tap-min);
  border-radius: var(--radius-sm); border: 1.5px solid var(--color-border-strong); background: var(--surface); color: var(--color-text);
}

.calc-toggle-group{ display: flex; gap: 0.4em; flex-wrap: wrap; }
.calc-toggle-group input{ position: absolute; opacity: 0; pointer-events: none; }
.calc-toggle-group label{
  padding: 0.6em 1em; border-radius: var(--radius-full); border: 1.5px solid var(--color-border-strong);
  font-weight: 700; font-size: var(--text-sm); cursor: pointer; min-block-size: var(--tap-min); display: inline-flex; align-items: center;
  transition: background var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart);
}
.calc-toggle-group input:checked + label{ background: var(--ink-950); border-color: var(--ink-950); color: #fff; }
.calc-toggle-group input:focus-visible + label{ outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ---- Results ---- */
.calc-results{ display: grid; gap: var(--space-sm); align-content: start; }
.calc-results__hero{
  background: var(--ink-950); color: #fff; border-radius: var(--radius-lg);
  padding: var(--space-md); position: relative; overflow: clip;
}
.calc-results__hero::before{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 90% 0%, color-mix(in srgb, var(--brand-red-600) 30%, transparent), transparent 70%);
}
.calc-results__label{ position: relative; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-on-dark-muted); }
.calc-results__figure{ position: relative; font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.05; margin-block-start: 0.15em; font-variant-numeric: tabular-nums; }
.calc-results__sub{ position: relative; font-size: var(--text-sm); color: var(--color-text-on-dark-muted); margin-block-start: 0.4em; }

.calc-stat-grid{ display: grid; gap: var(--space-2xs); grid-template-columns: repeat(auto-fit, minmax(9rem,1fr)); }
.calc-stat{ background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-xs) var(--space-sm); }
.calc-stat__label{ font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
.calc-stat__value{ font-family: var(--font-display); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }

/* Segmented bar visualisation (principal/interest, expense split, cost breakdown) */
.calc-bar{ block-size: 14px; border-radius: var(--radius-full); overflow: clip; display: flex; background: var(--ink-100); }
.calc-bar__seg{ block-size: 100%; transition: inline-size var(--duration-slow) var(--ease-out-quart); }
.calc-legend{ display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); font-size: var(--text-xs); color: var(--color-text-muted); }
.calc-legend li{ display: flex; align-items: center; gap: 0.5em; list-style: none; }
.calc-legend__swatch{ inline-size: 0.8em; block-size: 0.8em; border-radius: 3px; flex: none; }

/* Comparison table */
.calc-compare{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xs); }
.calc-compare__col{ background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-sm); }
.calc-compare__col h4{ font-size: var(--text-sm); margin-block-end: var(--space-2xs); }
.calc-compare__col.winner{ background: var(--brand-red-050); border: 1.5px solid var(--brand-red-400); }
.calc-compare__row{ display: flex; justify-content: space-between; gap: 0.5em; padding-block: 0.35em; font-size: var(--text-sm); border-block-end: 1px dashed var(--color-border); }
.calc-compare__row:last-child{ border-block-end: none; }
.calc-compare__row span:last-child{ font-weight: 700; font-variant-numeric: tabular-nums; }

/* Tax bracket table */
.calc-bracket-table{ width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.calc-bracket-table th, .calc-bracket-table td{ text-align: start; padding: 0.5em 0.6em; border-block-end: 1px solid var(--color-border); font-variant-numeric: tabular-nums; }
.calc-bracket-table th{ font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); }

.calc-note{ display: flex; gap: 0.7em; padding: var(--space-sm); border-radius: var(--radius-md); background: var(--sand-050); border: 1px solid var(--sand-100); font-size: var(--text-xs); color: var(--ink-700); grid-column: 1 / -1; }
.calc-note svg{ inline-size: 1.3em; block-size: 1.3em; flex: none; color: var(--sand-500); }
.calc-note a{ color: var(--brand-red-700); font-weight: 600; }

.calc-warn{ display: flex; gap: 0.7em; padding: var(--space-sm); border-radius: var(--radius-md); background: var(--color-error-bg); color: var(--color-error); font-size: var(--text-sm); font-weight: 600; grid-column: 1 / -1; }
.calc-warn svg{ inline-size: 1.3em; block-size: 1.3em; flex: none; }

.calc-panel__foot{
  padding: var(--space-sm) var(--space-lg); border-block-start: 1px solid var(--color-border);
  background: var(--surface-sunken); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm);
  font-size: var(--text-xs); color: var(--color-text-muted);
}
@media (max-width: 640px){
  .calc-panel__foot{ padding-inline: var(--space-md); }
}

/* Number count-up transition target */
[data-count]{ transition: color var(--duration-fast) var(--ease-standard); }

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(calc-panel), ::view-transition-new(calc-panel){ animation: none; }
}

.calc-noscript{ padding: var(--space-lg); text-align: center; }