/* --------------------
   ROUTE BUILDER
-------------------- */
.route-toolbar{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.route-toolbar-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.route-toolbar-center-controls{
  display:flex;
  align-items:center;
  width:100%;
  min-width:0;
}

.route-toolbar-center-controls .btn{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}

.route-toolbar-conditions{
  margin-left:auto;
}

.stop-insert-row{
  display:none;
}

.stops{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }

.stop{
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  padding:10px;
  background:
    linear-gradient(180deg, rgba(255,246,232,0.018), rgba(255,246,232,0.006)),
    rgba(20, 20, 22, 0.74);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
  position:relative;
}

body.light .stop{ background:rgba(255,255,255,0.86); }

body:not(.light) .stop:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.16);
  background:
    linear-gradient(180deg, rgba(255,246,232,.030), rgba(255,246,232,.010)),
    rgba(22,22,24,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 28px rgba(0,0,0,.34);
}

.stop.dragging{
  opacity:.72;
  transform:scale(.985);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 20px 34px rgba(0,0,0,.32);
}

.stop::before,
.stop::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  height:0;
  border-top:2px solid rgba(255,186,107,0);
  border-radius:999px;
  opacity:0;
  transform:scaleX(.9);
  transition:opacity .14s ease, transform .14s ease, border-color .14s ease;
  pointer-events:none;
}

.stop::before{ top:-7px; }
.stop::after{ bottom:-7px; }

.stop.is-drag-target-before::before,
.stop.is-drag-target-after::after{
  opacity:1;
  transform:scaleX(1);
  border-top-color:rgba(255,186,107,.92);
  box-shadow:0 0 0 1px rgba(255,186,107,.18);
}

.stop-header{ display:flex; justify-content:space-between; gap:8px; align-items:center; }
.stop-meta{ font-size:11px; color:var(--muted); }
.stop-header-main{ min-width:0; display:grid; gap:4px; }
.stop-eyebrow-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.stop .inline-btns{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.stop-type-pill{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:3px 10px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent-ink, #ffe7c2);
  background:rgba(255,186,107,.14);
  border:1px solid rgba(255,186,107,.18);
}

body.light .stop-type-pill{
  color:rgba(15,23,42,.92);
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 1px 2px rgba(15,23,42,.05);
}

.stop-display-title{
  font-size:15px;
  font-weight:800;
  color:var(--text);
  line-height:1.25;
}
.stop-anchor-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
}

body.native-runtime .stop .inline-btns .btn-move-up,
body.native-runtime .stop .inline-btns .btn-move-down{
  min-width:42px;
  min-height:38px;
  padding:0;
}

body.native-runtime .stop .drag-handle{
  display:none;
}

.stop-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:8px;
  margin-top:8px;
}

.stop-grid > *,
.stop-fields-layout > *{
  min-width:0;
}

.stop-fields-layout{
  display:grid;
  grid-template-columns:minmax(220px, 2fr) 1fr 1fr;
  grid-template-areas:
    "location meta meta"
    "details details details"
    "timing timing timing";
  gap:8px;
  margin-top:8px;
}

.stop-field-location{
  grid-area:location;
  margin-top:0;
}

.stop-grid--identity-secondary{
  grid-area:meta;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:0;
}

.stop-grid--details,
.stop-grid--timing,
.stop-grid--segment{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.stop-grid--segment{
  grid-template-columns:minmax(180px, 1.05fr) minmax(150px, 0.86fr) minmax(180px, 1.05fr) minmax(180px, 0.94fr);
  align-items:start;
}

.stop-grid--details{
  grid-area:details;
  grid-template-columns:minmax(220px, 2fr) 1fr 1fr;
  margin-top:0;
}

.stop-grid--timing{
  grid-area:timing;
  grid-template-columns:1fr 1fr 1fr;
  margin-top:0;
}

.stop-check-stack{
  display:grid;
  gap:8px;
  align-content:start;
}

.stop-segment-field{
  align-self:start;
  min-width:0;
}

.stop-segment-helper{
  min-height:18px;
}

.stop input:not([type="checkbox"]):not([type="radio"]),
.stop select,
.stop textarea{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

.stop-window-alt-input{
  width:100%;
}

.stop-notes{
  min-height:72px;
  resize:vertical;
}

.metryx-flatpickr--route-stop.flatpickr-calendar{
  margin-top:8px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.1);
  background:
    linear-gradient(180deg, rgba(255,248,235,0.04), rgba(255,248,235,0.01)),
    rgba(16,16,18,0.98);
  box-shadow:
    0 20px 42px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.05);
  overflow:hidden;
}

.metryx-flatpickr--route-stop::before,
.metryx-flatpickr--route-stop::after{
  border-bottom-color:rgba(16,16,18,0.98);
}

.metryx-flatpickr--route-stop .flatpickr-months{
  padding:10px 10px 0;
}

.metryx-flatpickr--route-stop .flatpickr-month{
  fill:rgba(230,237,243,0.92);
  color:rgba(230,237,243,0.92);
}

.metryx-flatpickr--route-stop .flatpickr-current-month{
  padding-top:6px;
  font-size:15px;
}

.metryx-flatpickr--route-stop .flatpickr-current-month .flatpickr-monthDropdown-months,
.metryx-flatpickr--route-stop .flatpickr-current-month input.cur-year{
  color:rgba(248,250,252,0.98);
  font-weight:700;
}

