/* O aceite dos MODs — ADR 0045.
 *
 * A moldura e o véu são os da `camada-nomear`, de propósito: este é o mesmo
 * tipo de momento — o produto parou e está esperando uma resposta —, e um
 * segundo vocabulário visual para a mesma coisa ensinaria a lê-los como coisas
 * diferentes.
 *
 * O que muda é a largura e a lista. Uma pergunta sobre rodar código de terceiro
 * na própria máquina não cabe na caixa de 420px em que se digita um nome: aqui
 * a pessoa **compara** itens, e comparar precisa de linha. */

.camada-mods {
  position: fixed;
  inset: 0;
  z-index: 27;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.camada-mods::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--seele-negro-absoluto);
  opacity: 0.78;
}

.mods-caixa {
  position: relative;
  width: 100%;
  max-width: 640px;
  /* A caixa nunca passa da janela, e é o corpo que rola — ver `.mods-lista`.
   * Um diálogo mais alto que a tela põe os botões fora dela, e os botões são a
   * única saída desta pergunta. */
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  background: var(--seele-negro-painel);
  border: 1px solid var(--seele-laranja-nerv);
}

.mods-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  background: var(--seele-laranja-nerv);
  color: var(--seele-negro-absoluto);
  flex: 0 0 auto;
}

.mods-titulo {
  margin: 0;
  font-family: var(--seele-display);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.08em;
}

.mods-contagem {
  font-family: var(--seele-mono);
  font-size: var(--seele-t-rotulo);
  letter-spacing: 0.08em;
}

.mods-corpo-geral {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

.mods-prosa {
  margin: 0;
  font-size: var(--seele-t-corpo);
  line-height: 1.45;
  color: var(--seele-osso);
}

.mods-servidor-alvo {
  margin: 0;
  font-size: var(--seele-t-dado);
  color: var(--seele-osso-apagado);
}

.mods-alvo {
  font-family: var(--seele-mono);
  color: var(--seele-osso);
}

/* **A lista rola, e o resto não.**
 *
 * O número de MODs vem do servidor, e nada o limita a caber numa tela. Sem
 * isto, um servidor com muitos MODs empurraria os botões para fora da janela —
 * e o `base.css` põe `overflow: hidden` no `body`, então nem a janela rolaria
 * atrás. A pessoa ficaria presa numa pergunta sem como respondê-la. */
.mods-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  min-height: 0;
  background: var(--seele-linha);
  border: 1px solid var(--seele-linha);
}

.mods-item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: var(--seele-negro-painel);
}

.mods-ordem {
  font-family: var(--seele-mono);
  font-size: var(--seele-t-rotulo);
  color: var(--seele-osso-apagado);
  flex: 0 0 auto;
  padding-top: 2px;
}

.mods-corpo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.mods-id {
  font-family: var(--seele-mono);
  font-size: var(--seele-t-corpo);
  color: var(--seele-osso);
  word-break: break-all;
}

.mods-versao {
  font-family: var(--seele-mono);
  font-size: var(--seele-t-dado);
  color: var(--seele-osso-apagado);
}

.mods-repo,
.mods-hash {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-family: var(--seele-mono);
  font-size: var(--seele-t-dado);
  color: var(--seele-osso-apagado);
  word-break: break-all;
}

.mods-alcances {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.mods-etiqueta {
  font-family: var(--seele-mono);
  font-size: var(--seele-t-rotulo);
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border: 1px solid var(--seele-linha-forte);
  color: var(--seele-osso);
}

.mods-etiqueta-vazia { color: var(--seele-osso-apagado); }

/* Laranja e não mais uma etiqueta cinza: rodar na máquina de quem hospeda não é
 * mais um alcance entre outros — é código de terceiro rodando no computador de
 * outra pessoa, e o ADR 0045 o separa pelo mesmo motivo. */
.mods-servidor {
  margin: 4px 0 0;
  font-size: var(--seele-t-dado);
  line-height: 1.4;
  color: var(--seele-laranja-nerv);
}

/* A porta do tema (`"tema": true`): também à parte dos alcances, mas sem o
 * laranja do código que roda na máquina de outra pessoa. É aparência, e não
 * rede nem disco. */
.mods-tema {
  margin: 4px 0 0;
  font-size: var(--seele-t-dado);
  line-height: 1.4;
  color: var(--seele-osso);
}

/* O que falhou no aceite, em linhas: `fraseDeErro` de uma falha que a casca não
 * sabe nomear tem três («ALGO FALHOU…», «Se for relatar, copie…», o texto), e
 * sem `pre-line` elas se emendam numa só, com «abaixo» apontando para nada. */
#mods-erro {
  white-space: pre-line;
}

.mods-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

