/* МТК-12 — стили приложения (app-18). Только токены design-core и переменные ядра; сырой hex — запрещён
 * вне ограды предметного слоя (канон §1.1 design-core 1.4.6).
 * Числа — под 3840 (README ядра). Осколки до доски art — серые: ступени телосерого и окна. */

.m12-dial {
  position: absolute; inset: 0;
  padding: var(--chrome-top) var(--chrome-right) var(--chrome-bottom) var(--chrome-left);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  color: var(--paper);
}

/* --- левая колонка: заголовок, период, год, события года --- */
.m12-read {
  align-self: stretch; min-height: 0; box-sizing: border-box;
  padding: calc(96px * var(--content-scale)) calc(96px * var(--content-scale)) 0;
  display: flex; flex-direction: column; gap: calc(24px * var(--content-scale));
}
.m12-read__title {
  margin: 0;
  font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; text-transform: uppercase;
  font-size: calc(104px * var(--content-scale)); line-height: 1.05;
}
/* экран музея, не сайт (decisions §24, числа — §25 по версии подрядчика, px 4K): подписи лагерей, осей, периодов и
 * подзаголовок ≥ 48, имена партий ≥ 40 (у нас 46 — как новый витраж art), кнопки ≥ 40, подсказки ≥ 32 */
.m12-read__sub, .m12-read__period, .m12-read__note, .m12-read__src {
  margin: 0; font-family: var(--font-caption); color: var(--telegrey);
  font-size: max(var(--type-min-label), calc(48px * var(--content-scale)));
}
.m12-read__period { margin-top: calc(48px * var(--content-scale)); }
.m12-read__year {
  margin: 0; font-family: var(--font-caption); font-variant-numeric: tabular-nums;
  font-size: calc(240px * var(--content-scale)); line-height: 1;
}
/* события года — столбцом; в 1905–1906 их десяток с лишним — видимый скролл ядра (канон §3), только вертикаль */
.m12-read__events {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; --kiosk-scroll-touch: pan-y;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--touch-gap);
  padding-right: calc(var(--scrollbar-w) + var(--touch-gap)); padding-bottom: var(--touch-gap);
}
.m12-ev { flex: 0 0 auto; }
.m12-ev--easter { border-style: dashed; }
.m12-ev--more { border-color: transparent; color: var(--telegrey); text-decoration: underline; text-underline-offset: .25em; }
.m12-ev__mark { display: block; font-family: var(--font-caption); font-size: max(var(--type-min-label), calc(40px * var(--content-scale))); color: var(--telegrey); letter-spacing: .06em; text-transform: uppercase; }
.m12-ev--coalition { border-left: calc(12px * var(--ui-scale)) solid var(--blue-grey); }
.m12-ev {
  min-height: var(--touch-primary); padding: 0 calc(40px * var(--ui-scale));
  border: 4px solid var(--telegrey); border-radius: 0; background: transparent; color: var(--paper);
  font-family: var(--font-text); font-size: max(var(--type-min-ui), calc(40px * var(--content-scale)));
  text-align: left; cursor: pointer;
}
.m12-ev:active { border-color: var(--brass); }

/* === ПРЕДМЕТНЫЙ ЦВЕТ: начало ===
   Цвета 12 партий — design-core §1.1, предметный слой. Одно объявление на приложение: другие файлы берут
   только var(--party-<id>). ПРЕДВАРИТЕЛЬНО: значения — art/palette.md (зона art, 19.10.2026, расчёт art/palette.py:
   к графиту ≥ 3:1, попарно ΔE_OK ≥ 0.098, до латуни ≥ 0.12, до --red ≥ 0.22). Палитра — предварительное
   решение МТК-12 (decisions §13, §15): в канон не заявляется, пока дизайн не утверждён. Фракции (rsdrp-b/-m) — цветом родителя, Бунд вне циферблата.
   Цветом — заливка стекла и линии; буквы им не красим (§1.1 п.3). */
:root {
  --party-sr-maximalists:       #FAB0BD;
  --party-rsdrp:                #C78E8D;
  --party-srs:                  #FA885E;
  --party-ns-trudoviki:         #A0E37C;
  --party-radical:              #4DD1A9;
  --party-cadets:               #92DFDE;
  --party-progressists:         #1AABBE;
  --party-moderate-progressive: #4CC6FA;
  --party-progressive-economic: #4BA1F5;
  --party-octobrists:           #C4C7F9;
  --party-law-order:            #A792D0;
  --party-black-hundreds:       #E486CC;
}
/* === ПРЕДМЕТНЫЙ ЦВЕТ: конец === */

