/* U.Venice 9.0 foundation — mobile presentation contracts.
   Desktop remains on the established drawer layout during incremental migration. */

@media (max-width:760px), (max-width:900px) and (max-height:520px){
  /* Complex tasks fill the map workspace, while the application chrome
     remains available. Older 8.11 Journey rules hid these elements because
     the drawer used to cover the full viewport. */
  .uv-app89[data-presentation="fullscreen"]:not(.uv-driver-map-mode) .site-header,
  .uv-app89[data-presentation="fullscreen"]:not(.uv-driver-map-mode) .app-heading{
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .uv-app89[data-presentation="fullscreen"]:not(.uv-driver-map-mode) .toolbar{
    display:none!important;
  }

  .uv-app89[data-presentation="fullscreen"]:not(.uv-driver-map-mode) #drawer.drawer{
    position:absolute!important;
    z-index:1200!important;
    inset:0!important;
    left:0!important;
    right:0!important;
    top:0!important;
    bottom:0!important;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    border-radius:0!important;
    border:0!important;
    box-shadow:none!important;
    background:var(--paper);
  }

  .uv-app89[data-presentation="fullscreen"]:not(.uv-driver-map-mode) #drawer .drawer-head{
    min-height:56px;
    padding:8px 10px 8px 12px;
    background:var(--paper);
  }

  .uv-app89[data-presentation="fullscreen"]:not(.uv-driver-map-mode) #drawer .drawer-body{
    flex:1;
    min-height:0;
    padding:8px 16px calc(24px + env(safe-area-inset-bottom));
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  /* A fullscreen task has one size: remove the legacy collapse affordance. */
  .uv-app89[data-presentation="fullscreen"] #compactBtn{
    display:none!important;
  }

  /* Context belongs to the map and remains deliberately lightweight. */
  .uv-app89[data-presentation="context"]:not(.uv-driver-map-mode) #drawer.drawer{
    left:8px!important;
    right:8px!important;
    top:auto!important;
    bottom:max(10px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:min(48%,420px)!important;
    border-radius:20px!important;
  }

  .uv-app89[data-presentation="context"] #compactBtn{
    display:none!important;
  }

  .uv-app89[data-presentation="context"] #drawer .drawer-body{
    padding-bottom:calc(18px + env(safe-area-inset-bottom));
  }
}

/* Immersive is reserved for turn-by-turn and other map-led guidance sessions.
   The panel drawer must never leak into this state. */
.uv-app89[data-presentation="immersive"] #drawer{
  display:none!important;
}


/* M3.4 — LinePicker: selected land lines stay reachable without scrolling. */
.uv-app89 .line-picker-sticky{
  position:sticky;
  top:-8px;
  z-index:7;
  background:var(--paper);
  padding:2px 0 8px;
  border-bottom:1px solid var(--line);
}
.uv-app89 #view-lines>.line-search{
  position:static!important;
  z-index:auto;
  padding:4px 0 10px;
  border-bottom:1px solid var(--line);
}
.uv-app89 .line-selected-panel[hidden]{display:none!important}
.uv-app89 .line-selected-panel{padding:2px 0 8px}
.uv-app89 .line-selected-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
  font-size:13px;
}
.uv-app89 .line-selected-head strong{font-size:14px}
.uv-app89 .line-selected-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.uv-app89 .line-selected-chip{
  min-height:38px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:14px 14px 14px 5px;
  background:#fff;
  color:var(--ink);
  box-shadow:none;
  gap:7px;
  font-size:14px;
  font-weight:700;
}
.uv-app89 .line-selected-chip-swatch{
  width:9px;height:9px;border-radius:50%;flex:0 0 9px;
}
.uv-app89 .line-selected-chip-remove{
  font-size:18px;line-height:1;color:var(--muted);margin-left:1px;
}
.uv-app89 .line-picker-row{
  align-items:center;
  /* Keep rows below the sticky selected/search block when browsers scroll
     controls into view (notably short iPhone landscape viewports). */
  scroll-margin-top:148px;
}
/* Keep rows below the sticky selected/search block when browsers scroll controls into view. */
.uv-app89 .line-picker-row,
.uv-app89 .line-picker-row input,
.uv-app89 .line-picker-row button{scroll-margin-top:136px}
.uv-app89 .line-picker-swatch{
  width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 10px;
}
@media(max-width:760px){
  .uv-app89 .line-selected-chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .uv-app89 .line-selected-chips::-webkit-scrollbar{display:none}
  .uv-app89 .line-selected-chip{flex:0 0 auto;min-height:40px}
}


/* M3 mobile hardening — Lines owns one dedicated scroll region.
   Drawer/header, selected chips and search stay stable; only route rows scroll.
   This avoids rows slipping under the bottom dock and removes sticky hit-target
   collisions on short mobile viewports. */
