/* ShareHub — le foto sono il contenuto, l'interfaccia e' cornice (docs/04). */

/*
 * `hidden` deve nascondere. Sembra ovvio e non lo e': la regola dell'agente
 * utente e' `[hidden] { display: none }` con specificita' bassissima, quindi
 * **qualsiasi** classe che imposti un `display` la batte. In questa pagina
 * succedeva a due elementi: il tasto «Mostra indirizzo», che restava li' dopo
 * aver mostrato l'indirizzo, e l'avviso d'errore del pannello dei link, che si
 * vedeva sempre come un riquadro rosso vuoto in cima — da mesi, senza che
 * nessun test lo notasse, perche' la proprieta' `hidden` era davvero `true` e
 * a chiederlo al DOM rispondeva di si'. Si e' visto guardando lo schermo.
 *
 * `!important` qui e' l'intenzione giusta: nascosto vuol dire nascosto, e non
 * c'e' un caso in cui una classe debba vincere.
 */
[hidden] {
  display: none !important;
}

:root {
  --inchiostro: #16181d;
  --inchiostro-tenue: #5c6270;
  --carta: #fbfbfc;
  --carta-alta: #ffffff;
  --bordo: #e2e4e9;
  --accento: #1f5f8b;
  --accento-tenue: #e8f0f6;
  --allarme: #8b2420;
  --allarme-tenue: #fbecea;
  --buono: #1f6b43;
  --raggio: 10px;
  --tocco: 44px;
  --respiro: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --inchiostro: #e8eaee;
    --inchiostro-tenue: #9aa1b0;
    --carta: #14161a;
    --carta-alta: #1c1f25;
    --bordo: #2b2f37;
    --accento: #7bb7e0;
    --accento-tenue: #1b2a35;
    --allarme: #f0a9a4;
    --allarme-tenue: #2e1c1b;
    --buono: #7fcfa3;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: 16px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Lo spazio per la barra inferiore del telefono. */
  padding-bottom: env(safe-area-inset-bottom);
}

/* Visibile solo a chi legge con uno screen reader. */
.solo-voce {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Il focus non si toglie: si fa vedere bene. */
:focus-visible {
  outline: 3px solid var(--accento);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- intelaiatura ---------- */

header.testa {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px var(--respiro);
  background: color-mix(in srgb, var(--carta) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordo);
}

.testa h1 {
  flex: 1;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

main {
  padding: var(--respiro);
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- comandi ---------- */

/* ---------- il tocco ---------- */

/*
 * `touch-action: manipulation` spegne il **doppio tocco che ingrandisce** su
 * cio' che si tocca: su iPhone due tocchi rapidi su un riquadro zoomavano la
 * pagina invece di aprire la foto. Il pizzico per ingrandire resta, perche'
 * quello su una foto serve — e toglierlo (con `maximum-scale`) sarebbe un
 * danno di accessibilita'.
 *
 * `-webkit-tap-highlight-color` toglie il lampo grigio di Safari, che su una
 * griglia di foto si vede piu' del tocco stesso.
 */
button,
.bottone,
a,
.riquadro-apri,
label,
summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Un tocco lungo su una foto non deve avviare la selezione del testo. */
.riquadro,
.riquadro-apri,
.visore-telaio {
  -webkit-user-select: none;
  user-select: none;
}

button,
.bottone {
  min-height: var(--tocco);
  min-width: var(--tocco);
  padding: 0 16px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta-alta);
  color: var(--inchiostro);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

button:hover,
.bottone:hover {
  border-color: var(--accento);
}

/*
 * Senza qualificatore d'elemento: `button.principale` non prendeva gli `<a>`,
 * e il tasto «Accedi» della porta d'ingresso — l'unica azione di quella
 * pagina — si e' sempre disegnato come un tasto qualunque (D-48). Viene dopo
 * `.bottone`, quindi a parita' di specificita' vince comunque.
 */
.principale {
  background: var(--accento);
  border-color: var(--accento);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  .principale {
    color: #0f1216;
  }
}

button.pericolo {
  color: var(--allarme);
  border-color: color-mix(in srgb, var(--allarme) 40%, var(--bordo));
}

button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

button.minuto {
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.85rem;
}

label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--inchiostro-tenue);
  margin-bottom: 4px;
}

input[type='text'],
input[type='date'],
input[type='number'],
select,
textarea {
  width: 100%;
  min-height: var(--tocco);
  padding: 8px 12px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta-alta);
  color: var(--inchiostro);
  font: inherit;
}

fieldset {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 12px;
  margin: 0 0 12px;
}

legend {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--inchiostro-tenue);
  padding: 0 6px;
}

