/* L3 — Stato dei servizi: l'aspetto del tabellone.
 *
 * Due tabelloni, non uno per sbaglio: quello che arriva gia' scritto nella
 * pagina (.l3-stato-fermo) e quello ricco che il JavaScript mette al suo
 * posto (.l3-svc e compagnia). Il primo non e' uno scheletro grigio in
 * attesa: e' la risposta alla domanda della pagina, leggibile prima che
 * parta uno script e anche se non parte mai.
 *
 * Le variabili hanno il loro valore di ripiego: su un sito senza il nostro
 * tema questi colori non esistono, e senza ripiego il tabellone diventerebbe
 * testo nero su fondo nero.
 */

:root{
  --l3s-base:      var(--wp--preset--color--base, #0b0c0d);
  --l3s-border:    var(--wp--preset--color--border, #26282a);
  --l3s-border-dim:var(--wp--preset--color--border-dim, #1b1d1f);
  --l3s-contrast:  var(--wp--preset--color--contrast, #d8d1c2);
  --l3s-muted:     var(--wp--preset--color--muted, #a8a091);
  --l3s-dim:       var(--wp--preset--color--dim, #7b7466);
  --l3s-dim-2:     var(--wp--preset--color--dim-2, #5f594f);
  --l3s-accent:    var(--wp--preset--color--accent, #9fd3b8);
  --l3s-button:    var(--wp--preset--color--button, #cfc7b8);
  --l3s-mono:      var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  --l3s-wrap:      var(--l3-wrap, 1360px);
  --l3s-gutter:    var(--l3-gutter, clamp(24px, 5vw, 48px));
  /* I toni degli stati. Vivono qui e non nella tavolozza del tema perche'
     dicono un fatto - funziona, arranca, e' fermo - non un gusto. */
  --l3s-ok:        #6ee7a8;
  --l3s-warn:      #f0b357;
  --l3s-bad:       #f87171;
  --l3s-unknown:   #5f594f;
  --l3s-none:      #26282a;
  --l3s-sp-40:     var(--wp--preset--spacing--40, 44px);
  --l3s-sp-50:     var(--wp--preset--spacing--50, 72px);
  --l3s-surface:   var(--wp--preset--color--surface, #101112);
}

/* ---------- il tabellone che arriva con la pagina ---------- */

.l3-stato-fermo{
  list-style:none; margin:0; padding:0;
  max-width:var(--l3s-wrap); margin-inline:auto;
  padding-inline:var(--l3s-gutter);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(18em,1fr)); gap:2px 24px;
}
.l3-stato-fermo__voce{
  font-size:16px; color:var(--l3s-muted);
  padding:10px 0; border-bottom:1px solid var(--l3s-border-dim);
}
.l3-stato-fermo__voce strong{ color:var(--l3s-contrast); font-weight:500; }
/* Il colore dice lo stato prima delle parole, ma le parole ci sono sempre:
   chi non distingue i colori legge «non funziona» come tutti gli altri. */
.l3-stato-fermo__voce--operativo{ color:var(--l3s-accent); }
.l3-stato-fermo__voce--degradato{ color:#dba617; }
.l3-stato-fermo__voce--disservizio{ color:#e08a8a; }
.l3-stato-fermo__quando{
  max-width:var(--l3s-wrap); margin:14px auto 0; padding-inline:var(--l3s-gutter);
  font-size:13.5px; color:var(--l3s-dim);
}

/* ---------- il tabellone ricco ---------- */

.l3-board__head{ margin-bottom:8px; }
.l3-svc{
  display:grid; grid-template-columns:1fr 130px 200px 80px 140px; gap:24px; align-items:center;
  padding:18px 0; border-top:1px solid var(--l3s-border);
}
.l3-svc__name{ display:flex; flex-direction:column; gap:5px; font-size:18px; }
.l3-svc__state{ font-family:var(--l3s-mono); font-size:11.5px; letter-spacing:.16em; }
.l3-svc__state--ok{ color:var(--l3s-ok); }
.l3-svc__state--warn{ color:var(--l3s-warn); }
.l3-svc__state--bad{ color:var(--l3s-bad); }
.l3-svc__state--unknown{ color:var(--l3s-dim); }
.l3-svc__bars{ display:flex; align-items:flex-end; gap:3px; height:26px; }
.l3-bar{ flex:1; background:var(--l3s-button); border-radius:1px; display:block; }
.l3-bar--warn{ background:var(--l3s-warn); }
.l3-bar--bad{ background:var(--l3s-bad); }
.l3-bar--unknown{ background:var(--l3s-unknown); }
.l3-bar--none{ background:var(--l3s-none); }
.l3-svc__uptime{ font-family:var(--l3s-mono); font-size:12.5px; color:var(--l3s-muted); }
.l3-svc__link{ font-size:14px; color:var(--l3s-muted); }
.l3-board__foot{
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top:22px; padding-top:16px; border-top:1px solid var(--l3s-border);
  font-family:var(--l3s-mono); font-size:11.5px; color:var(--l3s-dim-2);
}
@media (max-width:1000px){
  /* align-items:start: con l'elenco dei servizi sotto il nome la prima
     colonna diventa alta, e lo stato centrato finiva a meta' riga, lontano
     dal nome a cui si riferisce. */
  .l3-svc{ grid-template-columns:1fr auto; gap:8px 16px; align-items:start; }
  .l3-svc__bars{ grid-column:1 / -1; }
}

/* Il pallino dello stato. La regola di base e' due righe e la tengono sia
   questo plugin sia il questionario: e' il prezzo per poter installare l'uno
   senza l'altro, ed e' meno del prezzo di un foglio di stile condiviso che
   nessuno dei due puo' garantire. */
.l3-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; }
.l3-dot--ok{ background:#4ade80; }
.l3-dot--warn{ background:var(--l3s-warn); }
.l3-dot--bad{ background:var(--l3s-bad); }
.l3-dot--unknown{ background:var(--l3s-unknown); }
.l3-dot--none{ background:#2a2c2e; }

/* La riga «da configurare / non automatico», accanto al nome. */
.l3-svc__manual{
  font-family:var(--l3s-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--l3s-dim-2);
  border:1px solid var(--l3s-border); border-radius:2px; padding:2px 6px;
  text-decoration:none; cursor:help;
}
.l3-board__stale{
  display:block; margin-top:6px; font-family:var(--l3s-mono);
  font-size:11.5px; color:var(--l3s-warn);
}

/* I servizi racchiusi in una riga del tabellone. Stanno sotto il nome, in
   piccolo: servono a chi si chiede «ma Teams e' dentro?», e non devono
   rubare la scena allo stato. */
.l3-svc__title{ display:flex; align-items:center; gap:12px; }
.l3-svc__covers{
  padding-left:20px;                      /* sotto il testo, non sotto il pallino */
  font-family:var(--l3s-mono);
  font-size:11px; line-height:1.5; letter-spacing:.06em;
  color:var(--l3s-dim-2);
}

/* --- «Avvisami quando cambia», sotto lo stato dei servizi --- */
.l3-avvisami{
  max-width:var(--l3s-wrap); margin:var(--l3s-sp-50) auto 0;
  padding:var(--l3s-sp-40) var(--l3s-gutter);
  border-top:1px solid var(--l3s-border);
}
.l3-avvisami h2{ font-size:clamp(22px,2.6vw,30px); font-weight:500; margin:0 0 .5em; letter-spacing:-.02em; }
.l3-avvisami__intro{ max-width:62ch; color:var(--l3s-muted); font-size:16.5px; line-height:1.6; margin:0 0 1.6em; }
/* I campi in riga dove c'e' spazio: due caselle e un pulsante non sono un
   modulo, sono una domanda sola. */
.l3-avvisami form{ display:block; }
.l3-avvisami__campo{ display:flex; flex-direction:column; gap:.35em; margin:0; flex:1 1 16em; }
.l3-avvisami__campo label{ font-size:14px; color:var(--l3s-muted); }
.l3-avvisami__campo input,
.l3-avvisami__campo select{
  background:var(--l3s-surface);
  border:1px solid var(--l3s-border);
  border-radius:2px; padding:0 12px; height:50px;
  color:var(--l3s-contrast);
  font-family:inherit; font-size:16px; /* 16: sotto, iOS ingrandisce la pagina al primo tocco */
  width:100%;
}
.l3-avvisami__campo input:focus,
.l3-avvisami__campo select:focus{ outline:2px solid var(--l3s-accent); outline-offset:1px; }
.l3-avvisami__invia{ margin:0; flex:none; }
.l3-avvisami__invia button{
  background:var(--l3s-button); color:var(--l3s-base);
  border:0; border-radius:2px; height:50px; padding:0 26px;
  font-family:inherit; font-size:16px; font-weight:500; cursor:pointer;
}
.l3-avvisami__invia button:hover{ background:var(--l3s-accent); }
.l3-avvisami__nota{ flex:1 1 100%; margin:1.2em 0 0; font-size:13.5px; line-height:1.5; color:var(--l3s-dim); }
.l3-avvisami__nota a{ color:var(--l3s-dim); text-decoration:underline; text-underline-offset:2px; }
.l3-avvisami__esca{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.l3-avvisami__errore{
  border-left:3px solid #d98c8c; background:var(--l3s-surface);
  padding:.9em 1.1em; margin:0 0 1.4em; color:var(--l3s-contrast); font-size:15px;
}
.l3-avvisami__esito{
  border-left:3px solid var(--l3s-accent);
  background:var(--l3s-surface); padding:1.2em 1.4em;
}
.l3-avvisami__esito h2{ margin:0 0 .4em; font-size:22px; }
.l3-avvisami__esito p{ margin:0; color:var(--l3s-muted); max-width:62ch; }
/* Le caselle dei servizi: in colonne dove c'e' spazio, una sotto l'altra sul
   telefono. Il bersaglio da toccare e' tutta la riga, non il quadratino. */
.l3-avvisami__servizi{ border:0; margin:0 0 1.4em; padding:0; }
.l3-avvisami__servizi legend{ font-size:14px; color:var(--l3s-muted); padding:0 0 .7em; }
.l3-avvisami__servizi > div{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15em,1fr)); gap:2px 20px; }
.l3-avvisami__scelta{
  display:flex; align-items:center; gap:.6em; cursor:pointer;
  padding:9px 0; font-size:15.5px; color:var(--l3s-contrast);
}
.l3-avvisami__scelta input{ width:18px; height:18px; flex:none; accent-color:var(--l3s-accent); }
.l3-avvisami__scelta span span{ color:var(--l3s-dim); font-size:13.5px; }
.l3-avvisami__riga{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; }
/* Sul telefono i campi vanno uno sotto l'altro e il pulsante prende tutta la
   riga. Questo blocco sta in fondo di proposito: viene dopo le regole che
   deve scavalcare, e a parita' di peso vince l'ultima. */
@media (max-width:640px){
  .l3-avvisami__riga{ display:block; }
  .l3-avvisami__campo{ margin-bottom:14px; }
  .l3-avvisami__invia button{ width:100%; }
}

/* ---------- titolo e invito, attorno al tabellone ---------- */

/* Stanno fuori dal div dello strumento, non dentro: il JavaScript quando
   monta il tabellone ricco svuota il div, e da dentro sparirebbero. Da fuori
   restano in tutti e due i casi. */

.l3-stato-titolo{
  max-width:var(--l3s-wrap); margin:0 auto .6em; padding-inline:var(--l3s-gutter);
  font-size:clamp(24px,3vw,34px); font-weight:500; letter-spacing:-.03em;
}

.l3-stato-invito{
  max-width:var(--l3s-wrap); margin:1.4em auto 0; padding-inline:var(--l3s-gutter);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.4em 1.2em;
  font-size:16.5px; line-height:1.6; color:var(--l3s-muted);
}
.l3-stato-invito__testo{ flex:1 1 28em; min-width:0; max-width:62ch; }
/* Il collegamento e' scritto come un collegamento e non come un pulsante: qui
   sotto c'e' gia' il tabellone, e un bottone pieno in fondo a una tabella di
   pallini verdi sembra il tasto che li aggiorna. */
.l3-stato-invito__tasto{
  flex:none; color:var(--l3s-accent); text-decoration:none;
  font-weight:500; white-space:nowrap;
}
.l3-stato-invito__tasto:hover{ text-decoration:underline; }