/* book — rider home. Map underlay, floating chrome, booking sheet, search. */

/* Amber/red TEXT needs darker inks than the raw accent tokens in light:
   --accent-strong on the accent tint measures 2.55:1 and --bad on the white
   glass 4.44:1, both under AA. Mixing toward --text tracks the theme
   automatically: light lands at 5.1:1 on the tint / 5.8:1 on white, dark
   stays golden (10.3:1). Tokens only — no literal colours. */
:root {
  --bk-accent-ink: color-mix(in srgb, var(--accent-strong) 62%, var(--text));
  --bk-bad-ink: color-mix(in srgb, var(--bad) 92%, var(--text));
  /* Accent used as UI state colour (active tab, focused border): light needs
     the darker ink mix (raw --accent is ~2:1 on near-white); dark keeps the
     raw golden accent, which already measures ~10:1. */
  --bk-accent-ui: var(--bk-accent-ink);
  /* Faint text (placeholders, section labels, address sublines): light
     --text-3 is 2.5:1, under the 3:1 floor — use --text-2 (4.86:1) there;
     dark --text-3 (~3.7:1) reads fine and stays. */
  --bk-faint-ink: var(--text-2);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bk-accent-ui: var(--accent);
    --bk-faint-ink: var(--text-3);
  }
}

/* TEMPORARY shell override (shared-change request filed): base.css paints
   .tab.active with raw --accent — 1.95:1 on the light tab bar for an 11px
   label. Track the theme instead; dark is unchanged (--bk-accent-ui = raw
   accent there). Remove once tokens.css/base.css adopt an accent-ink token. */
.tabbar .tab.active { color: var(--bk-accent-ui); }

/* Voyager tiles fading in over ~200ms read as a washed-out white page on
   first paint in light; paint each tile at full opacity the moment it loads
   (!important beats Leaflet's inline fade opacity). */
.book-map .leaflet-tile { opacity: 1 !important; }

.book-map { position: absolute; inset: 0; z-index: 0; }

/* Leaflet attribution: the default bottom-right corner of a full-bleed map is
   behind the sheet + tab bar. Park it top-right, tucked under the miles pill,
   so the OSM/CARTO credit stays legible. */
.book-map .leaflet-bottom.leaflet-right {
  bottom: auto;
  top: calc(var(--safe-top) + var(--s-3) + 44px + var(--s-1));
  right: var(--s-2);
}
/* The credit sits over live tile content (place labels at 320px), so it
   needs its own backing: a glass pill, same recipe as the floating chrome.
   Double class beats map3d.js's injected .gm-map rule (background: none). */
.book-map.gm-map .leaflet-control-attribution {
  background: var(--glass);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  padding: 2px 8px;
  border-radius: var(--r-full);
  color: var(--text-2);
  text-shadow: none;
}
.book-map.gm-map .leaflet-control-attribution a { color: var(--text-2); }

.gone { display: none !important; }

/* base.css only wires .grow inside .row; these flex parents need it too,
   or titles size to content and overflow instead of ellipsizing. */
.bk-prev-head > .grow, .bk-pickup .grow, .bk-banner .grow { flex: 1; min-width: 0; }

/* ---- floating top bar ---- */
.book-top {
  position: absolute; z-index: 640;
  top: calc(var(--safe-top) + var(--s-3));
  left: var(--s-4); right: var(--s-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  pointer-events: none;
}
.book-top > * { pointer-events: auto; }
.bk-hello, .bk-miles {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: color-mix(in srgb, var(--bg-elev-1) 86%, transparent);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--line-strong); border-radius: var(--r-full);
  box-shadow: var(--shadow-2);
}
.bk-hello { padding: 5px 14px 5px 5px; }
.bk-hello .avatar { width: 34px; height: 34px; font-size: 17px; border: 0; }
.bk-hello-txt { font-size: var(--fs-md); font-weight: var(--fw-semi); letter-spacing: -0.01em; }
.bk-miles {
  min-height: 44px; padding: 0 14px;
  font-size: var(--fs-md); font-weight: var(--fw-semi);
  color: var(--bk-accent-ink);
  transition: transform var(--t-fast) var(--ease);
}
.bk-miles:active { transform: scale(0.95); }
.bk-miles svg { width: 16px; height: 16px; }
.bk-miles-unit { color: var(--bk-faint-ink); font-size: var(--fs-sm); font-weight: var(--fw-med); margin-left: -2px; }
/* balances run negative by design; the chip says so honestly */
.bk-miles.neg { color: var(--bk-bad-ink); }

