/* ============================================================
   Spoilery — assets/css/posts.css
   Cartella: /assets/css/
   ------------------------------------------------------------
   Stili GLOBALI delle schede post (stanza, hub, pagina post,
   home, profilo): autore, contenuto, spoiler, reazioni, azioni,
   filtri per tipo e finestra "Segnala".
   ============================================================ */

/* ---------- Elenco ---------- */
.st-post-list { display: flex; flex-direction: column; gap: .75rem; }
.st-post-list[aria-busy="true"] { opacity: .5; transition: opacity .2s; }

.st-post-filters {
    display: flex;
    gap: .4rem;
    margin-bottom: .9rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.st-post-filters::-webkit-scrollbar { display: none; }
.st-post-filter {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    min-height: 38px;
    padding: 0 .85rem;
    border: 1px solid var(--st-line);
    border-radius: 999px;
    background: none;
    color: var(--st-muted);
    font-size: .88rem;
    font-weight: 600;
}
.st-post-filter .st-ico { width: 1.15em; height: 1.15em; }
.st-post-filter.is-active { border-color: var(--st-accent); background: rgba(218, 9, 21, .12); color: #fff; }

.st-posts-more { display: flex; justify-content: center; padding-top: .5rem; }
.st-posts-empty { padding: 2rem 1rem; color: var(--st-muted); text-align: center; }

/* ---------- Scheda ---------- */
.st-post {
    padding: 1rem 1rem .5rem;
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    transition: opacity .25s ease, transform .25s ease;
}
.st-post.is-new { animation: st-post-in .5s ease; }
.st-post.is-removing { opacity: 0; transform: scale(.97); }
@keyframes st-post-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.st-post-head { display: flex; align-items: center; gap: .7rem; }
.st-post-avatar { flex-shrink: 0; line-height: 0; }
.st-post-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.st-post-name { color: var(--st-text); font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-post-name:hover { color: #fff; }
.st-post-sub { display: flex; gap: .5rem; color: var(--st-muted); font-size: .82rem; overflow: hidden; white-space: nowrap; }
.st-post-time { color: inherit; text-decoration: none; }
.st-post-time:hover { color: var(--st-text); }
.st-post-menu { margin-right: -.5rem; }

/* Intestazione "stile gruppo" (feed, profilo, ricerca, pagina del post):
   locandina a sinistra ALTA QUANTO i testi accanto: titolo della serie (sempre una riga),
   pillola della puntata, autore; foto dell'autore sull'angolo della locandina.
   Il tipo di post (Teoria/Meme/Post) è un'icona all'inizio del testo */
.st-post--group .st-post-head { align-items: stretch; }
.st-post-avatar--series {
    position: relative; display: block; flex: 0 0 auto;
    width: 56px; min-height: 76px; margin-right: .25rem;
    align-self: stretch;                     /* stessa altezza del blocco di testo */
}
.st-post-avatar--series > a:first-child { position: absolute; inset: 0; display: block; }
.st-post-poster {
    width: 100%; height: 100%; object-fit: cover; display: block;
    border-radius: 8px; background: var(--st-line);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.st-post--group .st-post-who { justify-content: center; gap: .3rem; line-height: 1.25; }
.st-post--group .st-post-name--series { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* titolo lungo: troncato con "…" */
.st-post-context.st-post-context--head { margin: 0; flex-wrap: nowrap; min-width: 0; }
.st-post-context--head .st-post-where { flex-wrap: nowrap; min-width: 0; }
.st-post-context--head .st-post-general { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.st-post--group .st-post-author { flex: 0 1 auto; min-width: 2.5em; white-space: nowrap; }
.st-post--group .st-post-menu { align-self: flex-start; }
.st-post--group .st-post-head { margin-bottom: .85rem; }
.st-post-avatar-mini { position: absolute; right: -7px; bottom: -5px; display: block; z-index: 1; }
.st-post-avatar-mini img {
    width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: block;
    border: 2px solid var(--st-surface); background: var(--st-surface);
}
.st-post-name--series { font-size: 1.02rem; }
.st-post-author { color: var(--st-text); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.st-post-author:hover { color: #fff; text-decoration: underline; }
.st-post--group .st-post-sub .st-post-time::before { content: '·'; margin-right: .5rem; }

.st-post-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: .8rem 0 .9rem;
}
/* Informazioni del post (tipo, serie, episodio / discussione generale) come "pillole" grigie,
   per distinguerle bene dal testo del post */
.st-post-context .st-type,
.st-post-context .st-post-series,
.st-post-context .st-post-general,
.st-post-context .st-ep-code {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 26px;
    padding: .2rem .65rem;
    border: 0;
    border-radius: 999px;
    background: #222226;            /* grigio un po' più chiaro della scheda */
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.st-post-context .st-type .st-ico { width: 1.15em; height: 1.15em; margin-left: -.15rem; }
.st-post-where {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    max-width: 100%;
    color: var(--st-text);
    text-decoration: none;
}
.st-post-where .st-post-series { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--st-text); display: inline-block; line-height: 26px; padding-block: 0; }
.st-post-where .st-ep-code { font-family: var(--st-font-display); font-weight: 700; color: var(--st-text); font-variant-numeric: tabular-nums; }
.st-post-context .st-post-general { color: var(--st-muted); font-weight: 500; }
/* Ogni pillola è un link a sé: serie → scheda della serie, episodio → scheda dell'episodio */
.st-post-context a.st-post-series,
.st-post-context a.st-ep-code,
.st-post-context a.st-post-general { text-decoration: none; transition: background-color .15s ease; }
.st-post-context a.st-post-series:hover,
.st-post-context a.st-ep-code:hover,
.st-post-context a.st-post-general:hover { background: #2C2C31; color: #fff; }
.st-post-context a:focus-visible { outline: 2px solid var(--st-accent-hi); outline-offset: 2px; }
.st-post-context .st-ep-code .bi { font-size: .8rem; opacity: .7; }

/* Condividi (in basso a destra): "Altre app…" solo dove il telefono le supporta */
.st-native-share { display: none; }
.st-can-share .st-native-share { display: list-item; }

/* Contenuto */
.st-post-main { position: relative; margin-bottom: .35rem; }
.st-post-main.st-spoiler { min-height: 150px; }
.st-post-text { display: flow-root; }                       /* contiene l'icona del tipo "a sinistra del testo" */
.st-post-typeicon { float: left; display: inline-flex; margin: .28rem .45rem 0 0; line-height: 0; }
.st-post-typeicon .st-ico { width: 1.3rem; height: 1.3rem; }
.st-post-typeline { display: flex; align-items: center; gap: .1rem; margin: 0 0 .5rem; color: var(--st-muted); font-size: .85rem; font-weight: 600; }
.st-post-typeline .st-post-typeicon { float: none; margin: 0 .3rem 0 0; }
.st-post-body { padding: .2rem 0 .4rem; font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
.st-post-body a { word-break: break-all; }
.st-post-body.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.st-post-more { margin-top: .25rem; padding: 0; border: 0; background: none; color: var(--st-accent-hi); font-weight: 600; font-size: .9rem; }

.st-post-image {
    display: block;
    margin-top: .75rem;
    border-radius: var(--st-radius-sm);
    overflow: hidden;
    background: var(--st-raised);
}
.st-post-image img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; }
.st-post-body + .st-post-image,
.st-post-more + .st-post-image { margin-top: .75rem; }
.st-post-main > div:first-child > .st-post-image:first-child { margin-top: 0; }

/* Copertura spoiler del singolo post */
.st-post .st-spoiler-cover { border: 1px dashed rgba(242, 181, 68, .45); border-radius: var(--st-radius-sm); }
.st-post .st-spoiler-cover span { color: var(--st-muted); font-size: .85rem; max-width: 34ch; }

/* ---------- Azioni ---------- */
.st-post-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-top: .25rem;
    padding-top: .35rem;
    border-top: 1px solid rgba(44, 44, 48, .7);
}
.st-post-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0 .5rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--st-muted);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}
.st-post-act .bi { font-size: 1.1rem; }
.st-post-act:hover { color: var(--st-text); background: var(--st-raised); }
.st-post-act:last-child { margin-left: auto; }

/* Pulsante reazione + selettore */
.st-react { position: relative; }
.st-react-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: 0 .8rem 0 .6rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--st-muted);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}
.st-react-btn .bi { font-size: 1.15rem; }
.st-react-btn .st-ico { width: 1.35em; height: 1.35em; }
.st-react-btn:hover { background: var(--st-raised); color: var(--st-text); }
.st-react-btn.is-on { color: var(--st-r, var(--st-text)); background: color-mix(in srgb, var(--st-r, #fff) 12%, transparent); }

.st-react-picker {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 20;
    display: flex;
    gap: .25rem;
    padding: .4rem;
    background: var(--st-raised);
    border: 1px solid var(--st-line);
    border-radius: 999px;
    box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .7);
    animation: st-pop .16s ease-out;
}
.st-react-picker[hidden] { display: none; }
@keyframes st-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }

.st-react-opt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: none;
    transition: transform .14s ease, background-color .14s ease;
}
.st-react-opt .st-ico { width: 36px; height: 36px; }
/* 6 reazioni: su telefoni stretti il menu resta dentro lo schermo */
@media (max-width: 400px) {
    .st-react-opt { width: 46px; height: 46px; }
    .st-react-opt .st-ico { width: 32px; height: 32px; }
}
/* Pressione lunga sul pulsante: niente selezione del testo né menu del telefono */
.st-react-btn { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.st-react-opt span {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    padding: .1rem .45rem;
    border-radius: 6px;
    background: #050506;
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50%);
    pointer-events: none;
    transition: opacity .12s ease;
}
.st-react-opt:hover,
.st-react-opt:focus-visible { transform: translateY(-4px) scale(1.12); }
.st-react-opt:hover span,
.st-react-opt:focus-visible span { opacity: 1; }
.st-react-opt.is-on { background: color-mix(in srgb, var(--st-r) 22%, transparent); }

/* Riepilogo reazioni */
.st-react-summary {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--st-muted);
    font-size: .85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.st-react-stack { display: inline-flex; }
.st-react-stack .st-ico { width: 1.25em; height: 1.25em; margin-left: -.35em; filter: drop-shadow(0 0 1px var(--st-surface)); }
.st-react-stack .st-ico:first-child { margin-left: 0; }

/* ---------- Finestra "Segnala" ---------- */
.st-report-legend { font-size: .95rem; font-weight: 600; margin-bottom: .5rem; }
.st-report-option {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 48px;
    padding: 0 .9rem;
    margin-bottom: .4rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-sm);
    cursor: pointer;
}
.st-report-option:has(input:checked) { border-color: var(--st-accent); background: rgba(218, 9, 21, .08); }
.st-report-option input { accent-color: var(--st-accent); width: 1.1rem; height: 1.1rem; }

/* ---------- Traduzione ---------- */
/* "Traduci dal francese" / "Tradotto dal francese · Mostra originale" sotto il testo */
.st-post-tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .4rem;
    margin-top: .4rem;
    color: var(--st-muted);
    font-size: .82rem;
}
.st-post-tr .bi-globe2 { font-size: .9em; }
.st-post-tr-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 32px;            /* comodo da toccare */
    padding: 0;
    border: 0;
    background: none;
    color: var(--st-accent-hi);
    font-weight: 600;
    font-size: inherit;
    text-decoration: none;
}
.st-post-tr-btn:hover { color: #fff; }
.st-post-tr-btn:disabled { opacity: .7; cursor: progress; }
.st-post-tr.is-working .bi-globe2 { animation: st-tr-spin 1s linear infinite; }
.st-post-tr-label { display: inline-flex; align-items: center; gap: .3rem; }
.st-post-tr-dot { opacity: .6; }
.st-post-tr.is-new { animation: st-tr-in .35s ease; }
.st-post-more + .st-post-tr { margin-top: .15rem; }
.st-post-tr + .st-post-image { margin-top: .6rem; }
@keyframes st-tr-spin { to { transform: rotate(360deg); } }
@keyframes st-tr-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .st-post-tr.is-working .bi-globe2, .st-post-tr.is-new { animation: none; }
}

/* ---------- Caricamento automatico ---------- */
.st-posts-more { flex-direction: column; align-items: stretch; gap: .75rem; }
.st-posts-more > .btn { align-self: center; }
.st-post-skeletons { display: flex; flex-direction: column; gap: .75rem; }
.st-post-skeletons[hidden] { display: none; }
.st-post-skeleton {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: .55rem .7rem;
    padding: 1rem;
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
}
.st-sk-avatar { width: 44px; height: 44px; border-radius: 50%; grid-row: span 2; }
.st-sk-line { height: 12px; align-self: center; }
.st-sk-short { width: 45%; }
.st-sk-block { grid-column: 1 / -1; height: 90px; }

/* Invito per gli ospiti dopo alcuni blocchi */
.st-posts-guest {
    padding: 1.25rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    background: linear-gradient(180deg, rgba(218, 9, 21, .1), var(--st-surface));
    text-align: center;
}
.st-posts-guest p { color: var(--st-muted); margin-bottom: .9rem; }
.st-posts-guest p strong { color: var(--st-text); }
.st-posts-guest[hidden] { display: none; }

/* ---------- Post coperti in versione compatta (negli elenchi) ---------- */
.st-post.is-compact { padding-bottom: .9rem; }
.st-post.is-compact .st-post-main { min-height: 0; margin-bottom: 0; }
.st-post.is-compact .st-spoiler-content { display: none; }
.st-post.is-compact .st-post-actions { display: none; }
.st-cover-compact {
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: .5rem .6rem !important;
    padding: .55rem .6rem .55rem .8rem !important;
    background: rgba(242, 181, 68, .06) !important;
    text-align: left !important;
}
.st-cover-compact .bi { font-size: 1.05rem !important; }
.st-cover-compact strong { flex: 1 1 auto; font-size: .9rem; }
.st-cover-compact .btn { flex-shrink: 0; }

/* Episodio di riferimento nella pagina della serie */
.st-post-where .bi-box-arrow-in-right { font-size: .85rem; }

/* "Nascondi spoiler" (interruttore sotto i filtri) */
.st-post-tools { display: flex; justify-content: flex-end; margin: -.35rem 0 .75rem; }
.st-spoiler-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 40px;
    padding: 0 .25rem;
    border: 0;
    background: none;
    color: var(--st-muted);
    font-size: .88rem;
    font-weight: 600;
}
.st-switch {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--st-raised);
    border: 1px solid var(--st-line);
    transition: background-color .15s ease;
}
.st-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--st-muted);
    transition: transform .15s ease, background-color .15s ease;
}
.st-spoiler-toggle.is-active { color: var(--st-spoiler); }
.st-spoiler-toggle.is-active .st-switch { background: rgba(242, 181, 68, .35); border-color: var(--st-spoiler); }
.st-spoiler-toggle.is-active .st-switch::after { transform: translateX(16px); background: var(--st-spoiler); }
.st-hide-covered .st-post.is-covered { display: none; }
.st-posts-hidden-hint {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem .9rem;
    border-radius: var(--st-radius-sm);
    background: rgba(242, 181, 68, .08);
    color: var(--st-muted);
    font-size: .88rem;
}
.st-posts-hidden-hint .bi { color: var(--st-spoiler); }
.st-posts-hidden-hint[hidden] { display: none; }

