/* A PORTA — a folha das cinco caras da entrada (sanctus#245).
 *
 * Espelha exatamente o `mesa.css`: mora no `contrato`, ao lado da pele comum, e é servida por UM
 * lado só — a mesa é do ambiente, a porta é da plataforma. O que está aqui é o que SÓ a entrada
 * desenha; os tokens (cor e letra) e o vocabulário que os dois lados escrevem ficam no
 * `sanctus.css`, porque um segundo conjunto de cores é como as peles divergiam.
 *
 * A IDEIA: a página é uma soleira. Chão azul-ardósia — a plataforma, fora, fria —, uma peça quente
 * no meio — a porta —, e luz saindo por baixo dela. Uma palavra grande diz o estado do lugar da
 * pessoa; os fatos ficam miúdos em mono logo abaixo; um único botão cheio atravessa a página; o
 * resto cede. Tudo no eixo: nada de alinhamento à esquerda de documento.
 *
 * TUDO EM `em`, e o corpo muda de tamanho com a largura. É o que faz a televisão não ser o
 * computador esticado: a mesma página, a mesma proporção, a letra maior. */

/* ─── o aparelho decide o tamanho da letra ──────────────────────────────────
 * 15 px no celular, 16 no tablet, 17 no computador, 27 na televisão. Só o corpo desta folha: a
 * mesa tem o dela, e o `body` da pele comum continua em 16 px para o resto. */
body { font-size:16px; }
@media (max-width: 560px)  { body { font-size:15px; } }
@media (min-width: 1100px) { body { font-size:17px; } }
@media (min-width: 1600px) { body { font-size:27px; } }

/* A coluna: uma só, no eixo, com o rodapé empurrado para o pé da tela. A pele comum dá 44rem e
   padding de documento; a porta é outra página. */
main { max-width:40em; padding:1.8em 1.4em 3em; display:flex; flex-direction:column;
       gap:1.5em; min-height:100vh; }
@media (max-width: 560px)  { main { padding:1.2em 1.1em 2.2em; gap:1.2em; } }
@media (min-width: 1600px) { main { max-width:44em; padding:2.4em 2em 3em; } }

/* A LUZ POR BAIXO DA PORTA. Fixa no pé da janela e atrás de tudo (`z-index:-1`), então ela não
   entra em nenhuma conta de leiaute e não intercepta clique. */
.luz { position:fixed; inset:auto 0 0 0; height:60vh; pointer-events:none; z-index:-1;
       background:radial-gradient(60% 55% at 50% 100%,
                  color-mix(in srgb, var(--acento) 16%, transparent), transparent 70%); }

/* ─── a linha de cima: a marca de um lado, a pessoa do outro ─────────────── */
.marca { display:flex; align-items:center; gap:.5em; font-family:var(--display); font-weight:500;
         font-size:1.05em; line-height:1; letter-spacing:-.01em; }
.taiji { width:1.35em; height:1.35em; flex:none; }
/* A CÁPSULA: avatar, nome e login. Ela existe para a tela de não-membro poder dizer a conta duas
   vezes — quem tem duas contas na forja era recusado sem saber qual delas tinha entrado. */
.pessoa { display:flex; align-items:center; gap:.55em; padding:.3em .75em .3em .3em;
          border-radius:999px; background:var(--caixa); border:1px solid var(--linha);
          font-size:.85em; }
/* O gradiente vai a 70 % do acento na ponta escura, e não a 40 % como no protótipo: a inicial é
   `--acento-tinta`, e sobre a ponta de 40 % ela media 2,68:1 — o começo da letra legível e o fim
   não. A 70 % o pior ponto do gradiente dá 5,46, e a bolinha continua tendo volume. Medido: numa
   tabela de contraste isso aparecia como 1,11, porque gradiente não é `background-color` e o
   medidor subia para o fundo do pai. */
