/* Layout do catálogo e das abas sobre os componentes Bootstrap. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.turnstile-slot { min-height: 65px; }
#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; }
/* ── Header no padrão do EditalMD ──
   A arte de camadas cobre as duas barras do chrome (como o .mm-chrome do edm), com o tema
   nativo aparecendo pela transparência do SVG. */
.mm-chrome {
  background-image: url("/media/header-abstrato.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ── Abertura da home: UMA linha ──
   Pílula, título, frase e ação na mesma linha, sobre a arte de camadas do EditalMD
   (header-abstrato.svg, vendorada em public/media/ e registrada na PROCEDENCIA).

   Duas tentativas falharam antes, e por motivos opostos: com quatro itens soltos e `margin-left:auto`
   no botão, era o botão que quebrava sozinho numa segunda linha; empilhando o texto num bloco, a
   frase virava duas linhas e a faixa cresceu para três. A regra que resolve é `nowrap` com um único
   item ELÁSTICO: a frase é quem cede — encolhe e vira reticências — enquanto pílula, título e ação
   mantêm o tamanho. O título só trunca em último caso, antes de estourar a faixa. */
.mural-human .mm-opening {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
  margin-block: 1.25rem .5rem;
  padding: .85rem 1.25rem;
  background-color: var(--mm-surface-2);
  background-image: linear-gradient(90deg, var(--mm-surface-2) 0%, var(--mm-surface-2) 24%, transparent 68%),
    url("/media/header-abstrato.svg");
  background-position: center, right center;
  background-size: auto, auto 100%;
  background-repeat: no-repeat, no-repeat;
  border: 1px solid var(--mm-border);
  border-radius: var(--bs-border-radius-lg, .5rem);
}
.mural-human .mm-opening .mural-abertura-texto {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .85rem;
  flex: 1 1 auto;
  min-width: 0;
}
.mural-human .mm-opening .mm-kicker {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  padding: .25rem .7rem;
  border-radius: 50rem;
  background: var(--mm-accent-soft);
  color: var(--mm-accent-text);
  font-size: .75rem;
  white-space: nowrap;
}
.mural-human .mm-opening h1 {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-size: clamp(1.125rem, .7vw + .8rem, 1.5rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mural-human .mm-opening .mm-lead {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: .875rem;
  color: var(--mm-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mural-human .mm-opening .mural-abertura-acoes { flex: 0 0 auto; margin: 0; }
/* Abaixo de lg a linha única seria mentira: a frase sai (o título já diz o que é) e a ação assume
   a largura inteira, que é o lugar natural dela no telefone. */
@media (max-width: 991.98px) {
  .mural-human .mm-opening { flex-wrap: wrap; }
  .mural-human .mm-opening .mm-lead { display: none; }
  .mural-human .mm-opening h1 { white-space: normal; overflow: visible; }
}
@media (max-width: 575.98px) {
  .mural-human .mm-opening .mural-abertura-acoes,
  .mural-human .mm-opening .mural-abertura-acoes .btn { width: 100%; }
}
.mural-guia-linhas { margin: 0; }

/* Arte do horizonte na borda inferior. O miolo (marca, badges, meta) mora em human-ui.css. */
.mural-footer { background-image: url("/media/footer-abstrato.svg"); background-position: center bottom; background-size: 100% 5rem; background-repeat: no-repeat; }
.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; }
/* 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); }
/* ── 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(--bs-body-bg)), color-mix(in srgb, var(--mural-cor) 22%, var(--bs-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(--bs-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(--bs-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(--bs-tertiary-bg); stroke: var(--bs-border-color); stroke-width: .5; }
.mural-feeds-dia-1 { fill: color-mix(in srgb, var(--bs-success) 40%, var(--bs-body-bg)); }
.mural-feeds-dia-2 { fill: color-mix(in srgb, var(--bs-success) 70%, var(--bs-body-bg)); }
.mural-feeds-dia-3 { fill: var(--bs-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; }
/* Fechar DENTRO do chrome da aba, sem botão dentro de botão: o `nav-link` é o continente. */
.mural-human .mural-aba-abrir {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; line-height: inherit; text-align: start; cursor: pointer; max-width: 14rem;
}
.mural-human #abas-itens .btn-close {
  --bs-btn-close-width: .5rem; --bs-btn-close-height: .5rem;
  padding: .2rem; margin: 0; opacity: .55;
}
.mural-human #abas-itens .nav-link:hover .btn-close,
.mural-human #abas-itens .nav-link.active .btn-close { opacity: .85; }
/* Selo neutro que SEGUE O TEMA. `text-bg-light` é claro fixo: no escuro vira mancha branca sobre
   o painel, e esta tela tem dezenas de selos por linha. O EditalMD não usa `text-bg-light` em
   lugar nenhum — todo selo dele é cor de tema. Fundo de painel dentro da banda (que é tingida) e
   contorno sutil na lista: o mesmo selo lê bem nos dois fundos. */
.mural-human .badge.mural-selo {
  background: var(--mm-surface); color: var(--mm-text);
  border: 1px solid var(--mm-border); font-weight: 500;
}
.mural-human a.badge.mural-selo:hover { background: var(--mm-accent-soft); color: var(--mm-accent-text); }
.mural-busca-rotulo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem; margin-bottom: .4rem; }
.mural-busca-rotulo .form-label, .mural-busca-rotulo .form-text { margin: 0; }
.mural-human .mm-kind-help { max-width: none; margin-bottom: 1rem; }
.mural-human #mosaico .list-group-item, .mural-human #meus .list-group-item, .mural-human #fila .list-group-item { padding: 1rem 1.25rem; }
.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% - 3rem); }
  .mural-row > .btn-group { margin-left: 2.25rem; }
}

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