/* 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,
#info-sheet {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1000;
  block-size: 22dvh; /* fallback until JS sets the snapped height */
  max-block-size: 88dvh;
  overflow-y: auto;
  padding: 0 16px calc(10px + 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;
}
/* The info sheet sits above the route sheet when both are open (tap-to-inspect flow). */
#info-sheet {
  z-index: 1001;
}
#route-sheet.wf-sheet--open,
#info-sheet.wf-sheet--open {
  transform: translateY(0);
}
/* No height transition while actively dragging — follow the finger. */
#route-sheet.wf-sheet--dragging,
#info-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: 5px 0 4px;
  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: 2px;
}
.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: 4px;
}
@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: full-width, icon + label. */
#start-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-primary);
  color: white;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 600;
  min-block-size: 46px;
  cursor: pointer;
  box-shadow: 0 1px 6px color-mix(in srgb, var(--color-primary) 40%, transparent);
}
#start-nav svg {
  flex: 0 0 auto;
}
#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);
}

/* Room results render two lines: the room name and a muted "Floor · Building" line. */
#search-results li .result-name {
  display: block;
}

#search-results li .result-sub {
  display: block;
  font-size: 0.8em;
  opacity: 0.7;
}

/* Destination picker — the "Where would you like to go?" browse grid (category chips +
   icon cards). Shown once a Start is set / after a QR scan (see navigate.js showPicker). */
#dest-picker {
  margin-top: 8px;
  max-block-size: 46dvh;
  overflow-y: auto;
}

.wf-picker__title {
  margin: 2px 2px 8px;
  font-size: 1.02rem;
  font-weight: 700;
}

.wf-picker__chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.wf-picker__chips::-webkit-scrollbar {
  display: none;
}

.wf-chip {
  flex: 0 0 auto;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 8%, #ededed);
  color: inherit;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
  white-space: nowrap;
}
.wf-chip--active {
  background: var(--color-primary);
  color: #fff;
}

.wf-picker__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 380px) {
  .wf-picker__grid {
    grid-template-columns: 1fr;
  }
}

.wf-dest-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, #e2e2e2);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.wf-dest-card:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, #fff);
}

.wf-dest-card__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--color-primary) 12%, #f1f1f1);
  color: var(--color-primary);
}

.wf-dest-card__body {
  min-inline-size: 0;
}
.wf-dest-card__name {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf-dest-card__sub {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  opacity: 0.65;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Floors → rooms directory — shared by the location-info panel and the arrival card. */
.floors-directory {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.floor-row {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  border-block-start: 1px solid rgb(0 0 0 / 8%);
}
.floor-row__label {
  flex: 0 0 auto;
  min-inline-size: 68px;
  font-weight: 600;
}
.floor-row__rooms {
  flex: 1 1 auto;
  opacity: 0.85;
}
.floor-row__rooms .room--target {
  font-weight: 700;
  color: var(--color-primary);
}
.floors-empty {
  margin: 8px 0 0;
  opacity: 0.7;
}

/* Location-info panel (tap a marker). */
.info-title {
  margin: 4px 0 8px;
  font-size: 1.15rem;
}
.nav-here-btn {
  display: inline-block;
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

/* Rich arrival card (shown in the route sheet on arrival). */
.arrival-card__title {
  margin: 2px 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
}
.arrival-card__target {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.arrival-card__room {
  font-size: 1.05rem;
  font-weight: 700;
}
.arrival-card__floor {
  opacity: 0.85;
}

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

/* Active campus-event banner — floats just above the collapsed route sheet so it never
   covers the top search; an expanded sheet (higher z-index) slides over it. */
#event-banner {
  position: absolute;
  inset-inline: 8px;
  inset-block-end: calc(19dvh + 10px);
  z-index: 999;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-accent) 90%, #000);
  color: #fff;
  box-shadow: 0 2px 12px rgb(0 0 0 / 28%);
}
#event-banner[hidden] {
  display: none;
}
.event-banner__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-inline-size: 0;
}
.event-banner__title {
  font-weight: 700;
}
.event-banner__text {
  font-size: 13px;
  opacity: 0.95;
}
.event-banner__close {
  flex: 0 0 auto;
  padding: 0 2px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}

/* 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;
}

/* Floating status toast — a lightweight snackbar above the map, independent of the route
   sheet, so navigation validations (e.g. an off-campus warning) are visible even when the
   sheet is closed. It is the single notification surface reused by every setStatus() call;
   JS auto-dismisses it after a few seconds. */
#nav-status.nav-toast {
  position: absolute;
  inset-inline: 0;
  margin-inline: auto;
  inset-block-end: calc(19dvh + env(safe-area-inset-bottom, 0px));
  z-index: 1100; /* above the route sheet (1000) and the event banner (999) */
  inline-size: max-content;
  max-inline-size: min(92vw, 420px);
  padding: 11px 16px;
  border-radius: 14px;
  background: #333; /* neutral (info) default; kinds override below */
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 6px 22px rgb(0 0 0 / 30%);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none; /* never intercept map/sheet taps */
}
#nav-status.nav-toast.nav-toast--in {
  opacity: 1;
  transform: translateY(0);
}
#nav-status[hidden] {
  display: none;
}
#nav-status[data-kind="success"] {
  background: var(--color-accent);
}
#nav-status[data-kind="warn"] {
  background: #b26a00;
}
#nav-status[data-kind="error"] {
  background: #c62828;
}
#nav-status[data-kind="info"] {
  background: #333;
}

