/* Calculator controls (CTO plan item 7): chips, day toggles, switches,
   segmented choices, sliders with a typed number, the result bar and the
   cost-over-time chart. Loaded on the calculator pages, and with calc-mini.js
   wherever a [data-mini-calc] widget is placed. Every control is a real input:
   the input stays in the accessibility tree and takes focus; the span after
   it is what you see. Never colour alone: chosen chips carry a tick, switches
   move their knob, the result bar segments carry patterns and labels. */
@layer pages {
/* ---- layout ---- */
.calc { display: grid; gap: var(--sp-6); align-items: start; }
.calc-in { display: grid; gap: var(--sp-6); min-width: 0; }
@media (min-width: 960px) {
  .calc { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); }
  .calc-out { position: sticky; top: calc(var(--h-header) + var(--sp-4)); }
}
.cgroup { display: grid; gap: var(--sp-5); min-width: 0; margin: 0; padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--shadow-xs); }
@media (min-width: 640px) { .cgroup { padding: var(--sp-6); } }
.cgroup-h { display: flex; align-items: center; gap: var(--sp-3); float: left; width: 100%; margin-bottom: var(--sp-1); padding: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; }
.cgroup-h + * { clear: both; }
.cnum-i { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--primary); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 700; }
.cfield { display: grid; gap: var(--sp-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.cfield > legend, .calc-in .field > label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); width: 100%; float: left; margin-bottom: var(--sp-2); padding: 0; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; color: var(--foreground); }
.calc-in .field > label { float: none; margin-bottom: 0; }
.cfield > legend + * { clear: both; }
.tool-form .cfield > legend { justify-content: flex-start; }
.ctag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--sp-2); border-radius: var(--radius-full); background: var(--brand-soft); color: var(--primary); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.clink { min-height: 0; padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.clink[hidden] { display: none; }

/* ---- chips: radio or checkbox tiles; the input is invisible but real ---- */
.cchips, .cdays, .cseg { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cchips-4, .cdays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cdays { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cchip { position: relative; display: block; min-width: 0; cursor: pointer; }
.cchip > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cchip > span { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--sp-1); min-height: 48px; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--input); border-radius: var(--radius-lg); background: var(--card); color: var(--foreground); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.cchips-4 .cchip > span, .cdays .cchip > span { padding-inline: var(--sp-1); white-space: nowrap; }
.cchip:hover > span { border-color: var(--primary); }
.cchip > input:checked + span { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); box-shadow: 0 0 0 1px var(--primary); }
.cchip > input:checked + span::before, .cchip > input:checked + span::after { content: ""; position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border: 2px solid var(--primary); border-radius: var(--radius-full); background: var(--card); }
.cchip > input:checked + span::after { top: -1px; right: -1px; width: 8px; height: 8px; border: 0; border-radius: 0; background: var(--primary); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.cchip > input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
.cdays .cchip > input:checked + span::before, .cdays .cchip > input:checked + span::after { display: none; }
.cdays .cchip > input:checked + span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* segmented: two (or three) halves of one control */
.cseg { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: var(--radius-lg); background: var(--muted); }
.cseg .cchip > span { flex-direction: column; gap: 0; min-height: 52px; border-color: transparent; background: transparent; color: var(--muted-foreground); line-height: 1.2; }
.cseg .cchip > span small { font-size: var(--text-xs); font-weight: 500; }
.cseg .cchip > input:checked + span { border-color: color-mix(in oklab, var(--primary) 45%, transparent); background: var(--card); color: var(--foreground); box-shadow: var(--shadow-md); }
.cseg .cchip > input:checked + span::before, .cseg .cchip > input:checked + span::after { display: none; }
.cseg .cchip > input:checked + span small { color: var(--muted-foreground); }

/* ---- switches: a real checkbox with role="switch" ---- */
.cswitch { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 48px; cursor: pointer; }
.cswitch-t { display: grid; gap: 2px; min-width: 0; }
.cswitch-t small { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted-foreground); }
.cswitch > input[type="checkbox"] { order: 2; position: relative; flex: none; width: 52px; height: 32px; margin: 0; border: 0; border-radius: var(--radius-full); background: var(--input); display: block; }
.cswitch > input[type="checkbox"]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; transform: none; clip-path: none; border-radius: var(--radius-full); background: var(--card); box-shadow: var(--shadow-md); }
.cswitch > input[type="checkbox"]::after { content: ""; position: absolute; top: 12px; right: 10px; width: 8px; height: 8px; border: 2px solid var(--card); border-radius: var(--radius-full); }
.cswitch > input:checked { background: var(--primary); }
.cswitch > input:checked::before { transform: translateX(20px); }
.cswitch > input:checked::after { top: 11px; left: 12px; right: auto; width: 3px; height: 10px; border: 0; border-radius: 2px; background: var(--primary-foreground); }
.cswitch > input:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .cswitch > input::before { transition: transform var(--dur-fast) var(--ease-out); }
  .cchip > span, .cbar .cb { transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), width var(--dur-med) var(--ease-out); }
}

