/* base.css — reset, theme tokens, layout. White-label colors set at runtime. */
:root {
  --color-primary: #1a73e8;
  --color-accent: #34a853;
  font-family: system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

/* Honor the `hidden` attribute/property even on elements we give a `display` to
   (e.g. #nav-search and #route-label are display:flex). Without this, toggling
   `.hidden` in JS leaves them visible — which showed the empty route chip on boot
   and left the from/to form on screen next to its collapsed "From → To" chip. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  height: 100%;
}

/* Full-bleed map with the navigation UI floating over it (demo-style). */
#app {
  position: relative;
  block-size: 100dvh;
  inline-size: 100vw;
  overflow: hidden;
}

#map {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Google-Maps-style layout: the map is the major view, with a COMPACT top bar (brand +
   language + from/to search) and the route info in a bottom sheet. */

/* Top search bar — full-width on phones, a left card on wide screens. */
#nav-panel {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1000;
  max-block-size: 70dvh;
  overflow-y: auto;
  padding: 6px 10px calc(6px + env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, white 96%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgb(0 0 0 / 16%);
}
@media (min-width: 641px) {
  #nav-panel {
    inset-inline-end: auto;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    inline-size: 380px;
    border-radius: 12px;
  }
}

/* Bottom route sheet — slides up when a route is previewed; drag the handle to resize
   between peek and expanded. Its block-size is set inline by makeBottomSheet (snap
   states); the rest is styling. */
#route-sheet {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1000;
  block-size: 30dvh; /* fallback until JS sets the snapped height */
  max-block-size: 88dvh;
  overflow-y: auto;
  padding: 0 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-start-start-radius: 16px;
  border-start-end-radius: 16px;
  box-shadow: 0 -2px 16px rgb(0 0 0 / 18%);
  transform: translateY(110%);
  transition: transform 0.25s ease, height 0.2s ease;
}
#route-sheet.wf-sheet--open {
  transform: translateY(0);
}
/* No height transition while actively dragging — follow the finger. */
#route-sheet.wf-sheet--dragging {
  transition: none;
}

/* The grab handle: a centered pill, sticky so it's always reachable while content scrolls. */
.wf-sheet-handle {
  position: sticky;
  inset-block-start: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: -16px;
  padding: 7px 0 5px;
  background: #fff;
  cursor: grab;
  touch-action: none; /* the handle owns the drag gesture, not the scroller */
}
/* Compact peek: distance/ETA sit close together above the Start button. */
#route-summary {
  margin: 0;
}
#route-summary p {
  margin-block: 4px;
}
.wf-sheet-handle:active {
  cursor: grabbing;
}
.wf-sheet-handle::before {
  content: "";
  inline-size: 40px;
  block-size: 5px;
  border-radius: 3px;
  background: #c8ccd2;
}

#route-sheet #start-nav {
  inline-size: 100%;
  margin-block-start: 6px;
}
@media (min-width: 641px) {
  #route-sheet {
    inset-inline-end: auto;
    inset-inline-start: 12px;
    inset-block-end: 12px;
    inline-size: 380px;
    border-radius: 12px;
  }
}

/* Brand header — tenant logo + title + language picker. */
#nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 5px;
}
.nav-brand__logo {
  block-size: 22px;
  inline-size: auto;
  border-radius: 4px;
}
.nav-brand__title {
  flex: 1;
  min-inline-size: 0;
  font-weight: 700;
  font-size: 14px;
  color: #1f2d3d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-lang {
  flex: 0 0 auto;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid #d0d0d0;
  background: #fff;
  font-size: 13px;
}

/* From/To search, stacked. */
#nav-search {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* The explicit `display:flex` above beats the [hidden] attribute's display:none, so make
   hiding work explicitly — otherwise the inputs AND the collapsed chip both show. */
#nav-search[hidden] {
  display: none;
}

/* Collapsed "From → To" chip — REPLACES the search form once a route is previewed (so the
   inputs fold away and only this compact row shows). Tap it to edit the endpoints again. */
