/* 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);
}
#home-tab-studio .studio-root { width: 100%; height: 100%; }
#home-tab-studio .studio-root > div:first-child > div:first-child { padding-top: 48px !important; }

#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); }