/* parole.css — le voci del lessico graduato.
   Stessi token di grammatica.css: stessa carta, stesso inchiostro, stessi
   spigoli vivi. Qui non c'e' la colonna laterale: una voce di dizionario e'
   una colonna sola, e tutto il resto e' rumore. */

:root{--vino:#6d4a7c;--carta:#fffdf9;--fondo:#f6f4ee;--inchiostro:#2b2620;--tenue:#6b6259;--bordo:#e5e0d4}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--inchiostro);
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 line-height:1.65}

.pa-max{max-width:760px;margin:0 auto;padding:0 20px}
.pa-briciole{font-size:.85rem;color:var(--tenue);padding:14px 0 0}
.pa-briciole a{color:inherit;text-decoration:none}
.pa-briciole a:hover{text-decoration:underline}

article.pa-voce{padding:18px 0 44px}

/* ---- la testata della voce ---- */
.pa-occhiello{color:var(--vino);font-weight:700;letter-spacing:.08em;
 text-transform:uppercase;font-size:.78rem;margin:0 0 6px}
.pa-voce h1{font-family:Georgia,"Times New Roman",serif;
 font-size:clamp(2rem,6vw,2.9rem);margin:0;line-height:1.1;font-weight:400}
.pa-cartellino{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0;
 font-size:.9rem;color:var(--tenue)}
.pa-cartellino i{font-style:italic}
.pa-liv{display:inline-block;background:#f1eaf4;color:var(--vino);font-weight:700;
 font-size:.8rem;letter-spacing:.06em;padding:2px 9px}
.pa-sep{color:var(--bordo)}

/* ---- la definizione: e' il pezzo forte, e si vede ---- */
.pa-def{font-family:Georgia,"Times New Roman",serif;font-size:1.3rem;line-height:1.5;
 background:var(--carta);border-left:3px solid var(--vino);
 padding:16px 22px;margin:22px 0 0}
.pa-def p{margin:0}

.pa-voce h2{font-family:Georgia,serif;font-size:1.25rem;font-weight:400;
 margin:34px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--bordo)}

/* ---- la scheda del verbo ---- */
.pa-scheda{background:var(--carta);border:1px solid var(--bordo);padding:4px 20px;margin:0}
.pa-scheda dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 18px;margin:16px 0}
.pa-scheda dt{color:var(--tenue);font-size:.82rem;letter-spacing:.05em;
 text-transform:uppercase;padding-top:3px}
.pa-scheda dd{margin:0}
.pa-esempio{font-family:Georgia,serif;font-size:1.08rem;font-style:italic;
 margin:0 0 16px;color:var(--inchiostro)}

/* ---- le quattordici lingue ---- */
.pa-lingue{width:100%;border-collapse:collapse;background:var(--carta);
 border:1px solid var(--bordo);font-size:.98rem}
.pa-lingue th,.pa-lingue td{border-bottom:1px solid var(--bordo);padding:9px 14px;
 text-align:left;vertical-align:baseline}
.pa-lingue tr:last-child th,.pa-lingue tr:last-child td{border-bottom:0}
.pa-lingue th{font-weight:400;color:var(--tenue);font-size:.88rem;width:11em;white-space:nowrap}
.pa-lingue th small{display:block;font-size:.8em;opacity:.8}
.pa-lingue td{font-size:1.06rem}
/* l'arabo e il tigrino scritti nel loro verso, non incolonnati a forza */
.pa-lingue td[dir="rtl"]{text-align:right;font-size:1.2rem}

@media (max-width:520px){
 .pa-lingue th{width:auto}
 .pa-lingue th,.pa-lingue td{padding:8px 10px}
}

