/* Painel de marca das telas de entrada (login e configuração inicial).
   As duas telas são divididas: este painel à esquerda, o formulário à direita.
   Ele fica parado enquanto a coluna do formulário rola, e some abaixo de
   900px, onde a coluna do formulário passa a ocupar a tela e mostra a marca
   no próprio topo. */

.left {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 48px 44px;
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  overflow-y: auto;
}

/* Régua de topo — o que sobrou de dois halos radiais, uma grade de duas
   linhas e um fio em gradiente. A superfície é papel; quem separa é a régua. */
.left-top-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
}

.left-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.left-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: auto;
}
.left-logo img {
  border-radius: var(--radius-lg);
}
.left-logo img.left-logo-nome { height: 20px; width: auto; border-radius: 0; }

.left-hero {
  margin: 48px 0 40px;
}
.left-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.8px;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 12px;
}
.left-title span { color: var(--accent); }

.left-sub {
  font-size: var(--text-md);
  color: var(--text2);
  line-height: 1.6;
}

/* Feature list */
.features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 40px;
}
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: fadeSlideUp 0.4s ease both;
}
.feature-item:nth-child(1) { animation-delay: 0.05s; }
.feature-item:nth-child(2) { animation-delay: 0.12s; }
.feature-item:nth-child(3) { animation-delay: 0.19s; }
.feature-item:nth-child(4) { animation-delay: 0.26s; }

.feature-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--accent-s);
  border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 1px;
}
.feature-icon.teal {
  background: var(--accent2-s);
  border-color: var(--accent2);
  color: var(--accent2);
}

.feature-text strong {
  display: block;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}
.feature-text span {
  font-size: var(--text-sm);
  color: var(--muted);
}

/* A marca no topo e o rodapé no pé; o que sobra de altura se divide entre
   os dois lados do bloco do meio (título e lista), que fica centralizado.
   Antes, só a marca tinha margin-bottom: auto, e tudo descia para o fundo,
   deixando um vazio grande em cima nas telas altas. As margens fixas do
   título e da lista seguem como o espaço mínimo nas telas baixas. */
.left-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.left-footer svg { color: var(--accent2); }

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.left-content { animation: fadeSlideUp 0.5s ease both; }

/* Ondas de fluxo atrás do formulário (assets/entrada-ondas.js). A camada
   cobre a coluna inteira, e o canvas dentro dela fica preso à janela
   (sticky), para a onda não esticar quando o formulário passa da altura da
   tela. O conteúdo da coluna já vem com z-index 1. */
[data-ondas] { position: relative; }
.entrada-ondas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.entrada-ondas canvas {
  position: sticky; top: 0; display: block;
  width: 100%; height: 100vh; height: 100dvh;
}
.entrada-ondas-pausa {
  position: fixed; right: 16px; bottom: 16px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--border);
  opacity: 0.7; transition: opacity var(--dur-base, 0.15s), color var(--dur-base, 0.15s);
}
.entrada-ondas-pausa:hover, .entrada-ondas-pausa:focus-visible { opacity: 1; color: var(--text); }

/* Telas baixas (#216): o painel precisa de ~754 px, e um notebook de
   1366×768 deixa uns 650 para a página. Em vez de o painel rolar com a barra
   grossa do Windows, ele aperta: menos respiro, título menor, lista mais
   junta; abaixo de 640 px, as funções ficam só com o título. A rolagem
   continua como último recurso, com a barra fina. */
@media (max-height: 800px) {
  .left { padding: 32px 40px; scrollbar-width: thin; }
  .left-hero { margin: 28px 0 24px; }
  .left-title { font-size: 24px; }
  .features { gap: 10px; margin-bottom: 24px; }
}
@media (max-height: 640px) {
  .feature-text span { display: none; }
}

@media (max-width: 900px) {
  .left { display: none; }
  /* No celular a coluna do formulário é a tela inteira: sem ondas */
  .entrada-ondas, .entrada-ondas-pausa { display: none; }
}