/* As superfícies de um MOD: página, painel, diálogo, popover e notificação.
   ADR 0052.

   O que este arquivo faz é **dar o palco**: onde a superfície mora, como ela
   se comporta no espaço que resta, e o que o produto garante lá dentro (foco,
   saída, rolagem, tamanho mínimo). O que o MOD desenha dentro dela sai de
   `mods-estilos.js`, e nenhuma regra daqui tenta descrevê-lo.

   A razão de separar é a que a auditoria de 20/09/2026 encontrou: a faixa de
   240 px era o palco **e** a moldura, e por isso «editar perfil, escolher tema
   e jogar» eram a mesma caixa estreita. Palco e conteúdo separados é o que
   permite a mesma API servir a um diálogo de 400 px e a uma mesa de jogo. */

/* ------------------------------------------------------------ o palco geral */

/* O contêiner de consulta de todas as superfícies: é ele que faz
   `@container superficie-de-mod` responder pela largura **da superfície**, e
   não pela da janela. Um painel arrastado para 300 px numa janela de 1400
   precisa da primeira resposta. */
.superficie-de-mod {
  /* A camada cobre a sessão: não há varredura por cima nem faixa que desça, e
     o rótulo miúdo sobe para o token da condição limpa — ver
     `--seele-rotulo-claro` em `tokens.css`, com a medida escrita. */
  --seele-osso-apagado: var(--seele-rotulo-claro);
  --seele-rotulo-painel: var(--seele-rotulo-claro);
  container: superficie-de-mod / inline-size;
  color: var(--seele-osso);
  font-family: var(--seele-mono);
  font-size: var(--seele-t-corpo, 13px);
  min-width: 0;
  min-height: 0;

  /* **A margem interna de uma superfície, num lugar só.**
   *
   * Ela era `var(--seele-celula-y) var(--seele-celula-x)` — 16px em cima e
   * **8px dos lados**. Oito pixels é a régua de um espaço entre controles, e
   * não a de uma margem de janela: o conteúdo encostava na borda, e o reteste
   * de `c4fe3ea` leu isso como «compartilhar cores do SEELE sem reproduzir sua
   * tipografia, hierarquia, espaçamento e composição não produz integração
   * visual».
   *
   * Vinte é o que `camada-moderar.css` usa no corpo dela, e é a régua desta
   * casa para o interior de uma camada. Dezesseis quando a superfície aperta —
   * consulta **do contêiner**, porque um painel de 300 px numa janela de 1400
   * precisa da primeira resposta. */
  /* **Três medidas, e elas não são a mesma.** A versão anterior tinha duas, e
   * a segunda servia ao mesmo tempo para «entre dois campos» e «entre duas
   * seções da tela» — com o mesmo valor, nada separava um grupo do seguinte, e
   * a tela lia apertada mesmo com cada peça no lugar.
   *
   * A régua é de quatro em quatro, como a do produto:
   *
   *   8  entre um rótulo e o campo dele  (o par é um só objeto)
   *  16  entre dois campos de um grupo   (`--mod-respiro`)
   *  28  entre duas seções da superfície (`--mod-secao`)
   *  24  da borda da janela ao conteúdo  (`--mod-margem`)
   *
   * O salto de 16 para 28 é o que faz um grupo **ser** um grupo: enquanto a
   * distância entre grupos era a mesma que entre campos, agrupar não produzia
   * nenhuma leitura. */
  --mod-margem: 24px;
  --mod-respiro: 16px;
  --mod-secao: 28px;
}

@container superficie-de-mod (max-width: 520px) {
  .superficie-de-mod { --mod-margem: 18px; --mod-respiro: 14px; --mod-secao: 22px; }
}

/* O cabeçalho de qualquer superfície: a mesma tipografia de cartela que a
   moderação e a configuração usam. O título de uma janela deste produto é
   Saira Condensed em caixa alta, e não o mono do corpo — era a diferença mais
   visível entre a casca antiga dos MODs e a casca do SEELE. */
.superficie-de-mod-titulo {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--seele-display);
  font-weight: var(--seele-cartela, 900);
  line-height: 1.05;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--seele-osso);
  overflow-wrap: anywhere;
}

