/* Mobile stability layer: one dependable vertical scroller per screen/modal. */
.mobile-view-nav { display: none; }

@media (max-width: 800px) {
  :root {
    --phone-edge: clamp(10px, 3.25vw, 14px);
    --bottom-nav-clearance: calc(82px + env(safe-area-inset-bottom));
    --mobile-safe-bottom: calc(82px + env(safe-area-inset-bottom));
  }

  html,
  body,
  .app-shell,
  main,
  .view,
  .view > *,
  .modal-backdrop,
  .modal-backdrop > *,
  .athlete-calendar-modal,
  .athlete-calendar-sheet {
    min-width: 0;
    max-width: 100%;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
  }

  main {
    width: 100%;
    padding-inline: var(--phone-edge) !important;
    padding-bottom: 0 !important;
  }

  /* Keep the mobile tabs, but remove the obstructing dock behind them. */
  html.pt-layout-revision.pt-consolidated-fixes aside.sidebar,
  html.pt-layout-revision aside.sidebar,
  aside.sidebar {
    display: block !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none;
  }

  aside.sidebar .nav,
  aside.sidebar .nav-item {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  aside.sidebar .nav,
  aside.sidebar .nav-item,
  aside.sidebar .nav-item * {
    pointer-events: auto;
  }

  aside.sidebar .nav-item {
    color: #d5dde7 !important;
    text-shadow: 0 1px 5px #000, 0 0 10px #000;
    margin: 0 2px;
    padding: 7px 4px !important;
    border: 1px solid #ffffff1f !important;
    border-radius: 13px !important;
    background: #1018209e !important;
    box-shadow: 0 4px 13px #0007 !important;
  }

  aside.sidebar .nav-item .nav-symbol {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #ffffff24;
    border-radius: 10px;
    background: #101820c9 !important;
    box-shadow: 0 3px 10px #0008 !important;
  }

  aside.sidebar .nav-item.active {
    color: #ffffff !important;
    border-color: var(--interface-accent, #8dbfff) !important;
    background: color-mix(in srgb, var(--interface-accent, #5ba4f5) 24%, #101820 76%) !important;
  }

  aside.sidebar .nav-item.active .nav-symbol {
    border-color: var(--interface-secondary, #9dccff) !important;
    background: color-mix(in srgb, var(--interface-secondary, #9dccff) 36%, #101820 64%) !important;
  }

  .mobile-view-nav {
    display: none !important;
  }

  .mobile-view-nav > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .mobile-view-nav select {
    width: 106px;
    min-height: 36px;
    padding: 7px 25px 7px 9px;
    border: 1px solid #344454;
    border-radius: 10px;
    background: #111922;
    color: #e8f0f8;
    font-size: 12px !important;
    font-weight: 700;
  }

  .view.active,
  #today-view.active,
  #history-view.active {
    overflow-x: clip !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom !important;
    padding-bottom: var(--mobile-safe-bottom) !important;
    scroll-padding-bottom: var(--mobile-safe-bottom);
  }

  /* Internal tab rows must not hover over and obscure the screen while the
     containing view scrolls. */
  .profile-settings-tabs {
    position: static !important;
    top: auto !important;
  }

  .athlete-hub-nav {
    display: none !important;
  }

  .athlete-hub-mobile-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 0 14px 4px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted, #98a6b4);
    font-size: 11px;
    font-weight: 700;
  }

  .athlete-hub-mobile-nav select {
    width: auto;
    min-height: 38px;
    padding: 7px 30px 7px 10px;
    border: 1px solid var(--border, #35414b);
    border-radius: 9px;
    background: var(--surface, #111820);
    color: var(--text, #f2f6f9);
  }

  /* Nested lists should grow with their screen instead of stealing the swipe. */
  #exercises-view .library-list,
  #nutrition-view .meal-list,
  #nutrition-view .nutrition-archive[open] #nutrition-archive-list {
    flex: 0 0 auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* A horizontal strip must still let a vertical finger movement scroll the page. */
  .mobile-panel-carousel,
  #today-view .week-plan-days,
  .exercise-grid,
  .nutrient-tabs,
  .custom-day-tabs {
    max-width: 100%;
    touch-action: pan-x pan-y pinch-zoom !important;
    overscroll-behavior-x: auto !important;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  .history-item,
  .library-item,
  .athlete-connection,
  .athlete-preview-event,
  .workout-exercise,
  .set-row,
  .input-row {
    min-width: 0;
  }

  /* Calendar import is one continuous sheet so the final action is reachable. */
  body.athlete-calendar-open .sidebar {
    visibility: hidden;
    pointer-events: none;
  }

  .athlete-calendar-modal {
    display: flex !important;
    align-items: flex-end !important;
    overflow: hidden;
    padding: 0 !important;
  }

  .athlete-calendar-modal[hidden] {
    display: none !important;
  }

  .athlete-calendar-sheet {
    width: 100% !important;
    height: min(94dvh, 900px);
    max-height: 94dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom !important;
    padding: 22px var(--phone-edge) calc(34px + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(34px + env(safe-area-inset-bottom));
  }

  .athlete-calendar-sheet > * {
    max-width: 100%;
  }

  .athlete-calendar-close {
    position: sticky !important;
    z-index: 4;
    top: 0;
    float: right;
    margin: -7px -2px 2px 10px;
  }

  .athlete-calendar-url-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .athlete-calendar-preview > div:nth-child(2) {
    max-height: none !important;
    overflow: visible !important;
  }

  .athlete-import-selected {
    position: sticky;
    z-index: 3;
    bottom: 0;
    min-height: 52px;
    margin-bottom: 2px;
    box-shadow: 0 -12px 24px var(--surface, #11171e);
  }

  /* Avoid clipping content against rounded cards at narrow widths. */
  .athlete-lab-hub,
  .pt-performance-card,
  .meal-panel,
  .recovery-panel,
  .nutrition-archive,
  .journal-capture,
  .food-scan-card {
    width: 100%;
    max-width: 100%;
  }
}