/* Shared directory proportions; mobile browse layouts remain untouched. */
/* Native scrolling stays accessible; only the desktop scrollbar treatment changes. */
@media (min-width: 1024px) and (forced-colors: none) {
    html, body, body * { scrollbar-width: thin; scrollbar-color: #656b73 transparent; }
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #656b73; border: 2px solid transparent; background-clip: padding-box; border-radius: 8px; }
    ::-webkit-scrollbar-thumb:hover { background-color: #9299a3; }
    ::-webkit-scrollbar-corner { background: transparent; }
}
/* Embedded pages can be narrower than the desktop breakpoint beside the agent. */
@media (forced-colors: none) {
    html:has(body.desktop-embedded), body.desktop-embedded, body.desktop-embedded * {
        scrollbar-width: thin;
        scrollbar-color: #656b73 transparent;
    }
}
@media (min-width: 960px) {
    .hub-wrap #hubViews:has(> .hub-bigp) { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 340px)); justify-content: center; gap: 20px; padding-top: 20px; }
    .hub-wrap #hubViews:has(> .hub-bigp) > :not(.hub-bigp) { grid-column: 1 / -1; }
    .hub-wrap #hubViews:has(> .hub-bigp) > div:first-child:empty { display: none; }
    .hub-wrap .hub-bigp { width: 100%; min-width: 0; margin: 0; border-radius: 8px; }
    .hub-wrap .hub-bigp .im { height: auto; aspect-ratio: 16 / 9; }
    body.desktop-embedded .back, body.desktop-embedded #lobbyBackBtn { display: none; }
    body.desktop-embedded { background: #17191b !important; }
    body.desktop-embedded > .wrap { width: calc(100% - 80px); max-width: 1120px; margin-inline: auto; }
    body.desktop-embedded .hub-head, body.desktop-embedded[data-desktop-destination="coaches"] > .wrap > header { padding: 20px; }
    body.desktop-embedded .hub-head .hub-crumb,
    body.desktop-embedded[data-desktop-destination="coaches"] > .wrap > header .crumb { display: none; }
    body.desktop-embedded .hub-head .hub-h1,
    body.desktop-embedded[data-desktop-destination="coaches"] > .wrap > header h1 { display: none; }
    body.desktop-embedded .hub-head .hub-sub { margin-top: 0; }
    body.desktop-embedded[data-desktop-destination="coaches"] .wrap .feat { max-width: 680px; margin-inline: auto; }
    body:has(.hub-wrap), body:has(#view.wrap) { background: #17191b !important; background-image: none !important; }
    body:has(.hub-wrap)::before, body:has(.hub-wrap)::after { display: none !important; }
    .hub-wrap, #view.wrap { width: calc(100% - 80px); max-width: 1120px; margin-inline: auto; padding-bottom: 100px; }
    .hub-wrap .hub-head, #view.wrap > header { padding: 64px 20px 28px; text-align: center; position: relative; }
    .hub-wrap .hub-h1, #view.wrap > header h1 { font-size: 40px; line-height: 1.2; letter-spacing: 0; }
    .hub-wrap .hub-sub, #view.wrap > header .sub { margin-top: 16px; font-size: 15px; line-height: 1.5; }
    .hub-wrap .hub-crumb, #view.wrap > header .crumb { position: absolute; left: 20px; top: 20px; }
    .hub-wrap .hub-topact { top: 20px; right: 20px; }
    .hub-wrap .hub-search { max-width: 600px; margin: 0 auto 18px; border-radius: 8px; min-height: 44px; }
    .hub-wrap .hub-chips { justify-content: center; flex-wrap: wrap; overflow: visible; padding: 0 0 20px; border-bottom: 1px solid #35383e; }
    .hub-wrap .registry-main { max-width: none; width: 100%; padding-inline: 0; }
    .hub-wrap .hub-seclabel { padding: 28px 0 16px; font-size: 15px; letter-spacing: 0; }
    .hub-wrap .hub-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 240px)); justify-content: center; gap: 20px; padding: 0; overflow: visible; }
    .hub-wrap .hub-pc { width: 100%; min-width: 0; border-radius: 8px; }
    .hub-wrap .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0; }
    .hub-wrap .hub-grid > * { min-width: 0; border-radius: 8px; }
    #view.wrap > .row { padding: 20px 24px; min-height: 100px; }
    #view.wrap > .seclabel { padding: 28px 24px 14px; font-size: 15px; letter-spacing: 0; }
    #view.wrap .searchwrap { max-width: 640px; margin-inline: auto; }
    #view.wrap .nm { letter-spacing: 0; }
    #view.wrap > .wide { max-width: 480px; margin: 24px auto; }
}
@media (min-width: 1024px) {
    body.desktop-navigation-enabled #circleSwitcher.circle-switcher { padding: 64px max(40px, calc((100vw - 1400px) / 2)) 48px !important; }
    #circleSwitcher .circle-switcher-header, #circleSwitcher .circle-switcher-title-wrap { text-align: center !important; align-items: center; }
    #circleSwitcher #circleSwitcherTitle { text-align: center !important; justify-content: center !important; width: 100%; font-size: 40px !important; }
    #circleSwitcher #circleSwitcherSubtitle { text-align: center !important; font-size: 15px; padding-top: 16px !important; }
    #circleSwitcher .csp-search-row { justify-content: center; }
    #circleSwitcher .csp-search-inner { width: 100%; }
    #circleSwitcher .csp-filters { justify-content: center; }
    #circleSwitcher .csp-circles-scroll, #circleSwitcher .csp-discover-scroll { grid-template-columns: repeat(auto-fit, minmax(180px, 220px)); justify-content: center; gap: 20px; }
    #circleSwitcher .csp-circle-card, #circleSwitcher .csp-discover-card { width: 100%; min-width: 0; }
}