.riga {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.riga > * {
  flex: 1 1 160px;
}

.interruttore {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tocco);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--inchiostro);
}

.interruttore input {
  width: 22px;
  height: 22px;
  margin: 0;
  flex: none;
}

/* ---------- schede ---------- */

.scheda {
  background: var(--carta-alta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: var(--respiro);
  margin-bottom: 12px;
}

.scheda h2 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.tenue {
  color: var(--inchiostro-tenue);
  font-size: 0.88rem;
}

/* ---------- stati ---------- */

.stato {
  padding: 40px 20px;
  text-align: center;
  color: var(--inchiostro-tenue);
}

.stato strong {
  display: block;
  color: var(--inchiostro);
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.stato.errore {
  background: var(--allarme-tenue);
  border: 1px solid color-mix(in srgb, var(--allarme) 30%, transparent);
  border-radius: var(--raggio);
  color: var(--allarme);
}

.stato.errore strong {
  color: var(--allarme);
}

.avviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--raggio);
  background: var(--accento-tenue);
  border: 1px solid color-mix(in srgb, var(--accento) 25%, transparent);
  margin-bottom: 12px;
  font-size: 0.92rem;
}

.avviso.male {
  background: var(--allarme-tenue);
  border-color: color-mix(in srgb, var(--allarme) 30%, transparent);
  color: var(--allarme);
}

.caricamento {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--bordo);
  border-top-color: var(--accento);
  border-radius: 50%;
  animation: gira 0.8s linear infinite;
}

@keyframes gira {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- griglia delle foto ---------- */

.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
}

@media (min-width: 700px) {
  .griglia {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
  }
}

.riquadro {
  /* `figure` porta un margine dall'agente utente (1em 40px su Chrome): dentro
     la griglia quegli 80px laterali schiacciano il riquadro a 33px invece di
     113 (misurato a 500px di viewport). Si azzera qui e non con un attributo
     `style`, che la CSP blocca (D-27). */
  margin: 0;
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--carta-alta);
  border: 1px solid var(--bordo);
}

.riquadro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Senza anteprima: un riquadro con il tipo, non una miniatura rotta. */
.segnaposto {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--inchiostro-tenue);
  font-size: 0.72rem;
  text-align: center;
  padding: 6px;
}

.segnaposto .icona {
  font-size: 1.4rem;
}

.riquadro .nome {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 6px 5px;
  font-size: 0.68rem;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.riquadro .azioni {
  position: absolute;
  inset: 0 0 auto auto;
  display: flex;
  gap: 4px;
  padding: 4px;
}

.riquadro .azioni button {
  min-height: 32px;
  min-width: 32px;
  padding: 0;
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.92);
  color: #16181d;
  border: none;
}

.da-ospite {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.65rem;
}

/* ---------- elenco album ---------- */

/* ---------- l'elenco degli album: fotografie, non schede ---------- */

/*
 * La pagina iniziale non ha schede. Prima ogni album era un rettangolo
 * bordato identico agli altri — e identico al modulo, e alla barra dello
 * spazio — in un'app il cui contenuto sono le fotografie e in cui la pagina
 * iniziale non ne mostrava nessuna. Qui un album E' la striscia delle sue
 * ultime foto; il nome sta nel margine, le foto arrivano al bordo dello
 * schermo. E' quel contrasto a reggere la pagina, non un bordo (D-45).
 */
.album-elenco {
  display: grid;
  gap: 30px;
  /* Ogni album alto quanto e': senza, in colonne la griglia stira quello
     vuoto fino all'altezza del vicino e «Ancora vuoto» finisce a mezz'aria. */
  align-items: start;
}

.album-voce {
  display: grid;
  gap: 3px;
  color: inherit;
  text-decoration: none;
}

/*
 * Il nome dell'album in un serif, il resto dell'interfaccia in sans: cio' che
 * e' tuo e' composto come un libro, cio' che e' nostro come un attrezzo. Sono
 * famiglie che ci sono gia' su ogni sistema — questo progetto non scarica
 * niente da fuori, e un font preso da un servizio sarebbe una dipendenza in
 * piu' per una pagina che deve solo mostrare delle foto.
 */
.album-nome {
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.album-quando {
  font-size: 0.85rem;
  color: var(--inchiostro-tenue);
}

.album-condiviso {
  font-size: 0.78rem;
  color: var(--accento);
}

/*
 * Altezza fissa, larghezza a quel che c'e': tre foto o quattro, le righe
 * mantengono lo stesso respiro scendendo. Con colonne uguali invece un album
 * da tre foto avrebbe tasselli piu' grandi di uno da quattro, e l'elenco
 * ballerebbe.
 */
.striscia {
  display: flex;
  gap: 2px;
  height: 104px;
  margin-top: 7px;
  /* A filo dello schermo: e' la cosa che fa sembrare questa una pagina di
     fotografie invece che un modulo. Il margine del corpo si annulla qui. */
  margin-inline: calc(var(--respiro) * -1);
}

.tassello {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--bordo);
}

