:root {
  --ink: #16202b;
  --ink-dim: #5b6b7a;
  --ink-faint: #8d9aa7;
  --card: #ffffff;
  --card-2: #f4f6f8;
  --line: #e2e7ec;
  --brand: #1f7ae0;
  --brand-ink: #ffffff;
  --from: #1a9e57;
  --to: #d9432f;
  --accent: #e08a1f;
  --good: #1a9e57;
  --warn: #e08a1f;
  --crit: #d9432f;
  --teal: #1f8fa3;
  --shadow: 0 1px 2px rgba(16, 28, 40, .10), 0 8px 24px -8px rgba(16, 28, 40, .22);
  --radius: 12px;
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8ecf0; --ink-dim: #9fb0bf; --ink-faint: #7c8b99;
    --card: #18212b; --card-2: #212c37; --line: #2c3844;
    --brand: #4ea0f5; --brand-ink: #0b1520;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px -10px rgba(0,0,0,.7);
  }
}

* { box-sizing: border-box; }
/* `.sheet { display: flex }` outranks the user-agent [hidden] rule, so the
   results panel was open before anything had been asked for. */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  color: var(--ink);
  font: 15px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#map { position: absolute; inset: 0; }

svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- floating cards ---------- */
.card {
  position: absolute; z-index: 10;
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.search { top: 12px; left: 12px; width: 380px; max-width: calc(100vw - 24px); padding: 10px 12px 12px; }
.search-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; }
.search-head strong { flex: 1; font-size: 16px; font-weight: 600; }

.icon-btn {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border: 0; border-radius: 9px; background: var(--card-2); color: var(--ink);
  cursor: pointer; font-size: 15px; padding: 0;
}
.icon-btn:hover { background: var(--line); }
.icon-btn.ghost { background: transparent; color: var(--ink-dim); }
.icon-btn.ghost:hover { background: var(--card-2); color: var(--ink); }
.icon-btn:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 1px;
}

.field {
  display: flex; align-items: center; gap: 9px;
  background: var(--card-2); border-radius: 9px; padding: 0 4px 0 11px;
  margin-bottom: 7px;
}
.field input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
  font: inherit; padding: 10px 0;
}
.field input::placeholder { color: var(--ink-faint); }
.field .here { width: 30px; height: 30px; font-size: 17px; }
.dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.dot.from { background: var(--from); box-shadow: 0 0 0 3px color-mix(in srgb, var(--from) 22%, transparent); }
.dot.to { background: var(--to); box-shadow: 0 0 0 3px color-mix(in srgb, var(--to) 22%, transparent); }

.suggest {
  list-style: none; margin: 2px 0 8px; padding: 0;
  max-height: 260px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 9px;
}
.suggest li { padding: 9px 11px; cursor: pointer; display: flex; gap: 10px; align-items: baseline; }
.suggest li + li { border-top: 1px solid var(--line); }
.suggest li:hover, .suggest li[aria-selected="true"] { background: var(--card-2); }
.suggest .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest .area { color: var(--ink-faint); font-size: 12.5px; }
.suggest .far { color: var(--ink-faint); font-size: 12.5px; font-family: var(--mono); }
.suggest .kind { color: var(--ink-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.suggest li.notice { color: var(--brand); font-weight: 500; }

.search-foot { display: flex; flex-wrap: wrap; gap: 7px; }
.search-foot select { min-width: 120px; }
select {
  flex: 1; min-width: 0; padding: 8px 9px; font: inherit; font-size: 13.5px;
  color: var(--ink); background: var(--card-2); border: 1px solid transparent; border-radius: 9px;
}
.go {
  flex: none; padding: 9px 16px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--brand); color: var(--brand-ink); font: inherit; font-weight: 600;
}
.go:hover { filter: brightness(1.06); }
.go[disabled] { opacity: .5; cursor: default; }

/* ---------- results sheet ---------- */
.sheet {
  top: 12px; left: 404px; width: 360px; max-height: calc(100vh - 24px);
  display: flex; flex-direction: column;
}
.sheet-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 8px 10px 14px; border-bottom: 1px solid var(--line);
}
.sheet-head strong { flex: 1; font-size: 15px; }
.sheet-body { padding: 12px 14px 14px; overflow-y: auto; font-size: 14px; }

.sheet-body h4 { margin: 14px 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); font-weight: 600; }
.sheet-body h4:first-child { margin-top: 0; }
.sheet-body .big { font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.sheet-body .sub { color: var(--ink-dim); font-size: 13.5px; }
.sheet-body table { width: 100%; border-collapse: collapse; }
.sheet-body td { padding: 5px 0; border-bottom: 1px solid var(--line); }
.sheet-body td:last-child { text-align: right; font-family: var(--mono); white-space: nowrap; padding-left: 10px; }
.sheet-body .err { color: var(--crit); }
.sheet-body .log { font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow-y: auto; }
.sheet-body .row { display: flex; gap: 7px; flex-wrap: wrap; margin: 8px 0 12px; }
.sheet-body .row button {
  flex: 1 1 auto; padding: 8px 11px; font: inherit; font-size: 13px; cursor: pointer;
  background: var(--card-2); color: var(--ink); border: 1px solid var(--line); border-radius: 9px;
}
.sheet-body .row button:hover { border-color: var(--ink-faint); }
.sheet-body .row button.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.sheet-body input[type="text"], .sheet-body input[type="email"], .sheet-body input[type="password"], .sheet-body input[type="number"] {
  width: 100%; padding: 9px 10px; margin: 4px 0 9px; font: inherit;
  color: var(--ink); background: var(--card-2); border: 1px solid var(--line); border-radius: 9px;
}
.sheet-body label { display: block; font-size: 12.5px; color: var(--ink-dim); }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 0; }
.steps .man { color: var(--ink-faint); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; min-width: 74px; }
.steps .st { flex: 1; font-weight: 500; }
.steps .d { font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); }

