/*
 * Interruttore dei suoni (25/9/2026). Linguaggio: tbp-work/suoni/SOUND-DESIGN.md.
 * Stato visivo da html[data-tbp-suoni] (scritto nel <head>), cosi' non scatta a
 * pagina aperta. Tre varianti: menu (finestra Aspetto), cassetto, account.
 */

/* --- Pezzi comuni -------------------------------------------------------- */
.tbp-suoni-segno { display: block; width: 21px; height: 21px; flex: 0 0 21px; }
.tbp-suoni-segno__muto { display: none; }
html[data-tbp-suoni="off"] .tbp-suoni-segno__onde { display: none; }
html[data-tbp-suoni="off"] .tbp-suoni-segno__muto { display: inline; }

.tbp-suoni-interruttore__levetta {
  position: relative;
  display: inline-block;
  flex: 0 0 36px;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #084828;
  transition: background-color .16s ease;
}
.tbp-suoni-interruttore__levetta::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 18px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 22%);
  transition: left .16s ease;
}
html[data-tbp-suoni="off"] .tbp-suoni-interruttore__levetta { background: #c4d1c9; }
html[data-tbp-suoni="off"] .tbp-suoni-interruttore__levetta::after { left: 2px; }
html[data-tbp-theme="dark"] .tbp-suoni-interruttore__levetta { background: #3c9a68; }
html[data-tbp-theme="dark"][data-tbp-suoni="off"] .tbp-suoni-interruttore__levetta { background: #4a4a4a; }
@media (prefers-reduced-motion: reduce) {
  .tbp-suoni-interruttore__levetta,
  .tbp-suoni-interruttore__levetta::after { transition: none; }
}
.tbp-suoni-interruttore__stato {
  position: absolute;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- Menu Aspetto dell'intestazione: una riga come i tre temi ------------ */
/* Le regole dei bottoni del menu stanno nel layer tbp-appearance con !important:
   si correggono solo da dentro lo stesso layer. */
@layer tbp-appearance {
  .tbp-appearance .tbp-appearance__choices button.tbp-suoni-interruttore {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-top: 4px !important;
    background: #fff !important;
  }
  .tbp-appearance .tbp-appearance__choices button.tbp-suoni-interruttore .tbp-suoni-interruttore__nome {
    flex: 1 1 auto !important;
    text-align: start !important;
  }
  .tbp-appearance .tbp-appearance__choices button.tbp-suoni-interruttore svg {
    width: 21px !important; height: 21px !important; flex: 0 0 21px !important;
  }
  html[data-tbp-theme="dark"] .tbp-appearance .tbp-appearance__choices button.tbp-suoni-interruttore {
    background: #1d2925 !important;
    border-color: #4a6256 !important;
    color: #ededed !important;
  }
}

/* --- Cassetto: terza pastiglia accanto a Tema e Lingua ------------------- */
#main-menu .tbp-drawer-comandi .tbp-suoni-interruttore--cassetto,
.tbp-drawer-comandi .tbp-suoni-interruttore--cassetto {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid var(--tbp-line, #dce5df) !important;
  border-radius: 12px !important;
  background: var(--tbp-night-surface, #fff) !important;
  color: var(--tbp-night-text, #084828) !important;
  -webkit-text-fill-color: currentColor !important;
  font: 600 13px/1 Manrope, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer;
  touch-action: manipulation;
}
.tbp-drawer-comandi .tbp-suoni-interruttore--cassetto .tbp-suoni-segno { width: 18px; height: 18px; flex-basis: 18px; }
.tbp-drawer-comandi .tbp-suoni-interruttore--cassetto .tbp-suoni-interruttore__levetta { display: none; }
.tbp-drawer-comandi .tbp-suoni-interruttore--cassetto .tbp-suoni-interruttore__nome { white-space: nowrap; }
.tbp-drawer-comandi .tbp-suoni-interruttore--cassetto:focus-visible { outline: 3px solid #b18a17 !important; outline-offset: 3px !important; }
/* Pressione lunga sulla lingua: restano solo le bandiere. */
#main-menu .tbp-drawer-comandi.is-scelta .tbp-suoni-interruttore--cassetto { display: none !important; }

/* --- Profilo: una scheda ------------------------------------------------- */
.tbp-suoni-scheda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0;
  padding: 16px;
  border: 1px solid var(--tbp-line, rgba(8, 72, 40, .14));
  border-radius: 16px;
  background: var(--tbp-night-surface, #fff);
  color: var(--tbp-night-text, #084828);
}
.tbp-suoni-scheda__testo { min-width: 0; }
.tbp-suoni-scheda h2 {
  margin: 0 0 4px !important;
  font: 800 18px/1.3 Manrope, sans-serif !important;
  color: inherit !important;
}
.tbp-suoni-scheda p {
  margin: 0 !important;
  font: 500 14px/1.5 Manrope, sans-serif;
  color: var(--tbp-night-muted, var(--tbp-muted, #5D786B));
}
.tbp-suoni-scheda .tbp-suoni-interruttore--account {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto;
  min-height: 44px !important;
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font: 700 14px/1 Manrope, sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}
.tbp-suoni-scheda .tbp-suoni-interruttore--account::before,
.tbp-suoni-scheda .tbp-suoni-interruttore--account::after { content: none !important; }
.tbp-suoni-scheda .tbp-suoni-interruttore--account .tbp-suoni-segno,
.tbp-suoni-scheda .tbp-suoni-interruttore--account .tbp-suoni-interruttore__nome { display: none !important; }
.tbp-suoni-scheda .tbp-suoni-interruttore--account .tbp-suoni-interruttore__stato {
  position: static; width: auto; height: auto; overflow: visible; clip-path: none;
  text-align: end;
}
.tbp-suoni-scheda .tbp-suoni-interruttore--account:focus-visible { outline: 3px solid #b18a17 !important; outline-offset: 3px !important; }
@media (max-width: 480px) {
  .tbp-suoni-scheda { align-items: flex-start; flex-direction: column; gap: 10px; }
}

@media print {
  .tbp-suoni-interruttore, .tbp-suoni-scheda { display: none !important; }
}