/* ============================================================================
   timeline.css — лента событий МТК, общий модуль (README.md).

   Границы:
   — цвет только из design-core (tokens.css): сырого hex нет, полупрозрачности —
     канальными токенами rgba(var(--x-rgb), a). Цвет дорожки — параметр `tones`
     (предметный слой приложения) → переменные --tl-c1/--tl-c2 на строке;
   — метрики тача из kiosk-core с ЗАПАСОМ: var(--touch-min, 64px) — запас для
     метрики обязателен (без него var() гасит объявление целиком);
   — :hover нет нигде — киоск тач, только :active;
   — вёрстка ОТ КОНТЕЙНЕРА: доли и fr, ни одного px экрана 3840. Кегли — база
     1920 × --content-scale (регулятор оператора и a11y ядра работают сами).

   ПЕРЕМЕННЫЕ ПОТРЕБИТЕЛЯ (задаются на .tl или выше; у модуля — только запас в var()):
     --tl-date-w   ширина колонки даты строки, раскладка А (0.2.0, Т2 МТК-32); умолч. 9em
   ============================================================================ */

.tl {
  --tl-cs: var(--content-scale, 1);
  --tl-gap: calc(16px * var(--tl-cs));
  --tl-pad: calc(18px * var(--tl-cs));
  --tl-r: calc(10px * var(--tl-cs));
  --tl-t-body: max(var(--type-min-label, 24px), calc(25px * var(--tl-cs)));
  --tl-t-cap: max(var(--type-min-label, 24px), calc(21px * var(--tl-cs)));
  --tl-t-h: calc(36px * var(--tl-cs));
  --tl-edge: calc(6px * var(--tl-cs));
  --tl-sb-w: 18px;
  --tl-thumb-min: var(--touch-min, 64px);
  position: relative;
  box-sizing: border-box;
  width: 100%; height: 100%; min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--tl-gap);
  color: var(--text-on-dark);
  font-family: var(--font-text);
  font-size: var(--tl-t-body);
}
.tl *, .tl *::before, .tl *::after { box-sizing: border-box; }
.tl [hidden] { display: none !important; }
.tl p { margin: 0; }

/* ── ШАПКА: обзор масштабов (график) + плашки ───────────────────────────── */
.tl__head { display: flex; flex-direction: column; gap: calc(var(--tl-gap) / 2); min-width: 0; }
.tl__ov {
  display: grid;
  grid-template-columns: repeat(var(--tl-ov-n, 1), minmax(0, 1fr));
  gap: var(--touch-gap, 16px);
}
.tl-ov {
  min-height: var(--touch-primary, 96px);
  height: calc(150px * var(--tl-cs));
  padding: calc(12px * var(--tl-cs)) calc(16px * var(--tl-cs)) calc(10px * var(--tl-cs));
  display: flex; flex-direction: column; justify-content: space-between; gap: calc(6px * var(--tl-cs));
  border: 0; border-radius: var(--tl-r); text-align: left;
  background: rgba(var(--amber-black-rgb), 0.18); color: var(--text-on-dark);
  font: inherit; cursor: pointer;
}
.tl-ov.is-on { background: rgba(var(--brass-rgb), 0.14); box-shadow: inset 0 calc(-4px * var(--tl-cs)) 0 var(--active); }
.tl-ov:active { background: rgba(var(--brass-rgb), 0.22); }
.tl-ov.is-dead { opacity: 0.4; }
.tl-ov__bars { flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-end; gap: 2px; }
.tl-ov__bar { flex: 1 1 0; min-width: 1px; background: rgba(var(--paper-rgb), 0.42); }
.tl-ov__bar.is-zero { background: rgba(var(--paper-rgb), 0.14); }
.tl-ov__bar.is-span { height: 30% !important; background: rgba(var(--paper-rgb), 0.24); }
.tl-ov__bar.is-gap {
  background: repeating-linear-gradient(135deg, rgba(var(--paper-rgb), 0.32) 0 3px, transparent 3px 7px);
  height: 100% !important;
}
.tl-ov.is-on .tl-ov__bar:not(.is-zero):not(.is-gap):not(.is-span) { background: var(--active); }
.tl-ov__bar.is-now { outline: 3px solid var(--paper); outline-offset: 2px; }
.tl-ov__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tl-gap); min-width: 0; }
.tl-ov__l {
  font-family: var(--font-caption); font-size: var(--tl-t-cap); letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.tl-ov__n { flex: 0 0 auto; font-family: var(--font-caption); font-size: var(--tl-t-cap); color: var(--text-muted); }
.tl-ov.is-on .tl-ov__l, .tl-ov.is-on .tl-ov__n { color: var(--active); }

.tl__notes { display: flex; align-items: center; gap: var(--tl-gap); min-height: 0; }
.tl__notes.is-on { min-height: var(--touch-min, 64px); }
.tl__untr { font-family: var(--font-caption); font-size: var(--tl-t-cap); color: var(--text-muted); }
.tl__plate {
  min-height: var(--touch-min, 64px); padding: 0 calc(12px * var(--tl-cs)) 0 calc(24px * var(--tl-cs));
  display: inline-flex; align-items: center; gap: calc(14px * var(--tl-cs));
  border: 0; border-radius: calc(var(--touch-min, 64px) / 2);
  background: var(--active); color: var(--text-on-light);
  font-family: var(--font-caption); font-size: max(var(--type-min-ui, 32px), var(--tl-t-cap));
  letter-spacing: 0.04em; cursor: pointer;
}
.tl__plate:active { filter: brightness(1.1); }
.tl__plate-x {
  width: calc(44px * var(--tl-cs)); height: calc(44px * var(--tl-cs)); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--graphite-rgb), 0.18);
}

