:root {
  --bg: #0e1116;
  --panel: #161b22;
  --panel-2: #1c232c;
  --line: #2b3440;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #f5c518;
  --accent-ink: #1a1a00;
  --ok: #3fb950;
  --warn: #d29922;
  --err: #f85149;
  --info: #58a6ff;
  --radius: 12px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #07090c;
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 10px;
  transition: filter .12s ease, transform .06s ease;
}
button:hover:not(:disabled) { filter: brightness(1.25); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .4; cursor: not-allowed; }

button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 650; }
button.success { background: var(--ok); color: #04240f; border-color: var(--ok); font-weight: 650; }
button.danger  { background: #3d1d1d; border-color: #5c2b2b; color: #ffb4ab; }
button.ghost   { background: transparent; }
button.wide    { width: 100%; }
button.big     { padding: 16px; font-size: 16px; border-radius: 14px; }

input, select {
  font: inherit;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--info); outline-offset: -1px; }

label.field { display: block; margin-bottom: 10px; }
label.field > span {
  display: block;
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: 5px;
}

/* ══ Stage: device on the left, test harness on the right ═══════════════════ */

.stage { display: flex; height: 100%; overflow: hidden; }

.device-col {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 20px;
  min-width: 0;
  overflow: auto;
  background:
    radial-gradient(1200px 600px at 50% -10%, #131a24 0%, #07090c 65%);
}

.device-frame { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* The phone. Everything inside .device-screen is production UI — nothing simulated. */
.device {
  width: min(390px, 94vw);
  height: min(844px, calc(100vh - 84px));
  background: #05070a;
  border-radius: 46px;
  padding: 11px;
  position: relative;
  box-shadow:
    0 0 0 2px #232c38,
    0 0 0 6px #10151c,
    0 28px 70px rgba(0, 0, 0, .75);
}

.device-screen {
  width: 100%; height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
}

.device-notch {
  position: absolute;
  top: 9px; left: 50%; transform: translateX(-50%);
  width: 116px; height: 30px;
  background: #05070a;
  border-radius: 17px;
  z-index: 90;
  pointer-events: none;
}

.device-caption {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: #5b6673;
}

/* iOS-style status bar */
.status-bar {
  flex: 0 0 auto;
  height: 46px;
  padding: 0 26px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600;
  color: var(--text);
  background: transparent;
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 80;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.status-bar .glyphs { display: flex; align-items: center; gap: 5px; }
.status-bar svg { display: block; }

/* ══ The app itself ════════════════════════════════════════════════════════ */

.app { position: relative; flex: 1; min-height: 0; }
.app-map { position: absolute; inset: 0; }
/* display:none, not visibility — this is what actually stops Google rendering tiles. */
.app-map.hidden, .app-top.hidden, .app-sheet.hidden { display: none; }

/* Floating chrome over the map */
.app-top {
  position: absolute; top: 52px; left: 0; right: 0;
  padding: 0 14px;
  z-index: 30;
  display: flex; align-items: flex-start; gap: 8px;
  pointer-events: none;
}
.app-top > * { pointer-events: auto; }

.float-card {
  background: rgba(22, 27, 34, .94);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 13px;
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
}

.status-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 650; font-size: 13px;
  border-radius: 999px;
  padding: 9px 15px;
  background: rgba(22,27,34,.94);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
}
.status-chip.online  { color: var(--ok);  border-color: #1f4a2a; }
.status-chip.offline { color: var(--muted); }
.status-chip.busy    { color: var(--info); border-color: #1f3a5c; }
/* Fix quality, graded against arrival_radius_m: a position no better than the radius
   itself cannot honestly decide whether a stop was reached. */
.status-chip.warn    { color: var(--warn); border-color: #5c4415; }
.status-chip.bad     { color: var(--err);  border-color: #5c2320; }
/* The quality chip carries a number, not a label, so it wants the tabular figures and a
   tighter box than the shift chip beside it. */
#gps-chip { font-family: var(--mono); font-size: 12px; padding: 9px 12px; font-variant-numeric: tabular-nums; }
.status-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-chip.online .dot { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.map-btn {
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(22,27,34,.94);
  backdrop-filter: blur(12px);
  font-size: 16px;
}
.map-btn.on { border-color: var(--accent); color: var(--accent); }

/* Bottom sheet */
.app-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: var(--panel);
  border-radius: 22px 22px 0 0;
  border-top: 1px solid var(--line);
  padding: 8px 16px 26px;
  box-shadow: 0 -10px 40px rgba(0,0,0,.6);
  /* Must match the clamp in syncViewportPadding(): if the sheet may grow taller than the
     padding the map is told about, content gets placed underneath it. Overflow scrolls. */
  max-height: 62%;
  overflow-y: auto;
}
.sheet-handle {
  width: 38px; height: 4px; border-radius: 2px;
  background: #39424e; margin: 0 auto 14px;
}

/* Full-screen takeover, used for the ride offer */
.app-overlay {
  position: absolute; inset: 0;
  z-index: 60;
  background: linear-gradient(180deg, rgba(9,12,17,.97), rgba(9,12,17,.99));
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column;
  padding: 60px 18px 26px;
  animation: rise .18s ease-out;
}
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }

/* ── Navigation cue: the only thing the worker reads while walking ───────── */

.nav-cue {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}

/* The dial is fixed; only the needle inside it turns. A rotating circle gives the eye no
   reference — it looks identical at every angle — so the tick at 12 o'clock is what makes
   the angle readable at a glance. */
.nav-dial {
  position: relative;
  flex: 0 0 auto;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  background: #241f08;
  border: 1px solid #4d4310;
  border-radius: 50%;
}

/* "Straight ahead" — the mark the needle is read against. */
.nav-dial::before {
  content: '';
  position: absolute; top: 4px; left: 50%;
  width: 2px; height: 7px; margin-left: -1px;
  border-radius: 1px;
  background: #7a6b1e;
}

/* Rotated from JS to point at the next stop, relative to the way the worker is facing, so
   straight up means straight ahead. The path points up at 0deg and is notched at the tail,
   which is what stops it reading as a plain triangle — or a play button — once turned. */
.nav-arrow {
  width: 32px; height: 32px;
  fill: var(--accent);
  transition: transform .25s ease-out;
}

/* No compass and standing still: the needle is showing the last direction of travel, not
   where they are pointing now. Dimmed rather than hidden — the angle is still the best
   guess available, it just should not look authoritative. */
.nav-dial.no-heading .nav-arrow { fill: var(--muted); opacity: .5; }
.nav-dial.no-heading { border-color: var(--line); background: var(--panel); }

.nav-addr { font-size: 15px; font-weight: 600; margin-top: 2px; }

/* ── Clapperboard: the camera↔phone clock anchor (SPEC §3) ───────────────── */

/* Shown by being added to the DOM and hidden by being removed, deliberately — no display
   toggling, so the .screen/.active specificity trap in HANDOFF §5 cannot apply here. */
.clapper {
  align-items: center;
  gap: 14px;
  padding: 30px 18px 20px;
  overflow-y: auto;
  text-align: center;
}

.clapper-head h2 {
  margin: 10px 0 4px;
  font-size: 21px; font-weight: 700; letter-spacing: -.01em;
}
.clapper-head p {
  margin: 0; max-width: 30ch;
  font-size: 13px; line-height: 1.5; color: var(--muted);
}

/* White tile, always — an inverted QR is out of spec and many decoders refuse it. The
   padding is the quiet zone's backing; the canvas draws its own four modules on top. */
.clapper-qr {
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  line-height: 0;
  box-shadow: 0 6px 26px rgba(0, 0, 0, .55);
}
.clapper-canvas {
  display: block;
  /* The canvas is sized to whole device pixels per module; let it shrink on a short
     screen, but never let the browser resample it upwards into blur. */
  max-width: 100%; height: auto;
  image-rendering: pixelated;
}

/* The human-readable fallback, for when the QR will not decode off the photograph. */
.clapper-clock {
  font-family: var(--mono);
  font-size: 30px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: #fff;
}

.clapper-meta {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .02em;
  color: #5b6673;
  word-break: break-all;
}

.clapper-actions { width: 100%; margin-top: auto; padding-top: 12px; }
.clapper-actions .clapper-skip { margin-top: 8px; }

/* ── Centre-pin location picker ──────────────────────────────────────────── */

.pin-picker {
  position: absolute; inset: 0;
  z-index: 38;
  pointer-events: none;   /* the map underneath must stay draggable */
}

.pin-anchor { position: absolute; }

/* Ground marker: stays exactly on the point while the pin is lifted off it. */
.pin-shadow {
  position: absolute;
  left: 0; top: 0;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(13, 17, 23, .35);
  border: 2px solid var(--accent);
  box-sizing: border-box;
  transition: transform .18s ease, opacity .18s ease;
  opacity: 0;
  transform: scale(.4);
}

/* Pin body: bottom tip sits on the point. */
.pin-body {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -100%);
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.4);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
  line-height: 0;
}

/* Lifted: pin hops up, ground dot appears so the spot is never occluded. */
.pin-picker.lifted .pin-body { transform: translate(-50%, -100%) translateY(-14px); }
.pin-picker.lifted .pin-shadow { opacity: 1; transform: scale(1); }

.pin-hint {
  position: absolute;
  left: 50%; transform: translate(-50%, -100%);
  margin-top: -52px;
  background: rgba(13, 17, 23, .9);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 11.5px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px;
  white-space: nowrap;
  transition: opacity .15s;
}
.pin-picker.lifted .pin-hint { opacity: 0; }

/* ══ Screens & tab bar (passenger app shell) ═══════════════════════════════ */

/* Full-bleed screens stacked over the map. Only one is visible at a time; the map is
   display:none behind them, so it stops rendering entirely on the list screens. */
.screen {
  position: absolute;
  inset: 0 0 76px 0;
  z-index: 45;
  background: var(--bg);
  overflow-y: auto;
  padding: 58px 18px 18px;
  display: none;
}
.screen.active { display: block; }
.screen.no-tabbar { inset: 0; }

.screen h1 {
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 6px 0 20px;
}

.tabbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 76px;
  z-index: 55;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding-bottom: 12px;
}
.tabbar.hidden { display: none; }
.tabbar button {
  background: none; border: none; border-radius: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  color: var(--muted);
  font-size: 11.5px; font-weight: 600;
  padding: 0;
}
.tabbar button:hover:not(:disabled) { filter: none; color: var(--text); }
.tabbar button svg { width: 22px; height: 22px; }
.tabbar button.active { color: var(--text); }
.tabbar button.active svg { stroke-width: 2.4; }

/* ── Home: the two action cards ─────────────────────────────────────────── */

.action-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 12px; }
.action-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 12px 15px;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, transform .08s;
}
.action-card:hover { border-color: #3d4a5c; }
.action-card:active { transform: scale(.985); }
.action-card .art { font-size: 34px; line-height: 1; margin-bottom: 9px; }
.action-card .t { font-weight: 650; font-size: 15.5px; }
.action-card .s { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.action-card.soon { opacity: .72; }

/* ── The "Where to?" bar on Home ────────────────────────────────────────── */

.whereto {
  display: flex; align-items: center; gap: 11px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 12px 14px 15px;
  cursor: text;
  margin-bottom: 8px;
}
.whereto .q { font-size: 16px; opacity: .8; }
.whereto .label { flex: 1; font-weight: 650; font-size: 16.5px; }
.whereto .later {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 11px;
  font-size: 13px; font-weight: 600; color: var(--text);
}

/* ── Shared list rows (recents, rides, account) ─────────────────────────── */

.rowlist { margin: 0 -4px; }
.rowitem {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 4px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.rowitem:last-child { border-bottom: none; }
.rowitem:hover { background: rgba(255,255,255,.025); }
.rowitem .ic {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--panel-2); border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--muted);
}
.rowitem .ic svg { width: 19px; height: 19px; }
.rowitem .body { flex: 1; min-width: 0; }
.rowitem .t { font-size: 15px; }
.rowitem .s { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.rowitem .end { flex: 0 0 auto; color: var(--muted); font-size: 13px; }
.rowitem .chev { color: #4d5b6b; }

.section-head {
  font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  margin: 20px 0 4px;
}

.seg { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.seg button {
  background: none; border: none; border-radius: 0;
  padding: 9px 0 11px; font-size: 15px; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.seg button.active { color: var(--text); font-weight: 650; border-bottom-color: var(--ok); }

.empty { text-align: center; color: var(--muted); padding: 44px 20px; font-size: 13.5px; line-height: 1.6; }

/* ── Route screen: fixed header, scrolling results ─────────────────────── */

/* The whole point of this screen: the inputs are pinned to the top, so the suggestion
   list growing or shrinking can never move the field you are typing into.
   Note the `.active` in the display rule: a bare `.route-screen { display:flex }` would
   sit later in this file than `.screen { display:none }` at equal specificity and win,
   leaving the route screen painted on top of whatever you navigated to. */
.route-screen { flex-direction: column; padding: 0; }
.screen.route-screen.active { display: flex; }
.route-head {
  flex: 0 0 auto;
  padding: 54px 16px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.route-title {
  display: flex; align-items: center; justify-content: center;
  position: relative; margin-bottom: 16px;
}
.route-title .t { font-weight: 650; font-size: 16.5px; }
.route-title .x {
  position: absolute; left: 0;
  background: none; border: none; padding: 4px 8px;
  font-size: 19px; color: var(--text); border-radius: 8px;
}

.route-fields { display: flex; align-items: center; gap: 10px; }
.route-fields .stack { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.route-fields .side { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.route-fields .side button {
  background: none; border: none; padding: 6px;
  font-size: 17px; color: var(--muted); border-radius: 8px;
}
.route-fields .side button:hover { color: var(--text); background: var(--panel-2); }

.rfield {
  display: flex; align-items: center; gap: 11px;
  background: var(--panel-2);
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 0 8px 0 13px;
  transition: border-color .12s, background .12s;
}
.rfield.focused { border-color: var(--ok); background: var(--panel); }
.rfield .dot-pickup {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--info); border: 3px solid rgba(88,166,255,.28);
  box-sizing: content-box; flex: 0 0 auto;
}
.rfield .q { flex: 0 0 auto; font-size: 15px; opacity: .75; }
.rfield input {
  border: none; background: none; padding: 14px 0; border-radius: 0;
  font-size: 15.5px;
}
.rfield input:focus { outline: none; }
.rfield .pinbtn {
  flex: 0 0 auto; border: none; background: var(--panel);
  border-radius: 9px; padding: 7px 9px; font-size: 15px;
}
.rfield .pinbtn:hover { background: var(--line); }

.route-results { flex: 1; overflow-y: auto; padding: 4px 16px 18px; }
/* Inside the route screen the list is the page, not a floating dropdown. */
.route-results.app-suggestions {
  background: none; border: none; border-radius: 0; max-height: none; margin: 0;
}

/* Home indicator */
.home-bar {
  position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px; border-radius: 3px;
  background: rgba(230,237,243,.35);
  z-index: 70; pointer-events: none;
}

/* ══ Shared bits ═══════════════════════════════════════════════════════════ */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  white-space: nowrap;
}
.pill.ok   { color: var(--ok);   border-color: #1f4a2a; background: #12251a; }
.pill.warn { color: var(--warn); border-color: #4d3d16; background: #241d0e; }
.pill.err  { color: var(--err);  border-color: #5c2b2b; background: #2a1616; }
.pill.info { color: var(--info); border-color: #1f3a5c; background: #101d2e; }
.pill.accent { color: var(--accent); border-color: #4d4310; background: #241f08; }

.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
}
.card.selectable { cursor: pointer; }
.card.selectable:hover { border-color: #3d4a5c; }
.card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.card.flat { background: transparent; border: none; padding: 0; }

.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; min-width: 0; }

.kv { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.kv.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; font-weight: 700; }

.section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); margin: 0 0 8px;
}

.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.big-num { font-size: 27px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.huge-num { font-size: 38px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }

.addr { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; }
.addr .marker { flex: 0 0 auto; width: 16px; text-align: center; line-height: 1.4; }
.addr .label {
  font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
}

/* Address entry inside the app (not the harness) */
.addr-field {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 10px 4px 12px;
  margin-bottom: 8px;
  transition: border-color .12s;
}
.addr-field:focus-within { border-color: var(--accent); }
.addr-field .bullet { flex: 0 0 auto; font-size: 12px; line-height: 1; }
.addr-field input {
  border: none; background: transparent; padding: 11px 0;
  border-radius: 0; font-size: 14.5px;
}
.addr-field input:focus { outline: none; }
.addr-field button {
  flex: 0 0 auto; border: none; background: transparent;
  padding: 7px; font-size: 15px; border-radius: 9px;
}
.addr-field button:hover { background: var(--line); }

.app-suggestions:empty { display: none; }
.app-suggestions {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
  max-height: 260px;
  overflow-y: auto;
}
.app-suggestions .sug {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.app-suggestions .sug:last-child { border-bottom: none; }
.app-suggestions .sug:hover { background: #232c37; }
.app-suggestions .sug .ico { flex: 0 0 auto; font-size: 15px; line-height: 1.25; opacity: .75; }
.app-suggestions .sug .main { font-size: 14px; }
.app-suggestions .sug .sec { font-size: 12px; color: var(--muted); margin-top: 2px; }
.app-suggestions .sug.note { cursor: default; color: var(--muted); font-size: 12.5px; }
.app-suggestions .sug.note:hover { background: none; }
.app-suggestions .sug.err { color: #ffb4ab; }
.app-suggestions .sug .body { flex: 1; min-width: 0; }
.app-suggestions .sug .end,
.rowitem .end { flex: 0 0 auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
.end .tag {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: #6b7681; border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px;
}

.avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, #2f3b4a, #1c232c);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 17px; font-weight: 650; color: var(--muted);
  flex: 0 0 auto;
}

.plate {
  font-family: var(--mono); font-weight: 700; letter-spacing: .06em;
  background: #f2f2f2; color: #111; border-radius: 5px;
  padding: 3px 8px; font-size: 12.5px;
  border: 1px solid #b9b9b9;
}

.spinner {
  width: 34px; height: 34px; margin: 10px auto;
  border: 3px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.progress { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); transition: width .2s linear; }
.progress.urgent > i { background: var(--err); }

.stars { display: flex; gap: 8px; font-size: 32px; line-height: 1; justify-content: center; }
.stars span { cursor: pointer; color: var(--line); transition: color .1s, transform .1s; }
.stars span.on { color: var(--accent); }
.stars span:active { transform: scale(1.18); }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: #1c232c; border: 1px solid var(--line);
  padding: 11px 17px; border-radius: 11px; z-index: 999;
  box-shadow: 0 10px 34px rgba(0,0,0,.6); max-width: 88vw;
}
.toast.err { border-color: #5c2b2b; color: #ffb4ab; }

/* ══ Test harness — deliberately does not look like the app ════════════════ */

.harness {
  width: 350px; flex: 0 0 350px;
  background: #0a0d12;
  border-left: 1px solid #1d2631;
  overflow-y: auto;
  padding: 0 0 24px;
  font-size: 13px;
}
.harness.collapsed { display: none; }

.harness-head {
  position: sticky; top: 0; z-index: 5;
  background: #0a0d12;
  border-bottom: 1px solid #1d2631;
  padding: 14px 16px;
}
.harness-head h2 {
  margin: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: #6fb3d2; display: flex; align-items: center; gap: 8px;
}
.harness-head p { margin: 6px 0 0; font-size: 11.5px; color: #5b6673; line-height: 1.5; }

.harness-group { padding: 14px 16px; border-bottom: 1px solid #151d26; }
.harness-group > h3 {
  margin: 0 0 11px; font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: #4d5b6b;
}

.harness .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.harness .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.harness button { padding: 8px 10px; font-size: 12px; border-radius: 8px; }
.harness input[type=range] { width: 100%; padding: 0; background: transparent; border: none; }
.harness input[type=number] { padding: 6px 8px; font-size: 12px; }
.harness label.field > span { color: #4d5b6b; }

.suggestions:empty { display: none; }
.suggestions {
  border: 1px solid #1d2631;
  border-radius: 8px;
  background: #070a0e;
  overflow: hidden;
  max-height: 230px;
  overflow-y: auto;
}
.suggestions .sug {
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid #121924;
  line-height: 1.35;
}
.suggestions .sug:last-child { border-bottom: none; }
.suggestions .sug:hover { background: #101722; }
.suggestions .sug .main { font-size: 12.5px; color: var(--text); }
.suggestions .sug .sec { font-size: 11px; color: #5b6673; margin-top: 2px; }
.suggestions .sug.note { cursor: default; color: #5b6673; font-size: 11.5px; }
.suggestions .sug.note:hover { background: none; }
.suggestions .sug.err { color: #ffb4ab; }
.suggestions .sug { display: flex; align-items: flex-start; gap: 8px; }
.suggestions .sug .body { flex: 1; min-width: 0; }
.suggestions .sug .ico { flex: 0 0 auto; opacity: .7; }
.suggestions .sug .end { flex: 0 0 auto; color: #5b6673; font-size: 11px; white-space: nowrap; }

.harness-toggle {
  position: fixed; top: 14px; right: 14px; z-index: 200;
  background: #10151c; border: 1px solid #1d2631; color: #6fb3d2;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 8px;
}

.switch { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; gap: 10px; }
.switch span { color: var(--muted); font-size: 12.5px; }
.switch input { width: auto; }

.readout {
  font-family: var(--mono); font-size: 11px; color: #6b7681;
  background: #070a0e; border: 1px solid #151d26; border-radius: 7px;
  padding: 8px 9px; line-height: 1.6; word-break: break-all;
}

.evlog {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.65;
  max-height: 210px; overflow-y: auto;
  background: #070a0e; border: 1px solid #151d26; border-radius: 7px; padding: 8px;
}
.evlog div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evlog .t { color: #3f4b58; }
.evlog .in  { color: #58a6ff; }
.evlog .out { color: #d29922; }
.evlog .st  { color: #3fb950; }
.evlog .er  { color: #f85149; }

@media (max-width: 900px) {
  .stage { flex-direction: column; }
  .harness { width: 100%; flex: 0 0 auto; border-left: none; border-top: 1px solid #1d2631; }
  .device { height: min(720px, 74vh); }
}

/* ── On an actual phone ──────────────────────────────────────────────────────
   The device mock is a drawing of a phone. On a real one it is a phone inside a
   phone: a fake notch under the real notch, a fake status bar under the real one,
   and the harness eating half the screen. Below this width the app simply *is* the
   page, edge to edge, and the harness is out of the way until asked for.

   `env(safe-area-inset-*)` needs `viewport-fit=cover` on the viewport meta tag or it
   resolves to 0 and the Dynamic Island sits on top of the status chip. */
@media (max-width: 700px) {
  .stage { flex-direction: column; height: 100dvh; }

  .device-col { padding: 0; display: block; flex: 1; min-height: 0; overflow: hidden; }
  /* Explicit width, not auto: .device-frame is a column flex box that centres its child,
     so it collapsed to zero and took .device's `width: 100%` down with it. */
  .device-frame { width: 100%; height: 100%; }
  .device {
    width: 100%; height: 100%;
    padding: 0; border-radius: 0; box-shadow: none;
  }
  .device-screen { border-radius: 0; }

  /* The real phone already draws all three of these. */
  .device-notch,
  .device-caption,
  .status-bar,
  .home-bar { display: none; }

  /* 44 px is Apple's minimum comfortable target. The 40 px the console uses is fine with
     a mouse and not with a thumb, in a coat, holding a bundle of leaflets. */
  .app-sheet button { min-height: 44px; }

  .app-top { padding-top: calc(12px + env(safe-area-inset-top)); }
  .app-sheet {
    max-height: 70%;
    padding-bottom: calc(26px + env(safe-area-inset-bottom));
  }

  /* Collapsed by default — the harness is a test rig, not part of the app. The toggle
     stays reachable so a simulated walk is still one tap away. */
  .harness { max-height: 45dvh; }
  .harness-toggle {
    top: auto;
    bottom: calc(10px + env(safe-area-inset-bottom));
    right: 10px;
  }
}

/* ══ Operator console ══════════════════════════════════════════════════════ */

.console { display: flex; flex-direction: column; height: 100%; background: var(--bg); }

.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--panel);
  border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.topbar h1 { font-size: 14px; margin: 0; font-weight: 650; }
.topbar .spacer { flex: 1; }

.console-body { flex: 1; display: grid; grid-template-columns: 330px 1fr 320px; min-height: 0; }
.console-col { border-right: 1px solid var(--line); overflow-y: auto; padding: 12px; min-height: 0; }
.console-col:last-child { border-right: none; border-left: 1px solid var(--line); }
.console-map { position: relative; min-height: 0; }

.statusbar {
  display: flex; align-items: center; gap: 18px;
  padding: 7px 14px; background: var(--panel);
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted); flex: 0 0 auto;
}

.timeline { font-family: var(--mono); font-size: 11px; line-height: 1.75; }
.timeline .t { color: var(--muted); }
.timeline .s { color: var(--accent); }
.timeline .a { color: var(--info); }

.alert-item { border-left: 3px solid var(--warn); padding-left: 9px; margin-bottom: 9px; }
.alert-item.critical { border-left-color: var(--err); }
.alert-item .when { font-size: 11px; color: var(--muted); }

@media (max-width: 1100px) {
  .console-body { grid-template-columns: 1fr; grid-template-rows: auto 340px auto; }
  .console-col:last-child { border-left: none; border-top: 1px solid var(--line); }
}

/* ══ Google marker DOM (vector / AdvancedMarkerElement path) ═══════════════ */

/* AdvancedMarkerElement anchors at bottom-centre of the content box, so the box must
   contain *only* the graphic, positioned so the right part of it lands on the point. */
.gm-marker { position: relative; line-height: 0; }

/* A pin's tip is its bottom edge — that already coincides with the anchor. */
.gm-pin { line-height: 0; }

/* Car and device dot must be centred on the point, so push down by half their height. */
.gm-marker.is-car,
.gm-marker.is-dot { transform: translateY(50%); }
.gm-dot { line-height: 0; }
.gm-car { transition: transform .25s ease-out; line-height: 0; }

/* Absolute, so the label adds no height and cannot displace the anchor. */
.gm-marker-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 3px;
  font: 600 11px/1.3 system-ui, sans-serif;
  background: rgba(13,17,23,.88); color: #e6edf3;
  padding: 2px 6px; border-radius: 5px; white-space: nowrap;
  border: 1px solid #2b3440;
}

/* ══ Launcher ══════════════════════════════════════════════════════════════ */

.launcher { max-width: 940px; margin: 0 auto; padding: 44px 22px; }
.launcher h1 { font-size: 26px; margin: 0 0 6px; }
.launcher .lead { color: var(--muted); margin: 0 0 30px; line-height: 1.6; }
.launch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.launch-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
  transition: border-color .12s, transform .12s;
}
.launch-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.launch-card .icon { font-size: 30px; }
.launch-card h2 { font-size: 15px; margin: 9px 0 5px; }
.launch-card p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }

.steps { counter-reset: s; list-style: none; padding: 0; margin: 26px 0 0; }
.steps li {
  counter-increment: s; position: relative; padding-left: 34px;
  margin-bottom: 11px; color: var(--muted); line-height: 1.6;
}
.steps li::before {
  content: counter(s);
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 11px; color: var(--text);
}
.steps strong { color: var(--text); font-weight: 600; }

code {
  font-family: var(--mono); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 5px; font-size: 12px;
}

.banner {
  background: #241d0e; border: 1px solid #4d3d16; color: #e3c168;
  border-radius: 10px; padding: 11px 13px; margin-bottom: 18px;
  font-size: 12.5px; line-height: 1.55;
}
.banner.ok { background: #12251a; border-color: #1f4a2a; color: #7ee094; }

/* The stop is in range but the fix is too poor to close it. Amber, because it is neither
   working nor broken — the worker is in the right place and the phone is not sure yet. */
#nav-note.waiting { color: var(--warn); }