/* app/static/css/auth.css
   Tela de login — app/templates/auth/login.html.

   Painel dividido (07/10/2026): de um lado a frase da marca sobre o azul do
   site público, do outro o selo, a saudação e o formulário de sempre. No
   celular o painel vira uma faixa no topo e o formulário desce.

   O cartão, os campos e o botão NÃO estão aqui: `.login-form`,
   `.modal-field-form`, `.input-field`, `.login-button-wrapper` e `.btn`
   seguem em style.css. Este arquivo só desenha o chassi em volta deles.
   Nada de cor, raio ou sombra cravados — tudo vem de tokens.css. */

/* O contêiner do base.html centra um cartão com 24px de respiro. O login
   zera o respiro para o painel encostar nas bordas da janela, e deixa de
   centrar: quem centra agora é cada metade. */
.container-login.container-login--split {
    padding: 0;
    align-items: stretch;
}

.auth-split {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* ───────── Painel da marca ───────── */
/* Coluna: a frase ocupa o alto e centra; o rodapé fica no pé do painel. */
.auth-brand {
    position: relative;
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    /* O azul da MARCA, e não o do sidebar (21/10/2026, ela: ajustar ao oficial,
       #00364d). Em 07/10 era o azul do site, para a cor não trocar no caminho de
       quem clica em "Entrar" lá: enquanto o site (outro repositório) não receber
       a mesma troca, essa diferença existe — ver o comentário no tokens.css. */
    background: var(--brand-deep-blue);
    color: var(--branco);
}

/* ⭐ DESKTOP: a frase se centra na vertical com o trecho "Bem-vindo à Conto Eventos"
   → "Início", e NÃO com o selo (ela, 21/10/2026: "na vertical centralizado com
   Bem-vindo... até Início, deixando o Logo de fora da altura"). O cartão do outro
   lado centra com o selo dentro; o trecho de baixo dele fica, portanto, MEIA
   altura do selo + o espaço até o título (8px) abaixo do centro da tela. O
   padding-top extra empurra o centro da frase exatamente isso (um padding de
   topo de X desloca o centro de uma caixa centrada em X/2, então o extra é a
   altura TODA do selo + 8). Selo de 220px × 534/785 = ~150px. Se a largura do selo
   mudar (`.auth-logo`, mais abaixo), mude aqui junto.
   Para o centro da frase ser o centro da TELA, o rodapé sai do fluxo (ver
   `.auth-footer`): senão ele roubaria ~43px da altura desta área. No celular o
   bloco é outro (o media de 900px redefine o padding e esconde o rodapé). */
.auth-brand-body {
    --auth-logo-block: calc(220px * 534 / 785 + 8px);
    flex: 1;
    display: flex;
    align-items: center;
    padding: 48px;
    padding-top: calc(48px + var(--auth-logo-block));
    box-sizing: border-box;
}

/* Montserrat leve e grande, como assinatura e não como título: o peso 300
   é o que a frase pede para não competir com o formulário.

   ⚠️ A quebra das linhas é DE PROPÓSITO. Com esta largura a frase sai
   "Cada evento tem uma / história. / A gente escreve a / experiência.", com
   "história." e "experiência." sozinhas na linha. Propus quebra controlada
   em blocos e ela recusou (07/10/2026): "eu gosto das palavras isoladas,
   acho que tem significado". Não trocar por nowrap nem mexer na largura
   para "consertar". */
.auth-tagline {
    margin: 0;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.35;
    max-width: 14em;
}

/* Rodapé no pé do painel, na cor do botão Entrar (e do sidebar): um parente
   grande para o botão, que era a única coisa a amarrar o painel petróleo ao
   lado branco. Só embaixo do azul — a versão atravessando as duas metades
   foi vista e reprovada por ela em 07/10/2026 ("coloque apenas do lado do
   azul"). */
.auth-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 24px;
    background: var(--azul-slate900);
    color: var(--azul-slate400);
    text-align: center;
    font-size: 0.82rem;
}

/* ───────── Lado do formulário ───────── */
.auth-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

