/* Il lettore riserva lo spazio della barra del sito, con il piè sotto la prima schermata. */
* { box-sizing: border-box; }
:root { --sc-vetrina-barra: 56px; }
html { font-size: calc(clamp(14px, min(1.1vw, calc((100dvh - var(--sc-vetrina-barra)) * .0195)), 20px) * var(--sc-scala)); }
/* Le ricostruzioni dense crescono del 15%, senza raddoppiare la scala dei token. */
html.projector { --sc-scala: 1.15; --sc-vetrina-barra: 0px; }
html, body { margin: 0; min-height: 100%; }
/* La barra del sito e la testata del lettore non sottraggono spazio alle scene al proiettore. */
body.demo-vetrina { padding-top: var(--sc-vetrina-barra); }
.demo-vetrina .sito-barra { height: var(--sc-vetrina-barra); }
.demo-vetrina .sito-logo img { width: 84px; height: 40px; }
.vetrina-lettore { height: calc(100dvh - var(--sc-vetrina-barra)); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; gap: .65rem; padding: .75rem 1.25rem; background: var(--sc-fondo); color: var(--sc-testo); font: 1rem/1.35 var(--sc-font); }
.demo-vetrina main { display: contents; }
.hidden { display: none !important; }
button { font: inherit; }
a { color: inherit; }
.demo-testata { grid-row: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: .35rem 1.25rem; margin: -.75rem -1.25rem 0; background: var(--sc-marchio); color: var(--sc-marchio-testo); font-family: var(--sc-font-marchio); --sc-focus-colore: var(--sc-marchio-testo); }
.demo-testata > a { justify-self: start; font-size: .95rem; text-decoration: none; }
.demo-testata > a:hover { text-decoration: underline; }
.demo-identita { text-align: center; }
.demo-identita h1 { font-size: 1.25rem; line-height: 1.2; margin: 0; }
.demo-identita span, .demo-nota { color: var(--sc-marchio-testo-2); font-size: .85rem; }
.demo-info { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .35rem .6rem; }
.demo-nota { text-align: right; }
.demo-info nav { display: flex; align-items: center; gap: .2rem; }
.demo-logo { display: inline-flex; align-items: center; gap: .5rem; }
.demo-logo > span { display: grid; font-size: 1.3rem; font-weight: 400; line-height: .9; letter-spacing: -.03em; }
.demo-logo img { flex-shrink: 0; }
.demo-testata .ui-btn { background: transparent; color: var(--sc-marchio-testo); border-color: var(--sc-marchio-testo-a40); border-radius: var(--sc-raggio-pillola); font-family: inherit; }
.demo-testata .ui-btn:hover { background: var(--sc-marchio-testo-a8); }
.demo-testata [aria-pressed="true"] { border-color: var(--sc-marchio-testo); background: var(--sc-marchio-testo); color: var(--sc-marchio-bianco); }
.demo-testata [aria-pressed="true"]:hover { background: var(--sc-marchio-testo-2); }
#layer { grid-row: 2; grid-column: 1; min-height: 0; min-width: 0; overflow: auto; }
#layer .scene { min-height: 100%; }
/* Le finestre ricostruite usano tutta la larghezza e soltanto l'altezza necessaria. */
#layer .scene > :first-child { position: static; inset: auto; height: auto; min-height: 0; max-width: none; width: 100%; margin: 0; overflow: visible; }
#cap { grid-row: 3; text-align: center; padding: .25rem 1rem; }
#capKick { color: var(--sc-azione); font-size: .9rem; font-weight: 700; margin-bottom: .35rem; }
#capLine { font-size: 1.45rem; line-height: 1.3; font-weight: 650; text-wrap: balance; margin: 0 auto; max-width: 72rem; }
#bar { grid-row: 4; display: flex; align-items: center; gap: .65rem; padding: .65rem .85rem; border: 1px solid var(--sc-bordo); border-radius: var(--sc-raggio-l); background: var(--sc-superficie); }
#bar .ui-btn--icona { min-width: 2.4rem; min-height: 2.4rem; padding: .4rem; }
#trackWrap { flex: 1; min-width: 0; }
#track { position: relative; height: .6rem; border-radius: var(--sc-raggio-pillola); background: var(--sc-superficie-3); cursor: pointer; touch-action: none; }
#fill { height: 100%; width: 0; background: var(--sc-azione); border-radius: inherit; }
#knob { position: absolute; top: 50%; width: 1rem; height: 1rem; border-radius: 50%; background: var(--sc-testo); transform: translate(-50%, -50%); }
#ticks i { position: absolute; top: 0; height: 100%; border-left: 2px solid var(--sc-superficie); }
#chapters { position: relative; height: 1.7rem; margin-top: .35rem; }
.chap { position: absolute; top: 0; height: 100%; min-height: 0; padding: .15rem .3rem; border: 0; border-radius: var(--sc-raggio-s); background: transparent; color: var(--sc-testo-secondario); font: inherit; font-size: .85rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.chap.on { color: var(--sc-azione); }
.chap:focus-visible { outline-offset: calc(-1 * var(--sc-focus-spessore)); }
#time { font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* In pausa la ripresa è nella barra: il pulsante grande non copre la scena. */
#bigPlay { display: none; }
#end { grid-row: 2; grid-column: 1; min-height: 0; z-index: 4; display: grid; place-items: center; background: var(--sc-fondo); overflow: auto; }
.endcard, .cartolina { text-align: center; max-width: 44rem; padding: 2rem; }
.endcard h1, .cartolina h1 { font-size: 2.5rem; }
.endbtns { display: flex; justify-content: center; gap: 1rem; }

/* Sotto le misure da proiettore si può scorrere la scena, tenendo sempre i comandi in vista. */
@media (max-width: 1023px) {
  .demo-vetrina #sito-menu { top: var(--sc-vetrina-barra); max-height: calc(100dvh - var(--sc-vetrina-barra)); }
}
@media (max-width: 760px) {
  .demo-testata { grid-template-columns: 1fr 1fr; gap: .5rem; margin: -.5rem -.5rem 0; padding: .6rem; }
  .demo-identita { grid-row: 2; grid-column: 1 / -1; }
  .demo-info { grid-column: 2; grid-row: 1; }
  .demo-nota { font-size: .8rem; }
  .vetrina-lettore { padding: .5rem; gap: .4rem; }
  #bar { gap: .35rem; padding: .5rem; flex-wrap: wrap; }
  #trackWrap { flex-basis: 50%; }
  #cap { padding: .2rem; }
  #capLine { font-size: 1.2rem; }
  .area, .acp-app, .cc-diviso, .app-demo, .wp-grid { grid-template-columns: 1fr; }
  .calendario, .app-demo aside, .acp-app aside { display: none; }
  .acp-settimana { grid-template-columns: repeat(5, minmax(9rem, 1fr)); }
  .app-report .flusso, .app-report .fasi, .misure { grid-template-columns: 1fr 1fr; }
  .cc-asse { grid-template-columns: 9rem repeat(5, 1fr); }
  .cc-riga { grid-template-columns: 9rem 1fr; }
}