/* МТК 42 · стили сцен киоск-приложения.
 *
 * Правила, которым здесь следуем (kiosk README, «жёсткие правила»):
 *  - размеры интерактива только из переменных кита (--touch-*, --edge-safe),
 *    тогда режим слабовидящих укрупняет интерфейс сам;
 *  - свои кегли масштабируются через calc(N * var(--a11y-scale));
 *  - верстаемся от занятых зон хрома: --chrome-top/-bottom отдаёт ядро
 *    с 1.6.0 (расчёт из конфига + фактический замер DOM);
 *  - скроллируемым контейнерам — класс .kiosk-scroll (видимая полоса).
 */

@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");
}

:root {
  --paper: #f7f9ef;
  --brass: #d2b773;
  --brass-soft: rgba(210, 183, 115, 0.55);
  --red: #a02128;
  --graphite: #435059;
  --graphite-deep: #2b3338;
  --night: #0c1012;
  --window: #9DA3A8;
  --font-display: "Nolde", Georgia, serif;
  --font-body: "21 Cent", Georgia, serif;
  --font-mono: "20 Kopeek", "Courier New", monospace;

  /* Кегли сцен нормированы на 1920 и удваиваются к 3840; a11y множит сверху. */
  --m42-h1:    clamp(34px, 2.4vw, 68px);
  --m42-sub:   clamp(15px, 0.9vw, 30px);
  --m42-body:  clamp(16px, 0.95vw, 32px);
  --m42-label: clamp(var(--type-min-label), 0.75vw, 30px);
  --m42-ui:    clamp(var(--type-min-ui), 0.95vw, 38px);
  --m42-label-col: clamp(240px, 12.5vw, 480px);

  /* Обработка портретов — одной переменной на все сцены (картотека, маятник,
   * раскрытая карточка). Монохром — базовый вид экспозиции, но это решение
   * куратора: переключается из ⚙ (группа «Портреты»), поэтому здесь только
   * значения, а не «зашитый» grayscale по месту. */
  --m42-photo-filter: grayscale(1) contrast(1.05);
}
/* Цвет в обычном режиме — общая настройка app.photoColor */
:root.m42-photo-color { --m42-photo-filter: contrast(1.05); }
/* Слабовидящие: контраст выше; цвет — отдельная настройка app.photoColorA11y */
:root.a11y { --m42-photo-filter: grayscale(1) contrast(1.35); }
:root.a11y.m42-a11y-color { --m42-photo-filter: contrast(1.35); }

/* Сцена занимает слой целиком и уважает полосы хрома ядра. */
.m42-archive, .m42-timeline, .m42-map, .m42-pend {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  color: var(--paper);
  font-family: var(--font-body);
  padding: var(--chrome-top, var(--kiosk-safe-top)) var(--edge-safe)
           var(--chrome-bottom, var(--kiosk-safe-bottom));
  gap: 18px;
  overflow: hidden;
}

/* ─── Общая шапка сцены ─── */
.m42-head { flex: 0 0 auto; pointer-events: none; }
.m42-head--over {
  position: absolute;
  top: var(--chrome-top, var(--kiosk-safe-top));
  left: var(--edge-safe);
  z-index: 3;
}
.m42-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--m42-h1) * var(--a11y-scale));
  line-height: 1.02;
  letter-spacing: 0.01em;
}
.m42-head__sub {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: calc(var(--m42-sub) * var(--a11y-scale));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 249, 239, 0.62);
}

