/* ============================================================
   Il biglietto: la pagina che si apre dalla tessera, dal portachiavi
   e dal QR. Tavolozza, carattere e misure delle linee guida estetiche
   (D:\ClaudeCode\linee-guida), le stesse di Proofing.

   La pagina ha un compito solo, salvare il contatto: il pulsante verde
   è l'unica cosa colorata. Il verde vuol dire «al sicuro», ed è quello
   che succede quando lo si tocca.
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(font/inter-latin.woff2) format("woff2");
}

:root {
  color-scheme: dark;
  --ground: #131313;
  --tile: #1a1a1a;
  --line: #252525;
  --line-soft: #1e1e1e;
  --text: #e9e9e9;
  --muted: #9a9a9a;
  --faint: #767676;
  --green: #00844a;
  --green-hi: #12a15d;
  --green-press: #006e3d;
}

* { box-sizing: border-box; }
/* Un elemento con display scritto qui vincerebbe sull'attributo hidden,
   e il pulsante Condividi comparirebbe anche dove non funziona. */
[hidden] { display: none !important; }
html {
  background: var(--ground);
  /* Niente lampo grigio al tocco, che iOS disegna sull'elemento col
     gestore del clic. */
  -webkit-tap-highlight-color: transparent;
  /* Due tocchi veloci non devono ingrandire la pagina, né su un pulsante
     né sul testo intorno. L'ingrandimento con due dita resta. */
  touch-action: manipulation;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--green-hi); outline-offset: 3px; border-radius: 3px; }
h1 { margin: 0; text-wrap: balance; }
p { margin: 0; }

/* Una colonna sola, stretta come un biglietto anche sullo schermo grande:
   il contenuto sono quattro righe di contatti, e allargarle non dice
   niente di più. */
.biglietto {
  max-width: 480px;
  margin: 0 auto;
  padding:
    88px
    max(20px, env(safe-area-inset-right, 0px))
    max(40px, calc(env(safe-area-inset-bottom, 0px) + 24px))
    max(20px, env(safe-area-inset-left, 0px));
}

/* ---------- chi sono ---------- */

.ritratto {
  display: block;
  width: 112px; height: 112px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--tile);
}
.chi h1 {
  margin-top: 24px;
  font-weight: 800;
  font-size: clamp(40px, 11vw, 56px);
  line-height: 1.0;
  letter-spacing: -.035em;
}
/* «Enrico Maria» resta su una riga finché ci sta: il nome va a capo prima
   del cognome. Un blocco in linea e non nowrap, perché su un telefono
   stretto con il testo ingrandito nowrap lo farebbe uscire dalla colonna e
   scorrere la pagina di lato; così, solo lì, va a capo anche dentro. */
.insieme { display: inline-block; }
.cosa { margin-top: 12px; color: var(--muted); }

/* Il testo sotto il nome, versione 5b scelta da Enrico il 30 settembre
   2026: la frase che dice cosa faccio, in bianco e più grande, e sotto
   tre fatti brevi in elenco, in grigio.

   Un tratto è un pezzo di frase che non si spezza: la frase va a capo
   solo fra due tratti, e solo se intera non ci sta (Phrase, in
   internal/card/profile.go). */
.tratto { display: inline-block; }
.testo { margin-top: 12px; color: var(--muted); }
.testo .lead {
  color: var(--text); font-size: 20px; font-weight: 500;
  line-height: 1.35; letter-spacing: -.01em; margin-bottom: 8px;
}
.testo ul { list-style: none; margin: 0; padding: 0; }
/* Il segno è un quadratino grigio, e la riga che va a capo si allinea al
   testo, non al segno. */
.testo li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.55; }
.testo li + li { margin-top: 2px; }
.testo li::before {
  content: ""; position: absolute; left: 1px; top: .7em;
  width: 5px; height: 5px; border-radius: 1px; background: var(--faint);
}

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

