/* Avelune v0.20.21 — mobile Trip viewport + itinerary scroll containment.
   Scope: mobile Trip screen only. Desktop presentation is intentionally untouched.
   The mobile workspace uses one vertical viewport: header, compact Up Next, then a
   contained itinerary scroller. The same dedicated sticky-day rail used on desktop
   is reused here so the active date never overlaps itinerary cards. */

@media (max-width: 760px) {
  /* Own the mobile viewport so the itinerary panel, not the entire document,
     provides the primary Trip scroll. */
  #tripWorkspace:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace > .aveluneTripBar {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace > main.tripMainLayout {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* MOBILE CONTEXT: show Up Next, hide the duplicate full Weather card. */
  #tripWorkspace .tripLeftColumn {
    flex: 0 0 auto !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 16px 12px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace .tripContextCards {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace .tripContextCards > #heroNext {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 116px !important;
    max-height: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #tripWorkspace .tripContextCards > #heroWeather {
    display: none !important;
  }

  /* The planner toolbar already owns Map View. Keep the legacy map toggle as a
     behavior hook only, not another visible mobile control. */
  #tripWorkspace #mobileMapToggle {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #tripWorkspace .mapPane {
    display: none !important;
  }

  /* ITINERARY PANEL: it fills the remaining viewport and becomes the vertical
     scroll box. This is what allows the toolbar and day rail to remain stable. */
  #tripWorkspace > main.tripMainLayout > .panel {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace > main.tripMainLayout > .panel > #content {
    --avelune-mobile-toolbar-height: 176px;
    --avelune-mobile-day-rail-height: 72px;
    flex: 1 1 auto !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 0 calc(132px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-padding-top: calc(var(--avelune-mobile-toolbar-height) + var(--avelune-mobile-day-rail-height)) !important;
    box-sizing: border-box !important;
  }

  /* Four planner controls stay inside the cream panel. Two equal columns,
     no negative margins, no viewport overflow. */
  #tripWorkspace #content > .plannerToolbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 72px) !important;
    gap: 10px !important;
    width: 100% !important;
    height: var(--avelune-mobile-toolbar-height) !important;
    min-height: var(--avelune-mobile-toolbar-height) !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: var(--ivory, #fffaf0) !important;
    box-shadow: 0 10px 18px rgba(11,31,42,.035) !important;
    isolation: isolate !important;
  }

  #tripWorkspace #content > .plannerToolbar > button,
  #tripWorkspace #content > .plannerToolbar > .plannerTool,
  #tripWorkspace #content > .plannerToolbar > .planViewButton {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #tripWorkspace #content > .plannerToolbar > button span,
  #tripWorkspace #content > .plannerToolbar > .plannerTool span,
  #tripWorkspace #content > .plannerToolbar > .planViewButton span {
    min-width: 0 !important;
  }

  #tripWorkspace #content > .plannerToolbar b,
  #tripWorkspace #content > .plannerToolbar small {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* MOBILE STICKY DAY RAIL: same system as desktop. It owns reserved space
     immediately below the planner controls so no itinerary card can sit under it. */
  #tripWorkspace #content.itineraryStickyDayMode > .itineraryStickyDayRail {
    position: sticky !important;
    top: var(--avelune-mobile-toolbar-height) !important;
    z-index: 89 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    height: var(--avelune-mobile-day-rail-height) !important;
    min-height: var(--avelune-mobile-day-rail-height) !important;
    max-height: var(--avelune-mobile-day-rail-height) !important;
    margin: 0 !important;
    padding: 10px 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: var(--ivory, #fffaf0) !important;
    border-bottom: 1px solid rgba(198,162,110,.32) !important;
    box-shadow: 0 8px 14px rgba(11,31,42,.025) !important;
  }

  #tripWorkspace #content.itineraryStickyDayMode > .itineraryStickyDayRail > div {
    min-width: 0 !important;
  }

  #tripWorkspace #content.itineraryStickyDayMode > .itineraryStickyDayRail .eyebrow {
    display: block !important;
    margin: 0 0 2px !important;
  }

  #tripWorkspace #content.itineraryStickyDayMode > .itineraryStickyDayRail h3 {
    margin: 0 !important;
    line-height: 1.05 !important;
  }

  #tripWorkspace #content.itineraryStickyDayMode > .itineraryStickyDayRail .dayHint {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Keep the real dates in the scroll as visual day separators, just like the
     desktop version. They are in-flow only; the dedicated rail is the sticky UI. */
  #tripWorkspace #content.itineraryStickyDayMode > .planDay > .dayHead {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 64px !important;
    max-height: none !important;
    margin: 0 0 10px !important;
    padding: 10px 18px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-bottom: 1px solid rgba(198,162,110,.28) !important;
    box-shadow: none !important;
    background: var(--ivory, #fffaf0) !important;
  }

  #tripWorkspace #content.itineraryStickyDayMode > .planDay > .dayHead h3 {
    margin: 0 !important;
    line-height: 1.05 !important;
  }

  #tripWorkspace #content.itineraryStickyDayMode > .planDay > .dayHead .dayHint {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  #tripWorkspace #content.itineraryStickyDayMode > .planDay,
  #tripWorkspace #content.itineraryStickyDayMode > .itineraryStickyDayRail + .planDay {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #tripWorkspace #content.itineraryStickyDayMode > .planDay + .planDay {
    margin-top: 18px !important;
  }

  #tripWorkspace #content.itineraryStickyDayMode > .planDay > .dayItems {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Preserve Map View behavior inside the remaining viewport. */
  body.mobileMapOpen #tripWorkspace > main.tripMainLayout {
    min-height: 0 !important;
  }

  body.mobileMapOpen #tripWorkspace .tripLeftColumn {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.mobileMapOpen #tripWorkspace .tripContextCards {
    display: none !important;
  }

  body.mobileMapOpen #tripWorkspace .mapPane {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body.mobileMapOpen #tripWorkspace .mapPane #map {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body.mobileMapOpen #tripWorkspace > main.tripMainLayout > .panel {
    display: none !important;
  }
}

