/* ===== ITINERARY LAYOUT FIX R2 =====
 * Repairs three real layout defects on the planner/guides page:
 *  1. the map was pinned to its 350px min-width, leaving a 140px empty strip;
 *  2. the left picker scrolled twice (body + city list), so city rows were
 *     cut in half and ran under the trip-length footer;
 *  3. the itinerary canvas wasted vertical space and clipped cards without
 *     any visible scroll affordance.
 */

/* 1. Map fills its grid column again.
   R1 used max-width:42% on a grid item, which resolves against the grid
   area, not the result width, so the map collapsed to min-width:350px. */
@media (min-width: 851px) {
  /* Keep the map in the middle and the canvas on the right, exactly like
     the pre-generation layout; the route column simply grows wider. */
  #trip-planner.has-canvas.has-itinerary .tp-result {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 44%);
  }

  #trip-planner.has-canvas.has-itinerary .tp-map {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    min-width: 0;
    max-width: none;
    border-left: 0;
  }

  #trip-planner.has-canvas.has-itinerary .tp-days {
    grid-column: 2;
    grid-row: 1;
    border-left: 1px solid #e1e9e2;
  }
}

/* 2. Left picker: the city list is the only scroll area.
   Before this fix the picker body scrolled AND the city list had its own
   max-height, so the last visible row was cut by the body edge and looked
   like it sat under the trip-length panel. Keep the form fixed, give the
   city list a bordered scroll viewport and two compact columns, and let
   short windows shrink the selected-city card instead of the list. */
@media (min-width: 851px) and (min-height: 650px) {
  .journeys-page.planner-route-active #trip-planner .tp-picker-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .journeys-page.planner-route-active #trip-planner .tp-picker-body > .tp-search,
  .journeys-page.planner-route-active #trip-planner .tp-picker-body > .tp-city-filter,
  .journeys-page.planner-route-active #trip-planner .tp-picker-body > .tp-selected-panel,
  .journeys-page.planner-route-active #trip-planner .tp-picker-body > .tp-province-nav {
    flex: 0 0 auto;
  }

  .journeys-page.planner-route-active #trip-planner .tp-city-list {
    flex: 1 1 auto;
    min-height: 84px;
    max-height: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: min-content;
    align-content: start;
    gap: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px 4px 10px;
    border: 1px solid #e6ece5;
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 -18px 14px -12px #fff;
    scrollbar-width: thin;
    scrollbar-color: #bfd0c4 transparent;
  }

  .journeys-page.planner-route-active #trip-planner .tp-city-list::-webkit-scrollbar {
    width: 8px;
  }

  .journeys-page.planner-route-active #trip-planner .tp-city-list::-webkit-scrollbar-thumb {
    background: #cbd9ce;
    border-radius: 8px;
  }

  .journeys-page.planner-route-active #trip-planner .tp-city {
    min-height: 40px;
    gap: 7px;
    padding: 4px 5px;
  }

  .journeys-page.planner-route-active #trip-planner .tp-city img,
  .journeys-page.planner-route-active #trip-planner .tp-city-image {
    width: 30px;
    height: 30px;
  }

  .journeys-page.planner-route-active #trip-planner .tp-city-name strong {
    font-size: 12px;
  }

  .journeys-page.planner-route-active #trip-planner .tp-city-name small {
    font-size: 9px;
  }

  .journeys-page.planner-route-active #trip-planner .tp-city b {
    font-size: 14px;
  }
}

/* Laptop-height windows: compact the selected-city card and drop its
   supplementary pace line so the catalogue keeps four usable rows. */
@media (min-width: 851px) and (min-height: 650px) and (max-height: 1000px) {
  .journeys-page.planner-route-active #trip-planner .tp-selected-panel {
    max-height: 140px;
    margin: 4px 0 7px;
    padding: 7px 9px;
    overflow-y: auto;
  }

  .journeys-page.planner-route-active #trip-planner .tp-selected-panel-head {
    padding-bottom: 3px;
  }

  .journeys-page.planner-route-active #trip-planner .tp-selected-panel .tp-order-heading {
    display: none;
  }

  .journeys-page.planner-route-active #trip-planner .tp-order-list {
    max-height: 60px;
  }

  .journeys-page.planner-route-active #trip-planner .tp-order-row {
    padding: 0;
  }

  .journeys-page.planner-route-active #trip-planner .tp-selected-details {
    margin: 4px 0 0;
  }

  .journeys-page.planner-route-active #trip-planner .tp-selected-details > summary {
    padding: 4px 8px;
  }

  .journeys-page.planner-route-active #trip-planner .tp-pace-note {
    display: none;
  }
}

/* 3. Canvas: reclaim the empty band and give the board real height.
   The summary was being stretched by `flex:1`, and the injected
   "折叠摘要" row added another 30px of chrome before any itinerary. */
#trip-planner.has-canvas.has-itinerary .tp-day-content {
  flex: 0 0 auto;
  max-height: min(220px, 30vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The source label and section title were duplicated in the summary above,
   so the canvas header keeps only the section title and the view controls. */
#trip-planner.has-canvas.has-itinerary .ic-toolbar {
  padding: 9px 16px 8px;
}

