/* Reflow the studio at narrow widths; keep every control within its container. */
.app,main,.page,.page-head>div,.editor-grid,.main-column,.right-column,.details-grid,.details-grid>div,.header-actions{min-width:0}
.page-head h1,.page-head p,.card h2,.card h3,.track-name strong,.status,.hint{overflow-wrap:anywhere}
@media(max-width:950px){
 .sidebar{width:100%;max-width:100%;display:flex;flex-direction:column;align-items:stretch;gap:16px}
 .sidebar .brand{align-self:flex-start}
 .sidebar nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px}
 .sidebar .nav,.sidebar .nav:last-child{width:100%;max-width:none;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.4;justify-content:flex-start;padding:11px 10px;gap:8px}
 .sidebar .nav .nav-icon{display:inline-block;width:18px;height:18px;flex:0 0 18px}
 .app{margin-left:0;width:100%;max-width:100%}
 header{height:auto;min-height:64px;flex-wrap:wrap;padding:12px 16px;gap:12px}
 .header-actions{width:100%;max-width:100%;flex-shrink:1;flex-wrap:wrap}
 main{width:100%;max-width:100%;padding-inline:16px}
 .editor-grid,.main-column,.details-grid{width:100%;max-width:100%}
}
@media(max-width:720px){
 .header-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .header-actions .btn,.header-actions .btn.small,.header-actions .theme-toggle,.header-actions #helpBtn{width:100%;min-width:0;max-width:100%;margin:0;padding:10px 8px;min-height:44px;font-size:13px;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
 .header-actions .theme-toggle{display:flex}
 .header-actions .btn::before{width:17px;height:17px;margin-right:6px}
 .page-head{display:block}
 .page-head h1,#page-athlete .page-head h1{font-size:clamp(26px,7.5vw,33px);line-height:1.15;white-space:normal}
 .page-head p{font-size:14px;max-width:100%}
 .sidebar{padding:16px}
 .sidebar .brand{font-size:20px}
 .sidebar .brand-light{font-size:11px;letter-spacing:0}
 .sidebar .nav{font-size:13px}
 .card{padding:18px 16px;max-width:100%}
 .card-title,.card-title h2,.join-editor-header,.photo-title{min-width:0;flex-wrap:wrap}
 .btn,.text-btn{max-width:100%;white-space:normal;overflow-wrap:anywhere}
 input:not([type=range]):not([type=checkbox]),select,textarea{min-width:0;max-width:100%;font-size:16px}
 .form-grid,.trim-grid,.fade-grid,.sound-sliders,.manual-time-fields,.edit-selection-fields{grid-template-columns:minmax(0,1fr)}
 #page-athlete .details-grid{grid-template-columns:minmax(0,1fr)}
 .manual-time-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
 .photo-editor{flex-wrap:wrap}
 .photo-controls{flex:1 1 140px}
 .source-result-top,.source-search-toolbar,.catalogue-result,.join-settings{flex-wrap:wrap;min-width:0}
 .source-result-actions,.link-row,.track-row,.transport,.play-options{min-width:0;max-width:100%}
 .transport>div{flex-wrap:wrap;min-width:0;max-width:100%}
 .transport .play-options label{max-width:100%;min-width:0}
 .transport select{width:100%}
 .editor-next-step{min-width:0;max-width:calc(100% - 24px)}
 .editor-next-step strong,.editor-next-step p{overflow-wrap:anywhere}
 #helpDialog{max-width:calc(100% - 20px);min-width:0;padding:22px 14px}
 .help-choice>span,.help-player-meta>span{min-width:0;overflow-wrap:anywhere}
 .help-choice{flex-wrap:wrap}
 .help-player,.help-choices,.help-player-meta{min-width:0;max-width:100%}
 .help-player-meta{flex-wrap:wrap}
 #helpChapter{min-width:0;font-size:16px}
 footer{flex-wrap:wrap;max-width:100%;overflow-wrap:anywhere}
}
@media(max-width:360px){
 .sidebar .nav{font-size:12px;padding:10px 8px;gap:6px}
 main{padding-inline:12px}
 .card{padding:16px 12px}
 .optional-settings>summary,.rights-disclosure>summary{flex-wrap:wrap}
}