/* A centred flex layer cannot be scrolled back to its own top: the overflow
   above the centre line is unreachable. Anchor every full-screen layer to the
   top and centre it with auto margins instead - it then scrolls normally as
   soon as the content is taller than the phone screen. */
#intro,.auth-ov,.overlay,.bio-ov,.pmc-ov,#csEditorHost{align-items:flex-start}
.auth-ov,.overlay,.pmc-ov,#csEditorHost{overflow-y:auto}
#intro,.auth-ov,.auth-ok,.overlay,.bio-ov,.pmc-ov,#csEditorHost,.admin-ov{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* #intro needs the stronger "none" (no bounce at all, not just no chaining
   to the page behind it) so overscrolling it never flashes the page's
   lighter background through at the edges -- see s01.css for the rationale. */
#intro{overscroll-behavior:none}
.intro-inner,.auth-card,.modal,.bio-card,.pmc-card,.cse-box,.admin-login-card{margin-top:auto;margin-bottom:auto}
.auth-ok{justify-content:safe center}

/* dvh follows the phone's shrinking address bar; dividing by the zoom factor
   keeps a full-height box full height at any zoom level */
@supports (height:100dvh){
  #app,#app.show,.main{min-height:100dvh}
  .sidebar{min-height:100dvh;height:100dvh}
  .auth-card{max-height:92dvh}
  .cse-box{max-height:92dvh}
  @media(max-width:820px){
    #app.show .sidebar{height:100dvh}
    .cse-box{max-height:94dvh}
  }
}
/* page zoom scales viewport units too, so a full-height box is divided back out
   (only where zoom is the real mechanism - the transform fallback must not) */
@supports ((height:100dvh) and (zoom:1)){
  #app,#app.show,.main{min-height:calc(100dvh / var(--zf))}
  .sidebar{min-height:calc(100dvh / var(--zf));height:calc(100dvh / var(--zf))}
  .auth-card{max-height:calc(92dvh / var(--zf))}
  .cse-box{max-height:calc(92dvh / var(--zf))}
  @media(max-width:820px){
    #app.show .sidebar{height:calc(100dvh / var(--zf))}
    .cse-box{max-height:calc(94dvh / var(--zf))}
  }
}
/* room for the on-screen home bar */
@media(max-width:820px){
  .content{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  .admin-shell{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .zoom-ctl{bottom:calc(14px + env(safe-area-inset-bottom))}
}
/* tighter frames so full-screen panels fit the phone width */
@media(max-width:620px){
  .auth-ov,.overlay,.bio-ov,.pmc-ov,#csEditorHost{padding:10px 8px calc(26px + env(safe-area-inset-bottom))}
  #intro{padding:16px 12px calc(22px + env(safe-area-inset-bottom))}
  /* on a phone the panel grows and the layer behind it scrolls - one scrollbar,
     not a nested one that traps the finger */
  .auth-card{max-height:none;overflow:visible}
  .bio-card{padding:20px 15px}
  .bio-hero{margin-bottom:16px}
  .bio-hero h2{font-size:20px}
  .bio-ava{width:78px;height:78px;font-size:28px}
  .bio-up{font-size:14px;padding:11px 16px}
  .bio-row{padding:12px 14px;font-size:14.5px}
  .bio-card .close{top:10px;right:10px;width:32px;height:32px;font-size:17px}
  .modal{padding:28px 18px;border-radius:22px}
  .pmc-card{padding:24px 18px 20px;border-radius:20px}
  .cse-box{border-radius:14px}
  /* the landing page already renders at 90% of its own accord - on a phone the
     page zoom does that job, so it must not shrink twice */
  .intro-inner{zoom:1}
}
@media(max-width:620px) and (max-height:640px){.intro-inner{zoom:.86}}