/* Layout do catálogo e das abas sobre os componentes Bootstrap. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#paywall-modal.paywall-is-dev .modal-content { border-color: #ffc107; }
#paywall-modal.paywall-is-dev .modal-header { background: #ffc107; }
.mw0 { min-width: 0; }

/* Sidebar de faceta acompanha a rolagem: a pesquisa de navegação facetada (Baymard/NN-g) é
   clara em manter o filtro marcado à vista enquanto a pessoa percorre o resultado. */
@media (min-width: 992px) {
  .sidebar-sticky { position: sticky; top: 6.25rem; max-height: calc(100vh - 7.25rem); overflow-y: auto; }
}
#facetas-corpo .form-check-input { cursor: pointer; }
#facetas-corpo [data-toggle-grupo] { background: none; border: 0; }


/* A lista chega por JS: sem altura reservada o rodapé pulava (CLS 0,58 em 05/09). A reserva
   some assim que a primeira página é pintada. */
.mosaico-reservado:empty { min-height: 50vh; }
.mm-codigo { background: var(--mm-surface-2); font-size: .875rem; overflow-x: auto; }

.mural-label { font-size: .8125rem; }
.mural-description { overflow-wrap: anywhere; }
.mural-body { white-space: pre-line; overflow-wrap: anywhere; }
.mural-human #item-corpo { max-width: none; }
.mural-guia-linhas { margin: 0; }

.mural-stats { font-size: .8125rem; }
.mural-readme {
  max-height: 36rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--mm-surface-2); border: 1px solid var(--mm-border); border-radius: var(--mm-radius);
  padding: .75rem 1rem; font-size: .875rem;
}
.mural-human .mural-row > .btn-group { align-self: center; }
.mural-fila-acoes .btn { min-inline-size: 2.75rem; }
/* A fita de abas é o CABEÇALHO do painel, e a banda de trabalho vem colada nela — as duas com
   fundo próprio, no desenho do EditalMD (card-header sobre bg-body-tertiary). Antes a fita, a
   busca e a lista dividiam o mesmo fundo: a aba ativa não se destacava de nada e a busca
   flutuava no meio do resultado. O `:has` prende a regra ao painel que TEM a fita — as páginas
   SSR usam o mesmo componente para um título simples, e lá o fundo chapado é o certo. */
.mural-human .mm-workbench > .mm-panel-head:has(#abas-principais) { background: var(--mm-surface-2); }
/* A fita vai de borda a borda e a linha é UMA, a dela: eram duas (a da fita, recuada no padding, e a
   da cabeça, inteira), com um degrau na ponta direita junto do canto arredondado, e a aba ativa num
   fundo mais escuro que a banda de busca, com a linha da cabeça passando por baixo. Agora a aba ativa
   tem o fundo da banda e se abre para ela (24/09/2026). */
.mural-human .mm-workbench > .mm-panel-head:has(#abas-principais) { padding-inline: 0; border-bottom: 0; }
.mural-human .mm-workbench > .mm-panel-head > .nav-tabs { padding-inline: 1.25rem; }
.mural-human #abas-principais .nav-link.active {
  --ui-nav-tabs-link-active-bg: var(--mm-surface-2);
  --ui-nav-tabs-link-active-border-color: var(--mm-border) var(--mm-border) var(--mm-surface-2);
}
@media (max-width: 575.98px) {
  .mural-human .mm-workbench > .mm-panel-head > .nav-tabs { padding-inline: 1rem; }
}
/* ── Acervo de feeds: o cartão é uma prévia de link, no desenho do WhatsApp e do X ──
   Capa 2:1 com a imagem Open Graph do site (o c3 lê na home; o Worker serve em /fo/). Sem imagem,
   ou até ela carregar, a capa é a cor do site (`theme-color`) ou o matiz do monograma: cartões da
   mesma altura, e não escada. O ícone (/fi/) monta sobre a borda da capa. Monograma: branco sobre
   L=32% passa de 5:1 no matiz mais claro. A borda do cartão é a `--mm-border`, que passa 3:1. */
.mural-feeds-grade { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.mural-feeds-cartao { min-width: 0; overflow: hidden; border-color: var(--mm-border); }
.mural-feeds-estado { grid-column: 1 / -1; padding: .75rem .25rem; }
.mural-feeds-capa {
  position: relative; display: block; aspect-ratio: 2 / 1; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--mural-cor) 60%, var(--ui-body-bg)), color-mix(in srgb, var(--mural-cor) 22%, var(--ui-body-bg)));
}
.mural-feeds-og { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.mural-feeds-og.mural-og-ok { opacity: 1; }
/* Sem imagem Open Graph, o ÍCONE do site cobre a capa DESFOCADO — a cor da marca vira a capa, em
   vez da mancha chapada. `scale` porque o desfoque de uma imagem do tamanho da caixa deixa a
   borda transparente. Também é o fundo de logo e quadrado, que a capa mostra inteiros. */
.mural-feeds-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: blur(1.75rem) saturate(1.5); transform: scale(1.35); }
.mural-feeds-fundo.mural-og-ok { opacity: .7; }
/* Com o desfoque atrás, o identicon é marca d'água e não desenho: menor e mais apagado, senão a
   capa gerada grita mais alto que a do site que TEM imagem. */