/* 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 (after Start): AR • Voice • End — three EQUAL-width buttons on one
   row, each an icon over a short label (Google-Maps-style) so the sheet stays compact. */
.nav-actions {
  display: flex;
  gap: 8px;
  margin-block-start: 10px;
}
.nav-actions button {
  flex: 1 1 0; /* equal width — [ AR ] [ Voice ] [ End ] */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-inline-size: 0;
  min-block-size: 52px;
  padding: 7px 8px;
  border: 0;
  border-radius: 10px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}
.nav-actions button svg {
  flex: 0 0 auto;
}
.nav-actions .btn-label {
  line-height: 1;
}
/* AR + Voice are tonal (soft brand tint), End is a quiet destructive — the map stays the star. */
.ar-btn {
  background: color-mix(in srgb, var(--color-accent) 16%, #fff);
  color: color-mix(in srgb, var(--color-accent) 75%, #000);
}
.speak-btn {
  background: color-mix(in srgb, var(--color-primary) 14%, #fff);
  color: color-mix(in srgb, var(--color-primary) 78%, #000);
}
.speak-btn--muted {
  opacity: 0.55;
}
.end-btn {
  background: #f1f3f4;
  color: #b00020;
}

/* Preview summary card (before Start): a prominent travel time, then distance · arrival. */
.route-preview {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-block: 2px 8px;
}
.route-preview .eta {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1.1;
}
.route-preview__sub {
  font-size: 14px;
  color: #3c4043;
}
.route-preview__sep {
  margin-inline: 5px;
  color: #b0b6bd;
}

/* ── 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: 10px;
  padding: 8px 10px;
  margin-block-start: 0;
  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: 38px;
  block-size: 38px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 22px;
  line-height: 1;
}
.nav-next__body {
  min-inline-size: 0;
}
.nav-next__instruction {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1f2d3d;
  line-height: 1.2;
}
.nav-next__distance {
  margin: 1px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
}

/* Meta strip — remaining time • distance • arrival clock, kept on ONE line. */
.nav-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 6px;
  margin-block-start: 6px;
  font-size: 13px;
  color: #3c4043;
  white-space: nowrap;
  overflow: hidden;
}
.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;
}

/* Visitor-capture overlay — a centered, mobile-friendly card shown over the app on a
   first QR scan when the tenant enables it. Sits above the sheets/scan overlay (z 2000). */
.visitor-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgb(0 0 0 / 45%);
  backdrop-filter: blur(2px);
}

.visitor-card {
  inline-size: 100%;
  max-inline-size: 380px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 40px rgb(0 0 0 / 25%);
}

.visitor-card__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #202124;
}

.visitor-card__subtitle {
  margin: -6px 0 2px;
  font-size: 14px;
  color: #5f6368;
}

.visitor-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.visitor-field__label {
  font-size: 13px;
  font-weight: 500;
  color: #3c4043;
}

.visitor-field__input {
  inline-size: 100%;
  padding: 12px 14px;
  font-size: 16px; /* >=16px avoids iOS zoom-on-focus */
  border: 1px solid #d0d3d7;
  border-radius: 10px;
  background: #fff;
  color: #202124;
}

.visitor-field__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.visitor-field__input[aria-invalid="true"] {
  border-color: #d93025;
}

.visitor-field__error {
  font-size: 12px;
  color: #d93025;
}

.visitor-card__error {
  margin: 0;
  font-size: 13px;
  color: #d93025;
}

.visitor-card__submit {
  margin-block-start: 4px;
  padding: 13px 16px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.visitor-card__submit:disabled {
  opacity: 0.65;
  cursor: default;
}