.pessoa .av { width:1.7em; height:1.7em; border-radius:50%; flex:none;
              background:linear-gradient(135deg, var(--acento),
                         color-mix(in srgb, var(--acento) 70%, var(--fundo)));
              color:var(--acento-tinta); display:grid; place-items:center;
              font-weight:600; font-size:.8em; }
.pessoa .login { color:var(--suave); font-family:var(--mono); font-size:.9em; }

/* ─── a saída, ao lado de quem entrou (sanctus#249) ─────────────────────────
   O «sair» morava no rodapé, DEPOIS da porta, do cartão de versão e das três abas: encerrar a
   sessão custava rolar a página inteira. Ele é um ícone ao lado da cápsula, e o rodapé sumiu das
   quatro caras com sessão. A cara de acesso não tem nenhum dos dois: não há sessão para encerrar.

   O `.canto` é o que mantém os dois JUNTOS na direita. Com os três filhos soltos no
   `space-between` da cabeça, o ícone iria para a borda e a cápsula ficaria no meio da linha — a
   marca de um lado, a pessoa no meio e o botão na ponta, que é o oposto de «ao lado dela».

   A ALTURA É A DA CÁPSULA, E VEM DELA — `align-items:stretch` no canto, `aspect-ratio:1` no
   botão. A conta escrita à mão erra: a cápsula é `.85em` de corpo, mas quem manda na altura dela
   é a CAIXA DE LINHA do nome, não o avatar de `1.7em`, e as duas divergem com a letra. Medido a
   `1.955em`, o botão dava 33,2 contra 33,0 no computador e **52,8 contra 51,3 na televisão** — um
   degrau de 1,5 px ao lado da cápsula, que é justamente onde ele se vê. Com o flex dando a altura
   são 33/33 e 51,3/51,3, em qualquer letra-base.

   O `.icone` da pele comum tem 2.1REM fixas: aqui elas saem, porque rem não acompanharia a letra
   da televisão, que é o que esta folha inteira faz em `em`.

   O CANTO É ARREDONDADO, E NÃO PÍLULA: é o que o protótipo faz, e é o que separa o botão da
   cápsula ao lado. Duas pílulas coladas leem como uma peça só partida no meio. */
.canto { display:flex; align-items:stretch; gap:.5em; }
.canto form { margin:0; display:flex; }
.cabeca .sair { width:auto; height:auto; align-self:stretch; aspect-ratio:1;
                border-radius:.57em; color:var(--suave);
                background:var(--caixa); border:1px solid var(--linha); }
.cabeca .sair::before { width:1.05em; height:1.05em; }
/* A COR DE PERIGO NO HOVER E NO FOCO: é ação que TERMINA alguma coisa, e o ícone sozinho não diz
   isso. O foco entra junto porque quem chega por Tab não tem o ponteiro para descobrir a cor. */
.cabeca .sair:hover, .cabeca .sair:focus-visible {
  color:var(--perigo); border-color:color-mix(in srgb, var(--perigo) 45%, var(--linha)); }

/* ─── a porta ─────────────────────────────────────────────────────────────── */
.porta { background:var(--caixa); border:1px solid var(--linha); border-radius:1.1em;
         padding:1.7em 1.7em 1.6em; display:grid; grid-template-columns:1fr; justify-items:center;
         text-align:center; gap:1.3em;
         box-shadow:0 1px 0 color-mix(in srgb, var(--tinta) 6%, transparent) inset,
                    0 18px 50px rgba(0,0,0,.18); }
.porta .rotulo { font-family:var(--mono); font-weight:500; font-size:.72em; line-height:1;
                 letter-spacing:.14em; text-transform:uppercase; color:var(--suave);
                 margin:0 0 .6em; }
/* A PALAVRA: a única coisa grande da página. É ela que diz o estado do lugar da pessoa — de pé,
   subindo, guardado, ainda não existe — e é por ela que se lê a tela de longe. */
.porta .palavra { font-family:var(--display); font-weight:400; font-variation-settings:"opsz" 144;
                  font-size:3.4em; line-height:1; letter-spacing:-.025em; margin:0;
                  text-wrap:balance; color:var(--tinta); }
