/* Shared usable width for the authenticated workspace. Feature sheets still own
   each module's internal composition and bounded reading/form columns. */
:root {
  --cgb-sidebar-width: 264px;
  --cgb-page-gutter: 24px;
  --sidebar: var(--cgb-sidebar-width);
}

@media (max-width: 1500px) and (min-width: 769px) {
  :root { --cgb-sidebar-width: 240px; --cgb-page-gutter: 20px; }
}

@media (min-width: 769px) {
  .app-shell { --sidebar: var(--cgb-sidebar-width); width: 100%; min-width: 0; }
  .app-shell .topbar { grid-template-columns: var(--sidebar) minmax(0, 1fr) auto; }
  .app-shell .sidebar {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .app-shell .sidebar-tools { grid-template-columns: minmax(0, 1fr) 38px; }
  .app-shell .category-label { gap: 8px; min-width: 0; }
  .app-shell .category-label > span { min-width: 0; overflow-wrap: anywhere; }
  .app-shell .category-label > em { flex: none; }
  .app-shell .channel { min-width: 0; align-items: center; }
  .app-shell .channel > span:first-child,
  .app-shell .channel > .nav-proof-label { min-width: 0; overflow-wrap: anywhere; }
  .app-shell .channel > :is(.nav-free, .lock, .unread-badge) { flex: none; }
}

.app-shell .main {
  width: 100%;
  min-width: 0;
  padding-inline: var(--cgb-page-gutter);
}
.app-shell .main > * { min-width: 0; }

/* These are page canvases, not reading columns. Their parents already supply
   the common gutter. Keep paragraph and form limits inside the feature sheets. */
#main > :is(
  .info-page, .cx-hub, .cgbx-nft-page, .cgbx-partner-page,
  .cx-digital-page, .dg-page, .affiliate-page, .affiliate-landing,
  .community-hub-page, .club-page, .autotrade-hub, .at-guide-page,
  .completion-page, .cgb-orders-page, .content-page
) {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-inline: 0;
}
#main > .info-page .timeline-section { width: 100%; max-width: none; }
#main .our-socials-grid { width: 100%; max-width: none; }
#main .content-page :is(p, li) { max-width: 76ch; }

/* The partner landing's large sections use the page canvas while copy and
   input controls retain their deliberate line lengths. */
#main .affiliate-landing :is(
  .affiliate-public-nav, .affiliate-public-hero, .affiliate-benefits,
  .affiliate-apply, .affiliate-projections
) { width: 100%; max-width: none; }
#main .affiliate-landing .affiliate-form { width: 100%; max-width: 760px; }
#main .cgbx-partner-page .affiliate-projections {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
#main .cgbx-partner-page .affiliate-public-nav {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}
#main .cgbx-nft-collection-heading > div { min-width: 0; }
#main .cgbx-nft-collection-heading .cx-kicker {
  display: block;
  overflow-wrap: anywhere;
}

/* A short bottom-sheet dialog can put its close control under the fixed help
   launcher on phones. Keep the dialog above that launcher until it closes. */
body:has(#modal-root .modal-backdrop) .support-assistant {
  visibility: hidden;
}

@media (min-width: 1200px) {
  #main .cgbx-partner-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 34%);
    column-gap: 32px;
    align-content: center;
  }
  #main .cgbx-partner-hero > .cgbx-approved-logo {
    grid-column: 2;
    grid-row: 1 / span 5;
    align-self: center;
    justify-self: center;
    width: min(70%, 280px);
    height: auto;
    max-height: 300px;
    margin: 0;
  }
  #main .cgbx-partner-hero > :not(.cgbx-approved-logo) { grid-column: 1; }
}

/* Grids expand when their own content has the space; chart and drawer layouts
   remain controlled by their feature sheets. */
@media (min-width: 1600px) {
  #main .cx-digital-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #main .community-hub-cards { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
  body.community-drawer-open #main .community-hub-cards { grid-template-columns: 1fr; }
  #main .cgbx-nft-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1101px) and (max-width: 1599px) {
  #main .community-hub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.community-drawer-open #main .community-hub-cards { grid-template-columns: 1fr; }
  #main .cgbx-nft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 769px) and (max-width: 1100px) {
  #main .community-hub-cards { grid-template-columns: 1fr; }
  #main .cgbx-nft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  :root { --cgb-page-gutter: 20px; }
  .app-shell { width: 100%; min-width: 0; }
  .app-shell .main { overflow-x: clip; }
  #main .community-hub-cards { grid-template-columns: 1fr; }
  #app .mobile-nav button[data-mobile] > span:not(.mobile-nav-icon) {
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: visible;
    overflow-wrap: normal;
    text-overflow: clip;
    letter-spacing: -.02em;
  }
}
@media (max-width: 900px) and (min-width: 391px) {
  #main .cgbx-nft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 390px) {
  :root { --cgb-page-gutter: 16px; }
  #main .cgbx-nft-grid { grid-template-columns: 1fr; }
}