/* =============================================================
   Layout — app shell
   Barra fixa no topo, conteúdo com rolagem de documento (mais
   estável em teclado virtual do que 100dvh + scroll interno) e
   uma doca opcional colada no rodapé para a ação principal.
   ============================================================= */

@layer layout {

  /* A casca era uma grade de tres linhas fixas — `auto 1fr auto`. Isso amarra o
     layout a UMA arrumacao de filhos: a linha elastica e a segunda, seja la o
     que estiver nela. No `groups.html`, o segundo filho e o painel de busca, que
     entao esticava ate o pe da tela — a caixa vazia gigante em volta do campo —
     enquanto o conteudo ia para a linha de altura automatica.

     Em coluna flexivel nao existe "segunda linha": quem cresce e quem pede para
     crescer. A pagina pode ganhar ou perder um painel sem que nada se desloque. */
  .app {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }

  /* O conteudo ocupa a sobra; cabecalho, painel de busca e doca ficam do
     tamanho do proprio conteudo. */
  .app__main {
    flex: 1 1 auto;
  }

  /* Item de grid nasce com `min-width: auto`: basta um endereço longo
     dentro de um cartão para a coluna inteira crescer e a página passar
     da borda. Com `min-inline-size: 0` o conteúdo quebra em vez de
     empurrar. */
  /* Item de flex nasce com `min-width: auto`: basta um endereco longo dentro
     de um cartao para o item inteiro crescer e a pagina passar da borda. */
  .app > * {
    min-inline-size: 0;
  }

  .app__main {
    width: 100%;
    max-inline-size: 100%;
    padding-block: var(--space-5) var(--space-10);
    padding-inline: var(--gutter);
  }

  .app__main--flush {
    padding-inline: 0;
  }

  .app__main--narrow,
  .app__main--default,
  .app__main--wide {
    margin-inline: auto;
  }

  .app__main--narrow { max-width: calc(var(--content-narrow) + var(--gutter) * 2); }
  .app__main--default { max-width: calc(var(--content-default) + var(--gutter) * 2); }
  .app__main--wide { max-width: calc(var(--content-wide) + var(--gutter) * 2); }

  /* Doca inferior: ação principal sempre ao alcance do polegar */
  .app__dock {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    padding: var(--space-3) var(--gutter);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background-color: color-mix(in srgb, var(--surface-raised) 92%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-subtle);
  }

  .app__dock-inner {
    margin-inline: auto;
    max-width: var(--content-default);
  }

  .app__footer {
    padding: var(--space-8) var(--gutter);
    text-align: center;
    color: var(--text-subtle);
    font-size: var(--fs-sm);
  }

  .app__footer a {
    color: var(--text-link);
  }

  /* Cabeçalho de página: título + apoio, com respiro consistente */
  .page-head {
    margin-bottom: var(--space-6);
  }

  .page-head__title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
  }

  .page-head__support {
    margin-top: var(--space-2);
    color: var(--text-muted);
  }

  /* Seções empilhadas dentro de uma página de formulário */
  .section-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  /* O respiro maior em tela larga vem das classes md:pt-8 md:pb-12 aplicadas
     ao <main> de cada página. */
}