/* ---- resume banner ---- */
.bk-banner {
  position: absolute; z-index: 630;
  left: var(--s-4); right: var(--s-4);
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sheet-h, 280px) + var(--s-3));
  display: flex; align-items: center; gap: var(--s-3); text-align: left;
  min-height: 56px; padding: var(--s-2) var(--s-4);
  background: color-mix(in srgb, var(--bg-elev-2) 90%, transparent);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  animation: bk-banner-in var(--t-slow) var(--ease-spring);
  transition: transform var(--t-fast) var(--ease);
}
.bk-banner:active { transform: scale(0.98); }
@keyframes bk-banner-in { from { opacity: 0; transform: translateY(10px); } }
.bk-banner .pulse-dot { flex-shrink: 0; }
.bk-banner-requested .pulse-dot { color: var(--bk-accent-ink); }
.bk-banner-accepted .pulse-dot, .bk-banner-arriving .pulse-dot { color: var(--good); }
.bk-banner-in_progress .pulse-dot { color: var(--info); }
.bk-banner-txt { display: flex; flex-direction: column; min-width: 0; }
.bk-banner-status { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.bk-banner-route {
  font-size: var(--fs-sm); color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk-banner > svg { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; }

/* ---- bottom sheet ---- */
.book-sheet {
  bottom: calc(var(--tabbar-h) + var(--safe-bottom));
  z-index: 650;
  padding: var(--s-2) var(--s-4) var(--s-4);
}
.bk-pane { animation: bk-pane-in var(--t-med) var(--ease-out); }
@keyframes bk-pane-in { from { opacity: 0; transform: translateY(10px); } }

.bk-whereto {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; min-height: 56px; padding: 0 var(--s-4);
  background: var(--bg-elev-2); border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-lg); font-weight: var(--fw-semi); letter-spacing: -0.01em;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.bk-whereto:active { transform: scale(0.98); background: var(--bg-elev-3); }
.bk-whereto svg { width: 21px; height: 21px; color: var(--accent-strong); flex-shrink: 0; }

.bk-pickup {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; min-height: 56px; padding: var(--s-2) var(--s-1);
  text-align: left; border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease);
}
.bk-pickup:active { background: var(--bg-elev-2); }
.bk-pickup-ic {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-dim); color: var(--accent-strong);
  display: flex; align-items: center; justify-content: center;
}
.bk-pickup-ic svg { width: 18px; height: 18px; }
.bk-pickup-txt { display: flex; flex-direction: column; min-width: 0; }
.bk-pickup-lab {
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--bk-faint-ink);
}
.bk-pickup-val {
  font-size: var(--fs-md); font-weight: var(--fw-med);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk-chev svg { width: 18px; height: 18px; color: var(--text-3); }

.bk-chips {
  display: flex; gap: var(--s-2);
  overflow-x: auto; scrollbar-width: none;
  margin: var(--s-1) calc(-1 * var(--s-4)) 0;
  padding: 2px var(--s-4) var(--s-1);
}
.bk-chip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; max-width: 180px; padding: 0 var(--s-4);
  background: var(--bg-elev-2); border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: var(--fw-med);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.bk-chip:active { transform: scale(0.95); background: var(--bg-elev-3); }
.bk-chip svg { width: 16px; height: 16px; color: var(--text-2); flex-shrink: 0; }
.bk-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-chip.skel { width: 104px; border: 0; }

/* ---- search overlay ---- */
.bk-search {
  position: absolute; inset: 0; z-index: 800;
  background: var(--bg);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(3%);
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.bk-search.open { opacity: 1; transform: none; pointer-events: auto; }
.bk-search-head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: calc(var(--safe-top) + var(--s-2)) var(--s-4) var(--s-2) var(--s-3);
}
.bk-search-back { color: var(--text); }
.bk-search-back svg { width: 22px; height: 22px; }
.bk-search-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -0.02em; }

