/* Entrar (/Login). É a única página que um visitante sem sessão renderiza, então o ramo anônimo do
   layout — a faixa com o botão de tema e o <main class="auth-content"> — só existe aqui, e a casca
   dessa página mora nesta folha em vez do site.css, que guarda o que as telas dividem.
   Cor só por token: o amarelo é fundo (--accent com a tinta --accent-ink) ou traço (--accent-text),
   nunca cor de texto em --accent, que no tema claro não alcança 4,5:1 (desenho §5.1). */

/* A faixa do tema é uma linha própria acima do cartão, e o cartão fica centrado no que sobra. Sem
   esta casca o min-height:100dvh do .auth-content (site.css) somaria a altura da faixa e a tela de
   entrada passaria a rolar na vertical em toda janela. */
.auth-page { display: flex; flex-direction: column; min-height: 100dvh; }
.auth-topbar { display: flex; justify-content: flex-end; align-items: center; padding: var(--space-3) var(--space-4); }
.auth-page .auth-content { min-height: 0; flex: 1; padding: 0 var(--space-6) var(--space-6); }

.login-screen { display: grid; align-items: center; padding: var(--space-2) 0; }
.login-wrap { width: 100%; max-width: 27rem; margin-inline: auto; }
.login-brand { display: flex; width: fit-content; align-items: center; gap: var(--space-3); margin: 0 auto var(--space-6); color: var(--text); text-decoration: none; font-size: 1.25rem; letter-spacing: -.02em; }
.login-brand strong { font-weight: 800; }
.login-brand-mark { display: grid; place-items: center; width: 44px; height: 44px; color: var(--accent-ink); background: var(--accent); border-radius: var(--radius); }
.login-brand-mark svg { width: 26px; height: 26px; }
.login { margin: 0; max-width: none; padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
/* A onda é a identidade sonora da marca (SITE_REDESIGN §61): traço de SVG decorativo, e por isso
   pode carregar o amarelo — em --accent-text, que é o mesmo amarelo no escuro e o ouro escuro no
   claro, onde --accent ficaria abaixo do alvo de contraste. */
.login-wave { display: block; width: 100%; height: 28px; margin-bottom: var(--space-6); color: var(--accent-text); }
/* Sem tamanho próprio: o h1 desta tela passa a usar a escala global do site.css (desenho §5.2). */
.login h1 { margin: 0 0 var(--space-2); }
.login-intro { color: var(--muted); margin: 0 0 var(--space-6); }
.login-field + .login-field { margin-top: var(--space-5); }
.login-field label { margin: 0 0 var(--space-2); }
.login-field input { min-height: 52px; }
.password-field { position: relative; }
/* O botão nasce escondido e só o script o revela: o recuo do campo acompanha essa revelação, senão
   quem não tem JavaScript perderia 136 px do campo para um botão que nunca aparece. */
.password-field:has(.password-toggle:not([hidden])) input { padding-right: 136px; }
.login .password-toggle { position: absolute; right: var(--space-1); top: var(--space-1); display: grid; place-items: center; width: 124px; min-height: 44px; margin: 0; padding: var(--space-2); background: transparent; color: var(--muted); border-color: transparent; border-radius: var(--radius-sm); font-size: .8125rem; font-weight: 600; }
.login .password-toggle:hover { color: var(--text); background: var(--surface-2); }
.login .auth-submit { display: flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; min-height: 52px; margin-top: var(--space-6); }
.login .auth-submit svg { width: 18px; height: 18px; }
.login .login-error { margin: 0 0 var(--space-6); color: var(--danger); border-color: var(--danger); }
.login-help { margin: var(--space-6) 0 0; font-size: .8125rem; text-align: center; color: var(--muted); }
.login-footnote { margin: var(--space-5) var(--space-3) 0; text-align: center; font-size: .8125rem; color: var(--muted); }
@media (max-width: 430px) {
    .auth-topbar { padding: var(--space-2); }
    .auth-page .auth-content { padding: 0 var(--space-4) var(--space-5); }
    .login-brand { margin-bottom: var(--space-5); font-size: 1.125rem; }
    .login { padding: var(--space-6) var(--space-5); }
    .login-wave { margin-bottom: var(--space-5); }
    .login-intro { margin-bottom: var(--space-5); }
    .login .password-toggle { width: 108px; font-size: .75rem; }
    .password-field:has(.password-toggle:not([hidden])) input { padding-right: 116px; }
}