/* ── ПОЛЕ: А — лента | скролл | слот+материал; Б — колонка | центр | колонка ── */
.tl__field { min-height: 0; min-width: 0; display: grid; gap: var(--tl-gap); }
.tl[data-tl-layout="A"] .tl__field {
  grid-template-columns: minmax(0, 40fr) var(--tl-sb-w) minmax(0, 58fr);
  grid-template-rows: minmax(0, 1fr);
}
.tl[data-tl-layout="B"] .tl__field {
  /* колонки — из JS по числу дорожек: (1fr)×половина, 1.5fr центр, (1fr)×остаток */
  grid-template-rows: auto minmax(0, 1fr);
}
.tl[data-tl-layout="B"] .tl__strip { grid-column: 1 / -1; }
.tl[data-tl-layout="B"] .tl__col { grid-row: 2; }

.tl__ribw { min-height: 0; display: flex; flex-direction: column; gap: calc(var(--tl-gap) / 2); }
.tl__ribh, .tl__colh {
  flex: 0 0 auto; min-height: calc(48px * var(--tl-cs));
  display: flex; align-items: center; justify-content: space-between; gap: var(--tl-gap);
  font-family: var(--font-caption); font-size: var(--tl-t-cap); letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1.5px solid rgba(var(--brass-rgb), 0.35);
}
.tl__ribh span:first-child { color: var(--active); }
.tl__ribh span:last-child, .tl__colh span:last-child { color: var(--text-muted); }
.tl__colh { justify-content: flex-start; }
.tl__colh span:last-child { margin-left: auto; }
.tl__colh b { width: calc(18px * var(--tl-cs)); height: calc(18px * var(--tl-cs)); border-radius: 50%; background: var(--tl-c1); flex: 0 0 auto; }

.tl__rib {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--touch-gap, 16px);   /* зазор соседних целей тача */
  scrollbar-width: none;
}
.tl__rib::-webkit-scrollbar { display: none; }

.tl__col { min-height: 0; display: flex; flex-direction: column; gap: calc(var(--tl-gap) / 2); }
.tl__colw { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--tl-sb-w); gap: calc(var(--tl-gap) / 2); }
.tl__colw .tl__rib { height: 100%; }

/* Скроллбар — виден всегда (DESIGN-CODE §3): 18, латунь на полупрозрачном треке. */
.tl__sb { position: relative; width: var(--tl-sb-w); min-height: 0; border-radius: 9px; background: rgba(var(--paper-rgb), 0.08); }
.tl__sb i { position: absolute; left: 0; right: 0; top: 0; height: var(--tl-thumb-min); border-radius: 9px; background: var(--active); }
.tl__sb.is-idle i { opacity: 0.35; }

/* Группа — блок: заголовок липнет только внутри своей группы (контейнер
   липкости — родитель), следующая группа его выталкивает. */
.tl-gsec { flex-shrink: 0; display: flex; flex-direction: column; gap: var(--touch-gap, 16px); }

/* Заголовок группы — липкий. */
.tl-grp {
  position: sticky; top: 0; z-index: 1; flex: 0 0 auto;
  min-height: calc(46px * var(--tl-cs)); padding: calc(10px * var(--tl-cs)) 0 calc(6px * var(--tl-cs));
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--tl-gap);
  background: var(--bg, var(--graphite));
  font-family: var(--font-caption); font-size: var(--tl-t-cap); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
}
.tl-grp__here { color: var(--active); letter-spacing: 0.04em; }

