/* ============================================================
   Страница кейса
   Структура из design/CASE_VOICE.md — двенадцать блоков, выведенных
   из разбора кейсов michaelbrowk.com.

   Отдельным файлом: главная его не грузит, а содержание-черточки
   и типографика кейса нужны только здесь.
   ============================================================ */

.case { position: relative }

/* Переход по пунктам содержания — плавный, а не рывком. По ревью:
   «при нажатии на эти пункты нужен плавный переход/скролл».

   scroll-margin-top обязателен вместе с этим: без него глава
   прилипает к самому верху окна и первая строка оказывается под
   кромкой. Отступ тот же, на котором висит само содержание.

   Отключение при prefers-reduced-motion уже есть в tokens.css —
   там scroll-behavior принудительно возвращается в auto.          */
html:has(.case) { scroll-behavior: smooth }
.case [id^="c"] { scroll-margin-top: var(--rail-sticky) }

/* ---------- Содержание-черточки ----------
   Числа в REFERENCES, раздел «Содержание-черточки»: черточка 22×1.5,
   шаг строки 24, поле строки 16, радиус 8.

   Наведение на ЛЮБОЕ место списка гасит все черточки и проявляет
   названия глав, поэтому кроссфейд висит на `.toc:hover`, а не на
   строке: иначе названия проявлялись бы по одному.                */
/* Слева 100 — столько же, сколько сверху. По ревью «сделай отступ
   слева 100px, как на главной». Прежняя формула привязывала
   содержание к колонке и на 1280 давала 164.

   min() — страховка: если окно сузится настолько, что 100 подведёт
   содержание вплотную к тексту, оно отойдёт левее. Ниже 1280 блок
   и так скрыт.                                                     */
/* Сайдбар и фото-возврат переехали в app.css: они стоят и на
   страницах работ, а те case.css не подключают. Здесь остался
   только список глав. */
/* Аватарка 30, квадратная со скруглением по Apple. Обычный радиус
   даёт дугу постоянной кривизны, у squircle она нарастает плавно —
   поэтому форма задана маской, а не border-radius. Радиус оставлен
   запасным вариантом там, где маски нет.                           */

