/* Presentation only: #app is the actual iframe/standalone viewport. */
#app { container-type: size; container-name: live-map; }
#app[data-presentation] #map { position:absolute; inset:0; height:100%; }
#app[data-presentation] #next-card { top:max(8px, env(safe-area-inset-top)); left:max(10px, env(safe-area-inset-left)); right:max(10px, env(safe-area-inset-right)); width:auto; max-height:none; overflow:visible; padding:10px 12px; }
#app[data-presentation] #next-stop-name, #app[data-presentation] #van-movement-status { overflow-wrap:anywhere; min-width:0; }
#app[data-presentation] #map-controls { position:absolute; bottom:env(safe-area-inset-bottom); height:auto; padding:4px; border-radius:12px; }
#app[data-presentation] #map-controls > button { height:auto; min-height:48px; }
#app[data-presentation] .leaflet-top.leaflet-left { top:auto; bottom:24px; }
#app[data-presentation] .leaflet-bottom { bottom:0; }
#app[data-presentation] #nearest-stop-card { bottom:calc(var(--map-bottom) + 10px); }
#app[data-presentation] #stops-panel { top:auto; bottom:var(--map-bottom); height:calc(100% - var(--map-bottom) - 12px); max-height:650px; }
#app[data-presentation] #map-loading { top:50%; max-width:calc(100% - 32px); }
#app[data-presentation="compact"] #next-stop-name,
#app[data-presentation="compact"] #van-movement-status { font-size:17px; }
/* One shared floating card, sized by the map container. */
#app[data-presentation] #next-card {
 left:auto; right:max(clamp(8px, 2cqi, 16px), env(safe-area-inset-right));
 top:max(8px, env(safe-area-inset-top)); transform:none;
 width:min(340px, calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
 padding:14px 16px; border-radius:16px;
 max-height:calc(100cqh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
 overflow-y:auto; overscroll-behavior:contain;
}
#app[data-presentation] #next-stop-name,
#app[data-presentation] #van-movement-status { font-size:22px; line-height:1.25; }
#app[data-presentation] #next-destination-row > * { min-width:0; }
#app[data-presentation] #next-card:is([data-layout="stop"], [data-layout="stationary"]) #next-stop-name { font-size:14px; }
#app[data-presentation] #next-meta { gap:4px 10px; margin-top:7px; }
#app[data-presentation] #next-meta > span { min-width:0; overflow-wrap:anywhere; }
#app[data-presentation] #next-meta > span:nth-child(2) { display:inline-flex; align-items:center; gap:5px; }
#app[data-presentation] #next-card[data-eta="false"] #next-meta > span:nth-child(2) { display:none; }

@container live-map (max-width: 1023px) {
 #app[data-presentation] #next-card { width:min(42cqi, 320px); padding:9px 11px; border-radius:12px; }
 #app[data-presentation] #next-stop-name,
 #app[data-presentation] #van-movement-status { font-size:16px; line-height:1.25; }
 #app[data-presentation] #next-label { font-size:10px; letter-spacing:.05em; }
 #app[data-presentation] #eta-value { font-size:15px; }
 #app[data-presentation] #next-stop-distance,
 #app[data-presentation] #eta-unavailable { font-size:12px; }
 #app[data-presentation] #next-meta .vehicle-inline-icon { width:24px; }
 #app[data-presentation] #next-meta { margin-top:4px; gap:3px 8px; }
 #app[data-presentation] #tourist-location-warning { font-size:11px; margin-top:4px; padding-top:4px; }
}
@container live-map (max-width: 479px) {
 #app[data-presentation] #next-card { width:min(240px, 72cqi); padding:7px 9px; border-radius:10px; }
 #app[data-presentation] #next-stop-name,
 #app[data-presentation] #van-movement-status { font-size:14px; line-height:1.25; margin-top:2px; }
 #app[data-presentation] #next-card:is([data-layout="stop"], [data-layout="stationary"]) #next-stop-name,
 #app[data-presentation] #next-destination-label { font-size:12px; }
 #app[data-presentation] #eta-value { font-size:14px; }
 #app[data-presentation] #next-meta .vehicle-inline-icon { width:22px; }
 #app[data-presentation] #next-card:is([data-layout="stop"], [data-layout="stationary"]) #next-destination-row { margin-top:3px; }
}
@container live-map (max-width: 339px) {
 #app[data-presentation] #next-card { width:min(210px, calc(100cqi - 20px)); padding:6px 8px; }
}
/* Clamp names visually, never change stored names or hide operational status. */
#app[data-presentation] #next-stop-name,
#app[data-presentation] #van-movement-status {
 display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
 overflow:hidden; overflow-wrap:anywhere;
}
#app[data-presentation] #next-card[data-layout="moving"] #van-movement-status { display:none; }
@container live-map (max-height: 420px) {
 #app[data-presentation] #next-card { padding-block:6px; }
 #app[data-presentation] #next-meta { margin-top:3px; }
}

/* All consumers share floating overlays over the full map surface. */
#app[data-presentation] #map { inset:0; height:100%; }
#app[data-presentation] #next-card {
 width:min(240px, calc(100% - 88px)); /* Basic fallback without container units. */
 width:min(280px, 42cqi); padding:8px 10px; border-radius:12px;
 max-height:none; overflow:visible;
}
#app[data-presentation] #map-controls.widget-action-bar {
 width:min(360px, calc(100% - 24px));
 bottom:calc(24px + env(safe-area-inset-bottom));
 padding:3px; gap:2px; border-radius:12px; border:1px solid #0001;
 box-shadow:0 3px 14px #0002; background:rgba(255,255,255,.97);
}
#app[data-presentation] #map-controls > button {
 min-width:44px; min-height:44px; height:44px; padding:2px; gap:1px;
}
#app[data-presentation] .map-control-label { font-size:11px; line-height:14px; }
#app[data-presentation] .map-control-icon { width:22px; height:22px; }
#app[data-presentation] .leaflet-top.leaflet-left { top:8px; bottom:auto; }
#app[data-presentation] .leaflet-control-zoom { display:block; margin-left:8px; margin-top:0 !important; }
#app[data-presentation] .leaflet-bottom { bottom:env(safe-area-inset-bottom); }
#app[data-presentation] #map-loading { pointer-events:none; }
#app[data-presentation] #next-stop-name,
#app[data-presentation] #van-movement-status { font-size:16px; }
#app[data-presentation] #next-card:is([data-layout="stop"], [data-layout="stationary"]) #next-stop-name { font-size:12px; }
@container live-map (max-width:479px) {
 #app[data-presentation] #next-card { width:min(220px, 64cqi); padding:6px 8px; }
 #app[data-presentation] #next-stop-name,
 #app[data-presentation] #van-movement-status { font-size:14px; }
}
@container live-map (max-width:339px) {
 /* All four labels fit at the supported 320px minimum; retain their meaning. */
 #app[data-presentation] #map-controls.widget-action-bar { width:min(296px, calc(100% - 24px)); }
}