/* ---------- Feed della home ---------- */
/* Motivo per cui il post è nel feed */
.st-post-reason {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: -.2rem 0 .6rem;
    color: var(--st-muted);
    font-size: .78rem;
    font-weight: 600;
}
.st-post-reason--trending .bi { color: var(--st-r-hype); }
.st-post-reason--series .bi   { color: var(--st-accent-hi); }
.st-post-reason--user .bi     { color: #4ADE80; }

.st-post-tools { gap: .25rem 1rem; flex-wrap: wrap; }
.st-post-tools:has(> :nth-child(2)) { display: grid; grid-template-columns: 1fr 1fr; }
.st-post-tools:has(> :nth-child(2)) .st-spoiler-toggle:last-child { justify-self: end; }
.st-post-tools .st-spoiler-toggle { font-size: .8rem; gap: .35rem; white-space: nowrap; }
.st-post-tools .st-switch { width: 32px; height: 19px; flex-shrink: 0; }
.st-post-tools .st-switch::after { width: 13px; height: 13px; }
.st-post-tools .st-spoiler-toggle.is-active .st-switch::after { transform: translateX(13px); }

/* Separatore "Altri post che potrebbero piacerti" (feed della home) */
.st-feed-sep {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .5rem 0 .1rem;
    color: var(--st-muted);
    font-size: .88rem;
    font-weight: 700;
}
.st-feed-sep::before,
.st-feed-sep::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--st-line); }
.st-feed-sep .bi { color: var(--st-spoiler); }
.st-post-reason--popular .bi,
.st-post-reason--suggested .bi { color: var(--st-spoiler); }

