/**
 * Shared responsive layout contract for all Swagg Brown skins.
 * Modes via html[data-responsive-mode]:
 *   phone-portrait | phone-landscape | tablet-portrait | tablet-landscape
 *   | compact-desktop | desktop | wide-desktop
 *
 * Sheet (focused) workspaces use html.mobile-perf-active + data-mobile-ws.
 * Skin CSS owns visual identity; this file owns shared behavior.
 */

/* ========== Scroll owner contract ==========
 * phone-portrait / tablet-portrait (sheet):
 *   sticky header + bottom nav; active workspace scrolls
 * phone-landscape:
 *   same sheet owner; denser chrome
 * desktop / compact / wide:
 *   outer page or shell scroll; no internal desktop deck scrollbars
 */

html[data-responsive-mode] {
  --swagg-touch-min: 44px;
}

/* Audio unlock banner (non-intrusive — never a full-screen blocker) */
.swagg-audio-unlock {
  position: fixed;
  left: 50%;
  bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 70;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.55);
  background: rgba(12, 10, 8, 0.92);
  color: #f3ebd4;
  font: 600 0.85rem/1.2 "DM Sans", system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  max-width: min(22rem, calc(100vw - 1.5rem));
  width: max-content;
  pointer-events: auto;
  touch-action: manipulation;
}
/* Desktop / non-sheet: sit just above the lower edge */
html:not(.mobile-perf-active):not([data-studio-shell="mobile"]) .swagg-audio-unlock {
  bottom: 1.25rem;
}
/*
 * Dedicated mobile shell removes .mobile-perf-active, so the old bottom:1.25rem
 * rule stacked the chip on top of .ms-bottom-nav (same z-index) and stole Library taps.
 * Keep a compact chip under the sticky header — never over the bottom nav.
 */
html[data-studio-shell="mobile"] .swagg-audio-unlock {
  top: calc(env(safe-area-inset-top, 0px) + var(--ms-header-h, 52px) + 8px);
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 45; /* above workspace content; below bottom nav (80) and below modal layers */
  border-radius: 12px;
}
.swagg-audio-unlock[hidden] {
  display: none !important;
}

/* Shared vertical fader (avoid nonstandard slider-vertical appearance) */
.swagg-fader-vertical,
html[data-skin] .lc-eq-knob input[type="range"],
html[data-skin] .nn-eq-knob input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 1.35rem;
  height: 2.35rem;
  background: transparent;
  accent-color: currentColor;
}