.metryx-flatpickr--route-stop .flatpickr-weekdays{
  background:transparent;
  padding:0 10px;
}

.metryx-flatpickr--route-stop span.flatpickr-weekday{
  color:rgba(152,165,179,0.88);
  font-weight:700;
}

.metryx-flatpickr--route-stop .flatpickr-days{
  padding:0 10px 10px;
}

.metryx-flatpickr--route-stop .dayContainer{
  gap:2px 0;
}

.metryx-flatpickr--route-stop .flatpickr-day{
  border-radius:12px;
  color:rgba(230,237,243,0.92);
}

.metryx-flatpickr--route-stop .flatpickr-day:hover{
  background:rgba(255,255,255,0.06);
  border-color:transparent;
}

.metryx-flatpickr--route-stop .flatpickr-day.today{
  border-color:rgba(255,170,95,0.32);
  color:rgba(255,224,190,0.98);
}

.metryx-flatpickr--route-stop .flatpickr-day.selected,
.metryx-flatpickr--route-stop .flatpickr-day.startRange,
.metryx-flatpickr--route-stop .flatpickr-day.endRange{
  background:linear-gradient(180deg, rgba(255,184,116,0.28), rgba(255,122,26,0.24));
  border-color:rgba(255,170,95,0.36);
  color:#fff7ed;
  box-shadow:0 8px 20px rgba(255,106,0,0.16);
}

.metryx-flatpickr--route-stop .flatpickr-day.inRange{
  background:rgba(255,170,95,0.12);
  border-color:transparent;
  box-shadow:none;
}

.metryx-flatpickr--route-stop .flatpickr-day.prevMonthDay,
.metryx-flatpickr--route-stop .flatpickr-day.nextMonthDay{
  color:rgba(152,165,179,0.4);
}

.metryx-flatpickr--route-stop .flatpickr-time{
  border-top:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
}

.metryx-flatpickr--route-stop .flatpickr-time input,
.metryx-flatpickr--route-stop .flatpickr-time .flatpickr-am-pm{
  color:rgba(230,237,243,0.94);
  font-weight:700;
}

.metryx-flatpickr--route-stop .flatpickr-time input:hover,
.metryx-flatpickr--route-stop .flatpickr-time .flatpickr-am-pm:hover,
.metryx-flatpickr--route-stop .flatpickr-time input:focus,
.metryx-flatpickr--route-stop .flatpickr-time .flatpickr-am-pm:focus{
  background:rgba(255,255,255,0.06);
}

.metryx-flatpickr--route-stop .numInputWrapper span.arrowUp:after{
  border-bottom-color:rgba(230,237,243,0.74);
}

.metryx-flatpickr--route-stop .numInputWrapper span.arrowDown:after{
  border-top-color:rgba(230,237,243,0.74);
}

body.light .metryx-flatpickr--route-stop.flatpickr-calendar{
  border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.97);
  box-shadow:
    0 18px 42px rgba(15,23,42,0.14),
    inset 0 1px 0 rgba(255,255,255,0.82);
}

body.light .metryx-flatpickr--route-stop::before,
body.light .metryx-flatpickr--route-stop::after{
  border-bottom-color:rgba(255,255,255,.97);
}

body.light .metryx-flatpickr--route-stop .flatpickr-month,
body.light .metryx-flatpickr--route-stop .flatpickr-current-month .flatpickr-monthDropdown-months,
body.light .metryx-flatpickr--route-stop .flatpickr-current-month input.cur-year,
body.light .metryx-flatpickr--route-stop .flatpickr-day,
body.light .metryx-flatpickr--route-stop .flatpickr-time input,
body.light .metryx-flatpickr--route-stop .flatpickr-time .flatpickr-am-pm{
  color:rgba(15,23,42,.94);
}

body.light .metryx-flatpickr--route-stop span.flatpickr-weekday{
  color:rgba(71,85,105,.82);
}

body.light .metryx-flatpickr--route-stop .flatpickr-day:hover{
  background:rgba(15,23,42,.05);
}

body.light .metryx-flatpickr--route-stop .flatpickr-day.today{
  border-color:rgba(180,83,9,0.28);
  color:rgba(146,64,14,0.96);
}

body.light .metryx-flatpickr--route-stop .flatpickr-day.selected,
body.light .metryx-flatpickr--route-stop .flatpickr-day.startRange,
body.light .metryx-flatpickr--route-stop .flatpickr-day.endRange{
  background:linear-gradient(180deg, rgba(251,191,36,0.3), rgba(249,115,22,0.24));
  border-color:rgba(180,83,9,0.26);
  color:rgba(120,53,15,0.98);
  box-shadow:0 10px 24px rgba(180,83,9,0.14);
}

body.light .metryx-flatpickr--route-stop .flatpickr-day.inRange{
  background:rgba(249,115,22,0.1);
}

body.light .metryx-flatpickr--route-stop .flatpickr-day.prevMonthDay,
body.light .metryx-flatpickr--route-stop .flatpickr-day.nextMonthDay{
  color:rgba(148,163,184,0.66);
}

body.light .metryx-flatpickr--route-stop .flatpickr-time{
  border-top:1px solid rgba(15,23,42,.08);
  background:rgba(15,23,42,.02);
}