/* Avelune v0.20.22 — mobile Trip width + Up Next recovery.
   This is intentionally mobile-only and layers on top of the working v0.20.21
   scroll/sticky-date system. It does not change desktop presentation. */
@media (max-width: 760px) {
  /* The Trip workspace and its scroll panel must never be wider than the
     visual viewport. This prevents the cream itinerary surface and its
     controls from drifting off-center or creating horizontal drag. */
  html,
  body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  #tripWorkspace:not([hidden]) {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #tripWorkspace > main.tripMainLayout,
  #tripWorkspace > main.tripMainLayout > .panel,
  #tripWorkspace > main.tripMainLayout > .panel > #content {
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Restore Up Next as a compact, fixed-height context card directly below
     the mobile header. Constraining the card and its inner legacy content is
     important: older hero styles otherwise inflate this region and push the
     itinerary too far down the screen. */
  #tripWorkspace .tripLeftColumn {
    flex: 0 0 136px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 136px !important;
    min-height: 136px !important;
    max-height: 136px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace .tripContextCards {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace .tripContextCards > #heroNext,
  #tripWorkspace #heroNext {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #tripWorkspace #heroNext .avHeroBody,
  #tripWorkspace #heroNext .avHeroPlaceholder {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace #heroNext .heroTravelLeg {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Keep the duplicate full weather card out of the mobile context row. */
  #tripWorkspace .tripContextCards > #heroWeather,
  #tripWorkspace #heroWeather {
    display: none !important;
  }

  /* The itinerary panel now starts immediately after Up Next and consumes all
     remaining height. The working internal vertical scroller from v0.20.21 is
     preserved. */
  #tripWorkspace > main.tripMainLayout > .panel {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #tripWorkspace > main.tripMainLayout > .panel > #content {
    --avelune-mobile-toolbar-height: 140px;
    --avelune-mobile-day-rail-height: 68px;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  /* Reduce and center the four planner controls. The toolbar itself remains
     full-width and opaque so itinerary rows disappear cleanly beneath it, but
     the buttons sit inside equal inset columns rather than touching the edges. */
  #tripWorkspace #content > .plannerToolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 58px) !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--avelune-mobile-toolbar-height) !important;
    min-height: var(--avelune-mobile-toolbar-height) !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #tripWorkspace #content > .plannerToolbar > button,
  #tripWorkspace #content > .plannerToolbar > .plannerTool,
  #tripWorkspace #content > .plannerToolbar > .planViewButton {
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    transform: none !important;
    overflow: hidden !important;
  }

  #tripWorkspace #content > .plannerToolbar > button > span,
  #tripWorkspace #content > .plannerToolbar > .plannerTool > span,
  #tripWorkspace #content > .plannerToolbar > .planViewButton > span {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #tripWorkspace #content > .plannerToolbar b {
    font-size: clamp(14px, 4vw, 17px) !important;
    line-height: 1.05 !important;
  }

  #tripWorkspace #content > .plannerToolbar small {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  /* Preserve the working sticky-day behavior, just match the shorter toolbar. */
  #tripWorkspace #content.itineraryStickyDayMode > .itineraryStickyDayRail {
    top: var(--avelune-mobile-toolbar-height) !important;
    height: var(--avelune-mobile-day-rail-height) !important;
    min-height: var(--avelune-mobile-day-rail-height) !important;
    max-height: var(--avelune-mobile-day-rail-height) !important;
    padding: 8px 16px !important;
  }

  #tripWorkspace #content.itineraryStickyDayMode > .planDay > .dayHead {
    min-height: 58px !important;
    padding: 8px 16px !important;
  }

  /* Map View keeps the same viewport ownership when opened. */
  body.mobileMapOpen #tripWorkspace .tripLeftColumn {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
  }
}

