/* Cost calculator (2026-10-06): the marketzeitgeist-design rules on the site's tokens (styles.css): flat, 0 px corners,
   2 px rules, cobalt for actions and the chosen profile, ochre deep for kickers, figures in tabular numbers, never a
   state by colour alone (marks and words). */
#calculator [hidden] { display: none !important; }
.calc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 2.5rem; align-items: start; }
.calc-main { min-width: 0; }
.calc-step { margin-bottom: 2.5rem; }

.calc-profiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.calc-profile { display: block; width: 100%; text-align: left; font: inherit; color: var(--mz-ink); background: var(--mz-white);
  border: 2px solid var(--mz-surface); border-radius: 0; padding: .9rem 1rem; cursor: pointer; transition: border-color .12s, background .12s; }
.calc-profile b { display: block; font-weight: 800; margin-bottom: .2rem; }
.calc-profile span { display: block; font-size: .9rem; color: var(--mz-muted); line-height: 1.4; }
.calc-profile:hover { border-color: var(--mz-accent); }
.calc-profile[aria-pressed="true"] { border-color: var(--mz-accent); background: var(--mz-accent-tint); }
.calc-profile[aria-pressed="true"] b, .calc-profile[aria-pressed="true"] span { color: var(--mz-accent-deep); }
.calc-profile[aria-pressed="true"] b::after { content: " \2713"; }
.calc-profile:focus-visible, .calc-remove:focus-visible { outline: 3px solid var(--mz-accent); outline-offset: 2px; }

.calc-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .95rem; }
.calc-table .c-op { width: 34%; }
.calc-table .c-in { width: 17%; }
.calc-table .c-n { width: 11%; }
.calc-table .c-x { width: 10%; }
.calc-x { text-align: right; }
.calc-table th, .calc-table td { text-align: left; vertical-align: middle; padding: .6rem .6rem .6rem 0; border-bottom: var(--mz-line-soft); }
.calc-table thead th { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mz-complement-deep); border-bottom: var(--mz-line); vertical-align: bottom; }
.calc-table tbody th { font-weight: 400; }
.calc-table tbody th b { display: block; font-weight: 600; }
.calc-table small { display: block; color: var(--mz-muted); font-size: .82rem; line-height: 1.35; }
.calc-num { font-variant-numeric: tabular-nums; text-align: right !important; white-space: nowrap; }
.calc-num.calc-wrap { white-space: normal; }
.calc-table thead th.calc-num { text-align: right; white-space: normal; }
.calc-table input { width: 100%; max-width: 8rem; font: inherit; font-variant-numeric: tabular-nums; color: var(--mz-ink); background: var(--mz-white);
  border: 2px solid var(--mz-surface); border-radius: 0; padding: .45rem .55rem; }
.calc-table input:focus { border-color: var(--mz-accent); outline: 3px solid var(--mz-accent-tint); outline-offset: 0; }
.calc-table input:disabled { background: var(--mz-ground); color: var(--mz-muted); }
.calc-na { color: var(--mz-muted); font-size: .88rem; }
.calc-empty td { color: var(--mz-muted); padding: 1.2rem 0; }
.calc-remove { font: inherit; font-size: .85rem; color: var(--mz-muted); background: none; border: 0; padding: .3rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.calc-remove:hover { color: var(--mz-ink); }

.calc-add { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
.calc-add label { font-weight: 600; font-size: .95rem; }
.calc-add select { font: inherit; color: var(--mz-ink); background: var(--mz-white); border: 2px solid var(--mz-surface); border-radius: 0; padding: .5rem .6rem; min-width: 16rem; }
.calc-add select:focus { border-color: var(--mz-accent); outline: 3px solid var(--mz-accent-tint); }
.calc-add .btn { padding: .55rem 1.2rem; }

.calc-summary { position: sticky; top: 6rem; max-height: calc(100vh - 7rem); overflow-y: auto; background: var(--mz-white); border-top: 2px solid var(--mz-accent); padding: 1.25rem 1.25rem 1rem; }
.calc-summary h2 { font-size: 1.2rem; margin: 0 0 .9rem; }
.calc-figure { margin: 0 0 1rem; }
.calc-figure .kicker { display: block; margin-bottom: .15rem; }
.calc-figure b { display: block; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.calc-figure small { display: block; color: var(--mz-muted); font-size: .85rem; }
.calc-verdict { margin: .25rem 0 1rem; padding: .75rem 0; border-top: var(--mz-line-soft); border-bottom: var(--mz-line-soft); font-weight: 600; }
.calc-plans { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .92rem; }
.calc-plans li { position: relative; padding: .45rem 0 .45rem 1.6rem; border-bottom: 2px solid var(--mz-surface); }
.calc-mark { position: absolute; left: 0; top: .45rem; font-weight: 800; }
.calc-yes .calc-mark { color: var(--mz-accent); }
.calc-no .calc-mark, .calc-no .calc-why { color: var(--mz-muted); }
.calc-plannote { color: var(--mz-muted); font-size: .85rem; }
.calc-why { font-size: .88rem; }
.calc-scale { background: var(--mz-complement-tint); color: var(--mz-ink); padding: .75rem .9rem; margin: 0 0 1rem; font-size: .92rem; }
.calc-fine { color: var(--mz-muted); font-size: .82rem; margin: 0 0 .5rem; }

.calc-ratings { width: 100%; max-width: 40rem; border-collapse: collapse; font-size: .92rem; }
.calc-ratings td { padding: .45rem .6rem .45rem 0; border-bottom: var(--mz-line-soft); vertical-align: top; }
.calc-ratings small { display: block; color: var(--mz-muted); font-size: .8rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 1000px) {
  .calc-layout { grid-template-columns: minmax(0, 1fr); }
  .calc-summary { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 760px) {
  .calc-profiles { grid-template-columns: 1fr 1fr; }
}
/* Phones: every operation as a small card with labelled fields instead of a wide table. */
@media (max-width: 640px) {
  .calc-table, .calc-table tbody { display: block; }
  .calc-table colgroup, .calc-table thead { display: none; }
  .calc-table tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: .9rem; row-gap: .2rem; padding: .8rem 0; border-bottom: var(--mz-line-soft); }
  .calc-table tr.calc-empty { display: block; }
  .calc-table th, .calc-table td { border: 0; padding: .25rem 0; }
  .calc-table tbody th { grid-column: 1 / -1; }
  .calc-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .2rem; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mz-complement-deep); }
  .calc-num { text-align: left !important; }
  .calc-table input { max-width: none; }
  .calc-x { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 480px) {
  .calc-profiles { grid-template-columns: 1fr; }
  .calc-add select { min-width: 0; width: 100%; }
}