/* МТК 41 · стили сцен. Хром (навигация, языки, ⚙, полосы) рисует ядро —
 * здесь только содержимое сцен.
 *
 * Два правила из README ядра, которые здесь соблюдаются буквально:
 *  - верстаться от полос ядра (--kiosk-safe-*), а не от хардкодных отступов:
 *    оператор двигает хром из настроек, а в раскладке «стрелки по бокам»
 *    занятой оказывается ширина, а не высота;
 *  - размеры контента — через --content-scale, контролов — через --ui-scale,
 *    иначе два регулятора и режим слабовидящих не сработают. */

/* ---------- брендовые начертания ----------
   Объявлять ОБЯЗАНО само приложение: ни kiosk.css, ни kiosk-core.css их не
   несут, а base.css прототипов сюда не подключён. Без @font-face и канва, и
   DOM молча падают в Georgia / monospace / системный шрифт — и увидеть это на
   дев-машине нельзя, там те же OTF стоят в системе и всё выглядит верно.
   Замерено до правки: объявленных семейств в документе ноль, шрифтовых
   запросов за весь сеанс ноль. Зона 41 оставалась последней из пятёрки без
   этого блока; у 39, 40 и 42 он такой же. Найдено встречным ревью
   координатора. */
@font-face {
  font-family: "Nolde";
  font-weight: 400; font-display: swap;
  src: url("../assets/shared/fonts/brand/nolde/nolde.otf") format("opentype");
}
@font-face {
  font-family: "20 Kopeek";
  font-weight: 400; font-display: swap;
  src: url("../assets/shared/fonts/brand/kopeek/20-kopeek-book.otf") format("opentype");
}
@font-face {
  font-family: "20 Kopeek";
  font-weight: 600; font-display: swap;
  src: url("../assets/shared/fonts/brand/kopeek/20-kopeek-demibold.otf") format("opentype");
}
@font-face {
  font-family: "21 Cent";
  font-weight: 400; font-display: swap;
  src: url("../assets/shared/fonts/brand/cent/21Cent.woff") format("woff");
}

/* ---------- токены палитры ----------
   Каркас карточки (assets/shared/card) красит пиктограммы и подписи
   var(--brass) / var(--window) / var(--paper) БЕЗ запасного значения — токены
   объявляет продукт. kiosk.css несёт только каналы (--brass-rgb и т.п.), и до
   26.09 у 41 этих трёх не было вовсе: пиктограммы паспорта и строка типа
   молча наследовали белый, подписи — тоже. У 39, 40, 42 и в макете 41 они
   объявлены, отсюда и «пиктограммы были цветные» в макете, но не в продукте.

   Цвета судьбы — светофор по слову dvn 26.09 (яркий, вне брендбука, решение
   его): сохранился — зелёный, перенесён — жёлтый, снесён — красный, судьба
   неизвестна — нейтральный серый. Пара в JS — STATUS_COLOR в scenes/shared.js,
   менять ОБЕ. */
:root {
  --paper: #F7F9EF;
  --brass: #D2B773;
  --window: #9DA3A8;
  --m41-st-extant: #3FA34D;
  --m41-st-relocated: #E8C547;
  --m41-st-demolished: #C8323A;
  --m41-st-unknown: #9DA3A8;
}

.m41-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--kiosk-safe-top) var(--kiosk-safe-right)
           var(--kiosk-safe-bottom) var(--kiosk-safe-left);
  box-sizing: border-box;
  overflow: hidden;
}

/* ─── Шапка сцены ─────────────────────────────────────────────────────── */

.m41-head {
  flex: 0 0 auto;
  padding: 0 0 calc(24px * var(--content-scale, 1));
}

.m41-head__title {
  margin: 0;
  font-family: "Nolde", "20 Kopeek", Georgia, serif;
  font-size: calc(64px * var(--content-scale, 1));
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--paper, #F7F9EF);
}

.m41-head__sub {
  margin: calc(14px * var(--content-scale, 1)) 0 0;
  max-width: 62ch;
  font-family: "21 Cent", system-ui, sans-serif;
  font-size: calc(30px * var(--content-scale, 1));
  line-height: 1.4;
  color: rgba(247, 249, 239, 0.72);
}