.bk-fields { display: flex; gap: var(--s-3); padding: 0 var(--s-4) var(--s-3); }
.bk-rail {
  display: flex; flex-direction: column; align-items: center;
  width: 10px; padding: 22px 0;
}
.bk-rail-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
/* dotted connector spans the whole gap between the two markers (same
   treatment as the trip screen's route block) */
.bk-rail-bar {
  flex: 1; width: 2px; margin: 3px 0; border-radius: 1px;
  background: repeating-linear-gradient(to bottom, var(--line-strong) 0 3px, transparent 3px 7px);
}
.bk-rail-sq { width: 8px; height: 8px; border-radius: 2px; background: var(--text); flex-shrink: 0; }
.bk-fields-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.bk-fields-col .field { min-height: 50px; background: var(--bg-elev-1); }
.bk-fields-col .field.active { background: var(--bg-elev-2); border-color: var(--line-strong); }
/* active border must clear 3:1 as a UI state cue: ink mix in light, raw accent in dark */
.bk-fields-col .field.active:focus-within { border-color: var(--bk-accent-ui); }
/* placeholders inherit base.css --text-3 (2.5:1 in light); lift to the faint ink */
.bk-search .field input::placeholder, .bk-note input::placeholder { color: var(--bk-faint-ink); }
/* SAVED PLACES / RECENT / RESULTS headers, same floor */
.bk-list .section-label { color: var(--bk-faint-ink); }
.bk-field-pickup { justify-content: space-between; text-align: left; }
.bk-field-pickup svg { width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0; }
.bk-field-static {
  font-size: var(--fs-lg); font-weight: var(--fw-med);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk-clear {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg-elev-3); color: var(--text-2);
}
.bk-clear svg { width: 14px; height: 14px; }

.bk-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 0 var(--s-8); }
.bk-list .section-label { padding-top: var(--s-3); }
.bk-result {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; min-height: 62px; padding: var(--s-2) var(--s-4);
  text-align: left;
  transition: background var(--t-fast) var(--ease);
}
.bk-result:active { background: var(--bg-elev-1); }
.bk-result-ic {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-elev-2); border: 1px solid var(--line);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
}
.bk-result-ic svg { width: 18px; height: 18px; }
.bk-result-ic.current { background: var(--accent-dim); border-color: transparent; color: var(--accent-strong); }
.bk-result-ic.skel { border: 0; }
.bk-result-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bk-r1 {
  font-size: var(--fs-md); font-weight: var(--fw-med);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk-r2 {
  font-size: var(--fs-sm); color: var(--bk-faint-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk-r1.skel, .bk-r2.skel { align-self: flex-start; }
.bk-current-tick svg { width: 18px; height: 18px; color: var(--accent-strong); }

/* ---- trip preview ---- */
.bk-prev-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.bk-back { background: var(--bg-elev-2); border: 1px solid var(--line); flex-shrink: 0; }
.bk-back svg { width: 20px; height: 20px; }
.bk-prev-title {
  font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -0.02em;
  line-height: 1.2;
  /* long POI names wrap to two lines, then clamp; the route card below
     carries the full text */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: break-word;
}
.bk-prev-sub { font-size: var(--fs-sm); color: var(--bk-faint-ink); }

.bk-routecard { padding: var(--s-3) var(--s-4); display: flex; gap: var(--s-3); }
/* left glyph rail: dot, dotted connector, square — the connector runs
   marker-centre to marker-centre (trip screen treatment) */
.bk-route-glyph {
  display: flex; flex-direction: column; align-items: center;
  width: 10px; flex-shrink: 0; padding: 9px 0;
}
.bk-route-line {
  flex: 1; width: 2px; margin: 3px 0; border-radius: 1px;
  background: repeating-linear-gradient(to bottom, var(--line-strong) 0 3px, transparent 3px 7px);
}
.bk-route-labels {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-3);
}
.bk-leg-txt {
  display: block; min-height: 26px; line-height: 26px;
  font-size: var(--fs-md); font-weight: var(--fw-med);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bk-stats {
  display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 var(--s-3);
  overflow-x: auto; scrollbar-width: none;
}
.bk-stats::-webkit-scrollbar { display: none; }
.bk-stat {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  min-height: 36px; padding: 0 var(--s-3);
  background: var(--bg-elev-2); border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--text-2);
  white-space: nowrap;
}
.bk-stat svg { width: 15px; height: 15px; color: var(--text-3); }
.bk-stat.skel { width: 76px; border: 0; }
.bk-earn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  min-height: 36px; padding: 0 var(--s-3);
  border-radius: var(--r-full);
  background: var(--accent-dim); color: var(--bk-accent-ink);
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  white-space: nowrap;
}
.bk-earn svg { width: 15px; height: 15px; }
.bk-earn.skel { width: 120px; }

/* ---- who's driving (target picker) ---- */
.bk-who { margin-bottom: var(--s-3); }
.bk-who-lab {
  display: block; margin-bottom: var(--s-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--bk-faint-ink);
}
.bk-who-chips {
  display: flex; gap: var(--s-2);
  overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--s-4));
  padding: 2px var(--s-4);
}
.bk-who-chips::-webkit-scrollbar { display: none; }
.bk-who-chip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 var(--s-4) 0 7px;
  background: var(--bg-elev-2); border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: var(--fw-med);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.bk-who-chip:active { transform: scale(0.95); }
