/* Shared mobile bottom geometry. Reserve the bar's compact size while scrolling. */
@media (max-width: 767px) {
  :root {
    --fd-mobile-nav-height: 72px;
    --fd-mobile-bottom-space: calc(var(--fd-mobile-nav-height) + 24px + env(safe-area-inset-bottom, 0px));
  }
  body .mobile-bottom-nav {
    inset: auto 12px calc(8px + env(safe-area-inset-bottom, 0px));
    min-height: 64px;
    height: 64px;
    padding: 4px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border: 1px solid #e8efff52;
    border-top-color: #ffffff85;
    border-radius: 999px;
    background: radial-gradient(ellipse at 0 0, #ffffff29, transparent 48%), linear-gradient(165deg, #ffffff10, #ffffff02 50%, #dceaff16), #10131bc4 !important;
    -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
    backdrop-filter: blur(24px) saturate(145%) !important;
    box-shadow: inset 0 1px 1px #ffffff45, inset 0 -1px 2px #e0eaff35, inset 2px 0 7px #ffffff13, 0 8px 26px #0008;
    isolation: isolate;
    transition: transform .28s cubic-bezier(.2,.7,.2,1);
    transform-origin: center bottom;
  }
  .mobile-bottom-nav::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 4px auto 4px 4px;
    width: calc((100% - 8px) / 5);
    border: 1px solid #ffffff30;
    border-radius: 999px;
    background: linear-gradient(155deg, #e5e6e94d, #bfc1c84a 58%, #aeb0b845);
    box-shadow: inset 0 1px 1px #ffffff46, inset 0 -1px 1px #ffffff12, 0 2px 8px #0003;
    transform: translateX(calc(var(--fd-active-tab, 0) * 100%));
    transition: transform .34s cubic-bezier(.2,.75,.25,1);
    pointer-events: none;
  }
  body .mobile-bottom-nav .mobile-nav-item {
    position: relative;
    z-index: 1;
    min-height: 52px;
    border-radius: 999px;
    gap: 0;
    justify-content: center;
    color: #ffffffc7;
    background: transparent;
    transition: color .2s;
  }
  body .mobile-bottom-nav .mobile-nav-item svg { width: 26px; height: 26px; fill: none; stroke-width: 1.8; filter: none; }
  body .mobile-bottom-nav .mobile-nav-item svg [stroke-width] { stroke-width: inherit; }
  body .mobile-bottom-nav .mobile-nav-item span { display: none; }
  body .mobile-bottom-nav .mobile-nav-item.active { color: #fff; background: transparent; box-shadow: none; }
  body .mobile-bottom-nav .mobile-nav-item.active svg { color: #fff; fill: none; stroke-width: 2; filter: none; }
  /* Filled silhouettes use real transparent cutouts, not a painted background,
     so the existing glass capsule remains visible through their inner lines. */
  body .mobile-bottom-nav .mobile-nav-item .mobile-icon-filled { display: none; }
  body .mobile-bottom-nav .mobile-nav-item .mobile-icon-filled > * { fill: currentColor; stroke: none; }
  body .mobile-bottom-nav .mobile-nav-item.active .mobile-icon-outline { display: none; }
  body .mobile-bottom-nav .mobile-nav-item.active .mobile-icon-filled { display: inline; }
  body .mobile-bottom-nav .mobile-nav-item.active svg.mobile-icon-progress { stroke-width: 3.5; }
  body .mobile-bottom-nav .mobile-nav-item::after { display: none; }
  .mobile-bottom-nav .mobile-nav-item:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
  body .mobile-bottom-nav.is-contracted { transform: scale(.9); }
  body .mobile-bottom-nav:has(:focus-visible) { transform: none; }
  body .main-content { padding-bottom: var(--fd-mobile-bottom-space) !important; scroll-padding-bottom: var(--fd-mobile-bottom-space); }
  body .page-view { scroll-padding-bottom: var(--fd-mobile-bottom-space); }
  body.has-coach-batch .main-content,
  body:has(#outreachSchoolsActions:not(.hidden)) .main-content { padding-bottom: calc(var(--fd-mobile-bottom-space) + 76px) !important; }
  body .os-actionbar { bottom: calc(var(--fd-mobile-nav-height) + 12px + env(safe-area-inset-bottom, 0px)); }
}
/* Installed iOS home-screen app: tuck the tab capsule close to the home-indicator safe area. */
@media (max-width: 767px) and (display-mode: standalone) {
  @supports (-webkit-touch-callout: none) {
    html body .mobile-bottom-nav { bottom: calc(2px + env(safe-area-inset-bottom, 0px)); }
  }
}

@media (max-width: 767px) and (prefers-reduced-transparency: reduce) {
  body .mobile-bottom-nav { background: #171922 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  body .mobile-bottom-nav::before {
    border-color: #ffffff38;
    background: #777981;
    box-shadow: inset 0 1px 1px #ffffff35;
  }
}
@media (prefers-reduced-motion: reduce) {
  body .mobile-bottom-nav, .mobile-bottom-nav::before, body .mobile-bottom-nav .mobile-nav-item { transition: none; }
}

@media (max-width:767px) {
  body #outreachSchoolsActions { bottom:calc(var(--fd-mobile-nav-height) + 12px + env(safe-area-inset-bottom,0px) + var(--fd-keyboard-inset,0px))!important; }
  body.has-coach-batch #outreachSchoolsActions { bottom:calc(var(--fd-mobile-nav-height) + 72px + env(safe-area-inset-bottom,0px) + var(--fd-keyboard-inset,0px))!important; }
}

.fd-pull-refresh { display: none; }
@media (max-width: 767px) {
  html, body, body .main-content, body .page-view { overscroll-behavior-y: none; }
  .fd-pull-refresh:not([hidden]) {
    position: fixed; z-index: 10000; inset: 0 0 auto;
    display: block; height: calc(var(--fd-pull-height, 0px) + env(safe-area-inset-top, 0px));
    overflow: hidden; isolation: isolate; pointer-events: none;
    background: #0c0e13; border-bottom: 1px solid #ffffff0f;
    border-radius: 0 0 20px 20px; box-shadow: 0 12px 28px #0005;
    color: #bfc1ca; font-size: 11px; font-weight: 600; letter-spacing: .035em;
  }
  .fd-pull-refresh::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(ellipse at 50% 0, #ee29462e, transparent 72%),
      repeating-linear-gradient(115deg, transparent 0 34px, #ffffff03 35px 36px, transparent 37px 72px);
  }
  .fd-refresh-content {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px;
    position: absolute; inset: auto 0 0; padding: 12px 20px 14px;
  }
  .fd-refresh-content img { display: block; width: 126px; height: auto; }
  .fd-refresh-content [data-refresh-label] { line-height: 16px; white-space: nowrap; }
  .fd-refresh-track {
    position: absolute; inset: auto 16px 0; height: 2px; border-radius: 2px;
    background: #ff304b; transform: scaleX(var(--fd-refresh-progress, 0)); transform-origin: center;
    box-shadow: 0 0 12px #ff304b60;
  }
  .fd-pull-refresh.is-ready { color: #fff; }
  /* One deep-pull sweep: scarlet racing stripes through graphite and silver. */
  .fd-pull-refresh.is-overpull::before {
    background: linear-gradient(115deg, #0c0e13 12%, #611426 30%, #ef294b 43%, #e5e8f0 49%, #a91932 55%, #181b24 72%, #0c0e13 88%);
    background-size: 280% 100%; background-position: 100% 50%;
    animation: fd-refresh-surge 1.1s cubic-bezier(.2,.65,.3,1) both;
  }
  .fd-pull-refresh.is-refreshing .fd-refresh-track { transform: none; animation: fd-refresh-scan .8s ease-in-out infinite alternate; }
}
@keyframes fd-refresh-surge { from { background-position: 100% 50%; } to { background-position: 0% 50%; } }
@keyframes fd-refresh-scan { from { clip-path: inset(0 65% 0 0); } to { clip-path: inset(0 0 0 65%); } }
@media (prefers-reduced-motion: reduce) {
  .fd-pull-refresh.is-overpull::before { animation: none; background: linear-gradient(115deg, #181b24, #72172b, #181b24); }
  .fd-pull-refresh.is-refreshing .fd-refresh-track { animation: none; }
}

/* One solid charcoal canvas across mobile pages and scroll clearance. */
@media (max-width:767px) {
  :root {
    --fd-mobile-page-background: #0b0e12;
    --fd-room-base: var(--fd-mobile-page-background);
  }
  .fd-environment { background: var(--fd-mobile-page-background); }
  .fd-environment-light, .fd-environment-depth, #particlesCanvas { display:none !important; }
  /* Paint the viewport, including gutters and bottom navigation clearance.
     Page-sized backgrounds end before the scroll container padding does. */
  body[data-app-page] .main-content {
    background: var(--fd-mobile-page-background) !important;
    background-attachment: scroll !important;
  }
  body[data-app-page] .main-content > .page-view {
    background: transparent !important;
  }
  body[data-app-page] #pageHome .pd-dashboard::before,
  body[data-app-page] #pageSettings::before { content: none !important; }
  body[data-app-page] #pageOutreach .fd-outreach-studio { background: transparent !important; }
}

@media (max-width:767px) {
  #pageHome .pd-header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; }
  #pageHome .pd-header > div:first-child { grid-column:1; grid-row:1; }
  #pageHome .pd-header .pd-period { grid-column:1 / -1; grid-row:2; justify-self:start; }
  #pageHome .pd-header .fd1-sport-switcher { grid-column:2; grid-row:1; }
  #pageSettings .fd-profile-header { align-items:center; gap:12px; }
  #pageHome .pd-header .fd1-sport-switcher,
  #pageSettings .fd-profile-header .fd1-sport-switcher { flex:none; width:auto; margin:0 0 0 auto; padding:0; gap:0; }
  #pageHome .pd-header .fd1-sport-switcher [role="group"],
  #pageSettings .fd-profile-header .fd1-sport-switcher [role="group"] { gap:1.5px; padding:2px; }
  #pageHome .pd-header .fd1-sport-switcher button,
  #pageSettings .fd-profile-header .fd1-sport-switcher button { min-height:20px; padding:0 7px; font-size:10px; line-height:1.2; }
}