/* route-map — токены и монохром как в ticketsviewer (src/styles.css, CONTRACT.md); цвет — только у маршрутов и категорий */
:root{
  color-scheme:light;
  --bg:#FFFFFF; --fg:#000000; --muted:#666666; --line:#E5E5E5; --soft:#F5F5F5; --dim:#A3A3A3; --dim-text:#737373;
  --panel:#FFFFFF; --hover-line:#CFCFCF; --hover-wash:rgba(0,0,0,.05); --press-wash:rgba(0,0,0,.09); --glass:rgba(255,255,255,.94);
  --inv-bg:#000000; --inv-fg:#FFFFFF; --low:#E5484D; --low-wash:rgba(229,72,77,.07); --sh:rgba(0,0,0,.18);
  --cat1:#6A1010; --cat2:#086F81; --cat3:#D31C55; --cat4:#29A9D9; --cat5:#297359; --cat6:#9D5C2F; --cat7:#9D98CA; --cat8:#85898D;
  --r:12px; --r-sm:10px; --r-xs:8px; --side:420px;
  --f:-apple-system,BlinkMacSystemFont,'Inter','Noto Sans Arabic UI','Segoe UI',Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0E1014; --panel:#171A20; --soft:#20242B; --line:#2A2F37; --fg:#F1F3F6; --muted:#A9B1BD; --dim:#5A6270; --dim-text:#8E97A4;
  --hover-line:#3E4550; --hover-wash:rgba(255,255,255,.06); --press-wash:rgba(255,255,255,.11); --glass:rgba(14,16,20,.86);
  --inv-bg:#F1F3F6; --inv-fg:#0E1014; --low:#F2555A; --low-wash:rgba(242,85,90,.12); --sh:rgba(0,0,0,.6);
  --cat1:#945353; --cat2:#127586;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E1014; --panel:#171A20; --soft:#20242B; --line:#2A2F37; --fg:#F1F3F6; --muted:#A9B1BD; --dim:#5A6270; --dim-text:#8E97A4;
  --hover-line:#3E4550; --hover-wash:rgba(255,255,255,.06); --press-wash:rgba(255,255,255,.11); --glass:rgba(14,16,20,.86);
  --inv-bg:#F1F3F6; --inv-fg:#0E1014; --low:#F2555A; --low-wash:rgba(242,85,90,.12); --sh:rgba(0,0,0,.6);
  --cat1:#945353; --cat2:#127586;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 14px/1.45 var(--f);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;-webkit-tap-highlight-color:transparent}
:focus{outline:none}
:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.ic{width:18px;height:18px;fill:currentColor;flex:none}
.ic.sm{width:13px;height:13px;opacity:.6}
.dim{color:var(--dim-text)}

/* шапка */
.hdr{padding:12px 16px 10px;border-bottom:1px solid var(--line);background:var(--bg)}
.h-top{display:flex;align-items:flex-start;gap:12px}
.h-txt{flex:1;min-width:0}
.hdr h1{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.hdr p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.h-chips{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.chip-i{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--soft);color:var(--muted)}
.chip-i.strong{background:var(--inv-bg);color:var(--inv-fg);font-weight:600}
.seg{display:inline-flex;gap:2px;padding:2px;background:var(--soft);border-radius:var(--r-sm);flex:none}
.seg button{border:0;background:transparent;height:28px;padding:0 9px;font-size:12px;font-weight:600;color:var(--muted);border-radius:var(--r-xs);transition:background .15s,color .15s}
.seg button:hover{color:var(--fg)}
.seg button:active{background:var(--press-wash)}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}

/* раскладка: телефон — карта сверху «прилипает», список под ней; компьютер — панель сбоку */
.lay{display:block}
.map-wrap{position:sticky;top:0;z-index:2;height:44vh;height:44svh;min-height:260px;background:var(--soft);border-bottom:1px solid var(--line)}
#map{position:absolute;inset:0}
#map.map-off::after{content:'Map unavailable';position:absolute;inset:0;display:grid;place-items:center;color:var(--dim-text)}
.panel{padding:4px 16px 32px}
@media (min-width:900px){
  body{height:100vh;overflow:hidden;display:flex;flex-direction:column}
  .hdr{padding:14px 20px 12px}
  .hdr .h-top{max-width:none}
  .lay{flex:1;min-height:0;display:grid;grid-template-columns:var(--side) 1fr}
  .panel{grid-column:1;grid-row:1;overflow:auto;padding:4px 20px 32px;border-inline-end:1px solid var(--line);scrollbar-width:thin}
  .map-wrap{grid-column:2;grid-row:1;position:relative;height:auto;min-height:0;border-bottom:0}
}

/* откуда */
.sec{font-size:13px;font-weight:600;margin:14px 0 8px;color:var(--fg)}
.groups{display:flex;flex-direction:column;gap:8px}
.grp{display:flex;gap:10px;align-items:baseline}
.grp-t{flex:0 0 72px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dim-text)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.pc{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);height:32px;padding:0 11px;border-radius:999px;font-size:13px;font-weight:500;white-space:nowrap;transition:border-color .15s,background .15s,color .15s,transform .1s}
.pc:hover{border-color:var(--hover-line)}
.pc:active{background:var(--press-wash);transform:scale(.97)}
.pc[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.pc .ic{width:15px;height:15px}
.geo{margin-top:10px;padding:12px;border-radius:var(--r-sm);background:var(--soft);font-size:13px}
.geo p{margin:0 0 10px}
.geo-b{display:flex;gap:8px}
.btn{height:34px;padding:0 14px;border-radius:var(--r-xs);border:1px solid var(--line);background:var(--panel);font-weight:600;font-size:13px}
.btn:active{background:var(--press-wash)}
.btn.pri{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* телефон: выбор «откуда» — одна строка с прокруткой вбок, чтобы варианты пути были видны сразу под картой */
@media (max-width:899px){
  .groups{flex-direction:row;gap:14px;overflow-x:auto;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none;overscroll-behavior-x:contain;scroll-padding-inline:16px}
  .groups::-webkit-scrollbar{display:none}
  .grp{flex-direction:column;align-items:flex-start;gap:4px;flex:none}
  .grp-t{flex:none}
  .chips{flex-wrap:nowrap}
  .grp:last-child{order:-1}
  .sec{margin:12px 0 8px}
}

/* варианты пути */
.opts{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.opt{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden;transition:border-color .15s,box-shadow .2s}
.opt.sel{border-color:var(--c);box-shadow:0 0 0 1px var(--c) inset}
.opt-h{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;padding:12px;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:var(--r)}
.opt-h:hover{background:var(--hover-wash)}
.opt-h:active{background:var(--press-wash)}
.opt-h:focus-visible{outline:2px solid var(--fg);outline-offset:-2px}
.o-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;flex:none}
.o-ic .ic{width:20px;height:20px}
.o-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.o-t{font-weight:600;font-size:14px;line-height:1.3}
.o-s{font-size:12px;color:var(--muted)}
.o-s b{color:var(--fg);font-weight:600}
.o-r{display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:end;flex:none}
.o-d{font-weight:700;font-size:14px;white-space:nowrap}
.o-p{font-size:12px;color:var(--muted);white-space:nowrap}
.opt-b{padding:0 12px 12px;animation:open .22s ease}
@keyframes open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.legs{list-style:none;margin:2px 0 10px;padding:0;position:relative}
.legs li{display:flex;align-items:center;gap:10px;padding:5px 0;position:relative}
.legs li:not(:last-child)::after{content:'';position:absolute;inset-inline-start:13px;top:30px;height:calc(100% - 22px);width:2px;background:var(--line)}
.lg-dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;flex:none;position:relative;z-index:1}
.lg-dot .ic{width:16px;height:16px}
.lg-t{flex:1;min-width:0;font-size:13px;color:var(--muted)}
.lg-t b{color:var(--fg);font-weight:600}
.lg-m{font-size:12.5px;color:var(--muted);white-space:nowrap}
.note{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.warn{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;padding:9px 10px;border-radius:var(--r-xs);background:var(--low-wash);color:var(--fg);font-size:12.5px}
.warn .ic{color:var(--low);width:16px;height:16px;margin-top:1px}
.lk-t{margin:12px 0 6px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dim-text)}
.links{display:flex;flex-wrap:wrap;gap:6px}
.lk{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 11px;border-radius:var(--r-xs);border:1px solid var(--line);text-decoration:none;font-size:13px;font-weight:600;transition:border-color .15s,background .15s}
.lk:hover{border-color:var(--hover-line)}
.lk:active{background:var(--press-wash)}

/* категория → парковка */
.cat{margin:4px 0 8px}
.cat-t{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dim-text);margin-bottom:6px}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cats button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;height:44px;padding:0 9px;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--panel);min-width:0;transition:border-color .15s,background .15s;text-align:start}
.cats button span{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;line-height:1}
.cats button i{width:9px;height:9px;border-radius:50%;background:var(--cc);flex:none}
.cats button small{font-size:11px;font-weight:500;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.cats button:hover{border-color:var(--hover-line)}
.cats button:active{background:var(--press-wash)}
.cats button[aria-pressed="true"]{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg) inset}
.lot{display:flex;gap:8px;align-items:flex-start;margin-top:8px;font-size:12.5px;color:var(--muted)}
.lot .ic{width:16px;height:16px;color:#7C66DC;margin-top:1px}
.lot b{color:var(--fg)}

/* справка */
.info{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.card{padding:12px;border-radius:var(--r);background:var(--soft)}
.card h3{margin:0 0 4px;font-size:13px;font-weight:600}
.card p{margin:0;font-size:12.5px;color:var(--muted)}
.sched{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sched li{display:flex;flex-direction:column;gap:1px;font-size:11.5px;color:var(--muted)}
.sched b{font-size:13px;color:var(--fg)}
.src{font-size:12px;color:var(--muted);padding:4px 2px}
.src summary{cursor:pointer;padding:6px 0;list-style-position:inside}
.src ul{margin:4px 0 0;padding-inline-start:18px;display:flex;flex-direction:column;gap:3px}

/* маркеры карты: значок арены — плашка с названием, ножка и пульс в точке арены */
.mk-arena{display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:3}
.mk-b{display:flex;align-items:center;gap:6px;background:var(--inv-bg);color:var(--inv-fg);font-size:11px;padding:4px 8px;border-radius:6px;box-shadow:0 2px 8px var(--sh);white-space:nowrap}
.mk-b b{font-weight:800;letter-spacing:.06em}
.mk-n{font-weight:500;opacity:.8}
.mk-stick{width:2px;height:22px;background:var(--inv-bg)}
.pulse{position:absolute;bottom:-5px;width:10px;height:10px;border-radius:50%;background:var(--inv-bg);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}100%{box-shadow:0 0 0 14px rgba(229,72,77,0)}}
.mk-start{width:14px;height:14px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 4px var(--c,#111),0 2px 6px var(--sh);pointer-events:none}
.mk-veh{width:34px;height:34px;border-radius:50%;background:var(--c,#111);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 3px var(--bg),0 3px 10px var(--sh);pointer-events:none;transition:background .25s}
.mk-veh .ic{width:20px;height:20px}
.mk-veh.arrived{animation:bump .5s ease}
.maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-inner{display:none}
@keyframes bump{50%{transform:scale(1.18)}}
.maplibregl-ctrl-group{border-radius:var(--r-xs)!important;box-shadow:0 1px 6px var(--sh)!important}
.maplibregl-ctrl-group button{-webkit-tap-highlight-color:transparent}
.maplibregl-ctrl-attrib{font-size:10px}
.maplibregl-canvas:focus{outline:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}