/* Какой партии какой цвет — по id из данных (data-party); значений здесь нет, только ссылки на ограду. */
[data-party="sr-maximalists"]       { --party-c: var(--party-sr-maximalists); }
[data-party="rsdrp"]                { --party-c: var(--party-rsdrp); }
[data-party="srs"]                  { --party-c: var(--party-srs); }
[data-party="ns-trudoviki"]         { --party-c: var(--party-ns-trudoviki); }
[data-party="radical"]              { --party-c: var(--party-radical); }
[data-party="cadets"]               { --party-c: var(--party-cadets); }
[data-party="progressists"]         { --party-c: var(--party-progressists); }
[data-party="moderate-progressive"] { --party-c: var(--party-moderate-progressive); }
[data-party="progressive-economic"] { --party-c: var(--party-progressive-economic); }
[data-party="octobrists"]           { --party-c: var(--party-octobrists); }
[data-party="law-order"]            { --party-c: var(--party-law-order); }
[data-party="black-hundreds"]       { --party-c: var(--party-black-hundreds); }

/* --- циферблат --- */
.m12-stage { height: 100%; aspect-ratio: 1 / 1; position: relative; justify-self: center; }
.m12-svg { display: block; width: 100%; height: 100%; overflow: visible; touch-action: none; user-select: none; }

