:root {
  --fondo: #0d1014;
  --carta: #161b21;
  --bordo: #252c35;
  --testo: #dfe4ea;
  --spento: #8b939d;
  --freddo: #35c8f5;
  --caldo: #ff6a33;
  --verde: #4fd18b;
}
* { box-sizing: border-box; }
/* "hidden" vince sempre, anche su .barra che è flex: le parti solo locali o
   solo online si tolgono così */
[hidden] { display: none !important; }
/* un gruppo dentro una barra resta in fila con il resto della barra */
.barra > .solo-locale { display: contents; }
body {
  margin: 0; background: var(--fondo); color: var(--testo);
  font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  font-size: 15px; line-height: 1.5;
}
header { padding: 20px 24px 8px; }
h1 { margin: 0; font-size: 30px; letter-spacing: 1px; color: var(--freddo); }
h1 .i { color: var(--caldo); }
header p { margin: 4px 0 0; color: var(--spento); }
main { padding: 8px 24px 40px; display: flex; flex-direction: column; gap: 16px;
       max-width: 1100px; }
section { background: var(--carta); border: 1px solid var(--bordo);
          border-radius: 10px; padding: 16px 18px; }
h2 { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
h2 .n { display: inline-block; width: 24px; height: 24px; line-height: 24px;
        text-align: center; border-radius: 50%; background: var(--freddo);
        color: #06131a; font-size: 14px; margin-right: 8px; }
.barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
         margin-bottom: 10px; }
label { color: var(--spento); font-size: 14px; }
.nota { color: var(--spento); font-size: 13px; flex: 1 1 260px; min-width: 200px; }
.nota.attenzione { color: var(--caldo); }
.oppure { color: var(--spento); font-size: 13px; }
button, select, input[type=text], input[type=password] {
  font: inherit; color: var(--testo); background: #1e242c;
  border: 1px solid var(--bordo); border-radius: 7px; padding: 7px 11px;
}
button { cursor: pointer; background: #22303a; border-color: #2f4250; }
button:hover:not(:disabled) { background: #2b3d4a; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.grosso { background: var(--freddo); color: #06131a; font-weight: 600;
                border-color: var(--freddo); padding: 10px 18px; }
button.grosso:hover:not(:disabled) { background: #5ad4f8; }
select { max-width: 520px; }
table { width: 100%; border-collapse: collapse; margin-top: 4px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--bordo);
         font-size: 14px; vertical-align: top; }
th { color: var(--spento); font-weight: 500; font-size: 13px; }
tbody tr.scelta { background: #1b2a33; }
tbody tr.no { opacity: .55; }
td.vuoto, tr.vuoto td { color: var(--spento); }
ol#passi { margin: 0 0 12px; padding-left: 0; list-style: none; }
ol#passi li { border-top: 1px solid var(--bordo); padding: 9px 0; }
ol#passi li:first-child { border-top: none; }
ol#passi .titolo { display: flex; gap: 9px; align-items: flex-start; }
ol#passi .titolo b { font-weight: 600; }
ol#passi .testo { color: var(--spento); font-size: 13.5px; margin: 3px 0 0 26px; }
.riquadro { color: var(--testo); display: flex; gap: 7px; align-items: center; }
.progresso { height: 7px; background: #1e242c; border-radius: 4px;
             overflow: hidden; margin-bottom: 10px; }
#barra-progresso { height: 100%; width: 0; background: var(--freddo);
                   transition: width .2s; }
pre#log { margin: 0; max-height: 320px; overflow: auto; background: #0a0d11;
          border: 1px solid var(--bordo); border-radius: 8px; padding: 11px;
          font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
          font-size: 12.5px; color: #c6ccd3; white-space: pre-wrap; }
pre#log .ok { color: var(--verde); }
pre#log .brutto { color: var(--caldo); }
/* La casa */
h2 small { color: var(--spento); font-weight: 400; font-size: 13px;
           margin-left: 6px; }
p.spiega { margin: 0 0 12px; color: var(--spento); font-size: 13.5px;
           max-width: 880px; }
p.spiega b { color: var(--testo); font-weight: 600; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
       font-size: 12.5px; color: var(--testo); }
/* La tabella delle stanze sta stretta a sinistra: larga quanto la pagina, il
   nome e il suo relè finirebbero ai due capi dello schermo. */
#casa table { width: auto; margin-bottom: 8px; }
#casa td { vertical-align: middle; }
#casa td input[type=text] { width: 280px; max-width: 60vw; }
#casa td input.sbagliato, #casa select.sbagliato { border-color: var(--caldo); }
#casa td.stretta { width: 1%; white-space: nowrap; }
.barra.sotto-tabella { margin-top: 8px; }
.relay { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.relay span { border: 1px solid var(--bordo); border-radius: 6px;
              padding: 3px 9px; font-size: 13px; background: #1e242c; }
.relay span b { color: var(--freddo); font-weight: 600; margin-right: 5px; }
.relay span.libero { color: var(--spento); background: none; }
.relay span.libero b { color: var(--spento); }
.relay span.doppio { border-color: var(--caldo); }
#casa-esito { margin: 0 0 12px; }
#casa-avviso { margin: -4px 0 12px; }
#casa-esito.va-bene { color: var(--verde); }
/* Riquadro dei requisiti */
#requisiti { border-color: var(--caldo); }
#requisiti h2 .n { background: var(--caldo); }
#requisiti p { margin: 0 0 12px; }
#requisiti td.stato-ok { color: var(--verde); white-space: nowrap; }
#requisiti td.stato-no { color: var(--caldo); white-space: nowrap; }
#requisiti td small { color: var(--spento); display: block; margin-top: 3px; }
ul.elenco-nota { margin: 12px 0; padding-left: 20px; color: var(--spento);
                 font-size: 13.5px; }
ul.elenco-nota li { margin-bottom: 4px; }
/* Collegamenti fra le due pagine */
header a { color: var(--freddo); }
/* La pagina del deumidificatore */
#pagina-deumidificatore td small { display: block; color: var(--spento);
                                   margin-top: 3px; }
#pagina-deumidificatore td.va-bene { color: var(--verde); white-space: nowrap; }
#pagina-deumidificatore td.attenzione { color: var(--caldo); }
#pagina-deumidificatore td.va-bene small,
#pagina-deumidificatore td.attenzione small { white-space: normal; }
#pagina-deumidificatore p.nota { margin: 8px 0 0; }
#pagina-deumidificatore p.va-bene { color: var(--verde); }
#pagina-deumidificatore table { margin-bottom: 4px; }
/* La nota del bus nell'editor della casa, e la pagina dei collegamenti */
#casa-nota-bus { margin: -2px 0 10px; }
#casa-nota-bus span.attenzione { color: var(--caldo); }
#casa-nota-bus a { color: var(--freddo); }
#pagina-rs485 h3 { margin: 14px 0 6px; font-size: 14px; font-weight: 600; color: var(--spento); }
#pagina-rs485 ol { margin: 0 0 8px; padding-left: 22px; max-width: 880px; font-size: 14px; }
#pagina-rs485 ol li { margin-bottom: 7px; }
#pagina-rs485 ul.elenco-nota { max-width: 880px; }
#pagina-rs485 ul.attenzione { color: var(--caldo); }
#pagina-rs485 span.va-bene { color: var(--verde); }
#pagina-rs485 p.nota { margin: 6px 0; }