/* ============================================================================
   ЗАЛ СРАВНЕНИЯ — оформление.
   Разметку строит assets/js/compare.js, этот файл отвечает только за вид.

   Правила музея соблюдены те же, что в museum.css:
     · в :root не пишем ни строки — переменные объявлены в своих блоках;
     · filter и blur не применяются нигде: свет собран из градиентов, чтобы
       ни один кадр не проседал (в накладке работают два чужих сайта);
     · анимируется только transform и opacity.

   Накладка обязана читаться как ещё одно помещение музея, а не как системное
   окно поверх сайта. Отсюда всё оформление: тёплая темнота, латунный волосок
   по краям, засечный шрифт на табличках, витрина на подставке.

   Содержание:
     1. Кнопка входа в плане этажа (.cmp-open)
     2. Накладка целиком (.cmp) и её комната
     3. Шапка зала
     4. Переключатели работ и картотека
     5. Витрины: стекло, живой сайт, снимок
     6. Таблички под витринами
     7. Латунная планка между витринами
     8. Свет по палитре зала, откуда родом работа
     9. Пока накладка открыта — музей за ней замирает
    10. Планшет и телефон
    11. Кому движение мешает
   ========================================================================== */


/* ==========================================================================
   1. КНОПКА ВХОДА
   Стоит в плане этажа — там, где посетитель уже ищет, куда идти дальше.
   Плавающей её сделать нельзя: левый низ кадра занят кнопкой «написать»,
   правый — музейной этикеткой работы.
   ========================================================================== */

.cmp-open {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 56px;                    /* палец попадает: правило 44 px с запасом */
  margin-left: 14px;
  padding: 8px 16px;
  border: 1px solid var(--hair-brass, rgba(201, 165, 107, .38));
  background: linear-gradient(180deg, rgba(255, 205, 150, .07), rgba(255, 205, 150, .02));
  text-align: left;
  transition: border-color var(--t-fast, .22s) ease,
              background-color var(--t-fast, .22s) ease,
              transform var(--t-fast, .22s) ease;
}

.cmp-open:hover {
  border-color: var(--warm);
  background: rgba(255, 205, 150, .12);
}

.cmp-open:active { transform: translateY(1px); }

/* Значок — две витрины рядом, ровно то, что кнопка обещает. Рисуется двумя
   пустыми элементами, без картинки: лишний файл ради двух прямоугольников
   не стоит запроса в сеть. */
.cmp-open__glyph {
  flex: 0 0 auto;
  display: flex;
  gap: 3px;
  width: 26px;
  height: 18px;
}

.cmp-open__glyph i {
  flex: 1 1 0;
  border: 1px solid rgba(201, 165, 107, .75);
  background: linear-gradient(180deg, rgba(255, 215, 160, .22), rgba(255, 215, 160, .04));
}

.cmp-open:hover .cmp-open__glyph i:first-child { border-color: var(--warm); }

.cmp-open__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cmp-open__cap { line-height: 1.2; }

.cmp-open__name {
  font-family: var(--serif);
  font-size: 14px;
  color: #f4e8d6;
  white-space: nowrap;
}

/* Запасное положение: если плана этажа на странице нет, кнопка становится
   отдельной и садится над кнопкой «написать», а не пропадает вовсе. */
