/* Вкладка «Калькулятор»: поля параметров и сравнение сценариев. */

/* Ширина и заголовок — общие: `.page.page--narrow` и `.page-header` из
   style.css. Своих `.calc-page` / `.calc-title` / `.calc-sub` больше нет,
   из-за них вкладка отличалась от остальных отступами и кеглем. */

/* Строка «взять из товара»: тарифы Ozon вместо цифры, вбитой руками. Гостю её
   не показывают вовсе — она бы висела пустым выпадающим списком. */

/* Файл переведён на утилиты: здесь осталось только то, что утилитами не
   выражается или обязано быть общим. Слой — тот же `legacy`, что у всего
   остального нашего CSS, и это не небрежность.

   Соблазн был положить переведённое в отдельный слой `components`. Так и было
   сделано сначала — и оказалось, что это молча меняет каскад: слой сильнее
   любой специфичности, поэтому правило страницы начинает выигрывать у общего
   style.css там, где раньше проигрывало. Насчиталось восемнадцать таких пар.
   Самая наглядная — `.zero` на «Моих товарах»: красный ноль под курсором
   становился почти белым (`.ui-data-table.ui-data-table tbody tr:hover td`,
   специфичность 0,3,3 против 0,1,0), а в отдельном слое перестал бы.

   Утилитам общий слой не мешает: `utilities` объявлен после `legacy`, и
   утилита бьёт любое правило отсюда — ради этого слои и заводились. */
@layer legacy {

/* `hidden` в разметке снимает только скрипт, когда тарифы пришли, — но
   `display: flex` сильнее браузерного `[hidden]`, и гость видел пустую строку
   с мёртвым списком. Оба правила обязаны остаться здесь вместе: отдай
   `display` утилите — и она перебьёт `[hidden]`, потому что слой `utilities`
   объявлен после `components`. Правило по атрибуту утилитой не выражается. */
.calc-source { display: flex; }
.calc-source[hidden] { display: none; }

.calc-section-head {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 10px;
}
.calc-section-head h2 {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-h2);
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: .01em;
}
.calc-section-head--bars { margin-top: 24px; }
.calc-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 18px;
}

/* Карточка сценария целиком остаётся классом: `update()` переписывает ей
   className целиком (`node.className = 'calc-scen' + …`), и утилиты, поставленные
   в разметке, стёрлись бы на первом же пересчёте. Заодно `winner` / `loser` —
   состояния, которые красят ту же рамку, и имя выбирается в рантайме. */
.calc-scen {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 16px;
  transition: border-color .2s, box-shadow .2s;
}
.calc-scen.winner { border-color: rgba(16,185,129,.5); box-shadow: inset 3px 0 0 var(--green); }
.calc-scen.loser  { border-color: rgba(251, 113, 133, .4); box-shadow: inset 3px 0 0 var(--red); }