.mural-feeds-fundo ~ .mural-feeds-gerada { height: 46%; opacity: .5; }
/* Sem Open Graph e com ícone, a capa sai do FAVICON: o desfoque dele atrás e ele mesmo no centro,
   nítido, num quadrado claro de ícone de app — favicon é desenhado para fundo claro, e preto sobre o
   desfoque escuro sumiria. Cinza, e não branco: favicon todo branco (kayhan.ir) sumia no branco. A vista só anuncia ícone guardado, então não há figura quebrada. */
.mural-feeds-icone-capa {
  position: absolute; top: 50%; left: 50%; height: 46%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%);
  object-fit: contain; padding: 6%; border-radius: 22%; background: #e9ecef;
  box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .35), inset 0 0 0 1px rgb(0 0 0 / .14);
}
/* Logo, quadrado ou imagem pequena: inteira no centro, sobre a cor — a miniatura do WhatsApp. */
.mural-feeds-og.mural-og-contida { object-fit: contain; padding: .75rem 2rem; }
/* Capa GERADA (site sem imagem nenhuma): o identicon no centro, num tom claro da cor do site. */
.mural-feeds-gerada {
  position: absolute; top: 50%; left: 50%; height: 64%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%);
  fill: color-mix(in srgb, var(--mural-cor) 40%, #fff); opacity: .9; shape-rendering: crispEdges;
}
/* O domínio no canto da capa, como no X. Fundo próprio escuro: o branco passa de 7:1 sobre qualquer imagem. */
.mural-feeds-host {
  position: absolute; top: .5rem; left: .5rem; max-width: calc(100% - 1rem);
  padding: .05rem .45rem; border-radius: .35rem; font-size: .8125rem; line-height: 1.5;
  color: #fff; background: rgb(0 0 0 / .72);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mural-feeds-marca {
  position: relative; overflow: hidden;
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: .4rem;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem; color: #fff;
  background: hsl(var(--mural-matiz, 210) 45% 32%);
}
/* No cartão e na ficha o ícone monta sobre a borda da capa, com um anel da cor do cartão. */
.mural-feeds-avatar { width: 3rem; height: 3rem; font-size: 1.25rem; border-radius: .6rem; border: 3px solid var(--ui-card-bg); }
.mural-feeds-topo { position: relative; margin-top: -2rem; }
/* O CARTÃO não tem faixa entre capa e título: os atalhos moram no alto à direita da capa e o ícone
   do site embaixo à direita. A capa inteira é link para a ficha (por baixo); os cantos, por cima.
   Fundo escuro próprio nos atalhos, como na etiqueta do domínio: branco passa de 7:1 em qualquer
   imagem, e o alvo de 28 px atende o mínimo de 24 px. */
