@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
  :root{--ink:#1c1b17;--paper:#ffffff;--paper-deep:#e9e6df;--navy:#16233d;--navy-deep:#101a2e;--gold:#c6a24d;--gold-bright:#e0bc6a;--wine:#6d1626;--wine-bright:#8a2035;--line:rgba(28,27,23,.10)}
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  button,input,textarea,select{font:inherit}
  body{background:var(--paper);color:var(--ink);font-family:Manrope,sans-serif;min-height:100vh}
  header{background:var(--navy);color:var(--paper);padding:calc(2.4rem + env(safe-area-inset-top)) 1.5rem 2rem;text-align:center;border-bottom:1px solid rgba(198,162,77,.5)}
  h1{font-family:'Manrope',sans-serif;font-weight:600;font-size:clamp(1.9rem,4.4vw,2.7rem);margin:0 0 .4rem;letter-spacing:-0.01em}
  header p.tag{color:rgba(233,226,205,.6);font-size:.92rem;margin:0}
  .app{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(340px,28vw) minmax(0,1fr);gap:0;min-height:calc(100vh - 190px)}
  .board{background:var(--navy-deep);padding:1.6rem 1.2rem 2.5rem}
  .board-label{font-family:Manrope,sans-serif;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright);margin:0 0 .9rem .1rem}
  .search-field{position:relative;margin-bottom:1.1rem}
  #search{width:100%;padding:.6rem 2.45rem .6rem .75rem;border-radius:4px;border:1px solid rgba(198,162,77,.3);background:rgba(233,226,205,.05);color:var(--paper);font-family:Manrope,sans-serif;font-size:16px;outline:none;transition:border-color .15s,background .15s}
  #search::placeholder{color:rgba(233,226,205,.38)}
  #search:focus{border-color:var(--gold-bright);background:rgba(233,226,205,.08)}
  #search::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
  .search-clear{position:absolute;top:50%;right:.45rem;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;padding:0;border:0;border-radius:50%;background:transparent;color:rgba(233,226,205,.62);font-size:1.35rem;line-height:1;cursor:pointer}
  .search-clear:hover{background:rgba(198,162,77,.12);color:var(--gold-bright)}
  .search-clear:focus-visible{outline:2px solid var(--gold-bright);outline-offset:1px}
  .search-clear[hidden]{display:none}
  .tile-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem}
  .tile-row{display:grid;grid-template-columns:1fr auto;align-items:center}
  .tile{display:flex;align-items:center;gap:.7rem;width:100%;min-width:0;text-align:left;background:transparent;border:0;border-left:2px solid transparent;border-radius:12px;padding:.6rem .45rem .6rem .6rem;cursor:pointer;color:rgba(233,226,205,.8);font-family:Manrope,sans-serif;font-size:1rem;transition:background .15s,border-color .15s,border-radius .15s}
  .favorite-btn{width:2.15rem;height:2.15rem;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:rgba(233,226,205,.38);font-size:1.12rem;cursor:pointer;border-radius:4px}
  .favorite-btn:hover{background:rgba(198,162,77,.08);color:var(--gold-bright)}
  .favorite-btn.active{color:var(--gold-bright)}
  .favorite-btn:focus-visible{outline:2px solid var(--gold-bright);outline-offset:-2px}
  .tile-actions{display:flex;align-items:center}
  .setlist-add,.setlist-order{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:rgba(233,226,205,.42);font-family:Manrope,sans-serif;font-size:.82rem;cursor:pointer;border-radius:4px}
  .setlist-add:hover,.setlist-order:hover{background:rgba(198,162,77,.08);color:var(--gold-bright)}
  .setlist-add.active{color:var(--gold-bright)}
  .setlist-order:disabled{opacity:.2;cursor:default}
  .tile:hover{background:rgba(198,162,77,.07)}
  .tile:focus-visible{outline:2px solid var(--gold-bright);outline-offset:-2px}
  .tile.active{position:relative;background:rgba(198,162,77,.1);border-left-color:transparent;color:var(--paper)}
  .tile.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold-bright);border-radius:0}
  .num{flex:0 0 auto;width:1.62rem;height:1.62rem;display:flex;align-items:center;justify-content:center;background:transparent;color:rgba(224,188,106,.78);font-family:Manrope,sans-serif;font-weight:600;font-size:.69rem;border:1px solid rgba(198,162,77,.26);border-radius:3px}
  .tile.active .num{background:var(--gold-bright);color:var(--navy-deep);border-color:var(--gold-bright)}
  .tile-title{line-height:1.3;min-width:0;overflow-wrap:anywhere}
  .tile-title small{display:block;font-family:Manrope,sans-serif;font-size:.72rem;letter-spacing:.04em;color:rgba(233,226,205,.45);margin-top:.15rem}
  .empty-note{color:rgba(233,226,205,.4);font-size:.85rem;padding:.5rem}
  main{padding:2.2rem clamp(1.2rem,4vw,3rem) 4rem;min-width:0}
  .song-nav{display:flex;position:sticky;top:env(safe-area-inset-top);z-index:20;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap;background:rgba(245,244,240,.97);border-bottom:1px solid var(--line);margin:0 0 1.1rem;padding:.5rem 0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .command-group{display:flex;align-items:center;gap:.45rem;flex-wrap:nowrap;min-width:0}
  .toolbar-controls{display:flex;align-items:center;gap:.65rem;flex-wrap:nowrap;min-width:0}
  .primary-actions{display:flex;align-items:center;gap:.38rem;min-width:0}
  .secondary-actions{display:flex;align-items:center;gap:.55rem;min-width:0}
  .transpose-controls{display:grid;grid-template-columns:auto 1.62rem minmax(5.2rem,auto) 1.62rem auto;align-items:center;gap:.4rem;min-width:0}
  .text-controls{display:grid;grid-template-columns:auto 1.68rem 2.7rem 1.68rem;align-items:center;gap:.4rem}
  .command-separator{width:1px;height:1.35rem;background:var(--line);margin:0 .15rem}
  .back-list{display:inline-flex;align-items:center;gap:.45rem;border:0;background:transparent;color:var(--wine);font-family:Manrope,sans-serif;font-size:.82rem;font-weight:600;padding:.45rem 0;cursor:pointer}
  .back-list:hover{color:var(--wine-bright)}
  .back-list:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
  .back-arrow{font-size:1.2rem;line-height:1}
  .song-head{display:flex;align-items:flex-start;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:1.1rem;margin-bottom:1.6rem}
    .song-title{font-family:'Manrope',sans-serif;font-weight:600;font-size:clamp(1.5rem,3vw,2.1rem);margin:0;line-height:1.15;letter-spacing:-0.01em}
  .song-sub{color:rgba(28,27,23,.5);font-size:.9rem;margin-top:.3rem}
  .song-capo{display:inline-flex;align-items:center;margin-top:.38rem;padding:.18rem .48rem;border:1px solid rgba(143,21,48,.24);border-radius:999px;color:var(--wine);font-family:Manrope,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.015em;background:rgba(143,21,48,.035)}
  .badges{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
  .badge{font-family:Manrope,sans-serif;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;padding:.2rem .5rem;border-radius:3px;background:transparent;color:var(--wine);border:1px solid rgba(109,22,38,.25)}
  .transpose-row{display:flex;align-items:center;gap:.55rem;margin-top:.9rem;flex-wrap:wrap}
  .transpose-label{font-family:Manrope,sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:none;color:rgba(28,27,23,.45)}
  .transpose-btn{width:1.62rem;height:1.62rem;display:flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--line);background:transparent;color:var(--ink);font-family:Manrope,sans-serif;font-weight:600;font-size:.92rem;line-height:1;cursor:pointer;transition:background .15s,border-color .15s}
  .transpose-btn:hover{background:rgba(198,162,77,.14);border-color:var(--gold)}
  .transpose-value{white-space:nowrap;font-family:Manrope,sans-serif;font-size:.8rem;font-weight:600;color:var(--wine);min-width:0;text-align:center;white-space:nowrap}
  .transpose-reset{font-family:Manrope,sans-serif;font-size:.76rem;font-weight:600;text-decoration:underline;color:rgba(28,27,23,.4);background:none;border:0;padding:0;cursor:pointer}
  .transpose-reset:hover{color:var(--wine)}
  .text-size-label{font-family:Manrope,sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:none;color:rgba(28,27,23,.45)}
  .text-size-value{white-space:nowrap;text-align:center;font-family:Manrope,sans-serif;font-size:.8rem;font-weight:600;color:var(--wine);min-width:2.7rem;text-align:center}
  .command-btn{width:1.68rem;height:1.68rem;display:flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--line);background:transparent;color:var(--ink);font-family:Manrope,sans-serif;font-weight:600;font-size:.92rem;line-height:1;cursor:pointer;transition:background .15s,border-color .15s}
  .command-btn:hover{background:rgba(198,162,77,.14);border-color:var(--gold)}
  .command-btn:focus-visible{outline:2px solid var(--wine);outline-offset:2px}
  .song-favorite{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--line);background:transparent;color:rgba(28,27,23,.38);font-family:Manrope,sans-serif;font-weight:600;font-size:1rem;line-height:1;cursor:pointer}
  .song-favorite.active{color:var(--gold);border-color:rgba(198,162,77,.55);background:rgba(198,162,77,.10)}
  .song-setlist{height:2rem;display:flex;align-items:center;justify-content:center;gap:.3rem;border-radius:4px;border:1px solid var(--line);background:transparent;color:rgba(28,27,23,.55);font-family:Manrope,sans-serif;font-size:.72rem;font-weight:600;padding:0 .58rem;cursor:pointer;white-space:nowrap}
  .song-setlist.active{color:var(--wine);border-color:rgba(109,22,38,.3);background:rgba(109,22,38,.06)}
  .lyrics-only-toggle{height:2rem;display:flex;align-items:center;justify-content:center;gap:.3rem;border-radius:4px;border:1px solid var(--line);background:transparent;color:rgba(28,27,23,.55);font-family:Manrope,sans-serif;font-size:.72rem;font-weight:600;padding:0 .58rem;cursor:pointer;white-space:nowrap}
  .lyrics-only-toggle.active{color:var(--wine);border-color:rgba(109,22,38,.3);background:rgba(109,22,38,.06)}
  .lyrics-only-line{display:none;font-family:Manrope,sans-serif;font-size:var(--song-font-size);font-weight:500;line-height:1.65;white-space:pre-wrap;overflow-wrap:normal;word-break:normal}
  .sheet.lyrics-only .chordline,
  .sheet.lyrics-only .music-row{display:none}
  .sheet.lyrics-only .lyrics-only-line{display:block}
  .setlist-nav{display:flex;align-items:center;gap:.4rem}
  .setlist-nav button{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:4px;font-family:Manrope,sans-serif;font-size:.74rem;font-weight:600;padding:.38rem .5rem;cursor:pointer}
  .setlist-nav button:disabled{opacity:.3;cursor:default}
  .setlist-position{font-family:Manrope,sans-serif;font-size:.74rem;font-weight:600;color:rgba(28,27,23,.5)}
  .sheet{--song-font-size:16px;background:transparent;border:0;border-radius:0;padding:0 0 .35rem;box-shadow:none;overflow-x:auto}
  .block{margin-bottom:1rem}
  .block:last-child{margin-bottom:0}
  .chordline,.lyricline{font-family:Manrope,sans-serif;font-weight:400;line-height:1.52;letter-spacing:-.005em;color:#222}
  .chordline{font-family:Manrope,sans-serif;font-weight:700;color:#8f1530;line-height:1.38;font-size:.9em;letter-spacing:0}
  .measure-bar{color:#a06c00}
  .lyricline{font-weight:500;line-height:1.65}
  .music-row{display:flex;flex-wrap:nowrap;align-items:flex-start;width:max-content;min-width:100%;font-family:Manrope,sans-serif;font-size:var(--song-font-size);margin-bottom:.08rem}
  .music-segment{flex:0 0 auto;width:auto;min-width:calc(var(--cols) * .48em);padding-right:.06em}
  .segment-chord,.segment-lyric{font-weight:400;line-height:1.52;letter-spacing:-.005em;color:#222}
  .segment-chord{font-weight:700;color:#8f1530;line-height:1.38;min-height:1.38em;font-size:.9em;letter-spacing:0}
  .segment-lyric{font-weight:500;line-height:1.65}
  .headline{position:relative;font-family:Manrope,sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--navy);background:rgba(198,162,77,.075);display:inline-block;padding:.22rem .5rem .22rem .72rem;border:1px solid rgba(198,162,77,.16);border-radius:4px;margin:.85rem 0 .18rem}
  .headline::before{content:"";position:absolute;top:.2em;bottom:.2em;left:0;width:3px;border-radius:0 999px 999px 0;background:var(--gold-bright)}
  .sheet>.headline:first-child{margin-top:0}
  .spacer{height:.5rem}
  footer{text-align:center;font-family:Manrope,sans-serif;font-size:.72rem;letter-spacing:.04em;color:rgba(28,27,23,.45);padding:1.4rem 1rem 2rem}
  .offline-status{display:inline-flex;align-items:center;gap:.4rem;margin-top:.58rem;color:rgba(22,35,61,.62);font-size:.79rem;letter-spacing:.01em}
  .offline-status-dot{width:.46rem;height:.46rem;border-radius:50%;background:rgba(22,35,61,.3)}
  .offline-status[data-state="ready"] .offline-status-dot{background:#3f7652}
  .offline-status[data-state="updating"] .offline-status-dot{background:var(--gold-bright);animation:offline-status-pulse 1.25s ease-in-out infinite}
  .offline-status[data-state="attention"] .offline-status-dot{background:var(--wine)}
  @keyframes offline-status-pulse{50%{opacity:.35}}
  .feedback-trigger{height:2rem;display:flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--line);background:transparent;color:rgba(28,27,23,.52);font-family:Manrope,sans-serif;font-size:.72rem;font-weight:600;padding:0 .48rem;cursor:pointer;white-space:nowrap}
  .feedback-trigger:hover{color:var(--wine);border-color:rgba(109,22,38,.3);background:rgba(109,22,38,.05)}
  .feedback-modal[hidden]{display:none}
  .feedback-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1rem}
  .feedback-backdrop{position:absolute;inset:0;background:rgba(16,26,46,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
  .feedback-card{position:relative;z-index:1;width:min(560px,100%);max-height:calc(100vh - 2rem);overflow:auto;background:var(--paper);color:var(--ink);border:1px solid rgba(198,162,77,.35);border-radius:10px;padding:1.25rem;box-shadow:0 24px 70px rgba(16,26,46,.28)}
  .feedback-card h2{margin:0 2rem .35rem 0;font-size:1.25rem}
  .feedback-intro{margin:0 0 1rem;color:rgba(28,27,23,.58);font-size:.9rem}
  .feedback-close{position:absolute;top:.65rem;right:.7rem;width:2rem;height:2rem;border:0;border-radius:4px;background:transparent;color:var(--wine);font-size:1.4rem;cursor:pointer}
  .feedback-field{display:block;margin:.85rem 0}
  .feedback-field>span{display:block;margin-bottom:.35rem;font-size:.8rem;font-weight:600}
  .feedback-field small{font-weight:400;color:rgba(28,27,23,.45)}
  .feedback-field input,.feedback-field select,.feedback-field textarea{width:100%;border:1px solid rgba(28,27,23,.15);border-radius:5px;background:#fffdf7;color:var(--ink);padding:.68rem .75rem;font-family:Manrope,sans-serif;font-size:16px;outline:none}
  .feedback-field input:focus,.feedback-field select:focus,.feedback-field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,162,77,.12)}
  .feedback-field textarea{resize:vertical;min-height:7rem}
  .feedback-actions{display:flex;justify-content:flex-end;gap:.55rem;margin-top:1rem}
  .feedback-cancel,.feedback-submit{border-radius:5px;padding:.65rem .85rem;font-family:Manrope,sans-serif;font-weight:600;cursor:pointer}
  .feedback-cancel{border:1px solid var(--line);background:transparent;color:var(--ink)}
  .feedback-submit{border:1px solid var(--wine);background:var(--wine);color:#fff}
  .feedback-status{min-height:1.2rem;margin:.7rem 0 0;font-size:.82rem;color:var(--wine)}
  .feedback-honeypot{position:absolute;left:-9999px}


  @media (min-width:1280px){
    .app{grid-template-columns:minmax(380px,30vw) minmax(0,1fr)}
  }

  @media (min-width:821px) and (max-width:1100px){
    .app{grid-template-columns:minmax(320px,38vw) minmax(0,1fr)}
    .tile{font-size:1.05rem;padding:.68rem .55rem .68rem .62rem}
    .tile-title small{font-size:.74rem}
  }

  @media (max-width:820px){
    .tile{font-size:1.06rem;padding:.68rem .5rem .68rem .6rem}
    .tile-title small{font-size:.74rem}
    .app{grid-template-columns:1fr}
    .board{border-bottom:1px solid rgba(198,162,77,.25)}
    body:not(.song-open) main{display:none}
    body.song-open .board{display:none}
    body.song-open main{display:block;padding-top:0}
    .song-nav{display:grid;grid-template-columns:1fr;margin:0 0 .9rem;padding:.42rem 0;gap:.42rem}
    .song-nav>.command-group:first-child{display:grid;grid-template-columns:auto 1fr;align-items:center;width:100%;gap:.4rem}
    .primary-actions{justify-content:flex-end;gap:.32rem}
    .toolbar-controls{display:grid;grid-template-columns:1fr auto;width:100%;gap:.4rem}
    .transpose-controls{grid-template-columns:1.62rem minmax(4.4rem,1fr) 1.62rem auto;gap:.3rem}
    .text-controls{grid-template-columns:1.68rem 2.55rem 1.68rem;gap:.28rem}
    .back-list{font-size:.78rem;padding:.38rem 0}
    .text-size-label,.transpose-label,.command-separator{display:none}
    .transpose-value{font-size:.76rem}
    .transpose-reset{font-size:.72rem}
    .song-favorite{width:1.9rem;height:1.9rem;font-size:.92rem}
    .song-setlist,.lyrics-only-toggle,.feedback-trigger{height:1.9rem;padding:0 .38rem;font-size:.68rem}
    .feedback-card{padding:1rem;border-radius:8px}
    .song-title{font-size:clamp(1.35rem,6vw,1.8rem)}
    .song-head{gap:.75rem;padding-bottom:.85rem;margin-bottom:1rem}
    .setlist-nav{justify-content:space-between;margin:.1rem 0 .85rem}
    .music-row{flex-wrap:wrap;width:100%;min-width:0;column-gap:0;row-gap:.22rem;margin-bottom:.35rem}
    .music-segment{max-width:100%}
    .chordline,.lyricline{width:100%;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}
  }


  /* Barra comandi responsiva e stabile */
  @media (min-width:821px) and (max-width:1280px){
    .song-nav{
      display:grid;
      grid-template-columns:1fr;
      align-items:stretch;
      gap:.5rem;
    }
    .song-nav>.command-group:first-child{
      width:100%;
      justify-content:space-between;
    }
    .toolbar-controls{
      width:100%;
      display:grid;
      grid-template-columns:minmax(0,1fr) auto auto;
      align-items:center;
      gap:.55rem;
    }
    .transpose-controls{
      grid-template-columns:auto 1.62rem minmax(5.4rem,1fr) 1.62rem auto;
      width:100%;
    }
    .text-controls{
      grid-template-columns:auto 1.68rem 2.7rem 1.68rem;
    }
  }

  @media (max-width:560px){
    .toolbar-controls{
      display:grid;
      grid-template-columns:1fr;
      gap:.38rem;
    }
    .command-separator{
      display:none;
    }
    .transpose-controls{
      grid-template-columns:1.62rem minmax(5.6rem,1fr) 1.62rem auto;
      width:100%;
    }
    .text-controls{
      grid-template-columns:1.68rem minmax(2.7rem,1fr) 1.68rem;
      width:100%;
    }
    .transpose-value,
    .text-size-value{
      text-align:center;
      white-space:nowrap;
    }
  }

  @media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* Navigazione compatta */
.list-filters{gap:.25rem!important;margin:0 0 .45rem!important}
.filter-btn{font-size:.62rem!important;padding:.32rem .3rem!important;letter-spacing:.02em!important}
.board{padding-top:1rem!important}
@media(max-width:600px){
  header{padding:calc(1.25rem + env(safe-area-inset-top)) 1rem 1.05rem}
}


/* Accordi agganciati alle parole: evita spazi artificiali e parole spezzate */
.music-row.word-anchored{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  width:100%;
  min-width:0;
  column-gap:.32em;
  row-gap:.28rem;
  margin-bottom:.35rem;
}
.music-row.word-anchored .music-segment{
  flex:0 1 auto;
  width:auto;
  min-width:0;
  max-width:100%;
  padding-right:0;
}
.music-row.word-anchored .segment-chord{
  min-height:1.38em;
  white-space:nowrap;
  font-weight:700;
  color:#8f1530;
  line-height:1.38;
  font-size:.9em;
  letter-spacing:0;
}
.music-row.word-anchored .segment-lyric{
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
  font-weight:400;
  color:#222;
  line-height:1.52;
  letter-spacing:-.005em;
}

/* Le righe sensibili usano segmenti non comprimibili:
   se manca spazio, il segmento va a capo invece di sovrapporre gli accordi. */
.music-row.word-anchored.collision-safe .music-segment{
  flex:0 0 auto;
  min-width:max-content;
  max-width:100%;
}

/* Le sillabe della stessa parola restano unite, ma possono avere accordi distinti. */
.music-row.word-anchored.syllable-aware .music-segment-group{
  display:flex;
  flex:0 0 auto;
  align-items:flex-start;
  min-width:max-content;
}
.music-row.word-anchored.syllable-aware .music-segment-group .music-segment{
  padding:0;
}


/* Ancoraggi accordi espliciti: consentono accordi anche al centro o alla fine di una parola. */
.explicit-music-row {
  display: block;
  line-height: 1.35;
  padding-top: 1.35em;
  white-space: normal;
}
.explicit-word {
  position: relative;
  display: inline-block;
}
.explicit-word:has(.explicit-chord) {
  margin-right: .24em;
}
.explicit-lyric {
  font-weight: 400;
}
.explicit-chord {
  position: absolute;
  top: -1.25em;
  white-space: nowrap;
  font-weight: 700;
  line-height: 1;
}
.sheet.lyrics-only .explicit-music-row {
  display: none;
}


/* Evita sovrapposizioni tra più accordi ancorati alla stessa parola. */
.explicit-chord-left {
  margin-left: 0.18em;
}
.explicit-chord-center {
  margin-left: -0.08em;
}


/* Colore coerente per gli accordi con ancoraggio esplicito. */
.explicit-chord {
  color: var(--chord-color, #8f1735);
}


/* Accordi collocati subito dopo la fine di una parola: piccolo distacco per evitare sovrapposizioni. */
.explicit-chord-after {
  margin-left: 0.65em;
}

.explicit-chord-right {
  margin-left: 0.9em;
}


.tag-suggestions {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
}
.tag-suggestions h3 {
  margin-top: 0;
}
.tag-group h4 {
  margin-bottom: .4rem;
}

.theme-suggestions-box{padding:12px;margin-bottom:12px;border-radius:12px;background:#f3f3f3}.theme-suggestions-box h3{margin:0;font-size:1rem}







/* Suggerimenti tematici — moderno, minimale, blu pieno */
.category-suggestions{
  margin:0 0 1rem;
  padding:.85rem .85rem .35rem;
  border:0;
  border-radius:14px;
  background:var(--navy,#16233d);
  overflow:hidden;
}
.category-suggestions-title{
  margin:0;
  padding:0 0 .45rem;
  background:transparent;
  color:rgba(233,226,205,.8);
  font-size:1rem;
  line-height:1.3;
  font-weight:600;
}
.category-suggestions-description{
  display:none;
}
.category-suggestions-list{
  display:block;
  background:transparent;
}
.category-suggestion-song{
  width:100%;
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.72rem 0;
  border:0;
  border-bottom:1px solid rgba(233,226,205,.22);
  border-radius:0;
  background:transparent;
  color:rgba(233,226,205,.8);
  font:inherit;
  font-size:.96rem;
  font-weight:400;
  line-height:1.35;
  text-align:left;
  cursor:pointer;
  text-decoration:none;
  box-sizing:border-box;
}
.category-suggestion-song:last-child{
  border-bottom:0;
}
.category-suggestion-song:hover{
  background:rgba(198,162,77,.07);
  border-radius:12px;
}
.category-suggestion-song:active{
  background:rgba(255,255,255,.10);
  transform:none;
}
.category-suggestion-song.active{
  position:relative;
  background:rgba(198,162,77,.10);
  border-radius:12px;
  color:var(--paper);
}
.category-suggestion-song.active::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:var(--gold-bright);
  border-radius:0;
}
.category-suggestion-number{
  min-width:2rem;
  color:rgba(233,226,205,.58);
  font-size:.76rem;
  font-weight:500;
}



/* Barra superiore del canto — più leggibile, omogenea e compatta */
.song-nav{
  gap:.6rem;
  padding:.58rem 0;
}

.back-list{
  font-size:.9rem;
  font-weight:600;
}

.song-setlist,
.lyrics-only-toggle,
.feedback-trigger{
  height:2.15rem;
  padding:0 .58rem;
  font-size:.8rem;
  font-weight:500;
}

.song-favorite{
  width:2.15rem;
  height:2.15rem;
  font-size:1.08rem;
}

.transpose-label,
.text-size-label{
  font-size:.82rem;
  font-weight:500;
}

.transpose-value,
.text-size-value{
  font-size:.86rem;
  font-weight:500;
}

.transpose-btn,
.command-btn{
  width:2.05rem;
  height:2.05rem;
  font-size:1rem;
  font-weight:600;
}

.transpose-reset{
  width:2.05rem;
  height:2.05rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:4px;
  text-decoration:none;
  font-size:1rem;
  line-height:1;
}

@media (max-width:820px){
  .song-nav{
    gap:.5rem;
    padding:.5rem 0;
  }

  .song-nav>.command-group:first-child{
    grid-template-columns:auto minmax(0,1fr);
    gap:.55rem;
  }

  .primary-actions{
    justify-content:flex-end;
    gap:.3rem;
  }

  .back-list{
    font-size:.86rem;
    padding:.42rem 0;
  }

  .song-setlist,
  .lyrics-only-toggle,
  .feedback-trigger{
    height:2.1rem;
    padding:0 .48rem;
    font-size:.76rem;
  }

  .song-favorite{
    width:2.1rem;
    height:2.1rem;
    font-size:1.04rem;
  }

  /* Testo a sinistra, tonalità raccolta a destra. */
  .toolbar-controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:.75rem;
  }

  .text-controls{
    order:1;
    width:auto;
    grid-template-columns:2.05rem auto 2.05rem;
    gap:.34rem;
  }

  .transpose-controls{
    order:2;
    width:auto;
    margin-left:auto;
    grid-template-columns:2.05rem auto 2.05rem auto;
    gap:.34rem;
  }

  .transpose-value{
    min-width:4.35rem;
    padding:0 .12rem;
    text-align:center;
    font-size:.84rem;
  }

  .text-size-value{
    min-width:2.85rem;
    font-size:.84rem;
  }

  .transpose-btn,
  .command-btn,
  .transpose-reset{
    width:2.05rem;
    height:2.05rem;
  }

  .text-size-label,
  .transpose-label,
  .command-separator{
    display:none;
  }
}

@media (max-width:390px){
  .primary-actions{
    gap:.22rem;
  }

  .song-setlist,
  .lyrics-only-toggle,
  .feedback-trigger{
    padding:0 .4rem;
    font-size:.73rem;
  }

  .toolbar-controls{
    gap:.45rem;
  }

  .transpose-controls,
  .text-controls{
    gap:.25rem;
  }

  .transpose-value{
    min-width:4rem;
  }
}


/* Navigazione elenco — più leggibile e contemporanea */
.list-filters{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.25rem!important;
  margin:0 0 .8rem!important;
  padding:.25rem;
  border-radius:11px;
  background:rgba(233,226,205,.07);
}
.filter-btn{
  min-height:2.45rem;
  padding:.56rem .5rem!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent;
  color:rgba(233,226,205,.76);
  font-size:.82rem!important;
  font-weight:500;
  letter-spacing:0!important;
  text-transform:none!important;
  line-height:1.15;
}
.filter-btn:hover{
  background:rgba(233,226,205,.07);
}
.filter-btn.active{
  background:var(--gold-bright);
  color:var(--navy-deep);
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}

/* Barra del canto — gruppi compatti, meno “a bottoni separati” */
.song-nav{
  gap:.55rem;
  padding:.58rem 0;
}

.toolbar-controls{
  gap:.55rem;
}

.text-controls,
.transpose-controls{
  align-items:center;
  padding:.18rem;
  border:1px solid rgba(22,35,61,.08);
  border-radius:10px;
  background:rgba(22,35,61,.045);
}

.transpose-btn,
.command-btn,
.transpose-reset{
  width:1.95rem;
  height:1.95rem;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--navy,#16233d);
  box-shadow:none;
}

.transpose-btn:hover,
.command-btn:hover,
.transpose-reset:hover{
  border:0;
  background:rgba(22,35,61,.08);
}

.transpose-value,
.text-size-value{
  color:var(--navy,#16233d);
  font-size:.82rem;
  font-weight:500;
}

.font-control-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.02rem;
  padding:0;
  font-family:Manrope,sans-serif;
  letter-spacing:-.04em;
}
.font-control-a{
  font-size:.72rem;
  font-weight:600;
  line-height:1;
}
.font-control-sign{
  font-size:.88rem;
  font-weight:500;
  line-height:1;
}

.song-setlist,
.lyrics-only-toggle,
.feedback-trigger,
.song-favorite{
  border-color:rgba(22,35,61,.10);
  border-radius:9px;
  background:rgba(22,35,61,.035);
  color:rgba(22,35,61,.70);
  font-weight:500;
}
.song-setlist:hover,
.lyrics-only-toggle:hover,
.feedback-trigger:hover,
.song-favorite:hover{
  background:rgba(22,35,61,.075);
}

@media (max-width:820px){
  .song-nav{
    gap:.42rem;
  }

  .toolbar-controls{
    gap:.48rem;
  }

  .text-controls{
    grid-template-columns:1.95rem auto 1.95rem;
    gap:.12rem;
  }

  .transpose-controls{
    grid-template-columns:1.95rem auto 1.95rem auto;
    gap:.12rem;
  }

  .transpose-btn,
  .command-btn,
  .transpose-reset{
    width:1.95rem;
    height:1.95rem;
  }

  .transpose-value{
    min-width:3.95rem;
    padding:0 .08rem;
  }

  .text-size-value{
    min-width:2.7rem;
  }

  .filter-btn{
    font-size:.84rem!important;
  }
}

@media (max-width:390px){
  .list-filters{
    gap:.18rem!important;
    padding:.2rem;
  }

  .filter-btn{
    min-height:2.35rem;
    padding:.5rem .28rem!important;
    font-size:.78rem!important;
  }

  .toolbar-controls{
    gap:.35rem;
  }

  .text-controls,
  .transpose-controls{
    padding:.14rem;
  }

  .transpose-value{
    min-width:3.7rem;
    font-size:.78rem;
  }

  .text-size-value{
    min-width:2.5rem;
    font-size:.78rem;
  }
}


/* Barra del canto v3 — essenziale e stabile */
.song-nav{
  display:grid;
  gap:.55rem;
  padding:.5rem 0 .65rem;
}

.song-nav-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  min-width:0;
}

.back-list{
  min-height:2.15rem;
  padding:.38rem .15rem;
  border:0;
  background:transparent;
  color:var(--navy,#16233d);
  font-size:.9rem;
  font-weight:550;
}

.song-more{
  position:relative;
  flex:0 0 auto;
}

.song-more summary{
  width:2.15rem;
  height:2.15rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:rgba(22,35,61,.045);
  color:var(--navy,#16233d);
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  list-style:none;
}

.song-more summary::-webkit-details-marker{
  display:none;
}

.song-more[open] summary{
  background:rgba(22,35,61,.10);
}

.song-more-menu{
  position:absolute;
  top:calc(100% + .35rem);
  right:0;
  z-index:30;
  min-width:10.5rem;
  padding:.3rem;
  border:1px solid rgba(22,35,61,.10);
  border-radius:11px;
  background:#fff;
  box-shadow:0 10px 28px rgba(22,35,61,.16);
}

.song-more-menu button{
  width:100%;
  min-height:2.35rem;
  display:block;
  padding:.52rem .65rem;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--navy,#16233d);
  font-size:.84rem;
  font-weight:450;
  text-align:left;
}

.song-more-menu button:active,
.song-more-menu button:hover{
  background:rgba(22,35,61,.06);
}

/* I due gruppi restano compatti: la tonalità non può più allargarsi. */
.toolbar-controls{
  width:100%;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:.55rem;
  min-width:0;
}

.text-controls,
.transpose-controls{
  box-sizing:border-box;
  flex:0 0 auto!important;
  width:max-content!important;
  min-width:0!important;
  margin:0!important;
  padding:.16rem;
  border:1px solid rgba(22,35,61,.08);
  border-radius:10px;
  background:rgba(22,35,61,.04);
}

.text-controls{
  display:grid!important;
  grid-template-columns:1.95rem 2.7rem 1.95rem!important;
  gap:.12rem!important;
}

.transpose-controls{
  display:grid!important;
  grid-template-columns:1.95rem 4.1rem 1.95rem 1.95rem!important;
  gap:.12rem!important;
  justify-content:start!important;
}

.transpose-value{
  width:4.1rem!important;
  min-width:4.1rem!important;
  max-width:4.1rem!important;
  overflow:hidden;
  white-space:nowrap;
  text-align:center;
}

.text-size-value{
  width:2.7rem!important;
  min-width:2.7rem!important;
  max-width:2.7rem!important;
  text-align:center;
}

.transpose-label,
.text-size-label,
.command-separator{
  display:none!important;
}

/* Titolo con preferito e scaletta nel punto più naturale. */
.song-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:.55rem;
}

.song-heading-text{
  min-width:0;
}

.song-title-actions{
  display:flex;
  align-items:center;
  gap:.22rem;
  padding-top:.02rem;
}

.song-title-actions .song-favorite,
.song-title-actions .song-setlist{
  width:2.2rem;
  height:2.2rem;
  min-width:2.2rem;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:rgba(22,35,61,.62);
  font-size:1.08rem;
  font-weight:500;
  line-height:1;
  box-shadow:none;
}

.song-title-actions .song-setlist{
  font-size:1.25rem;
}

.song-title-actions .song-favorite:hover,
.song-title-actions .song-setlist:hover,
.song-title-actions .song-favorite:active,
.song-title-actions .song-setlist:active{
  background:rgba(22,35,61,.06);
}

.song-title-actions .song-favorite.active,
.song-title-actions .song-setlist.active{
  color:var(--navy,#16233d);
  background:rgba(22,35,61,.08);
}

@media (max-width:390px){
  .toolbar-controls{
    gap:.28rem;
  }

  .text-controls{
    grid-template-columns:1.82rem 2.45rem 1.82rem!important;
  }

  .transpose-controls{
    grid-template-columns:1.82rem 3.72rem 1.82rem 1.82rem!important;
  }

  .transpose-value{
    width:3.72rem!important;
    min-width:3.72rem!important;
    max-width:3.72rem!important;
    font-size:.76rem;
  }

  .text-size-value{
    width:2.45rem!important;
    min-width:2.45rem!important;
    max-width:2.45rem!important;
    font-size:.76rem;
  }

  .transpose-btn,
  .command-btn,
  .transpose-reset{
    width:1.82rem!important;
    height:1.82rem!important;
  }

  .song-title-actions .song-favorite,
  .song-title-actions .song-setlist{
    width:2.05rem;
    height:2.05rem;
    min-width:2.05rem;
  }
}


/* Segnalazione in fondo al canto */
.song-feedback-footer{
  display:flex;
  justify-content:center;
  padding:1.2rem 0 .45rem;
}

.song-feedback-footer .feedback-trigger{
  min-height:auto;
  padding:.35rem .2rem;
  border:0;
  border-radius:0;
  background:transparent;
  color:rgba(22,35,61,.62);
  font-size:.82rem;
  font-weight:450;
  line-height:1.25;
  text-decoration:none;
}

.song-feedback-footer .feedback-trigger:hover,
.song-feedback-footer .feedback-trigger:active{
  background:transparent;
  color:var(--navy,#16233d);
  text-decoration:underline;
  text-underline-offset:.2em;
}


/* Icona scaletta distinta dai controlli + della barra */
.song-title-actions .song-setlist{
  font-size:0;
}

.song-title-actions .song-setlist .setlist-icon{
  width:1.15rem;
  height:1.15rem;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.song-title-actions .song-setlist.active .setlist-icon{
  stroke-width:2;
}


/* Barra canto v4 — Setlist, Solo testo diretto e tonalità equilibrata */
.song-more,
.song-more-menu{
  display:none!important;
}

.song-nav-main{
  min-height:2.2rem;
}

.song-view-toggle{
  flex:0 0 auto;
  min-height:2.1rem;
  display:inline-flex;
  align-items:center;
  gap:.38rem;
  padding:.34rem .55rem;
  border:0;
  border-radius:9px;
  background:rgba(22,35,61,.045);
  color:rgba(22,35,61,.72);
  font-size:.8rem;
  font-weight:500;
  line-height:1;
}

.song-view-toggle:hover,
.song-view-toggle:active,
.song-view-toggle.active{
  background:rgba(22,35,61,.09);
  color:var(--navy,#16233d);
}

.song-view-icon{
  width:1rem;
  height:1rem;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.lectern-controls-handle{
  display:none;
}

body.lectern-mode{
  background:var(--paper);
}

body.lectern-mode > header,
body.lectern-mode > footer,
body.lectern-mode .board,
body.lectern-mode .song-title-actions,
body.lectern-mode .song-sub,
body.lectern-mode .song-capo,
body.lectern-mode .setlist-nav,
body.lectern-mode .song-feedback-footer{
  display:none!important;
}

body.lectern-mode .app{
  display:block;
  width:100%;
  max-width:none;
  min-height:100dvh;
  margin:0;
}

body.lectern-mode main{
  display:block;
  width:100%;
  max-width:none;
  min-height:100dvh;
  padding:
    calc(.65rem + env(safe-area-inset-top))
    clamp(1rem,4vw,3rem)
    calc(2rem + env(safe-area-inset-bottom));
}

body.lectern-mode .song-nav{
  position:fixed!important;
  z-index:80;
  top:calc(.55rem + env(safe-area-inset-top));
  left:50%;
  width:min(calc(100% - 1.2rem),980px)!important;
  margin:0!important;
  padding:.55rem!important;
  border:1px solid rgba(22,35,61,.12);
  border-radius:14px;
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 34px rgba(22,35,61,.16);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-.45rem);
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}

body.lectern-mode.lectern-controls-visible .song-nav{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}

body.lectern-mode .lectern-controls-handle{
  position:fixed;
  z-index:75;
  top:calc(.35rem + env(safe-area-inset-top));
  right:calc(.65rem + env(safe-area-inset-right));
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:2.8rem;
  min-height:2rem;
  padding:0 .65rem;
  border:1px solid rgba(22,35,61,.1);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:rgba(22,35,61,.68);
  box-shadow:0 4px 16px rgba(22,35,61,.1);
  font-size:1rem;
  letter-spacing:.16em;
}

body.lectern-mode.lectern-controls-visible .lectern-controls-handle{
  opacity:0;
  pointer-events:none;
}

body.lectern-mode .song-head{
  margin-top:clamp(.8rem,1.8vh,1.2rem);
}

body.lectern-mode .song-title{
  font-size:clamp(1.55rem,3.4vw,2.35rem);
}

body.lectern-mode .sheet{
  overflow-x:visible;
}

@media (max-width:600px){
  body.lectern-mode .song-nav{
    width:calc(100% - .7rem)!important;
    padding:.42rem!important;
  }

  body.lectern-mode main{
    padding-left:.8rem;
    padding-right:.8rem;
  }

}

.toolbar-controls{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:.55rem;
  width:100%;
  min-width:0;
}

/* Comandi senza capsule: più leggeri, ma sempre visibili. */
.song-nav .song-view-toggle,
.song-nav .text-controls,
.song-nav .transpose-controls{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.song-nav .song-view-toggle{
  padding-inline:.28rem;
}

.song-nav .song-view-toggle:hover,
.song-nav .song-view-toggle:active{
  background:rgba(22,35,61,.045)!important;
}

.song-nav .song-view-toggle.active{
  background:transparent!important;
  color:var(--navy);
  box-shadow:none!important;
}

.song-nav .toolbar-controls{
  justify-content:space-between!important;
  justify-self:stretch;
  width:100%!important;
  min-width:0;
  gap:.8rem!important;
  padding-top:0;
  border-top:0;
}

.song-nav .transpose-value{
  color:var(--navy)!important;
}

.text-controls,
.transpose-controls{
  flex:0 0 auto!important;
  box-sizing:border-box;
  width:max-content!important;
  margin:0!important;
  padding:.16rem;
  border:1px solid rgba(22,35,61,.08);
  border-radius:10px;
  background:rgba(22,35,61,.04);
}

.text-controls{
  display:grid!important;
  grid-template-columns:1.95rem 2.7rem 1.95rem!important;
  gap:.12rem!important;
}

.transpose-controls{
  display:grid!important;
  grid-template-columns:1.95rem 4.35rem 1.95rem!important;
  gap:.12rem!important;
}

.transpose-value{
  width:4.35rem!important;
  min-width:4.35rem!important;
  max-width:4.35rem!important;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  white-space:nowrap;
  color:var(--wine-bright,#8a2035);
  font-size:.82rem;
  font-weight:600;
  text-align:center;
}

.transpose-value:not(.is-original){
  color:var(--navy,#16233d);
  font-weight:550;
}

.transpose-btn,
.command-btn{
  width:1.95rem!important;
  height:1.95rem!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  box-shadow:none!important;
}

.transpose-btn:hover,
.transpose-btn:active,
.command-btn:hover,
.command-btn:active{
  background:rgba(22,35,61,.08)!important;
}

@media (max-width:390px){
  .song-view-toggle{
    padding:.32rem .46rem;
    font-size:.76rem;
  }

  .toolbar-controls{
    gap:.3rem;
  }

  .text-controls{
    grid-template-columns:1.82rem 2.42rem 1.82rem!important;
  }

  .transpose-controls{
    grid-template-columns:1.82rem 3.9rem 1.82rem!important;
  }

  .text-size-value{
    width:2.42rem!important;
    min-width:2.42rem!important;
    max-width:2.42rem!important;
    font-size:.75rem;
  }

  .transpose-value{
    width:3.9rem!important;
    min-width:3.9rem!important;
    max-width:3.9rem!important;
    font-size:.75rem;
  }

  .transpose-btn,
  .command-btn{
    width:1.82rem!important;
    height:1.82rem!important;
  }
}


/* Elenco canti — righe leggere per collegare titolo e azioni */
.tile-list{
  gap:0;
}

.tile-row{
  position:relative;
  border-bottom:1px solid rgba(233,226,205,.11);
}

.tile-row:last-child{
  border-bottom:0;
}

.tile-actions{
  align-self:stretch;
  padding:0 .12rem;
}

.setlist-add .setlist-icon{
  width:1.08rem;
  height:1.08rem;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.85;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.setlist-add.active .setlist-icon{
  stroke-width:2;
}

/* Le due righe della barra seguono la stessa logica:
   sinistra = canto, destra = visualizzazione. */
.toolbar-controls .transpose-controls{
  order:1;
}

.toolbar-controls .text-controls{
  order:2;
}

@media (min-width:821px) and (max-width:1180px){
  .tile-row{
    border-bottom-color:rgba(233,226,205,.14);
  }

  .tile{
    padding-top:.72rem;
    padding-bottom:.72rem;
  }

  .tile-actions{
    padding-left:.2rem;
    padding-right:.2rem;
  }
}


/* Testi introduttivi — dimensioni coordinate con la nuova interfaccia */
header p.tag{
  font-size:clamp(.96rem,1.5vw,1.05rem);
  line-height:1.4;
  color:rgba(233,226,205,.68);
}

.board-label{
  margin:0 0 .85rem .1rem;
  font-size:clamp(.82rem,1.2vw,.9rem);
  line-height:1.25;
  letter-spacing:.09em;
  font-weight:600;
}

@media (max-width:600px){
  header p.tag{
    font-size:.96rem;
  }

  .board-label{
    font-size:.82rem;
  }
}


/* =========================================================
   iPad verticale — vista canto a tutto schermo
   ========================================================= */
@media (orientation:portrait) and (min-width:700px) and (max-width:1100px){
  .app{
    max-width:none;
    grid-template-columns:1fr;
    min-height:calc(100dvh - 170px);
  }

  /* Nell’elenco il pannello usa tutta la larghezza. */
  body:not(.song-open) main{
    display:none;
  }

  body:not(.song-open) .board{
    width:100%;
    padding-left:clamp(1.5rem,6vw,4.5rem);
    padding-right:clamp(1.5rem,6vw,4.5rem);
  }

  /* Quando si apre un canto, spariscono intestazione ed elenco:
     lo spartito usa davvero tutto lo schermo. */
  body.song-open > header,
  body.song-open > footer,
  body.song-open .board{
    display:none;
  }

  body.song-open .app{
    display:block;
    min-height:100dvh;
  }

  body.song-open main{
    display:block;
    width:100%;
    max-width:none;
    min-height:100dvh;
    padding:
      calc(.35rem + env(safe-area-inset-top))
      clamp(1.35rem,4vw,2.5rem)
      calc(2.2rem + env(safe-area-inset-bottom));
  }

  /* Barra sempre raggiungibile, ma più compatta. */
  body.song-open .song-nav{
    top:env(safe-area-inset-top);
    margin:0 0 .8rem;
    padding:.38rem 0 .5rem;
  }

  /* Titolo più presente, senza sprecare altezza. */
  body.song-open .song-head{
    gap:.75rem;
    padding-bottom:.8rem;
    margin-bottom:1rem;
  }

  body.song-open .song-title{
    font-size:clamp(1.75rem,4.2vw,2.2rem);
    line-height:1.1;
  }

  body.song-open .song-sub{
    margin-top:.22rem;
    font-size:.92rem;
  }

  /* Più testo visibile: carattere maggiore ma interlinea più raccolta. */
  body.song-open .sheet{
    overflow-x:visible;
    padding-bottom:.2rem;
  }

  body.song-open .block{
    margin-bottom:.78rem;
  }

  body.song-open .headline{
    margin:.62rem 0 .14rem;
  }

  body.song-open .chordline,
  body.song-open .segment-chord{
    line-height:1.28;
  }

  body.song-open .lyricline,
  body.song-open .segment-lyric{
    line-height:1.52;
  }

  body.song-open .music-row{
    margin-bottom:.03rem;
  }

  body.song-open .spacer{
    height:.36rem;
  }

  body.song-open .song-feedback-footer{
    padding-top:1rem;
  }
}


/* =========================================================
   iPad verticale — due colonne adattive per i canti lunghi
   ========================================================= */
.sheet{
  font-size:var(--song-font-size);
}

/* Le righe di soli accordi seguono A− / A+ e hanno la stessa
   dimensione degli accordi collocati sopra il testo. */
.chordline.standalone-chord{
  font-size:.9em;
  line-height:1.28;
}

/* Anche le etichette Intro, Strofa, Ritornello crescono insieme al canto,
   mantenendo però il loro ruolo secondario. */
.headline{
  font-size:.78em;
}

.song-section{
  width:100%;
}

/* Il ritornello emerge durante il canto senza appesantire gli accordi. */
.refrain-section .lyricline,
.refrain-section .segment-lyric,
.refrain-section .explicit-lyric,
.refrain-section .lyrics-only-line,
.refrain-section .lyrics-only-plain{
  font-weight:600;
}

/* Le righe ad ancoraggio automatico hanno una regola più specifica. */
.refrain-section .music-row.word-anchored .segment-lyric{
  font-weight:600;
}

.repeat-section-collapsible{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
}

.repeat-section-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  width:auto;
  margin:.82rem 0 .22rem;
  padding:.22rem .5rem .22rem .72rem;
  border:1px solid rgba(198,162,77,.16);
  border-radius:4px;
  background:rgba(198,162,77,.075);
  color:var(--navy);
  box-shadow:none;
  font-family:Manrope,sans-serif;
  font-size:.78em;
  font-weight:650;
  letter-spacing:.1em;
  text-align:left;
  text-transform:uppercase;
  cursor:pointer;
}

.repeat-section-toggle::before{
  content:"";
  position:absolute;
  top:.2em;
  bottom:.2em;
  left:0;
  width:3px;
  border-radius:0 999px 999px 0;
  background:var(--gold-bright);
}

.repeat-section-title{
  font-weight:700;
}

.repeat-section-action{
  padding:0;
  border:0;
  background:transparent;
  color:var(--wine);
  font-size:.9em;
  font-weight:600;
  letter-spacing:.01em;
  text-transform:none;
}

.repeat-section-toggle:hover,
.repeat-section-toggle:active{
  color:var(--wine);
  background:rgba(198,162,77,.12);
  box-shadow:none;
}

.repeat-section-content[hidden]{
  display:none;
}

@media (orientation:portrait) and (min-width:760px) and (max-width:1100px){
  body.song-open .sheet.tablet-two-columns{
    column-count:2;
    column-gap:clamp(1.4rem,4vw,2.35rem);
    column-rule:1px solid rgba(22,35,61,.12);
    column-fill:balance;
  }

  body.song-open .sheet.tablet-two-columns .song-section{
    break-inside:avoid-column;
    -webkit-column-break-inside:avoid;
    page-break-inside:avoid;
    margin:0 0 .7rem;
  }

  body.song-open .sheet.tablet-two-columns .song-section:first-child .headline{
    margin-top:0;
  }

  body.song-open .sheet.tablet-two-columns .music-row.word-anchored{
    row-gap:.2rem;
    margin-bottom:.22rem;
  }

  body.song-open .sheet.tablet-two-columns .lyricline,
  body.song-open .sheet.tablet-two-columns .segment-lyric{
    line-height:1.46;
  }

  body.song-open .sheet.tablet-two-columns .chordline,
  body.song-open .sheet.tablet-two-columns .segment-chord{
    line-height:1.3;
  }
}

/* FIX allineamento stabile barra canto da tablet a desktop.
   Evita lo “scatto” oltre 1280 px mantenendo:
   - stellina, Setlist e Solo testo a destra;
   - Tonalità a sinistra;
   - Dimensione testo a destra. */
@media (min-width:821px){
  .song-nav{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    align-items:stretch !important;
    width:100% !important;
  }

  .song-nav > .command-group:first-child{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;
    width:100% !important;
  }

  .primary-actions{
    justify-self:end !important;
  }

  .toolbar-controls{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    width:100% !important;
    margin:0 !important;
  }

  .toolbar-controls .transpose-controls{
    justify-self:start !important;
    width:max-content !important;
    margin:0 !important;
  }

  .toolbar-controls .text-controls{
    justify-self:end !important;
    width:max-content !important;
    margin:0 !important;
  }

  .toolbar-controls .command-separator{
    display:none !important;
  }
}
/* TEST: indicatore grafico al posto del numero nell’elenco */
.tile .num{
  font-size:0;
}

.tile .num::after{
  content:"•";
  font-size:.9rem;
  line-height:1;
  color:rgba(224,188,106,.78);
}

.tile.active .num::after{
  color:var(--navy-deep);
}


/* Nessun numero nei risultati delle categorie */
.category-suggestion-song{
  gap:0;
}
.category-suggestion-number{
  display:none;
}


/* =========================================================
   Invito installazione PWA — solo telefono e tablet
   ========================================================= */
.install-banner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.72rem .9rem;
  align-items:center;
  margin:0 0 1rem;
  padding:1rem 2.45rem 1rem 1rem;
  border:1px solid rgba(224,188,106,.42);
  border-radius:8px;
  background:linear-gradient(145deg,rgba(224,188,106,.16),rgba(233,226,205,.06));
  color:var(--paper);
  box-shadow:0 8px 22px rgba(0,0,0,.13);
}
.install-banner[hidden]{display:none!important}
.install-banner-copy{min-width:0}
.install-banner-copy strong{
  display:block;
  margin:0 0 .22rem;
  color:var(--gold-bright);
  font-size:.98rem;
  line-height:1.25;
}
.install-banner-copy span{
  display:block;
  color:rgba(233,226,205,.72);
  font-size:.78rem;
  line-height:1.42;
}
.install-banner-action{
  border:1px solid var(--gold-bright);
  border-radius:5px;
  background:var(--gold-bright);
  color:var(--navy-deep);
  padding:.55rem .78rem;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
.install-banner-action:active{transform:translateY(1px)}
.install-banner-action:focus-visible,
.install-banner-close:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.install-banner-close{
  position:absolute;
  top:.28rem;
  right:.35rem;
  width:1.85rem;
  height:1.85rem;
  border:0;
  background:transparent;
  color:rgba(233,226,205,.55);
  font-size:1.35rem;
  line-height:1;
  cursor:pointer;
}
.install-banner-ios{
  grid-column:1/-1;
  margin-top:.12rem;
  padding-top:.7rem;
  border-top:1px solid rgba(224,188,106,.22);
  color:rgba(233,226,205,.78);
  font-size:.76rem;
  line-height:1.45;
}
.install-banner-ios[hidden]{display:none!important}
@media (max-width:430px){
  .install-banner{grid-template-columns:1fr;padding:.9rem 2.3rem .9rem .9rem}
  .install-banner-action{justify-self:start}
}
@media (min-width:1101px), (pointer:fine) and (hover:hover){
  .install-banner{display:none!important}
}


/* Test menu sezioni compatto */
.section-switcher{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:2.8rem;
  margin:0 0 .8rem;
  padding:.2rem .25rem .2rem .85rem;
  border:1px solid rgba(198,162,77,.25);
  border-radius:11px;
  background:rgba(233,226,205,.07);
}
.section-current{
  display:flex;
  align-items:center;
  gap:.42rem;
  color:var(--gold-bright);
  font-family:Manrope,sans-serif;
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.01em;
}
.section-menu-toggle{
  display:grid;
  place-items:center;
  width:2.35rem;
  height:2.35rem;
  border:0;
  border-radius:8px;
  background:transparent;
  color:rgba(233,226,205,.9);
  font-size:1.25rem;
  line-height:1;
  cursor:pointer;
}
.section-menu-toggle:hover,
.section-menu-toggle[aria-expanded="true"]{background:rgba(233,226,205,.1)}
.section-menu{
  position:absolute;
  z-index:80;
  top:calc(100% + .35rem);
  right:0;
  width:min(17rem,calc(100vw - 2rem));
  padding:.4rem;
  border:1px solid rgba(198,162,77,.28);
  border-radius:12px;
  background:#1b2945;
  box-shadow:0 14px 30px rgba(4,10,23,.32);
}
.section-menu[hidden]{display:none!important}
.section-menu-item{
  display:block;
  width:100%;
  min-height:2.55rem;
  padding:.62rem .72rem;
  border:0;
  border-radius:8px;
  background:transparent;
  color:rgba(243,239,228,.9);
  font:600 .84rem/1.2 Manrope,sans-serif;
  text-align:left;
  cursor:pointer;
}
.section-menu-item:hover,
.section-menu-item:focus-visible{background:rgba(233,226,205,.09);outline:none}
.section-menu-item.active{
  background:var(--gold-bright);
  color:var(--navy-deep);
}
.section-menu-divider{
  height:1px;
  margin:.35rem .45rem;
  background:rgba(233,226,205,.13);
}
.section-menu-secondary{
  color:rgba(243,239,228,.72);
  font-weight:500;
}

/* Menu sezioni test 3 — etichette principali e icona Setlist coerente */
.section-menu-item{display:flex;align-items:center;gap:.42rem}
.section-menu-setlist-icon{width:1rem;height:1rem;flex:0 0 auto}

.section-menu-future{
  opacity:.48;
  cursor:default;
}
.section-menu-future:hover,
.section-menu-future:focus-visible{
  background:transparent;
}

/* Menu sezioni test 8 — link PayPal coerente con il menu */
.section-menu-coffee{
  text-decoration:none;
}
@media (hover:hover) and (pointer:fine){
  .section-menu-coffee:hover{
    text-decoration:underline;
    text-underline-offset:.16em;
  }
}

/* Menu sezioni test 9 — icone anche nel titolo della sezione */
.section-current{display:inline-flex;align-items:center;gap:.42rem}
.section-current .section-menu-setlist-icon{
  display:block;
  width:1rem;
  height:1rem;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.section-menu-item .section-menu-setlist-icon{
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Menu sezioni test 11 — lieve aumento leggibilità senza cambiare peso */
.section-current{
  font-size:1rem;
}
.section-menu-item{
  font-size:.9rem;
}

/* Vista categorie v15 — rientro del testo rispetto alla linea di selezione */
.category-suggestion-song{
  padding-left:.72rem;
  padding-right:.45rem;
}


/* Bozza login Google — solo simulazione grafica */
.section-menu-greeting{
  padding:.7rem .72rem .5rem;
  color:var(--gold-bright);
  font:600 1rem/1.2 Manrope,sans-serif;
  letter-spacing:.01em;
}
.section-menu-greeting[hidden],
.section-menu-item[hidden]{display:none!important}

/* Libreria setlist integrata */
.setlist-library[hidden]{display:none!important}
.setlist-library{margin:0 0 1rem;padding-top:.15rem;color:var(--paper)}
.setlist-library-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem;margin:0 0 .65rem;padding:0 .1rem}
.setlist-library-heading h2{margin:0;font-family:Manrope,sans-serif;font-size:.92rem;font-weight:650;letter-spacing:.01em;color:rgba(233,226,205,.92)}
.setlist-library-heading p{margin:.18rem 0 0;font-size:.68rem;line-height:1.35;color:rgba(233,226,205,.42)}
.setlist-library-status{min-height:0;margin:.15rem .1rem .55rem;color:rgba(233,226,205,.5);font-size:.7rem}
.setlist-library-status:empty{display:none}
.setlist-library-grid{display:grid;gap:.48rem}
.setlist-song-list{grid-column:1/-1;margin:-.12rem 0 .5rem;padding-top:.38rem;border-top:1px solid rgba(198,162,77,.18)}
.setlist-library-card{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.7rem;min-width:0;padding:.72rem .72rem .72rem .78rem;border:1px solid rgba(198,162,77,.18);border-radius:12px;background:rgba(255,255,255,.035);cursor:pointer;transition:background .15s ease,border-color .15s ease}
.setlist-library-card:hover,.setlist-library-card:focus-visible{background:rgba(198,162,77,.075);border-color:rgba(198,162,77,.34);outline:none}
.setlist-library-info{display:grid;gap:.13rem;min-width:0}
.setlist-library-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Manrope,sans-serif;font-size:.83rem;font-weight:600;color:rgba(233,226,205,.92)}
.setlist-library-info span{font-family:Manrope,sans-serif;font-size:.65rem;color:rgba(233,226,205,.42)}
.setlist-card-menu{position:relative;flex:0 0 auto}
.setlist-card-menu summary{display:grid;place-items:center;width:2rem;height:2rem;border-radius:9px;color:rgba(233,226,205,.6);font-family:Manrope,sans-serif;font-size:1.18rem;line-height:1;cursor:pointer;list-style:none;user-select:none}
.setlist-card-menu summary::-webkit-details-marker{display:none}
.setlist-card-menu summary:hover,.setlist-card-menu[open] summary{background:rgba(198,162,77,.11);color:var(--gold-bright)}
.setlist-card-actions{position:absolute;right:0;top:calc(100% + .3rem);z-index:30;display:grid;min-width:8.7rem;padding:.32rem;border:1px solid rgba(198,162,77,.22);border-radius:11px;background:#132038;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.setlist-card-actions button{border:0;border-radius:7px;background:transparent;color:rgba(233,226,205,.78);font-family:Manrope,sans-serif;font-size:.72rem;text-align:left;padding:.48rem .55rem;cursor:pointer}
.setlist-card-actions button:hover{background:rgba(198,162,77,.1);color:var(--gold-bright)}
.setlist-card-actions button.danger{color:#e5a5ad}
@media(max-width:620px){
  .setlist-library-heading{align-items:stretch;flex-direction:column}
}

.setlist-library-heading{
  display:block;
  margin:0 0 .62rem;
  padding:0 .08rem;
}
.setlist-library-heading h2{
  margin:0;
  font-family:Manrope,sans-serif;
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:0;
  color:rgba(233,226,205,.96);
}
/* Setlist unificate */
.setlist-library{padding-top:0}
.setlist-library-heading{display:flex;justify-content:flex-start;margin:.1rem 0 .6rem;padding:0}
.setlist-back-button{display:none}
.setlist-library-heading h2.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.setlist-new-button{
  width:100%;
  border:1px dashed rgba(198,162,77,.42);
  border-radius:12px;
  background:rgba(198,162,77,.055);
  color:var(--gold-bright);
  font-family:Manrope,sans-serif;
  font-size:.78rem;
  font-weight:600;
  padding:.68rem .8rem;
  cursor:pointer;
}
.setlist-new-button:hover{background:rgba(198,162,77,.11)}
.setlist-library-grid{gap:.55rem}
.setlist-library-card{border-radius:14px;padding:.82rem}
.setlist-library-status{display:none!important}


/* Setlist unificate — nuovo comando in alto e card coerenti */
.setlist-library-heading{display:block;margin:0 0 .58rem;padding:0}
.setlist-new-button{position:relative;z-index:40;display:block;width:100%;min-height:2.65rem;border:1px solid rgba(198,162,77,.34);border-radius:12px;background:rgba(198,162,77,.09);color:var(--gold-bright);font-family:Manrope,sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;pointer-events:auto;touch-action:manipulation}
.setlist-new-button[hidden]{display:none!important}
.setlist-new-button:hover{background:rgba(198,162,77,.15)}
.setlist-new-button:disabled{opacity:.65;cursor:wait}
/* Titoli più leggibili e setlist attiva evidenziata */
.setlist-library-info strong{
  font-size:1rem;
  line-height:1.25;
  font-weight:600;
}
.setlist-library-info span{
  font-size:.72rem;
}
/* Un solo elenco, setlist attiva evidenziata */
.setlist-library-card.active{
  border-color:rgba(198,162,77,.72);
  background:linear-gradient(145deg,rgba(198,162,77,.18),rgba(198,162,77,.075));
  box-shadow:0 7px 18px rgba(0,0,0,.11);
}
.setlist-library-card.active .setlist-library-info strong{color:var(--gold-bright)}


/* Azioni setlist a icone — v5 */
.setlist-card-icon-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.22rem;
  flex:0 0 auto;
}
.setlist-card-icon-button{
  display:grid;
  place-items:center;
  width:2rem;
  height:2rem;
  padding:0;
  border:0;
  border-radius:9px;
  background:transparent;
  color:rgba(233,226,205,.62);
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.setlist-card-icon-button svg{
  width:1.05rem;
  height:1.05rem;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.setlist-card-icon-button:hover,
.setlist-card-icon-button:focus-visible{
  background:rgba(198,162,77,.12);
  color:var(--gold-bright);
  outline:none;
}
.setlist-card-icon-button.danger:hover,
.setlist-card-icon-button.danger:focus-visible{
  background:rgba(181,70,83,.13);
  color:#f0aab3;
}
@media(max-width:620px){
  .setlist-library-card{gap:.42rem;padding-right:.5rem}
  .setlist-card-icon-actions{gap:.08rem}
  .setlist-card-icon-button{width:1.9rem;height:1.9rem}
}

@media(max-width:1100px){
  .setlist-library-heading{display:grid;grid-template-columns:1fr;gap:.48rem}
  .setlist-back-button{display:inline-flex;align-items:center;justify-content:flex-start;min-height:2.35rem;padding:.45rem .65rem;border:0;border-radius:10px;background:transparent;color:var(--gold-bright);font-family:Manrope,sans-serif;font-size:.78rem;font-weight:650;cursor:pointer}
  .setlist-back-button:hover,.setlist-back-button:focus-visible{background:rgba(198,162,77,.1);outline:none}
}

/* Setlist attiva — evidenziazione senza barra verticale */
.setlist-library-card.active{
  position:relative;
  box-shadow:0 7px 18px rgba(0,0,0,.11);
  overflow:hidden;
}

/* Tipografia coerente per tutte le etichette della barra del canto. */
.song-nav .back-list,
.song-nav .song-view-toggle,
.song-nav .transpose-value,
.song-nav .text-size-value{
  font-family:Manrope,sans-serif!important;
  font-size:.8rem!important;
  font-weight:600!important;
  line-height:1!important;
  letter-spacing:0!important;
}

.song-nav .transpose-value,
.song-nav .text-size-value{
  color:var(--navy)!important;
}

/* Sul fondo bianco la barra resta leggibile senza sembrare un riquadro. */
body:not(.lectern-mode) .song-nav{
  background:rgba(255,255,255,.97);
  border-bottom:0;
}

.song-nav .icon-only{
  width:2.1rem;
  min-width:2.1rem;
  height:2.1rem;
  min-height:2.1rem;
  justify-content:center;
  padding:0!important;
}

.song-nav .icon-only .song-view-icon{
  width:1.08rem;
  height:1.08rem;
}

/* App installata su iPhone: i comandi scorrono via con il canto.
   La sola barra di stato conserva uno sfondo pieno e leggibile. */
html.iphone-standalone-app body::before{
  content:"";
  position:fixed;
  z-index:100;
  top:0;
  right:0;
  left:0;
  height:env(safe-area-inset-top);
  background:var(--navy);
  pointer-events:none;
}

/* Sugli smartphone la barra non sottrae spazio al canto:
   resta visibile all'inizio e scorre via insieme alla pagina. */
@media (max-width:600px) and (pointer:coarse){
  body.song-open .song-nav{
    position:static;
    top:auto;
  }
}