/* SamiMap R107 — approved 3-row mobile trip HUD.
   Metrics / slim current road / full-width Route action.
   No navigation logic, controls or desktop styling modified. */
@media(max-width:760px){
  html body.bx-r38-ui.navigation-active:is(.bx100-hud-summary,.bx100-hud-collapsed) #driveHud {
    height:174px!important;min-height:174px!important;max-height:174px!important;
    width:calc(100vw - 88px - env(safe-area-inset-left,0px))!important;
    max-width:calc(100vw - 88px - env(safe-area-inset-left,0px))!important;
    transition:transform 640ms cubic-bezier(.22,1,.36,1),opacity 420ms ease!important;
  }
  html body.bx-r38-ui.navigation-active:is(.bx100-hud-summary,.bx100-hud-collapsed) #driveHud > #bxR40RoadHud {
    height:174px!important;min-height:174px!important;max-height:174px!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:65px 37px 58px!important;
    grid-template-areas:"arrival eta remain" "road road road" "steps steps steps"!important;
    gap:0!important;align-content:center!important;
    padding:6px 9px!important;
    border-radius:18px!important;
  }
  html body.bx-r38-ui.navigation-active:is(.bx100-hud-summary,.bx100-hud-collapsed) #bxR40RoadHud > .bx40-metric {
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    height:65px!important;min-height:0!important;width:100%!important;
    padding:2px 3px 4px!important;margin:0!important;gap:2px!important;
    border:0!important;border-right:1px solid rgba(143,195,230,.17)!important;
    background:transparent!important;overflow:hidden!important;text-align:center!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-remain {
    border-right:0!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-metric .bx40-metric-icon {
    width:24px!important;height:24px!important;min-width:24px!important;
    flex:0 0 24px!important;margin:0 auto!important;
    border-radius:50%!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-metric .bx40-metric-icon svg {
    width:14px!important;height:14px!important;stroke-width:2!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-metric .bx40-metric-copy {
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    width:100%!important;min-width:0!important;gap:2px!important;
    overflow:hidden!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-metric .bx40-metric-copy span {
    display:block!important;font-size:9px!important;line-height:1!important;
    color:#b9d0e2!important;-webkit-text-fill-color:#b9d0e2!important;
    font-weight:600!important;white-space:nowrap!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-metric .bx40-metric-copy strong {
    display:block!important;margin:0!important;padding:0!important;
    color:#fff!important;-webkit-text-fill-color:#fff!important;
    font-size:13px!important;line-height:1.14!important;
    font-weight:800!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    max-width:100%!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-road-sign {
    grid-area:road!important;display:flex!important;box-sizing:border-box!important;
    height:34px!important;min-height:34px!important;max-height:34px!important;
    margin:2px 0 1px!important;padding:0 8px!important;gap:7px!important;
    border:1px solid rgba(119,178,220,.24)!important;
    border-radius:9px!important;
    background:rgba(119,174,220,.075)!important;
    align-items:center!important;overflow:hidden!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-road-sign .bx40-road-mini {
    flex:0 0 23px!important;min-width:23px!important;width:23px!important;height:23px!important;
    border-radius:7px!important;
    border:1px solid rgba(86,185,236,.45)!important;
    box-shadow:none!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-road-sign .bx40-road-mini svg {
    width:14px!important;height:14px!important;
    stroke:#fff!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-road-sign .bx40-road-name {
    display:flex!important;flex:1 1 auto!important;min-width:0!important;
    flex-direction:row!important;align-items:baseline!important;gap:7px!important;
    white-space:nowrap!important;overflow:hidden!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-road-sign .bx40-road-name span {
    color:#a6c4dc!important;-webkit-text-fill-color:#a6c4dc!important;
    flex:0 0 auto!important;font-size:9px!important;font-weight:600!important;
    white-space:nowrap!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-road-sign .bx40-road-name strong {
    display:block!important;min-width:0!important;flex:1 1 auto!important;
    color:#fff!important;-webkit-text-fill-color:#fff!important;
    font-size:12px!important;line-height:1.2!important;font-weight:800!important;
    overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
    -webkit-line-clamp:unset!important;max-height:none!important;
    margin:0!important;padding:0!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud #bx104RoadArabic {
    display:none!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > #bx102StepsButton {
    grid-area:steps!important;display:flex!important;align-items:center!important;justify-content:center!important;
    box-sizing:border-box!important;align-self:center!important;
    width:100%!important;max-width:none!important;
    height:45px!important;min-height:45px!important;
    margin:5px 0 0!important;padding:5px 12px!important;gap:9px!important;
    border-radius:13px!important;
    color:#fff!important;-webkit-text-fill-color:#fff!important;
    font:800 15px/1.1 system-ui,-apple-system,'Segoe UI',sans-serif!important;
    white-space:nowrap!important;
    background:linear-gradient(115deg,#078bea,#086fe2)!important;
    border:1px solid rgba(146,225,255,.67)!important;
  }
  html body.bx-r38-ui.navigation-active #bx102StepsButton > span:not(.bx104-button-svg):not(.bx104-chevron) {
    display:none!important;
  }
  html body.bx-r38-ui.navigation-active #bx102StepsButton::after {
    content:"Route"!important;
    display:block!important;flex:0 0 auto!important;
    color:#fff!important;-webkit-text-fill-color:#fff!important;
    font:800 15px/1 system-ui,-apple-system,'Segoe UI',sans-serif!important;
    letter-spacing:.1px!important;
  }
  html body.bx-r38-ui.navigation-active #bx102StepsButton .bx104-button-svg {
    display:block!important;width:18px!important;height:18px!important;flex:0 0 18px!important;
    color:#fff!important;
  }
  html body.bx-r38-ui.navigation-active #bx102StepsButton .bx104-chevron{
    display:none!important;
  }
  html body.bx-r38-ui.navigation-active.bx100-hud-summary #bx102SpeedMap:not([hidden]) {
    bottom:max(196px,calc(env(safe-area-inset-bottom,0px) + 196px))!important;
  }
}
@media(max-width:350px){
  html body.bx-r38-ui.navigation-active:is(.bx100-hud-summary,.bx100-hud-collapsed) #driveHud {
    width:calc(100vw - 80px - env(safe-area-inset-left,0px))!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-road-sign .bx40-road-name span {
    font-size:8px!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-road-sign .bx40-road-name strong{
    font-size:11px!important;
  }
  html body.bx-r38-ui.navigation-active #bxR40RoadHud > .bx40-metric .bx40-metric-copy strong{
    font-size:12px!important;
  }
}