/* Live map. Tokens mirror the native apps (ios-app Assets.xcassets, android-app design/). Dark by default. */
:root {
  --lv-canvas: #050506;
  --lv-surface: #17171b;
  --lv-glass: rgba(23, 23, 27, 0.86);
  --lv-ink: #f5f4f2;
  --lv-ink2: #9a9aa3;
  --lv-line: rgba(245, 244, 242, 0.1);
  --lv-fill: #222228;
  --lv-signature: #de4510;
  --lv-signature-press: #c23a0b;
  --lv-signature-soft: #3a1a10;
  --lv-sky: #2a7de1;
  --lv-lock: #ffd60a;
  --lv-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.75);
  --lv-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', system-ui, sans-serif;
  --lv-lively: cubic-bezier(0.34, 1.36, 0.64, 1);
  --lv-fade: cubic-bezier(0.4, 0, 0.2, 1);
}
:root[data-live-theme='light'] {
  --lv-canvas: #f6f4f1;
  --lv-surface: #ffffff;
  --lv-glass: rgba(255, 255, 255, 0.9);
  --lv-ink: #121214;
  --lv-ink2: #66666e;
  --lv-line: rgba(18, 18, 20, 0.08);
  --lv-fill: #efedea;
  --lv-signature: #d63c0a;
  --lv-signature-press: #b93208;
  --lv-signature-soft: #ffe7dd;
  --lv-sky: #1f73db;
  --lv-shadow: 0 12px 28px -16px rgba(18, 18, 20, 0.35);
}

.page-live {
  background: var(--lv-canvas);
  color: var(--lv-ink);
}
.page-live .topbar {
  background: var(--lv-canvas);
  box-shadow: 0 1px 0 var(--lv-line);
}
.page-live .logo,
.page-live .lang summary {
  color: var(--lv-ink);
}
.page-live .lang summary {
  background: var(--lv-fill);
  box-shadow: none;
}
.page-live .logo-word {
  text-shadow: none;
}
.page-live .topbar .btn-small {
  --btn-bg: var(--lv-signature);
  --btn-fg: #fff;
  --btn-shadow: transparent;
  box-shadow: none;
}
.live {
  position: relative;
  height: calc(100svh - 64px);
  min-height: 520px;
  overflow: hidden;
  background: var(--lv-canvas);
  font-family: var(--lv-ui);
  color: var(--lv-ink);
  isolation: isolate;
}
.live-map {
  position: absolute;
  inset: 0;
}
.live-map canvas {
  outline: none;
}

/* Floating UI */
.live-top {
  position: absolute;
  top: 12px;
  inset-inline: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  z-index: 3;
  pointer-events: none;
}
.live-top > * {
  pointer-events: auto;
}
.live-h1,
.live-icon-btn,
.live-promo,
.live-recenter,
.live-pill {
  background: var(--lv-glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: var(--lv-shadow);
  border: 1px solid var(--lv-line);
}
.live-h1 {
  margin: 0;
  padding: 10px 14px;
  border-radius: 16px;
  font: 700 15px/1.2 var(--lv-ui);
  letter-spacing: -0.01em;
  color: var(--lv-ink);
  min-width: 0;
}
.live-top-actions {
  display: flex;
  gap: 8px;
  flex: none;
}
.live-icon-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--lv-ink);
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  transition: transform 0.2s var(--lv-lively);
}
.live-icon-btn:active,
.live-recenter:active {
  transform: scale(0.96);
}
.live-icon-btn svg {
  width: 21px;
  height: 21px;
}
#live-theme .i-sun,
:root[data-live-theme='light'] #live-theme .i-moon {
  display: none;
}
:root[data-live-theme='light'] #live-theme .i-sun {
  display: block;
}
.live-pill {
  position: absolute;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  font: 600 12px var(--lv-ui);
  color: var(--lv-ink2);
  white-space: nowrap;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  animation: lv-fade-in 0.3s var(--lv-fade);
}
.live-spin {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--lv-ink2);
  border-top-color: transparent;
  animation: spin 0.9s linear infinite;
}
.live-empty {
  top: 50%;
  white-space: normal;
  text-align: center;
  max-width: min(320px, 90%);
  font-size: 14px;
  color: var(--lv-ink);
}
.live-promo {
  position: absolute;
  bottom: calc(28px + env(safe-area-inset-bottom));
  inset-inline-start: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border-radius: 999px;
  font: 600 13px var(--lv-ui);
  white-space: nowrap;
  max-width: calc(100% - 24px - 150px);
  z-index: 2;
}
.live-promo svg {
  width: 15px;
  height: 15px;
  color: var(--lv-signature);
  flex: none;
  transform: rotate(45deg);
}
.live-promo span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-promo a {
  flex: none;
  color: #fff;
  background: var(--lv-signature);
  text-decoration: none;
  padding: 6px 11px;
  border-radius: 999px;
}
.live-promo button {
  flex: none;
  border: 0;
  background: none;
  color: var(--lv-ink2);
  font-size: 1.2rem;
  line-height: 1;
  width: 26px;
  height: 26px;
  cursor: pointer;
}
.live-recenter {
  position: absolute;
  bottom: calc(24px + env(safe-area-inset-bottom));
  inset-inline-end: 12px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px 0 15px;
  border-radius: 999px;
  font: 600 16px var(--lv-ui);
  color: var(--lv-ink);
  cursor: pointer;
  z-index: 3;
  transition: transform 0.2s var(--lv-lively);
}
.live-recenter svg {
  width: 20px;
  height: 20px;
  color: var(--lv-sky);
}
.live-has-card .live-promo,
.live-has-card .live-recenter {
  display: none;
}

