/* =========================================================
   APROXZ — NAVIGATION PIXEL MATCH UI V10 — UNIFIED GUIDANCE RAIL
   File: styles/navigation.css
   Reference: approved AproxZ desktop + mobile navigation mockup
   Presentation only. Existing navigation engine remains authority.
   ========================================================= */

:root{
  --az-nav-bg:rgba(3,16,29,.96);
  --az-nav-bg-2:rgba(5,24,42,.96);
  --az-nav-line:rgba(64,166,235,.30);
  --az-nav-line-strong:rgba(31,186,255,.58);
  --az-nav-cyan:#31e5cf;
  --az-nav-blue:#159cff;
  --az-nav-blue-2:#0879ff;
  --az-nav-text:#f7fbff;
  --az-nav-muted:#8fa5b8;
  --az-nav-red:#f33f58;
  --az-nav-shadow:0 18px 54px rgba(0,0,0,.46);
}

#az-navigation-ui,#az-navigation-ui *{box-sizing:border-box}
#az-navigation-ui{
  position:fixed;inset:0;z-index:9800;pointer-events:none;color:var(--az-nav-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
}
#az-navigation-ui.is-hidden{display:none!important}
#az-navigation-ui button{font:inherit}
.az-nav-bottom-card,.az-nav-top-card,.az-nav-drawer,.az-nav-status-pill,.az-nav-side-controls{pointer-events:auto}

/* PREVIEW — desktop reference panel */
.az-nav-bottom-card{
  position:absolute;left:28px;top:50%;bottom:auto;transform:translateY(-46%);width:342px;padding:14px;
  max-height:calc(100vh - 260px);overflow:auto;
  border:1px solid var(--az-nav-line-strong);border-radius:21px;
  background:linear-gradient(180deg,rgba(4,20,35,.97),rgba(2,13,24,.98));
  box-shadow:var(--az-nav-shadow),0 0 0 1px rgba(0,229,205,.04);
  backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%);
}
.az-nav-collapse-handle,.az-nav-expand-btn{display:none!important}
.az-nav-destination-row{
  display:grid;grid-template-columns:54px minmax(0,1fr) 30px;align-items:start;gap:10px;
}
.az-nav-place-thumb{
  width:54px;height:54px;border-radius:14px;overflow:hidden;display:block;
  border:1px solid rgba(107,185,239,.22);background:rgba(15,40,64,.9);
}
.az-nav-place-thumb[hidden]{display:block}
.az-nav-place-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.az-nav-destination-copy{min-width:0}
.az-nav-eyebrow{display:none}
.az-nav-destination{
  color:#fff;font-size:14px;font-weight:900;line-height:1.18;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.az-nav-place-type{
  margin-top:3px;color:#b3c1cf;font-size:9px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.az-nav-place-address{
  margin-top:2px;color:#7f95a8;font-size:8.5px;font-weight:600;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.az-nav-close-btn{
  appearance:none;border:1px solid rgba(93,163,219,.27);background:rgba(7,29,49,.88);color:#e9f5ff;
  width:29px;height:29px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-size:17px;line-height:1;
}

