/* Final Creator Studio route-level width/readability guard.
   experience-v2.css has a high-specificity feed rule:
     #root main:has(article) > div { max-width: 1220px !important; margin-inline:auto !important; }
   Creator Studio contains <article> elements, so that feed rule was accidentally
   capping the entire Creator Studio wrapper. These selectors deliberately outrank
   that rule and keep every Creator Studio view full width. */

@supports selector(main:has(.creator-next-experience)) {
  #root .app-layout-shell:has(.creator-next-experience) {
    width: 100vw !important;
    max-width: none !important;
    min-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #root .app-layout-shell:has(.creator-next-experience) > main.app-content {
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 100vw !important;
    box-sizing: border-box !important;
  }

  /* This is the rule that specifically beats the accidental 1220px feed cap. */
  #root main.app-content:has(> .creator-next-experience) > .creator-next-experience {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  #root main.app-content:has(> .creator-next-experience) .creator-next-experience .cdn-shell,
  #root main.app-content:has(> .creator-next-experience) .creator-next-experience .cdn-main,
  #root main.app-content:has(> .creator-next-experience) .creator-next-experience .cdn-content,
  #root main.app-content:has(> .creator-next-experience) .creator-next-experience .cdn-window,
  #root main.app-content:has(> .creator-next-experience) .creator-next-experience .cdn-window-body,
  #root main.app-content:has(> .creator-next-experience) .creator-next-experience .cdn-stack,
  #root main.app-content:has(> .creator-next-experience) .creator-next-experience .cdn-native-panel,
  #root main.app-content:has(> .creator-next-experience) .creator-next-experience .crm-stack,
  #root main.app-content:has(> .creator-next-experience) .creator-next-experience .ccc-root,
  #root main.app-content:has(> .creator-next-experience) .creator-next-experience .cic-shell,
  #root main.app-content:has(> .creator-next-experience) .creator-next-experience .cas-root,
  #root main.app-content:has(> .creator-next-experience) .creator-next-experience .cgs-root,
  #root main.app-content:has(> .creator-next-experience) .creator-next-experience .cs-wrap.is-embedded {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* experience-v2 also forces role/tab controls down to 11px with #root
     specificity. Keep Creator Studio controls readable instead. */
  #root main.app-content:has(> .creator-next-experience) .creator-next-experience button[aria-selected],
  #root main.app-content:has(> .creator-next-experience) .creator-next-experience [role='tab'] {
    font-size: 14px !important;
    line-height: 1.35 !important;
    min-height: 38px !important;
  }

  #root main.app-content:has(> .creator-next-experience) .creator-next-experience .cdn-nav-item {
    width: 100% !important;
    max-width: none !important;
    font-size: 16px !important;
    min-height: 44px !important;
  }
}

@media (max-width: 980px) {
  @supports selector(main:has(.creator-next-experience)) {
    #root .app-layout-shell:has(.creator-next-experience),
    #root .app-layout-shell:has(.creator-next-experience) > main.app-content,
    #root main.app-content:has(> .creator-next-experience) > .creator-next-experience {
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      flex-basis: auto !important;
    }
  }
}