/* A camada que põe a configuração por cima, e não no lugar.

   ---- por que ela deixou de ser um diálogo de 840 × 620 ----

   U29 da auditoria de 20/09/2026 mediu o que sobrava: «o modal tem largura
   máxima de 840 px e altura `min(620px, calc(100vh - 96px))`; a grade reserva
   216 px à navegação. No limite máximo, sobram aproximadamente 574 px internos
   para conteúdo». Dentro desses 574 px moravam a gestão de MODs inteira — com
   catálogo, cache, consentimentos e contadores —, a administração do servidor e
   a documentação de cada controle.

   A razão de ser camada e não tela continua valendo e está escrita em
   `index.html`: trocar de microfone no meio de uma conversa é o caso de uso, e
   uma tela que substitui a sessão esconde o que se está tentando consertar. O
   que mudou foi o **tamanho**: ela ocupa a área útil da janela, com a folga que
   a mantém legível, em vez de uma caixa que cabia numa tela de 2015.

   A voz e a conexão continuam de pé atrás dela — é a mesma camada, com o mesmo
   `z-index` —, e a faixa de contexto no cabeçalho diz isso em palavra. */
.camada-server {
  /* 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);
  position: fixed;
  inset: 0;
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vh, 32px) clamp(12px, 3vw, 48px);
}

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

/* A caixa, com os valores literais da comp — e três deles eram defeito.
 *
 * **`background`.** Ela não tinha nenhum. O véu do `::before` é 0,78 sobre o
 * negro, e portanto translúcido: a tela de trás continuava legível através da
 * configuração. Na entrada, cujo fundo é claro de textura, ficava «ainda mais
 * feio» — que é como o relato de campo o descreveu.
 *
 * **`height` fixa, e não `max-height`.** Com a altura vindo do conteúdo, o
 * diálogo mudava de tamanho a cada seção escolhida na coluna da esquerda: o
 * mesmo diálogo, saltando, como se cada seção fosse uma janela diferente. A
 * comp escreve `min(620px, calc(100vh - 96px))` — 620 quando cabe, e o que
 * sobra da janela quando não cabe, sempre com os 32px de folga em volta mais
 * a margem de 16 de cada lado.
 *
 * **`max-width` de 840px**, e não 1040: era largura nossa, não da comp. */
.camada-server > .server {
  position: relative;
  width: 100%;
  /* **A área útil, e não 840 px.** Um teto ainda existe — uma coluna de texto
     de 1600 px é ilegível, e o §«Formato recomendado» da auditoria pede
     «coluna de leitura confortável» em vez de parágrafos esticados pela
     largura inteira. O que ele não faz mais é caber numa caixa de 574 px de
     conteúdo com a gestão de MODs inteira dentro. */
  max-width: min(1400px, 100%);
  height: min(920px, calc(100vh - 24px));
  background: var(--seele-negro-painel);
  border: 1px solid var(--seele-linha-forte);
  overflow: hidden;
}

/* SEELE — o Terminal Server (`#tela-server`).
   A configuração local: o que é desta máquina e não deste servidor. §8 do comp v3.

   Carrega depois de `base.css` e depende disso: `.server-entrada`, o botão que
   abre esta tela lá da entrada, refina o `.botao-fantasma` de lá, e
   `.server-painel .rotulo` refina o `.rotulo` — os dois perderiam o empate na
   ordem inversa.

   ---- a grade ----

   O comp v3 desenha `250px minmax(0,1fr)`. Aqui são 248px, que é 31 células de
   8 — o mesmo arredondamento que `docs/tokens-achados.md` já registra entre a
   célula de 8×16 dos tokens e a grade de 4px do comp, e dois pixels não mudam
   onde TERMINAL SERVER quebra. Todo o resto do espaçamento aqui é célula.

   ---- toda classe daqui começa por `server-` ----

   Não é gosto nem verbosidade. As folhas de tela caem num só espaço de nomes,
   na ordem em que `index.html` as carrega, e duas telas escolhendo o mesmo nome
   não é um conflito que o navegador reporte: é a folha de baixo ganhando todo
   empate em silêncio. `no_two_screens_claim_the_same_class_name` guarda isso, e
   o prefixo é o que faz esta folha nunca precisar dele. As versões anteriores
   desta tela chamavam a lista de `.microfone` e o medidor de `.medidor`, dois
   nomes que qualquer tela com áudio dentro escolheria também.

   O que **não** ganha prefixo é o que esta folha não inventou: `.rotulo`,
   `.erro`, `.ausente`, `.botao-fantasma` e `.nota` são de `base.css`, e
   refiná-los é para isso que a ordem de carga existe. Reivindicar `.nota` seria
   esta tela decidindo sozinha se a explicação de um controle aparece, e
   `the_note_beside_a_control_is_defined_once_and_never_by_a_screen` reprova. */

.server {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
}

/* ---------- a coluna das seções ---------- */

.server-coluna {
  background: var(--seele-negro-painel);
  border-right: 1px solid var(--seele-linha-forte);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

.server-marca {
  padding: 16px;
  border-bottom: 1px solid var(--seele-linha);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

/* `line-height: 1` porque a cartela é 22px numa página de entrelinha 16: sem
   isto a linha da marca cresce e empurra a primeira seção meia célula. */
.server-marca-titulo {
  margin: 0;
  font-family: var(--seele-display);
  font-weight: var(--seele-cartela);
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--seele-laranja-nerv);
}

.server-secoes {
  margin: 0;
  padding: 0;
  list-style: none;
  flex-shrink: 0;
}

/* Uma seção. Botão de verdade — e não o `<span>` que esta tela usava quando só
   havia uma —, porque agora as quatro levam a painéis diferentes. */
.server-secao {
  width: 100%;
  min-height: 48px;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  font: inherit;
  text-align: left;
  color: var(--seele-osso);
  background: none;
  /* A marca laranja da esquerda é o que o comp usa para dizer "esta". Reservada
     em transparente nas outras para que acender não empurre o texto 2px. */
  border: none;
  border-bottom: 1px solid var(--seele-linha);
  border-left: 2px solid transparent;
  cursor: pointer;
}

.server-secao:hover { background: var(--seele-negro-absoluto); }
.server-secao:focus-visible { outline: 2px solid var(--seele-osso); outline-offset: -2px; }

/* A seção aberta. Nunca só pela cor: `aria-current` é o que um leitor de tela
   anuncia, e a barra da esquerda é o que sobra em monocromático —
   `specs/06-clientes-gui.md` proíbe informação transmitida só por cor. */
.server-secao[aria-current="true"] {
  border-left-color: var(--seele-laranja-nerv);
  background: var(--seele-laranja-fraco);
  color: var(--seele-laranja-nerv);
}

.server-secao-icone {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--seele-osso-apagado);
}

.server-secao[aria-current="true"] .server-secao-icone { color: var(--seele-laranja-nerv); }

.server-secao-texto {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.server-secao-nome {
  font-family: var(--seele-display);
  font-weight: var(--seele-cartela);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.1em;
}

/* Os grupos da coluna — U31.

   Os cabeçalhos separam dispositivo, MODs, servidor e aplicativo. A explicação
   de cada escolha fica no painel correspondente, sem repetir notas na navegação. */
/* Os grupos, com a régua apertada depois da validação nativa de 20/09/2026.

   Quatro grupos com título, nota e seções de 56px faziam `ESTE SERVIDOR` cair
   perto do fim da tela e `APLICATIVO` exigir rolagem, numa janela de 768px de
   altura. O que saiu foi espaço e repetição — as seções continuam com alvo de
   toque de 48px, que é o piso, e os títulos de grupo continuam todos lá. */
.server-grupo {
  margin: 0;
  padding: 12px 16px 2px;
  font-family: var(--seele-display);
  font-size: var(--seele-t-rotulo);
  font-weight: var(--seele-cartela);
  letter-spacing: var(--seele-tracking-rotulo);
  color: var(--seele-laranja-nerv);
}



/* A porta de saída, no cabeçalho persistente — U33.

   Ela ficava colada no rodapé de uma coluna que rola, depois de nove seções:
   numa janela baixa saía da tela, e sair da configuração passava a depender de
   rolar até o fim de uma lista. */
.server-voltar {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-align: left;
  color: var(--seele-osso);
  background: var(--seele-negro-painel);
  border: 1px solid var(--seele-linha-forte);
  cursor: pointer;
}

.server-voltar:hover { color: var(--seele-laranja-nerv); }
.server-voltar:focus-visible { outline: 2px solid var(--seele-osso); outline-offset: -2px; }

/* ---------- o corpo ---------- */

.server-corpo {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* O cabeçalho persistente: voltar, categoria atual e contexto — U33.

   `sticky` e não `fixed`: ele pertence ao corpo que rola, e uma barra fixa
   sobre uma camada que já é fixa é um segundo sistema de coordenadas para
   alguém manter em dia. O fundo é opaco porque o conteúdo passa por baixo. */
.server-faixa {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 24px;
  border-bottom: 1px solid var(--seele-linha);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  background: var(--seele-negro-painel);
  flex-wrap: wrap;
}

.server-faixa-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 240px;
}

/* A faixa de contexto: onde você está enquanto mexe aqui.

   Alinhada à direita e em corpo pequeno de propósito — ela responde uma
   pergunta que a pessoa tem («minha voz continua indo?») sem competir com a
   categoria aberta, que é o que ela veio ler. */
.server-contexto {
  margin: 0;
  flex: 0 1 auto;
  max-width: 100%;
  font-size: var(--seele-t-dado);
  color: var(--seele-osso-apagado);
  text-align: right;
  overflow-wrap: anywhere;
}

/* Onde o comp punha SALVAR, DESCARTAR e «alterações não salvas», esta faixa tem
   título e subtítulo e mais nada. A escolha vale na hora e a tela mostra o que
   está valendo — a lista de microfones diz qual abriu, e não qual foi pedido —,
   de modo que não há estado sujo para um rótulo reportar nem nada pendente para
   um botão confirmar. §8.1 do inventário do comp v3 registra a decisão. */
.server-titulo {
  margin: 0;
  font-family: var(--seele-display);
  font-weight: var(--seele-cartela);
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--seele-osso);
}

.server-painel {
  min-height: 0;
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* O comp trava o painel em 860px. Uma linha de 13px monoespaçado atravessando
     uma janela de 1600 é uma linha que ninguém termina de ler. */
  max-width: 860px;
}

.server-painel .rotulo {
  display: block;
  margin: 0;
  font: inherit;
  font-size: var(--seele-t-rotulo);
  font-weight: normal;
  letter-spacing: var(--seele-tracking-rotulo);
  text-transform: uppercase;
  color: var(--seele-osso-apagado);
}

/* O painel de uma seção. Quatro deles, um só visível — `hidden` em `base.css`
   é `display: none !important`, então esconder não deixa a grade com buracos. */
/* 24px entre blocos virou 16px, e 16px dentro deles virou 12px, depois da
   validação nativa de 20/09/2026: «na área de áudio há grandes espaços». Um
   painel que exige rolagem para ver dois blocos é um painel em que a segunda
   decisão não existe até alguém procurá-la. A régua continua sendo múltipla de
   quatro, e os alvos de toque não mudaram. */
.server-painel-secao {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- um bloco ---------- */

.server-bloco {
  border: 1px solid var(--seele-linha);
  display: flex;
  flex-direction: column;
}

.server-bloco-topo {
  padding: 8px 16px;
  border-bottom: 1px solid var(--seele-linha);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.server-bloco-nome {
  margin: 0;
  font-family: var(--seele-display);
  font-weight: var(--seele-cartela);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--seele-laranja-nerv);
}

.server-bloco-corpo {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.server-campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- as listas de dispositivo ---------- */

.server-dispositivos {
  margin: 0;
  padding: 0;
  list-style: none;
  /* `gap: 1px` sobre a cor de linha é a técnica de borda do comp: uma régua de
     1px entre linhas vizinhas sem duas bordas encostando e virando duas. */
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--seele-linha);
  border: 1px solid var(--seele-linha);
}

.server-dispositivo {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px;
  font: inherit;
  font-size: var(--seele-t-dado);
  text-align: left;
  color: var(--seele-osso);
  background: var(--seele-negro-painel);
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
}

.server-dispositivo:hover:not(:disabled) { background: var(--seele-negro-absoluto); }
.server-dispositivo:focus-visible { outline: 2px solid var(--seele-osso); outline-offset: -2px; }

/* O escolhido. Nunca só pela cor: o rótulo `EM USO` vem junto, desenhado pelo
   JavaScript, porque `specs/06-clientes-gui.md` proíbe informação transmitida só
   por cor e uma marca laranja sozinha é exatamente isso. */
.server-dispositivo[data-escolhido="sim"] {
  border-left-color: var(--seele-laranja-nerv);
  background: var(--seele-laranja-fraco);
}

.server-dispositivo-nome { flex: 1; overflow-wrap: anywhere; }

.server-dispositivo-marca {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--seele-osso-apagado);
}

.server-dispositivo[data-escolhido="sim"] .server-dispositivo-marca {
  color: var(--seele-laranja-nerv);
}

/* Nada para escolher. Uma lista vazia não quer dizer "sem microfone" — quer
   dizer que a máquina não quis enumerar —, e a frase que o JavaScript escreve
   aqui diz isso. */
.server-dispositivos-vazio {
  padding: 12px;
  font-size: var(--seele-t-dado);
  color: var(--seele-osso-apagado);
  background: var(--seele-negro-painel);
}

/* ---------- o medidor de entrada ---------- */

.server-medidor {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--seele-fosforo);
  overflow-wrap: anywhere;
}

