/* MHL_TRIP_PLAN_ROUTE_HTML_V1_1 */
.trip-route-result .mhl-route-report {
  display: grid;
  gap: 16px;
  margin-top: 14px;
  color: #244454;
}
.mhl-route-report__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.mhl-route-report__top .eyebrow {
  margin: 0 0 4px;
  color: #167e99;
  font-size: .72rem;
  letter-spacing: .12em;
  font-weight: 800;
}
.mhl-route-report__top h4 {
  margin: 0;
  color: #123d55;
  font-size: 1.18rem;
  letter-spacing: -.02em;
}
.mhl-route-report__source {
  border: 1px solid #cde5ea;
  border-radius: 999px;
  padding: 5px 10px;
  color: #126d87;
  background: #f0fafc;
  font-size: .76rem;
  font-weight: 700;
}
.mhl-route-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.mhl-route-metrics > div {
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid #d9e9ed;
  border-radius: 14px;
  background: linear-gradient(135deg, #f0fafc, #fff);
}
.mhl-route-metrics span {
  display: block;
  color: #66808c;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.mhl-route-metrics strong {
  display: block;
  margin-top: 4px;
  color: #123d55;
  font-size: clamp(1rem, 2vw, 1.3rem);
  overflow-wrap: anywhere;
}
.mhl-route-status {
  margin: 0;
  padding: 10px 13px;
  border-radius: 10px;
  background: #f2f8f9;
  color: #536f7b;
  font-size: .86rem;
}
.mhl-route-status.is-success { border-left: 3px solid #1683a0; }
.mhl-route-status.is-warning { border-left: 3px solid #c78a3a; }
.mhl-route-stops {
  border: 1px solid #dce9ed;
  border-radius: 13px;
  overflow: hidden;
}
.mhl-route-stops > summary {
  cursor: pointer;
  padding: 12px 15px;
  color: #123d55;
  font-weight: 800;
  background: #f5fafb;
}
.mhl-route-stops > ol {
  margin: 0;
  padding: 6px 14px 12px;
  list-style: none;
}
.mhl-route-stop {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #eaf1f3;
}
.mhl-route-stop:last-child { border-bottom: 0; }
.mhl-route-stop__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  color: #fff;
  background: #187f98;
  font-size: .76rem;
  font-weight: 800;
}
.mhl-route-stop__copy { min-width: 0; }
.mhl-route-stop__copy strong { display: block; color: #234655; }
.mhl-route-stop__copy small { display: block; color: #6f8791; margin-top: 2px; }
.mhl-route-leg-list { display: grid; gap: 12px; }
.mhl-route-leg {
  padding: 13px 14px;
  border: 1px solid #dce9ed;
  border-radius: 14px;
  background: #fff;
}
.mhl-route-leg__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.mhl-route-leg__head > div { min-width: 0; }
.mhl-route-leg__head > div > span {
  display: block;
  color: #167e99;
  font-size: .68rem;
  letter-spacing: .12em;
  font-weight: 800;
}
.mhl-route-leg__head strong { display: block; margin-top: 4px; color: #123d55; }
.mhl-route-leg__head > span { flex: 0 0 auto; color: #123d55; font-weight: 800; text-align: right; }
.mhl-route-leg__head > span small { display: block; color: #70858e; font-size: .78rem; font-weight: 500; }
.mhl-route-steps {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  counter-reset: mhl-route-step;
}
.mhl-route-step {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 9px;
  padding: 9px 8px;
  border-top: 1px solid #edf3f5;
  counter-increment: mhl-route-step;
}
.mhl-route-step__number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 23px;
  height: 23px;
  border-radius: 7px;
  background: #e7f4f7;
  color: #167e99;
  font-size: .72rem;
  font-weight: 800;
}
.mhl-route-step__instruction { min-width: 0; color: #2a4e5d; font-size: .9rem; }
.mhl-route-step__instruction small { display: block; margin-top: 3px; color: #758b95; font-size: .75rem; }
.mhl-route-no-steps { margin: 12px 0 0; color: #718791; font-size: .83rem; }
.mhl-route-export-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.mhl-route-export-row > span { color: #70858e; font-size: .77rem; }
.mhl-route-export {
  border: 0;
  cursor: pointer;
}
.mhl-route-export[disabled] { opacity: .55; cursor: wait; }
.mhl-trip-road-route { stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .mhl-route-metrics { grid-template-columns: 1fr; }
  .mhl-route-metrics > div { padding: 10px 12px; }
  .mhl-route-leg__head { flex-direction: column; gap: 6px; }
  .mhl-route-leg__head > span { text-align: left; }
  .mhl-route-export-row { align-items: flex-start; flex-direction: column; }
}

/* MHL_TRIP_PLAN_REPORT_SEPARATE_TAB_V1.6 */
.trip-route-result .mhl-route-report--compact { gap: 13px; margin-top: 12px; }
.mhl-route-report--compact .mhl-route-report__top { align-items: center; margin-bottom: 0; }
.mhl-route-report--compact .mhl-route-report__top h4 { font-size: 1.22rem; }
.mhl-route-report--compact .mhl-route-metrics { gap: 10px; }
.mhl-route-report--compact .mhl-route-metrics > div { padding: 12px 14px; background: #fff; border-color: #dce9ed; }
.mhl-route-report--compact .mhl-route-metrics strong { font-size: 1.18rem; }
.mhl-route-report--compact .mhl-route-status { color: #456371; background: #f4fafb; line-height: 1.45; }
.mhl-route-report--compact .mhl-route-report__stops-preview { display: flex; flex-wrap: wrap; gap: 7px; }
.mhl-route-report--compact .mhl-route-stop-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 11px 7px 7px; border: 1px solid #dce9ed; border-radius: 999px; color: #234655; background: #fff; font-size: .83rem; }
.mhl-route-report--compact .mhl-route-stop-chip b { display: inline-grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; border-radius: 50%; color: #fff; background: #177f98; font-size: .73rem; }
.mhl-route-report--compact .mhl-route-stop-chip--more { color: #627c87; background: #f4f9fa; }
.mhl-route-report--compact .mhl-route-export-row { padding-top: 3px; }
.mhl-route-report--compact .mhl-route-export { min-height: 44px; padding: 11px 18px; border-radius: 12px; font-weight: 750; box-shadow: 0 5px 14px rgba(18,61,85,.13); }
.mhl-route-report--compact .mhl-route-export[disabled] { opacity: .6; }
@media (max-width: 640px) {
  .mhl-route-report--compact .mhl-route-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mhl-route-report--compact .mhl-route-metrics > div:first-child { grid-column: 1 / -1; }
}

/* MHL_TRIP_PLAN_GLASS_COMPACT_V1.7 */
.trip-route-result .mhl-route-report--compact {
  color: #e6f4f8 !important;
  background: linear-gradient(145deg, rgba(5, 49, 68, .96), rgba(3, 27, 42, .97)) !important;
  border: 1px solid rgba(116, 210, 229, .26) !important;
  border-radius: 21px !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .22) !important;
  backdrop-filter: blur(18px);
}
.mhl-route-report--compact .mhl-route-report__top h4 { color: #f1fbff !important; }
.mhl-route-report--compact .mhl-route-report__source,
.mhl-route-report--compact .mhl-route-stop-chip--more {
  color: #c0dce6 !important;
  border-color: rgba(136, 205, 219, .22) !important;
  background: rgba(2, 21, 33, .58) !important;
}
.mhl-route-report--compact .mhl-route-metrics > div {
  border-color: rgba(144, 208, 221, .2) !important;
  background: rgba(1, 20, 31, .66) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.mhl-route-report--compact .mhl-route-metrics span { color: #a9c9d5 !important; }
.mhl-route-report--compact .mhl-route-metrics strong { color: #f5fcff !important; }
.mhl-route-report--compact .mhl-route-status {
  border: 1px solid rgba(107, 201, 215, .19) !important;
  border-radius: 12px !important;
  color: #cdebf0 !important;
  background: rgba(7, 62, 75, .48) !important;
}
.mhl-route-report--compact .mhl-route-status.is-warning {
  color: #f2d9a7 !important;
  border-color: rgba(222, 171, 94, .3) !important;
  background: rgba(87, 59, 24, .38) !important;
}
.mhl-route-report--compact .mhl-route-stop-chip {
  color: #dcedf3 !important;
  border-color: rgba(125, 201, 218, .24) !important;
  background: rgba(2, 23, 36, .64) !important;
}
.mhl-route-report--compact .mhl-route-stop-chip b {
  color: #062b3d !important;
  background: linear-gradient(145deg, #91e6ef, #4bbbd0) !important;
}
.mhl-route-report--compact .mhl-route-export-row > span { color: #a8c7d2 !important; }
.mhl-route-report--compact .mhl-route-export {
  border: 1px solid rgba(157, 235, 245, .28) !important;
  color: #041b29 !important;
  background: linear-gradient(135deg, #8fe3ed, #47b7cc) !important;
  box-shadow: 0 9px 25px rgba(0, 0, 0, .24) !important;
}
.mhl-route-report--compact .mhl-route-export:hover { filter: brightness(1.04); }
.mhl-route-report--compact .mhl-route-export:focus-visible { outline: 3px solid #9cecf5; outline-offset: 3px; }