/* ============================================================
   TVMatch — app.css
   Ajustes finos de layout sobre o design system (ds.css).
   Só o que o ds.css não cobre: nav fixa da home, alerts, steps.
   ============================================================ */

.site-nav-wrap { padding-top: 24px; }
.site-nav-wrap .nav { margin-bottom: 0; }

/* Símbolo da marca = SVG oficial (substitui o quadro+play desenhado em ds.css) */
.logo__mark {
  background: url('../img/tvmatch-mark.svg') center / contain no-repeat;
  border: none !important;
  border-radius: 0;
}
.logo__mark::after { content: none !important; display: none !important; }

/* Alerts / flash messages — reaproveita a linguagem das status pills */
.alert {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 500; border: 1px solid transparent;
}
.alert i { font-size: 18px; flex: none; }
.alert--ok  { background: var(--lime-dim);  color: var(--lime);  border-color: rgba(161,255,98,.2); }
.alert--bad { background: var(--coral-dim); color: #ff8b7f; border-color: rgba(248,65,49,.2); }

/* Hero da home */
.hero {
  padding: clamp(40px, 8vw, 88px) 0 clamp(56px, 9vw, 104px);
  background: radial-gradient(120% 120% at 50% -10%, rgba(104,64,255,.12), transparent 55%);
}
.hero .cta-journey { min-width: 280px; }

/* Seções alternando claro/escuro já vêm de .ds-section / .light */

/* Faixa de benefícios */
.benefit {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--ink-600);
}
.light .benefit { border-bottom-color: var(--paper-3); }
.benefit i { color: var(--lime); font-size: 20px; margin-top: 2px; flex: none; }
.light .benefit i { color: var(--purple); }

/* Steps do cadastro multi-etapa (M2) */
.steps { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.step {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--t-on-dark-dim); padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--ink-600);
}
.step.is-active { color: var(--ink-900); background: var(--lime); border-color: var(--lime); }
.step.is-done { color: var(--lime); border-color: var(--ink-500); }

/* Mensagens de erro de campo */
.field-err { color: #ff8b7f; font-size: 12px; line-height: 1.3; }
.light .field-err { color: var(--coral-700); }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--coral); }

/* Coluna de autenticação centralizada */
.auth { max-width: 520px; margin: 0 auto; }
.auth__head { text-align: center; margin-bottom: 28px; }
.auth__alt { text-align: center; margin-top: 20px; font-size: 14px; color: var(--t-on-dark-mut); }
.auth__alt a { color: var(--t-on-dark); text-decoration: underline; text-underline-offset: 2px; }

/* Conteúdo de páginas legais (texto longo) */
.legal { max-width: 760px; margin: 0 auto; }
.legal h2 { margin-top: 36px; }
.legal h3 { margin-top: 28px; }
.legal p, .legal li { color: var(--t-on-dark-mut); }
.legal ul { padding-left: 20px; }
.legal li { margin: 6px 0; }

/* Painel autenticado: shell com sidebar simples */
.panel { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.panel__side { position: sticky; top: 24px; }
.panel__nav { display: grid; gap: 4px; }
.panel__nav a {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-radius: var(--r-md); color: var(--t-on-dark-mut); text-decoration: none; font-size: 14px;
}
.panel__nav a:hover { background: rgba(255,255,255,.04); color: var(--t-on-dark); }
.panel__nav a.is-active { background: var(--ink-700); color: var(--t-on-dark); }
@media (max-width: 820px) {
  .panel { grid-template-columns: 1fr; }
  .panel__side { position: static; }
}