/* **O cabeçalho quebra a linha, e não a palavra** (achado da tarefa 7 da F3,
   medido em `bancada/camadas.cjs`). Numa coluna de 300 px — a folha, o painel,
   um diálogo estreito —, o título dividia a linha com a origem e a saída, que
   não encolhem, e o `min-width: 0` o deixava ficar mais estreito que uma
   palavra: «EDITA / R / PERFIL». Trocar o `anywhere` por `break-word` não
   mudava nada (medido: as onze quebras continuavam), e dar ao título a largura
   da maior palavra empurrava o FECHAR para fora da coluna. Quebrando a linha,
   a origem e a saída descem quando não cabem, e o título fica com a coluna
   inteira; o `anywhere` continua para a palavra maior que ela. O
   `flex-wrap: wrap` está no cabeçalho de cada superfície. */

/* De quem é a janela. Discreto, e sempre presente: uma tela de MOD
   indistinguível das do SEELE é o que tornaria uma tela de confiança
   falsificável. */
.superficie-de-mod-origem {
  flex: 0 0 auto;
  align-self: center;
  font-family: var(--seele-mono);
  font-size: var(--seele-t-micro, 10px);
  letter-spacing: var(--seele-tracking-rotulo);
  text-transform: uppercase;
  color: var(--seele-rotulo-painel);
  white-space: nowrap;
}

/* Tudo o que o renderer monta dentro de uma superfície passa por esta classe.
   Ela é a régua de espaçamento padrão — e só a padrão: um nó com `estilo`
   próprio a sobrescreve, que é o ponto inteiro da API nova. */
.superficie-de-mod .regiao-de-mod-parte { margin: 0; }

/* **O corpo respira sozinho.**
 *
 * A margem de cada parte é zerada acima — ela é da faixa, não de uma janela —,
 * e o que sobrava era zero espaço entre o que o MOD declara no primeiro nível.
 * Um editor com título, formulário e ações saía com as três coisas coladas,
 * e a saída era o autor pôr `intervalo` em tudo.
 *
 * «A biblioteca padrão deve produzir uma interface coerente e bem acabada sem
 * exigir que cada autor reconstrua tudo»: o corpo é uma coluna com a régua da
 * superfície, e quem quiser outra coisa declara `pilha` ou `grade` com o
 * `intervalo` dele. */

/* ------------------------------------------------------------- os palcos */

/* **Na mesma célula da conversa, e não numa coluna nova.** Uma página de MOD
   substitui a conversa enquanto está aberta; a coluna de salas, a faixa de
   pessoas, a voz e a saída continuam de pé.

   `grid-area` e não uma quinta coluna: a grade de `.paineis` é declarada uma a
   uma, e um quinto filho cairia numa segunda linha — que é a mesma armadilha
   que fez a faixa dos MODs nascer fora de `<main>`. */
.palco-de-paginas {
  grid-area: linha;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  /* Por cima da conversa e não ao lado dela: as duas ocupam a mesma célula, e
     a que está aberta é a que se vê. */
  z-index: 1;
  background: var(--seele-negro-absoluto);
}

.palco-de-paginas[hidden] { display: none; }

/* A página imersiva ocupa a sessão e mantém a saída do produto visível. */
.palco-de-paginas:has(> [data-imersiva="sim"]:not([hidden])) {
  position: fixed;
  inset: var(--seele-barra-janela, 32px) 0 0;
  z-index: 30;
}


/* A coluna dos painéis: ela **acrescenta** uma coluna, e some quando não há
   nenhum. `.paineis` a declara em `tela-sessao.css`. */
.palco-de-paineis {
  display: flex;
  min-width: 0;
  min-height: 0;
}

.palco-de-paineis[hidden] { display: none; }

/* As camadas cobrem a aplicação inteira: irmãs de `<main>`, e não filhas. */
.palco-de-camadas[hidden] { display: none; }

.avisos-de-mod[hidden] { display: none; }

/* ---------------------------------------------------------------- a página */

/* Ocupa a área principal da sessão, no lugar da conversa — e **não** no lugar
   da voz, da lista de pessoas ou da saída. A auditoria foi explícita: «A página
   de um MOD não deve obrigar a desconectar a voz.» */
.pagina-de-mod {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--seele-negro-absoluto);
}

.pagina-de-mod-cabecalho {
  display: flex;
  flex-wrap: wrap; /* a linha, e não a palavra: ver o título */
  align-items: center;
  gap: var(--mod-respiro);
  padding: 16px var(--mod-margem);
  border-bottom: 1px solid var(--seele-linha-forte);
  /* Persistente: a auditoria (U33) mediu que «voltar» ficava no fim de uma
     coluna que também rola, e competia com a navegação longa. */
  position: sticky;
  top: 0;
  z-index: 2;
}

.pagina-de-mod-titulo { font-size: 22px; }

