/* Tablet/mobile containment: the document itself must never become wider than the viewport. */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.app-main,.player,.player-body,.container-fluid,.container-wide,.container-narrow,.repertoire-layout,.celebration-stage,.celebration-song{min-width:0;max-width:100%}
img,svg,canvas,video{max-width:100%}
input,select,textarea{max-width:100%}
.row>*{min-width:0}

/* Repertoire rows contain a link, so reset the browser's default blue/underline. */
.setlist-copy{display:block;color:var(--text,#152522);text-decoration:none;border-radius:9px;outline:0}
.setlist-copy small{display:block;color:var(--primary,#0b6b5f);text-decoration:none;text-transform:uppercase;letter-spacing:.035em}
.setlist-copy h3{color:var(--text,#152522);font-weight:750;text-decoration:none}
.setlist-copy p{color:var(--muted,#6d7b78);text-decoration:none}
.setlist-copy em{display:block;margin-top:5px;color:var(--muted,#6d7b78);font-size:.72rem;text-decoration:none}
.setlist-copy:hover h3,.setlist-copy:focus-visible h3{color:var(--primary,#0b6b5f)}
.setlist-copy:hover,.setlist-copy:focus,.setlist-copy:active{text-decoration:none}
.setlist-copy:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary,#0b6b5f) 18%,transparent)}
.setlist-item{transition:border-color .18s,box-shadow .18s,transform .18s}
.setlist-item:has(.setlist-copy:hover){border-color:#bfd5d0;box-shadow:0 7px 22px rgba(18,48,43,.08);transform:translateY(-1px)}

@media(max-width:1024px){
  .app-header-inner{gap:14px}
  .app-tabs{gap:2px}.app-tabs a{padding-inline:9px}

  .player-head .container-fluid{gap:10px!important}
  .player-head .container-fluid>div:nth-child(2){min-width:0;flex:1}
  .player-head h1,.player-head .text-secondary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .player-toolbar .container-fluid{display:flex;flex-wrap:wrap;overflow-x:visible!important;gap:7px!important}
  .version-select{flex:1 1 180px;width:auto;min-width:0;max-width:280px}
  .tone-control,.tool-btn,.speed-wrap{flex:0 0 auto}
  .song-commandbar,.song-commandbar>div{min-width:0;flex-wrap:wrap}

  /* Long aligned lines wrap inside the card while preserving chord positions. */
  .chord-sheet{width:100%;max-width:100%;overflow-x:hidden!important;white-space:pre-wrap;overflow-wrap:anywhere}
  .chord-sheet .chord,.chord-sheet .lyric-line,.chord-sheet .rendered-line{max-width:100%;white-space:pre-wrap!important;overflow-wrap:anywhere;word-break:break-word}
  .chord-segment{min-width:0;max-width:100%}
  .chord-segment>span:last-child{max-width:100%;white-space:pre-wrap!important;overflow-wrap:anywhere;word-break:break-word}

  .repertoire-hero{align-items:flex-start;flex-wrap:wrap}
  .repertoire-hero>div:first-child{min-width:0;flex:1 1 360px}
  .repertoire-hero h1{overflow-wrap:anywhere}
  .hero-actions{flex-wrap:wrap}
  .setlist-item{min-width:0}.setlist-copy h3,.setlist-copy p{overflow-wrap:anywhere}
  .section-heading,.page-title{flex-wrap:wrap}
  .form-actions,.editor-card .d-flex,.rhythm-card,.member-chips{flex-wrap:wrap}
  .share-link{min-width:0}.share-link input{min-width:0;flex:1 1 220px}

  .celebration-song-head{align-items:flex-start;flex-wrap:wrap}
  .celebration-song-head>div:first-child{min-width:0;flex:1 1 300px}
  .celebration-song-head h1{overflow-wrap:anywhere}
  .celebration-key{flex:0 0 auto}
  .celebration-tools{flex-wrap:wrap;overflow-x:visible!important}
  .celebration-tools label{min-width:145px;flex:1 1 170px}
  .celebration-tools input[type=range]{min-width:0;width:100%}
  .celebration-content{min-width:0;max-width:100%}
}

@media(max-width:780px){
  .app-header-inner{gap:7px}
  .app-brand{min-width:0}.app-brand>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .connection-status,.user-menu,.header-login,.app-new{flex:0 0 auto}

  .player-toolbar{overflow:visible}
  .player-toolbar .container-fluid{padding-inline:8px!important}
  .version-select{order:0;flex-basis:calc(100% - 142px);max-width:none}
  .tone-control{order:0}
  .tool-btn,.speed-wrap{order:1}
  .tool-btn{flex:1 1 auto}
  .song-commandbar{width:100%;padding-inline:8px}
  .song-commandbar>div{width:100%}
  .player-body{width:100%;padding-inline:8px}

  .chord-sheet{padding-inline:8px;font-size:clamp(.78rem,2.4vw,.94rem)}
  .song-chords{max-width:100%}
  .song-chords-heading{align-items:flex-start;flex-wrap:wrap}
  .song-chords-list{max-width:100%}

  .celebration-header{min-width:0;gap:7px}
  .celebration-header>div:nth-child(2){overflow:hidden}
  .celebration-header strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .celebration-song-head>div:first-child{flex-basis:220px}
  .celebration-tools button{flex:1 1 auto;padding-inline:9px}
  .celebration-tools label{order:2;flex-basis:100%}
  .celebration-nav{gap:6px}.celebration-nav button{min-width:0;flex:1}
  .celebration-nav>div{min-width:0;flex:0 1 120px}

  .repertoire-hero,.form-card,.editor-card,.add-panel{max-width:100%}
  .hero-actions{width:100%}.hero-actions .button{min-width:0;white-space:normal;text-align:center}
  .setlist-item{flex-wrap:wrap}.item-actions{margin-left:auto}
  .admin-users-layout,.instrument-note-grid{max-width:100%}
  dialog{max-width:calc(100vw - 20px)!important}
}

@media(max-width:430px){
  .app-brand>span:last-child{display:none}
  .version-select{flex-basis:100%;max-width:100%}
  .tone-control{flex:1 1 auto;justify-content:space-between}
  .player-head .icon-btn{width:36px;min-height:36px}
  .celebration-time{display:none}
}