.calc-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.calc-result-cell {
  min-width: 0;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  background: var(--surface2);
}
.calc-result-cell:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 8px;
}
.calc-result-cell > span {
  display: block;
  color: var(--dim);
  font-size: var(--fs-xs);
  line-height: 1.3;
}
.calc-result-cell > b {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-h3);
  line-height: 1.25;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.calc-result-cell > small {
  display: block;
  margin-top: 2px;
  color: var(--dim);
  font-size: var(--fs-xs);
  line-height: 1.3;
}
.calc-result-cell:first-child > small { grid-column: 1 / -1; }
.calc-result-total {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.calc-result-total strong { font-size: var(--fs-lead); font-variant-numeric: tabular-nums; }
.calc-result-total .hint { margin-left: 2px; }

/* Крестик рисуется 22px — так он не спорит с именем сценария, — но целятся в
   него мышью, и 22px мимо минимума в 32. Растёт невидимое поле, не сама
   кнопка. Соседей оно не перекрывает: бейдж «база» стоит левее с зазором 8px.

   Остаётся классом целиком из-за `::after`: невидимое поле нажатия — это
   псевдоэлемент, а ему в Tailwind соответствия нет, и `position: relative`
   базового правила существует ровно ради него. */
.calc-scen-del {
  position: relative;
  flex-shrink: 0; width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: transparent; color: var(--muted);
  font: inherit; font-size: var(--fs-h2); line-height: 1; cursor: pointer;
  transition: color .15s, border-color .15s, transform .12s var(--ease-out);
}
.calc-scen-del::after { content: ''; position: absolute; inset: -5px; }
.calc-scen-del:hover { color: var(--red); border-color: var(--red); }
.calc-scen-del:active { transform: scale(.95); }

/* Что держим при своей СПП — выбор сценария, поэтому переключатель стоит в его
   карточке. */
.calc-hold { position: relative; }
/* Кегль и поля тесные — переключатель стоит в узкой карточке, — но высота
   остаётся канонической: 32px, иначе в «ЛК» шириной в две буквы не попасть.
   Правило контекстное: красит и двигает потомков `.period-btn`, которые
   приходят из ui-components.css, — утилитой это не выражается. */
.calc-hold-seg > .period-btn { min-height: 32px; padding: 4px 10px; font-size: var(--fs-sm); }
.calc-hold > .hint { margin-left: 0; }
/* Базовому держать нечего — переключатель у него заперт: приглушён и не
   отзывается на наведение. Подсказка при этом остаётся: она и объясняет, почему
   нажать нельзя. Контекстное правило по атрибуту `[disabled]` у потомков —
   утилитой не выражается. */
.calc-hold--locked .calc-hold-seg > .period-btn[disabled] { cursor: default; opacity: .5; }
.calc-hold--locked .calc-hold-seg > .period-btn[disabled]:hover { background: none; }
.calc-hold--locked .calc-hold-seg > .period-btn[disabled].active:hover { background: var(--blue); }

/* Вердикт остаётся классом по той же причине, что карточка сценария:
   `renderVerdict()` переписывает ему className целиком
   (`verdictBox.className = 'calc-verdict good'`), и утилиты из шаблона стёрлись
   бы на первом пересчёте. Имя состояния выбирается в рантайме. */
.calc-verdict {
  display: flex;
  align-items: center;
  border-radius: var(--r-card); padding: 12px 16px;
  font-size: var(--fs-base); line-height: 1.5; margin-bottom: 14px;
}
.calc-verdict.good    { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); }
.calc-verdict.bad     { background: rgba(251, 113, 133, .07); border: 1px solid rgba(251, 113, 133, .25); }
.calc-verdict.neutral { background: var(--surface2); border: 1px solid var(--border); }

.calc-be-card {
  margin-bottom: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}

.calc-mini-head {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 700;
}
.calc-be-list { border-top: 1px solid var(--border); }
.calc-be-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 76px;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.calc-be-row:last-child { border-bottom: 0; padding-bottom: 0; }
.calc-be-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-be-row > strong { font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.calc-be-row > small { text-align: right; }

/* Подпись лежит НА заливке, поэтому цвет ей нужен свой на каждый сегмент, а не
   один на все: полупрозрачный белый давал 2.4:1 по оранжевому и 2.8:1 по
   зелёному при норме 4.5:1 — «Рекл» и «Остат» на полосе просто не читались.
   Тёмный на светлых заливках (оранжевая реклама, зелёный остаток) — 6.4:1 и
   5.4:1; плотный белый на тёмных (фиолетовая себестоимость, красная комиссия,
   серая логистика) — 7.1:1, 4.8:1, 7.6:1.
   Заливку ставит page-calculator.js инлайном, поэтому и выбираем по ней.

   Класс целиком: `color: #fff` — базовое значение для двух правил по атрибуту
   ниже. Отдай его утилите — и тёмная подпись на светлой заливке пропадёт, а
   вместе с ней и контраст. Отбор по `[style*=…]` утилитой не выражается вовсе. */
.calc-bar-seg {
  height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); color: #fff; overflow: hidden; white-space: nowrap;
}
.calc-bar-seg[style*="#d97706"],
.calc-bar-seg[style*="#059669"] { color: var(--on-accent); }

/* Пальцем целятся хуже, чем мышью: там же, где мыши хватает 32px, нужно 44.
   Растут поля, а не кегль — числа и крестик остаются прежнего размера.
   Поля ввода добирают эти 44px утилитой `pointer-coarse:min-h-11` прямо в
   разметке; здесь остались те двое, у кого правило и так живёт в этом файле. */