/* Avelune v0.20.23 — compact mobile planner controls + deterministic Up Next.
   This layers only on the mobile Trip workspace. Desktop remains unchanged. */
@media (max-width: 760px) {
  /* Reset inherited desktop/grid spacing that was leaving a large empty navy
     band between the Trip header and itinerary on small screens. */
  #tripWorkspace:not([hidden]) > main.tripMainLayout {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: stretch !important;
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Up Next owns one compact, predictable row directly beneath the header. */
  #tripWorkspace:not([hidden]) > main.tripMainLayout > .tripLeftColumn {
    position: relative !important;
    inset: auto !important;
    order: 0 !important;
    flex: 0 0 126px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    margin: 0 !important;
    padding: 8px 12px 8px !important;
    overflow: hidden !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace:not([hidden]) > main.tripMainLayout > .tripLeftColumn > .tripContextCards {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 110px !important;
    min-height: 110px !important;
    max-height: 110px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace:not([hidden]) > main.tripMainLayout > .tripLeftColumn > .tripContextCards > #heroNext {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    clip: auto !important;
    clip-path: none !important;
    transform: none !important;
    z-index: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 110px !important;
    min-height: 110px !important;
    max-height: 110px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace:not([hidden]) > main.tripMainLayout > .tripLeftColumn > .tripContextCards > #heroWeather {
    display: none !important;
  }

  /* The itinerary starts immediately below Up Next and consumes all remaining
     viewport height. No extra top margin or grid offset survives on mobile. */
  #tripWorkspace:not([hidden]) > main.tripMainLayout > .panel {
    position: relative !important;
    inset: auto !important;
    order: 1 !important;
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace:not([hidden]) > main.tripMainLayout > .panel > #content {
    --avelune-mobile-toolbar-height: 116px;
    --avelune-mobile-day-rail-height: 64px;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    scroll-padding-top: calc(var(--avelune-mobile-toolbar-height) + var(--avelune-mobile-day-rail-height)) !important;
  }

  /* Smaller, centered 2 x 2 planner controls. Maintain >=44px touch targets. */
  #tripWorkspace:not([hidden]) #content > .plannerToolbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 48px) !important;
    justify-content: stretch !important;
    align-content: center !important;
    gap: 6px 8px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: var(--avelune-mobile-toolbar-height) !important;
    min-height: var(--avelune-mobile-toolbar-height) !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #tripWorkspace:not([hidden]) #content > .plannerToolbar > button,
  #tripWorkspace:not([hidden]) #content > .plannerToolbar > .plannerTool,
  #tripWorkspace:not([hidden]) #content > .plannerToolbar > .planViewButton {
    position: relative !important;
    inset: auto !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    transform: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #tripWorkspace:not([hidden]) #content > .plannerToolbar b {
    font-size: clamp(13px, 3.7vw, 16px) !important;
    line-height: 1.02 !important;
  }

  #tripWorkspace:not([hidden]) #content > .plannerToolbar small {
    font-size: 9px !important;
    line-height: 1 !important;
  }

  #tripWorkspace:not([hidden]) #content > .plannerToolbar .toolIcon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    font-size: 16px !important;
  }

  #tripWorkspace:not([hidden]) #content > .plannerToolbar .calendarGlyph {
    font-size: 19px !important;
    line-height: 1 !important;
  }

  /* Keep the already-working sticky day system synchronized to the shorter
     planner controls. */
  #tripWorkspace:not([hidden]) #content.itineraryStickyDayMode > .itineraryStickyDayRail {
    top: var(--avelune-mobile-toolbar-height) !important;
    height: var(--avelune-mobile-day-rail-height) !important;
    min-height: var(--avelune-mobile-day-rail-height) !important;
    max-height: var(--avelune-mobile-day-rail-height) !important;
    padding: 7px 14px !important;
  }

  /* Map View continues to take over the remaining workspace when explicitly opened. */
  body.mobileMapOpen #tripWorkspace:not([hidden]) > main.tripMainLayout > .tripLeftColumn {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
  }
}