.bk-who-chip.selected {
  background: var(--accent-dim); border-color: var(--bk-accent-ui);
  font-weight: var(--fw-semi);
}
.bk-who-chip.skel { width: 108px; border: 0; }
.bk-who-ic {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-elev-3); color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.bk-who-ic svg { width: 16px; height: 16px; }
.bk-who-chip.selected .bk-who-ic { background: var(--accent); color: var(--on-accent); }
.bk-who-av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong);
}

.bk-note { margin-bottom: var(--s-3); min-height: 48px; }
.bk-note svg { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; }
.bk-note input { font-size: var(--fs-md); }

/* pending-ride notice: one line above the Request button so a kid can't
   double-book without seeing the ride they already have */
.bk-pending {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; min-height: 40px; padding: 0 var(--s-3);
  margin-bottom: var(--s-3);
  background: var(--accent-dim); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--text-2);
  text-align: left;
  transition: transform var(--t-fast) var(--ease);
}
.bk-pending:active { transform: scale(0.98); }
.bk-pending .pulse-dot { color: var(--bk-accent-ink); flex-shrink: 0; }
.bk-pending-txt {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk-pending-view {
  flex-shrink: 0; color: var(--bk-accent-ink); font-weight: var(--fw-semi);
}

.bk-request { min-height: 54px; }
.bk-spin {
  width: 18px; height: 18px; border-radius: 50%;
  /* spinner sits on the amber button: --on-accent, faded, tokens only */
  border: 2.5px solid color-mix(in srgb, var(--on-accent) 30%, transparent);
  border-top-color: var(--on-accent);
  animation: bk-rot 0.7s linear infinite;
}
@keyframes bk-rot { to { transform: rotate(1turn); } }

/* narrow phones */
@media (max-width: 355px) {
  .bk-hello-txt { display: none; }
  .bk-hello { padding-right: 5px; }
  .bk-prev-title { font-size: var(--fs-lg); }
}

/* below ~360px the three stat chips can't hold --fs-sm inside 16px margins:
   tighten them and allow wrap as a fallback so nothing escapes the container */
@media (max-width: 359px) {
  .bk-stats { flex-wrap: wrap; row-gap: var(--s-2); }
  .bk-stat, .bk-earn { min-height: 32px; padding: 0 var(--s-2); font-size: var(--fs-xs); gap: 5px; }
  .bk-stat svg, .bk-earn svg { width: 13px; height: 13px; }
}

/* one consistent breathing gap under the sheet's last row (judge: bottom-edge spacing) */
.book-sheet { padding-bottom: calc(var(--safe-bottom) + var(--s-6)); }