/* Adapt to available CSS pixels (window size, display scaling and browser zoom). */
.modal[open]{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
.modal>.modal-content{min-width:0;scroll-padding-bottom:80px}
.modal input,.modal select,.modal textarea{max-width:100%;min-width:0}
.modal-footer{flex-wrap:wrap;gap:10px}
.modal:has(.singing-setup) .modal-titlebar{padding:16px 24px 0}
.modal:has(.singing-setup) .modal-content{padding:0 24px 18px}
.singing-setup .singing-source{margin:6px 0 12px}
.singing-setup .singing-voice-field{margin:0 0 12px}
.singing-setup .singing-mode-card{min-height:60px;padding:10px 14px}
.singing-setup .singing-mode-detail{min-height:48px;margin-top:10px;padding:10px 14px}
.singing-setup .singing-hint{margin:10px 0}
.singing-production-actions{position:sticky;bottom:-18px;background:#fff;padding-block:6px;z-index:3}
.singing-production-actions .btn{min-height:48px;padding:10px;font-size:16px}
.modal:has(.lyric-production-actions) .draft-review-grid textarea{height:clamp(90px,29dvh,260px);min-height:90px;max-height:36dvh;resize:vertical}
@media(min-width:601px){.modal:has(.lyric-production-actions) .draft-review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-height:650px){
 .modal .modal-titlebar{padding:10px 18px}
 .modal>.modal-content{padding:10px 18px}
 .modal .field{margin-block:8px}
 .modal-footer{margin-top:8px;padding-block:8px;bottom:-10px}
 .modal:has(.singing-setup) .modal-titlebar{padding:10px 18px 0}
 .modal:has(.singing-setup) .modal-titlebar h2{font-size:22px}
 .modal:has(.singing-setup) .modal-content{padding:0 18px 10px}
 .singing-setup .singing-source{margin:4px 0 8px}
 .singing-setup .singing-voice-field{margin:0 0 8px;gap:4px}
 .singing-voice-field select{min-height:38px}
 .singing-setup .singing-mode-options{gap:8px}
 .singing-setup .singing-mode-options legend{margin-bottom:6px}
 .singing-setup .singing-mode-card{min-height:48px;padding:6px 10px;gap:8px}
 .singing-setup .singing-mode-icon{width:30px;height:30px;flex-basis:30px}
 .singing-setup .singing-mode-detail{min-height:40px;padding:8px 10px;margin-top:8px;line-height:1.4}
 .singing-setup .singing-hint{margin:8px 0}
 .singing-production-actions{bottom:-10px;padding-block:4px}
}
@media(max-height:480px) and (min-width:601px){
 .singing-setup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);column-gap:16px}
 .singing-setup .singing-source,.singing-production-actions{grid-column:1/-1}
 .singing-setup .singing-voice-field{grid-column:1;grid-row:2}
 .singing-setup .singing-mode-options{grid-column:2;grid-row:2/5}
 .singing-setup .singing-mode-card{gap:5px;padding:6px;min-height:56px}
 .singing-setup .singing-mode-card strong{font-size:14px}
 .singing-setup .singing-mode-icon{display:none}
 .singing-setup .singing-mode-detail,.singing-setup .singing-hint{grid-column:1;font-size:13px}
 .modal:has(.lyric-production-actions) .draft-review-grid textarea{height:90px;min-height:70px}
 .lyric-production-actions .btn{min-height:44px;padding:8px 20px}
 .sidebar-stars{height:12px;margin-bottom:4px}
 .app-body>.sidebar .nav-list{gap:3px}
 .app-body>.sidebar .nav-item{min-height:36px;padding-block:6px}
 .app-body>.sidebar .sidebar-bottom{padding:4px 0 0}
 .app-body>.sidebar .sidebar-brand{height:36px;min-height:36px}
}
@media(max-width:600px){
 .modal[open]{max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
 .modal:has(.singing-setup) .modal-content{padding-inline:12px}
 .modal:has(.singing-setup) .modal-titlebar{padding-inline:12px}
 .singing-setup .singing-mode-card{gap:5px;padding:8px;min-height:56px}
 .singing-setup .singing-mode-card strong{font-size:14px}
 .singing-setup .singing-mode-icon{width:26px;height:26px;flex-basis:26px}
 .singing-setup .singing-mode-detail{min-height:0}
 .singing-production-actions{gap:8px}
 .singing-production-actions .btn{font-size:14px;gap:6px}
 .modal:has(.lyric-production-actions) .draft-review-grid{gap:8px}
 .modal:has(.lyric-production-actions) .draft-review-grid textarea{height:clamp(70px,16dvh,130px);min-height:70px}
 .lyric-production-actions .btn{min-height:44px;padding:8px 12px}
}
/* Remove the old 500px floor that pushed the stage below short windows. */
@media(min-width:1101px){.sunset-workbench{min-height:0;flex:1 1 0}.sunset-workbench .sunset-stage{min-height:0;overflow:auto}}
@media(min-width:551px) and (max-width:1100px){.sunset-workbench{grid-template-rows:max(280px,calc(100dvh - 70px)) auto}.sunset-workbench .sunset-stage{min-height:0;overflow:auto}}
@media(min-width:551px) and (max-height:650px){
 .sunset-stage .first-use{padding:12px;gap:6px}
 .sunset-stage .first-use h1{font-size:22px;margin:0}
 .sunset-stage .first-use>p{margin:0}
 .sunset-stage .welcome-mark{height:32px}
 .sunset-stage .welcome-mark svg{width:30px;height:30px}
 .sunset-stage .onboarding-steps{margin:10px 0;gap:8px}
 .sunset-stage .step-icon{width:32px;height:32px}
 .sunset-stage .first-use>.btn{min-height:38px}
}