/* Os controles que a API 4 acrescentou, e a aparência padrão deles.
   ADR 0052.

   **Padrão, e não moldura.** Tudo aqui é sobrescrevível por `estilo` e por
   classe do MOD — é o ponto inteiro do §4 do plano: «A biblioteca padrão
   acelera projetos simples, mas não é um catálogo fechado de aparências.»

   O que este arquivo garante e um MOD não desfaz está noutro lugar: alvo de
   toque, foco visível e redução de movimento moram em `acessibilidade.css` e
   em `mods-superficies.css`, que carregam depois. */

/* ------------------------------------- o que a API 3 já desenhava

   Vindo de `tela-sessao.css` inteiro, e não copiado: a mesma gramática é
   montada numa contribuição e numa superfície, e duas folhas descrevendo a
   mesma classe é a régua que discorda no dia em que só uma muda. O guarda de
   classes duplicadas de `tests/frontend.rs` pegou exatamente isso.

   (Os seletores presos à faixa da API 3, `.regiao-de-mod `, saíram com ela.) */

/* Tudo o que um MOD declara sai por esta classe, e por isso ela é a única
   régua de espaçamento lá dentro: a gramática de `montarODeclarado` não tem
   como pedir margem, e não ter como é o ponto. */
.regiao-de-mod-parte {
  margin: 0 0 var(--seele-celula-x);
  overflow-wrap: anywhere;
}

/* ---------- o que um MOD declara e a pessoa opera ----------

   Campo, botão, tela e mídia são as formas que criam recurso, e por isso são
   também as que a régua precisa alcançar: uma caixa sem altura mínima é uma
   caixa em que não se acerta o toque, e um MOD não tem como pedir uma. */

/* Um campo é rótulo em cima, controle embaixo — a mesma forma de
   `.server-campo`, e com a mesma folga. Dois pixels entre o rótulo e a caixa
   os colava num bloco só; oito é o que a configuração usa e o que a casca
   antiga dos MODs usava (`label{display:grid;gap:8px}`). */
/* **Uma marca é uma linha, e não uma coluna.**
 *
 * Um campo empilha rótulo e controle; uma caixa de seleção não: o quadrado e o
 * que ele diz são a mesma linha, sempre foram, e empilhá-los punha o nome da
 * opção **embaixo** do quadradinho — que foi o que a prévia do ESTILO virou.
 * A casca antiga escrevia `.sm-check{display:flex;align-items:center;gap:8px}`
 * pela mesma razão. */
label.regiao-de-mod-parte[data-forma="marca"],
label.regiao-de-mod-parte[data-forma="interruptor"] {
  flex-direction: row;
  align-items: center;
  gap: var(--seele-celula-x);
}

.regiao-de-mod-campo,
label.regiao-de-mod-parte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Dez pixels, como `.rotulo` do produto. Doze fazia o rótulo competir com o
   valor que ele nomeia. */
.regiao-de-mod-rotulo {
  font-family: var(--seele-display);
  font-size: var(--seele-t-micro, 10px);
  letter-spacing: var(--seele-tracking-rotulo);
  text-transform: uppercase;
  color: var(--seele-rotulo-painel);
}

/* 36px é a altura dos controles desta casa. `width: 100%` porque um campo
   dentro de um formulário preenche a coluna dele — é o que `base.css` faz com
   `input[type="text"]`, e o que a casca antiga fazia com
   `input:not([type=checkbox]){width:100%}`. Sem isso, um campo de nome numa
   janela de 900 px ficava com a largura padrão do navegador e a linha inteira
   parecia mal dividida. */
.regiao-de-mod-caixa,
.regiao-de-mod-escolha {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 0 var(--seele-celula-x);
  border: 1px solid var(--seele-linha);
  background: var(--seele-negro-absoluto);
  color: var(--seele-osso);
  font-family: var(--seele-mono);
  font-size: var(--seele-t-dado);
}

/* O menu continua nativo ao abrir; o campo fechado segue a régua do app.
   WebKit ignora parte da geometria enquanto desenha o menu com aparência automática. */
