/* © SNDR FX 2026 — All rights reserved · проприетарный код, копирование запрещено */
/* ───────────── Рабочие области (3 полноэкранных слайда) ───────────── */

.ws-viewport {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.ws-track {
  height: 100%;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  /* NB: без постоянного will-change — лишний композитный слой на 3
     полноэкранных слайда жрал память; хинт ставит JS transiently на слайд */
}
.ws-screen {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ws-screen .main {
  flex: 1;
  min-height: 0;
  height: 100%;
}

/* ───────────── Автоскрытие шапки на слайдах 1–3 ───────────── */
/* На скринере (слайд 0) шапка всегда видна; на слайдах 1–2 она схлопывается
   высотой в 0 (место отдаётся рабочей области — ровно, без сдвигов)
   и никак не вызывается: возврат — стрелками ↑/↓, свайпом или точками.
   NB: схлопывание именно высотой, а не отрицательным margin — margin
   во flex-колонке давал сдвиг слайда вверх на 30px (шапка слайда резалась,
   снизу оставалась мёртвая зона). */
.app .header {
  max-height: 54px; /* реальная высота ~40px, запас под шрифтовые различия */
  /* Геометрия схлопывается МГНОВЕННО (без transition на размеры): иначе
     вьюпорт растёт 150мс прямо во время свайпа — окна тянутся, а тик
     посреди анимации дорисовывает промежуточный размер и даёт щелчок.
     Плавно гаснут только opacity и рамка. */
  transition: opacity 0.12s ease, border-bottom-color 0.15s ease;
}
.app.ws-full .header {
  max-height: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
  /* border-bottom-color анимируется (0.15s), но ширина рамки 1px
     остаётся в box-model и оставляет линию даже прозрачной.
     Обнуляем сразу, чтобы не было артефакта */
  border-bottom-width: 0;
  border-bottom-color: transparent;
  overflow: hidden;
}
/* кнопка-бургер сайдбара убирается вместе с шапкой
   (на слайдах 1–2 сайдбара нет) */
.collapse-btn {
  transition: color var(--transition), filter var(--transition),
              transform var(--transition), opacity 0.12s ease;
}
.app.ws-full .collapse-btn {
  opacity: 0;
  pointer-events: none;
}

/* ── слайд 2: мульти-ТФ ── */
.multi-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 8px;
  background: var(--panel-tint);
  overflow: hidden;
}
.multi-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
}
.multi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 4px 8px;
  cursor: pointer;
}
.multi-card:hover { border-color: var(--border-light); }
.multi-tf {
  /* шрифт как у основного бара выбора ТФ: Inter 10px/500, верхний регистр.
     Цвет оставлен акцентным — метка обозначает ТФ карточки */
  font-family: var(--font);
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.multi-wrap { flex: 1; min-height: 60px; position: relative; }
.multi-wrap canvas { position: absolute; inset: 0; display: block; cursor: crosshair; }

/* ── слайд 3: пустая область (контент позже) ── */
.term-panel {
  flex: 1;
  min-height: 0;
  background: var(--panel-tint);
  overflow: hidden;
}

@media (max-width: 900px) {
  .multi-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); overflow-y: auto; }
}

/* ── низкие экраны (≤900px по высоте): слайду 2 меньше полей ── */
@media (max-height: 900px) {
  .multi-panel { padding: 8px; gap: 6px; }
}