@import url('/base.css?v=8ca1f9fe');
@import url('/venue-polish.css?v=15fb2f80');
@import url('/venue-photo-fix.css?v=ebdf1f3d');
@import url('/race-list-polish.css?v=cf908188');
@import url('/race-list-fix.css?v=463adb6f');
@import url('/race-screen-v2.css?v=da51fbec');
@import url('/result-screen.css?v=eaef5bb2');
@import url('/performance-screen.css?v=2670fdeb');

/* iPhone/Safari: use the document itself as the normal vertical scroller. */
html{min-height:100%;height:auto;overflow-x:hidden;overflow-y:auto;-webkit-text-size-adjust:100%}
body{min-height:100%;height:auto;overflow-x:hidden;overflow-y:auto;padding-bottom:calc(112px + env(safe-area-inset-bottom))!important}
.app{min-height:100vh;height:auto!important;overflow:visible!important;display:block!important}
main{min-height:0;height:auto!important;overflow:visible!important;padding-bottom:0!important}
.topbar{position:sticky!important;top:0!important}
.screen{padding-bottom:32px}
#screen-home{padding-bottom:32px}
#screen-performance{padding-bottom:80px!important}
.venues{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}

/* Bottom navigation stays fixed during normal browsing. */
.bottomNav{position:fixed!important;left:50%!important;bottom:0!important;transform:translateX(-50%)!important;width:min(100%,430px)!important;min-height:82px!important;padding-top:8px!important;padding-bottom:calc(8px + env(safe-area-inset-bottom))!important}
.bottomNav button{min-height:62px!important;font-size:12px!important;font-weight:850!important;padding:7px 2px 6px!important;line-height:1.15!important}
.bottomNav button b{display:block!important;font-size:25px!important;line-height:1!important;margin-bottom:6px!important;font-weight:700!important}

#obHistList::after{content:"";display:block;width:100%;height:220px;pointer-events:none}
#performanceContent::after{content:"";display:block;width:100%;height:140px;pointer-events:none}
#detailContent::after,#resultContent::after{content:"";display:block;width:100%;height:120px;pointer-events:none}
#performanceContent>.card:last-child,#obHistList>.card:last-child,#detailContent>.card:last-child,#resultContent>.card:last-child{margin-bottom:24px}

/* The modal card already dims the page with its huge shadow. Do not let the
   separate backdrop sit above the card and steal iPhone touch gestures. */
.obHistBackdrop,body.obHistModalOpen .obHistBackdrop{display:none!important;pointer-events:none!important}

@media(max-width:699px){
  html,body{height:auto!important;min-height:100%!important;overflow-y:auto!important}
  .app{height:auto!important;min-height:100vh!important;overflow:visible!important}
  main{display:block!important;height:auto!important;min-height:0!important;overflow:visible!important;-webkit-overflow-scrolling:auto!important;overscroll-behavior-y:auto!important}
  .screen,#screen-home{padding-bottom:40px}
  #screen-performance{padding-bottom:100px!important}
  #performanceContent,#obHistList,#detailContent,#resultContent{overflow:visible!important}

  /* Saved prediction modal: freeze the page and scroll only the prediction body.
     Keep pan-y enabled on every ancestor: touch-action:none on body prevents
     descendant scrolling in iPhone Safari. */
  body.obHistModalOpen,
  body:has(#obHistList .obHistCard.open){overflow:hidden!important;padding-bottom:0!important;touch-action:pan-y!important}
  body.obHistModalOpen .bottomNav,
  body:has(#obHistList .obHistCard.open) .bottomNav{display:none!important}
  #obHistList .obHistCard.open{
    position:fixed!important;
    z-index:9999!important;
    top:calc(92px + env(safe-area-inset-top))!important;
    bottom:calc(170px + env(safe-area-inset-bottom))!important;
    left:16px!important;
    right:16px!important;
    width:auto!important;
    max-width:680px!important;
    margin:0 auto!important;
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    overflow:hidden!important;
    background:#071b2f!important;
    border:1px solid #17628f!important;
    border-radius:16px!important;
    box-shadow:0 22px 60px rgba(0,0,0,.72),0 0 0 9999px rgba(0,8,18,.76)!important;
    touch-action:pan-y!important;
  }
  #obHistList .obHistCard.open .obHistHead{
    position:relative!important;
    flex:0 0 auto!important;
    z-index:3!important;
    background:linear-gradient(180deg,#071d32,#051522)!important;
    border-bottom:1px solid #174264!important;
  }
  #obHistList .obHistCard.open .obHistDetails{
    display:block!important;
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
    padding:0 14px 72px!important;
    scroll-padding-bottom:72px!important;
  }
  #obHistList .obHistCard.open .obHistDetails::after{content:"";display:block;height:64px;width:100%;pointer-events:none}
}

/* OBPE detail navigation: keep the three tabs reachable while scrolling on iPhone. */
#screen-detail #detailTabs{position:sticky;top:calc(80px + env(safe-area-inset-top));z-index:35;margin:0 0 10px;background:rgba(3,18,34,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 18px rgba(0,0,0,.28)}
#screen-detail #detailTabs button{min-height:48px;font-size:12px}