/* You */
.live-you {
  width: 18px;
  height: 18px;
}
.live-you span,
.live-you::before {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.live-you span {
  background: var(--lv-sky);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.live-you::before {
  content: '';
  background: rgba(42, 125, 225, 0.4);
  animation: lv-ring 2.4s ease-out infinite;
}

/* Plane card */
.live-card {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 4;
  background: var(--lv-surface);
  color: var(--lv-ink);
  border-radius: 28px 28px 0 0;
  padding: 20px 20px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -16px 40px -18px rgba(0, 0, 0, 0.6);
  animation: lv-card-in 0.42s var(--lv-lively);
}
.live-card-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--lv-fill);
  color: var(--lv-ink2);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.live-card-head {
  margin: 0 44px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.live-card-head b {
  font: 700 26px/1.1 ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.01em;
}
.live-card-head span {
  font-size: 15px;
  font-weight: 600;
  color: var(--lv-ink2);
}
.live-card-head span:empty {
  display: none;
}
.live-card-route {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--lv-fill);
  min-height: 68px;
}
.live-route-ap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.live-route-ap:last-child {
  text-align: right;
  align-items: flex-end;
}
.live-route-ap i {
  font-style: normal;
  font-size: 1.4rem;
  line-height: 1;
}
.live-route-ap b {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.live-route-ap small {
  font: 600 12px ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  color: var(--lv-ink2);
}
.live-route-arrow {
  flex: none;
  width: 34px;
  height: 2px;
  position: relative;
  background: repeating-linear-gradient(90deg, var(--lv-ink2) 0 3px, transparent 3px 7px);
  opacity: 0.7;
}
.live-route-arrow svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%) rotate(90deg);
  fill: var(--lv-signature);
}
.live-route-skeleton {
  flex: 1;
  height: 18px;
  border-radius: 9px;
  background: linear-gradient(90deg, var(--lv-line) 0%, var(--lv-ink2) 50%, var(--lv-line) 100%);
  background-size: 200% 100%;
  opacity: 0.35;
  animation: lv-shimmer 1.2s linear infinite;
}
@keyframes lv-shimmer {
  to { background-position: -200% 0; }
}
.live-route-unknown {
  font-weight: 600;
  color: var(--lv-ink2);
}
.live-card-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 12px;
}
.live-card-facts div {
  min-width: 0;
}
.live-card-facts dt {
  font-size: 12px;
  font-weight: 600;
  color: var(--lv-ink2);
}
.live-card-facts dd {
  margin: 3px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.live-card-catch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--lv-signature-soft);
  font-size: 14px;
  font-weight: 600;
  color: var(--lv-ink);
  text-decoration: none;
}
.live-card-catch svg {
  width: 18px;
  height: 18px;
  flex: none;
  transform: rotate(45deg);
  color: var(--lv-signature);
}

