/* 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-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;
}
/* A linha do catálogo (`linha.jsx`): a marca, o meio (nome, frase e uma linha de fatos) e, à direita, os botões na
   altura do nome com a confiança embaixo deles. O meio cresce a partir de zero para nunca empurrar a direita para
   baixo; o porquê do nível ocupa a linha de baixo inteira, alinhado ao texto (dono, 05/11/2026). */
.mural-human .mural-row { flex-wrap: wrap; row-gap: .5rem; }
.mural-human .mural-row > .mural-meio { flex: 1 1 0; }
.mural-human .mural-lado, .mural-human .mural-confianca { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; flex-shrink: 0; }
.mural-human .mural-porque { flex-basis: 100%; margin-inline-start: calc(40px + 1rem); }
/* O selo das datas (dois segmentos) no tamanho dos outros selos, sem o negrito do texto em volta, em todo o
   Agentalog: na lista, na ficha e na página `/l/`. Ele herdava o tamanho e o peso do texto em volta: na lista, ficava
   maior que os selos vizinhos; nos fatos da ficha, quebrava em dois blocos. */
.mural-human .mm-selo-composto:not(.fs-6) { font-size: .75rem; font-weight: 400; }
/* O verificado: um tom leve de verde e a faixa verde na borda. O tom cheio do `bg-success-subtle` apagava os selos
   verdes da própria linha ("Online", o "Verificado"). */
.mural-human .mural-row.mural-verificada { background-color: rgba(var(--ui-success-rgb), .07); box-shadow: inset 3px 0 0 var(--ui-success); }
.mural-human .mural-row.mural-verificada:hover, .mural-human .mural-row.mural-verificada:focus-within { background-color: rgba(var(--ui-success-rgb), .12); }
.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ó. Ela ocupa a linha de baixo inteira em toda largura: a 1920 px, cabia ao
   lado da fita dos tipos, mais baixa e com outra linha de borda (dono, 05/11/2026: "tab veia tudo bugada"). */
.mural-human .mural-fita-itens { flex-basis: 100%; 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; } }
/* Vigiar e proteger lado a lado na revisão da ficha (`ficha-seguranca.jsx`): cada um num bloco de fundo leve, com o
   botão ou o estado em cima e o que faz embaixo; no celular, um sobre o outro (dono, 05/11/2026: "ta tudo muito mau
   feito e desorganizado"). */
.mural-human .mural-acoes-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; margin-top: 1rem; }
.mural-human .mural-acao { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: .875rem 1rem; background: var(--mm-surface-2); border-radius: var(--mm-radius); }
/* Nos fatos da revisão, o selo do estado no tamanho do selo das datas. */
.mural-human #item-seguranca .mm-facts dd > .badge { font-size: .75rem; font-weight: 400; }
.mural-human #item-seguranca .mm-facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
/* O README da ficha um degrau abaixo do nome dela: a escala do tema (`main h1` 2rem) vencia a do Markdown e deixava o
   título do README maior que o nome da ficha. */
.mural-human #item-readme .mm-markdown h1 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; }
.mural-human #item-readme .mm-markdown h2 { font-size: 1.125rem; line-height: 1.625rem; font-weight: 500; }
.mural-human #item-readme .mm-markdown :is(h3, h4, h5, h6) { font-size: 1rem; line-height: 1.5rem; font-weight: 500; }
.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); }
  /* No celular, a linha é uma grade: a marca ao lado do nome, a frase e os fatos na largura toda, e a coluna da
     direita vira a faixa de baixo, com a confiança à esquerda e o botão no fim. O recuo da marca em todas as linhas
     gastava um sétimo da tela. */
  .mural-human .mural-row { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: .75rem; }
  .mural-human .mural-row > .mural-meio, .mural-human .mural-row > .mural-lado { display: contents; }
  .mural-human .mural-meio > .mural-nome { grid-column: 2; align-self: center; margin-bottom: 0 !important; }
  .mural-human .mural-lado > :first-child { grid-row: 1; grid-column: 3; align-self: start; }
  .mural-human .mural-meio > .mural-description { margin-bottom: 0 !important; }
  .mural-human .mural-meio > :not(.mural-nome), .mural-human .mural-confianca, .mural-human .mural-porque { grid-column: 1 / -1; }
  .mural-human .mural-porque { margin-inline-start: 0; }
  .mural-human .mural-confianca { flex-direction: row; flex-wrap: wrap; align-items: center; }
  /* A cabeça da ficha na mesma grade: a marca, o nome e o abrir em cima; os selos na largura toda, embaixo (na coluna
     do nome, o + da procedência caía sozinho na linha de baixo). */
  .mural-human .mural-cabeca { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: .75rem; row-gap: .75rem; }
  .mural-human .mural-cabeca > .mural-cabeca-meio { display: contents; }
  .mural-human .mural-cabeca-meio > h1 { grid-column: 2; align-self: center; margin-bottom: 0 !important; }
  .mural-human .mural-cabeca > a { grid-row: 1; grid-column: 3; }
  .mural-human .mural-cabeca-meio > #item-procedencia { grid-column: 1 / -1; }
}

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