/* ========== Sheet mode: shell skins (Library Console / Neon) ========== */
html.mobile-perf-active[data-skin="swagg-library-console"] .lc-shell,
html.mobile-perf-active[data-skin="swagg-neon-nights"] .nn-shell {
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

html.mobile-perf-active[data-skin="swagg-library-console"] .lc-topbar,
html.mobile-perf-active[data-skin="swagg-library-console"] .lc-statusbar,
html.mobile-perf-active[data-skin="swagg-neon-nights"] .nn-topbar,
html.mobile-perf-active[data-skin="swagg-neon-nights"] .nn-statusbar,
html.mobile-perf-active[data-skin="swagg-classic"] .top-bar {
  display: none !important;
}

html.mobile-perf-active[data-skin="swagg-library-console"] .mobile-perf-header,
html.mobile-perf-active[data-skin="swagg-library-console"] .mobile-bottom-nav,
html.mobile-perf-active[data-skin="swagg-neon-nights"] .mobile-perf-header,
html.mobile-perf-active[data-skin="swagg-neon-nights"] .mobile-bottom-nav {
  display: flex !important;
}

html.mobile-perf-active .main-stage.mobile-performance-shell,
html.mobile-perf-active .performance-layout.mobile-performance-shell {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* Hide desktop multi-panel chrome; reveal by workspace */
html.mobile-perf-active .lc-performance,
html.mobile-perf-active .nn-performance,
html.mobile-perf-active .classic-deck-workspace,
html.mobile-perf-active .lc-library,
html.mobile-perf-active .nn-library,
html.mobile-perf-active .nn-midrow,
html.mobile-perf-active .lc-mixer-col,
html.mobile-perf-active .nn-mixer-col,
html.mobile-perf-active .classic-mixer-col,
html.mobile-perf-active .mobile-sampler-panel,
html.mobile-perf-active .mobile-more-panel {
  display: none !important;
}

html.mobile-perf-active[data-mobile-ws^="deck"] .lc-performance.mobile-workspace,
html.mobile-perf-active[data-mobile-ws^="deck"] .nn-performance.mobile-workspace,
html.mobile-perf-active[data-mobile-ws^="deck"] .classic-deck-workspace,
html.mobile-perf-active[data-mobile-ws^="deck"] .decks-row.mobile-workspace {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-template-areas: none !important;
  gap: 0 !important;
  padding: 0.4rem 0.5rem 0.75rem;
  box-sizing: border-box;
}

/* One active deck column at a time */
html.mobile-perf-active[data-mobile-ws="deck1"] .lc-deck-col:not([data-deck="deck1"]),
html.mobile-perf-active[data-mobile-ws="deck2"] .lc-deck-col:not([data-deck="deck2"]),
html.mobile-perf-active[data-mobile-ws="deck3"] .lc-deck-col:not([data-deck="deck3"]),
html.mobile-perf-active[data-mobile-ws="deck4"] .lc-deck-col:not([data-deck="deck4"]),
html.mobile-perf-active[data-mobile-ws="deck1"] .nn-deck-col:not([data-deck="deck1"]),
html.mobile-perf-active[data-mobile-ws="deck2"] .nn-deck-col:not([data-deck="deck2"]),
html.mobile-perf-active[data-mobile-ws="deck3"] .nn-deck-col:not([data-deck="deck3"]),
html.mobile-perf-active[data-mobile-ws="deck4"] .nn-deck-col:not([data-deck="deck4"]),
html.mobile-perf-active[data-mobile-ws="deck1"] .classic-deck-col:not([data-deck="deck1"]),
html.mobile-perf-active[data-mobile-ws="deck2"] .classic-deck-col:not([data-deck="deck2"]),
html.mobile-perf-active[data-mobile-ws="deck3"] .classic-deck-col:not([data-deck="deck3"]),
html.mobile-perf-active[data-mobile-ws="deck4"] .classic-deck-col:not([data-deck="deck4"]) {
  display: none !important;
}

html.mobile-perf-active[data-mobile-ws^="deck"] .lc-deck-col,
html.mobile-perf-active[data-mobile-ws^="deck"] .nn-deck-col,
html.mobile-perf-active[data-mobile-ws^="deck"] .classic-deck-col {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  grid-area: auto !important;
}

html.mobile-perf-active[data-mobile-ws^="deck"] .lc-mixer-col,
html.mobile-perf-active[data-mobile-ws^="deck"] .nn-mixer-col,
html.mobile-perf-active[data-mobile-ws^="deck"] .classic-mixer-col,
html.mobile-perf-active[data-mobile-ws^="deck"] .classic-deck-workspace .perf-music-rail {
  display: none !important;
}

/* Library workspace */
html.mobile-perf-active[data-mobile-ws="music"] .lc-library,
html.mobile-perf-active[data-mobile-ws="music"] .nn-library,
html.mobile-perf-active[data-mobile-ws="music"] .perf-music-rail {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 0.4rem 0.5rem 0.75rem;
  box-sizing: border-box;
}

/* Mixer workspace — channel bank scroll */
html.mobile-perf-active[data-mobile-ws="mixer"] .mixer-panel,
html.mobile-perf-active[data-mobile-ws="mixer"] .lc-mixer-col,
html.mobile-perf-active[data-mobile-ws="mixer"] .nn-mixer-col,
html.mobile-perf-active[data-mobile-ws="mixer"] .classic-mixer-col {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 0.4rem 0.5rem 0.75rem;
  box-sizing: border-box;
  z-index: 1 !important;
}

html.mobile-perf-active[data-mobile-ws="mixer"] .mixer-channels {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  padding-bottom: 0.35rem;
}

html.mobile-perf-active[data-mobile-ws="mixer"] .mixer-channel,
html.mobile-perf-active[data-mobile-ws="mixer"] .channel {
  flex: 0 0 auto !important;
  min-width: min(46vw, 9.5rem) !important;
  max-width: 11rem !important;
}

html.mobile-perf-active[data-mobile-ws="mixer"] .crossfader-section,
html.mobile-perf-active[data-mobile-ws="mixer"] .lc-xf-host,
html.mobile-perf-active[data-mobile-ws="mixer"] .nn-xf-host,
html.mobile-perf-active[data-mobile-ws="mixer"] .classic-xf-host {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  position: sticky !important;
  bottom: 0 !important;
  background: inherit;
  padding-top: 0.35rem;
  z-index: 2;
}

/* Sampler / More */
html.mobile-perf-active[data-mobile-ws="sampler"] .mobile-sampler-panel {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  padding: 0.5rem;
  box-sizing: border-box;
}

html.mobile-perf-active[data-mobile-ws="more"] .mobile-more-panel,
html.mobile-perf-active[data-mobile-ws="queue"] .mobile-more-panel {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  padding: 0.5rem;
  box-sizing: border-box;
}

/* Turntable sizing inside focused deck */
html.mobile-perf-active .lc-deck-col .turntable,
html.mobile-perf-active .nn-deck-col .turntable,
html.mobile-perf-active .classic-deck-col .turntable {
  --tt-w: min(72vw, 260px) !important;
  width: var(--tt-w) !important;
  max-width: 100% !important;
}

html.mobile-perf-active .turntable img,
html.mobile-perf-active .tt-disc,
html.mobile-perf-active .tt-platter {
  object-fit: contain !important;
  max-width: 100% !important;
}

/* Diagnostics: never float over primary controls in sheet mode */
html.mobile-perf-active #swagg-perf-launcher {
  display: none !important;
}

/* Kill skin media-query stacks / four-deck min-heights that fight focused workspace */
html.mobile-perf-active .lc-performance.lc-four-deck,
html.mobile-perf-active .nn-performance.nn-four-deck,
html.mobile-perf-active .classic-deck-workspace,
html.mobile-perf-active .lc-performance.lc-four-deck .lc-deck-col,
html.mobile-perf-active .lc-performance.lc-four-deck .lc-deck-col .deck,
html.mobile-perf-active .lc-performance[data-deck-count="4"] .lc-deck-col,
html.mobile-perf-active .lc-performance[data-deck-count="4"] .lc-deck-col .deck,
html.mobile-perf-active .nn-performance.nn-four-deck .nn-deck-col,
html.mobile-perf-active .nn-performance.nn-four-deck .nn-deck-col .deck,
html.mobile-perf-active .nn-performance[data-deck-count="4"] .nn-deck-col,
html.mobile-perf-active .nn-performance[data-deck-count="4"] .nn-deck-col .deck,
html.mobile-perf-active .lc-performance.lc-four-deck .lc-deck-body,
html.mobile-perf-active .nn-performance.nn-four-deck .nn-deck-body {
  min-height: 0 !important;
  height: auto !important;
}

/* Phone landscape: denser chrome, still one primary workspace */
html.mobile-perf-active[data-responsive-mode="phone-landscape"] .mobile-perf-header {
  min-height: 2.4rem;
  padding: 0.2rem 0.4rem;
  gap: 0.3rem;
}
html.mobile-perf-active[data-responsive-mode="phone-landscape"] .mobile-bottom-nav {
  min-height: 2.6rem;
}
html.mobile-perf-active[data-responsive-mode="phone-landscape"] .lc-deck-col .turntable,
html.mobile-perf-active[data-responsive-mode="phone-landscape"] .nn-deck-col .turntable,
html.mobile-perf-active[data-responsive-mode="phone-landscape"] .classic-deck-col .turntable {
  --tt-w: min(42vh, 200px) !important;
}

/* Compact desktop: allow outer scroll; keep desktop grids */
html[data-responsive-mode="compact-desktop"] body.studio-live #studio-root {
  overflow: auto;
}