select.regiao-de-mod-escolha {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  height: 36px;
  padding-right: 32px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--seele-rotulo-claro) 50%),
    linear-gradient(135deg, var(--seele-rotulo-claro) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.regiao-de-mod-opcao { font-family: var(--seele-mono); }

.regiao-de-mod-escolha:focus-visible,
.regiao-de-mod-caixa:focus-visible {
  outline: 2px solid var(--seele-laranja-nerv);
  outline-offset: 1px;
}

/* 36px, e não 34: `.botao` do produto tem 40 e a WCAG 2.2 pede 24 em AA. A
   diferença que se via era outra — o botão de um MOD ao lado de um botão do
   SEELE, dois pixels mais baixo e com outro respiro lateral. */
button.regiao-de-mod-parte {
  min-height: 36px;
  padding: 0 var(--seele-celula-y);
  border: 1px solid var(--seele-linha-forte);
  background: var(--seele-negro-painel);
  color: var(--seele-osso);
  font-family: var(--seele-display);
  font-size: var(--seele-t-rotulo);
  letter-spacing: var(--seele-tracking-rotulo);
  text-transform: uppercase;
  cursor: pointer;
}

button.regiao-de-mod-parte:disabled { opacity: 0.5; cursor: default; }

canvas.regiao-de-mod-parte {
  max-width: 100%;
  border: 1px solid var(--seele-linha);
  background: var(--seele-negro-absoluto);
  /* A página rola no toque: o dedo no vazio de um tabuleiro é a pessoa
     descendo a tela. O dedo sobre uma figura com chave é do desenho, e o
     `touchstart` do renderer impede a rolagem só nele (D-api-8, item 6). */
  touch-action: pan-x pan-y;
}

figure.regiao-de-mod-parte { margin: 0 0 var(--seele-celula-x); }

/* O estado do carregamento é dito, e não deduzido de a mídia não aparecer:
   «o produto sabe e não conta» é o defeito mais caro deste repositório. */
figure.regiao-de-mod-parte::before {
  content: attr(data-estado);
  display: block;
  font-family: var(--seele-display);
  font-size: var(--seele-t-rotulo);
  letter-spacing: var(--seele-tracking-rotulo);
  text-transform: uppercase;
  color: var(--seele-rotulo-painel);
}

figure.regiao-de-mod-parte[data-estado="pronta"]::before { content: none; }

.regiao-de-mod-tocador {
  display: block;
  max-width: 100%;
  height: auto;
}

/* O botão que toca o som de um MOD. É do produto, como o `<audio controls>`
   que ele substitui (ver `TocadorDeSomDeMod` em mods-regiao.js): o controle
   nativo era o único jeito de uma pessoa tocar um som que o MOD não mandou
   tocar. `botao-fantasma` dá o desenho; esta regra só o afasta da legenda. */
.regiao-de-mod-som {
  margin-top: var(--seele-e1);
}


/* --------------------------------------------------- composição */

/* **A régua é a da superfície, e não uma régua dos MODs.**
 *
 * `--mod-respiro` vem de `.superficie-de-mod` — 16px, 12px quando a superfície
 * aperta. Antes era `--seele-celula-x`, 8px fixo: o mesmo espaço entre um
 * rótulo e o campo dele e entre duas seções de um editor. O reteste de
 * `c4fe3ea` chamou isso pelo nome — «espaçamento e composição» — e é o que
 * separa uma tela desenhada de uma lista de controles.
 *
 * O `16px` de reserva é para a região da faixa, que não tem superfície em
 * volta e onde `--mod-respiro` não está definido. */
.regiao-de-mod-parte[data-forma="pilha"] {
  display: flex;
  flex-direction: column;
  gap: var(--mod-respiro, 16px);
  min-width: 0;
}

/* Um formulário empilha campos com a mesma folga de uma pilha: era a soma de
   `margin-bottom` de cada parte, que numa superfície é zero. */
.regiao-de-mod-parte[data-forma="formulario"] {
  display: flex;
  flex-direction: column;
  gap: var(--mod-respiro, 16px);
  min-width: 0;
}

.regiao-de-mod-parte[data-forma="caixa"] { min-width: 0; }

.regiao-de-mod-parte[data-forma="grade"] {
  display: grid;
  gap: var(--mod-respiro, 16px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.regiao-de-mod-parte[data-forma="rolagem"] {
  overflow: auto;
  min-height: 0;
  min-width: 0;
}

/* Um separador separa **seções**, e por isso a folga dele é a de seção. Com
   8px de cada lado ele encostava nas duas coisas que estava separando, e um
   fio a oito pixels de distância separa menos que o espaço sozinho. */
.regiao-de-mod-parte[data-forma="separador"] {
  border: none;
  border-top: 1px solid var(--seele-linha);
  margin: 4px 0;
}

.regiao-de-mod-parte[data-forma="espaco"] { flex: 1 1 auto; min-height: 4px; }

/* `linha` recebeu layout de verdade: a auditoria notou que ela virava `div`
   sem contrato («`linha` deve de fato ter layout horizontal configurável;
   converter tudo em `div` sem contrato de layout não basta»). */
.regiao-de-mod-parte[data-forma="linha"] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  /* Doze, e não oito: oito é a distância de um rótulo para o campo dele — de
     dentro de um objeto — e usá-la também entre dois objetos vizinhos fazia
     tudo parecer uma coisa só. */
  gap: 12px;
  min-width: 0;
}

/* **Um campo numa linha ocupa o que sobra.**
 *
 * Desde que os controles passaram a ter `width: 100%`, um campo ao lado de um
 * botão — «1d20» e «ROLAR» no tabuleiro da MESA — media o próprio conteúdo e
 * o `<input>` transbordava por cima do vizinho. Crescendo, o campo fica com o
 * espaço que o botão não usa, e os dois encostam pelo `gap`. */
.regiao-de-mod-parte[data-forma="linha"] > label.regiao-de-mod-parte,
.regiao-de-mod-parte[data-forma="linha"] > .regiao-de-mod-campo,
.regiao-de-mod-parte[data-forma="acoes"] > label.regiao-de-mod-parte {
  flex: 1 1 8rem;
  min-width: 0;
}

/* --------------------------------------------------- ações e botões */

.regiao-de-mod-parte[data-forma="acoes"] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.regiao-de-mod-parte[data-forma="acoes"][data-fixas="sim"] { width: 100%; justify-content: flex-end; }

/* As variantes que U04 pediu: «botões visualmente pouco diferenciados […] As
   ações principais parecem controles auxiliares.» A diferença é peso e borda,
   e não só cor — informação que só a cor carrega é o que
   `specs/06-clientes-gui.md` recusa. */
/* Sólida, como `.botao` do produto: a regra de inversão do v2 é que cartela é
   bloco sólido com texto no negro absoluto, e a ação principal de um MOD é
   cartela. Contorno laranja é o que `.botao-secundario` faz, e usá-lo aqui
   apagava a diferença entre «publicar» e «descartar». */
button.regiao-de-mod-parte[data-variante="primaria"] {
  border-color: var(--seele-laranja-nerv);
  background: var(--seele-laranja-nerv);
  color: var(--seele-negro-absoluto);
  font-weight: 700;
}

button.regiao-de-mod-parte[data-variante="primaria"]:disabled {
  background: none;
  color: var(--seele-osso-apagado);
  border-color: var(--seele-linha);
}

button.regiao-de-mod-parte[data-variante="perigo"] {
  border-color: var(--seele-vermelho-alerta);
  color: var(--seele-vermelho-alerta);
}

button.regiao-de-mod-parte[data-variante="discreta"] {
  border-color: transparent;
  color: var(--seele-osso-apagado);
}

button.regiao-de-mod-parte[data-variante="discreta"]:hover {
  border-color: var(--seele-linha);
  color: var(--seele-osso);
}

/* Em progresso é um estado, e ele é dito de duas maneiras: a opacidade e as
   reticências. Só a opacidade seria informação que só a cor carrega. */
button.regiao-de-mod-parte[data-progresso="sim"] { opacity: 0.7; cursor: progress; }
button.regiao-de-mod-parte[data-progresso="sim"]::after { content: "…"; }

/* O que um `arquivo` exige, legível antes de o seletor do sistema abrir. */
button.regiao-de-mod-parte[data-forma="arquivo"][data-exigencia]::after {
  content: " (" attr(data-exigencia) ")";
  color: var(--seele-osso-apagado);
  font-size: var(--seele-t-dado);
}

button.regiao-de-mod-parte[data-forma="arquivo"][data-escolhendo="sim"] { cursor: progress; }

button.regiao-de-mod-parte[data-forma="link"] {
  border: none;
  padding: 0;
  color: var(--seele-laranja-nerv);
  text-decoration: underline;
  text-underline-offset: 2px;
  min-height: 0;
}

/* --------------------------------------------------- campos */

.regiao-de-mod-area {
  width: 100%;
  min-height: 96px;
  padding: 8px;
  border: 1px solid var(--seele-linha-forte);
  background: var(--seele-negro-absoluto);
  color: var(--seele-osso);
  font: inherit;
  resize: vertical;
}

.regiao-de-mod-area:focus-visible,
.regiao-de-mod-deslizante:focus-visible,
.regiao-de-mod-marca:focus-visible,
.regiao-de-mod-cor:focus-visible {
  outline: 2px solid var(--seele-laranja-nerv);
  outline-offset: 2px;
}

.regiao-de-mod-deslizante { flex: 1 1 auto; min-width: 80px; accent-color: var(--seele-laranja-nerv); }

.regiao-de-mod-valor {
  min-width: 3ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--seele-osso-apagado);
}

.regiao-de-mod-marca {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: var(--seele-laranja-nerv);
}

/* Um interruptor é a mesma caixa com outra leitura, e o desenho acompanha:
   `role="switch"` é o que o leitor de tela anuncia, e a pista é a cor de
   fundo mais a posição — nunca só a cor. */
.regiao-de-mod-marca[role="switch"] {
  appearance: none;
  width: 32px;
  height: 18px;
  border: 1px solid var(--seele-linha-forte);
  border-radius: 0;
  background: linear-gradient(var(--seele-osso-apagado), var(--seele-osso-apagado))
    left 3px center / 10px 10px no-repeat var(--seele-negro-painel);
  cursor: pointer;
}

.regiao-de-mod-marca[role="switch"]:checked {
  border-color: var(--seele-laranja-nerv);
  background: linear-gradient(var(--seele-laranja-nerv), var(--seele-laranja-nerv))
    right 3px center / 10px 10px no-repeat var(--seele-negro-painel);
}

.regiao-de-mod-marca[role="switch"]:disabled {
  opacity: 0.5;
  cursor: default;
}

/* A amostra e o hexadecimal são um controle só, lado a lado. */
.regiao-de-mod-cor-linha {
  display: flex;
  align-items: stretch;
  gap: var(--seele-celula-x);
  min-width: 0;
}

/* Quarenta e oito por trinta e seis: a amostra precisa ser **amostra**, e um
   quadrado de 32×24 ao lado de uma caixa de 36 de altura era um detalhe, não
   uma cor. A casca antiga usava `input[type=color]{height:40px}` pela mesma
   razão. */
.regiao-de-mod-cor {
  flex: 0 0 auto;
  width: 48px;
  height: auto;
  min-height: 36px;
  padding: 2px;
  border: 1px solid var(--seele-linha-forte);
  background: var(--seele-negro-absoluto);
  cursor: pointer;
}

.regiao-de-mod-hexa {
  flex: 0 1 auto;
  width: auto;
  max-width: 12ch;
  font-variant-numeric: tabular-nums;
  text-transform: lowercase;
}

/* Um controle inválido é dito por borda **e** por texto: a mensagem sai de
   `data-mensagem-de-erro`, escrita pelo renderer a partir do que o MOD mandou.
   U04 pede medir contraste e alvo; a mensagem existe para quem não vê a cor. */
label.regiao-de-mod-parte[data-invalido="sim"] .regiao-de-mod-caixa,
label.regiao-de-mod-parte[data-invalido="sim"] .regiao-de-mod-area,
label.regiao-de-mod-parte[data-invalido="sim"] .regiao-de-mod-escolha {
  border-color: var(--seele-vermelho-alerta);
}

label.regiao-de-mod-parte[data-mensagem-de-erro]::after {
  content: attr(data-mensagem-de-erro);
  display: block;
  margin-top: 2px;
  color: var(--seele-vermelho-alerta);
  font-size: var(--seele-t-dado);
}

/* O contador do `tamanhoMaximo` (rascunho da API 6, §5): do produto, ao pé do
   campo, e vermelho quando passa — a frase do envio diz o resto. */
.regiao-de-mod-contador {
  display: block;
  margin-top: 2px;
  font-size: var(--seele-t-dado);
  font-variant-numeric: tabular-nums;
  color: var(--seele-rotulo-painel);
  text-align: right;
}

.regiao-de-mod-contador[data-passou="sim"] { color: var(--seele-vermelho-alerta); }

/* --------------------------------------------------- formulário */

form.regiao-de-mod-parte {
  display: flex;
  flex-direction: column;
  gap: var(--seele-celula-x);
  min-width: 0;
}

/* Os botões primário e secundário do formulário são do produto (rascunho da
   API 6, §5): na ponta de baixo, à direita, na ordem da confirmação do
   produto — o secundário antes, o primário na ponta. */
.regiao-de-mod-acoes-do-formulario {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--seele-celula-x);
}