.toc__list { list-style: none; margin: 0; padding: 0 }
.toc__list a {
  position: relative; display: flex; align-items: center;
  height: 24px; padding: 0 var(--s-4); border-radius: var(--r-sm);
  text-decoration: none; color: var(--muted);
  font-size: 13px; line-height: 24px;
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.toc__list a span {
  opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity var(--dur-base) var(--ease);
}
.toc__list i {
  position: absolute; left: var(--s-4); top: 11px;
  width: 22px; height: 1.5px; border-radius: var(--r-full);
  background: var(--underline);
  transition: opacity var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}
.toc__list a.is-active i { background: var(--ink) }
.toc__list a.is-active { color: var(--ink) }
.toc:hover i, .toc:focus-within i { opacity: 0 }
.toc:hover span, .toc:focus-within span { opacity: 1 }
.toc__list a:hover { background: var(--hover); color: var(--ink) }

/* ---------- Шапка кейса ---------- */
/* Своего верхнего отступа у шапки кейса НЕТ: его уже даёт .wrap.
   Было и там и там — 140 плюс 140, и первый экран уезжал на 280.
   Автор это увидел в инспекторе: «контейнер в контейнере». */
.case__head { position: relative }
.case__switches { position: absolute; top: 0; right: 0; padding-top: 0 }
.case__name {
  font-size: var(--text-display); line-height: var(--text-display-lh);
  font-weight: var(--text-display-w); letter-spacing: var(--text-display-ls);
  color: var(--ink); margin: 0;
}
.case__gist {
  max-width: var(--measure); margin: var(--s-3) 0 0;
  font-size: var(--text-lead); line-height: var(--text-lead-lh);
  font-weight: var(--text-lead-w); letter-spacing: var(--text-lead-ls);
  color: var(--ink);
}

/* Заголовок блока. Не ярлык «Решение», а фраза — по CASE_VOICE. */
.case__h {
  max-width: var(--measure); margin: 0 0 var(--gap-label);
  font-size: var(--text-lead); line-height: var(--text-lead-lh);
  font-weight: var(--text-title-w); letter-spacing: var(--text-lead-ls);
  color: var(--ink);
}

.meta { margin: var(--gap-text) 0 0; display: grid; gap: var(--s-2) }
.meta > div { display: flex; gap: var(--s-4); align-items: baseline }
.meta dt {
  flex: none; min-width: 96px; color: var(--muted);
  font-size: var(--text-meta); line-height: var(--text-meta-lh);
}
.meta dd {
  margin: 0; color: var(--ink);
  font-size: var(--text-meta); line-height: var(--text-meta-lh);
  font-weight: var(--text-meta-w);
}

/* ---------- Три строки сверху ----------
   Первое, что видит читатель: что вёл, что выпустили, что это дало.
   Приём из эталона — весь кейс сжат в три строки, дальше можно не
   читать. Коробок нет: по ревью карточки «выглядят скучно», и на
   Mobbin сильные примеры показывают то же — вес несёт типографика,
   а не рамка.                                                     */
.three { display: grid; gap: var(--s-6); max-width: var(--measure) }
.three__row { display: grid; gap: var(--s-2) }
.three__row + .three__row { padding-top: var(--s-6); border-top: 1px solid var(--hairline) }
.three__key {
  margin: 0; color: var(--muted);
  font-size: var(--text-meta); line-height: var(--text-meta-lh);
  font-weight: var(--text-meta-w);
  text-transform: uppercase; letter-spacing: var(--text-micro-ls);
}
.three__val {
  margin: 0; color: var(--ink);
  font-size: var(--text-lead); line-height: var(--text-lead-lh);
  font-weight: var(--text-body-w); letter-spacing: var(--text-lead-ls);
}

/* ---------- Проза ----------
   Кейс — выжимка, но ликбез по предметной области и разворот
   пишутся абзацами: списком объяснить механику залога нельзя.
   Абзац держим в четыре строки, дальше читатель соскальзывает.    */
.prose { max-width: var(--measure) }
.prose p { color: var(--body-c) }
.prose--tight { margin-top: var(--gap-label) }

/* Выделенная мысль — то, ради чего написан абзац выше. */
.pull {
  max-width: var(--measure); margin: var(--gap-text) 0 0;
  padding-left: var(--s-5); border-left: 2px solid var(--ink);
  color: var(--ink); font-weight: var(--text-strong-w);
}

/* ---------- Однострочники ---------- */
.lines { list-style: none; margin: 0; padding: 0; max-width: var(--measure) }
.lines li { position: relative; padding-left: var(--s-6); color: var(--body-c) }
.lines li + li { margin-top: var(--s-3) }
.lines li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 12px; height: 1.5px; border-radius: var(--r-full); background: var(--underline);
}

/* ---------- Реплики из теста ----------
   Тоже без коробок. Прямая речь — самое ценное, что есть в кейсе,
   и она должна читаться как цитата, а не как плитка в сетке.      */
.quotes { max-width: var(--measure); margin: var(--gap-text) 0 0 }
.quote { margin: 0; padding: var(--s-6) 0 }
.quote + .quote { border-top: 1px solid var(--hairline) }
.quote p {
  margin: 0; color: var(--ink);
  font-size: var(--text-lead); line-height: var(--text-lead-lh);
  letter-spacing: var(--text-lead-ls);
}
.quote cite {
  display: block; margin-top: var(--s-3); font-style: normal; color: var(--muted);
  font-size: var(--text-meta); line-height: var(--text-meta-lh);
}

/* ---------- Инсайт ----------
   Единственное место кейса с дисплейным кеглем. Ради этой фразы
   кейс и существует, ярлык секции ей не нужен.                    */
.insight__line {
  max-width: var(--measure); margin: 0;
  font-size: var(--text-display); line-height: var(--text-display-lh);
  font-weight: var(--text-display-w); letter-spacing: var(--text-display-ls);
  color: var(--ink);
}
.insight__note { max-width: var(--measure); margin: var(--s-5) 0 0; color: var(--muted) }

/* ---------- Решения ----------
   Каждое объясняется через ограничение: уперлись вот в это, поэтому
   так. Приём из эталона, без него остаётся список сделанного.     */
