html{overscroll-behavior-y:none}body{padding-bottom:env(safe-area-inset-bottom)}body>nav{position:sticky;top:0;padding:8px max(8px,env(safe-area-inset-left));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;background:var(--sunken)}body>nav button{padding:10px 4px;min-height:48px;min-width:0;margin:0;font-size:15px}header{padding:14px 16px}header h1{font-size:25px}main{padding:12px}button,select,input,textarea{font-size:16px}button,select{min-height:44px}input[type=checkbox]{width:22px;height:22px}button{touch-action:manipulation}iframe{width:100%;min-width:0;min-height:70svh}#page-practise #performance-host iframe{height:76svh;min-height:60svh}#mobile-storage{margin:8px 12px;border:1px solid var(--control-line);padding:10px;border-radius:8px;font-size:13px}#mobile-storage button{font-size:14px}#mobile-download{margin:10px;padding:12px;border:2px solid var(--mint)}#mobile-download a{color:var(--mint);display:inline-block;padding:12px}#mobile-download:empty{display:none}#local-transport,body.practising #local-transport{top:66px}#mobile-snapshots{max-width:100%}.audio-track input[data-control=name]{max-width:100%;width:100%}.audio-track select{max-width:100%}#status{overflow-wrap:anywhere}dialog{width:min(720px,94vw);max-width:94vw;max-height:90svh;overflow:auto}pre{overflow-wrap:anywhere}.song-card{min-width:0}.notice{overflow-wrap:anywhere}
@media(max-width:600px){header h1{font-size:21px}header small{font-size:10px}.heading{display:flex;flex-wrap:wrap;gap:8px}.heading label{width:100%}main{padding:8px}article{padding:12px}.song-card{display:block}.song-card button{width:100%}.transport{flex-wrap:wrap}.transport button{flex:1}.audio-track{display:grid;grid-template-columns:1fr 1fr;gap:8px}.audio-track [data-control=name],.audio-track small{grid-column:1/-1}.audio-track input[type=range]{max-width:100%}#local-transport{padding:8px}.transport-heading h2{font-size:16px}.seek-label{align-items:center}#mobile-storage{margin:8px}#mobile-storage summary{min-height:32px}#mobile-download button{display:block}.diff-pair{grid-template-columns:1fr}input,textarea,select{max-width:100%}}

/* Device test layout. Keep track controls inside their own grid cells. */
#online-comparison pre {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#online-panel li {
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .audio-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .audio-track > label,
  .audio-track > small,
  .audio-track > button {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .audio-track label:has(input[data-control="name"]) {
    grid-column: 1 / -1;
  }
  .audio-track label:has(input[type="range"]) {
    grid-column: 1 / -1;
    align-items: center;
    gap: .5rem;
  }
  .audio-track input[type="range"] {
    min-width: 0;
    flex: 1;
  }
}

#account-entry { max-width: 38rem; margin: 1rem auto; padding: 1rem; }
#account-entry label { display: block; margin: .75rem 0; }
#account-entry input { width: 100%; }
#account-entry details { margin-top: 1.5rem; }
#sync-status { margin: .7rem 1rem; }
#sync-conflicts li { margin-bottom: .6rem; }
#online-comparison pre { white-space: pre-wrap; overflow-wrap: anywhere; }

#account-panel{width:min(34rem,calc(100% - 24px));max-height:85vh;overflow:auto}
#account-panel section{margin-block:12px;padding:10px;border:1px solid var(--line);border-radius:8px}
#account-panel form{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin-block:8px}
#account-panel form label{min-width:0;flex:1 1 11rem}
#account-panel form input,#account-panel form select,#invitation-url{max-width:100%;width:100%}
#account-panel li{margin-block:6px;overflow-wrap:anywhere}
#account-panel .heading{align-items:center}
#account-open{white-space:nowrap}

/* Home controls stay available above every workspace, including Practise. */
body.practising header{display:flex}
#home-app nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
#home-app nav button{margin:0;min-width:0;min-height:44px;padding:8px 2px}
#sync-status{margin:6px 12px;font-size:.875rem}
#account-panel section{min-width:0;overflow-wrap:anywhere}
#account-panel summary{cursor:pointer;min-height:44px;padding-block:10px}
#mobile-storage,#large-transfer{margin:6px 0;padding:0}
.account-actions,.active-transfer{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.active-transfer,#transfer-notice{margin:6px 12px}
.active-transfer progress{max-width:100%;flex:1 1 80px}
.active-transfer button{margin:0}
.library-tools{display:flex;flex-wrap:wrap;gap:8px 16px;margin-block:12px}
.library-tools label{flex:1 1 175px;min-width:0}
.library-tools :is(input,select){width:100%;margin-inline:0}
#personal-groups,#song-details{margin-bottom:12px}
#group-assignments label{display:flex;align-items:center;gap:6px;min-height:44px}
#playlist-songs{padding-inline-start:24px}
#playlist-songs li{padding-block:4px;border-bottom:1px solid var(--control-line)}
#playlist-songs li span{display:inline-block;min-width:min(100%,140px);overflow-wrap:anywhere}
#playlist-songs button{margin:2px}
.audio-track strong{min-width:0;overflow-wrap:anywhere}
.audio-track details{width:100%;grid-column:1/-1}
.audio-track details label{display:inline-block;max-width:100%}
.audio-track summary{cursor:pointer;min-height:44px;padding-block:8px}
#editor-host iframe,#review-editor-host iframe{display:block;width:100%;min-width:0;border:0}
#review-editor{width:min(1120px,94vw)}
#review-editor-host iframe{min-height:440px}
#online-comparison audio{display:block;max-width:100%}
#online-comparison audio[hidden]{display:none}
.review-lyrics{white-space:pre-wrap}
#account-active{display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap}
#account-active[hidden]{display:none}
#account-active button{margin:0}
#account-members li,.member-options{margin-block:6px}
#account-band-name{font-weight:700}
#shared-group-assignments label{display:flex;align-items:center;gap:6px;min-height:44px}
@media(max-width:400px){header{padding-inline:8px}header h1{font-size:18px}#account-active button{font-size:13px;padding-inline:8px}}

/* Only the outer Home document scrolls the Write workspace. */
#editor-host iframe{height:1px;min-height:0}
#save-song{margin-block:12px}

.checklist{display:grid;gap:4px}
.checklist label{display:flex;align-items:center;min-height:44px;gap:8px;overflow-wrap:anywhere}
.progress-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;border-bottom:1px solid var(--control-line);padding-block:5px}
.progress-row label{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;flex:1 1 230px;overflow-wrap:anywhere}
.progress-row select{max-width:62%;margin:0}
.progress-row small{letter-spacing:normal}
#song-progress{margin-bottom:12px}