.az-nav-reference-actions{
  display:grid;grid-template-columns:repeat(3,1fr);margin-top:11px;border:1px solid rgba(76,145,196,.16);
  border-radius:11px;overflow:hidden;background:rgba(5,24,41,.52);
}
.az-nav-reference-actions button{
  min-height:45px;border:0;border-right:1px solid rgba(76,145,196,.14);background:transparent;color:#e7f3fc;
  display:grid;place-items:center;align-content:center;gap:2px;cursor:pointer;
}
.az-nav-reference-actions button:last-child{border-right:0}
.az-nav-reference-actions span{font-size:14px;line-height:1}
.az-nav-reference-actions small{font-size:8px;color:#b6c5d2;font-weight:700}

.az-nav-route-choice-list{margin-top:9px;border-top:1px solid rgba(76,145,196,.12)}
.az-nav-reference-route{
  width:100%;min-height:46px;display:grid;grid-template-columns:18px minmax(0,1fr) 18px;gap:8px;align-items:center;
  padding:7px 4px;border:0;border-bottom:1px solid rgba(76,145,196,.12);background:transparent;color:#fff;text-align:left;cursor:pointer;
}
.az-nav-reference-route-mark{color:#b8c8d8;font-size:15px;text-align:center}
.az-nav-reference-route.is-selected .az-nav-reference-route-mark{color:var(--az-nav-cyan);text-shadow:0 0 10px rgba(49,229,207,.45)}
.az-nav-reference-route-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.az-nav-reference-route-copy strong{font-size:11px;font-weight:850}
.az-nav-reference-route-copy small{font-size:9px;color:#9cafc0;font-weight:650}
.az-nav-reference-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(152,185,214,.45)}
.az-nav-reference-route.is-selected .az-nav-reference-radio{border-color:#27aaff;background:#27aaff;box-shadow:inset 0 0 0 4px #061a2d}

.az-nav-trip-strip{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;padding:0 2px;
}
.az-nav-trip-summary{font-size:10px;font-weight:850;color:#f3f9ff}
.az-nav-trip-eta{font-size:9px;font-weight:700;color:#9fb1c1;white-space:nowrap}

.az-nav-primary-row{display:grid;grid-template-columns:1fr;gap:7px;margin-top:10px}
.az-nav-primary-btn,.az-nav-secondary-btn,.az-nav-end-btn{
  min-height:43px;border-radius:13px;font-weight:850;cursor:pointer;
}
.az-nav-primary-btn{
  border:0;color:#03111f;background:linear-gradient(90deg,#bceeff 0%,#4bc7ff 44%,#0780ff 100%);
  box-shadow:0 8px 25px rgba(11,131,255,.22);
}
.az-nav-secondary-btn{
  border:1px solid rgba(85,163,219,.30);color:#edf7ff;background:rgba(5,26,45,.78);
}
.az-nav-expanded-content{display:none;margin-top:9px}
.az-nav-shell.is-expanded .az-nav-expanded-content{display:block}
.az-nav-quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.az-nav-quick-actions button{
  min-height:54px;border:1px solid rgba(88,158,211,.20);border-radius:12px;background:rgba(6,27,46,.74);color:#fff;
  display:grid;place-items:center;align-content:center;gap:2px;cursor:pointer;
}
.az-nav-quick-actions button span{font-size:15px}
.az-nav-quick-actions button small{font-size:8px;color:#aebfce}
.az-nav-quick-actions button.is-danger{color:#ff6a7d;border-color:rgba(243,63,88,.35)}

/* Active navigation: reference keeps maneuver card top and small trip controls bottom */
.az-nav-top-card{
  position:absolute;top:18px;left:50%;transform:translateX(-50%);width:min(620px,calc(100vw - 60px));min-height:82px;
  display:grid;grid-template-columns:58px minmax(0,1fr) 40px;align-items:center;gap:12px;padding:11px 13px;
  border:1px solid var(--az-nav-line-strong);border-radius:22px;background:linear-gradient(180deg,rgba(5,25,44,.97),rgba(3,15,28,.97));
  box-shadow:var(--az-nav-shadow);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
}
.az-nav-top-card[hidden]{display:none!important}
.az-nav-maneuver-icon{
  width:54px;height:54px;border-radius:15px;display:grid;place-items:center;border:1px solid rgba(56,174,246,.35);
  background:rgba(13,78,131,.28);font-size:31px;font-weight:900;
}
.az-nav-turn-line{display:flex;align-items:center;gap:8px}
.az-nav-turn-distance{font-size:17px;font-weight:900;color:#fff}
.az-nav-road-badge{font-size:10px;color:#a8bfd1;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.az-nav-instruction{margin-top:3px;font-size:14px;font-weight:850;color:#fff;line-height:1.18}
.az-nav-icon-btn{
  width:38px;height:38px;border-radius:12px;border:1px solid rgba(88,158,211,.25);background:rgba(6,29,50,.86);color:#fff;cursor:pointer;
}
.az-nav-shell.is-active .az-nav-bottom-card{
  left:50%;bottom:22px;transform:translateX(-50%);width:330px;padding:11px 12px;
}
.az-nav-shell.is-active .az-nav-destination-row,
.az-nav-shell.is-active .az-nav-reference-actions,
.az-nav-shell.is-active .az-nav-route-choice-list,
.az-nav-shell.is-active .az-nav-trip-strip,
.az-nav-shell.is-active .az-nav-primary-row{display:none}
.az-nav-active-actions{display:grid;grid-template-columns:minmax(0,1fr) 68px;align-items:center;gap:8px;margin:0}
.az-nav-active-actions[hidden]{display:none!important}
.az-nav-active-summary{display:flex;flex-direction:column;min-width:0}
.az-nav-active-summary strong{font-size:17px;line-height:1;color:#fff}
.az-nav-active-summary span{margin-top:4px;font-size:10px;color:#aebfd0}
.az-nav-active-actions .az-nav-expand-btn{display:none!important}
.az-nav-end-btn{min-height:38px;border:1px solid rgba(243,63,88,.42);background:rgba(179,28,52,.92);color:#fff;padding:0 13px}

.az-nav-status-pill{
  position:absolute;top:112px;left:50%;transform:translateX(-50%);height:32px;display:flex;align-items:center;gap:7px;
  padding:0 12px;border:1px solid rgba(49,229,207,.30);border-radius:999px;background:rgba(4,28,37,.93);font-size:10px;font-weight:850;
}
.az-nav-status-dot{width:7px;height:7px;border-radius:50%;background:var(--az-nav-cyan);box-shadow:0 0 10px var(--az-nav-cyan)}
.az-nav-side-controls{
  position:absolute;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:7px;
}
.az-nav-fab{
  width:42px;height:42px;border-radius:13px;border:1px solid rgba(74,154,213,.28);background:rgba(5,25,44,.92);color:#fff;cursor:pointer;
}

/* Routes / Steps drawer */
.az-nav-drawer{
  position:absolute;top:18px;right:18px;bottom:18px;width:min(390px,calc(100vw - 36px));padding:16px;
  border:1px solid var(--az-nav-line-strong);border-radius:22px;background:rgba(3,16,29,.98);box-shadow:var(--az-nav-shadow);
  transform:translateX(calc(100% + 36px));opacity:0;transition:transform .24s ease,opacity .18s ease;overflow:hidden;
}
.az-nav-drawer[aria-hidden="false"]{transform:translateX(0);opacity:1}
.az-nav-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.az-nav-drawer-kicker{color:var(--az-nav-cyan);font-size:9px;font-weight:900;letter-spacing:.13em}
.az-nav-drawer h2{margin:3px 0 0;font-size:19px;color:#fff}
.az-nav-drawer-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:3px;margin-bottom:10px;border:1px solid rgba(90,159,211,.16);
  border-radius:11px;background:rgba(3,14,25,.65)
}
.az-nav-drawer-tabs button{height:32px;border:0;border-radius:8px;background:transparent;color:#91a7b9;font-weight:800;cursor:pointer}
.az-nav-drawer-tabs button.is-active{background:rgba(23,126,211,.24);color:#fff}
.az-nav-route-list,.az-nav-step-list,.az-nav-along-list{height:calc(100% - 100px);overflow:auto;overscroll-behavior:contain}
.az-nav-route-option{
  width:100%;min-height:72px;display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:center;margin-bottom:7px;
  padding:11px;text-align:left;border:1px solid rgba(88,158,211,.18);border-radius:14px;background:rgba(6,27,46,.72);color:#fff;cursor:pointer;
}
.az-nav-route-option.is-selected{border-color:#25a9ff}
.az-nav-route-radio{width:15px;height:15px;border-radius:50%;border:1.5px solid rgba(165,196,222,.45)}
.az-nav-route-option.is-selected .az-nav-route-radio{background:#25a9ff;box-shadow:inset 0 0 0 4px #061a2d}
.az-nav-route-copy{display:flex;flex-direction:column;gap:2px}
.az-nav-route-copy strong{font-size:12px}.az-nav-route-copy span{font-size:10px;color:#c2d0dc}.az-nav-route-copy small{font-size:9px;color:#8198aa}
.az-nav-step{display:grid;grid-template-columns:38px minmax(0,1fr);gap:9px;align-items:center;padding:10px 5px;border-bottom:1px solid rgba(88,158,211,.12)}
.az-nav-step-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(13,55,89,.68)}
.az-nav-step-copy{display:flex;flex-direction:column;gap:2px}.az-nav-step-copy strong{font-size:11px}.az-nav-step-copy span{font-size:11px}.az-nav-step-copy small{font-size:9px;color:#8198aa}
.az-nav-empty{padding:22px 8px;text-align:center;color:#8fa5b8;font-size:11px}

/* Along-route support remains intact */
.az-nav-along-filter-row{display:flex;gap:6px;overflow:auto;padding-bottom:9px}
.az-nav-along-filter-row button{height:31px;padding:0 11px;border-radius:999px;border:1px solid rgba(88,158,211,.22);background:rgba(6,27,46,.72);color:#dce8f2;font-size:10px}
.az-nav-along-filter-row button.is-active{border-color:#25a9ff}
.az-nav-along-item{width:100%;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 3px;border:0;border-bottom:1px solid rgba(88,158,211,.12);background:transparent;color:#fff;text-align:left}
.az-nav-along-thumb{width:48px;height:48px;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:#0d304d}.az-nav-along-thumb img{width:100%;height:100%;object-fit:cover}
.az-nav-along-copy{display:flex;flex-direction:column;gap:2px;min-width:0}.az-nav-along-copy strong{font-size:11px}.az-nav-along-copy span,.az-nav-along-copy small{font-size:9px;color:#9eb0c0}.az-nav-along-time{font-size:10px;color:var(--az-nav-cyan)}

/* TABLET */
@media (min-width:768px) and (max-width:1199px){
  .az-nav-shell.is-preview .az-nav-bottom-card{left:18px;bottom:96px;width:330px}
  .az-nav-top-card{width:min(580px,calc(100vw - 34px))}
}

/* MOBILE — match reference bottom sheet above AproxZ nav rail */
@media (max-width:767px){
  .az-nav-shell.is-preview .az-nav-bottom-card{
    left:8px;right:8px;bottom:calc(76px + env(safe-area-inset-bottom));width:auto;transform:none;padding:10px;border-radius:18px;
  }
  .az-nav-destination-row{grid-template-columns:46px minmax(0,1fr) 28px;gap:8px}
  .az-nav-place-thumb{width:46px;height:46px;border-radius:12px}
  .az-nav-destination{font-size:12px}.az-nav-place-type{font-size:8px}.az-nav-place-address{font-size:7.5px}
  .az-nav-close-btn{width:27px;height:27px;font-size:15px}
  .az-nav-reference-actions{margin-top:8px}.az-nav-reference-actions button{min-height:40px}
  .az-nav-reference-route{display:none}
  .az-nav-route-choice-list{display:none}
  .az-nav-trip-strip{margin-top:8px;padding-top:7px;border-top:1px solid rgba(76,145,196,.13)}
  .az-nav-trip-summary{font-size:9px}.az-nav-trip-eta{font-size:8px}
  .az-nav-primary-row{margin-top:8px;gap:6px}
  .az-nav-primary-btn{min-height:40px;border-radius:12px;font-size:11px}
  .az-nav-secondary-btn{min-height:36px;border-radius:11px;font-size:10px}
  .az-nav-top-card{
    top:max(8px,env(safe-area-inset-top));left:8px;right:8px;width:auto;transform:none;min-height:72px;
    grid-template-columns:46px minmax(0,1fr) 34px;gap:8px;padding:8px;border-radius:17px;
  }
  .az-nav-maneuver-icon{width:43px;height:43px;border-radius:12px;font-size:26px}
  .az-nav-turn-distance{font-size:14px}.az-nav-instruction{font-size:12px}.az-nav-road-badge{font-size:8px}
  .az-nav-icon-btn{width:32px;height:32px;border-radius:10px;font-size:12px}
  .az-nav-status-pill{top:86px;height:28px;font-size:9px}
  .az-nav-side-controls{right:8px;top:auto;bottom:188px;transform:none}
  .az-nav-fab{width:38px;height:38px;border-radius:12px}
  .az-nav-shell.is-active .az-nav-bottom-card{
    left:8px;right:8px;bottom:calc(76px + env(safe-area-inset-bottom));width:auto;transform:none;
  }
  .az-nav-drawer{
    top:auto;left:8px;right:8px;bottom:calc(74px + env(safe-area-inset-bottom));width:auto;height:min(62vh,520px);
    transform:translateY(calc(100% + 24px));border-radius:19px;
  }
  .az-nav-drawer[aria-hidden="false"]{transform:translateY(0)}
}

@media (max-width:390px){
  .az-nav-shell.is-preview .az-nav-bottom-card{left:6px;right:6px}
}


/* =========================================================
   V5 REFERENCE PLACEMENT LOCK
   Desktop preview is vertically centered on the map-left area and never
   anchored to the Daypart/bottom discovery rail.
   ========================================================= */
@media (min-width:1200px){
  .az-nav-shell.is-preview .az-nav-bottom-card{
    left:28px!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-46%)!important;
    width:342px!important;
    max-height:calc(100vh - 250px)!important;
    overflow:auto;
  }
  .az-nav-shell.is-preview .az-nav-route-choice-list{
    display:block!important;
  }
  .az-nav-shell.is-preview .az-nav-reference-route{
    display:grid!important;
  }
}

/* Tablet keeps the reference panel above the discovery rail. */
@media (min-width:768px) and (max-width:1199px){
  .az-nav-shell.is-preview .az-nav-bottom-card{
    left:18px!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-45%)!important;
    width:min(330px,calc(100vw - 36px))!important;
    max-height:calc(100vh - 230px)!important;
  }
}

/* Mobile remains a bottom sheet because that is the approved mobile reference. */
@media (max-width:767px){
  .az-nav-shell.is-preview .az-nav-bottom-card{
    top:auto!important;
    bottom:calc(76px + env(safe-area-inset-bottom))!important;
    transform:none!important;
    max-height:calc(100vh - 190px)!important;
  }
}


/* =========================================================
   V6 — APROXZ DAYPART TINY-CARD VISUAL LANGUAGE
   Matches the canonical daypart tiny-card material:
   border rgba(117,145,170,.22), radius 18px,
   dark navy glass gradient + low black shadow.
   ========================================================= */

.az-nav-shell.is-preview .az-nav-bottom-card,
.az-nav-drawer,
.az-nav-shell.is-active .az-nav-bottom-card,
.az-nav-top-card{
  border:1px solid rgba(117,145,170,.22)!important;
  background:
    radial-gradient(circle at 16% 20%,rgba(32,230,167,.045),transparent 36%),
    linear-gradient(145deg,rgba(10,24,39,.92),rgba(7,18,31,.92))!important;
  box-shadow:0 8px 22px rgba(0,0,0,.20)!important;
  backdrop-filter:blur(18px) saturate(118%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(118%)!important;
}

.az-nav-shell.is-preview .az-nav-bottom-card{
  width:362px!important;
  border-radius:18px!important;
  padding:12px!important;
}

/* Place header */
.az-nav-destination-row{
  grid-template-columns:58px minmax(0,1fr) 32px!important;
  gap:10px!important;
  align-items:center!important;
}
.az-nav-place-thumb{
  width:58px!important;height:58px!important;border-radius:50%!important;
  border:1px solid rgba(203,213,225,.26)!important;background:#071522!important;
}
.az-nav-place-thumb img{border-radius:50%!important}
.az-nav-destination{font-size:15px!important;line-height:1.1!important;font-weight:700!important}
.az-nav-place-type{font-size:10px!important;line-height:1.15!important;font-weight:500!important;color:rgba(214,225,236,.80)!important}
.az-nav-place-address{font-size:9px!important;line-height:1.2!important;font-weight:450!important;color:rgba(161,180,198,.72)!important}
.az-nav-close-btn{
  width:32px!important;height:32px!important;border-radius:50%!important;
  border:1px solid rgba(117,145,170,.22)!important;background:rgba(15,26,41,.68)!important;
  font-size:18px!important;
}

/* Correct Save / Share / Details hierarchy */
.az-nav-reference-actions{
  margin-top:10px!important;
  border:1px solid rgba(117,145,170,.18)!important;
  border-radius:14px!important;
  background:rgba(10,24,39,.48)!important;
}
.az-nav-reference-actions button{
  min-height:58px!important;
  gap:5px!important;
  color:#f8fafc!important;
}
.az-nav-reference-actions span{
  font-size:20px!important;
  line-height:1!important;
  font-weight:650!important;
}
.az-nav-reference-actions small{
  font-size:10.5px!important;
  line-height:1!important;
  font-weight:600!important;
  color:rgba(226,232,240,.88)!important;
}

/* Drive / Walk / Bike */
.az-nav-mode-row{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:7px!important;
  margin-top:10px!important;
}
.az-nav-mode-row button{
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border:1px solid rgba(117,145,170,.20)!important;
  border-radius:12px!important;
  background:rgba(15,26,41,.68)!important;
  color:rgba(218,229,239,.82)!important;
  cursor:pointer!important;
}
.az-nav-mode-row button span{font-size:14px!important}
.az-nav-mode-row button small{font-size:10.5px!important;font-weight:650!important}
.az-nav-mode-row button.is-active{
  border-color:rgba(32,230,167,.42)!important;
  background:rgba(16,105,78,.16)!important;
  color:#53e9b7!important;
  box-shadow:0 0 0 1px rgba(32,230,167,.06),0 0 18px rgba(32,230,167,.08)!important;
}

/* Route rows closer to reference */
.az-nav-route-choice-list{
  margin-top:10px!important;
  border-top:1px solid rgba(117,145,170,.14)!important;
}
.az-nav-reference-route{
  min-height:54px!important;
  grid-template-columns:20px minmax(0,1fr) 20px!important;
  gap:10px!important;
  padding:8px 5px!important;
  border-bottom:1px solid rgba(117,145,170,.14)!important;
}
.az-nav-reference-route-copy strong{
  font-size:12.5px!important;
  line-height:1.1!important;
  font-weight:650!important;
}
.az-nav-reference-route-copy small{
  margin-top:2px!important;
  font-size:9.5px!important;
  line-height:1.1!important;
  font-weight:450!important;
  color:rgba(161,180,198,.72)!important;
}
.az-nav-reference-route-mark{font-size:17px!important}
.az-nav-reference-radio{
  width:18px!important;height:18px!important;border:1.5px solid rgba(181,205,232,.42)!important;
}
.az-nav-reference-route.is-selected .az-nav-reference-radio{
  border-color:#35e6ad!important;background:#20e6a7!important;
  box-shadow:inset 0 0 0 4px #071522!important;
}
.az-nav-reference-route.is-selected .az-nav-reference-route-mark{color:#35e6ad!important}
.az-nav-reference-route.is-disabled{opacity:.42!important;cursor:not-allowed!important}

/* Trip line */
.az-nav-trip-strip{
  padding:8px 2px 0!important;
  margin-top:0!important;
}
.az-nav-trip-summary{font-size:11px!important;font-weight:650!important}
.az-nav-trip-eta{font-size:10px!important;font-weight:500!important}

/* Reference Start Navigation button */
.az-nav-primary-btn{
  min-height:48px!important;
  border-radius:14px!important;
  color:#ffffff!important;
  font-size:12.5px!important;
  font-weight:700!important;
  letter-spacing:.005em!important;
  background:linear-gradient(90deg,#42bfff 0%,#149eff 48%,#087cf4 100%)!important;
  box-shadow:0 8px 24px rgba(8,124,244,.26),inset 0 1px 0 rgba(255,255,255,.20)!important;
}
.az-nav-primary-btn span{font-size:15px!important;color:#fff!important}
.az-nav-primary-btn:hover{filter:brightness(1.04)!important}

.az-nav-secondary-btn{
  min-height:44px!important;
  border-radius:14px!important;
  border:1px solid rgba(117,145,170,.24)!important;
  background:rgba(15,26,41,.68)!important;
  color:#f8fafc!important;
  font-size:11.5px!important;
  font-weight:600!important;
}

/* Remove the redundant navigation-side buttons.
   The map's existing three controls remain untouched. */
.az-nav-side-controls{display:none!important}

/* Route drawer: same glass family as tiny cards, not a solid navy slab */
.az-nav-drawer{
  width:min(360px,calc(100vw - 36px))!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 14% 8%,rgba(32,230,167,.045),transparent 34%),
    linear-gradient(145deg,rgba(10,24,39,.94),rgba(7,18,31,.94))!important;
}
.az-nav-drawer h2{font-size:20px!important;font-weight:700!important}
.az-nav-drawer-kicker{font-size:9px!important;font-weight:700!important;color:#53e9b7!important}
.az-nav-drawer-tabs{
  border:1px solid rgba(117,145,170,.18)!important;
  background:rgba(15,26,41,.52)!important;
}
.az-nav-route-option{
  border:1px solid rgba(117,145,170,.18)!important;
  border-radius:14px!important;
  background:rgba(15,26,41,.62)!important;
  min-height:70px!important;
}
.az-nav-route-option.is-selected{
  border-color:rgba(32,230,167,.42)!important;
  background:rgba(16,105,78,.13)!important;
}

/* Active nav bottom card stays compact and glass */
.az-nav-shell.is-active .az-nav-bottom-card{
  border-radius:18px!important;
}
.az-nav-active-summary strong{font-size:18px!important;font-weight:700!important}
.az-nav-active-summary span{font-size:10px!important}

/* Mobile keeps same material and increases tap/readability */
@media (max-width:767px){
  .az-nav-shell.is-preview .az-nav-bottom-card{
    left:8px!important;right:8px!important;width:auto!important;
    border-radius:18px!important;padding:11px!important;
  }
  .az-nav-reference-actions button{min-height:54px!important}
  .az-nav-reference-actions span{font-size:19px!important}
  .az-nav-reference-actions small{font-size:10px!important}
  .az-nav-mode-row button{min-height:40px!important}
  .az-nav-mode-row button small{font-size:10px!important}
  .az-nav-route-choice-list{display:block!important}
  .az-nav-reference-route{display:grid!important;min-height:49px!important}
  .az-nav-primary-btn{min-height:46px!important;font-size:12px!important}
  .az-nav-secondary-btn{min-height:42px!important;font-size:11px!important}
}


/* =========================================================
   V7 — CENTERED PANOPTIS-STYLE NAVIGATION FLOW
   Reference lock: 2026-09-11 Navigation UI Flow
   ========================================================= */

#az-navigation-ui .az-nav-side-controls{display:none!important}

/* Full route preview is a centered glass overlay, never a left rail card. */
#az-navigation-ui.is-preview .az-nav-bottom-card,
#az-navigation-ui.is-active:not(.is-collapsed) .az-nav-bottom-card{
  left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:min(390px,calc(100vw - 36px))!important;max-height:min(650px,calc(100vh - 190px))!important;
  padding:14px!important;overflow:auto!important;
  border:1px solid rgba(49,174,255,.62)!important;border-radius:18px!important;
  background:linear-gradient(180deg,rgba(5,24,41,.90),rgba(3,16,29,.92))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.035)!important;
  backdrop-filter:blur(24px) saturate(132%)!important;-webkit-backdrop-filter:blur(24px) saturate(132%)!important;
}

/* Destination = same visual hierarchy as the current Daypart tiny listing cards. */
#az-navigation-ui .az-nav-destination-row{
  min-height:76px!important;display:grid!important;grid-template-columns:68px minmax(0,1fr) 34px!important;
  column-gap:10px!important;align-items:center!important;padding:4px 4px 4px 4px!important;
  border:1px solid rgba(148,163,184,.17)!important;border-radius:22px!important;
  background:linear-gradient(180deg,rgba(14,27,44,.84),rgba(8,19,33,.84))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 6px 18px rgba(0,0,0,.12)!important;
}
#az-navigation-ui .az-nav-place-thumb{
  width:68px!important;height:68px!important;border-radius:50%!important;border:1px solid rgba(226,232,240,.22)!important;
  overflow:hidden!important;background:#111c2c!important;box-shadow:0 3px 12px rgba(0,0,0,.20)!important;
}
#az-navigation-ui .az-nav-place-thumb img{width:100%!important;height:100%!important;border-radius:50%!important;object-fit:cover!important}
#az-navigation-ui .az-nav-destination{font-size:14px!important;font-weight:750!important;line-height:1.12!important;color:#f8fafc!important}
#az-navigation-ui .az-nav-place-type{font-size:10.5px!important;line-height:1.15!important;color:rgba(203,213,225,.76)!important}
#az-navigation-ui .az-nav-place-address{font-size:9.5px!important;line-height:1.2!important;color:rgba(148,163,184,.78)!important}
#az-navigation-ui .az-nav-close-btn{width:32px!important;height:32px!important;font-size:20px!important}

/* Stronger action hierarchy. */
#az-navigation-ui .az-nav-reference-actions{margin-top:10px!important;border-radius:13px!important}
#az-navigation-ui .az-nav-reference-actions button{min-height:58px!important;gap:5px!important}
#az-navigation-ui .az-nav-reference-actions span{font-size:21px!important}
#az-navigation-ui .az-nav-reference-actions small{font-size:11px!important;font-weight:750!important;color:#e3edf5!important}

#az-navigation-ui .az-nav-mode-row{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:7px!important;margin-top:9px!important}
#az-navigation-ui .az-nav-mode-row button{min-height:42px!important;border:1px solid rgba(90,159,211,.24)!important;border-radius:11px!important;background:rgba(6,27,46,.68)!important;color:#dbe7f1!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;cursor:pointer!important}
#az-navigation-ui .az-nav-mode-row button span{font-size:14px!important}
#az-navigation-ui .az-nav-mode-row button small{font-size:11px!important;font-weight:760!important}
#az-navigation-ui .az-nav-mode-row button.is-active{border-color:rgba(32,201,151,.72)!important;background:rgba(32,201,151,.10)!important;color:#36dda8!important;box-shadow:0 0 18px rgba(32,201,151,.10)!important}

#az-navigation-ui .az-nav-reference-route{min-height:52px!important;padding:8px 5px!important}
#az-navigation-ui .az-nav-reference-route-copy strong{font-size:13px!important}
#az-navigation-ui .az-nav-reference-route-copy small{font-size:10.5px!important}
#az-navigation-ui .az-nav-reference-route-mark{font-size:17px!important}
#az-navigation-ui .az-nav-reference-radio{width:18px!important;height:18px!important}
#az-navigation-ui .az-nav-trip-summary{font-size:12px!important}
#az-navigation-ui .az-nav-trip-eta{font-size:11px!important}
#az-navigation-ui .az-nav-primary-btn{min-height:48px!important;font-size:13px!important;color:#fff!important;background:linear-gradient(90deg,#26b9ff,#087cff)!important}
#az-navigation-ui .az-nav-secondary-btn{min-height:43px!important;font-size:12px!important}

/* During active guidance the centered card remains open until the user closes it. */
#az-navigation-ui.is-active:not(.is-collapsed) .az-nav-destination-row,
#az-navigation-ui.is-active:not(.is-collapsed) .az-nav-reference-actions,
#az-navigation-ui.is-active:not(.is-collapsed) .az-nav-trip-strip{display:grid!important}
#az-navigation-ui.is-active:not(.is-collapsed) .az-nav-reference-actions{display:grid!important}
#az-navigation-ui.is-active:not(.is-collapsed) .az-nav-trip-strip{display:flex!important}
#az-navigation-ui.is-active:not(.is-collapsed) .az-nav-route-choice-list{display:none!important}
#az-navigation-ui.is-active:not(.is-collapsed) .az-nav-active-actions{display:grid!important;margin-top:10px!important}
#az-navigation-ui.is-active:not(.is-collapsed) .az-nav-active-summary strong{font-size:18px!important}
#az-navigation-ui.is-active:not(.is-collapsed) .az-nav-active-summary span{font-size:11px!important}

/* Collapsing the full card NEVER ends the route. */
#az-navigation-ui.is-collapsed .az-nav-bottom-card{display:none!important}
#az-navigation-ui.is-collapsed .az-nav-drawer{display:none!important}

#az-navigation-ui .az-nav-mini-card{
  position:absolute;left:24px;top:50%;transform:translateY(-50%);width:min(430px,calc(100vw - 48px));min-height:76px;
  display:grid;grid-template-columns:58px minmax(0,1fr) auto auto;align-items:center;gap:9px;padding:7px 9px 7px 7px;
  pointer-events:auto;border:1px solid rgba(148,163,184,.18);border-radius:22px;
  background:linear-gradient(180deg,rgba(14,27,44,.88),rgba(8,19,33,.90));
  box-shadow:0 14px 38px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(20px) saturate(125%);-webkit-backdrop-filter:blur(20px) saturate(125%);
}
#az-navigation-ui .az-nav-mini-card[hidden]{display:none!important}
#az-navigation-ui .az-nav-mini-thumb{width:58px;height:58px;border-radius:50%;overflow:hidden;border:1px solid rgba(226,232,240,.20);background:#111c2c}
#az-navigation-ui .az-nav-mini-thumb img{width:100%;height:100%;object-fit:cover}
#az-navigation-ui .az-nav-mini-copy{min-width:0;display:flex;flex-direction:column;gap:4px}
#az-navigation-ui .az-nav-mini-copy strong{font-size:12.5px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#az-navigation-ui .az-nav-mini-copy small{font-size:11px;font-weight:750;color:#35dda5}
#az-navigation-ui .az-nav-mini-continue,#az-navigation-ui .az-nav-mini-cancel{height:40px;border-radius:11px;padding:0 13px;font-size:11px;font-weight:800;cursor:pointer}
#az-navigation-ui .az-nav-mini-continue{border:0;background:linear-gradient(90deg,#2abfff,#087cff);color:#fff}
#az-navigation-ui .az-nav-mini-cancel{border:1px solid rgba(148,163,184,.22);background:rgba(5,20,34,.74);color:#dce8f2}

/* No duplicate right-side map controls from navigation. */
#az-navigation-ui .az-nav-side-controls{display:none!important}

@media(max-width:767px){
  #az-navigation-ui.is-preview .az-nav-bottom-card,
  #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-bottom-card{
    left:10px!important;right:10px!important;top:50%!important;bottom:auto!important;width:auto!important;
    transform:translateY(-50%)!important;max-height:calc(100vh - 150px)!important;padding:11px!important;border-radius:17px!important;
  }
  #az-navigation-ui .az-nav-destination-row{grid-template-columns:58px minmax(0,1fr) 31px!important;min-height:66px!important;border-radius:18px!important}
  #az-navigation-ui .az-nav-place-thumb{width:58px!important;height:58px!important}
  #az-navigation-ui .az-nav-destination{font-size:13px!important}
  #az-navigation-ui .az-nav-place-type{font-size:9.5px!important}
  #az-navigation-ui .az-nav-place-address{font-size:8.5px!important}
  #az-navigation-ui .az-nav-reference-actions button{min-height:52px!important}
  #az-navigation-ui .az-nav-reference-actions span{font-size:19px!important}
  #az-navigation-ui .az-nav-reference-actions small{font-size:10px!important}
  #az-navigation-ui .az-nav-route-choice-list{display:block!important}
  #az-navigation-ui .az-nav-reference-route{display:grid!important;min-height:48px!important}
  #az-navigation-ui .az-nav-mini-card{left:10px;right:10px;top:auto;bottom:calc(84px + env(safe-area-inset-bottom));transform:none;width:auto;grid-template-columns:50px minmax(0,1fr) auto auto;min-height:66px;border-radius:18px}
  #az-navigation-ui .az-nav-mini-thumb{width:50px;height:50px}
  #az-navigation-ui .az-nav-mini-continue,#az-navigation-ui .az-nav-mini-cancel{height:38px;padding:0 10px}
  #az-navigation-ui .az-nav-top-card{top:max(8px,env(safe-area-inset-top))!important}
}

@media(max-width:480px){
  #az-navigation-ui .az-nav-mini-card{grid-template-columns:46px minmax(0,1fr) 86px 40px;gap:7px}
  #az-navigation-ui .az-nav-mini-thumb{width:46px;height:46px}
  #az-navigation-ui .az-nav-mini-cancel span{display:none}
  #az-navigation-ui .az-nav-mini-cancel{padding:0;width:40px}
}


/* =========================================================
   V8 — REFERENCE CENTER LOCK + ICON SYSTEM
   Navigation is hidden until explicit Directions starts it.
   ========================================================= */
#az-navigation-ui.is-preview .az-nav-bottom-card{
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:390px!important;
  max-width:calc(100vw - 40px)!important;
  max-height:calc(100vh - 190px)!important;
  margin:0!important;
}
#az-navigation-ui .az-nav-reference-actions svg,
#az-navigation-ui .az-nav-mode-row svg,
#az-navigation-ui .az-nav-primary-btn svg,
#az-navigation-ui .az-nav-secondary-btn svg,
#az-navigation-ui .az-nav-mini-card svg,
#az-navigation-ui .az-nav-icon-btn svg,
#az-navigation-ui .az-nav-close-btn svg,
#az-navigation-ui .az-nav-reference-route-mark svg{
  display:block;
  width:1em;
  height:1em;
}
#az-navigation-ui .az-nav-reference-actions span{
  width:24px!important;height:24px!important;display:grid!important;place-items:center!important;
}
#az-navigation-ui .az-nav-reference-actions span svg{width:22px!important;height:22px!important}
#az-navigation-ui .az-nav-mode-row span{width:20px!important;height:20px!important;display:grid!important;place-items:center!important}
#az-navigation-ui .az-nav-mode-row span svg{width:19px!important;height:19px!important}
#az-navigation-ui .az-nav-reference-route-mark{width:22px!important;height:22px!important;display:grid!important;place-items:center!important}
#az-navigation-ui .az-nav-reference-route-mark svg{width:20px!important;height:20px!important}
#az-navigation-ui .az-nav-primary-btn span,#az-navigation-ui .az-nav-secondary-btn span{display:inline-grid!important;place-items:center!important;vertical-align:middle!important;margin-right:7px!important}
#az-navigation-ui .az-nav-primary-btn svg{width:19px!important;height:19px!important}
#az-navigation-ui .az-nav-secondary-btn svg{width:18px!important;height:18px!important}
#az-navigation-ui .az-nav-close-btn svg{width:18px!important;height:18px!important}
#az-navigation-ui .az-nav-icon-btn svg{width:19px!important;height:19px!important;margin:auto!important}
#az-navigation-ui .az-nav-mini-continue svg,#az-navigation-ui .az-nav-mini-cancel svg{width:15px!important;height:15px!important;display:inline-block!important;vertical-align:-2px!important;margin-right:4px!important}

@media (min-width:768px){
  #az-navigation-ui.is-preview .az-nav-bottom-card{
    left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
    transform:translate(-50%,-50%)!important;
  }
}


/* =========================================================
   V9 — FINAL MINI-CARD POSITION + CLEAN ACTION HIERARCHY
   ========================================================= */

/* Save / Details are intentionally not part of the navigation decision surface. */
#az-navigation-ui .az-nav-reference-actions{
  display:none!important;
}

/* Share becomes a full-width navigation action below Routes & Steps. */
#az-navigation-ui .az-nav-share-btn{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid rgba(117,145,170,.24);
  border-radius:14px;
  background:rgba(15,26,41,.68);
  color:#f8fafc;
  font-size:12px;
  line-height:1;
  font-weight:650;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
#az-navigation-ui .az-nav-share-btn svg{
  width:17px;
  height:17px;
  flex:0 0 auto;
}
#az-navigation-ui .az-nav-share-btn:hover{
  border-color:rgba(73,178,242,.38);
  background:rgba(18,34,53,.82);
}

/* Approved placement:
   floating glass trip card at the upper-left of the MAP, just under top nav.
   It stays out of the actual top-nav DOM so desktop/car widths remain stable. */
#az-navigation-ui .az-nav-mini-card{
  left:24px!important;
  top:96px!important;
  bottom:auto!important;
  transform:none!important;
  width:min(430px,calc(100vw - 48px))!important;
}

/* The collapsed state shows ONLY the mini navigation card. */
#az-navigation-ui.is-collapsed .az-nav-bottom-card,
#az-navigation-ui.is-collapsed .az-nav-top-card,
#az-navigation-ui.is-collapsed .az-nav-status-pill,
#az-navigation-ui.is-collapsed .az-nav-drawer{
  display:none!important;
}

@media (max-width:1199px) and (min-width:768px){
  #az-navigation-ui .az-nav-mini-card{
    left:18px!important;
    top:92px!important;
    width:min(410px,calc(100vw - 36px))!important;
  }
}

@media (max-width:767px){
  /* Mobile remains above AproxZ's bottom nav; desktop placement does not leak down. */
  #az-navigation-ui .az-nav-mini-card{
    left:10px!important;
    right:10px!important;
    top:auto!important;
    bottom:calc(84px + env(safe-area-inset-bottom))!important;
    transform:none!important;
    width:auto!important;
  }

  #az-navigation-ui .az-nav-share-btn{
    min-height:44px;
    border-radius:12px;
    font-size:11.5px;
  }
}


/* =========================================================
   V10 — UNIFIED ACTIVE GUIDANCE RAIL
   Approved 2026-09-14 desktop + mobile navigation hierarchy.
   Preview keeps travel-mode/route selection. Once navigation begins,
   those controls disappear and one compact guidance rail owns the UI.
   ========================================================= */
#az-navigation-ui.is-active .az-nav-top-card{display:none!important}
#az-navigation-ui.is-active:not(.is-collapsed) .az-nav-destination-row,
#az-navigation-ui.is-active:not(.is-collapsed) .az-nav-mode-row,
#az-navigation-ui.is-active:not(.is-collapsed) .az-nav-reference-actions,
#az-navigation-ui.is-active:not(.is-collapsed) .az-nav-route-choice-list,
#az-navigation-ui.is-active:not(.is-collapsed) .az-nav-trip-strip,
#az-navigation-ui.is-active:not(.is-collapsed) .az-nav-primary-row,
#az-navigation-ui.is-active:not(.is-collapsed) .az-nav-expanded-content{display:none!important}

@media (min-width:768px){
  #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-bottom-card{
    left:50%!important;right:auto!important;top:auto!important;bottom:78px!important;transform:translateX(-50%)!important;
    width:min(1120px,calc(100vw - 72px))!important;max-height:none!important;overflow:visible!important;
    padding:10px 12px!important;border-radius:20px!important;
    border:1px solid rgba(49,174,255,.48)!important;
    background:linear-gradient(180deg,rgba(5,24,41,.93),rgba(3,16,29,.95))!important;
    box-shadow:0 18px 48px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.035)!important;
    backdrop-filter:blur(24px) saturate(132%)!important;-webkit-backdrop-filter:blur(24px) saturate(132%)!important;
  }
  #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-active-actions{
    display:grid!important;grid-template-columns:minmax(190px,240px) 1px minmax(340px,1fr) minmax(130px,190px) 110px 64px!important;
    align-items:center!important;gap:14px!important;margin:0!important;
  }
  #az-navigation-ui .az-nav-active-place{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center;min-width:0}
  #az-navigation-ui .az-nav-active-thumb{width:52px;height:52px;border-radius:50%;overflow:hidden;background:#102238;border:1px solid rgba(255,255,255,.16)}
  #az-navigation-ui .az-nav-active-thumb[hidden]{display:none!important}
  #az-navigation-ui .az-nav-active-thumb img{width:100%;height:100%;display:block;object-fit:cover}
  #az-navigation-ui .az-nav-active-place-copy{min-width:0;display:flex;flex-direction:column;gap:4px}
  #az-navigation-ui .az-nav-active-place-copy strong{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #az-navigation-ui .az-nav-active-place-copy small{font-size:10px;color:#9fb2c4;white-space:nowrap}
  #az-navigation-ui .az-nav-active-divider{width:1px;height:44px;background:rgba(128,173,207,.28)}
  #az-navigation-ui .az-nav-active-maneuver{display:grid;grid-template-columns:50px minmax(0,1fr) 34px;gap:10px;align-items:center;min-width:0}
  #az-navigation-ui .az-nav-active-maneuver .az-nav-maneuver-icon{width:48px;height:48px;border-radius:13px;font-size:28px}
  #az-navigation-ui .az-nav-active-maneuver .az-nav-turn-distance{font-size:20px!important;line-height:1;font-weight:900!important}
  #az-navigation-ui .az-nav-active-maneuver .az-nav-instruction{font-size:12px!important;line-height:1.25;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #az-navigation-ui .az-nav-active-maneuver .az-nav-road-badge{font-size:9px!important;max-width:140px}
  #az-navigation-ui .az-nav-active-maneuver .az-nav-icon-btn{width:32px;height:32px;border-radius:10px}
  #az-navigation-ui .az-nav-active-progress{height:6px;border-radius:999px;background:rgba(111,151,184,.24);overflow:hidden}
  #az-navigation-ui .az-nav-active-progress>span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#31e5cf,#159cff);transition:width .3s ease}
  #az-navigation-ui .az-nav-active-summary{align-items:flex-end!important;text-align:right}
  #az-navigation-ui .az-nav-active-summary strong{font-size:18px!important;font-weight:850!important}
  #az-navigation-ui .az-nav-active-summary span{font-size:10px!important;color:#9fb2c4!important}
  #az-navigation-ui .az-nav-end-btn{min-height:42px!important;border-radius:12px!important;padding:0 12px!important}
}

@media (max-width:767px){
  #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-bottom-card{
    left:8px!important;right:8px!important;top:auto!important;bottom:calc(76px + env(safe-area-inset-bottom))!important;
    width:auto!important;transform:none!important;padding:10px!important;max-height:none!important;overflow:visible!important;border-radius:18px!important;
  }
  #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-active-actions{
    display:grid!important;grid-template-columns:minmax(0,1fr) 62px!important;grid-template-areas:
      "place place"
      "maneuver maneuver"
      "progress progress"
      "summary end";gap:8px 10px!important;margin:0!important;
  }
  #az-navigation-ui .az-nav-active-place{grid-area:place;display:grid;grid-template-columns:46px minmax(0,1fr);gap:9px;align-items:center;min-width:0;padding-bottom:7px;border-bottom:1px solid rgba(88,158,211,.14)}
  #az-navigation-ui .az-nav-active-thumb{width:46px;height:46px;border-radius:12px;overflow:hidden;background:#102238}
  #az-navigation-ui .az-nav-active-thumb[hidden]{display:none!important}
  #az-navigation-ui .az-nav-active-thumb img{width:100%;height:100%;object-fit:cover}
  #az-navigation-ui .az-nav-active-place-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
  #az-navigation-ui .az-nav-active-place-copy strong{font-size:12px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #az-navigation-ui .az-nav-active-place-copy small{font-size:9px;color:#9fb2c4}
  #az-navigation-ui .az-nav-active-divider{display:none}
  #az-navigation-ui .az-nav-active-maneuver{grid-area:maneuver;display:grid;grid-template-columns:44px minmax(0,1fr) 32px;gap:8px;align-items:center;min-width:0}
  #az-navigation-ui .az-nav-active-maneuver .az-nav-maneuver-icon{width:42px;height:42px;border-radius:12px;font-size:25px}
  #az-navigation-ui .az-nav-active-maneuver .az-nav-turn-distance{font-size:17px!important}
  #az-navigation-ui .az-nav-active-maneuver .az-nav-instruction{font-size:11px!important;line-height:1.2;margin-top:3px}
  #az-navigation-ui .az-nav-active-maneuver .az-nav-road-badge{font-size:8px!important}
  #az-navigation-ui .az-nav-active-maneuver .az-nav-icon-btn{width:30px;height:30px;border-radius:9px}
  #az-navigation-ui .az-nav-active-progress{grid-area:progress;height:5px;border-radius:999px;background:rgba(111,151,184,.24);overflow:hidden}
  #az-navigation-ui .az-nav-active-progress>span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#31e5cf,#159cff);transition:width .3s ease}
  #az-navigation-ui .az-nav-active-summary{grid-area:summary;align-items:flex-start!important;text-align:left}
  #az-navigation-ui .az-nav-active-summary strong{font-size:17px!important}
  #az-navigation-ui .az-nav-active-summary span{font-size:9px!important}
  #az-navigation-ui .az-nav-end-btn{grid-area:end;min-height:38px!important;border-radius:11px!important}
}

/* =========================================================
   V11 — APPROVED MOBILE NAVIGATION CARD
   Reference: AproxZ Mobile Navigation Flow
   Scope: phone/tablet presentation only.

   Architecture:
   - Preview keeps destination + Drive/Walk/Bike + route choices.
   - Active guidance removes destination/mode/route-selection clutter.
   - Active guidance uses ONE compact bottom card:
       maneuver -> progress -> remaining time / distance / ETA -> End
   - The existing expand handle reveals the existing quick actions.
   - Desktop unified guidance remains unchanged.
   ========================================================= */
@media (max-width:767px){

  /* PREVIEW / ROUTE SELECTION:
     place + mode + route selection stays available BEFORE Start Navigation. */
  html[data-az-layout="mobile"] #az-navigation-ui.is-preview .az-nav-bottom-card{
    left:10px!important;
    right:10px!important;
    top:auto!important;
    bottom:calc(var(--az-mui-bottom-h,82px) + env(safe-area-inset-bottom,0px) + 10px)!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(58vh,560px)!important;
    transform:none!important;
    padding:11px!important;
    overflow:auto!important;
    border-radius:20px!important;
    border:1px solid rgba(49,174,255,.48)!important;
    background:linear-gradient(180deg,rgba(5,24,41,.96),rgba(3,16,29,.98))!important;
    box-shadow:0 18px 48px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.035)!important;
    backdrop-filter:blur(22px) saturate(130%)!important;
    -webkit-backdrop-filter:blur(22px) saturate(130%)!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-preview .az-nav-destination-row{
    min-height:62px!important;
    grid-template-columns:54px minmax(0,1fr) 30px!important;
    gap:9px!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-preview .az-nav-place-thumb{
    width:54px!important;
    height:54px!important;
    border-radius:14px!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-preview .az-nav-mode-row{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    margin-top:9px!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-preview .az-nav-mode-row button{
    min-height:42px!important;
    border-radius:11px!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-preview .az-nav-route-choice-list{
    display:block!important;
    margin-top:8px!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-preview .az-nav-reference-route{
    display:grid!important;
    min-height:46px!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-preview .az-nav-primary-row{
    display:grid!important;
    gap:6px!important;
    margin-top:9px!important;
  }

  /* ACTIVE NAVIGATION:
     the mode was already chosen in Preview, so it is intentionally removed. */
  html[data-az-layout="mobile"] #az-navigation-ui.is-active .az-nav-top-card{
    display:none!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-bottom-card{
    left:10px!important;
    right:10px!important;
    top:auto!important;
    bottom:calc(var(--az-mui-bottom-h,82px) + env(safe-area-inset-bottom,0px) + 10px)!important;
    width:auto!important;
    max-width:none!important;
    max-height:none!important;
    transform:none!important;
    overflow:visible!important;
    padding:8px 10px 10px!important;
    border-radius:20px!important;
    border:1px solid rgba(49,174,255,.50)!important;
    background:linear-gradient(180deg,rgba(4,22,38,.97),rgba(2,14,26,.985))!important;
    box-shadow:0 18px 48px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.04)!important;
    backdrop-filter:blur(22px) saturate(132%)!important;
    -webkit-backdrop-filter:blur(22px) saturate(132%)!important;
  }

  /* Route-selection content disappears once guidance begins. */
  html[data-az-layout="mobile"] #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-destination-row,
  html[data-az-layout="mobile"] #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-mode-row,
  html[data-az-layout="mobile"] #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-reference-actions,
  html[data-az-layout="mobile"] #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-route-choice-list,
  html[data-az-layout="mobile"] #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-trip-strip,
  html[data-az-layout="mobile"] #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-primary-row,
  html[data-az-layout="mobile"] #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-active-place,
  html[data-az-layout="mobile"] #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-active-divider{
    display:none!important;
  }

  /* Small swipe/tap handle: expands details without ending navigation. */
  html[data-az-layout="mobile"] #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-collapse-handle{
    display:flex!important;
    width:52px!important;
    height:10px!important;
    margin:-2px auto 4px!important;
    padding:0!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    background:transparent!important;
    cursor:pointer!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-collapse-handle span{
    width:34px!important;
    height:4px!important;
    border-radius:999px!important;
    background:rgba(203,213,225,.62)!important;
  }

  /* Main approved active card hierarchy. */
  html[data-az-layout="mobile"] #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-active-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 70px!important;
    grid-template-areas:
      "maneuver maneuver"
      "progress progress"
      "summary end"!important;
    align-items:center!important;
    gap:8px 10px!important;
    margin:0!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-active .az-nav-active-maneuver{
    grid-area:maneuver!important;
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr) 34px!important;
    gap:9px!important;
    align-items:center!important;
    min-width:0!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-active .az-nav-active-maneuver .az-nav-maneuver-icon{
    width:46px!important;
    height:46px!important;
    border-radius:13px!important;
    font-size:27px!important;
    background:linear-gradient(180deg,rgba(15,89,145,.58),rgba(8,55,95,.48))!important;
    border:1px solid rgba(66,184,255,.34)!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-active .az-nav-active-maneuver .az-nav-turn-distance{
    font-size:20px!important;
    font-weight:900!important;
    line-height:1!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-active .az-nav-active-maneuver .az-nav-instruction{
    margin-top:4px!important;
    font-size:12px!important;
    font-weight:800!important;
    line-height:1.22!important;
    color:#fff!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-active .az-nav-active-maneuver .az-nav-road-badge{
    display:none!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-active .az-nav-active-maneuver .az-nav-icon-btn{
    width:33px!important;
    height:33px!important;
    border-radius:10px!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-active .az-nav-active-progress{
    grid-area:progress!important;
    display:block!important;
    width:100%!important;
    height:5px!important;
    margin-top:1px!important;
    overflow:hidden!important;
    border-radius:999px!important;
    background:rgba(117,145,170,.24)!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-active .az-nav-active-progress > span{
    display:block!important;
    height:100%!important;
    border-radius:inherit!important;
    background:linear-gradient(90deg,#31e5cf,#159cff)!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-active .az-nav-active-summary{
    grid-area:summary!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    text-align:left!important;
    gap:3px!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-active .az-nav-active-summary strong{
    font-size:19px!important;
    line-height:1!important;
    font-weight:900!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-active .az-nav-active-summary span{
    font-size:10px!important;
    color:#9fb2c4!important;
    white-space:nowrap!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-active .az-nav-end-btn{
    grid-area:end!important;
    min-height:40px!important;
    width:70px!important;
    padding:0!important;
    border-radius:12px!important;
    font-size:12px!important;
    font-weight:850!important;
  }

  /* Optional expanded state from the approved flow.
     Reuses the EXISTING quick actions — no second renderer. */
  html[data-az-layout="mobile"] #az-navigation-ui.is-active:not(.is-expanded) .az-nav-expanded-content{
    display:none!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-active.is-expanded .az-nav-expanded-content{
    display:block!important;
    margin-top:9px!important;
    padding-top:9px!important;
    border-top:1px solid rgba(88,158,211,.14)!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-active.is-expanded .az-nav-quick-actions{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
  }

  html[data-az-layout="mobile"] #az-navigation-ui.is-active.is-expanded .az-nav-quick-actions button{
    min-height:48px!important;
    border-radius:11px!important;
    font-size:10px!important;
  }

  /* Rerouting stays attached to the active card instead of creating another panel. */
  html[data-az-layout="mobile"] #az-navigation-ui .az-nav-status-pill{
    top:auto!important;
    bottom:calc(var(--az-mui-bottom-h,82px) + env(safe-area-inset-bottom,0px) + 174px)!important;
    height:28px!important;
    font-size:9px!important;
  }

  /* Collapsed/minimized state remains the existing compact AproxZ mini-card. */
  html[data-az-layout="mobile"] #az-navigation-ui .az-nav-mini-card{
    left:10px!important;
    right:10px!important;
    top:auto!important;
    bottom:calc(var(--az-mui-bottom-h,82px) + env(safe-area-inset-bottom,0px) + 10px)!important;
    width:auto!important;
    transform:none!important;
    min-height:62px!important;
    border-radius:18px!important;
  }
}

/* Extra-small phones: preserve touch targets without widening the card. */
@media (max-width:374px){
  html[data-az-layout="mobile"] #az-navigation-ui.is-active .az-nav-active-maneuver{
    grid-template-columns:44px minmax(0,1fr) 32px!important;
    gap:7px!important;
  }
  html[data-az-layout="mobile"] #az-navigation-ui.is-active .az-nav-active-maneuver .az-nav-maneuver-icon{
    width:42px!important;height:42px!important;font-size:24px!important;
  }
  html[data-az-layout="mobile"] #az-navigation-ui.is-active .az-nav-active-maneuver .az-nav-turn-distance{
    font-size:18px!important;
  }
  html[data-az-layout="mobile"] #az-navigation-ui.is-active .az-nav-active-maneuver .az-nav-instruction{
    font-size:11px!important;
  }
}



/* =========================================================
   V12 — DESKTOP RAIL CLEARANCE + SAFE END FLOW
   Navigation guidance stays centered ABOVE the Daypart rail.
   Mobile V11 positioning remains unchanged.
   ========================================================= */
@media (min-width:768px){
  #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-bottom-card{
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:190px!important;
    transform:translateX(-50%)!important;
    width:min(880px,calc(100vw - 120px))!important;
    padding:9px 12px!important;
    border-radius:18px!important;
  }

  #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-active-actions{
    grid-template-columns:minmax(350px,1fr) 150px 105px 58px!important;
    gap:14px!important;
  }

  #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-active-place,
  #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-active-divider{
    display:none!important;
  }

  #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-active-progress{
    width:150px!important;
    max-width:150px!important;
    height:5px!important;
    justify-self:center!important;
    opacity:.88!important;
  }

  #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-active-summary{
    min-width:105px!important;
  }

  #az-navigation-ui.is-collapsed .az-nav-mini-card{
    left:24px!important;
    top:96px!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:min(430px,calc(100vw - 48px))!important;
  }
}

@media (max-width:1199px) and (min-width:768px){
  #az-navigation-ui.is-active:not(.is-collapsed) .az-nav-bottom-card{
    bottom:178px!important;
    width:min(820px,calc(100vw - 48px))!important;
  }
}

/* Independent discovery overlay: never inherits navigation shell display:none. */
#az-navigation-discovery-overlay{
  position:fixed;
  inset:0;
  z-index:2147482000;
  pointer-events:none;
  overflow:visible;
  box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
}
#az-navigation-discovery-overlay,
#az-navigation-discovery-overlay *{box-sizing:border-box;}

