/* Installed apps use viewport-fit=cover and a translucent status bar, so the
   page starts under the clock and the home indicator. env() is 0 in a
   normal browser tab, so these rules add nothing there.

   --jfsd-sat/sar/sab/sal are unset in production. A phone test sets them
   (59px / 34px) because desktop Chrome reports a 0 inset. max() keeps the
   real env() when the variable is absent, including on iOS where a custom
   property sometimes drops env(). */

/* Doubled classes beat a later announcement-bar.css that used to set
   padding:0 and pull the pill back under the clock. The navy box itself
   starts below the status bar: padding on the banner paints under the clock. */
#staff-update-banner.staff-update-banner.staff-update-banner,
#staff-holiday-banner.staff-holiday-banner.staff-holiday-banner,
#announceBar.announce-bar.announce-bar{
  box-sizing:border-box;
  width:100%;
  position:relative;
  z-index:32;
  margin-top:0;
  padding-left:max(env(safe-area-inset-left,0px),var(--jfsd-sal,0px));
  padding-right:max(env(safe-area-inset-right,0px),var(--jfsd-sar,0px));
}
/* Stick under the inset. top matches the body's padding, so at rest the bar
   does not shift down a second time. --staff-notice-h is its measured height. */
#staff-update-banner.staff-update-banner.staff-update-banner,
#staff-holiday-banner.staff-holiday-banner.staff-holiday-banner{
  position:sticky;
  top:max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px),var(--staff-banner-h,0px));
}
#staff-update-banner .jfsd-annbar,
#staff-holiday-banner .jfsd-annbar,
#announceBar .jfsd-annbar{align-items:center}
#staff-update-banner .jfsd-annbar-x,
#staff-holiday-banner .jfsd-annbar-x,
#announceBar .jfsd-annbar-x{width:44px;height:44px;min-width:44px;min-height:44px}
/* The fixed Shabbat bar already has 10px of padding. Keep it, and clear the
   status bar on top of that. */
.staff-shabbat-banner:not(.staff-holiday-banner){
  box-sizing:border-box;
  padding-top:calc(10px + max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px)));
  padding-left:max(16px,env(safe-area-inset-left,0px),var(--jfsd-sal,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px),var(--jfsd-sar,0px));
}

/* The notice and the header stick under the inset. Safe-area padding on the
   header is the white band: it lives in --admin-mbar-h, which is also the
   bar's min-height. Keep that min-height at the hub row, and put the inset
   plus the measured notice into the offset other bars already add. */
:root{
  --admin-safe-top:max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
}
body[data-staff-only]{
  --admin-mbar-pad-top:0px;
  --admin-mbar-h:calc(var(--hub-topbar-height,64px) + var(--staff-notice-h,0px) + max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px),var(--staff-banner-h,0px)) - var(--staff-banner-h,0px));
  padding-top:max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px),var(--staff-banner-h,0px));
}
body[data-staff-only]::before{
  content:"";
  position:fixed;
  z-index:31;
  top:0;
  left:0;
  right:0;
  height:max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
  background:var(--hub-background,#fff);
  pointer-events:none;
}
body[data-staff-only] #mbar,
body:has(> #staff-update-banner:not([hidden])) #mbar,
body:has(> #staff-holiday-banner:not([hidden])) #mbar,
body:has(> #staff-shabbat-banner:not([hidden])) #mbar{
  --admin-mbar-pad-top:0px;
  min-height:var(--hub-topbar-height,64px);
  padding-top:var(--hub-space-2,.5rem);
  top:calc(max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px),var(--staff-banner-h,0px)) + var(--staff-notice-h,0px));
}
/* Ask Hala locks the shell (overflow:hidden), which becomes this bar's
   sticky scrollport. The offset above then shifts the bar a second time,
   over Ask, People, and Guides. The shell is already below that chrome. */
body[data-staff-only].hala-app #mbar,
body[data-staff-only].hala-app:has(> #staff-update-banner:not([hidden])) #mbar,
body[data-staff-only].hala-app:has(> #staff-holiday-banner:not([hidden])) #mbar,
body[data-staff-only].hala-app:has(> #staff-shabbat-banner:not([hidden])) #mbar{top:0}
@media (min-width:821px){
  body[data-staff-only] #side{
    top:calc(max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px),var(--staff-banner-h,0px)) + var(--staff-notice-h,0px));
  }
}
@media (max-width:820px){
  body[data-staff-only] #side{
    padding-top:max(var(--hub-space-5,1.25rem),env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
    padding-bottom:max(16px,env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px));
  }
}

