/* ═══════════════════════════════════════════════════════════════════════════
   IL COSO DELLE MASCHERE — un foglio che sale dal basso
   ═══════════════════════════════════════════════════════════════════════════
   Cambiare maschera si fa mentre si sta facendo altro: il foglio si appoggia
   sopra la pagina, che resta dov'era. Come tutti i fogli del sito — quello
   della prenotazione, quello dei segni — sale dal basso e si chiude toccando
   fuori. */
/* ═══ IL NOME `.ms` NON È SOLO NOSTRO ════════════════════════════════════════
   La scheda di un comune, nella pagina delle mappe, si chiama `.ms` da prima di
   noi. Questo foglio lo carica il layout DOPO il suo, quindi tutto quello che
   scriviamo su `.ms` nudo glielo scriviamo addosso: `position:fixed; inset:0` la
   sparava a tutto schermo, `touch-action:none` le impediva di scorrere.

   Perciò si scrive `[data-ms]` — il segno che questo foglio è il NOSTRO — e la
   sua resta la sua. */
/* ═══ LA RIGA BIANCA IN FONDO, E PERCHÉ NESSUN VELO LA COPRIVA ══════════════
   Sull'iPhone, con l'app salvata sulla schermata Home, la striscia sotto —
   quella dove sta la lineetta — NON è dentro la pagina: è la TELA, e la dipinge
   il sistema col colore di fondo di `html`. Un velo `position:fixed; inset:0`
   arriva fino al bordo di quello che la pagina può disegnare, e quella striscia
   è di là dal bordo: si può metterci sopra qualunque cosa, resta com'è.

   In casa `casa.css` mette `html` BIANCO — serve a non lasciare una fascia
   scura sotto l'ultima sezione — e quel bianco era la riga. Nelle altre pagine
   non si vedeva perché lì la tela è già scura come il foglio.

   L'unico modo di toglierla è cambiare il colore con cui il sistema la dipinge,
   cioè il fondo della pagina, e lo si fa mentre il foglio è aperto: `maschere.js`
   mette `ms-aperto` su `html` E sul corpo — i telefoni prendono quel colore da
   uno dei due, e quale dipende dalla versione. Dietro al velo non cambia
   niente: il fondo del corpo si vede solo dove non c'è contenuto, e lì sopra
   c'è comunque il foglio.

   `!important` perché `casa.css` dice `html, body{ background:#fff }` più
   avanti, ed è quello il bianco da coprire. */
