/* Network colours stay independent of selection and source/statistics state. */
html[data-theme] body.ytms-app .points-map-card :is(.map-pin,.map-dot){--pin-colour:#647d90;background:var(--pin-colour)!important}
html[data-theme] body.ytms-app .points-map-card [data-network-state=online]{--pin-colour:#079653}
html[data-theme] body.ytms-app .points-map-card [data-network-state=offline]{--pin-colour:#d03849}
html[data-theme] body.ytms-app .points-map-card [data-network-state=partial]{--pin-colour:#c68113}
html[data-theme] body.ytms-app .points-map-card [data-network-state=planned]{--pin-colour:#7f91a2}
html[data-theme] body.ytms-app .points-map-card .map-pin.selected{outline:3px solid #168bab;outline-offset:3px;box-shadow:0 0 0 2px white,0 3px 9px #001c3650}
html[data-theme] body.ytms-app .points-map-card .map-selection-ring{background:transparent!important;border:2px solid #168bab;width:11px;height:11px;box-sizing:border-box}
.points-map-card .map-legend{gap:10px 16px;align-items:center}.points-map-card .map-legend>span{display:inline-flex;align-items:center;gap:6px}.points-map-card #point-map-basis{font-size:11px;line-height:1.7;margin:12px 0 0}
/* One coherent section separates the point identity from its clickable lanes. */
.ytms-app #panel-overview>.lane-overview-section{order:5}
html[data-theme] body.ytms-app .lane-overview-section{margin:24px 0 6px;padding:20px;border:1px solid var(--ytms-border);border-radius:16px;background:var(--ytms-surface);box-shadow:var(--ytms-shadow)}
.lane-overview-heading{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--ytms-border-soft);padding:0 0 16px;margin-bottom:16px}
.lane-overview-heading>div:first-of-type{flex:1;min-width:0}
html[data-theme] body.ytms-app .lane-overview-heading h2{color:var(--ytms-text);margin:0;font-size:20px;line-height:1.5}
html[data-theme] body.ytms-app .lane-overview-heading p{color:var(--ytms-text-muted);margin:4px 0 0;font-size:12px;line-height:1.65}
.lane-overview-icon{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border:1px solid var(--ytms-border);border-radius:12px;background:var(--ytms-in-tint);color:var(--ytms-in)}.lane-overview-icon svg{width:25px;height:25px}
.lane-overview-directions{display:flex;gap:8px;font-size:11px;font-weight:650}.lane-overview-directions span{background:var(--ytms-in-tint);color:var(--ytms-in);border-radius:8px;padding:5px 9px}.lane-overview-directions span+span{background:var(--ytms-out-tint);color:var(--ytms-out)}
html[data-theme] body.ytms-app .lane-overview-section .lane-point>h3{display:flex;align-items:center;gap:9px;color:var(--ytms-text);font-size:13px;font-weight:650;line-height:1.6;margin:0 0 13px;padding:8px 11px;background:var(--ytms-surface-raised);border:1px solid var(--ytms-border-soft);border-radius:8px;overflow-wrap:anywhere}
.lane-overview-section .lane-point>h3::before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--ytms-in)}
.lane-overview-section .lane-point+.lane-point{margin-top:24px}
html[data-theme] body.ytms-app .lane-overview-section .lane-card:hover{border-color:var(--ytms-in);box-shadow:0 5px 15px #00334f14}.lane-overview-section .lane-card:focus-visible{outline:3px solid var(--ytms-focus);outline-offset:3px}
/* Software-rendered SVG motion has no application/reduced-motion pause gate. */
html[data-theme] body.ytms-app .auth-story{padding:44px 38px 24px;min-height:590px;background:var(--ytms-header);color:var(--ytms-text)}
html[data-theme] body.ytms-app .auth-story::after{display:none}
.auth-story-copy{position:relative;z-index:2;width:100%;max-width:none;min-width:0;align-self:flex-start;padding:0;margin:0;background:transparent}
html[data-theme] body.ytms-app .auth-story h1{color:var(--ytms-text);font-size:clamp(19px,2.1vw,36px);line-height:1.5;margin:20px 0 16px;letter-spacing:-.35px}
html[data-theme] body.ytms-app .auth-story h1 .auth-story-line{display:block;white-space:nowrap;color:inherit;background:transparent}
html[data-theme] body.ytms-app .auth-story h1 .auth-story-line:last-child{color:var(--ytms-in)}
html[data-theme] body.ytms-app .auth-story-copy>p{color:var(--ytms-text-muted);font-size:14px;line-height:1.9;margin:0;max-width:370px}
.login-traffic-art{position:absolute;z-index:1;right:-40px;bottom:-38px;width:min(100%,620px);height:480px;pointer-events:none}
.login-road-grid{stroke:var(--ytms-border);stroke-width:1;opacity:.45}
.login-road-bed{stroke-width:44;stroke-linecap:round}.login-road-in{stroke:var(--ytms-in);stroke-opacity:.19}.login-road-out{stroke:var(--ytms-out);stroke-opacity:.16}
.login-road-markings{stroke:var(--ytms-text-muted);stroke-width:2;stroke-dasharray:10 13;stroke-opacity:.7}
.login-traffic-in{fill:var(--ytms-in)}.login-traffic-out{fill:var(--ytms-out)}.login-traffic-car rect{stroke:var(--ytms-header);stroke-width:1.5}.login-traffic-car path{fill:var(--ytms-header);opacity:.85}
html[data-theme] body.ytms-app .auth-story-footer{position:relative;z-index:2;color:var(--ytms-text-muted);margin-top:auto;padding-top:190px;font-size:11px}
@media(max-width:1000px){html[data-theme] body.ytms-app .auth-story{padding:32px 25px}.auth-story-copy{padding:0;margin:0;max-width:none}.login-traffic-art{right:-80px}}
@media(max-width:720px){html[data-theme] body.ytms-app .auth-story{display:flex;min-height:250px;padding:24px 22px 18px}.auth-story-copy{max-width:none;background:transparent}html[data-theme] body.ytms-app .auth-story h1{font-size:clamp(14px,4.9vw,24px);line-height:1.45;margin:12px 0 9px}html[data-theme] body.ytms-app .auth-story-copy>p{font-size:12px;max-width:270px}.login-traffic-art{width:280px;height:260px;right:-50px;bottom:-55px}html[data-theme] body.ytms-app .auth-story-footer{padding-top:16px;font-size:10px;gap:9px}.lane-overview-directions{display:none}html[data-theme] body.ytms-app .lane-overview-section{padding:14px}.lane-overview-heading{gap:11px}.lane-overview-icon{width:38px;height:38px;flex-basis:38px}html[data-theme] body.ytms-app .lane-overview-heading h2{font-size:17px}}
@media print{.login-traffic-art{display:none}.lane-overview-section{box-shadow:none}}

/* Decorative subsection icons retain the native labels, tab semantics and handlers. */
html[data-theme] body.ytms-app main [role=tablist]>[role=tab]{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.ytms-app main [role=tablist]>[role=tab]>.ytms-glyph{width:16px;height:16px;flex:0 0 16px;opacity:.85}
.ytms-app main [role=tablist]>[role=tab]:is(:hover,[aria-selected=true])>.ytms-glyph{opacity:1}