/* Avelune v0.20.24 — mobile Trip compact composition.
   Purpose: remove the empty navy band, keep Up Next directly under the Trip
   header, shrink the four planner controls materially, and give the itinerary
   every remaining pixel down to the bottom of the viewport. Desktop is untouched. */
@media (max-width: 760px) {
  /* The screen is exactly two rows: Trip header + the usable Trip workspace.
     This prevents any legacy hero/grid height from creating an empty navy band. */
  #tripWorkspace:not([hidden]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    justify-content: stretch !important;
    align-content: stretch !important;
    gap: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace:not([hidden]) > .aveluneTripBar {
    grid-row: 1 !important;
    align-self: start !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* The usable workspace is two rows: compact Up Next + itinerary. */
  #tripWorkspace:not([hidden]) > main.tripMainLayout {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 104px minmax(0, 1fr) !important;
    justify-content: stretch !important;
    align-content: stretch !important;
    gap: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Up Next sits immediately below the header; no spacer can exist above it. */
  #tripWorkspace:not([hidden]) > main.tripMainLayout > .tripLeftColumn {
    grid-row: 1 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    overflow: hidden !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace:not([hidden]) > main.tripMainLayout > .tripLeftColumn > .tripContextCards {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace:not([hidden]) > main.tripMainLayout > .tripLeftColumn > .tripContextCards > #heroNext {
    position: static !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    clip: auto !important;
    clip-path: none !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace:not([hidden]) #heroWeather {
    display: none !important;
  }

  /* The cream itinerary starts immediately after Up Next and owns all remaining
     viewport height, including the area behind the floating Ask Avelune button. */
  #tripWorkspace:not([hidden]) > main.tripMainLayout > .panel {
    grid-row: 2 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace:not([hidden]) > main.tripMainLayout > .panel > #content {
    --avelune-mobile-toolbar-height: 102px;
    --avelune-mobile-day-rail-height: 62px;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 0 calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-padding-top: calc(var(--avelune-mobile-toolbar-height) + var(--avelune-mobile-day-rail-height)) !important;
    box-sizing: border-box !important;
  }

  /* The controls stay in a 2 x 2 grid, but the visible pills are about 30%
     narrower than the prior near-half-screen treatment. Keep a 44px touch height. */
  #tripWorkspace:not([hidden]) #content > .plannerToolbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 44px) !important;
    justify-items: center !important;
    align-items: center !important;
    align-content: center !important;
    column-gap: 4px !important;
    row-gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: var(--avelune-mobile-toolbar-height) !important;
    min-height: var(--avelune-mobile-toolbar-height) !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: var(--ivory, #fffaf0) !important;
  }

  /* Keep the mobile Trip actions in their semantic 2 x 2 cells even if the
     shared toolbar markup gains another non-desktop control later. */
  #tripWorkspace:not([hidden]) #content > .plannerToolbar {
    grid-template-areas: "whole map" "saved ai" !important;
  }
  #tripWorkspace:not([hidden]) #content > .plannerToolbar #planCalendarBtn { grid-area: whole !important; }
  #tripWorkspace:not([hidden]) #content > .plannerToolbar #mobilePlannerMap { grid-area: map !important; }
  #tripWorkspace:not([hidden]) #content > .plannerToolbar #savedPlacesToolbar { grid-area: saved !important; }
  #tripWorkspace:not([hidden]) #content > .plannerToolbar #pageAi { grid-area: ai !important; }

  #tripWorkspace:not([hidden]) #content > .plannerToolbar > button,
  #tripWorkspace:not([hidden]) #content > .plannerToolbar > .plannerTool,
  #tripWorkspace:not([hidden]) #content > .plannerToolbar > .planViewButton {
    position: relative !important;
    inset: auto !important;
    justify-self: center !important;
    align-self: center !important;
    width: clamp(124px, 34vw, 146px) !important;
    max-width: 146px !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    transform: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #tripWorkspace:not([hidden]) #content > .plannerToolbar b {
    font-size: clamp(12px, 3.35vw, 14px) !important;
    line-height: 1 !important;
  }

  #tripWorkspace:not([hidden]) #content > .plannerToolbar small {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  #tripWorkspace:not([hidden]) #content > .plannerToolbar .toolIcon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    font-size: 14px !important;
  }

  #tripWorkspace:not([hidden]) #content > .plannerToolbar .calendarGlyph {
    font-size: 17px !important;
    line-height: 1 !important;
  }

  #tripWorkspace:not([hidden]) #content.itineraryStickyDayMode > .itineraryStickyDayRail {
    top: var(--avelune-mobile-toolbar-height) !important;
    height: var(--avelune-mobile-day-rail-height) !important;
    min-height: var(--avelune-mobile-day-rail-height) !important;
    max-height: var(--avelune-mobile-day-rail-height) !important;
    padding: 7px 12px !important;
  }

  /* Map View still takes over the workspace when the traveler explicitly opens it. */
  body.mobileMapOpen #tripWorkspace:not([hidden]) > main.tripMainLayout {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  body.mobileMapOpen #tripWorkspace:not([hidden]) > main.tripMainLayout > .tripLeftColumn {
    flex: 1 1 auto !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
  }
}