.pairs { list-style: none; margin: 0; padding: 0; counter-reset: pair }
.pair { counter-increment: pair; max-width: var(--measure) }
.pair + .pair { margin-top: var(--gap-block); padding-top: var(--gap-block); border-top: 1px solid var(--hairline) }
.pair__title {
  margin: 0; color: var(--ink);
  font-size: var(--text-body); line-height: var(--text-body-lh);
  font-weight: var(--text-strong-w); letter-spacing: var(--text-body-ls);
}
.pair__title::before {
  content: counter(pair); display: inline-block; min-width: 24px;
  color: var(--muted); font-weight: var(--text-body-w);
  font-variant-numeric: tabular-nums;
}
.pair__limit, .pair__did { margin: var(--s-3) 0 0 24px; color: var(--body-c) }
.pair__limit b { color: var(--ink); font-weight: var(--text-strong-w) }

/* ---------- Экраны ----------
   По ревью: «ширина изображений огромная, они вылезают за границы
   контейнера контента». Вынос за колонку снят — экран не шире
   колонки, как и весь остальной текст.                            */
.shot { margin: var(--gap-text) 0 0; width: 100% }
.shot img { display: block; width: 100%; height: auto }
.shot figcaption {
  margin-top: var(--s-3); color: var(--muted);
  font-size: var(--text-meta); line-height: var(--text-meta-lh);
}
.shots { display: grid; gap: var(--gap-block) }
.shots > .shot { margin-top: 0 }
.pair .shot { margin-left: 24px; width: calc(100% - 24px) }

/* Мобильный скриншот задаётся ВЫСОТОЙ, а не шириной. Вертикальный
   скрин в 375px, растянутый по ширине колонки, даёт башню: замерено,
   одна такая картинка занимала целый экран прокрутки.

   Ограничивать вместо этого обе стороны через max-* при `width: auto`
   нельзя — до загрузки файла ширина схлопывается в ноль. Пропорцию
   браузер знает из атрибутов width/height, поэтому жёсткая высота
   плюс `width: auto` работает и до загрузки.                      */
.shot--phone { width: auto; margin-left: auto; margin-right: auto; text-align: center }
.shot--phone img { height: var(--shot-phone); width: auto; margin: 0 auto }
.pair .shot--phone { width: auto; margin-left: auto }

.case__next { margin-top: var(--gap-section); padding-bottom: var(--gap-section-lg) }

/* ---------- Адаптив ----------
   Проверено замером на 1440 / 1280 / 375.                         */
@media (max-width: 1279px) {
  /* Содержание уходит: слева больше нет места. Навигация по кейсу
     остаётся прокруткой — липкий столбец черточек на узком экране
     съел бы треть ширины ради двенадцати пунктов.                  */
  .toc { display: none }
}
@media (max-width: 767px) {
  .case__switches { position: static; margin-bottom: var(--s-6) }
  .pair .shot { margin-left: 0; width: 100% }
  .pair__limit, .pair__did { margin-left: 0 }
  .pair__title::before { min-width: 0; margin-right: var(--s-2) }
  .meta > div { flex-direction: column; gap: var(--s-1) }
  .meta dt { min-width: 0 }
  /* Ширину фигуры обязательно вернуть в 100%. При `width: auto` у
     фигуры и `width: 100%` у картинки размер определяется сам через
     себя, и оба схлопываются в ноль — проверено.                  */
  .shot--phone, .pair .shot--phone { width: 100%; margin-left: 0; margin-right: 0 }
  /* Телефон не выше экрана. При width:100% кадр вырастал до 966
     при экране 812, и целиком его было не увидеть. */
  .shot--phone img { height: auto; width: 100%; max-height: 80vh; object-fit: contain }
}

/* ---------- Ритм страницы кейса ----------
   По ревью: «расстояния между блоками слишком большие, нужно чуть
   меньше». 112 — шаг главной, где блоки крупные и редкие. У кейса
   двенадцать блоков подряд, и на такой частоте тот же шаг рвёт текст
   на несвязанные куски. 80 держит их одним рассказом.

   Замерено: отступы съедали 12% высоты страницы.                   */
.case .section--lg { margin-top: var(--gap-case) }
/* На телефоне шаг ещё меньше. 80 снято с широкой колонки; на 335
   тот же отступ занимает десятую часть экрана и снова рвёт рассказ,
   ровно ту проблему, ради которой 112 меняли на 80. */
@media (max-width: 767px) {
  .case .section--lg { margin-top: var(--s-9) }
}

