/* МТК-32 · приложение киоска. Только токены design-core (сырого hex нет, канон §1).
 * Сцена — 1920×1080 логических единиц: --u = одна единица в px экрана
 * (1080p → 1 px, 4K → 2 px). Канонные числа 4K делим на 2. */
:root {
  --u: min(calc(100vw / 1920), calc(100vh / 1080));
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --step: .06;                                  /* ступень фона §1 — ОДНА на приложение (Ди3): паспарту, свет листа, разделитель */
  --step-bg: rgba(var(--paper-rgb), var(--step));
  --shadow: calc(5 * var(--u)) calc(9 * var(--u)) calc(26 * var(--u)) rgba(var(--amber-black-rgb), .42); /* §9.4 */
}

html, body { background: var(--amber-black); }

.stage {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(1920 * var(--u)); height: calc(1080 * var(--u));
  transform: translate(-50%, -50%);
  background: var(--bg);
  overflow: hidden;
  color: var(--paper);
}

/* --- Паспарту (канон §9.4): узкое поле, ступень фона, латунная кромка, тень --- */
.pp {
  margin: 0;
  padding: calc(11 * var(--u));
  background: var(--step-bg);
  box-shadow: inset 0 0 0 max(2px, calc(2 * var(--u))) rgba(var(--brass-rgb), .42), var(--shadow);
  line-height: 0;
}
.pp__img { display: block; }

/* ============================ Вход-триптих ============================ */
.vhod__field {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--i) * 640 * var(--u)); width: calc(640 * var(--u));
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: left .95s var(--ease), width .95s var(--ease), opacity .7s var(--ease-in), transform .95s var(--ease);
}
/* разделитель полей — тоновая линия ≥ 4 px 4K, не волосок (§3а) */
.vhod__field + .vhod__field::before {
  content: ""; position: absolute; left: 0; top: calc(56 * var(--u)); bottom: calc(56 * var(--u));
  width: max(2px, calc(2 * var(--u))); background: var(--step-bg);
  transition: opacity .4s var(--ease);
}

/* среда: мягкий свет над листом и виньетка (канон §9.4 «свет», §9.7) */
.vhod::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(ellipse 75% 85% at 50% 45%, transparent 55%, rgba(var(--amber-black-rgb), .38) 100%);
}
.vhod__field::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(760 * var(--u)); pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse 60% 55% at 50% 48%, var(--step-bg), transparent 70%);
  transition: opacity .6s var(--ease);
}
.vhod__field.is-open::after { opacity: 0; }

.vhod__win {
  position: absolute; left: calc(48 * var(--u)); right: calc(48 * var(--u));
  top: calc(48 * var(--u)); height: calc(580 * var(--u));
  overflow: hidden;
  transition: top .95s var(--ease), height .95s var(--ease), left .95s var(--ease), right .95s var(--ease);
}
.vhod__cam {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  container-type: size;
  animation-duration: var(--cycle, 42s);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  will-change: transform;
}
.vhod.is-paused .vhod__cam, .vhod.is-opening .vhod__cam { animation-play-state: paused; }
.vhod__cam .pp__img {
  max-width: calc(100cqw - 52 * var(--u));
  max-height: calc(100cqh - 52 * var(--u));
  width: auto; height: auto;
}

.vhod__text {
  position: absolute; left: calc(48 * var(--u)); right: calc(48 * var(--u)); top: calc(726 * var(--u));
  transition: opacity .4s var(--ease);
}
.vhod__word {
  font-family: var(--font-caption); font-size: calc(22 * var(--u));
  letter-spacing: .24em; text-transform: uppercase; color: var(--telegrey);
}
.vhod__num { margin-right: .9em; color: var(--brass); letter-spacing: .1em; }
.vhod__title {
  margin: calc(14 * var(--u)) 0 0;
  font-family: var(--font-display); font-weight: 400; font-size: calc(54 * var(--u));
  line-height: 1.08; color: var(--paper);
  text-wrap: balance;
}
.vhod__years {
  margin-top: calc(14 * var(--u));
  font-family: var(--font-caption); font-size: calc(26 * var(--u)); color: var(--telegrey);
}
.vhod__cap {
  position: absolute; left: calc(64 * var(--u)); right: calc(64 * var(--u)); top: calc(642 * var(--u));
  margin: 0; font-family: var(--font-caption); font-size: calc(19 * var(--u)); line-height: 1.3;
  color: var(--telegrey);
  transition: opacity .4s var(--ease);
}
.vhod__src { display: block; margin-top: calc(4 * var(--u)); }

