/* WDHC tablet band 700-1100 (20261030tab1).
   Loaded after the other sheets. Rules exist only inside this range, so
   phone (<700) and desktop (>1100) stay as they are.
   Does not set hang-time color, hang-type title, weight stack, Grip Age
   color, marquee speed, hero title size, or name-cap-i. Those stay with
   the locks in wdhc-ui-locks.css. No locked selector is display:none. */

@media (min-width: 700px) and (max-width: 1100px) {
  html { --wdhc-tablet-band: 1; }
}

/* ---- Public nav: links in the same 64px bar as the phone header (700-900).
   A second row would push the hero and fail the locked top screenshot. ---- */
@media (min-width: 700px) and (max-width: 900px) {
  html body nav:has(.nav-center) {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 0 8px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }
  html body nav:has(.nav-center) .nav-logo img {
    height: 23px !important;
    width: auto !important;
    max-width: 78px !important;
  }
  html body nav:has(.nav-center) .nav-menu-toggle,
  html body nav:has(.nav-center) .wdhc-get-app {
    display: none !important;
  }
  html body nav:has(.nav-center) .nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: 0 !important;
    flex: 0 0 auto !important;
  }
  html body nav:has(.nav-center) .nav-actions .nav-cta {
    display: inline-flex !important;
    padding: 6px 8px !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }
  html body nav:has(.nav-center) .nav-center,
  html body > .nav-center {
    display: flex !important;
    position: static !important;
    order: 0 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 64px !important;
    max-height: 64px !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
  }
  html body nav:has(.nav-center) .nav-center .nav-mobile-submit-link {
    display: none !important;
  }
  html body nav:has(.nav-center) .nav-center a {
    display: inline-flex !important;
    width: auto !important;
    min-height: 0 !important;
    height: 32px !important;
    padding: 0 5px !important;
    font-size: 0.68rem !important;
    letter-spacing: 0 !important;
    justify-content: center !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
  html body nav:has(.nav-center) .nav-center::-webkit-scrollbar { display: none !important; }
}