/* Sem sessão não há nível, e um medidor apagado não é um medidor em zero. */
.server-medidor[data-vivo="nao"] { color: var(--seele-osso-apagado); }

/* ---------- os modos do microfone ---------- */

.server-modos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.server-modo {
  flex: 1;
  min-width: 168px;
  min-height: 56px;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  font: inherit;
  text-align: left;
  color: var(--seele-osso);
  background: none;
  border: 1px solid var(--seele-linha-forte);
  cursor: pointer;
}

.server-modo:hover:not(:disabled) { border-color: var(--seele-laranja-nerv); }
.server-modo:focus-visible { outline: 2px solid var(--seele-osso); outline-offset: 2px; }

.server-modo[aria-pressed="true"] {
  border-color: var(--seele-laranja-nerv);
  background: var(--seele-laranja-fraco);
  color: var(--seele-laranja-nerv);
}

.server-modo-nome {
  font-family: var(--seele-display);
  font-weight: var(--seele-cartela);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.1em;
}

.server-modo-desc {
  font-size: 12px;
  line-height: 1.35;
  color: var(--seele-osso-apagado);
}

.server-modo[aria-pressed="true"] .server-modo-desc { color: var(--seele-laranja-nerv); }

/* ---------- o que saiu daqui ----------

   `.server-chaves`, `.server-chave*` e `.server-interruptor*` desenhavam a seção
   APARÊNCIA, e ela tinha uma chave só: LEGENDAS SIMPLES. Aquela camada de texto
   não é mais um modo — a nota ao lado de um controle é do controle, e aparece
   sempre —, então não sobrou comportamento nenhum para aquela seção ajustar. Ela
   saiu inteira, e estas regras com ela: uma folha que guarda o desenho de um
   controle que não existe é uma folha que promete que ele volta. */