/* ---------- Tempo reale: avviso "↑ N nuovi post" ---------- */
.st-new-posts {
    position: sticky;
    top: calc(var(--st-topbar-h) + var(--st-safe-top) + .6rem);
    z-index: 12;
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 auto .75rem;
    padding: .55rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: var(--st-accent);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    box-shadow: 0 10px 24px -8px rgba(218, 9, 21, .7);
    animation: st-pop .2s ease-out;
}
.st-new-posts[hidden] { display: none; }
/* Nella pagina della serie le schede sono fisse in alto: l'avviso scende sotto di loro */
.st-page-series .st-new-posts { top: calc(var(--st-topbar-h) + var(--st-safe-top) + 56px); }

/* ---------- Modifica dei propri post e commenti ---------- */
.st-post-body[hidden], .st-comment-body[hidden], .st-post-tr[hidden], .st-post-more[hidden] { display: none !important; }
.st-edit { display: flex; flex-direction: column; gap: .5rem; margin: .1rem 0 .5rem; }
.st-edit-text { min-height: 84px; resize: vertical; background-color: var(--st-ink); font-size: .95rem; line-height: 1.5; }
.st-edit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.st-edit-spoiler { display: flex; align-items: center; gap: .4rem; margin: 0 auto 0 0; font-size: .85rem; }
.st-edit-count { margin-left: auto; color: var(--st-muted); font-size: .75rem; }
.st-edit-spoiler + .st-edit-count { margin-left: 0; }
.st-comment-bubble .st-edit { min-width: min(520px, 70vw); margin-top: .35rem; }
.st-post-edited, .st-comment-edited { color: var(--st-muted); font-size: .78rem; font-style: italic; }
.st-post-sub .st-post-edited::before { content: '·'; margin-right: .5rem; font-style: normal; }