/* Avelune v0.20.25 — remove legacy mobile hero/banner reservation.
   The current Trip HTML has no banner element. The remaining navy gap was a
   legacy positioning reservation inherited from older Trip hero/layout CSS.
   Reset the actual mobile Trip workspace geometry here, after all legacy CSS. */
@media (max-width: 760px) {
  #tripWorkspace:not([hidden]),
  #tripWorkspace:not([hidden]) > main.tripMainLayout {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
  }

  /* Kill any legacy decorative/banner pseudo layer that can reserve visual
     hero space on the mobile Trip screen. Desktop is intentionally untouched. */
  #tripWorkspace:not([hidden])::before,
  #tripWorkspace:not([hidden])::after,
  #tripWorkspace:not([hidden]) > main.tripMainLayout::before,
  #tripWorkspace:not([hidden]) > main.tripMainLayout::after {
    content: none !important;
    display: none !important;
  }

  /* Force the usable Trip workspace to begin immediately after the real header. */
  #tripWorkspace:not([hidden]) > main.tripMainLayout {
    grid-row: 2 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Up Next is the first visible workspace row, with no reserved hero/banner
     height before it. */
  #tripWorkspace:not([hidden]) > main.tripMainLayout > .tripLeftColumn {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    transform: none !important;
    margin-top: 0 !important;
  }
}

/* Avelune v0.20.26 — mobile Up Next visibility + control balance.
   Scope: mobile Trip screen only. The Trip header is returned to normal flow so
   it cannot cover the Up Next card, and the planner pills are raised slightly
   from the over-compressed v0.20.24 size while remaining centered and contained. */