/* ─── Призыв к жесту (KioskHint) ───
 * Своего `bottom` здесь больше нет. С ядра 1.12.0 кит считает базу сам
 * (--kiosk-hint-base: обход навигации, языков, шестерёнки, с поправкой на то,
 * сколько контейнер уже отбил) и складывает её со слагаемым сцены. Заявка от
 * 2026-08-04 закрыта полностью, вместе с ней ушёл и запас 24 px: он заводился
 * под недооценку --chrome-bottom на 6 px, исправленную в 1.9.0, а обычный
 * зазор 12 px × --ui-scale уже сидит в базе. Проверено замером, не на глаз.
 *
 * Остаётся ровно то, о чём кит знать не может: к нижней кромке прибиты СВОИ
 * чипы сцены (.m42-filters--bottom), и они растут от неё вверх. Без этой
 * добавки подсказка легла бы на собственные фильтры (возврат №3: замер 1080p —
 * хинт 690…792 поверх чипов 712…808). Высоту чипов сцена измеряет и публикует
 * в --m42-hint-lift сама (в CSS высоту соседа не узнать); у сцен без нижних
 * чипов переменная равна нулю, и подсказка садится на голую базу кита.
 *
 * Итоговый зазор до чипов: 12 px в обычном режиме и 15 px в режиме
 * слабовидящих — 12 × --ui-scale, где в a11y ui-scale равен 1.25. Обе
 * величины подтверждены живым прогоном на 3840×2160 (координатор, 09.08),
 * в том числе на китайском и при максимальном кегле фильтров. */
.m42-map .kiosk-hint,
.m42-pend .kiosk-hint {
  --kiosk-hint-lift: var(--m42-hint-lift, 0px);
}

/* Места между шапкой и чипами не осталось — гасим подсказку, а не заголовок.
 * visibility, а не display: бокс должен остаться измеримым, иначе следующий
 * замер увидит нули и класс залипнет. Специфичность (0,3,0) перебивает
 * .kiosk-hint.is-on (0,2,0) — подсказка не всплывёт по таймеру. */
.m42-map.is-hint-cramped .kiosk-hint { visibility: hidden; }

/* ─── Фильтры-чипы ─── */
.m42-filters {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--touch-gap);
  z-index: 3;
}
.m42-filters--bottom {
  position: absolute;
  left: var(--edge-safe);
  right: var(--edge-safe);
  bottom: var(--chrome-bottom, var(--kiosk-safe-bottom));
}
.m42-filters__row { display: flex; flex-wrap: wrap; gap: var(--touch-gap); }
.m42-filter {
  min-height: var(--touch-primary);
  min-width: var(--touch-min);
  padding: 0 28px;
  border: 1px solid rgba(210, 183, 115, 0.32);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  color: rgba(247, 249, 239, 0.82);
  font-family: var(--font-mono);
  font-size: calc(var(--m42-ui) * var(--a11y-scale));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}
.m42-filter.is-active { border-color: var(--brass); background: var(--brass); color: var(--night); }

/* ─── Картотека ─── */
.m42-archive__grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(220px, 11.46vw, 440px), 1fr));
  grid-auto-rows: min-content;
  /* Расстояние между карточками — из сервис-панели (см. archive.applySettings). */
  gap: var(--m42-grid-gap-y, 20px) var(--m42-grid-gap-x, 20px);
  padding-right: 8px;
  align-content: start;
}
.m42-archive.is-a11y .m42-archive__grid {
  grid-template-columns: repeat(auto-fill, minmax(clamp(320px, 16vw, 620px), 1fr));
}
.m42-archive__counter {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: calc(var(--m42-label) * var(--a11y-scale));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 249, 239, 0.55);
}
.m42-map__empty {
  position: absolute;
  left: 50%; top: 46%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 2;
  font-size: calc(var(--m42-body) * var(--a11y-scale));
  color: rgba(247, 249, 239, 0.72);
  text-align: center;
  pointer-events: none;
}
.m42-map__empty[hidden] { display: none; }

.m42-timeline__empty {
  position: absolute;
  left: 0; top: 40%;
  font-size: calc(var(--m42-body) * var(--a11y-scale));
  color: rgba(247, 249, 239, 0.6);
}
.m42-archive__empty {
  grid-column: 1 / -1;
  font-size: calc(var(--m42-body) * var(--a11y-scale));
  color: rgba(247, 249, 239, 0.6);
}