/* ---- Board cards 700-900: one horizontal row, location under the name ---- */
@media (min-width: 700px) and (max-width: 900px) {
  html body .lb-row-wrapper .lb-row.lb-mobile-card,
  html body.full-leaderboard-page .lb-row-wrapper .lb-row.lb-mobile-card {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) max-content 92px !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 10px 12px !important;
  }
  html body .lb-row-wrapper .lb-row.lb-mobile-card > .lb-card-main,
  html body .lb-row-wrapper .lb-row.lb-mobile-card > .lb-card-main > .lb-card-head,
  html body .lb-row-wrapper .lb-row.lb-mobile-card .lb-card-head {
    display: contents !important;
  }
  html body .lb-row-wrapper .lb-row.lb-mobile-card > .lb-card-rank {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    width: 52px !important;
    flex: none !important;
  }
  html body .lb-row-wrapper .lb-row.lb-mobile-card .lb-card-name-block {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  html body .lb-row-wrapper .lb-row.lb-mobile-card .lb-card-name,
  html body .lb-row-wrapper .lb-row.lb-mobile-card .lb-card-name-line-primary,
  html body .lb-row-wrapper .lb-row.lb-mobile-card .lb-card-name-line-last {
    max-width: 100% !important;
  }
  html body .lb-row-wrapper .lb-row.lb-mobile-card .lb-card-name-line-last {
    flex-wrap: wrap !important;
    row-gap: 2px !important;
  }
  html body .lb-row-wrapper .lb-row.lb-mobile-card .lb-card-tier-under-name.tier-badge {
    margin-top: 4px !important;
    max-width: 100% !important;
  }
  html body .lb-row-wrapper .lb-row.lb-mobile-card .lb-card-right {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    justify-self: end !important;
    align-self: center !important;
    width: max-content !important;
    min-width: 7.5rem !important;
    max-width: 11rem !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  html body .lb-row-wrapper .lb-row.lb-mobile-card > .lb-card-actions {
    grid-column: 4 !important;
    grid-row: 1 / span 2 !important;
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    flex: none !important;
    align-self: center !important;
    margin: 0 !important;
  }
  html body .lb-row-wrapper .lb-row.lb-mobile-card > .lb-card-meta,
  html body.full-leaderboard-page .lb-row-wrapper .lb-row.lb-mobile-card > .lb-card-meta {
    grid-column: 2 !important;
    grid-row: 2 !important;
    flex: none !important;
    order: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: start !important;
  }
  html body .lb-row-wrapper .lb-row.lb-mobile-card > .lb-card-meta .lb-card-loc-row,
  html body .lb-row-wrapper .lb-row.lb-mobile-card > .lb-card-meta .lb-card-loc-group,
  html body.full-leaderboard-page .lb-row-wrapper .lb-row.lb-mobile-card > .lb-card-meta .lb-card-loc-row,
  html body.full-leaderboard-page .lb-row-wrapper .lb-row.lb-mobile-card > .lb-card-meta .lb-card-loc-group {
    justify-content: flex-start !important;
    text-align: left !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  html body .controls-header,
  html body .controls-header__left {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 12px !important;
  }
}

/* 901-1100 keeps LOCK 20261004sidebar1: board beside the sidebar.
   Do not force one column here. That lock already fits the row to the sidebar. */

/* Hang-type cards: two across on a tablet, three from 1000. No sideways swipe. */
@media (min-width: 700px) and (max-width: 1023px) {
  html body #hang-type-boards #chm-hang-boards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
  }
  html body #hang-type-boards #chm-hang-boards > .ch-card {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }
  html body .home-hang-boards__swipe { display: none !important; }
}
@media (min-width: 1000px) and (max-width: 1100px) {
  html body #hang-type-boards #chm-hang-boards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Submit: two proof doors across the tablet, not a phone stack. */
@media (min-width: 700px) and (max-width: 860px) {
  html body.page-submit .container,
  html body .page-submit .container {
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: border-box !important;
  }
  html body .submit-proof-doors,
  html body.page-submit .submit-proof-doors {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  html body .submit-path-panel__grid {
    grid-template-columns: 1fr 1fr !important;
  }
  html body .submit-stepper__list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Athlete profile: identity and best time share the hero. */
@media (min-width: 700px) and (max-width: 1100px) {
  html body main.ap {
    max-width: 980px;
    padding: 28px 28px 72px;
    box-sizing: border-box;
  }
  html body main.ap .ap-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
    column-gap: 28px;
    row-gap: 8px;
    align-items: center;
  }
  html body main.ap .ap-hero h1 { grid-column: 1; grid-row: 1; }
  html body main.ap .ap-hero .ap-sub { grid-column: 1; grid-row: 2; }
  html body main.ap .ap-hero .ap-chips { grid-column: 1; grid-row: 3; }
  html body main.ap .ap-hero .ap-best {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    justify-content: flex-end;
    margin: 0;
    text-align: right;
  }
  html body main.ap .ap-hero .ap-actions,
  html body main.ap .ap-hero .ap-stats { grid-column: 1 / -1; }
  html body main.ap .ap-hangs { grid-template-columns: 1fr 1fr; }
  html body main.ap .ap-clip,
  html body main.ap .ap-clips > .ap-clip:last-child:nth-child(odd) {
    flex: 0 0 calc((100% - 24px) / 3);
    max-width: none;
  }
}

/* Portal landing: sign-in beside the pitch. */
@media (min-width: 700px) and (max-width: 1100px) {
  html body.portal-landing .hero-copy {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr) !important;
    gap: 16px 28px !important;
    align-items: start !important;
  }
  html body.portal-landing .hero-copy > .signin-card,
  html body.portal-landing .hero-copy > .success-card,
  html body.portal-landing .hero-copy > .signedin-card {
    grid-column: 2 !important;
    grid-row: 1 / span 8 !important;
    max-width: none !important;
  }
}

/* Portal shell: docked sidebar, content beside it. Phone drawer stays under 700. */
@media (min-width: 700px) and (max-width: 1100px) {
  html body.dashboard-page .mobile-header { display: none !important; }
  html body.dashboard-page .sidebar-overlay { display: none !important; }
  html body.dashboard-page .dashboard-sidebar {
    transform: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 220px !important;
    height: 100dvh !important;
    z-index: 20 !important;
  }
  html body.dashboard-page .dashboard-content {
    margin-left: 220px !important;
    width: calc(100% - 220px) !important;
    max-width: none !important;
    padding: 22px 22px 48px !important;
    box-sizing: border-box !important;
  }
  html body.dashboard-page .welcome-banner {
    flex-direction: row !important;
    align-items: center !important;
  }
  html body.dashboard-page .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body.dashboard-page .profile-summary-grid,
  html body.dashboard-page .calc-layout {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* 700-768: the one-line bar is cramped. A second row is safe here.
   The locked top screenshot is taken at 820, which stays one row. */
@media (min-width: 700px) and (max-width: 768px) {
  html body nav:has(.nav-center) {
    height: auto !important;
    max-height: none !important;
    min-height: 64px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 8px 12px 6px !important;
    row-gap: 2px !important;
    overflow: visible !important;
  }
  html body nav:has(.nav-center) .nav-center,
  html body > .nav-center {
    order: 3 !important;
    flex: 1 0 100% !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    justify-content: flex-start !important;
    gap: 2px 4px !important;
  }
  html body nav:has(.nav-center) .nav-center a {
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 0.8rem !important;
  }
}

/* Floating jump bar and chat sit on top of Monthly Challenges,
   Recent Submissions, and the stats row in a short tablet viewport.
   Phone island under 700 and the desktop island above 1100 stay. */
@media (min-width: 700px) and (max-width: 1100px) {
  #wdhc-island { display: none !important; }
  html body:has(#wdhc-island):not(.wdhc-form-page):not(.page-submit) {
    padding-bottom: 72px !important;
    scroll-padding-bottom: 72px !important;
  }
  html body .wdhc-chat,
  html body:has(.mobile-submit-bar):not(.wdhc-form-page):not(.page-submit) .wdhc-chat {
    left: auto !important;
    right: 14px !important;
    bottom: 14px !important;
    z-index: 40 !important;
  }
  .wdhc-chat__launcher-label { display: none !important; }
  .wdhc-chat__launcher {
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
}

/* 768 portrait: title and tools share one row. Monthly Challenges is full width.
   Two clips fill the rail. A single athlete board card is full width. */
@media (min-width: 700px) and (max-width: 900px) {
  html body #wdhc-recent#wdhc-recent.video-submissions-section--lead .video-submissions-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "season season" "titles tools" !important;
    align-items: end !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    width: 100% !important;
  }
  html body #wdhc-recent .video-submissions-head__titles {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    grid-area: titles !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html body #wdhc-recent .video-submissions-title-row,
  html body #wdhc-recent .video-submissions-title {
    width: auto !important;
    text-align: left !important;
    margin: 0 !important;
  }
  html body #wdhc-recent .wdhc-season-strip--hero {
    grid-area: season !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
  }
  html body #wdhc-recent#wdhc-recent #wdhc-recent-tools.wdhc-recent-tools {
    grid-area: tools !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    justify-self: end !important;
    gap: 8px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }
  html body #wdhc-recent .video-carousel-viewport {
    --carousel-visible: 2 !important;
  }
  html body main.ap .ap-hangs { grid-template-columns: 1fr; }
  html body main.ap .ap-hangs:has(> :nth-child(2)) {
    grid-template-columns: 1fr 1fr;
  }
}

