/* ═══════════════════════════════════════════════════
   CONDOMINIUM — Edificio isometrico
   Canvas full-page + stanza sovrapposta da destra
   ═══════════════════════════════════════════════════ */

/* ─── Wrapper ──────────────────────────────────── */

.condominium-wrapper {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* ─── Split container (solo per classe stanza-aperta) */

.condominium-split {
  width: 100%;
  height: 100%;
}

/* ─── Edificio ─────────────────────────────────── */

.edificio-pagina {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Quando la stanza è aperta: slide + zoom verso la stanza */
.condominium-split.stanza-aperta .edificio-pagina {
  transform: translateX(-26vw) scale(1.25);
}

/* Canvas — sempre pieno del contenitore */
#canvas-edificio {
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
}

/* ─── Stanza drawer — pannello fisso da destra ── */

.stanza-drawer {
  position: fixed;
  top: 4rem;
  right: 0;
  width: 55vw;
  height: calc(100vh - 4rem);
  display: flex;
  background: var(--avorio);
  border-left: 1px solid var(--antracite);
  transform: translateX(100%);
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  z-index: 50;
}

.condominium-split.stanza-aperta .stanza-drawer {
  transform: translateX(0);
}

/* ─── Overlay legenda e hint ───────────────────── */

.legenda--overlay {
  position: absolute;
  bottom: 1.2rem;
  left: 1.5rem;
  display: flex;
  gap: 1rem;
  padding: 0;
  border: none;
  z-index: 10;
}

.hint--overlay {
  position: absolute;
  bottom: 1.2rem;
  right: 1.5rem;
  transition: opacity 0.4s;
  z-index: 10;
}

.stanza-aperta .hint--overlay {
  opacity: 0;
  pointer-events: none;
}

/* ─── Panel manifesto — slide da sinistra ──────── */

.panel--manifesto {
  position: fixed;
  top: 0;
  left: 0;
  width: 380px;
  height: 100vh;
  background: var(--nero);
  border-right: 1px solid var(--antracite);
  padding: 1.8rem 1.5rem;
  z-index: 200;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--avorio);
}

.panel--manifesto.open {
  transform: translateX(0);
}

.panel--manifesto__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.9rem;
}

.panel--manifesto__titolo {
  font-family: var(--font-titolo);
  font-size: 2.2rem;
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 1.2rem 0 0.2rem;
}

.panel--manifesto__titolo em {
  color: var(--oro);
}

.panel--manifesto__sottotitolo {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cemento);
  margin-bottom: 1.5rem;
}

.panel--manifesto__sezione {
  margin: 1.2rem 0;
}

.panel--manifesto__label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cemento);
  margin-bottom: 0.6rem;
}

.panel--manifesto__sezione p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--grigio);
  margin-bottom: 0.8rem;
}

.panel--manifesto__sezione em {
  color: var(--avorio);
  font-style: normal;
}

.panel--manifesto__voci {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 10px;
  color: var(--grigio);
}

.panel--manifesto__voci .tag {
  margin-right: 0.4rem;
  font-size: 8px;
}

/* ─── Panel info (step 1 — piccolo drawer) ─────── */

.panel--laterale {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  height: 100vh;
  background: var(--nero);
  border-left: 1px solid var(--antracite);
  padding: 1.8rem 1.5rem;
  z-index: 100;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.panel--laterale.open {
  transform: translateX(0);
}

/* ─── Profilo e contenuto nel drawer ───────────── */

.stanza-drawer .profilo {
  flex: 0 0 200px;
  height: 100%;
  overflow-y: auto;
}

.stanza-drawer .stanza-contenuto {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ─── Responsive ───────────────────────────────── */

@media (max-width: 900px) {
  .stanza-drawer {
    width: 100vw;
  }
  .condominium-split.stanza-aperta .edificio-pagina {
    transform: translateX(-100vw);
  }
}

/* ─── Vista rizoma ─────────────────────────────── */

.rizoma-view {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--avorio);
}

.rizoma-view.attiva {
  display: flex;
}

.rizoma-inner {
  text-align: center;
  padding: 2rem;
}

.rizoma-titolo {
  font-family: var(--font-titolo);
  font-size: 2.4rem;
  letter-spacing: 0.1em;
  color: var(--nero);
  margin-bottom: 0.3rem;
}

.rizoma-sotto {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cemento);
  margin-bottom: 3rem;
}

.rizoma-nodo--centro {
  font-family: var(--font-titolo);
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--avorio);
  background: var(--nero);
  padding: 0.6rem 1.2rem;
  display: inline-block;
  margin-bottom: 2rem;
}