body.light .metryx-flatpickr--route-stop .flatpickr-time input:hover,
body.light .metryx-flatpickr--route-stop .flatpickr-time .flatpickr-am-pm:hover,
body.light .metryx-flatpickr--route-stop .flatpickr-time input:focus,
body.light .metryx-flatpickr--route-stop .flatpickr-time .flatpickr-am-pm:focus{
  background:rgba(15,23,42,.05);
}

body.light .metryx-flatpickr--route-stop .numInputWrapper span.arrowUp:after{
  border-bottom-color:rgba(15,23,42,.66);
}

body.light .metryx-flatpickr--route-stop .numInputWrapper span.arrowDown:after{
  border-top-color:rgba(15,23,42,.66);
}

.pac-container{
  margin-top:8px;
  border-radius:18px !important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.1) !important;
  background:
    linear-gradient(180deg, rgba(255,248,235,0.035), rgba(255,248,235,0.008)),
    rgba(16, 16, 18, 0.98) !important;
  box-shadow:
    0 20px 40px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  font-family:inherit;
  z-index:10000 !important;
}

.pac-container::after{
  filter:grayscale(0.1) brightness(0.95);
  opacity:0.92;
}

.pac-item{
  position:relative;
  min-height:54px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px 12px 42px;
  border-top:1px solid rgba(255,255,255,0.06) !important;
  background:transparent;
  color:rgba(230,237,243,0.92) !important;
  font-size:14px;
  line-height:1.35;
  cursor:pointer;
  transition:background .14s ease, color .14s ease;
}

.pac-item:first-child{
  border-top:none !important;
}

.pac-item:hover,
.pac-item.pac-item-selected{
  background:rgba(255,255,255,0.06) !important;
}

.pac-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  opacity:0.7;
  filter:grayscale(0.15);
}

.pac-item-query{
  color:rgba(248,250,252,0.98) !important;
  font-size:15px;
  font-weight:700;
}

.pac-matched{
  color:inherit !important;
  font-weight:800;
}

.pac-item span:not(.pac-item-query):not(.pac-matched){
  color:rgba(152,165,179,0.9) !important;
}

body.light .pac-container{
  border:1px solid rgba(15,23,42,.14) !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:
    0 18px 40px rgba(15,23,42,0.14),
    inset 0 1px 0 rgba(255,255,255,0.75) !important;
}

body.light .pac-container::after{
  filter:none;
  opacity:0.86;
}

body.light .pac-item{
  border-top:1px solid rgba(15,23,42,.08) !important;
  color:rgba(15,23,42,.92) !important;
}

body.light .pac-item:hover,
body.light .pac-item.pac-item-selected{
  background:rgba(15,23,42,.05) !important;
}

body.light .pac-item-query{
  color:rgba(15,23,42,.96) !important;
}

body.light .pac-item span:not(.pac-item-query):not(.pac-matched){
  color:rgba(71,85,105,.86) !important;
}

body.light .pac-icon{
  opacity:0.58;
}

