/* =========================================================
   Nuova grafica 2026 (beta refactor)
   Strato sopra style.css: cambia l'aspetto, non la struttura.
   Tutte le regole sono sotto html.rd: togliendo la classe
   dall'elemento <html> si torna alla grafica precedente.
   ========================================================= */
/* Titoli: Fraunces, servito dal sito come Manrope (funziona anche offline).
   Licenza SIL Open Font License. */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:500 600;
  font-display:swap;
  src:url('/fonts/fraunces-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;
}

html.rd{
  --rd-bg:#f7f5f0;
  --rd-surface:#ffffff;
  --rd-surface-2:#f1eee6;
  --rd-ink:#1b1d24;
  --rd-ink-2:#4b4f5c;
  --rd-ink-3:#858996;
  --rd-line:#e5e1d6;
  --rd-line-2:#d3cdbf;
  --rd-gold:#a8822f;
  --rd-gold-soft:#f5ebd2;
  --rd-gold-line:#e3cf9c;
  --rd-chord:#9a1b38;
  --rd-shadow:0 1px 2px rgba(22,35,61,.05),0 8px 24px -10px rgba(22,35,61,.14);
  --rd-shadow-lg:0 2px 4px rgba(22,35,61,.06),0 22px 50px -14px rgba(22,35,61,.3);
  --rd-accent:#16233d;
  --rd-accent-ink:#ffffff;
  --rd-card:#fbf6e9;
  --rd-card-ink:#1b1d24;
  --rd-card-ink-2:#6b6f7c;
  --rd-card-line:#ece3cb;
  --rd-card-hover:rgba(168,130,47,.08);
  --rd-card-accent:#a8822f;
  --rd-card-border:#e3cf9c;
  --rd-serif:'Fraunces','New York',ui-serif,Georgia,serif;
  color-scheme:light;
}

/* Tema scuro: automatico con il dispositivo, oppure scelto dal menu. */
@media (prefers-color-scheme:dark){
  html.rd:not([data-theme="light"]){
  --rd-bg:#0e131d;
    --rd-surface:#151b28;
    --rd-surface-2:#1d2535;
    --rd-ink:#eef0f5;
    --rd-ink-2:#b6bbc9;
    --rd-ink-3:#8089a0;
    --rd-line:#252d3f;
    --rd-line-2:#3a445c;
    --rd-gold:#e0bc6a;
    --rd-gold-soft:rgba(224,188,106,.12);
    --rd-gold-line:rgba(224,188,106,.35);
    --rd-chord:#f2a765;
    --rd-accent:#e0bc6a;
    --rd-accent-ink:#141a26;
    --rd-card:#1a2540;
  --rd-card-ink:#ffffff;
  --rd-card-ink-2:rgba(255,255,255,.62);
  --rd-card-line:rgba(255,255,255,.1);
  --rd-card-hover:rgba(255,255,255,.06);
  --rd-card-accent:#e0bc6a;
  --rd-card-border:transparent;
    --rd-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -10px rgba(0,0,0,.5);
    --rd-shadow-lg:0 22px 50px -14px rgba(0,0,0,.75);
    color-scheme:dark;
  }
}
html.rd[data-theme="dark"]{
  --rd-bg:#0e131d;
  --rd-surface:#151b28;
  --rd-surface-2:#1d2535;
  --rd-ink:#eef0f5;
  --rd-ink-2:#b6bbc9;
  --rd-ink-3:#8089a0;
  --rd-line:#252d3f;
  --rd-line-2:#3a445c;
  --rd-gold:#e0bc6a;
  --rd-gold-soft:rgba(224,188,106,.12);
  --rd-gold-line:rgba(224,188,106,.35);
  --rd-chord:#f2a765;
  --rd-accent:#e0bc6a;
  --rd-accent-ink:#141a26;
  --rd-card:#1a2540;
  --rd-card-ink:#ffffff;
  --rd-card-ink-2:rgba(255,255,255,.62);
  --rd-card-line:rgba(255,255,255,.1);
  --rd-card-hover:rgba(255,255,255,.06);
  --rd-card-accent:#e0bc6a;
  --rd-card-border:transparent;
  --rd-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -10px rgba(0,0,0,.5);
  --rd-shadow-lg:0 22px 50px -14px rgba(0,0,0,.75);
  color-scheme:dark;
}

html.rd body{background:var(--rd-bg);color:var(--rd-ink);-webkit-font-smoothing:antialiased}

