/* Studio tab — the Generations design on PatchWork Standard tokens.
   Styling is applied inline by js/studio.js (var(--sl-*) tokens + .sl-*
   classes) so this file only carries what inline styles can't express:
   scrollbars, keyframes, placeholders, and the font baseline. Hover states are driven in
   JS (see the `hover:` option in the el() helper), mirroring the design's
   `style-hover` attribute. */

#home-tab-studio {
    padding: 0;
    height: 100%;
    min-height: 0;
    font-family: var(--sl-font-ui);
    color: var(--sl-text-1);
    background: var(--sl-app);
}
/* .studio-shell: the top bar (Skills / Templates / Products / Trending videos),
   then the gallery (.studio-root) or one of the bar's views below it. */
#home-tab-studio .studio-shell,
#home-tab-studio .studio-root { width: 100%; }
#home-tab-studio [data-studio-topbar]::-webkit-scrollbar { display: none; }
#home-tab-studio [data-studio-topbar] button:focus-visible { outline: 2px solid var(--sl-focus); outline-offset: 1px; }
/* The Templates page inside Studio starts under the top bar, which already
   clears the Windows caption strip (css/desktop.css gives the page 54px). */
.pw-desktop:not(.pw-desktop-mac) #home-tab-studio .tpl-main { padding-top: 30px; }

#home-tab-studio ::-webkit-scrollbar { width: 8px; height: 8px; }
#home-tab-studio ::-webkit-scrollbar-thumb { background: var(--sl-control); border-radius: 4px; }
#home-tab-studio ::-webkit-scrollbar-track { background: transparent; }
#home-tab-studio textarea::placeholder,
#home-tab-studio input::placeholder { color: var(--sl-text-3); }

/* Overlays (lightbox, scene full, node graph) mount as a child of #home-screen
   so they paint with the home UI. #home-immersive-logo is z-index 10050 in that
   same context — keep the host below it or the Home mark is unclickable while
   the player is open. pointer-events:none on the empty host so it cannot steal
   clicks as a flex child of .home-screen. */
.studio-overlay ::-webkit-scrollbar { width: 8px; height: 8px; }
.studio-overlay ::-webkit-scrollbar-thumb { background: var(--sl-control); border-radius: 4px; }
.studio-overlay { font-family: var(--sl-font-ui); color: var(--sl-text-1); }
#home-screen > .studio-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
}
#home-screen > .studio-overlay > * { pointer-events: auto; }

@keyframes studio-genpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes studio-genspin { to { transform: rotate(360deg); } }

.studio-spin { animation: studio-genspin 1s linear infinite; }
.studio-pulse { animation: studio-genpulse 2s ease infinite; }

/* Buttons built from .sl-btn-* inside the gallery keep their icon at 13px. */
#home-tab-studio .sl-btn-primary svg, #home-tab-studio .sl-btn-secondary svg,
.studio-overlay .sl-btn-primary svg, .studio-overlay .sl-btn-secondary svg { flex: none; }
/* Settings popover rows sit on the menu recipe; the check marks the model in use. */
.studio-pop .sl-menu-item { flex: none; }
.studio-pop .sl-menu-item svg { color: var(--sl-link); }

/* Phone bottom sheets (filters, generation settings, references, menus):
   thumb-sized rows and controls. */
.studio-sheet .sl-menu-item { min-height: 44px; }
.studio-sheet .sl-input { min-height: 40px; }
.studio-sheet .sl-seg-btn { min-height: 36px; }
.studio-sheet input[type="range"] { min-height: 32px; }
body.pw-mobile #home-tab-studio .sl-btn-lg,
body.pw-mobile .studio-overlay .sl-btn-lg { height: 44px; }

/* Lightbox controls are real buttons: show where keyboard focus is. */
.studio-overlay .studio-lb-btn:focus-visible { outline: 2px solid var(--sl-focus); outline-offset: 2px; }

/* Desktop app: the window is dragged by its top strip. The canvas toolbar
   (.toolbar-row-top, behind the home screen) is that strip, and Studio's top bar
   sits right over it. Chromium applies drag areas in page order, and the toolbar
   comes after Studio — so its drag area beat the buttons' no-drag, and a click on
   Trending videos moved the window instead. While Studio is up (body.pw-studio-up,
   js/main.js _syncImmersiveLogo) the toolbar does not drag; Studio's own top bar
   does, with its buttons left clickable (children come after their parent, so
   their no-drag wins). */
/* Beats css/desktop.css's `.pw-desktop #toolbar .toolbar-row-top { drag }`. */
.pw-desktop body.pw-studio-up #toolbar .toolbar-row-top { -webkit-app-region: no-drag; }
.pw-desktop body.pw-studio-up .studio-topbar { -webkit-app-region: drag; }
.studio-topbar button,
.studio-topbar a { -webkit-app-region: no-drag; }