.m42-tile {
  display: grid;
  /* Ряды строго по содержимому: с 1fr портрет растягивался на всю
   * высоту колонки и плитка разъезжалась. */
  grid-template-rows: auto auto auto auto;
  align-self: start;
  gap: 10px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(210, 183, 115, 0.22);
  border-left: 3px solid var(--window);
  border-radius: 8px;
  background: rgba(12, 16, 18, 0.55);
  color: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  min-height: var(--touch-primary);
}
.m42-tile.is-leaders    { border-left-color: var(--red); }
.m42-tile.is-politician { border-left-color: var(--red); }
.m42-tile.is-researcher { border-left-color: var(--brass); }
.m42-tile.is-writers    { border-left-color: var(--window); }
.m42-tile__tag {
  font-family: var(--font-mono);
  font-size: calc(var(--m42-label) * var(--a11y-scale));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(210, 183, 115, 0.85);
}
.m42-tile__portrait {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(67, 80, 89, 0.35);
}
.m42-tile__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--m42-photo-filter);
}
.m42-tile__initials {
  font-family: var(--font-display);
  font-size: calc(84px * var(--a11y-scale));
  color: rgba(247, 249, 239, 0.22);
}
.m42-tile__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--m42-body) * var(--a11y-scale));
  line-height: 1.16;
}
.m42-tile__meta {
  margin: 4px 0 0;
  font-size: calc(var(--m42-label) * var(--a11y-scale));
  line-height: 1.35;
  color: rgba(247, 249, 239, 0.55);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.m42-tile__tone-track {
  display: block; position: relative;
  height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--red), rgba(157, 163, 168, 0.5), var(--brass));
}
.m42-tile__tone-marker {
  position: absolute; top: 50%;
  width: 11px; height: 11px; margin-left: -5px;
  transform: translateY(-50%);
  border-radius: 999px; background: var(--paper);
}

