/* guscio.css — la cornice della collana.
   ==========================================================================
   I valori vengono dalla palette delle app (carta avorio, inchiostro caldo,
   verde bosco): il guscio e lo strumento stanno uno sopra l'altro nella stessa
   pagina, e due avori diversi si vedono. Se la palette cambia, cambia qui e
   nel `theme.js` delle app — finché non esiste un pacchetto condiviso, questa
   è una delle copie da tenere allineate, ed è dichiarato. */

:root {
  --paper: #f5efe2;
  --paper-subtle: #fbf7ec;
  --ink: #1f1b14;
  --ink-body: #3a332a;
  --ink-muted: #6a6256;
  --rule-light: #e3dac2;
  --rule-soft: #c9bfa6;
  --brand: #1f5132;
  --brand-dk: #173c25;
  /* 23 agosto 2026 — era Inter. La cornice era l'UNICO punto della collana a
     usarlo: tutte e sette le app dichiarano Public Sans. Sopra un'app, nella
     stessa pagina, il salto di carattere fra barra e contenuto si vedeva —
     ed e' lo stesso motivo per cui questo file copia gli avori delle app,
     scritto in testa. Trovato dal rilevatore anti-pattern della skill
     `impeccable`, che segnala Inter come carattere sovraesposto: qui pero' il
     difetto non e' che sia sovraesposto, e' che sia diverso dal resto. */
  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'IBM Plex Serif', Georgia, serif;
  --mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* La larghezza della colonna della collana. Un valore solo, qui: e' lo
     stesso numero che le app dichiarano come `pageMaxWidth`, e il guscio non
     puo' scoprirlo da solo perche' l'app vive in un altro documento. Se
     cambia nel canone, cambia qui. */
  --colonna: 1180px;
}

/* Tutto cio' che appartiene alla cornice sta in questa colonna. I filetti
   orizzontali no: quelli restano a tutta pagina, ed e' la differenza fra una
   testata di giornale e un riquadro che galleggia. */
.colonna {
  width: 100%;
  max-width: var(--colonna);
  margin-left: auto;
  margin-right: auto;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--sans);
}

/* Il salto al contenuto: con la cornice in un documento e lo strumento in un
   altro, chi naviga da tastiera altrimenti attraversa tutta la barra prima di
   entrare nel riquadro. */
.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 14px;
  background: var(--brand);
  color: var(--paper);
  font-size: 13px;
  z-index: 10;
}
.salta:focus {
  left: 0;
}

/* Una riga sola: il marchio a sinistra, la navigazione della collana a destra.
   È la disposizione della barra della 07, presa alla lettera — «la prima cosa
   che si legge è chi pubblica, l'ultima è dove si può andare». Prima l'editore
   stava su una riga sua sopra le aree e occupava il doppio dello spazio senza
   dire nulla di più. */
