/* Drop-off map and the leave-by card (herecar.js), and the pick-up sheet and card (pickup.js). Tokens from app.css only, so
   every theme colour and dark mode follow. 360 px: 16 px edges, 44 px targets. */
.dm-body { padding: 0 var(--edge) calc(var(--sp-8) + var(--safe-bot)); }
.dm-map { height: min(42vh, 320px); border-radius: var(--r-card); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow); position: relative; margin-top: var(--sp-2); }
.dm-lead { margin: var(--sp-4) var(--sp-1) var(--sp-2); }
.dm-foot { position: sticky; bottom: 0; display: grid; gap: var(--sp-1); padding: var(--sp-4) 0 var(--sp-2); background: linear-gradient(to top, var(--bg) 70%, transparent); margin-top: var(--sp-4); }
.dm-foot .btn.primary:disabled { opacity: .5; }
.dm-walk { min-height: 44px; justify-self: center; font-weight: 700; }
.dm-best, .dm-slow { font-style: normal; font-size: var(--fs-label); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-pill); margin-left: var(--sp-1); vertical-align: 2px; }
.dm-best { background: var(--accent-soft); color: var(--accent); }
.dm-slow { background: var(--warn-soft); color: var(--warn); margin-left: 0; }
.leave-card { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--card-pad); margin: var(--card-gap) 0; border-radius: var(--r-card); }
.leave-card.warn { background: var(--warn-soft); }
.lc-ico { flex: none; width: 40px; height: 40px; border-radius: var(--r-chip); background: var(--surface-2); display: grid; place-items: center; color: var(--text); }
.leave-card.warn .lc-ico { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.lc-body { min-width: 0; flex: 1; }
.lc-head { margin: 0; font-size: var(--fs-row); font-weight: 600; line-height: 1.3; text-wrap: balance; }
.lc-head b { font-weight: 800; }
.lc-sub { margin: var(--sp-1) 0 0; font-size: var(--fs-detail); color: var(--muted); }
.lc-go { margin-top: var(--sp-4); }
.lc-credit { margin: var(--sp-3) 0 0; font-size: var(--fs-label); color: var(--muted); }
/* Pick me up */
.pk-sheet { padding: 0 var(--edge) calc(var(--sp-8) + var(--safe-bot)); }
.pk-sheet h2 { font-size: var(--fs-card); margin: var(--sp-2) 0 var(--sp-1); }
.pk-field { display: grid; gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-4); }
.pk-field input { height: 52px; border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--surface); color: var(--text); padding: 0 var(--sp-4); font: inherit; }
.pk-card { display: flex; gap: var(--sp-3); align-items: center; padding: var(--card-pad); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); margin: var(--card-gap) var(--edge); }
.pk-card .pk-big { font-size: var(--fs-card); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.pk-card small { display: block; color: var(--muted); font-size: var(--fs-detail); margin-top: 2px; }
.pk-card .grow { flex: 1; min-width: 0; }
.pk-card .link { min-height: 44px; font-weight: 700; }
.pk-card.live { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ok) 55%, transparent), var(--shadow); }
.pk-priv { color: var(--muted); font-size: var(--fs-detail); margin: var(--sp-3) 0 0; }
@media (max-width: 380px) { .dm-body, .pk-sheet { padding-left: 16px; padding-right: 16px; } .pk-card { margin-left: 16px; margin-right: 16px; } .lc-head { font-size: var(--fs-row); } }