.cmp-open--loose {
  position: fixed;
  z-index: 40;
  left: clamp(14px, 2.4vw, 30px);
  bottom: calc(var(--plan-h) + 76px);
  background: linear-gradient(180deg, #14110f, #0b0908);
}


/* ==========================================================================
   2. НАКЛАДКА
   ========================================================================== */

.cmp {
  position: fixed;
  inset: 0;
  z-index: 120;                        /* выше плана (30) и окна работы (100) */
  display: flex;
  /* Свои переменные объявлены здесь, а не в :root: base.css единственный,
     кому в :root писать разрешено. */
  --cmp-wall:  #14110f;
  --cmp-deep:  #0b0908;
  --cmp-hair:  rgba(226, 208, 182, .20);
  --cmp-brass: rgba(201, 165, 107, .38);
  --split: 50%;
  --gw: 480px;
  --gh: 300px;
  --s: .333;
}

.cmp[hidden] { display: none; }

/* Задник. Он не полупрозрачная плёнка, а стена нового помещения: сквозь
   полупрозрачный вариант просвечивали витрины музея с их подписями, и зал
   сравнения читался как окошко поверх страницы, а не как отдельная комната.
   Та же ошибка уже разбиралась в museum.css (вуаль зала вместо прозрачности
   всей сцены) — повторять её здесь незачем. Наверху оставлен тёплый отсвет
   лампы: он и даёт ощущение помещения, а не чёрного прямоугольника. */
.cmp__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 205, 150, .09), transparent 64%),
    linear-gradient(180deg, #100d0c 0%, #08070a 62%, #07060a 100%);
}

.cmp__room {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(12px, 1.6vh, 22px) var(--edge, 24px) clamp(12px, 1.8vh, 24px);
  gap: clamp(10px, 1.4vh, 18px);
}


/* ==========================================================================
   3. ШАПКА ЗАЛА
   ========================================================================== */

.cmp__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  padding-bottom: clamp(8px, 1.2vh, 14px);
  border-bottom: 1px solid var(--cmp-brass);
}

.cmp__head-text { flex: 0 0 auto; min-width: 0; }

.cmp__cap { line-height: 1.4; }

.cmp__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(17px, 1.9vw, 26px);
  line-height: 1.2;
  color: #f7ecdb;
}

/* Пояснение к планке. Тянуть разделитель — не самоочевидное движение,
   и без строки о нём его просто не найдут. */
.cmp__hint {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.5;
  /* Не --paper-faint: серый текст на тёмном — то, чего в музее быть не должно.
     Здесь контраст к фону выше 7:1. */
  color: var(--paper-dim);
}

.cmp__close {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid var(--cmp-brass);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f6ecdc;
  transition: border-color var(--t-fast, .22s) ease, background-color var(--t-fast, .22s) ease;
}

.cmp__close:hover { border-color: var(--warm); background: rgba(255, 205, 150, .1); }


/* ==========================================================================
   4. ПЕРЕКЛЮЧАТЕЛИ РАБОТ
   Стоят между витринами — левый прижат к середине справа, правый слева, —
   и встречаются на кнопке обмена. Так видно, что это одна пара, а не два
   отдельных списка.
   ========================================================================== */

.cmp__picks {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(8px, 1.2vw, 18px);
}

.cmp__pick {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}

.cmp__pick[data-pick="left"]  { justify-content: flex-end; }
.cmp__pick[data-pick="right"] { justify-content: flex-start; }

.cmp__arrow {
  flex: 0 0 auto;
  width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cmp-hair);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1;
  color: #f0e3d0;
  transition: border-color var(--t-fast, .22s) ease, background-color var(--t-fast, .22s) ease;
}

.cmp__arrow:hover { border-color: var(--warm); background: rgba(255, 205, 150, .1); }

.cmp__name {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 44px;
  display: grid;
  gap: 1px;
  align-content: center;
  padding: 6px 14px;
  border: 1px solid var(--cmp-brass);
  background: linear-gradient(180deg, rgba(255, 205, 150, .06), rgba(255, 205, 150, .015));
  text-align: left;
  transition: border-color var(--t-fast, .22s) ease, background-color var(--t-fast, .22s) ease;
}

.cmp__name:hover { border-color: var(--warm); background: rgba(255, 205, 150, .11); }

.cmp__name-side { line-height: 1.2; }

.cmp__name-title {
  font-family: var(--serif);
  font-size: clamp(14px, 1.3vw, 17px);
  color: #f7ecdb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmp__swap {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cmp-brass);
  border-radius: 999px;
  font-size: 19px;
  color: var(--warm);
  transition: border-color var(--t-fast, .22s) ease,
              background-color var(--t-fast, .22s) ease,
              transform var(--t-mid, .42s) var(--ease-cam);
}