#route-label {
  display: flex;
  align-items: center;
  gap: 8px;
  inline-size: 100%;
  padding: 6px 10px;
  min-block-size: 36px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  background: #fff;
  text-align: start;
  cursor: pointer;
}
.route-label__text {
  flex: 1;
  min-inline-size: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2d3d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.route-label__edit {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
}

.nav-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* A small leading dot marks each row (start = hollow, destination = filled primary). */
.nav-row::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
}
.nav-row:nth-of-type(2)::before {
  background: var(--color-primary);
}

#from-search,
#dest-search {
  flex: 1;
  min-inline-size: 0;
  padding: 8px 10px;
  font-size: 16px; /* >=16px stops iOS Safari auto-zooming the input on focus */
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  min-block-size: 42px; /* comfortable touch target */
}

/* Compact icon squares (GPS "use my location", Scan QR) sitting next to an input —
   sized/bordered to match it, NOT a full-width primary bar. */
.icon-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 42px;
  min-block-size: 42px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fff;
  color: var(--color-primary);
  cursor: pointer;
}
.icon-btn svg {
  display: block;
}

/* Start (in the sheet) is the one primary call-to-action. */
#start-nav {
  background: var(--color-primary);
  color: white;
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 15px;
  font-weight: 600;
  min-block-size: 42px;
  cursor: pointer;
}
#start-nav:disabled {
  background: color-mix(in srgb, var(--color-primary) 35%, #c4c4c4);
  cursor: default;
}

#search-results {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  max-block-size: 38dvh;
  overflow-y: auto;
}

#search-results li {
  padding: 8px;
  cursor: pointer;
  border-radius: 6px;
}

#search-results li:hover {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

#route-summary .offline-badge {
  color: var(--color-accent);
  font-weight: 600;
}

/* Keep the turn-by-turn list short so it never dominates the panel. */
#route-summary .steps {
  max-block-size: 20dvh;
  overflow-y: auto;
}

#gps-indicator {
  color: #946200;
}

#nav-status[data-kind="success"] {
  color: var(--color-accent);
  font-weight: 600;
}

/* QR scan overlay — full-screen camera feed with a cancel button. */
#scan-overlay {
  position: fixed;
  inset: 0;
  z-index: 18;
  background: #000;
}

#scan-overlay #scan-video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

#scan-overlay .scan-close {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  z-index: 1;
  padding: 8px 12px;
}

/* In-route action row (revealed after Start): AR view + voice guidance + End. */
.nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 10px;
}
.nav-actions button {
  flex: 1 1 auto;
  min-block-size: 44px;
  border: 0;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.ar-btn {
  background: var(--color-accent);
  color: #fff;
  padding: 8px 12px;
}
.speak-btn {
  background: var(--color-primary);
  color: #fff;
  padding: 8px 12px;
}
.end-btn {
  flex: 0 0 auto;
  background: #f1f3f4;
  color: #b00020;
  padding: 8px 14px;
}

/* ── Live navigation sheet (after Start): compact + informative, Google-Maps style ── */

/* Next-turn banner — a bold maneuver glyph + the instruction and the live distance to the
   turn. This is the at-a-glance line the walker reads. */
.nav-next {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-block-start: 2px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-primary) 12%, #fff);
}
.nav-next__glyph {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 26px;
  line-height: 1;
}
.nav-next__body {
  min-inline-size: 0;
}
.nav-next__instruction {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #1f2d3d;
  line-height: 1.2;
}
.nav-next__distance {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}

/* Meta strip — remaining time · distance · arrival clock. */
.nav-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-block-start: 8px;
  font-size: 14px;
  color: #3c4043;
}
.nav-meta__time {
  font-weight: 700;
  color: var(--color-accent);
}
.nav-meta__sep {
  color: #b0b6bd;
}

/* Compact in-route step list (revealed by dragging the sheet up). */
#route-summary .steps {
  list-style: none;
  margin-block: 8px 0;
  padding: 0;
}
#route-summary .steps li {
  padding: 6px 4px;
  border-block-start: 1px solid #eef0f2;
  font-size: 13px;
  color: #3c4043;
}