/* V18 — compact AproxZ On Your Route card */
#az-navigation-discovery-overlay .az-nav-discovery-card{
  position:fixed;
  z-index:1;
  left:50%;
  top:112px;
  width:min(720px,calc(100vw - 48px));
  height:118px;
  min-height:118px;
  display:grid;
  grid-template-columns:90px minmax(0,1fr) 84px 84px;
  grid-template-areas:"thumb copy detour save";
  align-items:center;
  gap:12px;
  padding:12px 44px 12px 12px;
  border:1px solid rgba(53,230,173,.62);
  border-radius:20px;
  background:radial-gradient(circle at 13% 18%,rgba(53,230,173,.05),transparent 35%),linear-gradient(145deg,rgba(10,24,39,.96),rgba(7,18,31,.97));
  box-shadow:0 14px 38px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(20px) saturate(120%);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  color:#f8fafc;
  pointer-events:auto;
  opacity:0;
  transform:translate(-50%,-5px) scale(.99);
  transition:opacity .16s ease,transform .18s ease;
  overflow:hidden;
}
#az-navigation-discovery-overlay .az-nav-discovery-card[hidden]{display:none!important;}
#az-navigation-discovery-overlay .az-nav-discovery-card.is-visible{
  opacity:1;
  transform:translateX(-50%);
}