/* ---- sliders (JS only; the typed field beside them is the no-JS control) ---- */
.crow { display: flex; align-items: center; gap: var(--sp-4); }
.crow > .crange { flex: 1; }
.crow > .cnum { flex: none; width: 7.5rem; }
.crange { position: relative; display: none; height: 44px; }
.calc-on .crange { display: block; }
.crange::before, .crange-fill { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 6px; margin-top: -3px; border-radius: var(--radius-full); background: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
.crange-fill { right: auto; background: var(--primary); box-shadow: none; }
.crange input[type="range"] { position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.crange2 input[type="range"] { pointer-events: none; }
.crange input[type="range"]::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.crange input[type="range"]::-moz-range-track { height: 44px; background: transparent; }
.crange input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: 8px; border: 2px solid var(--primary); border-radius: var(--radius-full); background: var(--card); box-shadow: var(--shadow-md); pointer-events: auto; cursor: grab; }
.crange input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border: 2px solid var(--primary); border-radius: var(--radius-full); background: var(--card); box-shadow: var(--shadow-md); pointer-events: auto; cursor: grab; }
.crange input[type="range"]:focus-visible { outline: none; }
.crange input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 35%, transparent); }
.crange input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 35%, transparent); }
.ctimes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.ctime { display: grid; gap: var(--sp-1); font-size: var(--text-sm); color: var(--muted-foreground); }
.ctime > input, .ctime > select { color: var(--foreground); font-variant-numeric: tabular-nums; }
.cnum { font-variant-numeric: tabular-nums; }
.cnum input { padding-left: var(--sp-6); font-weight: 600; }
.cx[hidden] { display: none; }
.calc-go { display: flex; }
body:has(.calc-on) .calc-go { display: none; }

/* ---- result ---- */
.calc-out { display: grid; gap: var(--sp-3); padding: var(--sp-6); border-radius: var(--radius-xl); background: var(--lilac-soft); }
.calc-big { font-family: var(--font-display); font-size: var(--text-stat); line-height: 1.05; font-weight: 600; letter-spacing: -.02em; color: var(--primary); font-variant-numeric: tabular-nums lining-nums; }
.calc-big .unit { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 500; letter-spacing: 0; color: var(--muted-foreground); }
.calc-sub { font-size: var(--text-sm); color: var(--muted-foreground); }
.cbar { display: flex; height: 18px; margin-top: var(--sp-2); overflow: hidden; border-radius: var(--radius-full); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cbar .cb { display: block; min-width: 0; height: 100%; }
.cb-pay { background: var(--primary); }
.cb-fund { background: repeating-linear-gradient(135deg, var(--mint-deep) 0 4px, var(--mint-soft) 4px 7px); }
.cb-top { background: repeating-linear-gradient(90deg, var(--sun-deep) 0 3px, var(--sun-soft) 3px 6px); }
.cb-past { background: color-mix(in oklab, var(--g-mid) 45%, transparent); }
.cbar .cb + .cb { box-shadow: inset 2px 0 0 var(--card); }
.ckey { display: grid; gap: 0; border-top: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent); }
.ckey li { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; border-bottom: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent); }
.ckey b { margin-left: auto; font-variant-numeric: tabular-nums; }
.sw { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 20%, transparent); }
.cnotes { display: grid; gap: var(--sp-2); }
.cnotes:empty { display: none; }
.cnotes .callout:not([data-variant]) { background: var(--card); }
@media (max-width: 639px) {
  .calc-out .kv > div { display: grid; gap: 2px; }
  .calc-out .kv dd { text-align: left; }
}
.calc-out .kv { border-top-color: color-mix(in oklab, var(--foreground) 12%, transparent); }
.calc-out .kv > div { border-bottom-color: color-mix(in oklab, var(--foreground) 12%, transparent); }
.calc-out .sub { margin-top: var(--sp-3); }
.calc-out .stat-l { color: var(--muted-foreground); }

