/* modulo: lettore — biblioteca, testi poetici, insight, esame del Vate.
   Regola tipografica: il font pixel resta all'interfaccia (titoli, linguette,
   bottoni); i TESTI di d'Annunzio vanno in EB Garamond, altrimenti la poesia
   non si legge. Il font è già caricato da index.html. */

/* ---------------- carta del lettore ----------------
   Colonna flessibile: testata e bottone fermi, corpo unico a scorrere.
   Senza questo la carta scorre dentro il pannello E il testo dentro la carta:
   due barre annidate, e su schermo basso il bottone CHIUDI sparisce. */
.ltcard {
  text-align: left; max-width: 470px; padding: 10px 10px 8px;
  display: flex; flex-direction: column; overflow: hidden;
}
/* la testata è fissa: va tenuta bassa, ogni pixel è riga di poesia in meno */
.ltcard .cnum { text-align: center; font-size: 11px; line-height: 1.5; margin-bottom: 3px; flex: 0 0 auto; }
.ltcard .csub { text-align: center; font-size: 7px; color: #7a6a4a; margin-bottom: 6px; flex: 0 0 auto; }
.ltcard .ltnav { margin-bottom: 6px; flex: 0 0 auto; }
.ltcard > .qbtn { flex: 0 0 auto; margin-top: 6px; padding: 8px 10px; font-size: 8px; }

/* linguette TESTO · SCHEDA · RIMANDI */
.ltnav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.lttab {
  font-family: inherit; font-size: 7px; padding: 7px 6px; cursor: pointer;
  border: 2px solid var(--ink); background: #e8dcc0; border-radius: 4px;
}
.lttab.on { background: var(--acc); }

/* corpo scorrevole: l'unico che scorre */
.ltbody { flex: 1 1 auto; min-height: 60px; overflow: auto; padding-right: 2px; }

/* selettore dei brani, quando l'opera ne ha più d'uno */
.ltbrani { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.ltbrano {
  font-family: inherit; font-size: 7px; padding: 6px 5px; cursor: pointer;
  border: 2px dashed var(--ink); background: #f0e8cc; border-radius: 4px;
}
.ltbrano.on { background: #fff8e8; border-style: solid; }

/* intestazione del brano */
.lttit { font-size: 8px; color: #7a2c2c; line-height: 1.7; margin-bottom: 2px; }
.ltocchiello { font-size: 7px; color: #7a6a4a; line-height: 1.7; margin-bottom: 8px; }
.lttag {
  display: inline-block; font-size: 6px; padding: 3px 4px; margin-left: 5px;
  border-radius: 3px; background: #7a2c2c; color: var(--cream); vertical-align: middle;
}
.lttag.est { background: #7a6a4a; }

/* ---------------- il testo vero e proprio ---------------- */
.lttesto {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-size: 16px; line-height: 1.5; color: #241d12;
  background: #fffaf0; border: 2px solid #d8c8a0; border-radius: 4px;
  padding: 10px 10px 12px;
  user-select: text; -webkit-user-select: text;
}
/* versi: a capo veri, rientro pendente per quelli lunghi */
.lttesto .v { display: block; padding-left: 14px; text-indent: -14px; }
.lttesto .strofa { margin-bottom: 10px; }
.lttesto .strofa:last-child { margin-bottom: 0; }
/* prosa */
.lttesto p { margin-bottom: 9px; }
.lttesto p:last-child { margin-bottom: 0; }
.lttesto .centro { text-align: center; letter-spacing: 1px; }
.lttesto em { font-style: italic; }

/* parola glossata: cliccabile, sottolineata leggera */
.gl {
  font-style: normal; border-bottom: 1px dotted #a0703a;
  cursor: pointer; color: #6a3a10;
}
.gl:active, .gl.on { background: #f0dca0; }

/* riquadro della glossa, sotto il testo */
.ltglossa {
  font-family: 'EB Garamond', Georgia, serif; font-size: 14px; line-height: 1.45;
  background: #f4ecd4; border: 2px dashed var(--ink); border-radius: 4px;
  padding: 8px 10px; margin-top: 8px; color: #3a2f1c;
}
.ltglossa b { font-weight: 600; color: #7a2c2c; }
.ltglossa .via {
  display: block; font-family: 'Press Start 2P', monospace;
  font-size: 6px; color: #7a6a4a; margin-top: 6px;
}

/* nota del brano e fonte: la nota è commento d'autore, quindi serif */
.ltnota {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 15px; line-height: 1.45; color: #3a2f1c; margin-top: 10px;
  border-left: 3px solid var(--acc); padding-left: 8px;
}
.ltfonte { font-size: 7px; color: #7a6a4a; line-height: 1.8; margin-top: 6px; }

/* barra di fine lettura */
.ltfine { margin-top: 10px; }
.ltletto {
  font-size: 7px; color: #2c5a2c; line-height: 1.9; text-align: center;
  border: 2px solid #2c5a2c; border-radius: 4px; padding: 6px; margin-top: 10px;
}

/* ---------------- scheda insight ---------------- */
/* prosa da leggere, non interfaccia: serif. Le etichette restano pixel. */
.ltscheda {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 15px; line-height: 1.45; color: #3a2f1c;
}
.ltscheda .voce { margin-bottom: 10px; }
.ltscheda .et {
  font-family: 'Press Start 2P', monospace; font-size: 7px; line-height: 1.9;
  color: #7a2c2c; display: block; margin-bottom: 3px;
}
.ltscheda .dim { font-family: 'Press Start 2P', monospace; font-size: 8px; }
.ltnotacodex {
  font-family: 'EB Garamond', Georgia, serif; font-size: 14.5px; line-height: 1.5;
  background: #fffaf0; border: 2px solid #d8c8a0; border-radius: 4px;
  padding: 10px; margin-bottom: 10px; color: #241d12;
}

/* ---------------- rimandi ---------------- */
.ltrim { font-size: 8px; line-height: 1.8; }
.ltdomanda {
  font-family: 'EB Garamond', Georgia, serif; font-size: 15px; line-height: 1.45;
  background: #fffaf0; border: 2px solid #d8c8a0; border-radius: 4px;
  padding: 10px; margin-bottom: 6px; color: #241d12;
}
.ltdomanda b { color: #7a2c2c; font-weight: 600; }

/* ---------------- scheda di menu STUDIO ---------------- */
.ltbarra {
  position: relative; height: 9px; margin: 6px 0 10px;
  background: #5a5244; border: 2px solid var(--ink); border-radius: 3px; overflow: hidden;
}
.ltbarra > i { display: block; height: 100%; background: #4a7a9a; }
.ltgrande {
  font-size: 20px; color: #7a2c2c; text-align: center;
  margin: 4px 0 6px; text-shadow: 2px 2px 0 #e0d4b0;
}
.ltgrande span { font-size: 9px; color: #4a4034; }
.ltspunta { float: right; font-size: 7px; color: #2c5a2c; margin-left: 6px; }
.ltspunta.no { color: #9a8a6a; }

/* ---------------- esame del Vate ---------------- */
.ltesame { text-align: left; display: flex; flex-direction: column; overflow: hidden; }
.ltesame > * { flex: 0 0 auto; }
.ltesame .cnum { text-align: center; }
.ltpunteggio { font-size: 8px; line-height: 1.9; text-align: center; margin-bottom: 8px; }
.ltprogress { font-size: 7px; color: #7a6a4a; text-align: center; margin-bottom: 8px; }
.ltesito { font-size: 8px; line-height: 1.9; margin-bottom: 6px; }
.ltesito.ok { color: #2c5a2c; }
.ltesito.ko { color: #7a2c2c; }
.ltspiega {
  font-family: 'EB Garamond', Georgia, serif; font-size: 15px; line-height: 1.5;
  background: #fffaf0; border: 2px solid #d8c8a0; border-radius: 4px;
  padding: 10px; margin-bottom: 8px; color: #241d12;
  flex: 1 1 auto; min-height: 60px; overflow: auto;
}
/* anche la domanda dell'esame può essere lunga */
.ltesame .qbtns { flex: 0 0 auto; }
.ltesame .ltdomanda { flex: 0 1 auto; overflow: auto; }