/* 30PICK'EM — Global iPhone safe area v1
   One shared rule set for the top safe area (status bar / Dynamic Island) in
   the installed PWA. Replaces the screen-scoped Standings v3 / Profile v3
   masthead rules and the Profile-only sheet rule.

   Token: --app-safe-top resolves to env(safe-area-inset-top, 0px). It is the
   only knob; QA may override it on :root to simulate an inset in desktop
   browsers. In normal browsers env() is 0, so every value below equals the
   geometry that shipped before this file (no blank space is added).

   Masthead (Real Device Final Fixes v1): ONE row height for every screen —
   82px at ≤430px and 88px at 431–700px. Home's former 118px row and the
   Standings / Profile 88px-at-≤430 exceptions are gone. The .top bar is
   row height + inset and the row sits below the inset.

   #app#app is a deliberate specificity bump so these rules win over the
   existing !important masthead rules (e.g. .app:has(#home:not(.hidden)) .top)
   regardless of load order. */

:root{--app-safe-top:env(safe-area-inset-top,0px)}

/* ---- Row height: one value for every screen ---- */
@media(max-width:700px){
  #app#app{--app-mast-h:88px}
}
@media(max-width:430px){
  #app#app{--app-mast-h:82px}
}
@media(max-width:700px){

  /* ---- Masthead: row height + top inset, row pushed below the inset ---- */
  #app#app .top{
    box-sizing:border-box!important;
    height:calc(var(--app-mast-h) + var(--app-safe-top))!important;
    min-height:calc(var(--app-mast-h) + var(--app-safe-top))!important;
    padding-top:var(--app-safe-top)!important;
  }

  /* Picks week/day strip is sticky directly under the masthead
     (picks-v3.css: 88px / 82px at ≤430px). Follow the masthead exactly. */
  #app#app #picks .pv3Chrome{top:calc(var(--app-mast-h) + var(--app-safe-top))}
}

/* ---- Sheets / modals ----
   Every mobile sheet is full-height and starts at y=0. v0.5.04 gave the
   sheet toolbar min-height: 52px + inset and padding-top: 7px + inset, but
   v0.4.71's .sheetToolbar{padding:0!important} still wins, so the close
   control is centred inside the status bar. Restore the inset padding for
   every sheet toolbar; the 52px control area and the content start are
   unchanged. */
@media(max-width:600px){
  #modalSheet .sheetToolbar{
    box-sizing:border-box!important;
    height:auto!important;
    min-height:calc(52px + var(--app-safe-top))!important;
    padding-top:var(--app-safe-top)!important;
    padding-bottom:0!important;
  }
  /* Compact bottom sheets (Profile Log Out confirmation) never reach the top
     of the screen: keep their zero-inset toolbar so they do not gain an empty
     band equal to the inset. */
  #modalSheet:has(.prv3SignOut) .sheetToolbar{
    min-height:52px!important;
    padding-top:0!important;
  }
}

/* v0.9.49.7 — Week Recap mobile sheet stability.
   Do not size the recap sheet from 100dvh. iOS Safari / standalone can leave
   dynamic viewport units at the keyboard-sized value after a viewport or
   sheet transition, which visually clips the standings partway down the
   screen and can desync hit-testing for the close control. The modal itself
   is already fixed with inset:0, so percentage height follows that stable
   containing block instead. Keep the toolbar above recap content and give
   the close control a dependable touch target. */
@media(max-width:600px){
  #modalSheet.sheet:has(.stv1Recap){
    height:100%!important;
    max-height:100%!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
  }
  #modalSheet:has(.stv1Recap) .sheetToolbar{
    position:sticky!important;
    top:0!important;
    z-index:40!important;
    isolation:isolate;
    pointer-events:auto!important;
  }
  #modalSheet:has(.stv1Recap) .sheetToolbar .sheetClose.branded{
    position:relative!important;
    z-index:2!important;
    min-width:44px!important;
    width:44px!important;
    min-height:44px!important;
    height:44px!important;
    pointer-events:auto!important;
    touch-action:manipulation;
  }
  #modalSheet:has(.stv1Recap) .stv1RecapTable{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
}