/* Frasario accademico italiano — quaderno tecnico.
   Palette: Inchiostro #161A20 · Carta fredda #F4F6F8 · Blu penna #2244BB
            Evidenziatore #FFE45C (solo slot e match) · Grigio matita #5A6472 */

:root {
  --inchiostro: #161a20;
  --carta: #f4f6f8;
  --scheda: #ffffff;
  --penna: #2244bb;
  --penna-fondo: #e8edfb;
  --evidenziatore: #ffe45c;
  --matita: #5a6472;
  --bordo: #d6dce3;
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --inchiostro: #e8eaf0;
    --carta: #14161b;
    --scheda: #1d2027;
    --penna: #8fa5ff;
    --penna-fondo: #232a44;
    --evidenziatore: #ffe45c;
    --matita: #9aa3b2;
    --bordo: #333945;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--sans);
  line-height: 1.55;
}
a { color: var(--penna); }
:focus-visible { outline: 3px solid var(--penna); outline-offset: 2px; border-radius: 2px; }

.salta {
  position: absolute; left: -999px; top: 0;
  background: var(--penna); color: #fff; padding: .6rem 1rem; z-index: 10;
}
.salta:focus { left: .5rem; top: .5rem; }

/* --- testata --- */
.testata { max-width: 68rem; margin: 0 auto; padding: 1.6rem 1rem .6rem; }
.marchio { display: flex; gap: .9rem; align-items: flex-start; }
.slot-logo {
  font-family: var(--serif); font-size: 1.5rem; line-height: 1;
  background: var(--evidenziatore); color: #161a20;
  border: 2px dashed #b89a00; border-radius: .35rem;
  padding: .45rem .5rem; flex: none; transform: rotate(-2deg);
}
.testata h1 { margin: 0; font-size: 1.45rem; letter-spacing: -.01em; }
.motto { margin: .25rem 0 0; color: var(--matita); max-width: 44rem; }
.cerca { margin-top: 1rem; display: flex; gap: .6rem; }
@media (max-width: 560px) { .cerca { flex-direction: column; } }
.scarica {
  flex: none; display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem .95rem; border: 1.5px solid var(--penna); border-radius: .5rem;
  color: var(--penna); background: var(--scheda); text-decoration: none;
  font-weight: 600; font-size: .92rem;
}
.scarica:hover { background: var(--penna-fondo); }
#q {
  flex: 1;
  width: 100%; font-size: 1.05rem; padding: .7rem .9rem;
  border: 2px solid var(--bordo); border-radius: .5rem;
  background: var(--scheda); color: var(--inchiostro);
}
#q:focus { border-color: var(--penna); outline: none; }

/* --- colonne --- */
.colonne {
  max-width: 68rem; margin: 1rem auto 0; padding: 0 1rem;
  display: grid; grid-template-columns: 15.5rem 1fr; gap: 1.4rem;
}
@media (max-width: 760px) { .colonne { grid-template-columns: 1fr; } }

