/* ==========================================================================
   public.css — a superfície pública do InfinityMail
   ==========================================================================
   COMPLEMENTO do `panel.css`, nunca substituto. A cópia local de
   `views/layouts/main.php` carrega os dois, nesta ordem, em toda página
   pública: landing, login, cadastro, recuperação de senha, legal, contato e
   erro.

   POR QUE ESTE ARQUIVO É PEQUENO
   ------------------------------
   Porque o `panel.css` já traz o sistema inteiro — tokens, tema claro e
   escuro, base tipográfica e os componentes compartilhados (`c-container`,
   `c-section`, `c-card`, `c-button`, `c-field`, `c-form`, `c-alert`,
   `c-badge`, `c-empty`). O site e o painel usam o MESMO vocabulário porque
   usam a MESMA folha, não uma cópia dela.

   Aqui entra só o que existe fora do painel e o painel não tem: cabeçalho e
   rodapé de marketing, cookiebar, hero, features, steps, faq, cta, pricing,
   prose e a casca das telas de autenticação.

   A DISCIPLINA
   ------------
   Zero cor literal. Todo valor vem de `var(--color-*)`, `var(--space-*)`,
   `var(--font-size-*)` — os tokens do `panel.css`. É o que garante que o tema
   escuro funcione aqui sem uma regra a mais, e que trocar a marca continue
   sendo editar um bloco só.

   POR QUE O BUNDLE DO KIT SAIU
   ----------------------------
   Ele carregava o tema `emerald`. O painel usa a marca índigo. O site era
   verde, o painel índigo, e o logo trocava de cor conforme o usuário estivesse
   logado — dois produtos. Sobrescrever por token não bastou: parte dos
   componentes do bundle vence por especificidade, e a página ficava mista.
   Ver o comentário no `views/layouts/main.php`.

   ⚠️  Tela do kit sem estilo = componente ausente daqui. Acrescente; não
   volte a carregar o bundle.
   ========================================================================== */


/* ══ 1. Cabeçalho ═══════════════════════════════════════════════════════════
   Mesmo peso da topbar do painel: superfície branca, uma linha embaixo, nada
   de sombra. É o primeiro elemento que diz "é o mesmo produto". */

.c-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-bg-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}

.c-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
}

.c-header__nav {
  display: none;
  gap: var(--space-5);
  margin-inline-start: auto;
}

/* O menu some no telefone em vez de virar hambúrguer: são três links, e o
   rodapé os repete. Menu escondido atrás de um botão que ninguém toca é pior
   que menu ausente. */
@media (min-width: 48rem) {
  .c-header__nav { display: flex; }
}

.c-header__nav a {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.c-header__nav a:hover { color: var(--color-text-primary); }

/* "Entrar" no telefone: a navegação some abaixo de 48rem, e quem já é cliente
   não pode ficar sem a porta. Fica ao lado do botão, como link de texto; no
   desktop ele já está na navegação e este some. */
.c-header__login {
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 48rem) {
  .c-header__login { display: none; }
}

.c-header__cta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

@media (min-width: 48rem) {
  .c-header__cta { margin-inline-start: var(--space-5); }
}

/*
 * "Entrar" é o último item da navegação e precisa se destacar dos demais: ele
 * não é uma seção do site, é uma ação. Peso maior e cor de texto primária
 * fazem isso sem virar um segundo botão ao lado do "Criar conta" — dois botões
 * competindo é o que faz ninguém clicar em nenhum.
 */
.c-header__nav a:last-child {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
}


/* ══ 2. Logo ════════════════════════════════════════════════════════════════
   Cópia exata do `c-sidebar__brand` do painel: mesma marca quadrada, mesmo
   tamanho, mesma tipografia. Era aqui que a diferença mais saltava — o
   quadrado do site era verde e o do painel índigo. */

.c-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  text-decoration: none;
}

.c-logo:hover { color: var(--color-accent-text); }