@media (max-width:760px), (max-width:900px) and (max-height:520px){
  .uv-app89[data-panel="lines"] .line-selected-panel:not([hidden]){
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:8px;
    padding:0 0 8px;
  }
  .uv-app89[data-panel="lines"] .line-selected-head{
    margin:0;
    white-space:nowrap;
  }
  .uv-app89[data-panel="lines"] .line-selected-head #busSelectedCount{
    display:none;
  }
  .uv-app89[data-panel="lines"] .line-selected-chips{
    min-width:0;
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding-bottom:0;
  }
  .uv-app89[data-panel="lines"] .line-selected-chips::-webkit-scrollbar{display:none}
  .uv-app89[data-panel="lines"] .line-selected-chip{
    flex:0 0 auto;
    min-height:36px;
    padding:6px 9px;
  }
}

@media (max-width:760px), (max-width:900px) and (max-height:520px){
  .uv-app89[data-panel="lines"][data-presentation="fullscreen"] #drawer .drawer-body{
    display:flex;
    flex-direction:column;
    overflow:hidden!important;
    padding:8px 16px 0!important;
  }
  .uv-app89[data-panel="lines"] #view-lines:not([hidden]){
    display:flex;
    flex:1 1 auto;
    min-height:0;
    height:100%;
    flex-direction:column;
  }
  .uv-app89[data-panel="lines"] .line-picker-sticky{
    position:static;
    top:auto;
    z-index:auto;
    flex:0 0 auto;
  }
  .uv-app89[data-panel="lines"] #view-lines>.line-search{
    flex:0 0 auto;
    background:var(--paper);
  }
  .uv-app89[data-panel="lines"] #busPopover{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:calc(20px + env(safe-area-inset-bottom));
    scroll-padding-block:8px 20px;
  }
  .uv-app89[data-panel="lines"] #busList{
    min-height:min-content;
  }
}
@media (max-width:900px) and (max-height:520px) and (orientation:landscape){
  .uv-app89[data-panel="lines"] .line-picker-sticky{padding:0 0 4px;border-bottom:0}
  .uv-app89[data-panel="lines"] .line-selected-panel{padding:0 0 4px}
  .uv-app89[data-panel="lines"] .line-selected-head{margin-bottom:3px}
  .uv-app89[data-panel="lines"] .line-selected-chip{min-height:40px;padding:5px 8px}
  .uv-app89[data-panel="lines"] #view-lines>.line-search{padding:0 0 6px}
  .uv-app89[data-panel="lines"] #view-lines>.line-search .field{margin:2px 0 4px}
}


/* Short-landscape Lines: use width instead of stacking every control vertically.
   The route list receives its own full-height column, so native scrollIntoView
   never needs to move a row beneath the bottom dock or the search controls. */
@media (max-width:900px) and (max-height:520px) and (orientation:landscape){
  .uv-app89[data-panel="lines"] #view-lines:not([hidden]){
    display:grid;
    grid-template-columns:minmax(190px,34%) minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    column-gap:12px;
    align-items:start;
  }
  .uv-app89[data-panel="lines"] .line-picker-sticky{
    grid-column:1;
    grid-row:1;
    min-width:0;
  }
  .uv-app89[data-panel="lines"] #view-lines>.line-search{
    grid-column:1;
    grid-row:2;
    min-width:0;
    align-self:start;
    border-bottom:0;
  }
  .uv-app89[data-panel="lines"] #busPopover{
    grid-column:2;
    grid-row:1 / span 2;
    min-width:0;
    height:100%;
    max-height:100%;
    padding-bottom:8px;
  }
  .uv-app89[data-panel="lines"] .line-picker-row,
  .uv-app89[data-panel="lines"] .line-picker-row input,
  .uv-app89[data-panel="lines"] .line-picker-row button{
    scroll-margin-top:8px;
    scroll-margin-bottom:8px;
  }
}


/* Mobile keyboard mode: the keyboard already occupies the lower viewport,
   so persistent navigation must not consume a second band of scarce space.
   While an input owns focus, hide the dock and give fullscreen tasks the full
   visual viewport. The dock returns as soon as the keyboard closes. */
@media (max-width:760px), (max-width:900px) and (max-height:520px){
  .uv-app89.uv-keyboard-open .app-dock{
    display:none!important;
  }

  .uv-app89.uv-keyboard-open[data-presentation="fullscreen"] #drawer.drawer{
    position:fixed!important;
    inset:auto!important;
    left:0!important;
    right:0!important;
    top:var(--uv-viewport-top,0px)!important;
    bottom:auto!important;
    width:100%!important;
    height:max(1px,var(--uv-app-height,100dvh))!important;
    min-height:0!important;
    max-height:none!important;
    transition:none!important;
  }

  /* No artificial bottom breathing room while the OS keyboard already defines
     the lower edge of the usable viewport. */
  .uv-app89.uv-keyboard-open[data-presentation="fullscreen"] #drawer .drawer-body{
    padding-bottom:0!important;
  }
  .uv-app89.uv-keyboard-open[data-panel="lines"] #busPopover{
    padding-bottom:0!important;
    scroll-padding-bottom:0!important;
  }
}


