/* Phone layout. Loaded after the desktop component styles. */
@media (max-width: 700px) {
  html { scroll-padding-top: 1rem; }
  body { width: 100%; min-width: 0; padding: .55rem; font-size: 16px !important; overflow-x: hidden; }
  body::before { display: none; }
  button, input, select, textarea { font-size: max(16px, 1em); }
  button, a, summary { touch-action: manipulation; }

  /* A wrapping, non-sticky navigation leaves the map and menus room to work. */
  .section-jump-nav {
    position: relative; top: auto; z-index: 240;
    display: flex; flex-wrap: wrap; overflow: visible;
    margin: 0 0 .65rem; padding: .4rem;
    border-radius: 16px; gap: .35rem;
  }
  .section-jump-nav .app-brand-mark { width: 2.5rem; height: 2.5rem; min-width: 2.5rem; min-height: 2.5rem; }
  .section-jump-nav > a:not(.app-brand-mark),
  .section-jump-nav .section-nav-group > a,
  .section-jump-nav .section-nav-summary {
    min-height: 2.5rem; padding: .5rem .65rem;
    font-size: .85rem; white-space: nowrap;
  }
  .section-jump-nav .sticky-trip-menu { flex: 1 1 calc(100% - 3.2rem); min-width: 0; }
  .section-jump-nav .sticky-trip-summary { width: 100%; max-width: none !important; justify-content: flex-start; }
  .sticky-trip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .sticky-menu-caret { margin-left: auto; }
  .section-jump-nav .sticky-settings-menu { margin-left: 0; }
  .section-jump-nav .section-submenu,
  .section-jump-nav .sticky-trip-submenu,
  .section-jump-nav .sticky-settings-submenu {
    position: fixed; top: 3.5rem;
    left: .55rem; right: .55rem; width: auto; max-width: none;
    max-height: min(70dvh, 34rem); overflow-y: auto;
  }
  .section-jump-nav .section-submenu a,
  .section-jump-nav .section-submenu button { min-height: 2.75rem; font-size: .9rem; }
  .section-anchor, [data-section-panel], .category-tile,
  #dashboard-attention, #food-summary-anchor { scroll-margin-top: 1rem; }
  :root { --gear-toolbar-sticky-top: .4rem; }

  /* The route uses one column and four readable statistics. */
  .trip-title-wrap.trip-route-dashboard { width: 100%; min-width: 0; padding: .3rem; }
  .trip-title-wrap.trip-route-dashboard .trip-banner-inner { padding: .45rem; gap: .7rem; min-width: 0; }
  .trip-title-wrap.trip-route-dashboard .trip-title-static { font-size: clamp(1.3rem, 6vw, 1.8rem); line-height: 1.18; overflow-wrap: anywhere; }
  .trip-title-wrap.trip-route-dashboard .trip-banner-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem;
  }
  .trip-title-wrap.trip-route-dashboard .trip-stat,
  .trip-banner-stats > .route-type-overview {
    width: auto; max-width: none; min-width: 0; min-height: 4.25rem;
    padding: .55rem .65rem; border-radius: 12px;
  }
  .trip-title-wrap.trip-route-dashboard .trip-stat-label { font-size: .72rem; letter-spacing: .06em; }
  .trip-title-wrap.trip-route-dashboard .trip-stat strong { font-size: 1.12rem; line-height: 1.2; }
  .trip-banner-stats .trip-stat-walking, .route-type-overview small { font-size: .75rem; white-space: normal; }
  .route-type-overview > button[data-open-route-analysis] { min-height: 3rem; }
  .route-type-overview .route-type-bar { height: 12px; }
  .trip-title-wrap.trip-route-dashboard .trip-route-column,
  .trip-title-wrap.trip-route-dashboard .trip-info-column { min-width: 0; width: 100%; gap: .65rem; }
  .trip-route-map-v24 { height: min(68dvh, 31rem); min-height: 22rem; }
  .trip-route-map-shell { border-radius: 13px; }
  .trip-profile-chart { height: 9rem; min-height: 9rem; }
  .trip-profile-range, .trip-profile-readout, .route-section-caption { font-size: .78rem; line-height: 1.35; }
  .trip-title-wrap.trip-route-dashboard .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 38px; }
  .route-map-fit-button { min-height: 2.5rem; padding: .4rem .6rem; font-size: .78rem; }
  .trip-route-map-shell .route-map-fullscreen-button { top: .45rem; right: .45rem; }
  .trip-route-map-shell .route-map-fit-button:not(.route-map-fullscreen-button) { top: 3.25rem; right: .45rem; }
  .trip-route-map-shell .route-map-nearby-button { top: 9rem !important; right: .45rem; }
  .route-basemap-switch { top: 6.05rem; right: .45rem; }
  .route-colour-switch { top: 12.1rem; right: .45rem; }
  .route-basemap-switch button, .route-colour-switch button { min-height: 2rem; font-size: .75rem; }
  .route-type-key { max-width: calc(100% - 1rem); font-size: .74rem; }

  /* Dense desktop reports become readable without squeezing columns. */
  .trip-day-summary-grid-head { display: none !important; }
  .trip-day-summary-row {
    grid-template-columns: 3rem repeat(2, minmax(0,1fr)) !important;
    gap: .45rem !important; padding: .65rem .15rem !important;
  }
  .trip-day-summary-row b,
  .trip-day-summary-row .trip-day-summary-metric { font-size: .86rem !important; white-space: normal !important; }
  .trip-day-summary-row .trip-day-summary-conditions { grid-column: 2 / -1; }
  .trip-day-summary-row .trip-day-summary-weather,
  .trip-day-summary-row .trip-day-summary-walk-time { font-size: .82rem !important; }
  .trip-day-summary-row .trip-day-summary-chip { height: 1.55rem !important; font-size: .7rem !important; }
  .trip-day-summary-row:has(.trip-day-summary-types) .trip-day-summary-chip { grid-row: 1 / span 3 !important; }
  .trip-day-summary-daylight-strip { font-size: .76rem; }
  .trip-weather-card, .trip-day-summary-card { padding: .75rem !important; }
  .weather-card-label, .route-water-summary-head > div > span,
  .trip-day-summary-head span { font-size: .74rem; }
  .trip-weather-card p, .route-water-summary-head em,
  .trip-day-summary-head em { font-size: .78rem; line-height: 1.35; white-space: normal; }
  .weather-card-main strong { font-size: 1.05rem; }
  .weather-card-grid b { font-size: .85rem; }
  .weather-card-grid em { font-size: .7rem; }
  .route-water-summary-head { flex-wrap: wrap; }
  .route-water-summary-grid-head { display: none !important; }
  .route-water-summary-row {
    grid-template-columns: 2.8rem minmax(0, 1fr) !important;
    gap: .4rem !important; padding: .6rem 0 !important;
  }
  .route-water-summary-row > :nth-child(n+3) { grid-column: 2; }
  .route-water-planning-chip { min-height: 2rem; font-size: .76rem; white-space: normal; }
  .visual-summary-grid, .person-visual-summary { grid-template-columns: minmax(0,1fr); }
  .visual-card { padding: .75rem; }
  .visual-summary-header { flex-wrap: wrap; gap: .45rem; }
  .visual-bar-row, .visual-split-row,
  .dashboard-pack-card .visual-bar-row {
    grid-template-columns: minmax(4.5rem, .8fr) minmax(0, 1.5fr) auto;
    gap: .35rem; min-width: 0;
  }
  .visual-name { font-size: .8rem; }
  .dashboard-range-caption-zones { font-size: .65rem; }

  /* Keep complex gear columns intact and let the table itself scroll. */
  .category-tile { max-width: 100%; min-width: 0; padding: .5rem !important; }
  .category-tile .person { max-width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .category-tile table.item-table { min-width: 42rem; }
  .category-tile-header { flex-wrap: wrap; gap: .4rem; }
  .gear-toolbar { max-width: 100%; }

  /* Editing remains in the viewport and form fields avoid iOS auto zoom. */
  .item-modal { padding: .3rem; align-items: center; }
  .item-modal .modal-panel, .planning-detail-panel, .route-analysis-panel {
    width: min(100%, 40rem); max-width: 100%;
    max-height: calc(100dvh - 1rem); overflow-y: auto;
    padding: .85rem; border-radius: 15px;
  }
  .planning-detail-fields { grid-template-columns: minmax(0,1fr); }
  .planning-detail-fields label:first-child { grid-column: auto; }
  .planning-compact-row { min-height: 2.75rem; font-size: .9rem; }
  .planning-compact-tags { font-size: .75rem; }
  input, select, textarea { max-width: 100%; }
}