/*
 * Cio' che non ha un'anteprima non e' un buco: un PDF o un archivio hanno una
 * forma, e questo prodotto li accetta gia' oggi. Fondo piu' chiaro della foto
 * accanto, cosi' si distingue che li' non c'e' un'immagine da guardare ma un
 * file da scaricare (D-46).
 */
.tassello.senza-anteprima {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--carta-alta);
  border: 1px solid var(--bordo);
}

.tassello.senza-anteprima .icona {
  font-size: 1.7rem;
  opacity: 0.75;
}

/* Senza foto sotto non serve velare niente: il numero si legge da solo. */
.tassello.senza-anteprima .ancora {
  background: none;
  color: var(--inchiostro-tenue);
}

.tassello img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Quante ce ne sono oltre quelle che si vedono. */
.ancora {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
}

@media (min-width: 640px) {
  .striscia {
    height: 140px;
    margin-inline: 0;
    border-radius: var(--raggio);
    overflow: hidden;
  }

  .album-nome {
    font-size: 1.7rem;
  }

  /*
   * In colonne, non in fasce. A tutta larghezza i quattro tasselli diventano
   * rettangoli lunghi 270px e alti 140, e una fotografia dentro quella forma
   * e' tagliata via quasi tutta. Due colonne la riportano vicino al quadrato,
   * che e' la forma in cui una foto si riconosce.
   */
  .album-elenco {
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 34px 26px;
    max-width: 1120px;
  }
}

/* ---------- in fondo: creare un album, e lo spazio ---------- */

.in-fondo {
  margin-top: 38px;
}

/* Si usa dieci volte in un anno: sta in fondo, e non grida. */
.nuovo-album {
  width: 100%;
  max-width: 330px;
}

.spazio {
  display: grid;
  gap: 6px;
  margin-top: 20px;
  font-size: 0.82rem;
  color: var(--inchiostro-tenue);
}

.spazio.stretto {
  color: var(--allarme);
  font-weight: 550;
}

.etichetta {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--accento-tenue);
  color: var(--accento);
  border: 1px solid color-mix(in srgb, var(--accento) 25%, transparent);
}

.etichetta.spenta {
  background: transparent;
  color: var(--inchiostro-tenue);
  border-color: var(--bordo);
}

/* ---------- caricamento ---------- */

.area-trascino {
  border: 2px dashed var(--bordo);
  border-radius: var(--raggio);
  padding: 24px 16px;
  text-align: center;
  color: var(--inchiostro-tenue);
}

.area-trascino.sopra {
  border-color: var(--accento);
  background: var(--accento-tenue);
}

.coda-caricamento {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.coda-caricamento li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  font-size: 0.88rem;
  align-items: center;
}

.coda-caricamento .barra {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 3px;
  background: var(--bordo);
  overflow: hidden;
}

.coda-caricamento .barra span {
  display: block;
  height: 100%;
  background: var(--accento);
  transition: width 0.2s;
}

.coda-caricamento .esito.ok {
  color: var(--buono);
  font-weight: 600;
}

.coda-caricamento .esito.ko {
  color: var(--allarme);
  font-weight: 600;
}

/* ---------- link ---------- */

.link-voce {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 12px;
  margin-bottom: 10px;
  background: var(--carta-alta);
}

.link-voce.revocato {
  opacity: 0.6;
}

.link-voce .capacita {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0;
}

.modifica-link {
  display: grid;
  gap: 10px;
  padding: 12px;
  margin-top: 10px;
  border-radius: var(--raggio);
  background: var(--carta-alta);
  border: 1px solid var(--bordo);
}

/*
 * I tre permessi uno sotto l'altro, non affiancati: su un telefono tre
 * interruttori in riga finiscono a 110px l'uno e l'area da toccare diventa
 * piu' piccola del dito. In colonna ognuno tiene i suoi 44px pieni.
 */
.capacita-scelta {
  display: grid;
  gap: 2px;
}

.indirizzo-nuovo {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: var(--raggio);
  background: var(--accento-tenue);
  border: 1px solid color-mix(in srgb, var(--accento) 30%, transparent);
  margin-bottom: 12px;
}

.indirizzo-nuovo code {
  display: block;
  padding: 10px;
  background: var(--carta-alta);
  border-radius: 6px;
  font-size: 0.78rem;
  word-break: break-all;
  border: 1px solid var(--bordo);
}

