/* ═══════════════════════════════════════════════════════════════════════════
 * forum-posta.css — l'albo degli iscritti e la posta privata
 *
 * Due superfici: `.mb-*` (l'albo) e `.posta*` (la casella). La casella veste
 * il pack scelto nel pannello: `.posta[data-pack="…"]` ridefinisce i suoi
 * accenti, gli stessi di panel-pack.css — i font Pack_* arrivano da lì
 * (il foglio è caricato anche qui).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── L'albo degli iscritti ──────────────────────────────────────────────── */
.mb-hero{margin:10px 12px 6px}
.mb-hero h2{margin:0;font-size:20px}
.mb-sub{margin:4px 0 0;color:var(--tx3);font-size:12.5px}
.mb-bar{margin:8px 12px;display:flex;flex-direction:column;gap:8px}
.mb-cerca{width:min(420px,100%);padding:7px 11px;background:var(--sf2);
  border:1px solid var(--bordo);border-radius:9px;color:var(--tx);font:inherit}
.mb-alfa{display:flex;flex-wrap:wrap;gap:4px}
.mb-lettera{border:1px solid var(--bordo);background:var(--sf2);color:var(--tx2);
  border-radius:7px;min-width:28px;padding:4px 8px;font-size:12px;cursor:pointer;
  font-family:inherit}