/* ---------- Dettaglio reazioni (nuvoletta al tocco sul riepilogo) ---------- */
.st-react-summary { cursor: pointer; border-radius: 999px; padding: .15rem .35rem; margin: -.15rem -.35rem; }
.st-react-summary:hover, .st-react-summary[aria-expanded="true"] { color: var(--st-text); background: var(--st-raised); }
.st-react-summary:focus-visible { outline: 2px solid var(--st-accent-hi); outline-offset: 2px; }
.st-react-tip {
    position: fixed;
    z-index: 1080;
    min-width: 150px;
    padding: .45rem .6rem;
    border: 1px solid var(--st-line);
    border-radius: 12px;
    background: var(--st-raised);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    color: var(--st-text);
    font-size: .85rem;
    animation: st-tip-in .14s ease-out;
}
/* Freccia verso il riepilogo */
.st-react-tip::after {
    content: '';
    position: absolute;
    left: calc(var(--st-tip-x, 50%) - 6px);
    bottom: -6px;
    width: 12px; height: 12px;
    background: var(--st-raised);
    border-right: 1px solid var(--st-line);
    border-bottom: 1px solid var(--st-line);
    transform: rotate(45deg);
}
.st-react-tip.is-below::after { bottom: auto; top: -6px; transform: rotate(225deg); }
.st-react-tip-row { display: flex; align-items: center; gap: .5rem; padding: .2rem 0; }
.st-react-tip-row .st-ico { width: 1.4em; height: 1.4em; }
.st-react-tip-label { flex: 1; color: var(--st-muted); }
.st-react-tip-row strong { font-variant-numeric: tabular-nums; }
@keyframes st-tip-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .st-react-tip { animation: none; } }