/* ── СТРОКА ─────────────────────────────────────────────────────────────── */
.tl-row {
  flex-shrink: 0;
  min-height: var(--touch-min, 64px);
  display: grid; grid-template-columns: minmax(0, var(--tl-date-w, 9em)) minmax(0, 1fr) auto;   /* Т2: колонка даты — переменная потребителя */
  gap: calc(18px * var(--tl-cs));
  padding: var(--tl-pad) var(--tl-pad) var(--tl-pad) calc(var(--tl-pad) + var(--tl-edge) * 1.5);
  border-radius: var(--tl-r);
  background-color: rgba(var(--amber-black-rgb), 0.16);
  box-shadow: inset var(--tl-edge) 0 0 var(--tl-c1, var(--text-muted));
  cursor: pointer;
  font-size: var(--tl-t-body);
}
.tl-row.is-both { box-shadow: inset var(--tl-edge) 0 0 var(--tl-c1), inset calc(var(--tl-edge) * 2) 0 0 var(--tl-c2); padding-left: calc(var(--tl-pad) + var(--tl-edge) * 2.5); }
.tl-row:active { background-color: rgba(var(--brass-rgb), 0.2); }
.tl-row.is-sel { background-color: rgba(var(--brass-rgb), 0.14); outline: 2px solid var(--active); outline-offset: -2px; }
.tl-row__dt {
  display: flex; flex-direction: column; gap: calc(4px * var(--tl-cs));
  font-family: var(--font-caption); font-size: var(--tl-t-cap); color: var(--active); line-height: 1.2;
}
.tl-row__t { color: var(--text-on-dark); }
.tl-row__dual { color: var(--text-on-dark); font-size: max(var(--type-min-label, 24px), calc(18px * var(--tl-cs))); }
.tl-row__span, .tl-row__alt { color: var(--text-muted); font-size: max(var(--type-min-label, 24px), calc(18px * var(--tl-cs))); }
.tl-row__tx { min-width: 0; line-height: 1.3; display: flex; flex-direction: column; gap: calc(8px * var(--tl-cs)); }
.tl-row__tx p + p { margin-top: calc(6px * var(--tl-cs)); }
.tl-row__part { padding-left: calc(12px * var(--tl-cs)); border-left: 3px solid var(--tl-c1); }
.tl-row__ic { display: flex; gap: calc(10px * var(--tl-cs)); align-items: flex-start; color: var(--text-muted); }
.tl-ic svg { width: calc(30px * var(--tl-cs)); height: calc(30px * var(--tl-cs)); display: block; fill: var(--active); }
.tl-ic svg.is-line { fill: none; stroke: currentColor; stroke-width: 1.8; }
.tl-ic.is-word { font-family: var(--font-caption); font-size: var(--tl-t-cap); }

/* Б: колонка узкая — дата строкой над текстом, а не столбцом слева. */
.tl[data-tl-layout="B"] .tl__col .tl-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: calc(8px * var(--tl-cs)); }
.tl[data-tl-layout="B"] .tl__col .tl-row__dt { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; column-gap: calc(14px * var(--tl-cs)); }

/* ВЕХА (вид app-309, кадр design ed0cc96): дата 700 + линейка 3 px латунью сверху. */
.tl-row.is-mile .tl-row__d, .tl-row.is-mile .tl-row__t { font-weight: 700; }   /* у «часов» дата не печатается — время несёт вес (приёмка 7d4a17a) */
.tl-row.is-mile { box-shadow: inset 0 3px 0 var(--active), inset var(--tl-edge) 0 0 var(--tl-c1, var(--text-muted)); }
.tl-row.is-mile.is-both { box-shadow: inset 0 3px 0 var(--active), inset var(--tl-edge) 0 0 var(--tl-c1), inset calc(var(--tl-edge) * 2) 0 0 var(--tl-c2); }

/* Отрезок: пунктир по кромке — точка против протяжённости. */
.tl-row.is-span { background-image: linear-gradient(var(--tl-c1, var(--text-muted)) 50%, transparent 50%); background-size: 2px 12px; background-repeat: repeat-y; background-position: calc(var(--tl-edge) + 6px) 0; }

/* Запись «все дорожки» (обзорная): без кромки дорожки, латунная рамка-пунктир. */
.tl-row.is-all { box-shadow: none; border: 2px dashed rgba(var(--brass-rgb), 0.55); padding-left: var(--tl-pad); }
.tl-row__all { font-family: var(--font-caption); letter-spacing: 0.02em; }

/* Пустота — говорит текстом музея. */
.tl-gap {
  flex-shrink: 0; padding: var(--tl-pad);
  border-radius: var(--tl-r);
  background: repeating-linear-gradient(135deg, rgba(var(--paper-rgb), 0.06) 0 10px, transparent 10px 20px);
  border: 1.5px solid rgba(var(--paper-rgb), 0.18);
  display: flex; flex-direction: column; gap: calc(6px * var(--tl-cs));
}
.tl-gap__d { font-family: var(--font-caption); font-size: var(--tl-t-cap); color: var(--text-muted); }
.tl-gap p { color: var(--text-muted); line-height: 1.3; }

.tl__empty { padding: calc(32px * var(--tl-cs)) var(--tl-pad); color: var(--text-muted); line-height: 1.35; }

