/* Demo (F0-12, S11): solo il pannello «Demo» e il telefono vero. Colori e font del marchio dai token (tokens.css, tokens-marchio.css). */

/* S14: il passaggio animato tra pagine (tokens.css) parte solo se anche la pagina nuova lo chiede da subito: tokens.css arriva dopo, demo.css subito. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Su un telefono vero la cornice del dispositivo dei mockup sparisce: lo schermo è il telefono stesso. */
@media (max-width: 800px) {
  body .is-phone, body .board.is-phone { display: block; padding: 0; background: var(--bg); }
  body .is-phone .device, body .is-phone .auth-device { width: 100%; height: auto; min-height: 100dvh; overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
  body .is-phone .stage { height: auto; overflow: visible; }
  /* S13: A-Porta mette la Home in un livello assoluto sopra la porta: il riquadro resta largo quanto il telefono e alto quanto lo schermo */
  body .is-phone .view.live .view-scale { width: 100%; }
  body .is-phone .stage:has(> .home) { height: 100dvh; overflow: hidden; }
}

.demo-pannello { position: fixed; left: var(--s-4); bottom: var(--s-4); z-index: 1000; max-width: min(320px, calc(100vw - 2 * var(--s-4)));
  font: 400 var(--fs-small)/1.45 var(--font-sans); color: var(--text); }
.demo-pannello > summary { list-style: none; cursor: pointer; width: max-content; padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); box-shadow: var(--shadow-lg); font-weight: 600; }  /* S13 (R4): colori del pulsante principale, si riconosce su ogni pagina */
.demo-pannello > summary::-webkit-details-marker { display: none; }
.demo-pannello > summary:focus-visible, .demo-pannello a:focus-visible, .demo-pannello select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.demo-corpo { margin-bottom: var(--s-2); padding: var(--s-4); max-height: 70dvh; overflow: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-lg); }
.demo-pannello[open] { display: flex; flex-direction: column-reverse; }
.demo-corpo p { margin: 0 0 var(--s-3); color: var(--muted); }
.demo-corpo .demo-tit { display: block; margin: var(--s-3) 0 var(--s-2); color: var(--text); font-weight: 600; }
.demo-corpo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-1); }
.demo-corpo a { color: var(--text); text-decoration: none; display: block; padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); }
.demo-corpo a:hover { background: var(--surface-2); }
.demo-corpo a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.demo-corpo select { display: block; width: 100%; margin-top: var(--s-2); padding: var(--s-2); font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); }

/* S13 (R8): pagina «Mockup ancora non pronto per questa sezione» (generata da demo.js) */
.manca { min-height: 100dvh; display: grid; place-items: center; padding: var(--s-6) var(--s-4) calc(var(--s-12) + var(--s-6)); background: var(--bg); color: var(--text); }
.manca-box { width: min(34rem, 100%); padding: var(--s-8) var(--s-6); display: grid; gap: var(--s-3); }
.manca-box p { margin: 0; }
.manca-logo { width: 112px; height: auto; margin-bottom: var(--s-3); }
.manca-azioni { margin-top: var(--s-3); }

/* S13 (R4): sul computer, nello spazio vuoto del menu sopra il riquadro «Titolare» */
@media (min-width: 801px) { body:has(.sidebar) .demo-pannello { bottom: calc(2 * var(--s-12)); } }
@media (max-width: 800px) {
  .demo-pannello { bottom: calc(var(--s-12) + var(--s-6)); left: var(--s-3); }
  /* S13 (R4): spazio in fondo al contenuto (sopra la barra), così l'ultima riga si può sempre far scorrere sopra il pulsante */
  body .is-phone .main { padding-bottom: calc(var(--s-6) + var(--s-12)); }
  /* accesso e porta: niente barra in basso e testo fino al fondo; in alto a destra, accanto al logo, non copre nulla */
  body:not(:has(.bnav)) .demo-pannello { top: var(--s-3); right: var(--s-3); bottom: auto; left: auto; align-items: flex-end; }
  body:not(:has(.bnav)) .demo-pannello[open] { flex-direction: column; }
  body:not(:has(.bnav)) .demo-corpo { margin: var(--s-2) 0 0; }
}