.journey-planner .planner-top{display:flex;align-items:center;gap:12px;margin-bottom:16px;text-align:left}
.planner-intro{flex:1;min-width:0}.planner-intro h1{font-size:28px;margin:0 0 6px}.planner-prompt{font-size:18px;line-height:1.4;margin:0}
.journey-planner .explorer-layout{grid-template-columns:minmax(0,1fr) 300px;gap:18px}
.journey-planner .map-section{display:flex;justify-content:center;align-items:flex-start}
.journey-planner .map-scroll{width:min(100%,calc((100dvh - 245px)*1.315789));max-width:1000px;height:auto;max-height:none;overflow:hidden;aspect-ratio:1000/760}
.journey-planner .town-map{width:100%;height:100%;container-type:inline-size}
.journey-planner .map-landmark{width:15.5%;height:19%;min-height:0;gap:2px}
.journey-planner .map-landmark .picture{width:100%;height:77%}
.journey-planner .map-landmark strong{font-size:clamp(12px,1.65cqw,16px);line-height:1.2;padding:3px 4px;max-width:100%;display:flex;align-items:center;justify-content:center;gap:3px}
.journey-planner .map-landmark strong svg{width:15px;height:15px;flex-shrink:0}
.journey-planner .path-node{width:44px;height:44px;min-height:44px;font-size:clamp(14px,2cqw,19px);z-index:6}
.journey-planner .path-node.in-plan{background:#176965;color:#fffbed;border-color:#fffbed}.journey-planner .path-node.plan-tip{box-shadow:0 0 0 3px #a74527}
.journey-planner .planned-route{stroke:#176965;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;fill:none}
.journey-planner .explorer-token{width:5%;height:9%}.journey-planner .explorer-token img{width:100%;height:100%}.journey-planner .facing-arrow{left:25%;top:-24%;font-size:clamp(16px,3cqw,29px)}
.journey-planner .route-panel{padding:16px;text-align:left;max-height:none}.journey-planner>.scope{font-size:14px;line-height:1.4;margin:0 0 12px}.route-goal{font-size:20px;font-weight:800;line-height:1.4;margin-bottom:12px}
.journey-planner .heading-indicator{padding:8px;font-size:15px;margin:0 0 12px}.planner-help{font-size:15px;line-height:1.5}
.journey-planner .command-list{font-size:15px;line-height:1.5;padding:10px 10px 10px 30px;background:#eef1dc;border-radius:10px;max-height:140px;overflow:auto}
.journey-planner .field select{font-size:15px;padding:8px}.journey-planner .field{margin:8px 0}
.journey-planner .route-panel>.field{display:inline-flex;width:calc(50% - 5px);vertical-align:top}
.journey-planner .route-panel>.field+ .field{margin-left:6px}
@container(max-width:440px){.journey-planner .map-landmark .picture{display:none}.journey-planner .map-landmark{justify-content:flex-start;height:13%;width:21%;margin-left:-1.3cqw;transform:translateY(-8px)}.journey-planner .map-landmark strong{display:flex;flex-direction:column;font-size:12px;padding:2px;gap:1px;min-height:44px;width:100%;overflow-wrap:anywhere;word-break:break-word;text-align:center;border:0;background:#fffbed}.journey-planner .map-landmark strong svg{display:block!important;width:20px;height:20px}}
.journey-planner .route-actions{display:flex;gap:8px;flex-wrap:wrap}.journey-planner .route-actions .button{padding:10px 14px}.journey-planner .route-heading{margin:14px 0 8px}
.journey-planner .legend{margin-top:16px;font-size:14px}.journey-planner .legend summary{min-height:44px;display:flex;align-items:center}.journey-planner .feedback{font-size:15px;margin:12px 0 0;padding:10px}.journey-planner .constraint{font-size:15px;font-weight:750}.journey-planner .closure-mark{font-size:clamp(11px,1.5cqw,14px);padding:3px 5px}
.journey-planner.explorer-focus,.journey-planner:fullscreen{position:fixed;inset:0;z-index:100;background:#fffbed;border:0;border-radius:0;padding:16px;overflow:auto;width:100%;height:100dvh}
.explorer-focus .map-scroll,:fullscreen.journey-planner .map-scroll{width:min(100%,calc((100dvh - 145px)*1.315789));flex-shrink:0}
.explorer-focus .route-panel,:fullscreen.journey-planner .route-panel{max-height:calc(100dvh - 135px);overflow:auto}
@media(max-width:900px){.journey-planner .explorer-layout{grid-template-columns:1fr}.journey-planner .planner-top{flex-wrap:wrap}.planner-intro{flex-basis:100%}.journey-planner .map-landmark strong svg{display:none}.journey-planner .route-panel{padding:14px}.planner-help{margin-bottom:8px}.journey-planner .command-list{max-height:90px}.explorer-focus .route-panel,:fullscreen.journey-planner .route-panel{max-height:none}.explorer-focus .map-scroll,:fullscreen.journey-planner .map-scroll{width:100%}}
@media(max-width:900px) and (orientation:landscape){.journey-planner.explorer-focus .explorer-layout,.journey-planner:fullscreen .explorer-layout{grid-template-columns:minmax(0,1fr) 245px}.explorer-focus .planner-top,:fullscreen .planner-top{flex-wrap:nowrap;margin-bottom:8px}.explorer-focus .planner-intro,:fullscreen .planner-intro{flex-basis:auto}.explorer-focus .planner-intro h1,:fullscreen .planner-intro h1{font-size:20px}.explorer-focus .planner-prompt,:fullscreen .planner-prompt{font-size:15px}.explorer-focus .map-scroll,:fullscreen.journey-planner .map-scroll{width:min(100%,calc((100dvh - 120px)*1.315789))}.explorer-focus .route-panel,:fullscreen.journey-planner .route-panel{max-height:calc(100dvh - 120px);overflow:auto}}
@media(max-width:600px) and (orientation:portrait){.journey-planner .map-scroll{width:100%;aspect-ratio:1000/1150}}

/* Town Explorer occupies the app view immediately; the map uses every remaining
   column/row rather than being capped to the original 1000px source camera. */
.explorer-workspace{position:fixed;inset:0;z-index:100;width:100%;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);padding:14px!important;gap:12px;background:#fffbed;border:0!important;border-radius:0!important;overflow:hidden;text-align:left}
.explorer-workspace .planner-top{margin:0;min-height:52px;flex-wrap:nowrap;flex-shrink:0}
.explorer-workspace .planner-intro h1{font-size:27px}
.explorer-workspace .planner-prompt{font-size:17px}
.explorer-workspace .explorer-layout{height:100%;min-height:0;grid-template-columns:minmax(0,1fr) 280px;align-items:stretch;gap:14px}
.explorer-workspace .map-section{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:10px;min-height:0;min-width:0;align-items:stretch;justify-content:stretch}
.explorer-workspace .map-scroll{width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;flex-shrink:1}
.explorer-workspace .town-map{width:100%;height:100%}
.explorer-workspace .map-landmark strong{font-size:clamp(13px,1.3cqw,18px)}
.explorer-workspace .route-panel{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;padding:14px}
.explorer-workspace .planned-steps{font-size:14px;line-height:1.5;max-height:130px;overflow:auto;background:#edf1df;padding:9px;border-radius:10px}
.explorer-workspace .planner-progress{font-size:14px;margin:0 0 10px}
.explorer-workspace .starting-heading,.explorer-workspace .heading-indicator{padding:9px 11px;border-radius:10px;font-size:16px;line-height:1.4;font-weight:750;margin:8px 0;background:#e0edf0;color:#174d60}
.explorer-workspace .starting-heading{background:#f7e8b9;color:#51401e}
.explorer-workspace .planner-endpoints{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.explorer-workspace .planner-endpoints .field{display:flex;width:auto;min-width:0;margin:8px 0}
.explorer-workspace .planner-endpoints select{width:100%;min-width:0;font-size:15px}
.explorer-workspace .map-navigation{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:7px 10px;border:1px solid #cbd8cc;border-radius:16px;background:#fffbed}
.explorer-workspace .direction-button{min-width:92px;gap:10px;padding:9px 14px;min-height:50px}
.direction-glyph{font-size:28px;line-height:1;font-weight:800}
.direction-help{margin:0;font-size:14px;line-height:1.4;max-width:300px}
.explorer-workspace .explorer-token{width:88px;height:88px;transform:translate(-50%,-95%);z-index:8;pointer-events:none}
.walker-sprite{display:block;position:absolute;inset:0;width:100%;height:100%;background-repeat:no-repeat;filter:drop-shadow(0 2px 1px #263e3555)}
.walker-sprite.walker-fallback{background-size:contain;background-position:center!important}
@media(max-width:1100px){.explorer-workspace .explorer-layout{grid-template-columns:minmax(0,1fr) 250px}.explorer-workspace .direction-button{min-width:70px;padding:8px 10px}.explorer-workspace .direction-help{flex-basis:100%;max-width:none;text-align:center}}
@media(max-width:700px) and (orientation:portrait){
 .explorer-workspace{display:flex;flex-direction:column;overflow:auto;padding:10px!important}
 .explorer-workspace .planner-top{flex-wrap:wrap;gap:8px}.explorer-workspace .planner-intro{flex-basis:100%}
 .explorer-workspace .planner-intro h1{font-size:25px}.explorer-workspace .planner-prompt{font-size:16px}
 .explorer-workspace .explorer-layout{display:flex;flex-direction:column;height:auto;flex:none}
 .explorer-workspace .map-section{display:grid;grid-template-rows:auto auto;flex:none}
 .explorer-workspace .map-scroll{width:100%;height:auto;aspect-ratio:1000/1050}
 .explorer-workspace .map-landmark strong{font-size:12px}.explorer-workspace .route-panel{height:auto;overflow:visible}
 .explorer-workspace .explorer-token{width:66px;height:66px}
 .explorer-workspace .map-navigation{gap:6px;padding:8px 5px}.explorer-workspace .direction-button{min-width:62px;gap:5px;padding:8px}
}
@media(max-height:600px) and (orientation:landscape){.explorer-workspace{padding:8px!important;gap:6px}.explorer-workspace .planner-intro h1{font-size:21px}.explorer-workspace .planner-prompt{font-size:15px}.explorer-workspace .planner-top{min-height:44px}.explorer-workspace .explorer-layout{grid-template-columns:minmax(0,1fr) 230px;gap:8px}.explorer-workspace .direction-help{display:none}.explorer-workspace .map-navigation{gap:6px;padding:4px}.explorer-workspace .direction-button{min-height:44px;min-width:68px;padding:5px 9px}.explorer-workspace .explorer-token{width:64px;height:64px}}
/* Override the retired focus-view width/aspect caps in native fullscreen too. */
.journey-planner.explorer-workspace:fullscreen{display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;gap:12px}
.journey-planner.explorer-workspace .map-section{grid-template-columns:minmax(0,1fr);justify-content:stretch}
.journey-planner.explorer-workspace .map-scroll,.journey-planner.explorer-workspace:fullscreen .map-scroll{width:100%;max-width:none;height:100%;max-height:none;aspect-ratio:auto}
.journey-planner.explorer-workspace:fullscreen .route-panel{max-height:none;height:100%;overflow:auto}
@media(max-width:700px) and (orientation:portrait){.journey-planner.explorer-workspace:fullscreen{display:flex;overflow:auto}.journey-planner.explorer-workspace .map-scroll,.journey-planner.explorer-workspace:fullscreen .map-scroll{height:auto;aspect-ratio:1000/1050}}
.explorer-workspace .town-map{container-type:size}
.journey-planner.explorer-workspace .explorer-token{width:min(88px,12cqh);height:min(88px,12cqh)}

/* Raster grass is clipped to the outside perimeter by the map SVG. */
.explorer-workspace .town-map{background:#e9eed9;border-color:#a9bd96}

/* Small visible junctions retain a 44px touch target. */
.journey-planner.explorer-workspace .path-node{isolation:isolate;border:0;background:transparent;color:transparent;box-shadow:none;font-size:12px;padding:0;display:grid;place-items:center}
.journey-planner.explorer-workspace .path-node::before{content:'';position:absolute;z-index:-1;width:16px;height:16px;border:2px solid #257571;background:#fffbed;border-radius:50%}
.journey-planner.explorer-workspace .path-node.in-plan{color:#fffbed;background:transparent;border:0}
.journey-planner.explorer-workspace .path-node.in-plan::before{width:24px;height:24px;background:#176965;border-color:#fffbed}
.journey-planner.explorer-workspace .path-node.plan-tip::before{box-shadow:0 0 0 2px #a74527}
.explorer-workspace .start-marker,.explorer-workspace .goal-marker{z-index:9;transform:translate(20px,-50%);padding:4px 8px;border:2px solid #8e6a20;border-radius:7px;background:#fff0ba;color:#47350b;font:800 clamp(12px,1.1cqw,16px)/1.2 'Segoe UI',sans-serif;white-space:nowrap;pointer-events:none;box-shadow:0 2px 3px #213e3e22}
.explorer-workspace .goal-marker{background:#e3f4fa;color:#124b60;border-color:#26758b}
.explorer-workspace .start-marker.badge-left,.explorer-workspace .goal-marker.badge-left{transform:translate(calc(-100% - 20px),-50%)}
.start-barriers{position:absolute;inset:0;pointer-events:none;z-index:7}
.start-barrier{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:2px}
.no-entry-symbol{display:grid;place-items:center;width:29px;height:29px;border:3px solid #fffbed;border-radius:50%;background:#b7352c;color:white;box-shadow:0 1px 3px #213e3e55;font:bold 28px/1 Arial,sans-serif}
.no-entry-label{background:#fffbed;border-radius:4px;padding:1px 4px;color:#8f2820;font-size:11px;line-height:1.3;font-weight:800;white-space:nowrap}
@container(max-width:440px){.explorer-workspace .start-marker,.explorer-workspace .goal-marker{padding:3px 5px;transform:translate(14px,-50%);font-size:12px}.explorer-workspace .start-marker.badge-left,.explorer-workspace .goal-marker.badge-left{transform:translate(calc(-100% - 14px),-50%)}.no-entry-symbol{width:24px;height:24px;font-size:23px}.no-entry-label{font-size:10px}}

/* Use the whole block interior between the 32-unit roads. The complete raster contains within the block; compact labels sit along its lower edge. */
.journey-planner.explorer-workspace .start-marker,.journey-planner.explorer-workspace .goal-marker,.journey-planner.explorer-workspace .start-marker.badge-left,.journey-planner.explorer-workspace .goal-marker.badge-left{transform:translate(-50%,-50%);z-index:7}
.journey-planner.explorer-workspace .explorer-token{z-index:8}
@container(min-width:441px){
 .journey-planner.explorer-workspace .map-landmark{width:18.8%;height:20.789474%;display:grid;grid-template-rows:minmax(0,1fr);justify-items:center;align-items:stretch;gap:0;padding:2px;min-height:0}
 .journey-planner.explorer-workspace .map-landmark .picture{width:100%;height:100%;min-height:0;align-self:stretch}
 .journey-planner.explorer-workspace .map-landmark strong{position:absolute;bottom:1px;left:50%;transform:translateX(-50%);max-width:100%;width:max-content;line-height:1.15;padding:2px 5px;z-index:1}
}