/* Calculators page: side nav on wide screens, a chip row on phones */
.calc-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 18px; }
.calc-nav { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 6px; }
.calc-nav .chip { text-decoration: none; min-height: 40px; border-radius: 3px; }
.calc-nav .chip[aria-current="true"] { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, var(--cell)); }
.calc-main { display: grid; gap: 18px; min-width: 0; }
.calc { scroll-margin-top: 80px; min-width: 0; }
.calc h2 { margin-top: 0; }
@media (max-width: 900px) {
  .calc-layout { grid-template-columns: 1fr; }
  .calc-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .calc-nav .chip { border-radius: 3px; }
}

.inputs { display: grid; gap: 12px; align-content: start; }
.inputs.cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px 18px; }
.pair { display: grid; gap: 4px; }
.pair[hidden] { display: none; }
.pair-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; align-items: center; }
.pair-row input[type=range] { min-height: 40px; }
.group-label { font: 600 .82rem var(--font-ui); color: var(--dim); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 4px; }
.calc .chips button.chip { min-height: 40px; }
.calc .seg button { min-height: 40px; }
.out { display: grid; gap: 12px; align-content: start; }
.stat.bad b { color: var(--bad); }
.stat.good b { color: var(--good); }
.tag { color: var(--dim); font-style: italic; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 8px 0 12px; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }

.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper .btn { min-width: 40px; min-height: 40px; padding: 0; font-size: 1.1rem; }
.stepper output { min-width: 3ch; text-align: center; font: 700 1rem var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.bar { height: 8px; background: var(--cell); border: 1px solid var(--border); border-radius: 4px; min-width: 60px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); }
table.data td.share { min-width: 90px; }
@media (max-width: 480px) { #w-table table.data td, #w-table table.data th { padding: 6px; } }
table.data td.share span { display: block; font-variant-numeric: tabular-nums; }
.yes { color: var(--good); font-weight: 600; }
.no { color: var(--faint); }
ul.facts { margin: 6px 0; padding-left: 1.2em; color: var(--dim); font-size: .88rem; }
table.data th.rowh { font: inherit; color: var(--ink); text-transform: none; letter-spacing: 0; position: static; background: none; border-bottom: 1px solid var(--border); }