.c-logo__mark {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-weight: var(--font-weight-bold);

  /* O símbolo de infinito é largo e baixo: no tamanho do texto normal ele
     desaparece dentro do quadrado. Precisa de corpo maior e de entrelinha 1
     para ficar centrado de fato — `place-items: center` alinha a CAIXA da
     linha, não o glifo. */
  font-size: 1.15rem;
  line-height: 1;
}

/*
 * ─── O SÍMBOLO VEM DO CSS, E NÃO DA MARCAÇÃO ──────────────────────────────
 *
 * A partial `partials/header.php` do kit emite o quadrado VAZIO:
 * `<span class="c-logo__mark" aria-hidden="true"></span>`. É por isso que o
 * cabeçalho do site mostrava um quadrado colorido sem nada dentro.
 *
 * Pôr o símbolo aqui evita copiar a partial inteira para o projeto só por um
 * caractere — cópia que congelaria e perderia as correções do kit no menu, no
 * CTA e na navegação.
 *
 * `content` em elemento decorativo é seguro: o `aria-hidden="true"` já está na
 * marcação do kit, então o leitor de tela ignora o quadrado e lê só o nome ao
 * lado. Sem isso ele anunciaria "infinito InfinityMail".
 *
 * No painel o mesmo símbolo está na MARCAÇÃO (`sidebar.php`), porque lá o
 * arquivo é nosso e texto real é sempre melhor que texto gerado por CSS.
 */
.c-logo__mark::before { content: "\221E"; }


/* ══ 3. Cabeçalho de seção ══════════════════════════════════════════════════
   O kit usa `c-section__head` / `__title` / `__lead`; o painel usa
   `c-section__header`. Vocabulários irmãos, então aqui só se completa o que
   falta — sem renomear nada nas views do kit. */

.c-section__head {
  max-width: var(--measure-base);
  margin-bottom: var(--space-8);
}

.c-section__head--center {
  margin-inline: auto;
  text-align: center;
}

.c-section__title {
  margin-top: var(--space-3);
  font-size: var(--font-size-3xl);
}

@media (min-width: 48rem) {
  .c-section__title { font-size: var(--font-size-4xl); }
}

.c-section__lead {
  margin-top: var(--space-4);
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
}


/* ══ 4. Hero ════════════════════════════════════════════════════════════════
   O hero do kit é dimensionado para produto de consumo: título enorme, coluna
   estreita, muito vazio. A escala aqui é a do painel — o maior título do
   sistema é `--font-size-5xl` (2.75rem), e passar disso é o que fazia as duas
   telas parecerem de empresas diferentes.

   `clamp()` em vez de media query: cresce com a viewport sem degrau. */

.c-hero {
  padding-block: var(--space-12) var(--space-10);
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-bg-surface);
}

@media (min-width: 48rem) {
  .c-hero { padding-block: var(--space-20) var(--space-16); }
}

.c-hero__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

/* Duas colunas só quando há imagem. Sem ela, o grid de uma coluna deixa o
   texto ocupar a medida legível inteira em vez de uma faixa estreita com
   metade da tela vazia ao lado — que é como estava. */
@media (min-width: 60rem) {
  .c-hero__grid:has(.c-hero__media) { grid-template-columns: 1.1fr 1fr; }
}

.c-hero__title {
  margin-top: var(--space-3);
  font-size: clamp(2rem, 1.3rem + 3vw, 2.75rem);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

/* O `<em>` é o trecho destacado ("chega."). Cor de acento, sem itálico —
   itálico numa display bold fica torto em quase toda fonte de sistema. */
.c-hero__title em {
  font-style: normal;
  color: var(--color-accent-text);
}

.c-hero__text {
  margin-top: var(--space-5);
  max-width: var(--measure-base);
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
}

.c-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.c-hero__note {
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.c-hero__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--color-border);
  box-shadow: var(--shadow-md);
}