/* ---------- Ряд мобильных экранов ----------
   У эталона телефоны никогда не стоят по одному на всю колонку —
   всегда рядами по два-три, шириной 310–430. Замерено на пяти
   страницах michaelbrowk. Один вертикальный скрин во всю колонку
   и выглядит бедно, и растягивает прокрутку.

   Высота ряда меньше высоты одиночного экрана: три телефона по 360
   занимают меньше, чем один по 520.                                */
.row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-card); align-items: start }
.row .shot { margin-top: 0; width: 100% }
.row .shot--phone img { height: auto; width: 100%; max-height: var(--shot-phone) }
@media (max-width: 767px) {
  .row { grid-template-columns: repeat(2, 1fr); gap: var(--s-3) }
}

/* ---------- Заглушка изображения ----------
   Серый блок на месте экрана, которого ещё нет. Подпись внутри
   обязательна: пустой прямоугольник на вычитке читается как баг
   вёрстки, а не как «здесь будет картинка».                      */
.stub {
  margin: var(--gap-text) 0 0;
  display: grid; place-items: center;
  min-height: 240px; padding: var(--s-6);
  border-radius: var(--r-lg);
  /* Пунктир, а не сплошная рамка: заглушка обязана читаться как
     «здесь будет картинка», а не как готовая карточка. На тёмной
     теме подложка --plate совпадает с фоном страницы, поэтому фон
     берётся от --surface — он на ступень светлее.               */
  background: var(--surface);
  border: 1px dashed var(--underline);
  color: var(--muted); text-align: center;
  font-size: var(--text-meta); line-height: var(--text-meta-lh);
}
.stub--sm   { min-height: 150px }
.stub--tall { min-height: 420px }
.stub b { display: block; color: var(--body-c); font-weight: var(--text-strong-w) }

/* Пара заглушек рядом — для сравнений «вариант А / вариант Б» */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-block); margin: var(--gap-text) 0 0 }
.duo > .stub, .duo > .shot { margin-top: 0 }

/* ---------- Сопоставление чисел ----------
   Два столбца с крупными значениями. Нужны там, где абзац
   доказывает мысль числами: одинаковый залог, разный процент.    */
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-block);
        margin: var(--gap-text) 0 0; max-width: var(--measure) }
.nums__cell { padding-left: var(--s-5); border-left: 2px solid var(--underline) }
.nums__k { margin: 0; color: var(--muted);
           font-size: var(--text-meta); line-height: var(--text-meta-lh) }
.nums__v { margin: var(--s-1) 0 0; color: var(--ink);
           font-size: var(--text-title); line-height: var(--text-title-lh);
           font-weight: var(--text-title-w); letter-spacing: var(--text-title-ls) }
.nums__note { margin: var(--s-2) 0 0; color: var(--body-c) }

@media (max-width: 719px) {
  .duo, .nums { grid-template-columns: 1fr }
}

/* ---------- Подзаголовок внутри главы ----------
   Нужен там, где одна глава держит несколько состояний продукта:
   заводить на каждое отдельную главу — раздувать содержание.     */
.case__sub {
  max-width: var(--measure);
  margin: var(--gap-block) 0 var(--gap-label);
  color: var(--ink);
  /* Кегль заголовка главы занят: подзаголовок отличается не размером,
     а прописными и трекингом — тем же приёмом, что ярлыки слева.   */
  font-size: var(--text-micro); line-height: var(--text-micro-lh);
  letter-spacing: .08em; text-transform: uppercase;
  font-weight: var(--text-strong-w);
}
.case__sub:first-of-type { margin-top: var(--gap-text) }

/* Второй уровень подзаголовка. Понадобился, когда сценарии «Майнер» и
   «Трейдер» вышли из табов в поток: они лежат внутри главы «Зачем им
   деньги», и тот же прописной ярлык сплющил бы иерархию. Здесь
   обычный кегль без капса, разница читается сразу.                 */
.case__sub--sm {
  font-size: var(--text-body); line-height: var(--text-body-lh);
  font-weight: var(--text-strong-w); letter-spacing: var(--text-body-ls);
  text-transform: none;
  margin: var(--gap-text) 0 var(--s-2);
}

/* ---------- Приёмы против сплошного текста ----------
   Кейс длинный, и проза идёт полотном. Четыре приёма, которые
   дают глазу зацепки, не превращая страницу в ярмарку:
   лид-абзац, акцентная фраза, термин продукта, блок вопросов.  */