/* --- раскрытие поля: «проваливаемся внутрь» --- */
.vhod.is-opening .vhod__field { pointer-events: none; }
.vhod.is-opening .vhod__field::before { opacity: 0; }
.vhod__field.is-open { left: 0; width: calc(1920 * var(--u)); z-index: 2; }
.vhod__field.is-open .vhod__win { top: calc(40 * var(--u)); height: calc(1000 * var(--u)); left: calc(64 * var(--u)); right: calc(64 * var(--u)); }
.vhod__field.is-open .vhod__text, .vhod__field.is-open .vhod__cap { opacity: 0; transition-duration: .3s; }
.vhod__field.is-left { opacity: 0; transform: translateX(calc(-160 * var(--u))); }
.vhod__field.is-right { opacity: 0; transform: translateX(calc(160 * var(--u))); }

/* призыв ядра — над подписями листов */
.vhod .kiosk-hint { --kiosk-hint-lift: 0px; }

/* ================================ Блок ================================ */
/* Предметный слой: дорожки ленты — нейтралями канона, без своих цветов
 * (§1.1: цвет не единственный носитель — у дорожки есть подпись). */
.blok { --tone-1: var(--telegrey); --tone-2: var(--window); }

.blok__etude, .blok__lenta, .blok__intro { position: absolute; inset: 0; transition: opacity .6s var(--ease); }
.blok__intro { opacity: 0; pointer-events: none; background: var(--bg); }
.blok[data-mode="intro"] .blok__intro { opacity: 1; transition: none; }
.blok__introwin {
  position: absolute; left: calc(64 * var(--u)); right: calc(64 * var(--u));
  top: calc(40 * var(--u)); height: calc(1000 * var(--u));
  display: flex; align-items: center; justify-content: center; container-type: size;
}
.blok__introwin .pp__img { max-width: calc(100cqw - 52 * var(--u)); max-height: calc(100cqh - 52 * var(--u)); }

.blok__lenta { opacity: 0; pointer-events: none; }
.blok[data-mode="lenta"] .blok__lenta { opacity: 1; pointer-events: auto; }
.blok[data-mode="lenta"] .blok__etude { opacity: 0; pointer-events: none; }

/* Хроника (задача 3 п.1, decisions §59): размеры — от 4K-чисел канона (DESIGN-CODE §3, для 3840; в ед. сцены — пополам).
 * Модуль ленты считает кегли «база 1920 × --content-scale»: строка 25 · cs, подпись 21 · cs. Ориентир dvn/канона —
 * строка ≈ 36–40 px 4K, подпись ≈ 28–32 px 4K → cs = k · 0,76 (k — px экрана на ед. сцены: 1080p — 1, 4K — 2).
 * ОДНА ручка до замера зала (§41): --hall. Регулятор оператора и a11y ядра не затираем — умножаем на них:
 * --core-cs — значение ядра, снятое уровнем выше (своё --content-scale в формуле дало бы цикл). */
:root { --hall: .76; }
.blok { --core-cs: var(--content-scale, 1); }
.blok__lenta {
  --content-scale: calc(var(--core-cs) * var(--k, 1) * var(--hall));
  --touch-min: calc(32px * var(--k, 1) * var(--ui-scale, 1));
  --touch-primary: calc(48px * var(--k, 1) * var(--ui-scale, 1));
  --touch-gap: calc(8px * var(--k, 1) * var(--ui-scale, 1));
  --type-min-label: calc(12px * var(--k, 1) * var(--ui-scale, 1));
  --type-min-ui: calc(16px * var(--k, 1) * var(--ui-scale, 1));
  padding: calc(120 * var(--u)) calc(56 * var(--u)) calc(40 * var(--u));
  box-sizing: border-box;
  background: var(--bg);
}
/* п.2: дата уже — текст шире: колонка даты 5,6 em вместо 9 em модуля (самая длинная подпись — «12 сентября»,
 * «21–27 января»); переменная ленты 0.2.0 (Т2) */