/* Overlays */
.live-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 24px 20px;
  overflow-y: auto;
}
.live-overlay[hidden] {
  display: none;
}
.live-sheet {
  width: min(420px, 100%);
  text-align: center;
}
.live-sheet h2 {
  font: 800 clamp(26px, 7vw, 32px)/1.12 var(--lv-ui);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.live-sheet p {
  font-size: 17px;
  line-height: 1.45;
  color: var(--lv-ink2);
  margin: 0 0 28px;
}
.live-wide {
  width: 100%;
}
.live .btn-primary,
.live-overlay .btn-primary {
  --btn-bg: var(--lv-signature);
  --btn-fg: #fff;
  background: var(--lv-signature);
  color: #fff;
  box-shadow: none;
  text-shadow: none;
  font: 600 17px var(--lv-ui);
  height: 54px;
  padding: 0 24px;
  border-radius: 999px;
  transition: transform 0.2s var(--lv-lively), background 0.2s var(--lv-fade);
}
.live .btn-primary:hover,
.live-overlay .btn-primary:hover {
  transform: none;
  box-shadow: none;
  filter: none;
}
.live .btn-primary:active,
.live-overlay .btn-primary:active {
  transform: scale(0.96);
  background: var(--lv-signature-press);
  box-shadow: none;
}
.live-link {
  margin-top: 10px;
  border: 0;
  background: none;
  font: 600 16px var(--lv-ui);
  color: var(--lv-ink2);
  cursor: pointer;
  padding: 12px;
}
.live-prime {
  background: var(--lv-canvas);
  color: var(--lv-ink);
}
.live-prime-art {
  position: relative;
  width: 168px;
  height: 168px;
  margin: 0 auto 28px;
  display: grid;
  place-items: center;
}
.live-prime-pulse {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 120px;
  height: 40px;
  margin-left: -60px;
  border-radius: 50%;
  border: 2px solid var(--lv-signature);
  opacity: 0;
  animation: lv-pin-pulse 2.4s var(--lv-fade) infinite;
}
.live-prime-pulse-2 {
  animation-delay: 1.2s;
}
.live-prime-pin {
  position: relative;
  width: 84px;
  height: 105px;
  z-index: 1;
  margin-bottom: 24px;
  filter: drop-shadow(0 10px 14px rgba(214, 60, 10, 0.35));
  animation: lv-pin-bob 2.4s var(--lv-fade) infinite;
}
.live-prime-shadow {
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 34px;
  height: 10px;
  margin-left: -17px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  filter: blur(2px);
}

.live-hint {
  background: rgba(0, 0, 0, 0.6);
  place-items: stretch;
  padding: 16px;
}
.live-hint-box {
  position: absolute;
  inset-inline: 16px;
  margin-inline: auto;
  max-width: 420px;
  background: var(--lv-surface);
  color: var(--lv-ink);
  border-radius: 24px;
  padding: 20px 20px 12px;
  text-align: center;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
}
.live-hint-box p {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}
.live-hint-box .live-hint-wait {
  font-size: 14px;
  font-weight: 500;
  color: var(--lv-ink2);
}
.live-hint-arrow {
  position: absolute;
  left: 50%;
  width: 56px;
  height: 120px;
  margin-left: -28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 120'%3E%3Cpath d='M28 4 52 32H37v84H19V32H4z' fill='%23ffd60a' stroke='%23121214' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: lv-bob-up 1.1s ease-in-out infinite;
}
/* iOS: the system alert sits mid-screen, so the hint sits low and points up at its Allow button. */
.live-hint[data-pos='center'] .live-hint-box {
  bottom: calc(24px + env(safe-area-inset-bottom));
}
.live-hint[data-pos='center'] .live-hint-arrow {
  top: -136px;
  left: 64%;
}
/* Android: the permission sheet rises from the bottom. */
.live-hint[data-pos='bottom'] .live-hint-box {
  top: 18%;
}
.live-hint[data-pos='bottom'] .live-hint-arrow {
  bottom: -136px;
  transform: rotate(180deg);
  animation-name: lv-bob-down;
}
/* Desktop Chrome, Edge, Firefox: the prompt hangs under the address bar, top left. */
.live-hint[data-pos='top-left'] .live-hint-box {
  top: 128px;
  inset-inline: 24px auto;
  margin: 0;
  width: min(380px, calc(100% - 48px));
}
.live-hint[data-pos='top-left'] .live-hint-arrow {
  top: -118px;
  left: 40px;
  transform: rotate(-30deg);
  animation-name: lv-bob-up-left;
}
/* Desktop Safari: the sheet drops from the top centre of the window. */
.live-hint[data-pos='top-center'] .live-hint-box {
  top: 128px;
}
.live-hint[data-pos='top-center'] .live-hint-arrow {
  top: -132px;
}

.live-denied,
.live-search {
  background: var(--lv-canvas);
  color: var(--lv-ink);
}
.live-steps {
  list-style: none;
  counter-reset: step;
  margin: 0 0 24px;
  padding: 0;
  text-align: start;
  background: var(--lv-surface);
  border-radius: 24px;
  overflow: hidden;
}
.live-steps li {
  counter-increment: step;
  position: relative;
  padding: 14px 16px 14px 56px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
}
.live-steps li + li {
  box-shadow: inset 0 1px 0 var(--lv-line);
}
.live-steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--lv-signature);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
[dir='rtl'] .live-steps li {
  padding: 14px 56px 14px 16px;
}
.live-search {
  place-items: start center;
  padding-top: 16px;
}
.live-search-sheet {
  text-align: start;
}
.live-search-row {
  display: flex;
  gap: 8px;
}
.live-search-row input {
  flex: 1;
  min-width: 0;
  font: 500 17px var(--lv-ui);
  color: var(--lv-ink);
  padding: 14px 16px;
  border-radius: 16px;
  border: 0;
  background: var(--lv-surface);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--lv-line);
}
.live-search-row input:focus {
  box-shadow: inset 0 0 0 2px var(--lv-sky);
}
.live-search-row .live-icon-btn {
  width: 50px;
  height: 50px;
  background: var(--lv-surface);
}
.live-search-note {
  margin: 12px 4px 0;
  font-weight: 600;
  color: var(--lv-ink2);
}
.live-search-note:empty {
  display: none;
}
.live-search-results {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  background: var(--lv-surface);
  border-radius: 20px;
  overflow: hidden;
}
.live-search-results:empty {
  display: none;
}
.live-search-results li + li {
  box-shadow: inset 0 1px 0 var(--lv-line);
}
.live-search-results button {
  width: 100%;
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px 16px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.live-search-results b {
  font-weight: 600;
  font-size: 16px;
}
.live-search-results span {
  font-size: 13px;
  color: var(--lv-ink2);
}
.live-search-none {
  padding: 14px 16px;
  color: var(--lv-ink2);
}

/* Map chrome */
.page-live .maplibregl-ctrl-attrib {
  font: 500 11px var(--lv-ui);
}
.page-live .maplibregl-ctrl-attrib,
.page-live .maplibregl-ctrl-attrib.maplibregl-compact {
  background: var(--lv-glass);
  color: var(--lv-ink2);
}
.page-live .maplibregl-ctrl-attrib a {
  color: var(--lv-ink2);
}
:root:not([data-live-theme='light']) .page-live .maplibregl-ctrl-attrib-button {
  filter: invert(1);
}
.live-has-card .maplibregl-ctrl-bottom-right {
  display: none;
}

.page-live .live-seo {
  background: var(--lv-canvas);
  color: var(--lv-ink);
}
.page-live .live-seo .section-lead,
.page-live .live-seo p {
  color: var(--lv-ink2);
}
.page-live .live-seo .qa,
.page-live .live-seo .cta-card {
  background: var(--lv-surface);
  color: var(--lv-ink);
}
.page-live .live-seo h2 {
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  margin-top: 1.4em;
}
.page-live .live-seo h2:first-child {
  margin-top: 0;
}
.live-seo .faq-list {
  margin: 24px 0 40px;
}
.live-app .stores {
  justify-content: center;
}

@keyframes lv-ring {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(3.2); opacity: 0; }
}
@keyframes lv-card-in {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes lv-fade-in {
  from { opacity: 0; }
}
@keyframes lv-pin-pulse {
  0% { transform: scale(0.4); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}
@keyframes lv-pin-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}
@keyframes lv-bob-up {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
@keyframes lv-bob-down {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 10px; }
}
@keyframes lv-bob-up-left {
  0%, 100% { translate: 0 0; }
  50% { translate: -6px -8px; }
}

@media (max-width: 879px) {
  /* Phones: the promo rides under the title bar so the thumb zone is free for Recenter. */
  .live-promo {
    top: 66px;
    bottom: auto;
    inset-inline: 12px;
    max-width: none;
  }
  .live-promo span {
    flex: 1;
  }
  .live-pill {
    top: 118px;
  }
  .live-promo[hidden] ~ .live-pill,
  .live-pill:has(~ .live-promo[hidden]) {
    top: 66px;
  }
}
@media (min-width: 880px) {
  .live {
    height: calc(100vh - 64px);
  }
  .live-card {
    inset-inline: 20px auto;
    bottom: 20px;
    width: 420px;
    border-radius: 28px;
    padding-bottom: 18px;
  }
  .live-promo {
    inset-inline-start: 20px;
    bottom: 32px;
    max-width: none;
  }
  .live-recenter {
    inset-inline-end: 20px;
    bottom: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-card,
  .live-prime-pin,
  .live-prime-pulse {
    animation: none;
  }
}