.m12-shard { stroke: none; transition: fill .4s ease, fill-opacity .4s ease; cursor: pointer; }
.m12-shard__matte { fill: url(#m12-matte); display: none; pointer-events: none; }
.m12-shard-g.is-on.is-illegal .m12-shard__matte { display: inline; }
/* полулегальная — тот же узор реже видно: стекло менее прозрачно, точки слабее */
.m12-shard-g.is-on.is-semi .m12-shard { fill-opacity: .8; }
.m12-shard-g.is-on.is-semi .m12-shard__matte { display: inline; opacity: .5; }
.m12-matte__dot { fill: rgba(var(--paper-rgb), .45); }
/* ранний вид витража (как app-5, decisions §23): нелегальность и полулегальность — только прозрачностью, узора нет */
.m12-dial[data-look="early"] .m12-shard-g .m12-shard__matte { display: none; }
.m12-shard__dash { display: none; fill: none; pointer-events: none; }
/* новый вид витража (art VITRAZH_NEW, decisions §26): стекло плотно (0.96), без мата; нет партии — тёмное стекло без
 * имени; нелегальная — пунктир бумагой 6 px внутри осколка; полулегальная — без отметки; имя тёмным, без ореола */
.m12-dial[data-look="new"] .m12-shard-g .m12-shard__matte { display: none; }
.m12-dial[data-look="new"] .m12-shard-g.is-on .m12-shard { fill-opacity: .96; }
.m12-dial[data-look="new"] .m12-shard-g.is-off .m12-shard { fill: rgba(var(--amber-black-rgb), .45); }
.m12-dial[data-look="new"] .m12-shard-g.is-on.is-illegal .m12-shard__dash { display: inline;
  stroke: var(--paper); stroke-width: calc(var(--m12-px, 1) * 6px); stroke-dasharray: 18 16; }
.m12-dial[data-look="new"] .m12-label-g.is-off .m12-shard__label { display: none; }
.m12-dial[data-look="new"] .m12-label-g.is-split .m12-shard__label { display: inline; }
.m12-dial[data-look="new"] .m12-label-g.is-split.is-cramped .m12-shard__label { display: none; }
.m12-dial[data-look="new"] .m12-shard__label { fill: var(--amber-black); stroke: none; }
.m12-dial[data-look="new"] .m12-crack__frame { stroke-width: calc(var(--m12-px, 1) * 30px); }
.m12-dial[data-look="new"] .m12-crack { stroke-width: calc(var(--m12-px, 1) * 14px); }
.m12-tick--min { stroke: var(--brass); stroke-width: calc(var(--m12-px, 1) * 6px); stroke-linecap: butt; }
.m12-tick--min.is-major { stroke: var(--brass); stroke-width: calc(var(--m12-px, 1) * 14px); }
.m12-periodarc { fill: none; stroke: var(--brass); stroke-width: calc(var(--m12-px, 1) * 28px); pointer-events: none; }
.m12-camp { font-family: var(--font-caption); font-size: calc(var(--m12-px, 1) * 56px); fill: var(--paper);
  letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.m12-light { pointer-events: none; }

/* оправа — краской, не просветом (пробы art): «свинец» с латунной кромкой с одной стороны или латунная линия */
.m12-frame { pointer-events: none; fill: none; stroke-linejoin: round; }
.m12-frame__edge { stroke: var(--brass); stroke-width: 16; }
.m12-frame__lead { stroke: var(--amber-black); stroke-width: 12; }
.m12-dial[data-frame="brass"] .m12-frame__edge { display: none; }
.m12-dial[data-frame="brass"] .m12-frame__lead { stroke: var(--brass); stroke-width: 10; }
.m12-shard-g.is-on .m12-shard { fill: var(--telegrey); }
/* цвета партий — настройка сцены «Цвета партий» (data-colors на корне сцены) */
.m12-dial[data-colors="on"] .m12-shard-g.is-on .m12-shard { fill: var(--party-c, var(--telegrey)); }
/* нелегальная — «матовое стекло» (доска art): приглушение площади только прозрачностью (§1.1 п.6) */
.m12-shard-g.is-on.is-illegal .m12-shard { fill-opacity: .55; }
.m12-shard-g.is-off .m12-shard { fill: rgba(var(--paper-rgb), .06); }
.m12-shard-g.is-unknown .m12-shard { fill: rgba(var(--window-rgb), .35); }
/* подпись на стекле (предварительно, decisions §13, §15): бумага с ореолом --amber-black 10 px экрана; --m12-px — единиц viewBox на px */
.m12-shard__label {
  font-family: var(--font-caption); font-size: calc(var(--m12-px, 1) * 46px); pointer-events: none;
  fill: var(--paper); stroke: var(--amber-black); stroke-width: calc(var(--m12-px, 1) * 10px); stroke-linejoin: round; paint-order: stroke;
}

/* трещина раскола — «свинец в золотой оправе» (протокол; пробы art: читается во всех светах) */
.m12-crack__frame { fill: none; stroke: var(--brass); stroke-width: 20; stroke-linejoin: round; pointer-events: none; }
.m12-crack { fill: none; stroke: var(--amber-black); stroke-width: 9; stroke-linejoin: round; pointer-events: none; }
.m12-crack__label {
  font-family: var(--font-caption); font-size: calc(var(--m12-px, 1) * 46px); pointer-events: none;
  fill: var(--paper); stroke: var(--amber-black); stroke-width: calc(var(--m12-px, 1) * 10px); stroke-linejoin: round; paint-order: stroke;
}
.m12-label-g.is-split .m12-shard__label { display: none; }

/* вуаль перехода режима (§6а: через тёмное, уход — разгон, приход — торможение) */
.m12-veil { fill: var(--amber-black); opacity: 0; pointer-events: none; transition: opacity .4s cubic-bezier(0, 0, .2, 1); }
.m12-veil.is-dark { opacity: 1; transition: opacity .4s cubic-bezier(.4, 0, 1, 1); }
.m12-veil.is-instant { transition: none; }

.m12-tick { stroke: var(--telegrey); stroke-width: 6; stroke-linecap: round; }
.m12-tick.is-quarter { stroke: var(--paper); stroke-width: 12; }
.m12-label-g.is-cramped .m12-shard__label, .m12-crack__label.is-cramped { display: none; }
/* выбор осколка (предварительно): поднят — сдвиг наружу и тень, контур бумагой ≥ 14 px экрана */
.m12-pick { pointer-events: none; filter: drop-shadow(0 10px 14px rgba(var(--amber-black-rgb), .55)); }
.m12-pick__outline { fill: none; stroke: var(--paper); stroke-width: calc(var(--m12-px, 1) * 16px); stroke-linejoin: round; }
/* коалиция (предварительно): --blue-grey контуром ≥ 10 px по чёрному ободу; имя — в списке года той же меткой */
.m12-coalition { fill: none; stroke: var(--blue-grey); stroke-width: calc(var(--m12-px, 1) * 12px); stroke-linecap: butt; pointer-events: none; }
/* минутная: подписан только год под стрелкой (≥ 48 px экрана), остальные годы — риски (§24: мелкое с главной убрать) */
.m12-year { font-family: var(--font-caption); font-size: calc(var(--m12-px, 1) * 48px); fill: var(--telegrey); display: none; }
.m12-year.is-active { fill: var(--paper); font-size: calc(var(--m12-px, 1) * 56px); display: inline; }
.m12-period { font-family: var(--font-caption); font-size: calc(var(--m12-px, 1) * 48px); fill: var(--telegrey); }
.m12-period.is-active { fill: var(--paper); font-size: calc(var(--m12-px, 1) * 56px); }

.m12-point { cursor: pointer; }
.m12-point__disc { fill: var(--paper); stroke: var(--amber-black); stroke-width: 6; }
.m12-point__bolt { fill: var(--graphite); pointer-events: none; }

.m12-hand { transform-origin: 0 0; pointer-events: none; }
.m12-hand.is-snap { transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.m12-hand__bar { stroke: var(--paper); stroke-linecap: round; }
.m12-hand__grip { fill: rgba(var(--graphite-rgb), .85); stroke: var(--paper); stroke-width: 8; pointer-events: all; cursor: grab; }
.m12-hand__dot { fill: var(--paper); pointer-events: none; }
.m12-hand.is-drag .m12-hand__grip { stroke-width: 14; }
.m12-hub { fill: var(--paper); stroke: var(--graphite); stroke-width: 10; pointer-events: none; }

/* зонд размера ручки: --touch-primary в пикселях экрана (с --ui-scale и a11y) */
.m12-probe { position: absolute; width: var(--touch-primary); height: 0; visibility: hidden; pointer-events: none; }

/* --- карточка поверх циферблата (заглушка до текстов content) --- */
.m12-sheet {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--amber-black-rgb), .62);
}
.m12-sheet[hidden] { display: none; }
.m12-sheet__panel {
  position: relative; box-sizing: border-box;
  width: min(calc(1800px * var(--content-scale)), 80%); max-height: 80%; overflow: auto;
  padding: calc(80px * var(--content-scale)) calc(96px * var(--content-scale));
  background: var(--telegrey); color: var(--text-on-light);
}
.m12-sheet__close {
  position: absolute; top: calc(32px * var(--ui-scale)); right: calc(32px * var(--ui-scale));
  min-width: var(--touch-primary); min-height: var(--touch-primary); padding: 0 calc(32px * var(--ui-scale));
  border: 4px solid var(--text-on-light); background: transparent; color: var(--text-on-light);
  font-family: var(--font-caption); font-size: max(var(--type-min-ui), calc(40px * var(--content-scale))); cursor: pointer;
}
.m12-sheet__kicker, .m12-sheet__date, .m12-sheet__meta {
  margin: 0; font-family: var(--font-caption); font-size: max(var(--type-min-label), calc(36px * var(--content-scale)));
}
.m12-sheet__title {
  margin: calc(16px * var(--content-scale)) 0 calc(32px * var(--content-scale));
  padding-right: calc(320px * var(--ui-scale));
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .03em;
  font-size: calc(80px * var(--content-scale)); line-height: 1.1;
}
.m12-sheet__text { font-family: var(--font-text); font-size: calc(44px * var(--content-scale)); line-height: 1.45; }
.m12-sheet__text p { margin: 0 0 .8em; }
.m12-sheet__meta { margin-top: calc(32px * var(--content-scale)); }

.m12-down { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-text); font-size: 48px; color: var(--paper); }

/* ===== демо (наряд п.8): статья, карточка партии, снимки, кольцо лет, визуализации ===== */
.m12-read__more { display: flex; gap: var(--touch-gap); flex-wrap: wrap; }
.m12-more {
  min-height: var(--touch-primary); padding: 0 calc(40px * var(--ui-scale));
  border: 4px solid var(--paper); background: transparent; color: var(--paper);
  font-family: var(--font-caption); font-size: max(var(--type-min-ui), calc(40px * var(--content-scale)));
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.m12-more:active { border-color: var(--brass); color: var(--brass); }

/* показ (?demo=1, decisions §22–23): вне композиции — значок в левом нижнем углу (поле ядра под колонкой событий),
 * зрительно мелко и приглушённо; меню раскрывается касанием значка. Тач-цели — канон (--touch-primary), латуни нет:
 * выбранная лишь подчёркнута (dvn 21.10: «совсем незаметно и маленькими»). */
.m12-demo { position: absolute; left: 0; bottom: 0; z-index: 50; display: flex; flex-direction: column; align-items: flex-start; }   /* над призывом ядра (z 40) */
.m12-demo__toggle {
  width: var(--touch-primary); height: var(--touch-primary); padding: 0; border: 0; background: transparent;
  color: var(--text-muted); opacity: .35; cursor: pointer; display: grid; place-items: center;
}
.m12-demo__toggle[aria-expanded="true"] { opacity: .7; }
.m12-demo__toggle svg { width: calc(32px * var(--ui-scale)); height: calc(32px * var(--ui-scale));
  fill: none; stroke: currentColor; stroke-width: 1.5; }
.m12-demo__toggle circle { fill: currentColor; stroke: none; }
.m12-demo__menu {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: calc(16px * var(--ui-scale)) calc(24px * var(--ui-scale)); margin-left: calc(16px * var(--ui-scale));
  background: rgba(var(--graphite-rgb), .92);
}
.m12-demo__menu[hidden] { display: none; }
.m12-demo__cap {
  margin: calc(16px * var(--ui-scale)) 0 0; font-family: var(--font-caption); color: var(--text-muted); opacity: .6;
  font-size: var(--type-min-label);
}
.m12-demo__pair { display: flex; gap: var(--touch-gap); }
.m12-demo__btn {
  min-height: var(--touch-primary); padding: 0 calc(8px * var(--ui-scale)); text-align: left;
  border: 0; background: transparent; color: var(--text-muted); opacity: .75;
  font-family: var(--font-caption); font-size: var(--type-min-ui); cursor: pointer;
}
/* подсказка жеста ядра (hint.js ставит 26 px) — ≥ 32 по §25; своим правилом поверх, вендор не правится */
.m12-stage .kiosk-hint__label { font-size: calc(32px * var(--ui-scale, 1)); }
.m12-demo__btn.is-active { opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }

/* широкая карточка: заголовок сверху, тело — вкладки и прокручиваемые панели */
.m12-sheet__panel.is-wide {
  width: 92%; height: 88%; max-height: none; overflow: hidden; display: flex; flex-direction: column;
}
.m12-sheet__panel.is-wide .m12-sheet__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.m12-sheet__body:empty { display: none; }
.m12-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: calc(32px * var(--content-scale)); }
.m12-tabs { display: flex; gap: var(--touch-gap); flex-wrap: wrap; }
.m12-tab {
  min-height: var(--touch-primary); padding: 0 calc(44px * var(--ui-scale));
  border: 4px solid var(--text-on-light); background: transparent; color: var(--text-on-light);
  font-family: var(--font-caption); font-size: max(var(--type-min-ui), calc(40px * var(--content-scale))); cursor: pointer;
}
/* вне циферблата латунь = выбор (канон §1) */
.m12-tab.is-active { background: var(--brass); border-color: var(--brass); }
.m12-panes { flex: 1 1 auto; min-height: 0; display: flex; }
.m12-pane, .m12-card__plain { flex: 1 1 auto; min-height: 0; overflow-y: auto; --kiosk-scroll-touch: pan-y; padding-right: calc(var(--scrollbar-w) + 24px); }
.m12-pane[hidden] { display: none; }
.m12-sheet__panel.is-wide .m12-card__plain { max-height: 100%; }
.m12-card__lead { margin: 0 0 1em; font-family: var(--font-text); font-size: calc(48px * var(--content-scale)); line-height: 1.4; }
.m12-card__p { margin: 0 0 .9em; font-family: var(--font-text); font-size: calc(42px * var(--content-scale)); line-height: 1.5; max-width: 60em; }
.m12-pos { margin: 0 0 calc(48px * var(--content-scale)); }
.m12-pos__title { margin: 1.2em 0 .5em; font-family: var(--font-caption); font-weight: 400; text-transform: uppercase; letter-spacing: .06em;
  font-size: max(var(--type-min-label), calc(40px * var(--content-scale))); }
.m12-pos__item, .m12-quote {
  margin: 0 0 .9em; padding: 0 0 0 calc(32px * var(--content-scale)); border-left: 6px solid var(--text-on-light);
  font-family: var(--font-text); font-size: calc(40px * var(--content-scale)); line-height: 1.45; max-width: 62em;
}
.m12-pos__item p, .m12-quote p { margin: 0 0 .4em; }
.m12-ref, .m12-quote__who { display: block; font-style: normal; font-family: var(--font-caption);
  font-size: max(var(--type-min-label), calc(32px * var(--content-scale))); }
.m12-quote__who { font-size: max(var(--type-min-label), calc(34px * var(--content-scale))); }

/* лента снимков — вбок, видимый скролл ядра */
.m12-media { display: flex; gap: calc(40px * var(--content-scale)); overflow-x: auto; --kiosk-scroll-touch: pan-x;
  padding-bottom: calc(var(--scrollbar-w) + 16px); margin: 0 0 1em; }
.m12-media__item { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; max-width: calc(900px * var(--content-scale));
  padding: 0; border: 0; background: transparent; color: var(--text-on-light); text-align: left; cursor: zoom-in; }
.m12-media__img { height: calc(480px * var(--content-scale)); width: auto; max-width: calc(900px * var(--content-scale)); object-fit: cover;
  background: var(--graphite); box-shadow: 0 8px 18px rgba(var(--amber-black-rgb), .35); }
.m12-media__cap { font-family: var(--font-text); font-size: max(var(--type-min-label), calc(32px * var(--content-scale))); line-height: 1.3; }
.m12-media__credit { font-family: var(--font-caption); font-size: max(var(--type-min-label), calc(32px * var(--content-scale))); }

/* люди: портрет (только своего периода) + имя + роль в партии */
.m12-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(520px * var(--content-scale)), 560px));
  gap: calc(48px * var(--content-scale)); align-content: start; }
