/* Phase 2: mobile ergonomics and low-height landscape layout. */
.mobile-nav-hint {
  display: none;
}

.standings-scroll-hint {
  display: none;
}

@media (max-width: 620px) {
  .mobile-nav-hint {
    display: block;
    margin-top: -5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-align: right;
  }

  .topbar .tabs {
    position: relative;
    min-height: 47px;
  }

  .topbar .tab,
  .topbar .logout-button,
  .mini-button,
  .directory-toolbar input,
  .organization-admin-actions input,
  .organization-admin-actions select,
  .club-directory-actions select,
  .member-role-select,
  .profile-card.is-compact .toggle-profile-detail {
    min-height: 44px;
  }

  details > summary,
  .analysis-saved-panel > summary,
  .setup-more > summary,
  .fighter-more > summary,
  .analysis-history > summary,
  .data-diagnostics > summary,
  .report-chapter > summary,
  .admin-directory-section > summary,
  .collapsible-section > summary {
    min-height: 44px;
    align-items: center;
  }

  .check-row,
  .user-permissions-field .check-row {
    min-height: 44px;
    padding: 7px 4px;
  }

  .check-row input,
  .user-permissions-field .check-row input {
    width: 20px;
    height: 20px;
    min-height: 20px;
    flex: 0 0 20px;
  }

  #admin-session .metric strong {
    overflow-x: auto;
    padding-bottom: 4px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 13px;
    overflow-wrap: normal;
    user-select: all;
    white-space: nowrap;
    word-break: normal;
  }

  .member-identity span,
  .organization-compact-identity span,
  .account-professional-summary p {
    overflow-wrap: anywhere;
  }

  #analysis-dashboard {
    gap: 10px;
  }

  #analysis-dashboard .analysis-history:not([open]) {
    margin-bottom: 0;
  }

  .standings-scroll-shell {
    position: relative;
  }

  .standings-scroll-shell::after {
    position: absolute;
    z-index: 1;
    top: 28px;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(90deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 92%));
    content: "";
    pointer-events: none;
  }

  .standings-scroll-hint {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    margin: 0;
    padding: 7px 10px 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
  }

  .standings-wrap {
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
}

@media (max-height: 500px) and (min-width: 621px) {
  .topbar {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding: 6px 10px;
    backdrop-filter: none;
  }

  .topbar .brand-block {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 7px;
  }

  .topbar .club-logo {
    width: 34px;
    height: 34px;
  }

  .topbar .eyebrow,
  .topbar .project-credit,
  .mobile-nav-hint {
    display: none;
  }

  .topbar h1 {
    font-size: 18px;
    white-space: nowrap;
  }

  .topbar .tabs {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .topbar .tab,
  .topbar .logout-button,
  .mini-button,
  details > summary {
    flex: 0 0 auto;
    min-height: 44px;
  }

  .check-row,
  .user-permissions-field .check-row {
    min-height: 44px;
    padding: 7px 4px;
  }

  .check-row input,
  .user-permissions-field .check-row input {
    width: 20px;
    height: 20px;
    min-height: 20px;
    flex: 0 0 20px;
  }

  #admin-session .metric strong {
    overflow-x: auto;
    padding-bottom: 4px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 13px;
    overflow-wrap: normal;
    user-select: all;
    white-space: nowrap;
    word-break: normal;
  }

  #analysis-view .competitor-status-bar,
  #analysis-view .workbench.video-mode .competitor-status-bar,
  body[data-match-active="true"]:not([data-show-setup="true"]) .competitor-status-bar {
    position: static;
    top: auto;
  }

  #analysis-view .workbench .control-panel,
  #analysis-view .workbench.video-mode .control-panel {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }

  main {
    padding-top: 10px;
  }
}