.porta .palavra.viva { color:var(--vivo); }
.porta .palavra.morna { color:var(--morno); }
.porta .palavra.fria { color:var(--suave); }
/* Os fatos: miúdos, em mono, porque são dado e não frase. */
.porta .fatos { display:flex; align-items:center; justify-content:center; gap:.6em;
                flex-wrap:wrap; margin:.9em 0 0; font-family:var(--mono); font-size:.82em;
                line-height:1.4; color:var(--suave); }
.porta .fatos .sep { color:var(--apagado); }
/* `stretch`, e não `center` (medido na sanctus#245): a decisão 1 da issue é que o «recriar» tenha A
   MESMA ALTURA do «entrar». Com as duas alturas saindo do próprio conteúdo elas não batem — 54 px
   contra 50 px a 1440, porque a seta do botão cheio é 1,15em e engorda a linha. Centralizados, os
   dois ficavam com 4 px de diferença e um degrau visível entre eles; esticados, a linha decide a
   altura e os dois a seguem. O «?» tem altura própria e se centra sozinho. */
.porta .botoes { display:flex; align-items:stretch; justify-content:center; gap:.7em;
                 flex-wrap:wrap; }
.porta .botoes .ajuda { align-self:center; }

/* O BOTÃO CHEIO: um por página, e ele atravessa. Damasco com a tinta do acento por cima — é o
   único lugar em que o acento é fundo, e é isso que faz «a ação» ser uma só. */
.acao { font-family:var(--ui); font-weight:600; font-size:1em; line-height:1;
        color:var(--acento-tinta); background:var(--acento); border:0; border-radius:.75em;
        padding:1em 1.5em; cursor:pointer; display:inline-flex; align-items:center;
        justify-content:center; gap:.6em; text-decoration:none; white-space:nowrap;
        box-shadow:0 8px 24px color-mix(in srgb, var(--acento) 28%, transparent);
        transition:transform .15s, box-shadow .15s; }
.acao:hover { transform:translateY(-1px);
              box-shadow:0 12px 30px color-mix(in srgb, var(--acento) 36%, transparent); }
.acao[aria-disabled="true"] { opacity:.5; cursor:default; pointer-events:none; box-shadow:none; }
.acao .seta { font-family:var(--display); font-size:1.15em; line-height:1; }

/* O contorno: tudo que não é A ação. */
.bt { font-family:var(--ui); font-weight:500; font-size:.9em; line-height:1; color:var(--tinta);
      background:transparent; border:1px solid var(--linha); border-radius:.65em;
      padding:.65em 1em; cursor:pointer; display:inline-flex; align-items:center; gap:.5em;
      transition:border-color .15s, background-color .15s; text-decoration:none;
      white-space:nowrap; }
.bt:hover { border-color:var(--suave); background:var(--eleva); }
.bt.perigo { color:var(--perigo); border-style:dashed;
             border-color:color-mix(in srgb, var(--perigo) 45%, transparent); }
.bt.perigo:hover { background:color-mix(in srgb, var(--perigo) 10%, transparent);
                   border-color:var(--perigo); }
/* Ao lado do «entrar»: o «recriar» tem a altura do botão cheio, mas continua sendo contorno. É a
   decisão 1 da issue — a ação de todo dia e a de manutenção moram na mesma linha, e a hierarquia
   é o preenchimento, não a distância. */
.porta .bt.lado { padding:1em 1.2em; font-size:.95em; border-radius:.75em; }

/* O «?»: uma bolinha, e a dica abre em cima AO PASSAR O MOUSE OU AO FOCAR PELO TECLADO. As duas,
   e não só a primeira: dica que só existe no hover não existe para quem navega por Tab. */
.ajuda { position:relative; width:1.35em; height:1.35em; border-radius:50%;
         border:1px solid var(--linha); background:transparent; color:var(--suave);
         font-family:var(--mono); font-weight:500; font-size:.75em; line-height:1; cursor:help;
         display:inline-grid; place-items:center; padding:0; flex:none; }