.mural-feeds-capa-link { position: absolute; inset: 0; z-index: 1; }
.mural-feeds-cartao .mural-feeds-host { z-index: 2; max-width: calc(100% - 5.5rem); pointer-events: none; }
.mural-feeds-acoes { position: absolute; top: .5rem; right: .5rem; z-index: 2; display: flex; gap: .25rem; }
.mural-feeds-acao {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: .4rem;
  color: #fff; background: rgb(0 0 0 / .72); text-decoration: none;
}
.mural-feeds-acao:hover, .mural-feeds-acao:focus-visible { color: #fff; background: rgb(0 0 0 / .9); }
.mural-feeds-acao:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.mural-feeds-marca-capa {
  position: absolute; right: .5rem; bottom: .5rem; z-index: 2; width: 2.5rem; height: 2.5rem;
  border-radius: .5rem; font-size: 1.1rem; box-shadow: 0 0 0 2px rgb(0 0 0 / .4); pointer-events: none;
}
/* O favicon na aba: o monograma do cartão no tamanho de um ícone de fita. */
.mural-aba-marca { width: 1.15rem; height: 1.15rem; border-radius: .25rem; font-size: .6rem; }
/* O ícone cobre o monograma quando existe. Nasce invisível: sem isso, domínio sem ícone
   mostraria a figura quebrada do navegador por cima da letra. */
.mural-feeds-marca img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  background: var(--ui-body-bg); opacity: 0;
}
.mural-feeds-marca img.mural-marca-ok { opacity: 1; }
/* A bandeira do idioma do site (flag-icons 4:3, servida de /flags). O contorno separa branco do fundo. */
.mural-bandeira { flex: 0 0 auto; width: 1.25rem; height: auto; aspect-ratio: 4 / 3; border-radius: 2px; box-shadow: 0 0 0 1px rgb(127 127 127 / .35); vertical-align: -.15em; }
/* O ritmo do feed: a etiqueta (diário… parado), as barrinhas dos 30 dias e o número que importa. */
.mural-feeds-ritmo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; min-width: 0; }
.mural-feeds-barras { flex: 1 0 100%; width: 100%; height: auto; }
.mural-feeds-dia-0 { fill: var(--ui-tertiary-bg); stroke: var(--ui-border-color); stroke-width: .5; }
.mural-feeds-dia-1 { fill: color-mix(in srgb, var(--ui-success) 40%, var(--ui-body-bg)); }
.mural-feeds-dia-2 { fill: color-mix(in srgb, var(--ui-success) 70%, var(--ui-body-bg)); }
.mural-feeds-dia-3 { fill: var(--ui-success); }
/* Três linhas de descrição: altura parecida com a do vizinho, e feed de notícia traz parágrafo inteiro aqui. */
.mural-feeds-desc { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Numa coluna só não há vizinho para igualar: capa sem imagem encolhe e não gasta a tela do celular. */
@media (max-width: 575.98px) {
  .mural-feeds-capa-vazia { aspect-ratio: 4 / 1; }
}
.mural-human .mural-busca-faixa {
  margin: -1rem -1.25rem 1rem; padding: 1rem 1.25rem;
  background: var(--mm-surface-2); border-bottom: 1px solid var(--mm-border);
}
/* Ficha aberta: respiro abaixo da fita de abas. O `pb-0` do cabeçalho cola as abas no corpo —
   no mosaico isso une a busca; na ficha o cartão ficava colado na fita. */
.mural-human #pane-item { padding-top: 1.75rem; }
/* A fita de item (lista + fichas abertas) nascia colada na fita de tipos — sem margem, as duas
   bordas do `nav-tabs` viravam uma linha só. */
.mural-human #abas-itens:not([hidden]) { margin-top: 1rem; }
.mural-human #mosaico .list-group-item, .mural-human #meus .list-group-item, .mural-human #fila .list-group-item { padding: 1rem 1.25rem; }
/* A linha do registro no vocabulário da capa: o tipo num ladrilho tingido, o nome um degrau maior e a
   linha inteira respondendo ao ponteiro (24/09/2026, dono: "os cards ficou básico demais"). */
.mural-human .mural-row { transition: background-color .15s ease; }
.mural-human .mural-row:hover, .mural-human .mural-row:focus-within { background-color: var(--mm-surface-2); }
.mural-human .mural-row [data-abrir-item] { font-size: 1.0625rem; }
@media (prefers-reduced-motion: reduce) { .mural-human .mural-row { transition: none; } }
.mural-install { border-top: 1px solid var(--mm-border); border-bottom: 1px solid var(--mm-border); padding: 1rem 0; }
.mural-install > summary { font-weight: 600; }
.mural-guide { padding-left: 1.5rem; }
.mural-guide li { padding: .4rem 0 .4rem .5rem; }
@media (max-width: 575px) {
  .mural-row { flex-wrap: wrap; }
  .mural-row > .mw0 { flex-basis: calc(100% - 40px - 1rem); }
  /* Os botões descem para o fim da linha de baixo. O recuo fixo de 2.25rem dobrava com o texto a 200% e empurrava o
     grupo para fora da tela. */
  .mural-row > .btn-group { max-width: 100%; margin-left: auto; }
}

.mural-human [hidden] { display: none !important; }