/* ============================================================
   NUMIRA - mascherine per cartoncini con oblo'
   Foglio a parte e non in coda a numira.css: sono regole in MILLIMETRI che
   servono a una pagina sola, e mescolarle al foglio del sito vorrebbe dire
   caricarle su tutte le altre.

   TRE COSE DA SAPERE PRIMA DI TOCCARLO:

   1. LE MISURE ARRIVANO DA VARIABILI CSS, non da stili in linea. La CSP del
      sito e' `style-src 'self'`: un attributo `style="width:50mm"` scritto
      dal JavaScript verrebbe bloccato dal browser. Il JavaScript imposta
      `--lato` e `--foro` con `setProperty` (che passa dal CSSOM ed e'
      ammesso), e da qui in giu' e' tutto `calc()`.

   2. IL MILLIMETRO E' IL MILLIMETRO. Niente `rem`, niente percentuali:
      questa pagina finisce su carta adesiva che va appoggiata su un
      cartoncino vero, e un 2% di errore sono due millimetri di disallineo.

   3. La fascia sopra e sotto (dove sta il testo) e' quello che avanza fra il
      lato del cartoncino e il foro: `(--lato - --foro) / 2`. Se cambia il
      foro, il testo si stringe da solo.
   ============================================================ */

/* ---------- il foglio ---------- */
.msk-sheet {
  background: #fff;
  margin: 0 auto 8mm;
  width: 210mm;
  box-sizing: border-box;
  padding: 8mm 5mm;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
}

/* GRIGLIA VERA, NON FLEX CHE VA A CAPO. Con `flex-wrap` quattro cartoncini
   da 50 mm dentro 200 mm di larghezza utile stanno per un pelo, e
   l'arrotondamento del browser a 96 punti per pollice (50 mm = 188,976 px,
   per quattro fa 755,9) manda l'ultimo a capo: in anteprima uscivano tre per
   riga con il conteggio che diceva quattro. La griglia mette N colonne
   perche' gliene sono state chieste N, e non ha niente da arrotondare. */
.msk-griglia {
  display: grid;
  grid-template-columns: repeat(var(--colonne), var(--lato));
  box-sizing: border-box;
  border-left: .1mm solid #cfcfcf;
  border-top: .1mm solid #cfcfcf;
}