@media(max-width:800px){
  .stop-header{
    align-items:start;
    gap:10px;
  }

  .stop-header-main{
    flex:1;
    min-width:0;
    gap:3px;
  }

  .stop-eyebrow-row{
    gap:6px;
    flex-wrap:nowrap;
  }

  .stop-type-pill{
    flex:0 0 auto;
    margin-top:0;
  }

  .stop .inline-btns{
    display:grid;
    grid-template-columns:38px 38px auto;
    grid-auto-rows:minmax(36px, auto);
    gap:6px;
    align-items:start;
    justify-content:end;
    flex:0 0 auto;
  }

  .stop .inline-btns .btn-move-up{
    grid-column:1;
    grid-row:1;
  }

  .stop .inline-btns .btn-move-down{
    grid-column:2;
    grid-row:1;
  }

  .stop .inline-btns .btn-remove{
    grid-column:3;
    grid-row:1;
  }

  .stop-anchor-badge{
    display:none;
  }

  .stop-grid{ grid-template-columns:1fr; }
  .stop-grid--details{
    grid-template-columns:1fr;
    align-items:start;
  }

  .stop-fields-layout{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "location location"
      "details details"
      "meta meta"
      "timing timing";
  }

  .stop-grid--identity-secondary{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .stop-grid--timing{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .stop-check-stack{
    grid-column:1 / -1;
  }

  .stop .field-group{
    margin-top:8px;
  }

  .stop .field-group[style*="margin-top:8px"]{
    margin-top:6px !important;
  }

  .stop-check-stack{
    gap:6px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:14px;
    row-gap:8px;
    align-items:start;
  }

  .stop-check-stack > label.small:not(.checkbox){
    grid-column:1 / -1;
  }

  .stop-check-stack .checkbox{
    margin-top:0;
    display:grid;
    grid-template-columns:16px minmax(0, 1fr);
    gap:8px;
    align-items:start;
    min-width:0;
  }

  .stop-check-stack .checkbox input{
    margin:2px 0 0;
  }

  .stop-check-stack .checkbox .muted{
    line-height:1.18;
  }

  .stop-notes{
    min-height:56px;
  }

  .stop-grid--segment{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    align-items:start;
  }

  .stop-segment-field{
    display:grid;
    grid-template-rows:auto auto auto;
    align-content:start;
    gap:3px;
    margin-top:0;
    min-width:0;
  }

  .stop-segment-helper{
    min-height:0;
    line-height:1.2;
  }

  .stop-segment-helper.is-spacer{
    display:block;
    min-height:0;
  }

  .stop-segment-helper.has-copy{
    min-height:0;
    margin-top:-1px;
  }

  .stop-grid--segment .stop-segment-field:nth-child(1),
  .stop-grid--segment .stop-segment-field:nth-child(2){
    grid-template-rows:auto 32px auto;
  }

  .stop-grid--segment .stop-segment-field:nth-child(1) .stop-segment-helper{
    display:block;
    min-height:32px;
    font-size:12px;
    line-height:1.14;
  }

  .stop-grid--segment .stop-segment-field:nth-child(2) .stop-segment-helper{
    display:block;
    min-height:32px;
    visibility:hidden;
  }

  .stop-grid--segment .stop-segment-field:nth-child(3),
  .stop-grid--segment .stop-segment-field:nth-child(4){
    align-self:start;
  }

  .stop-grid--segment .stop-segment-field:nth-child(3) .stop-segment-helper,
  .stop-grid--segment .stop-segment-field:nth-child(4) .stop-segment-helper{
    display:none;
  }

  .stop-bobtail-row{
    margin-top:2px !important;
    display:grid !important;
    grid-template-columns:18px minmax(0, 1fr);
    gap:8px !important;
    align-items:center !important;
    min-width:0;
  }

  .stop-bobtail-row input{
    margin:0;
  }

  .stop-bobtail-row .muted{
    line-height:1.25;
  }

  .stop-via-wrap{
    margin-top:6px !important;
  }

  .stop-via-wrap details{
    padding:8px 10px !important;
  }

  .stop-via-wrap details > div{
    margin-top:8px !important;
  }
}

.stop-footer{ display:flex; justify-content:space-between; gap:8px; align-items:center; margin-top:8px; }

.route-map-shell{
  position:relative;
  margin-top:16px;
}

.map-wrap{
  display:block !important;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--border);
  height:220px;
  position:relative;
  isolation:isolate;
  z-index:0;
}

@media (max-width: 720px){
  html.native-runtime #tab-route > .panel:first-of-type{
    padding-bottom:0;
  }

  html.native-runtime #tab-route #routeMapShell{
    margin-left:0;
    margin-right:0;
  }

  html.native-runtime #tab-route #mapWrap{
    width:calc(100% + 32px);
    max-width:calc(100% + 32px);
    margin-left:-16px;
    margin-right:-16px;
  }

  html.native-runtime #tab-route #routeMapCanvas{
    border-radius:inherit !important;
  }

  html.native-runtime #tab-route .route-toolbar--planning{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    align-items:center;
  }

  html.native-runtime #tab-route .route-toolbar-actions{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    width:100%;
    justify-items:center;
    align-items:stretch;
  }

  html.native-runtime #tab-route .route-toolbar-actions > .btn,
  html.native-runtime #tab-route .route-toolbar-center-controls{
    width:100%;
    min-width:0;
  }

  html.native-runtime #tab-route .route-toolbar-actions > .btn,
  html.native-runtime #tab-route .route-toolbar-center-controls .btn{
    min-height:42px;
    padding:8px 10px;
  }

  html.native-runtime #tab-route .route-toolbar-actions > .btn .lean-inner,
  html.native-runtime #tab-route .route-toolbar-center-controls .btn .lean-inner{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
    gap:6px;
    white-space:nowrap;
    text-align:center;
    font-size:12px;
  }

  html.native-runtime #tab-route .route-toolbar-conditions{
    margin-left:auto;
    justify-self:end;
  }

  html.native-runtime #tab-route #btnAddStop{
    display:none !important;
  }

  html.native-runtime #tab-route .stop-insert-row{
    display:flex;
    justify-content:flex-end;
    margin:-4px 0 4px;
    padding-right:8px;
  }

  html.native-runtime #tab-route .stop-insert-btn{
    min-width:132px;
  }

  html.native-runtime #tab-route .route-toolbar-center-controls .btn{
    width:100%;
  }

  html.native-runtime #tab-route .metryx-map-type-control{
    right:18px;
  }
}

@media (max-width: 720px) and (display-mode: standalone){
  #tab-route > .panel:first-of-type{
    padding-bottom:0;
  }

  #tab-route #routeMapShell{
    margin-left:0;
    margin-right:0;
  }

  #tab-route #routeMapLiveControls{
    padding-left:0;
    padding-right:0;
    box-sizing:border-box;
  }

  #tab-route #mapWrap{
    width:calc(100% + 32px);
    max-width:calc(100% + 32px);
    margin-left:-16px;
    margin-right:-16px;
  }

  #tab-route #routeMapCanvas{
    border-radius:inherit !important;
  }

  #tab-route .route-toolbar--planning{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    align-items:center;
  }

  #tab-route .route-toolbar-actions{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    width:100%;
    justify-items:center;
    align-items:stretch;
  }

  #tab-route .route-toolbar-actions > .btn,
  #tab-route .route-toolbar-center-controls{
    width:100%;
    min-width:0;
  }

  #tab-route .route-toolbar-actions > .btn,
  #tab-route .route-toolbar-center-controls .btn{
    min-height:42px;
    padding:8px 10px;
  }

  #tab-route .route-toolbar-actions > .btn .lean-inner,
  #tab-route .route-toolbar-center-controls .btn .lean-inner{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
    gap:6px;
    white-space:nowrap;
    text-align:center;
    font-size:12px;
  }

  #tab-route .route-toolbar-conditions{
    margin-left:auto;
    justify-self:end;
  }

  #tab-route #btnAddStop{
    display:none !important;
  }

  #tab-route .stop-insert-row{
    display:flex;
    justify-content:flex-end;
    margin:-4px 0 4px;
    padding-right:8px;
  }

  #tab-route .stop-insert-btn{
    min-width:132px;
  }

  #tab-route .route-toolbar-center-controls .btn{
    width:100%;
  }

  #tab-route .metryx-map-type-control{
    right:18px;
  }
}

