/* ==========================================================================
   FARTEC — Demo del distributore automatico
   Stessa impaginazione della demo della croce: a sinistra la scena, a destra
   i comandi. Qui però il fondale NON è in CSS — lo dipinge il canvas, perché
   deve passare dal giorno alla notte insieme alla macchina. Il contenitore
   resta scuro e neutro: è la cornice, non la scena.
   ========================================================================== */

.distdemo {
  --ui: #5c9dff;
  --ui-soft: rgba(10, 108, 255, .16);
  --shell: #0a0f16;
  --panel-ink: #e9eff7;
  --panel-dim: #97a6ba;
  --panel-line: rgba(255, 255, 255, .12);
  --panel-face: rgba(255, 255, 255, .05);

  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 0;
  color: var(--panel-ink);
  border-radius: 18px;
  overflow: hidden;
  background: var(--shell);
}

/* Sopra gli 820px scena e comandi si affiancano; la scena prende più spazio
   perché è lei il motivo per cui si apre la demo. min-height/min-width a 0 su
   entrambe le colonne è ciò che permette al pannello di scorrere invece di
   sfondare il modale: senza, la colonna cresce oltre il max-height del
   contenitore e l'eccesso finisce sotto l'overflow:hidden, invisibile. */
@media (min-width: 820px) {
  .distdemo { grid-template-columns: 1.1fr .9fr; }
}
.distdemo > * { min-height: 0; min-width: 0; }

/* La demo si adatta all'altezza che il modale le concede, invece di
   pretendere la propria. Senza questo, su telefono succedeva così: scena e
   pannello impilati chiedevano 960px, il modale ne concedeva 578 e tagliava
   il resto sotto il proprio overflow:hidden — i campioni di colore, cioè
   metà della funzione, erano invisibili E irraggiungibili, perché nessun
   contenitore intermedio scorreva.
   La riga della scena resta a contenuto (la decide il canvas), quella dei
   comandi prende il resto con minmax(0,1fr): è lo 0 del minmax a permettere
   al pannello di scorrere invece di gonfiare la griglia. */
.distdemo-host { display: block; height: 100%; min-height: 0; }
.distdemo { grid-template-rows: auto minmax(0, 1fr); height: 100%; }
@media (min-width: 820px) {
  .distdemo { grid-template-rows: minmax(0, 1fr); }
}

/* --------------------------------------------------------------- la scena */

.distdemo-scene {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  background: #070b11;
  isolation: isolate;
}

/* Il canvas riceve larghezza e altezza in pixel da JS (misura()): serve a
   disegnare alla densità giusta dello schermo. Qui si dichiara solo come si
   comporta nel flusso — display:block toglie i 4px di discesa della riga di
   testo, che sotto la macchina si vedrebbero come una fascia nera.
   Niente angoli arrotondati e niente margine: il canvas È la scena, e la
   smussatura degli angoli la dà .distdemo con il proprio overflow:hidden. */
.distdemo-canvas {
  display: block;
  max-width: 100%;
}

.distdemo-model {
  padding-bottom: 2px;
  color: #f7f9fc;
}
.distdemo-model b,
.distdemo-model span { display: block; }
.distdemo-model b {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.02em;
}
.distdemo-model span {
  margin-top: 3px;
  color: #b7c3d3;
  font-size: 12px;
  line-height: 1.3;
}

/* Se le immagini non arrivano, il canvas resta vuoto e sembra un guasto del
   browser. Il messaggio arriva da JS in data-errore. */
.distdemo-scene.is-ko::after {
  content: attr(data-errore);
  position: absolute;
  inset: auto 12px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 92, 92, .14);
  border: 1px solid rgba(255, 92, 92, .35);
  color: #ffd7d7;
  font-size: 14px;
  text-align: center;
}

/* ------------------------------------------------------------- i comandi */

.distdemo-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(18px, 3vw, 26px);
  overflow: auto;
  overflow-x: hidden;
  border-top: 1px solid var(--panel-line);
}
@media (min-width: 820px) {
  .distdemo-panel { border-top: 0; border-left: 1px solid var(--panel-line); }
}