/* ══ 5. Features, steps e faq ═══════════════════════════════════════════════
   Os três são grades de cartão com a mesma pele do `c-card` do painel. Um só
   bloco de regras porque a diferença entre eles é semântica, não visual —
   duplicar produziria três definições que divergem na primeira correção. */

.c-features,
.c-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

/* Colunas pelo espaço, não por um ponto fixo: com três colunas a partir de
   48rem, os títulos dos passos se espremiam em duas ou três linhas. */
@media (min-width: 48rem) {
  .c-features,
  .c-steps { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
}

/* `c-step` também é o passo clicável do painel (panel.css, flex em linha): na
   landing o título vai em cima do texto, não espremido ao lado dele. */
.c-steps > .c-step { display: block; }

.c-feature,
.c-step {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-sm);
}

.c-feature__title,
.c-step__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-3);
}

.c-feature__text,
.c-step__text {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

.c-faq {
  max-width: var(--measure-base);
  margin-inline: auto;
}

.c-faq__item {
  border-bottom: var(--border-width) solid var(--color-border);
}

/* `<details>`/`<summary>` nativo: abre sem JavaScript, é anunciado como
   expansível pelo leitor de tela e o teclado já funciona. */
.c-faq__question {
  padding-block: var(--space-4);
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  list-style: none;
}

.c-faq__question::-webkit-details-marker { display: none; }

.c-faq__answer {
  padding-bottom: var(--space-5);
  color: var(--color-text-secondary);
}


/* ══ 6. Chamada final ═══════════════════════════════════════════════════════
   Único bloco de fundo forte da página. O painel tem `c-section--inverse` com
   o mesmo papel; a cor vem do mesmo token, então os dois combinam sem ajuste. */

.c-cta {
  padding: var(--space-12) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  text-align: center;
}

.c-cta__title {
  font-size: var(--font-size-3xl);
  color: var(--color-text-inverse);
}

.c-cta__text {
  margin-top: var(--space-4);
  margin-inline: auto;
  max-width: var(--measure-base);
  color: var(--color-text-muted);
}

.c-cta .c-button { margin-top: var(--space-8); }


/* ══ 7. Planos ══════════════════════════════════════════════════════════════ */

.c-pricing {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 48rem) {
  .c-pricing { grid-template-columns: repeat(3, 1fr); }
}

.c-plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-sm);
}

/* O plano destacado ganha borda de acento, e não fundo colorido: fundo
   diferente muda o contraste do texto e obriga a reescrever a cor de tudo
   dentro. Borda comunica o mesmo e não quebra nada. */
.c-plan--featured {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-accent);
}

.c-plan__name {
  font-size: var(--font-size-xl);
}

