/* re.watt — foglio di stile, seconda stesura.
 *
 * La prima era un clone di fixit!: fondo grafite, riquadri arrotondati con
 * l'ombra, griglia di tessere. Bocciata, e giustamente.
 *
 * Qui l'impostazione e' opposta e voluta: CARTA CHIARA, niente scatole,
 * niente ombre. Le sezioni si separano con fili da un pixel, la gerarchia
 * la fa la dimensione del carattere e il vuoto. I numeri sono in monospazio
 * perche' questo e' uno strumento di misura, non un cruscotto.
 * Famiglia tipografica IBM Plex, diversa da quella di fixit! e PulseChain.
 *
 * Scala dei grafici validata (validate_palette --pairs all, light su
 * #F6F4F0): blu prelievo, ocra fotovoltaico, verde terza serie.
 */

:root {
  --carta:      #F6F4F0;
  --carta-2:    #EFEBE4;
  --filo:       #DFD9CE;
  --filo-tenue: #EAE5DC;

  --inchiostro:   #191C1E;
  --inchiostro-2: #5C6467;
  --inchiostro-3: #8E9498;

  --ocra:       #B0741A;   /* identita' re.watt: il punto del marchio */
  --prelievo:   #2E70AC;
  --fv:         #9A6416;
  --terza:      #12805A;

  --critico:    #B4291F;
  --attenzione: #A8730B;
  --ok:         #12805A;

  --rail: 236px;
}

* { box-sizing: border-box; }

/* Un `display` esplicito in una regola nostra batte l'`[hidden]` del
   browser, e l'elemento resta visibile pur essendo marcato nascosto.
   E' il tipo di errore che si ripresenta ogni volta: si chiude qui. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.cifra, .num, td.num, .sparkline text {
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

a { color: inherit; }

/* ------------------------------------------------ colonna di sinistra */

.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail);
  padding: 26px 0 20px;
  border-right: 1px solid var(--filo);
  display: flex; flex-direction: column;
  background: var(--carta);
}

.marchio {
  padding: 0 24px 26px;
  font-size: 25px; font-weight: 600; letter-spacing: -.025em;
  line-height: 1;
}
.marchio i { color: var(--ocra); font-style: normal; }
.marchio small {
  display: block; margin-top: 7px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--inchiostro-3);
}

.rail nav { display: flex; flex-direction: column; }
.rail .titolo {
  padding: 20px 24px 7px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--inchiostro-3);
}
.rail a {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 24px; text-decoration: none;
  font-size: 14.5px; color: var(--inchiostro-2);
  border-left: 2px solid transparent;
}
.rail a:hover { background: var(--carta-2); color: var(--inchiostro); }
.rail a[aria-current="page"] {
  border-left-color: var(--ocra); color: var(--inchiostro); font-weight: 600;
  background: var(--carta-2);
}
.rail a em {
  margin-left: auto; font-style: normal; font-size: 11px;
  color: var(--inchiostro-3); letter-spacing: .02em;
}

.rail .piede {
  margin-top: auto; padding: 18px 24px 0;
  border-top: 1px solid var(--filo);
  font-size: 12px; color: var(--inchiostro-3); line-height: 1.7;
}
.rail .piede b { color: var(--inchiostro-2); font-weight: 500; }

/* ------------------------------------------------ area principale */

main { margin-left: var(--rail); padding: 30px 44px 80px; max-width: 1500px; }

.cima {
  display: flex; align-items: flex-end; gap: 24px;
  padding-bottom: 16px; border-bottom: 1px solid var(--filo);
}
.cima h1 {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--inchiostro-3);
}
.cima .periodi { margin-left: auto; display: flex; gap: 2px; }
.cima .periodi button {
  border: 0; background: transparent; font: inherit; font-size: 13.5px;
  color: var(--inchiostro-3); padding: 4px 10px; cursor: pointer;
  border-radius: 3px;
}
.cima .periodi button:hover { color: var(--inchiostro); background: var(--carta-2); }
.cima .periodi button[aria-pressed="true"] {
  color: var(--inchiostro); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--ocra);
}

/* ------------------------------------------------ numero d'apertura */

.apertura { padding: 34px 0 30px; border-bottom: 1px solid var(--filo); }
.apertura .grande {
  display: flex; align-items: baseline; gap: 14px;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 66px; font-weight: 500; letter-spacing: -.03em; line-height: 1;
}
.apertura .grande u {
  font-size: 20px; font-weight: 500; text-decoration: none;
  color: var(--inchiostro-2); letter-spacing: 0;
}
.apertura .didascalia {
  margin-top: 12px; font-size: 15px; color: var(--inchiostro-2); max-width: 62ch;
}
.apertura .didascalia b { color: var(--inchiostro); font-weight: 600; }
.su   { color: var(--critico); font-weight: 600; }
.giu  { color: var(--ok); font-weight: 600; }

