/* Parete — foglio di stile.
   La parete è scura come una sala in penombra, le opere sono illuminate da
   faretti. Il filo rosso che attraversa ogni fila è la linea di allestimento
   museale: le opere si allineano sul centro, come in un appendimento vero. */

:root{
  --muro:#17181a; --muro-alto:#1e1f22; --luce:#f0ede6; --fumo:#8b8981;
  --rosso:#c0342b; --linea:rgba(255,255,255,.1);
  --display:'Fraunces',Georgia,serif;
  --testo:'Inter Tight',system-ui,sans-serif;
  --dato:'IBM Plex Mono',ui-monospace,monospace;
  --sp:clamp(1.4rem,5vw,3rem);
  --fila:clamp(230px,34vw,330px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--muro);color:var(--luce);
  font:400 17px/1.6 var(--testo);-webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--display);font-weight:300;letter-spacing:-.015em;margin:0}
a{color:var(--luce)}
.guscio{max-width:1180px;margin:0 auto;padding-inline:var(--sp)}
.occhiello{font-family:var(--dato);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fumo);margin:0}

/* ---- testata ---- */
.testata{padding-block:clamp(2.6rem,8vw,5rem) clamp(1.6rem,4vw,2.6rem)}
.testata h1{font-size:clamp(2.1rem,7.5vw,4rem);line-height:1.02;margin:1.1rem 0 0}
.sommario{max-width:34rem;color:var(--fumo);margin:1.3rem 0 0;font-size:1.02rem}
.conta{font-family:var(--dato);font-size:.85rem;color:var(--fumo);margin:1.6rem 0 0}
.conta span{font-size:1.5rem;font-weight:500}
.conta .verde{color:#7fb069}.conta .rosso{color:var(--rosso)}

/* ---- la parete ----
   Righe di altezza fissa: solo così la riga rossa dell'allestimento può
   essere disegnata come sfondo ripetuto, sempre a metà di ogni fila. */
.parete{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  grid-auto-rows:var(--fila);gap:0;
  background-image:repeating-linear-gradient(to bottom,
    transparent 0,transparent calc(var(--fila)/2 - 1px),
    rgba(192,52,43,.42) calc(var(--fila)/2 - 1px),
    rgba(192,52,43,.42) calc(var(--fila)/2),
    transparent calc(var(--fila)/2),transparent var(--fila));
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding-inline:.4rem}

.posto{position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:.7rem;text-align:center}

/* faretto */
.posto.pieno::before{content:"";position:absolute;left:50%;top:-6%;
  width:130%;height:118%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 46% 42% at 50% 34%,
    rgba(255,246,225,.16),rgba(255,246,225,0) 70%)}

.opera{position:relative;cursor:zoom-in;background:none;border:none;padding:0;
  display:flex;flex-direction:column;align-items:center;max-width:100%}
.opera img{max-width:100%;max-height:calc(var(--fila) - 6.5rem);
  display:block;border:6px solid #0d0d0f;
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 22px 40px -22px #000;
  opacity:0;animation:entra .8s ease-out forwards}
@keyframes entra{to{opacity:1}}

.cartellino{margin-top:.7rem;line-height:1.35}
.cartellino b{display:block;font:400 .92rem var(--display);color:var(--luce)}
.cartellino span{font-family:var(--dato);font-size:.68rem;color:var(--fumo)}
.resta{position:absolute;bottom:.5rem;left:0;right:0;
  font-family:var(--dato);font-size:.62rem;color:rgba(255,255,255,.28)}

/* posto libero */
.posto.vuoto{cursor:pointer}
.gancio{width:100%;max-width:150px;aspect-ratio:1;border:1px dashed rgba(255,255,255,.16);
  border-radius:2px;display:grid;place-content:center;color:var(--fumo);
  font-family:var(--dato);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .15s,color .15s}
.posto.vuoto:hover .gancio{border-color:var(--rosso);color:var(--luce)}

/* ---- note e piede ---- */
.note{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  background:var(--linea);border:1px solid var(--linea);margin-block:clamp(2.4rem,7vw,4rem)}
.note>div{background:var(--muro);padding:1.2rem 1.3rem}
.note h2{font-family:var(--testo);font-weight:600;font-size:.98rem;margin-bottom:.5rem}
.note p{margin:0;font-size:.9rem;line-height:1.55;color:var(--fumo)}
.piede{border-top:1px solid var(--linea);padding-block:1.6rem 3.2rem;
  font-size:.84rem;color:var(--fumo)}
.piede p{margin:.4rem 0}
.piede a{color:#c3c1ba}

/* ---- pannelli ---- */
.velo{position:fixed;inset:0;z-index:50;display:flex;align-items:center;
  justify-content:center;padding:1rem;background:rgba(10,10,12,.9);
  backdrop-filter:blur(8px);overflow-y:auto}
.velo.scuro{background:rgba(8,8,10,.96);flex-direction:column;gap:1rem}
.foglio{background:var(--muro-alto);border:1px solid var(--linea);border-radius:4px;
  padding:clamp(1.4rem,4vw,2rem);width:min(460px,100%);position:relative;margin:auto}
.foglio h2{font-size:1.6rem;margin:.4rem 0 1.2rem}
.chiudi{position:absolute;top:.6rem;right:.7rem;width:38px;height:38px;
  display:grid;place-content:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);background:rgba(20,20,22,.8);
  color:var(--luce);font-size:1.4rem;cursor:pointer}
.velo.scuro .chiudi{position:fixed;top:max(.8rem,env(safe-area-inset-top));right:.8rem}