.metryx-map-type-control{
  position:absolute;
  top:12px;
  right:12px;
  z-index:20;
  display:block;
  pointer-events:auto;
}

.metryx-map-type-trigger,
.metryx-map-type-panel{
  pointer-events:auto;
}

.metryx-map-type-trigger{
  all:unset;
  appearance:none;
  -webkit-appearance:none;
  box-sizing:border-box;
  width:38px;
  height:38px;
  padding:0;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(18, 18, 20, 0.9);
  background-image:none !important;
  color:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  line-height:1;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.28);
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
}

.metryx-map-type-trigger-dot{
  width:4px;
  height:4px;
  border-radius:999px;
  background:currentColor;
  opacity:0.96;
  display:block;
}

.metryx-map-type-panel{
  display:none;
  position:absolute;
  top:0;
  right:46px;
  min-width:192px;
  max-width:min(240px, calc(100vw - 32px));
  max-height:min(72vh, 420px);
  overflow:auto;
  padding:8px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.1);
  background:
    linear-gradient(180deg, rgba(255,248,235,0.035), rgba(255,248,235,0.008)),
    rgba(16, 16, 18, 0.96);
  box-shadow:
    0 20px 40px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.metryx-map-type-control.is-open .metryx-map-type-panel{
  display:grid;
  gap:8px;
}

@media (max-width: 640px){
  .metryx-map-type-panel{
    right:42px;
  }
}

.metryx-map-type-group-label{
  padding:2px 8px 0;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(226, 232, 240, 0.62);
}

.metryx-map-inline-toggle{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.metryx-map-mode-stack{
  display:grid;
  gap:6px;
}

.metryx-map-wrap--fullscreen{
  position:fixed !important;
  top:calc(env(safe-area-inset-top, 0px) + 8px) !important;
  right:calc(env(safe-area-inset-right, 0px) + 8px) !important;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
  left:calc(env(safe-area-inset-left, 0px) + 8px) !important;
  z-index:4000 !important;
  width:auto !important;
  max-width:none !important;
  height:auto !important;
  max-height:none !important;
  margin:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  border-radius:22px !important;
  box-sizing:border-box !important;
  box-shadow:0 24px 80px rgba(0,0,0,0.5);
  background:#050816;
}

.metryx-map-wrap--fullscreen .metryx-map-type-control{
  z-index:2000;
}

body.metryx-map-fullscreen-open{
  overflow:hidden;
}

.metryx-map-wrap--fullscreen #routeMapCanvas,
.metryx-map-wrap--fullscreen #dashActiveRouteMapCanvas{
  min-height:100% !important;
  width:100% !important;
  height:100% !important;
}

.metryx-map-type-option{
  all:unset;
  appearance:none;
  -webkit-appearance:none;
  box-sizing:border-box;
  border:0;
  border-radius:12px;
  background:rgba(255,255,255,0.028);
  background-image:none !important;
  color:#e5e7eb;
  padding:10px 12px;
  text-align:left;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
  border:1px solid transparent;
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.metryx-map-type-panel::-webkit-scrollbar{
  width:8px;
}

.metryx-map-type-panel::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.18);
  border-radius:999px;
}

.metryx-map-type-option.is-active{
  background:rgba(255,255,255,0.09);
  border-color:rgba(255,255,255,0.06);
  color:#ffffff;
}

.metryx-map-type-option.is-accent{
  background:linear-gradient(180deg, rgba(255,186,107,0.2), rgba(255,186,107,0.1));
  border-color:rgba(255,186,107,0.16);
  color:#fff4dd;
}

.metryx-map-type-footnote{
  padding:0 8px 2px;
  font-size:11px;
  line-height:1.35;
  color:rgba(229, 231, 235, 0.58);
}

.metryx-map-planning-card{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:2000;
  display:none;
  gap:8px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.1);
  background:
    linear-gradient(180deg, rgba(255,248,235,0.04), rgba(255,248,235,0.01)),
    rgba(14, 14, 16, 0.94);
  box-shadow:
    0 20px 40px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.metryx-map-planning-card.is-visible{
  display:grid;
}

.metryx-map-planning-eyebrow{
  font-size:10px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(226,232,240,0.62);
}

.metryx-map-planning-title{
  font-size:15px;
  font-weight:800;
  color:#f8fafc;
}

.metryx-map-planning-subtitle,
.metryx-map-planning-coords{
  font-size:12px;
  line-height:1.4;
  color:rgba(229,231,235,0.68);
}

.metryx-map-planning-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:2px;
}

.metryx-map-plan-btn{
  all:unset;
  appearance:none;
  -webkit-appearance:none;
  box-sizing:border-box;
  border-radius:12px;
  padding:10px 12px;
  font-size:12px;
  font-weight:800;
  text-align:center;
  color:#f3f4f6;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  cursor:pointer;
  touch-action:manipulation;
}