/* ---------- Foto a tutto schermo (pagina del post) ---------- */
.st-post-image[data-st-lightbox] { cursor: zoom-in; }
.st-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(.5rem + var(--st-safe-top, 0px)) .5rem calc(.5rem + var(--st-safe-bottom, 0px));
    background: rgba(0, 0, 0, .94);
    cursor: zoom-in;
    opacity: 0;
    transition: opacity .18s ease;
    outline: none;
    touch-action: none;            /* dita gestite da posts.js (zoom e spostamento) */
    overscroll-behavior: contain;
    user-select: none;
    -webkit-user-select: none;
}
.st-lightbox.is-zoomed { cursor: grab; }
.st-lightbox.is-zoomed:active { cursor: grabbing; }
.st-lightbox-close {
    position: absolute;
    top: calc(.75rem + var(--st-safe-top, 0px));
    right: .75rem;
    z-index: 1;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: rgba(30, 30, 33, .8);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
}
.st-lightbox-close:hover { background: rgba(60, 60, 64, .9); }
.st-lightbox.is-open { opacity: 1; }
.st-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    transform: scale(.97);
    transition: transform .18s ease;
    user-select: none;
    -webkit-user-drag: none;
}
.st-lightbox.is-open img { transform: none; }
.st-lightbox img { will-change: transform; transform-origin: center center; pointer-events: none; }
.st-lightbox-on, .st-lightbox-on body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .st-lightbox, .st-lightbox img { transition: none; } }