.blok__lenta { --tl-date-w: 5.6em; }

/* верхняя полоса: имя блока слева, кнопки справа — в безопасной зоне */
.blok__bar {
  position: absolute; left: calc(56 * var(--u)); right: calc(56 * var(--u)); top: calc(32 * var(--u));
  display: flex; align-items: center; gap: calc(12 * var(--u));
  pointer-events: none; transition: opacity .4s var(--ease);
}
.blok[data-mode="intro"] .blok__bar { opacity: 0; }
.blok__name {
  flex: 1 1 auto; font-family: var(--font-caption); font-size: calc(20 * var(--u)); color: var(--telegrey);
  letter-spacing: .06em; opacity: 0; transition: opacity .4s var(--ease);
}
.blok[data-mode="lenta"] .blok__name { opacity: 1; }
.blok__num { color: var(--brass); margin-right: .8em; }
.blok__years { margin-left: 1.2em; }
.blok__btn {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: calc(10 * var(--u));
  min-height: calc(48 * var(--u)); padding: 0 calc(20 * var(--u));
  border: 0; border-radius: calc(6 * var(--u));
  background: rgba(var(--amber-black-rgb), .55);
  color: var(--paper); font-family: var(--font-text); font-size: calc(20 * var(--u));
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.blok__btn:active, .blok__btn.is-on { background: var(--brass); color: var(--text-on-light); }
/* два вида просмотра — одна плашка из двух кнопок, выбранный — латунь (канон §1: активное — латунь) */
.blok__modes { display: inline-flex; gap: max(2px, calc(2 * var(--u))); pointer-events: auto; }
.blok__modes .blok__btn { border-radius: 0; }
.blok__modes .blok__btn:first-child { border-radius: calc(6 * var(--u)) 0 0 calc(6 * var(--u)); }
.blok__modes .blok__btn:last-child { border-radius: 0 calc(6 * var(--u)) calc(6 * var(--u)) 0; }
.blok__auto { display: none; }
.blok[data-mode="lenta"] .blok__auto { display: inline-flex; }
.blok__btn svg { width: 1.2em; height: 1.2em; }





/* слот «подлинник» ленты */
.orig { margin: 0; position: absolute; inset: 0 0 var(--orig-strip, 0) 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(8 * var(--u)); }
.tl__slot.has-strip { --orig-strip: calc(var(--touch-min) + 24px); }
.orig__pp { max-width: 100%; max-height: calc(100% - 40 * var(--u)); box-sizing: border-box; display: flex; }
.orig__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.orig__n { font-family: var(--font-caption); font-size: calc(16 * var(--u)); color: var(--telegrey); }
.orig__strip { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--touch-min) + 24px); padding: 12px; box-sizing: border-box; display: flex; gap: var(--touch-gap); overflow-x: auto; background: rgba(var(--amber-black-rgb), .35); }
.orig__th { flex: 0 0 auto; height: var(--touch-min); min-width: var(--touch-min); padding: 0; border: 0; background: none; opacity: .6; }
.orig__th img { height: 100%; display: block; }
.orig__th.is-on { opacity: 1; outline: 3px solid var(--active); outline-offset: 2px; }
.orig__bad { padding: 24px; color: var(--text-muted); font-family: var(--font-caption); }

/* ===== этюд: сцена движка 3840×2160, вписана в поле блока (lib/etude.js) ===== */
.etude { position: absolute; inset: 0; overflow: hidden; background: var(--amber-black); }
.etude__stage { position: absolute; left: 0; top: 0; width: 3840px; height: 2160px; transform-origin: 0 0; overflow: hidden; background: var(--amber-black); }
.etude__pic { position: absolute; inset: 0; width: 3840px; height: 2160px; }
.etude__text { position: absolute; inset: 0; }
.etude__black { position: absolute; inset: 0; background: var(--amber-black); opacity: 0; pointer-events: none; }