/* Prevent body lock unless sheet / dedicated mobile shell owns scrolling */
html:not(.mobile-perf-active):not([data-studio-shell="mobile"]) body.studio-live {
  overflow: auto;
}

/* Dedicated mobile shell: document must not be a second vertical scroller.
   Beats the previous html:not(.mobile-perf-active) body.studio-live overflow:auto. */
html[data-studio-shell="mobile"] body.studio-live,
html[data-studio-shell="mobile"]:not(.mobile-perf-active) body.studio-live {
  overflow: hidden !important;
  overflow-x: clip !important;
  overscroll-behavior-x: none;
  max-width: 100%;
}

/* ========== Exclusive Settings / Effects / Classic Library panels ========== */
html[data-shell-view="settings"] .lc-shell .main-stage,
html[data-shell-view="effects"] .lc-shell .main-stage,
html[data-shell-view="settings"] .nn-shell .main-stage,
html[data-shell-view="effects"] .nn-shell .main-stage,
html[data-shell-view="library"] .app-shell .main-stage,
html[data-shell-view="settings"] .app-shell .main-stage,
html[data-shell-view="effects"] .app-shell .main-stage {
  display: flex !important;
  flex-direction: column !important;
  grid-template-rows: none !important;
  overflow: auto !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
}

html[data-shell-view="settings"] .lc-performance,
html[data-shell-view="effects"] .lc-performance,
html[data-shell-view="library"] .lc-performance,
html[data-shell-view="settings"] .nn-performance,
html[data-shell-view="effects"] .nn-performance,
html[data-shell-view="library"] .nn-performance,
html[data-shell-view="settings"] .lc-library,
html[data-shell-view="effects"] .lc-library,
html[data-shell-view="settings"] .nn-library,
html[data-shell-view="effects"] .nn-library,
html[data-shell-view="settings"] .nn-midrow,
html[data-shell-view="effects"] .nn-midrow,
html[data-shell-view="library"] .nn-midrow,
html[data-shell-view="settings"] .mobile-perf-header,
html[data-shell-view="effects"] .mobile-perf-header,
html[data-shell-view="library"] .mobile-perf-header,
html[data-shell-view="settings"] .mobile-bottom-nav,
html[data-shell-view="effects"] .mobile-bottom-nav,
html[data-shell-view="library"] .mobile-bottom-nav,
html[data-shell-view="settings"] .mobile-more-panel,
html[data-shell-view="effects"] .mobile-more-panel,
html[data-shell-view="library"] .mobile-sampler-panel {
  display: none !important;
}