/* riga di misure affiancate, separate da fili verticali */
.misure { display: flex; flex-wrap: wrap; gap: 0; padding: 22px 0 0; }
.misure > div { padding: 0 30px; border-left: 1px solid var(--filo); }
.misure > div:first-child { padding-left: 0; border-left: 0; }
.misure .et {
  font-size: 11px; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--inchiostro-3);
}
.misure .vl {
  margin-top: 6px; font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 27px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15;
}
.misure .vl u { font-size: 14px; text-decoration: none; color: var(--inchiostro-2); }
.misure .nt { margin-top: 3px; font-size: 12.5px; color: var(--inchiostro-3); }

/* ------------------------------------------------ sezioni e blocchi */

section { padding: 30px 0; border-bottom: 1px solid var(--filo); }
section:last-child { border-bottom: 0; }

h2 {
  margin: 0 0 3px; font-size: 11px; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--inchiostro-3);
}
h2 + .sotto { margin: 0 0 20px; font-size: 13.5px; color: var(--inchiostro-3); }

.affianco { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; }
.affianco > *:last-child { padding-left: 36px; border-left: 1px solid var(--filo); }
@media (max-width: 1180px) {
  .affianco { grid-template-columns: 1fr; }
  .affianco > *:last-child { padding-left: 0; border-left: 0; padding-top: 30px; }
}

/* ------------------------------------------------ elenco dei corpi */

.corpi { width: 100%; border-collapse: collapse; }
.corpi th {
  text-align: left; padding: 0 14px 9px 0;
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--inchiostro-3);
  border-bottom: 1px solid var(--filo);
}
.corpi td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--filo-tenue); vertical-align: middle; }
.corpi tr:last-child td { border-bottom: 0; }
.corpi tr.riga { cursor: pointer; }
.corpi tr.riga:hover td { background: var(--carta-2); }
.corpi .sigla { font-weight: 600; font-size: 16px; white-space: nowrap; }
.corpi .desc { font-size: 12.5px; color: var(--inchiostro-3); }
.corpi .val {
  text-align: right; font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.corpi .val u { font-size: 12px; text-decoration: none; color: var(--inchiostro-3); margin-left: 3px; }
.corpi .quota { width: 140px; }
.corpi .var { text-align: right; font-size: 13.5px; white-space: nowrap; }
.corpi .spark { width: 132px; }
.corpi .spento td { color: var(--inchiostro-3); }
.corpi .spento .sigla { font-weight: 500; color: var(--inchiostro-2); }

.barretta { height: 6px; background: var(--carta-2); position: relative; }
.barretta i { position: absolute; inset: 0 auto 0 0; background: var(--prelievo); }
.barretta + span { font-size: 12px; color: var(--inchiostro-3); }

/* ------------------------------------------------ grafici */

.tela { position: relative; width: 100%; }
.tela svg { display: block; width: 100%; height: auto; overflow: visible; }
.sparkline svg { height: 30px; }

.asse text { fill: var(--inchiostro-3); font-size: 10.5px;
  font-family: "IBM Plex Mono", Consolas, monospace; }
.filo-griglia { stroke: var(--filo-tenue); stroke-width: 1; }
.filo-zero { stroke: var(--filo); stroke-width: 1; }

.legenda { display: flex; gap: 20px; flex-wrap: wrap; margin: 0 0 16px;
  font-size: 12.5px; color: var(--inchiostro-2); }
.legenda i { display: inline-block; width: 16px; height: 3px; margin-right: 7px; vertical-align: 3px; }

.suggerimento {
  position: absolute; pointer-events: none; opacity: 0;
  transform: translate(-50%, -100%);
  background: var(--inchiostro); color: #F6F4F0;
  padding: 8px 11px; font-size: 12.5px; white-space: nowrap; z-index: 5;
  transition: opacity .09s;
}
.suggerimento.visibile { opacity: 1; }
.suggerimento .g { color: #A9AFB2; font-size: 11px; margin-bottom: 4px;
  font-family: "IBM Plex Mono", Consolas, monospace; }
.suggerimento .r { display: flex; align-items: center; gap: 8px; }
.suggerimento .r i { width: 14px; height: 3px; flex: none; }
.suggerimento .r b { margin-left: auto; padding-left: 16px; font-weight: 500;
  font-family: "IBM Plex Mono", Consolas, monospace; }

/* ------------------------------------------------ classifica a barre */

.classifica { width: 100%; border-collapse: collapse; }
.classifica td { padding: 8px 0; border-bottom: 1px solid var(--filo-tenue); font-size: 13.5px; }
.classifica td:first-child { padding-right: 16px; }
.classifica tr:last-child td { border-bottom: 0; }
.classifica .b { width: 46%; }
.classifica .v { text-align: right; white-space: nowrap;
  font-family: "IBM Plex Mono", Consolas, monospace; font-size: 13.5px; }

/* ------------------------------------------------ tabelle */

table.dati { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.dati th {
  text-align: left; padding: 0 14px 8px 0; border-bottom: 1px solid var(--filo);
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--inchiostro-3);
}
table.dati td { padding: 7px 14px 7px 0; border-bottom: 1px solid var(--filo-tenue);
  color: var(--inchiostro-2); }
table.dati td:first-child { color: var(--inchiostro); }
table.dati .num { text-align: right; }
/* marcatori sottili: il testo prende la tinta, mai pallini o righe colorate */
.s-ok { color: var(--ok); }
.s-attenzione { color: var(--attenzione); }
.s-critico { color: var(--critico); font-weight: 600; }

/* ------------------------------------------------ avvisi e stati */

.avviso {
  padding: 14px 18px; background: var(--carta-2);
  border-left: 2px solid var(--ocra); font-size: 13.5px; color: var(--inchiostro-2);
  max-width: 78ch;
}
.avviso b { color: var(--inchiostro); font-weight: 600; }

.attesa, .vuoto { color: var(--inchiostro-3); font-size: 13.5px; padding: 24px 0; }

/* ------------------------------------------------ porta d'ingresso */

.porta { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: var(--carta); }
.porta > div { width: min(370px, 88vw); }
.porta form { width: 100%; }
.porta .alterna { margin: 16px 0 0; font-size: 13px; color: var(--inchiostro-3); }
.porta .alterna a { color: var(--ocra); text-decoration: underline; }
.porta .marchio { padding: 0 0 20px; }
.porta p { color: var(--inchiostro-3); font-size: 13.5px; margin: 0 0 18px; }
.porta input {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 14px;
  background: #fff; border: 1px solid var(--filo); color: var(--inchiostro);
  margin-bottom: 10px; font-family: "IBM Plex Mono", Consolas, monospace;
}
.porta input:focus { outline: 2px solid var(--ocra); outline-offset: -1px; }
.porta button {
  width: 100%; padding: 11px; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--inchiostro); color: var(--carta); border: 0;
}
.porta .errore { color: var(--critico); font-size: 13px; margin-top: 12px; min-height: 20px; }