.deposito{display:grid;place-items:center;min-height:170px;padding:1.2rem;
  border:2px dashed rgba(255,255,255,.18);border-radius:4px;cursor:pointer;
  color:var(--fumo);font-size:.86rem;text-align:center;line-height:1.5}
.deposito:hover{border-color:var(--rosso);color:var(--luce)}
.deposito img{max-width:100%;max-height:230px;display:block}

.campi{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.1rem}
.campi .largo{grid-column:1/-1}
.etichetta{display:block;font-family:var(--dato);font-size:.62rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fumo);margin-bottom:.25rem}
input[type=text],input:not([type]){width:100%}
.campi input{width:100%;font:400 .93rem var(--testo);color:var(--luce);
  background:rgba(0,0,0,.3);border:1.5px solid rgba(255,255,255,.16);
  border-radius:3px;padding:.6rem .7rem}
.campi input:focus{outline:2px solid var(--rosso);outline-offset:-1px}
.patto{display:flex;gap:.6rem;align-items:flex-start;margin-top:1rem;
  font-size:.87rem;color:var(--fumo);line-height:1.45}
.patto input{margin-top:.3rem}

.azioni{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin:1.4rem 0 0}
.bottone{font:500 .95rem var(--testo);padding:.8rem 1.5rem;border-radius:3px;
  border:none;background:var(--luce);color:#111;cursor:pointer}
.bottone:hover{background:var(--rosso);color:#fff}
.bottone[disabled]{opacity:.35;cursor:not-allowed}
.stato{font-family:var(--dato);font-size:.75rem;color:var(--fumo)}
.stato.male{color:var(--rosso)}

.testo{color:var(--fumo);margin:0}
.riga-link{display:flex;gap:.5rem;align-items:center;margin-top:.3rem;
  background:rgba(0,0,0,.32);border:1px solid var(--linea);border-radius:3px;padding:.5rem .5rem .5rem .7rem}
.riga-link code{flex:1;min-width:0;font-family:var(--dato);font-size:.74rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.riga-link button{font:500 .74rem var(--testo);padding:.35rem .7rem;cursor:pointer;
  border:1px solid var(--linea);background:rgba(255,255,255,.06);color:var(--luce);border-radius:2px}
.custodire{border-left:2px solid var(--rosso);padding-left:.9rem;margin-top:1.4rem}
.minuta{font-size:.78rem;color:var(--fumo);margin:.5rem 0 0;line-height:1.5}
.minuta-btn{background:none;border:none;color:var(--fumo);font:400 .74rem var(--testo);
  text-decoration:underline;cursor:pointer;padding:0;margin-top:.5rem}
.minuta-btn:hover{color:var(--rosso)}

.velo.scuro img{max-width:min(94vw,1100px);max-height:76vh;object-fit:contain;
  border:8px solid #0d0d0f;box-shadow:0 30px 70px -30px #000}
.didascalia{text-align:center;max-width:min(94vw,600px)}
.didascalia b{display:block;font-family:var(--display);font-size:1.2rem;font-weight:400}
.didascalia span{font-family:var(--dato);font-size:.75rem;color:var(--fumo)}
.didascalia a{display:block;margin-top:.5rem;font-size:.85rem;color:#c3c1ba}

@media (max-width:560px){
  body{font-size:16.5px}
  .parete{grid-template-columns:repeat(2,1fr)}
  .cartellino b{font-size:.85rem}
}

/* ---- condivisione della parete ---------------------------------------- */
.condividi{margin-top:1.8rem;max-width:36rem}
.condividi .etichetta{margin-bottom:.35rem}

/* ---- la tua opera ------------------------------------------------------
   Chi ha appeso deve riconoscere la propria opera senza pensarci: un segno
   in alto e il pulsante per toglierla direttamente sulla parete. Nascondere
   la rimozione dentro l'ingrandimento la rendeva introvabile. */
.posto.mia .opera img{border-color:#3a2320}
.tua{position:absolute;top:.5rem;left:.5rem;z-index:3;
  font-family:var(--dato);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--rosso);padding:.15rem .4rem;border-radius:2px}
.togli-qui{margin-top:.35rem;background:none;border:none;cursor:pointer;
  font:400 .7rem var(--testo);color:var(--fumo);text-decoration:underline;
  text-underline-offset:2px}
.togli-qui:hover{color:var(--rosso)}

/* ---- storico delle chiavi su questo telefono --------------------------- */
#storico-chiavi{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--linea)}
.riga-storico{display:flex;justify-content:space-between;gap:.6rem;width:100%;
  text-align:left;padding:.55rem .1rem;background:none;border:none;cursor:pointer;
  color:var(--luce);font:400 .87rem var(--testo);border-bottom:1px solid var(--linea)}
.riga-storico:hover{color:var(--rosso)}
.riga-storico em{font-family:var(--dato);font-style:normal;font-size:.7rem;color:var(--fumo);flex:none}

/* ---- "le mie opere" ----------------------------------------------------- */
.riga-mia{display:flex;align-items:center;gap:.9rem;padding:.75rem 0;
  border-bottom:1px solid var(--linea)}
.riga-mia img{width:56px;height:56px;object-fit:contain;background:rgba(255,255,255,.05);
  border-radius:2px;flex:none}
.riga-mia-testo{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.riga-mia-testo b{font-family:var(--display);font-weight:400;font-size:1rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.riga-mia-testo span{font-family:var(--dato);font-size:.72rem;color:var(--fumo)}