/* Porta — a tela que vem antes de todas as outras. Proposta aprovada em
   docs/mockup-login.html.

   É a única tela do app que não é folha de trabalho: sem masthead, sem calha,
   sem eixo. A folha é menor, fica no meio do gelo, e a marca se apoia nela como
   timbre de papel oficial. Campo, botão e erro são os do sistema (.field, .btn,
   .error-msg); o que é novo aqui é a moldura da tela e a marca. */

/* ── a moldura ───────────────────────────────────────────────────────────
   Centro ótico, não geométrico: a coluna sobe um pouco (o domínio fica numa
   faixa própria embaixo) porque folha pequena centrada na trena parece caída. */
.porta {
  min-block-size: 100dvh;
  display: grid; grid-template-rows: 1fr auto;
  justify-items: center; align-items: center;
  padding: 24px;
}

.porta-centro { display: grid; justify-items: center; gap: 22px; width: 100%; }

/* ── a marca ─────────────────────────────────────────────────────────────
   "Marcador" é o gesto do app: o quadradinho do formulário de papel, marcado à
   mão. A casa é régua — hairline, canto de 4px, como toda região deste sistema;
   quem marca é o azul, que aqui quer dizer o mesmo que na fila: ação da
   secretaria. O tique passa da borda de propósito — marca feita à mão não
   respeita a casa impressa —, e é por isso que o <svg> não recorta. */
.marca { display: grid; justify-items: center; gap: 12px; }

.marca-selo {
  inline-size: 46px; block-size: 46px; overflow: visible;
  color: var(--accent);
}

.marca-caixa { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }

.marca-tique {
  fill: none; stroke: currentColor; stroke-width: 3.5;
  stroke-linecap: square; stroke-linejoin: miter;
}

.marca-nome {
  font-size: 23px; font-weight: 700; letter-spacing: -.035em;
  line-height: 1; margin: 0; color: var(--ink);

  /* o segundo termo é o que a marca é: fica na cor do trabalho */
  & b { font-weight: 700; color: var(--accent); }
}

.marca-linha {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
  margin: 6px 0 0; text-align: center;
}

/* ── a folha ─────────────────────────────────────────────────────────────
   Mesma superfície e mesmo raio da folha grande; o que muda é a medida. 25rem é
   a largura em que o par usuário/senha respira sem virar faixa larga com três
   palavras dentro. Sem sombra: profundidade aqui é régua, como no resto do app
   — a folha flutuante é o <dialog>, e a porta não é modal. */
.porta-folha {
  inline-size: min(25rem, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 34px 28px;
}

/* O cabeçalho da folha é régua, como toda seção do app: o .kicker que a fila e
   o relatório já usam, aqui sem observação à direita. */
.porta-folha .kicker { margin-bottom: 22px; }

.porta-campos { display: grid; gap: 16px; }

/* A ação é uma só e ocupa a folha inteira: não há par para fazer fila de ações
   — nesta tela não existe "cancelar". */
.porta-entrar { inline-size: 100%; margin-top: 24px; }

/* ── credencial errada ───────────────────────────────────────────────────
   Não é componente novo: é o mesmo vermelho de erro de campo (.error-msg),
   acima dos campos porque o erro não é de um deles — é do par. Dizer qual dos
   dois está errado seria dizer a quem tenta se aquele usuário existe. */
.porta-erro {
  font-size: 12.5px; color: var(--urgent);
  background: var(--urgent-soft);
  border-radius: var(--r);
  padding: 9px 12px; margin: 0 0 18px;
}

/* ── os dois rodapés ─────────────────────────────────────────────────────
   Dentro da folha, a régua fecha o formulário e diz de quem é a porta. */
.porta-nota {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--ink-faint); text-align: center;
  border-top: 1px solid var(--line); padding-top: 14px; margin: 26px 0 0;
}

/* Fora da folha, o domínio — a assinatura no pé da página, que é onde
   assinatura fica. */
.porta-dominio {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--ink-faint); margin: 0; padding-top: 24px;
}

/* ── a chegada ───────────────────────────────────────────────────────────
   Uma entrada só, escalonada: o tique se desenha, a folha sobe, a assinatura
   aparece. base.css já desliga tudo em prefers-reduced-motion.

   Os dois primeiros seletores nascem de .porta: a marca é a mesma peça na
   barra do app, e sem o prefixo a chegada da porta valia para ela também —
   repetida a cada visita do Turbo Drive, que pinta duas vezes (a prévia do
   cache e depois a resposta da rede). Duas piscadas no logo a cada troca de
   tela, pelo ganho da entrada de uma tela só. Mesmo princípio da régua em
   queue.css: entrada pertence ao momento, não ao elemento. */
.porta .marca { animation: subir .4s ease both; }
.porta .marca-tique { stroke-dasharray: 62; stroke-dashoffset: 62; animation: marcar .45s ease .25s forwards; }
.porta-folha { animation: subir .4s ease .08s both; }
.porta-dominio { animation: subir .4s ease .2s both; }

@keyframes marcar { to { stroke-dashoffset: 0; } }
@keyframes subir { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0; } }

/* A senha à mostra: o mesmo chip mono dos rótulos de campo (.edit-link), no
   lugar onde o rótulo tem espaço sobrando. Minúsculo porque é gesto, não
   rótulo de dado. */
.porta-folha .field-head .edit-link { text-transform: lowercase; letter-spacing: .04em; }

@media (max-width: 30rem) {
  .porta-folha { padding: 26px 20px 22px; }
}