.rizoma-nota {
  font-size: 11px;
  color: var(--pietra);
  font-style: italic;
  max-width: 320px;
  line-height: 1.7;
}

/* ─── Panel pianerottoli — da destra ───────────── */

.panel--pianerottoli {
  position: fixed;
  top: 4rem;
  right: 0;
  width: 420px;
  height: calc(100vh - 4rem);
  background: var(--nero);
  border-left: 1px solid var(--antracite);
  padding: 1.8rem 1.5rem;
  z-index: 200;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--avorio);
  display: flex;
  flex-direction: column;
}

.panel--pianerottoli.open {
  transform: translateX(0);
}

.panel--pianerottoli__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.9rem;
}

.panel--pianerottoli__feed {
  flex: 1;
  overflow-y: auto;
  margin-top: 0.5rem;
}

.panel--pianerottoli .frammento {
  border-bottom: 1px solid var(--antracite);
  padding: 1rem 0;
}

.panel--pianerottoli .frammento__contenuto {
  color: var(--grigio);
}

.panel--pianerottoli .frammento__autore a {
  color: var(--cemento);
}

.panel--pianerottoli .frammento__autore a:hover {
  color: var(--oro);
}

.panel--pianerottoli .corridoio-vuoto {
  font-size: 11px;
  color: var(--pietra);
  font-style: italic;
  text-align: center;
  padding: 3rem 0;
}

.panel--pianerottoli .filtri {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.panel--pianerottoli .filtro {
  font-family: var(--font-corpo);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border: 1px solid var(--antracite);
  background: none;
  color: var(--cemento);
  cursor: pointer;
  transition: all var(--transizione);
}

.panel--pianerottoli .filtro:hover,
.panel--pianerottoli .filtro.attivo {
  border-color: var(--oro);
  color: var(--oro);
}

/* ─── Panel regolamento — da sinistra ──────────── */

.panel--regolamento {
  position: fixed;
  top: 0;
  left: 0;
  width: 380px;
  height: 100vh;
  background: var(--nero);
  border-right: 1px solid var(--antracite);
  padding: 1.8rem 1.5rem;
  z-index: 200;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--avorio);
}

.panel--regolamento.open {
  transform: translateX(0);
}

/* ─── Pannelli laterali unificati allo stile vetro-scuro (coerenti con archivio/scheda) ─── */
.panel--manifesto,
.panel--regolamento,
.panel--pianerottoli {
  background: rgba(12, 13, 22, 0.93);
  backdrop-filter: blur(10px);
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  left: 0; right: auto;
  top: 0; height: 100vh;
  width: 420px;
  transform: translateX(-103%);
  padding: 128px 24px 24px;
  z-index: 39;
  color: #dfe2f0;
}
.panel--manifesto.open,
.panel--regolamento.open,
.panel--pianerottoli.open {
  transform: translateX(0);
}
.panel__close {
  position: absolute;
  top: 128px;
  right: 16px;
  z-index: 2;
  background: none; border: none; color: #9aa0bd;
  font-family: 'IBM Plex Mono', monospace; font-size: 18px;
  line-height: 1; cursor: pointer; padding: 4px 7px;
}
.panel__close:hover { color: #fff; }
.panel__divider { border-color: rgba(255, 255, 255, 0.12) !important; background: rgba(255, 255, 255, 0.1); }
/* ─── Sottomenu pianerottoli: UN SOLO FRAME, UNA SOLA REGOLA ───
   Tutte le voci (la mia stanza + riflessioni/visivi/segnali) condividono lo
   stesso stile: la regola vive QUI, sul contenitore, qualunque sia la classe
   del bottone (.filtro ha il binding del feed in building.js, .filtro-stanza
   apre la stanza — la VESTE è identica). Una riga, 13px, baseline allineata. */
/* riga 1: i FILTRI da soli (riflessioni · visivi · segnali) */
#pianerottoli-filtri {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  flex-wrap: nowrap;
  margin-bottom: 6px;
}
/* riga 2: LA MIA STANZA da sola, con l'hairline del frame sotto */
#stanza-voce {
  padding: 2px 0 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
