.street-scene{position:relative;width:100%;height:calc(100dvh - 185px);min-height:550px;max-height:1000px;overflow:hidden;border-radius:18px;background:#213e38;isolation:isolate;touch-action:pan-y}.street-photo{position:absolute;inset:0;width:130%;max-width:none;height:100%;object-fit:cover;left:-15%;pointer-events:none;z-index:-2}.street-scene:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#07171999,transparent 35%,transparent 50%,#071719bb);z-index:-1;pointer-events:none}.street-header{position:absolute;top:24px;left:30px;max-width:60%;text-shadow:0 2px 9px #0008}.street-header h1{font-size:clamp(26px,3vw,44px);margin:4px 0}.street-kicker{font-size:11px;letter-spacing:.18em;color:#fff}.street-header p{color:#fff;font-size:15px}.street-tools,.nav-modes{display:flex;gap:8px;flex-wrap:wrap}.nav-button,.nav-mode{border:1px solid #d5e4df66;border-radius:9px;background:#14302ee6;color:#fff;padding:10px 14px;font:inherit;font-size:14px;cursor:pointer;min-height:44px}.nav-button.primary,.nav-mode.selected{background:#bddbca;color:#16362e;font-weight:700}.nav-button:disabled,.nav-mode:disabled{opacity:.45;cursor:not-allowed}.street-ground-controls{position:absolute;bottom:46px;left:4%;right:4%;display:grid;gap:16px}.street-turns{display:flex;justify-content:center;align-items:end;gap:18px;flex-wrap:wrap}.street-arrow{background:#15312ad9;color:#fff;border:1px solid #f1fff588;box-shadow:0 6px 24px #0003;border-radius:14px;padding:8px 20px;max-width:220px;min-width:100px;display:flex;align-items:center;flex-direction:column;cursor:pointer;min-height:90px}.street-chevron{font-size:35px;font-weight:bold;line-height:1}.street-arrow strong{font-size:14px}.street-arrow small{opacity:.7;font-size:11px}.street-arrival{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.street-caption{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:12px;color:#e1ece5}.navigation-mini{position:absolute;top:25px;right:24px;width:240px;display:grid;gap:9px;background:#f6f3eefa;color:#18382f;border-radius:18px;box-shadow:0 10px 30px #0003;padding:18px;border-top:6px solid #527d64}.navigation-mini-title{font-size:10px;letter-spacing:.2em}.navigation-mini strong{font-size:17px;line-height:1.4}.navigation-mini small{color:#516459}.nav-link{background:transparent;border:0;font:inherit;font-size:12px;text-decoration:underline;color:inherit;cursor:pointer;padding:6px}.town-map{background:#eeeade;border:1px solid #b2c3b6;border-radius:14px;overflow:hidden}.town-map svg{display:block;width:100%;min-height:230px;touch-action:none}.map-ground{fill:#eeeade}.map-creek{fill:none;stroke:#90bdc1;stroke-width:25}.map-roads line{stroke:#fff;stroke-width:12;stroke-linecap:round}.map-route{fill:none;stroke:#557ead;stroke-width:10;stroke-linejoin:round;stroke-linecap:round}.map-pins circle{fill:#5d8069;stroke:#fff;stroke-width:3}.map-pins circle.selected{fill:#d66a43}.map-pins text{fill:#233e31;font:17px sans-serif;paint-order:stroke;stroke:#eeeade;stroke-width:4;stroke-linejoin:round}.map-pins g{cursor:pointer}.map-person{fill:#efb73e;stroke:#665321;stroke-width:5;stroke-linecap:round;cursor:grab;touch-action:none}.maps-app{display:grid;gap:12px;padding:12px;min-width:0}.maps-search{font:inherit;width:100%;border-radius:12px;padding:12px 14px;background:#f5f3ed;color:#1e352d;border:1px solid #b4c5b5;box-sizing:border-box}.map-search-results{max-height:170px;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.map-result{color:inherit;background:#ffffff0c;border:1px solid #8cb69e45;border-radius:8px;font:inherit;font-size:12px;min-height:42px;padding:8px;text-align:left;cursor:pointer}.map-route-details{display:grid;gap:9px}.map-route-details h3,.map-route-details p{margin:0}.maps-hint{font-size:11px;color:var(--muted);line-height:1.5}.maps-app-icon{background:#b2c6a2}.maps-app-icon svg{stroke:#244b37;fill:none;stroke-width:3}.street-arrow:focus-visible,.nav-button:focus-visible,.map-result:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:650px){.street-scene{height:calc(100dvh - 170px);min-height:580px;border-radius:0}.street-header{left:16px;top:16px;max-width:94%}.street-header h1{font-size:28px}.street-header p{font-size:12px}.street-tools .nav-button{font-size:11px;padding:7px 10px;min-height:38px}.navigation-mini{top:162px;right:12px;width:170px;padding:10px;gap:5px}.navigation-mini strong{font-size:13px}.navigation-mini small{font-size:10px}.street-ground-controls{left:10px;right:10px;bottom:42px;gap:10px}.street-turns{gap:7px}.street-arrow{padding:8px;min-width:75px;max-width:145px;flex:1;min-height:84px}.street-arrow strong{font-size:12px}.street-chevron{font-size:27px}.street-caption{font-size:10px}.maps-app{padding:8px}.town-map svg{min-height:190px}.map-search-results{max-height:135px}.street-arrival .nav-button{font-size:12px}}

.street-scene[data-time=evening] .street-photo{filter:brightness(.72) sepia(.14)}.street-scene[data-time=night] .street-photo{filter:brightness(.32) saturate(.55)}

/* Photograph-space exits: camera and markers share one transform. */
.street-scene{touch-action:pan-y}
.street-world{position:absolute;z-index:0;will-change:transform}
.street-world .street-photo{inset:0;left:0;width:100%;height:100%;object-fit:fill;z-index:0;transform:none}
.street-scene:before{z-index:1}
.street-header,.street-ground-controls,.navigation-mini,.street-caption{z-index:3}
.street-world .street-turns{position:absolute;inset:0;display:block;pointer-events:none}
.street-exit-anchor{position:absolute;transform:translate(-50%,-50%);pointer-events:auto}
.street-exit-anchor .street-arrow{position:relative;width:148px;min-width:0;max-width:148px;min-height:64px;padding:5px 8px;border:0;border-radius:9px;background:#0e252ac9;box-shadow:0 3px 10px #0004;gap:2px;text-align:center;line-height:1.15;text-decoration:none}
.street-exit-anchor .street-chevron{font-size:37px;line-height:.9;color:white;text-shadow:0 2px 3px #0009}
.street-exit-anchor strong{font-size:12px}.street-exit-anchor small{font-size:10px}
.street-exit-anchor .suggested{outline:3px solid #f2d07d;outline-offset:3px;background:#314638ed}
.street-frontage>summary{list-style:none;cursor:pointer;display:flex}.street-frontage>summary::-webkit-details-marker{display:none}
.street-frontage-menu{position:absolute;z-index:8;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;width:190px;max-height:230px;overflow:auto;background:#102729;border:1px solid #9cbbb1;border-radius:10px;padding:6px;display:grid;gap:4px}
.street-frontage-menu .street-arrow{width:100%;max-width:none;min-height:44px;align-items:start;text-align:left;font-size:12px;background:#ffffff0b}
.street-frontage-menu .street-chevron,.street-frontage-menu small{display:none}
.street-exit-anchor:has(details[open]){z-index:9}
.street-ground-controls{bottom:30px;pointer-events:none}.street-arrival{pointer-events:auto}
.street-edge{position:absolute;z-index:4;top:54%;font-size:12px;padding:8px;min-height:44px;background:#0b2429e8;border-radius:8px}.street-edge-left{left:6px}.street-edge-right{right:6px}.street-edge[hidden]{display:none}
@media(max-width:650px){
 .street-exit-anchor .street-arrow{width:110px;max-width:110px;min-height:64px;padding:5px 6px}
 .street-exit-anchor strong{font-size:11px}.street-exit-anchor .street-chevron{font-size:32px}
 .street-frontage-menu .street-arrow{width:100%;max-width:none;min-height:44px}
 .street-caption{font-size:9px;margin:0 8px;bottom:5px}.street-ground-controls{bottom:25px}
 .street-header h1{font-size:25px}.street-frontage-menu{max-height:170px;width:170px}
}

.street-frontage:not([open])>.street-frontage-menu{display:none}
.street-scene:before{background:linear-gradient(180deg,#07171980,transparent 40%)}

.street-tools .street-edge{position:static;min-height:44px;font-size:14px;padding:10px 14px}
@media(max-width:650px){.street-tools .street-edge{min-height:38px;font-size:11px;padding:7px 10px}}

.street-tools .street-edge{color:#fff;font-family:inherit;cursor:pointer;border:1px solid #d5e4df66}.street-tools .street-edge:disabled{opacity:.45;cursor:default}

.street-key{position:absolute;right:5px;top:4px;color:#d9e9e3;font-size:9px;opacity:.8;font-family:monospace}

/* Camera panning owns the image offset. Native focus/scrollIntoView must not
   independently scroll this viewport and strand an exit beyond the pan limit. */
.street-scene{overflow:clip}

/* Never tween the camera: reveal calculations and attached exits must use the
   same current offset, including under the global reduced-motion override. */
.street-world{transition:none!important}

/* Keep travel a compact view of the path, with lightweight direction markers. */
.street-scene{height:clamp(360px,62dvh,650px);min-height:360px;max-height:650px}
.street-exit-anchor .street-arrow{background:transparent;box-shadow:none;border-radius:4px;padding:6px;min-height:64px;gap:4px;text-shadow:0 2px 5px #000,0 0 8px #000}
.street-exit-anchor strong{font-size:14px;background:#102729cc;border-radius:5px;padding:4px 7px}
.street-exit-anchor small{display:none}
.street-exit-anchor .street-chevron{font-size:44px;filter:drop-shadow(0 2px 2px #0009)}
.street-exit-anchor .suggested{outline:0;background:transparent;color:#ffe39a}
.street-exit-anchor .suggested .street-chevron{color:#ffe39a}
.street-frontage-menu .street-arrow{background:#ffffff0b;text-shadow:none;min-height:44px}
.street-frontage-menu strong{background:transparent}
.street-header{max-width:94%;top:16px;left:18px}
.street-header h1{font-size:clamp(23px,3vw,32px)}
.street-header p{margin:4px 0 8px}
.street-caption{font-size:12px}
@media(max-width:650px){
 .street-scene{height:clamp(360px,57dvh,520px);min-height:360px;max-height:520px}
 .street-exit-anchor .street-arrow{width:120px;max-width:120px}
 .street-exit-anchor strong{font-size:12px}
 .street-tools .nav-button,.street-tools .street-edge{font-size:12px;padding:7px 9px}
 .street-header{top:12px;left:14px}
}

/* The arrow tip stays on the route; its label extends below it. */
.street-exit-anchor{transform:translate(-50%,-18px)}
.street-exit-anchor .street-chevron{font-size:34px;line-height:1}
.street-exit-anchor .street-arrow{gap:3px;padding:0 4px;min-height:44px}
.street-exit-anchor small{display:block;font-size:12px;line-height:1.2;background:#102729e8;border-radius:4px;padding:3px 6px;opacity:1}
.street-exit-anchor strong{font-size:14px}
.street-exit-anchor .street-return-note{font-style:normal;font-size:12px;color:#d5e8fa;background:#153f50ed;padding:2px 5px;border-radius:4px}
.street-exit-anchor .street-came-from strong{border-bottom:2px solid #c3e2ed}
.street-frontage-menu .street-chevron,.street-frontage-menu small{display:none}
.street-frontage-menu .street-return-note{font-size:12px}
.street-header .street-orientation,.street-header .street-history{font-size:13px;margin:3px 0;color:#e9f3f0}
.street-header .street-history{color:#cce3ec}
.street-header .street-tools{margin-top:9px}
.street-scene .navigation-mini{top:auto;bottom:42px;right:18px;width:215px;padding:12px;gap:5px}
.scene-travel-status{position:absolute;z-index:20;bottom:28px;left:50%;transform:translateX(-50%);max-width:calc(100% - 30px);padding:12px 20px;border-radius:12px;background:#0b2429ee;color:#fff;font-size:16px;text-align:center;pointer-events:none}
[data-travel-pending] .street-turns,[data-travel-pending] .place-hotspot{opacity:0;pointer-events:none}
[data-travel-pending] .street-tools,[data-travel-pending] .street-arrival{pointer-events:none;opacity:.5}
.place-scene{position:relative}
.place-came-from{font-size:13px;color:#cce3ec;margin:4px 0}
@media(max-width:650px){
 .street-scene{height:clamp(470px,65dvh,600px);min-height:470px;max-height:600px}
 .street-header h1{font-size:23px}
 .street-header .street-orientation,.street-header .street-history{font-size:12px}
 .street-exit-anchor .street-arrow{width:130px;max-width:130px}
 .street-exit-anchor strong{font-size:13px}
 .street-scene .navigation-mini{width:160px;bottom:44px;right:10px;font-size:12px}
 .scene-travel-status{font-size:14px;padding:10px 14px}
}
/* Keep the complete photograph in the short desktop view. A soft extension
   fills wide-screen margins; routes remain on the sharp, unwarped photograph. */
.street-backdrop{position:absolute;inset:-16px;width:calc(100% + 32px);height:calc(100% + 32px);object-fit:cover;filter:blur(16px) brightness(.45);pointer-events:none;z-index:-1}
@media(min-width:651px){.street-scene{height:clamp(420px,62dvh,650px);min-height:420px}}
.street-scene[data-time=evening] .street-backdrop{filter:blur(16px) brightness(.32) sepia(.14)}
.street-scene[data-time=night] .street-backdrop{filter:blur(16px) brightness(.14) saturate(.55)}
.nav-button,.nav-mode,.map-result,.street-arrow,.place-door{touch-action:manipulation}
/* Phone directions sit beside the scene flow, never over a clickable exit. */
.navigation-mini.navigation-route-strip{position:relative;top:auto;right:auto;bottom:auto;width:auto;margin:8px 18px 0;padding:10px 14px;border-top-width:3px;border-radius:10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
.navigation-route-strip .navigation-mini-title,.navigation-route-strip strong,.navigation-route-strip small{grid-column:1}
.navigation-route-strip .nav-link{grid-column:2;grid-row:1/4;align-self:center;font-size:13px;min-height:44px}
@media(max-width:650px){.navigation-mini.navigation-route-strip{margin:8px 10px 0}.navigation-route-strip strong{font-size:14px}}

/* Mobile junction overview: names stay visible without hunting in a crop. */
.street-navigation{position:relative}
.street-navigation>.street-ground-controls{position:static;padding:10px 14px;pointer-events:auto}
.street-routes{display:none}
@media(max-width:650px){
 .street-navigation>.street-header{position:static;max-width:none;padding:12px 14px;text-shadow:none}
 .street-header .street-kicker{font-size:12px}
 .street-navigation .street-tools .street-edge{display:none}
 .street-navigation .street-tools{margin-top:8px}
 .street-navigation .street-tools .nav-button{font-size:14px;min-height:44px}
 .street-navigation .street-scene{height:auto;min-height:0;max-height:none;aspect-ratio:var(--street-ratio,16/9);border-radius:0}
 .street-navigation .street-scene:before{background:none}
 .street-navigation .street-caption{display:none}
 .street-exit-anchor{transform:translate(-50%,-50%)}
 .street-exit-anchor .street-arrow{width:36px;max-width:36px;min-height:36px;justify-content:center;padding:0;position:relative}
 .street-exit-anchor .street-chevron{font-size:24px}
 .street-exit-anchor strong,.street-exit-anchor small,.street-exit-anchor .street-return-note{display:none}
 .street-exit-anchor .street-key{top:-4px;right:-3px;padding:2px 5px;background:#102729;border-radius:4px;font-size:12px;opacity:1}
 .street-frontage-menu .street-arrow{width:100%;max-width:none;min-height:44px;padding:6px}
 .street-frontage-menu strong{display:block;font-size:14px}
 .street-routes{display:grid;gap:6px;padding:10px 14px}
 .street-routes .street-arrow{display:grid;grid-template-columns:24px 26px minmax(0,1fr);gap:3px 8px;align-items:center;width:100%;max-width:none;min-width:0;min-height:52px;padding:8px 10px;border-radius:9px;text-align:left;text-shadow:none;background:#14302e;border:1px solid #d5e4df55;box-shadow:none;box-sizing:border-box}
 .street-routes .street-arrow strong{font-size:15px;grid-column:3}
 .street-routes .street-arrow small,.street-routes .street-return-note{grid-column:3;font-size:13px;color:#cce3ec;font-style:normal}
 .street-routes .street-chevron{grid-column:2;grid-row:1;font-size:24px}
 .route-number{grid-column:1;grid-row:1;display:inline-block;font:14px monospace;text-align:center;color:#fff}
 .street-route-group{border:1px solid #d5e4df55;border-radius:9px;background:#14302e}
 .street-route-group>summary{cursor:pointer;padding:12px;font-size:15px;min-height:44px;box-sizing:border-box}
 .street-route-group .route-number{margin-right:12px}
 .street-route-group .street-arrow{border:0;border-top:1px solid #d5e4df33;border-radius:0;grid-template-columns:24px minmax(0,1fr)}
 .street-route-group .street-chevron{grid-column:1}
 .street-route-group .street-arrow strong,.street-route-group .street-arrow small,.street-route-group .street-return-note{grid-column:2}
 .street-routes .suggested{border-color:#ffe39a;background:#314638;color:#ffe39a}
 .street-routes .street-came-from{border-left:3px solid #c3e2ed}
 .scene-travel-status{bottom:8px;font-size:14px}
 .street-navigation:has([data-travel-pending]) .street-routes{opacity:.5;pointer-events:none}
}