/* ═════════════════════════════════════════════════════════════════════════
   TRAVEL PANEL - MOBILE FIRST

   The panel behind a marker ring's Travel button (showMarkerTravelPanel in
   script.js). Written for a ~270px phone column first; a wider column only
   makes the entry fields wider. Loaded after every other sheet; the panel's
   position, width, 45svh cap and collapse behaviour still come from the
   shared popup rules in ui_mobile_popups.css, so it sits and collapses like
   every other popup.

   Fixed height budget, so nothing in it ever pushes the map off screen:
     header 48 + composer 146 + hint 20 + step strip 48 + summary 48 +
     actions 48 = ~358px, inside 45svh of a 844px phone. The step strip
     scrolls sideways rather than growing, and on a short landscape screen
     the panel body itself scrolls rather than overflowing.

   Lines are drawn with the 1px-gap-over-a-white-ground technique rather
   than per-cell borders: neighbouring cells can never double their shared
   edge, which is the single-seam rule the rest of the chrome follows.
   ═════════════════════════════════════════════════════════════════════════ */

.marker_travel_panel {
  --tv_cell: var(--popup_header_cell, 48px);
  --tv_line: var(--ui_border_visible, #ffffff);
  --tv_muted: rgba(255, 255, 255, 0.62);
  display: flex !important;
  flex-direction: column;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.marker_travel_panel.state_popup_collapsed {
  overflow: hidden !important;
}
.marker_travel_panel > * {
  flex: 0 0 auto;
}

/* header: the collapse chevron takes the first cell on the left and the
   close button the last on the right (ui_seamless_mono.css), so the title
   is held clear of one cell at each end */
.marker_travel_panel .marker_travel_panel_title {
  padding: 0 calc(var(--tv_cell) + 4px);
  border-bottom: none;
}

/* ── composer: 3x3 compass pad | distance / unit / add ── */
.tv_composer {
  display: grid;
  grid-template-columns: calc(var(--tv_cell) * 3 + 2px) minmax(0, 1fr);
  gap: 1px;
  background: var(--tv_line);
  border-top: 1px solid var(--tv_line);
  border-bottom: 1px solid var(--tv_line);
}
.tv_pad {
  display: grid;
  grid-template-columns: repeat(3, var(--tv_cell));
  grid-template-rows: repeat(3, var(--tv_cell));
  gap: 1px;
  background: var(--tv_line);
}
.tv_entry {
  display: grid;
  grid-template-rows: repeat(3, var(--tv_cell));
  gap: 1px;
  background: var(--tv_line);
  min-width: 0;
}

.tv_pad_btn,
.tv_add_btn,
.tv_icon_btn,
.tv_action_btn,
.tv_step_remove {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  color: #ffffff;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-sizing: border-box;
}
.tv_pad_btn {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* the direction currently in the composer */
.tv_pad_btn.is_selected {
  background: #ffffff;
  color: #000000;
}

/* 16px text in every field: iOS Safari zooms the whole page into any
   focused input set smaller than that, which would throw the map out of
   frame the moment a distance is typed */
.marker_travel_panel .tv_bearing,
.marker_travel_panel .tv_distance,
.marker_travel_panel .tv_unit {
  height: var(--tv_cell);
  min-height: var(--tv_cell);
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #000000;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  box-sizing: border-box;
  min-width: 0;
}
.marker_travel_panel .tv_bearing {
  width: var(--tv_cell);
  padding: 0 2px !important;
  text-align: center;
  text-transform: uppercase;
  font-size: 13px;
}
/* 13px would trigger the iOS focus zoom described above, so on touch
   screens the centre field takes 16px and a little less letter room */
@media (pointer: coarse) {
  .marker_travel_panel .tv_bearing {
    font-size: 16px;
    letter-spacing: -0.04em;
  }
}
.marker_travel_panel .tv_distance,
.marker_travel_panel .tv_unit {
  width: 100%;
  padding: 0 12px !important;
}
.marker_travel_panel .tv_distance::placeholder,
.marker_travel_panel .tv_bearing::placeholder {
  color: var(--tv_muted);
  font-weight: 400;
}

.tv_add_btn {
  gap: 8px;
  background: #ffffff;
  color: #000000;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

/* ── hint: what the composer resolves to ── */
.tv_hint {
  min-height: 20px;
  line-height: 20px;
  padding: 0 12px;
  font-size: 11px;
  color: var(--tv_muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv_hint.is_error {
  color: var(--error-color, #ff6b6b);
}

/* ── step strip: one sideways-scrolling row of chips ── */
.tv_steps {
  display: flex;
  height: var(--tv_cell);
  min-height: var(--tv_cell);
  /* chips carry their own right-hand line rather than using the gap
     technique: the strip is usually wider than its chips, and a white
     ground would show as a white block after the last one */
  background: #000000;
  border-top: 1px solid var(--tv_line);
  border-bottom: 1px solid var(--tv_line);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.tv_steps::-webkit-scrollbar {
  display: none;
}
.tv_steps_empty {
  padding: 0 12px;
  line-height: var(--tv_cell);
  font-size: 12px;
  color: var(--tv_muted);
  white-space: nowrap;
}
.tv_step {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  height: var(--tv_cell);
  box-sizing: border-box;
  border-right: 1px solid var(--tv_line);
  background: #000000;
  color: #ffffff;
  cursor: pointer;
  scroll-snap-align: start;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.tv_step_num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  font-size: 12px;
  font-weight: 800;
  color: var(--tv_muted);
}
.tv_step_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding-right: 4px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tv_step_text strong {
  font-size: 13px;
  font-weight: 700;
}
.tv_step_text span {
  font-size: 11px;
  color: var(--tv_muted);
}
.tv_step_remove {
  width: 40px;
  background: transparent;
  color: var(--tv_muted);
  font-size: 13px;
}
/* the step loaded into the composer */
.tv_step.is_editing,
.tv_step.is_editing .tv_step_num,
.tv_step.is_editing .tv_step_text span,
.tv_step.is_editing .tv_step_remove {
  background: #ffffff;
  color: #000000;
}

/* ── summary + fit/clear ── */
.tv_summary_row {
  display: flex;
  height: var(--tv_cell);
  min-height: var(--tv_cell);
  gap: 1px;
  background: var(--tv_line);
  border-bottom: 1px solid var(--tv_line);
}
.tv_summary {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 12px;
  background: #000000;
  font-size: 11px;
  color: var(--tv_muted);
  font-variant-numeric: tabular-nums;
}
.tv_summary strong,
.tv_summary span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv_summary strong {
  font-size: 13px;
  color: #ffffff;
}
.tv_icon_btn {
  flex: 0 0 var(--tv_cell);
  width: var(--tv_cell);
  font-size: 15px;
}

/* ── action bar: icon over label, four equal cells ── */
.tv_actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: var(--tv_cell);
  min-height: var(--tv_cell);
  gap: 1px;
  background: var(--tv_line);
}
.tv_action_btn {
  flex-direction: column;
  gap: 3px;
  font-size: 15px;
  min-width: 0;
}
.tv_action_btn span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Move is the one action that relocates the pin, so it is the one filled
   cell in the bar - white, the same commit treatment as Add step. (Not
   --placemark_accent: the black-and-white pass sets that to white too, and
   white text on it disappeared.) */
.tv_action_btn.tv_primary {
  background: #ffffff;
  color: #000000;
}

/* nothing to act on yet - stated from the same route the preview draws */
.marker_travel_panel .state_disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* pointer devices get a hover; touch screens don't, so a tapped button
   never sticks in its hover colour */
@media (hover: hover) {
  .tv_pad_btn:hover,
  .tv_icon_btn:hover,
  .tv_action_btn:hover,
  .tv_step:not(.is_editing):hover,
  .tv_step:not(.is_editing):hover .tv_step_remove {
    background: #262626;
  }
  .tv_step_remove:hover {
    color: #ffffff;
  }
  .tv_add_btn:hover {
    background: #d9d9d9;
  }
  .tv_action_btn.tv_primary:hover {
    background: #d9d9d9;
  }
}
.tv_pad_btn:active,
.tv_icon_btn:active,
.tv_action_btn:active,
.tv_add_btn:active {
  filter: invert(1);
}

.marker_travel_panel [role="button"]:focus-visible,
.marker_travel_panel input:focus-visible,
.marker_travel_panel select:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -4px;
}

/* ── short screens (a 640px phone, a landscape tablet) ──
   45svh of 640px is 288px, under the ~380px the full-size panel needs, so
   it would scroll its own header away. Cells drop to 40px - still a
   comfortable thumb target - and the panel may take up to 340px, which
   fits the whole thing with no scrolling and still leaves the map below
   it for fitTravelRouteIntoView to frame the route in. The collapsed state
   is excluded so its one-cell max-height keeps winning. */
@media (max-height: 760px) {
  .marker_travel_panel {
    --tv_cell: 40px;
  }
  .marker_travel_panel:not(.state_popup_collapsed) {
    max-height: max(var(--popup_max_height, 45svh), 340px) !important;
  }
  .tv_hint {
    min-height: 18px;
    line-height: 18px;
  }
}