/* Atlante dei bisogni umani.
   I sei livelli usano le tinte altimetriche delle carte fisiche: dal verde
   delle pianure (sopravvivenza) al grigio-lilla delle vette (trascendenza).
   Il blu acqua è riservato a link, selezioni e focus. */

@font-face { font-family: "Alegreya"; src: url(font/alegreya.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url(font/alegreya-italic.woff2) format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url(font/alegreya-sans-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url(font/alegreya-sans-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url(font/alegreya-sans-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url(font/alegreya-sans-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --carta: #eef2f0;
  --carta-2: #e1e8e4;
  --campo: #f8faf9;
  --inchiostro: #1c2a2f;
  --inchiostro-2: #4d5e64;
  --linea: #c3cec9;
  --acqua: #2a6a8a;
  --acqua-velo: #d5e5ec;
  --pericolo: #a3392c;
  --l1: #5e9160;
  --l2: #a3b86c;
  --l3: #e0cf7a;
  --l4: #cf9f5f;
  --l5: #a5704b;
  --l6: #a99bb8;
  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --sans: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --carta: #142024;
    --carta-2: #1d2c31;
    --campo: #1a272b;
    --inchiostro: #e3ebe8;
    --inchiostro-2: #a2b2af;
    --linea: #33464c;
    --acqua: #82c3e2;
    --acqua-velo: #1f3a47;
    --pericolo: #f08a7a;
    --l1: #5b8c5d;
    --l2: #94a961;
    --l3: #c8b865;
    --l4: #bf9156;
    --l5: #a06e4b;
    --l6: #9b8dad;
    color-scheme: dark;
  }
}

.l1 { --tinta: var(--l1); }
.l2 { --tinta: var(--l2); }
.l3 { --tinta: var(--l3); }
.l4 { --tinta: var(--l4); }
.l5 { --tinta: var(--l5); }
.l6 { --tinta: var(--l6); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: 400 1.125rem/1.5 var(--sans);
}
a { color: var(--acqua); text-underline-offset: .15em; }
:focus-visible { outline: 2px solid var(--acqua); outline-offset: 2px; }
code { font-size: .9em; }

.salta { position: absolute; left: -999px; top: 0; }
.salta:focus { left: 1rem; top: 1rem; z-index: 10; padding: .5rem 1rem; background: var(--campo); }
.nascosto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.pagina { max-width: 76rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 48rem) { .pagina { padding: 0 2rem; } }

/* Testata */

.testata { padding-top: 2.5rem; }
.titolo {
  margin: 0;
  max-width: 30ch;
  font: 500 clamp(1.875rem, 1.2rem + 2.6vw, 3rem)/1.08 var(--serif);
  text-wrap: balance;
}
.catena { margin: 1rem 0 0; max-width: 62ch; color: var(--inchiostro-2); }
.sintesi { margin: .25rem 0 0; color: var(--inchiostro-2); font-size: 1rem; }

/* Legenda: le sei fasce altimetriche, che sono anche il filtro per livello */

.legenda {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem 2px;
  margin-top: 2rem;
}
.fascia {
  appearance: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
  padding: 0 0 .25rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fascia-zoccolo { display: flex; align-items: flex-end; height: 1.75rem; }
.fascia-colore {
  display: block;
  width: 100%;
  height: 1rem;
  background: var(--tinta);
  transform-origin: bottom;
  transition: height .2s ease, opacity .2s ease;
  animation: emergi .7s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes emergi { from { transform: scaleY(0); } }
.fascia-nome {
  display: block;
  margin-top: .5rem;
  padding-right: .5rem;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.25;
}
.fascia-conta { display: block; color: var(--inchiostro-2); font-size: .875rem; }
.legenda.scelta .fascia-colore { opacity: .35; }
.fascia:hover .fascia-colore { opacity: 1; }
.fascia[aria-pressed="true"] .fascia-colore { height: 1.75rem; opacity: 1; }

@media (max-width: 40rem) {
  .legenda { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Schede */

.schede {
  display: flex;
  gap: 1.75rem;
  margin-top: 2.25rem;
  border-bottom: 1px solid var(--linea);
  overflow-x: auto;
  scrollbar-width: none;
}
.schede a {
  padding: .75rem 0;
  color: var(--inchiostro-2);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.schede a:hover { color: var(--inchiostro); }
.schede a[aria-current="page"] { color: var(--inchiostro); box-shadow: inset 0 -3px 0 var(--acqua); }
.schede .esci { margin-left: auto; align-self: center; color: var(--inchiostro-2); font-size: .9375rem; }
@media (max-width: 40rem) {
  .schede { flex-wrap: wrap; column-gap: 1.25rem; overflow: visible; }
  .schede a { padding: .5rem 0; }
}

.vista { padding: 1.75rem 0 4rem; }
.vista:focus { outline: none; }
.vista-intro { max-width: 62ch; margin: 0 0 1.75rem; color: var(--inchiostro-2); }
.attesa, .errore { color: var(--inchiostro-2); }

/* Controlli */

.campo-testo, .campo-scelta {
  width: 100%;
  padding: .5rem .7rem;
  border: 1px solid var(--linea);
  border-radius: 4px;
  background: var(--campo);
  color: var(--inchiostro);
  font: inherit;
  font-size: 1rem;
}
.segmenti {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  border: 1px solid var(--linea);
  border-radius: 4px;
  overflow: hidden;
}
.segmenti button {
  appearance: none;
  padding: .45rem .5rem;
  border: 0;
  background: var(--campo);
  color: var(--inchiostro-2);
  font: inherit;
  font-size: .9375rem;
  cursor: pointer;
}
.segmenti button + button,
.segmenti label + label { border-left: 1px solid var(--linea); }
.segmenti button[aria-pressed="true"] { background: var(--acqua-velo); color: var(--acqua); font-weight: 500; }
.segmenti button:focus-visible { outline-offset: -3px; }
/* Stessa resa per i pulsanti radio della finestra di modifica */
.segmenti label { position: relative; display: block; cursor: pointer; }
.segmenti input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.segmenti input + span {
  display: block;
  padding: .45rem .5rem;
  background: var(--campo);
  color: var(--inchiostro-2);
  font-size: .9375rem;
  text-align: center;
}
.segmenti input:checked + span { background: var(--acqua-velo); color: var(--acqua); font-weight: 500; }
.segmenti input:focus-visible + span { outline: 2px solid var(--acqua); outline-offset: -3px; }
.didascalia { margin: 0 0 .25rem; color: var(--inchiostro-2); font-size: .9375rem; }
.spunta { display: flex; gap: .5rem; align-items: center; font-size: 1rem; cursor: pointer; }
.spunta input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--acqua); }
.bottone-testo {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--acqua);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: .15em;
  cursor: pointer;
}
.bottone {
  appearance: none;
  padding: .55rem 1rem;
  border: 0;
  border-radius: 4px;
  background: var(--acqua);
  color: var(--carta);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}
.bottone:hover { filter: brightness(1.1); }
.bottone:disabled { opacity: .6; cursor: progress; }
.bottone-testo.pericolo { color: var(--pericolo); }
.conteggio {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 1rem 0 .25rem;
  color: var(--inchiostro-2);
  font-size: .9375rem;
}

/* Profilo: quali dei sei livelli tocca un verbo */

.profilo { display: inline-grid; flex: none; grid-template-columns: repeat(6, .5rem); gap: 2px; }
.cella { height: .5rem; box-shadow: inset 0 0 0 1px var(--linea); }
.cella.piena { background: var(--tinta); box-shadow: none; }
.profilo-medio { grid-template-columns: repeat(6, 1.25rem); }
.profilo-medio .cella { height: .75rem; }
.profilo-grande { display: grid; grid-template-columns: repeat(6, minmax(0, 3.5rem)); gap: 3px; margin: 1.25rem 0 0; }
.profilo-grande .cella { height: 1.25rem; }

/* Vista Verbi */

.esplora {
  display: grid;
  grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
.filtri { display: grid; gap: .75rem; }
.nuovo-verbo { justify-self: start; margin-bottom: .25rem; }
.lista-verbi { margin: 0; padding: 0; list-style: none; }
.voce {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .3rem .5rem;
  border-radius: 3px;
  color: var(--inchiostro);
  font: 400 1.125rem/1.35 var(--serif);
  text-decoration: none;
}
.voce:hover { background: var(--carta-2); }
.voce[aria-current="true"] { background: var(--acqua-velo); color: var(--acqua); }
.vuoto { padding: .5rem 0; color: var(--inchiostro-2); }

.dettaglio {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding-right: .25rem;
}
.torna { display: none; }
.verbo-titolo { margin: 0; font: 500 clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem)/1 var(--serif); }
.verbo-meta { margin: .75rem 0 0; color: var(--inchiostro-2); font-size: 1rem; }
.verbo-note { max-width: 62ch; margin: .5rem 0 0; }
.gruppo { margin-top: 1.75rem; padding: .1rem 0 .1rem 1rem; border-left: 6px solid var(--tinta); }
.gruppo-titolo { margin: 0; color: var(--inchiostro-2); font: 500 1rem/1.3 var(--sans); }
.connessioni { margin: 0; padding: 0; list-style: none; }
.connessione { margin-top: .85rem; transition: opacity .2s ease; }
.connessione.fuori { opacity: .4; }
.conn-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .75rem; }
.conn-bisogno { color: var(--inchiostro); font-size: 1.0625rem; font-weight: 700; text-decoration: none; }
.conn-bisogno:hover { text-decoration: underline; }
.conn-codice { margin-right: .35rem; color: var(--inchiostro-2); font-size: .875rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.conn-dir { color: var(--acqua); font-size: .9375rem; }
.conn-comandi { display: inline-flex; gap: .75rem; margin-left: auto; font-size: .875rem; }
.conn-comandi .bottone-testo:not(.pericolo) { color: var(--inchiostro-2); }
.comandi { display: flex; gap: 1.25rem; margin: .75rem 0 0; font-size: .9375rem; }
.aggiungi { margin: 1.75rem 0 0; }
.conn-motivazione { max-width: 58ch; margin: .1rem 0 0; font: italic 400 1.1875rem/1.4 var(--serif); }
.conn-campi { display: grid; grid-template-columns: auto 1fr; gap: .1rem .75rem; margin: .35rem 0 0; font-size: 1rem; }
.conn-campi dt { color: var(--inchiostro-2); }
.conn-campi dd { margin: 0; }
.nota { max-width: 62ch; margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--linea); color: var(--inchiostro-2); font-size: .9375rem; }
.nota p { margin: 0 0 .5rem; }
.intro h2 { margin: 0 0 1rem; font: 500 1.75rem/1.2 var(--serif); }
.intro p { max-width: 58ch; margin: 0 0 1rem; }

@media (max-width: 52rem) {
  .esplora { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .dettaglio { position: static; max-height: none; overflow: visible; padding-right: 0; }
  .esplora.con-verbo .elenco-col,
  .esplora:not(.con-verbo) .dettaglio { display: none; }
  .torna { display: inline-block; margin-bottom: 1rem; }
}

/* Vista Mappa dei bisogni */

.mappa { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 2.5rem 2rem; }
.livello { padding-top: .75rem; border-top: 10px solid var(--tinta); }
.livello-titolo { margin: 0; font: 500 1.375rem/1.2 var(--serif); }
.livello-desc { margin: .25rem 0 .75rem; color: var(--inchiostro-2); font-size: 1rem; }
.lista-bisogni { margin: 0; padding: 0; list-style: none; }
.lista-bisogni a {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: .5rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--linea);
  color: var(--inchiostro);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.3;
}
.lista-bisogni a:hover .b-nome { text-decoration: underline; }
.b-codice, .b-conta { color: var(--inchiostro-2); font-size: .875rem; font-variant-numeric: tabular-nums; }
.b-codice { padding-top: .1rem; }
.b-nome { font-weight: 500; }
.b-desc { display: block; color: var(--inchiostro-2); font-size: .875rem; }

/* Vista Verbi trasversali */

.lista-trasversali { max-width: 46rem; margin: 0; padding: 0; list-style: none; }
.lista-trasversali a {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) auto minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--linea);
  color: var(--inchiostro);
  text-decoration: none;
}
.t-verbo { font: 400 1.1875rem/1.3 var(--serif); }
.lista-trasversali a:hover .t-verbo { color: var(--acqua); }
.t-info { color: var(--inchiostro-2); font-size: .9375rem; }
@media (max-width: 34rem) {
  .lista-trasversali a { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
  .t-info { grid-column: 1 / -1; }
}

/* Vista Vocabolario */

.vocab-sintesi { max-width: 62ch; margin: 0; }
.copertura { max-width: 36rem; height: .625rem; margin: .75rem 0 1.25rem; overflow: hidden; border-radius: 2px; background: var(--carta-2); }
.copertura span { display: block; height: 100%; background: var(--acqua); }
.vocab-controlli { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1.5rem 0 1rem; }
.vocab-controlli .campo-testo { max-width: 18rem; }
.lettere { display: flex; flex-wrap: wrap; gap: .15rem; }
.lettere a {
  min-width: 2rem;
  padding: .2rem .35rem;
  border-radius: 3px;
  color: var(--inchiostro-2);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}
.lettere a:hover { color: var(--inchiostro); }
.lettere a[aria-current="true"] { background: var(--acqua-velo); color: var(--acqua); }
.lettere.spente a { opacity: .5; }
.lista-vocab {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 11rem;
  column-gap: 2rem;
  font: 400 1.0625rem/1.65 var(--serif);
}
.lista-vocab li { break-inside: avoid; color: var(--inchiostro-2); }
.lista-vocab a { color: var(--inchiostro); text-decoration: none; }
.lista-vocab a:hover { text-decoration: underline; }
.da-aggiungere {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.da-aggiungere:hover { color: var(--inchiostro); text-decoration: underline; }
.lista-vocab a::before,
.punto::before {
  content: "";
  display: inline-block;
  width: .45rem;
  height: .45rem;
  margin-right: .4rem;
  border-radius: 50%;
  background: var(--acqua);
  vertical-align: .15em;
}

/* Finestra di modifica: il bordo superiore prende la tinta del livello scelto */

.finestra {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  border-top: 8px solid var(--tinta, var(--acqua));
  border-radius: 4px;
  background: var(--carta);
  color: var(--inchiostro);
  box-shadow: 0 1rem 3rem rgb(0 0 0 / .3);
}
.finestra::backdrop { background: rgb(20 32 36 / .5); }
.modulo { display: grid; gap: 1rem; padding: 1.5rem; }
.modulo h2 { margin: 0; font: 500 1.5rem/1.2 var(--serif); }
.campo { display: grid; gap: .3rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.campo > span, .campo > label, .campo > legend { font-size: .9375rem; font-weight: 500; }
.campo > legend { margin-bottom: .3rem; padding: 0; }
.aiuto { margin: 0; color: var(--inchiostro-2); font-size: .875rem; }
textarea.campo-testo { min-height: 4rem; resize: vertical; }
.errore-modulo { margin: 0; color: var(--pericolo); font-size: .9375rem; }
.errore-modulo:empty { display: none; }
.azioni-modulo { display: flex; justify-content: flex-end; align-items: center; gap: 1.25rem; margin-top: .25rem; }

.avviso {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 20;
  margin: 0;
  padding: .6rem 1rem;
  border-radius: 4px;
  background: var(--inchiostro);
  color: var(--carta);
  font-size: .9375rem;
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.avviso.visibile { opacity: 1; transform: none; }

/* Pagina di accesso */

.accesso { max-width: 28rem; margin: 0 auto; padding: 14vh 1rem 4rem; }
.accesso .titolo { font-size: 1.75rem; }
.accesso-fasce { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; margin-bottom: 1.5rem; }
.accesso-fasce span { height: .75rem; background: var(--tinta); }
.modulo-accesso { padding: 1.75rem 0 0; }
.accesso-nota { margin-top: 1.5rem; }

/* Piede */

.piede { padding: 1.5rem 0 3rem; border-top: 1px solid var(--linea); color: var(--inchiostro-2); font-size: .9375rem; }
.piede p { max-width: 70ch; margin: 0 0 .5rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}