#az-navigation-discovery-overlay .az-nav-discovery-thumb{
  grid-area:thumb;
  position:relative;
  width:86px;
  height:86px;
  margin:0;
  padding:0;
  display:block;
  align-self:center;
  justify-self:center;
  overflow:hidden;
  border:1px solid rgba(203,213,225,.28);
  border-radius:50%;
  background:#071522;
  color:#fff;
  cursor:pointer;
  appearance:none;
  box-shadow:0 7px 18px rgba(0,0,0,.24);
}
#az-navigation-discovery-overlay .az-nav-discovery-thumb > [data-az-nav-discovery-thumb]{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  font-size:18px;
  font-weight:850;
  color:#d9e7f3;
}
#az-navigation-discovery-overlay .az-nav-discovery-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:50%;
}
#az-navigation-discovery-overlay .az-nav-discovery-view-overlay{
  position:absolute;
  z-index:2;
  left:8px;
  right:8px;
  bottom:7px;
  height:23px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(3,17,29,.84);
  color:#fff;
  font-size:9px;
  line-height:1;
  font-weight:800;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

#az-navigation-discovery-overlay .az-nav-discovery-copy{
  grid-area:copy;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  overflow:hidden;
}
#az-navigation-discovery-overlay .az-nav-discovery-kicker{
  width:max-content;
  max-width:100%;
  margin:0 0 2px;
  padding:4px 9px;
  border:1px solid rgba(53,230,173,.42);
  border-radius:999px;
  background:rgba(16,105,78,.16);
  color:#53e9b7;
  font-size:7.5px;
  line-height:1;
  font-weight:850;
  letter-spacing:.075em;
  white-space:nowrap;
}
#az-navigation-discovery-overlay .az-nav-discovery-copy strong{
  display:block;
  max-width:100%;
  color:#f8fafc;
  font-size:16px;
  line-height:1.08;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#az-navigation-discovery-overlay .az-nav-discovery-copy small{
  display:block;
  max-width:100%;
  color:rgba(203,213,225,.78);
  font-size:9.5px;
  line-height:1.15;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#az-navigation-discovery-overlay .az-nav-discovery-reason{
  display:block;
  max-width:100%;
  margin-top:2px;
  color:rgba(248,250,252,.92);
  font-size:10.5px;
  line-height:1.2;
  font-weight:550;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#az-navigation-discovery-overlay .az-nav-discovery-detour,
