/* TankLina 0.10.92 — responsive + safe-area hardening
   Scope: layout/responsiveness, device safe areas and rendering stability only.
   No price, route, API, tank-stop or savings business logic is changed. */

:root{
  --tl92-native-safe-top:clamp(48px,7svh,64px);
  --tl92-native-safe-bottom:clamp(16px,2.5svh,28px);
}

/* overflow-x:hidden creates a scroll container in some Android WebViews and can
   break sticky positioning. clip prevents sideways bleed without doing that. */
html,body{
  max-width:100%!important;
  overflow-x:clip!important;
}
html{
  scroll-padding-top:max(132px,calc(env(safe-area-inset-top,0px) + 118px));
}
html.native-android-root{
  scroll-padding-top:calc(var(--tl92-native-safe-top) + 118px);
}

body.app-final-01092 .app-shell{
  width:min(100%,770px)!important;
  max-width:770px!important;
  padding-left:max(clamp(10px,2.4vw,20px),env(safe-area-inset-left,0px))!important;
  padding-right:max(clamp(10px,2.4vw,20px),env(safe-area-inset-right,0px))!important;
  padding-bottom:max(118px,calc(100px + env(safe-area-inset-bottom,0px)))!important;
}
html.native-android-root body.app-final-01092 .app-shell,
body.app-final-01092.native-android .app-shell{
  padding-bottom:calc(104px + var(--tl92-native-safe-bottom))!important;
}

/* System status bar / cutout protection. The sticky header is the guard layer,
   so scrolling content can no longer sit below WLAN/battery/time icons. */
body.app-final-01092 .topbar{
  position:sticky!important;
  top:0!important;
  z-index:500!important;
  padding-top:max(12px,calc(env(safe-area-inset-top,0px) + 12px))!important;
  isolation:isolate!important;
}
html.native-android-root body.app-final-01092 .topbar,
body.app-final-01092.native-android .topbar{
  padding-top:max(var(--tl92-native-safe-top),calc(env(safe-area-inset-top,0px) + 14px))!important;
  min-height:calc(76px + var(--tl92-native-safe-top))!important;
}

body.app-final-01092 .floating-home-logo{
  top:max(14px,calc(env(safe-area-inset-top,0px) + 10px))!important;
  right:max(10px,calc(env(safe-area-inset-right,0px) + 10px),calc((100vw - 770px)/2 + 22px))!important;
}
html.native-android-root body.app-final-01092 .floating-home-logo,
body.app-final-01092.native-android .floating-home-logo{
  top:max(calc(var(--tl92-native-safe-top) + 8px),calc(env(safe-area-inset-top,0px) + 12px))!important;
}

/* Every responsive flex/grid child must be allowed to shrink instead of
   pushing the card to the right on narrow Android devices. */