/* ===== блок 3: мавзолеи в 3D (lib/maus3d.js) ===== */
.blok__x { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); background: var(--bg); }
.blok[data-mode="x"] .blok__x { opacity: 1; pointer-events: auto; }
.blok[data-mode="x"] .blok__etude, .blok[data-mode="x"] .blok__lenta { opacity: 0; pointer-events: none; }
.blok[data-mode="x"] .blok__name { opacity: 1; }
.m3d, .m3d__view { position: absolute; inset: 0; }
.m3d__view canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.m3d__load { position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  font-family: var(--font-caption); font-size: calc(24 * var(--u)); color: var(--telegrey); background: rgba(var(--amber-black-rgb), .35); }
.m3d.is-loading .m3d__load { display: flex; }
/* шторка смены мавзолея: кромка под брендовым углом 105° (канон §6а), 0,7 с */
.m3d__wipe { position: absolute; inset: 0; background: var(--bg); pointer-events: none;
  clip-path: polygon(140% 0, 160% 0, 140% 100%, 120% 100%); }
.m3d__wipe.is-in { animation: m3d-in .7s var(--ease) forwards; }
.m3d__wipe.is-out { animation: m3d-out .7s var(--ease) forwards; }
@keyframes m3d-in { from { clip-path: polygon(140% 0, 160% 0, 140% 100%, 120% 100%); } to { clip-path: polygon(-20% 0, 130% 0, 110% 100%, -40% 100%); } }
@keyframes m3d-out { from { clip-path: polygon(-20% 0, 130% 0, 110% 100%, -40% 100%); } to { clip-path: polygon(-20% 0, 0% 0, -20% 100%, -40% 100%); } }
.m3d__pick { position: absolute; left: calc(56 * var(--u)); bottom: calc(40 * var(--u)); display: flex; gap: calc(8 * var(--u)); }
.m3d__btn { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); min-height: calc(48 * var(--u)); padding: 0 calc(20 * var(--u));
  border: 0; border-radius: calc(6 * var(--u)); background: rgba(var(--amber-black-rgb), .55); color: var(--paper);
  font-family: var(--font-text); font-size: calc(20 * var(--u)); cursor: pointer; }