/* ------------------------------------ a gestão, na tela de CONFIGURAÇÕES
 *
 * As duas listas desta seção reusam `.server-dispositivos`, que é a lista de
 * aparelhos: são a mesma forma — uma linha por coisa, com uma ação à direita —
 * e um segundo vocabulário para a mesma forma ensinaria a lê-las como coisas
 * diferentes. O que estas classes acrescentam é só o que difere. */

/* A linha tem duas colunas: o que a coisa é, e o que se faz com ela. O botão
 * não estica junto com o nome — um DESLIGAR largo como o identificador de um
 * MOD vira um alvo de clique do tamanho da tela. */
.mods-linha-gestao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  /* QA-04: em largura pequena a ação desce para a própria linha, em vez de
   * espremer o texto ao lado dela. */
  flex-wrap: wrap;
}

.mods-linha-gestao > .server-dispositivo-nome {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.mods-linha-gestao > .botao-fantasma { flex: 0 0 auto; }

/* A mesma linha de gestão com o texto e as ações separados, para quando há mais
 * de um botão — é o caso de «quem desenha o que», onde a escolha entre dois
 * MODs e o retorno ao padrão convivem. O texto não é um botão ali, então ele
 * não pode usar `.server-dispositivo-nome`, que é. */
.mods-linha-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}

.mods-linha-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}

/* Vermelho, que o `07-estetica.md` reserva para erro. Um MOD que não serve
 * **aparece na lista** em vez de ser escondido: quem copiou a pasta precisa
 * saber que o produto a viu e a descartou, e por quê. Escondê-lo seria o
 * produto sabendo e não contando. */
.mods-recusado {
  font-family: var(--seele-mono);
  font-size: var(--seele-t-dado);
  color: var(--seele-vermelho-alerta);
}

/* As duas listas leem de fora — do disco e do servidor hospedado — e nada
 * limita o tamanho delas. O mesmo motivo do `.mods-lista` do diálogo.
 *
 * **QA-04 de 17/09.** Com a barra aparecendo, o botão da ação ficava colado
 * nela: medido em zero pixel de folga até a borda direita da lista. E a seção
 * inteira já rola, então a barra de dentro fazia duas regiões de rolagem
 * disputarem o mesmo gesto num espaço de dezesseis linhas.
 *
 * `scrollbar-gutter: stable` reserva o espaço com ou sem barra — sem ele, a
 * lista muda de largura quando o conteúdo cresce, e o texto reflui sozinho.
 * O `padding-right` é a folga que faltava entre a ação e a barra.
 *
 * O teto sobe para 60% da janela em vez de dezesseis linhas fixas: um item de
 * catálogo hoje traz título, resumo, versão, etiquetas de alcance e a linha de
 * versão instalada, e dezesseis linhas eram a altura de **um** deles. */
.mods-rolagem {
  max-height: none;
  overflow: visible;
}

/* O aviso de que deu certo ocupa o mesmo lugar do erro, e a cor é o que os
 * separa. Um segundo elemento para a resposta boa ficaria vazio na maior parte
 * do tempo e empurraria o botão para baixo quando aparecesse. */
.mods-aviso-bom { color: var(--seele-fosforo); }

/* O aviso de que a lista mudou desde o último sim. Laranja e não vermelho: não
 * é erro — é a informação que decide se vale a pena ler a lista de novo. */
.mods-mudou {
  margin: 0;
  padding: 8px 10px;
  border-left: 2px solid var(--seele-laranja-nerv);
  font-size: var(--seele-t-dado);
  line-height: 1.4;
  color: var(--seele-laranja-nerv);
}

/* ---------- exigido por este servidor ----------

   Onde quem entrou via um botão DESLIGAR desabilitado. Não é um controle, é
   um fato: o conjunto foi acordado na porta, e sair dele sem sair do servidor
   seria estar na sessão fingindo cumprir o que não cumpre.

   Sem cor de recusa — isto não é um erro, é a condição de estar aqui. Fonte
   de cartela e traço fino, que é como esta casca escreve rótulo. */
.mods-exigido {
  font-family: var(--seele-display);
  font-weight: var(--seele-cartela);
  letter-spacing: var(--seele-tracking-cartela);
  font-size: 0.75rem;
  color: var(--seele-osso-apagado);
  border: 1px solid currentcolor;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
}

/* ---------- o rascunho do conjunto ----------

   A barra existe porque aplicar um conjunto de MODs não é uma mudança local:
   ela derruba todo mundo que está na sessão. O que está pendente fica dito
   antes, e num lugar que não se confunde com a lista.

   Traço em cima e não caixa inteira: é continuação da lista, e não outro
   bloco. */