/* ─── Таймлайн ─── */
.m42-timeline__counter {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: calc(var(--m42-label) * var(--a11y-scale));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247, 249, 239, 0.55);
}
.m42-timeline__axis {
  flex: 0 0 auto;
  position: relative;
  height: calc(34px * var(--a11y-scale));
  padding-left: var(--m42-label-col);
  border-bottom: 1px dashed rgba(210, 183, 115, 0.22);
}
.m42-timeline__ticks { position: relative; height: 100%; }
.m42-timeline__tick {
  position: absolute; top: 0; padding-left: 6px;
  font-family: var(--font-mono);
  font-size: calc(var(--tl-axis-size, var(--m42-label)) * var(--a11y-scale));
  font-weight: var(--tl-axis-weight, 400);
  letter-spacing: 0.12em;
  color: rgba(210, 183, 115, var(--tl-axis-opacity, 0.55));
  border-left: 1px solid rgba(210, 183, 115, 0.16);
}
.m42-timeline__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.m42-timeline__inner { position: relative; padding-left: var(--m42-label-col); }
.m42-timeline__collapse {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(160,33,40,0.10), rgba(160,33,40,0.28), rgba(160,33,40,0.10));
  pointer-events: none;
}
.m42-timeline__region {
  position: relative;
  margin: 26px 0 8px calc(var(--m42-label-col) * -1);
  padding-top: 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--tl-region-size, 22px) * var(--a11y-scale));
  font-weight: var(--tl-region-weight, 400);
  color: rgba(210, 183, 115, var(--tl-region-opacity, 1));
  border-top: 1px solid rgba(210, 183, 115, 0.28);
}
.m42-timeline__row {
  position: relative;
  height: calc(var(--tl-row-height, 44px) * var(--a11y-scale));
}
.m42-timeline__label {
  position: absolute;
  left: calc(var(--m42-label-col) * -1);
  top: 0; height: 100%;
  width: calc(var(--m42-label-col) - 14px);
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.m42-timeline__name {
  font-size: calc(var(--tl-museum-size, var(--m42-label)) * var(--a11y-scale));
  font-weight: var(--tl-museum-weight, 400);
  line-height: 1.15;
  color: rgba(247, 249, 239, var(--tl-museum-opacity, 0.92));
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.m42-timeline__city {
  font-family: var(--font-mono);
  font-size: calc(var(--tl-city-size, 9px) * var(--a11y-scale));
  font-weight: var(--tl-city-weight, 400);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 249, 239, var(--tl-city-opacity, 0.5));
}
.m42-timeline__bar {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  height: calc(var(--tl-bar-height, 24px) * var(--a11y-scale));
  min-height: 14px;
  border: 0; border-radius: 4px;
  background: var(--brass);
  cursor: pointer;
  touch-action: manipulation;
  overflow: hidden;
}
/* Тач-стандарт п.1: полоса тонкая по дизайну (24 px базово), но нажимается
 * вся СТРОКА — на ней data-id и тот же обработчик. Реальная зона = высота
 * строки (88 px на 3840), полоса — визуальная метка внутри неё. */
.m42-timeline__bar.is-transformed { background: var(--window); }
.m42-timeline__bar.is-closed      { background: var(--red); }
.m42-timeline__bar.is-private {
  background: repeating-linear-gradient(105deg, var(--brass) 0 8px, rgba(210,183,115,0.4) 8px 16px);
}
.m42-timeline__bar.is-notable { box-shadow: inset 0 0 0 2px rgba(247, 249, 239, 0.5); }
.m42-timeline__year {
  padding-left: 8px;
  font-family: var(--font-mono);
  font-size: calc(var(--tl-barlabel-size, 10px) * var(--a11y-scale));
  font-weight: var(--tl-barlabel-weight, 400);
  color: rgba(12, 16, 18, var(--tl-barlabel-opacity, 0.9));
}

/* ─── Карта ─── */
.m42-map { padding: 0; }
.m42-map__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
.m42-map__canvas:active { cursor: grabbing; }

/* ─── Маятник ─── */
/* Маятник в потоке: шапка → чипы категорий → ось → лента. Раньше ось и
 * лента стояли на абсолютных отступах с подобранными числами — при смене
 * кегля или появлении чипов они наезжали друг на друга. */
.m42-pend { padding-left: 0; padding-right: 0; }
.m42-pend > .m42-head { padding: 0 var(--edge-safe); }
.m42-pend__axis {
  flex: 0 0 auto;
  margin: 12px var(--edge-safe) 0;
  display: flex; justify-content: space-between;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: calc(var(--pend-axis-size, var(--m42-label)) * var(--a11y-scale));
  font-weight: var(--pend-axis-weight, 400);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247, 249, 239, var(--pend-axis-opacity, 0.72));
  border-bottom: 1px solid rgba(210, 183, 115, 0.18);
  padding-bottom: 10px;
}
.m42-pend__scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  /* Вертикальные поля: на краях прокрутки крайние портреты не должны
   * упираться в кромку — палец туда не достаёт (тач-стандарт п.2). */
  padding: var(--edge-safe) var(--edge-safe) var(--edge-safe-bottom);
}
.m42-pend__inner { position: relative; }
.m42-pend__band {
  position: absolute; left: 0; right: 0;
  background: rgba(67, 80, 89, 0.16);
  border-top: 1px solid rgba(210, 183, 115, 0.10);
  pointer-events: none;
}
.m42-pend__band.is-compressed { background: rgba(160, 33, 40, 0.10); }
.m42-pend__epoch {
  position: absolute; left: 8px;
  font-family: var(--font-display);
  font-size: calc(var(--pend-epoch-size, 28px) * var(--a11y-scale));
  font-weight: var(--pend-epoch-weight, 400);
  color: rgba(247, 249, 239, var(--pend-epoch-opacity, 0.22));
  pointer-events: none;
  text-transform: uppercase;
}
.m42-pend__epoch-years {
  display: block;
  font-family: var(--font-mono);
  font-size: max(calc(var(--type-min-label) * var(--a11y-scale)),
              calc(var(--m42-label) * var(--a11y-scale) * 0.8));
  letter-spacing: 0.3em;
  margin-top: 4px;
  color: rgba(247, 249, 239, 0.16);
}
.m42-pend__ruler { position: absolute; top: 0; right: 4px; width: 96px; pointer-events: none; }
.m42-pend__tick {
  position: absolute; right: 0;
  font-family: var(--font-mono);
  font-size: calc(var(--pend-year-size, var(--m42-label)) * var(--a11y-scale));
  font-weight: var(--pend-year-weight, 400);
  letter-spacing: 0.12em;
  color: rgba(210, 183, 115, var(--pend-year-opacity, 0.65));
  transform: translateY(-50%);
}
.m42-pend__tick::before {
  content: ""; display: inline-block;
  width: 16px; margin-right: 8px;
  border-top: 1px solid rgba(210, 183, 115, 0.35);
  vertical-align: middle;
}
.m42-pend__zero {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(247, 249, 239, 0.12);
  pointer-events: none;
}
.m42-pend__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.m42-pend__path {
  fill: none;
  stroke: var(--brass);
  stroke-width: var(--pend-stroke, 6);
  stroke-opacity: var(--pend-stroke-opacity, 0.62);
  stroke-linecap: round;
}
.m42-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 2px solid var(--brass-soft);
  border-radius: 999px;
  background: rgba(12, 16, 18, 0.9);
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  display: grid; place-items: center;
}
.m42-dot.is-leaders    { border-color: var(--red); }
.m42-dot.is-politician { border-color: rgba(160, 33, 40, 0.65); }
.m42-dot.is-researcher { border-color: var(--brass); }
.m42-dot.is-writers    { border-color: rgba(157, 163, 168, 0.7); }
.m42-dot img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--m42-photo-filter);
}
.m42-dot__initials {
  font-family: var(--font-display);
  font-size: calc(38px * var(--a11y-scale));
  color: rgba(247, 249, 239, 0.55);
}