form.regiao-de-mod-parte[data-erro]::before {
  content: attr(data-erro);
  display: block;
  padding: var(--seele-celula-y) var(--seele-celula-x);
  border-left: 3px solid var(--seele-vermelho-alerta);
  background: color-mix(in srgb, var(--seele-vermelho-alerta) 12%, transparent);
  color: var(--seele-osso);
  font-size: var(--seele-t-dado);
}

/* --------------------------------------------------- abas */

.regiao-de-mod-tiras {
  margin-bottom: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--seele-linha);
  margin-bottom: var(--seele-celula-x);
}

.regiao-de-mod-tira {
  min-height: 30px;
  padding: 2px 10px;
  border: 1px solid transparent;
  border-bottom: none;
  background: none;
  color: var(--seele-osso-apagado);
  font: inherit;
  font-size: var(--seele-t-dado);
  letter-spacing: 0.06em;
  cursor: pointer;
}

/* Selecionada por três coisas ao mesmo tempo — cor, borda e peso —, porque
   `aria-selected` não é visível e cor sozinha não basta. */
.regiao-de-mod-tira[aria-selected="true"] {
  border-color: var(--seele-linha-forte);
  color: var(--seele-osso);
  font-weight: 700;
  background: var(--seele-negro-painel);
}

.regiao-de-mod-tira:focus-visible {
  outline: 2px solid var(--seele-laranja-nerv);
  outline-offset: -2px;
}