.pagina-de-mod-corpo {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mod-secao);
  /* **A rolagem é da superfície.** U02: a rolagem pertencia ao contêiner dos
     três MODs, e rolar o PERFIS deslocava o ESTILO e sumia com a MESA. */
  overflow: auto;
  padding: var(--mod-secao) var(--mod-margem);
}

/* ------------------------------------------------------ o painel e a folha */

/* A folha é parente do painel (rascunho da API 6, §5): a mesma coluna, e ela
   empilha. Quando o painel sair, no corte da API 6 (tarefa 13), sai o seletor
   dele de cada regra. */
.painel-de-mod,
.folha-de-mod {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid var(--seele-linha-forte);
  background: var(--seele-negro-painel);
}

.painel-de-mod[data-lado="esquerda"],
.folha-de-mod[data-lado="esquerda"] {
  border-left: none;
  border-right: 1px solid var(--seele-linha-forte);
}

.painel-de-mod-cabecalho,
.folha-de-mod-cabecalho {
  display: flex;
  flex-wrap: wrap; /* a linha, e não a palavra: ver o título */
  align-items: center;
  gap: var(--mod-respiro);
  padding: 14px var(--mod-margem);
  border-bottom: 1px solid var(--seele-linha);
}

.painel-de-mod-titulo,
.folha-de-mod-titulo { font-size: 15px; }

.painel-de-mod-corpo,
.folha-de-mod-corpo {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mod-secao);
  overflow: auto;
  padding: var(--mod-secao) var(--mod-margem);
}

.painel-de-mod[hidden],
.folha-de-mod[hidden] { display: none; }

/* Só a folha de cima aparece; as de baixo voltam quando ela fecha
   (`arrumarPalcos`, em `mods-superficies.js`). */
.folha-de-mod[data-abaixo="sim"] { display: none; }

/* -------------------------------------------------------------- o diálogo */

/* A camada que escurece o que está atrás. Ela **não** é o fundo inerte: o que
   torna o fundo inerte é `inert` no elemento, posto por `mods-superficies.js`.
   Escurecer sem tornar inerte é a armadilha clássica — parece modal e responde
   a Tab. */
/* **Abaixo das camadas de confiança do produto, e acima do resto.**
 *
 * Sessenta põe uma superfície de MOD acima de tudo o que a sessão desenha — a
 * ajuda (40), o compartilhamento (30), a configuração (24) — e a revisão de
 * 20/09/2026 mostrou o que faltava do outro lado: «A confirmação nativa também
 * precisa ficar interativa e acima da camada do MOD.»
 *
 * A moderação é onde mora a confirmação de descarte que o produto faz quando
 * um MOD tenta fechar com alterações pendentes, e ela estava em 30 — **atrás**
 * disto. A pessoa via a pergunta do produto por baixo do diálogo que a
 * originou.
 *
 * `camada-moderar.css` subiu para 80, acima também da fila de avisos (70). A
 * regra é a que o §6 do plano escreve: personalização estética não pode
 * «encobrir uma confirmação de confiança do produto». */
.camada-de-mod {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 16px;
  /* **O furo do véu** (rascunho da API 6, §10; tarefa 9): a área do diálogo
     começa depois da barra do operador, e o `clip-path` que
     `mods-superficies.js` escreve deixa a barra fora do véu — e a faixa de
     quem liga, em cima (tarefa 9, Step 5). Sem recorte, as três variáveis são
     zero. */
  padding-left: calc(16px + var(--recorte-esquerda, 0px));
  padding-top: calc(max(24px, env(safe-area-inset-top)) + var(--recorte-cima, 0px));
  padding-bottom: calc(max(24px, env(safe-area-inset-top)) + var(--recorte-baixo, 0px));
  background: color-mix(in srgb, var(--seele-negro-absoluto) 78%, transparent);
}

.camada-de-mod[data-modal="nao"] {
  /* Um diálogo não modal não come os cliques do que está atrás: só a caixa
     dele recebe ponteiro. E a caixa termina antes do recorte, como a do
     modal: a portaria acende embaixo, onde ele mora. */
  pointer-events: none;
  background: none;
  align-items: flex-end;
  justify-content: flex-end;
  padding: calc(24px + var(--recorte-cima, 0px)) 24px calc(24px + var(--recorte-baixo, 0px))
    calc(24px + var(--recorte-esquerda, 0px));
}

.dialogo-de-mod {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* **O host mantém as dimensões dentro da área útil.** §3 do plano: «um valor
     grande não torna o fechamento inalcançável». Um MOD pode pedir 2000 px de
     largura; ele recebe o que couber. */
  /* A área útil é a da camada, sem o recorte (`100%` da caixa de conteúdo
     dela), e não a janela inteira. */
  max-width: min(var(--largura-pedida, 560px), 100%);
  max-height: 100%;
  width: 100%;
  background: var(--seele-negro-painel);
  border: 1px solid var(--seele-linha-forte);
  box-shadow: 0 24px 64px rgb(0 0 0 / 60%);
}