/* ---------- modale di conferma ---------- */

dialog {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta-alta);
  color: var(--inchiostro);
  padding: var(--respiro);
  max-width: 420px;
  width: calc(100% - 32px);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

dialog h2 {
  margin-top: 0;
}

dialog .pulsanti {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: var(--respiro);
}

/* ---------- vista di una foto ---------- */

.intera {
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  background: var(--carta-alta);
  border-radius: var(--raggio);
  border: 1px solid var(--bordo);
}

.barra-spazio {
  height: 8px;
  border-radius: 4px;
  background: var(--bordo);
  overflow: hidden;
  margin: 6px 0;
}

.barra-spazio span {
  display: block;
  height: 100%;
  background: var(--accento);
}

.barra-spazio.piena span {
  background: var(--allarme);
}

/* ---------- la vista singola ---------- */

/* Il riquadro diventa un bottone: si apre col dito e con la tastiera. */
.riquadro-apri {
  position: absolute;
  inset: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: none;
  min-height: 0;
  min-width: 0;
  display: block;
  cursor: zoom-in;
}

/*
 * Mentre il visore e' aperto la pagina sotto non si muove. `showModal()` da
 * solo non lo garantisce su Safari di iPhone: senza questo, un gesto sulla
 * foto scorreva la galleria dietro invece di cambiare immagine. Il corpo si
 * fissa; `visore.js` si ricorda il punto e ci torna alla chiusura.
 */
html.visore-aperto {
  overflow: hidden;
}

html.visore-aperto body {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
}

dialog.visore {
  /* Niente deve propagarsi alla pagina sotto, nemmeno il rimbalzo elastico. */
  overscroll-behavior: contain;
  max-width: 100vw;
  max-height: 100dvh;
  width: 100vw;
  height: 100dvh;
  padding: 0;
  border: none;
  border-radius: 0;
  background: #0b0c0e;
  color: #f3f4f6;
  display: flex;
  flex-direction: column;
}

dialog.visore::backdrop {
  background: #0b0c0e;
}

.visore-testa {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) 12px 10px;
  background: #0b0c0e;
}

.visore-nome {
  flex: 1;
  font-weight: 600;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visore-contatore {
  color: #9aa1b0;
  font-size: 0.8rem;
  white-space: nowrap;
}

.visore-chiudi {
  background: none;
  border: none;
  color: #f3f4f6;
  font-size: 1.3rem;
  flex: none;
}

/* L'area dell'immagine: prende tutto lo spazio che resta. */
.visore-telaio {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 8px;
  /*
   * `none`: qui il gesto e' nostro, e lo prendiamo con `touchmove` non passivo
   * (vedi visore.js). Avevo provato `pinch-zoom`, per lasciare il pizzico:
   * ma quella famiglia di valori ha supporto diverso fra browser, e dove non
   * e' riconosciuto la regola cade e il browser si riprende il gesto — con il
   * risultato che su iPhone non si muoveva piu' niente. `none` lo conoscono
   * tutti. Il pizzico per ingrandire la foto, per ora, si perde: la foto e'
   * gia' adattata allo schermo, e un ingrandimento vero sarebbe da scrivere.
   */
  touch-action: none;
  overscroll-behavior: contain;
}

.visore-immagine {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.visore-senza {
  text-align: center;
  color: #9aa1b0;
  font-size: 0.85rem;
}

/*
 * La riga che spiega un video. Sta fuori dal telaio e non si restringe mai:
 * dentro, l'immagine le toglieva lo spazio e restava schiacciata a due pixel.
 * Testo più grande e più chiaro del grigio tenue: va letta su un telefono, in
 * mano, non studiata.
 */
.visore-nota {
  flex: none;
  text-align: center;
  color: #e8eaee;
  font-size: 0.95rem;
  line-height: 1.35;
  padding: 10px 16px;
  margin: 0 12px;
  border-radius: var(--raggio);
  background: #1c1f25;
}

.visore-senza {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.visore-senza .icona {
  font-size: 3rem;
}

.visore-senza strong {
  color: #f3f4f6;
  font-size: 1.1rem;
}

.visore-piede {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 12px calc(env(safe-area-inset-bottom) + 12px);
  background: #0b0c0e;
}

.visore-piede button {
  background: #1c1f25;
  border-color: #2b2f37;
  color: #f3f4f6;
}

.visore-piede button.principale {
  background: #7bb7e0;
  border-color: #7bb7e0;
  color: #0b0c0e;
}

.visore-passo {
  font-size: 1.5rem;
  line-height: 1;
  min-width: 56px;
}

.visore-piede button[disabled] {
  opacity: 0.35;
}