/* ---------- Intestazione: fascia sottile ---------- */
html.rd header{
  display:flex;align-items:center;gap:.7rem;
  padding:calc(.7rem + env(safe-area-inset-top)) clamp(1rem,2.2vw,1.5rem) .7rem;
  text-align:left;border-bottom:0;
}
html.rd header h1{display:flex;flex-direction:column;margin:0;line-height:1}
html.rd .rd-brand-name{font-family:var(--rd-serif);font-weight:600;font-size:1.3rem;letter-spacing:-.01em;line-height:1.05}
html.rd .rd-brand-place{margin-top:.2rem;font:800 .62rem/1 Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#e0bc6a}
html.rd header p.tag{display:none}
@media (max-width:600px){
  html.rd header{padding:calc(.6rem + env(safe-area-inset-top)) 1rem .6rem}
  html.rd header p.tag{display:none}
  html.rd .rd-brand-name{font-size:1.15rem}
}

/* ---------- Colonna dell'elenco: chiara ---------- */
html.rd .board{background:var(--rd-surface);border-right:1px solid var(--rd-line);padding:1rem .9rem 2.5rem!important}
@media (max-width:820px){
  html.rd .board{background:var(--rd-bg);border-right:0;border-bottom:0}
}

html.rd .section-switcher{
  min-height:3rem;margin:0 0 .65rem;padding:.2rem .25rem .2rem .2rem;
  border:0;border-radius:13px;background:transparent;
}
html.rd .section-current{
  color:var(--rd-ink-3);font-size:.72rem;font-weight:800;letter-spacing:.09em;padding-left:.35rem;
}
html.rd .section-menu-toggle{color:var(--rd-ink-2);border-radius:11px;width:2.5rem;height:2.5rem}
html.rd .section-menu-toggle:hover,
html.rd .section-menu-toggle[aria-expanded="true"]{background:var(--rd-surface-2);color:var(--rd-ink)}
html.rd .section-menu{
  border:1px solid var(--rd-line);border-radius:16px;background:var(--rd-surface);
  box-shadow:var(--rd-shadow-lg);padding:.45rem;
}
html.rd .section-menu-item{color:var(--rd-ink);border-radius:10px;letter-spacing:.02em}
html.rd .section-menu-item:hover,
html.rd .section-menu-item:focus-visible{background:var(--rd-surface-2)}
html.rd .section-menu-item.active{background:var(--rd-accent);color:var(--rd-accent-ink)}
html.rd .section-menu-secondary{color:var(--rd-ink-2)}
html.rd .section-menu-divider{background:var(--rd-line)}
html.rd .section-menu-greeting{color:var(--rd-gold);font-family:var(--rd-serif);font-size:1.1rem}

/* Ricerca */
html.rd .search-field{margin-bottom:.75rem}
html.rd #search{
  height:3rem;padding:0 2.6rem 0 2.7rem;border-radius:13px;
  border:1px solid var(--rd-line);background-color:var(--rd-surface-2);color:var(--rd-ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23858996' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:.8rem 50%;background-size:1.25rem;
  transition:border-color .15s,background-color .15s,box-shadow .15s;
}
html.rd #search::placeholder{color:var(--rd-ink-3)}
html.rd #search:focus{background-color:var(--rd-surface);border-color:var(--rd-gold);box-shadow:0 0 0 4px var(--rd-gold-soft)}
html.rd .search-clear{color:var(--rd-ink-3)}
html.rd .search-clear:hover{background:var(--rd-surface-2);color:var(--rd-ink)}
@media (max-width:820px){ html.rd #search{background-color:var(--rd-surface)} }

/* Filtri per momento / tempo / tema */
html.rd .rd-filters{margin:0 0 .6rem}
html.rd .rd-filters-toggle{
  display:inline-flex;align-items:center;gap:.35rem;height:2rem;padding:0 .8rem;border:0;border-radius:999px;
  background:var(--rd-surface-2);color:var(--rd-ink-2);font:700 .78rem/1 Manrope,sans-serif;cursor:pointer;
}
html.rd .rd-filters-toggle svg{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
html.rd .rd-filters-toggle[aria-expanded="true"]{background:var(--rd-accent);color:var(--rd-accent-ink)}
html.rd .rd-filters-panel{padding:.7rem 0 .2rem}
html.rd .rd-filters-panel[hidden]{display:none}
html.rd .rd-filters-group{font:800 .66rem/1 Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--rd-ink-3);margin:.8rem 0 .45rem}
html.rd .rd-filters-group:first-child{margin-top:0}
html.rd .rd-chips{display:flex;flex-wrap:wrap;gap:.4rem}
html.rd .rd-chip{
  display:inline-flex;align-items:center;gap:.4rem;height:2rem;padding:0 .75rem;border-radius:999px;
  border:1px solid var(--rd-line);background:var(--rd-surface);color:var(--rd-ink-2);
  font:600 .8rem/1 Manrope,sans-serif;cursor:pointer;white-space:nowrap;
}
html.rd .rd-chip:hover{border-color:var(--rd-line-2);color:var(--rd-ink)}
html.rd .rd-chip em{font-style:normal;font-size:.7rem;font-weight:700;color:var(--rd-ink-3)}
html.rd .rd-chip.active{background:var(--rd-accent);border-color:var(--rd-accent);color:var(--rd-accent-ink)}
html.rd .rd-chip.active em{color:rgba(255,255,255,.7)}

/* Righe dell'elenco */
html.rd .tile-row{border-bottom:0;border-radius:13px;transition:background .12s}
html.rd .tile-row:hover{background:var(--rd-surface-2)}
html.rd .tile-row:has(.tile.active){background:var(--rd-gold-soft);box-shadow:inset 0 0 0 1px var(--rd-gold-line)}
html.rd .tile{color:var(--rd-ink);border-left:0;border-radius:13px;padding:.6rem .4rem .6rem .75rem;gap:0;font-weight:600;font-size:.98rem}
html.rd .tile:hover,html.rd .tile.active{background:transparent}
html.rd .tile.active::before{display:none}
html.rd .tile:focus-visible{outline:2px solid var(--rd-gold);outline-offset:-2px}
html.rd .tile .num{display:none}
html.rd .tile-title small{color:var(--rd-ink-3);font-size:.76rem;font-weight:500;letter-spacing:0;margin-top:.14rem}
html.rd .tile-title .tile-book-num{display:block;color:var(--rd-accent);font-size:.76rem;font-weight:600;margin-top:.14rem}
html.rd .favorite-btn,
html.rd .setlist-add,
html.rd .setlist-order{color:var(--rd-line-2);border-radius:10px}
html.rd .tile-row:hover .favorite-btn,
html.rd .tile-row:hover .setlist-add{color:var(--rd-ink-3)}
html.rd .favorite-btn:hover,
html.rd .setlist-add:hover,
html.rd .setlist-order:hover{background:var(--rd-surface);color:var(--rd-ink)}
html.rd .favorite-btn.active{color:var(--rd-gold)}
html.rd .setlist-add.active{color:var(--rd-accent)}
html.rd .setlist-order{color:var(--rd-ink-3)}
html.rd .empty-note{color:var(--rd-ink-3);text-align:center;padding:2rem 1rem;font-size:.9rem}
@media (hover:none){
  html.rd .favorite-btn,html.rd .setlist-add{color:var(--rd-ink-3)}
  html.rd .favorite-btn.active{color:var(--rd-gold)}
  html.rd .setlist-add.active{color:var(--rd-accent)}
}

/* Risultati per categoria */
html.rd .category-suggestions{background:transparent;border:0;box-shadow:none;padding:0;margin:0 0 .8rem}
html.rd .category-suggestions-title{font-family:var(--rd-serif);font-weight:600;font-size:1.25rem;color:var(--rd-ink);letter-spacing:-.01em}
html.rd .category-suggestions-description{color:var(--rd-ink-3)}
html.rd .category-suggestion-song{color:var(--rd-ink);border:0;border-radius:13px;background:transparent;font-weight:600}
html.rd .category-suggestion-song:hover{background:var(--rd-surface-2)}
html.rd .category-suggestion-song.active{background:var(--rd-gold-soft);box-shadow:inset 0 0 0 1px var(--rd-gold-line);color:var(--rd-ink)}
html.rd .category-suggestion-song::before{display:none}

/* Avviso di installazione */
html.rd .install-banner{background:var(--rd-surface);border:1px solid var(--rd-line);border-radius:16px;color:var(--rd-ink);box-shadow:var(--rd-shadow)}
html.rd .install-banner-copy strong{color:var(--rd-ink)}
html.rd .install-banner-copy span,
html.rd .install-banner-ios{color:var(--rd-ink-2)}
html.rd .install-banner-close{color:var(--rd-ink-3)}
html.rd .install-banner-action{background:var(--rd-accent);color:var(--rd-accent-ink);border-color:var(--rd-accent);border-radius:10px}

/* ---------- Canto ---------- */
html.rd main{background:var(--rd-bg)}
html.rd body:not(.lectern-mode) .song-nav{
  background:var(--rd-bg);box-shadow:0 1px 0 var(--rd-line);
}
html.rd .song-nav .back-list,
html.rd .song-nav .song-view-toggle{color:var(--rd-ink-2)!important;border-radius:10px}
html.rd .song-nav .song-view-toggle.active{color:var(--rd-accent)!important}
html.rd .song-nav .transpose-value,
html.rd .song-nav .text-size-value{color:var(--rd-ink)!important}
html.rd .song-nav .transpose-value:not(.is-original){color:var(--rd-chord)!important}

html.rd .song-head{border-bottom:1px solid var(--rd-line);padding-bottom:1.2rem;margin-bottom:1.1rem}
html.rd .song-title{
  font-family:var(--rd-serif);font-weight:600;font-size:clamp(1.9rem,4.2vw,3rem);
  line-height:1.05;letter-spacing:-.02em;color:var(--rd-ink);text-wrap:balance;
}
html.rd .song-sub{color:var(--rd-ink-2);font-size:1rem;margin-top:.45rem}
html.rd .song-capo{
  display:inline-flex;align-items:center;height:1.9rem;vertical-align:top;
  margin-top:.7rem;padding:0 .75rem;border:0;border-radius:999px;
  background:var(--rd-gold-soft);color:var(--rd-ink);font-size:.78rem;font-weight:700;
}
html.rd .rd-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem}
html.rd .song-capo + .rd-tags{display:inline-flex;vertical-align:top;margin:.7rem 0 0 .4rem}
html.rd .rd-tag{
  display:inline-flex;align-items:center;height:1.9rem;padding:0 .75rem;border-radius:999px;
  border:1px solid var(--rd-line);background:var(--rd-surface);color:var(--rd-ink-2);
  font:600 .78rem/1 Manrope,sans-serif;cursor:pointer;
}
html.rd .rd-tag:hover{border-color:var(--rd-line-2);color:var(--rd-ink)}
html.rd .song-favorite,
html.rd .song-setlist{border:0;border-radius:11px;color:var(--rd-ink-3);background:transparent;width:2.5rem;height:2.5rem}
html.rd .song-favorite:hover,
html.rd .song-setlist:hover{background:var(--rd-surface-2);color:var(--rd-ink)}
html.rd .song-favorite.active{color:var(--rd-gold);background:transparent}
html.rd .song-setlist.active{color:var(--rd-accent);background:transparent}

html.rd body.lectern-mode .rd-tags{display:none}
html.rd .song-section{scroll-margin-top:4.5rem}

/* Setlist: precedente / successivo */
html.rd .setlist-nav button{border:1px solid var(--rd-line);border-radius:10px;background:var(--rd-surface);color:var(--rd-ink);padding:.5rem .75rem}
html.rd .setlist-nav button:hover:not(:disabled){border-color:var(--rd-line-2)}
html.rd .setlist-position{color:var(--rd-ink-3);font-weight:700}

/* Testo e accordi */
html.rd .chordline,
html.rd .segment-chord,
html.rd .explicit-chord{color:var(--rd-chord)}
html.rd .lyricline,
html.rd .segment-lyric,
html.rd .explicit-lyric,
html.rd .lyrics-only-line{color:var(--rd-ink)}
html.rd .headline,
html.rd .repeat-section-toggle{
  display:block;width:max-content;max-width:100%;
  background:transparent;border:0;border-radius:0;padding:0;margin:1.1em 0 .3em;
  color:var(--rd-ink-3);font-weight:800;letter-spacing:.1em;font-size:.72em;
}
html.rd .headline::before,
html.rd .repeat-section-toggle::before{display:none}
html.rd .sheet > .song-section:first-child > .headline{margin-top:0}
html.rd .repeat-section-toggle{display:inline-flex;color:var(--rd-gold)}
html.rd .repeat-section-toggle:hover{background:transparent;color:var(--rd-ink)}
html.rd .repeat-section-action{color:var(--rd-ink-3)}

/* Il ritornello: riquadro dorato */
html.rd .refrain-section:not(.repeat-section-collapsible){
  background:var(--rd-gold-soft);
  border-radius:11px;padding:.75em 14px .8em;margin:.9em 0 1em -14px;
  width:fit-content;max-width:calc(100% + 14px);box-sizing:border-box;break-inside:avoid;-webkit-column-break-inside:avoid;
}
/* La bolla esce di 14px a sinistra per lasciare il testo allineato alle strofe:
   il foglio (overflow-x:auto) le fa spazio senza spostare il contenuto */
html.rd .sheet{padding-left:14px;margin-left:-14px}
/* Nelle due colonne dell'iPad il margine delle sezioni è riscritto: la bolla resta comunque spostata a sinistra */
html.rd body.song-open .sheet.tablet-two-columns .refrain-section:not(.repeat-section-collapsible){margin:0 0 .7rem -14px}
html.rd .refrain-section:not(.repeat-section-collapsible) > .headline{color:var(--rd-gold);margin-top:0}
html.rd .refrain-section .spacer:last-child{display:none}

html.rd .feedback-trigger{border:0;color:var(--rd-ink-3);border-radius:10px}
html.rd .feedback-trigger:hover{background:var(--rd-surface-2);color:var(--rd-ink)}
html.rd footer{color:var(--rd-ink-3);background:var(--rd-bg)}
html.rd .offline-status{color:var(--rd-ink-3)}
html.rd .rd-refresh{margin-left:.3rem;padding:.35rem .2rem;border:0;background:none;color:var(--rd-gold);font:700 .79rem/1 Manrope,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
html.rd .rd-refresh::before{content:"·";margin-right:.5rem;color:var(--rd-ink-3);text-decoration:none;display:inline-block}

/* Finestra segnalazioni */
html.rd .feedback-card{border:1px solid var(--rd-line);border-radius:20px;box-shadow:var(--rd-shadow-lg);padding:1.4rem}
html.rd .feedback-card h2{font-family:var(--rd-serif);font-weight:600;font-size:1.5rem;letter-spacing:-.01em}
html.rd .feedback-field input,
html.rd .feedback-field select,
html.rd .feedback-field textarea{border-radius:11px;border-color:var(--rd-line);background:var(--rd-surface)}
html.rd .feedback-field input:focus,
html.rd .feedback-field select:focus,
html.rd .feedback-field textarea:focus{border-color:var(--rd-gold);box-shadow:0 0 0 4px var(--rd-gold-soft)}
html.rd .feedback-cancel,
html.rd .feedback-submit{border-radius:11px}
html.rd .feedback-submit{background:var(--rd-accent);border-color:var(--rd-accent)}
html.rd .feedback-close{color:var(--rd-ink-3)}

/* ---------- Setlist ---------- */
html.rd .search-field[hidden] + .rd-filters{display:none}
html.rd .setlist-library{color:var(--rd-ink)}
html.rd .setlist-library-heading h2{color:var(--rd-ink)}
html.rd .setlist-library-heading p,
html.rd .setlist-library-status{color:var(--rd-ink-3)}
html.rd .setlist-back-button{color:var(--rd-ink-2)}
html.rd .setlist-back-button:hover,
html.rd .setlist-back-button:focus-visible{background:var(--rd-surface-2)}
html.rd .setlist-new-button{
  border:1px dashed var(--rd-line-2);border-radius:13px;background:transparent;color:var(--rd-ink-2);font-size:.84rem;
}
html.rd .setlist-new-button:hover{background:var(--rd-surface-2);color:var(--rd-ink)}
html.rd .setlist-library-card{border:1px solid var(--rd-line);border-radius:16px;background:var(--rd-surface)}
html.rd .setlist-library-card:hover,
html.rd .setlist-library-card:focus-visible{background:var(--rd-surface);border-color:var(--rd-line-2)}
html.rd .setlist-library-info strong{color:var(--rd-ink);font-family:var(--rd-serif);font-weight:600;font-size:1.1rem}
html.rd .setlist-library-info span{color:var(--rd-ink-3)}
html.rd .setlist-library-card.active{background:var(--rd-card);border-color:var(--rd-card-border);box-shadow:var(--rd-shadow)}
html.rd .setlist-library-card.active .setlist-library-info strong{color:var(--rd-card-ink)}
html.rd .setlist-library-card.active .setlist-library-info span{color:var(--rd-card-ink-2)}
html.rd .setlist-card-icon-button{color:var(--rd-ink-3);border-radius:10px}
html.rd .setlist-card-icon-button:hover,
html.rd .setlist-card-icon-button:focus-visible{background:var(--rd-surface-2);color:var(--rd-ink)}
html.rd .setlist-card-icon-button.danger:hover,
html.rd .setlist-card-icon-button.danger:focus-visible{background:rgba(154,27,56,.08);color:var(--rd-chord)}
html.rd .setlist-library-card.active .setlist-card-icon-button{color:var(--rd-card-ink-2)}
html.rd .setlist-library-card.active .setlist-card-icon-button:hover,
html.rd .setlist-library-card.active .setlist-card-icon-button:focus-visible{background:var(--rd-card-hover);color:var(--rd-card-ink)}
html.rd .setlist-song-list{border-top:0}
html.rd .setlist-card-menu summary{color:var(--rd-ink-3)}
html.rd .setlist-card-actions{background:var(--rd-surface);border:1px solid var(--rd-line);box-shadow:var(--rd-shadow-lg)}
html.rd .setlist-card-actions button{color:var(--rd-ink)}
html.rd .setlist-card-actions button:hover{background:var(--rd-surface-2);color:var(--rd-ink)}
html.rd .setlist-card-actions button.danger{color:var(--rd-chord)}

/* ---------- Home: "Che cosa cantiamo oggi?" ----------
   Compare quando nessun canto è aperto. Su schermi larghi sta accanto
   all'elenco; su telefono e iPad verticale è la scheda "Oggi". */
html.rd #rdHome{display:none;min-width:0;background:var(--rd-bg)}
html.rd .rd-tabbar{display:none}
html.rd body:not(.song-open) main{display:none}
html.rd body:not(.song-open) #rdHome{display:block}
html.rd header{cursor:pointer}

html.rd .rd-home{max-width:980px;margin:0 auto;padding:2.4rem clamp(1.1rem,4vw,3rem) 4rem}
html.rd .rd-home h3{font:800 .74rem/1.2 Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--rd-ink-3);margin:2.3rem 0 .7rem}
html.rd .rd-home button{font-family:Manrope,sans-serif;cursor:pointer}
html.rd .rd-home-search{display:none}

html.rd .rd-sl{border-radius:20px;background:var(--rd-card);color:var(--rd-card-ink);border:1px solid var(--rd-card-border);overflow:hidden;box-shadow:var(--rd-shadow)}
html.rd .rd-sl-head{display:flex;align-items:center;gap:1rem;padding:1.15rem 1.25rem 1rem}
html.rd .rd-sl-icon{flex:none;display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:13px;background:rgba(224,188,106,.16);color:var(--rd-card-accent)}
html.rd .rd-sl-icon svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.rd .rd-sl-text{flex:1;min-width:0}
html.rd .rd-sl-text b{display:block;font-family:var(--rd-serif);font-weight:600;font-size:1.25rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.rd .rd-sl-text small{display:block;margin-top:.15rem;font-size:.8rem;color:var(--rd-card-ink-2);line-height:1.35}
html.rd .rd-sl-go{flex:none;display:inline-flex;align-items:center;gap:.4rem;height:2.65rem;padding:0 1rem;border:0;border-radius:12px;background:var(--rd-accent);color:var(--rd-accent-ink);font-weight:800;font-size:.86rem}
html.rd .rd-sl-go svg{width:.85rem;height:.85rem;fill:currentColor}
html.rd .rd-sl-sum{display:flex;align-items:center;gap:.6rem;width:100%;border:0;border-top:1px solid var(--rd-card-line);background:none;color:var(--rd-card-ink-2);padding:.8rem 1.25rem;font-size:.84rem;text-align:left}
html.rd .rd-sl-sum span{flex:1;min-width:0;white-space:pre;overflow:hidden;text-overflow:ellipsis}
html.rd .rd-sl-sum:hover{color:var(--rd-card-ink)}
html.rd .rd-sl-sum svg{flex:none;width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Evento speciale in cima alla home (es. pellegrinaggio) */
html.rd .rd-ev{margin-bottom:1.6rem;border-radius:20px;background:var(--rd-card);color:var(--rd-card-ink);border:1px solid var(--rd-card-border);overflow:hidden;box-shadow:var(--rd-shadow)}
html.rd .rd-ev-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:.2rem 1rem;padding:1.25rem 1.25rem 1.05rem;background:linear-gradient(135deg,rgba(224,188,106,.18),rgba(224,188,106,0) 70%)}
html.rd .rd-ev-head>*{grid-column:1}
html.rd .rd-ev-head .rd-sl-go{grid-column:2;grid-row:1/3;align-self:center}
html.rd .rd-ev-kicker{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--rd-card-accent)}
html.rd .rd-home .rd-ev h3{margin:.2rem 0 0;font-family:var(--rd-serif);font-weight:600;font-size:clamp(1.35rem,3.6vw,1.75rem);line-height:1.12;letter-spacing:-.01em;text-transform:none;color:var(--rd-card-ink)}
html.rd .rd-ev-head p{grid-column:1/-1;margin:.2rem 0 0;font-size:.84rem;color:var(--rd-card-ink-2)}
html.rd .rd-ev-list{list-style:none;margin:0;padding:0;counter-reset:ev}
html.rd .rd-ev-list li{counter-increment:ev;border-top:1px solid var(--rd-card-line)}
html.rd .rd-ev-row{display:flex;align-items:center;gap:.85rem;width:100%;min-height:3.6rem;padding:.6rem 1.25rem;border:0;background:none;color:var(--rd-card-ink);text-align:left}
html.rd .rd-ev-row::before{content:counter(ev);flex:none;width:1.4rem;font-size:.8rem;font-weight:800;color:var(--rd-card-accent);font-variant-numeric:tabular-nums}
html.rd button.rd-ev-row:hover,html.rd button.rd-ev-row:focus-visible{background:var(--rd-card-hover)}
html.rd .rd-ev-text{flex:1;min-width:0;display:flex;flex-direction:column}
html.rd .rd-ev-text small{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--rd-card-ink-2)}
html.rd .rd-ev-text b{font-family:var(--rd-serif);font-weight:600;font-size:1.12rem;line-height:1.2}
html.rd .rd-ev-text em{font-style:normal;font-size:.78rem;color:var(--rd-card-ink-2)}
html.rd .rd-ev-row svg{flex:none;width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
html.rd .rd-ev-row.is-missing b{color:var(--rd-card-ink-2)}
html.rd .rd-ev-row.is-missing em{font-style:italic}

/* Scaletta: in fondo al canto una riga discreta "Prossimo › titolo" */
html.rd .rd-arch-title{margin:.4rem 0 .7rem;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--rd-ink-3)}
html.rd .rd-arch-title:last-child{margin-top:1.6rem}
html.rd .rd-arch-item{margin-bottom:.6rem;border:1px solid var(--rd-card-border);border-radius:16px;background:var(--rd-card);color:var(--rd-card-ink);overflow:hidden}
html.rd .rd-arch-item summary{display:flex;align-items:center;gap:.85rem;padding:.85rem 1.1rem;cursor:pointer;list-style:none}
html.rd .rd-arch-item summary::-webkit-details-marker{display:none}
html.rd .rd-arch-text{flex:1;min-width:0;display:flex;flex-direction:column}
html.rd .rd-arch-text b{font-family:var(--rd-serif);font-weight:600;font-size:1.1rem;line-height:1.2}
html.rd .rd-arch-text small{font-size:.8rem;color:var(--rd-card-ink-2)}
html.rd .rd-arch-item summary svg{flex:none;width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
html.rd .rd-arch-item[open] summary svg{transform:rotate(90deg)}
html.rd .rd-ev-next button{font-family:Manrope,sans-serif;cursor:pointer}
html.rd .rd-ev-next{max-width:none;margin:2.4rem 0 1.5rem;border:0;border-radius:0;background:none;box-shadow:none;color:var(--rd-ink-3)}
html.rd .rd-ev-next-go{display:flex;align-items:center;gap:.85rem;width:100%;background:none;text-align:left;min-height:0;padding:.9rem 0;border-left:0;border-right:0;border-bottom:0;border-top:1px solid var(--rd-line);color:var(--rd-ink-3)}
html.rd .rd-ev-next-go:hover,html.rd .rd-ev-next-go:focus-visible{background:none;color:var(--rd-ink)}
html.rd .rd-ev-next-go svg{flex:none;width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.rd .rd-ev-next-go .rd-ev-text{flex-direction:row;align-items:baseline;gap:.6rem;flex-wrap:wrap}
html.rd .rd-ev-next-go .rd-ev-text small{color:var(--rd-ink-3)}
html.rd .rd-ev-next-go b{font-size:1rem;color:var(--rd-ink-2)}
html.rd .rd-ev-next-go em{display:none}
html.rd .rd-ev-next-end{margin:0;font-size:.86rem;padding:.9rem 0;border-top:1px solid var(--rd-line);color:var(--rd-ink-3)}

html.rd .rd-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0 1.5rem}
html.rd .rd-step{display:flex;align-items:center;gap:.7rem;height:3rem;padding:0 .4rem;border:0;border-bottom:1px solid var(--rd-line);background:none;color:var(--rd-ink);text-align:left}
html.rd .rd-step:hover{background:var(--rd-surface-2)}
html.rd .rd-step i{flex:none;width:1.3rem;font-style:normal;font-size:.74rem;font-weight:700;color:var(--rd-gold);font-variant-numeric:tabular-nums}
html.rd .rd-step b{flex:1;font-size:.95rem;font-weight:600}
html.rd .rd-step small{font-size:.76rem;font-weight:700;color:var(--rd-ink-3)}

html.rd .rd-recent{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.55rem}
html.rd .rd-recent button{padding:.8rem .9rem;border-radius:14px;background:var(--rd-surface);border:1px solid var(--rd-line);color:var(--rd-ink);text-align:left;min-width:0}
html.rd .rd-recent button:hover{border-color:var(--rd-line-2);box-shadow:var(--rd-shadow)}
html.rd .rd-recent b{display:block;font-family:var(--rd-serif);font-weight:600;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.rd .rd-recent small{font-size:.74rem;color:var(--rd-ink-3)}
html.rd .rd-recent button{position:relative}
html.rd .rd-recent i{position:absolute;top:.55rem;right:.75rem;font-style:normal;font-size:.7rem;font-weight:700;color:var(--rd-gold);font-variant-numeric:tabular-nums}
html.rd .rd-recent i+b{padding-right:1.2rem}
html.rd .rd-shelf-tabs{margin:0 0 .7rem}
@media (max-width:560px){html.rd .rd-recent{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Telefono e iPad verticale: "Oggi" è una scheda a sé, con barra in basso */
@media (max-width:820px), (orientation:portrait) and (min-width:700px) and (max-width:1100px){
  html.rd body:not(.song-open) #rdHome{display:none}
  html.rd body.rd-at-home:not(.song-open) #rdHome{display:block}
  html.rd body.rd-at-home:not(.song-open) .board{display:none}
  html.rd .rd-home{padding-top:1.4rem;padding-bottom:2rem}
  html.rd .rd-home-search{
    display:flex;align-items:center;gap:.6rem;width:100%;height:3rem;margin:0 0 1.1rem;padding:0 .9rem;
    border:1px solid var(--rd-line);border-radius:13px;background:var(--rd-surface);color:var(--rd-ink-3);font-size:16px;text-align:left;
  }
  html.rd .rd-home-search svg{flex:none;width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  html.rd body:not(.song-open) .rd-tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;justify-content:space-around;
    padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--rd-surface) 90%,transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--rd-line);
  }
  html.rd .rd-tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;border:0;background:transparent;padding:.3rem;color:var(--rd-ink-3);font:700 .66rem/1.2 Manrope,sans-serif;cursor:pointer}
  html.rd .rd-tabbar svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  html.rd .rd-tabbar button.active{color:var(--rd-ink)}
  html.rd .rd-tabbar button.active svg{color:var(--rd-gold)}
  html.rd body:not(.song-open) > footer{padding-bottom:calc(5.2rem + env(safe-area-inset-bottom))}
}
@media (max-width:520px){
  html.rd .rd-sl-icon{display:none}
}
/* Con la home aperta nessun canto è "quello corrente" */
html.rd body:not(.song-open) .tile-row:has(.tile.active):not(:hover){background:transparent;box-shadow:none}
html.rd .setlist-nav{margin-bottom:1rem}

/* Schermi larghi: l'elenco resta attaccato al bordo sinistro e il contenuto
   usa lo spazio che c'è, invece di galleggiare in mezzo a due fasce vuote. */
@media (min-width:1101px){
  html.rd .app{max-width:none;margin:0;grid-template-columns:clamp(340px,27vw,430px) minmax(0,1fr)}
  html.rd main{width:100%;max-width:1180px;justify-self:center}
}

/* ---------- Tema scuro: raccordo con il vecchio foglio di stile ----------
   style.css usa pochi colori di base: nel tema scuro li si ridefinisce qui,
   così anche le parti non ridisegnate seguono il tema. */
html.rd header{background:#16233d;color:#fff}
html.rd.iphone-standalone-app body::before{background:#16233d}
@media (prefers-color-scheme:dark){
  html.rd:not([data-theme="light"]){
    --ink:var(--rd-ink);--paper:var(--rd-surface);--navy:var(--rd-ink);
    --wine:var(--rd-chord);--wine-bright:var(--rd-chord);--line:var(--rd-line);
  }
}
html.rd[data-theme="dark"]{
  --ink:var(--rd-ink);--paper:var(--rd-surface);--navy:var(--rd-ink);
  --wine:var(--rd-chord);--wine-bright:var(--rd-chord);--line:var(--rd-line);
}

/* Colori scritti a mano nel vecchio stile: ora seguono il tema. */
html.rd .sheet .lyricline,
html.rd .sheet .segment-lyric,
html.rd .sheet .explicit-lyric,
html.rd .sheet .lyrics-only-line,
html.rd .sheet .lyrics-only-plain,
html.rd .sheet .music-row.word-anchored .segment-lyric{color:var(--rd-ink)}
html.rd .sheet .chordline,
html.rd .sheet .segment-chord,
html.rd .sheet .explicit-chord,
html.rd .sheet .music-row.word-anchored .segment-chord{color:var(--rd-chord);--chord-color:var(--rd-chord)}
html.rd .measure-bar{color:var(--rd-ink-3)}
html.rd .transpose-btn,
html.rd .command-btn,
html.rd .transpose-reset,
html.rd .song-nav .back-list{color:var(--rd-ink-2)}
html.rd .transpose-btn:hover,
html.rd .command-btn:hover{color:var(--rd-ink);background:var(--rd-surface-2);border-color:transparent}
html.rd .transpose-label,
html.rd .text-size-label,
html.rd .feedback-field small,
html.rd .feedback-intro{color:var(--rd-ink-3)}
html.rd .song-title-actions .song-favorite,
html.rd .song-title-actions .song-setlist{color:var(--rd-ink-3)}
html.rd .song-title-actions .song-favorite.active{color:var(--rd-gold)}
html.rd .song-title-actions .song-setlist.active{color:var(--rd-accent)}
html.rd .song-feedback-footer .feedback-trigger{color:var(--rd-ink-3)}
html.rd .song-feedback-footer .feedback-trigger:hover{color:var(--rd-ink)}
html.rd .song-more-menu{background:var(--rd-surface);border-color:var(--rd-line);color:var(--rd-ink)}
html.rd .song-loading-error{color:var(--rd-ink-2)}
html.rd .feedback-card{background:var(--rd-surface);color:var(--rd-ink)}
html.rd .feedback-field input,
html.rd .feedback-field select,
html.rd .feedback-field textarea{color:var(--rd-ink)}
html.rd .feedback-cancel{color:var(--rd-ink);border-color:var(--rd-line)}
html.rd .feedback-submit{color:var(--rd-accent-ink)}
html.rd .feedback-status{color:var(--rd-chord)}
html.rd .favorite-btn,
html.rd .setlist-add,
html.rd .setlist-order{color:color-mix(in srgb,var(--rd-ink-3) 75%,transparent)}
html.rd .install-banner-action{color:var(--rd-accent-ink)}

/* Leggio */
html.rd body.lectern-mode{background:var(--rd-bg)}
html.rd body.lectern-mode .song-nav{background:color-mix(in srgb,var(--rd-surface) 96%,transparent);box-shadow:var(--rd-shadow)}
html.rd body.lectern-mode .lectern-controls-handle{background:color-mix(in srgb,var(--rd-surface) 88%,transparent);color:var(--rd-ink-2)}

/* Voce "Tema" nel menu */
html.rd .rd-theme-item em{margin-left:auto;font-style:normal;font-weight:700;color:var(--rd-ink-3)}

/* ---------- Elenco e canto affiancati ----------
   L'elenco resta fermo a sinistra e scorre per conto suo: leggendo un canto
   non sparisce, e sotto un canto corto non resta una pagina vuota. */
@media (min-width:1101px), (min-width:821px) and (orientation:landscape){
  html.rd .board{
    position:sticky;top:0;align-self:start;
    height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
    padding-top:.6rem!important;
  }
  /* In fondo i canti sfumano invece di finire tagliati a metà riga */
  html.rd .board::after{
    content:"";display:block;position:sticky;bottom:-2.5rem;z-index:5;height:2.5rem;margin:0 -.9rem -2.5rem;
    background:linear-gradient(to bottom,transparent,var(--rd-surface) 85%);pointer-events:none;
  }
  html.rd .search-field{position:sticky;top:-.6rem;z-index:6;background:var(--rd-surface);padding:.6rem 0 .35rem;margin-bottom:.4rem}
  html.rd .search-clear{top:calc(50% + .12rem)}
  /* L'elenco scende fino in fondo alla pagina: il piede si sovrappone allo
     spazio lasciato sotto al contenuto, solo nella colonna di destra. */
  html.rd #rdHome,
  html.rd main{margin-bottom:var(--rd-foot-h,0px)}
  html.rd body:not(.lectern-mode) > footer{
    position:relative;margin-top:calc(-1 * var(--rd-foot-h,0px));margin-left:var(--rd-board-edge,0px);
  }
  html.rd .app{min-height:0}
  html.rd #rdHome,
  html.rd main{min-height:calc(100vh - 3.6rem)}

  /* Comandi del canto su una sola riga, raggruppati */
  html.rd body:not(.lectern-mode) .song-nav{
    display:flex!important;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;
    gap:1rem;padding:.55rem 0;margin-bottom:.6rem;
  }
  html.rd body:not(.lectern-mode) .song-nav-main{width:auto;justify-content:flex-start;gap:.3rem}
  html.rd body:not(.lectern-mode) .toolbar-controls{display:flex;flex:1;width:auto;align-items:center;justify-content:space-between;gap:1.4rem;padding-left:1rem;border-left:1px solid var(--rd-line)}
}

/* Accordi: mai attaccati. Spazio tra accordi sulla stessa parola e dopo
   ogni accordo più largo della sua sillaba; il segmento non si stringe
   sotto la larghezza del suo accordo. */
html.rd .chordline,
html.rd .segment-chord{word-spacing:.4em}
html.rd .music-row.word-anchored .segment-chord{padding-right:.4em}
html.rd .music-row.word-anchored .music-segment{min-width:min-content}

/* Avviso di versione nuova */
html.rd .rd-update{
  position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:80;transform:translateX(-50%);
  display:flex;align-items:center;gap:.9rem;width:max-content;max-width:calc(100vw - 2rem);padding:.5rem .5rem .5rem 1.1rem;
  border-radius:16px;border:1px solid var(--rd-card-border);background:var(--rd-card);color:var(--rd-card-ink);
  box-shadow:var(--rd-shadow-lg);font:600 .88rem/1.3 Manrope,sans-serif;
}
@media (max-width:820px){
  html.rd body:not(.song-open) .rd-update{bottom:calc(4.8rem + env(safe-area-inset-bottom))}
}