/* Docked LC/Neon: exclusive Library stage = full in-shell library (not Classic panel-page).
   Must beat four-deck height:auto rules that leave a short content strip. */
html[data-shell-view="library"] .nn-shell,
html[data-shell-view="library"] .lc-shell {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}
html[data-shell-view="library"] .nn-shell .main-stage,
html[data-shell-view="library"] .lc-shell .main-stage {
  display: flex !important;
  flex-direction: column !important;
  grid-template-rows: none !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}
html[data-shell-view="library"] .nn-library,
html[data-shell-view="library"] .lc-library,
html[data-shell-view="library"] .nn-shell.nn-four-deck .nn-library,
html[data-shell-view="library"] .nn-shell[data-deck-count="4"] .nn-library {
  display: grid !important;
  flex: 1 1 auto !important;
  align-self: stretch !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
  -webkit-overflow-scrolling: touch;
  z-index: 5;
}

html[data-shell-view="settings"] .panel-page[data-panel-view="settings"],
html[data-shell-view="effects"] .panel-page[data-panel-view="effects"] {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  z-index: 5;
}
/* Classic exclusive Library uses the panel-page. Docked Neon/LC use in-shell library —
   never force-show an empty library panel-page stub (it paints a blank black stage). */
html[data-skin="swagg-classic"][data-shell-view="library"] .panel-page[data-panel-view="library"] {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  z-index: 5;
}
html[data-skin="swagg-neon-nights"][data-shell-view="library"] .panel-page[data-panel-view="library"],
html[data-skin="swagg-library-console"][data-shell-view="library"] .panel-page[data-panel-view="library"] {
  display: none !important;
}

.panel-page-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.75rem;
  flex-wrap: wrap;
}
.panel-page-head h2,
.panel-page-head .lib-hero-title {
  margin: 0;
}
.panel-back-btn {
  flex: 0 0 auto;
  min-height: var(--swagg-touch-min, 44px);
  min-width: 4.5rem;
}

/* Desktop in-shell library focus ring after Library nav.
   Outline-only — must not change margin, height, grid rows, or scroll position. */
[data-el="lc-library"].is-nav-target,
[data-el="nn-library"].is-nav-target {
  outline: 2px solid rgba(212, 175, 55, 0.65);
  outline-offset: -2px;
}

/* ========== iPhone / phone containment (release-blocker) ==========
 * Document must not pan horizontally. One intentional vertical scroll owner
 * per mode. Prefer width:100% + min-width:0 over 100vw. Do not disable pinch-zoom.
 */
html[data-responsive-mode^="phone"],
html[data-studio-shell="mobile"] {
  overflow-x: clip;
  overscroll-behavior-x: none;
}
html[data-responsive-mode^="phone"] body.studio-live,
html[data-studio-shell="mobile"] body.studio-live {
  overflow-x: clip;
  overscroll-behavior-x: none;
  max-width: 100%;
}
@supports not (overflow-x: clip) {
  html[data-responsive-mode^="phone"],
  html[data-studio-shell="mobile"],
  html[data-responsive-mode^="phone"] body.studio-live,
  html[data-studio-shell="mobile"] body.studio-live {
    overflow-x: hidden;
  }
}