.ajuda:hover, .ajuda:focus-visible { color:var(--tinta); border-color:var(--suave); }
.ajuda::after { content:attr(data-dica); position:absolute; bottom:calc(100% + .7em); left:50%;
                transform:translateX(-50%); width:19em; padding:.7em .9em; border-radius:.6em;
                background:var(--eleva); border:1px solid var(--linha); color:var(--tinta);
                font-family:var(--ui); font-weight:400; font-size:.95em; line-height:1.45;
                text-align:center; white-space:normal; box-shadow:0 10px 30px rgba(0,0,0,.35);
                opacity:0; pointer-events:none; transition:opacity .15s; z-index:5; }
.ajuda:hover::after, .ajuda:focus-visible::after { opacity:1; }
/* No celular a dica de 19em sairia pela borda: ela se ancora na tela, não no botão. */
@media (max-width: 560px) {
  .ajuda::after { position:fixed; left:50%; bottom:auto; top:auto;
                  width:min(19em, calc(100vw - 2em)); }
}

/* ─── a versão atrasada ─────────────────────────────────────────────────────
   O título no eixo e as duas versões lado a lado. NADA de explicação de como o recriar funciona:
   isso é do «?», e repetir ali era o que fazia o aviso virar parágrafo. */
.atraso { border:1px solid color-mix(in srgb, var(--morno) 35%, var(--linha)); border-radius:.9em;
          padding:1em 1.2em 1.1em; background:color-mix(in srgb, var(--morno) 6%, transparent);
          text-align:center; }
.atraso .rot { font-family:var(--mono); font-weight:500; font-size:.72em; line-height:1;
               letter-spacing:.14em; text-transform:uppercase; color:var(--morno);
               margin:0 0 .8em; }
.atraso .versoes { display:flex; justify-content:center; gap:2.4em; flex-wrap:wrap; }
.atraso .versoes div { display:flex; flex-direction:column; gap:.2em; }
.atraso .versoes .k { font-size:.8em; color:var(--suave); }
.atraso .versoes b { font-family:var(--mono); font-weight:500; font-size:1.15em; line-height:1;
                     color:var(--tinta); }

/* UM SINAL SÓ, EM DOIS LUGARES. Com a versão atrasada, o cartão e o «recriar» pulsam juntos, na
   mesma cor e no mesmo compasso: «está atrasado, e é aqui que se resolve». Em dia, nenhum dos dois
   pulsa e o cartão não existe. Quem pediu menos movimento continua lendo tudo — a cor da borda e o
   texto do cartão dizem a mesma coisa parados (a trava é o `prefers-reduced-motion` do
   `sanctus.css`, que zera animação e transição da folha inteira). */
.atrasado .atraso, .atrasado .bt.recriar { border-color:var(--morno);
                                           animation:chama 2s ease-in-out infinite; }
.atrasado .bt.recriar { color:var(--morno); }
@keyframes chama {
  0%, 100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--morno) 0%, transparent); }
  50% { box-shadow:0 0 0 .35em color-mix(in srgb, var(--morno) 22%, transparent); }
}

/* ─── a área de três abas: ficha técnica · histórico · ações ────────────────
   As abas são as da pele comum (`.abas`, `.aba`) — vocabulário dos dois lados —, e o que está aqui
   é a GEOMETRIA desta área: um cartão com a faixa de abas em cima, cada aba esticada e sublinhada,
   e um painel com rolagem própria. Esticar a aba na folha comum deformaria as abas de aplicação da
   mesa, que se arrastam para a barra. */
.abas { display:block; border:1px solid var(--linha); border-radius:1em; background:var(--caixa);
        overflow:hidden; margin:0; }
