/* L3 — Indice di rischio: l'aspetto del questionario e del risultato.
 *
 * Le variabili hanno il loro valore di ripiego: su un sito senza il nostro
 * tema non esistono, e senza ripiego il questionario sarebbe testo nero su
 * fondo nero. Dove il tema Layer3 c'e', vince lui e non cambia niente.
 */

:root{
  --l3r-border:   var(--wp--preset--color--border, #26282a);
  --l3r-contrast: var(--wp--preset--color--contrast, #d8d1c2);
  --l3r-surface:  var(--wp--preset--color--surface, #101112);
  --l3r-muted:    var(--wp--preset--color--muted, #a8a091);
  --l3r-muted-2:  var(--wp--preset--color--muted-2, #9c9484);
  --l3r-dim:      var(--wp--preset--color--dim, #7b7466);
  --l3r-dim-2:    var(--wp--preset--color--dim-2, #5f594f);
  --l3r-accent:   var(--wp--preset--color--accent, #9fd3b8);
  --l3r-mono:     var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

/* Il pallino delle risposte: due righe che tiene anche il plugin dello stato
   dei servizi. E' il prezzo per poter installare l'uno senza l'altro, ed e'
   meno del prezzo di un foglio condiviso che nessuno dei due puo' garantire. */

.l3-tool__again{
  background:none; border:0; padding:0; cursor:pointer; font:inherit;
  font-family:var(--l3r-mono); font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--l3r-accent); text-align:left;
}
.l3-tool__again:hover{ text-decoration:underline; }

/* elenco delle aree, nell'introduzione */
.l3-tool__area{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:18px 0; border-bottom:1px solid var(--l3r-border);
}
.l3-tool__area:first-child{ border-top:1px solid var(--l3r-border); }
.l3-tool__area-name{ font-size:19px; }
.l3-tool__area-n{ font-family:var(--l3r-mono); font-size:12px; color:var(--l3r-dim); }

/* quiz */
.l3-tool__quiz{ max-width:780px; }
.l3-tool__qmeta{
  display:flex; gap:18px; align-items:center; font-family:var(--l3r-mono);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--l3r-dim);
}
.l3-tool__qarea{ color:var(--l3r-accent); }
.l3-tool__dots{ display:flex; gap:6px; margin:18px 0 26px; }
.l3-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; }
.l3-dot--off{ background:#2a2c2e; }
.l3-dot--ok{ background:#4ade80; }
.l3-dot--ko{ background:#f87171; }
.l3-dot--idk{ background:#fbbf24; }
.l3-tool__q{ font-size:clamp(26px,3.2vw,38px); font-weight:500; letter-spacing:-.03em; line-height:1.15; margin:0 0 14px; }
.l3-tool__hint{ font-size:16px; color:var(--l3r-muted-2); margin:0 0 30px; max-width:60ch; }
.l3-tool__answers{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
.l3-answer{
  display:inline-flex; align-items:center; gap:12px; height:52px; padding:0 26px;
  background:transparent; color:var(--l3r-contrast);
  border:1px solid var(--l3r-border); border-radius:2px;
  font:inherit; font-size:16px; cursor:pointer; transition:border-color .15s, background .15s;
}
.l3-answer:hover{ border-color:var(--l3r-accent); background:var(--l3r-surface); }
.l3-answer kbd{
  font-family:var(--l3r-mono); font-size:11px; color:var(--l3r-dim);
  border:1px solid var(--l3r-border); border-radius:2px; padding:2px 6px;
}

/* risultato */
.l3-score{ display:flex; align-items:baseline; gap:12px; }
.l3-score__n{ font-size:clamp(64px,9vw,110px); font-weight:400; letter-spacing:-.05em; line-height:1; }
.l3-score__of{ font-family:var(--l3r-mono); font-size:13px; color:var(--l3r-dim); }
.l3-score--critico .l3-score__n{ color:#f87171; }
.l3-score--fragile .l3-score__n{ color:#fbbf24; }
.l3-score--solido  .l3-score__n{ color:#4ade80; }

.l3-pri{
  display:grid; grid-template-columns:44px 1fr auto; gap:18px; align-items:start;
  padding:20px 0; border-top:1px solid var(--l3r-border);
}
.l3-pri__n{ font-family:var(--l3r-mono); font-size:12px; color:var(--l3r-dim-2); }
.l3-pri__fix{ font-size:17px; margin:0 0 6px; }
.l3-pri__why{ font-size:14.5px; color:var(--l3r-muted-2); margin:0; }
.l3-pri__label{ font-family:var(--l3r-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.l3-pri__label--critico{ color:#f87171; }
.l3-pri__label--fragile{ color:#fbbf24; }
.l3-pri__label--solido{ color:var(--l3r-accent); }

.l3-area{ display:grid; grid-template-columns:130px 1fr 48px; gap:14px; align-items:center; padding:9px 0; }
.l3-area__name{ font-size:15px; color:var(--l3r-muted); }
.l3-area__bar{ height:4px; background:#1b1d1f; border-radius:2px; overflow:hidden; }
.l3-area__fill{ display:block; height:100%; }
.l3-area__fill--critico{ background:#f87171; }
.l3-area__fill--fragile{ background:#fbbf24; }
.l3-area__fill--solido{ background:#4ade80; }
.l3-area__pct{ font-family:var(--l3r-mono); font-size:12.5px; text-align:right; color:var(--l3r-muted); }