/* 1. Первый абзац главы. Кегль не трогаем: проза кейса и так
      набрана лидом, а заголовок главы того же размера — увеличить
      абзац значит перебить заголовок. Отличие даёт цвет и вес. */
.case__lead, .prose p.case__lead {
  max-width: var(--measure); margin: var(--gap-text) 0 var(--text-body-mb);
  color: var(--ink); font-weight: 500;
}

/* 2. Акцентная фраза внутри абзаца. Не больше одной на главу,
      иначе выделения перестают работать. */
.prose b, .prose strong { color: var(--ink); font-weight: var(--text-strong-w) }

/* 3. Термин продукта. Кейс про словарь, поэтому слова, которые
      мы придумывали, живут в тексте как объекты, а не как проза. */
.term {
  color: var(--ink); font-weight: var(--text-strong-w);
  box-shadow: inset 0 -1px 0 var(--underline);
  padding-bottom: 1px;
}

/* 4. Вопросы, которые я задавал. Три подряд в абзаце читаются
      как перечисление; отдельным блоком — как живая речь. */
.qa {
  list-style: none; margin: var(--gap-text) 0; padding: 0 0 0 var(--s-5);
  max-width: var(--measure); border-left: 1px solid var(--underline);
  display: grid; gap: var(--s-2);
}
.qa li { color: var(--muted); font-size: var(--text-body); line-height: var(--text-body-lh) }

/* ---------- Схемы ----------
   Общая рамка для рисунков внутри глав. Подложка та же, что у
   скриншотов, чтобы схема читалась как часть визуального ряда,
   а не как посторонняя картинка.                               */
.fig {
  margin: var(--gap-text) 0 0; padding: var(--s-7) var(--s-6);
  border-radius: var(--r-lg); background: var(--plate);
  box-shadow: var(--shadow-card);
}
.fig svg { display: block; width: 100%; height: auto; color: var(--ink) }
.fig figcaption {
  margin-top: var(--s-5); color: var(--muted); text-align: center;
  font-size: var(--text-meta); line-height: var(--text-meta-lh);
}

/* ---------- Пара решений: отвергнуто и принятое ----------
   Две карточки рядом, под каждой вердикт кружком. Акцент берётся
   от --ink, поэтому на светлой теме кружок чёрный, на тёмной
   белый: отдельного акцентного цвета в каноне нет и заводить его
   ради одного компонента нельзя.                                */
.verdict {
  margin: var(--gap-text) 0 0;
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: var(--r-xl);
  box-shadow: inset 0 0 0 1px var(--hairline);
  overflow: hidden;
}
.verdict__col { display: grid; grid-template-rows: 1fr auto; padding: var(--s-6) }
.verdict__col + .verdict__col { box-shadow: inset 1px 0 0 var(--hairline) }

.verdict__card {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--hairline); overflow: hidden;
  align-self: start;
}
.verdict__text { margin: 0; padding: var(--s-5); color: var(--ink) }
.verdict__meta { padding: var(--s-4) var(--s-5); box-shadow: inset 0 1px 0 var(--hairline) }
.verdict__tag {
  display: inline-block; padding: 4px 10px; border-radius: var(--r-full);
  background: var(--plate); color: var(--muted);
  font-size: var(--text-meta); line-height: var(--text-meta-lh);
}
.verdict__mark {
  margin-top: var(--s-7); padding-top: var(--s-6);
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 var(--hairline);
}
.verdict__mark i {
  width: 28px; height: 28px; border-radius: var(--r-full);
  display: grid; place-items: center;
  /* Отвергнутый вариант помечен контуром, а не заливкой: на светлой
     теме --plate совпадает с фоном карточки и кружок пропадал. */
  box-shadow: inset 0 0 0 1px var(--underline); color: var(--muted);
}
.verdict__col--yes .verdict__mark i { background: var(--ink); color: var(--canvas) }
.verdict__mark svg { display: block; width: 14px; height: 14px }

/* Строка интерфейса внутри текста: то, что человек читает на экране,
   набирается моноширинным, чтобы отделяться от речи автора. */
.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92em; color: var(--ink);
}

@media (max-width: 719px) {
  .verdict { grid-template-columns: 1fr }
  .verdict__col + .verdict__col { box-shadow: inset 0 1px 0 var(--hairline) }
}

