/* A bounded panel: the handle and route choices never slide below the viewport. */
.sheet{display:flex;flex-direction:column;overflow:hidden;padding:0 14px 12px;top:auto;max-height:calc(100% - var(--safe-top) - var(--safe-bottom) - 16px);height:min(76%,700px);transform:none;transition:none;border-radius:24px;touch-action:pan-y}
.sheet[data-detent=compact]{height:166px}
.sheet[data-view=homeView][data-detent=expanded]{height:auto;max-height:min(76%,700px)}
.sheet-handle{flex:0 0 44px;width:calc(100% + 28px);height:44px;min-height:44px;margin:0 -14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;touch-action:none;user-select:none;cursor:ns-resize}
.sheet-handle span{width:34px;height:4px;background:var(--muted);border-radius:8px}
.sheet-handle small{font-size:10px;line-height:12px;color:var(--muted);font-weight:600}
.sheet-handle:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
#sheetContent{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scroll-padding:8px;overflow-anchor:none}
.sheet[data-view=routeView] #sheetContent{overflow:hidden;display:flex;flex-direction:column}
.sheet[data-view=routeView][data-detent=compact]{height:292px}
#routeView:not(.hidden){display:flex;flex-direction:column;flex:1;min-height:0;gap:8px}
#routeView>.plan-head{flex-shrink:0;margin:0;height:30px;min-height:30px;font-size:14px}
#routeView>.plan-head .back-btn{padding:4px 0;min-height:30px}
#routeView>.route-summary{display:block;flex-shrink:0;padding:0;margin:0;min-width:0}
.route-numbers{display:flex;align-items:baseline;gap:12px;white-space:nowrap}
#routeEta{font-size:26px;line-height:32px;letter-spacing:-.7px}
#routeDistance{font-size:16px;font-weight:600;color:var(--muted)}
.route-caption{display:flex;align-items:center;gap:8px;min-width:0;margin-top:2px}
#routeMeta{font-size:12px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
#routeBadge{font-size:10px;padding:2px 6px;line-height:14px;border-radius:6px}
#routeChoices{display:flex;flex-shrink:0;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x;scroll-padding:2px;padding:2px 1px 5px;scrollbar-width:thin}
#routeChoices .route-choice{flex:0 0 72%;max-width:250px;min-height:60px;padding:8px 10px;overflow:hidden}
.route-choice strong,.route-choice span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.route-choice strong{font-size:12px;line-height:17px;margin-bottom:3px}
.route-choice span{font-size:12px;line-height:17px;color:var(--muted)}
#routeChoices .route-choice[aria-pressed=true]{box-shadow:inset 3px 0 var(--accent)}
#routeDetails{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;border-top:1px solid var(--line);padding-top:8px;scroll-padding:8px}
.sheet[data-detent=compact] #routeDetails{display:none}
#routeView>#startNavigation{flex-shrink:0;min-height:44px;height:44px;margin:0;margin-top:auto;border-radius:14px;padding:10px}
.sheet-dragging #sheetContent{pointer-events:none}
.planner-editing .sheet{max-height:calc(100% - var(--safe-top) - var(--safe-bottom) - 16px)}
.route-calculating .sheet{height:auto;max-height:45%}
.route-calculating #sheetContent{flex:auto}
#routePreviewLabel{font-size:11px;line-height:1.4;border-radius:14px;padding:10px 12px}
#routePreviewLabel .preview-metrics{display:flex;gap:14px;margin:5px 0 1px;font-size:17px;color:#fff}
#routePreviewArrival{margin-bottom:5px}
#app:has(#sheet:not(.hidden)) .maplibregl-ctrl-bottom-right{bottom:var(--sheet-map-bottom,0px)}
.maplibregl-ctrl.maplibregl-ctrl-attrib{background:var(--surface)!important;color:var(--muted)}
.maplibregl-ctrl-attrib a{color:inherit}
html:not([data-theme=day]) .maplibregl-ctrl-attrib-button{filter:invert(1)}
@media(min-width:760px), (orientation:landscape) and (max-height:500px){
  .sheet{top:auto;width:390px;height:calc(100% - 86px - var(--safe-top) - var(--safe-bottom));right:auto}
  #routePreviewLabel{left:calc(430px + var(--safe-left));right:70px;max-width:380px}
}
@media(orientation:landscape) and (max-height:500px){
  .sheet{width:min(46vw,390px);height:calc(100% - 16px - var(--safe-top) - var(--safe-bottom))}
  #routePreviewLabel{left:calc(min(46vw,390px) + 28px + var(--safe-left));top:calc(8px + var(--safe-top))}
  .route-calculating .sheet{max-height:calc(100% - 16px - var(--safe-top) - var(--safe-bottom))}
}
@media(max-width:350px){#routeEta{font-size:23px}.route-numbers{gap:8px}#routeDistance{font-size:14px}}
@media(orientation:landscape) and (max-height:360px){
  .sheet[data-view=routeView][data-detent=compact]{height:228px}
  #routeView:not(.hidden){gap:4px}
  #routeView>.plan-head{display:contents}
  #routeView>.plan-head>strong,#routeView>.plan-head>span,.route-caption{display:none}
  #routeView>.plan-head #editTrip{position:absolute;top:0;left:14px;min-height:44px;min-width:44px;z-index:1}
  #routeEta{font-size:23px;line-height:28px}
  #routeChoices .route-choice{min-height:54px}
}