/* route.css - язык «тракта»: путь клиента как главный предмет экрана, плюс два приёма против
   пластов текста (свёрнутая справка и поле, честно говорящее о последствиях).

   Почему это отдельный файл, а не дописка в ui.css: ui.css держит мебель админки (карточка,
   секция, таблица, чип), а здесь лежит язык, специфичный для ЭТОГО продукта. Мебель универсальна
   и заменяема; тракт - нет, он про то, чем Controller32 занимается. Смешивать их в одном файле
   значит через полгода не понимать, что здесь можно трогать, а что несёт смысл.

   Правило разметки: рельс прямой ВСЕГДА. Всё, что может его изогнуть (длинное имя ноды в две
   строки), обрезается многоточием. Кривой рельс перестаёт читаться как маршрут и превращается в
   набор подписей, то есть теряет ровно то, ради чего рисуется. */

/* ---- Тракт ---- */
.route{--rt:var(--line-mid)}
.route__title{font:600 11px var(--f-ui);letter-spacing:1.1px;text-transform:uppercase;color:var(--accent2-dim);margin-bottom:var(--s-5)}
/* Прокрутка по горизонтали, а не перенос: маршрут из пяти станций на узком экране обязан
   остаться маршрутом. Перенесённый на вторую строку тракт читается как два разных пути. */
.route__rail{display:flex;align-items:start;overflow-x:auto;padding-bottom:2px}
.route__rail::-webkit-scrollbar{height:6px}

/* Станция и перегон делят ОДНУ сетку строк: имя, полоса рельса, подпись. Только поэтому кольца
   и линии оказываются на одной высоте без единой магической константы сверху. */
.route__st,.route__leg{display:grid;grid-template-rows:auto 18px auto;justify-items:center}
.route__st{flex:0 0 auto;max-width:170px;min-width:64px;padding:0 var(--s-2)}
.route__leg{flex:1 1 44px;min-width:30px;align-self:start}