/* НИЗКОЕ ОКНО: сцена отдаёт СВОЙ хром столу.
 *
 * Кит резервирует сверху и снизу фиксированные пиксели — 190 и 294 на любой
 * высоте окна. На штатных 1080 сцене остаётся 596, на окне 720 — только 236.
 * Своя шапка (96) и свой ряд навигации (72) берут из них ещё 168, и столу
 * доставалось 68 px: карта выглядела горизонтальной полосой.
 *
 * Именно это, а не расчёт нижнего предела зума, и отличает нас от соседей: у
 * МТК 40 своей шапки внутри сцены нет, поэтому те же 236 уходят у него под
 * контент целиком. Проверено замером: предел (0.0483) лежит ВТРОЕ ниже
 * фактического зума (0.8) и на картинку не влияет вовсе.
 *
 * Порог 900 px выбран так, чтобы на штатной высоте киоска не менялось ничего:
 * правило включается только там, где стол иначе выродится. */
@media (max-height: 900px) {
  .m41-head { padding-bottom: calc(6px * var(--content-scale, 1)); }
  .m41-head__title { font-size: calc(28px * var(--content-scale, 1)); }
  .m41-head__sub { display: none; }
  .m41-nav { padding-top: calc(4px * var(--ui-scale, 1)); }
}

/* ─── Иконостас ───────────────────────────────────────────────────────── */

.m41-canon__grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(calc(var(--m41-tile-min, 160px) * var(--content-scale, 1)), 1fr));
  grid-auto-rows: calc(var(--m41-tile-min, 160px) * 0.62 * var(--content-scale, 1));
  gap: calc(6px * var(--content-scale, 1));
  /* Полоса прокрутки обязана быть видна В ПОКОЕ (слово dvn 25.09) — и толще
     китовой. Обход «scrollbar-color/width: auto» снят 26.09: ядро 1.29.2 само
     не ставит стандартные свойства там, где есть ::-webkit-scrollbar. */
  --scrollbar-w: calc(30px * var(--ui-scale, 1));
}
.m41-canon__grid::-webkit-scrollbar-track {
  background: rgba(247, 249, 239, 0.14);
}
.m41-canon__grid::-webkit-scrollbar-thumb {
  background: rgba(210, 183, 115, 0.92);
}

.m41-tile {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid rgba(210, 183, 115, 0.16);
  border-radius: 2px;
  background: #2a3238 center / cover no-repeat;
  cursor: pointer;
  overflow: hidden;
  /* Тач-экран: hover не бывает, отклик только на активное касание. */
  touch-action: manipulation;
}