.regiao-de-mod-tira:disabled { opacity: 0.4; cursor: default; }

/* O palco das abas e o painel de cada uma empilham com a régua de campo. Sem
   isto o conteúdo de uma aba saía colado — a margem de cada parte é zerada
   dentro de uma superfície, e aqui não havia nada no lugar dela. */
.regiao-de-mod-palco {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mod-respiro, 16px);
}

section.regiao-de-mod-parte[data-forma="aba"] {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mod-respiro, 16px);
}
section.regiao-de-mod-parte:focus-visible { outline: 2px solid var(--seele-laranja-nerv); }

/* --------------------------------------------------- retrato */

span.regiao-de-mod-parte[data-forma="retrato"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background: var(--seele-negro-painel);
  border: 1px solid var(--seele-linha-forte);
  color: var(--seele-osso-apagado);
  font-size: var(--seele-t-dado);
  text-transform: uppercase;
}

span.regiao-de-mod-parte[data-formato="circulo"] { border-radius: 999px; }
span.regiao-de-mod-parte[data-formato="arredondado"] { border-radius: 6px; }
span.regiao-de-mod-parte[data-formato="quadrado"] { border-radius: 0; }

.regiao-de-mod-retrato-inicial { pointer-events: none; }

/* A imagem cobre a inicial quando chega; a inicial continua lá embaixo, e é
   por isso que um retrato que falha não vira um quadrado vazio. */