.testata {
  border-bottom: 1px solid var(--rule-light);
  padding: 10px 24px 0;
}
.testata .colonna {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.testata .barra {
  flex: 1 1 auto;
  min-width: 0;
}

/* La riga dell'editore, nella stessa forma dell'occhiello delle app: mono
   10px, maiuscoletto, spaziatura 0.16em. Era serif 12px con spaziatura 0.08:
   diversa da quella che compare due centimetri piu' sotto, dentro l'app, per
   dire la stessa identica cosa. */
.editore {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.barra {
  display: block;
}

/* L'occhiello sopra le aree. Dice che cos'e' questa riga — «Gli strumenti
   della collana» — a chi arriva su una pagina del Sole e trova una barra che
   non e' quella del giornale. Preso dalla barra della 07, che ce l'aveva. */
.barra-testa {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Serif corsivo, minuscolo. Non è un occhiello: è una frase che dice dove si
   sta, e il maiuscoletto la faceva sembrare un'altra intestazione accanto a
   quella dell'editore. Preso dalla 07, dove è esattamente così. */
.barra-occhiello {
  margin-left: auto;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-muted);
  white-space: nowrap;
}

.aree {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.area {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
}
.area:hover,
.area.aperta {
  background: var(--paper-subtle);
}

/* Le aree NON vanno in maiuscoletto: nella 07 sono in tondo, e in maiuscoletto
   tre nomi lunghi diventano un muro che si legge parola per parola. */
.area-nome {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-muted);
}
.area.aperta .area-nome,
.area:hover .area-nome {
  color: var(--brand-dk);
}

/* L'area in cui ci si trova: un filetto sottile e il testo appena piu' scuro.
   Deve dirlo, non gridarlo — il nome dello strumento e' gia' scritto in grande
   subito sotto, dentro l'app. */
.area.area-corrente .area-nome {
  color: var(--ink-body);
}
.area.area-corrente {
  border-bottom-color: var(--rule-soft);
}

/* La freccia ruota all'apertura: e' l'unico segnale che quella voce nasconde
   qualcosa, e senza di esso tre parole in maiuscoletto sembrano un titolo. */
.freccia {
  flex-shrink: 0;
  color: var(--ink-muted);
  transition: transform 140ms ease;
}
.freccia.su {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .freccia { transition: none; }
}

/* La tendina: una GRIGLIA DI RIQUADRI, non una fila di nomi — come nella 07.
   La differenza non e' estetica: nel riquadro ci sta la materia, cioe' la
   risposta a «questo a che cosa serve». Cinque nomi su sette cominciano con
   «Navigatore»: senza la materia sceglie solo chi gia' sa. */
.tendina {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  padding: 12px 0 4px;
  margin-top: 8px;
  border-top: 1px solid var(--rule-light);
}
.tendina[hidden] {
  display: none;
}

.voce {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  border: 1px solid var(--rule-light);
  border-radius: 2px;
  background: var(--paper-card);
  text-align: left;
  font-family: var(--sans);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.voce:hover:not(:disabled),
.voce:focus-visible:not(:disabled) {
  background: var(--paper-subtle);
  border-color: var(--brand);
}
.voce.corrente {
  background: var(--paper-subtle);
  border-bottom: 3px solid var(--brand);
}
.voce:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.voce-riga {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.voce-nome {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.voce-materia {
  font-size: 12px;
  color: var(--ink-muted);
}

/* Il segno prima del nome: aiuta a trovare la voce, non compete col nome. */
.segno {
  flex-shrink: 0;
  color: var(--brand-dk);
  opacity: 0.75;
}
.voce:hover:not(:disabled) .segno,
.voce.corrente .segno {
  opacity: 1;
}

.avviso {
  margin: 12px auto 0;
  padding: 10px 12px;
  border-left: 2px solid var(--brand);
  background: var(--paper-subtle);
  font-size: 13px;
}

/* Nessun bordo e nessuna barra di scorrimento propria: l'altezza la comunica
   l'app, e il riquadro la segue. Un riquadro che scorre dentro una pagina che
   scorre è il difetto classico degli incorporamenti. */
.strumento {
  display: block;
  width: 100%;
  max-width: var(--colonna);
  margin: 0 auto;
  height: 1400px;
  border: 0;
}

.piede {
  border-top: 1px solid var(--rule-light);
  padding: 24px;
}

.titolo-piede {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
}

.rimandi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.rimando {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--rule-light);
  background: var(--paper-subtle);
  text-align: left;
  font-family: var(--sans);
  cursor: pointer;
}
.rimando:hover:not(:disabled) {
  border-color: var(--brand);
}
.rimando:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.rimando .area {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.rimando .nome {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
/* 13px, non 12.5. Una scala con 12 · 12.5 · 13 · 14 non e' una gerarchia:
   sono quattro corpi indistinguibili che costringono a distinguere per
   posizione invece che per peso. I gradini utili qui sono quattro:
   10 (occhiello mono) · 13 (secondario) · 14 (corpo) · 19/22 (titoli). */
.rimando .materia {
  font-size: 13px;
  color: var(--ink-body);
}

.nota {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--ink-muted);
}

/* ── Suggerimenti ─────────────────────────────────────────────────────────
   Stavano in fondo a ciascuna app, cioè sotto un riquadro alto 1400 px: nel
   guscio non li vedeva nessuno. Ora sono nella cornice, sopra l'elenco degli
   altri strumenti — che è il posto dove si arriva quando si è finito di usare
   lo strumento, ed è il momento in cui viene voglia di dire che cosa manca. */
.suggerimenti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule-light);
}

.suggerimenti-testo {
  min-width: 0;
  max-width: 62ch;
}
.suggerimenti .titolo-piede {
  margin-bottom: 6px;
}

.suggerisci {
  flex-shrink: 0;
  padding: 11px 20px;
  border: 1px solid var(--brand);
  border-radius: 2px;
  background: var(--brand);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.suggerisci:hover {
  background: var(--brand-dk);
  border-color: var(--brand-dk);
}

/* ── Il dialogo ───────────────────────────────────────────────────────────
   `<dialog>` nativo: la gestione del fuoco, il tasto Esc e lo sfondo che
   blocca il resto della pagina li fa il browser, e li fa meglio di quanto li
   rifarebbe questo file. */
.dialogo {
  width: min(560px, calc(100vw - 32px));
  padding: 0 28px 26px;
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  background: var(--paper-subtle);
  color: var(--ink-body);
  font-family: var(--sans);
}
.dialogo::backdrop {
  background: rgba(31, 27, 20, 0.45);
}

.dialogo-chiudi-riga {
  display: flex;
  justify-content: flex-end;
  margin: 0 -12px 0 0;
  padding-top: 10px;
}
.dialogo-chiudi {
  border: 0;
  background: none;
  color: var(--ink-muted);
  font-size: 22px;
  line-height: 1;
  padding: 4px 10px;
  cursor: pointer;
}
.dialogo-chiudi:hover {
  color: var(--ink);
}

.dialogo-titolo {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
}

/* Da quale strumento arriva la segnalazione. Si vede prima di scrivere: chi
   segnala deve poter controllare che stia parlando della cosa giusta. */
.dialogo-contesto {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-muted);
}

.modulo {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.campi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
/* Le etichette NON vanno in maiuscoletto. Ce l'avevo messo per abitudine,
   e il rilevatore l'ha preso: in maiuscolo si perde il profilo della parola
   (le lettere che salgono e scendono), che e' come si riconosce a colpo
   d'occhio. Su un occhiello di tre parole e' un vezzo tipografico; su un
   modulo da compilare e' un attrito. */
.modulo label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-body);
}
.modulo input,
.modulo textarea {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  padding: 9px 11px;
  border: 1px solid var(--border-ui);
  border-radius: 2px;
  background: #fff;
}
.modulo input::placeholder,
.modulo textarea::placeholder {
  color: var(--ink-quiet);   /* 4.55:1 su bianco: un segnaposto si deve leggere */
  opacity: 1;
}
.modulo textarea {
  resize: vertical;
  min-height: 96px;
}

.privacy {
  flex-direction: row;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-body);
}
.privacy input {
  margin-top: 2px;
  padding: 0;
  flex-shrink: 0;
}

/* L'esca per i robot: fuori dallo schermo, non raggiungibile col tasto di
   tabulazione, non annunciata. Una persona non la vede e non la compila. */
.esca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.turnstile {
  min-height: 65px;
}

.errore {
  margin: 0;
  padding: 9px 11px;
  border-left: 1px solid var(--brand);
  background: #fff;
  font-size: 13px;
  color: var(--ink);
}

.dialogo-azioni {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.annulla,
.invia {
  padding: 10px 18px;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.annulla {
  border: 1px solid var(--rule-soft);
  background: none;
  color: var(--ink-body);
}
.invia {
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--paper);
}
.invia:disabled {
  opacity: 0.6;
  cursor: progress;
}

.fatto {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--ink-body);
}