/* AgilePixel — un solo foglio di stile, nessun font remoto, nessuna immagine remota.
   Sovranità: la pagina si vede intera anche con la rete verso terzi staccata.
   Tema chiaro e scuro con prefers-color-scheme; legge bene sul telefono. */

:root {
  --sfondo:      #ffffff;
  --sfondo-2:    #f4f5f7;
  --inchiostro:  #17191c;
  --inchiostro-2:#4a4f57;
  --bordo:       #d7dae0;
  --accento:     #1a5fb4;
  --accento-2:   #0b3b74;
  --verde:       #1a7f37;
  --ambra:       #8a5a00;
  --rosso:       #a61b1b;
  --misura:      72ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sfondo:      #14161a;
    --sfondo-2:    #1c1f25;
    --inchiostro:  #e9ebef;
    --inchiostro-2:#b3b9c4;
    --bordo:       #343a44;
    --accento:     #78b2f0;
    --accento-2:   #a8ccf7;
    --verde:       #5fd47f;
    --ambra:       #e0b44a;
    --rosso:       #f08a8a;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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

.pelle { max-width: 62rem; margin: 0 auto; padding: 0 1.25rem 4rem; }

/* --- testa e selettore di lingua ------------------------------------------------------- */
header.testa {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: baseline; justify-content: space-between;
  padding: 1.5rem 0 1rem; border-bottom: 1px solid var(--bordo);
}
header.testa .marchio { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
header.testa .marchio small {
  display: block; font-size: .8rem; font-weight: 400; color: var(--inchiostro-2);
  letter-spacing: 0;
}
nav.lingue a { font-weight: 600; }
nav.sommario { padding: .75rem 0 0; }
nav.sommario ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
nav.sommario a { color: var(--inchiostro-2); text-decoration: none; border-bottom: 1px dotted var(--bordo); }
nav.sommario a:hover, nav.sommario a:focus { color: var(--accento); border-bottom-color: currentColor; }

a { color: var(--accento); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--accento); outline-offset: 2px;
}

section { padding: 2.25rem 0 .5rem; border-top: 1px solid var(--bordo); }
section:first-of-type { border-top: 0; }
h1 { font-size: 1.9rem; line-height: 1.25; margin: 1.5rem 0 .5rem; letter-spacing: -.02em; }
h2 { font-size: 1.3rem; margin: 0 0 .75rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin: 1.25rem 0 .35rem; }
p, li { max-width: var(--misura); }
.occhiello { color: var(--inchiostro-2); font-size: 1.05rem; max-width: var(--misura); }

/* --- piani ---------------------------------------------------------------------------- */
.piani { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); padding: .25rem 0 0; }
.piano { border: 1px solid var(--bordo); border-radius: 10px; padding: 1rem 1.1rem; background: var(--sfondo-2); }
.piano h3 { margin-top: 0; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; color: var(--inchiostro-2); }
.piano .prezzo { font-weight: 700; font-size: 1.05rem; margin: .1rem 0 .75rem; }
.piano dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; font-size: .92rem; }
.piano dt { color: var(--inchiostro-2); }
.piano dd { margin: 0; font-variant-numeric: tabular-nums; }

/* --- tabelle -------------------------------------------------------------------------- */
.scorre { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; margin: .5rem 0 1rem; }
caption { text-align: left; color: var(--inchiostro-2); font-size: .88rem; padding-bottom: .5rem; }
th, td { text-align: left; padding: .5rem .65rem; border-bottom: 1px solid var(--bordo); vertical-align: top; }
thead th { border-bottom: 2px solid var(--bordo); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--inchiostro-2); }
tbody th { font-weight: 500; }
td.nostro, td.leader { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.nostro { font-weight: 600; }
/* da dove viene il numero: giorno, pagine, sha. La riga esiste solo se un rapporto la riempie. */
.provenienza { color: var(--inchiostro-2); font-size: .85rem; margin: -.5rem 0 1rem; }

/* --- codice ---------------------------------------------------------------------------- */
pre {
  background: var(--sfondo-2); border: 1px solid var(--bordo); border-radius: 8px;
  padding: .85rem 1rem; overflow-x: auto; font-size: .86rem; line-height: 1.5;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
p code, li code, td code { background: var(--sfondo-2); border: 1px solid var(--bordo); border-radius: 4px; padding: .05em .35em; font-size: .9em; }

/* --- stato del servizio ---------------------------------------------------------------- */
#stato-servizio {
  border: 1px solid var(--bordo); border-left: 4px solid var(--inchiostro-2);
  border-radius: 8px; background: var(--sfondo-2); padding: .9rem 1.1rem;
}
#stato-servizio.ok       { border-left-color: var(--verde); }
#stato-servizio.degradato{ border-left-color: var(--ambra); }
#stato-servizio.fermo    { border-left-color: var(--rosso); }
#stato-servizio .riga { font-weight: 600; }
#stato-servizio dl { margin: .6rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .15rem .7rem; font-size: .9rem; }
#stato-servizio dt { color: var(--inchiostro-2); }
#stato-servizio dd { margin: 0; font-variant-numeric: tabular-nums; }

/* --- modulo --------------------------------------------------------------------------- */
form.licenza { max-width: 34rem; }
form.licenza p { margin: 0 0 .85rem; max-width: none; }
form.licenza label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .2rem; }
form.licenza .aiuto { display: block; font-weight: 400; color: var(--inchiostro-2); font-size: .85rem; }
input[type=text], input[type=email], select, textarea {
  width: 100%; padding: .5rem .6rem; font: inherit; font-size: .95rem;
  color: var(--inchiostro); background: var(--sfondo);
  border: 1px solid var(--bordo); border-radius: 6px;
}
textarea { min-height: 5.5rem; resize: vertical; }
button {
  font: inherit; font-weight: 600; padding: .55rem 1.2rem; border-radius: 6px;
  border: 1px solid var(--accento-2); background: var(--accento); color: #fff; cursor: pointer;
}
@media (prefers-color-scheme: dark) { button { color: #0d1117; } }
button:hover { border-color: var(--accento); filter: brightness(1.08); }

footer { border-top: 1px solid var(--bordo); margin-top: 2.5rem; padding-top: 1.25rem; color: var(--inchiostro-2); font-size: .9rem; }