@media (max-width: 760px) {
  /* The Trip bar must participate in the workspace grid. The itinerary itself
     owns scrolling, so the bar does not need fixed/absolute positioning. */
  #tripWorkspace:not([hidden]) > .aveluneTripBar {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    grid-row: 1 !important;
    align-self: start !important;
    z-index: 100 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Reserve one compact visible row for Up Next immediately beneath the bar. */
  #tripWorkspace:not([hidden]) > main.tripMainLayout {
    grid-template-rows: 126px minmax(0, 1fr) !important;
  }

  #tripWorkspace:not([hidden]) > main.tripMainLayout > .tripLeftColumn {
    grid-row: 1 !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    padding: 7px 12px !important;
    overflow: hidden !important;
  }

  #tripWorkspace:not([hidden]) > main.tripMainLayout > .tripLeftColumn > .tripContextCards {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    overflow: hidden !important;
  }

  #tripWorkspace:not([hidden]) > main.tripMainLayout > .tripLeftColumn > .tripContextCards > #heroNext {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    padding: 11px 15px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace:not([hidden]) #heroNext > *,
  #tripWorkspace:not([hidden]) #heroNext .avNextMain,
  #tripWorkspace:not([hidden]) #heroNext .avNextContent,
  #tripWorkspace:not([hidden]) #heroNext .avNextEyebrow,
  #tripWorkspace:not([hidden]) #heroNext .avNextTitle,
  #tripWorkspace:not([hidden]) #heroNext .avNextMeta,
  #tripWorkspace:not([hidden]) #heroNext .heroTravelLeg {
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Keep the itinerary directly beneath Up Next and let it consume the rest. */
  #tripWorkspace:not([hidden]) > main.tripMainLayout > .panel {
    grid-row: 2 !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  #tripWorkspace:not([hidden]) > main.tripMainLayout > .panel > #content {
    --avelune-mobile-toolbar-height: 116px;
    --avelune-mobile-day-rail-height: 62px;
  }

  /* Slightly restore scale after v0.20.24 compressed the controls too far.
     Still compact, centered, and safely inside a 320–430px phone viewport. */
  #tripWorkspace:not([hidden]) #content > .plannerToolbar {
    grid-template-rows: repeat(2, 50px) !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
    height: var(--avelune-mobile-toolbar-height) !important;
    min-height: var(--avelune-mobile-toolbar-height) !important;
    padding: 5px 12px !important;
  }

  #tripWorkspace:not([hidden]) #content > .plannerToolbar > button,
  #tripWorkspace:not([hidden]) #content > .plannerToolbar > .plannerTool,
  #tripWorkspace:not([hidden]) #content > .plannerToolbar > .planViewButton {
    width: clamp(136px, 40vw, 160px) !important;
    max-width: 160px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 5px 10px !important;
  }

  #tripWorkspace:not([hidden]) #content > .plannerToolbar b {
    font-size: clamp(13px, 3.6vw, 16px) !important;
    line-height: 1.02 !important;
  }

  #tripWorkspace:not([hidden]) #content > .plannerToolbar small {
    font-size: 9px !important;
  }

  #tripWorkspace:not([hidden]) #content > .plannerToolbar .toolIcon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    font-size: 15px !important;
  }

  #tripWorkspace:not([hidden]) #content > .plannerToolbar .calendarGlyph {
    font-size: 18px !important;
  }

  #tripWorkspace:not([hidden]) #content.itineraryStickyDayMode > .itineraryStickyDayRail {
    top: var(--avelune-mobile-toolbar-height) !important;
  }
}

/* Avelune v0.20.27 — mobile itinerary edge containment.
   A legacy absolute-position rule left #content inset by 10px while a later
   mobile rule restored it to 100% width. Reset that inset, then reserve the
   full approved touch-target width for the stop expansion control. */
@media (max-width: 760px) {
  #tripWorkspace:not([hidden]) > main.tripMainLayout > .panel > #content {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #tripWorkspace:not([hidden]) .p34Card {
    grid-template-columns: clamp(78px, 24vw, 92px) minmax(0, 1fr) 44px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace:not([hidden]) .p34Card > .expandChevron {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    justify-self: end !important;
  }
}

/* v0.20.48 — responsive mobile Trip baseline.
   These final mobile rules intentionally replace the previous fixed-height
   composition: Up Next is content-driven, while the itinerary remains the
   only ordinary vertical scroller. */