html.ms-aperto, body.ms-aperto{ background:#061426 !important; }

/* Davanti a tutto: non c'è niente, in questo sito, che debba stare sopra un
   foglio aperto. Il resto — la fascia dell'indicatore in fondo — non si copre
   allungando il velo: quella zona prende SOLO il colore della tela, e a
   cambiarlo è `html.ms-aperto` qui sopra. Ci ho provato con `100dvh`, con
   un'ombra e con un velo che sconfinava: tre rattoppi che non toccavano la
   causa, e sono stati tolti. */
.ms[data-ms], .ms[data-ms-menu]{ position:fixed; inset:0;
  z-index:2147483000; display:flex;
  align-items:flex-end; justify-content:center;
  background:rgba(3,10,22,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .22s ease;
  /* Lo scorrimento non esce di qui: in cima passerebbe la mano alla pagina
     sotto, e il browser ci vedrebbe il suo «ricarica». */
  overscroll-behavior:none; touch-action:none; }

.ms[data-ms][hidden], .ms[data-ms-menu][hidden]{ display:none; }
.ms[data-ms].su, .ms[data-ms-menu].su{ opacity:1; }

/* ═══ SALE E SCENDE ═════════════════════════════════════════════════════════
   Un foglio che compare di colpo non si capisce da dove venga. Salendo, il
   movimento dice già tutto: viene da sotto, sta sopra la pagina, e la pagina è
   ancora lì. Scendendo dice che se n'è andato per davvero. */
.ms-carta{ width:100%; max-width:560px; max-height:82dvh; overflow-y:auto;
  padding:.7rem 1rem calc(1rem + env(safe-area-inset-bottom));
  border-radius:20px 20px 0 0;
  /* ═══ LA SFUMATURA FINISCE PRIMA DEL FONDO ═════════════════════════════
     La fascia dell'indicatore, in fondo, può prendere UN colore solo: quello
     della tela (`html.ms-aperto`, qui sopra), e quel colore è fisso. La carta
     invece finiva in sfumatura, e sul suo ultimo pixel il blu non era ancora
     quello della tela: un colore contro l'altro, ed ecco la riga.
     Adesso la sfumatura si esaurisce a metà carta e l'ultima metà è piatta,
     dello stesso identico blu della tela. La giunzione non si vede perché non
     c'è nessuna giunzione: è lo stesso colore che continua. */
  background:linear-gradient(160deg,#0b2440,#061426 55%);
  border-top:1px solid rgba(255,255,255,.14);
  transform:translateY(102%); transition:transform .26s ease-in;
  overscroll-behavior:contain; touch-action:pan-y;
  }
.ms.su > .ms-carta{ transform:none;
  transition:transform .34s cubic-bezier(.2,.7,.2,1); }

@media (prefers-reduced-motion: reduce) {
  .ms[data-ms], .ms[data-ms-menu], .ms-carta, .ms.su > .ms-carta{ transition:none; }
}

/* La maniglia: dice che il foglio si tira, prima ancora di provarci. */
.ms-maniglia{ width:38px; height:4px; margin:0 auto .9rem; border-radius:999px;
  background:rgba(255,255,255,.25); }

/* In mezzo, come i titoli delle card del sito: la riga è corta e il foglio è
   largo, e a sinistra sembrava l'inizio di un elenco invece del nome di quello
   che si sta guardando. */
[data-ms] .ms-tit{ margin:0 0 .7rem; color:#fff; font-size:.95rem; font-weight:800;
  text-align:center; }
/* Il nome a capo, da solo: è un marchio, non la prima parola della frase. */
[data-ms] .ms-tit span{ display:block; font-family:'Lobster',cursive; font-weight:400;
  font-size:1.15rem; }
[data-ms] .ms-tit-due{ text-align:center; margin-top:1.4rem; padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(126,203,255,.85); }

/* Le maschere: la stessa griglia del menu — è la stessa cosa, guardata da un altro
   posto, e due griglie diverse per la stessa cosa sono due cose da imparare. */
.ms-riga{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }

.ms-riga .ln-faccia{ background:none; border:0; cursor:pointer; font-family:inherit; }

/* ═══ COS'È QUESTA MASCHERA: SOLO IN CIMA ════════════════════════════════════
   Nella parte alta — «Un account, tante maschere» — sotto il nome c'è il
   mestiere: «Giorgio / Base», «GnS / Admin». Sono le tue facce e vanno
   riconosciute, e fra tondi che si somigliano il nome da solo non basta.

   Sotto, in «Gestisci le maschere», no: là il nome del tondo È già il mestiere,
   e una seconda riga direbbe la stessa parola due volte. E nel cassetto del sito
   nemmeno — lo spazio è quello che è. Perciò nasce nascosta e la accende un posto
   solo: un `em` nel componente, una riga qui. */
.ln-faccia-che{ display:none; }
[data-ms-mie] .ln-faccia-che{ display:block; font-style:normal;
  margin-top:-.15rem; font-size:.58rem; font-weight:700; letter-spacing:.02em;
  color:rgba(126,203,255,.8); }

/* ═══ ACCESA E SPENTA ════════════════════════════════════════════════════════
   Una maschera spenta è un mestiere che potresti prendere: il filo tratteggiato
   lo dice senza scriverlo. Accesa, il filo si chiude e in alto c'è la spunta —
   e siccome il gesto la spegne, la spunta è anche il posto dove si torna
   indietro. */
.ms-int{ position:relative; }
.ms-int .ln-faccia-tonda{ border-style:dashed; background:rgba(255,255,255,.05); }
.ms-int.ms-accesa .ln-faccia-tonda{ border-style:solid;
  border-color:rgba(255,255,255,.75); background:rgba(255,255,255,.1); }

/* Appoggiata al tondo, non all'angolo del bottone: la casella è larga quanto la
   colonna, e la spunta messa a `right` finiva a due dita dalla maschera. Il tondo
   è 56px e sta in mezzo, quindi il suo bordo destro è a `50% + 28px`: la spunta
   ci si posa sopra e resta attaccata anche se la colonna cambia larghezza. */
.ms-int.ms-accesa::after{ content:'\f00c'; position:absolute; top:3px;
  left:calc(50% + 10px);
  display:grid; place-items:center; width:18px; height:18px; border-radius:50%;
  font-family:'Font Awesome 6 Free'; font-weight:900; font-size:.6rem;
  background:#2fbf71; color:#06251a;
  box-shadow:0 0 0 2px rgba(6,20,38,.9); }

/* La principale sei tu, e le riservate te le ha date qualcun altro: si vedono
   accese e basta. Un bottone che non fa niente è peggio di nessun bottone. */
.ms-int.ms-fissa{ cursor:default; opacity:.75; }

/* La riga sotto i tondi: cosa fa il tocco, e che spegnere non toglie niente. Su
   un tondo il gesto non si vede — l'interruttore lo direbbe da solo, i tondi
   no, e questa riga è il prezzo di tenerli. */
.ms-detto{ margin:.7rem .3rem 0; color:rgba(234,244,251,.5);
  font-size:.76rem; line-height:1.5; text-align:center; }

/* ═══ LA PORTA DELLA PAGINA VERA ═════════════════════════════════════════════
   Ventotto tondi in fila si riconoscono se già li sai; per capire cosa fa ognuna
   servono ventotto righe di spiegazione, e quelle stanno in una pagina. Questa è
   la riga che ci porta: una riga e non un bottone pieno — non è la cosa che si fa
   qui, è dove si va se qui non basta. */
.ms-vai{ display:flex; align-items:center; gap:.7rem; margin:.9rem 0 0;
  padding:.7rem .8rem; border-radius:14px; text-decoration:none;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  color:#fff; }
.ms-vai:active{ background:rgba(255,255,255,.14); }
.ms-vai > i:first-child{ flex:none; width:22px; text-align:center;
  color:var(--gold,#ffd98a); font-size:1rem; }
.ms-vai span{ flex:1; min-width:0; display:flex; flex-direction:column;
  font-size:.86rem; font-weight:700; }
.ms-vai em{ font-style:normal; font-size:.74rem; font-weight:500;
  color:rgba(234,244,251,.55); }
.ms-vai > i:last-child{ flex:none; font-size:.72rem;
  color:rgba(234,244,251,.45); }

.ms-ok{ width:100%; margin-top:1.2rem; padding:.75rem;
  border:0; border-radius:12px; cursor:pointer;
  background:rgba(255,255,255,.1); color:#fff;
  font-family:inherit; font-size:.85rem; font-weight:800; }

/* ═══ IL MENU DI UNA MASCHERA ══════════════════════════════════════════════════
   Sale sopra il foglio — si apre anche DAL foglio, e un menu sotto la cosa che
   l'ha chiamato non si vede. Stessa carta, stesso fondo: è lo stesso posto,
   guardato più da vicino. */
.ms-menu{ z-index:1410; }

.ms-carta-menu{ padding-bottom:calc(1.2rem + env(safe-area-inset-bottom)); }

.ms-menu-tit{ margin:0; color:#fff; font-size:1.05rem; font-weight:800; }

/* Sotto il nome: il mestiere, e dopo «Cos'è» la riga che dice a cosa serve.
   Vuota non lascia un buco. */
.ms-menu-detto{ margin:.2rem 0 .9rem; color:rgba(234,244,251,.72);
  font-size:.82rem; line-height:1.45; }
.ms-menu-detto[hidden]{ display:none; }

.ms-voce{ display:flex; align-items:center; gap:.7rem; width:100%;
  margin-top:.35rem; padding:.8rem .85rem;
  border:0; border-radius:12px; cursor:pointer; text-decoration:none;
  background:rgba(255,255,255,.07); color:#fff;
  font-family:inherit; font-size:.9rem; font-weight:700; text-align:left; }
.ms-voce[hidden]{ display:none; }
.ms-voce i{ width:20px; color:var(--gold,#ffd98a); font-size:.95rem; }

/* Spegnere è l'unica delle tre che toglie qualcosa: lo dice il colore, senza
   bisogno di chiedere conferma per una cosa che si rifà con un tocco. */
.ms-voce-spegni{ background:rgba(214,90,74,.14); color:#ffb3a7; }
.ms-voce-spegni i{ color:#ff9c8b; }

/* Gli attrezzi, sotto la spiegazione: più piccoli e più spenti del testo che
   spiega — sono un elenco, e un elenco che pesa quanto la frase la copre. */
.ms-menu-roba{ margin:.1rem 0 .5rem; color:rgba(234,244,251,.6);
  font-size:.76rem; line-height:1.45; }
.ms-menu-roba[hidden]{ display:none; }

/* Il vestito del trascinamento — la copia che segue il dito, il posto vuoto che
   resta, e le tre cose del browser da spegnere — sta in
   `/assets/comune/trascina.css`: lo usano anche gli strumenti. */

/* I nomi degli strumenti in pastiglie: sono cose, e una cosa col contorno si
   conta a occhio. Sei nomi di fila separati da punti si leggono come una frase
   e non si contano. */
.ms-menu-roba{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; }
.ms-roba-lbl{ margin-right:.15rem; color:rgba(234,244,251,.55);
  font-size:.72rem; font-weight:800; letter-spacing:.02em; }
.ms-pill{ padding:.22rem .55rem; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:rgba(234,244,251,.85); font-size:.72rem; font-weight:700; }

/* ═══ COSA SA FARE UNA MASCHERA ════════════════════════════════════════════════
   Si apre dentro il menu, sotto la voce che l'ha chiamata: chi la tocca sta
   decidendo se è la maschera giusta, e la risposta deve arrivare dove sta
   guardando — non in un'altra pagina. */
.ms-attrezzi{ margin:.5rem 0 .2rem; padding:.7rem .8rem; border-radius:12px;
  background:rgba(3,12,26,.4); border:1px solid rgba(255,255,255,.08); }
.ms-attrezzi[hidden]{ display:none; }

.ms-attrezzi-tit{ margin:.7rem 0 .45rem;
  font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(126,203,255,.85); }
.ms-attrezzi-tit:first-child{ margin-top:0; }

.ms-attrezzo{ display:flex; align-items:flex-start; gap:.6rem; padding:.3rem 0; }
.ms-attrezzo i{ flex:none; width:18px; margin-top:.15rem;
  color:var(--gold,#ffd98a); font-size:.85rem; }
.ms-attrezzo span{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.ms-attrezzo b{ color:#fff; font-size:.85rem; font-weight:800; }
.ms-attrezzo span span{ color:rgba(234,244,251,.62); font-size:.76rem; line-height:1.4; }