/* Alive webapp — where to (lane W). One Google-Maps-like surface:
   search (From/To rows ARE the inputs + one results list) → modes →
   vehicle → routes (half sheet over the map). RN tokens (theme.ts):
   bg #FAFAF7 · surface #FFF · surface2 #F3F2EC · ink #16181D · text2
   #4A4E57 · text3 #6E7278 · text4 #A6ACB8 · accent #35614B · accentInk
   #2A4D3B · accentWash #EFEDE7 · accentTint #E5E2DA. Air hues come ONLY
   from the band palette (--b0..--b5 / --w0..--w5). Radius: row 13 ·
   card 20 · pill 999. Every tap target ≥ 40px, every input ≥ 16px. */

.wt {
  display: flex; flex-direction: column;
  margin: -4px -18px calc(-18px - var(--sab));
  height: calc(100% + 22px + var(--sab));
  min-height: calc(100% + 22px + var(--sab));
  overflow: hidden; font-family: inherit;
}
.wt button, .wt input { font-family: inherit }
@keyframes wtIn { from { transform: translateY(28px); opacity: 0 } to { transform: none; opacity: 1 } }
.wt-in { animation: wtIn .34s cubic-bezier(.22,.8,.32,1) both }

/* routes ride a half sheet so the map (route lines, jams) shows above */
.wt-half .sheet { top: 38% }