.metryx-map-plan-btn.is-primary{
  background:linear-gradient(180deg, rgba(255,186,107,0.2), rgba(255,186,107,0.1));
  border-color:rgba(255,186,107,0.16);
  color:#fff4dd;
}

.metryx-map-planning-dismiss{
  all:unset;
  appearance:none;
  -webkit-appearance:none;
  justify-self:end;
  font-size:12px;
  font-weight:700;
  color:rgba(229,231,235,0.74);
  cursor:pointer;
}

body.light .metryx-map-type-trigger{
  border-color:rgba(15,23,42,0.12);
  background:rgba(255,255,255,0.92);
  color:#0f172a;
  box-shadow:0 10px 24px rgba(15,23,42,0.14);
}

body.light .metryx-map-type-panel{
  border-color:rgba(15,23,42,0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.94));
  box-shadow:
    0 18px 36px rgba(15,23,42,0.16),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

body.light .metryx-map-type-option{
  background:rgba(15,23,42,0.035);
  color:#334155;
}

body.light .metryx-map-type-group-label{
  color:#64748b;
}

body.light .metryx-map-type-option.is-active{
  background:rgba(15,23,42,0.08);
  border-color:rgba(15,23,42,0.08);
  color:#0f172a;
}

body.light .metryx-map-type-option.is-accent{
  background:linear-gradient(180deg, rgba(59,130,246,0.16), rgba(59,130,246,0.10));
  border-color:rgba(59,130,246,0.16);
  color:#0f172a;
}

body.light .metryx-map-type-footnote{
  color:#607089;
}

body.light .metryx-map-planning-card{
  border-color:rgba(15,23,42,0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.94));
  box-shadow:
    0 18px 36px rgba(15,23,42,0.16),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

body.light .metryx-map-planning-eyebrow{
  color:#64748b;
}

body.light .metryx-map-planning-title{
  color:#0f172a;
}

body.light .metryx-map-planning-subtitle,
body.light .metryx-map-planning-coords,
body.light .metryx-map-planning-dismiss{
  color:#475569;
}

body.light .metryx-map-plan-btn{
  background:rgba(15,23,42,0.035);
  border-color:rgba(15,23,42,0.08);
  color:#334155;
}

body.light .metryx-map-plan-btn.is-primary{
  background:linear-gradient(180deg, rgba(59,130,246,0.16), rgba(59,130,246,0.10));
  border-color:rgba(59,130,246,0.16);
  color:#0f172a;
}

/* Route: Draft route verification notice (full card width) */
#tab-route .draft-route-notice{
  width: 100%;
  margin: 0 0 16px 0;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(
    180deg,
    rgba(245,158,11,0.10),
    rgba(245,158,11,0.06)
  );
  box-sizing: border-box;
}

#tab-route .draft-route-title{
  font-weight: 800;
  margin-bottom: 6px;
}

#tab-route .draft-route-body{
  line-height: 1.4;
}

/* Light-mode tab-specific lift for Route */
body.light #tab-route .panel{
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  box-shadow: 0 18px 55px rgba(15,23,42,0.12) !important;
}

body.light #tab-route .results-card,
body.light #tab-route .card{
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,0.10) !important;
}

body.light #tab-route input,
body.light #tab-route select,
body.light #tab-route textarea{
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15,23,42,0.18) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06) !important;
}

body.light #tab-route input:focus,
body.light #tab-route select:focus,
body.light #tab-route textarea:focus{
  outline: none !important;
  border-color: rgba(15,23,42,0.45) !important;
  box-shadow: 0 0 0 3px rgba(15,23,42,0.12), 0 10px 22px rgba(15,23,42,0.08) !important;
}

body.light #tab-route button:not(.btn-primary):not(.primary){
  border-color: rgba(15,23,42,0.22);
}

body.light #tab-route .btn-outline,
body.light #tab-route .btn-ghost{
  background: rgba(255,255,255,0.80) !important;
  color: rgba(15,23,42,0.90) !important;
  border: 1px solid rgba(15,23,42,0.22) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,0.08) !important;
}

body.light #tab-route .btn-outline:hover,
body.light #tab-route .btn-ghost:hover{
  background: rgba(15,23,42,0.05) !important;
  border-color: rgba(15,23,42,0.30) !important;
}

/* =========================
   ROUTE HINTS / GOLDEN STRIKE
   ========================= */
.route-hints-card {
  border: 1px solid var(--border);
}

.route-hints-card .ifta-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.route-hints-card .ifta-head-left{
  flex:1 1 320px;
  min-width:0;
}

.route-hints-card .ifta-head-left h3{
  margin:0 0 6px;
}

.route-hints-card .ifta-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin-top:6px;
}

.route-hints-card #routeHintsStatus{
  display:inline-flex;
  align-items:center;
  min-height:36px;
}

.route-hints-card .ifta-controls .btn{
  margin:0;
}

.route-hints-body {
  margin-top: 16px;
}

.route-hint-summary {
  margin-bottom: 10px;
}

.route-hint-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.route-hint-collapse-btn {
  flex: 0 0 auto;
}

.route-hint-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.route-hint-list.is-collapsed {
  display: none;
}

.route-hint-item {
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255,246,232,.018), rgba(255,246,232,.006)),
    rgba(20,20,22,.68);
}

.route-hint-item--interactive {
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.route-hint-item--interactive:hover,
.route-hint-item--interactive:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(96,165,250,.28);
  box-shadow: 0 14px 30px rgba(15,23,42,.16);
}

