/* Avelune v0.20.16 — desktop-only Trip workspace alignment.
   Scope is intentionally narrow: position the existing desktop Trip surfaces.
   No mobile rules, no DOM re-parenting, no business logic. */

@media (min-width: 761px) {
  /* Keep the Trip header as the fixed visual anchor and place the workspace
     immediately beneath it, independent of legacy hero spacing. */
  #tripWorkspace {
    position: relative !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  #tripWorkspace > main.tripMainLayout {
    position: absolute !important;
    top: 66px !important;
    right: 0 !important;
    bottom: 22px !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16px 34px 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(540px, 0.98fr) !important;
    gap: 28px !important;
    align-items: stretch !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* LEFT: equal Up Next + Weather cards, then Map directly beneath. */
  #tripWorkspace .tripLeftColumn {
    display: grid !important;
    grid-template-rows: 132px minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace .tripContextCards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    height: 132px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    box-sizing: border-box !important;
  }

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

  #tripWorkspace #heroNext .avHeroBody,
  #tripWorkspace #heroWeather .avHeroWeatherBody {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace #mobileMapToggle {
    display: none !important;
  }

  #tripWorkspace .mapPane {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

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

  /* RIGHT: itinerary begins at the same top line as the context cards and
     extends to the shared bottom buffer. */
  #tripWorkspace > main.tripMainLayout > .panel {
    position: static !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace > main.tripMainLayout > .panel > #content {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    box-sizing: border-box !important;
  }
}


/* v0.20.17 — lock the two desktop context cards to the same width.
   The legacy Weather component carries intrinsic sizing rules in the older
   Trip CSS. Flex-basis:0 makes both cards share the row equally regardless
   of their contents, while the inner weather copy is allowed to use the
   full card width. */
@media (min-width: 761px) {
  #tripWorkspace .tripContextCards {
    display: flex !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  #tripWorkspace .tripContextCards > #heroNext,
  #tripWorkspace .tripContextCards > #heroWeather {
    flex: 1 1 0 !important;
    flex-basis: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
  }

  #tripWorkspace #heroWeather .avWeatherLayout {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  #tripWorkspace #heroWeather .avWeatherCopy {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #tripWorkspace #heroWeather .avWeatherEyebrow,
  #tripWorkspace #heroWeather .avWeatherCondition,
  #tripWorkspace #heroWeather .avWeatherTemp,
  #tripWorkspace #heroWeather .avWeatherMeta {
    width: auto !important;
    max-width: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

/* v0.20.18 — desktop itinerary scroll refinement.
   The planner controls own the top of the right panel. The current trip day
   sits immediately beneath them and remains pinned until the next day's
   heading naturally pushes it out. Itinerary cards never remain visible in a
   dead band behind the controls. */
@media (min-width: 761px) {
  #tripWorkspace > main.tripMainLayout > .panel > #content {
    --avelune-planner-toolbar-stack: 100px;
    position: relative !important;
    padding-top: 0 !important;
    scroll-padding-top: calc(var(--avelune-planner-toolbar-stack) + 58px) !important;
  }

  #tripWorkspace #content .plannerToolbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
    min-height: var(--avelune-planner-toolbar-stack) !important;
    height: var(--avelune-planner-toolbar-stack) !important;
    margin: 0 !important;
    padding: 26px 14px 10px !important;
    box-sizing: border-box !important;
    background: var(--ivory, #fffaf0) !important;
    isolation: isolate !important;
  }

  /* Opaque lower edge: scrolling cards disappear beneath the controls instead
     of remaining visible between the toolbar and the pinned day heading. */
  #tripWorkspace #content .plannerToolbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 12px;
    transform: translateY(100%);
    background: var(--ivory, #fffaf0);
    pointer-events: none;
  }

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

  #tripWorkspace #content .planDay > .dayHead {
    position: sticky !important;
    top: var(--avelune-planner-toolbar-stack) !important;
    z-index: 55 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    background: var(--ivory, #fffaf0) !important;
    border-bottom: 1px solid rgba(198, 162, 110, .28) !important;
    box-shadow: 0 6px 12px rgba(11, 31, 42, .025) !important;
  }

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

/* v0.20.19 — dedicated desktop sticky-day rail.
   The date is now its own reserved row directly below the planner controls.
   Legacy per-day headings remain as invisible section markers only, so the
   pinned date never sits on top of an itinerary card. The rail updates when
   the next day's marker reaches it. */
@media (min-width: 761px) {
  #tripWorkspace > main.tripMainLayout > .panel > #content.itineraryStickyDayMode {
    --avelune-planner-toolbar-stack: 100px;
    --avelune-sticky-day-height: 64px;
    position: relative !important;
    padding-top: 0 !important;
    scroll-padding-top: calc(var(--avelune-planner-toolbar-stack) + var(--avelune-sticky-day-height)) !important;
  }

  #tripWorkspace #content.itineraryStickyDayMode > .plannerToolbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    height: var(--avelune-planner-toolbar-stack) !important;
    min-height: var(--avelune-planner-toolbar-stack) !important;
    margin: 0 !important;
    background: var(--ivory, #fffaf0) !important;
    box-shadow: none !important;
  }

  #tripWorkspace #content.itineraryStickyDayMode > .plannerToolbar::after {
    display: none !important;
    content: none !important;
  }

  #tripWorkspace #content .itineraryStickyDayRail {
    position: sticky !important;
    top: var(--avelune-planner-toolbar-stack) !important;
    z-index: 79 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    height: var(--avelune-sticky-day-height) !important;
    min-height: var(--avelune-sticky-day-height) !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    box-sizing: border-box !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;
    overflow: hidden !important;
  }

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

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

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

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

  /* These are now invisible switch markers, not floating UI. Keeping a
     1px marker gives the scroll observer an exact day boundary without
     introducing another cream band between itinerary sections. */
  #tripWorkspace #content.itineraryStickyDayMode > .planDay > .dayHead {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !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;
  }
}


/* v0.20.20 — keep day separators visible in the scrolling itinerary while
   retaining the dedicated sticky day rail. The rail shows the active day;
   these in-flow headers preserve visual separation at each real day boundary
   and simply scroll underneath the rail instead of becoming sticky themselves. */
@media (min-width: 761px) {
  #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: 16px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 58px !important;
    max-height: none !important;
    margin: 0 0 10px !important;
    padding: 9px 16px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    border: 0 !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 > div {
    min-width: 0 !important;
  }

  #tripWorkspace #content.itineraryStickyDayMode > .planDay > .dayHead .eyebrow {
    display: block !important;
    margin: 0 0 2px !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 + .planDay {
    margin-top: 24px !important;
  }
}