.distdemo-group {
  margin: 0;
  padding: 0;
  border: 0;
}
.distdemo-group > legend,
.distdemo-ora > label {
  padding: 0;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--panel-dim);
}

/* --- gli interruttori degli allestimenti --- */

/* Sono <input type="checkbox"> veri sotto una pastiglia disegnata: la
   casella si nasconde agli occhi ma resta focalizzabile e annunciata come
   casella di controllo. Un <div> con role="switch" avrebbe richiesto di
   riscrivere a mano tastiera, stato e annuncio — peggio, e più fragile. */
.distdemo-switch {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--panel-line);
  border-radius: 12px;
  background: var(--panel-face);
  cursor: pointer;
}
.distdemo-switch:hover { border-color: rgba(255, 255, 255, .22); }
.distdemo-switch:has(input:checked) {
  border-color: rgba(92, 157, 255, .58);
  background: rgba(92, 157, 255, .09);
}
.distdemo-switch input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.distdemo-sw {
  position: relative;
  width: 46px; height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  transition: background .18s ease;
}
.distdemo-sw::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s ease;
}
.distdemo-switch input:checked + .distdemo-sw { background: var(--ui); }
.distdemo-switch input:checked + .distdemo-sw::after { transform: translateX(20px); }
/* Il focus va sulla pastiglia, non sulla casella nascosta: senza questo, chi
   naviga da tastiera non vedrebbe dove si trova. */
.distdemo-switch input:focus-visible + .distdemo-sw {
  outline: 2px solid var(--ui);
  outline-offset: 3px;
}
.distdemo-txt { display: block; min-width: 0; line-height: 1.35; }
.distdemo-txt b { display: block; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.distdemo-txt i { display: block; margin-top: 2px; font-style: normal; font-size: 13px; color: var(--panel-dim); }

/* --- il cursore dell'ora --- */

.distdemo-ora input[type="range"] {
  width: 100%;
  min-height: 40px;
  accent-color: var(--ui);
  background: transparent;
}
.distdemo-scala {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--panel-dim);
}

/* --- i campioni di colore --- */

.distdemo-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.distdemo-swatch { position: relative; cursor: pointer; }
.distdemo-swatch input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.distdemo-pastiglia {
  display: block;
  width: 34px; height: 34px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 0 0 2px transparent;
  transition: box-shadow .15s ease, transform .15s ease;
}
.distdemo-swatch input:checked + .distdemo-pastiglia {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 0 0 2px var(--shell), 0 0 0 4px #fff;
  transform: scale(1.06);
}
.distdemo-swatch input:focus-visible + .distdemo-pastiglia {
  outline: 2px solid var(--ui);
  outline-offset: 4px;
}
/* Il nome del colore serve allo screen reader e alla finestra dei
   suggerimenti, non agli occhi: a fianco di sei pastiglie sarebbe rumore. */
.distdemo-nome {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Senza Elegance non c'è profilo da colorare: il gruppo resta leggibile ma
   dichiaratamente inattivo, e la nota sotto dice perché. Nascondere il
   gruppo del tutto farebbe "saltare" il pannello a ogni interruttore. */
.distdemo-colori.is-off .distdemo-swatches { opacity: .32; }
.distdemo-colori.is-off .distdemo-swatch { cursor: not-allowed; }

.distdemo-nota {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--panel-dim);
}

.distdemo-stato {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--panel-line);
  font-size: 14px;
  line-height: 1.5;
  color: var(--panel-ink);
}

/* Regione live per lo screen reader (vedi annuncia() in dist-demo.js):
   nascosta solo agli occhi. Niente display:none o visibility:hidden, che la
   toglierebbero anche dall'albero di accessibilità e vanificherebbero
   l'annuncio; il ritaglio a 1px con clip resta lo standard per questo scopo. */
.distdemo-sr-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Sui dispositivi che si toccano i bersagli tornano a 44px: 34 basta al
   puntatore, non al pollice. */
@media (pointer: coarse) {
  .distdemo-pastiglia { width: 44px; height: 44px; }
  .distdemo-ora input[type="range"] { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .distdemo *, .distdemo *::before, .distdemo *::after {
    transition: none !important; animation: none !important;
  }
}