.cmp__swap:hover {
  border-color: var(--warm);
  background: rgba(255, 205, 150, .12);
  transform: rotate(180deg);
}

/* --- картотека: весь список работ ---------------------------------------- */

.cmp__list {
  position: absolute;
  top: calc(100% + 6px);
  z-index: 3;
  width: min(340px, 78vw);
  max-height: min(52vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;         /* докрутили список — музей под ним стоит */
  list-style: none;
  border: 1px solid var(--cmp-brass);
  background: linear-gradient(180deg, #17130f, #0c0a09);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .62);
}

.cmp__pick[data-pick="left"]  .cmp__list { right: 0; }
.cmp__pick[data-pick="right"] .cmp__list { left: 0; }

.cmp__list[hidden] { display: none; }

.cmp__opt {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(226, 208, 182, .1);
  cursor: pointer;
  transition: background-color var(--t-fast, .22s) ease;
}

.cmp__opt:last-child { border-bottom: 0; }
.cmp__opt:hover, .cmp__opt:focus-visible { background: rgba(255, 205, 150, .1); }

.cmp__opt-num { color: var(--brass-dim); }

.cmp__opt-text { display: grid; gap: 1px; min-width: 0; }

.cmp__opt-name {
  font-family: var(--serif);
  font-size: 15px;
  color: #f2e6d4;
}

.cmp__opt-client { font-size: 12px; color: var(--paper-dim); }

/* Что уже стоит в этой витрине — с латунной меткой слева. */
.cmp__opt.is-mine {
  background: rgba(255, 205, 150, .09);
  box-shadow: inset 3px 0 0 var(--brass);
}

/* Что стоит в соседней. Метка нужна, чтобы выбор не выглядел случайным:
   такую работу можно взять, и тогда витрины меняются местами. */
.cmp__opt.is-other .cmp__opt-name { color: var(--paper-dim); }
.cmp__opt.is-other .cmp__opt-num::after {
  content: " · во второй витрине";
  letter-spacing: .06em;
}


/* ==========================================================================
   5. ВИТРИНЫ
   ========================================================================== */

.cmp__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  /* Доля левой витрины меняется перетаскиванием планки; compare.js пишет
     сюда --split. minmax(0, …) обязателен: без него содержимое колонки
     не даёт ей сжиматься, и планка упирается в место. */
  grid-template-columns: minmax(0, var(--split)) 16px minmax(0, 1fr);
}

/* Витрина и её табличка стоят одной группой по центру полосы. Раньше стекло
   центрировалось само по себе, а табличка была прибита к низу — между ними
   зияла пустая полоса в треть экрана, и подпись переставала читаться как
   подпись к этой витрине. */
.cmp__side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 0 clamp(6px, 1vw, 16px);
}

/* 0 0 auto, а не 0 1 auto: подставке нельзя сжиматься ниже своего стекла.
   При «1» она сжималась, стекло вылезало за её край и ложилось поверх
   таблички — на телефоне подпись работы просто пропадала под витриной. */
.cmp__stand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Витрина: полоска адреса, стекло, подставка. Та же связка, что в залах
   музея, — человек уже видел её десять раз и узнаёт без объяснений. */
.cmp__frame {
  width: var(--gw);
  max-width: 100%;
  border: 1px solid var(--glass-edge, rgba(226, 208, 182, .26));
  background: var(--cmp-deep);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  transition: box-shadow var(--t-mid, .42s) ease, border-color var(--t-mid, .42s) ease;
}

.cmp__side.is-live .cmp__frame {
  border-color: var(--glass-edge-lit, rgba(255, 226, 186, .68));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6),
              0 0 0 1px var(--cmp-glow, rgba(255, 206, 152, .22));
}

.cmp__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(226, 208, 182, .14);
  background: linear-gradient(180deg, #1a1512, #100d0b);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: rgba(239, 227, 210, .72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmp__dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass-dim);
  transition: background-color var(--t-mid, .42s) ease;
}