#az-navigation-discovery-overlay .az-nav-discovery-save{
  width:84px;
  min-width:84px;
  max-width:84px;
  height:84px;
  min-height:84px;
  max-height:84px;
  align-self:center;
  justify-self:center;
  border:1px solid rgba(53,230,173,.38);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(12,43,55,.72),rgba(7,27,42,.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 7px 18px rgba(0,0,0,.14);
}
#az-navigation-discovery-overlay .az-nav-discovery-detour{
  grid-area:detour;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:8px;
}
#az-navigation-discovery-overlay .az-nav-discovery-detour strong{
  color:#53e9b7;
  font-size:18px;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
}
#az-navigation-discovery-overlay .az-nav-discovery-detour small{
  color:rgba(203,213,225,.82);
  font-size:10px;
  line-height:1;
  font-weight:700;
  white-space:nowrap;
}
#az-navigation-discovery-overlay .az-nav-discovery-save{
  grid-area:save;
  margin:0;
  padding:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  appearance:none;
  color:#f1f7fb;
  cursor:pointer;
  font:inherit;
}
#az-navigation-discovery-overlay .az-nav-discovery-save > svg{
  display:block!important;
  width:23px!important;
  height:23px!important;
  min-width:23px!important;
  min-height:23px!important;
  max-width:23px!important;
  max-height:23px!important;
}
#az-navigation-discovery-overlay .az-nav-discovery-save span{
  font-size:9px;
  line-height:1;
  font-weight:800;
}
#az-navigation-discovery-overlay .az-nav-discovery-save.is-saved,
#az-navigation-discovery-overlay .az-nav-discovery-save[aria-pressed="true"]{
  border-color:rgba(53,230,173,.72);
  background:linear-gradient(180deg,rgba(16,105,78,.28),rgba(7,54,52,.64));
  color:#53e9b7;
}
#az-navigation-discovery-overlay .az-nav-discovery-save.is-saved svg path,
#az-navigation-discovery-overlay .az-nav-discovery-save[aria-pressed="true"] svg path{fill:currentColor;}

