/* Phone layout for /map.html (loaded at (max-width: 760px)). */
/* Builds on the page's own <=860px block (search above the map, panel
   below). On a phone: a taller map that still leaves room to scroll the
   page past it, quick-pick mode and stretch length on their own rows,
   finger-sized route controls, and once a route is ready the Build button
   pins to the bottom of the screen so it never has to be scrolled to. */

/* ---------- top: heading, search, pick mode ---------- */
.mobile-builder-top { padding: 16px 16px 14px; }
.mobile-builder-top h1 { font-size: 1.55rem; line-height: 1.15; }
.mobile-builder-top .lede { font-size: 15px; line-height: 1.5; margin-bottom: 12px; }

/* The search button was centred on the whole block (label + input +
   status), so it floated above the input. A grid lays the button over the
   input's own row whatever the label or status text does. */
.search { display: grid; grid-template-columns: minmax(0, 1fr) 48px; }
.search > label.field { grid-column: 1 / -1; }
.search input { grid-area: 2 / 1 / 3 / 3; min-height: 48px; padding-right: 50px; }
.search .go {
  grid-area: 2 / 2 / 3 / 3; position: static; transform: none;
  width: 48px; height: 48px; padding: 0; font-size: 1.25rem;
}
.search .search-status { grid-column: 1 / -1; font-size: 12px; }
.results button { padding: 13px 14px; font-size: 15px; }
.results .kind { font-size: 11px; }

label.field, .blend-ask legend { font-size: 12px; }

/* Mode and stretch length each get a full row: side by side, "Advanced:
   place pins" ran into the edge at 390px and wrapped unevenly at 360. */
.pick-row { gap: 8px; }
.pick-mode, .pick-len { flex: 1 1 100%; }
.pick-mode button, .pick-len button { min-height: 44px; font-size: 14px; }
.pick-note, .route-note { font-size: 13px; line-height: 1.55; }
.pick-hint { font-size: 14px; }

/* ---------- the map ---------- */
/* Taller than the 280px the inline block gives, but capped below the
   screen height: Leaflet takes one-finger drags, so there must always be
   page above or below the map to scroll on. */
.mapwrap { height: clamp(320px, 56svh, 520px); }
/* Leaflet's 30px zoom buttons are a mouse size. */
.leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; font-size: 20px; }
.map-tip { bottom: 30px; font-size: 13px; padding: 9px 16px; }

/* ---------- panel under the map ---------- */
.side-inner { padding: 16px 16px 28px; gap: 16px; }
/* stays a list item so it keeps its disclosure triangle; padding gives it 46px */
.mobile-route-details summary { padding: 12px 0; font-size: 15px; }

.pt { padding: 6px 6px 6px 12px; }
.pt .badge { font-size: 12px; width: 66px; letter-spacing: .06em; }
.pt .coords { font-size: 12px; }
.pt .del { min-width: 44px; min-height: 44px; padding: 0; }
.pt-tools { flex-wrap: wrap; }
.pt-tools .btn { flex: 1 1 0; min-height: 44px; padding: 8px 10px; font-size: 14px; }

.stat { padding: 10px 12px; }
.stat .k { font-size: 12px; letter-spacing: .08em; }

.yn span { padding: 12px 6px; font-size: 15px; }
.blend-help { font-size: 13px; }

/* venue (pit) form, when it is switched on */
.vstep-head { font-size: 15px; }
.vbody, .vcheck, .vpick { font-size: 14px; }
.vstate, .vpick .pid, .vpick .sub { font-size: 12px; }
.surf button { min-height: 40px; padding: 6px 12px; font-size: 13px; }

.handoff .fine { font-size: 13px; }
#status { font-size: 13px; }
.prog-steps { font-size: 15px; }

/* ---------- Build button pinned once there is something to build -------- */
/* Disabled it stays in the panel (nothing to do yet); enabled it rides the
   bottom of the screen, clear of the home bar, so tapping the road and
   building are one thumb apart. Building disables it again, so it drops
   back above the progress panel the page scrolls to. */
#buildBtn:not(:disabled) {
  position: fixed; z-index: 1200;  /* over Leaflet's controls (1000) */
  left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  width: auto; min-height: 52px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 0 4px var(--asphalt);
}
/* Room under the last of the page so the pinned button never sits on it. */
body:has(#buildBtn:not(:disabled)) .side-inner {
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}
/* The free-build offer card (build-offer.js) is fixed bottom too: lift it
   above the pinned button instead of under it. */
body:has(#buildBtn:not(:disabled)) .build-offer {
  bottom: calc(80px + env(safe-area-inset-bottom));
}