.m41-tile:active { border-color: var(--brass, #D2B773); }

.m41-tile.is-empty {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #333c43, #262d33);
}

.m41-tile__mono {
  font-family: "Nolde", Georgia, serif;
  font-size: calc(34px * var(--content-scale, 1));
  color: rgba(210, 183, 115, 0.4);
}

.m41-tile__pip {
  position: absolute;
  top: calc(8px * var(--content-scale, 1));
  right: calc(8px * var(--content-scale, 1));
  width: calc(16px * var(--content-scale, 1));
  height: calc(16px * var(--content-scale, 1));
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.m41-tile__pip[data-status="extant"]     { background: var(--m41-st-extant); }
.m41-tile__pip[data-status="demolished"] { background: var(--m41-st-demolished); }
.m41-tile__pip[data-status="relocated"]  { background: var(--m41-st-relocated); }
.m41-tile__pip[data-status="unknown"]    { background: var(--m41-st-unknown); }
.m41-canon.no-status .m41-tile__pip { display: none; }

.m41-tile__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: calc(18px * var(--content-scale, 1)) calc(10px * var(--content-scale, 1))
           calc(6px * var(--content-scale, 1));
  background: linear-gradient(to top, rgba(12, 16, 19, 0.92), transparent);
  text-align: left;
}

.m41-tile__city {
  font-family: "Nolde", Georgia, serif;
  font-size: calc(22px * var(--content-scale, 1));
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;   /* редкое одно слово шире плитки (Ходмезёвашархей) */
  color: var(--paper, #F7F9EF);
}

.m41-tile__city.is-long { font-size: calc(17px * var(--content-scale, 1)); }

.m41-tile__year {
  font-family: "20 Kopeek", "Courier New", monospace;
  font-size: calc(18px * var(--content-scale, 1));
  color: rgba(210, 183, 115, 0.85);
}
.m41-canon.no-year .m41-tile__year { display: none; }

/* ─── Карточка памятника ──────────────────────────────────────────────── */

/* z-index 20 — как у пилота 42: хром ядра (30..70) сознательно остаётся
   выше карточки, посетитель не теряет навигацию и языки. Поэтому карточка
   обязана держаться ВНУТРИ полос ядра, иначе кнопка «закрыть» окажется под
   переключателем языков, а фотография — под нав-баром. */
.m41-card {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: var(--kiosk-safe-top) var(--kiosk-safe-right)
           var(--kiosk-safe-bottom) var(--kiosk-safe-left);
  box-sizing: border-box;
  background: rgba(10, 13, 16, 0.72);
  backdrop-filter: blur(2px);
}
.m41-card[hidden] { display: none; }

/* Сама карточка — ОБЩИЙ КАРКАС пятёрки (assets/shared/card/card-frame.css,
   подключён в index.html с меткой версии каркаса): кегли под 4K, шрифты
   брендбука, паспорт, снимок целиком, технические строки. Здесь — только
   своё: место карточки внутри полос ядра и строки авторов.

   Карточка живёт ВНУТРИ полос хрома (оверлей выше даёт им отступ); её
   max-height: 100% — от этой области, и если содержимое выше, прокручивается
   сама карточка, а не страница (у 283 × ru/en/zh в 4K такого нет — замер
   при переносе 26.09). */

/* Авторы: роль строкой-подписью над именами (малая пиктограмма + слово),
   имя с датами жизни не рвётся. У 41 на памятник часто двое-трое авторов
   разных ролей — без подписи архитектор читался бы скульптором. */
.m41cc-line { display: block; }
.m41cc-line + .m41cc-line { margin-top: calc(16px * var(--cc-s)); }
.m41cc-role {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--cc-s));
  margin-bottom: calc(2px * var(--cc-s));
  font-family: "20 Kopeek", "Noto Sans SC", monospace;
  font-size: calc(24px * var(--cc-s));
  color: var(--window);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.m41cc-roleicon { width: calc(28px * var(--cc-s)); height: calc(28px * var(--cc-s)); color: var(--window); }
.m41cc-name { white-space: nowrap; }
.m41cc-dates {
  font-family: "20 Kopeek", "Noto Sans SC", monospace;
  font-size: calc(28px * var(--cc-s));
  color: rgba(247, 249, 239, 0.62);
  white-space: nowrap;
}

/* ─── Кто лепил Ленина ────────────────────────────────────────────────── */

/* Кегли — под 4K при --content-scale 1, в шкале карточки (даты 26–28,
   текст 28–30, имя 40). Прежние 12–21 px на 3840×2160 читались «очень
   мелко» (dvn 29.09). */

.m41-authors__cols {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: calc(24px * var(--content-scale, 1));
  overflow: auto;
  align-items: flex-start;
}

.m41-author {
  flex: 0 0 calc(var(--m41-col-w, 600px) * var(--content-scale, 1));
  max-height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(24px * var(--content-scale, 1));
  box-sizing: border-box;
  background: rgba(27, 33, 38, 0.72);
  border: 1px solid rgba(210, 183, 115, 0.18);
  border-radius: 3px;
}
.m41-author.is-anon { border-style: dashed; opacity: 0.85; }

.m41-author__name {
  font-family: "Nolde", Georgia, serif;
  font-size: calc(40px * var(--content-scale, 1));
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--paper, #F7F9EF);
}
.m41-author__years {
  font-family: "20 Kopeek", "Courier New", monospace;
  font-size: calc(26px * var(--content-scale, 1));
  color: rgba(210, 183, 115, 0.8);
}
.m41-author__bio {
  margin-top: calc(10px * var(--content-scale, 1));
  font-size: calc(28px * var(--content-scale, 1));
  line-height: 1.4;
  color: rgba(247, 249, 239, 0.62);
}
.m41-author__count {
  margin-top: calc(12px * var(--content-scale, 1));
  font-family: "20 Kopeek", "Courier New", monospace;
  font-size: calc(24px * var(--content-scale, 1));
  color: rgba(247, 249, 239, 0.45);
}

.m41-author__works {
  margin-top: calc(16px * var(--content-scale, 1));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--content-scale, 1));
}