@media (max-width: 860px) {
  :root { --rail: 0px; }
  .rail { position: static; width: auto; inset: auto; flex-direction: column;
    border-right: 0; border-bottom: 1px solid var(--filo); padding: 20px 0; }
  .rail nav { flex-direction: row; flex-wrap: wrap; padding: 0 16px; }
  .rail .titolo { display: none; }
  .rail a { border-left: 0; border-bottom: 2px solid transparent; padding: 6px 12px; }
  .rail a[aria-current="page"] { border-left: 0; border-bottom-color: var(--ocra); }
  .rail .piede { padding: 14px 16px 0; }
  main { padding: 20px 16px 60px; }
  .misure > div { padding: 0 18px 0 0; border-left: 0; }
}

/* ---------------------------------------------- accessi e inviti */

.modulo-riga { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.modulo-riga input {
  flex: 1 1 190px; min-width: 150px; padding: 9px 12px; font: inherit; font-size: 14px;
  background: #fff; border: 1px solid var(--filo); color: var(--inchiostro);
}
.modulo-riga input:focus { outline: 2px solid var(--ocra); outline-offset: -1px; }
.modulo-riga button {
  padding: 9px 18px; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--inchiostro); color: var(--carta); border: 0; flex: none;
}
.modulo-riga button:disabled { opacity: .55; cursor: default; }

.consegna { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.azione {
  display: inline-block; padding: 6px 13px; font: inherit; font-size: 13px;
  border: 1px solid var(--filo); background: #fff; color: var(--inchiostro);
  cursor: pointer; text-decoration: none;
}
.azione:hover { background: var(--carta-2); }
.azione.tenue { border-color: transparent; color: var(--inchiostro-3); background: transparent; }
.azione.tenue:hover { color: var(--critico); background: transparent; }
.senza-numero { font-size: 12.5px; color: var(--inchiostro-3); }

.codice-nuovo {
  margin-top: 22px; padding: 20px 24px;
  background: var(--carta-2); border-left: 2px solid var(--ocra);
  max-width: 620px;
}
.codice-nuovo .et {
  font-size: 11px; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--inchiostro-3);
}
.codice-nuovo .cod {
  margin: 8px 0 4px; font-size: 38px; font-weight: 500;
  letter-spacing: .06em; line-height: 1.1;
}
.codice-nuovo .nt { font-size: 13px; color: var(--inchiostro-2); }

/* ---------------------------------------------- schede di un corpo */

/* Sono l'unico elemento di navigazione dentro la pagina: si distinguono
   dal selettore di periodo (che sta in alto a destra) perche' portano il
   filo sotto e stanno larghe a sinistra. */
.schede {
  display: flex; gap: 0; margin: 0 0 4px;
  border-bottom: 1px solid var(--filo); flex-wrap: wrap;
}
.schede a {
  padding: 12px 20px 11px; text-decoration: none;
  font-size: 14px; color: var(--inchiostro-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.schede a:first-child { padding-left: 0; }
.schede a:hover { color: var(--inchiostro); }
.schede a[aria-current="page"] {
  color: var(--inchiostro); font-weight: 600; border-bottom-color: var(--ocra);
}

#dentro-scheda > section:first-child { padding-top: 26px; }