/* ═══ DS v2 · acesso (TL-E01/E02/E23) — só tokens da lei; a moldura é da @roster/ui ═══
   O layout de duas colunas com a fotografia estourada é da tela, não da lei (a lei
   não tem página de acesso), por isso vive aqui. Nada abaixo escreve cor, sombra ou
   raio: tudo é var(). Victor, 09/09/2026. */
.auth { display: grid; grid-template-columns: 5fr 7fr; min-height: 100vh; }
.auth > .env { grid-column: 1 / -1; }
.auth .col { background: var(--paper); padding: var(--space-6) var(--space-8); display: flex; flex-direction: column; }
.auth .form { margin: auto 0; max-width: 360px; padding: var(--space-8) 0; }
.auth .form .btn.primary { width: 100%; margin-top: var(--space-5); }
/* A tarja de sandbox entra na conta: sem o calc, toda tela de acesso rolava 32px (crítica de 19/09). Em produção o token é 0px. */
.auth .picture { display: grid; align-content: end; padding: var(--space-6) var(--space-8); min-height: calc(100vh - var(--env-banner-height)); }
.auth .picture .body p { color: var(--paper); font-size: var(--text-section); font-weight: var(--weight-section); letter-spacing: var(--track-section); max-width: 26ch; line-height: 1.25; }
/* No celular a coluna perde os 72px de cada lado: a 375px sobravam 231px e os botões (nowrap) estouravam (crítica de 19/09). */
@media (max-width: 820px) { .auth { grid-template-columns: 1fr; } .auth .col { padding: var(--space-6) var(--space-5); } .auth .picture { display: none; } }