/* generato da grammatica_136.py: non modificare a mano,
   viene riscritto al prossimo giro. */
: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.6}
.gr-max{max-width:1120px;margin:0 auto;padding:0 20px}
.gr-briciole{font-size:.85rem;color:var(--tenue);padding:14px 0 0}
.gr-briciole a{color:inherit;text-decoration:none}
.gr-briciole a:hover{text-decoration:underline}
.gr-testa{padding:26px 0 8px}
.gr-testa h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.8rem,4.5vw,2.6rem);margin:0 0 10px;line-height:1.15}
.gr-testa p{max-width:740px;margin:0}
.gr-corpo{display:grid;grid-template-columns:220px 1fr;gap:30px;padding:26px 0 40px}
.gr-fianco{position:sticky;top:calc(var(--u-h,64px) + 16px);align-self:start;background:var(--carta);border:1px solid var(--bordo);border-radius:0;padding:10px;max-height:calc(100dvh - var(--u-h,64px) - 32px);overflow-y:auto}
.gr-fianco h2{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue);margin:4px 8px 6px}
.gr-fianco details{border-radius:0}
.gr-fianco details[open]{background:var(--fondo)}
.gr-fianco summary{display:flex;align-items:baseline;gap:10px;cursor:pointer;list-style:none;padding:8px 10px;border-radius:0}
.gr-fianco summary::-webkit-details-marker{display:none}
.gr-fianco summary:hover{background:var(--fondo)}
.gr-fianco summary b{color:var(--vino);font-size:1.02rem;min-width:26px}
.gr-fianco summary span{font-size:.86rem;color:var(--tenue)}
.gr-fianco summary::after{content:"\25BE";margin-left:auto;color:var(--tenue);font-size:.7rem;transition:transform .15s ease}
.gr-fianco details[open] summary::after{transform:rotate(180deg)}
.gr-fianco ul{list-style:none;margin:0;padding:0 6px 8px 14px}
.gr-fianco ul a{display:block;font-size:.85rem;color:var(--inchiostro);text-decoration:none;padding:4px 8px;border-radius:0}
.gr-fianco ul a:hover{background:#fff}
.gr-fianco ul a[aria-current]{background:#f1eaf4;color:var(--vino);font-weight:700}
.gr-fianco-extra{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--inchiostro);border-radius:0;padding:8px 10px;margin-top:2px}
.gr-fianco-extra b{color:var(--vino);font-size:1.02rem;min-width:26px}
.gr-fianco-extra span{font-size:.86rem;color:var(--tenue)}
.gr-fianco-extra:hover{background:var(--fondo)}
.gr-liv{margin:0 0 30px}
.gr-liv h2{font-family:Georgia,serif;font-size:1.4rem;margin:0 0 3px;scroll-margin-top:16px}
.gr-liv h2 b{color:var(--vino)}
.gr-liv p.filo{color:var(--tenue);margin:0 0 14px;font-size:.95rem}
.gr-arg{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px;margin:0 0 12px}
.gr-arg a{display:block;background:var(--carta);border:1px solid var(--bordo);border-radius:0;padding:11px 14px;text-decoration:none;color:var(--inchiostro);transition:border-color .15s ease,transform .15s ease}
.gr-arg a:hover{border-color:var(--vino);transform:none}
.gr-arg strong{display:block;font-size:.97rem;margin:0 0 2px}
.gr-arg span{font-size:.82rem;color:var(--tenue)}
.gr-riga-app{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.9rem;color:var(--tenue);border-left:3px solid var(--vino);padding:4px 0 4px 12px;margin:0}
.gr-riga-app a{color:var(--vino);font-weight:700;text-decoration:none;white-space:nowrap}
.gr-riga-app a:hover{text-decoration:underline}
.gr-fine{background:var(--carta);border:1px solid var(--bordo);border-radius:0;padding:18px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.gr-fine p{margin:0;flex:1 1 320px}
.gr-fine a{background:var(--vino);color:#fff;text-decoration:none;border-radius:0;padding:10px 18px;font-weight:700;white-space:nowrap}
@media (max-width:820px){
.gr-corpo{display:block}
.gr-fianco{position:static;max-height:none;margin:0 0 22px}
}
/* 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:1px solid var(--bordo);border-radius:0;padding:20px 22px;margin:26px 0}
.app-scatti{display:flex;gap:10px;flex:0 0 auto;margin:0}
.app-scatto{margin:0;display:block}
.app-scatto img{width:96px;height:auto;display:block;border-radius:0;border:1px solid var(--bordo);box-shadow:none}
.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-scatto img{width:80px}
.app-stelle{justify-content:center}
}

/* 136 · pagina delle schede */
.sc-testa{padding:26px 0 6px}
.sc-livello{margin:0 0 26px}
.sc-livello h2{font-family:Georgia,serif;font-size:1.35rem;margin:0 0 2px;scroll-margin-top:16px}
.sc-livello h2 b{color:var(--vino)}
.sc-livello p.filo{color:var(--tenue);margin:0 0 12px;font-size:.94rem}
.sc-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:0 0 12px}
.sc-griglia a{display:flex;align-items:flex-start;gap:10px;background:var(--carta);border:1px solid var(--bordo);border-radius:0;padding:11px 14px;text-decoration:none;color:var(--inchiostro);transition:border-color .15s ease,transform .15s ease}
.sc-griglia a:hover{border-color:var(--vino);transform:none}
.sc-griglia a svg{flex:0 0 auto;margin-top:2px}
.sc-griglia strong{display:block;font-size:.95rem;margin:0 0 2px}
.sc-griglia span{font-size:.81rem;color:var(--tenue)}
.sc-tutto{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:var(--carta);border:1.5px dashed var(--vino);border-radius:0;padding:14px 18px;margin:0 0 26px}
.sc-tutto p{margin:0;flex:1 1 300px;font-size:.94rem}
.sc-consiglio{background:var(--carta);border:1px solid var(--bordo);border-left:3px solid var(--vino);border-radius:0;padding:16px 20px;margin:26px 0}
.sc-consiglio h2{font-family:Georgia,serif;font-size:1.2rem;margin:0 0 6px}
.sc-consiglio p{margin:0 0 8px;font-size:.94rem}
.sc-consiglio p:last-child{margin:0}
.sc-consiglio a{color:var(--vino);font-weight:700}
.gr-pdf-tasto{background:var(--vino);color:#fff;text-decoration:none;border-radius:0;padding:11px 18px;font-weight:700;white-space:nowrap;display:inline-block}
.gr-pdf-tasto:hover{opacity:.92}
.sc-licenza{font-size:.83rem;color:var(--tenue);border-top:1px solid var(--bordo);padding:14px 0 0;margin:26px 0 0}

/* 138 · il disclaimer del piede andava a capo ogni sei parole: su desktop
   prende tutta la riga invece di stare in una colonna stretta */
.u-piede .u-disc{grid-column:1/-1;flex:1 1 100%;width:100%;max-width:none}
.u-piede .u-disc p{max-width:none;column-count:1;text-wrap:pretty}
@media (min-width:900px){.u-piede .u-disc p{font-size:.83rem;line-height:1.6}}

/* 139 · il nome del percorso nel banner: etichetta, non testo qualunque */
.gr-max .ex-app-promo-body h3{color:var(--inchiostro);display:flex;flex-wrap:wrap;
  align-items:baseline;gap:8px;line-height:1.3}
.gr-max .ex-app-promo-body h3 span{display:inline-block;background:#f1eaf4;color:var(--vino);
  border-radius:0;padding:2px 12px;font-size:.86em;font-family:-apple-system,
  BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-weight:700;letter-spacing:.01em;
  -webkit-text-fill-color:currentColor;opacity:1;border:0}
/* 139 · piede: aria sotto la firma e crediti fotografici */
.u-piede .u-note{padding-bottom:26px}
.u-piede .u-firma{margin-top:16px}
.u-crediti-foto{font-size:.8rem;line-height:1.5;opacity:.85;margin:0 0 16px}
.u-crediti-foto b{display:block;margin:0 0 4px;font-size:.82rem}
.u-crediti-foto p{margin:0}

/* ------------------------------------------------------------
   GRUPPO 1, 16 agosto 2026: l'indice della grammatica.

   Prima: nove rettangoli identici in tre colonne, ognuno col suo
   bordo, tutti della stessa altezza. E' l'impaginazione che fa
   una macchina quando le dai una lista e non sa che farci.

   Adesso: un indice, come in fondo a un libro. Due colonne di
   righe separate da un filo, il titolo sopra e la spiegazione
   sotto in piccolo. Nessuna scatola. Al passaggio del dito
   compare un filo colorato a sinistra e il titolo cambia colore,
   cosi' si capisce dove si e' senza che niente si muova.

   Solo stile: il codice delle pagine non cambia di una virgola.
   ------------------------------------------------------------ */
.gr-arg,
.sc-griglia{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 46px;
  margin:0 0 22px;
  border-top:1px solid var(--bordo);
}
.gr-arg a,
.sc-griglia a{
  display:block;
  background:none;
  border:none;
  border-bottom:1px solid var(--bordo);
  padding:13px 0 13px 0;
  transition:padding-left .13s ease, color .13s ease;
}
.gr-arg a:hover,
.sc-griglia a:hover{
  border-color:var(--bordo);
  background:none;
  padding-left:11px;
  box-shadow:inset 2px 0 0 var(--vino);
}
.gr-arg strong,
.sc-griglia strong{
  display:block;
  font-size:1.02rem;
  line-height:1.3;
  margin:0 0 2px;
  font-weight:600;
}
.gr-arg a:hover strong,
.sc-griglia a:hover strong{ color:var(--vino); }
.gr-arg span,
.sc-griglia span{
  display:block;
  font-size:.83rem;
  line-height:1.45;
  color:var(--tenue);
}
/* nella pagina delle schede l'icona resta accanto al titolo */
.sc-griglia a{ display:flex; align-items:flex-start; gap:11px; }
.sc-griglia a > svg{ margin-top:3px; }

@media (max-width:700px){
  .gr-arg,
  .sc-griglia{ grid-template-columns:1fr; gap:0; }
}