/* Stile condiviso per le pagine di help di CreaVideoLyrics.
   Un unico file cosi' se cambia la grafica va toccato solo qui. */
/* NUOVO (21/09, su richiesta di Mirco: "il tema scuro non mi piace") -
   stessa struttura di prima, solo i valori delle variabili colore
   invertiti su un tema chiaro. */
:root{
  --bg:#f5f6f8;
  --bg-panel:#ffffff;
  --testo:#20242b;
  --testo-attenuato:#5a6270;
  --accento:#1d6fb8;
  --ok:#2f8f5b;
  --warn:#a06a10;
  --bordo:#d5d9e0;
}
*{box-sizing:border-box;}
body{
  margin:0;
  padding:0 0 60px 0;
  background:var(--bg);
  color:var(--testo);
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  font-size:15px;
  line-height:1.55;
}
header{
  background:var(--bg-panel);
  border-bottom:1px solid var(--bordo);
  padding:18px 28px;
  position:sticky;
  top:0;
}
header h1{
  margin:0;
  font-size:20px;
}
header p{
  margin:4px 0 0 0;
  color:var(--testo-attenuato);
  font-size:13px;
}
nav.indice{
  max-width:820px;
  margin:24px auto 0 auto;
  padding:16px 20px;
  background:var(--bg-panel);
  border:1px solid var(--bordo);
  border-radius:8px;
}
nav.indice h2{
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--testo-attenuato);
  margin:0 0 10px 0;
}
nav.indice ul{
  margin:0;
  padding-left:20px;
  columns:2;
}
nav.indice li{margin-bottom:6px;}
nav.indice a{color:var(--accento);text-decoration:none;}
nav.indice a:hover{text-decoration:underline;}

main{
  max-width:820px;
  margin:24px auto 0 auto;
  padding:0 20px;
}
section.argomento{
  background:var(--bg-panel);
  border:1px solid var(--bordo);
  border-radius:8px;
  padding:20px 24px;
  margin-bottom:18px;
  scroll-margin-top:90px; /* cosi' l'ancora non finisce sotto l'header sticky */
}
section.argomento h2{
  margin-top:0;
  font-size:18px;
  color:var(--testo);
  border-bottom:1px solid var(--bordo);
  padding-bottom:8px;
}
section.argomento h3{
  font-size:14px;
  color:var(--testo-attenuato);
  margin:16px 0 6px 0;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.perche{
  border-left:3px solid var(--accento);
  background:#eaf2fa;
  padding:10px 14px;
  border-radius:0 6px 6px 0;
  margin:10px 0;
}
.perche strong{color:var(--accento);}
.attenzione{
  border-left:3px solid var(--warn);
  background:#faf2e2;
  padding:10px 14px;
  border-radius:0 6px 6px 0;
  margin:10px 0;
}
.attenzione strong{color:var(--warn);}
ul.suggerimenti{padding-left:20px;}
ul.suggerimenti li{margin-bottom:6px;}
code{
  background:#eceff3;
  padding:1px 6px;
  border-radius:4px;
  font-size:13px;
}
.torna-su{
  display:block;
  text-align:right;
  font-size:12px;
  margin-top:10px;
}
.torna-su a{color:var(--testo-attenuato);text-decoration:none;}
footer{
  max-width:820px;
  margin:20px auto 0 auto;
  padding:0 20px;
  color:var(--testo-attenuato);
  font-size:12px;
}

/* NUOVO (27/09): riquadro in evidenza (correzioni automatiche del MIDI) */
section.evidenza{
  background:linear-gradient(135deg,#eaf3fc,#ffffff);
  border:2px solid var(--accento);
  border-radius:10px;
  padding:20px 24px;
  margin-bottom:18px;
  scroll-margin-top:90px;
}
section.evidenza h2{margin-top:0;color:var(--accento);}
section.evidenza ul{padding-left:20px;}
section.evidenza li{margin-bottom:6px;}

/* NUOVO (29/09): ricerca nelle pagine di help (creata da help.js) */
header{z-index:10;}
.cerca-box{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}
.cerca-campo{
  flex:1 1 260px;
  max-width:420px;
  padding:7px 10px;
  font:inherit;
  font-size:14px;
  color:var(--testo);
  background:#fff;
  border:1px solid var(--bordo);
  border-radius:6px;
  outline:none;
}
.cerca-campo:focus{border-color:var(--accento);box-shadow:0 0 0 2px #1d6fb833;}
.cerca-campo::-webkit-search-cancel-button{display:none;}
.cerca-pulisci{
  border:1px solid var(--bordo);
  background:var(--bg-panel);
  color:var(--testo-attenuato);
  border-radius:6px;
  width:30px;
  height:30px;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
.cerca-pulisci:hover{color:var(--testo);border-color:var(--accento);}
.cerca-conteggio{font-size:13px;color:var(--testo-attenuato);}
mark.cerca-hit{background:#ffe58a;color:inherit;padding:0 1px;border-radius:2px;}

/* NUOVO (30/09): tabelle semplici (es. scala del Vol % nella griglia canali) */
table{border-collapse:collapse;margin:8px 0;font-size:.95em;}
th,td{border:1px solid #cfd6de;padding:3px 10px;text-align:left;}
th{background:#eceff3;color:var(--testo);}