.cable-app .map-modes{display:flex;gap:6px;flex-wrap:wrap;padding:14px 16px 4px;background:var(--surface)}
.cable-app .map-modes button{border:1px solid var(--line);border-radius:6px;padding:10px 15px;font-weight:600;font-size:13px;min-height:42px}
.cable-app .map-modes button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#111}
.cable-app .map-mode-description{padding:6px 16px 14px;margin:0;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line)}
.cable-app[data-map-mode=performance] .infrastructure-toolbar,.cable-app[data-map-mode=performance] .infrastructure-layer,.cable-app[data-map-mode=performance] .landing-map-layer,.cable-app[data-map-mode=performance] .observation-map-layer,.cable-app[data-map-mode=performance] .map-bottom{display:none!important}
.cable-app[data-map-mode=performance] #sidebar>.list-heading,.cable-app[data-map-mode=performance] #sidebar>.list-context,.cable-app[data-map-mode=performance] #cableList,.cable-app[data-map-mode=performance] #detail,.cable-app[data-map-mode=performance] #landingPopup{display:none!important}
.cable-app:not([data-map-mode=performance]) .performance-map-layer{display:none}
/* route view: every cable stays on the map as a faint grey backdrop (not clickable) */
.cable-app[data-map-mode=performance] .infrastructure-layer.cable-backdrop{display:block!important;pointer-events:none}
.cable-app[data-map-mode=performance] .infrastructure-layer.cable-hits{display:block!important}
.cable-app[data-map-mode=performance] .cable-backdrop .cable-path{stroke:#7b838e!important;stroke-opacity:.28!important;stroke-dasharray:none;stroke-width:1}
.cable-app[data-map-mode=incidents] .infrastructure-toolbar,.cable-app[data-map-mode=incidents] .explorer-grid,.cable-app[data-map-mode=incidents] .map-credit{display:none!important}
.cable-app #incidentModePanel .outage-tracker{border:0;border-radius:0;margin:0}
.cable-app[data-map-mode=performance] .explorer-grid{grid-template-columns:minmax(0,1fr) 390px}
.cable-app .route-pane{display:flex;flex-direction:column;min-height:0;height:100%;position:relative}
.cable-app .route-pane-heading{display:flex;align-items:center;justify-content:space-between;padding:18px 16px 4px;gap:8px}
.cable-app .route-pane-heading h2{font:600 18px var(--display);margin:0}
.cable-app .route-pane-heading>span{color:var(--muted);font-size:12px}
.cable-app .route-summary{margin:0;padding:7px 16px 15px;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line)}
.cable-app .performance-route-list{overflow:auto;min-height:0;scrollbar-width:thin;padding:4px 8px}
.cable-app .performance-route{height:auto;min-height:0;width:100%;display:flex;align-items:flex-start;gap:10px;text-align:left;padding:14px 9px;border-bottom:1px solid var(--line);font-size:12px}
.cable-app .performance-route>span:nth-child(2){flex:1;min-width:0}
.cable-app .performance-route strong{display:block;font-size:13px;line-height:1.5}
.cable-app .performance-route small{display:block;color:var(--muted);font-size:11px;margin-top:4px}
.cable-app .performance-route:hover,.cable-app .performance-route.selected{background:var(--surface-2)}
.cable-app .performance-state-dot{height:8px;width:8px;border-radius:50%;margin-top:5px;flex-shrink:0;background:#9199a4}
.cable-app .performance-route.normal .performance-state-dot{background:#3b9d7c}
.cable-app .performance-route.change .performance-state-dot{background:#e5a14d}
.cable-app .performance-map-key{position:absolute;bottom:16px;left:16px;right:50px;display:flex;gap:12px;flex-wrap:wrap;width:fit-content;padding:9px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-size:11px}
.cable-app .performance-map-key span:before{content:'';display:inline-block;width:12px;height:3px;margin-right:5px;vertical-align:middle;background:#9199a4}
.cable-app .performance-map-key .normal:before{background:#3b9d7c}
.cable-app .performance-map-key .change:before{background:#e5a14d}
.cable-app .performance-line{fill:none;stroke:#9199a4;stroke-width:1.6;stroke-opacity:.7;stroke-linecap:round;vector-effect:non-scaling-stroke;pointer-events:none}
.cable-app .performance-line.normal{stroke:#3b9d7c;stroke-opacity:.75}
.cable-app .performance-line.change{stroke:#e5a14d;stroke-opacity:.95;stroke-width:2.4}
.cable-app .performance-line.unknown{stroke-dasharray:3 5;stroke-opacity:.35}
.cable-app .has-selection .performance-line:not(.selected),.cable-app .has-selection .route-city:not(.selected){opacity:.22}
.cable-app .performance-line.selected{stroke-width:3.2;stroke-opacity:1}
.cable-app .route-city{fill:#6f7782;stroke:var(--surface);stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none;opacity:.55}
.cable-app .route-city.normal{fill:#3b9d7c;opacity:1}
.cable-app .route-city.change{fill:#e5a14d;opacity:1}
.cable-app .route-city.selected{stroke-width:2;opacity:1}
.cable-app .route-city-label{fill:var(--ink);font-weight:600;text-anchor:middle;paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.cable-app .performance-hit{fill:none;stroke:transparent;stroke-width:12;vector-effect:non-scaling-stroke;cursor:pointer;pointer-events:stroke}
.cable-app .performance-hit:focus-visible{stroke:var(--accent);stroke-width:5;outline:none}
.cable-app .route-detail{position:absolute;inset:0;background:var(--surface);overflow:auto;padding:18px;scrollbar-width:thin;z-index:5}
.cable-app .route-detail h2{font:700 24px/1.25 var(--display);margin:15px 0 8px;overflow-wrap:anywhere}
.cable-app .route-detail h3{font-size:14px;line-height:1.5;margin:20px 0 10px}
.cable-app .route-detail p{font-size:12px;line-height:1.65;color:var(--muted)}
.cable-app .route-actions{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.cable-app .route-actions .button{font-size:12px;min-height:38px}
.cable-app .route-detail .performance-verdict{font-weight:600;color:var(--ink);font-size:16px}
.cable-app .performance-verdict.change{color:#e5a14d}
.cable-app .performance-verdict.normal{color:#3b9d7c}
.cable-app .performance-path{border-top:1px solid var(--line);padding:2px 0 18px}
.cable-app .performance-metrics{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:12px 0}
.cable-app .performance-metrics dt{font-size:10px;color:var(--muted)}
.cable-app .performance-metrics dd{font:600 15px var(--mono);margin:4px 0 0}
.cable-app .route-chart{margin:15px 0}
.cable-app .route-chart svg{display:block;width:100%;height:auto;min-height:90px;background:var(--surface-2);border-radius:5px}
.cable-app .route-baseline{stroke:var(--muted);stroke-width:1;stroke-dasharray:5 4}
.cable-app .route-latency{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.cable-app .route-axis-label{font:10px var(--mono);fill:var(--muted);paint-order:stroke;stroke:var(--surface-2);stroke-width:3px;stroke-linejoin:round}
.cable-app .route-chart figcaption{display:flex;justify-content:space-between;gap:8px;font-size:9px;color:var(--muted);margin-top:5px}
.cable-app .route-chart figcaption span:nth-child(2){text-align:center}
.cable-app .performance-empty{padding:13px;font-size:12px;line-height:1.65;color:var(--muted)}
.cable-app .performance-freshness{font-size:11px!important}
.cable-app .route-detail details{border-top:1px solid var(--line);padding:12px 0;font-size:12px}
.cable-app .route-detail summary{cursor:pointer;line-height:1.65}
.cable-app .route-detail a{font-size:12px}
.cable-app .performance-table-scroll{overflow:auto;max-height:280px;margin:10px 0}
.cable-app .performance-table-scroll table{width:100%;font:11px/1.6 var(--mono);border-collapse:collapse;text-align:left}
.cable-app .performance-table-scroll caption{text-align:left;color:var(--muted);padding:6px 0;font:12px var(--body)}
.cable-app .performance-table-scroll td,.cable-app .performance-table-scroll th{padding:6px;border-bottom:1px solid var(--line);overflow-wrap:anywhere;min-width:34px}
.cable-app .route-detail small{display:block;color:var(--muted)}
.cable-app .route-detail h4{margin:17px 0 8px}
@media(max-width:1100px){.cable-app[data-map-mode=performance] .explorer-grid{grid-template-columns:minmax(0,1fr) 340px}}
@media(max-width:760px){.cable-app .map-modes{padding:12px 10px 4px;gap:4px}.cable-app .map-modes button{font-size:11px;padding:9px 10px}.cable-app #routeToolbar{flex-wrap:wrap}.cable-app #routeToolbar .search-box{flex-basis:100%}.cable-app[data-map-mode=performance] .explorer-grid{display:flex;flex-direction:column;height:auto}.cable-app[data-map-mode=performance] .map-shell{height:380px;min-height:380px}.cable-app[data-map-mode=performance] .sidebar{height:620px;min-height:620px;border-left:0;border-top:1px solid var(--line)}.cable-app .performance-map-key{font-size:10px;gap:8px;left:10px;bottom:10px}.cable-app .route-chart svg{max-height:160px}}
.cable-app .performance-line.seg-land{stroke-dasharray:2 4;stroke-width:1.6}
.cable-app .performance-line.seg-direct{stroke-dasharray:6 5}
.cable-app .route-stop{fill:#9199a4;stroke:var(--surface);stroke-width:1.5;vector-effect:non-scaling-stroke;pointer-events:none}
.cable-app .route-stop.change{fill:#e5a14d}
.cable-app .route-stop.normal{fill:#3b9d7c}
.cable-app .route-stop.landing{fill:var(--surface);stroke:currentColor;stroke-width:1.5;color:#c9ced6}
.cable-app .has-selection .route-stop:not(.selected){opacity:.22}
.cable-app .route-cable-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:0 16px 8px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.cable-app .route-cable-bar p{margin:0;display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted)}
.cable-app .route-cable-bar b{color:var(--ink);font-size:14px}
.cable-app .route-cable-bar div{display:flex;gap:14px}
.cable-app .route-cable-bar .text-button{height:auto;min-height:32px;font-size:12px}
.cable-app .cable-focus{fill:none;stroke:#e9edf2;stroke-width:3;stroke-opacity:.8;stroke-linecap:round;vector-effect:non-scaling-stroke;pointer-events:none}
.cable-app .route-stop.back{fill:var(--surface);stroke:#c9ced6;stroke-width:2}
.cable-app .path-pick{display:grid;gap:6px;margin:14px 0 4px;font-size:12px;font-weight:600}
.cable-app .path-pick select{width:100%;max-width:none;height:40px}