.abas-cabeca { display:flex; border-bottom:1px solid var(--linha); }
.abas .aba { flex:1; padding:.85em .5em; font-family:var(--ui); font-weight:500; font-size:.88em;
             line-height:1; color:var(--suave); background:transparent; border:0;
             border-bottom:2px solid transparent; border-radius:0; justify-content:center;
             cursor:pointer; transition:color .15s, background-color .15s; }
.abas .aba:hover { color:var(--tinta); background:var(--eleva); }
.abas .aba[aria-selected="true"] { color:var(--tinta); background:transparent;
                                   border-bottom-color:var(--acento); }
.painel { max-height:15em; overflow:auto; padding:.9em 1.3em; scrollbar-width:thin; }
@media (min-width: 1600px) { .painel { max-height:14em; } }

/* A ficha técnica: rótulo e dado, o dado em mono. */
.painel dl { display:grid; grid-template-columns:auto 1fr; gap:.55em 1.6em; margin:0;
             font-size:.92em; align-items:baseline; }
.painel dt { color:var(--suave); white-space:nowrap; }
.painel dd { margin:0; font-family:var(--mono); overflow-wrap:anywhere; }

/* O histórico: hora, verbo e quem pediu. */
.trilha { list-style:none; margin:0; padding:0; font-size:.9em; }
.trilha li { display:grid; grid-template-columns:1.2em 1fr auto; gap:.6em; align-items:baseline;
             padding:.5em 0; border-top:1px dashed var(--linha); }
.trilha li:first-child { border-top:0; }
.trilha .ok, .trilha .falhou { text-align:center; }
.trilha .verbo { font-family:var(--mono); }
.trilha .quando { color:var(--suave); font-size:.88em; font-family:var(--mono);
                  white-space:nowrap; }
@media (max-width: 560px) {
  .trilha li { grid-template-columns:1.2em 1fr; }
  .trilha .quando { grid-column:2; }
}

/* A ABA «AÇÕES»: só o que é irreversível, cada uma com a linha que diz o que ela toca. A caixa à
   parte da zona de perigo sumiu — o irreversível não precisa de moldura própria quando mora atrás
   de uma aba que ninguém abre por acaso. `.acoes` da pele comum é uma faixa de botões; aqui é uma
   lista de duas colunas, e por isso o desenho é escrito para dentro do painel. */
.painel .acoes { display:block; list-style:none; margin:0; padding:0; }
.painel .acoes li { display:grid; grid-template-columns:11.5em 1fr; gap:.3em 1.2em;
                    align-items:center; padding:.8em 0; border-top:1px dashed var(--linha); }
.painel .acoes li:first-child { border-top:0; }
.painel .acoes .bt { justify-content:center; width:100%; }
.painel .acoes p { margin:0; font-size:.88em; color:var(--suave); text-align:left; }
.painel .acoes p b { color:var(--tinta); font-weight:500; }
.painel .acoes li.perigosa p b { color:var(--perigo); }
@media (max-width: 560px) { .painel .acoes li { grid-template-columns:1fr; } }

/* ─── em-movimento: o passo em curso é o único com caixa ────────────────────
   Os feitos ficam cinza com o ✓; os que faltam, tracejados. A barra anda porque o qi fala. */
.passos { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.15em;
          text-align:left; width:100%; }
.passos li { display:grid; grid-template-columns:1.6em 1fr auto; gap:.7em; align-items:center;
             padding:.6em .3em; border-radius:.6em; font-size:.95em; }
.passos .m { width:1.1em; height:1.1em; border-radius:50%; display:grid; place-items:center;
             font-size:.75em; }
.passos .feito { color:var(--suave); }
.passos .feito .m { background:color-mix(in srgb, var(--vivo) 20%, transparent); color:var(--vivo); }
.passos .agora { background:var(--caixa); border:1px solid var(--linha); color:var(--tinta); }
.passos .agora .m { background:var(--morno); animation:pulsa-m 1.8s ease-out infinite; }
.passos .falhou .m { background:color-mix(in srgb, var(--perigo) 20%, transparent);
                     color:var(--perigo); }
