/* Price calculator: shared by pricing.html, own.html and rent.html (moved out of pricing.html 2026-11-06).
   Markup, prices and math live in calc.js. */
.calc [hidden] { display: none !important; }
.calc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 48px; align-items: start; margin: 0; }
.calc-controls { grid-column: 1 / 7; display: grid; gap: clamp(36px, 3.4vw, 52px); }
.calc-result { grid-column: 8 / -1; position: sticky; top: calc(var(--header-h) + 24px); background: var(--paper); color: var(--ink); padding: clamp(24px, 2.6vw, 44px); display: grid; gap: 20px; justify-items: start; }
.calc-group { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 16px; }
.calc-legend { padding: 0; margin-bottom: 16px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.75rem, 1.1rem + 1.4vw, 2.75rem); line-height: 0.95; }
.calc-help, .calc-rent-line { color: var(--on-night-soft); max-width: 52ch; font-size: 1rem; line-height: 1.5; }
.calc-rent-line { color: var(--on-night); font-size: var(--step-lead); line-height: 1.35; max-width: 36ch; }
.calc-chips { display: grid; gap: 8px; }
.calc-chips--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.calc-chips--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calc .chips span { display: grid; align-content: start; gap: 4px; width: 100%; height: 100%; min-height: 64px; padding: 12px 16px; background: var(--night-2); color: var(--on-night); }
.calc .chips span b { font-weight: 700; font-size: 1.0625rem; line-height: 1.2; }
.calc .chips span small { font-size: 0.9375rem; line-height: 1.35; font-weight: 400; color: var(--on-night-soft); }
.calc .chips input:checked + span { background: var(--paper); color: var(--ink); }
.calc .chips input:checked + span small { color: var(--ink-soft); }
.calc-stepper { display: flex; align-items: center; gap: 12px; }
.calc-step { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border: 0; border-radius: 0; background: var(--paper); color: var(--ink); font-family: var(--font-text); font-weight: 700; font-size: 1.75rem; line-height: 1; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: scale var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease; }
.calc-step:active { scale: 0.94; background: #D9D5CB; }
.calc-step:disabled { background: var(--night-2); color: var(--on-night-soft); cursor: default; scale: 1; }
.calc-pages { width: 3ch; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--on-night); font-family: var(--font-display); font-weight: 800; font-size: clamp(3.5rem, 2rem + 3vw, 5.5rem); line-height: 1; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.calc-pages::-webkit-outer-spin-button, .calc-pages::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-pages:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.calc-totals { display: grid; gap: 0; width: 100%; }
.calc-row { display: grid; gap: 2px; padding: 14px 0; }
.calc-row--year { background: var(--paper-2); margin-inline: calc(-1 * clamp(24px, 2.6vw, 44px)); padding-inline: clamp(24px, 2.6vw, 44px); margin-top: 8px; }
.calc-row dt { font-weight: 700; }
.calc-row dd { display: grid; gap: 4px; }
.calc-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 1.8rem + 2.6vw, 5rem); line-height: 0.95; font-variant-numeric: tabular-nums; }
.calc-num-fill { font-size: var(--step-lead); line-height: 1.3; padding-block: 8px; }
.calc-sub { color: var(--ink-soft); font-size: 1rem; line-height: 1.45; }
.calc-lines { width: 100%; display: grid; gap: 6px; font-size: 1rem; line-height: 1.4; }
.calc-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
.calc-lines li span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.calc-estimate { font-weight: 700; font-size: var(--step-lead); line-height: 1.3; }
.calc-small { color: var(--ink-soft); font-size: 1rem; margin-top: -12px; }
/* QA 2026-11-05: a text link, not a second button: the header "Book" is on screen here at every width (playbook #2, one quote button) */
.calc-book { font-size: var(--step-lead); padding-block: 8px; }
.calc-result .link:active { color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) {
  .calc .chips label:hover input:not(:checked) + span { background: #2A2A28; }
  .calc-step:not(:disabled):hover { background: var(--accent); }
}
@media (max-width: 1000px) {
  .calc-controls, .calc-result { grid-column: 1 / -1; }
  .calc-result { position: static; }
}
@media (min-width: 1001px) and (max-height: 820px) { .calc-result { position: static; } }
@media (max-width: 700px) {
  .calc-chips--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-chips--3 > label:first-child { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  .calc .chips span { padding: 10px 12px; }
}
/* no script: a plain line in place of the controls */
.calc-nojs { font-size: var(--step-lead); line-height: 1.35; max-width: 40ch; }
.js .calc-nojs { display: none; }