/* Sobre branco puro a sombra do cartão não diz nada: o cartão deixa de ser
   superfície flutuante e vira só a coluna do formulário. */
.auth-panel .login-form {
    box-shadow: none;
}

/* O selo tem fundo branco OPACO (785×534, RGB), por isso mora deste lado e
   nunca sobre o painel azul. */
.auth-logo {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 8px;
}

.auth-title {
    margin: 0 0 24px;
    text-align: center;
    color: var(--azul-escuro);
    font-size: 1.25rem;
    font-weight: 600;
}

/* "Entrar como …" (o bloco do aparelho) mais perto do "Bem-vindo" (ela, 21/10/2026,
   na CT: "reduz o gap"). Eram 32px: a margem de cima do botão (2rem, a mesma do
   Entrar das outras telas) vencia os 24px do título, porque margens vizinhas se
   fundem. Aqui o botão não soma a dele e o bloco puxa 8px: 24 − 8 = 16px. Só este
   bloco — o `.login-button-wrapper` global segue com 2rem. */
#device-login {
    margin-top: -8px;
}

#device-login .login-button-wrapper {
    margin-top: 0;
}

/* Senha → Entrar: eram 36px (os 2rem do `.login-button-wrapper` global + os 4px
   de gap do formulário). 12 + 4 = 16px (ela, 21/10/2026: "reduza o gap entre o
   input da senha e o botão Entrar"). Só o botão DENTRO do formulário do login:
   o do "Entrar como" mora fora do <form>, e as telas de esqueci/redefinir não
   têm `.auth-panel`, então seguem com 2rem. */
.auth-panel .modal-field-form .login-button-wrapper {
    margin-top: 12px;
}

/* "Conto Eventos" é uma palavra só para o navegador: ou cabe inteira na
   linha, ou desce inteira. Nunca "Conto" numa linha e "Eventos" na outra. */
.auth-title-brand {
    white-space: nowrap;
}

/* Bloco 5 — "Esqueci minha senha" e "Início": um bloquinho só, 4px entre os dois
   (ela, 21/10/2026; eram 12). Os 12px de cima são o menor espaço entre o botão
   Entrar e o primeiro texto (eram 23,5: 16 de margem + 7,5 da margem do link; ela,
   21/10: "reduzir também entre Entrar e Esqueci minha senha"); em tela alta esse
   espaço CRESCE, ver o bloco de 900px. */
.auth-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
}

.auth-links p {
    margin: 0;
}

/* O `.login-form p a` global (style.css) dá 0,5rem (7,5px) de margem em cima de
   cada link: com ela o espaço visível entre os DOIS TEXTOS era 11,5px, e não os 4
   do gap (ela, 21/10/2026: "reduzir o gap entre esqueci minha senha e início").
   Aqui a margem é zerada e o espaço entre os textos passa a ser os 4px; os 7,5 que
   o primeiro link perde em cima já estavam contados no `margin-top` do bloco
   (hoje 12px, medido até o TEXTO, e não até a caixa do link). O seletor repete `.login-form p a` e
   acrescenta `.auth-links` só para vencer a especificidade da regra global. */
.login-form .auth-links p a {
    margin-top: 0;
}

