/* The questions one at a time (card #159), drawn by assets/js/steps.js over the form calculator.css lays out.
   Everything here hangs off `.steps-on`, which only the script sets: without JavaScript nothing in this file applies.
   No colour: progress is text and hairlines, choices stay plain words with the 2px ink underline. */

.steps-head, .steps-summary, .steps-next { display: none; }
.steps-spoken { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Asking: one question, its control under it at full width, one button. ---- */
.calc .steps-on.steps-asking { max-width: 640px; }
/* From a tablet up the question stands in the middle of the band (Tarvo, 2026-11-07: all pushed left felt off). */
@media (min-width: 768px) { .calc .steps-on.steps-asking { margin-left: auto; margin-right: auto; } }
.calc .steps-asking:not(.steps-one) .steps-head { display: block; margin-top: 16px; }
.steps-count { font-size: 15px; line-height: 20px; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.steps-bar { display: flex; gap: 4px; margin-top: 8px; }
.steps-bar span { flex: 1 1 0; height: 3px; border-radius: 2px; background: #5a5a5f; }
.steps-bar .steps-done-segment { background: var(--ink); }

.calc .calc-form.steps-on .ask { display: block; max-width: none; margin: 0; border: 0; }
.calc .calc-form.steps-on .ask > .calc-row { display: none; }
.calc .calc-form.steps-asking .ask > .calc-row.steps-current { display: block; min-height: 0; margin-top: 20px; padding: 0; border: 0; }
.calc .calc-form.steps-asking .ask > .steps-current > .info { margin-left: 6px; vertical-align: 2px; }
.calc .calc-form:not(.steps-asking) .ask > .calc-row > .info { display: none; }
.calc .calc-form.steps-asking .ask > .steps-current .calc-label {
  display: inline-block;
  margin: 0 0 12px;
  padding: 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.calc .calc-form.steps-asking .ask > .steps-current .calc-label:focus { outline: none; }
.calc .calc-form.steps-asking .ask > .steps-current .calc-label:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.calc .calc-form.steps-asking .ask > .steps-current :is(.calc-note, .calc-error) { margin: 10px 0 0; font-size: 14px; line-height: 20px; }

/* A typed number: the field takes the line, its unit after it. */
.calc .calc-form.steps-asking .ask > .steps-current .calc-value { display: flex; align-items: center; gap: 10px; }
.calc .calc-form.steps-asking .ask > .steps-current input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; height: 56px; padding: 0 14px; font-size: 24px; }
.calc .calc-form.steps-asking .ask > .steps-current .calc-unit { flex: none; min-width: 44px; font-size: 17px; }
.calc .calc-form.steps-asking .ask > .steps-current .calc-select { max-width: none; height: 56px; padding: 0 14px; }
.calc .calc-form.steps-asking .ask > .steps-current .calc-taxes { margin-top: 8px; }

/* Choices are buttons (Tarvo, 2026-11-07: plain words did not read as something to pick). Each a bordered box the
   column's width, 56 px tall, a hover and a filled chosen state; short labels (1 2 3 5+) share one line. */
.calc .calc-form.steps-asking .ask > .steps-current .opts { min-height: 0; }
.calc .calc-form.steps-asking .ask > .steps-current .opts[data-steps-shape="list"],
.calc .calc-form.steps-asking .ask > .steps-current .steps-select-opts { display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; row-gap: 10px; column-gap: 0; }
.calc .calc-form.steps-asking .ask > .steps-current .opt { min-height: 56px; padding: 0; border: 1px solid #a1a1a6; border-radius: 6px; color: var(--ink); font-size: 18px; white-space: normal; transition: border-color 0.12s ease, background-color 0.12s ease; }
.calc .calc-form.steps-asking .ask > .steps-current .opt > span { display: flex; align-items: center; width: 100%; min-height: 54px; padding: 0 18px; border: 0; color: var(--ink); }
.calc .calc-form.steps-asking .ask > .steps-current .opt:has(input:checked) { border-color: #f5f5f7; background: #f5f5f7; }
.calc .calc-form.steps-asking .ask > .steps-current .opt input:checked + span { color: #1d1d1f; font-weight: 600; border: 0; }
.calc .calc-form.steps-asking .ask > .steps-current .opt input:focus-visible + span { outline: 2px solid var(--cold); outline-offset: 2px; border-radius: 6px; }
@media (hover: hover) { .calc .calc-form.steps-asking .ask > .steps-current .opt:hover:not(:has(input:checked)) { border-color: #f5f5f7; background: #2c2c2e; } }
.calc .calc-form.steps-asking .ask > .steps-current .opts[data-steps-shape="row"] { display: flex; flex-wrap: nowrap; justify-content: space-between; column-gap: 8px; }
.calc .calc-form.steps-asking .ask > .steps-current .opts[data-steps-shape="row"] .opt { flex: 1 1 0; justify-content: center; min-width: 44px; font-size: 20px; font-variant-numeric: tabular-nums; }
.calc .calc-form.steps-asking .ask > .steps-current .opts[data-steps-shape="row"] .opt > span { justify-content: center; padding: 0 4px; }
.calc .calc-form.steps-asking .ask > .steps-current .opt[hidden] { display: none; }
/* A long list of words (current heating, 7) in two columns, so Edasi stays on a small phone's screen. */
.calc .calc-form.steps-asking .ask > .steps-current .opts.steps-select-opts[data-steps-shape] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* The page's own select stays for the state and the URL; the choices above stand in for it on the screen. */
.steps-select-native { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.steps-select-opts + .steps-select-native, .calc .calc-form.steps-on .ask .steps-select-native { position: absolute; }
.calc .calc-form:not(.steps-asking) .steps-select-opts { display: none; }
.steps-hint { margin: -4px 0 12px; font-size: 15px; line-height: 20px; color: var(--ink); }
.steps-hint[hidden] { display: none; }

/* ‹ Tagasi and Edasi (or Arvuta) side by side. */
.steps-actions { display: contents; }
.calc .calc-form.steps-asking .steps-actions { display: flex; align-items: stretch; column-gap: 12px; margin-top: 24px; }
.calc .calc-form.steps-asking .steps-actions > .calc-go { flex: 1 1 auto; margin-top: 0; }
.steps-prev { display: none; }
.calc .calc-form.steps-asking:not(.steps-one) .steps-prev:not([hidden]) {
  display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 44px; height: 56px; padding: 0 18px;
  border: 1px solid #a1a1a6; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
}
@media (hover: hover) { .calc .calc-form.steps-asking .steps-prev:hover { border-color: #f5f5f7; background: #2c2c2e; } }

/* The button: Edasi, or the page's own Arvuta on the last question. Filled, also when a result is waiting behind. */
.calc .calc-form.steps-asking .steps-next { display: block; }
.calc .calc-form.steps-asking:not(.steps-last) [data-go],
.calc .calc-form.steps-asking.steps-last .steps-next { display: none; }
.calc .calc-form.steps-asking .calc-go { width: 100%; margin-top: 0; border: 0; background: #f5f5f7; color: #1d1d1f; }
@media (hover: hover) { .calc .calc-form.steps-asking .calc-go:hover:not(:disabled) { background: #fff; } }
.calc .calc-form.steps-asking .calc-go:active:not(:disabled) { background: #fff; }
.calc .calc-form.steps-asking .steps-next:disabled { opacity: 1; background: #3a3a3c; color: #a1a1a6; cursor: not-allowed; }
.calc .calc-form.steps-asking .steps-next:disabled:active { transform: none; }
.calc .calc-form.steps-asking:not(.steps-last) .calc-promise { display: none; }

/* On a walk through the questions the result waits out of sight, and says nothing. One answer opened from the line
   keeps the result under it, live. */
.calc .calc-form.steps-asking:not(.steps-one) :is([data-result], [data-say]) { display: none; }
.calc .calc-form.steps-one .ask > .calc-row.steps-current { margin-top: 14px; }
.calc.steps-asking-root [data-all] { display: none; }
body:has(.steps-asking-root) .site-footer { --ink: #f5f5f7; --muted: #a1a1a6; --line: #424245; background: var(--night); color: var(--muted); }
.calc.steps-intro-off [data-answer-first]:not(.faq-band *) { display: none; }
/* #166's FAQ sits under the list: while asking it would stand alone between the band and the night footer. On question 1
   before any answer it stays as the first paint drew it (night until the list shows), so taking the form moves nothing. */
body:has(.steps-asking-root.steps-band-off) .faq-band { display: none; }

/* The HTML draws question 1 (tools/pages/_steps.py) before steps.js runs: the progress line's and Edasi's room is kept
   until the script puts them in and drops `steps-pre`, so the first paint and the stepper's first step are one layout. */
.calc .calc-form.steps-pre::before { content: ""; display: block; height: 31px; margin-top: 16px; }
.calc .calc-form.steps-pre.steps-asking:not(.steps-last) [data-go] { display: block; visibility: hidden; margin-top: 24px; }
@media (min-width: 768px) { .calc .calc-form.steps-pre.steps-asking:not(.steps-last) [data-go] { margin-top: 28px; } }

/* A short entrance for the next question. */
.steps-enter { animation: steps-in 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes steps-in { from { opacity: 0; transform: translateY(6px); } }

/* ---- Done: the questions are one line of answers above the result. ---- */
.calc .calc-form.steps-done :is(.ask, [data-go], .steps-head, .calc-promise) { display: none; }
/* The line of answers wraps by whole pieces, the dot and its answer, each row 44px tall: every answer's tap box is its
   own row's height and never reaches into another row. Each piece keeps 16px on its left for the dot, and the line
   starts 16px left of the column: there a line-starting piece's dot is clipped away, 4px short of the answer so its
   focus ring stays. So a dot only ever stands between two answers. */
.calc .calc-form.steps-done .steps-summary { display: flex; flex-wrap: wrap; align-items: center; margin-top: 4px; margin-left: -16px; font-size: 15px; line-height: 20px; clip-path: inset(-8px -8px -8px 12px); }
.steps-parts { display: contents; color: var(--muted); }
.steps-piece { max-width: 100%; min-width: 0; flex-wrap: wrap; position: relative; display: inline-flex; align-items: center; min-height: 44px; padding-left: 16px; color: var(--muted); white-space: nowrap; }
.steps-sep { position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 16px; }
.steps-part, .steps-change {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}
/* Each answer can be tapped: a thin dotted underline says so on a phone too, where there is no hover. No colour. */
.steps-part { overflow-wrap: anywhere; justify-content: flex-start; text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.steps-change { margin-left: 14px; white-space: nowrap; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .steps-part:hover { color: var(--ink); text-decoration-style: solid; } }
.calc .calc-form.steps-done .result { margin-top: 10px; }

@media (min-width: 768px) {
  .calc .calc-form.steps-asking .ask > .calc-row.steps-current { margin-top: 28px; }
  .calc .calc-form.steps-asking .steps-actions { margin-top: 28px; }
  .calc .calc-form.steps-asking .steps-actions > .calc-go { height: 56px; font-size: 19px; }
  .calc .calc-form.steps-asking .ask > .steps-current .calc-label { font-size: 26px; }
  .steps-count { font-size: 17px; }
  .calc .calc-form.steps-asking .ask > .steps-current input[type="text"] { flex: 1 1 auto; }
  .calc .calc-form.steps-done .steps-summary { margin-top: 10px; font-size: 17px; line-height: 24px; }
  .calc .steps-asking .steps-head { margin-top: 0; }
  .calc .calc-form.steps-done .result { margin-top: 20px; }
}
@media (min-width: 980px) {
  /* calculator.css takes the rule above the result away here; the answer line is above it now, so it comes back. */
  .calc .calc-form.steps-done .result { padding-top: 32px; border-top: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  .steps-enter { animation: none; }
}

/* ---- The panel under the result: every answer at once, live. Hairline rows, label left, control right. ---- */
.steps-adjust { margin-top: 22px; padding-top: 6px; border-top: 1px solid var(--line); }
.steps-adjust[hidden] { display: none; }
.steps-adjust-title { display: flex; align-items: center; gap: 6px; min-height: 44px; font-size: 19px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; list-style: none; }
.steps-adjust-title::-webkit-details-marker { display: none; }
.steps-adjust[open] > .steps-adjust-title .calc-chevron { transform: rotate(90deg); }
.steps-adjust-note { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--muted); }
.steps-adjust-grid { margin-top: 8px; }
.steps-adjust-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.steps-adjust-row[hidden] { display: none; }
.steps-adjust-label { flex: 0 1 auto; min-width: 0; font-size: 15px; line-height: 20px; color: var(--ink); }
.steps-adjust-row > .info { margin-right: auto; }
.steps-adjust-value { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.calc .steps-adjust-field { width: 96px; height: 44px; }
.steps-adjust-select { height: 44px; max-width: 220px; padding: 0 8px; border: 1px solid #86868b; border-radius: 6px; background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; margin-left: auto; }
.band-dark .steps-adjust-select { background: #2c2c2e; }
.steps-adjust-error { flex-basis: 100%; margin: 2px 0 4px; font-size: 14px; line-height: 20px; color: var(--error); }
.steps-adjust-error[hidden] { display: none; }
@media (min-width: 768px) {
  .steps-adjust { margin-top: 28px; }
  .steps-adjust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
@media (prefers-reduced-motion: reduce) { .calc .calc-form.steps-asking .ask > .steps-current .opt { transition: none; } }
/* A short screen (a 320 x 568 phone): the choices a little tighter, so a question and its button fit. */
@media (max-height: 700px) {
  .calc .calc-form.steps-asking .ask > .steps-current .opt { min-height: 46px; }
  .calc .calc-form.steps-asking .ask > .steps-current .opt > span { min-height: 44px; }
  .calc .calc-form.steps-asking .ask > .steps-current .opts[data-steps-shape="list"],
  .calc .calc-form.steps-asking .ask > .steps-current .opts.steps-select-opts[data-steps-shape] { row-gap: 6px; }
  .calc .calc-form.steps-asking .ask > .steps-current .calc-label { font-size: 19px; }
  .steps-hint { margin: -6px 0 8px; font-size: 14px; }
}

/* The kWh price's "Lisa kõik maksud" in the change panel: under the field, on its own line. */
.steps-adjust-taxes { display: flex; align-items: center; gap: 8px; min-height: 44px; flex-basis: 100%; justify-content: flex-end; margin-top: 6px; font-size: 0.875rem; cursor: pointer; }
.steps-adjust-tick { width: 18px; height: 18px; margin: 0; accent-color: currentColor; }

/* The boiler's size (Tarvo, 2026-11-08): five sizes on two lines, three and two, and `Ei tea` on its own line under them. */
.calc .calc-form.steps-asking .ask > .steps-current .opts[data-steps-shape="grid"] { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.calc .calc-form.steps-asking .ask > .steps-current .opts[data-steps-shape="grid"] .opt { grid-column: span 2; font-variant-numeric: tabular-nums; }
.calc .calc-form.steps-asking .ask > .steps-current .opts[data-steps-shape="grid"] .opt:nth-child(4),
.calc .calc-form.steps-asking .ask > .steps-current .opts[data-steps-shape="grid"] .opt:nth-child(5) { grid-column: span 3; }
.calc .calc-form.steps-asking .ask > .steps-current .opts[data-steps-shape="grid"] .opt:last-child { grid-column: 1 / -1; }
.calc .calc-form.steps-asking .ask > .steps-current .opts[data-steps-shape="grid"] .opt:not(:last-child) > span { justify-content: center; padding: 0 8px; text-align: center; }
/* The mounting, in pictures: a drawing above each word, two a line. The drawing is aria-hidden: the word says it. */
.calc .calc-form.steps-asking .ask > .steps-current .opts[data-steps-shape="pictures"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.calc .calc-form.steps-asking .ask > .steps-current .opt-picture > span { flex-direction: column; justify-content: center; row-gap: 8px; min-height: 118px; padding: 12px 8px; text-align: center; }
.opt-glyph { display: none; }
.calc .calc-form.steps-asking .ask > .steps-current .opt-glyph { display: block; flex: none; width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.opt-glyph * { vector-effect: non-scaling-stroke; }
.opt-word { display: block; }
/* A small phone keeps Edasi on the first screen under the four pictures (reality.spec.js, 320 x 568). */
@media (max-width: 359px) {
  .calc .calc-form.steps-asking .ask > .steps-current .opt-picture > span { row-gap: 4px; min-height: 92px; padding: 8px 6px; }
  .calc .calc-form.steps-asking .ask > .steps-current .opt-glyph { width: 44px; height: 44px; }
}
@media (min-width: 768px) {
  .calc .calc-form.steps-asking .ask > .steps-current .opts[data-steps-shape="pictures"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .calc .calc-form.steps-asking .ask > .steps-current .opt-glyph { width: 64px; height: 64px; }
}
/* The size question by picture (Tarvo, 2026-11-08; tools/pages/_sizes.py). Each drawing's box is the same 210 cm tall
   and the same px tall, so one cm is the same on every drawing and they all stand on one floor. The words under each
   drawing are the radio's name; ", " between them is for a screen reader only. */
.size-sep { font-size: 0; line-height: 0; }
.size-glyph { display: block; flex: none; width: auto; height: 126px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.size-glyph * { vector-effect: non-scaling-stroke; }
.size-look { display: flex; flex-direction: column; align-items: center; }
.size-look[hidden] { display: none; }
.size-cm { display: block; margin-top: 8px; font-size: 15px; line-height: 20px; font-weight: 600; text-wrap: balance; }
.size-l { display: block; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--muted); }
.calc .calc-form.steps-asking .ask > .steps-current .opts[data-steps-shape="pics"] { display: flex; flex-wrap: nowrap; align-items: stretch; column-gap: 8px; }
.calc .calc-form.steps-asking .ask > .steps-current .opt-size { flex: 1 1 0; align-items: stretch; min-width: 0; }
.calc .calc-form.steps-asking .ask > .steps-current .opt-size > span { flex-direction: column; justify-content: flex-start; align-items: center; padding: 12px 4px 10px; text-align: center; }
.calc .calc-form.steps-asking .ask > .steps-current .opt-size input:checked + span .size-l,
.steps-adjust-sizes .opt-size input:checked + span .size-l { color: #6e6e73; }

/* The same in the change panel, smaller: one row under the question's name. */
.steps-adjust-row-sizes { grid-column: 1 / -1; }
.steps-adjust-sizes { display: flex; flex-basis: 100%; flex-wrap: nowrap; align-items: stretch; column-gap: 6px; margin: 4px 0 6px; }
.steps-adjust-sizes:focus { outline: none; }
.steps-adjust-sizes .size-glyph { height: 76px; }
.steps-adjust-sizes .size-cm { margin-top: 4px; font-size: 14px; line-height: 18px; }
.steps-adjust-sizes .opt-size { flex: 1 1 0; align-items: stretch; min-width: 0; min-height: 44px; padding: 0; border: 1px solid #a1a1a6; border-radius: 6px; }
.steps-adjust-sizes .opt-size > span { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 8px 4px; border: 0; color: var(--ink); text-align: center; }
.steps-adjust-sizes .opt-size:has(input:checked) { border-color: #f5f5f7; background: #f5f5f7; }
.steps-adjust-sizes .opt-size input:checked + span { color: #1d1d1f; border: 0; }
.steps-adjust-sizes .opt-size input:focus-visible + span { outline: 2px solid var(--cold); outline-offset: 2px; border-radius: 6px; }
@media (hover: hover) { .steps-adjust-sizes .opt-size:hover:not(:has(input:checked)) { border-color: #f5f5f7; background: #2c2c2e; } }
@media (min-width: 768px) {
  .size-glyph { height: 168px; }
  .steps-adjust-sizes .size-glyph { height: 92px; }
}
/* A short screen: the drawings smaller, still one scale, so Edasi stays near. */
@media (max-height: 700px) and (max-width: 767px) { .calc .calc-form.steps-asking .ask > .steps-current .size-glyph { height: 100px; } }