.regiao-de-mod-retrato-imagem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

span.regiao-de-mod-parte[data-forma="distintivo"] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border: 1px solid var(--seele-linha-forte);
  border-radius: 0;
  font-size: var(--seele-t-dado);
  color: var(--seele-osso-apagado);
  white-space: nowrap;
}


/* ------------------------------------- na interface do SEELE

   O que uma contribuição desenha **dentro** de uma tela do produto. Poucas
   regras de propósito: quanto mais este arquivo descrever a linha do roster ou
   o item de canal, mais ele repete o que `tela-sessao.css` já diz — e duas
   folhas descrevendo a mesma coisa é a régua que discorda. */

/* A entrada de navegação de um MOD: o mesmo desenho de um canal, mais a origem.
   Navegação neste produto se parece com navegação; um desenho próprio a faria
   parecer outra coisa, e «outra coisa» é o que ninguém sabe apertar. */
.entrada-de-mod { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding-top: 10px; padding-bottom: 10px; }

.entrada-de-mod-origem {
  margin-left: 0;
  font-size: var(--seele-t-dado);
  color: var(--seele-osso-apagado);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* A linha de uma pessoa apresentada por um MOD.

   O botão é do produto e o conteúdo é do MOD: ele não recebe padding nem
   borda, porque a composição inteira é da declaração. O que ele garante é área
   de toque e foco visível — as duas coisas que um MOD não tem como pedir.

   E nenhuma altura: o resumo é declarado pelo MOD (`linhasMaximas`), nunca
   cortado no meio pela folha. O renderer limita a árvore; a lista conserva a
   rolagem. */
.pessoa-apresentada-porta {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  min-height: 34px;
}

.pessoa-apresentada-porta:focus-visible {
  outline: 2px solid var(--seele-laranja-nerv);
  outline-offset: -2px;
}

/* **O diagnóstico nativo recolhe, e não some.** U15 pediu hierarquia — nome e
   presença primeiro, sinal e detalhes recolhíveis —, e recolher é diferente de
   tirar: quem precisa do sinal continua a um toque dele. */
.pessoa-apresentada { position: relative; padding-right: 24px; }

/* **A linha apresentada começa por `[núcleo] [miolo]`**, numa faixa própria; o
   «⋯» e os acréscimos seguem embaixo, na coluna de sempre da linha (rascunho
   da API 6, §3 e §10; D-nucleo-1). O núcleo é o apelido verificado, à vista,
   nas cores do tema — o que o protege é a estrutura: o lugar à esquerda, e o
   miolo do MOD numa caixa fechada ao lado. O `overflow` e o `contain: paint`
   do miolo cortam o desenho que um MOD desloque por cima do apelido
   (`estilo.mover`), medido em `regioes-do-produto.cjs`. */
.pessoa-apresentada-faixa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  align-items: start;
}