.mb-lettera:hover{color:var(--tx);border-color:var(--ciano,#00d5ff)}
.mb-lettera.on{background:var(--ciano,#00d5ff);color:#04121a;font-weight:700;
  border-color:transparent}
.mb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:10px;margin:10px 12px}
.mb-card{display:flex;flex-direction:column;gap:8px;background:var(--sf2);
  border:1px solid var(--bordo);border-radius:12px;padding:12px;cursor:pointer;
  transition:border-color .15s,transform .15s}
.mb-card:hover{border-color:var(--ciano,#00d5ff);transform:translateY(-1px)}
.mb-card.on{border-color:var(--verde,#3ddc84)}
.mb-av{width:52px;height:52px;border-radius:50%;background:var(--sf3);
  display:flex;align-items:center;justify-content:center;font-weight:800;
  font-size:16px;color:var(--tx2);overflow:hidden}
.mb-av img{width:100%;height:100%;object-fit:cover}
.mb-nome{font-size:14px}
.mb-on{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--verde,#3ddc84);margin-left:5px;vertical-align:middle;
  box-shadow:0 0 6px var(--verde,#3ddc84)}
.mb-meta{font-size:11px;color:var(--tx3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.mb-gesti{display:flex;gap:6px;margin-top:2px}

/* ── La casella ─────────────────────────────────────────────────────────── */
.posta{--pm-acc:var(--ciano,#00d5ff);--pm-acc-ink:#04121a;
  --pm-sf:var(--sf2);--pm-sf2:var(--sf3);
  --pm-line:var(--bordo);--pm-tx:var(--tx);--pm-tx2:var(--tx2);
  --pm-tx3:var(--tx3);--pm-font:inherit;
  display:flex;gap:10px;margin:10px 12px;align-items:stretch;
  min-height:420px;font-family:var(--pm-font)}

/* La guida delle cartelle */
.posta-rail{flex:0 0 218px;display:flex;flex-direction:column;gap:5px;
  background:var(--pm-sf);border:1px solid var(--pm-line);border-radius:12px;
  padding:10px}
.posta-nuovo{border:0;border-radius:9px;background:var(--pm-acc);
  color:var(--pm-acc-ink);font:inherit;font-weight:800;font-size:13px;
  padding:10px 12px;cursor:pointer;margin-bottom:6px}
.posta-nuovo:hover{filter:brightness(1.1)}
.posta-cartella{display:flex;align-items:center;gap:8px;border:0;
  background:transparent;color:var(--pm-tx2);font:inherit;font-size:12.5px;
  padding:8px 9px;border-radius:8px;cursor:pointer;text-align:left}
.posta-cartella .pc-ico{font-size:14px}
.posta-cartella:hover{background:var(--pm-sf2);color:var(--pm-tx)}
.posta-cartella.on{background:var(--pm-acc);color:var(--pm-acc-ink);
  font-weight:700}
.posta-cartella .bolla{margin-left:auto;background:var(--male,#e5484d);
  color:#fff;border-radius:9px;padding:0 6px;font-size:10.5px;font-weight:800}
.posta-alfa{margin-top:8px;padding-top:8px;border-top:1px dashed var(--pm-line);
  display:flex;flex-wrap:wrap;gap:3px}
.posta-lettera{border:0;background:transparent;color:var(--pm-tx3);
  font:inherit;font-size:10.5px;min-width:21px;padding:2px 4px;
  border-radius:5px;cursor:pointer;text-align:center}
.posta-lettera:hover{color:var(--pm-tx);background:var(--pm-sf2)}
.posta-lettera.on{background:var(--pm-acc);color:var(--pm-acc-ink);
  font-weight:700}

/* Il banco: barra strumenti + lista */
.posta-main{flex:1 1 46%;min-width:0;display:flex;flex-direction:column;
  background:var(--pm-sf);border:1px solid var(--pm-line);border-radius:12px;
  overflow:hidden}
.posta-bar{display:flex;align-items:center;gap:8px;padding:9px 11px;
  border-bottom:1px solid var(--pm-line);flex-wrap:wrap}
.posta-cerca{flex:1;min-width:140px;padding:6px 10px;background:var(--bg);
  border:1px solid var(--pm-line);border-radius:8px;color:var(--pm-tx);
  font:inherit;font-size:12.5px}
.posta-gesti{display:flex;gap:5px;flex-wrap:wrap}
.posta-gesti .b:disabled{opacity:.4;cursor:default}
.posta-lista{flex:1;overflow:auto;min-height:200px}
.posta-vuota{padding:34px 18px;text-align:center;color:var(--pm-tx3);
  font-size:12.5px}
.posta-riga{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;
  border-bottom:1px solid var(--pm-line);cursor:pointer}
.posta-riga:hover{background:var(--pm-sf2)}
.posta-riga.on{background:rgba(0,0,0,.22);box-shadow:inset 3px 0 0 var(--pm-acc)}
.posta-riga input[type=checkbox]{margin-top:4px}
.posta-chi{flex:0 0 118px;min-width:0;display:flex;flex-direction:column;gap:2px}
.posta-nome{font-size:12px;font-weight:700;color:var(--pm-tx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.posta-quando{font-size:10px;color:var(--pm-tx3)}
.posta-cosa{flex:1;min-width:0}
.posta-oggetto{font-size:12.5px;color:var(--pm-tx);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.posta-riga.nonletta .posta-oggetto{font-weight:800}
.posta-riga.nonletta .posta-oggetto::before{content:'●';color:var(--pm-acc);
  margin-right:5px;font-size:9px;vertical-align:2px}
.posta-estratto{font-size:11px;color:var(--pm-tx3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.posta-bozza{font-size:9px;background:var(--pm-sf2);border:1px dashed
  var(--pm-line);color:var(--pm-tx2);border-radius:5px;padding:1px 5px;
  vertical-align:2px;margin-left:5px}

/* Il tavolo di lettura */
.posta-lettura{flex:1 1 54%;min-width:0;background:var(--pm-sf);
  border:1px solid var(--pm-line);border-radius:12px;padding:12px;
  overflow:auto;max-height:78vh}
.posta-capo h3{margin:0 0 4px;font-size:16px;font-family:var(--pm-font)}
.posta-capo-meta{font-size:11.5px;color:var(--pm-tx3)}
.posta-aztop{display:flex;gap:6px;margin:10px 0}
.posta-filo{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.posta-bolla{background:var(--pm-sf2);border:1px solid var(--pm-line);
  border-radius:12px 12px 12px 3px;padding:10px 12px;max-width:88%}
.posta-bolla.mia{align-self:flex-end;border-radius:12px 12px 3px 12px;
  border-color:color-mix(in srgb,var(--pm-acc) 45%,var(--pm-line))}
.posta-bolla-meta{display:flex;gap:8px;align-items:baseline;font-size:11px;
  color:var(--pm-tx3);margin-bottom:5px}
.posta-bolla-meta b{color:var(--pm-acc)}
.posta-bolla-testo{font-size:13px;line-height:1.55;color:var(--pm-tx);
  overflow-wrap:break-word}
.posta-bolla-testo img{max-width:100%}
.posta-bolla-testo pre{overflow:auto}

/* Il compositore */
.posta-comp{display:flex;flex-direction:column;gap:7px}
.posta-lab{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:var(--pm-tx3,var(--tx3))}
.posta-a,.posta-ogg,.posta-testo{width:100%;padding:8px 11px;
  background:var(--sf2);border:1px solid var(--bordo);border-radius:8px;
  color:var(--tx);font:inherit;font-size:13px}
.posta-testo{resize:vertical;min-height:150px}
.posta-sug{display:flex;flex-direction:column;gap:2px}
.posta-sug:empty{display:none}
.posta-sug-voce{display:flex;gap:8px;align-items:baseline;border:1px solid
  var(--bordo);background:var(--sf2);color:var(--tx);font:inherit;font-size:12px;
  padding:6px 9px;border-radius:7px;cursor:pointer;text-align:left}
.posta-sug-voce:hover{border-color:var(--ciano,#00d5ff)}
.posta-sug-chiave{font-size:10.5px;color:var(--tx3)}
.posta-piede{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.posta-err{color:var(--male,#e5484d);font-size:12px;flex:1}

/* Il grazie sul thread (barra sotto la testata) */
.gz-disc{margin-top:8px}

/* ── Il pack veste la casella ───────────────────────────────────────────── */
/*  `data-pack` sulla scatola .posta: stesso nome della scelta del pannello.
 *  Accento + font dei titoli, come panel-pack.css li dichiara. */
.posta[data-pack="off-topic"]{--pm-acc:#ef9a83;--pm-acc-ink:#2a150f;
  --pm-font:Pack_caveat,cursive}
.posta[data-pack="dylan-dog"]{--pm-acc:#e75a60;--pm-acc-ink:#1a0505;
  --pm-font:Pack_specialelite,monospace}
.posta[data-pack="anime"]{--pm-acc:#ff3278;--pm-acc-ink:#2a0713;
  --pm-font:Pack_teko,sans-serif}
.posta[data-pack="film"]{--pm-acc:#edbb65;--pm-acc-ink:#241703;
  --pm-font:Pack_bebasneue,sans-serif}
.posta[data-pack="serie-tv"]{--pm-acc:#72d7d9;--pm-acc-ink:#07272a;
  --pm-font:Pack_teko,sans-serif}
.posta[data-pack="programmi"]{--pm-acc:#6bafff;--pm-acc-ink:#061224;
  --pm-font:Pack_oxanium,sans-serif}
.posta[data-pack="tutorial"]{--pm-acc:#e7b56b;--pm-acc-ink:#241703;
  --pm-font:Pack_caveat,cursive}
.posta[data-pack="musica"]{--pm-acc:#d68bff;--pm-acc-ink:#22082f;
  --pm-font:Pack_teko,sans-serif}
.posta[data-pack="fumetti"]{--pm-acc:#ffb148;--pm-acc-ink:#2e1a02;
  --pm-font:Pack_bangers,cursive}
.posta[data-pack="videogiochi"]{--pm-acc:#85ef91;--pm-acc-ink:#062412;
  --pm-font:Pack_orbitron,sans-serif}
.posta[data-pack="teatro"]{--pm-acc:#e9c89f;--pm-acc-ink:#2a1508;
  --pm-font:Pack_marcellus,serif}
.posta[data-pack="manga"]{--pm-acc:#f1d8b8;--pm-acc-ink:#241703;
  --pm-font:Pack_bangers,cursive}
.posta[data-pack="fan-art"]{--pm-acc:#91d4cb;--pm-acc-ink:#0a2420;
  --pm-font:Pack_architectsdaughter,cursive}
.posta[data-pack="ebooks"]{--pm-acc:#cbd7b2;--pm-acc-ink:#1b200d;
  --pm-font:Pack_josefinsans,sans-serif}
.posta[data-pack="steampunk"]{--pm-acc:#dfb86c;--pm-acc-ink:#2a1a03;
  --pm-font:Pack_marcellus,serif}
.posta[data-pack="ghibli"]{--pm-acc:#b8cf86;--pm-acc-ink:#1b240f;
  --pm-font:Pack_josefinsans,sans-serif}
.posta[data-pack="sport"]{--pm-acc:#62d6ad;--pm-acc-ink:#062117;
  --pm-font:Pack_russoone,sans-serif}
.posta[data-pack="halloween"]{--pm-acc:#ff9a44;--pm-acc-ink:#2e1400;
  --pm-font:Pack_pirataone,serif}
.posta[data-pack] .posta-capo h3{font-family:var(--pm-font)}

/* ── Stretto ────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .posta{flex-direction:column}
  .posta-rail{flex:none;flex-direction:row;flex-wrap:wrap;align-items:center}
  .posta-nuovo{margin:0}
  .posta-alfa{border-top:0;margin-top:0;padding-top:0}
  .posta-lettura{max-height:none}
  .posta-chi{flex-basis:96px}
}