.bar { height: 6px; background: var(--card-2); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.bar > i { display: block; height: 100%; background: var(--teal); }

/* ---------- rail ---------- */
.rail { position: absolute; top: 12px; right: 12px; z-index: 10; display: grid; gap: 8px; }
.fab {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow);
}
.fab:hover { background: var(--card-2); }
.fab.on { background: var(--brand); color: var(--brand-ink); }
.fab.account { font-weight: 700; font-size: 15px; }
.fab.account.in { background: var(--from); color: #fff; }

.fab.report {
  position: absolute; right: 16px; bottom: 84px; z-index: 10;
  width: 60px; height: 60px; background: var(--accent); color: #fff;
}
.fab.report svg { width: 27px; height: 27px; stroke-width: 2; }
.fab.report.on { background: var(--crit); }

/* ---------- report sheet ---------- */
.report-sheet {
  position: absolute; right: 16px; bottom: 156px; z-index: 11;
  width: 320px; max-width: calc(100vw - 32px);
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 12px 14px 14px;
}
.report-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.report-head strong { flex: 1; font-size: 15px; }
.report-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.report-grid button {
  display: grid; gap: 5px; justify-items: center; padding: 9px 4px;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  background: var(--card); color: var(--ink); font: inherit; font-size: 10.5px; line-height: 1.15;
  text-align: center;
}
.report-grid button:hover { background: var(--card-2); }
.report-grid button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.report-grid svg { width: 23px; height: 23px; stroke-width: 1.7; }
.report-hint { margin: 11px 0 0; font-size: 12.5px; color: var(--ink-faint); }

/* ---------- chrome ---------- */
.toast {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 20; padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: var(--card); font-size: 13.5px; box-shadow: var(--shadow);
  max-width: min(560px, calc(100vw - 32px));
}
.legend {
  position: absolute; left: 12px; bottom: 26px; z-index: 9;
  background: var(--card); border-radius: 9px; box-shadow: var(--shadow);
  padding: 8px 11px; font-size: 12px; color: var(--ink-dim); display: grid; gap: 4px;
}
.legend:empty { display: none; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.attrib {
  position: absolute; right: 8px; bottom: 4px; z-index: 9;
  font-size: 10.5px; color: var(--ink-faint);
  background: color-mix(in srgb, var(--card) 78%, transparent); padding: 1px 6px; border-radius: 4px;
}

.pin { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--card); box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: pointer; }
.pin.from { background: var(--from); }
.pin.to { background: var(--to); }
.pin.rep { background: var(--accent); }
.pin.cp { background: var(--teal); }
.pin.node { width: 10px; height: 10px; border-width: 2px; background: var(--brand); }

.maplibregl-popup-content {
  background: var(--card); color: var(--ink); border-radius: 9px;
  font: 13px/1.45 ui-sans-serif, system-ui, sans-serif; padding: 9px 12px; box-shadow: var(--shadow);
}
.maplibregl-popup-tip { border-top-color: var(--card) !important; border-bottom-color: var(--card) !important; }
.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-attrib { display: none !important; }

/* Narrow: the search card owns the top, so the rail moves out from under it
   and lies along the bottom where a thumb is anyway. */
@media (max-width: 820px) {
  .search { width: calc(100vw - 24px); }
  .search-foot .go { flex: 1 1 100%; }

  .rail {
    top: auto; right: auto;
    left: 12px; bottom: 16px;
    grid-auto-flow: column; gap: 10px;
  }
  .fab { width: 46px; height: 46px; }

  .fab.report { right: 12px; bottom: 16px; width: 56px; height: 56px; }
  .report-sheet { right: 12px; left: 12px; width: auto; bottom: 82px; }

  .sheet {
    left: 12px; right: 12px; top: auto; bottom: 82px; width: auto;
    max-height: min(52vh, calc(100vh - 320px));
  }
  .legend { bottom: 82px; left: auto; right: 12px; }
  .attrib { bottom: 68px; }
}

/* --------------------------------------------------------------------------
   ETA strip

   Anchored bottom-centre, clear of the report button on the right. It stays up
   while the results sheet is closed, because arrival time is the one number a
   driver looks at without asking for it.
   -------------------------------------------------------------------------- */
.eta {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 5; display: flex; align-items: center; gap: 18px;
  padding: 10px 18px; border-radius: 14px;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow);
  border-left: 5px solid var(--good);
  font-variant-numeric: tabular-nums;
}
.eta.slow { border-left-color: var(--warn); }
.eta.heavy { border-left-color: #e8791f; }
.eta.jam { border-left-color: var(--crit); }
.eta-main { display: flex; flex-direction: column; line-height: 1.15; }
.eta-main b { font-size: 19px; }
.eta-main span { font-size: 11px; color: var(--ink-dim); }
.eta-delay {
  display: flex; align-items: center; gap: 6px;
  padding-left: 16px; border-left: 1px solid var(--line);
  font-size: 12px; color: var(--ink-dim);
}
.eta-delay i { width: 9px; height: 9px; border-radius: 50%; }
.eta-delay.clear { color: var(--good); }

/* On a wide screen the search card and the results sheet own the left 764px,
   and centring on the viewport puts the arrival time behind them. Centre it on
   the map instead — the part the driver is actually looking at. */
@media (min-width: 821px) {
  .eta {
    left: 776px; right: 88px; transform: none;
    width: max-content; margin-inline: auto;
  }
}

/* Narrow: the sheet becomes a bottom panel and there is no room for both. The
   sheet already leads with the same arrival time, so the strip yields to it and
   reappears the moment the sheet is closed — which is the case it exists for. */
@media (max-width: 820px) {
  .eta { bottom: 74px; gap: 12px; padding: 8px 14px; }
  .eta-main b { font-size: 17px; }
  body:has(.sheet:not([hidden])) .eta { display: none; }
}

/* Alternatives: one row of pickable routes, chosen one filled. */
.alts { display: flex; gap: 8px; margin: 6px 0 10px; }
.alt {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink);
}
.alt:hover { border-color: var(--ink-faint); }
.alt.on {
  border-color: var(--brand); background: var(--card-2);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.alt-t { font-size: 15px; font-weight: 600; }
.alt-d { font-size: 11px; color: var(--ink-dim); display: flex; align-items: center; gap: 4px; }
.alt-d i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.alt .rel { font-size: 11px; color: var(--ink-faint); }

/* A convoy member who shares position: an arrow that points where they go. */
.driver { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.driver svg {
  width: 26px; height: 26px; transform: rotate(var(--rot, 0deg));
  fill: var(--brand); stroke: var(--card); stroke-width: 1.5;
  filter: drop-shadow(0 2px 4px rgba(16, 26, 38, .35));
}
.driver span {
  font-size: 10px; font-weight: 600; color: var(--ink);
  background: var(--card); padding: 1px 6px; border-radius: 8px;
  box-shadow: var(--shadow); white-space: nowrap;
}

/* A legend row with no swatch is a caption, not a key. */
.legend i[style*="transparent"] { box-shadow: none; }

/* A legend swatch reused inside sheet tables. */
.swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 7px; vertical-align: -1px;
}

/* --------------------------------------------------------------------------
   Turn-by-turn

   A windscreen, not a panel: while navigating the map is the whole screen and
   these sit at its edges. Everything else in the console hides — `body.navigating`
   is what does it, so the rule lives in one place instead of on every panel.
   -------------------------------------------------------------------------- */
body.navigating .search,
body.navigating .sheet,
body.navigating .rail,
body.navigating .fab.report,
body.navigating .legend,
body.navigating .eta { display: none !important; }

.nav { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.nav > * { pointer-events: auto; }

.nav-card {
  position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 14px 14px 16px; border-radius: var(--radius);
  background: var(--card); color: var(--ink); box-shadow: var(--shadow);
  border-left: 6px solid var(--brand);
}
.nav-arrow { width: 46px; height: 46px; flex: none; fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-text { flex: 1; min-width: 0; }
.nav-dist { font-size: 30px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.nav-street { font-size: 15px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-turn { font-size: 12px; color: var(--ink-dim); margin-top: 1px; }

/* Lane guidance sits directly under the instruction, the way it does on a
   gantry: you read the turn, then which lane takes you through it. */
.nav-lanes {
  position: absolute; top: 104px; left: 12px; right: 12px;
  display: flex; gap: 4px; justify-content: center;
  padding: 7px 9px; border-radius: 10px;
  background: var(--card); box-shadow: var(--shadow);
}
.lane {
  display: flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; border-radius: 7px; background: var(--card-2);
}
.lane svg { width: 24px; height: 24px; fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lane.on { background: var(--brand); }
.lane.on svg { stroke: var(--brand-ink); }

/* What is on the road ahead, one chip per kind. */
.nav-alerts {
  position: absolute; top: 104px; right: 12px;
  display: grid; gap: 6px; justify-items: end;
}
.nav-lanes:not([hidden]) ~ .nav-alerts { top: 156px; }
.alert {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 7px; border-radius: 999px;
  background: var(--card); box-shadow: var(--shadow);
  border-left: 4px solid var(--c); font-size: 12px;
}
.alert svg { width: 17px; height: 17px; fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.alert b { font-variant-numeric: tabular-nums; }
.alert span { color: var(--ink-dim); }

.nav-foot {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.nav-spacer { flex: 1; }

.speedo {
  display: flex; align-items: baseline; gap: 5px;
  padding: 8px 16px; border-radius: 14px;
  background: var(--card); box-shadow: var(--shadow);
  font-variant-numeric: tabular-nums;
}
.speedo b { font-size: 30px; line-height: 1; }
.speedo span { font-size: 11px; color: var(--ink-dim); }
/* Over the limit: the number itself goes red, rather than a separate warning
   that has to be noticed on top of reading the speed. */
.speedo.over { background: var(--crit); }
.speedo.over b, .speedo.over span { color: #fff; }

/* The limit as the sign itself — a driver recognises the shape before the
   number, and it is the same shape everywhere this app will ship. */
.limit {
  position: relative; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: #fff; border: 6px solid #d8352a;
  box-shadow: var(--shadow);
}
.limit b { font-size: 19px; font-weight: 700; color: #16202b; font-variant-numeric: tabular-nums; }
.limit-next {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 10px; padding: 1px 6px; border-radius: 7px;
  background: var(--ink); color: var(--card);
}

.nav-btn {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow);
  font-size: 13px; font-weight: 600;
}
.nav-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-btn svg .cross { display: none; }
.nav-btn.off { color: var(--ink-faint); }
.nav-btn.off svg .wave { display: none; }
.nav-btn.off svg .cross { display: inline; }

/* The vehicle. Same arrow as a convoy member, in the brand colour rather than
   theirs, because the one you are is not one of the ones you are watching. */
.me svg {
  width: 30px; height: 30px; transform: rotate(var(--rot, 0deg));
  fill: var(--brand); stroke: #fff; stroke-width: 1.4;
  filter: drop-shadow(0 2px 5px rgba(16, 26, 38, .45));
}

/* Says out loud that the position is generated, so a screenshot of a demo can
   never be mistaken for a screenshot of a drive. */
.nav.simulated .nav-card::after {
  content: 'simulatsioon';
  position: absolute; top: -7px; right: 12px;
  font-size: 10px; padding: 1px 7px; border-radius: 7px;
  background: var(--accent); color: #fff;
}

@media (max-width: 820px) {
  .nav-dist { font-size: 26px; }
  .nav-arrow { width: 38px; height: 38px; }
  .nav-alerts { top: auto; bottom: 74px; right: 12px; }
  .nav-lanes:not([hidden]) ~ .nav-alerts { top: auto; }
}

/* The one action that changes what the screen is for. */
.go-drive { width: 100%; }

/* --------------------------------------------------------------------------
   Driving: the road you are on, and what is on it
   -------------------------------------------------------------------------- */

.nav-road {
  position: absolute; left: 12px; bottom: 74px;
  padding: 5px 12px; border-radius: 9px;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow);
  font-size: 14px; font-weight: 600; max-width: 55vw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-road:empty { display: none; }

/* Traffic control ahead.
   Bigger than the first attempt, and the thing itself is named rather than
   abbreviated to a distance: at 90 km/h a chip you have to squint at is a chip
   you do not read. The nearest one is drawn larger still. */
.nav-alerts { gap: 7px; }
.alert {
  gap: 9px; padding: 7px 13px 7px 9px; font-size: 14px;
  border-left-width: 5px;
}
.alert svg { width: 21px; height: 21px; stroke-width: 2.2; }
.alert-what { color: var(--ink); font-weight: 600; }
.alert-far { color: var(--ink-dim); font-variant-numeric: tabular-nums; font-weight: 500; }
.alert.near {
  font-size: 16px; padding: 9px 15px 9px 11px;
  box-shadow: 0 0 0 2px var(--c), var(--shadow);
}
.alert.near svg { width: 25px; height: 25px; }

/* A report from another driver, with the two answers only they can give. */
.alert-card {
  position: absolute; left: 12px; right: 12px; top: 104px;
  border-radius: var(--radius); overflow: hidden;
  background: var(--card); box-shadow: var(--shadow);
  border-left: 6px solid var(--warn);
}
.nav-lanes:not([hidden]) ~ .alert-card { top: 156px; }
.alert-card[data-severity="2"] { border-left-color: #e8791f; }
.alert-card[data-severity="3"] { border-left-color: var(--crit); }
.alert-head {
  display: flex; align-items: center; gap: 11px; padding: 11px 8px 11px 13px;
}
.alert-head svg {
  width: 26px; height: 26px; flex: none; fill: none;
  stroke: var(--warn); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.alert-card[data-severity="3"] .alert-head svg { stroke: var(--crit); }
.alert-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.alert-head strong { font-size: 16px; }
.alert-head span { font-size: 12px; color: var(--ink-dim); }
.alert-head b { font-size: 17px; font-variant-numeric: tabular-nums; }
.nav-btn.ghost { width: 32px; height: 32px; background: transparent; box-shadow: none; }

.alert-ask {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-top: 1px solid var(--line); background: var(--card-2);
}
.alert-ask span { flex: 1; font-size: 13px; color: var(--ink-dim); }
.alert-ask button {
  padding: 8px 16px; border: 0; border-radius: 9px; cursor: pointer;
  font-size: 14px; font-weight: 600;
}
#alert-yes { background: var(--good); color: #fff; }
#alert-no { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

@media (max-width: 820px) {
  .nav-road { bottom: 128px; }
}

/* What the map says about a place you tapped. */
.pop-table { width: 100%; margin: 8px 0 4px; border-collapse: collapse; font-size: 12px; }
.pop-table td { padding: 3px 0; }
.pop-table td:last-child { text-align: right; }
.pop-controls { display: grid; gap: 4px; margin-top: 6px; }
.pop-controls span {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
  padding: 3px 8px; border-radius: 7px; background: var(--card-2);
  border-left: 3px solid var(--c);
}
.pop-controls svg {
  width: 15px; height: 15px; flex: none; fill: none;
  stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.pop-controls i { margin-left: auto; font-style: normal; color: var(--ink-dim); }
.pop-actions { display: flex; gap: 6px; margin-top: 9px; }
.pop-actions .pop { flex: 1; }

/* --------------------------------------------------------------------------
   Account, sign-in and feedback
   -------------------------------------------------------------------------- */

.me-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.me-avatar {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none;
  border-radius: 50%; background: var(--brand); color: var(--brand-ink);
  font-size: 21px; font-weight: 700;
}
.me-who { display: flex; flex-direction: column; min-width: 0; }
.me-who strong { font-size: 17px; }

.me-level { margin-bottom: 14px; }
.me-level-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.bar { height: 7px; border-radius: 4px; background: var(--card-2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--brand); }

.switch { display: flex; align-items: center; gap: 9px; margin: 8px 0 2px; cursor: pointer; }
.switch input { width: 17px; height: 17px; accent-color: var(--brand); }

/* Sign-in. One primary action, one quiet alternative, and Google's own button
   above them because it is the one most people will use. */
.auth { display: grid; gap: 11px; }
.auth label { display: grid; gap: 5px; font-size: 12px; color: var(--ink-dim); }
.auth input {
  padding: 11px 12px; border-radius: 10px; font-size: 15px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--ink);
}
.auth input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
button.primary {
  padding: 12px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--brand); color: var(--brand-ink); font-size: 15px; font-weight: 600;
}
button.link {
  padding: 6px; border: 0; background: transparent; cursor: pointer;
  color: var(--brand); font-size: 13px;
}
.or {
  display: flex; align-items: center; gap: 11px; margin: 14px 0;
  color: var(--ink-faint); font-size: 12px;
}
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
#google-slot { display: flex; justify-content: center; min-height: 0; }
.notice {
  margin: 0 0 12px; padding: 9px 11px; border-radius: 9px;
  background: var(--card-2); border-left: 3px solid var(--accent); font-size: 13px;
}
.sub.tiny { font-size: 11px; }

/* A three-way choice that is one control, not three buttons. */
.seg { display: flex; gap: 0; margin-bottom: 12px; border-radius: 10px; overflow: hidden; }
.seg button {
  flex: 1; padding: 9px 6px; border: 0; cursor: pointer; font-size: 13px;
  background: var(--card-2); color: var(--ink-dim);
  box-shadow: inset 0 0 0 1px var(--line);
}
.seg button.on { background: var(--brand); color: var(--brand-ink); box-shadow: none; }
textarea {
  width: 100%; padding: 11px 12px; border-radius: 10px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--ink); resize: vertical;
}
p.ok { color: var(--good); font-size: 13px; }

/* The feedback button: present, and not competing with reporting a hazard. */
.fab.tiny {
  position: absolute; right: 18px; bottom: 86px; z-index: 9;
  width: 40px; height: 40px;
}
@media (max-width: 820px) {
  .fab.tiny { right: 20px; bottom: 84px; width: 36px; height: 36px; }
}

/* Reporting from the driver's seat. Sits above the speed row on the right,
   clear of the alert chips, which move up when it opens. */
.nav-report {
  position: absolute; right: 12px; bottom: 66px; z-index: 2;
  display: grid; place-items: center; width: 52px; height: 52px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--accent); color: #fff; box-shadow: var(--shadow);
}
.nav-report svg {
  width: 26px; height: 26px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.nav-report.on { background: var(--crit); }

.nav-report-grid {
  position: absolute; right: 12px; bottom: 126px; z-index: 3;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px;
  padding: 9px; border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow); width: min(300px, 72vw);
}
.nav-report-grid button {
  display: grid; justify-items: center; gap: 5px; padding: 11px 6px;
  border: 0; border-radius: 10px; cursor: pointer;
  background: var(--card-2); color: var(--ink); font-size: 12px; line-height: 1.15;
  text-align: center;
}
.nav-report-grid svg {
  width: 25px; height: 25px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.nav-report-grid button:active { background: var(--accent); color: #fff; }

/* Nothing may sit on top of anything. The alert chips step aside for the
   report button, and both stay clear of the attribution line. */
.nav-alerts { right: 76px; }
@media (max-width: 820px) {
  .nav-report { width: 46px; height: 46px; bottom: 122px; }
  .nav-report-grid { bottom: 178px; }
  .nav-alerts { right: 12px; bottom: 178px; }
}

/* Signed out: the map stays as a backdrop and everything you could press is
   gone, because every one of those things needs a session anyway. */
body.locked .search,
body.locked .rail,
body.locked .fab.report,
body.locked .fab.tiny,
body.locked .legend,
body.locked .eta { display: none !important; }
body.locked .sheet {
  top: 50%; left: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 24px)); max-height: calc(100vh - 40px);
}

/* Unconfirmed address: a strip, not a wall. */
.verify-bar {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  z-index: 12; display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 14px; border-radius: 11px;
  background: var(--accent); color: #fff; box-shadow: var(--shadow);
  font-size: 13px; max-width: calc(100vw - 24px);
}
.verify-bar button {
  border: 0; border-radius: 8px; padding: 6px 11px; cursor: pointer;
  background: rgba(255, 255, 255, .18); color: #fff; font-size: 12px; font-weight: 600;
}
.verify-bar .icon-btn { width: 26px; height: 26px; background: transparent; }
body.navigating .verify-bar, body.locked .verify-bar { display: none !important; }
@media (max-width: 820px) {
  /* Below the search card rather than over it. */
  .verify-bar { top: auto; bottom: 74px; }
}

/* --------------------------------------------------------------------------
   Narrow screens

   Nine round buttons at 46px need 500px of width; a phone has 375. The rail
   scrolls sideways rather than running off the edge, and the strip that asks
   for a confirmed address takes a whole line rather than squeezing into a
   column three words wide.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .rail {
    left: 0; right: 0; bottom: 12px; top: auto;
    padding: 0 74px 0 12px;         /* clear of the report button */
    grid-auto-flow: column; grid-auto-columns: max-content; gap: 9px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; scroll-padding: 12px;
  }
  .rail::-webkit-scrollbar { display: none; }

  /* No room for another strip. The bottom of a phone already holds the rail,
     the report button and the sheet; a fourth thing there would cover one of
     them. The account button carries a dot instead, and the account panel says
     what it is for — which is where the resend button already lives. */
  .verify-bar { display: none !important; }

  /* The bubble sits above the report button, both clear of the rail. */
  .fab.tiny { bottom: 140px; right: 16px; }
  .fab.report { bottom: 74px; }
  .attrib { bottom: 62px; }
  .legend { bottom: 74px; }

  /* A sheet on a phone is a bottom sheet: full width, and never taller than
     the space that is actually left. */
  .sheet {
    left: 8px; right: 8px; bottom: 128px;
    max-height: min(60vh, calc(100vh - 300px));
  }
  .eta { bottom: 128px; }
  .nav-road { bottom: 176px; }
}

/* A phone in landscape has almost no height; the search card must not eat it. */
@media (max-height: 480px) {
  .search { max-height: 62vh; overflow-y: auto; }
  .sheet { max-height: 70vh; }
}

/* An unconfirmed address, said without a strip: a dot on the account button. */
.fab.account { position: relative; }
.fab.account.unverified::after {
  content: ''; position: absolute; top: 1px; right: 1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--card);
}

/* --------------------------------------------------------------------------
   Operator panel
   -------------------------------------------------------------------------- */
.admin-tabs { margin-bottom: 12px; }
.admin-tabs button { font-size: 12px; padding: 8px 4px; }

.ad-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.ad-row:last-child { border-bottom: 0; }
.ad-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ad-who strong { font-size: 14px; overflow-wrap: anywhere; }
.ad-who .sub { font-size: 11px; }
.ad-who .mono { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); overflow-wrap: anywhere; }
.ad-tags { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.tag {
  font-style: normal; font-size: 10px; padding: 2px 7px; border-radius: 6px;
  background: var(--card-2); color: var(--ink-dim); white-space: nowrap;
}
.tag.admin { background: var(--brand); color: var(--brand-ink); }
.tag.warn { background: var(--accent); color: #fff; }
.tag.crit { background: var(--crit); color: #fff; }
.ad-acts { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: flex-end; }
.ad-acts button {
  padding: 5px 9px; border: 0; border-radius: 7px; cursor: pointer;
  background: var(--card-2); color: var(--ink); font-size: 11px; white-space: nowrap;
}
.ad-acts button:hover { background: var(--brand); color: var(--brand-ink); }
.ad-acts select, .ad-acts .pct {
  padding: 5px 7px; border-radius: 7px; font-size: 11px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--ink);
}
.ad-acts .pct { width: 62px; }
.ad-acts .switch { margin: 0; font-size: 11px; }

@media (max-width: 820px) {
  .ad-row { flex-wrap: wrap; }
  .ad-who { flex: 1 1 100%; }
  .ad-acts { flex: 1 1 100%; justify-content: flex-start; }
  .ad-tags { flex-direction: row; }
}

/* Labels in the operator panel sit above their field, not beside it: side by
   side the label lands on top of the input. */
#admin-body label:not(.switch) {
  display: grid; gap: 5px; margin-bottom: 12px;
  font-size: 12px; color: var(--ink-dim);
}
#admin-body input[type="text"], #admin-body input:not([type]) {
  padding: 9px 11px; border-radius: 9px; font-size: 14px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--ink);
}

/* Sharing a route: the code to hand out, and who is winning. */
.cv-code {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 10px; border-radius: 10px; background: var(--card-2);
}
.cv-code strong { flex: 1; font-size: 20px; letter-spacing: 2px; font-family: var(--mono); }
.cv-code button {
  border: 0; border-radius: 8px; padding: 6px 11px; cursor: pointer;
  background: var(--brand); color: var(--brand-ink); font-size: 12px;
}
.cv-race { display: grid; gap: 4px; }
.cv-member {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: 9px; background: var(--card-2); font-size: 13px;
}
.cv-member.me { box-shadow: inset 0 0 0 1px var(--brand); }
.cv-pos {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: 50%; background: var(--card); font-size: 11px; font-weight: 700;
}
.cv-member:first-child .cv-pos { background: var(--good); color: #fff; }
.cv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-eta { color: var(--ink-dim); font-size: 12px; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   The things you stop for
   -------------------------------------------------------------------------- */
.poi-bar {
  position: absolute; top: 12px; left: 404px; z-index: 8;
  display: flex; gap: 6px; padding: 7px;
  border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow);
  max-width: calc(100vw - 500px); overflow-x: auto;
  scrollbar-width: none;
}
.poi-bar::-webkit-scrollbar { display: none; }
.poi-bar button {
  display: grid; justify-items: center; gap: 3px; flex: none;
  width: 60px; padding: 7px 4px; border: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--ink-dim); font-size: 10px; line-height: 1.1;
}
.poi-bar svg {
  width: 22px; height: 22px; fill: none; stroke: var(--c);
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.poi-bar button:hover { background: var(--card-2); }
.poi-bar button.on { background: var(--card-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--c); }
body.navigating .poi-bar, body.locked .poi-bar { display: none !important; }

.poi-list { display: grid; gap: 2px; }
.poi-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer;
}
.poi-item:last-child { border-bottom: 0; }
.poi-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.poi-main strong { font-size: 14px; }
.poi-main .mono { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }
i.open { font-style: normal; font-weight: 600; }
i.open.true { color: var(--good); }
i.open.false { color: var(--crit); }
.poi-acts { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.poi-btn {
  padding: 6px 10px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--card-2); color: var(--ink); font-size: 11px;
  text-align: center; text-decoration: none; white-space: nowrap;
}
.poi-btn.go { background: var(--brand); color: var(--brand-ink); }

@media (max-width: 820px) {
  /* Under the search card, not beside it: there is no beside. */
  .poi-bar {
    left: 8px; right: 8px; top: auto; bottom: 74px; max-width: none;
  }
  .poi-bar button { width: 56px; }
  /* And the things that were at that height move up out of its way. */
  .fab.report { bottom: 148px; }
  .fab.tiny { bottom: 214px; }
  .sheet { bottom: 148px; max-height: min(52vh, calc(100vh - 330px)); }
  .eta { bottom: 148px; }
  .nav-road { bottom: 176px; }
}

/* --------------------------------------------------------------------------
   The on-screen keyboard

   `--kb` is how much of the window the keyboard is covering, measured from
   `visualViewport`. Everything anchored to the bottom of the screen sits above
   it, and the sheet — which is where every form lives — gets whatever height
   is genuinely left rather than the height the layout viewport still claims.
   -------------------------------------------------------------------------- */
:root { --kb: 0px; }

body.keyboard .sheet {
  bottom: calc(var(--kb) + 12px);
  max-height: calc(100vh - var(--kb) - 24px);
  overflow-y: auto;
}
/* Signed out the panel is centred; with a keyboard up there is no middle to be
   in, so it becomes a normal panel above the keys. */
body.locked.keyboard .sheet {
  top: auto; left: 8px; right: 8px; bottom: calc(var(--kb) + 8px);
  transform: none; width: auto;
  max-height: calc(100vh - var(--kb) - 16px);
}
/* Nothing else competes for the screen while someone is typing. */
body.keyboard .rail,
body.keyboard .poi-bar,
body.keyboard .fab.report,
body.keyboard .fab.tiny,
body.keyboard .legend,
body.keyboard .eta,
body.keyboard .attrib { display: none !important; }

/* Where you are. A dot with a heading wedge when the device knows which way it
   is pointing, and an accuracy circle only when the fix is loose enough for the
   difference to matter. */
.here-dot { position: relative; width: 20px; height: 20px; }
.here-dot i {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--brand); border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(16, 26, 38, .5);
}
.here-dot b {
  position: absolute; left: 50%; top: -9px; width: 0; height: 0;
  transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 9px solid var(--brand);
  opacity: 0;
}
.here-dot.aimed b { opacity: 1; }

.fab.here {
  position: absolute; right: 18px; bottom: 216px; z-index: 9;
  width: 44px; height: 44px;
}
.fab.here svg {
  width: 21px; height: 21px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round;
}
.fab.here.on { background: var(--brand); color: var(--brand-ink); }
.fab.here.denied { opacity: .45; }
body.locked .fab.here { display: none !important; }

/* --------------------------------------------------------------------------
   Folding the route card away

   On a phone the card, the results and the icon row leave a strip of map about
   as tall as a finger. Collapsed, the two addresses stay — you still need to
   see where you asked to go — and everything else is map again.
   -------------------------------------------------------------------------- */
body.collapsed .search .field:not([data-role]),
body.collapsed .search-foot,
body.collapsed .suggest { display: none !important; }
body.collapsed .search { padding-bottom: 8px; }
body.collapsed .search .field { padding-top: 5px; padding-bottom: 5px; }
body.collapsed .search .field input { font-size: 13px; }

/* --------------------------------------------------------------------------
   Menu and full-screen pages
   -------------------------------------------------------------------------- */
.menu-screen, .page {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column;
  background: var(--card); color: var(--ink);
}
.menu-head, .page-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 12px; border-bottom: 1px solid var(--line); flex: none;
}
.menu-head strong, .page-head strong { flex: 1; font-size: 17px; }
.page-head .icon-btn svg { width: 20px; height: 20px; }
.menu-body, .page-body {
  flex: 1; overflow-y: auto; padding: 12px;
  padding-bottom: calc(12px + var(--kb));
  -webkit-overflow-scrolling: touch;
}

.menu-me {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px; margin-bottom: 14px; border: 0; border-radius: var(--radius);
  background: var(--card-2); color: var(--ink); cursor: pointer; text-align: left;
}
.menu-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.menu-who strong { font-size: 15px; }
.menu-me .me-avatar { width: 42px; height: 42px; font-size: 17px; }

.menu-list {
  display: grid; gap: 2px; margin-bottom: 14px;
  border-radius: var(--radius); overflow: hidden; background: var(--card-2);
}
.menu-list button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 14px; border: 0; background: transparent; cursor: pointer;
  color: var(--ink); font-size: 15px; text-align: left;
}
.menu-list button:active { background: var(--brand); color: var(--brand-ink); }
.menu-list svg {
  width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.menu-list button.danger { color: var(--crit); }

/* Settings rows: the control on the right, what it does on the left. */
.row-toggle, .row-select {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 2px; border-bottom: 1px solid var(--line);
}
.row-toggle:last-of-type, .row-select:last-of-type { border-bottom: 0; }
.row-toggle > span, .row-select > span {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.row-toggle strong, .row-select strong { font-size: 14px; font-weight: 600; }
.row-toggle input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--brand); flex: none; }
.row-select select {
  flex: none; max-width: 52%; padding: 9px 10px; border-radius: 9px; font-size: 13px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--ink);
}
.page-body h4 { margin: 18px 0 4px; }
.page-body h4:first-child { margin-top: 0; }

