:root{
  --bg:#0b0c10; --bg-2:#12131a; --fg:#ececec; --muted:#9aa0a6;
  --nuke:#f5c400; --nuke-200:#ffe37a; --ash:#e9e2c6; --coal:#0a0a0d;
  --ring:rgba(245,196,0,.45); --ring-2:rgba(245,196,0,.10);
  --ok:#12c26a; --warn:#ffcc00; --err:#ff4d4d;
}

html,body{height:100%;}
body{
  background:#0a0a0d; color:var(--fg);
  font-family:"Unbounded", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  overflow-x:hidden;
}

.timeline-page {
  --bg:#0b0b0e; 
  --panel:#121219; 
  --muted:#a8a8b3; 
  --line:#2a2a3b; 
  --glow:#5a61ff; 
  --accent:#ff4d4f;
  background:var(--bg);
  color:#e9e9f0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Unbounded",sans-serif;
}

.timeline-page header,
.timeline-page footer {
  background: linear-gradient(90deg,#0f0f16,#121229);
}

.timeline-page .btn-outline-eclipse{ 
  --bs-btn-color:#d7d7e5; 
  --bs-btn-border-color:#2a2a3b; 
  --bs-btn-hover-bg:#17172a; 
}

.timeline-page .kicker{ 
  font-size:.85rem; 
  color:#b3b3c2 
}

.timeline-page .glitch-text{ 
  position:relative; 
  display:inline-block; 
  text-shadow:0 0 8px rgba(90,97,255,.55); 
  animation:jitter 3.5s infinite ease-in-out; 
}
.timeline-page .glitch-text::before, 
.timeline-page .glitch-text::after{ 
  content:attr(data-text); 
  position:absolute; 
  left:0; 
  top:0; 
  opacity:.25; 
  mix-blend-mode:screen; 
}
.timeline-page .glitch-text::before{ 
  transform:translate(1px,0); 
  color:#5a61ff; 
  filter:blur(.5px) 
}
.timeline-page .glitch-text::after{ 
  transform:translate(-1px,0); 
  color:#ff4d4f; 
  filter:blur(.5px) 
}
@keyframes jitter{ 
  0%,100%{transform:translate(0,0)} 
  20%{transform:translate(.3px,-.3px)} 
  40%{transform:translate(-.4px,.4px)} 
  60%{transform:translate(.2px,.2px)} 
  80%{transform:translate(-.2px,-.2px)} 
}

/* TIMELINE GRAFICA */
.timeline-page .timeline{ position:relative; }
.timeline-page .year-group{ position:relative; padding-left:28px; margin-bottom:2rem; }
.timeline-page .year-group::before{ content:""; position:absolute; left:12px; top:.6rem; bottom:0; width:2px; background:linear-gradient(#232338,#2f2f49,#232338); opacity:.6; filter: drop-shadow(0 0 3px rgba(90,97,255,.25)); }
.timeline-page .year-badge{ display:inline-flex; align-items:center; gap:.5rem; background:#141422; border:1px solid #2a2a3b; padding:.4rem .8rem; border-radius:999px; font-weight:700; margin-bottom:.8rem; }
.timeline-page .year-badge .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent), 0 0 20px rgba(255,77,79,.35) }
.timeline-page .node{ position:relative; background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:.8rem .9rem; margin-left:14px; margin-bottom:.75rem; box-shadow:0 8px 20px rgba(0,0,0,.25); transition: transform .2s ease, box-shadow .2s ease; }
.timeline-page .node:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.35); }
.timeline-page .node::before{ content:""; position:absolute; left:-18px; top:14px; width:12px; height:12px; border-radius:50%; background:#5a61ff; box-shadow:0 0 10px #5a61ff, 0 0 20px rgba(90,97,255,.35) }
.timeline-page .node .title{ font-weight:700; font-size:1rem; }
.timeline-page .node .meta{ font-size:.85rem; color:var(--muted) }
.timeline-page .node .chips{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.4rem;}
.timeline-page .chip{ border:1px solid #2a2a3b; border-radius:999px; padding:.15rem .5rem; font-size:.75rem; color:#dcdceb; background:#141422; }
.timeline-page .chip.glitch{ border-color:#5a61ff; text-shadow:0 0 6px rgba(90,97,255,.55); }
.timeline-page .links a{ color:#9ecbff; margin-right:.8rem; text-decoration:none; }
.timeline-page .links a:hover{ text-decoration:underline; }
.timeline-page .empty{ color:#8d8d98; border:1px dashed #2a2a3b; border-radius:16px; padding:2rem; text-align:center; }

/* DOSSIER NARRATIVO */
.timeline-page .dossier-year{ margin-top:2.2rem; }
.timeline-page .dossier-year h3{ display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; }
.timeline-page .dossier-year h3 .flag{ width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); display:inline-block; }
.timeline-page .event{ padding:.75rem 1rem; border-left:3px solid #2a2a3b; margin:.5rem 0; background:#11111a; border-radius:10px; }
.timeline-page .event .place{ font-weight:700 }
.timeline-page .event .desc{ color:#cfd2dd }
.timeline-page .event small{ color:#9aa0aa }

.avatar-24{ width:24px; height:24px; border-radius:50%; object-fit:cover; background:#1a1a1a; }
.navbar .dropdown-menu-dark .dropdown-item .bi { opacity:.9; }
/* Menu: isolamento stile */
.site-header { position: sticky; top: 0; z-index: 1040; background: transparent; }
.site-header .navbar { background-color: #0d0d12 !important; }
.site-header .navbar .nav-link { color: rgba(255,255,255,.85); }
.site-header .navbar .nav-link:hover,
.site-header .navbar .nav-link.active { color: #fff; text-shadow: 0 0 6px rgba(158,203,255,.25); }
.site-header .dropdown-menu-dark { --bs-dropdown-bg:#151522; --bs-dropdown-link-color:#dfe6ff; }
.site-header .dropdown-menu-dark .dropdown-item .bi { opacity:.9; }
.site-header .avatar-24 { width:24px; height:24px; border-radius:50%; object-fit:cover; background:#1a1a1a; }

/* Buttons */
.btn-primary {
  --bs-btn-color:#000; --bs-btn-bg:var(--nuke); --bs-btn-border-color:var(--nuke);
  --bs-btn-hover-color:#000; --bs-btn-hover-bg:#ffd23a; --bs-btn-hover-border-color:#ffd23a;
  --bs-btn-active-bg:#ffc400; --bs-btn-active-border-color:#ffc400;
  --bs-btn-disabled-bg:#bfbfbf; --bs-btn-disabled-border-color:#bfbfbf;
  font-weight:600; border-radius:999px;
}
.btn-outline-primary {
  --bs-btn-color:var(--nuke); --bs-btn-border-color:var(--nuke);
  --bs-btn-hover-color:#000; --bs-btn-hover-bg:var(--nuke); --bs-btn-hover-border-color:var(--nuke);
  border-radius:999px; font-weight:600;
}
.btn-nuke{
  --bs-btn-color:#000; --bs-btn-bg:var(--nuke); --bs-btn-border-color:transparent;
  --bs-btn-hover-bg:#ffd23a; --bs-btn-hover-border-color:transparent; --bs-btn-active-bg:#ffc400;
  border-radius:999px; padding:.9rem 1.4rem; font-weight:700;
  box-shadow:0 12px 30px rgba(245,196,0,.25); transition:box-shadow .25s ease, transform .08s ease;
}
.btn-nuke:hover{ box-shadow:0 18px 40px rgba(245,196,0,.35), 0 0 0 6px var(--ring-2); }
.btn-nuke:active{ transform:translateY(1px); }
.btn-ghost{
  background:transparent; border:1px solid rgba(255,255,255,.18); color:var(--fg);
  border-radius:999px; padding:.9rem 1.4rem; font-weight:600;
}
.btn-ghost:hover{ border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.03); }
.btn-outline-eclipse{
  --bs-btn-color:var(--ash); --bs-btn-border-color:rgba(245,196,0,.45);
  --bs-btn-hover-color:#000; --bs-btn-hover-bg:var(--nuke); --bs-btn-hover-border-color:transparent;
  border-radius:999px; padding:.9rem 1.4rem; font-weight:600; box-shadow:inset 0 0 0 1px rgba(245,196,0,.25);
}

/* Card */
.veil{
  position:relative; border-radius:1.25rem; padding:clamp(2rem,4vw,4rem);
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.45));
  box-shadow:0 18px 60px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(8px) saturate(120%);
}

/* Typography & misc */
.tagline{ color:var(--ash); letter-spacing:.12em; text-transform:uppercase; opacity:.9; }
.divider{height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);}
.toast.bg-success{ background:var(--ok)!important; }
.toast.bg-warning{ background:var(--warn)!important; color:#131313!important; }
.toast.bg-danger{ background:var(--err)!important; }
#toastStackWrap{ z-index: 20000 !important; } /* sempre sopra modale/backdrop */

.offcanvas.text-bg-dark{
  background:linear-gradient(180deg, #0f1016, #0a0b10);
  border-left:1px solid rgba(245,196,0,.15); box-shadow:-24px 0 50px rgba(0,0,0,.6);
}
.list-group-item.bg-transparent{ border-color:rgba(255,255,255,.06)!important; }
.badge.bg-secondary{ background:rgba(255,255,255,.12)!important; color:var(--ash); }

img[alt="Progetto311"]{ filter:drop-shadow(0 0 0 rgba(245,196,0,0)); transition:filter .25s ease; }
img[alt="Progetto311"]:hover{ filter:drop-shadow(0 0 18px rgba(245,196,0,.25)); }

footer a{ color:var(--ash); } footer a:hover{ color:var(--nuke); }
:focus-visible{ outline:2px solid var(--nuke); outline-offset:2px; border-radius:6px; }

/* Mobile */
@media (max-width:575.98px){
  .cta .btn{ width:100%; }
  #pollCanvas{ --bs-offcanvas-width: 100vw; }
  #formSuggest .row-gap-2 > *{ width:100%; }
}
#formSuggest input[type="text"]{ min-width:0; }
/* ---- Card 311 (stesso stile delle "Elementi") ---- */
.card311{
  position:relative;
  width:100%;
  max-width:360px;              /* anteprima */
  aspect-ratio:63/88;
  margin-inline:auto;
}
.card311 .art{
  position:absolute; inset:0;
  left:12.5%; right:12.5%;
  top:15%; width:75%; height:78%;
  object-fit:cover; z-index:1; background:#1a1a1a;
}
.card311 .frame{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  pointer-events:none; z-index:3;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
.card311 .title{
  position:absolute; z-index:4;
  left:12.5%; right:12.5%;
  top:5.5%; height:8.2%;
  display:flex; align-items:center; justify-content:center;
  padding:0 .35rem;
  font-family:'Unbounded',system-ui,sans-serif;
  font-weight:800; letter-spacing:.2px;
  font-size:clamp(12px,2.1vw,18px);
  line-height:1.05; text-align:center;
  color:#2b1d06; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card311 .desc{
  position:absolute; z-index:4;
  left:13%; right:13%;
  bottom:5%; height:16%;
  padding:.3rem .45rem;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
  font-family:'Unbounded',system-ui,sans-serif;
  font-weight:400; font-size:clamp(11px,1.9vw,15px);
  line-height:1.15; text-align:center; color:#2b1d06;
  hyphens:auto; word-break:break-word;
}

/* ---- Flip 3D per lo sblocco ---- */
.flip-311{
  perspective:1000px;
}
.flip-311 .inner{
  position:relative;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.flip-311 .face{
  backface-visibility:hidden;
}
.flip-311 .face.front{
  transform:rotateY(0);
}
.flip-311 .face.back{
  position:absolute; inset:0;
  transform:rotateY(180deg);
}
.flip-311.showing .inner{
  transform:rotateY(180deg);
}
/* --- Modale unlock: centra e dai una misura coerente al flip --- */
#unlockModal .modal-body{
  display:flex;
  justify-content:center;
}

/* host con altezza minima sensata (verrà sovrascritto dal flip) */
#unlockHost{ min-height:260px; }

/* Contenitore flip: stessa larghezza ovunque, rapporto carta */
.flip-311{
  width: min(92vw, 360px);
  margin-inline: auto;
  perspective: 1000px;
}
.flip-311 .inner{
  position: relative;
  width: 100%;
  aspect-ratio: 63 / 88;              /* IMPORTANTISSIMO: blocca le proporzioni */
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

/* Le due facce occupano esattamente il “rettangolo carta” */
.flip-311 .face{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
}

/* FRONT: l’immagine di retro riempie perfettamente */
.flip-311 .face.front img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 63 / 88;
  display:block;
}

/* BACK: la tua card311 deve stare alla stessa misura del flip */
.flip-311 .face.back .card311{
  width: 100%;
  max-width: none;        /* disattiva il max-width:360px interno */
  aspect-ratio: 63 / 88;
}

/* L’animazione */
.flip-311 .face.front{ transform: rotateY(0); }
.flip-311 .face.back { transform: rotateY(180deg); }
.flip-311.showing .inner{ transform: rotateY(180deg); }

/* (opzionale) po’ di “respiro” sotto alla card nella modale */
#unlockModal .modal-body{ padding-block: 12px; }
/* ==== ADMIN EMBED (tema scuro, compatibile con il sito) ==== */
.admin-embed {
  --adm-bg: #0f1016;
  --adm-panel: #12131a;
  --adm-border: rgba(255,255,255,.12);
  --adm-text: #e7e8ef;
  --adm-muted: #a3a7b4;
  --adm-input-bg: #151723;
  --adm-input-bd: rgba(255,255,255,.14);
  --adm-input-focus: rgba(245,196,0,.45);
}

/* card / pannelli */
.admin-embed .card {
  background: var(--adm-panel) !important;
  border: 1px solid var(--adm-border) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.admin-embed .card-title { color: var(--adm-text); }

/* tipografia */
.admin-embed, .admin-embed .table, .admin-embed label,
.admin-embed .form-label, .admin-embed .form-check-label {
  color: var(--adm-text);
}
.admin-embed .text-secondary { color: var(--adm-muted) !important; }

/* input/select/textarea */
.admin-embed .form-control,
.admin-embed .form-select {
  background: var(--adm-input-bg);
  border-color: var(--adm-input-bd);
  color: var(--adm-text);
}
.admin-embed .form-control:focus,
.admin-embed .form-select:focus {
  border-color: var(--adm-input-focus);
  box-shadow: 0 0 0 .2rem rgba(245,196,0,.15);
}
.admin-embed .form-check-input {
  background: var(--adm-input-bg);
  border-color: var(--adm-input-bd);
}

/* bottoni */
.admin-embed .btn-outline-light{ border-color: var(--adm-border); }
.admin-embed .btn-outline-danger{ border-color: #ff4d4d; color:#ff4d4d; }
.admin-embed .btn-outline-danger:hover{ background:#ff4d4d; color:#000; }

/* tabella */
.admin-embed .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--adm-text);
  --bs-table-border-color: var(--adm-border);
}
.admin-embed .table thead th {
  position: sticky; top: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  backdrop-filter: blur(4px);
  z-index: 1;
}
.admin-embed .table td, .admin-embed .table th { vertical-align: middle; }

.admin-embed .table .text-truncate { max-width: 320px; }

/* badge/link colonna */
.admin-embed .badge.text-bg-secondary{ background: rgba(255,255,255,.15) !important; }
.admin-embed .badge.text-bg-success{ background: #12c26a !important; }

/* layout */
.admin-embed .container, .admin-embed .card-body { padding: 1rem; }
.admin-embed .row.g-3 { row-gap: 1rem; }
/* wrapper scrollabile */
.admin-embed .admin-table-wrap{
  overflow:auto;              /* abilita scroll se serve */
  -webkit-overflow-scrolling: touch;
}

/* evita che la tabella si restringa troppo: se serve si scrolla */
.admin-embed .admin-table{
  min-width: 980px;           /* puoi alzare/abbassare (es. 1024px) */
  width: 100%;
}

/* larghezze utili alle ultime colonne */
.admin-embed .admin-table .col-links{   width: 120px;   white-space: nowrap; }
.admin-embed .admin-table .col-actions{ width: 180px;   white-space: nowrap; }

/* header sticky resta dentro il wrapper scrollabile */
.admin-embed .admin-table thead th{
  position: sticky; top: 0; z-index: 2;
}

/* (opzionale) riduci padding così entra più contenuto */
.admin-embed .card-body{ padding: .75rem; }
.admin-embed .table td, .admin-embed .table th{ padding: .5rem .6rem; }
.admin-embed .table .text-truncate{ max-width: 320px; }
/* Switch "Pubblicato" in admin embed */
.admin-embed .form-check-input{
  background-color:#111;          /* fondo OFF */
  border-color:#666;
  width: 3rem; height: 1.5rem;    /* dimensioni comode */
}
.admin-embed .form-check-input:focus{
  box-shadow:0 0 0 .2rem rgba(245,196,0,.25);
}
.admin-embed .form-check-input:checked{
  background-color:#ffd23a;       /* ON giallo (coerente col tema) */
  border-color:#ffd23a;
}
.admin-embed .form-check-input[type="checkbox"]{
  accent-color:#ffd23a;           /* fallback per browser che usano accent-color */
}
/* --- Ultima storia: neutralizza la ratio Bootstrap solo per questo wrapper --- */
#latestThumbWrap.ratio::before {           /* rimuove il padding che impone l'altezza */
  padding-top: 0 !important;
  content: "" !important;
  display: block;
}

#latestThumbWrap {
  aspect-ratio: auto !important;          /* ignora ratio-16x9 */
  overflow: hidden;
  border-radius: 8px;
  height: 64px;                           /* altezza iniziale (verrà ricalcolata) */
  margin-top: -0.25rem;                   /* alza il blocco sotto l’ID */
}

/* il figlio della .ratio in BS è absolute; qui lo rimettiamo nel flow */
#latestThumbWrap > img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  object-fit: cover;
  object-position: top;                   /* mostra la parte superiore */
}
/* === TOAST: posizione e wrapping testo === */
#toastStack, #pollToastStack{
  position: fixed;
  top: 1rem; right: 1rem; left: auto;
  z-index: 20000;
  display: flex; flex-direction: column;
  gap: .5rem; align-items: flex-end;
  max-width: min(92vw, 520px);
}

#toastStack .toast,
#pollToastStack .toast{
  width: auto;                    /* no w-100 */
  max-width: min(92vw, 520px);
  white-space: normal;
  word-break: break-word;
}

.toast .toast-body{
  white-space: normal;
  word-break: break-word;
}

/* opzionale: un filo di margine dentro l’offcanvas */
.offcanvas.show #pollToastStack{ right: .75rem; }

@media (max-width:575.98px){
  #toastStack .toast, #pollToastStack .toast{ max-width: 96vw; }
}
/* NAVBAR LINK OVERRIDE (GIALLO 3:11) */
.nav-link {
  color: #F5C400 !important; /* giallo brand */
  transition: color 0.2s ease-in-out;
}

.nav-link:hover,
.nav-link:focus {
  color: #FFE37A !important; /* versione più chiara al hover */
}

.nav-link.active,
.nav-link.show {
  color: #FFF8DC !important; /* quasi bianco per enfatizzare attivo */
  font-weight: 600;
}

/* --- TAB ATTIVE: testo nero e sfondo giallo --- */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  color: #000 !important;                 /* testo nero leggibile */
  background-color: #F5C400 !important;   /* sfondo giallo brand */
  border-color: #F5C400 !important;       /* bordo in tono con lo sfondo */
  font-weight: 600;
}