/* Панель «Маршрут» (features/route.js) — вертикальный таймлайн аудио-пути. Только
   внутренности; контейнер-шторку, стекло и жест-осадку держит .sheet (sheets.css).
   dev-оверлей admin-only: моно под цифры/хосты, цвет-код латентности, тап-этап → код. */

#route-scroll {
  --rt-good: #35d0a5; --rt-warn: #f5b544; --rt-bad: #ff5d6c;
  --rt-txt: #f4f4f6; --rt-txt2: #a7a7ad; --rt-txt3: #6d6d74;
  --rt-line: rgba(255, 255, 255, .08); --rt-surf: #141416;
  --rt-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
}

.rt-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 10px; }
.rt-chip { font: 500 11px/1 var(--rt-mono); padding: 5px 8px; border-radius: 7px; background: var(--rt-surf); color: var(--rt-txt2); border: 1px solid var(--rt-line); font-variant-numeric: tabular-nums; }
.rt-chip--src { background: var(--accent-tint); color: var(--accent-soft); border-color: rgba(94, 144, 255, .3); margin-right: auto; }
.rt-chip.rt-good { color: var(--rt-good); } .rt-chip.rt-warn { color: var(--rt-warn); } .rt-chip.rt-bad { color: var(--rt-bad); }

.rt-segs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.rt-seg { display: inline-flex; gap: 2px; background: var(--rt-surf); border: 1px solid var(--rt-line); border-radius: 9px; padding: 3px; }
.rt-seg button { all: unset; font: 500 11.5px/1 inherit; color: var(--rt-txt2); padding: 6px 11px; border-radius: 6px; cursor: pointer; min-height: 30px; display: flex; align-items: center; transition: background .16s ease, color .16s ease; }
.rt-seg button[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent-soft); }
.rt-seg button:active { transform: scale(.97); }

