/* ============================================================
   IL BLOG DEL SALOTTO — stile "cartoncino pastello"
   ------------------------------------------------------------
   Un paesaggio di carta ritagliata: cielo a pastello, colline e nuvole
   di cartoncino sovrapposte, con qualche tocco futuristico (anelli
   luminosi, un piccolo dirigibile, capsule arrotondate). Le schede
   sono cartoncini spessi: bordo morbido, ombra netta sotto (lo spessore)
   e una leggera grana di carta.

   Il blog ha un solo tema, quello scuro: il crepuscolo lilla con le
   stelle (lo imposta la pagina stessa con data-tema="scuro"; decisione di
   Sophannit, 22 settembre 2026). I colori "chiari" qui sotto restano solo
   come base. Le schede restano chiare: si legge su carta.

   Prestazioni: niente sfocature dietro gli elementi, niente sfondi
   "fixed". Il paesaggio e' un solo SVG fermo in cima alla pagina.
   ============================================================ */

:root,
html[data-tema="chiaro"]{
  --cielo-1:#BFE0F2; --cielo-2:#F2D6E3; --cielo-3:#FBE7D3;
  --prato-1:#CDEBD3; --prato-2:#A9D8C0; --prato-3:#7FBFA8;
  --fondo:#FBF3E8; --fondo-2:#F4E8D8;
  --carta:#FFFCF6; --carta-2:#F7EFE2; --spessore:#E6D6BE; --spessore-2:#D8C4A6;
  --inch:#3A3350; --inch-2:#6A6282; --filo:#E8DCCB;
  --nuvoletta:#FFF8EC;
  --menta:#BDE6D3; --menta-s:#2F7D62;
  --pesca:#F8CDB5; --pesca-s:#A4512C;
  --cielo:#C4DDF6; --cielo-s:#335F96;
  --lilla:#DCD0F3; --lilla-s:#62499E;
  --burro:#F8E6A6; --burro-s:#7A5E0C;
  --rosa:#F5C8D3; --rosa-s:#A23A5A;
  --teal:#146B77; --teal-2:#1A8290;
  --barra:rgba(251,243,232,0.97); --barra-testo:#4D4666;
  --ombra-morbida:0 16px 30px -18px rgba(58,51,80,0.35);
  --grana:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
html[data-tema="scuro"]{
  --cielo-1:#262A52; --cielo-2:#4A3C72; --cielo-3:#8A6386;
  --prato-1:#4C6E86; --prato-2:#3C5A74; --prato-3:#2D4760;
  --fondo:#232443; --fondo-2:#1C1D37;
  --carta:#FBF5EA; --carta-2:#F1E7D6; --spessore:#B9A98E; --spessore-2:#8E7F68;
  --filo:#E3D6C2;
  --barra:rgba(29,30,56,0.97); --barra-testo:#D9D2EE;
  --ombra-morbida:0 18px 34px -16px rgba(0,0,0,0.6);
}
html[data-tema="scuro"] .i18n-sel,
html[data-tema="scuro"] .i18n-panel{
  --card:#2B2C50; --line:#44456E; --bg-alt:#33345A;
  --ink:#F1ECFA; --ink-soft:#C6BEDD; --primary:#9ED8DA;
}

/* style.css ha html,body{height:100%}: la barra sticky se ne andrebbe
   dopo il primo schermo (vedi salotto-micura.md) */
html, body{height:auto;}
body{min-height:100vh;}
html{background:var(--fondo); scroll-padding-top:76px;}
body{
  font-family:var(--sans); color:var(--inch); line-height:1.6;
  background:var(--fondo) var(--grana);
}
html[data-tema="scuro"] body{color:#F1ECFA;}
body.bloccato{overflow:hidden;}
:focus-visible{outline:3px solid #E7A33E; outline-offset:3px; border-radius:6px;}
img{max-width:100%;}

/* ---------- barra in alto ---------- */
.topbar{position:sticky; top:0; z-index:60; background:var(--barra); border-bottom:2px solid var(--spessore);}
html[data-tema="scuro"] .topbar{border-bottom-color:#3B3C66;}
.topbar-inner{max-width:1120px; margin:0 auto; padding:12px 28px; display:flex; align-items:center; gap:14px;}
.topbar-logo{display:block; line-height:0;}
.topbar-logo img{height:30px; width:auto; display:block;}
html[data-tema="scuro"] .topbar-logo img{filter:brightness(1.45) saturate(0.8);}
.topbar-destra{display:flex; align-items:center; gap:10px; margin-left:auto;}
.back-link{display:inline-flex; align-items:center; gap:7px; font-size:0.88rem; font-weight:700; color:var(--barra-testo);}
.back-link:hover{color:var(--teal);}
html[data-tema="scuro"] .back-link:hover{color:#9ED8DA;}
.back-link svg{width:17px; height:17px;}
.tema-btn{
  display:inline-flex; align-items:center; gap:7px; border:2px solid var(--spessore); background:var(--carta);
  color:#4D4666; border-radius:999px; padding:6px 13px 6px 10px; cursor:pointer; font:800 0.8rem var(--sans);
  box-shadow:0 2px 0 var(--spessore);
}
.tema-btn svg{width:16px; height:16px;}
.tema-btn .icona-sole{display:none;}
html[data-tema="scuro"] .tema-btn .icona-sole{display:block;}
html[data-tema="scuro"] .tema-btn .icona-luna{display:none;}
@media (max-width:560px){
  .topbar-inner{padding:10px 14px; gap:8px;}
  .tema-btn{padding:7px;} .tema-btn .tema-etichetta{display:none;}
  .back-link span{display:none;}
}

/* ---------- elementi di carta ---------- */
.cartone{
  background:var(--carta) var(--grana); color:var(--inch);
  border-radius:22px; border:1.5px solid var(--filo);
  box-shadow:0 5px 0 var(--spessore), 0 6px 0 1px var(--spessore-2), var(--ombra-morbida);
}
.btn-carta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:2px solid var(--spessore-2); background:var(--carta); color:var(--inch);
  border-radius:999px; padding:10px 20px; font:800 0.9rem var(--sans); cursor:pointer;
  box-shadow:0 3px 0 var(--spessore-2); transition:transform .12s ease, box-shadow .12s ease;
  text-decoration:none;
}
.btn-carta:hover{transform:translateY(-1px); box-shadow:0 4px 0 var(--spessore-2);}
.btn-carta:active{transform:translateY(2px); box-shadow:0 1px 0 var(--spessore-2);}
.btn-carta.pieno{background:var(--teal); color:#fff; border-color:#0E4E57; box-shadow:0 3px 0 #0E4E57;}
.btn-carta.pieno:hover{background:var(--teal-2);}
.btn-carta.pericolo{background:#D9546A; color:#fff; border-color:#9E3246; box-shadow:0 3px 0 #9E3246;}
.btn-carta:disabled{opacity:.6; cursor:default; transform:none;}
.btn-carta svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}

/* ---------- il paesaggio in cima ---------- */
.cielo{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg, var(--cielo-1) 0%, var(--cielo-2) 55%, var(--cielo-3) 100%);
  padding:56px 24px 150px; text-align:center;
}
.paesaggio{position:absolute; inset:auto 0 0 0; width:100%; height:100%; z-index:-1; pointer-events:none;}
.paesaggio .nuvola{animation:vento 26s ease-in-out infinite alternate;}
.paesaggio .nuvola.lenta{animation-duration:38s;}
.paesaggio .dirigibile{animation:dondolo 7s ease-in-out infinite;}
.paesaggio .stelle{opacity:0; transition:opacity .6s ease;}
html[data-tema="scuro"] .paesaggio .stelle{opacity:1;}
html[data-tema="scuro"] .paesaggio .sole{fill:#FBE9B7;}
/* di sera le nuvole diventano lilla scuro: il titolo chiaro ci passa sopra e deve restare leggibile */
html[data-tema="scuro"] .paesaggio .nuvola{fill:#4A4170; opacity:.85;}
.paesaggio .finestrella{fill:#FFE39A;}
html[data-tema="scuro"] .paesaggio .finestrella{fill:#FFD36A; filter:drop-shadow(0 0 6px #FFD36A);}
@keyframes vento{from{transform:translateX(-18px);} to{transform:translateX(22px);}}
@keyframes dondolo{0%,100%{transform:translate(0,0) rotate(-1deg);} 50%{transform:translate(8px,-6px) rotate(1.5deg);}}
.cielo-testo{position:relative; max-width:720px; margin:0 auto;}
.occhiello{
  display:inline-flex; align-items:center; gap:8px; font-size:0.72rem; font-weight:800; letter-spacing:0.16em;
  text-transform:uppercase; color:#4D4666; background:rgba(255,252,246,0.8); border:1.5px solid var(--filo);
  border-radius:999px; padding:6px 14px; box-shadow:0 2px 0 var(--spessore);
}
.cielo h1{
  font-family:var(--serif); font-weight:600; font-size:clamp(2.3rem, 6vw, 3.8rem); line-height:1.05;
  margin:18px 0 12px; color:#2F2848; letter-spacing:-0.01em;
  text-shadow:0 2px 0 rgba(255,255,255,0.7);
}
html[data-tema="scuro"] .cielo h1{color:#FBF5EA; text-shadow:0 2px 0 rgba(0,0,0,0.25);}
.cielo p.sotto{font-size:1.08rem; color:#4D4666; max-width:560px; margin:0 auto 24px;}
html[data-tema="scuro"] .cielo p.sotto{color:#E7E0F5;}
.cielo-azioni{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
@media (max-width:600px){ .cielo{padding:40px 16px 118px;} }

/* ---------- contenitore ---------- */
.stanza-blog{max-width:1120px; margin:-70px auto 0; padding:0 24px 80px; position:relative; z-index:2;}
@media (max-width:600px){ .stanza-blog{padding:0 12px 60px; margin-top:-60px;} }

/* invito alle notifiche */
.invito-notifiche{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 20px; margin:0 0 22px;}
.invito-notifiche p{flex:1; min-width:220px; font-size:0.92rem; color:var(--inch-2); margin:0;}
.invito-notifiche p b{color:var(--inch); display:block;}
.campanella{width:42px; height:42px; border-radius:50%; background:var(--burro); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 3px 0 #D9C06A;}
.campanella svg{width:22px; height:22px; fill:none; stroke:var(--burro-s); stroke-width:2; stroke-linejoin:round;}
.invito-azioni{display:flex; gap:8px; flex-wrap:wrap;}

/* barra degli strumenti */
.strumenti{padding:16px 18px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:26px;}
.filtri{display:flex; flex-wrap:wrap; gap:6px;}
.filtro{
  border:2px solid transparent; background:var(--carta-2); color:var(--inch-2); border-radius:999px;
  padding:7px 14px; font:800 0.84rem var(--sans); cursor:pointer;
}
.filtro[aria-pressed="true"]{background:var(--inch); color:#fff;}
.filtro[data-f="articolo"][aria-pressed="true"]{background:var(--cielo-s);}
.filtro[data-f="pensiero"][aria-pressed="true"]{background:var(--pesca-s);}
.filtro[data-f="domanda"][aria-pressed="true"]{background:var(--menta-s);}
.filtro[data-f="redazione"][aria-pressed="true"]{background:var(--teal);}
.cerca{position:relative; flex:1; min-width:180px;}
.cerca svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; fill:none; stroke:var(--inch-2); stroke-width:2;}
.cerca input{
  width:100%; border:2px solid var(--filo); background:#fff; border-radius:999px; padding:9px 14px 9px 38px;
  font:500 0.92rem var(--sans); color:var(--inch); color-scheme:light;
}
.cerca input:focus{outline:none; border-color:#E7A33E;}
.ordina select{
  border:2px solid var(--filo); background:#fff; border-radius:999px; padding:8px 12px; color:var(--inch);
  font:700 0.86rem var(--sans); cursor:pointer; color-scheme:light;
}
.ordina select option{background:#FFFCF6; color:#3A3350;}

/* ---------- le schede del blog ---------- */
/* colonne "a muratura": le schede si impilano in colonne indipendenti,
   senza i buchi che lascerebbe una griglia a righe fisse (vedi blog.js) */
.bacheca{display:flex; gap:22px; align-items:flex-start;}
.bacheca > .vuoto{flex:1;}
.colonna{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:26px;}
[hidden]{display:none !important;}
.scheda{
  display:block; margin:0; padding:20px 20px 16px; position:relative;
  transition:transform .15s ease, box-shadow .15s ease; cursor:pointer;
}
.scheda:hover{transform:translateY(-3px) rotate(-.25deg);}
.scheda:nth-child(3n+2):hover{transform:translateY(-3px) rotate(.3deg);}
.scheda:focus-within{outline:3px solid #E7A33E; outline-offset:3px;}
.scheda-testa{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px;}
.scheda h2{font-family:var(--serif); font-weight:600; font-size:1.3rem; line-height:1.25; margin:0 0 8px; overflow-wrap:anywhere;}
.scheda h2 a{color:inherit; text-decoration:none;}
.scheda h2 a::after{content:""; position:absolute; inset:0; border-radius:22px;}
.scheda .estratto{color:var(--inch-2); font-size:0.94rem; line-height:1.6; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;}
.scheda.tipo-pensiero .estratto{font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--inch); -webkit-line-clamp:7;}
.scheda.tipo-pensiero{background-color:var(--nuvoletta);}
.scheda.tipo-domanda h2::before{content:"?"; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; margin-right:8px; border-radius:50%; background:var(--menta); color:var(--menta-s); font-family:var(--sans); font-weight:900; font-size:1rem; vertical-align:3px; box-shadow:0 2px 0 #97CDB3;}
.scheda-foto{margin:-4px -4px 14px; border-radius:16px; overflow:hidden; border:1.5px solid var(--filo); background:var(--carta-2);}
.scheda-foto img{display:block; width:100%; height:auto; max-height:260px; object-fit:cover;}
.scheda-foto figcaption{font-size:0.78rem; color:var(--inch-2); padding:6px 10px 8px; font-style:italic;}
.scheda-piede{display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:12px; border-top:1.5px dashed var(--filo); position:relative; z-index:1;}
.chi{display:flex; align-items:center; gap:8px; min-width:0; flex:1;}
.chi-testo{display:flex; flex-direction:column; line-height:1.25; min-width:0;}
.chi-nome{font-weight:800; font-size:0.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.chi-quando{font-size:0.74rem; color:var(--inch-2);}
.conta-risposte{display:inline-flex; align-items:center; gap:5px; font-size:0.84rem; font-weight:800; color:var(--inch-2);}
.conta-risposte svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2;}
.risponde-a{font-size:0.8rem; color:var(--inch-2); margin:-4px 0 10px; position:relative; z-index:1;}
.risponde-a a{color:var(--cielo-s); font-weight:700;}

/* etichette */
.chip-tipo{
  display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:4px 11px 4px 8px;
  font-size:0.72rem; font-weight:900; letter-spacing:0.06em; text-transform:uppercase;
}
.chip-tipo svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
.tipo-articolo .chip-tipo, .chip-tipo.tipo-articolo{background:var(--cielo); color:var(--cielo-s);}
.chip-tipo.tipo-pensiero{background:var(--pesca); color:var(--pesca-s);}
.chip-tipo.tipo-domanda{background:var(--menta); color:var(--menta-s);}
.ruolo{display:inline-block; font-size:0.66rem; font-weight:900; letter-spacing:0.05em; text-transform:uppercase; border-radius:6px; padding:2px 7px; vertical-align:1px;}
.ruolo-cliente{background:var(--burro); color:var(--burro-s);}
.ruolo-badante{background:var(--lilla); color:var(--lilla-s);}
.ruolo-babysitter{background:var(--rosa); color:var(--rosa-s);}
.ruolo-redazione{background:var(--teal); color:#fff;}
.nascosto-nota{display:inline-block; font-size:0.72rem; font-weight:800; color:#9E3246; background:#FBE0E5; border-radius:6px; padding:2px 8px;}

/* avatar */
.avatar{
  width:36px; height:36px; border-radius:50%; background:var(--av, var(--lilla)); color:#3A3350;
  display:inline-flex; align-items:center; justify-content:center; font-weight:900; font-size:0.82rem; flex-shrink:0;
  box-shadow:0 2px 0 rgba(58,51,80,0.18); border:2px solid #fff;
}
.avatar.grande{width:48px; height:48px; font-size:1rem;}
.avatar-redazione{background:#fff; padding:1px;}
.avatar-redazione img{width:100%; height:100%; border-radius:50%;}

/* il cuore: il marchio di MiCURA */
.cuore{
  display:inline-flex; align-items:center; gap:6px; border:2px solid var(--filo); background:#fff;
  border-radius:999px; padding:3px 11px 3px 4px; cursor:pointer; font:900 0.86rem var(--sans); color:var(--inch-2);
  position:relative; z-index:2; box-shadow:0 2px 0 var(--filo);
}
.cuore img{width:26px; height:26px; border-radius:50%; filter:grayscale(1) opacity(.55); transition:filter .2s ease, transform .2s ease;}
.cuore:hover img{filter:grayscale(.3) opacity(.9);}
.cuore.acceso{border-color:#8FD3D8; background:#EAF8F8; color:var(--teal);}
.cuore.acceso img{filter:none;}
.cuore.pop img{animation:pop .45s cubic-bezier(.3,1.6,.5,1);}
@keyframes pop{0%{transform:scale(.6);} 60%{transform:scale(1.25) rotate(-8deg);} 100%{transform:scale(1);}}

.vuoto{padding:40px 24px; text-align:center;}
.vuoto h2{font-family:var(--serif); font-size:1.5rem; margin-bottom:6px;}
.vuoto p{color:var(--inch-2); margin-bottom:18px;}
.altri{display:flex; justify-content:center; margin:6px 0 30px;}

/* regole */
.regole{padding:20px 24px; margin-top:26px;}
.regole summary{cursor:pointer; font-weight:900; font-size:1rem; list-style:none; display:flex; align-items:center; gap:10px;}
.regole summary::-webkit-details-marker{display:none;}
.regole summary::after{content:"+"; margin-left:auto; font-size:1.3rem; color:var(--inch-2);}
.regole[open] summary::after{content:"–";}
.regole ul{margin:14px 0 4px 1.1em; color:var(--inch-2); font-size:0.92rem;}
.regole li{margin-bottom:6px;}
.regole p{color:var(--inch-2); font-size:0.86rem; margin-top:10px;}

/* ============================================================
   IL POST APERTO (blog-post.html)
   ============================================================ */
.cielo.basso{padding:90px 24px 170px;}
.post-pagina{max-width:780px; margin:-80px auto 0; padding:0 20px 80px; position:relative; z-index:2;}
@media (max-width:600px){ .post-pagina{padding:0 10px 60px;} .cielo.basso{padding:50px 16px 130px;} }
.torna-blog{display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:0.9rem; color:#4D4666; background:rgba(255,252,246,.85); border:1.5px solid var(--filo); border-radius:999px; padding:6px 14px; box-shadow:0 2px 0 var(--spessore);}
.torna-blog svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4;}
.post{padding:34px 40px 26px;}
@media (max-width:600px){ .post{padding:24px 18px 20px;} }
.post-titolo{font-family:var(--serif); font-weight:600; font-size:clamp(1.8rem, 4.6vw, 2.6rem); line-height:1.15; margin:14px 0 16px; overflow-wrap:anywhere;}
.post.tipo-pensiero .post-titolo{font-style:italic;}
.post-autore{display:flex; align-items:center; gap:12px; padding-bottom:18px; border-bottom:1.5px dashed var(--filo); margin-bottom:22px;}
.post-autore .chi-nome{font-size:0.98rem;}
.post-corpo{font-family:var(--serif); font-size:1.12rem; line-height:1.8; overflow-wrap:anywhere;}
.post-corpo p{margin:0 0 1em;}
.post-corpo strong{font-weight:700;}
.post.tipo-pensiero .post-corpo{font-size:1.25rem; font-style:italic;}
.post-h{font-family:var(--serif); font-size:1.4rem; font-weight:600; margin:1.5em 0 .5em; line-height:1.3;}
.figura{margin:1.6em 0; background:#fff; padding:10px 10px 4px; border-radius:14px; border:1.5px solid var(--filo); box-shadow:0 4px 0 var(--spessore); transform:rotate(-.4deg);}
.figura:nth-of-type(even){transform:rotate(.5deg);}
.figura img{display:block; width:100%; height:auto; border-radius:8px;}
.figura figcaption{font-family:var(--sans); font-size:0.86rem; color:var(--inch-2); padding:8px 4px 6px; line-height:1.45;}
.post-azioni{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:22px; padding-top:16px; border-top:1.5px dashed var(--filo);}
.link-azione{border:none; background:none; font:800 0.84rem var(--sans); color:var(--inch-2); cursor:pointer; padding:6px 8px; border-radius:8px;}
.link-azione:hover{background:var(--carta-2); color:var(--inch);}
.link-azione.rosso{color:#B23D52;}
.spazio{flex:1;}
.post-nota{font-size:0.82rem; color:var(--inch-2); margin-top:10px;}
.banner-nascosto{background:#FBE0E5; color:#7A2437; border:1.5px solid #F0B7C3; border-radius:14px; padding:12px 16px; margin-bottom:18px; font-size:0.9rem; font-weight:600;}

.collegati{padding:20px 24px; margin-top:24px;}
.collegati h2{font-size:1rem; font-weight:900; margin-bottom:10px;}
.collegati ul{list-style:none; margin:0; padding:0;}
.collegati li{padding:10px 0; border-top:1.5px dashed var(--filo); display:flex; gap:10px; align-items:center;}
.collegati li:first-child{border-top:0;}
.collegati a{color:var(--inch); font-weight:800; text-decoration:none;}
.collegati a:hover{color:var(--teal);}
.collegati small{color:var(--inch-2); display:block; font-weight:500;}

/* risposte */
.risposte-titolo{font-family:var(--serif); font-size:1.5rem; font-weight:600; margin:42px 6px 16px; display:flex; align-items:baseline; gap:10px;}
html[data-tema="scuro"] .risposte-titolo{color:#FBF5EA;}
.risposte-titolo span{font-family:var(--sans); font-size:0.9rem; font-weight:800; color:var(--inch-2);}
html[data-tema="scuro"] .risposte-titolo span{color:#C6BEDD;}
.risposte{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
.risposta{padding:16px 18px 12px; border-radius:18px;}
.risposta:target{outline:3px solid #E7A33E; outline-offset:3px;}
.risposta.dalla-redazione{border-color:#8FD3D8;}
.risposta-testa{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.risposta-testo{font-size:0.98rem; line-height:1.65; overflow-wrap:anywhere;}
.risposta-testo p{margin:0 0 .6em;}
.risposta-testo p:last-child{margin-bottom:0;}
.cita{border-left:4px solid var(--lilla); background:var(--carta-2); border-radius:0 10px 10px 0; padding:6px 10px; margin:0 0 10px; font-size:0.84rem; color:var(--inch-2);}
.cita b{color:var(--inch);}
.cita a{color:inherit; text-decoration:none;}
.risposta .figura{margin:10px 0 4px; max-width:420px; transform:none;}
.risposta-azioni{display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-top:10px;}

/* scrivere una risposta */
.scrivi-risposta{padding:18px 20px; margin-top:24px;}
.scrivi-risposta h2{font-size:1rem; font-weight:900; margin-bottom:10px;}
.scrivi-risposta textarea{
  width:100%; border:2px solid var(--filo); border-radius:14px; padding:12px 14px; font:500 1rem/1.55 var(--sans);
  color:var(--inch); background:#fff; resize:vertical; min-height:90px; color-scheme:light;
}
.scrivi-risposta textarea:focus{outline:none; border-color:#E7A33E;}
.risposta-citata{display:flex; align-items:flex-start; gap:10px; margin-bottom:10px;}
.risposta-citata .cita{flex:1; margin:0;}
.risposta-strumenti{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:10px;}
.risposta-foto{display:flex; gap:10px; align-items:flex-start; margin-top:10px; flex-wrap:wrap;}
.risposta-foto img{width:120px; height:90px; object-fit:cover; border-radius:10px; border:1.5px solid var(--filo);}
.risposta-foto .campo{flex:1; min-width:200px;}
.bottone-foto{position:relative; overflow:hidden;}
.bottone-foto input{position:absolute; inset:0; opacity:0; cursor:pointer;}
.accedi-per{display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--inch-2);}

/* ============================================================
   FINESTRE: scrittura, conferme, segnalazioni
   ============================================================ */
.finestra-fondo, .scrittura-fondo{
  position:fixed; inset:0; z-index:1100; background:rgba(43,38,72,0.45);
  display:flex; align-items:flex-start; justify-content:center; padding:40px 14px; overflow-y:auto;
}
.finestra{max-width:440px; width:100%; margin:auto; padding:26px 24px 20px;}
.finestra h2{font-family:var(--serif); font-size:1.4rem; font-weight:600; margin-bottom:8px;}
.finestra p{color:var(--inch-2); font-size:0.94rem; margin-bottom:12px;}
.finestra-azioni{display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:14px;}
.motivi{display:flex; flex-direction:column; gap:6px; margin:6px 0 12px;}
.motivi label{display:flex; gap:10px; align-items:center; padding:9px 12px; border:2px solid var(--filo); border-radius:12px; cursor:pointer; font-weight:600; font-size:0.92rem;}
.motivi label:has(input:checked){border-color:#D9546A; background:#FDF0F2;}
.motivi input{accent-color:#D9546A;}
.campo{display:block; margin:10px 0;}
.campo > span{display:block; font-size:0.8rem; font-weight:800; color:var(--inch-2); margin-bottom:5px;}
.campo input, .campo textarea{
  width:100%; border:2px solid var(--filo); border-radius:12px; padding:10px 12px; font:500 0.96rem var(--sans);
  color:var(--inch); background:#fff; color-scheme:light;
}
.campo input:focus, .campo textarea:focus{outline:none; border-color:#E7A33E;}

.scrittura{max-width:760px; width:100%; margin:auto; display:flex; flex-direction:column; max-height:calc(100vh - 40px); padding:0; overflow:hidden;}
.scrittura-testa{display:flex; align-items:center; gap:10px; padding:18px 22px 12px; border-bottom:1.5px dashed var(--filo);}
.scrittura-testa h2{font-family:var(--serif); font-size:1.5rem; font-weight:600; flex:1;}
.chiudi-x{width:38px; height:38px; border-radius:50%; border:2px solid var(--filo); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.chiudi-x svg{width:18px; height:18px; stroke:var(--inch); stroke-width:2.4; fill:none;}
.scrittura-corpo{padding:14px 22px 20px; overflow-y:auto; flex:1;}
.scrittura-piede{display:flex; align-items:center; gap:10px; padding:14px 22px; border-top:1.5px dashed var(--filo); flex-wrap:wrap;}
.firma-anteprima{display:flex; align-items:center; gap:8px; margin-right:auto; font-weight:800; font-size:0.88rem;}
.firma-anteprima .avatar{width:30px; height:30px; font-size:0.72rem;}
.in-risposta{background:var(--cielo); color:var(--cielo-s); border-radius:12px; padding:8px 12px; font-size:0.9rem; margin-bottom:12px;}
.bozza-trovata{background:var(--burro); color:var(--burro-s); border-radius:12px; padding:8px 12px; font-size:0.9rem; margin-bottom:12px;}
.bozza-trovata button{border:none; background:none; font-weight:900; color:inherit; text-decoration:underline; cursor:pointer;}
.errore-scrittura{background:#FBE0E5; color:#7A2437; border-radius:12px; padding:10px 12px; font-weight:700; font-size:0.9rem; margin-bottom:12px;}
.tipi{border:0; padding:0; margin:0 0 6px; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:8px;}
.tipi legend{font-size:0.8rem; font-weight:800; color:var(--inch-2); margin-bottom:6px;}
.tipo-scelta{display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:2px solid var(--filo); border-radius:14px; cursor:pointer; background:#fff;}
.tipo-scelta input{position:absolute; opacity:0; pointer-events:none;}
.tipo-scelta span{font-weight:900;}
.tipo-scelta small{font-size:0.74rem; color:var(--inch-2); line-height:1.35;}
.tipo-scelta:has(input:focus-visible){outline:3px solid #E7A33E; outline-offset:2px;}
.tipo-articolo:has(input:checked){border-color:var(--cielo-s); background:var(--cielo);}
.tipo-pensiero:has(input:checked){border-color:var(--pesca-s); background:var(--pesca);}
.tipo-domanda:has(input:checked){border-color:var(--menta-s); background:var(--menta);}
@media (max-width:560px){
  .tipi{grid-template-columns:1fr;}
  .tipo-scelta{flex-direction:row; align-items:baseline; gap:8px;}
  .scrittura-fondo{padding:0;}
  .scrittura{max-height:100vh; height:100%; border-radius:0;}
}
.blocchi-scrittura{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
.blocco-scr{border:2px solid var(--filo); border-radius:14px; background:#fff; padding:8px 10px 10px;}
.blocco-scr.tipo-immagine{border-style:dashed;}
.blocco-testa{display:flex; align-items:center; justify-content:space-between; font-size:0.72rem; font-weight:900; text-transform:uppercase; letter-spacing:0.08em; color:var(--inch-2); margin-bottom:6px;}
.blocco-az{display:flex; gap:4px;}
.blocco-az button{width:28px; height:28px; border-radius:8px; border:1.5px solid var(--filo); background:var(--carta); cursor:pointer; font-weight:900; color:var(--inch);}
.blocco-az button:disabled{opacity:.35;}
.blocco-scr textarea, .blocco-scr input[type="text"]{width:100%; border:none; background:transparent; font:500 1rem/1.6 var(--sans); color:var(--inch); resize:vertical; padding:4px 2px; color-scheme:light;}
.blocco-scr textarea{min-height:110px; overflow:hidden;}
.blocco-scr.tipo-titoletto input{font-family:var(--serif); font-weight:600; font-size:1.2rem;}
.blocco-scr textarea:focus, .blocco-scr input:focus{outline:none;}
.blocco-scr:focus-within{border-color:#E7A33E;}
.carica-foto{position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:18px; cursor:pointer; text-align:center;}
.carica-foto input{position:absolute; inset:0; opacity:0; cursor:pointer;}
.carica-foto span{background:var(--teal); color:#fff; border-radius:999px; padding:8px 16px; font-weight:800; font-size:0.88rem;}
.carica-foto small{color:var(--inch-2); font-size:0.78rem;}
.carica-in-corso{position:relative; pointer-events:none;}
.carica-in-corso::after{content:"Carico la foto…"; position:absolute; inset:0; background:rgba(255,255,255,.88); border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:900; color:var(--teal);}
.foto-scelta{display:grid; grid-template-columns:160px minmax(0,1fr); gap:12px; align-items:start;}
.foto-scelta img{width:100%; border-radius:10px; aspect-ratio:4/3; object-fit:cover;}
.foto-scelta .campo{margin:0;}
@media (max-width:520px){ .foto-scelta{grid-template-columns:1fr;} }
.aggiungi-blocchi{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:12px;}
.aggiungi-blocchi span{font-size:0.8rem; font-weight:800; color:var(--inch-2);}
.aggiungi-blocchi button{border:2px dashed var(--spessore-2); background:none; border-radius:999px; padding:7px 13px; font:800 0.84rem var(--sans); color:var(--teal); cursor:pointer;}
.aggiungi-blocchi button:hover{border-style:solid; background:#fff;}
.aiuto{font-size:0.8rem; color:var(--inch-2); margin-top:10px;}
.spunta{display:flex; gap:8px; align-items:center; margin-top:12px; font-size:0.92rem; cursor:pointer;}
.spunta input{width:18px; height:18px; accent-color:var(--teal);}

/* avviso in basso */
.avviso-blog{
  position:fixed; left:50%; top:72px; transform:translate(-50%, -260%); z-index:1200;
  background:var(--inch); color:#fff; border-radius:16px; padding:12px 18px; font-weight:700; font-size:0.9rem;
  box-shadow:0 4px 0 #1F1A30; max-width:calc(100vw - 28px); transition:transform .25s ease;
}
.avviso-blog.su{transform:translate(-50%, 0);}
.avviso-blog.errore{background:#B23D52; box-shadow:0 4px 0 #7A2437;}
.avviso-blog a{color:#FFE39A;}

@media (prefers-reduced-motion: reduce){
  .paesaggio .nuvola, .paesaggio .dirigibile, .cuore.pop img{animation:none !important;}
  .scheda, .btn-carta{transition:none;}
  .scheda:hover{transform:none;}
}
.solo-lettori{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ============================================================
   COPERTINA, VIDEO, RISPOSTE CON TITOLO, BADGE
   (aggiunti il 22 settembre 2026)
   ============================================================ */

/* ---------- la copertina del post ---------- */
.copertina-post{
  margin:0 0 18px; background:#fff; padding:8px 8px 4px; border-radius:18px;
  border:1.5px solid var(--filo); box-shadow:0 5px 0 var(--spessore); transform:none;
}
.copertina-post img{display:block; width:100%; height:auto; max-height:460px; object-fit:cover; border-radius:12px;}
.copertina-post figcaption{font-family:var(--sans); font-size:0.86rem; color:var(--inch-2); padding:8px 6px 6px; line-height:1.45;}

/* ---------- i video ---------- */
.figura-video video{
  display:block; width:100%; height:auto; border-radius:8px; background:#000;
  max-height:520px;
}
.video-scelto video{width:100%; max-width:320px; border-radius:10px; background:#000;}

/* ---------- la copertina nel modulo di scrittura ---------- */
.copertina-scr{margin:14px 0 6px;}
.carica-copertina{
  display:flex; align-items:center; gap:14px; cursor:pointer; text-align:left;
  border:2px dashed var(--filo); border-radius:16px; padding:14px 16px; background:var(--carta-2);
}
.carica-copertina:hover{border-color:var(--teal);}
.carica-copertina .cc-icona{
  width:42px; height:42px; border-radius:12px; flex-shrink:0; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.carica-copertina .cc-icona svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2;}
.carica-copertina b{display:block; font-size:0.95rem;}
.carica-copertina small{display:block; color:var(--inch-2); font-size:0.82rem; line-height:1.4;}
.copertina-piena{
  display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start;
  border:1.5px solid var(--filo); border-radius:16px; padding:12px; background:var(--carta-2);
}
.copertina-piena img{width:190px; height:130px; object-fit:cover; border-radius:12px; border:1.5px solid var(--filo);}
.copertina-campi{flex:1; min-width:220px;}
.copertina-az{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; align-items:center;}
.copertina-az label{cursor:pointer;}
.copertina-scr.carica-in-corso{opacity:0.6; pointer-events:none;}

/* ---------- risposte: titolo, sottotitolo, piu' foto ---------- */
.risposta-titolo{font-family:var(--serif, Literata, Georgia, serif); font-size:1.12rem; font-weight:600; margin:8px 0 2px; color:var(--inch);}
.risposta-sottotitolo{font-size:0.94rem; color:var(--inch-2); margin-bottom:6px; font-style:italic;}
.risposta-extra{border:1.5px solid var(--filo); border-radius:12px; padding:8px 12px; margin-bottom:10px; background:var(--carta-2);}
.risposta-extra summary{cursor:pointer; font-weight:800; font-size:0.88rem; color:var(--inch);}
.risposta-extra summary span{font-weight:600; color:var(--inch-2);}
.risposta-extra .campo{margin-top:10px;}
.risposta-foto-voce{display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; width:100%;}
.risposta-foto-voce img{width:120px; height:90px; object-fit:cover; border-radius:10px; border:1.5px solid var(--filo);}
.risposta-foto-voce .campo{flex:1; min-width:200px;}

/* ---------- badge nelle schede ---------- */
.scheda-badge{margin:0 0 8px;}
.risposta-testa .badge-micura-riga{margin-left:6px;}

/* ---------- cuori dorati ---------- */
/* Il cuore di chi ha un badge con l'effetto "cuori d'oro": stessa forma,
   oro invece del grigio. Vedi badge-micura.js. */
.cuore.oro{border-color:#D9B44A; background:linear-gradient(135deg,#FFF6DE,#F6E3AE); color:#6B5010;}
.cuore.oro img{filter:sepia(1) saturate(4) hue-rotate(-18deg) brightness(1.05);}
.cuore.oro:hover img{filter:sepia(1) saturate(5) hue-rotate(-18deg) brightness(1.12);}
.cuore.oro.acceso{border-color:#C9A227;}
.cuore.oro.acceso{background:linear-gradient(135deg,#FFEFC2,#EFD98A); color:#5A4209;}
.cuore.oro .n{font-weight:800;}

/* ---------- il filtro degli articoli selezionati ---------- */
.filtro-selezionati svg{width:14px; height:14px; margin-right:5px; vertical-align:-2px; fill:#F6DE9B; stroke:#A9822A; stroke-width:1.1;}
.filtro-selezionati[aria-pressed="true"] svg{fill:#FFF3D2;}

/* ---------- il pulsante "Condividi" ---------- */
.icona-condividi{
  width:14px; height:14px; vertical-align:-2px; margin-right:5px;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.btn-carta .icona-condividi{width:16px; height:16px;}


/* ============================================================
   I PENSIERI: UNA NUVOLETTA
   ============================================================
   Un pensiero non e' un articolo: si legge come una cosa detta.
   Per questo la sua scheda e' un fumetto — stessa carta, stesso
   spessore delle altre, ma con gli angoli piu' tondi e la codina
   che scende in basso a sinistra.
   La codina e' un quadratino ruotato con due lati bordati: il
   z-index:-1 la manda dietro alla scheda, cosi' si vede solo la
   punta che esce. */
.scheda.tipo-pensiero{border-radius:30px; margin-bottom:22px;}
.scheda.tipo-pensiero h2 a::after{border-radius:30px;}
/* la codina: due triangoli sovrapposti, uno sfalsato di 5px sotto
   l'altro, che rifanno la carta e il suo spessore */
.scheda.tipo-pensiero::before,
.scheda.tipo-pensiero::after{
  content:""; position:absolute; left:38px; width:36px; height:32px;
  clip-path:polygon(0 0, 100% 0, 26% 100%);
}
.scheda.tipo-pensiero::before{bottom:-27px; background:var(--spessore);}
.scheda.tipo-pensiero::after{bottom:-22px; background:var(--nuvoletta);}
/* la stessa nuvoletta nella pagina del post: il testo sta nel fumetto,
   con la codina che punta in su, verso chi l'ha scritto */
.post.tipo-pensiero .post-corpo{
  background:var(--nuvoletta); border:1.5px solid var(--filo); border-radius:26px;
  padding:20px 22px; margin-top:26px; position:relative;
  box-shadow:0 4px 0 var(--spessore);
}
.post.tipo-pensiero .post-corpo::before{
  content:""; position:absolute; left:28px; top:-16px;
  width:34px; height:17px; background:var(--nuvoletta);
  clip-path:polygon(22% 0, 100% 100%, 0 100%);
}
.post.tipo-pensiero .post-corpo > :first-child{margin-top:0;}
.post.tipo-pensiero .post-corpo > :last-child{margin-bottom:0;}

/* ============================================================
   I POST-IT
   ============================================================
   Un biglietto attaccato alla bacheca: carta colorata, nastro in
   alto, angolo piegato in basso a destra, e un po' storto.
   I colori arrivano dall'elemento (--n-carta, --n-piega, --n-inch):
   li scrive blog.js leggendo COLORI_NOTA. */
.scheda.tipo-postit, .post.tipo-postit{
  background:var(--n-carta, #FCEB9B); background-image:var(--grana);
  color:var(--n-inch, #5B4708);
  border:0; border-radius:3px 3px 3px 0;
  box-shadow:0 14px 22px -12px rgba(20,14,0,0.55), 0 2px 5px rgba(20,14,0,0.18);
  padding:26px 22px 16px;
}
.scheda.tipo-postit{transform:rotate(-1.1deg);}
.scheda.tipo-postit:nth-child(even){transform:rotate(1deg);}
.scheda.tipo-postit:hover{transform:rotate(-1.1deg) translateY(-4px); box-shadow:0 20px 26px -12px rgba(20,14,0,0.55), 0 2px 5px rgba(20,14,0,0.18);}
.scheda.tipo-postit:nth-child(even):hover{transform:rotate(1deg) translateY(-4px);}
.scheda.tipo-postit h2 a::after{border-radius:3px;}
/* l'angolo piegato, in basso a destra */
.scheda.tipo-postit::after, .post.tipo-postit::after{
  content:""; position:absolute; right:0; bottom:0; width:28px; height:28px;
  background:linear-gradient(135deg, transparent 50%, var(--n-piega, #E9D169) 50%);
  filter:brightness(0.97);
}
/* il pezzetto di nastro adesivo */
.nota-nastro{
  position:absolute; top:-6px; left:50%; width:82px; height:17px;
  transform:translateX(-50%) rotate(-2deg);
  background:rgba(255,253,246,0.72); border-left:1px solid rgba(255,255,255,0.5); border-right:1px solid rgba(255,255,255,0.5);
  box-shadow:0 1px 3px rgba(20,14,0,0.14);
}
.scheda.tipo-postit .scheda-testa, .post.tipo-postit .scheda-testa{margin-bottom:10px;}
/* sulla carta colorata le etichette gialle stonerebbero: qui sono
   di carta velina, come il conto alla rovescia */
.post.tipo-postit .chip-tipo, .post.tipo-postit .ruolo{
  background:rgba(255,255,255,0.55); color:var(--n-inch, #5B4708); border:1px solid rgba(0,0,0,0.12);
}
.scheda.tipo-postit .ruolo{background:rgba(255,255,255,0.55); color:var(--n-inch, #5B4708);}
.scheda.tipo-postit h2, .post.tipo-postit .post-titolo{color:var(--n-inch, #5B4708);}
.scheda.tipo-postit .estratto{
  font-family:var(--serif); font-size:1.08rem; line-height:1.55;
  color:var(--n-inch, #5B4708); -webkit-line-clamp:8;
}
.scheda.tipo-postit .scheda-piede, .post.tipo-postit .post-azioni{border-top-color:rgba(0,0,0,0.18);}
.scheda.tipo-postit .chi-quando, .scheda.tipo-postit .conta-risposte{color:rgba(0,0,0,0.55);}
.scheda.tipo-postit .scheda-foto{border-color:rgba(0,0,0,0.15); background:rgba(255,255,255,0.4);}
.post.tipo-postit .post-corpo, .post.tipo-postit .chi-quando{color:var(--n-inch, #5B4708);}
.post.tipo-postit .post-corpo{font-family:var(--serif); font-size:1.12rem;}

/* quanto manca alla caduta */
.nota-resta{
  display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:4px 11px 4px 8px;
  font-size:0.72rem; font-weight:900; letter-spacing:0.04em; text-transform:uppercase;
  background:rgba(255,255,255,0.55); color:var(--n-inch, #5B4708); border:1px solid rgba(0,0,0,0.12);
}
.nota-resta svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.nota-resta.poco{background:rgba(255,255,255,0.8); box-shadow:0 0 0 2px rgba(0,0,0,0.06);}
/* l'ultimo giorno il biglietto si stacca gia' un po' */
.scheda.tipo-postit:has(.nota-resta.poco){transform:rotate(-3.4deg);}
.scheda.tipo-postit:has(.nota-resta.poco) .nota-nastro{transform:translateX(-50%) rotate(-11deg); left:38%; opacity:.7;}
/* e quando il tempo finisce, cade davvero */
.scheda.cade{animation:notaCade .9s cubic-bezier(.4,.05,.7,1) forwards; pointer-events:none;}
@keyframes notaCade{
  0%{opacity:1;}
  100%{opacity:0; transform:translateY(120px) rotate(14deg);}
}
.chip-tipo.tipo-postit{background:var(--burro); color:var(--burro-s);}
.tipo-postit:has(input:checked){border-color:var(--burro-s); background:var(--burro);}
.btn-postit svg{fill:none;}

/* il pannello del post-it nel modulo di scrittura */
.nota-scr{
  border:2px dashed var(--filo); border-radius:16px; padding:12px 14px; margin:0 0 12px;
  background:var(--carta-2);
}
.nota-spiega{font-size:0.86rem; color:var(--inch-2); margin:0 0 10px; line-height:1.45;}
.nota-riga{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px;}
.nota-et{font-size:0.8rem; font-weight:800; color:var(--inch-2); min-width:92px;}
.nota-colori{display:flex; gap:8px; flex-wrap:wrap;}
.nota-colore{
  width:34px; height:34px; border-radius:3px 3px 3px 0; cursor:pointer; padding:0;
  border:2px solid rgba(0,0,0,0.12); background:var(--n-carta);
  box-shadow:0 3px 6px -3px rgba(20,14,0,0.5); position:relative;
}
.nota-colore::after{content:""; position:absolute; right:0; bottom:0; width:12px; height:12px;
  background:linear-gradient(135deg, transparent 50%, var(--n-piega) 50%);}
.nota-colore.scelto{border-color:var(--inch); transform:rotate(-4deg); box-shadow:0 6px 10px -4px rgba(20,14,0,0.55);}
.nota-colore:focus-visible{outline:3px solid #E7A33E; outline-offset:2px;}
.nota-giorni{display:flex; gap:8px; flex-wrap:wrap;}
.nota-giorno{
  display:flex; flex-direction:column; align-items:center; line-height:1.1; cursor:pointer;
  border:2px solid var(--filo); background:#fff; color:var(--inch); border-radius:12px; padding:7px 14px;
  font-family:var(--sans);
}
.nota-giorno b{font-size:1.05rem; font-weight:900;}
.nota-giorno small{font-size:0.7rem; color:var(--inch-2);}
.nota-giorno.scelto{border-color:var(--teal); background:var(--menta); color:var(--menta-s);}
.nota-giorno.scelto small{color:inherit;}
.nota-giorno:focus-visible{outline:3px solid #E7A33E; outline-offset:2px;}
@media (max-width:560px){
  .nota-et{min-width:0; width:100%;}
}
@media (prefers-reduced-motion: reduce){
  .scheda.cade{animation:none; opacity:0;}
  .scheda.tipo-postit, .scheda.tipo-postit:nth-child(even), .scheda.tipo-postit:has(.nota-resta.poco){transform:none;}
  .scheda.tipo-postit:hover, .scheda.tipo-postit:nth-child(even):hover{transform:none;}
}


/* ============================================================
   LA LAVAGNA
   ============================================================
   Uno spazio libero: ardesia verde scura dentro una cornice di legno,
   scritta col gesso. Il colore del gesso arriva dall'elemento
   (--gesso) e l'evidenziatore da --evid: li scrive corpoHtml leggendo
   GESSI in blog-comune.js.
   Qui dentro il testo non e' "carta": e' gesso, quindi chiaro su scuro,
   con un alone leggerissimo che lo fa sembrare polveroso. */
:root, html[data-tema="chiaro"], html[data-tema="scuro"]{
  --ardesia:#2B3A33; --ardesia-2:#22302A; --ardesia-filo:#16211C;
  --legno:#96613A; --legno-2:#6E4223;
  --gesso-base:#F2EEE1;
}
.scheda.tipo-lavagna, .post.tipo-lavagna{
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,0.055), rgba(255,255,255,0) 60%),
    linear-gradient(160deg, var(--ardesia) 0%, var(--ardesia-2) 100%);
  background-blend-mode:normal;
  color:var(--gesso-base);
  border:9px solid var(--legno); border-radius:10px;
  box-shadow:
    0 0 0 1px var(--legno-2),
    inset 0 0 0 1px var(--ardesia-filo),
    inset 0 2px 18px rgba(0,0,0,0.45),
    0 16px 26px -14px rgba(0,0,0,0.65);
}
.scheda.tipo-lavagna{padding:18px 18px 14px;}
.scheda.tipo-lavagna h2 a::after{border-radius:4px;}
/* la scanalatura porta-gessi, in fondo */
.scheda.tipo-lavagna::after, .post.tipo-lavagna::after{
  content:""; position:absolute; left:-9px; right:-9px; bottom:-9px; height:9px;
  background:linear-gradient(180deg, #B07A4C 0%, var(--legno) 45%, var(--legno-2) 100%);
  border-radius:0 0 6px 6px;
}
.post.tipo-lavagna{position:relative;}
.scheda.tipo-lavagna h2, .post.tipo-lavagna .post-titolo,
.scheda.tipo-lavagna .estratto, .post.tipo-lavagna .post-corpo,
.post.tipo-lavagna .chi-nome, .scheda.tipo-lavagna .chi-nome{
  color:var(--gesso-base); text-shadow:0 0 1px rgba(255,255,255,0.35);
}
.scheda.tipo-lavagna .estratto{font-family:var(--sans); -webkit-line-clamp:6;}
.post.tipo-lavagna .post-corpo{font-family:var(--sans);}
.scheda.tipo-lavagna .chi-quando, .post.tipo-lavagna .chi-quando,
.scheda.tipo-lavagna .conta-risposte{color:rgba(242,238,225,0.62);}
.scheda.tipo-lavagna .scheda-piede, .post.tipo-lavagna .post-azioni,
.post.tipo-lavagna .post-autore{border-top-color:rgba(242,238,225,0.22);}
.scheda.tipo-lavagna .scheda-foto{border-color:rgba(242,238,225,0.25); background:rgba(0,0,0,0.2);}
.chip-tipo.tipo-lavagna{background:#3E5349; color:#EAF3EE;}
.post.tipo-lavagna .chip-tipo, .post.tipo-lavagna .ruolo,
.scheda.tipo-lavagna .chip-tipo, .scheda.tipo-lavagna .ruolo{
  background:rgba(242,238,225,0.16); color:var(--gesso-base); border:1px solid rgba(242,238,225,0.3);
}
.tipo-lavagna:has(input:checked){border-color:#2B3A33; background:#2B3A33; color:var(--gesso-base);}
.tipo-lavagna:has(input:checked) small{color:rgba(242,238,225,0.75);}
.btn-lavagna svg{fill:none;}

/* il gesso colorato e l'evidenziatore */
.post.tipo-lavagna .blocco-testo, .post.tipo-lavagna .post-h,
.post.tipo-lavagna .lav-elenco, .post.tipo-lavagna .lav-schema{color:var(--gesso, #F2EEE1);}
.post.tipo-lavagna .blocco-testo p{margin:0 0 12px;}
.post.tipo-lavagna .blocco-testo.evidenziato p,
.post.tipo-lavagna .post-h.evidenziato,
.post.tipo-lavagna .lav-elenco.evidenziato li,
.post.tipo-lavagna .lav-schema.evidenziato .lav-nodo{
  background:var(--evid); border-radius:5px; padding:3px 9px;
}
.post.tipo-lavagna .post-h{font-family:var(--sans); font-weight:800; letter-spacing:0.01em; margin:22px 0 10px;}
.post.tipo-lavagna .post-h.evidenziato{display:inline-block;}

/* elenchi e caselle da spuntare */
.lav-elenco{list-style:none; margin:14px 0; padding:0; display:flex; flex-direction:column; gap:10px;}
.lav-elenco li{display:flex; align-items:flex-start; gap:10px;}
.lav-punto{
  width:9px; height:9px; border-radius:50%; background:currentColor; flex-shrink:0; margin-top:9px;
  box-shadow:0 0 3px rgba(255,255,255,0.4);
}
.lav-voce{flex:1; min-width:0; line-height:1.55;}
.lav-foto{
  display:block; margin-top:8px; max-width:100%; width:auto; max-height:210px;
  border-radius:4px; border:2px solid rgba(242,238,225,0.5);
  box-shadow:0 6px 14px -8px rgba(0,0,0,0.8);
}
.lav-casella{
  flex-shrink:0; width:24px; height:24px; margin-top:2px; padding:0; cursor:pointer;
  border:2px solid currentColor; border-radius:4px; background:transparent; color:inherit;
  display:inline-flex; align-items:center; justify-content:center;
}
.lav-casella svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:scale(.6) rotate(-12deg); transition:opacity .12s ease, transform .12s ease;}
.lav-casella[aria-pressed="true"] svg{opacity:1; transform:none;}
.lav-casella[aria-pressed="true"] + .lav-voce{opacity:.62; text-decoration:line-through;}
.lav-casella:hover{background:rgba(242,238,225,0.12);}
.lav-nota-spunte{margin:14px 0 0; font-size:0.82rem; color:rgba(242,238,225,0.6);}

/* schemi a frecce */
.lav-schema{display:flex; margin:18px 0; gap:0;}
.lav-schema.verso-giu{flex-direction:column; align-items:flex-start;}
.lav-schema.verso-destra{flex-direction:row; align-items:center; flex-wrap:wrap;}
.lav-nodo{
  border:2px solid currentColor; border-radius:7px; padding:10px 14px; max-width:100%;
  display:flex; flex-direction:column; gap:8px; line-height:1.45;
  box-shadow:0 0 6px rgba(255,255,255,0.08) inset;
}
.lav-nodo .lav-foto{margin-top:0; max-height:150px;}
.lav-freccia{position:relative; flex-shrink:0;}
.lav-schema.verso-giu .lav-freccia{width:2px; height:34px; margin-left:26px; background:currentColor;}
.lav-schema.verso-destra .lav-freccia{width:34px; height:2px; margin:0 2px; background:currentColor;}
.lav-freccia::after{
  content:""; position:absolute; width:9px; height:9px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
}
.lav-schema.verso-giu .lav-freccia::after{left:-4px; bottom:2px; transform:rotate(45deg);}
.lav-schema.verso-destra .lav-freccia::after{right:2px; top:-4px; transform:rotate(-45deg);}
@media (max-width:560px){
  .lav-schema.verso-destra{flex-direction:column; align-items:flex-start;}
  .lav-schema.verso-destra .lav-freccia{width:2px; height:28px; margin-left:26px;}
  .lav-schema.verso-destra .lav-freccia::after{left:-4px; right:auto; top:auto; bottom:2px; transform:rotate(45deg);}
}
@media (prefers-reduced-motion: reduce){ .lav-casella svg{transition:none;} }

/* ---------- la lavagna nel modulo di scrittura ---------- */
.scrivo-lavagna .blocchi-scrittura .blocco-scr{border-color:#3E5349;}
.gessi{display:flex; flex-wrap:wrap; gap:14px; margin:0 0 10px;}
.gessi-fila{display:flex; align-items:center; gap:5px; flex-wrap:wrap;}
.gessi-et{font-size:0.72rem; font-weight:800; color:var(--inch-2); margin-right:2px;}
.gesso{
  width:22px; height:22px; border-radius:50%; cursor:pointer; padding:0;
  border:2px solid rgba(0,0,0,0.18); background:var(--g, #F2EEE1);
  box-shadow:inset 0 -3px 5px rgba(0,0,0,0.12);
}
.gesso.niente{background:#fff; color:var(--inch-2); font:900 0.7rem var(--sans); display:inline-flex; align-items:center; justify-content:center;}
.gesso.scelto{border-color:var(--inch); transform:scale(1.18);}
.gesso:focus-visible{outline:3px solid #E7A33E; outline-offset:2px;}
.verso-schema{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; font-size:0.84rem; color:var(--inch-2);}
.verso{border:2px solid var(--filo); background:#fff; color:var(--inch); border-radius:999px; padding:5px 12px; font:800 0.8rem var(--sans); cursor:pointer;}
.verso.scelto{border-color:var(--teal); background:var(--menta); color:var(--menta-s);}
.voci-scr{display:flex; flex-direction:column; gap:8px;}
.voce-scr{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.voce-scr.carica-in-corso{opacity:.5;}
.voce-segno{font-weight:900; color:var(--inch-2); min-width:16px; text-align:center;}
.voce-spunta input{width:20px; height:20px; accent-color:var(--teal);}
.voce-testo{
  flex:1; min-width:140px; border:2px solid var(--filo); border-radius:10px; padding:8px 11px;
  font:500 0.95rem var(--sans); color:var(--inch); background:#fff;
}
.voce-foto{position:relative; line-height:0;}
.voce-foto img{width:46px; height:46px; object-fit:cover; border-radius:8px; border:2px solid var(--filo);}
.voce-foto-via{
  position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%; cursor:pointer;
  border:2px solid var(--carta); background:#D9546A; color:#fff; font:900 0.66rem var(--sans); padding:0;
  display:inline-flex; align-items:center; justify-content:center;
}
.voce-foto-piu{
  width:38px; height:38px; border-radius:10px; border:2px dashed var(--filo); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; color:var(--inch-2); background:#fff;
}
.voce-foto-piu svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round;}
.voce-foto-piu:hover{border-color:var(--teal); color:var(--teal);}
.voce-az{display:flex; gap:3px;}
.voce-az button{
  width:26px; height:26px; border-radius:8px; cursor:pointer; padding:0;
  border:1.5px solid var(--filo); background:var(--carta-2); color:var(--inch); font:800 0.8rem var(--sans);
}
.voce-az button:disabled{opacity:.35; cursor:default;}


/* ---------- l'elenco delle bozze ---------- */
.bozze{padding:16px 20px 14px; margin:0 0 22px;}
.bozze h2{
  display:flex; align-items:center; gap:8px; margin:0 0 4px;
  font-family:var(--sans); font-size:1rem; font-weight:900;
}
.bozze h2 svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round;}
.bozze-conta{
  font-size:0.74rem; font-weight:900; background:var(--burro); color:var(--burro-s);
  border-radius:999px; padding:2px 9px;
}
.bozze-dove{font-size:0.84rem; color:var(--inch-2); margin:0 0 12px; line-height:1.45;}
.bozze ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.bozze li{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--carta-2); border:1.5px dashed var(--filo); border-radius:14px; padding:10px 12px;
}
.bozza-testo{flex:1; min-width:180px; display:flex; flex-direction:column; gap:3px;}
.bozza-riga1{display:flex; align-items:center; gap:8px; flex-wrap:wrap; overflow-wrap:anywhere;}
.bozza-riga1 b{font-size:0.95rem;}
.bozza-testo small{font-size:0.76rem; color:var(--inch-2);}
.bozza-az{display:flex; align-items:center; gap:10px; margin-left:auto;}
.bozza-az .btn-carta{padding:7px 15px; font-size:0.84rem;}