.m3d__btn.is-on, .m3d__btn:active { background: var(--brass); color: var(--text-on-light); }
.m3d__key { font-family: var(--font-caption); letter-spacing: .1em; }
.m3d__cap { position: absolute; right: calc(56 * var(--u)); bottom: calc(40 * var(--u)); max-width: calc(820 * var(--u)); margin: 0;
  padding: calc(12 * var(--u)) calc(18 * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(var(--amber-black-rgb), .55);
  font-family: var(--font-caption); font-size: calc(19 * var(--u)); line-height: 1.35; color: var(--telegrey); text-align: right; }
.m3d__cap b { display: block; font-family: var(--font-text); font-weight: 700; font-size: calc(22 * var(--u)); color: var(--paper); }
.m3d .kiosk-hint { --kiosk-hint-lift: calc(70 * var(--u)); }
.blok[data-mode="x"] .blok__name { align-self: center; padding: calc(10 * var(--u)) calc(16 * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(var(--amber-black-rgb), .55); flex: 0 1 auto; margin-right: auto; }

/* ===== блок 2: «Шесть портретов» (lib/portrety.js) ===== */
.por { position: absolute; inset: 0; }
.por__row { position: absolute; left: calc(56 * var(--u)); right: calc(56 * var(--u)); top: calc(250 * var(--u)); height: calc(520 * var(--u));
  display: flex; gap: calc(24 * var(--u)); align-items: flex-end; justify-content: center; transition: top .5s var(--ease), height .5s var(--ease); }
.por__item { flex: 1 1 0; max-width: calc(280 * var(--u)); height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: calc(14 * var(--u));
  margin: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .4s var(--ease); }
.por__pp { display: block; max-height: calc(100% - 60 * var(--u)); }
.por__img { display: block; height: calc(380 * var(--u)); width: auto; max-width: 100%; object-fit: contain; }
.por__none { display: block; width: calc(270 * var(--u)); height: calc(380 * var(--u)); }
.por__none--big { width: calc(420 * var(--u)); height: calc(560 * var(--u)); }
.por__name { font-family: var(--font-text); font-size: calc(22 * var(--u)); color: var(--paper); }
.por__item.is-on .pp { box-shadow: inset 0 0 0 max(3px, calc(3 * var(--u))) var(--brass), var(--shadow); }
.por__item.is-on .por__name { color: var(--brass); }
.por.is-open .por__row { top: calc(810 * var(--u)); height: calc(230 * var(--u)); }
.por.is-open .por__doc { opacity: 0; }
.por.is-open .por__img { height: calc(150 * var(--u)); }
.por.is-open .por__none { width: calc(106 * var(--u)); height: calc(150 * var(--u)); }
.por.is-open .por__item:not(.is-on) { opacity: .45; }
.por.is-open .por__name { font-size: calc(18 * var(--u)); }
.por__open { position: absolute; left: calc(56 * var(--u)); right: calc(56 * var(--u)); top: calc(110 * var(--u)); height: calc(660 * var(--u));
  display: flex; gap: calc(56 * var(--u)); align-items: stretch; }
.por:not(.is-open) .por__open { pointer-events: none; }
.por__big { margin: 0; flex: 0 0 auto; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: calc(12 * var(--u)); }
.por__big .pp { display: block; max-height: calc(100% - 70 * var(--u)); }
.por__big .pp__img { display: block; height: calc(560 * var(--u)); width: auto; max-width: calc(700 * var(--u)); object-fit: contain; }
.por__cap, .por__doc { font-family: var(--font-caption); font-size: calc(19 * var(--u)); line-height: 1.35; color: var(--telegrey); margin: 0; }
.por__code { display: block; }
.por__text { flex: 1 1 auto; max-width: calc(900 * var(--u)); align-self: center; }
.por__who { margin: 0 0 calc(24 * var(--u)); font-family: var(--font-caption); font-weight: 400; font-size: calc(24 * var(--u)); letter-spacing: .12em; text-transform: uppercase; color: var(--telegrey); }
.por__line { margin: 0; font-family: var(--font-text); font-size: calc(38 * var(--u)); line-height: 1.3; color: var(--paper); text-wrap: pretty; }
.por__date { margin: calc(14 * var(--u)) 0 calc(36 * var(--u)); font-family: var(--font-caption); font-size: calc(24 * var(--u)); color: var(--telegrey); }
.por__doc { position: absolute; left: calc(56 * var(--u)); bottom: calc(36 * var(--u)); transition: opacity .3s var(--ease); }
.por .kiosk-hint { --kiosk-hint-lift: calc(60 * var(--u)); }

/* высокие листы в слоте Хроники (задача 3 п.4): по ширине, прокрутка пальцем, скролл виден всегда (§3) */
.tl__slot.is-scroll { overflow: hidden; }
.orig__scroll { position: absolute; inset: 0 0 var(--orig-strip, 0) 0; overflow-y: scroll; overscroll-behavior: contain;
  padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); box-sizing: border-box;
  scrollbar-width: auto; scrollbar-color: var(--brass) rgba(var(--paper-rgb), .08); }
.orig__scroll::-webkit-scrollbar { width: calc(9 * var(--u)); }
.orig__scroll::-webkit-scrollbar-track { background: rgba(var(--paper-rgb), .08); border-radius: calc(5 * var(--u)); }
.orig__scroll::-webkit-scrollbar-thumb { background: var(--brass); border-radius: calc(5 * var(--u)); }
.orig__w { margin: 0 auto; display: table; }
.orig__img--w { display: block; height: auto; }
.orig__btn { position: absolute; right: calc(28 * var(--u)); top: calc(14 * var(--u)); z-index: 2;
  min-height: var(--touch-primary); padding: 0 calc(20 * var(--u)); border: 0; border-radius: calc(6 * var(--u));
  background: rgba(var(--amber-black-rgb), .7); color: var(--paper); font-family: var(--font-text); font-size: calc(20 * var(--u)); cursor: pointer; }
.orig__btn:active { background: var(--brass); color: var(--text-on-light); }
.orig__n--top { position: absolute; left: calc(20 * var(--u)); top: calc(18 * var(--u)); z-index: 2; padding: calc(4 * var(--u)) calc(10 * var(--u));
  background: rgba(var(--amber-black-rgb), .6); border-radius: calc(4 * var(--u)); }
/* Б: лист раскрыт — слот на всю правую колонку, материал уходит */
.tl__side.is-sheet { grid-template-rows: minmax(0, 1fr); }
.tl__side.is-sheet .tl__mat { display: none; }

/* 4.2 — раздел блока — экран ядра; кнопки разделов и «Три блока» — у навигации ядра, сцена уступает низ полосе
 * карточек (--chrome-bottom ядра); рассказ (16:9) при этом вписывается с полями по бокам */
.blok.is-only .blok__modes, .blok.is-only [data-act="home"] { display: none; }
.blok.is-only { top: 0; transform: translateX(-50%); height: calc(min(1080 * var(--u), 100vh) - var(--chrome-bottom, 0px)); }
.blok.is-only .blok__name { opacity: 1; }
.blok.is-only[data-only="etude"] .blok__name { opacity: 0; }   /* в рассказе место и дату даёт сам движок */
.blok.is-only .por:not(.is-open) .por__row { top: calc(140 * var(--u)); }   /* ряд выше — под ним призыв ядра над полосой карточек */
.etude__draft { position: absolute; left: calc(24 * var(--u)); bottom: calc(14 * var(--u)); display: none;
  padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: calc(4 * var(--u)); background: rgba(var(--amber-black-rgb), .6);
  font-family: var(--font-caption); font-size: calc(13 * var(--u)); color: var(--telegrey); pointer-events: none; }
.etude.is-voiced .etude__draft { display: block; }

/* ===== «Рассказ»: шкала лет блока + крупная дата и место (задача 4.3, lib/timescale.js) ===== */
.etude__text .tx-place { display: none !important; }   /* плашка «место · дата» движка — заменена своей */
.tsc { position: absolute; left: calc(48 * var(--u)); right: calc(48 * var(--u)); top: calc(22 * var(--u)); padding-bottom: calc(10 * var(--u));
  display: flex; align-items: flex-start; gap: calc(40 * var(--u)); pointer-events: none; z-index: 2; }
.tsc__when { flex: 0 0 calc(380 * var(--u)); }
.tsc__date { font-family: var(--font-caption); font-size: calc(40 * var(--u)); line-height: 1.05; color: var(--paper); font-variant-numeric: lining-nums; }
.tsc__place { margin-top: calc(6 * var(--u)); font-family: var(--font-caption); font-size: calc(18 * var(--u));
  letter-spacing: .18em; text-transform: uppercase; color: var(--telegrey); }
.tsc__scale { flex: 1 1 auto; display: flex; gap: calc(14 * var(--u)); padding-top: calc(10 * var(--u)); }
.tsc__seg { flex: 1 1 0; min-width: 0; }
.tsc__track { position: relative; height: calc(26 * var(--u)); border-bottom: max(2px, calc(2 * var(--u))) solid rgba(var(--paper-rgb), .28); }
.tsc__track i { position: absolute; bottom: 0; width: max(2px, calc(2 * var(--u))); height: calc(10 * var(--u)); background: rgba(var(--paper-rgb), .42); }
.tsc__run { position: absolute; bottom: calc(-6 * var(--u)); width: max(3px, calc(3 * var(--u))); height: calc(34 * var(--u));
  margin-left: calc(-1.5 * var(--u)); background: var(--brass); display: none; transition: left .6s var(--ease); }
.tsc__seg.is-on .tsc__run { display: block; }
.tsc__lbl { margin-top: calc(8 * var(--u)); font-family: var(--font-caption); font-size: calc(16 * var(--u)); color: var(--telegrey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsc__seg.is-on .tsc__lbl { color: var(--brass); }
.tsc__seg.is-on .tsc__track { border-bottom-color: rgba(var(--brass-rgb), .7); }