#pianerottoli-filtri button,
#stanza-voce button {
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1.4;
  padding: 2px 0; margin: 0;
  color: #dfe2f0; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--transizione);
}
#pianerottoli-filtri button:hover,
#pianerottoli-filtri button.attivo,
#stanza-voce button:hover,
#stanza-voce button.attivo { color: var(--oro); }
.panel--pianerottoli .filtro:hover,
.panel--pianerottoli .filtro.attivo { color: var(--oro); }
.panel--pianerottoli__feed { background: none; border: none; padding: 0; }
.panel--pianerottoli .frammento {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 2px solid var(--sabbia);
  border-radius: 9px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.panel--pianerottoli .frammento--riflessione { border-left-color: var(--riflessione); }
.panel--pianerottoli .frammento--visivo { border-left-color: var(--visivo); }
.panel--pianerottoli .frammento--segnale { border-left-color: var(--segnale); }
/* colori leggibili sul vetro scuro (i default di base.css sono per il fondo avorio) */
.panel--pianerottoli .frammento__autore { font-size: 13.5px; color: #eef0f8; }
.panel--pianerottoli .frammento__autore a { color: #eef0f8; }
.panel--pianerottoli .frammento__autore .nome-oro { color: #eec97a; }
.panel--pianerottoli .frammento__autore .nome-blu { color: #85bcf2; }
.panel--pianerottoli .frammento__contenuto { color: #cfd2e6; }
.panel--pianerottoli .frammento__tempo { color: #8f93b4; }
.panel--pianerottoli .frammento__tipo-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 5px;
  letter-spacing: 0.06em;
}
.panel--pianerottoli .frammento__tipo-tag--riflessione { background: rgba(224, 168, 58, 0.18); color: #eec97a; }
.panel--pianerottoli .frammento__tipo-tag--visivo { background: rgba(58, 134, 216, 0.22); color: #85bcf2; }
.panel--pianerottoli .frammento__tipo-tag--segnale { background: rgba(217, 92, 58, 0.2); color: #f39a82; }

/* Vista rizoma: VELO leggerissimo sulla pagina (l'edificio resta ben visibile);
   il vetro standard ce l'ha la COLONNA dei controlli dentro l'embed (STILE.md) —
   così la somma velo+colonna ≈ il vetro dei pianerottoli, non di più. */
.rizoma-view {
  background: rgba(12, 13, 22, 0.15);
  backdrop-filter: blur(4px);
}
/* Il grafo di Palerma incorniciato A TUTTA PAGINA (2026-07-05): l'iframe parte
   da 0 — è la colonna dei controlli DENTRO l'embed ad arrivare fino in cima
   (vetro come i pannelli del sito) e a lasciare il respiro sotto la nav. */
.rizoma-view iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: none;
  background: transparent;
}

/* ─── Pannello PROGETTO uniformato allo stile pianerottoli (2026-07-03) ───
   niente titolo/sottotitolo (rimossi da index.html), testi IBM Plex Mono 14px
   nei toni chiari dei pannelli. Vedi site/STILE.md. */
.panel--manifesto {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  line-height: 1.65;
  color: #dfe2f0;
}
.panel--manifesto__sezione p {
  font-size: 14px;
  line-height: 1.65;
  color: #cfd2e6;
}
.panel--manifesto__sezione em { color: #f2efe6; font-style: normal; }
.panel--manifesto__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #aeb3cd;
}
.panel--manifesto__voci { font-size: 13px; color: #cfd2e6; }
.panel--manifesto .panel__ep { color: #aeb3cd; font-size: 11px; letter-spacing: 0.08em; }
.rizoma-titolo { color: #f2efe6; }
.rizoma-nodo--centro { background: rgba(255, 255, 255, 0.08); color: #f2efe6; }

/* Pannelli semi-trasparenti + ombra sul testo per la leggibilità */
.panel--manifesto,
.panel--regolamento,
.panel--pianerottoli {
  background: rgba(12, 13, 22, 0.3);
  backdrop-filter: blur(20px);
  text-shadow: 0 1px 7px rgba(0, 0, 0, 0.6);
}
/* pianerottoli con la tipografia di archivio (IBM Plex Mono) */
.panel--pianerottoli {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  line-height: 1.65;
  color: #dfe2f0;
  /* ritmo verticale: titolo→menu→sottomenu con respiri simili (~16-20px);
     il sottomenu parte a 96px invece del 128 standard degli altri pannelli */
  padding-top: 96px;
}
.panel--pianerottoli .panel--manifesto__titolo {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  margin: 0 0 12px;
  color: #dfe2f0;
}

/* ─── Titolo «frammenti» sopra i filtri del pannello pianerottoli (2026-07-09).
   frammenti = pianerottoli: una colonna alla volta, filtrando riflessioni ·
   visioni · segnali. Il feed carica TUTTI i frammenti (non più i soli 5 SSE). */
.pianerottoli-titolo {
  font-family: var(--font-titolo); font-size: 1.7rem; letter-spacing: 0.05em;
  text-transform: lowercase; color: #eef0f8; margin-bottom: 0.7rem;
}