/* ---- cost over time ---- */
.calc-time { scroll-margin-top: calc(var(--h-header) + var(--sp-4)); }
.cborn { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-3); margin-top: var(--sp-4); }
.cborn .ctime { flex: 1 1 9rem; max-width: 14rem; }
.cborn + .hint { margin-top: var(--sp-2); }
[data-o="chart"] { margin-top: var(--sp-6); }
.cchart { margin: 0; padding: var(--sp-5) var(--sp-4) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); }
.cchart-plot { position: relative; height: 200px; margin: var(--sp-6) var(--sp-2) 0 3.5rem; }
@media (min-width: 768px) { .cchart-plot { height: 260px; } .cchart { padding: var(--sp-6); } }
.cchart-grid span { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border); }
.cchart-grid span:last-child { border-top: 1px solid var(--input); }
.cchart-grid i { position: absolute; right: calc(100% + var(--sp-2)); top: -.6em; font-size: var(--text-xs); font-style: normal; color: var(--muted-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cchart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cchart rect.f { fill: var(--primary); }
.cchart rect.p { fill: var(--g-mid); opacity: .45; }
.cchart-now { position: absolute; top: -1.5rem; bottom: 0; border-left: 2px dashed var(--foreground); }
.cchart-now b { position: absolute; top: 0; left: 4px; font-size: var(--text-xs); line-height: 1; }
.cchart-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--primary); border-radius: var(--radius-full); background: var(--card); color: var(--primary); font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.cchart-plot .cchart-mark { position: absolute; transform: translate(-50%, -6px); }
.cchart-x { position: relative; height: 1.75rem; margin: var(--sp-1) var(--sp-2) 0 3.5rem; }
.cchart-x span { position: absolute; top: var(--sp-1); transform: translateX(-50%); font-size: var(--text-xs); color: var(--muted-foreground); white-space: nowrap; }
.cchart-key { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-3); font-size: var(--text-sm); color: var(--muted-foreground); }
.cchart-key span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.cchart-key .sw.cb-pay { background: var(--primary); }
.ctable-wrap { margin-top: var(--sp-4); }
.ctable { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ctable th { padding: var(--sp-2) var(--sp-3); text-align: left; font-weight: 600; color: var(--muted-foreground); border-bottom: 1px solid var(--border); }
.ctable td { padding: var(--sp-3); vertical-align: top; border-bottom: 1px solid var(--border); }
.ctable td:first-child { width: 2.5rem; }
.ctable tr.now td { background: var(--brand-soft); }
.ctable b { font-size: var(--text-base); font-variant-numeric: tabular-nums; }
@media (max-width: 639px) {
  .ctable thead { display: none; }
  .ctable tr { display: grid; grid-template-columns: 2.25rem 1fr auto; gap: var(--sp-1) var(--sp-2); padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--border); }
  .ctable td { padding: 0; border: 0; width: auto !important; }
  .ctable td:first-child { grid-row: span 2; }
  .ctable td:nth-child(3) { text-align: right; white-space: nowrap; }
  .ctable td:last-child { grid-column: 2 / -1; color: var(--muted-foreground); }
  .ctable tr.now { background: var(--brand-soft); border-radius: var(--radius-md); }
  .ctable tr.now td { background: none; }
}

/* ---- the other calculators ---- */
.tool-form .cswitch { padding-block: var(--sp-1); }
.tool-form .cswitch + .cswitch { border-top: 1px solid var(--border); padding-top: var(--sp-3); }

/* ---- mini calculator on a nursery page ---- */
.mcalc { display: grid; gap: var(--sp-4); padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); }
.mcalc-h { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; }
.mcalc-out { font-size: var(--text-lg); }
.mcalc-out b { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; }
.mcalc-note { font-size: var(--text-sm); color: var(--muted-foreground); }
.mcalc-link { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
}