:root {
  --sfondo: #f6f4ef;
  --carta: #ffffff;
  --testo: #1d2327;
  --tenue: #5f6b72;
  --linea: #dcd8cf;
  --accento: #1f4e5f;
  --accento-testo: #ffffff;
  --accento-tenue: #e3eef1;
  --avviso: #9a3b1b;
  --raggio: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #14191c;
    --carta: #1d2428;
    --testo: #eef1f2;
    --tenue: #9aa7ae;
    --linea: #2f3a40;
    --accento: #7cc3d6;
    --accento-testo: #0e2229;
    --accento-tenue: #1f3640;
    --avviso: #f0a079;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 18px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main {
  max-width: 640px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));
}
h1 { font-size: 1.5rem; margin: 8px 0 4px; line-height: 1.2; }
h2 { font-size: 1.15rem; margin: 28px 0 10px; }
p { margin: 8px 0; }
.tenue { color: var(--tenue); }
.attesa { color: var(--tenue); text-align: center; margin-top: 30vh; }
.avviso { color: var(--avviso); }

/* pulsanti grandi, con parole */
button, .pulsante {
  font: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 10px 18px;
  border: 2px solid var(--accento); border-radius: var(--raggio);
  background: var(--carta); color: var(--accento);
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button.primario, .pulsante.primario { background: var(--accento); color: var(--accento-testo); }
button.scelto { background: var(--accento-tenue); }
button:disabled { opacity: .5; cursor: default; }
.piccolo { min-height: 40px; padding: 6px 12px; font-size: .9rem; }
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.colonna { display: flex; flex-direction: column; gap: 10px; }
.riga { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.indietro { border: none; background: none; min-height: 44px; padding: 4px 0; color: var(--accento); }

/* elenco brani */
.brano {
  display: block; width: 100%; text-align: left;
  padding: 16px 18px; min-height: 64px;
  background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio);
  color: var(--testo); text-decoration: none;
}
.brano strong { display: block; font-size: 1.1rem; }
.brano span { color: var(--tenue); font-size: .95rem; }

/* player */
.player {
  background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio);
  padding: 18px; margin-top: 12px;
}
.suona { width: 100%; min-height: 72px; font-size: 1.3rem; }
.tempo { display: flex; justify-content: space-between; color: var(--tenue); font-variant-numeric: tabular-nums; margin-top: 10px; }
input[type=range] { width: 100%; height: 36px; accent-color: var(--accento); }
.voce { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linea); }
.voce:first-child { border-top: none; }
.voce input { grid-column: 1 / -1; }
details { margin-top: 14px; }
summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--accento); }

.persona { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 14px; }
.persona.revocato { opacity: .6; }
.mai { color: var(--avviso); font-weight: 600; }
input[type=text], select {
  font: inherit; min-height: 48px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--linea); background: var(--carta); color: var(--testo);
}
.istruzioni { background: var(--accento-tenue); border-radius: var(--raggio); padding: 14px 16px; }
.istruzioni ol { margin: 6px 0 0; padding-left: 22px; }
.istruzioni li { margin: 6px 0; }

/* sul computer: testo più grande e più spazio (molti coristi studiano al PC) */
@media (min-width: 900px) { body { font-size: 20px; } main { max-width: 760px; } }