@media (max-width: 760px) {
  #tripWorkspace:not([hidden]),
  #tripWorkspace:not([hidden]) > main.tripMainLayout,
  #tripWorkspace:not([hidden]) > main.tripMainLayout > .panel,
  #tripWorkspace:not([hidden]) > main.tripMainLayout > .panel > #content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace:not([hidden]) > main.tripMainLayout {
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  /* Let the existing Ask action float above the safe area; its click handler
     and all Ask behavior remain unchanged. */
  #tripWorkspace:not([hidden]) .aveluneTripExplore {
    left: max(14px, env(safe-area-inset-left, 0px)) !important;
    right: max(14px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* Up Next must never reserve a card height smaller than its travel strip. */
  #tripWorkspace:not([hidden]) > main.tripMainLayout > .tripLeftColumn,
  #tripWorkspace:not([hidden]) > main.tripMainLayout > .tripLeftColumn > .tripContextCards,
  #tripWorkspace:not([hidden]) > main.tripMainLayout > .tripLeftColumn > .tripContextCards > #heroNext {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #tripWorkspace:not([hidden]) > main.tripMainLayout > .tripLeftColumn {
    padding: 8px 12px !important;
  }

  #tripWorkspace:not([hidden]) > main.tripMainLayout > .tripLeftColumn > .tripContextCards > #heroNext {
    padding: 12px 14px !important;
  }

  #tripWorkspace:not([hidden]) #heroNext .avNextMain,
  #tripWorkspace:not([hidden]) #heroNext .avNextContent,
  #tripWorkspace:not([hidden]) #heroNext .avNextTitle,
  #tripWorkspace:not([hidden]) #heroNext .avNextMeta,
  #tripWorkspace:not([hidden]) #heroNext .heroTravelLeg,
  #tripWorkspace:not([hidden]) #heroNext .heroTravelLegText {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  #tripWorkspace:not([hidden]) #heroNext .avNextMeta {
    white-space: normal !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }

  #tripWorkspace:not([hidden]) #heroNext .heroTravelLeg {
    width: 100% !important;
    margin-top: 8px !important;
    overflow: visible !important;
  }

  #tripWorkspace:not([hidden]) #heroNext .heroTravelLeg b,
  #tripWorkspace:not([hidden]) #heroNext .heroTravelLeg span:not(.heroTravelLegIcon) {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #tripWorkspace:not([hidden]) > main.tripMainLayout > .panel > #content {
    --avelune-mobile-toolbar-height: 112px;
    --avelune-mobile-day-rail-height: 62px;
    padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
  }

  /* Fluid 2 × 2 controls: no fixed button width can escape a 320px screen. */
  #tripWorkspace:not([hidden]) #content > .plannerToolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 48px) !important;
    gap: 6px 8px !important;
    width: 100% !important;
    height: var(--avelune-mobile-toolbar-height) !important;
    min-height: var(--avelune-mobile-toolbar-height) !important;
    padding: 5px 12px !important;
  }

  #tripWorkspace:not([hidden]) #content > .plannerToolbar > button,
  #tripWorkspace:not([hidden]) #content > .plannerToolbar > .plannerTool,
  #tripWorkspace:not([hidden]) #content > .plannerToolbar > .planViewButton {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 5px 9px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace:not([hidden]) #content.itineraryStickyDayMode > .itineraryStickyDayRail {
    top: var(--avelune-mobile-toolbar-height) !important;
  }

  /* Preserve all itinerary data, but remove inherited desktop-like whitespace. */
  #tripWorkspace:not([hidden]) #content .planDay { padding-block: 8px 12px !important; }
  #tripWorkspace:not([hidden]) #content .planDay + .planDay { margin-top: 8px !important; }
  #tripWorkspace:not([hidden]) #content .planDay > .dayHead {
    min-height: 56px !important;
    margin-bottom: 6px !important;
    padding: 8px 14px !important;
  }
  #tripWorkspace:not([hidden]) .p34Card {
    grid-template-columns: minmax(68px, 22vw) minmax(0, 1fr) 36px !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin-block: 6px !important;
    padding: 9px 10px !important;
  }
  #tripWorkspace:not([hidden]) .p34Lead { gap: 5px !important; }
  #tripWorkspace:not([hidden]) .p34Icon { width: 28px !important; height: 28px !important; }
  #tripWorkspace:not([hidden]) .p34Time { font-size: .68rem !important; }
  #tripWorkspace:not([hidden]) .p34TitleRow .title { font-size: .92rem !important; }
  #tripWorkspace:not([hidden]) .p34Status { margin-top: 4px !important; gap: 4px !important; }
  #tripWorkspace:not([hidden]) .p34Status span { padding: 3px 6px !important; }
  #tripWorkspace:not([hidden]) .p34Desc,
  #tripWorkspace:not([hidden]) .p34Travel { margin-top: 2px !important; }
  #tripWorkspace:not([hidden]) .p34Card .expandChevron {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  #tripWorkspace .tripMainLayout,
  #tripWorkspace .tripLeftColumn,
  #tripWorkspace .panel { min-width: 0; }
}