/* ============================================================
   Recensione (voto della serie nel feed): pillola "Recensione",
   riga "Luca ha recensito Breaking Bad", stelle, testo facoltativo.
   Niente commenti: nella barra in basso restano reazioni e condivisione.
   ============================================================ */
.st-post-context .st-post-review-tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 26px;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: rgba(245, 180, 40, .14);
    color: var(--st-spoiler, #F5B428);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
}
.st-review { margin: 0 0 .55rem; }
.st-review-line { margin: 0 0 .3rem; color: var(--st-muted); font-size: .92rem; }
.st-review-line a { color: var(--st-text); font-weight: 600; text-decoration: none; }
.st-review-line a:hover { text-decoration: underline; }
.st-review-stars { display: inline-flex; gap: .2rem; color: var(--st-spoiler, #F5B428); font-size: 1.45rem; line-height: 1; }
.st-review-stars .bi-star { color: #55555C; }
.st-post--review .st-post-actions { justify-content: flex-start; }
.st-post--review .st-post-sharebox { margin-left: auto; }
.st-post-filter--review .bi { color: var(--st-spoiler, #F2B544); font-size: .95em; }

/* Riquadro "Altre recensioni" nel feed (templates/partials/review-group.php) */
.st-review-group { margin: 0 0 1rem; padding: .85rem 1rem .4rem; border: 1px solid var(--st-line); border-radius: var(--st-radius); background: var(--st-surface); }
.st-review-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .2rem; }
.st-review-group-head h3 { margin: 0; font-size: .95rem; font-weight: 700; }
.st-review-group-head h3 .bi { color: var(--st-spoiler, #F2B544); }
.st-review-group-all { padding: 0; border: 0; background: none; color: var(--st-text); font-size: .84rem; text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; }
.st-review-group-list { list-style: none; margin: 0; padding: 0; }
.st-review-group-list li + li { border-top: 1px solid var(--st-line); }
.st-review-row { display: flex; align-items: flex-start; gap: .75rem; padding: .6rem 0; color: inherit; text-decoration: none; }
.st-review-row-poster { position: relative; flex-shrink: 0; width: 46px; }
.st-review-row-poster > img:first-child { display: block; width: 46px; height: 69px; object-fit: cover; border-radius: 6px; background: var(--st-raised); }
.st-review-row-avatar { position: absolute; right: -6px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; border: 2px solid var(--st-surface); }
.st-review-row-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.st-review-row-title { font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-review-row-top { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .5rem; font-size: .85rem; color: var(--st-muted); }
.st-review-row-top .st-review-stars { font-size: .85rem; gap: .1rem; }
.st-review-row-text { color: var(--st-muted); font-size: .86rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.st-review-row-text.is-spoiler { color: var(--st-spoiler, #F2B544); }
.st-review-row:hover .st-review-row-title { text-decoration: underline; }

/* Spoiler Shield in piccolo (modifica di un post, recensione): interruttore ambra con lo scudo */
.st-shield-mini { display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .3rem .7rem .3rem 2.9rem; min-height: 2.1rem;
                  border: 1px solid rgba(242, 181, 68, .35); border-radius: 999px; background: rgba(242, 181, 68, .05); cursor: pointer; font-size: .86rem; }
.st-shield-mini .form-check-input { width: 2.2rem; height: 1.2rem; margin-left: -2.45rem; margin-top: 0; cursor: pointer; }
.st-shield-mini .form-check-input:checked { background-color: var(--st-spoiler, #F2B544); border-color: var(--st-spoiler, #F2B544); }
.st-shield-mini .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(242, 181, 68, .3); border-color: var(--st-spoiler, #F2B544); }
.st-shield-mini .form-check-label { cursor: pointer; }
.st-shield-mini .bi { color: var(--st-spoiler, #F2B544); }
.st-shield-mini:has(input:checked) { border-color: var(--st-spoiler, #F2B544); background: rgba(242, 181, 68, .16); }
.st-shield-mini:has(input:checked) .form-check-label { color: var(--st-spoiler, #F2B544); font-weight: 600; }