.pessoa-nucleo {
  display: flex;
  min-width: 0;
  max-width: 112px;
  padding-top: 2px;
}

.pessoa-nucleo .pessoa-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pessoa-miolo {
  min-width: 0;
  overflow: hidden;
  contain: paint;
}
.pessoa-nativo { margin: 0; }
.pessoa-nativo[open] { margin-top: 6px; }

/* A linha **nativa** com `pessoa.detalhes`: o mesmo «⋯» da linha apresentada,
   no canto, com o lugar dele reservado. Sem contribuição, a classe não existe
   e a linha é a de sempre. */
.pessoa-com-detalhes { position: relative; padding-right: 24px; }

/* **De quem é cada seção do «⋯»** (`pessoa.detalhes`; decisão da orquestradora,
   16/10): o nome do MOD, escrito pelo produto, fora do nó do MOD e nas cores
   do núcleo, que o tema não alcança — uma seção sem dono ao lado do MODERAR
   seria um MODERAR falsificável. O MOD fica numa caixa que recorta o que ele
   desenha, e o `mover` e o `escalar` não cobrem o nome. As mesmas classes na
   folha da pessoa do celular. */
.contribuicao-de-mod-origem {
  margin: 6px 0 2px;
  font-family: var(--seele-pilha-mono);
  font-size: var(--seele-t-micro, 10px);
  letter-spacing: var(--seele-tracking-rotulo);
  text-transform: uppercase;
  color: var(--nucleo-rotulo);
  background: var(--nucleo-painel);
}
.contribuicao-de-mod-caixa {
  min-width: 0;
  overflow: hidden;
  contain: paint;
}

