/* gc-route.css - общий вид «схема трассы» для списков событий (04.10.2026).
   Почерк ленты событий (events.php, 03.10.2026): линия-магистраль, станции, узлы разной формы, отводы с замерами.
   Здесь он вынесен в общий слой, чтобы инциденты кабелей и шатдауны выглядели так же, а не голыми списками.
   Азбука: двойное кольцо = станция (регион, раздел), шестиугольник = кабель, круг = страна, ромб = суша или текст.
   Заливка узла = важность: красный крупное, оранжевый среднее, пустой контур мелкое. Цвета только через переменные темы. */
.gr{--ln:var(--gc-border-strong,#4a5090);--trunk:var(--gc-accent,#4fc3f7);--pg:var(--gc-bg,#1a1f3a);--mut:var(--gc-text-muted,#8a93a6);--txt:var(--gc-text,#e8eaf6);--mono:"IBM Plex Mono",ui-monospace,Consolas,monospace}
.gr-nd{width:16px;height:16px;flex:0 0 16px;vertical-align:-3px;overflow:visible}
/* отбор: он же легенда */
.gr-bar{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;padding:8px 0 9px;border-bottom:1px solid var(--ln);margin:14px 0 0}
.gr-chip{font:inherit;font-size:.9rem;padding:2px 0 3px;border:0;border-bottom:2px solid transparent;background:none;color:var(--txt);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.gr-chip b{font-weight:400;color:var(--mut);font-family:var(--mono);font-size:.82rem}
.gr-chip:hover{border-bottom-color:var(--ln)}
.gr-chip.on{border-bottom-color:var(--trunk);font-weight:700}
.gr-legend{margin-left:auto;display:flex;gap:14px;font-size:.8rem;color:var(--mut);align-items:center;flex-wrap:wrap}
.gr-legend span{display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
/* магистраль и станции */
.gr-line{position:relative;margin-top:4px}
.gr-line::before{content:'';position:absolute;left:11px;top:0;bottom:0;width:2px;background:var(--trunk);opacity:.55}
.gr-sth{position:relative;display:flex;align-items:center;gap:12px;padding:24px 0 6px 36px}
.gr-sth .gr-st{position:absolute;left:2px;top:25px;width:20px;height:20px}
.gr-sth h2,.gr-sth h3{font-size:1.02rem;margin:0;white-space:nowrap;font-weight:600}
.gr-sth i{flex:1;border-top:1px dashed var(--ln);min-width:20px}
.gr-sth span{font-size:.8rem;color:var(--mut);white-space:nowrap;font-family:var(--mono)}
/* событие: узел на магистрали, отвод, подпись */
.gr-card{position:relative;padding:7px 0 7px 36px}
.gr-card>.gr-nd{position:absolute;left:4px;top:11px}
.gr-card::before{content:'';position:absolute;left:20px;top:18px;width:11px;border-top:2px solid var(--trunk);opacity:.55}
.gr-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.gr-tm{font-family:var(--mono);font-size:.84rem;color:var(--mut);white-space:nowrap}
.gr-h a.gr-name{font-weight:700;font-size:1.02rem;text-decoration:none;color:var(--txt)}
.gr-h a.gr-name:hover{text-decoration:underline}
.gr-what{font-size:.94rem}
.lv-major .gr-what{color:#ef5350;font-weight:600}
.lv-mid .gr-what{color:#f59e0b}
.lv-minor .gr-what{color:var(--gc-text-secondary,var(--mut))}
.lv-minor .gr-h a.gr-name{font-weight:500}
/* отвод с замерами: уголок от узла */
.gr-br{position:relative;margin-left:18px;padding:2px 0 2px 20px;font-size:.86rem;color:var(--gc-text-secondary,var(--mut));line-height:1.5;display:flex;flex-wrap:wrap;gap:2px 14px;align-items:center}
.gr-br::before{content:'';position:absolute;left:2px;top:-7px;width:12px;height:19px;border-left:1.5px solid var(--ln);border-bottom:1.5px solid var(--ln)}
.gr-br .gr-mono{font-family:var(--mono);font-size:.82rem;white-space:nowrap}
.gr-br a{text-decoration:none;white-space:nowrap}
.gr-br a:hover{text-decoration:underline}
.gr-br p{margin:0;flex-basis:100%;max-width:74ch}
/* маленький график замеров: линия значений, пунктир нормы, полоса события */
.gr-spark{display:inline-block;vertical-align:middle;line-height:0}
.gr-spark svg{display:block;overflow:visible}
.gr-spark .sp-v{fill:none;stroke:var(--txt);stroke-width:1.3;stroke-linejoin:round;opacity:.85}
.gr-spark .sp-b{stroke:var(--mut);stroke-width:1;stroke-dasharray:3 3}
.gr-spark .sp-e{fill:#ef5350;opacity:.16}
.gr-spark .sp-d{fill:#ef5350}
.gr-end{position:relative;height:18px}
.gr-end::after{content:'';position:absolute;left:7px;bottom:0;width:10px;border-top:2px solid var(--trunk);opacity:.55}
.gr-group[hidden]{display:none}
.gr-note{font-size:.86rem;color:var(--gc-text-secondary,var(--mut));line-height:1.55;margin:10px 0 0;max-width:78ch}
@media(max-width:640px){
  .gr-sth{flex-wrap:wrap;gap:0 10px}.gr-sth i{display:none}.gr-sth h2,.gr-sth h3{white-space:normal}
  .gr-br{margin-left:6px}.gr-legend{margin-left:0}.gr-tm{white-space:normal}
}