#trip-planner.has-canvas.has-itinerary .ic-toolbar .ic-eyebrow {
  display: none;
}

#trip-planner.has-canvas.has-itinerary .ic-toolbar h2 {
  margin: 0;
  font-size: 17px;
}

#trip-planner.has-canvas.has-itinerary .ic-toolbar p {
  margin-top: 2px;
  font-size: 11px;
}

#trip-planner.has-canvas.has-itinerary .ic-status {
  padding: 8px 18px;
}

/* Cards grow to share the board width: three days fill the board at a
   desktop width instead of leaving the third card cut behind the map.
   Longer itineraries keep their width and scroll horizontally. */
#trip-planner.has-canvas.has-itinerary .ic-board {
  gap: 10px;
  padding: 14px 16px 18px;
  scroll-snap-type: none;
  scroll-padding: 0;
  overscroll-behavior: contain;
}

#trip-planner.has-canvas.has-itinerary .ic-board .ic-column {
  flex: 0 0 var(--ic-width);
  width: auto;
  max-width: none;
  padding: 10px;
  border-radius: 14px;
}

#trip-planner.has-canvas.has-itinerary .ic-board .ic-next {
  flex: 0 0 var(--ic-width);
  width: auto;
}

/* Always-visible scrollbars: macOS hides overlay scrollbars, which made the
   cut-off cards look like a rendering bug rather than a scrollable board. */
#trip-planner.has-canvas.has-itinerary .ic-board::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

#trip-planner.has-canvas.has-itinerary .ic-board::-webkit-scrollbar-track {
  background: #e9eee9;
  border-radius: 8px;
}

#trip-planner.has-canvas.has-itinerary .ic-board::-webkit-scrollbar-thumb {
  background: #bfcdc2;
  border: 2px solid #e9eee9;
  border-radius: 8px;
}

#trip-planner.has-canvas.has-itinerary .ic-board::-webkit-scrollbar-thumb:hover {
  background: #a7b8ab;
}

/* Keep the map card and its attribution clear of the scrollbar. */
#trip-planner.has-canvas.has-itinerary .tp-live-attribution {
  max-width: calc(100% - 20px);
}

/* 4. Responsive fallbacks. */
@media (min-width: 851px) and (max-width: 1100px) {
  #trip-planner.has-canvas.has-itinerary .tp-result {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 42%);
  }

  #trip-planner.has-canvas.has-itinerary .ic-board .ic-column {
    flex-basis: 172px;
  }
}

@media (max-width: 850px) {
  #trip-planner.has-canvas.has-itinerary .tp-result {
    display: flex;
    flex-direction: column;
  }

  #trip-planner.has-canvas.has-itinerary .tp-days {
    order: 1;
  }

  #trip-planner.has-canvas.has-itinerary .tp-board {
    order: 2;
  }

  #trip-planner.has-canvas.has-itinerary .tp-map {
    order: 3;
    height: 380px;
    min-height: 380px;
  }

  #trip-planner.has-canvas.has-itinerary .tp-day-content {
    max-height: none;
  }

  #trip-planner.has-canvas.has-itinerary .ic-board .ic-column {
    flex: 0 0 min(260px, 84vw);
    max-width: none;
  }

  #trip-planner.has-canvas.has-itinerary .ic-board {
    max-height: 520px;
  }
}

/* 5. Small polish that does not change layout. */
#trip-planner.has-canvas.has-itinerary .tp-board {
  position: relative;
}

/* Soft edge at the bottom of the scroll viewport so the next card reads as
   "scroll for more" instead of a broken card. */
#trip-planner.has-canvas.has-itinerary .ic-scroll-hint {
  position: absolute;
  right: auto;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  padding: 6px 11px;
  border: 1px solid #dfe7e0;
  border-radius: 999px;
  background: rgba(255, 254, 250, 0.95);
  box-shadow: 0 4px 14px rgba(34, 56, 46, 0.13);
  color: #4c6a58;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#trip-planner.has-canvas.has-itinerary .ic-scroll-hint.is-visible {
  opacity: 1;
}

#trip-planner.has-canvas.has-itinerary .tp-board::after {
  content: '';
  position: absolute;
  right: 12px;
  bottom: 10px;
  left: 0;
  height: 26px;
  background: linear-gradient(rgba(241, 244, 241, 0), #f1f4f1 82%);
  pointer-events: none;
  z-index: 2;
}

.ic-column {
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.ic-column:hover {
  border-color: color-mix(in srgb, var(--ic-color), transparent 60%);
  box-shadow: 0 10px 30px rgba(33, 59, 45, 0.1);
}

/* 6. Print: one column, no map, no clipping. */
@media print {
  #trip-planner.has-canvas.has-itinerary .tp-result {
    display: block;
  }

  #trip-planner.has-canvas.has-itinerary .tp-map {
    display: none;
  }

  #trip-planner.has-canvas.has-itinerary .ic-board {
    display: block;
    max-height: none;
    overflow: visible;
  }

  #trip-planner.has-canvas.has-itinerary .ic-column {
    width: 100%;
    max-width: none;
    page-break-inside: avoid;
    margin-bottom: 20px;
  }
}