.pessoa-nativo-resumo {
  position: absolute;
  top: 8px;
  right: 2px;
  width: 22px;
  text-align: center;
  cursor: pointer;
  font-size: var(--seele-t-dado);
  color: var(--seele-osso-apagado);
  list-style: none;
}


.pessoa-nativo-resumo::-webkit-details-marker { display: none; }
.pessoa-nativo-resumo:focus-visible {
  outline: 2px solid var(--seele-laranja-nerv);
  outline-offset: 2px;
}


/* O caminho até o MOD numa linha **sem** cartão: quem não preencheu o perfil é
   quem mais precisa alcançar o editor, e um botão sem nada dentro não é um
   caminho — é um retângulo. */
.pessoa-apresentada-porta-vazia {
  align-self: flex-start;
  min-height: 24px;
  padding: 1px 8px;
  border: 1px solid var(--seele-linha-forte);
  background: none;
  cursor: pointer;
}

.pessoa-apresentada-porta-vazia:hover {
  border-color: var(--seele-laranja-nerv);
}

.pessoa-apresentada-porta-rotulo {
  font-family: var(--seele-display);
  font-size: var(--seele-t-micro);
  letter-spacing: var(--seele-tracking-rotulo);
  text-transform: uppercase;
  color: var(--seele-osso-apagado);
}

.pessoa-apresentada-porta-vazia:hover .pessoa-apresentada-porta-rotulo {
  color: var(--seele-laranja-nerv);
}

/* ------------------------------------- os pontos de contribuição

   O que um MOD acrescenta **dentro** de um componente do SEELE. Poucas regras
   de propósito: a composição é da declaração do MOD, e o que o produto garante
   aqui é o encaixe — que o conteúdo caiba na linha em que ele entrou, e que o
   alvo de clique seja alcançável.

   Nenhuma medida vem de fora. Um contribuinte que pudesse escolher a própria
   altura escolheria a altura da coluna inteira. */

/* A raiz de uma contribuição montada. `contents` é deliberado: ela existe para
   o renderer ter um dono e para o descarte ter um alvo, e não para desenhar
   uma caixa a mais entre o conteúdo do MOD e a linha do produto. */
.contribuicao-de-mod {
  display: contents;
}

/* Dentro de uma linha — um cartão de pessoa, a barra do canal —, o conteúdo
   herda a régua do lugar em que entrou, e não a da região. */
.contribuicao-de-mod > .regiao-de-mod-parte {
  margin: 0;
  font-size: var(--seele-t-dado);
}

/* A ação que um MOD oferece: botão do produto, rótulo do MOD.

   Discreto de propósito. Ele divide a linha com os controles do SEELE — o nome
   que abre a moderação, a lupa da busca, o ENVIAR —, e um contribuinte com o
   peso de uma ação primária competiria com o que a tela existe para fazer. */
.acao-de-mod {
  min-height: 24px;
  padding: 1px 8px;
  border: 1px solid var(--seele-linha-forte);
  background: none;
  color: var(--seele-osso-apagado);
  font: inherit;
  font-size: var(--seele-t-micro);
  letter-spacing: 0.08em;
  cursor: pointer;
  white-space: nowrap;
}

.acao-de-mod:hover {
  border-color: var(--seele-laranja-nerv);
  color: var(--seele-laranja-nerv);
}

.acao-de-mod:focus-visible {
  outline: 2px solid var(--seele-laranja-nerv);
  outline-offset: 2px;
}

/* A faixa que junta as ações de todos os MODs num mesmo lugar — no rodapé de
   um cartão de pessoa, no cabeçalho de um grupo de sala. Ela existe para que
   dois MODs contribuindo no mesmo ponto fiquem lado a lado em vez de cada um
   quebrar a linha do componente por conta própria. */
.faixa-de-acoes-de-mod {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* A faixa do cabeçalho do canal e a do compositor. Vazias não ocupam largura
   nenhuma: um `<span>` sem conteúdo entre o nome do canal e a lupa empurraria
   a lupa por nada. */
.canal-cabecalho-mods,
.compositor-ferramentas {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}