/* Foglio di stile del monitor.
   ============================================================================

   Lo stesso sistema del prototipo di onboarding (docs/onboarding/), e due
   palette. Il prototipo dichiara la ragione della differenza e vale la pena
   ripeterla qui, perche' e' il genere di cosa che al primo riordino sembra una
   svista da correggere:

     «Il monitor si guarda di notte, su un telefono, e li' il fondo scuro non e'
      una preferenza ma una necessita'. L'onboarding si fa una volta, di giorno,
      davanti a un computer.»

   Quindi **non** si schiarisce il visualizzatore per farlo assomigliare al
   prototipo. A tenere insieme le due facce sono le cose che non dipendono dalla
   luce — la scala tipografica, i multipli di 4, i raggi, la forma dei pulsanti,
   il vocabolario dei riquadri — e le **tinte**, che sono le stesse identiche di
   fase in fase. Cambia solo la loro chiarezza, perche' cambia il fondo su cui
   stanno: un verde-acqua tarato sul crema sparisce sul quasi-nero.

   Che pagina prende quale palette non e' una scelta di gusto:

     visualizzatore  notte   e' la pagina delle tre di mattina
     accesso         notte   e' la porta della pagina delle tre di mattina, e un
                             lampo bianco prima del video e' esattamente cio' che
                             si sta cercando di evitare
     configurazione  giorno  si fa una volta, davanti al computer, ed e' il primo
                             contatto con il prodotto: appartiene all'onboarding
   ========================================================================== */

:root {
  /* --- scala tipografica: sette misure, tre pesi (400 · 500 · 600) --- */
  --t-micro: 11px;   /* occhielli, etichette maiuscolette */
  --t-small: 13px;   /* didascalie, note */
  --t-ui:    14px;   /* riquadri, testo secondario */
  --t-body:  16px;   /* corpo del testo */
  --t-lead:  18px;   /* riga di apertura */
  --t-h2:    22px;
  --t-h1:    28px;

  /* --- scala delle distanze: multipli di 4 --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 40px; --s8: 56px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  --radius: 14px;
  --radius-s: 10px;

  /* ===================== palette notte (predefinita) =====================

     Un quasi-nero **caldo**, non blu. La terra del prototipo e' calda, e un
     grigio-blu accanto a quel crema non sembra la stessa famiglia: sembra un
     altro programma. Lo stesso impasto, girato dall'altra parte. */
  --ground:      #171512;
  --ground-deep: #100F0D;
  --card:        #211E1A;
  --card-sunk:   #1A1815;
  --line:        #322D26;
  --line-soft:   #292420;

  --ink:   #F0EBE2;
  --ink-2: #C8C0B3;
  --muted: #948B7C;

  /* Le tinte delle fasi, alzate quanto basta a staccarsi dal fondo scuro.
     Stesse tinte del prototipo, stesso significato, altra chiarezza. */
  --c-casa:   #3FA8A4;   /* verde-acqua: sicurezza e casa      */
  --c-fuori:  #7B93D8;   /* indaco: il tratto Tailscale        */
  --c-pronto: #7FC45A;   /* verde foglia: arrivato, tutto bene */
  --c-stop:   #E4705A;   /* mattone: solo cio' che non va      */
  --c-nota:   #E0A340;   /* ambra: cose da sapere              */

  --accent: var(--c-casa);
  --phase:  var(--accent);

  /* Pastelli delle stelline negli angoli: adattati al fondo scuro della pagina
     di accesso. Luminosi e desaturati come nel prototipo. */
  --star-1: #7DD9D3;   /* verde-acqua luminoso */
  --star-2: #D0B8CC;   /* prugna luminosa      */
  --star-3: #A8B8E8;   /* indaco luminoso      */
  --star-4: #E8D891;   /* ambra luminosa       */

  /* Il velo sopra il video e la sua ombra: sul nero puro del palcoscenico, non
     sul fondo della pagina. */
  --veil: rgba(16, 15, 13, .68);
}

/* ===================== palette giorno =====================

   La terra del prototipo, senza modifiche: e' il primo contatto con il
   prodotto e deve essere riconoscibile come la stessa cosa. */
body.giorno {
  --ground:      #E5DFD3;
  --ground-deep: #D7CEBD;
  --card:        #FBF8F2;
  --card-sunk:   #F1ECE2;
  --line:        #D3C9B6;
  --line-soft:   #E0D8C8;

  --ink:   #2E2A24;
  --ink-2: #574F44;
  --muted: #7A7264;

  --c-casa:   #17706E;
  --c-fuori:  #3C5CA8;
  --c-pronto: #4F7F31;
  --c-stop:   #B3452F;
  --c-nota:   #A66A12;

  /* Pastelli delle stelline per il fondo chiaro. Stessi toni del prototipo. */
  --star-1: #7CC0BC;
  --star-2: #BC91B4;
  --star-3: #8DA3D3;
  --star-4: #D6B76B;

  --veil: rgba(46, 42, 36, .55);
}