.route-hint-actions {
  margin-top: 10px;
}

.route-hint-handled {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(34,197,94,.24);
  background: linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.06));
  color: #bbf7d0;
  font-size: 12px;
  font-weight: 700;
}

.route-hint-action {
  min-width: 148px;
}

.route-hint-item-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.route-hint-title {
  font-weight: 700;
  color: var(--text);
}

.route-hint-road {
  margin-top: 2px;
}

.route-hint-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  color: var(--text);
  opacity: .9;
}

.route-hint-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(148,163,184,.12);
  color: var(--text);
  white-space: nowrap;
}

.route-hint-badge.warn {
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.14);
  color: #fbbf24;
}

.route-hint-badge.danger {
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.14);
  color: #f87171;
}

.bid-bar-hazard-advisory {
  border-top: 1px dashed rgba(148,163,184,.18);
  padding-top: 10px;
}

.route-advisory {
  font-size: 12px;
  font-weight: 600;
}

.route-advisory.warn {
  color: #fbbf24;
}

.route-advisory.danger {
  color: #f87171;
}

.route-hazard-workspace {
  position: fixed;
  top: 96px;
  right: 18px;
  bottom: 24px;
  width: min(420px, calc(100vw - 36px));
  padding: 18px;
  border-radius: 24px;
  border: 1px solid var(--border-strong);
  background: var(--card-strong);
  box-shadow: var(--shadow);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  z-index: 1200;
  transform: translateX(calc(100% + 26px));
  opacity: 0;
  pointer-events: none;
  transition: transform .24s ease, opacity .2s ease;
}

.route-hazard-workspace.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.route-hazard-workspace__sheet {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.route-hazard-workspace__content {
  flex: 1 1 auto;
}

.route-hazard-workspace__grabber {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  margin: 0 0 10px;
  padding: 10px 0 14px;
  border: 0;
  background: transparent;
  cursor: ns-resize;
}

.route-hazard-workspace__grabber span {
  display: block;
  width: 48px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.24);
}

.route-hazard-workspace__empty {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.route-hazard-workspace__empty h3,
.route-hazard-workspace__header h3 {
  margin: 0;
  font-size: 26px;
  line-height: 1.05;
}

.route-hazard-workspace__empty p,
.route-hazard-workspace__section p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.55;
}

.route-hazard-workspace__eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.route-hazard-workspace__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.route-hazard-workspace__close {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  background: var(--card-soft);
}

.route-hazard-workspace__subhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: var(--text-soft);
  font-size: 13px;
}

.route-hazard-workspace__badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-soft);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.route-hazard-workspace__badge.medium {
  color: #fbbf24;
  border-color: rgba(245,158,11,.32);
  background: rgba(245,158,11,.14);
}

.route-hazard-workspace__badge.high {
  color: #f87171;
  border-color: rgba(239,68,68,.34);
  background: rgba(239,68,68,.14);
}

.route-hazard-workspace__badge.low {
  color: #93c5fd;
  border-color: rgba(96,165,250,.28);
  background: rgba(96,165,250,.12);
}

.route-hazard-workspace__section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.route-hazard-workspace__section-title {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.route-hazard-workspace__detail-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.route-hazard-workspace__detail {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card-soft);
}

.route-hazard-workspace__detail span {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

.route-hazard-workspace__detail strong {
  display: block;
  color: var(--text);
  line-height: 1.45;
}

.route-hazard-workspace__callout {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card-soft);
}

.route-hazard-workspace__callout strong,
.route-hazard-workspace__callout span {
  display: block;
}

.route-hazard-workspace__callout strong {
  color: var(--text);
}

.route-hazard-workspace__callout span {
  margin-top: 4px;
  color: var(--text-soft);
  line-height: 1.5;
}

.route-hazard-workspace__callout.is-loading {
  border-color: rgba(96,165,250,.28);
  background: rgba(96,165,250,.08);
}

.route-hazard-workspace__callout.is-failure {
  border-color: rgba(239,68,68,.3);
  background: rgba(239,68,68,.08);
}

.route-hazard-workspace__callout.is-success {
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.08);
}

.route-hazard-workspace__impact {
  margin-top: 8px;
  font-weight: 800;
  color: var(--text);
}

.route-hazard-workspace__impact-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.route-hazard-workspace__impact-card,
.route-hazard-workspace__comparison-card {
  padding: 12px 13px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card-soft);
}

.route-hazard-workspace__impact-card.is-primary {
  border-color: rgba(34,197,94,.24);
  background: linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.07));
}

.route-hazard-workspace__impact-card span,
.route-hazard-workspace__comparison-card span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.route-hazard-workspace__impact-card strong,
.route-hazard-workspace__comparison-card strong {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font-size: 22px;
  line-height: 1.08;
}

.route-hazard-workspace__comparison-card em {
  display: block;
  margin-top: 6px;
  color: var(--text-soft);
  font-style: normal;
}

.route-hazard-workspace__comparison {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.route-hazard-workspace__comparison-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.route-hazard-workspace__comparison-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}

.route-hazard-workspace__comparison-card.is-next {
  border-color: rgba(96,165,250,.24);
  background: linear-gradient(180deg, rgba(96,165,250,.12), rgba(96,165,250,.06));
}

.route-hazard-workspace__comparison-note {
  margin-top: 10px;
  color: var(--text-soft);
  font-size: 12px;
}