/* ---------- a tabela de atalhos ---------- */

.server-atalhos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.server-atalho {
  padding: 12px 16px;
  border-top: 1px solid var(--seele-linha);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.server-atalho:first-child { border-top: none; }

.server-atalho-texto {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.server-atalho-acao { font-size: var(--seele-t-dado); }

.server-atalho-desc {
  font-size: 12px;
  line-height: 1.35;
  color: var(--seele-osso-apagado);
}

/* A tecla desenhada como tecla. Contorno e fundo do painel, porque ela é a
   única coisa nesta lista que a pessoa vai procurar com o olho. */
.server-atalho-tecla {
  flex-shrink: 0;
  padding: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--seele-laranja-nerv);
  background: var(--seele-negro-absoluto);
  border: 1px solid var(--seele-linha-forte);
}

/*
  A tecla que se pode trocar.

  Herda o desenho da `kbd` ao lado para que a lista continue lendo como uma
  lista — o que muda é o cursor e a moldura ao focar, que é o que diz «isto
  responde». Sem `appearance`, o botão do sistema traria fundo e canto
  arredondados, e o `07-estetica.md` proíbe os dois.
*/
.server-atalho-tecla-troca {
  appearance: none;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.server-atalho-tecla-troca:hover {
  border-color: var(--seele-laranja-nerv);
}

/*
  Enquanto espera a tecla. Não é só a cor que muda: o rótulo vira «APERTE UMA
  TECLA», porque `06-clientes-gui.md` proíbe informação que só a cor carregue.
*/
.server-atalho-tecla-troca[data-ouvindo="sim"] {
  color: var(--seele-negro-absoluto);
  background: var(--seele-laranja-nerv);
  border-color: var(--seele-laranja-nerv);
}

/* ---------- prosa e pares ---------- */

/* Uma frase que o produto tem para dizer, e que não é o rótulo de controle
   nenhum. `60ch` porque abaixo disso a linha de 13px monoespaçado ainda é uma
   linha que se lê de ponta a ponta sem perder a próxima. */
.server-frase {
  margin: 0;
  max-width: 60ch;
  font-size: var(--seele-t-dado);
  line-height: 1.6;
  color: var(--seele-osso);
}

.server-par {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--seele-linha);
}

.server-par-valor {
  font-size: var(--seele-t-dado);
  text-align: right;
  overflow-wrap: anywhere;
}

/* ---------- os controles de qualidade de voz (F01, F02) ----------

   Um marcador, uma régua e um medidor. Zero border-radius e zero sombra, como o
   resto: o que distingue estados aqui é cor **e** texto, nunca cor sozinha. */
.server-marcar {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--seele-t-dado);
  color: var(--seele-osso);
}

