/* ════════════════════════════════════════════════════════════
   BioReFeel® Interactive Lab — reset, hardening kiosk, tipografia
   Colori: solo var() di tokens.css, eventualmente con opacità.
   ════════════════════════════════════════════════════════════ */

:root{
  /* Palco fisso 810 × 1080 pt (iPad 9, verticale). Su qualsiasi altro schermo viene
     scalato intero (js/app.js): quello che si vede in prova è quello che si vede in sala. */
  --stage-w: 810px;
  --stage-h: 1080px;
  --gutter: 48px;

  /* Scala tipografica per lettura da due metri. Due pesi soltanto. */
  --t-anchor:   15px;
  --t-eyebrow:  18px;
  --t-body:     22px;
  --t-answer:   26px;
  --t-question: 46px;
  --t-hero:     64px;
  --w-regular:  500;
  --w-strong:   600;

  /* Movimento con massa: 400–700 ms, solo easing in uscita. */
  --dur:      560ms;
  --dur-fast: 420ms;
  --dur-slow: 700ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Testo secondario: Alice Blue a opacità ridotta, mai un grigio nuovo. */
  --alice-70: rgba(226, 233, 241, .70);
  --alice-55: rgba(226, 233, 241, .55);
  --alice-42: rgba(226, 233, 241, .42);   /* bordi dei comandi: 3,5:1 sul fondo, sopra il minimo 3:1 */
  --alice-28: rgba(226, 233, 241, .28);
  --alice-12: rgba(226, 233, 241, .12);
}

*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }

html, body{
  height: 100%;
  overflow: hidden;
  background: var(--oxford-deep);
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  position: fixed; inset: 0;
  font-family: var(--font);
  font-weight: var(--w-regular);
  font-size: var(--t-body);
  line-height: 1.4;
  color: var(--alice);
  -webkit-font-smoothing: antialiased;

  /* Kiosk: niente selezione, niente menu a pressione lunga, niente lampeggio al tocco,
     niente zoom al doppio tocco. Il pinch lo blocca js/kiosk.js. */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Campi di testo (stazione CMind): lì si seleziona e si scrive. */
input, textarea, [contenteditable="true"]{
  -webkit-user-select: text; user-select: text;
  -webkit-touch-callout: default;
}

img, svg{ display: block; -webkit-user-drag: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus{ outline: none; }
:focus-visible{ outline: 2px solid var(--orange); outline-offset: 4px; }

/* ® sempre in apice, dimensionato sul testo che lo circonda. */
sup{ font-size: .58em; line-height: 0; vertical-align: .62em; font-weight: inherit; }

.num{ font-variant-numeric: tabular-nums; }

/* ── il palco ─────────────────────────────────────────── */
#stage{
  position: absolute; left: 0; top: 0;
  width: var(--stage-w); height: var(--stage-h);
  overflow: hidden;
  background: var(--oxford-deep);
  transform-origin: 0 0;
}

/* Zona invisibile per la gesture admin: 5 tocchi in 2 s. Nella griglia l'angolo alto
   è solo testo, quindi qui non c'è mai niente di toccabile. */
#adminZone{ position: absolute; left: 0; top: 0; width: 96px; height: 96px; z-index: 90; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0ms !important;
  }
}