.cmp__side.is-live .cmp__dot { background: #8fd18f; }   /* сайт работает */

.cmp__glass {
  position: relative;
  width: 100%;
  height: var(--gh);
  overflow: hidden;
  background: #0b0908;
}

.cmp__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: opacity var(--t-slow, .7s) ease;
}

.cmp__shot[hidden] { display: none; }

/* Живая страница. Рамка настоящей ширины 1440×900 — той, под которую сайт
   нарисован, — и ужата до ширины витрины. Ужимать надо именно так: поставить
   iframe шириной с витрину значит включить внутри чужого сайта мобильную
   вёрстку, и обе работы покажут одинаковые узкие колонки. Сравнивать будет
   нечего — а весь зал именно про разницу. */
.cmp__live {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 900px;
  /* без этого правило `iframe { max-width: 100% }` из base.css ужимает рамку
     до ширины витрины и ломает масштаб */
  max-width: none;
  transform-origin: top left;
  transform: scale(var(--s));
  pointer-events: none;                 /* клики по чужому сайту не ловим */
  opacity: 0;
  background: #0b0908;
  transition: opacity var(--t-slow, .7s) ease;
}

.cmp__side.is-live .cmp__live { opacity: 1; }
.cmp__side.is-live .cmp__shot { opacity: 0; }

/* Пока планку тащат — живые страницы прячутся, витрины показывают снимки.
   Это не экономия, а единственный способ двигать планку плавно: ширина
   витрины меняется каждый кадр, а вместе с ней масштаб чужой страницы,
   и браузер заново растрирует её целиком. Снимок тянется даром. */
.cmp.is-dragging .cmp__live { opacity: 0; }
.cmp.is-dragging .cmp__shot { opacity: 1; }

/* Надпись «сайт просыпается» — только пока рамка грузится. */
.cmp__wait {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 5px 12px;
  border: 1px solid var(--cmp-brass);
  background: rgba(10, 8, 7, .82);
  opacity: 0;
  transition: opacity var(--t-mid, .42s) ease;
  pointer-events: none;
}

.cmp__side.is-waiting .cmp__wait { opacity: 1; }
.cmp__side.is-live .cmp__wait { opacity: 0; }

.cmp__plinth {
  height: 10px;
  border-top: 1px solid rgba(226, 208, 182, .14);
  background: linear-gradient(180deg, #1a1512, #0a0807);
}


/* ==========================================================================
   6. ТАБЛИЧКА ПОД ВИТРИНОЙ
   Отвечает на три вопроса разом: чей сайт, как называется работа, в чём суть.
   Без неё сравнение превращается в две картинки без подписей.
   ========================================================================== */

/* Ширина таблички равна ширине витрины и центрируется вместе с ней: подпись
   в музее висит под своим предметом, а не растянута на всю стену. */
.cmp__plate {
  flex: 0 0 auto;
  width: var(--gw);
  max-width: 100%;
  margin: clamp(8px, 1.2vh, 14px) auto 0;
  display: grid;
  gap: 3px;
  padding: clamp(10px, 1.4vh, 16px) 2px 0;
  border-top: 1px solid rgba(226, 208, 182, .12);
}

.cmp__plate-client { line-height: 1.3; }

.cmp__plate-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.25;
  color: #f7ecdb;
}

.cmp__plate-gist {
  font-size: 13px;
  line-height: 1.5;
  color: var(--paper-dim);
  /* Две строки: третья съедала бы высоту стекла, а суть работы в одну фразу
     и написана. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cmp__plate-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.cmp__plate-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--warm);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast, .22s) ease;
}

.cmp__plate-link:hover { border-bottom-color: var(--warm); }

/* Кнопка переноса живой страницы нужна только на телефоне: там работает
   одна витрина из двух. На большом экране работают обе, и кнопка врала бы. */
.cmp__wake { display: none; }


/* ==========================================================================
   7. ЛАТУННАЯ ПЛАНКА МЕЖДУ ВИТРИНАМИ
   ========================================================================== */

.cmp__split {
  position: relative;
  display: grid;
  place-items: center;
  cursor: col-resize;
  touch-action: none;                   /* палец тянет планку, а не страницу */
}

.cmp__split::before {
  content: "";
  position: absolute;
  top: 4%;
  bottom: 4%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent, rgba(201, 165, 107, .55) 18%, rgba(201, 165, 107, .55) 82%, transparent);
}

