/* Foglio comune alle pagine della console. Le variabili stanno qui e non nelle
   singole pagine, cosi' il tema resta uno solo.

   Il tema si puo' anche scegliere, e non solo subire dal sistema: chi lavora
   accanto a una vetrata e chi in una stanza senza finestre hanno bisogni
   diversi, e il computer non lo sa. La scelta arriva come attributo sul nodo
   radice, scritto da preferenze.js.

   I valori scuri stanno scritti due volte -- una nel media query, una per la
   scelta esplicita -- ed e' l'unico modo: un @media non si puo' attivare da un
   attributo, e una variabile non puo' contenere un blocco di regole. Se un
   colore cambia, va cambiato in tutti e due i posti. */

:root{
  color-scheme: light dark;
  --sfondo:#f6f8f7; --pannello:#fff; --bordo:#d9dedc; --ink:#141a19;
  --tenue:#6b7370; --acc:#0f6e5c; --acc-tenue:#e2f0eb;
  /* --all e --err sono lo stesso rosso e restano due nomi: un allarme che
     scade e un errore di chi scrive sono due cose diverse, e il giorno che si
     vorra' distinguerli si cambia un valore invece di cercarli tutti.

     --err mancava del tutto, e ne parlavano gia' cinque file: la finestra
     dell'editor, le impostazioni, gli avvisi. Un colore che non esiste non
     rompe niente e non si vede -- il testo restava nero, e nessuno se ne era
     accorto. */
  --all:#a33a2a; --all-tenue:#f7e4e0; --err:#a33a2a;
  --menu-sfondo:#12211d; --menu-bordo:#1e3730; --menu-ink:#dfe9e5; --menu-hover:#1a2f29;
}
/* Il sistema dice scuro: si obbedisce, a meno che qualcuno abbia chiesto
   chiaro apposta. */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="chiaro"]){
    --sfondo:#101514; --pannello:#171e1c; --bordo:#2c3634; --ink:#e4eae8;
    --tenue:#98a29e; --acc:#48b096; --acc-tenue:#16302a;
    --all:#d4705e; --all-tenue:#331914; --err:#d4705e;
    --menu-sfondo:#0b1210; --menu-bordo:#1c2926; --menu-ink:#dfe9e5; --menu-hover:#16211e;
  }
}

/* Scuro chiesto apposta, qualunque cosa dica il sistema. */
:root[data-tema="scuro"]{
  --sfondo:#101514; --pannello:#171e1c; --bordo:#2c3634; --ink:#e4eae8;
  --tenue:#98a29e; --acc:#48b096; --acc-tenue:#16302a;
  --all:#d4705e; --all-tenue:#331914; --err:#d4705e;
  --menu-sfondo:#0b1210; --menu-bordo:#1c2926; --menu-ink:#dfe9e5; --menu-hover:#16211e;
}

*{box-sizing:border-box}

body{
  margin:0;height:100vh;display:flex;
  background:var(--sfondo);color:var(--ink);
  font:14px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* Il contenuto sta a destra del menu e scorre per conto suo. */
.contenuto{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}

/* Due cose si chiamano «barra»: la fascia in cima a una pagina e la riga dei
   pulsanti in fondo a una finestra. Condividono l'impaginazione — elementi in
   fila, allineati, distanziati — e nient'altro.

   Prima condividevano tutto, perche' la regola era una sola: la riga dei
   pulsanti di ogni finestra si portava dietro ventiquattro pixel di margine
   interno, il bordo sotto e lo sfondo del pannello. Dentro una finestra lo
   sfondo combacia e non si nota; il bordo sotto i pulsanti e il margine si',
   ma si notano come «la finestra e' un po' alta» — che e' il modo in cui
   questo genere di difetti sopravvive per anni.

   Nella console dei messaggi costava di piu': la buca per scrivere era piu'
   bassa di quanto potesse essere, su ogni schermo. */
.barra{ display:flex; align-items:center; gap:14px; }

/* Il pezzo non scrivibile davanti a un campo di una finestra: si legge come il
   valore, non come un'etichetta, perche' del valore fa parte. */
.finestra .campo .davanti{
  font:12.5px ui-monospace,Menlo,Consolas,monospace;
  color:var(--tenue); background:var(--sfondo);
  border:1px solid var(--bordo); border-radius:4px;
  padding:3px 7px; flex:none; white-space:nowrap;

  /* Nella riga di una finestra gli <span> sono le etichette: 64 pixel, a
     destra. Questo non e' un'etichetta ma un pezzo del valore, e con la misura
     dell'etichetta finiva stampato sopra il campo. */
  width:auto; text-align:left;
}

/* La fascia in cima. Sempre figlia diretta di .contenuto, in tutte le pagine. */
.contenuto > .barra{
  padding:12px 20px;
  border-bottom:1px solid var(--bordo);background:var(--pannello);
}
.barra h1{font-size:15px;margin:0;font-weight:600}
.barra .sp{flex:1}
.stato{font-size:12px;color:var(--tenue)}
a{color:var(--acc)}

button{font:inherit;padding:5px 12px;border:1px solid var(--bordo);background:transparent;color:inherit;cursor:pointer}
button:hover:not(:disabled){border-color:var(--acc);color:var(--acc)}
button:disabled{opacity:.45;cursor:default}
button.forte{border-color:var(--acc);color:var(--acc)}
/* I comandi che tolgono qualcosa si vedono rossi sempre, non solo quando ci
   passi sopra: il colore e' un avvertimento, e un avvertimento che compare
   quando il dito e' gia' li' arriva tardi. */
button.via{border-color:var(--all);color:var(--all)}
button.via:hover:not(:disabled){border-color:var(--all);color:var(--all);background:var(--all-tenue)}

select,input,textarea{font:inherit;padding:5px 8px;border:1px solid var(--bordo);background:transparent;color:inherit}
textarea{resize:vertical}

.fascia{display:flex;gap:12px;align-items:center;padding:10px 20px;font-size:13px;
        background:var(--acc-tenue);border-bottom:1px solid var(--acc)}
.fascia.male{background:var(--all-tenue);border-bottom-color:var(--all)}
.fascia .sp{flex:1}
.fascia[hidden]{display:none}

.vuoto{padding:16px 18px;color:var(--tenue);font-size:13px}