.server-regua {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.server-regua input[type="range"] {
  flex: 1 1 160px;
  min-width: 120px;
  accent-color: var(--seele-laranja-nerv);
}

.server-regua-valor {
  font-family: var(--seele-mono);
  font-size: var(--seele-t-dado);
  font-variant-numeric: tabular-nums;
  color: var(--seele-fosforo);
  flex: 0 0 auto;
}

/* O medidor: uma barra do nível e uma marca de onde a transmissão abre.

   A marca é o ponto. Um medidor sem ela é uma barra que se mexe; o que a pessoa
   está ajustando é **onde** ela corta, e sem a marca ela ajusta no escuro. */
.server-nivel-da-voz {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
}

.server-nivel-barra {
  position: relative;
  height: 14px;
  border: var(--seele-b) solid var(--seele-linha-forte);
  background: var(--seele-negro-absoluto);
  overflow: hidden;
}

.server-nivel-preenchido {
  display: block;
  height: 100%;
  width: 0;
  background: var(--seele-osso-apagado);
  transition: width 60ms linear;
}

/* Transmitindo é laranja, e a frase ao lado diz a palavra: quem não distingue as
   duas cores lê `TRANSMITINDO` do mesmo jeito.

   O estado mora **na própria barra** e não no contêiner, e a razão é um guarda:
   `no_class_is_drawn_by_two_stylesheets_without_being_a_declared_refinement`
   conta `.server-nivel-da-voz` como definida duas vezes se ela aparecer também num
   seletor de descendente. O guarda está certo — o que vale na tela é a soma das
   regras — e a forma certa é o estado ficar no elemento que ele pinta. */
.server-nivel-preenchido[data-aberto="sim"] {
  background: var(--seele-laranja-nerv);
}

.server-nivel-corte {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--seele-fosforo);
}

