/* La pelle. I valori vengono dal contratto di casa `Formula Studio/DESIGN-labellens.md`, che e' il
   tema unico della suite: avorio, nero caldo, e il lime solo sulla CTA.

   I VALORI DEL BRAND STANNO QUI E SOLO QUI, ed e' una regola con un test dietro: il Brand DNA e' un
   dato, mai scritto nel codice dell'app. Il giorno che serve un secondo brand si cambia questo file,
   non si cerca il colore dentro i gestori. */

:root {
  --surface:   #f3f2ec;
  --surface-2: #e9e6dd;
  --card:      #fbfaf6;
  --ink:       #17161b;
  --muted:     #6c6860;
  --line:      #dcd7cb;
  --cta:       #c6f24a;
  /* I due colori dei rilievi. Il rosso NON e' acceso: un pannello di rilievi tutto rosso squillante
     si smette di guardare dopo il terzo pezzo. */
  --blocca:    #b3261e;
  --blocca-bg: #fbeceb;
  --avviso:    #8a6a00;
  --avviso-bg: #fdf6e3;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; margin: 0 0 .4rem; }
h1 { font-size: 1.5rem; }
/* Il righello lime sotto i titoli: e' la firma visiva del tema di casa. */
h1::after { content: ""; display: block; width: 44px; height: 3px; background: var(--cta); margin-top: .5rem; }

a { color: inherit; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

header {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--card);
}
header .grow { flex: 1; }

main { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 1rem;
}

button, .btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 8px; padding: .55rem 1rem;
}
button.primary { background: var(--cta); border-color: var(--cta); }
button:disabled { opacity: .5; cursor: progress; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  /* Il contorno di messa a fuoco resta VISIBILE: toglierlo rende l'app inusabile da tastiera, ed e'
     la scorciatoia estetica che si paga per sempre. */
  outline: 2px solid var(--ink); outline-offset: 2px;
}

input, textarea, select {
  font: inherit; width: 100%; padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }
label { display: block; font-weight: 600; font-size: .875rem; margin: .9rem 0 .3rem; }

.riga { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.due { display: grid; grid-template-columns: 1fr 380px; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .due { grid-template-columns: 1fr; } }

/* Il testo con i rilievi evidenziati DENTRO. E' il pezzo che vale l'intera schermata: dire "c'e' un
   problema da qualche parte" costringe a cercarlo a mano, ed e' il modo piu' rapido di far smettere
   di usare un controllo. */
.testo {
  white-space: pre-wrap; word-wrap: break-word;
  font-size: 1.02rem; line-height: 1.75;
}
mark.blocca { background: var(--blocca-bg); border-bottom: 2px solid var(--blocca); padding: .05em 0; }
mark.avviso { background: var(--avviso-bg); border-bottom: 2px solid var(--avviso); padding: .05em 0; }

.rilievo { border-left: 3px solid var(--line); padding: .5rem 0 .5rem .75rem; margin-bottom: .75rem; }
.rilievo.blocca { border-left-color: var(--blocca); }
.rilievo.avviso { border-left-color: var(--avviso); }
.rilievo code { font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
.rilievo .cit { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--muted); }

.pill {
  display: inline-block; padding: .15rem .5rem; border-radius: 99px;
  background: var(--surface-2); font-size: .78rem; font-weight: 600;
}
.pill.ok    { background: var(--cta); }
.pill.stop  { background: var(--blocca-bg); color: var(--blocca); }

.errore { background: var(--blocca-bg); color: var(--blocca); border: 1px solid var(--blocca);
  border-radius: 8px; padding: .6rem .8rem; margin: .8rem 0; font-weight: 600; }

ul.pulita { list-style: none; margin: 0; padding: 0; }
ul.pulita li { border-bottom: 1px solid var(--line); padding: .7rem 0; }
ul.pulita li:last-child { border-bottom: 0; }