/* ── ПРАВАЯ ЧАСТЬ: слот над материалом ──────────────────────────────────── */
.tl__side { min-height: 0; min-width: 0; display: grid; grid-template-rows: minmax(0, 62fr) minmax(0, 38fr); gap: var(--tl-gap); }
.tl[data-tl-layout="B"] .tl__side { grid-row: 2; }
.tl__slot { position: relative; min-height: 0; min-width: 0; overflow: hidden; border-radius: var(--tl-r); background: rgba(var(--amber-black-rgb), 0.22); }
.tl__side.is-wide { grid-template-rows: minmax(0, 1fr); }
.tl__side.is-wide .tl__slot { display: none; }
.tl__mat {
  min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--tl-gap);
  padding: calc(28px * var(--tl-cs)) calc(32px * var(--tl-cs));
  border-radius: var(--tl-r); background: rgba(var(--amber-black-rgb), 0.22);
}
/* Тело прокручивается само; полоса — китовая .kiosk-scroll (видна всегда). */
.tl-mat__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: calc(14px * var(--tl-cs));
  padding-right: calc(8px * var(--tl-cs));
}
.tl-mat__acts { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: var(--touch-gap, 16px); }
.tl-act {
  min-height: var(--touch-primary, 96px); padding: 0 calc(32px * var(--tl-cs));
  border: 2px solid var(--active); border-radius: calc(var(--touch-primary, 96px) / 2); background: transparent;
  font-family: var(--font-caption); font-size: max(var(--type-min-ui, 32px), var(--tl-t-cap)); color: var(--active); cursor: pointer;
}
.tl-act:active { background: rgba(var(--brass-rgb), 0.2); }
.tl-mat__kick {
  display: flex; align-items: center; flex-wrap: wrap; gap: calc(12px * var(--tl-cs));
  font-family: var(--font-caption); font-size: var(--tl-t-cap); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}
.tl-mat__kick b { width: calc(16px * var(--tl-cs)); height: calc(16px * var(--tl-cs)); border-radius: 50%; background: var(--tl-c1); }
.tl-mat__mile { color: var(--active); }
.tl-mat__tx { font-size: calc(28px * var(--tl-cs)); line-height: 1.35; }
.tl__side.is-wide .tl-mat__tx { font-size: var(--tl-t-h); }
.tl-mat__tx[data-part] { padding-left: calc(14px * var(--tl-cs)); border-left: 3px solid var(--tl-c1); }
.tl-mat__tx p + p { margin-top: calc(10px * var(--tl-cs)); }
.tl-mat__q { margin: 0; padding-left: calc(20px * var(--tl-cs)); border-left: 3px solid var(--active); font-style: italic; }
.tl-mat__q footer { margin-top: calc(6px * var(--tl-cs)); font-style: normal; font-family: var(--font-caption); font-size: var(--tl-t-cap); color: var(--text-muted); }
.tl-mat__h { font-family: var(--font-caption); font-size: var(--tl-t-cap); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.tl-mat__alt ul { margin: calc(6px * var(--tl-cs)) 0 0; padding-left: 1.1em; font-size: var(--tl-t-cap); line-height: 1.35; }
.tl-mat__src { font-family: var(--font-caption); font-size: var(--tl-t-cap); color: var(--text-muted); line-height: 1.35; }
.tl-mat__src span { color: var(--text-on-dark); }

.tl-ref { color: var(--active); }
.tl-mat__links { display: flex; flex-wrap: wrap; gap: var(--touch-gap, 16px); }
.tl-link {
  min-height: var(--touch-min, 64px); padding: 0 calc(22px * var(--tl-cs));
  display: inline-flex; align-items: center;
  border: 2px solid var(--active); border-radius: calc(var(--touch-min, 64px) / 2); background: transparent;
  font-family: var(--font-caption); font-size: max(var(--type-min-ui, 32px), var(--tl-t-cap)); color: var(--active); cursor: pointer;
}
.tl-link:active { background: rgba(var(--brass-rgb), 0.2); }

/* ── a11y: контраст без полупрозрачностей; кегли растут через --content-scale ядра ── */
.tl.is-a11y .tl-row, .tl.is-a11y .tl-ov, .tl.is-a11y .tl__mat, .tl.is-a11y .tl__slot { background-color: var(--amber-black); }
.tl.is-a11y .tl-row.is-sel, .tl.is-a11y .tl-ov.is-on { background-color: var(--graphite); }
.tl.is-a11y .tl-ov__bar.is-zero { background: rgba(var(--paper-rgb), 0.3); }
.tl.is-a11y .tl-row__span, .tl.is-a11y .tl-row__alt, .tl.is-a11y .tl-gap p, .tl.is-a11y .tl-grp { color: var(--text-on-dark); }