/* 7. Reduced motion. */
@media (prefers-reduced-motion: reduce) {
  #trip-planner.has-canvas.has-itinerary .ic-column {
    transition: none !important;
  }
}

/* 8. The planner workspace already has its own tab and toolbar. The
   marketing heading above it ("YOUR JOURNEY / 两个选择… / intro") duplicated
   that context and cost roughly 70px of working height on desktop, so it is
   visually hidden here while remaining available to screen readers. The
   standalone plan.html keeps the heading. */
@media (min-width: 851px) and (min-height: 650px) {
  .journeys-page.planner-route-active #trip-planner .tp-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* The step kicker repeats the panel heading ("01 / 选择城市" above "选择城市").
   Keep the heading, drop the kicker, and give the extra height to the list. */
@media (min-width: 851px) and (min-height: 650px) {
  .journeys-page.planner-route-active #trip-planner .tp-controls-title .tp-kicker {
    display: none;
  }
}

/* Link from a generated itinerary to the local route history page. */
#trip-planner .tp-history-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  color: #5f7567;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

#trip-planner .tp-history-link:hover {
  background: #f1f5f0;
  color: #873f46;
}

/* Wide desktops: give the route column half the result so three day cards
   remain readable while the map still owns the centre. */
@media (min-width: 1200px) {
  #trip-planner.has-canvas.has-itinerary .tp-result {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 50%);
  }
}

/* 9. Compact canvas modules (~15–20% smaller) and expandable descriptions.
   The canvas is now the right-hand column, so denser cards let a reader see
   whole days without constant horizontal/vertical scrolling. */
#trip-planner.has-canvas.has-itinerary .ic-toolbar {
  padding: 11px 14px 8px;
}

#trip-planner.has-canvas.has-itinerary .ic-toolbar h2 {
  font-size: 17px;
}

#trip-planner.has-canvas.has-itinerary .ic-toolbar p {
  font-size: 10.5px;
}

#trip-planner.has-canvas.has-itinerary .ic-status {
  padding: 7px 14px;
  font-size: 11px;
}

#trip-planner.has-canvas.has-itinerary .ic-mode button,
#trip-planner.has-canvas.has-itinerary .ic-zoom {
  padding: 7px 9px;
  font-size: 11px;
}

#trip-planner.has-canvas.has-itinerary .ic-day-badge {
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 11px;
}

#trip-planner.has-canvas.has-itinerary .ic-day-city {
  font-size: 11px;
}

#trip-planner.has-canvas.has-itinerary .ic-column h3 {
  margin: 10px 1px 4px;
  font-size: 13px;
  line-height: 1.4;
}

#trip-planner.has-canvas.has-itinerary .ic-day-summary {
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.55;
}

#trip-planner.has-canvas.has-itinerary .ic-city-photo {
  height: 76px;
  margin-top: 9px;
  border-radius: 8px;
}

#trip-planner.has-canvas.has-itinerary .ic-city-photo span {
  font-size: 8px;
}

#trip-planner.has-canvas.has-itinerary .ic-timeline {
  gap: 12px;
  margin-top: 10px;
}

#trip-planner.has-canvas.has-itinerary .ic-stop {
  padding: 10px;
  border-radius: 11px;
}

#trip-planner.has-canvas.has-itinerary .ic-stop-top {
  gap: 6px;
  margin-bottom: 6px;
}

#trip-planner.has-canvas.has-itinerary .ic-stop-index {
  width: 23px;
  height: 23px;
  border-radius: 7px;
  font-size: 10px;
}

#trip-planner.has-canvas.has-itinerary .ic-stop-type {
  font-size: 10px;
}

#trip-planner.has-canvas.has-itinerary .ic-stop h4 {
  font-size: 12.5px;
  line-height: 1.45;
}

#trip-planner.has-canvas.has-itinerary .ic-stop p {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.55;
}

#trip-planner.has-canvas.has-itinerary .ic-add {
  margin-top: 12px;
  padding: 8px;
  font-size: 11px;
}

#trip-planner.has-canvas.has-itinerary .ic-add span {
  font-size: 15px;
}

/* Two-line previews; the toggle is shown by JS only when text really clips. */
.ic-day-summary,
.ic-stop-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.ic-day-summary.is-expanded,
.ic-stop-desc.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

#trip-planner .ic-desc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 5px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: #6b8272;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

#trip-planner .ic-desc-toggle:hover {
  color: #8b3f47;
}

#trip-planner .ic-desc-toggle[hidden] {
  display: none;
}

#trip-planner.has-canvas.has-itinerary .ic-day-summary + .ic-desc-toggle {
  margin-bottom: 6px;
}

/* Keep the zoom/reset controls out of the day-badge area at the bottom of
   the map; they sit below the basemap toggle at the top right instead. */
#trip-planner .tp-map-controls {
  top: 64px;
  bottom: auto;
  right: 18px;
}

/* The basemap toggle stays at the map's top-right in every planner state. */
#trip-planner.has-canvas.has-itinerary .tp-live-style {
  top: 18px;
  right: 18px;
  left: auto;
  bottom: auto;
}