/* ── search surface — back rail + the two field rows ────────────── */
.wt-rc {
  display: flex; align-items: center;
  margin: 12px 14px 0; background: #F3F2EC; border-radius: 13px;
  overflow: hidden; flex: none;
}
.wt-rc > .wt-bbtn { margin-left: 6px }
.wt-rrows { flex: 1; min-width: 0 }
.wt-rrow {
  display: flex; align-items: center; gap: 10px; height: 48px;
  padding: 0 10px 0 12px; width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer; color: inherit;
}
.wt-rrow.on { background: #E5E2DA }
.wt-rrow.edit { cursor: text }
.wt-rdot { width: 10px; height: 10px; border-radius: 5px; background: #35614B; flex: none }
.wt-rdot.to { background: transparent; border: 2px solid #16181D }
.wt-rkey { width: 34px; font-size: 13px; color: #6E7278; flex: none }
.wt-rval {
  flex: 1; min-width: 0; font-size: 17px; font-weight: 500; color: #16181D;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wt-rval.ph { color: #6E7278; font-weight: 400 }
.wt-rhair { display: block; height: 1px; background: #E3E0D7; margin-left: 32px }

.wt-bbtn {
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; flex: none;
}
.wt-bbtn:active { transform: scale(.92) }
.wt-rin {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: transparent; outline: none;
  font-size: 17px; font-weight: 500; color: #16181D; padding: 0;
}
.wt-rin::placeholder { color: #6E7278; font-weight: 400 }
.wt-rin:focus, .wt-rin:focus-visible { outline: none }   /* the armed row's wash is the focus */
.wt-rx { margin-right: -6px }

/* ── notice ─────────────────────────────────────────────────── */
.wt-notice { margin: 8px 14px 2px; padding: 8px 12px; border-radius: 13px; background: #F3F2EC }
.wt-notice span { font-size: 13px; color: #4A4E57; font-weight: 500 }

/* ── list ───────────────────────────────────────────────────── */
.wt-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 16px; -webkit-overflow-scrolling: touch; position: relative }
.wt-sec { font-size: 15px; font-weight: 600; color: #16181D; margin: 14px 18px 4px }
.wt-sec.wt-near { font-size: 13px; font-weight: 500; color: #6E7278; margin: 12px 18px 2px }
.wt-row {
  display: flex; align-items: center; min-height: 56px;
  padding: 8px 14px; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 13px;
  cursor: pointer; color: inherit;
}
.wt-row:active { background: #F3F2EC }
.wt-row.armed { background: rgba(255,255,255,.55) }
.wt-gb {
  width: 38px; height: 38px; border-radius: 13px; flex: none; background: #F3F2EC;
  display: flex; align-items: center; justify-content: center; margin-right: 12px;
}
.wt-rt { flex: 1; min-width: 0; margin-right: 10px; display: flex; flex-direction: column }
.wt-rt-t {
  font-size: 16px; font-weight: 500; color: #16181D;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wt-rt-t .wt-dim, .wt-rt-t.wt-dim { color: #4A4E57; font-weight: 400 }
.wt-rt-t b { font-weight: 600 }
.wt-rt-s {
  font-size: 13px; color: #6E7278; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wt-dist {
  font-size: 13px; color: #6E7278; flex: none;
  font-variant-numeric: tabular-nums;
}

/* slim progress hint — rows already shown stay; deeper ones land below */
.wt-prog {
  position: sticky; top: 0; z-index: 2; height: 2px; margin: 0 16px;
  overflow: hidden; border-radius: 1px; background: rgba(53,97,75,.12);
}
.wt-prog i {
  display: block; width: 38%; height: 100%; border-radius: 1px; background: #35614B;
  animation: wtProg 1.05s cubic-bezier(.4,0,.2,1) infinite; will-change: transform;
}
@keyframes wtProg { from { transform: translateX(-105%) } to { transform: translateX(270%) } }
/* first answer still coming and nothing local matches — quiet placeholders,
   never a bare "Searching…" */
.wt-skel { padding: 4px 14px }
.wt-skel i {
  display: block; height: 52px; margin: 8px 0; border-radius: 13px; background: #F3F2EC;
  animation: wtPulse 1.1s ease-in-out infinite alternate;
}
.wt-skel i:nth-child(2) { animation-delay: .15s; width: 86% }
.wt-skel i:nth-child(3) { animation-delay: .3s; width: 72% }
.wt-skel.wt-skc i { height: 104px; border-radius: 20px; width: 100% }
@keyframes wtPulse { from { opacity: .45 } to { opacity: 1 } }

/* save strip — long-press affordance */
.wt-save { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 14px 10px 64px }
.wt-sbtn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #F3F2EC; border: 0; border-radius: 999px;
  padding: 0 14px; min-height: 40px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: #35614B;
}
.wt-sbtn[disabled] { opacity: .5; cursor: default }
.wt-sbtn.wt-sdel { color: #4A4E57 }

.wt-quiet { display: flex; align-items: center; gap: 10px; margin: 22px 18px 0; font-size: 14px; color: #6E7278; line-height: 1.35 }
.wt-quiet svg { width: 34px; height: 34px; padding: 7px; box-sizing: border-box; background: #F3F2EC; border-radius: 17px; flex: none }

/* ── action bar (pinned bottom) ─────────────────────────────── */
.wt-act { display: flex; background: #fff; padding-bottom: calc(6px + var(--sab)); flex: none; border-top: 1px solid rgba(22,24,29,.06) }
.wt-abtn {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 8px; background: transparent; border: 0;
  cursor: pointer; font-size: 15px; font-weight: 500; color: #16181D; white-space: nowrap;
}
.wt-abtn:active { background: #F3F2EC }
.wt-asplit { width: 1px; background: #E3E0D7; margin: 12px 0; display: block }

/* ── armed pin-drop hint strip ──────────────────────────────── */
.wt-armed .sheet { background: transparent; box-shadow: none; border-radius: 0; pointer-events: none }
.wt-armed .sheet .sheet-grab, .wt-armed .sheet .sheet-title { display: none }
.wt-armed .wt-pinbar { pointer-events: auto }
.wt-armed .sheet-body > .wt { display: none }
.wt-pinbar {
  position: absolute; left: 12px; right: 12px; bottom: calc(14px + var(--sab));
  display: flex; align-items: center; gap: 10px; z-index: 30;
  background: #fff; border-radius: 999px; padding: 8px 8px 8px 16px;
  box-shadow: 0 8px 22px rgba(59,52,35,.12);
}
.wt-pinbar span { flex: 1; min-width: 0; display: flex; flex-direction: column }
.wt-pinbar b { font-size: 14px; font-weight: 600; color: #16181D }
.wt-pinbar i { font-style: normal; font-size: 12px; color: #6E7278 }
.wt-pinx {
  width: 40px; height: 40px; border: 0; border-radius: 50%; flex: none;
  background: #F3F2EC; display: flex; align-items: center; justify-content: center; cursor: pointer;
}

/* ── trip row (modes / vehicle / routes) ────────────────────── */
.wt-trip {
  display: flex; align-items: center; gap: 6px; flex: none;
  margin: 8px 14px 2px; padding: 0 0 6px;
  border-bottom: 1px solid rgba(22,24,29,.06);
}
.wt-th {
  flex: 1 1 0; min-width: 0; min-height: 40px; display: flex; align-items: center; gap: 8px;
  background: transparent; border: 0; border-radius: 10px;
  padding: 0 6px; cursor: pointer; text-align: left;
}
.wt-th:active { background: #F3F2EC }
.wt-tdot { width: 9px; height: 9px; border-radius: 5px; background: #35614B; flex: none }
.wt-tdot.to { background: transparent; border: 2px solid #16181D }
.wt-tt { font-size: 14px; font-weight: 500; color: #16181D; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wt-tarr { font-size: 14px; color: #6E7278; flex: none }

/* ── modes — three big cards ────────────────────────────────── */
.wt-mlist { padding: 2px 0 16px }
.wt-mode {
  display: flex; align-items: center; gap: 14px;
  width: calc(100% - 28px); margin: 10px 14px 0; min-height: 84px; padding: 14px 14px 14px 16px;
  background: #fff; border: 0; border-radius: 20px;
  box-shadow: 0 6px 18px rgba(59,52,35,.07);
  text-align: left; cursor: pointer; color: inherit; transition: transform .18s ease;
}
.wt-mode:active { transform: scale(.985) }
.wt-mode.on { background: #EFEDE7; outline: 2px solid #35614B; outline-offset: -2px }
.wt-mg {
  width: 48px; height: 48px; border-radius: 14px; background: #F3F2EC; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.wt-mode.on .wt-mg { background: #E5E2DA }
.wt-mt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px }
.wt-mt b { font-size: 17px; font-weight: 600; color: #16181D; line-height: 1.25 }
.wt-mt span { font-size: 14px; color: #4A4E57; line-height: 1.35 }

/* ── routes: mode + vehicle pills ───────────────────────────── */
.wt-pills { display: flex; gap: 8px; padding: 8px 14px 2px; flex: none; min-width: 0 }
.wt-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0;
  min-height: 40px; padding: 0 10px 0 12px; border-radius: 999px; border: 0;
  background: #F3F2EC; cursor: pointer; font-size: 14px; font-weight: 500; color: #16181D;
}
.wt-pill > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wt-pill.wt-pmode { flex: none; max-width: 60% }
.wt-pill:active { background: #E5E2DA }
.wt-pill svg:last-child { transform: rotate(90deg) }
.wt-pstat { margin: 14px 18px 0; font-size: 14px; color: #4A4E57 }

/* ── route card — simple, Uber-like ─────────────────────────── */
.wt-plist { padding-top: 2px }
.wt-opt {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  width: calc(100% - 28px); margin: 8px 14px 0; padding: 13px 14px; min-height: 76px;
  background: #fff; border: 0; border-radius: 20px;
  box-shadow: 0 6px 18px rgba(59,52,35,.07);
  cursor: pointer; text-align: left; color: inherit; overflow: hidden;
}
/* the picked ring rides an ::after so it paints above the wash layer */
.wt-opt.sel::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 2px #35614B; pointer-events: none;
}
.wt-selbg {
  position: absolute; inset: 0; background: #EFEDE7;
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.wt-opt.sel .wt-selbg { opacity: 1 }
.wt-well {
  position: relative; width: 44px; height: 44px; border-radius: 13px; flex: none;
  display: flex; align-items: center; justify-content: center; background: #F3F2EC;
}
.wt-opt.sel .wt-well { background: #E5E2DA }
.wt-omid { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column }
.wt-badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
  margin: -1px 0 4px; padding: 2px 9px 2px 7px; border-radius: 999px;
  background: #E5E2DA; color: #2A4D3B; font-size: 12px; font-weight: 600;
}
.wt-opt.sel .wt-badge { background: #fff }
.wt-otop { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 6px }
.wt-oeta { font-size: 20px; font-weight: 700; color: #16181D; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.2 }
.wt-oarr { font-size: 14px; color: #4A4E57; white-space: nowrap }
.wt-otop .wt-odot { align-self: center }
.wt-otop .wt-obr { font-size: 14px }
.wt-otop .wt-oword { align-self: center }
.wt-otop .wt-na { font-size: 15px; font-weight: 600; color: #6E7278 }
.wt-oair { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 5px; font-size: 14px; color: #16181D }
.wt-oair b { font-weight: 600; font-variant-numeric: tabular-nums }
.wt-odot { width: 10px; height: 10px; border-radius: 5px; flex: none; display: inline-block }
.wt-obr { color: #4A4E57 }
.wt-oword { padding: 1px 8px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #16181D; white-space: nowrap }
.wt-oair.wt-na { color: #6E7278 }
.wt-na { color: #6E7278 }
.wt-oext { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 4px; font-size: 13px; color: #4A4E57 }
.wt-oext .wt-oeta { font-size: 14px; font-weight: 600 }
.wt-oext .wt-oarr { font-size: 13px }
.wt-oext .wt-obr { font-size: 13px }
.wt-oext .wt-oword { align-self: center }
.wt-oext .wt-odot { align-self: center }
.wt-oext .wt-na { font-size: 13px }
.wt-otag { align-self: flex-start; margin-bottom: 3px; padding: 1px 8px; border-radius: 999px; background: #EEF0F3; color: #4A4E57; font-size: 11px; font-weight: 600; letter-spacing: .02em }
.wt-ovs { margin-top: 4px; font-size: 13px; font-weight: 600; color: #16181D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.wt-otraf { font-weight: 500; white-space: nowrap }
.wt-otraf::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #D93025; margin-right: 5px; vertical-align: 1px;
}
.wt-ofuel { white-space: nowrap }
.wt-ofuel.hl { color: #2A4D3B; font-weight: 600 }
.wt-osep { color: #A6ACB8 }
.wt-owhy { margin-top: 4px; font-size: 13px; font-weight: 500; color: #2A4D3B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.wt-ometa { margin-top: 3px; font-size: 13px; color: #6E7278; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.wt-oth-t {
  display: flex; align-items: center; justify-content: space-between;
  width: calc(100% - 28px); margin: 12px 14px 0; min-height: 44px; padding: 0 4px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 15px; font-weight: 600; color: #16181D;
}
.wt-oth-t svg { transform: rotate(90deg); transition: transform .25s ease }
.wt-oth-t.open svg { transform: rotate(-90deg) }
.wt-opt.oth { box-shadow: 0 3px 10px rgba(59,52,35,.05) }
.wt-opt.oth.sel { box-shadow: 0 3px 10px rgba(59,52,35,.05) }

/* ── footer ─────────────────────────────────────────────────── */
.wt-foot {
  flex: none; padding: 10px 16px calc(10px + var(--sab));
  border-top: 1px solid rgba(22,24,29,.06); background: #fff;
}
.wt-go {
  width: 100%; min-height: 50px; border: 0; border-radius: 999px;
  background: #16181D; color: #fff; cursor: pointer;
  font-size: 17px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; padding: 0 36px;
}
.wt-go:active { transform: scale(.985) }
.wt-go:disabled { opacity: .35; cursor: default }

/* ── plan states ────────────────────────────────────────────── */
.wt-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px 26px; flex: 1; min-height: 0 }
.wt-st-t { font-size: 16px; font-weight: 500; color: #16181D; text-align: center }
.wt-st-s { font-size: 14px; color: #6E7278; text-align: center; max-width: 300px; line-height: 1.4 }
.wt-retry {
  margin-top: 6px; min-height: 44px; padding: 0 26px; border: 0; border-radius: 999px;
  background: #16181D; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}

/* ── vehicle surface — VehicleSheet twin ────────────────────── */
.wt-vhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px 4px; flex: none }
.wt-vq { font-size: 19px; font-weight: 600; color: #16181D; letter-spacing: -.01em }
.wt-dots { display: flex; gap: 5px; flex: none }
.wt-dots i { width: 6px; height: 6px; border-radius: 3px; background: #E3E0D7 }
.wt-dots i.on { background: #35614B }
.wt-vgrp { margin: 10px 18px 8px; padding: 0 4px; font-size: 14px; font-weight: 500; color: #6E7278 }
.wt-vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 16px 10px }
.wt-vgrid.wt-vg3 { grid-template-columns: 1fr 1fr 1fr }
.wt-vcard {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  background: #fff; border: 0; border-radius: 16px;
  box-shadow: 0 6px 18px rgba(59,52,35,.07);
  padding: 12px; min-height: 60px; cursor: pointer;
  text-align: left; color: inherit;
}
.wt-vcard:active { transform: scale(.98) }
.wt-vcard.on { background: #EFEDE7; outline: 2px solid #35614B; outline-offset: -2px }
.wt-vg { flex: none; display: flex }
.wt-vcard-mid { flex: 1; min-width: 0; display: flex; flex-direction: column }
.wt-vt { font-size: 15px; font-weight: 500; color: #16181D }
.wt-vcard.on .wt-vt { color: #2A4D3B }
.wt-vcap {
  font-size: 12px; color: #6E7278; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wt-vcard.wt-vline { display: flex; width: calc(100% - 32px); margin: 0 16px 10px }
.wt-vfields { display: flex; gap: 10px; margin: 6px 16px 0 }
.wt-vfield { flex: 1; min-width: 0; display: flex; flex-direction: column }
.wt-vfl { font-size: 13px; color: #4A4E57; font-weight: 500; margin-bottom: 4px }
.wt-vin {
  width: 100%; background: #F3F2EC; border: 0; border-radius: 13px;
  padding: 10px 13px; min-height: 46px; outline: none;
  font-size: 16px; color: #16181D;
}
.wt-vfh { font-size: 12px; color: #6E7278; margin-top: 4px; line-height: 1.3 }
.wt-vfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px calc(10px + var(--sab)); flex: none; border-top: 1px solid rgba(22,24,29,.06); background: #fff }
.wt-vfb {
  min-height: 40px; background: transparent; border: 0; border-radius: 999px;
  font-size: 14px; color: #4A4E57; font-weight: 500; cursor: pointer; padding: 0 12px;
}
.wt-vfb:active { background: #F3F2EC }
.wt-vsave { font-size: 15px; color: #2A4D3B; font-weight: 600 }
.wt-vfr { display: flex; gap: 4px; align-items: center; min-width: 0 }

/* ── map pins (markers live in the map layer, never in the sheet) ── */
.wt-endpin, .wt-jampin { pointer-events: none }
.wt-pa, .wt-pb { display: block; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 2px 6px rgba(22,24,29,.28) }
.wt-pa { background: #35614B; border: 3px solid #fff }
.wt-pb { background: #fff; border: 4px solid #16181D }
/* a live jam on the picked route — traffic red, never a band colour */
.wt-jam { position: relative; width: 12px; height: 12px }
.wt-jam i {
  position: absolute; inset: 0; border-radius: 50%; background: #D93025;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(22,24,29,.3);
}
.wt-jam span {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 11px; font-weight: 700; color: #D93025;
  background: #fff; padding: 1px 6px; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(22,24,29,.18);
}

/* wide sheet — keep margins proportional */
@media (min-width: 720px) {
  .wt-rc { margin-left: 16px; margin-right: 16px }
}
.wt-ogap { margin-top: 3px; font-size: 12px; color: #6E7278; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }