/* A FICHA de um feed: a faixa larga com os selos nos cantos, o perfil embaixo e os posts que a
   nossa fila leu do feed. Arquivo próprio porque o `app.css` bateu as 300 linhas do gate de
   tamanho com o cartão e a ficha juntos — e os dois crescem em paralelo, cada um com um dono.
   Carregado ao lado do `app.css` na casca (ui/head.html), nas páginas SSR (src/lib/seo-paginas.js)
   e na casca da origem (origem/serve.mjs): a ficha sem JS usa as MESMAS classes. */
/* ── A ficha do feed: a IMAGEM É A FICHA ──
   Pedido do dono (16/09/2026): nome, descrição, selos, endereço e números moram DENTRO da área da
   imagem. A altura passa a ser a do conteúdo (com um piso), a imagem cobre o palco e um véu escuro
   por cima dela sustenta o texto — que é branco SEMPRE, nos dois temas: sobre foto, tema claro não
   existe. Os posts ficam embaixo, fora do palco, onde a leitura precisa de fundo de tema. */
.mural-feeds-ficha-pagina { max-width: none; }
/* As PÍLULAS: fundo escuro próprio (o selo pousa sobre foto, não sobre o tema) e branco que passa
   de 7:1 sobre qualquer imagem. Servem tanto nos cantos de cima quanto na linha da identidade. */
.mural-feeds-canto { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: .05rem .45rem; border-radius: .35rem; font-size: .8125rem; line-height: 1.5; color: #fff; background: rgb(0 0 0 / .72); }
.mural-feeds-canto-alerta { background: rgb(150 26 26 / .85); }
/* Os cantos de CIMA continuam ancorados na imagem; o resto do conteúdo agora mora no fluxo. */
.mural-feeds-ficha .mural-feeds-cantos { position: absolute; z-index: 1; display: flex; flex-wrap: wrap; gap: .35rem; top: .5rem; max-width: calc(50% - 1rem); }
.mural-feeds-ficha .mural-feeds-cantos-inicio { left: .5rem; justify-content: flex-start; }
.mural-feeds-ficha .mural-feeds-cantos-topo { right: .5rem; justify-content: flex-end; }
.mural-feeds-ficha .mural-feeds-cantos-inicio .mural-feeds-host { position: static; max-width: 22rem; }
.mural-feeds-ficha .mural-feeds-palco {
  aspect-ratio: auto; min-height: clamp(20rem, 30vw, 30rem); display: flex; flex-direction: column; justify-content: flex-end;
}
/* Arte gerada (ícone do site ou identicon) sobe: no palco alto, o centro é onde o texto mora. */
.mural-feeds-ficha .mural-feeds-icone-capa { top: 30%; height: 34%; }
.mural-feeds-ficha .mural-feeds-gerada { top: 30%; height: 34%; }
.mural-feeds-ficha .mural-feeds-avatar { width: 4rem; height: 4rem; font-size: 1.5rem; border-color: rgb(255 255 255 / .25); }
/* O véu: fraco no alto (onde só há pílula) e forte embaixo, onde o texto mora. */
.mural-feeds-ficha .mural-feeds-palco::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgb(0 0 0 / .45), rgb(0 0 0 / .25) 22%, rgb(0 0 0 / .72) 62%, rgb(0 0 0 / .88));
}
/* O conteúdo vem DEPOIS do véu no fluxo, então fica por cima dele sem z-index inventado. */
.mural-feeds-dentro {
  /* `z-index` porque o véu é um `::after` do palco: sem isto ele pinta POR CIMA do texto. */
  position: relative; z-index: 1; display: grid; gap: 1.25rem 2rem; grid-template-columns: minmax(0, 1fr);
  padding: 1.25rem; color: #fff;
}
/* `align-self: end` porque o trilho costuma ser MAIS ALTO que a identidade: sem isto, a linha da
   grade esticava a identidade e o nome do feed flutuava no meio da imagem em vez de pousar no canto
   de baixo (visível no lantian.pub, cujo trilho tem cinco fatos; no lebonnet.com, não). */