/* Public and portal headers stick to the top of the screen. */
.hdr,
.mini-hdr{
  box-sizing:border-box;
  padding-top:max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
  padding-left:max(env(safe-area-inset-left,0px),var(--jfsd-sal,0px));
  padding-right:max(env(safe-area-inset-right,0px),var(--jfsd-sar,0px));
}

/* Public menu. The close control is already 44px; keep it under the clock. */
.m-drawer{
  box-sizing:border-box;
  padding-top:max(20px,env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
  padding-right:max(22px,env(safe-area-inset-right,0px),var(--jfsd-sar,0px));
  padding-bottom:max(32px,env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px));
}
.m-close{
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
}

/* Site pages detail drawer (About Us). Not lifted into jfsd-dialog. */
#p-wsitemap .sm-drawer{
  box-sizing:border-box;
  padding-top:max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
  padding-right:max(env(safe-area-inset-right,0px),var(--jfsd-sar,0px));
  padding-bottom:max(env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px));
}
#p-wsitemap .sm-dr-x{
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
}
#p-wsitemap .sm-pal{
  top:max(12vh,calc(max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px)) + 12px));
}

/* My Giving windows and the grantee modal. Their own stylesheets pad ~20px,
   which is short of the status bar. */
.gh-ov{
  box-sizing:border-box;
  padding-top:max(28px,env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
  padding-right:max(14px,env(safe-area-inset-right,0px),var(--jfsd-sar,0px));
  padding-bottom:max(28px,env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px));
  padding-left:max(14px,env(safe-area-inset-left,0px),var(--jfsd-sal,0px));
}
/* #rec-ov sets padding in an inline style, which beats a stylesheet. */
#rec-ov{
  box-sizing:border-box;
  padding-top:max(20px,env(safe-area-inset-top,0px),var(--jfsd-sat,0px)) !important;
  padding-right:max(20px,env(safe-area-inset-right,0px),var(--jfsd-sar,0px)) !important;
  padding-bottom:max(20px,env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px)) !important;
  padding-left:max(20px,env(safe-area-inset-left,0px),var(--jfsd-sal,0px)) !important;
}
#modal.modal{
  box-sizing:border-box;
  padding-top:max(20px,env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px),var(--jfsd-sar,0px));
  padding-bottom:max(20px,env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px));
  padding-left:max(20px,env(safe-area-inset-left,0px),var(--jfsd-sal,0px));
}
.gh-ov .gh-head button,
#modal.modal [aria-label="Close"],
#rec-ov [aria-label="Close"]{
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
}

/* Media detail drawer is flush (padding 0 on the scrim). Pad the panel. */
.wdash .mside,
.mside{
  box-sizing:border-box;
  padding-top:max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
  padding-bottom:max(env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px));
}
.wdash .mside-head .x,
.mside-head .x{
  min-width:44px;
  min-height:44px;
}

/* One inset for every popup.
   Full-height sheets are position:fixed against the screen (or an inline
   top:0), so padding on the scrim never moves the header or an absolute X.
   Those sheets drop below the status bar and stop above the home indicator.
   Centered dialogs keep the padding they already use; the status bar
   replaces that floor only when it is taller, so a normal browser tab
   (env() is 0) does not move. Doubled classes beat styles injected later.
   !important beats the inline top:0 on the Back Office detail drawer.
   env() stays in each declaration. --jfsd-sat / --jfsd-sab are test hooks. */