.rt-tl { position: relative; padding: 6px 0 2px; }
.rt-node { position: relative; padding: 8px 0 8px 26px; }
.rt-node::before { content: ""; position: absolute; left: 3px; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--rt-dot, var(--accent)); box-shadow: 0 0 0 3px rgba(0, 0, 0, .6); }
.rt-node:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 22px; bottom: -8px; width: 1.5px; background: linear-gradient(var(--rt-line), transparent); }
.rt-row, .rt-herocard { cursor: pointer; }
.rt-row { display: flex; align-items: center; gap: 8px; }
.rt-row:active, .rt-herocard:active, .rt-part:active { transform: scale(.994); }
.rt-mainc { min-width: 0; }
.rt-lbl { font-size: 13px; font-weight: 500; color: var(--rt-txt); }
.rt-sub { font: 500 11px/1.3 var(--rt-mono); color: var(--rt-txt3); margin-top: 2px; word-break: break-word; }
.rt-ms { margin-left: auto; font: 600 12px/1 var(--rt-mono); padding: 4px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-ms.rt-good { color: var(--rt-good); background: rgba(53, 208, 165, .15); }
.rt-ms.rt-warn { color: var(--rt-warn); background: rgba(245, 181, 68, .15); }
.rt-ms.rt-bad { color: var(--rt-bad); background: rgba(255, 93, 108, .15); }
.rt-caret { color: var(--rt-txt3); font-size: 11px; transition: transform .2s ease; }
.rt-row[aria-expanded="true"] .rt-caret { transform: rotate(90deg); }

.rt-herocard { background: var(--rt-surf); border: 1px solid var(--rt-line); border-radius: 12px; padding: 11px 12px; }
.rt-herotop { display: flex; align-items: center; gap: 8px; }
.rt-herotop .rt-lbl { font-size: 12.5px; font-weight: 600; }
.rt-live { margin-left: auto; font: 700 13px/1 var(--rt-mono); color: var(--rt-warn); font-variant-numeric: tabular-nums; }
.rt-bar { height: 12px; border-radius: 6px; background: #1f1f23; margin-top: 10px; overflow: hidden; }
.rt-grow { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--rt-warn); transition: width .05s linear; }
.rt-parts { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.rt-partshead { font: 500 10px/1.3 var(--rt-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rt-txt3); }
.rt-part { cursor: pointer; }
.rt-partrow { display: flex; align-items: center; gap: 8px; }

/* Реальный этап: пропорциональный бар (ширина в %) + разбивка (сервер/дорога, бар в px). */
.rt-nbar { height: 6px; border-radius: 4px; background: #1f1f23; margin-top: 8px; overflow: hidden; }
.rt-nbar > span { display: block; height: 100%; border-radius: 4px; }
.rt-brk { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; padding-left: 1px; }
.rt-brkrow { display: flex; align-items: center; gap: 8px; }
.rt-note { font: 500 11px/1.4 var(--rt-mono); color: var(--rt-warn); background: rgba(245, 181, 68, .10); border: 1px solid rgba(245, 181, 68, .25); border-radius: 8px; padding: 7px 9px; margin-bottom: 8px; }
.rt-pbar { height: 7px; border-radius: 4px; flex: none; }
.rt-plbl { font: 500 11px/1.3 var(--rt-mono); color: var(--rt-txt2); min-width: 0; }
.rt-pms { margin-left: auto; font: 600 11px/1 var(--rt-mono); white-space: nowrap; }

.rt-drill[hidden] { display: none; }
.rt-drillin { background: #0b0b0c; border: 1px solid var(--rt-line); border-radius: 11px; padding: 11px 12px; margin: 6px 0 2px; }
.rt-node > .rt-drill > .rt-drillin { margin-left: 0; }
.rt-k { font: 500 10px/1 var(--rt-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rt-txt3); }
.rt-code { font: 500 11.5px/1.5 var(--rt-mono); color: var(--accent-soft); margin: 4px 0 8px; word-break: break-word; }
.rt-what { font-size: 12px; color: var(--rt-txt); line-height: 1.5; }
.rt-lever { font-size: 12px; color: var(--rt-txt2); line-height: 1.5; margin-top: 6px; }
.rt-lever b { color: var(--rt-warn); font-weight: 600; }
.rt-liverow { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
.rt-kv { font: 500 10.5px/1 var(--rt-mono); padding: 5px 7px; border-radius: 6px; background: var(--rt-surf); color: var(--rt-txt2); border: 1px solid var(--rt-line); }
.rt-kv b { color: var(--accent-soft); font-weight: 600; }

.rt-detail { display: none; flex-direction: column; gap: 5px; margin: 8px 0 2px; }
#sheet-route.route--detail .rt-detail { display: flex; }
.rt-drow { display: flex; align-items: center; gap: 8px; font: 500 11px/1.3 var(--rt-mono); color: var(--rt-txt2); background: #0b0b0c; border: 1px solid var(--rt-line); border-radius: 8px; padding: 7px 9px; }
.rt-dtxt { min-width: 0; word-break: break-word; } .rt-dt { margin-left: auto; color: var(--rt-txt3); white-space: nowrap; }
.rt-dot--good { color: var(--rt-good); } .rt-dot--bad { color: var(--rt-bad); } .rt-dot--skip { color: var(--rt-txt3); }

.rt-recent { display: none; flex-direction: column; gap: 6px; }
#sheet-route.route--rec .rt-recent { display: flex; }
#sheet-route.route--rec #route-tl, #sheet-route.route--rec .rt-head { display: none; }
.rt-rrow { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: var(--rt-surf); border: 1px solid var(--rt-line); border-radius: 12px; cursor: pointer; min-height: 44px; }
.rt-rrow:active { transform: scale(.99); }
.rt-rmain { min-width: 0; } .rt-rt { font-size: 13px; font-weight: 500; color: var(--rt-txt); }
.rt-ra { font: 500 11px/1.3 var(--rt-mono); color: var(--rt-txt3); margin-top: 1px; }
.rt-rrow .rt-chip { margin-left: auto; }

.rt-empty { color: var(--rt-txt3); font-size: 12.5px; text-align: center; padding: 24px 8px; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) { .rt-grow { transition: none; } .rt-caret, .rt-seg button { transition: none; } }