/* ─── Оверлей карточки (общий для всех сцен) ─── */
.m42-detail {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center;
  padding: var(--edge-safe);
  background: rgba(8, 12, 14, 0.74);
  backdrop-filter: blur(6px);
}
.m42-detail[hidden] { display: none; }
/* Сама карточка (персона и музей) — общий каркас assets/shared/card; добавки
 * 42 — card.css. Прежние .m42-detail__panel / .m42-card__* / .m42-mus__* сняты. */

.a11y .m42-detail { background: #000; backdrop-filter: none; }
.a11y .m42-timeline__region { color: var(--a11y-accent, #FFD24A); }

/* ─── Настройки схемы v1.2, приходящие из applySettings() ─── */
.m42-map .m42-head__title {
  font-size: calc(var(--map-title-size, var(--m42-h1)) * var(--a11y-scale));
  font-weight: var(--map-title-weight, 400);
  color: rgba(247, 249, 239, var(--map-title-opacity, 1));
}
.m42-map .m42-filter {
  font-size: calc(var(--map-filter-size, var(--m42-ui)) * var(--a11y-scale));
  font-weight: var(--map-filter-weight, 400);
  color: rgba(247, 249, 239, var(--map-filter-opacity, 0.82));
}
.m42-map .m42-filter.is-active { color: var(--night); }

/* Посетительский фильтр категорий на маятнике (класс Б). */
.m42-pend__cats { margin: 0 var(--edge-safe); }

/* «Больше воздуха» — второй дизайн карточки героя (из прототипов). */
[data-card="air"] .cc-card { --cc-pad: calc(72px * var(--cc-s)); }
[data-card="air"] .cc-desc p,
[data-card="air"] .m42cc-quote__text { line-height: 1.7; }
[data-card="air"] .m42-tile { padding: 24px 22px 20px; gap: 14px; }