.passos .depois { color:var(--apagado); }
.passos .depois .m { border:1.5px dashed var(--linha); }
.passos .verbo { font-family:var(--mono); }
.passos .t { font-family:var(--mono); font-weight:400; font-size:.85em; color:var(--apagado); }
@keyframes pulsa-m {
  0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--morno) 45%, transparent); }
  70% { box-shadow:0 0 0 .5em transparent; }
  100% { box-shadow:0 0 0 0 transparent; }
}
.barra { height:.35em; border-radius:999px; background:var(--eleva); overflow:hidden;
         margin:.2em 0 .6em; }
.barra i { display:block; height:100%; background:linear-gradient(90deg, var(--vivo), var(--morno));
           border-radius:999px; transition:width .3s ease; }

/* ─── as caras de chegada: a marca, o fato, a saída ─────────────────────────
   Nada de slogan e nada de instrução: esta é a porta de um time, não de um produto. */
.centro { margin:auto; display:flex; flex-direction:column; align-items:center; text-align:center;
          gap:1.2em; max-width:30em; }
.centro .taiji { width:3em; height:3em; }
.centro h1 { font-family:var(--display); font-weight:400; font-variation-settings:"opsz" 144;
             font-size:2.6em; line-height:1.05; letter-spacing:-.02em; margin:0;
             text-wrap:balance; }
.centro p { margin:0; color:var(--suave); max-width:36ch; text-wrap:pretty; }
.centro p b { color:var(--tinta); font-weight:500; }

/* ─── a confirmação ─────────────────────────────────────────────────────────
   Uma caixa pequena, no eixo, que REPETE o que vai acontecer. Clicar em «recriar container» não
   derruba nada sozinho: derrubar container é barato, mas não é grátis, e quem clicou por engano
   tem onde parar. */
dialog.confirma { border:1px solid var(--linha); border-radius:1em; background:var(--caixa);
                  color:var(--tinta); padding:1.4em 1.6em; max-width:24em; text-align:center;
                  box-shadow:0 30px 80px rgba(0,0,0,.5); font:inherit; }
dialog.confirma::backdrop { background:rgba(8,10,16,.6); backdrop-filter:blur(2px); }
dialog.confirma h2 { font-family:var(--display); font-weight:400; font-size:1.6em; line-height:1.1;
                     text-transform:none; letter-spacing:-.01em; color:var(--tinta);
                     margin:0 0 .5em; }
dialog.confirma p { margin:0 0 1.2em; color:var(--suave); font-size:.92em; }
dialog.confirma .botoes { display:flex; justify-content:center; gap:.6em; }
dialog.confirma .acao { padding:.75em 1.3em; }
dialog.confirma label { display:block; text-align:left; font-size:.88em; color:var(--suave);
                        margin:0 0 1.2em; }
dialog.confirma input { width:100%; margin-top:.4em; padding:.6em .8em; border-radius:.6em;
                        border:1px solid var(--linha); background:var(--fundo); color:var(--tinta);
                        font:inherit; font-family:var(--mono); font-size:.95em; }

/* ─── o celular: a porta empilha, e os botões vão a largura total ──────────── */
@media (max-width: 560px) {
  .porta { padding:1.3em 1.2em 1.2em; }
  .porta .palavra { font-size:2.9em; }
  .porta .botoes { flex-direction:column; width:100%; }
  /* `justify-content:center` no empilhado, e é correção de um defeito que o protótipo também tem:
     o `.bt` é `inline-flex` sem alinhamento declarado, então em largura total o rótulo cola na
     ESQUERDA enquanto o botão cheio ao lado fica no eixo. A 390 px, com os dois um debaixo do
     outro, o degrau é a primeira coisa que se vê. */
  .porta .acao, .porta .bt.lado { width:100%; padding:1.05em; justify-content:center; }
  .cabeca { gap:.6em; }
  dialog.confirma { max-width:calc(100vw - 2em); }
}