/* O cabeçalho fica **grudado no topo** da rolagem do corpo, como o da casca
   antiga fazia: numa janela de perfil com prévia longa, o nome da janela e a
   saída não podem sair de vista. */
.dialogo-de-mod-cabecalho {
  display: flex;
  flex-wrap: wrap; /* a linha, e não a palavra: ver o título */
  align-items: center;
  gap: var(--mod-respiro);
  padding: 16px var(--mod-margem);
  border-bottom: 1px solid var(--seele-linha-forte);
  background: var(--seele-negro-painel);
  flex: 0 0 auto;
}

.dialogo-de-mod-titulo { font-size: 26px; }

.dialogo-de-mod-corpo {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mod-secao);
  overflow: auto;
  padding: var(--mod-secao) var(--mod-margem);
  background: var(--seele-negro-absoluto);
}

/* O rodapé é fixo por contrato: §3 do plano pede «rodapé fixo» para modais,
   e a razão é que salvar/cancelar não podem sumir no fim de uma rolagem
   longa — que foi o que a auditoria descreveu em U33 sobre as configurações. */
.dialogo-de-mod-rodape {
  flex: 0 0 auto;
  display: flex;
  gap: var(--mod-respiro);
  justify-content: flex-end;
  padding: 16px var(--mod-margem);
  border-top: 1px solid var(--seele-linha-forte);
  background: var(--seele-negro-painel);
}

/* ------------------------------------------------------- a saída, sempre */

/* Um botão do produto, e não do MOD: é o que garante que fechar continue
   alcançável mesmo quando a superfície do MOD está em erro, vazia ou saturada.
   §6: «O host sempre pode fechar superfícies, restaurar a navegação, mostrar
   permissões reais e sair do servidor.» */
.superficie-de-mod-sair {
  flex: 0 0 auto;
  /* Na borda direita, também quando desce para a linha de baixo. */
  margin-left: auto;
  min-height: 28px;
  padding: 2px 10px;
  border: 1px solid var(--seele-linha-forte);
  background: transparent;
  color: var(--seele-osso);
  font: inherit;
  font-size: var(--seele-t-dado, 11px);
  letter-spacing: 0.08em;
  cursor: pointer;
}

.superficie-de-mod-sair:hover { border-color: var(--seele-laranja-nerv); }
.superficie-de-mod-sair:focus-visible {
  outline: 2px solid var(--seele-laranja-nerv);
  outline-offset: 2px;
}

/* --------------------------------------------------------- a notificação */

.avisos-de-mod {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.aviso-de-mod {
  pointer-events: auto;
  padding: var(--seele-celula-y) var(--seele-celula-x);
  border: 1px solid var(--seele-linha-forte);
  border-left: 3px solid var(--seele-laranja-nerv);
  background: var(--seele-negro-painel);
  color: var(--seele-osso);
  font-size: var(--seele-t-dado, 11px);
  overflow-wrap: anywhere;
}

.aviso-de-mod[data-tom="erro"] { border-left-color: var(--seele-vermelho-alerta); }

/* ----------------------------------------------------- as animações do MOD */

/* Quatro presets, e nenhum keyframe declarado por um MOD: ver a razão em
   `mods-estilos.js`. Os nomes são os que `ANIMACOES_DO_MOD` mapeia. */

@keyframes seele-mod-pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@keyframes seele-mod-aurora {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes seele-mod-brilho {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

@keyframes seele-mod-flutuar {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

/* A aurora precisa de um fundo maior que a caixa para ter para onde correr. */
[style*="seele-mod-aurora"] { background-size: 220% 220%; }

/* **Quem pediu menos movimento recebe menos movimento**, e o MOD não tem como
   passar por cima: esta regra é do produto e vem depois da folha da superfície.
   §8 do plano: «Pausar quando invisível, respeitar redução de movimento,
   oferecer versão estática.» */
@media (prefers-reduced-motion: reduce) {
  .superficie-de-mod *,
  .contribuicao-de-mod * {
    animation: none !important;
    transition: none !important;
  }
}

/* E quando a superfície não está visível, o desenho dela para. Um painel
   recolhido com uma animação de dois segundos continua compondo quadros. */
.superficie-de-mod[hidden] *,
[data-suspensa="sim"] * {
  animation-play-state: paused !important;
}