/* Shared mobile sizing contract. No page-level overflow clipping: oversized
   children must shrink, wrap, or use an explicit local table/nav scroller. */
@media(max-width:820px){
  :root{
    --mobile-safe-top:env(safe-area-inset-top,0px);
    --mobile-safe-right:env(safe-area-inset-right,0px);
    --mobile-safe-bottom:env(safe-area-inset-bottom,0px);
    --mobile-safe-left:env(safe-area-inset-left,0px);
    --mobile-viewport-height:100dvh;
    --mobile-viewport-top:0px;
    --mobile-fixed-bottom:0px;
    --mobile-nav-height:64px;
    --mobile-nav-gap:max(8px,var(--mobile-safe-bottom));
    --mobile-dialog-height:calc(var(--mobile-viewport-height) - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 16px);
    --mobile-nav-space:calc(var(--mobile-nav-height) + var(--mobile-nav-gap) + 16px);
  }
  body{padding-bottom:0}
  .nx-shell{min-height:100dvh}
  .nx-content{padding-bottom:var(--mobile-nav-space);padding-left:max(12px,var(--mobile-safe-left));padding-right:max(12px,var(--mobile-safe-right))}
  .sticky-save{position:static}
  .nx-sidebar{
    /* Keep the navigation out of a vertically scrollable sidebar. The PWA
       prompt has its own fixed layer above it, so it cannot push nav away. */
    position:static;
    height:0;
    min-height:0;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    max-height:none;
    overflow:visible;
  }
  .nx-sidebar .nx-nav{
    position:fixed;
    z-index:70;
    left:max(8px,var(--mobile-safe-left));
    right:max(8px,var(--mobile-safe-right));
    bottom:calc(var(--mobile-fixed-bottom) + var(--mobile-nav-gap));
    min-width:0;
    max-width:none;
    padding:8px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:20px;
    background:linear-gradient(180deg,#20242a,#15181d);
    box-shadow:0 12px 30px rgba(15,23,42,.22);
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .nx-sidebar .nx-nav::-webkit-scrollbar{display:none}
  .nx-nav-btn{min-width:70px;max-width:140px;white-space:normal;overflow-wrap:anywhere}
  .nx-sidebar .pwa-sidebar-card{
    position:fixed;
    z-index:69;
    left:max(8px,var(--mobile-safe-left));
    right:max(8px,var(--mobile-safe-right));
    bottom:calc(var(--mobile-fixed-bottom) + var(--mobile-nav-gap) + var(--mobile-nav-height) + 8px);
    min-height:0;
    max-height:calc(var(--mobile-viewport-height) - var(--mobile-nav-height) - var(--mobile-safe-bottom) - 32px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .nx-topbar{padding-top:max(10px,var(--mobile-safe-top));padding-left:max(12px,var(--mobile-safe-left));padding-right:max(12px,var(--mobile-safe-right))}
  :where(.nx-content,.quick-modal,.athlete-drawer,.platform-club-drawer,.brevo-campaign-drawer) :where(*){
    min-width:0;
    overflow-wrap:anywhere;
  }
  :where(.nx-content,.quick-modal) :where(input,select,textarea,fieldset){max-width:100%;box-sizing:border-box}
  .quick-modal :where(input,select,textarea){font-size:16px}
  .section-head,.hero-panel{grid-template-columns:minmax(0,1fr)}
  .kpi-grid,.progress-summary-grid,.form-two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-two{grid-template-columns:minmax(0,1fr)}
  .session-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lxf-import-body{grid-template-columns:minmax(0,1fr)}
  .modal-title{gap:8px}
  .modal-title>.icon-btn{flex-shrink:0}
  .modal-actions{flex-wrap:wrap}
  .modal-actions>.btn{white-space:normal;max-width:100%}
  .modal-backdrop{
    top:var(--mobile-viewport-top);
    bottom:auto;
    height:var(--mobile-viewport-height);
    padding:calc(8px + var(--mobile-safe-top)) max(8px,var(--mobile-safe-right)) calc(8px + var(--mobile-safe-bottom)) max(8px,var(--mobile-safe-left));
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
  }
  :where(.modal-backdrop) > :where(.quick-modal){
    min-width:0;
    min-height:0;
    max-width:100%;
    /* One hard boundary, deliberately independent of per-dialog ID rules. */
    max-height:var(--mobile-dialog-height) !important;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scroll-padding-block:16px;
  }
  /* These legacy sheets remove the backdrop gutter; restore only geometry. */
  :is(#sessionModal,#noticeModal,#subscriptionModal){
    padding:calc(8px + var(--mobile-safe-top)) max(8px,var(--mobile-safe-right)) calc(8px + var(--mobile-safe-bottom)) max(8px,var(--mobile-safe-left));
  }
  /* Subscription's legacy !important rules put all scrolling on the backdrop. */
  #subscriptionModal{overflow:hidden !important}
  #subscriptionModal .subscription-modal{
    margin:0;
    max-height:var(--mobile-dialog-height) !important;
    overflow:auto !important;
  }
  .internal-results-modal{overflow-y:auto;grid-template-rows:auto}
  .internal-results-list{overflow:visible}
  .swimrep-date-picker{
    max-height:var(--mobile-dialog-height);
    max-width:calc(100% - var(--mobile-safe-left) - var(--mobile-safe-right) - 24px);
    overflow-y:auto;
    top:auto !important;
    bottom:calc(100dvh - var(--mobile-viewport-height) - var(--mobile-viewport-top) + var(--mobile-safe-bottom) + 8px) !important;
  }
  :root[data-mobile-short-viewport] :is(#sessionModal,#noticeModal,#subscriptionModal) :is(.modal-title,.modal-actions){position:static}
  :is(.athlete-drawer,.platform-club-drawer,.brevo-campaign-drawer):not(.open){visibility:hidden}
  :is(.athlete-drawer,.platform-club-drawer,.brevo-campaign-drawer){
    top:var(--mobile-viewport-top);
    height:var(--mobile-viewport-height);
    max-width:calc(100% - var(--mobile-safe-left) - var(--mobile-safe-right));
    right:var(--mobile-safe-right);
    padding-top:calc(24px + var(--mobile-safe-top));
    padding-bottom:calc(24px + var(--mobile-safe-bottom));
  }
  #previewBackToTop.back-to-top,.back-to-top{bottom:var(--mobile-nav-space)}
}
/* A sticky header/footer can consume the entire usable height with a keyboard
   or landscape viewport. In that case all modal content scrolls as one unit. */
@media(max-width:820px) and (max-height:600px){
  .nx-topbar{position:static}
  :is(#sessionModal,#noticeModal,#subscriptionModal) :is(.modal-title,.modal-actions){position:static}
}
@media(max-width:760px){
  .platform-unified-shell{padding-bottom:var(--mobile-nav-space)}
  .platform-unified-sidebar{
    bottom:max(8px,var(--mobile-safe-bottom));
    left:max(8px,var(--mobile-safe-left));
    right:max(8px,var(--mobile-safe-right));
  }
}
/* The attendance period buttons need one line each. At 320px, the season
   selector occupies its own row instead of shrinking all three labels. */
@media(max-width:560px){
  .attendance-view-modes{flex-wrap:wrap}
  .attendance-view-mode{flex:1 0 62px;white-space:nowrap;overflow-wrap:normal}
  .attendance-season-select{flex:1 0 100%;width:100%;margin-left:0}
  .attendance-season-select select{width:100%}
}