.mods-rascunho {
  border-top: 1px solid var(--seele-osso-apagado);
  padding-top: 0.75rem;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mods-rascunho-botoes {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* O interruptor de uma linha que difere do servidor. Cor de acento e não de
   recusa: pendente não é erro, é decisão ainda não aplicada. */
.mods-pendente {
  border-color: var(--seele-laranja-nerv);
  color: var(--seele-laranja-nerv);
}


/* O estado de um MOD, em palavra e não em cor — U11.

   Quatro perguntas diferentes que duas palavras respondiam: instalado,
   selecionado, ativo, em execução. `specs/06-clientes-gui.md` recusa informação
   que só a cor carregue, e é por isso que o que está pendente diz «falta
   SALVAR» em vez de ficar laranja e esperar que alguém saiba o que isso é. */
.mods-estado {
  font-family: var(--seele-display);
  font-size: var(--seele-t-rotulo);
  letter-spacing: var(--seele-tracking-rotulo);
  color: var(--seele-osso-apagado);
}


/* As abas da gestão — U12.

   O mesmo desenho das abas que o renderer dos MODs monta (`mods-controles.css`),
   e de propósito: duas maneiras de desenhar a mesma coisa no mesmo produto é
   duas coisas para aprender. As classes são outras porque as folhas caem num
   espaço de nomes só e `no_two_screens_claim_the_same_class_name` reprova. */
.mods-tiras {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--seele-linha);
  margin-bottom: var(--seele-celula-y);
}

.mods-aba {
  min-height: 34px;
  padding: 2px 12px;
  border: 1px solid transparent;
  border-bottom: none;
  background: none;
  color: var(--seele-osso-apagado);
  font-family: var(--seele-display);
  font-size: var(--seele-t-rotulo);
  letter-spacing: var(--seele-tracking-rotulo);
  cursor: pointer;
}

/* Escolhida por três coisas ao mesmo tempo — cor, borda e peso — porque
   `aria-selected` não é visível e cor sozinha não basta
   (`specs/06-clientes-gui.md`). */
.mods-aba[aria-selected="true"] {
  border-color: var(--seele-linha-forte);
  color: var(--seele-osso);
  font-weight: var(--seele-cartela);
  background: var(--seele-negro-painel);
}

.mods-aba:focus-visible {
  outline: 2px solid var(--seele-laranja-nerv);
  outline-offset: -2px;
}

.mods-painel[hidden] { display: none; }
.mods-painel:focus-visible { outline: 2px solid var(--seele-laranja-nerv); }

.mods-linha-gestao button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mods-revisoes { list-style: none; margin-bottom: 16px; }
.mods-revisoes summary { padding: 12px 16px; color: var(--seele-osso-apagado); cursor: pointer; font-size: 12px; }
.mods-revisoes-lista { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1px solid var(--seele-linha); }

/* ------------------------------------------------ o modo de desenvolvedor */

/* **Os contornos ficam sobre a tela, e nunca no caminho dela.**
 *
 * `pointer-events: none` porque um contorno que pegasse o clique tiraria o
 * canal, o nome e o botão de quem conversa; sem nada focável e com
 * `aria-hidden` na página porque o teclado e o leitor de tela são da conversa —
 * a barra de espaço fala, e a regra do push-to-talk é não mexer no foco dela.
 *
 * `z-index: 10`: acima da varredura (9) e da sessão, abaixo de toda camada do
 * produto — o alerta (19–21), as configurações (24), o aceite de MODs (27) e
 * as superfícies de MOD (30 em diante). Um diálogo aberto cobre os contornos,
 * e é assim que tem de ser: o contorno é da tela de baixo. */
.contornos-dos-pontos {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.contorno-de-ponto {
  position: absolute;
  box-sizing: border-box;
  min-width: 2px;
  min-height: 2px;
  border: var(--seele-b) dashed var(--seele-laranja-nerv);
  pointer-events: none;
}

/* O nome como a API o escreve, em negro sobre o acento: 5,71:1. */
.contorno-de-ponto-nome {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 2px;
  font-family: var(--seele-mono);
  font-size: var(--seele-t-micro);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--seele-negro-absoluto);
  background: var(--seele-laranja-nerv);
  pointer-events: none;
}

/* Dito na tela, e não só na configuração: um modo ligado sem nada que o nomeie
   é o modo que alguém esquece ligado. */
.contornos-dos-pontos-aviso {
  position: absolute;
  right: var(--seele-e1);
  bottom: var(--seele-e1);
  margin: 0;
  padding: 2px var(--seele-e1);
  font-family: var(--seele-mono);
  font-size: var(--seele-t-micro);
  color: var(--seele-laranja-nerv);
  background: var(--seele-negro-absoluto);
  border: var(--seele-b) solid var(--seele-laranja-nerv);
  pointer-events: none;
}

/* Quantos lugares à vista o teto de contornos deixou de fora, numa linha
   própria dentro do aviso: o mesmo canto, a mesma cor. */
.contornos-dos-pontos-nota {
  display: block;
  pointer-events: none;
}