/* ---------- uma lista de itens com uma ação cada ----------

   ADR 0053, e usada pelos domínios de prévia liberados. Cada linha é um item e
   um botão de desfazer: o valor à esquerda, a ação à direita, como no
   `.server-par`. Zero marcador de lista — o item é um dado, não um argumento. */
.server-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.server-lista-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--seele-linha);
}

.server-lista-valor {
  font-size: var(--seele-t-dado);
  overflow-wrap: anywhere;
  min-width: 0;
}

.server-lista-acao {
  background: transparent;
  border: 1px solid var(--seele-linha-forte);
  color: var(--seele-osso);
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  cursor: pointer;
  flex: 0 0 auto;
}

.server-lista-acao:hover,
.server-lista-acao:focus-visible {
  border-color: var(--seele-laranja-nerv);
  color: var(--seele-laranja-nerv);
}

/* ---------- o que ainda não tem comando atrás ----------
   Um controle desabilitado aqui é a exceção, não a convenção: esta tela omite o
   que não existe em vez de desenhá-lo morto. O que sobra desabilitado é o que
   **existe pela metade** — a saída de som, que o plug já abre e ainda não sabe
   enumerar —, e nesse caso apagar a linha esconderia um aparelho que está
   tocando som agora.

   `title` obrigatório junto, sempre: um controle apagado que não diz por quê
   se lê como defeito, e não como lacuna. */