/* ---- i rimandi ---- */
.pa-rimandi{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pa-rimandi li{margin:0}
.pa-rimandi a{display:block;background:var(--carta);border:1px solid var(--bordo);
 padding:12px 16px;text-decoration:none;color:var(--inchiostro);transition:.15s ease}
.pa-rimandi a:hover{border-color:var(--vino)}
.pa-rimandi b{display:block;color:var(--vino)}
.pa-rimandi span{font-size:.88rem;color:var(--tenue)}

/* ---- vicine nell'alfabeto: le tre schede di .gr-prossimi ---- */
.pa-vicine{display:flex;justify-content:space-between;gap:12px;margin:34px 0 0;
 flex-wrap:wrap;border-top:1px solid var(--bordo);padding-top:18px}
.pa-vicine a{flex:1 1 0;min-width:0;background:var(--carta);border:1px solid var(--bordo);
 border-radius:0;padding:10px 16px;text-decoration:none;color:var(--inchiostro);
 font-size:.92rem;transition:.15s ease}
.pa-vicine a:hover{border-color:var(--vino)}
.pa-vicine a span{display:block;font-size:.78rem;color:var(--tenue)}
.pa-vicine a:last-child{text-align:right}

/* ---- il pulsante «ascolta» --------------------------------------------
   Sta accanto al testo che legge, non in cima alla pagina: cosi' si sa
   sempre che cosa sta per dire. Lo nasconde parole.js se il dispositivo
   non ha una voce italiana. */
.pa-dice{display:inline-flex;align-items:center;justify-content:center;
 vertical-align:baseline;width:31px;height:31px;padding:0;margin:0 0 0 6px;
 border:1px solid var(--bordo);background:var(--carta);color:var(--vino);
 border-radius:0;cursor:pointer;transition:.15s ease;flex:0 0 auto}
/* display:inline-flex batte [hidden] del browser: senza questa riga
   il pulsante nascosto da parole.js resta visibile lo stesso. */
.pa-dice[hidden]{display:none}
.pa-dice:hover{border-color:var(--vino);background:#f1eaf4}
.pa-dice:focus-visible{outline:2px solid var(--vino);outline-offset:2px}
.pa-dice.parla{background:var(--vino);color:#fff;border-color:var(--vino)}
h1 .pa-dice{width:36px;height:36px;margin-left:12px;transform:translateY(-.28em)}

/* ---- la foto: c'e' o non c'e', e quando non c'e' non lascia il buco ---- */
.pa-foto{margin:22px 0 0;border:1px solid var(--bordo);background:var(--carta)}
.pa-foto img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}

/* la definizione ospita il pulsante in fondo alla riga */
.pa-def{display:flex;align-items:flex-start;gap:6px;justify-content:space-between}
.pa-def p{flex:1 1 auto}
.pa-def .pa-dice{margin-top:.15em}

/* ---- la coniugazione ---- */
.pa-scorre{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bordo);
 background:var(--carta)}
.pa-coniuga{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem}
.pa-coniuga th,.pa-coniuga td{padding:8px 14px;text-align:left;
 border-bottom:1px solid var(--bordo);white-space:nowrap}
.pa-coniuga thead th{font-weight:400;font-size:.8rem;letter-spacing:.05em;
 text-transform:uppercase;color:var(--tenue);background:#f1eaf4}
.pa-coniuga thead td{background:#f1eaf4;border-bottom:1px solid var(--bordo)}
.pa-coniuga tbody th{font-weight:400;color:var(--tenue);font-size:.88rem}
.pa-coniuga tbody tr:last-child th,.pa-coniuga tbody tr:last-child td{border-bottom:0}
.pa-nota{font-size:.88rem;color:var(--tenue);margin:8px 0 0}
.pa-nota a{color:var(--vino)}

/* ---- l'esercizio ------------------------------------------------------
   Le stesse misure e gli stessi colori della prova nei capitoli di
   grammatica (grammatica.css, .gr-prova): quella pagina non carica questo
   foglio e viceversa, quindi le regole sono ripetute qui apposta. Se lassu'
   cambiano i colori del giusto e dello sbagliato, cambiarli anche qui. */
.pa-prova-sez{margin:34px 0 0}
.pa-prova-sez h2{margin-top:0}
.pa-prova-cons{margin:0 0 12px;font-size:.95rem;color:var(--tenue)}
.pa-prova-cons b{color:var(--inchiostro)}
.pa-prova{background:var(--carta);border:1px solid var(--bordo);padding:18px 20px}
.pa-prova ol{margin:0 0 12px;padding-left:22px}
.pa-prova li{margin:0 0 10px;line-height:2}
.pa-prova select{font-size:16px;font-family:inherit;padding:3px 6px;
 border:1.5px solid var(--bordo);border-radius:0;background:#fff;color:var(--inchiostro)}
.pa-prova select.giusto{border-color:#2f6b3a;background:#eef6ef}
.pa-prova select.sbagliato{border-color:#a33;background:#faeeee}
.pa-soluzione{color:#2f6b3a}
.pa-prova-tasti{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.pa-prova-tasti button{font-size:.95rem;font-weight:700;font-family:inherit;
 border-radius:0;padding:9px 18px;cursor:pointer;border:0;background:var(--vino);color:#fff}
.pa-prova-tasti button.secondario{background:transparent;color:var(--vino);
 border:1.5px solid var(--vino)}
.pa-prova-punti{font-size:.92rem;font-weight:700}
.pa-prova-nota{margin:14px 0 0;font-size:.95rem;padding:11px 14px;
 border-left:3px solid var(--vino);background:var(--fondo)}

@media (max-width:520px){
 .pa-coniuga th,.pa-coniuga td{padding:7px 10px}
}

/* ---- i collegamenti dentro la definizione ------------------------------
   Sottolineatura punteggiata invece del blu pieno: la definizione resta una
   frase da leggere, non una fila di link. */
.pa-def a{color:inherit;text-decoration:none;
 border-bottom:1px dotted var(--vino);padding-bottom:1px}
.pa-def a:hover{color:var(--vino);border-bottom-style:solid}

/* ---- parole dello stesso tema ---- */
.pa-tema{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pa-tema li{margin:0}
.pa-tema a{display:inline-flex;align-items:baseline;gap:7px;
 background:var(--carta);border:1px solid var(--bordo);padding:7px 13px;
 text-decoration:none;color:var(--inchiostro);font-size:.98rem;transition:.15s ease}
.pa-tema a:hover{border-color:var(--vino);color:var(--vino)}
.pa-tema a span{font-size:.72rem;letter-spacing:.05em;color:var(--tenue)}

/* ---- l'indice della sezione ---- */
.pa-intro{font-family:Georgia,"Times New Roman",serif;font-size:1.12rem;
 margin:14px 0 0;max-width:34em}
.pa-voce h3{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
 color:var(--tenue);font-weight:400;margin:22px 0 8px}

/* --- banner app: le regole di layout vivono in grammatica.css, che qui
   non si carica (styla un'altra pagina). Copiate solo quelle che il banner
   usa. Se il banner cambia forma la', vanno riprese: il marcatore serve a
   ritrovarle. --- */
/*banner-app-da-grammatica*/
/* banner app autosufficiente: le pagine grammatica non caricano esercizi.css,
   quindi tutte le misure vivono qui (schermate piccole, testo accanto) */
.ex-app-promo{display:flex;flex-wrap:wrap;align-items:center;gap:22px;background:var(--carta);border-radius:0;padding:20px 22px;margin:26px 0}
/* niente border: le schermate hanno gia' la cornice del telefono dentro, e su fondo scuro quel filetto chiaro faceva da contorno */
.ex-app-promo-body{flex:1 1 300px;min-width:0}
.ex-app-promo-body h3{margin:0 0 6px;font-family:Georgia,serif;font-size:1.15rem;color:var(--inchiostro)}
.ex-app-promo-body p{margin:0 0 12px;font-size:.93rem;color:var(--tenue)}
.app-stelle{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--tenue);margin:0 0 6px}
.stelle-gialle{color:#e8a33d;letter-spacing:1px}
.ex-app-promo .button{display:inline-block;background:var(--vino);color:#fff;text-decoration:none;border-radius:0;padding:11px 20px;font-weight:700}
.ex-app-promo .button:hover{opacity:.92}
@media (max-width:600px){
.ex-app-promo{justify-content:center;text-align:center;padding:16px}
.app-stelle{justify-content:center}
}
/* 143 · riquadro dell'app: niente pastiglia intorno al percorso, e due serie
   di colori. Le forzature del 137 e del 139 stavano sopra a queste e sul tema
   scuro rendevano il titolo illeggibile: le toglie lo script. */
.pa-max .ex-app-promo-body h3{display:block;color:#2b2620;line-height:1.35}
.pa-max .ex-app-promo-body h3 span{display:inline;background:none;border:0;padding:0;
  border-radius:0;font:inherit;font-weight:700;color:#6d4a7c;opacity:1}
.pa-max .ex-app-promo-body p{color:#6b6259}
.pa-max .ex-app-promo-body p strong,.pa-max .ex-app-promo-body p b{color:#2b2620}
.pa-max .ex-app-promo-body em{color:#6d4a7c;font-style:normal;font-weight:700}
.pa-max .app-stelle span{color:#6b6259}
.pa-max .app-stelle .stelle-gialle{color:#e8a33d}
@media (prefers-color-scheme:dark){
.pa-max .ex-app-promo-body h3{color:#f5f1ea}
.pa-max .ex-app-promo-body h3 span,.pa-max .ex-app-promo-body em{color:#d3aeea}
.pa-max .ex-app-promo-body p{color:#cdc6bc}
.pa-max .ex-app-promo-body p strong,.pa-max .ex-app-promo-body p b{color:#f5f1ea}
.pa-max .app-stelle span{color:#cdc6bc}
}
/* 143 · riquadro dell'app: niente pastiglia intorno al percorso, e due serie
   di colori. Le forzature del 137 e del 139 stavano sopra a queste e sul tema
   scuro rendevano il titolo illeggibile: le toglie lo script. */
.pa-max .ex-app-promo-body h3{display:block;color:#2b2620;line-height:1.35}
.pa-max .ex-app-promo-body h3 span{display:inline;background:none;border:0;padding:0;
  border-radius:0;font:inherit;font-weight:700;color:#6d4a7c;opacity:1}
.pa-max .ex-app-promo-body p{color:#6b6259}
.pa-max .ex-app-promo-body p strong,.pa-max .ex-app-promo-body p b{color:#2b2620}
.pa-max .ex-app-promo-body em{color:#6d4a7c;font-style:normal;font-weight:700}
.pa-max .app-stelle span{color:#6b6259}
.pa-max .app-stelle .stelle-gialle{color:#e8a33d}
@media (prefers-color-scheme:dark){
.pa-max .ex-app-promo-body h3{color:#f5f1ea}
.pa-max .ex-app-promo-body h3 span,.pa-max .ex-app-promo-body em{color:#d3aeea}
.pa-max .ex-app-promo-body p{color:#cdc6bc}
.pa-max .ex-app-promo-body p strong,.pa-max .ex-app-promo-body p b{color:#f5f1ea}
.pa-max .app-stelle span{color:#cdc6bc}
}

/* fondo sempre scuro, quindi testo sempre chiaro: senza queste righe il
   paragrafo usciva rgb(31,35,32) su rgb(31,35,32), cioe' invisibile. */
.pa-max .ex-app-promo-body h3{color:#fff}
.pa-max .ex-app-promo-body p{color:rgba(255,255,255,.9)}
.pa-max .ex-app-promo-body p strong,.pa-max .ex-app-promo-body p b{color:#fff}
.pa-max .ex-app-promo-body p i{color:#d3aeea;font-style:normal}
.pa-max .app-stelle span{color:rgba(255,255,255,.82)}
.pa-max .app-stelle .stelle-gialle{color:#e8a33d}
.pa-max .app-zoek{color:rgba(255,255,255,.9)}
.pa-max .gr-abb{background:rgba(255,255,255,.1)}
.pa-max .gr-abb-ann{color:rgba(255,255,255,.92)}

/* la riga «meta' percorso gratis» e' gialla per uno <style> dentro la pagina
   di grammatica, non per un foglio: qui va riscritta. */
.pa-max .gr-abb-gratis{color:#FFC93C;font-weight:600}

/* e queste stanno anch'esse negli <style> della pagina di grammatica (ce ne
   sono dieci). Copiate solo quelle che toccano un elemento che il banner ha
   davvero: il ventaglio, la riga del prezzo, le stelline. */
.pa-max .app-stelle-ico,.pa-max .app-stelle > span[aria-hidden="true"]{color:#FFC93C}
.pa-max .ex-app-promo-body h3{font-size:1.26rem;line-height:1.32}
.pa-max .gr-abb p{margin:0;font-size:.88rem;line-height:1.5;color:rgba(255,255,255,.88)}
.pa-max .gr-abb-riga{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:5px}
.pa-max .gr-abb-ann{font-size:.88rem}
/*/banner-app-da-grammatica*/