/* ============================================================
   Il lettore dei suoni, in veste chiara.

   Va sempre DOPO pagina-chiara.css, da cui prende colori e
   caratteri. Lo usano le cinque traduzioni della pagina dei
   suoni (inglese, spagnola, portoghese, francese, tedesca):
   la pagina italiana ha una struttura sua, scritta come una
   lettera, e non passa di qui.

   Prima ognuna di queste cinque si portava dentro una copia
   del vecchio foglio scuro. Sono le pagine che ricevono piu'
   impressioni di tutte: meritavano la veste buona.
   Scritto il 22 settembre 2026.

   Contrasti sul fondo bianco del lettore, formula WCAG:
   inchiostro 17.1:1, inchiostro-2 7.5:1, inchiostro-3 5.0:1,
   blu 7.8:1. Il bottone acceso e' inchiostro su carta, 16.4:1.
   ============================================================ */

:root{
  /* nomi che i disegni dentro le pagine usano ancora */
  --secca:var(--blu); --corrente:var(--blu); --fondale:var(--inchiostro);
}

/* ---------- il lettore ---------- */
.player{padding:26px 22px 22px;text-align:center}
.ic-grande{width:44px;height:44px;color:var(--blu);margin:0 auto 12px}
.ic-grande svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.nome-suono{font-family:var(--sans);font-size:20px;font-weight:600;letter-spacing:-.015em;color:var(--inchiostro)}
.stato{font-family:var(--sans);font-size:14px;color:var(--inchiostro-3);margin-top:5px}
.stato.on{color:var(--verde)}
.trascorso{font-family:var(--sans);font-size:14px;color:var(--inchiostro-3);margin-top:3px;
  font-variant-numeric:tabular-nums;min-height:19px}

.scelta{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:20px}
.suono-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  border:1px solid var(--riga);background:var(--carta);color:var(--inchiostro);
  font-family:var(--sans);font-size:15px;padding:0 14px;border-radius:999px;cursor:pointer;
  transition-property:transform,border-color,background-color,color;
  transition-duration:150ms;transition-timing-function:cubic-bezier(.2,.7,.3,1)}
.suono-btn:hover{border-color:var(--inchiostro-3)}
.suono-btn:active{transform:scale(.97)}
.suono-btn.on{background:var(--inchiostro);border-color:var(--inchiostro);color:var(--carta)}
.suono-btn .ic{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.volume{display:flex;align-items:center;gap:12px;margin:20px 22px 0;padding-top:16px;
  border-top:1px solid var(--riga)}
.volume label{font-family:var(--sans);font-size:15px;color:var(--inchiostro-2);flex:none;
  display:flex;align-items:center;gap:7px;margin:0}
.volume label svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.volume input[type=range]{flex:1;accent-color:var(--blu);width:auto;min-height:0;padding:0;border:0;background:none}
.player-piede{padding:13px 22px;background:var(--carta);font-family:var(--sans);font-size:14px;
  color:var(--inchiostro-3);text-align:center;border-top:1px solid var(--riga)}

/* ---------- il disegno del mascheramento ---------- */
.confronto{margin-top:26px;display:flex;flex-direction:column;gap:16px}
.traccia{background:#fff;border:1px solid var(--riga);border-radius:6px;padding:16px 18px}
.traccia b{display:block;font-family:var(--sans);font-size:13px;font-weight:600;
  color:var(--inchiostro);margin-bottom:10px;letter-spacing:.02em}
.traccia svg{display:block;width:100%;height:auto}
.traccia small{display:block;font-family:var(--sans);font-size:14px;color:var(--inchiostro-3);margin-top:8px}

@media (max-width:640px){
  .player{padding:22px 16px 18px}
  .volume{margin-left:16px;margin-right:16px}
}