/* M10 UX contract — task screens own the full usable app height.
   Global map chrome belongs to the map only; the bottom dock remains the
   persistent cross-section navigation. */
.uv-app89{--uv-dock-space:86px}
.uv-app89[data-presentation="fullscreen"]:not([data-panel^="driver-"]) .site-header,
.uv-app89[data-presentation="fullscreen"]:not([data-panel^="driver-"]) .app-heading{
  visibility:hidden!important;
  pointer-events:none!important;
}
.uv-app89[data-presentation="fullscreen"]:not([data-panel^="driver-"]) #drawer.drawer{
  position:fixed!important;
  z-index:1600!important;
  top:var(--uv-viewport-top,0px)!important;
  right:0!important;
  bottom:calc(100dvh - var(--uv-viewport-top,0px) - var(--uv-app-height,100dvh) + var(--uv-dock-space) - 8px)!important;
  left:0!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:var(--paper)!important;
}
.uv-app89[data-presentation="fullscreen"]:not([data-panel^="driver-"]) #drawer .drawer-head{
  min-height:58px;
  padding:max(8px,env(safe-area-inset-top)) 12px 8px 16px;
  background:var(--paper);
}
.uv-app89[data-presentation="fullscreen"]:not([data-panel^="driver-"]) #drawer .drawer-body{
  flex:1!important;
  min-height:0!important;
  max-height:none!important;
  overflow:auto!important;
  padding:10px 18px calc(24px + env(safe-area-inset-bottom))!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.uv-app89[data-presentation="fullscreen"] #compactBtn{display:none!important}
@media(max-width:760px){.uv-app89{--uv-dock-space:82px}}
@media(max-width:900px) and (max-height:520px) and (orientation:landscape){.uv-app89{--uv-dock-space:82px}}
.uv-app89.uv-keyboard-open[data-presentation="fullscreen"]:not([data-panel^="driver-"]) #drawer.drawer{
  top:var(--uv-viewport-top,0px)!important;
  bottom:auto!important;
  height:max(1px,var(--uv-app-height,100dvh))!important;
}
.uv-app89.uv-keyboard-open[data-presentation="fullscreen"]:not([data-panel^="driver-"]) #drawer .drawer-body{padding-bottom:0!important}


/* M10/M12 desktop responsive panel contract.
   Preserve full-height task workspaces on phones and landscape compact viewports.
   On desktop keep the live map visible alongside a standard contained drawer. */
@media (min-width:901px) {
  .uv-app89[data-presentation="fullscreen"]:not([data-panel^="driver-"]) .site-header,
  .uv-app89[data-presentation="fullscreen"]:not([data-panel^="driver-"]) .app-heading {
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .uv-app89[data-presentation="fullscreen"]:not([data-panel^="driver-"]) #drawer.drawer {
    position:absolute!important;
    inset:auto!important;
    top:clamp(76px,9vh,112px)!important;
    bottom:clamp(16px,2.5vh,30px)!important;
    left:clamp(14px,2vw,32px)!important;
    right:auto!important;
    width:clamp(350px,33vw,520px)!important;
    max-width:calc(100% - 36px)!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    border:1px solid var(--line,#d8ded5)!important;
    border-radius:22px!important;
    box-shadow:0 16px 50px #25291c25!important;
    overflow:hidden;
  }
  .uv-app89[data-presentation="fullscreen"]:not([data-panel^="driver-"]) #drawer .drawer-head {
    min-height:58px;
    padding:10px 13px 10px 17px;
  }
  .uv-app89[data-presentation="fullscreen"]:not([data-panel^="driver-"]) #drawer .drawer-body {
    min-width:0;
    min-height:0!important;
    overflow:auto!important;
    padding:13px 17px 24px!important;
  }
  .uv-app89[data-presentation="fullscreen"]:not([data-panel^="driver-"]) #stationContent,
  .uv-app89[data-presentation="fullscreen"]:not([data-panel^="driver-"]) #view-favorites,
  .uv-app89[data-presentation="fullscreen"]:not([data-panel^="driver-"]) #view-account {
    width:100%;
    min-width:0;
    max-width:100%;
  }
  .uv-app89[data-presentation="fullscreen"]:not([data-panel^="driver-"]) .account-section-grid {
    grid-template-columns:1fr;
  }
}