.route__name{grid-row:1;align-self:end;font:600 12.5px var(--f-ui);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-bottom:5px}
.route__sub{grid-row:3;font:500 11px var(--f-mono);color:var(--text-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-top:5px;text-align:center}

/* Кольцо, а не заливка: заливка читается как кнопка, кольцо - как точка на маршруте. */
.route__ring{grid-row:2;align-self:center;position:relative;display:block;width:11px;height:11px;border-radius:var(--r-pill);border:2px solid var(--rt);background:var(--canvas);box-shadow:0 0 0 4px var(--canvas)}
/* Ядро только у СВОЕЙ станции. По нему видно, где кончается хозяйство владельца и начинается
   чужое: у оператора CDN и у интернета ядра нет, чинить их нельзя и обещать за них тоже. */
.route__st.is-ours .route__ring::after{content:'';position:absolute;inset:2px;border-radius:var(--r-pill);background:var(--rt)}

.route__line{grid-row:2;align-self:center;position:relative;display:block;width:100%;height:2px;border-radius:1px;background:var(--rt)}
.route__leglbl{grid-row:3;font:500 10.5px var(--f-mono);color:var(--text-faint);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* Состояния. «Не измеряли» и «всё хорошо» нарисованы РАЗНЫМ, а не одним бледным: серый пунктир
   говорит «не знаю», и это честный ответ; сплошная зелёная на непроверенном участке была бы
   враньём, которое владелец примет за проверку. */
.route__st--ok{--rt:var(--accent)}
.route__st--warn{--rt:var(--warn)}
.route__st--risk{--rt:var(--risk)}
.route__st--idle{--rt:var(--line-strong)}
.route__st--unknown{--rt:var(--line-strong)}
.route__leg--ok{--rt:var(--accent-deep)}
.route__leg--warn{--rt:var(--warn)}
.route__leg--risk{--rt:var(--risk)}
.route__leg--idle{--rt:var(--line-mid)}
.route__leg--unknown{--rt:var(--line-mid)}
.route__leg--unknown .route__line,.route__leg--idle .route__line{background:none;background-image:repeating-linear-gradient(90deg,var(--rt) 0 4px,transparent 4px 9px)}
/* Разрыв виден без чтения подписи: линия рвётся точками и получает крест посередине. */
.route__leg--risk .route__line{background:none;background-image:repeating-linear-gradient(90deg,var(--rt) 0 3px,transparent 3px 7px)}
.route__leg--risk .route__line::before{content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;transform:translate(-50%,-50%) rotate(45deg);border-left:2px solid var(--risk);border-bottom:2px solid var(--risk)}
.route__leg--risk .route__leglbl{color:var(--risk-text)}

/* Поток только на живом перегоне: бегущая штриховка читается как «трафик идёт», и пустить её
   по непроверенному участку значит показать движение, которого никто не мерил. */
.route__leg.is-flow .route__line::after{content:'';position:absolute;inset:0;border-radius:1px;background-image:repeating-linear-gradient(90deg,var(--accent) 0 9px,transparent 9px 26px);background-size:26px 100%;animation:c32legflow 1.15s linear infinite}
@keyframes c32legflow{to{background-position:26px 0}}

.route__note{margin:var(--s-5) 0 0;font-size:12.5px;color:var(--text-muted);text-wrap:pretty}
.route--compact .route__name{font-size:11.5px}
.route--compact .route__st{max-width:130px}

/* ---- Свёрнутая справка ---- */
/* Нативный <details>: открывается с клавиатуры и находится поиском по странице. Свой аккордеон
   на div-ах ломает и то, и другое, а выглядит так же. */
.fold{margin-top:var(--s-4)}
.fold__sum{list-style:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font:500 12px var(--f-ui);color:var(--accent-soft);padding:3px 0;user-select:none}
.fold__sum::-webkit-details-marker{display:none}
.fold__sum:hover{color:var(--link-hover)}
.fold__mark{display:block;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease;margin-top:-2px}
.fold[open] .fold__mark{transform:rotate(45deg);margin-top:-3px}
.fold__body{margin-top:var(--s-4);padding-left:var(--s-5);border-left:1px solid var(--line);font-size:12.5px;color:var(--text-muted);line-height:1.55;text-wrap:pretty}
.fold__body ol,.fold__body ul{margin:0;padding-left:18px}
.fold__body li{margin-bottom:5px}
.fold__body li:last-child{margin-bottom:0}
.fold__body code{font:500 11.5px var(--f-mono);color:var(--text-3);background:var(--chip);border-radius:var(--r-key);padding:1px 5px}

/* ---- Поле настройки ---- */
.fld{display:block;margin-bottom:var(--s-8)}
.fld__lbl{display:block;font:600 12.5px var(--f-ui);color:var(--text-2);margin-bottom:var(--s-3)}
.fld__hint{display:block;font-size:12px;color:var(--text-dim);margin-top:var(--s-3);text-wrap:pretty}
/* «Что должно быть готово ДО применения» - отдельная строка со своим знаком, а не часть подсказки.
   Настройка чаще валится не из-за неверного значения в поле, а из-за того, что снаружи не сделано
   то, без чего значение бессмысленно: нет A-записи, закрыт порт, роль не выдана. Раньше владелец
   узнавал об этом из провалившейся джобы, потратив на неё несколько минут и ноду. */
.fld__need{display:flex;gap:8px;align-items:start;margin-top:var(--s-4);padding:7px 10px;border-radius:var(--r-plate);background:var(--warn-tint);border-left:2px solid var(--warn-line);font-size:12px;color:var(--text-3);line-height:1.5;text-wrap:pretty}
.fld__needmark{flex:0 0 auto;width:6px;height:6px;margin-top:6px;border-radius:2px;background:var(--warn);transform:rotate(45deg)}
.fld--wide{grid-column:1/-1}