@media (max-width: 360px) {
  .section-jump-nav > a:not(.app-brand-mark),
  .section-jump-nav .section-nav-group > a { font-size: .78rem; }
  .trip-title-wrap.trip-route-dashboard .trip-stat { padding-inline: .45rem; }
}

@media(max-width:760px) {
 .trip-day-summary-row { grid-template-columns:2.3rem repeat(3,minmax(0,1fr)) !important; gap:.4rem !important; }
 .trip-day-summary-row .trip-day-summary-chip,.trip-day-summary-row:has(.trip-day-summary-types) .trip-day-summary-chip { grid-row:1 / span 2 !important; }
 .trip-day-summary-row .trip-day-summary-weather { grid-row:2; grid-column:2; }
 .trip-day-summary-row .trip-day-summary-walk-time { grid-row:2; grid-column:3 / -1; justify-self:end; font-size:.76rem !important; }
 .trip-day-summary-row .trip-day-summary-distance b,.trip-day-summary-row .trip-day-summary-metric { font-size:.78rem !important; }
 .trip-day-summary-row .trip-day-summary-walk-time::before { content:'Walk '; font-weight:500; }
 .trip-day-summary-row .trip-day-summary-types .route-type-bar { height:4px; }
}

@media (max-width:700px) {
  /* Five statistics: distance/time, ascent/descent, then route types/weather. */
  .trip-title-wrap.trip-route-dashboard .trip-banner-stats > .trip-stat:first-child { grid-column:1 / -1; }
}