.mural-feeds-identidade { display: flex; flex-direction: column; align-self: end; gap: .75rem; min-width: 0; }
.mural-feeds-identidade h1 { text-shadow: 0 1px 3px rgb(0 0 0 / .6); }
.mural-feeds-sub { color: rgb(255 255 255 / .78); }
.mural-feeds-cabeca { display: flex; align-items: center; gap: 1rem; }
.mural-feeds-lead { max-width: 72ch; color: rgb(255 255 255 / .92); text-shadow: 0 1px 3px rgb(0 0 0 / .5); }
.mural-feeds-selos { display: flex; flex-wrap: wrap; gap: .35rem; }
/* O trilho sobre a foto: painel próprio, escuro e desfocado, para o número não brigar com a imagem. */
.mural-feeds-trilho {
  display: flex; flex-direction: column; align-self: end; gap: .75rem; min-width: 0; padding: 1rem;
  background: rgb(0 0 0 / .55); backdrop-filter: blur(10px); border: 1px solid rgb(255 255 255 / .18); border-radius: var(--mm-radius);
}
.mural-feeds-trilho code { color: #9fd0ff; }
.mural-feeds-fatos { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.mural-feeds-fatos dt { color: rgb(255 255 255 / .7); }
.mural-feeds-fatos dd { color: #fff; }
@media (min-width: 62em) { .mural-feeds-dentro { grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem); padding: 1.5rem; } }
/* ── Os posts do feed na ficha ──
   Lista de leitura: o título abre o post AQUI (`details`), com o original a um clique. Largura de
   leitura, não a do painel: linha de 1.400 px ninguém lê. */
/* A lista ocupa a largura da ficha: título à esquerda, quando à direita, e o resumo em duas
   linhas por baixo — índice de revista, não coluna de texto. */
.mural-feeds-posts { display: flex; flex-direction: column; gap: .25rem; }
.mural-feeds-post { padding: .7rem .5rem; margin-inline: -.5rem; border-top: 1px solid var(--mm-border); border-radius: var(--mm-radius); }
.mural-feeds-post > details > summary { cursor: pointer; list-style-position: outside; }
.mural-feeds-post-nome { font-weight: 600; }
/* Cinco linhas do texto, na largura inteira da ficha: duas linhas em meia tela não dizem do que o
   post trata, e era isso que aparecia antes (pedido do dono, 16/09/2026). */
.mural-feeds-post-resumo { color: var(--bs-secondary-color); display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.mural-feeds-post-corpo { margin-top: .5rem; }
/* O post renderizado do Markdown (`app-md.js`). Só as tags que o renderizador sabe emitir. */
.mural-md { overflow-wrap: anywhere; }
.mural-md > :last-child { margin-bottom: 0; }
.mural-md h4, .mural-md h5, .mural-md h6 { margin: 1rem 0 .35rem; font-size: 1rem; font-weight: 600; }
.mural-md p, .mural-md ul, .mural-md ol, .mural-md blockquote { margin-bottom: .75rem; }
.mural-md blockquote { padding-left: .75rem; border-left: 3px solid var(--mm-border); color: var(--bs-secondary-color); }
.mural-md-code, .mural-md pre { background: var(--mm-surface-2); border: 1px solid var(--mm-border); border-radius: var(--mm-radius); padding: .6rem .75rem; font-size: .8125rem; overflow-x: auto; }
/* O que só o HTML limpo traz (`html-seguro.mjs`) e o Markdown perdia: tabela, figura com legenda,
   lista aninhada, `sup`/`abbr`. Estilo mínimo — a hierarquia é a que o autor escreveu. */
.mural-md table { width: 100%; margin-bottom: .75rem; border-collapse: collapse; font-size: .9375rem; }
.mural-md th, .mural-md td { padding: .35rem .5rem; border: 1px solid var(--mm-border); text-align: start; vertical-align: top; }
.mural-md thead th, .mural-md caption { background: var(--mm-surface-2); font-weight: 600; }
.mural-md caption { padding: .35rem .5rem; text-align: start; }
.mural-md figure { margin: 1rem 0; }
.mural-md figcaption { margin-top: .35rem; font-size: .8125rem; color: var(--bs-secondary-color); text-align: center; }
.mural-md img { max-width: 100%; height: auto; border-radius: var(--mm-radius); }
.mural-md ul ul, .mural-md ol ol, .mural-md ul ol, .mural-md ol ul { margin-bottom: 0; }
.mural-md abbr { text-decoration: underline dotted; cursor: help; }
/* ── Embutido de vídeo/áudio: FACHADA primeiro, player no clique ──
   O `iframe` só nasce quando a pessoa pede (o processador entrega a fachada, não o player): antes
   disso o YouTube não sabe que alguém abriu o post. Caixa 16:9 para a página não saltar no clique. */
.mural-md-embed { position: relative; aspect-ratio: 16 / 9; width: 100%; margin: 1rem 0; overflow: hidden;
  display: grid; place-items: center; background: var(--mm-surface-2); border: 1px solid var(--mm-border); border-radius: var(--mm-radius); }
.mural-md-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mural-md-embed-play { appearance: none; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem;
  background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: 50rem; color: var(--mm-text); font: inherit; cursor: pointer; }
.mural-md-embed-play:hover { background: var(--mm-accent-soft); color: var(--mm-accent-text); }
.mural-md audio, .mural-feeds-anexo { width: 100%; margin: .5rem 0 1rem; }
.mural-md video { max-width: 100%; height: auto; border-radius: var(--mm-radius); }
.mural-md dt { font-weight: 600; }
.mural-md dd { margin: 0 0 .5rem 1rem; }
/* A imagem do post entra no texto, com teto de altura para não empurrar a leitura para baixo. */
.mural-md-fig { display: block; max-width: 100%; height: auto; max-height: 32rem; margin: .75rem auto; border-radius: var(--mm-radius); }
/* ── A lista de posts, embaixo da ficha e na largura inteira ── */
.mural-feeds-posts-faixa { border-top: 1px solid var(--mm-border); }
/* A LINHA INTEIRA abre o post — o clique não é só no título. O botão "ler mais" fica ali como
   promessa visível do que o clique faz, para quem não adivinha que a linha toda é clicável. */
.mural-feeds-post-abrir { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .6rem; width: 100%;
  appearance: none; background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.mural-feeds-post:has(.mural-feeds-post-abrir) { cursor: pointer; }
.mural-feeds-post:has(.mural-feeds-post-abrir):hover { background: var(--mm-surface-2); }
.mural-feeds-post:has(.mural-feeds-post-abrir):hover .mural-feeds-post-nome { color: var(--mm-accent-text); }
.mural-feeds-post-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-top: .4rem; }
.mural-feeds-post-tag { font-size: .75rem; padding: .05rem .45rem; border-radius: .35rem; background: var(--mm-surface-2); border: 1px solid var(--mm-border); color: var(--bs-secondary-color); }
.mural-feeds-post-mais { margin-left: auto; }
/* A leitura no modal: largura de leitura no meio da janela larga, não texto de ponta a ponta. */
.mural-feeds-leitura { display: flex; flex-direction: column; align-items: center; font-size: 1rem; line-height: 1.65; }
/* `flex` e não `margin: auto`: o `margin` do título vence o `auto` por especificidade e o h4 ia para a esquerda. */
/* `flex-shrink: 0`: num container flex com altura limitada, o bloco de código era espremido a 26 px. */
.mural-feeds-leitura > * { flex: 0 0 auto; width: 100%; max-width: 72ch; }
.mural-feeds-leitura > .mural-md-fig { max-width: min(100%, 52rem); }