body.app-final-01092 main,
body.app-final-01092 section,
body.app-final-01092 .section,
body.app-final-01092 .hero-card,
body.app-final-01092 .today-recommendation-shell,
body.app-final-01092 .station-list,
body.app-final-01092 .station-card,
body.app-final-01092 .station-card-top,
body.app-final-01092 .station-identity,
body.app-final-01092 .station-title-copy,
body.app-final-01092 .station-price-wrap,
body.app-final-01092 .station-net-hero,
body.app-final-01092 .station-key-grid,
body.app-final-01092 .station-trust-strip,
body.app-final-01092 .station-now-row,
body.app-final-01092 .service-summary,
body.app-final-01092 .station-price-details,
body.app-final-01092 .station-service-details{
  min-width:0!important;
  box-sizing:border-box!important;
}
body.app-final-01092 .station-title-copy h3,
body.app-final-01092 .station-address-sub,
body.app-final-01092 .station-title-copy .sub{
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

/* Fix the concrete bug visible in the handset screenshot:
   width:100% + horizontal margin made the CTA and mobile station head extend
   to the right. Width now accounts for the intended inset. */
body.app-final-01092 .station-route-main,
body.app-final-01092 .station-route-main.featured-route,
body.app-final-01092 .station-route-main.secondary-route{
  width:calc(100% - 36px)!important;
  max-width:calc(100% - 36px)!important;
  margin:14px 18px 0!important;
  box-sizing:border-box!important;
  align-self:stretch!important;
}

/* Common inner rhythm: at phone widths all blocks use the same left/right
   inset. This avoids the staggered/shifted look across brands and screen sizes. */
@media (max-width:560px){
  body.app-final-01092 .station-card.decision-card .station-card-top,
  body.app-final-01092 .station-card.location-only .station-card-top,
  body.app-final-01092 .station-card .station-card-top{
    width:auto!important;
    max-width:none!important;
    margin:10px 12px 8px!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.app-final-01092 .station-identity,
  body.app-final-01092 .station-price-wrap{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  body.app-final-01092 .station-price-wrap{
    flex:1 1 auto!important;
    text-align:left!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
  }
  body.app-final-01092 .station-net-hero,
  body.app-final-01092 .station-key-grid,
  body.app-final-01092 .station-price-details,
  body.app-final-01092 .station-service-details,
  body.app-final-01092 .service-summary,
  body.app-final-01092 .station-trust,
  body.app-final-01092 .station-now{
    margin-left:12px!important;
    margin-right:12px!important;
  }
  body.app-final-01092 .station-card-headline{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  body.app-final-01092 .station-route-main,
  body.app-final-01092 .station-route-main.featured-route,
  body.app-final-01092 .station-route-main.secondary-route{
    width:calc(100% - 24px)!important;
    max-width:calc(100% - 24px)!important;
    margin:14px 12px 0!important;
  }
  body.app-final-01092 .station-fuel-chip,
  body.app-final-01092 .station-card-price{
    max-width:100%!important;
  }
}

@media (max-width:340px){
  body.app-final-01092 .station-card.decision-card .station-card-top,
  body.app-final-01092 .station-card.location-only .station-card-top,
  body.app-final-01092 .station-card .station-card-top,
  body.app-final-01092 .station-net-hero,
  body.app-final-01092 .station-key-grid,
  body.app-final-01092 .station-price-details,
  body.app-final-01092 .station-service-details,
  body.app-final-01092 .service-summary,
  body.app-final-01092 .station-trust,
  body.app-final-01092 .station-now{
    margin-left:8px!important;
    margin-right:8px!important;
  }
  body.app-final-01092 .station-card-headline{
    padding-left:8px!important;
    padding-right:8px!important;
  }
  body.app-final-01092 .station-route-main,
  body.app-final-01092 .station-route-main.featured-route,
  body.app-final-01092 .station-route-main.secondary-route{
    width:calc(100% - 16px)!important;
    max-width:calc(100% - 16px)!important;
    margin-left:8px!important;
    margin-right:8px!important;
  }
  body.app-final-01092 .station-photo-wrap{
    width:88px!important;
    height:70px!important;
    margin-right:10px!important;
  }
  body.app-final-01092 .station-brand-logo,
  body.app-final-01092 .drive-station-logo .station-brand-logo{
    width:52px!important;
    height:44px!important;
    min-width:52px!important;
    flex-basis:52px!important;
  }
}

/* Fixed navigation respects gesture bars, rounded corners and side cutouts.
   Equal grid columns keep every item centred on every handset width. */
body.app-final-01092 .bottom-nav.nav-bar{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  width:min(calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)),500px)!important;
  max-width:500px!important;
  left:calc(50% + (env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))/2)!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  bottom:max(10px,env(safe-area-inset-bottom,0px))!important;
  gap:6px!important;
}
html.native-android-root body.app-final-01092 .bottom-nav.nav-bar,
body.app-final-01092.native-android .bottom-nav.nav-bar{
  bottom:max(var(--tl92-native-safe-bottom),env(safe-area-inset-bottom,0px))!important;
}
body.app-final-01092 .bottom-nav .nav-item{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  padding-inline:4px!important;
}
body.app-final-01092 .bottom-nav .nav-item span:last-child{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
@media (max-width:320px){
  body.app-final-01092 .bottom-nav.nav-bar{gap:3px!important;padding-left:6px!important;padding-right:6px!important;}
  body.app-final-01092 .bottom-nav .nav-item span:last-child{font-size:10.5px!important;letter-spacing:-.02em!important;}
  body.app-final-01092 .bottom-nav .nav-icon{font-size:17px!important;}
}

/* Forms/dialogs must remain operable when a keyboard, notch or gesture area
   reduces the usable viewport. */
body.app-final-01092 .dialog,
body.app-final-01092 .legal-dialog{
  max-width:min(620px,calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)))!important;
  max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
  overscroll-behavior:contain!important;
}
html.native-android-root body.app-final-01092 .dialog,
body.app-final-01092.native-android .dialog{
  max-height:calc(100dvh - var(--tl92-native-safe-top) - var(--tl92-native-safe-bottom) - 12px)!important;
}
html.native-android-root body.app-final-01092 .drive-mode-shell,
body.app-final-01092.native-android .drive-mode-shell{
  padding-top:max(var(--tl92-native-safe-top),env(safe-area-inset-top,0px))!important;
  padding-bottom:max(var(--tl92-native-safe-bottom),env(safe-area-inset-bottom,0px))!important;
}

/* Small landscape devices: keep the same safe-area contract; never let the
   old landscape rule move the fixed brand icon back into the status bar. */
@media (max-height:520px) and (orientation:landscape){
  html.native-android-root body.app-final-01092 .topbar,
  body.app-final-01092.native-android .topbar{
    position:sticky!important;
    top:0!important;
    padding-top:max(44px,calc(env(safe-area-inset-top,0px) + 10px))!important;
    min-height:106px!important;
  }
  html.native-android-root body.app-final-01092 .floating-home-logo,
  body.app-final-01092.native-android .floating-home-logo{
    top:max(48px,calc(env(safe-area-inset-top,0px) + 12px))!important;
  }
}

/* Desktop/tablet stability: preserve the deliberate centred app stage while
   ensuring fixed controls never drift outside it. */
@media (min-width:900px){
  body.app-final-01092 .app-shell{max-width:770px!important;}
}

@media (prefers-reduced-motion:reduce){
  body.app-final-01092 .floating-home-logo{transition:none!important;}
}

/* Ultra-narrow fallback (legacy 280–320 CSS px and split-screen modes). */
@media (max-width:320px){
  body.app-final-01092 .savings-since{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow-wrap:anywhere!important;
  }
}