/* A folha da voz. Zero estética por decisão (issue #1, decisão 6): o que ela faz é deixar a página
   legível, tocável no celular e honesta sobre o estado — nada além.

   Tema escuro sem alternativa, e é escolha: a página nasce emoldurada na mesa do sanctus, que é
   escura, e uma moldura clara dentro de uma estação escura é a primeira coisa que alguém pede para
   trocar. `color-scheme` faz os controles nativos (o campo de senha, o cursor) virem escuros junto,
   em vez de dois brancos no meio do resto. */

:root {
    color-scheme: dark;
    --fundo: #141417;
    --letra: #e8e8ea;
    --suave: #9a9aa2;
    --linha: #2c2c32;
    --ligado: #2f6f4f;
    --erro: #ff9a8a;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--fundo);
    color: var(--letra);
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

main {
    max-width: 44rem;
    margin: 0 auto;
    padding: 1rem;
}

h1 {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--suave);
    margin: 0 0 1rem;
}

h2 {
    font-size: 1rem;
    margin: 0 0 0.75rem;
}

/* O formulário em coluna: no 375 de largura que a issue pede, três campos lado a lado viram três
   campos ilegíveis. */
form {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 22rem;
}

label {
    color: var(--suave);
    font-size: 0.85rem;
}

input {
    background: #1d1d21;
    color: inherit;
    border: 1px solid var(--linha);
    border-radius: 4px;
    padding: 0.5rem;
    font: inherit;
    /* 16px é o piso que impede o Safari do iPhone de dar zoom sozinho ao focar o campo — e o zoom
       num iframe emoldurado desloca a mesa inteira. */
    font-size: 16px;
}

input:focus-visible,
button:focus-visible {
    outline: 2px solid #6a9fd8;
    outline-offset: 1px;
}

button {
    background: #23232a;
    color: inherit;
    border: 1px solid var(--linha);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    font: inherit;
    cursor: pointer;
    /* 44px de altura mínima: é o alvo de toque que não erra no celular, e mudo é o botão que mais
       se aperta com pressa. */
    min-height: 2.75rem;
}

button:hover:not(:disabled) {
    border-color: #4a4a55;
}

button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* «ligado» é o estado ATIVO de um botão de duas posições — microfone aberto, ouvindo, tela no ar.
   Cor E texto, sempre: o rótulo de cada botão diz o estado em palavras, porque cor sozinha não é
   informação para quem não a distingue. */
button.ligado {
    background: var(--ligado);
    border-color: #3d8a63;
}

#acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

#gente {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.quem {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--linha);
    border-radius: 4px;
}

/* Quem está falando. Borda E o texto «falando» ao lado do nome, pelo mesmo motivo do botão
   ligado. */
.quem.falando {
    border-color: #3d8a63;
}

.nome {
    font-weight: 600;
    margin-right: auto;
}

.suave {
    color: var(--suave);
    font-size: 0.85rem;
}

.erro {
    color: var(--erro);
}

#telas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.tela {
    border: 1px solid var(--linha);
    border-radius: 4px;
    padding: 0.25rem;
}

.tela span {
    display: block;
    color: var(--suave);
    font-size: 0.8rem;
    padding: 0 0.25rem 0.25rem;
}

.tela video {
    display: block;
    width: min(100%, 36rem);
    background: #000;
}