/* 901-1099 home and full board: the desktop name column (min 214px)
   plus an empty last track overflows the sidebar layout. Grip header
   was cut to G, and the NEW mark and search field were clipped. */
@media (min-width: 901px) and (max-width: 1099px) {
  html body:not(.full-leaderboard-page):not(#wdhc-n1):not(#wdhc-n2):not(#wdhc-n3):not(#wdhc-n4):not(#wdhc-n5) .leaderboard .lb-row:not(.lb-mobile-card),
  html body:not(.full-leaderboard-page):not(#wdhc-n1):not(#wdhc-n2):not(#wdhc-n3):not(#wdhc-n4):not(#wdhc-n5) .leaderboard .lb-header {
    grid-template-columns: 52px 68px minmax(0, 1.55fr) minmax(0, 0.7fr) minmax(0, 0.75fr) 96px 78px 52px !important;
    column-gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  html body.full-leaderboard-page:not(#wdhc-n1):not(#wdhc-n2):not(#wdhc-n3):not(#wdhc-n4):not(#wdhc-n5) .leaderboard .lb-row:not(.lb-mobile-card),
  html body.full-leaderboard-page:not(#wdhc-n1):not(#wdhc-n2):not(#wdhc-n3):not(#wdhc-n4):not(#wdhc-n5) .leaderboard .lb-header {
    grid-template-columns: 48px 60px minmax(0, 1.7fr) minmax(0, 0.4fr) minmax(0, 0.55fr) minmax(0, 0.7fr) 88px 76px 58px !important;
    column-gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  html body .leaderboard,
  html body .main-column,
  html body .content-grid {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body:not(.full-leaderboard-page):not(#wdhc-n1):not(#wdhc-n2):not(#wdhc-n3):not(#wdhc-n4):not(#wdhc-n5) .leaderboard .lb-header > *,
  html body:not(.full-leaderboard-page):not(#wdhc-n1):not(#wdhc-n2):not(#wdhc-n3):not(#wdhc-n4):not(#wdhc-n5) .leaderboard .lb-row:not(.lb-mobile-card) > *,
  html body.full-leaderboard-page:not(#wdhc-n1):not(#wdhc-n2):not(#wdhc-n3):not(#wdhc-n4):not(#wdhc-n5) .leaderboard .lb-header > *,
  html body.full-leaderboard-page:not(#wdhc-n1):not(#wdhc-n2):not(#wdhc-n3):not(#wdhc-n4):not(#wdhc-n5) .leaderboard .lb-row:not(.lb-mobile-card) > * {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body .lb-header > * {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.68rem !important;
    letter-spacing: 0 !important;
  }
  html body .lb-row:not(.lb-mobile-card) > .name-cell {
    min-width: 0 !important;
    overflow: visible !important;
  }
  html body .lb-row:not(.lb-mobile-card) > .name-cell .recent-hang-mark,
  html body .lb-row:not(.lb-mobile-card) > .name-cell .pr-badge,
  html body .lb-row:not(.lb-mobile-card) > .name-cell .pr-badge-inline {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  html body .controls-header,
  html body .lb-toolbar,
  html body .lb-toolbar-filters--row {
    flex-wrap: wrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body #lb-toolbar-sticky#lb-toolbar-sticky .lb-toolbar-filters--row {
    display: flex !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body #lb-toolbar-sticky#lb-toolbar-sticky .lb-toolbar-search {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
  }
  html body .lb-toolbar-search .search-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  html body #top-10-list .mini-row,
  html body .sidebar-card--leaders .mini-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  html body #top-10-list .mini-name,
  html body #top-10-list .mini-name-line,
  html body .sidebar-card--leaders .mini-name,
  html body .sidebar-card--leaders .mini-name-line {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
}