/* Opt-in only. Include after the bay styles; specificity also survives its dynamically inserted STYLE. */
.phone-sheet-layout {
  --phone-sheet-accent: var(--ns-focus, var(--ns-gold, #f5a623));
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: var(--phone-sheet-available, 100dvh);
  max-height: var(--phone-sheet-viewport, 100dvh);
  min-width: 0; min-height: 0; gap: 0; overflow: clip;
  color: var(--ns-text, #e8eaed); background: var(--ns-bg, #202124);
  font-family: var(--ns-font, system-ui, sans-serif);
}
.phone-sheet-layout *, .phone-sheet-layout *::before, .phone-sheet-layout *::after {box-sizing: border-box;}
[data-bs-theme=light] .phone-sheet-layout {--phone-sheet-accent: var(--ns-gold-light, #b06000);}
.phone-sheet-layout > .phone-sheet-stage {
  position: relative; width: 100%; height: 100% !important; min-height: 0 !important;
  min-width: 0; overflow: hidden; grid-row: 1 !important; grid-column: 1 !important;
}
.phone-sheet-layout .phone-sheet-shell {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-width: 0; min-height: 0;
  grid-row: 1; grid-column: 2;
  overflow: hidden; background: var(--ns-bg, #202124); border-inline-start: 1px solid var(--ns-border, #ffffff1f);
}
.phone-sheet-layout .phone-sheet-bar, .phone-sheet-layout .phone-sheet-tabs {display: none;}
.phone-sheet-layout .phone-sheet-editor {
  min-width: 0; min-height: 0; height: auto; overflow: auto; overscroll-behavior: contain;
  padding: 16px; grid-row: 3 !important; grid-column: 1 !important; scrollbar-gutter: stable; overflow-wrap: anywhere;
}
/* Line 31769: the editor is the menu's one scroller. A column inside it that kept its own scroll box from the older layout
   (the page's #controls, a drawn look's .bd-controls) is as tall as its rows, so it can never scroll, and its
   overscroll-behavior: contain swallowed every wheel, trackpad and touch scroll over the menu. Here it lets them reach the editor. */
.phone-sheet-layout .phone-sheet-editor :is(.controls, .bd-controls) {overflow: visible; overscroll-behavior: auto;}
.phone-sheet-layout .phone-sheet-editor .bay-sheetbar {display: none !important;}
.phone-sheet-layout :is(button, a, input, select, textarea):focus-visible {outline: 2px solid var(--phone-sheet-accent); outline-offset: -2px;}
.phone-sheet-layout[data-phone-sheet-compact=true] {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) var(--phone-sheet-height, 50%) !important;
}
.phone-sheet-layout[data-phone-sheet-compact=true] .phone-sheet-shell {
  grid-row: 2; grid-column: 1; border: 1px solid var(--ns-border, #ffffff1f); border-bottom: 0;
  border-radius: 24px 24px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 24px #0000001f;
}
.phone-sheet-layout[data-phone-sheet-compact=true] .phone-sheet-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: 64px;
}
.phone-sheet-bar button, .phone-sheet-tabs button {
  min-width: 44px; min-height: 44px; margin: 0; padding: 8px; border: 0; border-radius: 10px;
  background: transparent; color: inherit; font: 500 14px/1.25 var(--ns-font, system-ui, sans-serif); cursor: pointer; touch-action: manipulation;
}
.phone-sheet-bar .phone-sheet-grip {
  flex: 1; display: grid; justify-items: center; gap: 5px; touch-action: none; user-select: none; cursor: ns-resize;
}
.phone-sheet-grip::before {content: ''; display: block; width: 32px; height: 4px; border-radius: 4px; background: var(--ns-text-2, #9aa0a6);}
.phone-sheet-stops {display: flex; gap: 4px;}
.phone-sheet-stops [aria-pressed=true] {background: var(--ns-surface, #292a2d); color: var(--ns-text, #e8eaed); box-shadow: inset 0 -2px var(--phone-sheet-accent);}
.phone-sheet-layout[data-phone-sheet-compact=true] .phone-sheet-tabs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 4px;
  padding: 0 12px 8px; border-bottom: 1px solid var(--ns-border, #ffffff1f);
  max-height: max(44px, calc(var(--phone-sheet-height) - 160px - env(safe-area-inset-bottom, 0px)));
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.phone-sheet-tabs button {border-radius: 8px; color: var(--ns-text-2, #9aa0a6); overflow-wrap: anywhere;}
.phone-sheet-tabs [aria-selected=true] {color: var(--ns-text, #e8eaed); background: var(--ns-surface, #292a2d); box-shadow: inset 0 -2px var(--phone-sheet-accent);}
.phone-sheet-layout[data-phone-sheet-compact=true] .phone-sheet-editor {padding: 12px 16px 24px; scrollbar-gutter: auto;}
.phone-sheet-layout[data-phone-sheet-compact=true] [data-phone-sheet-panel=inactive] {display: none !important;}
.phone-sheet-layout[data-phone-sheet-compact=true] [data-phone-sheet-panel=active] > details > summary,
.phone-sheet-layout[data-phone-sheet-compact=true] details[data-phone-sheet-panel=active] > summary {display: none !important;}
.phone-sheet-layout[data-phone-sheet-compact=true] [data-phone-sheet-panel=active] {border-bottom: 0 !important;}
.phone-sheet-layout[data-phone-sheet-compact=true][data-phone-sheet=peek]:not([data-phone-sheet-dragging]) .phone-sheet-tabs,
.phone-sheet-layout[data-phone-sheet-compact=true][data-phone-sheet=peek]:not([data-phone-sheet-dragging]) .phone-sheet-editor {display: none;}
.phone-sheet-layout[data-phone-sheet-compact=true][data-phone-sheet=peek]:not([data-phone-sheet-dragging]) .phone-sheet-bar {height: 100%;}
/* The existing look modules retain their input listeners, native pickers and value labels. */
.phone-sheet-layout[data-phone-sheet-compact=true] .phone-sheet-editor :is(button, select, input:not([type=hidden]), textarea, .bay-range, .bay-check, .bay-chip, .bay-summary) {
  min-height: 44px !important; font-size: 16px;
}
.phone-sheet-layout[data-phone-sheet-compact=true] .phone-sheet-editor :is(button, input[type=color], input[type=checkbox], input[type=radio]) {min-width: 44px !important;}
.phone-sheet-layout[data-phone-sheet-compact=true] .phone-sheet-editor :is(select, textarea, input:not([type=checkbox]):not([type=radio])) {max-width: 100%;}
.phone-sheet-layout[data-phone-sheet-compact=true] .phone-sheet-editor :is(.bay-swatches, .bay-iris) {grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));}
.phone-sheet-layout[data-phone-sheet-compact=true] .phone-sheet-editor .bay-wheel {grid-template-columns: minmax(0, 1fr);}
.phone-sheet-layout[data-phone-sheet-compact=true] .phone-sheet-editor .bay-board {grid-template-columns: minmax(0, 1fr);}
.phone-sheet-layout[data-phone-sheet-compact=true] .phone-sheet-editor .bay-sec-reset {position: relative; inset: auto; margin-bottom: 8px;}
@media (prefers-reduced-motion: reduce) {
  .phone-sheet-layout *, .phone-sheet-layout *::before, .phone-sheet-layout *::after {scroll-behavior: auto; transition: none !important;}
}