/* ───────── Celular e tablet em pé: painel vira faixa no topo ───────── */
@media (max-width: 900px) {
    /* A tela ocupa a janela VISÍVEL (`svh`, com as barras do navegador contadas —
       o mesmo motivo do reader.css). Com `vh` o iOS conta a tela sem as barras e
       a sobra repartida abaixo empurraria os links para baixo da dobra. A linha
       de cima, com `vh`, é a rede de segurança de quem não tem `svh`. */
    .container-login.container-login--split {
        min-height: 100vh;
        min-height: 100svh;
    }

    .auth-split {
        flex-direction: column;
        min-height: 100svh;

        /* ⭐ UM tamanho de letra para a frase da faixa e para o "Bem-vindo" (ela,
           21/10/2026: "na CT o fonte do slogan e do bem-vindo pode ser menor ...
           dinâmico"). Acompanha a ALTURA da janela, como o selo: 14,25px (0,95rem)
           até 600px de altura, 17,25px (1,15rem) a partir de 800px, sem degrau no
           meio (3px em 200px = 0,015). Na CT no app (648px) dá ~15px. As duas
           regras abaixo ainda limitam pela LARGURA (a quebra da frase e a linha
           única do título), então a letra nunca passa do menor dos dois. A 1ª
           linha é a rede de segurança de quem não tem `svh`: fica o 1,15rem. */
        --brand-font: 1.15rem;
        --brand-font: clamp(0.95rem, calc(0.95rem + (100svh - 600px) * 0.015), 1.15rem);
    }

    .auth-brand {
        flex: none;
    }

    /* A faixa centra a frase (decisão dela, 07/10); no desktop ela segue
       alinhada à esquerda, como assinatura. */
    /* 20px em cima e embaixo da frase (eram 32; ela, 21/10/2026, na CT: "reduza um
       pouco o gap antes e depois"). Os 24 dos lados ficam: são o "48" da conta da
       fonte, logo abaixo. */
    .auth-brand-body {
        justify-content: center;
        padding: 20px 24px;
        text-align: center;
    }

    /* A letra encolhe junto com a tela, para a quebra NÃO mudar (ela, 19/10/2026:
       "reduza o tamanho da fonte ... sem mudar a quebra de linhas"). A frase tem
       14em de largura (regra de cima) e o espaço útil é a tela menos o respiro
       das duas laterais (24px + 24px, do .auth-brand-body): abaixo de ~362px de
       tela, 14em de 1.4rem não cabe e "Cada evento tem uma" passaria a quebrar
       em duas. Com a letra em no máximo 1/14 do espaço útil, largura e letra
       escalam juntas e as quatro linhas ficam as mesmas. Não é nowrap nem mexe
       na largura — o aviso lá de cima segue valendo. */
    /* 1,15rem (17,25px) desde 21/10/2026, de novo (ela, na CT: "o fonte do slogan
       pode ser menor", para o Entrar caber). Era 1,25rem porque 1,15 parecia menor
       que o "Bem-vindo" — mas o "Bem-vindo" agora também desce na CT (1 linha, ver
       .auth-title), e a diferença encolheu. Ganha ~8px de altura na faixa. Só o
       teto mudou; o divisor 14 e o 48 seguem, então abaixo de ~323px de tela a
       conta volta a mandar e a quebra continua a mesma. */
    .auth-tagline {
        font-size: min(var(--brand-font), calc((100vw - 48px) / 14));
    }

    /* No celular a faixa do topo, o selo e o botão no fim já fazem a
       transição gradual; o rodapé seria peso a mais. */
    .auth-footer {
        display: none;
    }

    /* O selo tem ~31px de branco no topo da própria imagem, e o respiro de 24px
       da tela se somava a ele: ~55px entre a faixa azul e o desenho. Tirei 16px
       do respiro de cima (ela, 19/10/2026: "reduza um pouco a distância do logo
       da faixa azul"); os lados e o fundo seguem com 24px. */
    .auth-panel {
        align-items: flex-start;
        padding-top: 8px;
    }

    /* Na CT (360px) a faixa azul ficava a ~62px do desenho: 8 do painel + 24 do
       cartão + ~31 do branco do próprio selo. O cartão só soma o respiro dos
       lados e do fundo (ela, 21/10/2026: "reduza o espaço entre a faixa azul e
       o logo"); sobram ~39px. */
    .auth-panel .login-form {
        padding-top: 0;
    }

    /* ⭐ A SOBRA DE ALTURA SE REPARTE ENTRE OS BLOCOS, NUNCA DENTRO DELES (ela,
       21/10/2026). O cartão enche a altura do painel e distribui o que sobra em
       quatro gaps iguais — faixa→selo, selo→saudação, saudação→entrada e
       entrada→links — por cima dos espaços de hoje, que são o MÍNIMO (as
       margens abaixo). Sem sobra (a CT) nada se mexe; sem teto, cresce com a
       janela. Os espaços de DENTRO do bloco 4 (label↔caixa, entre grupos, o
       separador, o botão) não entram: o formulário segue o padrão de campos.
       O ::before vazio é o 1º "item": é ele que dá o gap faixa→selo. */
    .auth-panel .login-form {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .auth-panel .login-form::before {
        content: "";
    }

    /* O cabeçalho (selo + saudação) não é caixa em tela alta: os dois seguem
       como blocos separados da distribuição. Em janela baixa ele vira linha. */
    .auth-head {
        display: contents;
    }

    /* SEM ZOOM AO TOCAR NO CAMPO (ela, 07/10/2026). O iPhone amplia a tela
       ao focar qualquer campo com fonte menor que 16px — e os campos do app
       herdam menos que isso. 16px aqui, e só na tela estreita, para o
       desktop seguir com o campo do tamanho de sempre. Vale para as três
       telas de auth que usam o cartão (login, esqueci a senha, redefinir). */
    .login-form .input-field {
        font-size: 16px;
    }

    .auth-logo {
        /* Selo ajustado pela ALTURA da janela (ela, 21/10/2026: "o selo também pode
           se ajustar automaticamente... e fixamos um mínimo?"). Mínimo 160px (a
           CT, janela baixa), máximo 200px (janela alta); no meio cresce sem
           degrau: 160px a 600px de altura, 200px a 800px. `svh` = a janela com as
           barras do navegador contadas (o mesmo motivo do reader.css). Eram
           140 → 180; subiu 20px quando o branco da imagem foi cortado (abaixo).
           O 200px de cima é a rede de segurança: navegador sem `svh` descarta o
           clamp inteiro e fica com ele. */
        --logo-w: 200px;
        --logo-w: clamp(160px, calc(160px + (100svh - 600px) * 0.2), 200px);
        width: var(--logo-w);

        /* CORTE DO BRANCO DA IMAGEM (ela, 21/10/2026: "reduzir os gaps antes e
           depois do logo para que ele fique um pouco maior"). O PNG (785×534,
           fundo branco OPACO) tem 25,7% de branco em cima e 19,7% embaixo —
           medido nos pixels —, e esse branco fazia os espaços ao redor do
           desenho parecerem de ~34px e ~28px, quando o CSS dizia 8. Margem
           negativa NÃO serve: o branco cobriria a faixa azul. Então a caixa da
           imagem é do tamanho do desenho (0,392 da largura = os 0,372 do desenho
           + 1% de folga de cada lado, para não cortar a borda suavizada) e o
           `object-fit: cover` mostra só essa faixa: o ponto de corte é
           (0,1745 − 0,01) / (0,680 − 0,392) = 57,1% da altura. Os espaços de
           verdade são os de baixo, e passam a ser os que o CSS diz: 16px. */
        height: calc(var(--logo-w) * 0.392);
        object-fit: cover;
        object-position: 50% 57.1%;
        margin: 8px auto 16px;
    }

    /* A saudação cabe em UMA linha: "Bem-vindo à Conto Eventos" (ela, 21/10/2026,
       trocando as duas linhas fixas de 07/10). A letra encolhe com a tela em vez
       de quebrar. Conta: a frase mede 14,30em em Montserrat 600 (medido no
       navegador); o espaço útil é a tela menos 96px (24 do painel + 24 do cartão,
       de cada lado, até 600px). 14,5 dá uma folga de ~1,4% sobre os 14,30. O teto é
       o MESMO da frase da faixa, 1,15rem (ela, 21/10/2026: "Bem-vindo no mesmo
       tamanho de fonte do slogan") — se o teto da frase mudar, mude este junto.
       Abaixo de ~343px de tela a conta daqui manda e a letra fica um pouco menor
       que a da frase, para a linha única caber. O nowrap garante a linha única
       mesmo se a conta errar por pixel. */
    .auth-title {
        font-size: min(var(--brand-font), calc((100vw - 96px) / 14.5));
        white-space: nowrap;
    }
}