/* site.css — правки вёрстки лендинга поверх arbly-ui (аудит дизайна 2026-09-30).
 * Подключается каждой страницей после arbly-ui/*.css. Здесь только то, что
 * нельзя выразить инлайн-стилем экспорта: медиазапросы, псевдоэлементы, :focus. */

/* ---------- Ползунки калькулятора ----------
 * accent-color красит range не везде одинаково (WebKit рисует серый трек и белый
 * бегунок), поэтому трек и бегунок нарисованы явно — одинаково во всех движках. */
input[type=range].range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; padding: 0; background: transparent; cursor: pointer; }
input[type=range].range:focus { outline: none; }
input[type=range].range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--border-default); }
input[type=range].range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--border-default); }
input[type=range].range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; border: 3px solid var(--bg-surface); background: var(--accent); box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
input[type=range].range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--bg-surface); background: var(--accent); box-shadow: var(--shadow-sm); }
input[type=range].range:hover::-webkit-slider-thumb { transform: scale(1.08); }
input[type=range].range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-soft-bg), var(--shadow-sm); }
input[type=range].range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--accent-soft-bg), var(--shadow-sm); }

/* ---------- Мелкие общие правила ---------- */
.seg__opt { white-space: nowrap; }
/* Длинная кнопка, которой на телефоне не хватает ширины: переносим текст, а не вылезаем за поля */
.btn--wrap { white-space: normal; text-align: center; padding-top: 10px; padding-bottom: 10px; line-height: 20px; }

/* ---------- Демо-экраны панели (макеты внутри страниц) ---------- */
/* Заголовок шапки макета: сжимается с многоточием, а не переносится на вторую строку */
.demo-title { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Второстепенные подписи и фильтры шапки макета — на телефоне не помещаются */
@media (max-width: 599px) { .demo-meta { display: none !important; } }
/* Число в KPI-карточке макета не переносит ₽ на новую строку */
.demo-kpi { white-space: nowrap; }

/* ---------- Пункты списка с моноширинными командами ---------- */
/* Внутри li display:flex каждый <span class="mono"> становился отдельной flex-колонкой и уезжал вправо */
.li-text { min-width: 0; }
.li-text .mono { white-space: nowrap; }

/* ---------- Таблица сравнения тарифов ---------- */
/* На телефоне таблица прокручивается по горизонтали; первая колонка прилипает, чтобы было видно, что сравниваем */
.tbl-cmp { overflow: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 719px) {
  .tbl-cmp th[scope=row] { position: sticky; left: 0; z-index: 1; background: var(--bg-surface); box-shadow: 1px 0 0 var(--border-subtle); }
}