/* --- navigazione per funzione --- */
.funzioni { align-self: start; position: sticky; top: .8rem; max-height: calc(100vh - 2rem); overflow: auto; }
@media (max-width: 760px) { .funzioni { position: static; max-height: none; } }
.funzioni h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--matita); margin: 1rem 0 .25rem; font-weight: 600;
}
.funzioni button {
  display: flex; justify-content: space-between; gap: .5rem; width: 100%;
  text-align: left; border: 0; background: none; color: var(--inchiostro);
  padding: .32rem .55rem; border-radius: .4rem; font-size: .92rem; cursor: pointer;
}
.funzioni button:hover { background: var(--penna-fondo); }
.funzioni button[aria-pressed="true"] {
  background: var(--penna); color: #fff; font-weight: 600;
}
.funzioni .conta { color: var(--matita); font-family: var(--mono); font-size: .78rem; }
.funzioni button[aria-pressed="true"] .conta { color: #dfe6ff; }

/* --- filtri --- */
.filtri {
  display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center;
  padding: .6rem .8rem; background: var(--scheda);
  border: 1px solid var(--bordo); border-radius: .6rem; font-size: .88rem;
}
.filtri label { display: inline-flex; align-items: center; gap: .35rem; color: var(--matita); }
.filtri select {
  font: inherit; color: var(--inchiostro); background: var(--carta);
  border: 1px solid var(--bordo); border-radius: .35rem; padding: .2rem .3rem;
}
.bozze-check { margin-left: auto; }

.stato-lista { color: var(--matita); font-size: .88rem; margin: .8rem 0 .4rem; }

/* --- schede frase --- */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.frase {
  background: var(--scheda); border: 1px solid var(--bordo);
  border-left: 4px solid var(--penna); border-radius: .6rem;
  padding: 1rem 1.1rem .8rem;
}
.frase .testo {
  font-family: var(--serif); font-size: 1.18rem; line-height: 1.5;
  margin: 0 0 .5rem;
}
.slot {
  background: var(--evidenziatore); color: #161a20;
  border: 1.5px dashed #b89a00; border-radius: .3rem;
  padding: 0 .3rem; font-style: italic; white-space: nowrap;
}
mark.trovato { background: var(--evidenziatore); color: #161a20; border-radius: .2rem; }
.variante {
  font-family: var(--serif); color: var(--matita); margin: .1rem 0 .4rem;
  font-size: .98rem;
}
.variante::before { content: 'var. '; font-family: var(--mono); font-size: .72rem; }
.nota {
  font-size: .9rem; color: var(--matita); margin: .4rem 0 .6rem;
  border-left: 2px solid var(--bordo); padding-left: .7rem;
}
.piede-frase { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.chip {
  font-size: .74rem; font-family: var(--mono);
  background: var(--penna-fondo); color: var(--penna);
  border-radius: 99px; padding: .12rem .55rem; border: 0; cursor: pointer;
}
.chip:hover { text-decoration: underline; }
.chip-muta { background: transparent; border: 1px solid var(--bordo); color: var(--matita); cursor: default; }
.chip-muta:hover { text-decoration: none; }
.badge-bozza {
  font-size: .74rem; font-family: var(--mono); color: #7a5a00;
  background: #fff3c4; border-radius: 99px; padding: .12rem .55rem;
}
@media (prefers-color-scheme: dark) { .badge-bozza { background: #4a3d10; color: #ffe45c; } }
.copia {
  margin-left: auto; font: 600 .85rem var(--sans);
  background: var(--penna); color: #fff; border: 0; border-radius: .45rem;
  padding: .45rem .85rem; cursor: pointer;
}
.copia:hover { filter: brightness(1.12); }
.copia.fatto { background: #1a7f37; }

/* --- vuoto, fondo, no-js --- */
.vuoto { text-align: center; padding: 2.5rem 1rem; color: var(--matita); }
.suggerimenti { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.suggerimenti button {
  font: inherit; background: var(--scheda); color: var(--penna);
  border: 1.5px solid var(--penna); border-radius: .5rem;
  padding: .5rem .9rem; cursor: pointer;
}
.suggerimenti button:hover { background: var(--penna-fondo); }
.fondo {
  max-width: 68rem; margin: 2.5rem auto 0; padding: 1.2rem 1rem 2rem;
  border-top: 1px solid var(--bordo); color: var(--matita); font-size: .88rem;
}
.no-js {
  max-width: 40rem; margin: 2rem auto; padding: 1rem 1.2rem;
  background: var(--scheda); border: 2px dashed var(--penna); border-radius: .6rem;
}

/* --- pagine statiche per funzione --- */
.statico { max-width: 46rem; margin: 1.2rem auto; padding: 0 1rem; }
.testata-statica h1 { margin: .2rem 0; font-size: 1.5rem; }
.briciole { font-size: .85rem; color: var(--matita); margin: 0; }
.briciole a { color: var(--penna); text-decoration: none; }
.testata-statica .scarica { margin: .4rem 0 1rem; }
.indice-funzioni { list-style: none; padding: 0; margin: .3rem 0 1rem; }
.indice-funzioni li { padding: .3rem 0; border-bottom: 1px solid var(--bordo); }
.indice-funzioni .conta { font-family: var(--mono); font-size: .78rem; color: var(--matita); }
.statico h2 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--matita); margin: 1.4rem 0 .2rem;
}