.m12-person { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.m12-person__photo { padding: 0; border: 0; background: var(--graphite); aspect-ratio: 4 / 5; overflow: hidden; cursor: zoom-in; }
.m12-person__photo.is-empty { cursor: default; background: rgba(var(--graphite-rgb), .35); }
.m12-person__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m12-person__name { display: block; font-family: var(--font-text); font-size: calc(40px * var(--content-scale)); line-height: 1.25; }
.m12-person__life { display: block; font-family: var(--font-caption); font-size: max(var(--type-min-label), calc(32px * var(--content-scale))); }
.m12-person__role { display: block; font-family: var(--font-caption); font-size: max(var(--type-min-label), calc(32px * var(--content-scale))); }

/* снимок поверх карточки: весь кадр, подпись и источник */
.m12-lightbox { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; padding: calc(64px * var(--content-scale)); background: var(--graphite); color: var(--paper); }
.m12-lightbox[hidden] { display: none; }
.m12-lightbox__img { max-width: 100%; max-height: calc(100% - 200px); object-fit: contain; box-shadow: 0 12px 28px rgba(var(--amber-black-rgb), .45); }
.m12-lightbox__cap { margin: 0; max-width: 70em; text-align: center; font-family: var(--font-text);
  font-size: max(var(--type-min-label), calc(32px * var(--content-scale))); line-height: 1.35; }
.m12-lightbox__close { position: absolute; top: calc(32px * var(--ui-scale)); right: calc(32px * var(--ui-scale));
  min-width: var(--touch-primary); min-height: var(--touch-primary); padding: 0 calc(32px * var(--ui-scale));
  border: 4px solid var(--paper); background: transparent; color: var(--paper); font-family: var(--font-caption); font-size: max(var(--type-min-ui), calc(40px * var(--content-scale))); cursor: pointer; }

/* «Время: кольцо лет» — стрелки и подписи лет/периодов циферблата уступают кольцу */
.m12-dial[data-time="ring"] .m12-hand, .m12-dial[data-time="ring"] .m12-ticks,
.m12-dial[data-time="ring"] .m12-years, .m12-dial[data-time="ring"] .m12-periods { display: none; }
.m12-ring__hit { fill: none; stroke: transparent; pointer-events: stroke; cursor: pointer; }
.m12-ring__year { font-family: var(--font-caption); font-size: calc(var(--m12-px, 1) * 48px); fill: var(--telegrey); pointer-events: none; }
.m12-ring__year.is-active { fill: var(--paper); font-size: calc(var(--m12-px, 1) * 56px); }
.m12-ring__year.is-pending { fill: var(--paper); text-decoration: underline; }
.m12-ring__arc { fill: none; stroke: var(--telegrey); stroke-width: 6; stroke-linecap: round; pointer-events: none; }
.m12-ring__arc.is-active { stroke: var(--paper); stroke-width: 12; }
.m12-ring__period { font-family: var(--font-caption); font-size: calc(var(--m12-px, 1) * 48px); fill: var(--telegrey); pointer-events: none; }
.m12-ring__period.is-active { fill: var(--paper); }

/* смена визуализации — через тёмное (§6а) */
.m12-stage__veil { position: absolute; inset: 0; z-index: 3; background: var(--amber-black); opacity: 0; pointer-events: none;
  transition: opacity .4s cubic-bezier(0, 0, .2, 1); }
.m12-stage__veil.is-dark { opacity: 1; transition: opacity .4s cubic-bezier(.4, 0, 1, 1); }
.m12-stage__veil.is-instant { transition: none; }

/* ===== ② Круглый зал · ③ Роза · ④ Годовые кольца (scenes/concept-view.js, геометрия art) =====
   цвет партии — var(--party-c) по data-party (ограда выше); приглушение — только прозрачностью площади */
.m12-cv { display: block; width: 100%; height: 100%; overflow: visible; touch-action: none; user-select: none; }
.m12-dial[data-colors="off"] .m12-cv [data-party] { --party-c: var(--telegrey); }
.m12-cv-seat, .m12-cv-token, .m12-cv-petal, .m12-cv-cell { fill: var(--party-c, var(--telegrey)); stroke: var(--graphite); stroke-width: 3; }
.m12-cv-seat.is-group { fill: var(--telegrey); }
.m12-cv-seat.is-out { fill: var(--window); }
.m12-cv .is-illegal { fill-opacity: .55; }
.m12-cv .is-semi { fill-opacity: .8; }
.m12-cv-ghost { fill: none; stroke: var(--telegrey); stroke-width: 3; stroke-dasharray: 6 6; opacity: .6; }
.m12-cv-token { stroke: var(--amber-black); stroke-width: 6; }
.m12-cv-petal.is-absent { fill: none; stroke: var(--telegrey); stroke-width: 4; stroke-dasharray: 10 8; }
.m12-cv-cell { stroke: var(--amber-black); stroke-width: 5; }
.m12-cv-cell.is-absent { fill: rgba(var(--paper-rgb), .06); }
.m12-cv-cell:not(.is-current) { fill-opacity: .4; }
.m12-cv-cell:not(.is-current).is-absent { fill-opacity: 1; }
.m12-cv-ring { fill: none; stroke: var(--paper); stroke-width: 8; }
.m12-cv-type { fill: var(--telegrey); stroke: var(--amber-black); stroke-width: 4; }
.m12-cv-border { fill: none; stroke: var(--telegrey); stroke-width: 4; stroke-dasharray: 10 8; }
.m12-cv-matte { fill: url(#m12-cv-matte); pointer-events: none; }
.m12-cv-matte.is-semi { opacity: .5; }
.m12-cv-target { fill: transparent; stroke: none; pointer-events: fill; cursor: pointer; }
.m12-cv-label { font-family: var(--font-caption); font-size: calc(var(--m12-px, 1) * 46px); pointer-events: none;
  fill: var(--paper); stroke: var(--amber-black); stroke-width: calc(var(--m12-px, 1) * 10px); stroke-linejoin: round; paint-order: stroke; }
.m12-cv-label.is-type { fill: var(--text-on-light); stroke: none; font-size: calc(var(--m12-px, 1) * 48px); }
.m12-cv-label.is-cramped { display: none; }
.m12-cv-caption { font-family: var(--font-caption); font-size: calc(var(--m12-px, 1) * 48px); fill: var(--telegrey); pointer-events: none; }
.m12-cv-hub { fill: rgba(var(--amber-black-rgb), .4); stroke: var(--telegrey); stroke-width: 4; pointer-events: none; }
.m12-cv-tick { stroke: var(--telegrey); stroke-width: 4; }
.m12-cv-tick.is-major { stroke: var(--paper); stroke-width: 8; }
.m12-cv-numeral { font-family: var(--font-caption); font-size: calc(var(--m12-px, 1) * 48px); fill: var(--telegrey); pointer-events: none; }
.m12-cv-period { fill: rgba(var(--paper-rgb), .05); stroke: var(--graphite); stroke-width: 3; pointer-events: none; }
.m12-cv-period.is-active { fill: rgba(var(--paper-rgb), .12); stroke: var(--paper); }
.m12-cv-yearcell { fill: transparent; pointer-events: fill; cursor: pointer; }
.m12-cv-yearcell.is-active { fill: rgba(var(--paper-rgb), .18); }
.m12-cv-year { font-family: var(--font-caption); font-size: calc(var(--m12-px, 1) * 48px); fill: var(--telegrey); pointer-events: none; }
.m12-cv-year.is-active { fill: var(--paper); font-size: calc(var(--m12-px, 1) * 56px); }
.m12-cv-year.is-cramped, .m12-cv-numeral.is-cramped { display: none; }
/* п.14: подписей ≤ ~15 — не каждый год и не каждая цифра (ячейки и риски остаются, касание то же) */
.m12-cv-year.is-minor, .m12-cv-numeral.is-minor, .m12-ring__year.is-minor { display: none; }

/* викторина «Найди себя…» — вопрос крупно, варианты во всю ширину (тач-таргет ≥ 96), вне циферблата латунь = выбор */
.m12-quiz__kicker { margin: 0 0 .4em; font-family: var(--font-caption); text-transform: uppercase; letter-spacing: .06em;
  font-size: max(var(--type-min-label), calc(40px * var(--content-scale))); }
.m12-quiz__q { margin: 0 0 1em; font-family: var(--font-text); font-weight: 400; font-size: calc(56px * var(--content-scale)); line-height: 1.3; max-width: 40em; }
.m12-quiz__party { margin: 0 0 .6em; font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: calc(72px * var(--content-scale)); line-height: 1.1; }
.m12-quiz__opts { display: flex; flex-direction: column; gap: var(--touch-gap); max-width: calc(2400px * var(--content-scale)); }
.m12-quiz__opt { min-height: var(--touch-primary); padding: calc(24px * var(--ui-scale)) calc(40px * var(--ui-scale));
  border: 4px solid var(--text-on-light); background: transparent; color: var(--text-on-light); text-align: left; cursor: pointer;
  font-family: var(--font-text); font-size: max(var(--type-min-ui), calc(42px * var(--content-scale))); line-height: 1.35; }
.m12-quiz__opt:active { background: var(--brass); border-color: var(--brass); }
.m12-quiz__bar { display: flex; gap: var(--touch-gap); margin-top: calc(48px * var(--content-scale)); flex-wrap: wrap; }
.m12-quiz .m12-more { border-color: var(--text-on-light); color: var(--text-on-light); }
.m12-quiz .m12-quiz__open { background: var(--brass); border-color: var(--brass); }

/* ===== ⑤ «Часы + раскладка» (decisions §23, §26; vendor/art/split.js): фигура — в своей рамке 4K (1100…3840 × 0…2160)
 * в масштабе окна, единицы модуля = px 4K; малые часы — в колонке под кнопками, вместо списка событий (он — листом) ===== */
.m12-read__clock { display: none; }
.m12-dial[data-viz="split"], .m12-dial[data-viz="rose"], .m12-dial[data-viz="rings"] {
  grid-template-columns: calc(904px * var(--content-scale)) minmax(0, 1fr); }
/* ③ ④ (art п.14): кадр шире круга под столбцы имён — правая часть кадра (968…3840) от верхнего поля ядра до низа
 * (176…2160, кнопка ядра справа вверху не задета), вписан; имена сбоку — кеглем модуля (50 единиц ≈ 44 px ≥ 40, §25) */
.m12-dial[data-viz="rose"] .m12-stage, .m12-dial[data-viz="rings"] .m12-stage { position: absolute; left: calc(968px * var(--content-scale));
  top: var(--chrome-top); width: calc(2872px * var(--content-scale)); height: calc(100% - var(--chrome-top)); aspect-ratio: auto; justify-self: auto; }
.m12-cv-label.is-side { font-size: 50px; }
.m12-cv-leader { fill: none; stroke: var(--telegrey); stroke-width: calc(var(--m12-px, 1) * 6px); pointer-events: none; }
.m12-dial[data-viz="split"] .m12-read__events { display: none; }
.m12-dial[data-viz="split"] .m12-read__clock { display: block; flex: 0 0 auto; width: calc(600px * var(--content-scale)); aspect-ratio: 1 / 1;
  margin-top: calc(24px * var(--content-scale)); }
/* призыв ядра к жесту — под малыми часами (крутят их), а не под фигурой: стоит в рамке фигуры, сдвиг на центр часов
 * (x 160 + 300 = 460 px 4K от края кадра; рамка фигуры начинается с 1100) */
.m12-dial[data-viz="split"] .m12-stage > .kiosk-hint { left: calc(-640px * var(--content-scale)); }
.m12-dial[data-viz="split"] .m12-stage { position: absolute; left: calc(1100px * var(--content-scale)); top: 0;
  width: calc(2740px * var(--content-scale)); height: calc(2160px * var(--content-scale)); aspect-ratio: auto; justify-self: auto; }
.m12-sv, .m12-sv-clock { display: block; width: 100%; height: 100%; overflow: visible; touch-action: none; user-select: none; }
.m12-sv-bar, .m12-sv-chip, .m12-sv-seat, .m12-sv-token { fill: var(--party-c, var(--telegrey)); stroke: none; }
.m12-sv-token { stroke: var(--amber-black); stroke-width: 6; }
.m12-sv-bar.is-group, .m12-sv-seat.is-group { fill: var(--window); }
.m12-sv-bar.is-unknown, .m12-sv-chip.is-unknown, .m12-sv-seat.is-unknown { fill-opacity: .5; }
.m12-sv-slot { fill: none; stroke: var(--telegrey); stroke-width: 6; stroke-dasharray: 12 10; opacity: .6; }
.m12-sv-ghost { fill: rgba(var(--paper-rgb), .12); }
.m12-sv-illegal { fill: none; stroke: var(--paper); stroke-width: 6; stroke-dasharray: 18 16; pointer-events: none; }
.m12-sv-axis, .m12-sv-bracket, .m12-sv-rule, .m12-sv-leader { fill: none; stroke: var(--telegrey); stroke-width: 6; pointer-events: none; }
.m12-sv-leader.is-paper { stroke: var(--paper); }
.m12-sv-bar.is-picked, .m12-sv-chip.is-picked, .m12-sv-token.is-picked { stroke: var(--paper); stroke-width: 12; }
.m12-sv-label { font-family: var(--font-text); fill: var(--paper); pointer-events: none; }
.m12-sv-label.is-grey { fill: var(--telegrey); }
.m12-sv-label.is-camp, .m12-sv-label.is-axis, .m12-sv-label.is-num { font-family: var(--font-caption); letter-spacing: .06em; }
.m12-sv-label.is-center { font-family: var(--font-display); }
.m12-sv-target { fill: transparent; stroke: none; pointer-events: fill; cursor: pointer; }
.m12-dial[data-colors="off"] .m12-sv [data-party] { --party-c: var(--telegrey); }
/* малые часы: латунь — металл часов (риски, дуга периода, стрелки, ступица) */
.m12-mc-face { fill: var(--amber-black); stroke: var(--brass); stroke-width: 6; }
.m12-mc-tick, .m12-mc-quarter { fill: none; stroke: var(--brass); stroke-linecap: butt; }
.m12-mc-hand__bar { stroke: var(--brass); stroke-linecap: round; pointer-events: none; }
.m12-mc-hand__grip { fill: rgba(var(--paper-rgb), .08); stroke: var(--paper); stroke-width: 6; cursor: grab; }
.m12-mc-hand.is-snap { transition: transform .35s cubic-bezier(.4, 0, .2, 1); }
.m12-mc-hub { fill: var(--brass); pointer-events: none; }
.m12-mc-period { fill: rgba(var(--paper-rgb), .06); stroke: none; pointer-events: none; }
.m12-mc-period.is-active { fill: rgba(var(--paper-rgb), .3); }
.m12-mc-cell { fill: transparent; pointer-events: fill; cursor: pointer; }
.m12-mc-cell.is-active { stroke: var(--paper); stroke-width: 8; }
.m12-mc-sep { stroke: var(--graphite); stroke-width: 3; pointer-events: none; }
/* лист событий года (⑤) — те же кнопки, тёмным по светлой карточке */
.m12-yearev { display: flex; flex-direction: column; align-items: flex-start; gap: var(--touch-gap); }
.m12-yearev .m12-ev { border-color: var(--text-on-light); color: var(--text-on-light); }
.m12-yearev .m12-ev__mark { color: var(--text-on-light); }