/* Batch A.1 — mobile utility row and compact Up Next. */
@media (max-width: 760px) {
  #tripWorkspace:not([hidden]) > main.tripMainLayout > .tripLeftColumn > .tripContextCards > #heroNext {
    padding:9px 12px!important;
  }
  #tripWorkspace:not([hidden]) #heroNext .avNextEyebrow{margin-bottom:3px!important;font-size:8px!important}
  #tripWorkspace:not([hidden]) #heroNext .avNextTitle{font-size:15px!important;line-height:1.08!important}
  #tripWorkspace:not([hidden]) #heroNext .avNextMeta{display:none!important}
  #tripWorkspace:not([hidden]) #heroNext .heroTravelLeg{margin-top:4px!important;font-size:11px!important}
  #tripWorkspace:not([hidden]) #heroNext .heroTravelLegText{display:flex!important;gap:5px!important;align-items:baseline!important}
  #tripWorkspace:not([hidden]) #heroNext .heroTravelLegText b,#tripWorkspace:not([hidden]) #heroNext .heroTravelLegText span{font-size:11px!important;white-space:nowrap!important}
  #tripWorkspace:not([hidden]) #heroNext .avNextDirections{margin-top:6px!important;min-height:32px!important;padding:5px 10px!important;font-size:.66rem!important}

  /* This is the last mobile toolbar rule in the cascade. Keep it aligned with
     the actual two-row grid above; the prior one-row override clipped the
     Saved and Avelune AI controls beneath the itinerary boundary. */
  #tripWorkspace:not([hidden]) > main.tripMainLayout > .panel > #content{--avelune-mobile-toolbar-height:102px!important}
  #tripWorkspace:not([hidden]) #content > .plannerToolbar{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,44px)!important;
    height:var(--avelune-mobile-toolbar-height)!important;
    min-height:var(--avelune-mobile-toolbar-height)!important;
    padding:5px 8px!important;
    gap:4px 8px!important;
  }
  #tripWorkspace:not([hidden]) #content > .plannerToolbar > button,
  #tripWorkspace:not([hidden]) #content > .plannerToolbar > .plannerTool,
  #tripWorkspace:not([hidden]) #content > .plannerToolbar > .planViewButton{
    width:100%!important;max-width:none!important;height:44px!important;min-height:44px!important;padding:4px!important;justify-content:center!important;gap:3px!important;
  }
  #tripWorkspace:not([hidden]) #content > .plannerToolbar [data-mobile-label] > span:not(.toolIcon):not(.calendarGlyph){display:none!important}
  #tripWorkspace:not([hidden]) #content > .plannerToolbar [data-mobile-label]::after{content:attr(data-mobile-label);font-size:10px;font-weight:850;line-height:1.05;text-align:center;white-space:normal}
  #tripWorkspace:not([hidden]) #content > .plannerToolbar [data-mobile-label] .toolIcon,#tripWorkspace:not([hidden]) #content > .plannerToolbar [data-mobile-label] .calendarGlyph{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;font-size:13px!important}
  #tripWorkspace:not([hidden]) #content.itineraryStickyDayMode > .itineraryStickyDayRail[hidden]{display:none!important}
}