/* ============================ base ============================ */

* { box-sizing: border-box; }
html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Il grassetto predefinito del browser e' 700, che non sta sulla nostra scala
   di tre pesi: senza questa riga ogni <strong> ne introduce un quarto. */
strong, b { font-weight: 600; }

/* Un solo contorno di messa a fuoco per tutto, e visibile: la pagina si usa
   anche da tastiera, e senza questa riga il fuoco su un pulsante scuro e'
   invisibile. */
:focus-visible {
  outline: 2.5px solid var(--phase);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Niente di cio' che si muove porta informazione: si spegne tutto senza
   perdite. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- pulsanti ----------

   La pastiglia del prototipo, e la sua altezza minima: 48px e' la misura sotto
   la quale un dito manca il bersaglio, e questa pagina si usa con una mano
   sola, al buio, mentre si tiene un bambino con l'altra. */
button {
  width: 100%;
  min-height: 48px;
  padding: var(--s3) var(--s6);
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--phase);
  color: #FBF8F2;
  font: 600 var(--t-body)/1.2 var(--sans);
  cursor: pointer;
  transition: filter .18s ease, transform .12s ease;
}
button:hover { filter: brightness(1.12); transform: translateY(-1px); }
button:active { transform: translateY(0); }
button:disabled { opacity: .55; cursor: default; filter: none; transform: none; }

button.ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
  font-weight: 500;
}
button.ghost:hover { background: #FFFFFF10; filter: none; transform: none; }
body.giorno button.ghost:hover { background: #00000008; }

/* ============================ stelline negli angoli ============================ */

.sky {
  position: fixed;
  inset: 0 0 0 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.sky svg { position: absolute; }

/* transform-box: fill-box e' obbligatorio. Senza, transform-origin si risolve
   sul viewBox e ogni stella scala attorno a un punto che non e' il suo. */
.twinkle {
  transform-box: fill-box;
  transform-origin: center;
  animation: twinkle 5s ease-in-out infinite;
}

/* Le stelline stanno agli angoli, lontane dalla colonna del testo: possono
   permettersi di vedersi. Il limite e' che restino fondale — se il pulsare
   attira l'occhio mentre si legge, si e' passato il segno. */
@keyframes twinkle {
  0%, 100% { opacity: .3; transform: scale(.82); }
  50%      { opacity: 1; transform: scale(1);   }
}

/* Le stelline stanno in quattro grappoli, uno per angolo: raccolte ai bordi
   lasciano sgombra la colonna del testo, che e' la cosa da leggere. */
.corner { width: 268px; height: 268px; }
.c-tl { top: 10px;    left: 8px;   }
.c-tr { top: 14px;    right: 10px; }
.c-bl { bottom: 6px;  left: 12px;  }
.c-br { bottom: 10px; right: 14px; }

@media (max-width: 540px) {
  /* Sullo schermo stretto i grappoli finirebbero sotto al testo: si
     rimpiccioliscono e si attenuano invece di sparire. */
  .corner { width: 158px; height: 158px; opacity: .5; }
}

/* Stelline sparse sul resto dello sfondo, non solo agli angoli: .sky svg e'
   gia' position:absolute, quindi bastano top/left in percentuale — cosi' si
   distribuiscono a qualunque misura di finestra. Quelle dietro alla card
   restano semplicemente coperte. */

/* ============================ accesso e configurazione ============================ */

.center {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s5);
}

.card {
  width: 100%;
  max-width: 400px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--s6);
  box-shadow: 0 1px 2px #00000014, 0 10px 28px -18px #00000044;
}

.card h1 {
  margin: 0 0 var(--s2);
  font: 600 var(--t-h1)/1.15 var(--sans);
  letter-spacing: -.028em;
  text-wrap: balance;
}

.card p.sub {
  margin: 0 0 var(--s6);
  color: var(--ink-2);
  font-size: var(--t-lead);
  line-height: 1.5;
}

label {
  display: block;
  margin-bottom: var(--s2);
  font: 600 var(--t-micro)/1.4 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

input[type="password"], input[type="text"] {
  width: 100%;
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s5);
  background: var(--card-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--ink);
  /* 16px, e non e' una scelta tipografica: sotto i 16 iOS ingrandisce da solo
     la pagina quando il campo prende il fuoco, e la pagina non torna piu'
     com'era. */
  font: 400 16px/1.4 var(--sans);
}

input:focus {
  outline: none;
  border-color: var(--phase);
}

.msg {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  font-size: var(--t-ui);
  line-height: 1.5;
  display: none;
}
.msg.show { display: block; }
.msg.error {
  color: var(--c-stop);
  border-color: color-mix(in srgb, var(--c-stop) 30%, transparent);
  background: color-mix(in srgb, var(--c-stop) 12%, transparent);
}
.msg.ok {
  color: var(--c-pronto);
  border-color: color-mix(in srgb, var(--c-pronto) 30%, transparent);
  background: color-mix(in srgb, var(--c-pronto) 12%, transparent);
}

.hint {
  margin: var(--s6) 0 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--muted);
}