.m41-work {
  /* Не сжиматься в прокручиваемом списке: min-height (тач-минимум) ниже
     миниатюры, и без запрета flex ужимал строки поверх друг друга. */
  flex: 0 0 auto;
  display: flex;
  gap: calc(16px * var(--content-scale, 1));
  align-items: center;
  min-height: var(--touch-min, 44px);
  padding: calc(8px * var(--content-scale, 1));
  text-align: left;
  background: rgba(43, 50, 56, 0.6);
  border: 0;
  border-left: 6px solid rgba(157, 163, 166, 0.5);
  border-radius: 2px;
  cursor: pointer;
  touch-action: manipulation;
}
.m41-work:active { background: rgba(210, 183, 115, 0.22); }
.m41-work[data-status="extant"]     { border-left-color: var(--m41-st-extant); }
.m41-work[data-status="relocated"]  { border-left-color: var(--m41-st-relocated); }
.m41-work[data-status="demolished"] { border-left-color: var(--m41-st-demolished); }
.m41-work[data-status="unknown"]    { border-left-color: var(--m41-st-unknown); }

.m41-work__thumb {
  flex: 0 0 auto;
  width: calc(96px * var(--content-scale, 1));
  height: calc(96px * var(--content-scale, 1));
  background: #2a3238 center / cover no-repeat;
  border-radius: 2px;
}
.m41-work__thumb.is-empty {
  display: grid;
  place-items: center;
  font-family: "Nolde", Georgia, serif;
  font-size: calc(44px * var(--content-scale, 1));
  color: rgba(210, 183, 115, 0.4);
}

