#narrowPassage[hidden],#narrowPassageChip[hidden]{display:none!important}
#narrowPassage{position:fixed;inset:0;z-index:18000;background:#f4f7fb;color:#152840;display:flex;flex-direction:column;font-family:Inter,Arial,sans-serif;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
#narrowPassage .np-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;background:#112d48;color:white}
#narrowPassage .np-eyebrow{font-size:10px;letter-spacing:.07em;font-weight:700;color:#b9d4e8}
#narrowPassage h2{font-size:23px;line-height:1.2;margin:4px 0 0}
#narrowPassage .np-close{border:1px solid #ffffff50;border-radius:50%;width:44px;height:44px;flex-shrink:0;font-size:30px;line-height:1;background:#ffffff16;color:white;cursor:pointer}
#narrowPassage .np-stop{display:flex;flex-direction:column;gap:5px;padding:11px 18px;background:#fff0df;border-bottom:1px solid #efc596}
#narrowPassage .np-stop strong{font-size:17px;color:#8d2906}
#narrowPassage .np-stop span{font-size:12px;line-height:1.45}
#narrowPassage .np-live{display:flex;flex-direction:column;gap:3px;padding:9px 18px;background:#e6edf5;border-bottom:1px solid #cbd6e2}
#narrowPassage .np-live.opposing{background:#ffe0df;color:#9b1b22}
#narrowPassage .np-live.uncertain{background:#fff0c7;color:#72500a}
#narrowPassage .np-live strong{font-size:18px}
#narrowPassage .np-live span{font-size:11px}
#npMap{flex:1;min-height:140px;width:100%;background:#dce5ed}
#narrowPassage .np-legend{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;padding:7px 10px;font-size:10px;border-bottom:1px solid #dce3ec}
#narrowPassage .np-legend span{display:flex;align-items:center;gap:4px}
#narrowPassage .np-dot{width:9px;height:9px;display:inline-block;border-radius:50%;background:#8b6f25}
#narrowPassage .np-dot.own{background:#2563eb}#narrowPassage .np-dot.opposing{background:#d62837}#narrowPassage .np-dot.same{background:#507398}
#narrowPassage .np-buses{max-height:17vh;overflow-y:auto;font-size:12px;padding:0 16px}
#narrowPassage .np-buses p{margin:8px 0;line-height:1.4}
#narrowPassage .np-buses ul{list-style:none;padding:0;margin:0}
#narrowPassage .np-buses li{padding:6px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:2px 12px;border-bottom:1px solid #dce3ec}
#narrowPassage li.opposing strong{color:#b31e2d}
#narrowPassage footer{background:#112d48;color:#dbe8f2;padding:8px 16px;font-size:11px;line-height:1.4}
.np-marker{background:#507398;border:2px solid white;border-radius:7px;color:white;box-shadow:0 1px 6px #0006;text-align:center;font:700 15px/24px Inter,Arial,sans-serif}
.np-marker.opposing{background:#d62837}.np-marker.unknown{background:#a16e10}.np-marker.stale{background:#737a84;opacity:.75}
.np-bus-label{font-size:10px;line-height:1.3}
#narrowPassageChip{position:fixed;right:14px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:17900;border:1px solid #e8b77d;background:#fff1dc;color:#65330b;padding:12px 16px;border-radius:24px;font:bold 13px Inter,Arial,sans-serif;box-shadow:0 2px 12px #0003}
@media(min-width:900px){#narrowPassage .np-stop,#narrowPassage .np-live{align-items:center}#narrowPassage .np-head{padding-left:24px}#narrowPassage .np-buses{padding:0 24px}}
@media(max-height:520px){#narrowPassage .np-head{padding:6px 14px}#narrowPassage h2{font-size:18px}#narrowPassage .np-stop{padding:5px 14px}#narrowPassage .np-stop span{font-size:10px}#narrowPassage .np-live{padding:5px 14px}#narrowPassage .np-buses{max-height:12vh}#narrowPassage footer{font-size:10px;padding:5px 14px}#npMap{min-height:100px}}