/* Edge sheets: How this works, Grant Command Center, site-page drawer is
   padded above. The Back Office detail drawer has no class on its panel. */
:is(.hiw-panel.hiw-panel,.ga-dr.ga-dr){
  top:max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px),var(--staff-banner-h,0px));
  bottom:max(env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px));
  height:auto;
  max-height:none;
}
.jfsd-drawer-ov.jfsd-drawer-ov > :first-child{
  top:max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px),var(--staff-banner-h,0px))!important;
  bottom:max(env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px))!important;
  height:auto!important;
}

/* Full-screen sheets whose X is in the header flow. Padding is inside the
   sheet, so the header moves and the sheet still covers the status bar. */
#int-drawer .int-drawer-panel{
  box-sizing:border-box;
  padding-top:max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
  padding-bottom:max(env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px));
}
#jfsd-manage-ov#jfsd-manage-ov{
  box-sizing:border-box;
  padding-top:max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
  padding-bottom:max(env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px));
}
@media (min-width:700px){
  #jfsd-manage-ov#jfsd-manage-ov{
    padding-top:max(24px,env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
    padding-right:max(24px,env(safe-area-inset-right,0px),var(--jfsd-sar,0px));
    padding-bottom:max(24px,env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px));
    padding-left:max(24px,env(safe-area-inset-left,0px),var(--jfsd-sal,0px));
  }
}
/* Inline padding:20px on these two. !important is the only way past it. */
#jfsd-badge-ov,
#jfsd-wl-ov{
  box-sizing:border-box;
  padding-top:max(20px,env(safe-area-inset-top,0px),var(--jfsd-sat,0px))!important;
  padding-bottom:max(20px,env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px))!important;
}

/* Centered dialogs. The first number is the padding that stylesheet already
   uses, so a 0 inset leaves the dialog where it was. */
:is(
  .gm-ov.gm-ov,
  .ci-ov.ci-ov,
  .modal-ov.modal-ov,
  .ev-overlay.ev-overlay,
  .overlay.overlay,
  .ov.show
){
  box-sizing:border-box;
  padding-top:max(20px,env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
  padding-bottom:max(20px,env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px));
}
:is(
  .qg-overlay.qg-overlay,
  .jfsd-sp-ov.jfsd-sp-ov,
  .fa-modal.fa-modal,
  .jfsd-evp-ov.jfsd-evp-ov,
  .cal-overlay.cal-overlay,
  .vmodal.vmodal,
  .jfsd-hs-ov.jfsd-hs-ov
){
  box-sizing:border-box;
  padding-top:max(24px,env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
  padding-bottom:max(24px,env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px));
}
.give-ov.give-ov{
  box-sizing:border-box;
  padding-top:max(28px,env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
  padding-bottom:max(28px,env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px));
}
:is(.modal-overlay.modal-overlay,.pdlg-scrim.pdlg-scrim){
  box-sizing:border-box;
  padding-top:max(40px,env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
  padding-bottom:max(40px,env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px));
}
.wiki-reset-ov.wiki-reset-ov{
  box-sizing:border-box;
  padding-top:max(16px,env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
  padding-bottom:max(16px,env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px));
}
.gm-box.gm-box{
  max-height:min(90vh,calc(100dvh - max(20px,env(safe-area-inset-top,0px),var(--jfsd-sat,0px)) - max(20px,env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px))));
}
/* The lifted card drops its max-height so the sheet can scroll. Centering a
   card that is taller than the phone puts the X above the screen. Auto
   margins keep a short card centered and pin a tall one to the top. */
dialog.jfsd-dlg>.gm-ov.gm-ov{
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
}
dialog.jfsd-dlg>.gm-ov.gm-ov>.gm-box{
  margin-top:auto;
  margin-bottom:auto;
  flex:0 0 auto;
  width:100%;
}