.c-plan__badge {
  display: inline-flex;
  align-items: center;
  /* O cartão é flex em coluna: sem isto o selo estica na largura toda. */
  align-self: flex-start;
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.c-plan__badge--soon {
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
}

.c-plan__price {
  margin-top: var(--space-5);
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  font-variant-numeric: tabular-nums;
}

.c-plan__period {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

.c-plan__text,
.c-plan__limits {
  margin-top: var(--space-3);
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

.c-plan__features {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

/*
 * A view do kit já emite um <svg> de visto dentro de cada <li>, com
 * `aria-hidden`. Estilizar o que existe é melhor que desenhar um marcador por
 * `::before` e ter dois — foi o que aconteceu na primeira versão desta folha.
 */
.c-plan__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.c-plan__features li svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2em;
  color: var(--color-accent);
}

/* `margin-top: auto` empurra o botão para o rodapé do cartão: com listas de
   tamanhos diferentes, os três botões ficam na mesma linha. */
.c-plan__cta { margin-top: auto; padding-top: var(--space-6); }


/* ══ 8. Provas e prosa ══════════════════════════════════════════════════════ */

.c-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}

.c-logos__label {
  width: 100%;
  text-align: center;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Documentos legais. Medida estreita porque é texto corrido longo — 46rem é o
   limite acima do qual o olho perde a linha ao voltar. */
.c-prose {
  max-width: var(--measure-base);
  margin-inline: auto;
  color: var(--color-text-secondary);
}

.c-prose > * + * { margin-top: var(--space-5); }

.c-prose h2 {
  margin-top: var(--space-10);
  font-size: var(--font-size-2xl);
  color: var(--color-text-primary);
}

.c-prose h3 {
  margin-top: var(--space-8);
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}

.c-prose ul,
.c-prose ol { padding-inline-start: var(--space-6); }
.c-prose li + li { margin-top: var(--space-2); }

.c-prose-header {
  max-width: var(--measure-base);
  margin-inline: auto var(--space-10);
}

.c-prose__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-md);
}

.c-prose__table th,
.c-prose__table td {
  padding: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.c-prose__table th { color: var(--color-text-primary); }

/* Telefone: cada linha vira um bloco, cada célula traz o rótulo da coluna.
   Nada rola para o lado. */
@media (max-width: 40rem) {
  .c-prose__table thead { display: none; }
  .c-prose__table tr { display: block; padding-block: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); }
  .c-prose__table td { display: block; padding: var(--space-1) 0; border: 0; }
  .c-prose__table td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
  }
}

.c-prose__meta {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}


/* ══ 9. Autenticação (telas do InfinityID) ═════════════════════════════════
   Login, cadastro, verificação, recuperação, segundo fator e escolha de conta
   são do InfinityID (S25, L-019): o markup é do pacote e entra no nosso
   `layouts/main` com `body.auth-page`. O contrato de estilo são as classes
   `auth-*` — não se renomeiam. O `auth.css` do pacote vem antes (renderização
   mínima, ADOPTION.md item 8); estas regras, com a mesma especificidade e
   carregadas depois, vestem a tela com os tokens daqui, na mesma pele do
   `c-card` (L-040). Quem
   acabou de sair da landing e quem vai entrar no painel veem a mesma coisa no
   meio do caminho.

   Classe nova numa view do pacote aparece crua, sem erro: a lista completa,
   conferida em 09/10/2026, é a de `grep -o 'auth-[a-z-]*' views/infinityid`. */

.auth-layout {
  display: flex;
  justify-content: center;
  padding: var(--space-12) var(--space-4);
}

.auth-panel { width: 100%; max-width: 26rem; }
.auth-panel--wide { max-width: 56rem; }
.auth-panel--centered { text-align: center; }

.auth-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-md);
}

.auth-header { text-align: center; }
.auth-header h1 { font-size: var(--font-size-2xl); line-height: 1.2; }
.auth-header p {
  margin-top: var(--space-2);
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

.auth-text { color: var(--color-text-secondary); }
.auth-hint { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.auth-status { font-size: var(--font-size-4xl); line-height: 1; }

/* ── formulário ── */
.auth-form { display: grid; gap: var(--space-5); }
.auth-inline-form { display: inline; }

.auth-field { display: grid; gap: var(--space-2); }
.auth-field label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.auth-field-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--font-size-md);
}

/* Mesmo campo do painel (`c-field__input`): 16px impede o zoom do iOS. */
.auth-field input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.auth-field input:not([type="checkbox"]):not([type="radio"]):focus {
  outline: 0;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
.auth-field.has-error input { border-color: var(--color-danger); }

/* E-mail travado por convite: `readonly` (desabilitado não é enviado) e com
   cara de travado — a mesma regra do `c-field__input[readonly]` do painel. */
.auth-field input[readonly] {
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
  cursor: not-allowed;
}
.auth-field input[readonly]:focus { border-color: var(--color-border-strong); box-shadow: none; }

.auth-field-error {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-danger-text);
}