/* ---------- Сценарии табами ----------
   Четыре сценария использования продукта. Списком они занимают
   экран текста, табами — один экран с картинкой. Рельс слева
   повторяет то, как это сделано на самом лендинге.              */
.tabs {
  /* Рельс сверху, а не сбоку: колонка кейса узкая, и две колонки
     съедали картинку. Теперь изображение во всю ширину блока. */
  margin: var(--gap-text) 0 0;
  display: grid; gap: var(--s-5);
}
.tabs__rail {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding-bottom: var(--s-3); box-shadow: inset 0 -1px 0 var(--hairline);
}
.tabs__rail button {
  appearance: none; border: 0; background: none; cursor: pointer;
  text-align: left; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  color: var(--muted); font: inherit;
  font-size: var(--text-body); line-height: var(--text-body-lh);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tabs__rail button:hover { color: var(--ink); background: var(--plate) }
.tabs__rail button[aria-selected="true"] {
  color: var(--ink); font-weight: var(--text-strong-w); background: var(--plate);
}
.tabs__pane[hidden] { display: none }
.tabs__title { margin: 0; color: var(--ink); font-size: var(--text-body); font-weight: var(--text-strong-w) }
.tabs__desc { margin: var(--s-2) 0 0; color: var(--body-c) }
.tabs__pane .stub, .tabs__pane .shot { margin-top: var(--s-5) }

@media (max-width: 719px) {
  .tabs__rail { flex-wrap: nowrap; overflow-x: auto }
}

/* ---------- Шаги сделки ----------
   Абстрактные коробки со стрелками читались как блок-схема из
   учебника. Здесь то же самое, но числами с реального экрана:
   видно не «деньги», а сколько именно.                          */
.steps {
  margin: var(--gap-text) 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3);
  align-items: stretch;
}
.step {
  padding: var(--s-5); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline);
  display: grid; gap: var(--s-2); align-content: start;
}
.step__k { margin: 0; color: var(--muted); font-size: var(--text-meta); line-height: var(--text-meta-lh) }
.step__v { margin: 0; color: var(--ink); font-size: var(--text-body); line-height: var(--text-body-lh) }
.steps__note {
  grid-column: 1 / -1; margin: var(--s-3) 0 0;
  padding: var(--s-4) var(--s-5); border-radius: var(--r-lg);
  background: var(--plate); box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--body-c); font-size: var(--text-meta); line-height: var(--text-meta-lh);
}

/* ---------- Запас до закрытия ----------
   Полоса вместо цифры: сколько цене осталось падать. */
.gauges { margin: var(--gap-text) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) }
.gauge {
  padding: var(--s-5); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline);
  display: grid; gap: var(--s-3);
}
.gauge__k { margin: 0; color: var(--muted); font-size: var(--text-meta); line-height: var(--text-meta-lh) }
.gauge__v { margin: 0; color: var(--ink); font-size: var(--text-lead); line-height: var(--text-lead-lh) }
.gauge__bar { height: 8px; border-radius: var(--r-full); background: var(--plate); box-shadow: inset 0 0 0 1px var(--hairline); overflow: hidden }
.gauge__bar span { display: block; height: 100%; border-radius: var(--r-full); background: var(--ink) }
.gauge__note { margin: 0; color: var(--body-c); font-size: var(--text-meta); line-height: var(--text-meta-lh) }

@media (max-width: 719px) {
  .steps { grid-template-columns: 1fr 1fr }
  .gauges { grid-template-columns: 1fr }
}

/* Вопрос состояния переехал из кнопки в панель: в горизонтальном
   рельсе двухэтажные кнопки читаются тяжело. */
.tabs__q { display: none }


/* ---------- Рельс табов по макету ----------
   Кнопки делят ширину поровну и стоят с зазором, чтобы читались
   как две отдельные вкладки, а не как один переключатель.      */
.tabs__rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: var(--s-4);
}
.tabs__rail button { border-radius: var(--r-sm) }

/* Рамка телефона поверх существующего .shot--phone. Ширину здесь
   задаёт сама картинка: она уже отмасштабирована по высоте, и рамке
   остаётся её обнять.                                              */
.shot--phone.plate--phone { width: fit-content; margin-inline: auto }
.shot--phone.plate--phone .plate__in { display: block; line-height: 0 }