#az-navigation-discovery-overlay .az-nav-discovery-dismiss{
  position:absolute;
  z-index:4;
  top:9px;
  right:9px;
  width:27px;
  height:27px;
  margin:0;
  padding:0;
  display:grid;
  place-items:center;
  appearance:none;
  border:1px solid rgba(125,164,194,.30);
  border-radius:50%;
  background:rgba(9,29,46,.82);
  color:#e5eef5;
  cursor:pointer;
}
#az-navigation-discovery-overlay .az-nav-discovery-dismiss > svg{
  display:block!important;
  width:13px!important;
  height:13px!important;
  min-width:13px!important;
  min-height:13px!important;
  max-width:13px!important;
  max-height:13px!important;
}

@media (min-width:768px) and (max-width:1199px){
  #az-navigation-discovery-overlay .az-nav-discovery-card{
    width:min(650px,calc(100vw - 36px));
    grid-template-columns:82px minmax(0,1fr) 78px 78px;
    height:108px;
    min-height:108px;
    gap:10px;
    padding:10px 40px 10px 10px;
  }
  #az-navigation-discovery-overlay .az-nav-discovery-thumb{width:78px;height:78px;}
  #az-navigation-discovery-overlay .az-nav-discovery-detour,
  #az-navigation-discovery-overlay .az-nav-discovery-save{width:78px;min-width:78px;max-width:78px;height:78px;min-height:78px;max-height:78px;}
  #az-navigation-discovery-overlay .az-nav-discovery-copy strong{font-size:15px;}
}

