/* The Studio as a page of its own: the song builder without the admin around it, filling whatever frame it is shown in. */
html, body.studio-app-body { height: 100%; margin: 0; }
body.studio-app-body { overflow: hidden; background: var(--bg); color: var(--text); }
#studio-loading { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; color: var(--text-dim); font-size: 0.95rem; }
/* Things that only make sense for the site's owner. */
#close-songs, .usage-song, #song-generate-cover-art, .editor-help-btn, #studio-sheet-help, #song-view-toggle, .bulk-bar, #song-toolbar-publish { display: none !important; }
/* The list of songs is the way back from a song, so it cannot be closed to nothing. */
#songs-modal .redirects-hint { max-width: 62ch; }
/* Filling the frame instead of floating over a page. */
#song-builder-modal, #songs-modal { background: var(--bg); }
#song-builder-modal .modal-inner, #songs-modal .modal-inner { width: 100%; height: 100%; max-width: none; border: 0; border-radius: 0; }
#studio-help { display: none !important; }
html, body.studio-app-body, #song-builder-modal, #songs-modal { background: transparent; }
/* No window around it: the Studio is the page, on the site's own background, as wide as the screen lets it be. */
body.studio-app-body #song-builder-modal.song-studio-on .simulation-builder-inner,
body.studio-app-body #songs-modal .modal-inner,
body.studio-app-body .modal-inner { background: transparent; border: 0; border-radius: 0; box-shadow: none; max-width: none; width: 100%; height: 100%; animation: none; }
body.studio-app-body .song-studio { max-width: 1040px; }
body.studio-app-body #songs-modal .modal-inner { max-width: 760px; margin: 0 auto; }
:root { --admin-sidebar-width: 0px; }
body.studio-app-body .modal { padding-left: 0; padding-right: 0; }
/* A short screen gives the grid the room: a shorter keyboard and pads. */
@media (max-height: 860px) { body.studio-app-body .studio-keys { height: 80px; } body.studio-app-body .studio-pads { padding: 6px; gap: 6px; } }