.auth-field--check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.auth-field--check input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--color-accent); }
.auth-field--check label { font-weight: var(--font-weight-normal); color: var(--color-text-primary); }

/* ── botões: o `c-button` do painel com outro nome ── */
.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  padding: var(--space-3) var(--space-5);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.auth-btn:hover { border-color: var(--color-text-primary); }
.auth-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.auth-btn--primary {
  width: 100%;
  border-color: transparent;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}
.auth-btn--primary:hover { background: var(--color-accent-hover); color: var(--color-text-on-accent); }

.auth-btn--secondary { width: 100%; }
.auth-btn--outline { background: transparent; }

.auth-btn--danger {
  width: 100%;
  color: var(--color-danger-text);
  border-color: var(--color-danger-border);
}
.auth-btn--danger:hover { background: var(--color-danger-subtle); border-color: var(--color-danger-border); }

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.auth-link,
button.auth-link {
  color: var(--color-accent-text);
  text-decoration: underline;
}
button.auth-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.auth-footer {
  text-align: center;
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}
.auth-footer p + p { margin-top: var(--space-2); }

/* A conta é InfinityID e vale no ecossistema inteiro — dito baixo, sem caixa. */
.auth-idnote {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.auth-idnote-mark { flex-shrink: 0; margin-top: 0.0625rem; color: var(--color-accent-text); }
.auth-idnote strong { font-weight: var(--font-weight-bold); color: var(--color-text-secondary); }

/* ── avisos: o `c-alert` do painel ── */
.auth-alert {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
  font-size: var(--font-size-md);
  text-align: left;
  transition: opacity 0.3s;
}
.auth-alert--success { background: var(--color-success-subtle); border-color: var(--color-success-border); color: var(--color-success-text); }
.auth-alert--warning { background: var(--color-warning-subtle); border-color: var(--color-warning-border); color: var(--color-warning-text); }
.auth-alert--error,
.auth-alert--danger  { background: var(--color-danger-subtle);  border-color: var(--color-danger-border);  color: var(--color-danger-text); }
.auth-alert--required { display: block; font-weight: var(--font-weight-bold); }

.auth-alert-close {
  flex: none;
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--font-size-lg);
  line-height: 1;
  cursor: pointer;
}

/* ── escolha de conta (saguão) ── */
.auth-accounts { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.auth-account {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}
.auth-account:hover { border-color: var(--color-accent); background: var(--color-accent-subtle); }
.auth-account:disabled { opacity: 0.55; cursor: not-allowed; }

.auth-account-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
  font-weight: var(--font-weight-bold);
}
.auth-account-body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.auth-account-name { font-weight: var(--font-weight-bold); overflow-wrap: anywhere; }
.auth-account-meta,
.auth-account-state { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.auth-account-go { flex: none; color: var(--color-text-muted); }

/* ── dispositivos e segundo fator ── */
.auth-sessions { display: grid; margin: 0; padding: 0; list-style: none; }
.auth-session {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
}

.auth-security { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.auth-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
}
.auth-section h2 { font-size: var(--font-size-lg); line-height: 1.3; }

.auth-qr { width: 100%; max-width: 15rem; align-self: center; }
.auth-qr svg { display: block; width: 100%; height: auto; }

.auth-recovery-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.auth-recovery-codes code,
.auth-secret {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-base);
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  user-select: all;
}