/* ============================ visualizzatore ============================ */

.viewer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Il palcoscenico resta nero puro, non caldo: e' il letterbox attorno al video,
   e una cornice tinta si vede come una dominante sull'immagine. */
.stage {
  position: relative;
  flex: 1;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

/* Velo iniziale: su iOS l'audio non parte senza un gesto dell'utente, quindi
   serve comunque un tocco esplicito prima di poter ascoltare. */
.gate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  /* Semitrasparente di proposito: il video parte muto e si vede subito la
     stanza dietro al velo, senza dover prima toccare lo schermo. */
  background: var(--veil);
  text-align: center;
  padding: var(--s5);
}

.gate.hidden { display: none; }

.gate button {
  width: auto;
  min-width: 220px;
}

.gate .why {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-ui);
  line-height: 1.55;
  max-width: 320px;
  text-wrap: pretty;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--s3) var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s3);
  background: linear-gradient(rgba(0, 0, 0, .6), transparent);
  font: 500 var(--t-small)/1.3 var(--sans);
  color: #F0EBE2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  pointer-events: none;
}

#transport { color: #C8C0B3; font-weight: 400; }

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}
.dot.live { background: var(--c-pronto); }
.dot.warn { background: var(--c-nota); }
.dot.err  { background: var(--c-stop); }

/* Indicatore di livello audio: permette di accorgersi che il bambino fa un
   suono anche con il telefono in silenzioso. */
.meter {
  margin-left: auto;
  width: 84px;
  height: 6px;
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
  overflow: hidden;
  flex: none;
}
.meter > i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--c-pronto);
  transition: width .08s linear;
}

.bar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--card);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.bar button {
  width: auto;
  min-height: 40px;
  padding: var(--s2) var(--s4);
  font-size: var(--t-ui);
}

.spacer { flex: 1; }

.stats {
  padding: var(--s4);
  background: var(--card-sunk);
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--muted);
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s2) var(--s5);
}
.stats.show { display: grid; }
.stats b {
  display: block;
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ---------- riquadri ----------

   Il .note del prototipo: una tinta, un bordo e un fondo derivati da quella,
   e il testo alla misura del corpo. I riquadri sono contenuto, non caratteri
   piccoli in fondo a un contratto. */
.warnbox {
  --tone: var(--c-nota);
  margin: 0;
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid color-mix(in srgb, var(--tone) 26%, transparent);
  background: color-mix(in srgb, var(--tone) 12%, transparent);
  color: var(--ink);
  font-size: var(--t-ui);
  line-height: 1.6;
  display: none;
}
.warnbox.show { display: block; }

/* Accesso da fuori casa: o l'indirizzo pubblico, o il passo che manca. */
.remote {
  --tone: var(--c-nota);
  display: none;
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--line);
  background: var(--card-sunk);
  font-size: var(--t-ui);
}
.remote.show { display: block; }
.remote.ok   { --tone: var(--c-pronto); }
.remote.todo { --tone: var(--c-nota); }

.remote-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

/* L'occhiello del prototipo: pallino, maiuscoletto, crenatura larga. */
.remote-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font: 600 var(--t-micro)/1.4 var(--sans);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
}
.remote-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tone);
}
.remote-phase {
  font: 600 var(--t-ui)/1.3 var(--sans);
  color: var(--tone);
}

.remote-action {
  margin: 0 0 var(--s3);
  color: var(--ink-2);
  line-height: 1.6;
  /* Il messaggio arriva da Tailscale gia' impaginato su piu' righe. */
  white-space: pre-line;
}

/* L'indirizzo pubblico e' un blocco da copiare, non una riga di testo:
   monospazio, selezione intera al primo clic, e a capo dove serve perche' un
   URL lungo non deve allargare la pagina. */
.remote-link {
  display: none;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  background: var(--card);
  color: var(--tone);
  font: 500 var(--t-small)/1.6 var(--mono);
  word-break: break-all;
  text-decoration: none;
}
.remote-link.show { display: block; }
.remote-link:hover { border-color: var(--tone); }

/* ============================ adattamento ============================ */

@media (max-width: 540px) {
  :root { --t-h1: 24px; --t-lead: 17px; }
  .card { padding: var(--s5); }
  .stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}