.bottone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px;
  border-radius: 4px; border: 1px solid var(--green);
  background: var(--green); color: #fff;
  font-weight: 600; font-size: 15px; line-height: 1.2;
  text-decoration: none; text-align: center;
  cursor: pointer;
}
.bottone:active { background: var(--green-press); border-color: var(--green-press); }
.bottone.vuoto { background: transparent; border-color: #3a3a3a; color: var(--text); }
.bottone.vuoto:active { background: var(--tile); border-color: #3a3a3a; }
@media (hover: hover) {
  .bottone:hover { background: var(--green-hi); border-color: var(--green-hi); }
  .bottone:active { background: var(--green-press); border-color: var(--green-press); }
  .bottone.vuoto:hover { background: transparent; border-color: var(--muted); }
  .bottone.vuoto:active { background: var(--tile); }
}

/* Il pulsante che conta: largo quanto la colonna, più alto degli altri,
   e il primo che il pollice trova sotto il nome. */
.salva { display: flex; width: 100%; min-height: 52px; margin-top: 32px; font-size: 16px; }

/* ---------- i contatti ---------- */

/* Righe con il dato scritto, non icone da indovinare: chi legge vede il
   numero prima di toccarlo. Il segno a sinistra aiuta a trovare la riga,
   e per questo è grigio: colorato direbbe qualcosa che non c'è. */
.contatti { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line-soft); }
.contatti li { border-bottom: 1px solid var(--line-soft); }
.voce {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  min-height: 64px;
  padding: 11px 0;
  text-decoration: none;
}
.voce svg {
  grid-row: span 2;
  width: 22px; height: 22px;
  fill: none; stroke: var(--faint); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.etichetta { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--muted); }
/* Un indirizzo lungo va a capo invece di uscire dalla colonna. break-word
   prima, per Safari fino alla 15.3 che anywhere non lo conosce. */
.valore { line-height: 1.35; overflow-wrap: break-word; overflow-wrap: anywhere; }
/* Toccata, la riga cambia solo il segno: è un comando secondario. */
.voce:active svg { stroke: var(--text); }
@media (hover: hover) {
  .voce:hover svg { stroke: var(--text); }
}

/* WhatsApp e Telegram in fondo alla riga del telefono, come una sua
   continuazione: il numero è scritto una volta sola. Due pulsanti
   secondari quadrati, grandi quanto un dito, con il segno dell'app in
   bianco e non nel suo colore: sulla pagina il colore è solo del verde. */
/* Quando la riga non basta (un telefono stretto con il testo ingrandito)
   le icone scendono sotto, a destra, invece di stringere il numero fino a
   spezzarlo cifra per cifra. A misura normale restano accanto. */
.telefono { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.telefono .voce { flex: 1 1 auto; min-width: 0; }
.app { display: flex; gap: 8px; flex: none; margin: 10px 0 10px auto; }
.icona {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid #3a3a3a; border-radius: 4px;
  color: var(--text);
}
.icona svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.icona .pieno { stroke-width: 2; }
.icona:active { background: var(--tile); }
@media (hover: hover) {
  .icona:hover { border-color: var(--muted); }
}

/* ---------- il resto ---------- */

/* I pulsanti non si stringono sotto la loro parola più lunga: quando i tre
   non ci stanno (un telefono stretto con il testo ingrandito) la stella
   scende sulla riga sotto, a destra, invece di far uscire «Condividi» dal
   suo pulsante (revisione gui-compat, 30 settembre 2026). */
.altro { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.altro .bottone { flex: 1 1 0; }

/* La stella dei preferiti in fondo alla riga, quadrata e grande quanto un
   dito: è il comando meno usato, e sta dove disturba meno (versione C,
   scelta da Enrico il 30 settembre 2026). */
.altro .stella { flex: 0 0 44px; padding: 0; margin-left: auto; }
.stella svg {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Come si salva la pagina tra i preferiti, per il browser in uso: una
   fascia blu attaccata al fondo dello schermo, sopra la barra del browser
   dove spesso c'è proprio il comando da toccare. Compare al tocco della
   stella, resta sette secondi e se ne va: una fascia che resta per sempre
   diventa sfondo (linee guida estetiche, «I componenti»). */
.avviso-blu {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; gap: 10px; align-items: flex-start;
  /* Prima senza max(), per i browser vecchi che non lo conoscono e
     scarterebbero tutta la dichiarazione. */
  padding: 14px 20px 16px;
  padding:
    14px
    max(20px, env(safe-area-inset-right, 0px))
    max(16px, calc(env(safe-area-inset-bottom, 0px) + 10px))
    max(20px, env(safe-area-inset-left, 0px));
  background: #1d3247; color: #dceaf7;
  border-top: 2px solid #4a9fd8;
  font-size: 15px; line-height: 1.45;
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
.avviso-blu.visibile { transform: none; visibility: visible; transition: transform .25s ease; }
.avviso-blu svg {
  flex: none; margin-top: 1px;
  fill: none; stroke: #4a9fd8; stroke-width: 2; stroke-linecap: round;
}
.avviso-blu p { max-width: 440px; }
@media (prefers-reduced-motion: reduce) {
  .avviso-blu, .avviso-blu.visibile { transition: none; }
}

/* Per chi legge con VoiceOver: «Link copiato» si annuncia da qui. */
.stato {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.dati {
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted); font-size: 14px; line-height: 1.5;
}
.dati p + p { margin-top: 2px; }

/* ---------- il QR da mostrare ---------- */

.torna {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--muted); font-size: 15px; font-weight: 500; text-decoration: none;
}
@media (hover: hover) { .torna:hover { color: var(--text); } }
.biglietto.mostra { padding-top: 40px; }
/* Grande quanto la colonna, ma mai più alto di due terzi dello schermo:
   su un telefono girato di lato il codice resta intero. svh e non dvh:
   la misura con le barre del browser in vista, che non cambia mentre le
   barre compaiono e spariscono. vh prima, per iOS fino alla 15.3.

   only light: il codice è nero su bianco dentro l'immagine, e il modo
   scuro automatico di Chrome e delle WebView di Android deve lasciarlo
   stare. Molti lettori non leggono un codice chiaro su fondo scuro. */
.codice { margin-top: 16px; width: 100%; max-width: 62vh; max-width: 62svh; color-scheme: only light; }
.codice img { display: block; width: 100%; height: auto; border-radius: 4px; }
.indirizzo { margin-top: 20px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: break-word; overflow-wrap: anywhere; }
.aiuto { margin-top: 4px; color: var(--muted); font-size: 15px; }

/* ---------- la pagina che non c'è ---------- */

h1.piccolo { font-weight: 800; font-size: 32px; line-height: 1.08; letter-spacing: -.03em; }

/* ---------- le misure ---------- */

/* Una soglia sola, e le misure del telefono scritte solo qui: con due
   soglie a 620 e 621, a 620,5 px (possibile con l'ingrandimento di Windows)
   non ne valeva nessuna. */
@media (max-width: 620px) {
  body { font-size: 16px; }
  .biglietto { padding-top: max(48px, calc(env(safe-area-inset-top, 0px) + 28px)); }
  .biglietto.mostra { padding-top: max(16px, calc(env(safe-area-inset-top, 0px) + 8px)); }
}