/* With a page open, nothing underneath competes for a tap. */
body.menu-open .search, body.menu-open .rail, body.menu-open .poi-bar,
body.menu-open .fab, body.menu-open .sheet, body.menu-open .legend,
body.menu-open .eta, body.menu-open .verify-bar,
body.page-open .search, body.page-open .rail, body.page-open .poi-bar,
body.page-open .fab, body.page-open .sheet, body.page-open .legend,
body.page-open .eta, body.page-open .verify-bar { display: none !important; }

/* --------------------------------------------------------------------------
   Stacking on a phone, from the bottom up

   Every floating thing had picked its own offset and they had grown into each
   other: the legend under the icon row, the attribution under the rail, the
   location button off the bottom. One ladder, declared once.

     12   rail
     74   report button
    140   feedback bubble
    150   icon row (full width)
    216   location button
    232   legend, attribution
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .rail       { bottom: 12px; }
  .fab.report { bottom: 74px; }
  .fab.tiny   { bottom: 140px; }
  /* Stops short of the report button rather than running under it. The bar
     scrolls, so the width it gives up costs nothing. */
  .poi-bar    { bottom: 74px; left: 8px; right: 76px; top: auto; max-width: none; }
  .fab.here   { bottom: 216px; right: 16px; width: 40px; height: 40px; }
  .legend     { bottom: 150px; left: 12px; right: auto; }
  /* ODbL requires this to be legible wherever the map is shown, so it ends
     before the feedback bubble rather than sitting underneath it. */
  .attrib     { bottom: 152px; right: 68px; }
  .sheet      { bottom: 150px; max-height: min(50vh, calc(100vh - 340px)); }
  .eta        { bottom: 150px; }
  .nav-road   { bottom: 176px; }

  /* Collapsed, the icon row and the map get the space the card was using. */
  body.collapsed .sheet { max-height: min(62vh, calc(100vh - 250px)); }
}

/* Wide screens: the location button belongs beside the rail, not over the
   report button. */
@media (min-width: 821px) {
  .fab.here { right: 12px; bottom: auto; top: 512px; }
}

/* A short landscape phone has no room for the icon row and a panel at once. */
@media (max-height: 460px) and (orientation: landscape) {
  .poi-bar { display: none; }
  .sheet { bottom: 74px; max-height: calc(100vh - 100px); }
  .search { max-height: 70vh; overflow-y: auto; }
}