.route-hazard-workspace__footer {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.route-hazard-workspace__footer .btn,
.route-hazard-workspace__footer .lean-btn {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.route-hazard-workspace__footer .btn.lean-btn,
.route-hazard-workspace__footer button.btn.lean-btn {
  transform: none !important;
  -webkit-transform: none !important;
  border-radius: var(--r-pill) !important;
}

.route-hazard-workspace__footer .lean-inner {
  display: block;
  width: 100%;
  white-space: normal;
  text-align: center;
  transform: none !important;
  -webkit-transform: none !important;
}

@media (min-width: 769px) {
  .route-load-footer-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: center;
  }

  .route-load-footer-left-actions {
    display: contents;
  }

  .route-load-footer-actions > .btn,
  .route-load-footer-left-actions > .btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 46px !important;
    justify-content: center !important;
  }

  .route-load-footer-actions > .btn .lean-inner,
  .route-load-footer-left-actions > .btn .lean-inner {
    display: inline-flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
  }

  #btnCrunchRouteBottom .lean-inner {
    gap: 6px !important;
  }

  #btnCrunchRouteBottom .route-load-crunch-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.92em !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
  }
}

@media (max-width: 768px) {
  body.route-hazard-workspace-open {
    overflow: hidden;
  }

  .panel-footer-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    border-top: none !important;
  }

  .footer-left-actions {
    display: contents !important;
  }

  #btnClearStops { order: 1 !important; width: 100% !important; }
  #btnSaveRun { order: 2 !important; width: 100% !important; margin: 0 !important; }
  #btnAutoFillAll { order: 3 !important; width: 100% !important; }
  #btnCrunchRouteBottom { order: 4 !important; width: 100% !important; }

  .route-hazard-workspace {
    top: var(--route-hazard-sheet-top-current, auto);
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    max-height: none;
    height: auto;
    min-height: 0;
    padding: 12px 16px 20px;
    border-radius: 22px;
    overflow-x: hidden;
    transform: translateY(calc(100% + 24px));
    overscroll-behavior-y: contain;
    transition: top .22s ease, transform .24s ease, opacity .2s ease;
  }

  .route-hazard-workspace.is-open {
    transform: translateY(0);
  }

  .route-hazard-workspace.is-dragging {
    transition: none;
  }

  .route-hazard-workspace__sheet {
    min-height: 100%;
    max-height: calc(100vh - var(--route-hazard-sheet-top-current, 120px) - 12px);
  }

  .route-hazard-workspace__grabber {
    display: flex;
    touch-action: none;
    min-height: 42px;
    margin: 0 0 12px;
    padding: 10px 0 14px;
  }

  .route-hazard-workspace__content {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .route-hazard-workspace__detail-grid {
    grid-template-columns: 1fr;
  }

  .route-hazard-workspace__impact-grid,
  .route-hazard-workspace__comparison-grid {
    grid-template-columns: 1fr;
  }

  .route-hazard-workspace__footer {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px){
  html.native-runtime #tab-route .route-hints-card,
  html.native-runtime #tab-route #stopsContainer,
  html.native-runtime #tab-route .route-docs-panel .cc-subcard--compliance{
    width:calc(100% + 32px);
    margin-left:-16px !important;
    margin-right:-16px !important;
  }

  html.native-runtime #tab-route #stopsContainer{
    margin-top:24px;
    margin-bottom:-16px;
    box-sizing:border-box;
  }

  html.native-runtime #tab-route .route-load-footer-actions{
    gap:12px !important;
    margin-top:12px;
    margin-bottom:16px;
    width:100%;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  html.native-runtime #tab-route .route-docs-panel{
    margin-bottom:0 !important;
    padding-bottom:0;
  }

  html.native-runtime #tab-route .route-docs-panel .cc-subcard--compliance{
    margin-bottom:0;
  }
}

@media (max-width: 720px) and (display-mode: standalone){
  #tab-route .route-hints-card,
  #tab-route #stopsContainer,
  #tab-route .route-docs-panel .cc-subcard--compliance{
    width:calc(100% + 32px);
    margin-left:-16px !important;
    margin-right:-16px !important;
  }

  #tab-route #stopsContainer{
    margin-top:24px;
    margin-bottom:-16px;
    box-sizing:border-box;
  }

  #tab-route .route-load-footer-actions{
    gap:12px !important;
    margin-top:12px;
    margin-bottom:16px;
    width:100%;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  #tab-route .route-docs-panel{
    margin-bottom:0 !important;
    padding-bottom:0;
  }

  #tab-route .route-docs-panel .cc-subcard--compliance{
    margin-bottom:0;
  }
}

/* ==========================================
   ROUTE HINTS POLISH
   ========================================== */

#tab-route #mapWrap,
#tab-route #routeMapCanvas {
  min-height: 560px;
}

#tab-route #routeHazardsStatus,
#tab-route .route-hazards-status,
#tab-route [data-route-hazards-status] {
  margin-bottom: 12px;
}

#tab-route #routeHazardsSummary,
#tab-route .route-hazards-summary,
#tab-route [data-route-hazards-summary] {
  margin-bottom: 12px;
}

#tab-route #btnRouteHazardsRescan,
#tab-route #btnHazardRescan,
#tab-route .route-hazards-actions,
#tab-route .route-hazards-rescan {
  margin-top: 10px;
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  #tab-route #mapWrap,
  #tab-route #routeMapCanvas {
    min-height: 420px;
  }
}