html[data-responsive-mode^="phone"] #studio-root,
html[data-studio-shell="mobile"] #studio-root,
html[data-responsive-mode^="phone"] .nn-shell,
html[data-responsive-mode^="phone"] .lc-shell,
html[data-responsive-mode^="phone"] .app-shell,
html[data-studio-shell="mobile"] .mobile-studio-shell,
html[data-studio-shell="mobile"] .ms-panel,
html[data-responsive-mode^="phone"] .main-stage,
html[data-responsive-mode^="phone"] .panel-page,
html[data-responsive-mode^="phone"] .nn-library,
html[data-responsive-mode^="phone"] .lc-library {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

/* Dedicated mobile shell: workspace is the sole vertical owner; never pan-x. */
html[data-studio-shell="mobile"] .ms-workspace {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
html[data-studio-shell="mobile"] .ms-header {
  flex-wrap: wrap;
  row-gap: 4px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-left: max(var(--ms-pad, 10px), env(safe-area-inset-left, 0px));
  padding-right: max(var(--ms-pad, 10px), env(safe-area-inset-right, 0px));
}
html[data-studio-shell="mobile"] .ms-bottom-nav {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box;
  padding-left: max(4px, env(safe-area-inset-left, 0px));
  padding-right: max(4px, env(safe-area-inset-right, 0px));
}
html[data-studio-shell="mobile"] .ms-brand {
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-studio-shell="mobile"] img,
html[data-studio-shell="mobile"] svg,
html[data-studio-shell="mobile"] canvas {
  max-width: 100%;
}

/* Sheet mode workspaces: vertical owner only (no document pan-x). */
html.mobile-perf-active[data-responsive-mode^="phone"] .lc-performance.mobile-workspace,
html.mobile-perf-active[data-responsive-mode^="phone"] .nn-performance.mobile-workspace,
html.mobile-perf-active[data-responsive-mode^="phone"] .classic-deck-workspace,
html.mobile-perf-active[data-responsive-mode^="phone"] .decks-row.mobile-workspace,
html.mobile-perf-active[data-responsive-mode^="phone"] .lc-library.mobile-workspace,
html.mobile-perf-active[data-responsive-mode^="phone"] .nn-library.mobile-workspace,
html.mobile-perf-active[data-responsive-mode^="phone"] .mobile-sampler-panel,
html.mobile-perf-active[data-responsive-mode^="phone"] .mobile-more-panel {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  max-width: 100% !important;
  min-width: 0 !important;
}

/*
 * Exclusive Effects/Settings: panel-page is the only vertical scroller.
 * Beat earlier main-stage { overflow:auto } which nested two iOS scrollers.
 */
html[data-shell-view="settings"] .nn-shell .main-stage,
html[data-shell-view="effects"] .nn-shell .main-stage,
html[data-shell-view="settings"] .lc-shell .main-stage,
html[data-shell-view="effects"] .lc-shell .main-stage,
html[data-shell-view="settings"] .app-shell .main-stage,
html[data-shell-view="effects"] .app-shell .main-stage {
  overflow: hidden !important;
}
html[data-shell-view="settings"] .panel-page[data-panel-view="settings"],
html[data-shell-view="effects"] .panel-page[data-panel-view="effects"] {
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

/*
 * Phone exclusive / in-shell Library: kill desktop 3-column mins (~21rem+)
 * that force document/workspace horizontal overflow on iPhone.
 * One vertical scroll owner = the library stage itself.
 */
html[data-responsive-mode^="phone"] .nn-library,
html[data-responsive-mode^="phone"] .lc-library,
html[data-responsive-mode^="phone"][data-shell-view="library"] .nn-library,
html[data-responsive-mode^="phone"][data-shell-view="library"] .lc-library,
html[data-studio-shell="mobile"] .nn-library,
html[data-studio-shell="mobile"] .lc-library {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
html[data-responsive-mode^="phone"] .nn-crates,
html[data-responsive-mode^="phone"] .lc-crates,
html[data-responsive-mode^="phone"][data-shell-view="library"] .nn-crates,
html[data-responsive-mode^="phone"][data-shell-view="library"] .lc-crates {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: 9.5rem !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
html[data-responsive-mode^="phone"] .nn-table-wrap,
html[data-responsive-mode^="phone"] .lc-table-wrap,
html[data-responsive-mode^="phone"][data-shell-view="library"] .nn-table-wrap,
html[data-responsive-mode^="phone"][data-shell-view="library"] .lc-table-wrap {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
html[data-responsive-mode^="phone"] .nn-track-table,
html[data-responsive-mode^="phone"] .lc-track-table,
html[data-responsive-mode^="phone"][data-shell-view="library"] .nn-track-table,
html[data-responsive-mode^="phone"][data-shell-view="library"] .lc-track-table {
  flex: 0 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
html[data-responsive-mode^="phone"] .nn-track-table table,
html[data-responsive-mode^="phone"] .lc-track-table table,
html[data-studio-shell="mobile"] .lib-table,
html[data-studio-shell="mobile"] .library-list {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
}
html[data-responsive-mode^="phone"] .nn-track-table th,
html[data-responsive-mode^="phone"] .nn-track-table td,
html[data-responsive-mode^="phone"] .lc-track-table th,
html[data-responsive-mode^="phone"] .lc-track-table td,
html[data-studio-shell="mobile"] .lib-table th,
html[data-studio-shell="mobile"] .lib-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
html[data-responsive-mode^="phone"] .nn-preview,
html[data-responsive-mode^="phone"][data-shell-view="library"] .nn-preview {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: 28vh !important;
  overflow: auto !important;
}

/* Cloud: always one column on phone; never force 3-up hero width. */
html[data-responsive-mode^="phone"] .cloud-cards,
html[data-responsive-mode^="phone"] .cloud-cards--hero,
html[data-studio-shell="mobile"] .cloud-cards,
html[data-studio-shell="mobile"] .cloud-cards--hero {
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
html[data-responsive-mode^="phone"] .cloud-card,
html[data-studio-shell="mobile"] .cloud-card,
html[data-responsive-mode^="phone"] .cloud-hero,
html[data-responsive-mode^="phone"] .cloud-page,
html[data-studio-shell="mobile"] .cloud-page {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
html[data-responsive-mode^="phone"] .cloud-card-actions,
html[data-studio-shell="mobile"] .cloud-card-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.5rem;
}
html[data-responsive-mode^="phone"] .cloud-card-actions .btn,
html[data-studio-shell="mobile"] .cloud-card-actions .btn {
  width: 100%;
  max-width: 100%;
  white-space: normal;
}

/* Empty crate / long labels */
html[data-responsive-mode^="phone"] .nn-empty-crate,
html[data-responsive-mode^="phone"] .lc-empty-crate,
html[data-studio-shell="mobile"] .nn-empty-crate,
html[data-studio-shell="mobile"] .lc-empty-crate {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

/* Phone exclusive Library height: prefer dvh/svh; keep flex min-height:0 chain */
html[data-responsive-mode^="phone"][data-shell-view="library"] .nn-shell,
html[data-responsive-mode^="phone"][data-shell-view="library"] .lc-shell {
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
@supports (height: 100svh) {
  html[data-responsive-mode^="phone"][data-shell-view="library"] .nn-shell,
  html[data-responsive-mode^="phone"][data-shell-view="library"] .lc-shell {
    height: 100svh !important;
    max-height: 100svh !important;
  }
}

/* iOS WebKit document-scroll: beat skin #studio-root 100dvh/overflow:hidden traps */
html.is-ios-webkit[data-studio-shell="mobile"] body.studio-live #studio-root,
html.is-ios-webkit[data-studio-shell="mobile"][data-skin] body.studio-live #studio-root,
html.is-ios-webkit[data-studio-shell="mobile"] .app-shell.nn-shell,
html.is-ios-webkit[data-studio-shell="mobile"] .app-shell.lc-shell {
  height: auto !important;
  max-height: none !important;
  min-height: 100svh !important;
  overflow: visible !important;
  overflow-x: hidden !important;
  position: relative !important;
}

html.is-ios-webkit[data-studio-shell="mobile"] body.studio-live {
  overflow: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  max-height: none !important;
  position: static !important;
}

/* Debug HUD (enabled only when JS injects it for ?debugScroll=1) */
#swagg-scroll-debug-hud {
  position: fixed;
  top: max(4px, env(safe-area-inset-top, 0px));
  left: 4px;
  right: auto;
  z-index: 99999;
  max-width: min(96vw, 22rem);
  max-height: 45vh;
  overflow: auto;
  margin: 0;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.72);
  color: #d7ffe2;
  font: 10px/1.35 ui-monospace, "JetBrains Mono", Menlo, monospace;
  white-space: pre-wrap;
  pointer-events: none;
  user-select: none;
}