@media (pointer: coarse) {
  .calc-scen-del::after { inset: -11px; }
  .calc-hold-seg > .period-btn { min-height: 44px; }
}

/* ─── Ползунок прикидки ──────────────────────────────────────────────────
   Родной `range` рисуется каждой ОС по-своему: в macOS это голубая пилюля с
   тенью, и на тёмной странице она выглядит чужим элементом. Дорожка и
   бегунок собраны своими руками из токенов — как остальные органы страницы.

   Классом, а не утилитами: `::-webkit-slider-thumb` и `::-moz-range-thumb`
   утилитами не выражаются, а без них бегунок остаётся системным. */
.calc-range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 20px;
  background: transparent;
  cursor: pointer;
}
.calc-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--surface3);
}
.calc-range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--surface3);
}
.calc-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  transition: transform .12s;
}
.calc-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  transition: transform .12s;
}
.calc-range:hover::-webkit-slider-thumb { transform: scale(1.15); }
.calc-range:hover::-moz-range-thumb { transform: scale(1.15); }
/* Обводка фокуса на самом бегунке: у `appearance: none` её нет вовсе, и
   ползунок переставал существовать для клавиатуры. */
.calc-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--blue-glow, rgba(34, 211, 238, .35)); }
.calc-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--blue-glow, rgba(34, 211, 238, .35)); }
/* Палец промахивается по 16 пикселям: на тач-экранах даём ручке рост. */
@media (pointer: coarse) {
  .calc-range { height: 30px; }
  .calc-range::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9px; }
  .calc-range::-moz-range-thumb { width: 22px; height: 22px; }
}

.calc-live-link {
  display: inline-flex;
  align-items: center;
  margin-top: 9px;
  padding: 4px 8px;
  border: 1px solid rgba(34, 211, 238, .22);
  border-radius: var(--r-pill);
  background: rgba(34, 211, 238, .07);
  color: var(--blue);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.calc-live-link::before { content: '↔'; margin-right: 6px; }
.calc-live-link.is-off { color: var(--dim); border-color: var(--border); background: var(--surface2); }

#calc-live { border-color: rgba(34, 211, 238, .22); }
.calc-live-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Живые полосы стоят рядом с ручками, которые ими управляют. Все три делят
   одну шкалу: длина рекламы сопоставима с маржой, а не просто заполняет свой
   отдельный жёлоб. Тонкая черта — значение первого сценария на той же шкале. */
.calc-live-bars {
  margin-top: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.calc-live-bars__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--dim);
  font-size: var(--fs-xs);
}
.calc-live-bars__head > :first-child {
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.calc-live-bar {
  --live-bar-color: var(--blue);
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 78px;
  align-items: center;
  gap: 10px;
  min-height: 28px;
}
.calc-live-bar[data-live-bar="ad"] { --live-bar-color: #d97706; }
.calc-live-bar[data-live-bar="profit"] { --live-bar-color: var(--green); }
.calc-live-bar__label { color: var(--muted); font-size: var(--fs-sm); }
.calc-live-bar__rail {
  position: relative;
  height: 10px;
  overflow: visible;
  border-radius: 999px;
  background: var(--surface3);
}
.calc-live-bar__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--live-bar-color);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .12s var(--ease-out);
}
.calc-live-bar__fill.is-negative { background: var(--red); }
.calc-live-bar__base {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 18px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--text);
  box-shadow: 0 0 0 1px var(--surface);
}
.calc-live-bar__value {
  color: var(--text);
  font-size: var(--fs-sm);
  text-align: right;
}

@media (max-width: 640px) {
  .calc-live-bars__head > :last-child { max-width: 190px; text-align: right; }
  .calc-live-bar { grid-template-columns: 90px minmax(0, 1fr) 68px; gap: 8px; }
  .calc-live-bar__label { font-size: var(--fs-xs); }
}

/* Ползунок могут двигать десятки раз подряд: короткий переход лишь связывает
   соседние состояния. При reduced motion длина меняется сразу. */
@media (prefers-reduced-motion: reduce) {
  .calc-live-bar__fill { transition: none; }
}

}