/* MapMyStaff v1621 — live Leaflet + OSRM route comparison */
.mms-live-route-frame{
  overflow:hidden;
}

.mms-live-route-demo{
  --mms-route-before:#e97a22;
  --mms-route-before-soft:#fff6ed;
  --mms-route-after:#159660;
  --mms-route-after-soft:#eefaf3;
  --mms-route-ink:#102f3b;
  --mms-route-muted:#60717d;
  --mms-route-border:#d9e5e2;
  width:100%;
  min-width:0;
  background:#fff;
  color:var(--mms-route-ink);
}

.mms-live-route-demo__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.8rem .9rem;
  border-bottom:1px solid var(--mms-route-border);
  background:linear-gradient(180deg,#fff,#f8fbfa);
}

.mms-live-route-demo__heading{
  display:grid;
  gap:.14rem;
  min-width:0;
}

.mms-live-route-demo__heading small{
  color:var(--mms-teal-700,#176e68);
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.075em;
  text-transform:uppercase;
}

.mms-live-route-demo__heading strong{
  color:var(--mms-route-ink);
  font-size:clamp(.9rem,1.55vw,1.0rem);
  line-height:1.2;
}

.mms-live-route-demo__tabs{
  display:inline-flex;
  flex:0 0 auto;
  gap:.25rem;
  padding:.22rem;
  border:1px solid #d7e3e0;
  border-radius:var(--mms-control-shape-radius);
  background:#eef4f2;
}

.mms-live-route-demo__tab{
  appearance:none;
  min-height:2.1rem;
  padding:.42rem .82rem;
  border:0;
  border-radius:var(--mms-control-shape-radius);
  background:transparent;
  color:#5d6e78;
  font:inherit;
  font-size:.72rem;
  font-weight:850;
  line-height:1;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;
}

.mms-live-route-demo__tab:hover:not(:disabled){
  color:var(--mms-route-ink);
}

.mms-live-route-demo__tab:focus-visible,
.mms-live-route-demo__retry:focus-visible{
  outline:3px solid rgb(242 201 76 / .55);
  outline-offset:2px;
}

.mms-live-route-demo__tab[aria-pressed="true"]{
  background:#fff;
  box-shadow:0 5px 14px rgb(16 45 53 / .12);
}

.mms-live-route-demo__tab[data-route-mode="before"][aria-pressed="true"]{
  color:var(--mms-route-before);
}

.mms-live-route-demo__tab[data-route-mode="after"][aria-pressed="true"]{
  color:var(--mms-route-after);
}

.mms-live-route-demo__tab:disabled{
  cursor:wait;
  opacity:.58;
}

.mms-live-route-demo__status{
  display:flex;
  align-items:center;
  min-height:2.2rem;
  padding:.42rem .9rem;
  border-bottom:1px solid var(--mms-route-border);
  background:#fbfdfc;
  color:var(--mms-route-muted);
  font-size:.72rem;
  font-weight:750;
}

.mms-live-route-demo__status[hidden]{
  display:none;
}

.mms-live-route-demo__status.is-error{
  justify-content:space-between;
  gap:.75rem;
  color:#9c3e34;
  background:#fff7f5;
}

.mms-live-route-demo__retry{
  appearance:none;
  flex:0 0 auto;
  min-height:2rem;
  padding:.38rem .68rem;
  border:1px solid #c95f52;
  border-radius:var(--mms-control-shape-radius);
  background:#fff;
  color:#94382f;
  font:inherit;
  font-size:.7rem;
  font-weight:850;
  cursor:pointer;
}

.mms-live-route-demo__map{
  position:relative;
  width:100%;
  height:clamp(420px,43vw,570px);
  min-height:420px;
  background:#e8efed;
  isolation:isolate;
}

.mms-live-route-demo__map .leaflet-control-attribution{
  max-width:calc(100% - 1rem);
  font-size:10px;
  line-height:1.25;
}

.mms-live-route-demo__map .leaflet-control-zoom a{
  color:#164f4a;
}

.mms-live-route-demo__metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--mms-route-border);
  background:#f8fbfa;
}

.mms-live-route-demo__metric{
  display:grid;
  align-content:start;
  gap:.12rem;
  min-width:0;
  padding:.82rem .9rem;
  border-right:1px solid var(--mms-route-border);
}

.mms-live-route-demo__metric:last-child{
  border-right:0;
}

.mms-live-route-demo__metric-label{
  color:var(--mms-route-muted);
  font-size:.64rem;
  font-weight:850;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.mms-live-route-demo__metric-value{
  color:var(--mms-route-ink);
  font-size:clamp(.9rem,1.55vw,1.0rem);
  font-weight:800;
  line-height:1.2;
}

.mms-live-route-demo__metric-sub{
  min-height:1.1em;
  color:var(--mms-route-after);
  font-size:.68rem;
  font-weight:800;
  line-height:1.35;
}

.mms-live-route-demo[data-route-state="after"] [data-route-gain]{
  color:var(--mms-route-after);
}

.mms-live-route-pin-wrap{
  background:transparent;
  border:0;
}

.mms-live-route-pin{
  position:relative;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:3px solid #fff;
  border-radius:50%;
  color:#fff;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:13px;
  font-weight:900;
  line-height:1;
  text-align:center;
  text-shadow:0 1px 1px rgb(0 0 0 / .18);
  box-shadow:0 8px 17px rgb(16 45 53 / .26);
}

.mms-live-route-pin::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-7px;
  width:12px;
  height:12px;
  background:inherit;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;
  transform:translateX(-50%) rotate(45deg);
  transform-origin:center;
  z-index:-1;
}

.mms-live-route-pin--before{
  background:var(--mms-route-before);
}

.mms-live-route-pin--after{
  background:var(--mms-route-after);
}

.mms-live-route-pin__number{
  position:relative;
  z-index:1;
  display:block;
  transform:translateY(-.5px);
}

.mms-live-route-demo__sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (max-width:720px){
  .mms-live-route-demo__head{
    align-items:flex-start;
    flex-direction:column;
    padding:.76rem;
  }

  .mms-live-route-demo__tabs{
    width:100%;
  }

  .mms-live-route-demo__tab{
    flex:1;
  }

  .mms-live-route-demo__status{
    padding:.42rem .76rem;
  }

  .mms-live-route-demo__map{
    height:390px;
    min-height:390px;
  }

  .mms-live-route-demo__metrics{
    grid-template-columns:1fr;
  }

  .mms-live-route-demo__metric{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:.2rem .75rem;
    padding:.7rem .76rem;
    border-right:0;
    border-bottom:1px solid var(--mms-route-border);
  }

  .mms-live-route-demo__metric:last-child{
    border-bottom:0;
  }

  .mms-live-route-demo__metric-value,
  .mms-live-route-demo__metric-sub{
    text-align:right;
  }

  .mms-live-route-demo__metric-sub{
    grid-column:1 / -1;
  }
}

@media (prefers-reduced-motion:reduce){
  .mms-live-route-demo__tab{
    transition:none;
  }
}

/* v1624 — period-based route colors: 4 morning, 6 afternoon */
.mms-live-route-demo{
  --mms-route-morning:#ea580c;
  --mms-route-afternoon:#2563eb;
  --mms-route-transition:#64748b;
}

.mms-live-route-pin--morning{
  background:var(--mms-route-morning);
}

.mms-live-route-pin--afternoon{
  background:var(--mms-route-afternoon);
}

.mms-live-route-demo__metric-sub{
  color:var(--mms-route-afternoon);
}