/* Хват: короткая латунная планка посередине. Она и подсказывает, что за
   разделитель можно взяться, — без неё линию принимают за рамку. */
.cmp__split-grip {
  position: relative;
  width: 8px;
  height: 62px;
  border: 1px solid rgba(201, 165, 107, .7);
  background: linear-gradient(180deg, rgba(255, 215, 160, .3), rgba(255, 215, 160, .08));
  transition: background-color var(--t-fast, .22s) ease,
              border-color var(--t-fast, .22s) ease,
              transform var(--t-fast, .22s) ease;
}

.cmp__split:hover .cmp__split-grip,
.cmp__split:focus-visible .cmp__split-grip {
  border-color: var(--warm);
  transform: scaleY(1.14);
}

.cmp.is-dragging .cmp__split-grip { transform: scaleY(1.2); }
.cmp.is-dragging { cursor: col-resize; }
.cmp.is-dragging * { user-select: none; }


/* ==========================================================================
   8. СВЕТ ПО ПАЛИТРЕ ЗАЛА
   Две работы под одним стеклом светятся по-разному — каждая своим залом.
   Это и есть та разница подходов, ради которой сюда пришли; одинаковый
   белый свет на обеих витринах её бы стёр.
   ========================================================================== */

/* Значения взяты из --hall-glow тех же залов (museum.css, раздел 12) —
   один в один, чтобы витрина в зале сравнения светилась ровно тем светом,
   под которым посетитель видел эту работу минуту назад. Незнакомая палитра
   ничего не ломает: --cmp-glow остаётся тёплым по умолчанию. */
.cmp__side[data-palette="rose"]     { --cmp-glow: rgba(255, 150, 150, .24); }
.cmp__side[data-palette="steel"]    { --cmp-glow: rgba(158,  46,  70, .28); }
.cmp__side[data-palette="graphite"] { --cmp-glow: rgba(196, 220, 240, .24); }
.cmp__side[data-palette="wool"]     { --cmp-glow: rgba(226, 132,  46, .32); }
.cmp__side[data-palette="night"]    { --cmp-glow: rgba( 58,  84, 224, .28); }
.cmp__side[data-palette="phase"]    { --cmp-glow: rgba( 96, 214, 138, .24); }
.cmp__side[data-palette="pearl"]    { --cmp-glow: rgba(255, 226, 210, .26); }
.cmp__side[data-palette="angel"]    { --cmp-glow: rgba(174, 184, 214, .25); }


/* ==========================================================================
   9. ПОКА НАКЛАДКА ОТКРЫТА — МУЗЕЙ ЗА НЕЙ ЗАМИРАЕТ
   ========================================================================== */

/* Витрины музея за шторой продолжали бы работать: это до восьми чужих сайтов,
   которых никто не видит, и каждый занимает поток. Гасим их ровно так же, как
   это делает сам музей на дальних залах, — убираем из отрисовки. Страница при
   этом НЕ перезагружается: браузер просто перестаёт её рисовать, а вместе с
   отрисовкой замирает и её собственная анимация. Накладка закрылась — правило
   снимается, и всё возвращается с того же места.

   !important здесь вынужденное и намеренное: museum.js прячет свои рамки
   строчным стилем (frame.style.display), перебить его иначе нечем. */
body.is-comparing .case__live { display: none !important; }