@media (max-width:767px){
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-card{
    left:8px;
    right:8px;
    top:auto;
    bottom:calc(var(--az-mui-bottom-h,82px) + env(safe-area-inset-bottom,0px) + 154px);
    width:auto;
    height:92px;
    min-height:92px;
    transform:translateY(-4px) scale(.99);
    grid-template-columns:66px minmax(0,1fr) 58px 58px;
    gap:6px;
    padding:7px 31px 7px 7px;
    border-radius:17px;
  }
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-card.is-visible{transform:none;}
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-thumb{width:62px;height:62px;}
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-view-overlay{left:5px;right:5px;bottom:4px;height:18px;font-size:7px;}
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-copy{gap:2px;}
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-kicker{padding:3px 6px;font-size:6px;}
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-copy strong{font-size:11px;}
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-copy small{font-size:7.5px;}
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-reason{font-size:7.5px;}
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-detour,
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-save{width:58px;min-width:58px;max-width:58px;height:58px;min-height:58px;max-height:58px;border-radius:12px;}
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-detour strong{font-size:14px;}
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-detour small{font-size:7.5px;}
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-save > svg{width:17px!important;height:17px!important;min-width:17px!important;min-height:17px!important;max-width:17px!important;max-height:17px!important;}
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-save span{font-size:7px;}
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-dismiss{top:6px;right:6px;width:22px;height:22px;}
}

@media (max-width:390px){
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-card{
    grid-template-columns:60px minmax(0,1fr) 54px 54px;
    gap:4px;
  }
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-thumb{width:56px;height:56px;}
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-detour,
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-save{width:54px;min-width:54px;max-width:54px;height:54px;min-height:54px;max-height:54px;}
  html[data-az-layout="mobile"] #az-navigation-discovery-overlay .az-nav-discovery-reason{display:none;}
}