@media (min-width: 48rem) {
  .auth-security--off,
  .auth-security--setup,
  .auth-security--enabled { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .auth-security--setup { grid-template-areas: "state qr" "confirm qr"; grid-template-rows: auto 1fr; }
  .auth-security--setup .auth-section--state { grid-area: state; }
  .auth-security--setup .auth-section--qr { grid-area: qr; }
  .auth-security--setup .auth-section--confirm { grid-area: confirm; }
  .auth-security--enabled { grid-template-areas: "state state" "codes disable"; }
  .auth-security--enabled .auth-section--state { grid-area: state; }
  .auth-security--enabled .auth-section--codes { grid-area: codes; }
  .auth-security--enabled .auth-section--disable { grid-area: disable; }
}

:where(.auth-btn, .auth-account, .auth-link, .auth-alert-close, .auth-idnote a):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (max-width: 30rem) {
  .auth-layout { padding: var(--space-8) var(--space-3); }
  .auth-card { padding: var(--space-6) var(--space-4); }
}


/* ══ 10. Complementos de componentes do painel ══════════════════════════════
   O `panel.css` tem `c-button` e `c-button--small`; as views públicas usam
   também `--lg` e `--block`, que só fazem sentido fora do painel. Duas regras,
   não uma folha de botão nova. */

.c-button--lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-base);
}

.c-button--block {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* Página de erro pública. O `c-empty` do painel já é o vazio padrão; aqui só
   ganha respiro de página inteira. */
.c-empty--error { padding-block: var(--space-20); }


/* ══ 11. Cookiebar ══════════════════════════════════════════════════════════
   Fixa embaixo, acima de tudo. Não é modal: bloquear a leitura para pedir
   consentimento é o padrão que faz todo mundo clicar em "aceitar" sem ler. */

.c-cookiebar {
  position: fixed;
  inset-inline: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-overlay);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-md);
}

.c-cookiebar__text {
  flex: 1 1 18rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.c-cookiebar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}


/* ══ 12. Rodapé ═════════════════════════════════════════════════════════════ */

.c-footer {
  margin-top: var(--space-20);
  padding-block: var(--space-12);
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-bg-surface);
  font-size: var(--font-size-sm);
}

.c-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  width: 100%;
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 48rem) {
  .c-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; }
}

.c-footer__col h2,
.c-footer__col h3 {
  margin-bottom: var(--space-4);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.c-footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.c-footer__col a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.c-footer__col a:hover { color: var(--color-accent-text); }

.c-footer__brand { color: var(--color-text-secondary); }

.c-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--measure-wide);
  margin: var(--space-10) auto 0;
  padding: var(--space-6) var(--space-4) 0;
  border-top: var(--border-width) solid var(--color-border);
  color: var(--color-text-muted);
}


/* ── Botão e eyebrow do vocabulário público (c-btn / c-eyebrow) ──────────────
   O kit usa `c-btn`; o painel usa `c-button`. As regras que davam cara de
   botão ao `c-btn` viviam SÓ no `app.css` — que era emitido pelo
   `kit::layouts/main`, layout que o `views/layouts/main.php` local substituiu
   (ver o docblock "O BUNDLE DO KIT NÃO É CARREGADO AQUI" lá). Resultado até
   2026-09-08: os CTAs de /precos ("o clique mais importante da página", pelo
   comentário da própria view), o "Voltar ao início" da página de erro e o
   botão da conta bloqueada renderizavam como link cru — sem erro em lugar
   nenhum, o padrão do §0.2 do handoff.

   As regras vêm do `app.css` (seções 5 e 6), sem o prefixo `main` — lá ele
   existia para vencer o bundle do kit por especificidade; aqui não há bundle
   para vencer. Os valores espelham o `.c-button` do panel.css: mesma marca,
   dois vocabulários. Se um dia o kit renomear tudo para `c-button`, este bloco
   inteiro morre. */
.c-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  padding: var(--space-3) var(--space-5);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg-surface);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}

.c-btn:hover { border-color: var(--color-accent); color: var(--color-accent-text); }

.c-btn--primary {
  background: var(--color-accent);
  border-color: transparent;
  color: var(--color-text-on-accent);
}

.c-btn--primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-text-on-accent);
}

/* Mesmo caso do c-btn: a regra vivia só no app.css órfão. Mono, caixa alta,
   cor de acento — o mesmo eyebrow do painel. */
.c-eyebrow {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-accent-text);
}