.server-dispositivo:disabled,
.server-modo:disabled {
  opacity: 0.5;
  cursor: default;
}

.server-dispositivo[title]:disabled,
.server-modo[title]:disabled {
  cursor: help;
}

/* ---------- atualizar (ADR 0026) ----------

   A quinta seção, e a única que o comp v3 não desenha — ele é anterior ao botão
   de atualizar existir. Por isso não há geometria dele a seguir aqui: o que há
   são os primitivos desta própria folha (`.server-bloco`, `.server-campo`,
   `.rotulo`) reusados, que é o que mantém a seção parecendo parte da tela em vez
   de um enxerto.

   Nada aqui é vermelho, e a decisão é do `tokens.css`: o vermelho é
   «EXCLUSIVO alerta e queda». Uma atualização que falha não derruba enlace
   nenhum — ela devolve este SEELE exatamente como estava —, e o texto da falha
   já sai vermelho porque `.erro` é de `base.css` e é a mesma faixa de gravidade
   de um erro de conexão. O aviso de antes de instalar é laranja: ele é o acento
   institucional avisando, e não um alarme. */

.server-atualizacao-estado {
  margin: 0;
  font-size: var(--seele-t-dado);
  line-height: 1.6;
  color: var(--seele-osso);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* As notas do release chegam como o autor as escreveu, com as quebras de linha
   dele. `pre-line` é o que as preserva sem virar `<pre>`, que reflui mal numa
   coluna estreita. */
.server-atualizacao-notas {
  margin: 0;
  max-width: 72ch;
  font-size: var(--seele-t-dado);
  line-height: 1.6;
  color: var(--seele-osso);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* O aviso do que instalar custa. Moldura laranja e não vermelha: ele não
   relata falha nenhuma, ele diz o preço de uma ação que ainda não aconteceu. */
.server-atualizacao-aviso {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--seele-laranja-nerv);
  background: var(--seele-laranja-fraco);
}

.server-atualizacao-aviso p {
  margin: 0;
  max-width: 72ch;
  font-size: var(--seele-t-dado);
  line-height: 1.6;
  color: var(--seele-osso);
}

/* A barra de blocos do download, na mesma face e no mesmo desenho das outras
   deste produto. Quando o servidor não diz o total ela vira travessão e ganha
   `.ausente` de `base.css` — a mesma forma que a barra da bateria interna usa
   para a mesma falta. */
.server-atualizacao-barra {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--seele-fosforo);
  overflow-wrap: anywhere;
}

.server-atualizacao-baixados {
  margin: 0;
  font-size: var(--seele-t-dado);
  color: var(--seele-osso);
}

/* ---------- a porta, lá da entrada ----------
   Refina o `.botao-fantasma` de `base.css`, cujo `margin-left: auto` o
   empurraria para a direita dentro do cartão da entrada. */
.server-entrada {
  margin: 16px 0 0;
  width: 100%;
  color: var(--seele-osso-apagado);
}

/* ---------- o servidor: nome e imagem ----------

   A sexta seção, e a única desta tela que não é desta máquina. Sem geometria
   nova: os primitivos daqui (`.server-bloco`, `.server-campo`, `.server-frase`,
   `.rotulo`) reusados, que é o que faz uma seção parecer parte da tela em vez
   de um enxerto. */