/* Прокрутку музея замораживает класс is-viewing: его понимает motion.js
   (останавливает Lenis) и museum.css (overflow: hidden на body). Своего
   класса для этого не заводим — двух правил на одно поведение быть не должно. */


/* ==========================================================================
   10. ПЛАНШЕТ И ТЕЛЕФОН
   ========================================================================== */

@media (max-width: 1023px) {
  .cmp__hint { display: none; }         /* места под пояснение уже нет */
  .cmp__title { font-size: 18px; }
}

/* Телефон. Две живые витрины рядом здесь невозможны по двум причинам сразу:
   на 390 px каждая получила бы 180 px ширины — по такому кадру нельзя судить
   ни об одной работе, — и два чужих сайта в памяти телефона дают ту самую
   заторможенность, от которой музей лечили.

   Поэтому витрины встают друг под друга и листаются вертикально, а живая
   страница работает ровно одна: та, у которой нажали «показать вживую».
   Вторая стоит снимком СВОЕГО первого экрана — это тот же кадр того же
   сайта, не подмена содержимого. Так честнее, чем показать две живые
   странички размером с марку. */
@media (max-width: 767px) {
  .cmp__room {
    padding: 12px 14px 14px;
    gap: 10px;
    overflow: hidden;
  }

  .cmp__head {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding-bottom: 8px;
  }

  .cmp__head-text { flex: 1 1 auto; }
  .cmp__title { font-size: 17px; }
  .cmp__close { padding: 10px 12px; font-size: 10.5px; }

  /* Переключатели — столбиком: две пары стрелок в одну строку на 390 px
     не помещаются, а сжатые стрелки перестают быть кнопками. */
  .cmp__picks {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .cmp__pick[data-pick="left"],
  .cmp__pick[data-pick="right"] { justify-content: stretch; }

  .cmp__name { flex: 1 1 auto; }
  .cmp__list { width: min(100%, 92vw); left: 0; right: auto; }
  .cmp__pick[data-pick="left"] .cmp__list { right: auto; left: 0; }

  .cmp__swap {
    justify-self: center;
    width: 44px;
    height: 44px;
  }

  /* Витрины столбиком, зал листается пальцем.

     Сетки здесь нет намеренно. Сетка с заданной высотой делит эту высоту
     между строками, а не даёт строке вырасти по содержимому: витрине
     доставалась половина экрана, и её стекло ложилось поверх подписи
     соседней работы — подпись пропадала. Обычный поток блоков считает
     высоту по содержимому, а лишнее уходит в прокрутку. */
  .cmp__stage {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 8px;
  }

  .cmp__side + .cmp__side { margin-top: 20px; }

  .cmp__split { display: none; }        /* тянуть нечего: витрины не рядом */

  /* На телефоне витрина — простая стопка: полоска адреса, стекло, табличка.
     Гибкая раскладка с центрированием тут только мешает: она пытается
     уместить содержимое в высоту строки сетки и центрирует то, что не
     влезло, — витрина уезжает вверх, а подпись под неё. Обычный поток
     блоков считает высоту по содержимому и не спорит с прокруткой. */
  .cmp__side {
    display: block;
    padding: 0;
  }

  .cmp__stand { display: block; }

  .cmp__plate { padding-top: 10px; margin-top: 10px; }

  .cmp__plate-gist { -webkit-line-clamp: 3; line-clamp: 3; }

  /* Кнопка переноса живой страницы: на телефоне она и есть переключатель
     «какую работу смотреть вживую». */
  .cmp__wake {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--cmp-brass);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #f6ecdc;
  }

  .cmp__wake[disabled] {
    color: var(--warm);
    border-color: rgba(201, 165, 107, .22);
    cursor: default;
  }
}


/* ==========================================================================
   11. КОМУ ДВИЖЕНИЕ МЕШАЕТ
   Зал открывается и закрывается без выезда, вся остальная работа сохраняется.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cmp__shot,
  .cmp__live,
  .cmp__wait,
  .cmp__frame { transition: none; }
  .cmp__swap:hover { transform: none; }
}