.m41-work__text { display: flex; flex-direction: column; min-width: 0; }
.m41-work__year {
  font-family: "20 Kopeek", "Courier New", monospace;
  font-size: calc(26px * var(--content-scale, 1));
  color: rgba(210, 183, 115, 0.85);
}
.m41-work__title {
  font-size: calc(30px * var(--content-scale, 1));
  line-height: 1.2;
  color: rgba(247, 249, 239, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Аттрактор простоя ───────────────────────────────────────────────
   Снимок карточного тира на ВСЮ высоту свободной области (слово dvn
   25.09: в своём размере, 1100×825 на 3840×2160, он был «микроскопический»
   — треть ширины экрана). Цена известна и принята: тир 1100 px на 4K это
   апскейл ~×2, снимок мягче; у 9 памятников есть тир 1800 px. Фон — та же
   миниатюра, растянутая и размытая.

   Раскладка — колонка в потоке (кадр, затем подпись), а не абсолютные
   смещения: первая версия вычитала обе полосы ядра плюс запас и на
   невысоком экране схлопывала кадр в 186 px. Колонка честно делит
   свободную область при любой высоте панели. */

.m41-standby {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  padding: var(--kiosk-safe-top) var(--kiosk-safe-right)
           var(--kiosk-safe-bottom) var(--kiosk-safe-left);
  box-sizing: border-box;
  overflow: hidden;
  background: #0d1114;
}

/* Подложка кроет весь экран, включая полосы: она фон, а не контент. */
.m41-standby__bg {
  position: absolute;
  inset: calc(-4% - 20px);
  background: center / cover no-repeat;
  filter: blur(34px) saturate(0.6) brightness(0.42);
  transform: scale(1.06);
}

.m41-standby__frame {
  position: relative;
  margin: 0;
  /* Кадр забирает всю высоту, что осталась от подписи, — и её задаёт
     снимку (height: 100% ниже). Ширина от пропорций снимка. */
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  max-width: 92%;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(210, 183, 115, 0.28);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 1.1s ease, transform 1.1s ease;
}
.m41-standby.is-in .m41-standby__frame { opacity: 1; transform: scale(1); }

/* Высота — от кадра, ширина — от пропорций. Очень широкий снимок упрётся в
   92 % ширины; contain не даёт ему сплющиться, он встанет полосами. */
.m41-standby__frame img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.m41-standby__cap {
  position: relative;
  flex: 0 0 auto;
  text-align: center;
  opacity: 0;
  transition: opacity 1.1s ease 0.15s;
}
.m41-standby.is-in .m41-standby__cap { opacity: 1; }

.m41-standby__city {
  font-family: "Nolde", Georgia, serif;
  font-size: calc(58px * var(--content-scale, 1));
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--paper, #F7F9EF);
  text-shadow: 0 4px 26px rgba(0, 0, 0, 0.85);
}
.m41-standby__year {
  margin-top: calc(6px * var(--content-scale, 1));
  font-family: "20 Kopeek", "Courier New", monospace;
  font-size: calc(26px * var(--content-scale, 1));
  color: var(--brass, #D2B773);
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.9);
}

/* ─── Шкала ───────────────────────────────────────────────────────────── */

.m41-scale__stage { flex: 1 1 auto; min-height: 0; position: relative; }
/* ТАЧ-ПОВЕДЕНИЕ КАНВ ЗДЕСЬ НЕ ЗАДАЁТСЯ — его держит кит. Свои копии стояли у
   четырёх канв; значение совпадало, вреда не было, но два места для одного
   правила — это два места, где оно может разойтись.

   Понадобится сцене другое поведение — с ядра 1.22.2 это ЗНАЧЕНИЕ, а не
   борьба с каскадом: `.m41-…__canvas { --kiosk-canvas-touch: pan-y }`. */
.m41-scale__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Органы сцены: размеры от --ui-scale и --touch-*, а не от --content-scale —
   это контролы, их растит регулятор интерфейса и режим слабовидящих. */
.m41-nav {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(6px * var(--ui-scale, 1));
  padding-top: calc(8px * var(--ui-scale, 1));
}
.m41-nav__row { display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: calc(6px * var(--ui-scale, 1)); }

.m41-nav button {
  min-height: var(--touch-min, 44px);
  padding: 0 calc(14px * var(--ui-scale, 1));
  font-family: "20 Kopeek", "Courier New", monospace;
  font-size: var(--type-min-ui, 15px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper, #F7F9EF);
  background: rgba(67, 80, 89, 0.55);
  border: 1px solid rgba(210, 183, 115, 0.45);
  border-radius: 2px;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}
.m41-nav__row--sub button {
  text-transform: none;
  border-color: rgba(210, 183, 115, 0.28);
}
.m41-nav button:active { background: rgba(210, 183, 115, 0.35); }
.m41-nav button.is-on {
  background: rgba(210, 183, 115, 0.9);
  border-color: var(--brass, #D2B773);
  color: #1c2226;
}
.m41-nav__n { opacity: 0.6; margin-left: 0.45em; font-size: 0.85em; }
.m41-nav button.is-on .m41-nav__n { opacity: 0.75; }

/* ─── Карта ───────────────────────────────────────────────────────────── */
.m41-map__stage { flex: 1 1 auto; min-height: 0; position: relative; }
.m41-map__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ─── Хронология ──────────────────────────────────────────────────────── */
.m41-timeline__stage { flex: 1 1 auto; min-height: 0; position: relative; }
.m41-timeline__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ─── Три шкалы ───────────────────────────────────────────────────────── */
.m41-stacked__stage { flex: 1 1 auto; min-height: 0; position: relative; }
.m41-stacked__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ─── Призыв к жесту: развязка со своими контролами ────────────────────
   Кит ставит подсказку по центру снизу, отсчитывая от --chrome-bottom, то
   есть от бара навигации ЯДРА. Но у «Масштаба» и «Силуэтов» под столом стоит
   ещё и свой ряд чипов, а он растёт в режиме слабовидящих — подсказка легла
   бы на него (грабля: «проверяй перекрытия со СВОИМИ контролами, не только с
   хромом ядра»).

   Развязка структурная: подсказка живёт внутри стола, а внутри стола ядерного
   хрома под ним уже нет — он вынесен в padding самой сцены. Обнуляем токен на
   столе, и подсказка встаёт в 12 px над его нижней кромкой, то есть ровно над
   рядом чипов при любом --ui-scale. Подобранных чисел здесь нет: стол сам
   ужимается, когда ряд растёт. */
.m41-map__stage,
.m41-timeline__stage,
.m41-scale__stage,
.m41-stacked__stage {
  --chrome-bottom: 0px;
}

/* Заглушка «ничего не найдено» — DOM-сцены. Канвовые рисуют её сами. */
.m41-empty { padding: calc(40px * var(--content-scale, 1)); text-align: center; }
.m41-empty__t { font-size: calc(26px * var(--content-scale, 1)); font-weight: 600;
  color: var(--paper, #F7F9EF); margin: 0 0 8px; }
.m41-empty__h { font-size: calc(15px * var(--content-scale, 1));
  color: var(--dim, #9DA3A6); margin: 0; }