/* ---------- la singola mascherina ---------- */
.msk-card {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  width: var(--lato);
  height: var(--lato);
  color: #000;
  background: #fff;
  border-right: .1mm solid #cfcfcf;
  border-bottom: .1mm solid #cfcfcf;
  /* Un carattere stretto: in una fascia da 9 mm il nome di una
     commemorativa non ci sta con un carattere normale. */
  font-family: "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow", Arial, sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.msk-guide {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* TUTTO MAIUSCOLO E GRASSETTO. Su un'etichetta larga cinquanta millimetri,
   letta dentro un raccoglitore e spesso di sbieco, il maiuscolo si riconosce
   a colpo d'occhio dove il minuscolo obbliga a leggere. Vale per il paese,
   l'anno, la qualita' e il nome della moneta. */
.msk-card,
.msk-card span {
  text-transform: uppercase;
  font-weight: 700;
}

.msk-alto,
.msk-basso {
  position: absolute;
  left: 0;
  right: 0;
  height: calc((var(--lato) - var(--foro)) / 2);
  padding: 0 1.4mm;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.msk-alto { top: 0; justify-content: space-between; }
.msk-basso { bottom: 0; gap: 1.5mm; }

/* I due gruppi della fascia alta: quello che il configuratore manda a
   sinistra e quello che manda a destra. Restano tutti e due anche vuoti,
   cosi' «tutto a sinistra» non fa collassare l'allineamento. */
.msk-gruppo {
  display: flex;
  align-items: center;
  gap: 1.1mm;
  min-width: 0;
}
.msk-gruppo--destra { justify-content: flex-end; }

.msk-paese {
  letter-spacing: .02em;
  line-height: 1;
  /* Piu' grande dell'anno: il paese e' la prima cosa che si cerca scorrendo
     un raccoglitore, e a 6,4 punti spariva accanto alla bandiera. */
  font-size: 7.4pt;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(var(--lato) / 2 + 1mm);
}

.msk-anno {
  line-height: 1;
  font-size: 7pt;
  font-variant-numeric: tabular-nums;
}

.msk-bandiera {
  /* Piu' grande della prima versione, in proporzione 3:2 come le bandiere
     vere: a 3,2 mm dentro un raccoglitore era un francobollo, e la bandiera
     serve proprio a riconoscere il paese senza leggere. */
  height: 4.2mm;
  width: 6.3mm;
  object-fit: cover;
  display: block;
  border: .15mm solid #6b6b6b;
  background: #eee;
}

.msk-nome {
  flex: 1 1 auto;
  text-align: center;
  line-height: 1.12;
  font-size: 5.2pt;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Fascia stretta (foro grande): il nome scende di mezzo punto invece di
   sparire sotto il taglio. */
.msk-card--stretta .msk-nome { font-size: 4.8pt; }

/* La qualita' sul fianco destro, girata: nella fascia non ci starebbe
   insieme al nome.
   SCRITTURA VERTICALE, NON ROTAZIONE A MANO. Con `transform: rotate(-90deg)`
   piu' due traslazioni in percentuale il testo restava appeso al bordo e il
   centraggio in altezza dipendeva dalla lunghezza della scritta: «FDC» e
   «UNCIRCULATED · FDC» finivano a due altezze diverse. Con `writing-mode`
   il testo e' verticale davvero, la colonna occupa tutta l'altezza del
   cartoncino e il centraggio lo fa il flex - qualunque sia la lunghezza. */
.msk-qualita {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.1mm;                 /* staccata dal bordo: sul taglio si perde */
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);    /* si legge dal basso verso l'alto */
  white-space: nowrap;
  letter-spacing: .05em;
  font-weight: 700;
  line-height: 1;
  font-size: 4.6pt;
}
/* In modalita' «due strisce» il fianco verrebbe tagliato via: la qualita'
   torna in fila con il nome. */
.msk-qualita--riga {
  position: static;
  transform: none;
  font-size: 4.6pt;
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
  line-height: 1;
}

/* Stessa strada per la scritta di servizio sul fianco sinistro. */
.msk-nota {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.1mm;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  letter-spacing: .04em;
  line-height: 1;
  font-size: 4pt;
  color: #555;
}

/* ---------- il pannello dei comandi ---------- */
.msk-campi { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.msk-campo { display: flex; flex-direction: column; gap: 4px; }
.msk-campo .input,
.msk-campo .select { width: 12rem; }
.msk-campo--corto .input,
.msk-campo--corto .select { width: 7.5rem; }
/* «Cerchio (fustella o cutter)» in dodici caratteri non ci sta: il menu si
   allarga quanto serve alla voce piu' lunga, che e' l'unica misura sensata
   per un menu a tendina. */
.msk-campo--largo .select { width: 20rem; max-width: 100%; }

.msk-righe { width: 100%; box-sizing: border-box; min-height: 140px; }
.msk-conteggio { white-space: nowrap; }
.msk-anteprima { margin-top: 24px; }

/* ---------- il provino: una mascherina sola, mentre si costruisce ---------- */
/* Sta accanto ai comandi e cambia a ogni modifica: un foglio intero da
   guardare per spostare la bandiera di due millimetri e' un foglio da
   scorrere ogni volta. */
.msk-provino-box {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  margin-top: 18px;
}
.msk-provino {
  background: #fff;
  padding: 6mm;
  border: 1px solid var(--rule);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .10);
}
.msk-provino .msk-card { border: .1mm solid #cfcfcf; }
.msk-provino-testo { flex: 1 1 18rem; min-width: 0; }
.msk-salvato { color: var(--accent); }

/* ---------- l'elenco delle monete da spuntare ---------- */
.msk-azioni { display: flex; gap: 10px; margin: 18px 0 12px; }

/* Altezza limitata e scorrimento proprio: settecento monete spuntate
   spingerebbero l'anteprima e i bottoni fuori dallo schermo, e la spunta si
   fa guardando la lista, non scorrendo la pagina. */
.msk-elenco {
  max-height: 22rem;
  overflow-y: auto;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.msk-voce {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--rule-light, rgba(0, 0, 0, .06));
  cursor: pointer;
}
.msk-voce:last-child { border-bottom: 0; }
.msk-voce:hover { background: var(--hover); }
.msk-voce__testo { font-size: 14px; line-height: 1.4; }
/* Una moneta tolta dalla stampa resta leggibile ma si fa da parte. */
.msk-voce input:not(:checked) + .msk-voce__testo { color: var(--ink-60); }

.msk-manuale summary { cursor: pointer; }
.msk-manuale[open] summary { margin-bottom: 8px; }

/* ---------- stampa ---------- */
/* Margine zero e A4: le mascherine hanno misure assolute, e un margine
   aggiunto dal browser le sposterebbe tutte. Nella finestra di stampa
   servono anche scala 100% e margini «nessuno» - quello lo puo' dire solo
   la pagina, non il CSS, ed e' scritto sopra il bottone. */
@media print {
  @page { size: A4; margin: 0; }

  body { background: #fff; }
  .topbar, .foot, .crumbs, .msk-pannello, .skip, .flash,
  .msk-elenco, .msk-azioni, .msk-manuale { display: none !important; }

  /* Il contenitore del sito ha larghezza massima e imbottitura laterale: in
     stampa sposterebbe il foglio di qualche millimetro verso destra, che su
     misure assolute e' esattamente l'errore da evitare. */
  .msk-anteprima {
    margin: 0;
    padding: 0;
    max-width: none;
    width: auto;
  }
  .msk-sheet {
    box-shadow: none;
    margin: 0;
    page-break-after: always;
  }
  .msk-sheet:last-child { page-break-after: auto; }
}