/* Калькулятор (qas_groups_questions/calculator), tshop_3. Шаги, варианты, навигация — default/list.css (квиз).
 * Здесь: раскладка «шаги + итог», карточка итога, цены вариантов, ползунок числового вопроса.
 * Ручки — как у квиза: --quiz-radius, --quiz-bg, --quiz-accent, --quiz-option-min. */
@layer modules {
  .t3-calc { max-width: 1120px; }

  /* шаги слева, итог справа; узко — итог под шагами */
  .t3-calc__layout { display: grid; gap: var(--s-6); align-items: start; }
  @container (min-width: 820px) {
    .t3-calc__layout { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: var(--s-7); }
    .t3-calc__total { position: sticky; top: calc(var(--header-h, 0px) + var(--s-5)); }
  }

  /* итог */
  .t3-calc__total {
    display: grid; gap: var(--s-2);
    padding: var(--s-5);
    border-radius: calc(var(--quiz-radius) * .7);
    background: color-mix(in srgb, var(--quiz-accent) 8%, var(--surface));
    border: var(--line-w) solid color-mix(in srgb, var(--quiz-accent) 30%, var(--line));
  }
  .t3-calc__label { margin: 0; font-size: var(--fs-s); font-weight: 600; color: var(--text-2); }
  .t3-calc__sum {
    margin: 0; font-size: var(--fs-xl); line-height: 1.15; font-weight: 700;
    color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  }
  .t3-calc__total.is-empty .t3-calc__sum { color: var(--text-3); }
  .t3-calc__hidden { filter: blur(6px); user-select: none; color: var(--text-2); }
  .t3-calc__teaser { margin: 0; font-size: var(--fs-s); color: var(--text-2); }
  .t3-calc__note { margin: var(--s-2) 0 0; font-size: var(--fs-xs); color: var(--text-3); }

  /* цена у варианта ответа */
  .t3-calc__price {
    margin-left: auto; padding-left: var(--s-2);
    font-size: var(--fs-s); font-weight: 600; white-space: nowrap;
    color: var(--text-2); font-variant-numeric: tabular-nums;
  }
  .t3-quiz__option:has(input:checked) .t3-calc__price { color: var(--quiz-accent); }

  /* числовой вопрос: ползунок + поле с единицей */
  .t3-calc__range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
  .t3-calc__slider {
    --calc-fill: 0%;
    flex: 1 1 240px; min-width: 0; height: 28px; margin: 0;
    appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer;
  }
  .t3-calc__slider::-webkit-slider-runnable-track {
    height: 6px; border-radius: var(--radius-pill);
    background: linear-gradient(to right, var(--quiz-accent) var(--calc-fill), var(--surface-2) var(--calc-fill));
  }
  .t3-calc__slider::-moz-range-track { height: 6px; border-radius: var(--radius-pill); background: var(--surface-2); }
  .t3-calc__slider::-moz-range-progress { height: 6px; border-radius: var(--radius-pill); background: var(--quiz-accent); }
  .t3-calc__slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--quiz-accent); box-shadow: var(--shadow-1);
  }
  .t3-calc__slider::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--quiz-accent);
  }
  .t3-calc__slider:focus-visible { outline: none; }
  .t3-calc__slider:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
  .t3-calc__slider:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }

  .t3-calc__value { display: inline-flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }
  .t3-calc__value--wide { display: flex; }
  .t3-calc__value .t3-calc__number { width: 9ch; text-align: right; font-variant-numeric: tabular-nums; }
  .t3-calc__value--wide .t3-calc__number { width: min(100%, 220px); text-align: left; }
  .t3-calc__unit { color: var(--text-2); font-weight: 600; white-space: nowrap; }

  @container (max-width: 559px) {
    .t3-calc__total { padding: var(--s-4); }
    .t3-calc__price { font-size: var(--fs-xs); }
  }
}