/* =========================================================================
   ПРОТОТИП №6 — хронология простоев.
   Панель-объяснение (общая для прототипов №2–№6) + стили нового экрана.
   ========================================================================= */

/* ------------------------ Панель-объяснение ------------------------------ */
.stage{gap:32px}
.proto-panel{
  width:360px;max-height:852px;overflow-y:auto;scrollbar-width:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:24px;color:#E7EAEE;flex:0 0 auto;
}
.proto-panel::-webkit-scrollbar{display:none}
.proto-panel__eyebrow{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  color:#8CABCD;margin-bottom:6px}
.proto-panel__title{font-size:22px;font-weight:600;line-height:1.25;color:#fff}
.proto-panel__lead{font-size:13px;font-weight:400;line-height:1.5;color:#B8BFC8;margin:8px 0 0}
.proto-panel__now{
  margin-top:16px;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:500;
  background:rgba(74,134,199,.16);border:1px solid rgba(74,134,199,.45);color:#BBD6F2;
}
.proto-panel__now b{color:#fff;font-weight:600}
.proto-panel__section{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:#7E8894;margin:20px 0 10px}
.proto-flow{
  display:flex;gap:10px;padding:10px 12px;border-radius:10px;margin-bottom:6px;
  font-size:12.5px;line-height:1.5;color:#C7CDD5;border:1px solid transparent;
  transition:background .25s ease,border-color .25s ease;
}
.proto-flow b{color:#fff;font-weight:600}
.proto-flow__num{
  width:20px;height:20px;border-radius:50%;flex:0 0 20px;margin-top:1px;
  background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:#fff;
}
.proto-flow--active{background:rgba(74,134,199,.14);border-color:rgba(74,134,199,.5)}
.proto-flow--active .proto-flow__num{background:#4A86C7}
.proto-panel__list{margin:0;padding:0 0 0 16px;display:flex;flex-direction:column;gap:8px;
  font-size:12.5px;line-height:1.5;color:#C7CDD5}
.proto-panel__list b{color:#fff;font-weight:600}
.proto-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#4A86C7;
  box-shadow:0 0 6px rgba(74,134,199,.8);margin-right:4px;vertical-align:baseline}
@media (max-width:1150px){.proto-panel{display:none}}

/* ==========================================================================
   Новый экран хронологии
   ========================================================================== */

/* Строка состояния: слева текущее значение оси, справа — что именно.
   Строка ВСЕГДА одна: значение не переносится, а прокручивается по
   горизонтали. `margin-left:auto` на внутреннем span'е прижимает короткое
   значение вправо и при этом оставляет длинное прокручиваемым от начала
   (justify-content:flex-end в скролл-контейнере обрезал бы начало). */
.dtp-status{display:flex;align-items:center;gap:8px;margin-top:10px}
.dtp-status__t{flex:0 0 auto;white-space:nowrap}
/* Значение — мельче и бледнее подписи слева: p3m цветом text600, тот же
   кегль и тон, что у второй строки событий ленты. Точки у подписи нет:
   состояние читается самим словом и его цветом. */
.dtp-status__v{
  flex:1;min-width:0;display:flex;overflow-x:auto;color:var(--text600);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.dtp-status__v::-webkit-scrollbar{display:none}
/* flex:0 0 auto обязателен: иначе span сжимается по контейнеру, текст
   вылезает из его бокса и контейнер не считает себя прокручиваемым. */
.dtp-status__v > span{flex:0 0 auto;white-space:nowrap;margin-left:auto}
/* Значение, которое не влезло, тает у правой кромки — иначе обрыв текста
   читается как дефект, а не как «здесь можно проскроллить». Класс вешает
   dtpMarkScrollable(): чистым CSS переполнение не определить. */
.dtp-status__v.is-scrollable{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
}

/* --- Каркас экрана -------------------------------------------------------
   Шапка (заголовок + таймлайн) и слайдер закреплены, скроллится только
   лента событий — у неё собственный скроллбар, как на эскизе. */
.dtp-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:12px 12px 0}
.dtp-head{flex:0 0 auto}
.dtp-feedwrap{flex:1;min-height:0;position:relative;display:flex;margin-top:8px}
.dtp-feed{flex:1;min-height:0;overflow-y:auto;margin:0;padding:8px}
.dtp-feed::-webkit-scrollbar{width:4px}
.dtp-feed::-webkit-scrollbar-thumb{background:var(--text500);border-radius:2px}
.dtp-feed::-webkit-scrollbar-track{background:transparent}
/* Рамка ленты — чёткая: карточка не растворяется в фоне. Размывается
   СОДЕРЖИМОЕ у нижней кромки, внутри рамки. */
.dtp-feed__fade{
  /* Вплотную к нижней кромке карточки: любой отступ снизу оставлял бы
     полоску неразмытого контента. Справа отступаем на скроллбар. */
  position:absolute;left:0;right:6px;bottom:0;height:40px;pointer-events:none;
  border-radius:0 0 12px 12px;backdrop-filter:blur(2.5px);
  background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.92) 72%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 60%);
  mask-image:linear-gradient(180deg,transparent 0,#000 60%);
}
.dtp-foot{flex:0 0 auto;padding-top:12px;padding-bottom:96px}

/* Разделитель дат в ленте событий: линия с датой по центру */
.dtp-sep{position:relative;display:flex;align-items:center;justify-content:center;
  height:28px;margin:2px 0}
.dtp-sep::before{content:'';position:absolute;left:8px;right:8px;top:50%;height:1px;
  background:var(--text300)}
.dtp-sep span{position:relative;padding:0 10px;background:#fff;
  font-size:12px;font-weight:500;line-height:1.35;color:var(--text600)}

/* Строка события: к базовой .dt-ev клона добавляется красный
   восклицательный знак справа у «тревожных» типов. Содержимое строки
   выравнивается по верху (подписи бывают в две строки), но цветная риска
   ТЯНЕТСЯ на всю высоту блока текста — иначе у неё нулевая высота. */
.dtp-ev{align-items:flex-start}
.dtp-ev .dt-ev__bar{align-self:stretch}
.dtp-ev__alert{flex:0 0 18px;display:flex;align-items:center;padding-top:2px}
/* Инлайновая иконка типа (ключ у ТО): красится currentColor, чтобы вести
   себя так же, как маски icon() у остальных типов. */
.dtp-ev__ic{display:inline-flex;color:var(--text600)}

/* Плашка времени над слайдером (на макете она есть и сверху, и снизу).
   Нижняя — на БЕЛОМ фоне, как и дорожка слайдера. */
.dtp-bubble-row{position:relative;height:26px;margin-bottom:2px}
.dtp-bubble-row .dt-bubble{--w:150px;background:#fff;color:var(--text900)}
.tl-sel--white input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(#fff,#fff) no-repeat center / calc(100% - 20px) 4px;
}

/* Заглушка экрана «Аналитика трека» */
.dtp-stub{
  margin:12px 0;border:1.5px dashed var(--text400);border-radius:12px;
  padding:28px 20px;display:flex;flex-direction:column;align-items:center;
  text-align:center;background:rgba(255,255,255,.55);
}
.dtp-stub img{width:96px;height:96px;object-fit:contain}
.dtp-stub__title{margin-top:14px;font-size:16px;font-weight:600;line-height:1.35}
.dtp-stub__text{margin-top:8px;font-size:13px;font-weight:400;line-height:1.5;
  color:var(--text700);max-width:280px}