/* Phone sheets that are flush with the screen in a browser tab. The inset
   is the only thing added, so padding stays 0 when env() is 0. */
@media (max-width:600px){
  .jfsd-evp-ov.jfsd-evp-ov{
    padding-top:max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
    padding-bottom:max(env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px));
  }
}
@media (max-width:640px){
  :is(.cal-overlay.cal-overlay,.ov.show){
    padding-top:max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
    padding-bottom:max(env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px));
  }
  .cal-modal.cal-modal,
  .ov.show .modal{
    max-height:min(92dvh,calc(100dvh - max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px)) - max(env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px))));
  }
}
@media (max-width:820px){
  body[data-staff-only] :is(.bol-ld-detail,.bol-td-drawer,.bol-sx-body){
    box-sizing:border-box;
    padding-top:max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px))!important;
    padding-bottom:max(env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px))!important;
  }
}

/* Tours, the command palette, the install sheet, and the mobile prompt.
   Later injected stylesheets use a single class; the extra html/id beats them.
   A 0 inset keeps the 16px / 12vh / 24px they already had. */
html .bo-tour.bo-tour-docked.bo-tour-docked-top .bo-tour-card,
html .jfsd-tour-phone.jfsd-tour-top .jfsd-tour-card{
  top:max(16px,env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
}
.pal.pal{
  top:max(12vh,64px,env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
}
html .jfsd-hs-install{
  box-sizing:border-box;
  padding-top:max(16px,env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px),var(--jfsd-sar,0px));
  padding-bottom:max(16px,env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px),var(--jfsd-sal,0px));
}
html .jfsd-hs-install .jfsd-hs-sheet{
  max-height:100%;
}
#jfsd-mobile-prompt#jfsd-mobile-prompt .modal{
  margin-top:max(24px,8vh,env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
}
.jfsd-a11y-panel.jfsd-a11y-panel{
  /* svh is the visible phone height. 100dvh is taller, so a long panel
     climbed under the status bar. The panel sits above the corner group,
     so the height is the screen minus that pad and the status bar. */
  max-height:calc(100svh - var(--jfsd-float-base, 16px) - max(var(--jfsd-obstacle, 0px), var(--jsw-lift, 0px)) - var(--jfsd-float-stack, 108px) - 8px - max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px)) - 12px);
}
.jfsd-a11y-panel .jfsd-a11y-x{
  margin-top:0;
}

/* Native dialogs are centered with inset:0. Pin the box to the safe area
   and let margin:auto center inside it. A 0 inset is the same inset:0. */
:is(dialog.pop.pop,dialog.hc-dialog.hc-dialog){
  top:max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px));
  bottom:max(env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px));
}
dialog.pop.pop{
  max-height:min(86vh,860px,calc(100dvh - max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px)) - max(env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px))));
}
dialog.hc-dialog.hc-dialog{
  max-height:min(calc(100vh - 32px),calc(100dvh - max(env(safe-area-inset-top,0px),var(--jfsd-sat,0px)) - max(env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px))));
}

/* Every close control. min-width beats a later width that is smaller. */
:is(
  .hiw-x,.ga-dr-x,.gm-x,.jfsd-dlg-x,.bo-tour-x,.jfsd-tour-x,.sm-dr-x,.m-close,
  .hd-close,.drawer-x,.modal-close,.int-x,.jfsd-annbar-x,.jfsd-a11y-x,
  .jfsd-sp-x,.qg-x,.jfsd-evp-x,.jfsd-hs-x,.jfsd-manage-x,.fa-modal-x,.vmodal-x,
  .ev-x,.pdlg-x,.hc-x,#jb-x,.bol-back,.cal-modal .x,.give-bar button,
  .gh-ov .gh-head button,.mside-head .x,.pop-x,.ov .x,.overlay .x
){
  box-sizing:border-box;
  min-width:44px;
  min-height:44px;
}