/* partitura */
.partitura { background: #fffdf8; color: #111; border-radius: var(--raggio); padding: 8px 4px; margin-top: 10px; overflow: hidden; }
.partitura .pagina svg { width: 100%; height: auto; display: block; }
.partitura g.measure { cursor: pointer; }
.partitura rect { stroke: none; }
.partitura rect.area { fill: transparent; }
.partitura rect.fascia-mia { fill: #fff3a6; }
.partitura rect.battuta-attiva { fill: #ffd76a; fill-opacity: .55; }
.partitura rect.ciclo { fill: #9fd3a8; fill-opacity: .35; }
.partitura.con-mie g.staff:not(.mio) g.verse text { fill: #8a8f93; }
.partitura g.staff.mio g.verse text { fill: #111; font-weight: 700; }
.player.fisso { position: sticky; top: 0; z-index: 5; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
main.largo { max-width: 1100px; }
.interruttore { display: inline-flex; border: 2px solid var(--accento); border-radius: var(--raggio); overflow: hidden; }
.interruttore button { border: none; border-radius: 0; min-height: 44px; }
.avviso-ciclo { background: #e6f4e8; color: #1d3b23; border-radius: 10px; padding: 8px 12px; }
.partitura g.note { cursor: pointer; }
.partitura g.note.estremo, .partitura g.note.estremo * { fill: #1b7f3b; stroke: #1b7f3b; }
.partitura g.rest.estremo, .partitura g.rest.estremo * { fill: #1b7f3b; }

/* testata compatta: più spazio alla partitura */
.player.fisso { padding: 10px 12px; }
.riga-player { display: flex; gap: 12px; align-items: center; }
.riga-player .suona { width: auto; min-width: 128px; min-height: 52px; font-size: 1.1rem; padding: 8px 16px; }
.riga-player .cursore { flex: 1; min-width: 0; }
.riga-player .tempo { margin-top: 0; font-size: .9rem; }
.riga-player input[type=range] { height: 28px; }
.comandi { margin-top: 6px; gap: 6px; }
.comandi button { min-height: 40px; padding: 6px 10px; font-size: .9rem; }
.avviso-ciclo { margin: 6px 0 0; font-size: .9rem; }

.partitura rect.cursore-linea { fill: #d9480f; }
.partitura rect.barra-ciclo { fill: #1b7f3b; }
.partitura g.note[data-esito=bene], .partitura g.note[data-esito=bene] * { fill: #1b7f3b; stroke: #1b7f3b; }
.partitura g.note[data-esito=quasi], .partitura g.note[data-esito=quasi] * { fill: #c47f00; stroke: #c47f00; }
.partitura g.note[data-esito=male], .partitura g.note[data-esito=male] * { fill: #c92a2a; stroke: #c92a2a; }
.partitura g.note[data-esito=mancante], .partitura g.note[data-esito=mancante] * { fill: #9aa0a6; stroke: #9aa0a6; }
.registra-attivo { background: #c92a2a !important; color: #fff !important; border-color: #c92a2a !important; }
.esito { display: inline-block; min-width: 3.2em; font-weight: 700; }

.contenitore-partitura { position: relative; }
.fumetto { position: absolute; z-index: 4; background: #1d2327; color: #fff; padding: 8px 12px; border-radius: 10px;
  font-size: .95rem; line-height: 1.35; white-space: pre-line; box-shadow: 0 4px 14px rgba(0,0,0,.25); max-width: 260px; }
.fumetto::before { content: ''; position: absolute; top: -7px; left: calc(50% - 7px); border: 7px solid transparent;
  border-top: 0; border-bottom-color: #1d2327; }
.altezze { background: #fffdf8; border-radius: var(--raggio); margin-top: 10px; overflow: hidden; border: 1px solid var(--linea); }
.altezze-scorri { overflow-x: auto; overflow-y: hidden; }
.altezze-pista { position: relative; }
.altezze canvas { position: sticky; left: 0; display: block; cursor: pointer; }

/* comandi a icone nel riquadro fisso */
.icona, .teste { display: inline-flex; align-items: flex-end; justify-content: center; line-height: 0; }
.teste svg { margin: 0 -1px; }
.riga-player .suona { min-width: 76px; min-height: 56px; padding: 6px 12px; }
.comandi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gruppo { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.comandi button.icona-bottone { min-height: 48px; min-width: 52px; padding: 4px 8px; }
.icona-bottone.con-reg { border-color: #c92a2a; }
.icona-bottone.registra { color: #c92a2a; border-color: #c92a2a; }
.separatore { width: 1px; align-self: stretch; background: var(--linea); margin: 0 4px; }
select.voce-scelta { min-height: 52px; padding: 6px 10px; border: 2px solid var(--accento); border-radius: var(--raggio); color: var(--accento); font-weight: 600; max-width: 220px; cursor: pointer; }
.gruppo.mix button { background: #fff; }
.gruppo.mix button.scelto { background: #cfe3ea; box-shadow: inset 0 0 0 2px var(--accento); }

/* riquadro prima di registrare */
dialog.modale { border: none; border-radius: var(--raggio); padding: 22px 24px; max-width: 520px; width: calc(100% - 32px);
  background: var(--carta); color: var(--testo); box-shadow: 0 10px 40px rgba(0,0,0,.3); }
dialog.modale::backdrop { background: rgba(0,0,0,.45); }
dialog.modale li { margin: 6px 0; }
.interruttore button.icona-bottone { min-width: 56px; }
.viste-riga { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; justify-content: flex-end; }
.viste-riga .interruttore button { height: 50px; min-height: 50px; padding: 2px 8px; }
.contenitore-partitura { margin-top: 14px; }
.partitura g.verse.traslitterazione text { font-style: italic; }
.partitura g.staff.mio g.verse.traslitterazione text { font-weight: 400; }
select.velocita { min-height: 52px; padding: 6px 8px; border: 2px solid var(--accento); border-radius: var(--raggio); color: var(--accento); font-weight: 600; cursor: pointer; }
.qr { width: min(320px, 80vw); margin: 8px auto; background: #fff; padding: 6px; border-radius: 8px; }
.qr svg { width: 100%; height: auto; display: block; }

/* sorgenti e scheda (curatori) */
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo input[type=text], .campo textarea, .campo select { width: 100%; font: inherit; }
textarea { font: inherit; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--linea); background: var(--carta); color: var(--testo); }
.versione { border: 1px solid var(--linea); border-radius: var(--raggio); padding: 10px 14px; background: var(--carta); }
.etichetta { font-size: .8rem; padding: 2px 10px; border-radius: 99px; background: var(--accento-tenue); }
.etichetta.bozza { background: #fff3bf; color: #6b4e00; }
.note-brano { white-space: pre-line; }

/* testo a fronte: originale e traduzione affiancati riga per riga; sul telefono, la traduzione sotto in corsivo */
.testo-fronte { font-size: 1.1rem; }
.tf-intestazione { white-space: pre-line; color: var(--tenue); }
.tf-griglia { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.tf-orig, .tf-trad { min-height: 1.45em; }
.tf-trad { font-style: italic; color: var(--tenue); }
.tf-vuota { grid-column: 1 / -1; height: .9em; }
@media (max-width: 600px) {
  .tf-griglia { grid-template-columns: 1fr; }
  .tf-trad { margin-bottom: 4px; }
}
@media print {
  .non-stampare { display: none; }
  body { background: #fff; color: #000; }
  .tf-trad { color: #333; }
}
.partitura g.mNum text { fill: #1f4e5f; font-weight: 700; font-style: normal; }

/* telefono: testata compatta (comandi, voce e velocità su una riga, barra di avanzamento sotto) */
@media (max-width: 600px) {
  .riga-player { flex-wrap: wrap; gap: 8px; }
  .riga-player .cursore { order: 9; flex: 1 1 100%; }
  .riga-player .suona { min-width: 60px; min-height: 46px; padding: 4px 10px; }
  select.velocita, select.voce-scelta { min-height: 46px; }
  select.voce-scelta { flex: 1; max-width: none; min-width: 0; }
  .riga-player > button.icona-bottone { min-height: 46px; min-width: 46px; padding: 4px; }
  .separatore { display: none; }
  .comandi { zoom: .8; }
  .viste-riga { margin-left: 0; justify-content: flex-start; }
}

/* telefono: pannelli a scomparsa della testata (ascolto, vista) */
.pannello-testata { border-top: 1px solid var(--linea); margin-top: 8px; padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.pannello-testata[hidden] { display: none; }
.pannello-testata .gruppo.mix, .pannello-testata .viste-riga { zoom: .85; }
.espansore { position: relative; }
.etichetta-vel { position: absolute; right: 2px; bottom: 1px; font-size: .62rem; font-weight: 700; }
@media (max-width: 600px) {
  .riga-player > button.espansore { min-width: 56px; }
}