/* ============================================================
   DEMO COME PAGINA
   Le sei demo sono file veri, non blocchi dentro la home. Dentro
   il banco stanno in un telaio, cosi' la barra dell'indirizzo
   smette di essere finta e si scarica solo quello che si apre;
   fuori dal banco si aprono da sole, e diventano il campione che
   si manda al cliente.

   Questo foglio serve solo a rimettere in piedi `.demo` quando
   e' il `body` e non un pannello: nel sistema `.demo` e' un
   riquadro sovrapposto, invisibile e non scorrevole finche' non
   e' attivo. Nessun colore e nessuna misura qui dentro: quelli
   restano in sistema.css, uno solo, come prima.
   ============================================================ */

html.pagina-demo, body.pagina-demo{ height:auto; }

body.demo.pagina-demo{
  position:static;
  inset:auto;
  overflow:visible;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  min-height:100svh;
  margin:0;
}

/* Il fondale della home non c'entra niente qui: la demo ha il suo. */
body.pagina-demo::before{ content:none; }

/* Aperta da sola, la demo dichiara cosa e'. Dentro il telaio la
   fascia non serve, perche' la nota sotto il banco lo dice gia'. */
body.demo .demo-avviso{
  display:block; max-width:none; padding:.7rem 1.25rem; text-align:center;
  font-family:var(--d-ui); font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; line-height:1.5;
  background:var(--d-sup); color:var(--d-ink);
  border-bottom:1px solid var(--d-line);
}
.demo-avviso a{ color:inherit; }
body.demo.in-telaio .demo-avviso{ display:none; }

/* Coda della pagina, solo fuori dal telaio. */
body.demo .demo-coda{
  max-width:none; padding:2.5rem 1.25rem 3rem; border-top:1px solid var(--d-line);
  font-family:var(--d-ui); font-size:.75rem; line-height:1.6; color:var(--d-soft);
  text-align:center;
}
.demo-coda a{ color:var(--d-acc); }
body.demo.in-telaio .demo-coda{ display:none; }