.server-nome-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* O nome do servidor cabe em 64 bytes, e uma caixa da largura do painel
   convidaria a escrever um parágrafo. `48ch` é folga sobre o teto sem ser
   convite. */
.server-nome-campo input {
  max-width: 48ch;
}

/* A moldura do que está valendo. Fica de pé com imagem ou sem, e é isso que a
   faz dizer alguma coisa: um espaço em branco onde a imagem apareceria não
   distingue «este servidor não tem imagem» de «esta tela não a buscou». */
.server-icone-molde {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: var(--seele-negro-absoluto);
  border: 1px solid var(--seele-linha-forte);
}

/* `contain` e não `cover`: recortar a imagem de alguém para caber na moldura é
   a tela decidindo o que da imagem importa. O que o servidor aceita já é
   quadrado o bastante — 256px de lado no máximo —, e o que sobra é margem. */
.server-icone-previa {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.server-icone-vazio {
  font-size: var(--seele-t-rotulo);
  letter-spacing: var(--seele-tracking-rotulo);
  color: var(--seele-osso-apagado);
  text-align: center;
}

.server-icone-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* `margin-left: 0` porque `.botao-fantasma` de `base.css` traz um
   `margin-left: auto` que o empurraria para a outra ponta da fileira, longe do
   botão de que ele é o par. */
.server-icone-botoes .botao-fantasma {
  margin-left: 0;
}

/* ---------- a mesma imagem, no cabeçalho da sessão ----------

   Mora nesta folha e não em `tela-sessao.css` porque é aqui que ela é decidida:
   `tela-server.js` é quem sabe quando a imagem mudou e quem a pinta nos dois
   lugares. Esta folha carrega depois daquela, então o empate de especificidade
   com `.topo` e vizinhos é ganho por ordem, e não por sorte.

   56px é a altura do cabeçalho e a largura que o comp v3 dá ao quadrado da
   marca, do outro lado da mesma fileira. A imagem fica no meio dele, contida,
   com a divisória de 1px que separa todo bloco daquele cabeçalho. */
.server-icone-topo {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  padding: 8px;
  object-fit: contain;
  border-right: 1px solid var(--seele-linha);
}


/* APARÊNCIA: dois cartões que dizem o que o tema é, e não o alternam.
 *
 * `disabled` e ainda assim desenhados como cartão: eles informam, e um
 * `cursor: not-allowed` diria que a pessoa tentou fazer algo proibido — ela
 * não tentou, ela leu. Daí `cursor: default` e sem esmaecer o texto, que é o
 * conteúdo. */
.aparencia-lista {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aparencia-cartao {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  color: var(--seele-osso);
  border: 1px solid var(--seele-linha-forte);
}

/* O que está valendo, marcado pela moldura, pelo nome em laranja **e pela
   palavra** — nunca só pela cor (`06-clientes-gui.md`). */
.aparencia-cartao[data-valendo="sim"] {
  border-color: var(--seele-laranja-nerv);
}

.aparencia-cartao[data-valendo="sim"] .aparencia-nome,
.aparencia-cartao[data-valendo="sim"] .aparencia-estado {
  color: var(--seele-laranja-nerv);
}

.aparencia-estado {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--seele-osso-apagado);
}

.aparencia-nome {
  font-family: var(--seele-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
}


/* Os detalhes sob demanda — U30.

   «Explicações longas misturam orientação, funcionamento interno e histórico
   entre os controles.» A regra que a auditoria dá é «controle e estado
   primeiro; ajuda curta; detalhes sob demanda», e este é o lugar do terceiro.

   Sem `::marker` próprio: o triângulo do navegador é o único desenho desta
   janela que já diz «isto abre». */
.server-detalhes > summary {
  cursor: pointer;
  font-size: var(--seele-t-dado);
  color: var(--seele-osso-apagado);
  padding: 4px 0;
}

.server-detalhes > summary:hover { color: var(--seele-laranja-nerv); }
.server-detalhes > summary:focus-visible {
  outline: 2px solid var(--seele-laranja-nerv);
  outline-offset: 2px;
}