/* Creator Studio round-two layout + readability hardening.
   Loaded after the first readability sheet so these rules win cleanly. */

/* The screenshots show the Studio still inheriting a narrower app column on
   desktop. Creator Studio owns this route, so make the outer app hand-off use
   the viewport instead of trusting any ancestor width cap. */
@supports selector(body:has(.creator-next-experience)) {
  html:has(.creator-next-experience),
  body:has(.creator-next-experience),
  body:has(.creator-next-experience) #root {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .app-layout-shell:has(.creator-next-experience) {
    width: 100vw !important;
    max-width: none !important;
    min-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

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

body .creator-next-experience,
body .creator-next-experience .cdn-shell,
body .creator-next-experience .cdn-main,
body .creator-next-experience .cdn-content {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Every top-level Creator Studio view gets the entire main column. This covers
   Dashboard, Live Control, Role Manager, Streams/analytics, moderation, XPBot,
   library, earnings, safety and future views without maintaining a class list. */
.creator-next-experience .cdn-content > *,
.creator-next-experience .cdn-window-body > *,
.creator-next-experience .cdn-stack > *,
.creator-next-experience .cdn-native-panel,
.creator-next-experience .crm-stack,
.creator-next-experience .ccc-root,
.creator-next-experience .cic-shell,
.creator-next-experience .cas-root,
.creator-next-experience .cgs-root,
.creator-next-experience .cs-wrap.is-embedded {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Keep the Creator Studio rail itself full-sized and readable. */
.creator-next-experience .cdn-nav-item {
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  font-size: 16px !important;
  font-weight: 650 !important;
}

.creator-next-experience .cdn-nav-heading {
  font-size: 13.5px !important;
}

/* Content text that is not a p/small/button was still able to fall to 6-12px. */
.creator-next-experience .cdn-content li,
.creator-next-experience .cdn-content dt,
.creator-next-experience .cdn-content dd,
.creator-next-experience .cdn-content time,
.creator-next-experience .cdn-content code {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* Role Manager / moderation presets. The source stylesheet intentionally used
   8-10px labels in many places; these are normal UI copy, not micro-badges. */
.creator-next-experience .crm-stack .crm-hero > div > span {
  font-size: 13px !important;
}
.creator-next-experience .crm-stack .crm-hero p {
  font-size: 15px !important;
}
.creator-next-experience .crm-stack .crm-panel-head strong {
  font-size: 16px !important;
}
.creator-next-experience .crm-stack .crm-panel-head small,
.creator-next-experience .crm-stack .crm-search-results small,
.creator-next-experience .crm-stack .crm-person small,
.creator-next-experience .crm-stack .crm-date,
.creator-next-experience .crm-stack .crm-role-cards small,
.creator-next-experience .crm-stack .crm-record-copy small,
.creator-next-experience .crm-stack .crm-audit-list time {
  font-size: 13.5px !important;
  line-height: 1.4 !important;
}
.creator-next-experience .crm-stack .crm-search input,
.creator-next-experience .crm-stack .crm-search button,
.creator-next-experience .crm-stack .crm-search-results strong,
.creator-next-experience .crm-stack .crm-search-results button,
.creator-next-experience .crm-stack .crm-person strong,
.creator-next-experience .crm-stack .crm-role-chip,
.creator-next-experience .crm-stack .crm-remove,
.creator-next-experience .crm-stack .crm-matrix th,
.creator-next-experience .crm-stack .crm-matrix td,
.creator-next-experience .crm-stack .crm-role-cards strong,
.creator-next-experience .crm-stack .crm-tabs button,
.creator-next-experience .crm-stack .crm-filter input,
.creator-next-experience .crm-stack .crm-record-copy strong,
.creator-next-experience .crm-stack .crm-record-copy p,
.creator-next-experience .crm-stack .crm-status,
.creator-next-experience .crm-stack .crm-approve,
.creator-next-experience .crm-stack .crm-deny,
.creator-next-experience .crm-stack .crm-audit-list strong,
.creator-next-experience .crm-stack .crm-audit-list p {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.creator-next-experience .crm-stack .crm-automod-state {
  font-size: 12.5px !important;
  padding: 6px 8px !important;
}
.creator-next-experience .crm-stack .crm-preset-grid strong {
  font-size: 16px !important;
}
.creator-next-experience .crm-stack .crm-preset-grid p {
  font-size: 15px !important;
  line-height: 1.45 !important;
}
.creator-next-experience .crm-stack .crm-preset-grid li {
  font-size: 13.5px !important;
  line-height: 1.4 !important;
}
.creator-next-experience .crm-stack .crm-preset-grid button {
  font-size: 14px !important;
  min-height: 38px !important;
}
.creator-next-experience .crm-stack .crm-preset-warning {
  font-size: 13.5px !important;
  line-height: 1.45 !important;
}

/* XPBot command center. This is the other major source of class-defined
   micro-type shown in the screenshot. */
.creator-next-experience .ccc-root .ccc-toolbar > div:first-child > span {
  font-size: 13px !important;
}
.creator-next-experience .ccc-root .ccc-toolbar p {
  font-size: 15px !important;
}
.creator-next-experience .ccc-root .ccc-button,
.creator-next-experience .ccc-root .ccc-category-tabs button,
.creator-next-experience .ccc-root .ccc-category-header button,
.creator-next-experience .ccc-root .ccc-test-input button {
  font-size: 14px !important;
}
.creator-next-experience .ccc-root .ccc-unsaved,
.creator-next-experience .ccc-root .ccc-conflicts > div {
  font-size: 13.5px !important;
}
.creator-next-experience .ccc-root .ccc-panel-title strong {
  font-size: 16px !important;
}
.creator-next-experience .ccc-root .ccc-panel-title small {
  font-size: 13.5px !important;
}
.creator-next-experience .ccc-root .ccc-category-header strong {
  font-size: 14.5px !important;
}
.creator-next-experience .ccc-root .ccc-category-header span {
  font-size: 13px !important;
}
.creator-next-experience .ccc-root .ccc-command-identity code {
  font-size: 14px !important;
}
.creator-next-experience .ccc-root .ccc-command-identity span,
.creator-next-experience .ccc-root .ccc-command-copy small code,
.creator-next-experience .ccc-root .ccc-command-meta span,
.creator-next-experience .ccc-root .ccc-custom-card label > span,
.creator-next-experience .ccc-root .ccc-test-panel label > span,
.creator-next-experience .ccc-root .ccc-variables span,
.creator-next-experience .ccc-root .ccc-variables code,
.creator-next-experience .ccc-root .ccc-test-result > span,
.creator-next-experience .ccc-root .ccc-test-note,
.creator-next-experience .ccc-root .ccc-summary-panel dl div,
.creator-next-experience .ccc-root .ccc-advanced > button small {
  font-size: 13px !important;
  line-height: 1.4 !important;
}
.creator-next-experience .ccc-root .ccc-command-copy strong,
.creator-next-experience .ccc-root .ccc-custom-card input,
.creator-next-experience .ccc-root .ccc-custom-card select,
.creator-next-experience .ccc-root .ccc-custom-card textarea,
.creator-next-experience .ccc-root .ccc-test-panel input,
.creator-next-experience .ccc-root .ccc-cooldown b,
.creator-next-experience .ccc-root .ccc-test-result p,
.creator-next-experience .ccc-root .ccc-advanced > button strong {
  font-size: 14px !important;
  line-height: 1.4 !important;
}
.creator-next-experience .ccc-root .ccc-empty strong {
  font-size: 15px !important;
}
.creator-next-experience .ccc-root .ccc-empty span {
  font-size: 13.5px !important;
}

/* Protect mobile from the desktop viewport escape. */
@media (max-width: 980px) {
  @supports selector(body:has(.creator-next-experience)) {
    body .app-layout-shell:has(.creator-next-experience),
    body .app-layout-shell:has(.creator-next-experience) > .app-content {
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      flex-basis: auto !important;
    }
  }
}