/* ═══════════════════════════════════════════════════════════════════════════
   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. */
.ms[data-ms], .ms[data-ms-menu]{ position:fixed; inset:0; z-index:1400; 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:82vh; overflow-y:auto;
  padding:.7rem 1rem calc(1rem + env(safe-area-inset-bottom));
  border-radius:20px 20px 0 0;
  background:linear-gradient(160deg,#0b2440,#061426);
  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; }

/* ═══ 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; }

.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; }