/* =============================================================================
   WeAgency Club :: assets/css/app.css
   INTERIOR do Club (tudo em /app/). Pele de COMUNIDADE, nao de relatorio.

   Autoria: Felix (frontend) com Iris (design system), reescrita 2026-08-05.
   Motivo da reescrita: a Laise rejeitou a versao anterior ("ta parecendo um
   relatorio e nao uma comunidade"). A versao anterior era escura, com cards de
   documento. Esta e uma rede social habitada: fundo claro, header colorido,
   feed de posts de gente, avatares, curtidas, comentarios, membros visiveis.

   ---------------------------------------------------------------------------
   ANATOMIA COPIADA (referencia aprovada pela Laise)
   ---------------------------------------------------------------------------
   Esqueleto herdado de /Users/laisemesquita/Sites/weloveplay/comunidade/
   (interior do We Love Club da WLC, estilo Skool/myICOR, ja aprovado):
   pagina clara, header colorido com cantos inferiores grandes, topbar com
   marca + busca em pill + avatar, titulo grande centrado, layout de 3 colunas
   (sidebar 210px / feed / coluna direita 300px), composer em pill flutuante
   sobreposto ao header por margem negativa, cards de post claros com avatar
   redondo colorido, rodape de acoes por post, widgets na coluna direita.
   O ESQUELETO e o mesmo; a PELE e WLB, nunca WLC.

   ---------------------------------------------------------------------------
   PALETA: DI-003-wlb (WLB), nunca WLC
   ---------------------------------------------------------------------------
   Zero rosa, zero verde, zero vermelho imperial da WLC. Laranja #D97559 e a
   cor do header e dos acentos primarios; lilas #9B7BC7 e a secundaria.

   SUPERFICIES CLARAS: NAO foram derivadas, saem do proprio DI-003-wlb.
   - pagina  #F5EFE8 = `--wlb-beige`, secao 2 ("Background padrao da pagina").
   - cards   #FFFCF8 = `--wlb-white`, secao 2 ("Superficies elevadas sobre bege").
   - recuo   #F3ECDF = `--cs-bg` do tema Alabaster Luxo, secao 9.1.
   - texto   #1E1B2E = `--wlb-ink`, secao 2.
   Como os quatro ja existem no DI-003-wlb, NAO ha superficie nova esperando
   ratificacao da Iris.

   PONTO QUE PRECISA DE RATIFICACAO DA IRIS NO DI-003-wlb (unico):
   o RAIO DE CANTO. A secao 5 fixa cards em 14px e foto hero em 20px. Esta
   superficie de comunidade usa `--r-card: 22px`, pills 999px e header
   0 0 56px 56px, porque a anatomia aprovada pela Laise pede canto generoso.
   E um desvio consciente da secao 5, restrito a superficie de comunidade do
   app. Iris precisa ratificar (ou rebaixar para 14px) antes do proximo gate.

   AA (WCAG 2.2): o laranja #D97559 aparece so como FUNDO grande e decorativo
   (header) e como texto em tamanho display, nunca como texto pequeno sobre
   claro, conforme a secao 2. Todo texto ou acento laranja usa `--accent-text`
   = #A8472E (`--wlb-orange-ink`), que passa AA sobre bege e branco quente.
   Espacamento: base-4 da secao 3b, sem valor arbitrario.
   Tipografia: Lufga com fallback (secao 3). Zero italico, zero travessao.
   ========================================================================== */

/* =============================================================================
   LUFGA AUTO-HOSPEDADA (Felix, 2026-08-08)

   POR QUE MUDOU. Ate hoje a Lufga vinha de https://fonts.cdnfonts.com por um
   <link> repetido em 29 paginas, e ela NUNCA carregou em producao. Tres falhas
   empilhadas, cada uma sozinha ja bastando para derrubar:
     1. o host devolve HTTP 500;
     2. a CSP do _headers traz style-src 'self' 'unsafe-inline', sem o host,
        entao o stylesheet seria bloqueado mesmo se respondesse 200;
     3. font-src 'self' data: bloquearia os arquivos de fonte em seguida.
   Medido pela Vera em 2026-08-08: document.fonts.size === 0 em todas as rotas.
   Ninguem tinha visto porque a Lufga esta instalada no Mac da Laise e o
   fallback resolvia local. Em maquina sem ela, o produto caia para Segoe UI no
   Windows e Roboto no Android, os dois proibidos por nome no DI-003-wlb secao 3.

   O CONSERTO. Os arquivos moram em /assets/fonts/, servidos pela mesma origem.
   A CSP nao precisou mudar: font-src 'self' ja autoriza, e nao existe mais
   stylesheet de terceiro para style-src barrar.

   SEIS PESOS, NAO CINCO: o CSS usa 400, 500, 600, 700, 800 e 900. Se o 800
   ficasse de fora, o navegador resolveria para 900 pela regra de casamento de
   peso e o auth-cartao h1 renderizaria mais pesado do que a Iris especificou.
   Cada peso e um arquivo separado de proposito: o navegador baixa so os pesos
   que a pagina usa.

   SUBSET latin + latin-ext, feito com fontTools: 547 glifos, cobertura de
   portugues conferida caractere a caractere (acentos, cedilha, aspas
   tipograficas, simbolos de moeda). 28 KB por peso, contra 35 KB do OTF cru.

   font-display: swap de proposito. O texto aparece na hora com o fallback e
   troca quando a Lufga chega. FOIT (texto invisivel esperando a fonte) e pior
   para quem le do que um instante de fallback.

   ONDE ELE VIVE: aqui e SO aqui. auth.css nao repete este bloco porque toda
   pagina de auth carrega app.css antes dele. Dois blocos de @font-face seriam
   duas fontes de verdade para o mesmo caminho de arquivo.
   ========================================================================== */

@font-face {
  font-family: 'Lufga';
  src: url('/assets/fonts/lufga-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lufga';
  src: url('/assets/fonts/lufga-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lufga';
  src: url('/assets/fonts/lufga-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lufga';
  src: url('/assets/fonts/lufga-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lufga';
  src: url('/assets/fonts/lufga-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lufga';
  src: url('/assets/fonts/lufga-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ===================== TOKENS ===================== */

:root {
  color-scheme: light;

  /* Paleta de marca, DI-003-wlb secao 2 */
  --wlb-orange: #D97559;
  --wlb-orange-deep: #B85C42;
  --wlb-orange-soft: #F2B39A;
  --wlb-orange-ink: #A8472E;
  --wlb-lilac: #C7A5F3;
  --wlb-lilac-mid: #9B7BC7;
  --wlb-lilac-deep: #6B3FA0;
  --wlb-lilac-soft: #E4D4FA;
  --wlb-ink: #1E1B2E;
  --wlb-beige: #F5EFE8;
  --wlb-white: #FFFCF8;

  /* Superficies claras, DI-003-wlb secao 2 + secao 9.1 (Alabaster Luxo) */
  --cs-bg: var(--wlb-beige);
  --cs-surface: var(--wlb-white);
  --cs-surface-2: #F3ECDF;
  --cs-ink: var(--wlb-ink);
  --cs-ink-2: #4A435E;
  --cs-ink-3: #7A7388;
  --cs-line: rgba(30, 27, 46, 0.10);
  --cs-line-forte: rgba(30, 27, 46, 0.20);

  /* Tokens semanticos de produto, DI-003-wlb secao 8 e secao 9.1 (claro) */
  --accent-text: var(--wlb-orange-ink);
  --cta-bg: var(--wlb-orange-ink);
  --cta-fg: #FFFFFF;
  --cta-hover: #8F3B26;
  --focus-ring: var(--wlb-orange-ink);
  --focus-ring-offset: 2px;
  --error-bg: var(--wlb-white);
  --error-fg: var(--wlb-orange-ink);
  --error-border: var(--wlb-orange-deep);
  --done-fg: var(--wlb-orange-ink);
  --done-opacity: 0.55;

  /* Escala base-4, DI-003-wlb secao 3b */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Raio: ver nota de ratificacao no cabecalho deste arquivo */
  --r-card: 22px;
  --r-inner: 16px;
  --r-pill: 999px;

  --sombra-card: 0 10px 28px rgba(30, 27, 46, 0.08);
  --sombra-flutuante: 0 14px 34px rgba(30, 27, 46, 0.14);

  /* Respiro lateral fluido da pagina full-bleed */
  --page-pad: clamp(var(--space-md), 4vw, var(--space-2xl));

  --fonte: 'Lufga', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ===================== RESET ===================== */

*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd, fieldset {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  background: var(--cs-bg);
  color: var(--cs-ink);
  font-family: var(--fonte);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; }

a { color: inherit; text-decoration: none; }

img, svg, video { display: block; max-width: 100%; }

button, input, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

/* ===================== ACESSIBILIDADE ===================== */

.wac-oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wac-pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--wlb-ink);
  color: var(--wlb-beige);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-inner) 0;
}
.wac-pular:focus { left: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--space-sm);
}

/* Sobre o header laranja o anel precisa ser claro para aparecer */
.wac-hero a:focus-visible,
.wac-hero button:focus-visible,
.wac-hero input:focus-visible {
  outline-color: var(--wlb-white);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ===================== FITA DE PREVIA ===================== */

.wac-fita-previa {
  background: var(--wlb-ink);
  color: var(--wlb-beige);
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  padding: var(--space-sm) var(--space-md);
}

/* =============================================================================
   HEADER (hero laranja)
   Espelha o header vermelho da comunidade WLC: cantos inferiores grandes,
   topbar com marca, busca em pill e avatar, titulo grande centrado. Aqui o
   fundo e o laranja WLB. Texto sobre ele so em tamanho display (autorizado
   pela secao 2 do DI-003-wlb) ou dentro de pill de fundo escuro.
   ========================================================================== */

.wac-hero {
  background: var(--wlb-orange);
  border-radius: 0 0 56px 56px;
  padding-bottom: var(--space-2xl);
}

.wac-hero__topo {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md) var(--page-pad) 0;
}

.wac-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  min-height: 44px;
}

.wac-marca__sinal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 30px;
  padding: 0 var(--space-sm);
  border-radius: var(--r-pill);
  background: var(--wlb-white);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.wac-marca__nome {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: var(--wlb-white);
  font-size: 20px;
  line-height: 1.1;
}
.wac-marca__nome b { font-weight: 900; }
.wac-marca__nome span { font-weight: 500; }

.wac-busca {
  flex: 1;
  max-width: 380px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid rgba(255, 252, 248, 0.38);
  border-radius: var(--r-pill);
  background: rgba(30, 27, 46, 0.42);
  color: var(--wlb-white);
}

.wac-busca svg { flex-shrink: 0; }

.wac-busca input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 13.5px;
  color: var(--wlb-white);
}
.wac-busca input::placeholder { color: var(--wlb-white); opacity: 1; }
.wac-busca input:focus-visible { outline: 2px solid var(--wlb-white); outline-offset: 2px; }

.wac-hero__avatar {
  margin-left: auto;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wlb-lilac-soft);
  color: var(--wlb-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
}

.wac-hero__cabeca {
  padding: var(--space-lg) var(--page-pad) 0;
  text-align: center;
}

.wac-hero__eyebrow {
  display: inline-block;
  background: var(--wlb-ink);
  color: var(--wlb-beige);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 5px 14px;
}

.wac-hero__titulo {
  margin-top: var(--space-sm);
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--wlb-white);
}

/* Enfase por COR e PESO, nunca italico (DI-003-wlb secao 3).
   Ink sobre laranja mede 5.3:1, passa AA com folga. */
.wac-hero__titulo em {
  font-style: normal;
  color: var(--wlb-ink);
}

.wac-hero__sub {
  max-width: 62ch;
  margin: var(--space-md) auto 0;
  color: var(--wlb-ink);
  font-size: 15px;
  font-weight: 500;
}

/* ===================== LAYOUT DE 3 COLUNAS ===================== */

.wac-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 300px;
  gap: var(--space-lg);
  align-items: flex-start;
  padding: 0 var(--page-pad) var(--space-xl);
}

/* Paginas sem coluna direita (trilha, biblioteca, boas-vindas) */
.wac-layout--duas { grid-template-columns: 210px minmax(0, 1fr); }

.wac-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
  /* Puxa o composer para cima do header, igual a referencia aprovada */
  margin-top: -32px;
}

.wac-lateral {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
  padding-top: var(--space-lg);
}

/* ===================== SIDEBAR (injetada por wac-shell.js) ===================== */

.wac-sidebar {
  position: sticky;
  top: var(--space-lg);
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
  padding-top: var(--space-lg);
}

.wac-nav-grupo { min-width: 0; }

.wac-nav-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cs-ink-2);
  padding: 0 14px var(--space-sm);
}

.wac-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.wac-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: var(--space-sm) 14px;
  border-radius: var(--r-pill);
  color: var(--cs-ink);
  font-size: 14px;
  font-weight: 500;
}

.wac-nav__item svg { flex-shrink: 0; }
.wac-nav__rotulo { flex: 1; min-width: 0; }

.wac-nav__item:hover { background: var(--cs-surface); }

.wac-nav__item.is-ativo {
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-weight: 700;
}
.wac-nav__item.is-ativo:hover { background: var(--cta-bg); }

.wac-nav__item.is-desativado { color: var(--cs-ink-2); cursor: default; }
.wac-nav__item.is-desativado:hover { background: transparent; }

.wac-nav__chip {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cs-ink-2);
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: var(--r-pill);
  padding: 2px var(--space-sm);
  white-space: nowrap;
}

.wac-nav__pill {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--wlb-lilac-deep);
  background: var(--wlb-lilac-soft);
  border-radius: var(--r-pill);
  padding: 2px var(--space-sm);
  white-space: nowrap;
}
.wac-nav__item.is-ativo .wac-nav__pill { background: var(--wlb-white); color: var(--accent-text); }

.wac-sidebar__rodape { margin-top: var(--space-xs); }

.wac-sair {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 44px;
  padding: var(--space-sm) 14px;
  border: 1px solid var(--cs-line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--cs-ink-2);
  font-size: 14px;
  font-weight: 500;
}
.wac-sair:hover { background: var(--cs-surface); color: var(--cs-ink); }

/* ===================== COMPOSER (pill flutuante) ===================== */

.wac-composer {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--cs-surface);
  border-radius: var(--r-pill);
  box-shadow: var(--sombra-flutuante);
  padding: var(--space-sm);
}

.wac-composer__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wlb-orange-ink);
  color: var(--wlb-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
}

.wac-composer__input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  max-height: 160px;
  resize: none;
  overflow-y: hidden;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--cs-surface-2);
  padding: 12px var(--space-md);
  font-size: 14px;
  line-height: 1.35;
  color: var(--cs-ink);
}
.wac-composer__input::placeholder { color: var(--cs-ink-2); }

.wac-composer__publicar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: 13px;
  font-weight: 700;
}
.wac-composer__publicar:hover:not(:disabled) { background: var(--cta-hover); }
.wac-composer__publicar:disabled {
  background: var(--cs-surface-2);
  color: var(--cs-ink-2);
  border: 1px solid var(--cs-line);
  cursor: not-allowed;
}

.wac-composer__dica {
  margin: calc(var(--space-sm) * -1) 0 0 var(--space-2xl);
  font-size: 11.5px;
  color: var(--cs-ink-2);
}

/* ===================== RETOMAR (faixa de continuidade) ===================== */

.wac-retomar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--cs-line);
  border-radius: var(--r-card);
  background: var(--cs-surface);
  box-shadow: var(--sombra-card);
}
.wac-retomar:hover { border-color: var(--wlb-orange); }

.wac-retomar__icone {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wlb-lilac-soft);
  color: var(--wlb-lilac-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wac-retomar__corpo { flex: 1; min-width: 0; display: block; }
.wac-retomar__rotulo {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cs-ink-2);
}
.wac-retomar__titulo { display: block; margin-top: 2px; font-size: 15px; font-weight: 700; color: var(--cs-ink); }

/* ===================== POST ===================== */

.wac-post {
  background: var(--cs-surface);
  border-radius: var(--r-card);
  box-shadow: var(--sombra-card);
  padding: var(--space-lg);
}

.wac-post--fixado {
  border: 1px solid var(--wlb-orange-soft);
  box-shadow: var(--sombra-card), 0 0 0 4px rgba(217, 117, 89, 0.08);
}

.wac-post__fixado {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.wac-post__cabeca { display: flex; align-items: center; gap: var(--space-sm); }

.wac-post__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  background: var(--wlb-ink);
  color: var(--wlb-white);
}

.wac-post__meta { flex: 1; min-width: 0; }

.wac-post__linha-autor {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.wac-post__autor { font-size: 15px; font-weight: 700; color: var(--cs-ink); }
.wac-post__quando { font-size: 12.5px; color: var(--cs-ink-2); }

.wac-post__titulo {
  margin-top: var(--space-md);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cs-ink);
}

.wac-post__corpo {
  margin-top: var(--space-sm);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--cs-ink-2);
}
.wac-post__corpo p + p { margin-top: var(--space-sm); }
.wac-post__corpo b, .wac-post__corpo strong { color: var(--cs-ink); font-weight: 700; }

/* Selo de nivel do autor */
.wac-nivel {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 3px var(--space-sm);
  white-space: nowrap;
}
.wac-nivel--equipe { background: var(--cta-bg); color: var(--cta-fg); }
.wac-nivel--agente { background: var(--wlb-lilac-deep); color: #FFFFFF; }
.wac-nivel--fundador { background: var(--wlb-lilac-soft); color: var(--wlb-lilac-deep); }

/* Categoria do post */
.wac-post__tag {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-text);
  border: 1.5px solid var(--wlb-orange);
  border-radius: var(--r-pill);
  padding: 2px var(--space-sm);
  white-space: nowrap;
}

/* Foto do post: placeholder em gradiente CSS. Gradiente so dentro da familia
   laranja ou da familia lilas, nunca cruzando para rosa (DI-003-wlb 9.7). */
.wac-post__foto {
  position: relative;
  margin-top: var(--space-md);
  height: 200px;
  border-radius: var(--r-inner);
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 26%, rgba(255, 252, 248, 0.45), transparent 46%),
    linear-gradient(140deg, var(--wlb-orange-soft), var(--wlb-orange-deep));
}

.wac-post__foto--lilas {
  background:
    radial-gradient(circle at 74% 22%, rgba(255, 252, 248, 0.42), transparent 48%),
    linear-gradient(140deg, var(--wlb-lilac-soft), var(--wlb-lilac-deep));
}

.wac-post__foto-legenda {
  position: absolute;
  left: 14px;
  bottom: 12px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--wlb-ink);
  color: var(--wlb-beige);
  font-size: 11.5px;
  font-weight: 500;
}

/* Acoes do post */
.wac-post__acoes {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}

.wac-post__acao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: var(--space-sm) 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--cs-ink-2);
  font-size: 13.5px;
  font-weight: 500;
}
.wac-post__acao svg { color: var(--wlb-orange-deep); }
.wac-post__acao:hover { background: var(--cs-surface-2); color: var(--cs-ink); }
.wac-post__acao[aria-pressed="true"] { color: var(--accent-text); font-weight: 700; }
.wac-post__acao[aria-pressed="true"] svg { fill: rgba(184, 92, 66, 0.22); }

/* Comentario em previa dentro do post */
.wac-comentario {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--cs-line);
}
.wac-comentario__corpo { min-width: 0; font-size: 13.5px; line-height: 1.55; color: var(--cs-ink-2); }
.wac-comentario__autor { font-weight: 700; color: var(--cs-ink); }

/* Painel de comentarios aberto (2026-08-06, feed real).
   Nenhum estilo novo: e o mesmo idioma do card (linha fina de separacao,
   avatar pequeno, pill de campo igual ao .wac-campo input). Apenas layout,
   com os tokens que ja existiam. */
.wac-comentarios {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--cs-line);
}
.wac-comentarios[hidden] { display: none; }
/* Dentro do painel os comentarios ja estao separados pela borda do painel. */
.wac-comentarios .wac-comentario { margin-top: 0; padding-top: 0; border-top: 0; }

.wac-comentario__forma { display: flex; align-items: center; gap: var(--space-sm); }
.wac-comentario__forma input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 12px var(--space-md);
  border: 1px solid var(--cs-line-forte);
  border-radius: var(--r-pill);
  background: var(--cs-surface);
  color: var(--cs-ink);
  font-family: inherit;
  font-size: 13.5px;
}
/* --cs-ink-2 e nao --cs-ink-3: sobre a superficie do card o ink-3 mede 4,43:1,
   ou seja abaixo do AA de 4.5:1 para texto normal. Mesmo criterio ja usado no
   placeholder do composer. */
.wac-comentario__forma input::placeholder { color: var(--cs-ink-2); }
.wac-comentario__vazio { font-size: 13.5px; color: var(--cs-ink-2); }

/* Midia real do post (`midia_path` + URL assinada). O bloco em gradiente
   continua sendo o fundo, entao a imagem ou o video que ainda esta carregando
   (ou a URL assinada que ainda nao voltou) nao deixa buraco branco. */
.wac-post__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Video: `contain` e fundo escuro, nunca `cover`. Cortar imagem de foto e
   aceitavel; cortar gravacao de tela apaga justamente o canto onde estava a
   coisa que a pessoa queria mostrar. */
.wac-post__foto--video { background: var(--wlb-ink); height: auto; }
.wac-post__foto--video video {
  display: block;
  width: 100%;
  max-height: calc(var(--space-2xl) * 10);
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--wlb-ink);
}

/* Acoes de dono e de equipe: mesmo botao do curtir, empurrado para a direita
   para nao competir com curtir e comentar, que sao a acao principal do card. */
.wac-post__acoes-dono {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.wac-post__acao--perigo { color: var(--error-fg); }
.wac-post__acao--perigo:hover { background: var(--cs-surface-2); color: var(--error-fg); }

/* Gaveta do card: confirmar apagamento, moderar, editar. Mesma separacao do
   painel de comentarios, para nao inventar um segundo idioma de bloco. */
.wac-post__gaveta {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--cs-line);
}
.wac-post__gaveta[hidden] { display: none; }
.wac-post__gaveta p { font-size: 13.5px; line-height: 1.55; color: var(--cs-ink-2); }
.wac-post__gaveta strong { color: var(--cs-ink); }
.wac-post__gaveta textarea,
.wac-post__gaveta input[type="text"] {
  width: 100%;
  min-height: 44px;
  padding: 12px var(--space-md);
  border: 1px solid var(--cs-line-forte);
  border-radius: var(--r-inner);
  background: var(--cs-surface);
  color: var(--cs-ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
}
.wac-post__gaveta-acoes { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* Apagar o proprio comentario. Alvo de 32px, acima do minimo de 24px do
   criterio 2.5.8 do WCAG 2.2 AA, sem esticar a linha do comentario. */
.wac-comentario__apagar {
  flex-shrink: 0;
  align-self: flex-start;
  min-height: var(--space-xl);
  padding: var(--space-xs) var(--space-sm);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--cs-ink-2);
  font-size: 12px;
  font-weight: 500;
}
.wac-comentario__apagar:hover { background: var(--cs-surface-2); color: var(--error-fg); }

/* ===================== ANEXO DE MIDIA NO COMPOSER ===================== */

.wac-composer-midia {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  padding: var(--space-md);
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: var(--r-card);
  box-shadow: var(--sombra-card);
}
.wac-composer-midia[hidden] { display: none; }

.wac-composer-midia__miniatura {
  flex-shrink: 0;
  width: calc(var(--space-2xl) * 2);
  height: calc(var(--space-2xl) * 2);
  border-radius: var(--r-inner);
  overflow: hidden;
  background: var(--cs-surface-2);
}
.wac-composer-midia__miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Video na previa do composer: mais largo que o quadrado da foto, porque
   gravacao de tela em 96px nao deixa conferir nada antes de publicar. */
.wac-composer-midia__miniatura--video {
  width: calc(var(--space-2xl) * 5);
  height: auto;
  background: var(--wlb-ink);
}
.wac-composer-midia__miniatura--video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--wlb-ink);
}

/* O composer ganhou dois botoes (Foto ou vídeo, Gravar a tela) alem do
   Publicar. Em uma linha so, isso espremia o campo de texto para 188px na
   faixa de 760 a 1100px, que e onde vive laptop pequeno e tablet deitado.
   Abaixo de 1100px o campo desce para a propria linha, exatamente o mesmo
   arranjo que o mobile ja usava. Acima disso o composer segue como a Laise
   aprovou, em linha unica. */
/* MEDIO 2 da auditoria da Vera (2026-08-08): aqui havia `order: 3` no campo de
   texto. Ele empurrava o campo para a ultima linha e deixava o botao Publicar
   ACIMA do lugar de escrever, invertendo tambem a ordem de foco em relacao a
   ordem visual. Falha SC 2.4.3 (Ordem de foco) e 1.3.2 (Sequencia com
   significado). O `order` saiu: a ordem do DOM ja e a certa, campo primeiro e
   botoes depois, e agora as duas coincidem. */
@media (max-width: 1100px) {
  .wac-composer { flex-wrap: wrap; border-radius: var(--r-card); }
  .wac-composer__input { flex: 1 1 100%; }
  .wac-composer__publicar { margin-left: auto; }
  .wac-composer__dica { margin-left: 0; }
}

/* ===================== GRAVACAO DE TELA ===================== */

.wac-gravacao {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding: var(--space-md);
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: var(--r-card);
  box-shadow: var(--sombra-card);
}
.wac-gravacao[hidden] { display: none; }
.wac-gravacao__titulo { font-size: 15px; font-weight: 700; color: var(--cs-ink); }
.wac-gravacao__texto { font-size: 13px; line-height: 1.55; color: var(--cs-ink-2); }
.wac-gravacao__linha { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

/* Caixa de opcao com alvo de 44px na etiqueta inteira, nao so no quadradinho. */
.wac-gravacao__opcao {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  font-size: 13.5px;
  color: var(--cs-ink);
}
.wac-gravacao__opcao input { width: 20px; height: 20px; accent-color: var(--cta-bg); }

/* Relogio da gravacao: numero grande, porque ele e a unica confirmacao de que
   a gravacao esta viva. */
.wac-gravacao__relogio {
  font-size: 28px;
  font-weight: 900;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.wac-gravacao__ponto {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: var(--space-sm);
  border-radius: 50%;
  background: var(--wlb-orange-deep);
}

/* Progresso de upload: reaproveita o trilho e a barra que ja existem. */
.wac-envio { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-sm); }
.wac-envio[hidden] { display: none; }
.wac-envio__texto { font-size: 12.5px; color: var(--cs-ink-2); }

.wac-composer-midia__corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.wac-composer-midia__nome {
  font-size: 12.5px;
  color: var(--cs-ink-2);
  overflow-wrap: anywhere;
}
.wac-composer-midia__linha { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

@media (max-width: 760px) {
  .wac-composer-midia { flex-direction: column; }
  .wac-composer-midia__miniatura { width: 100%; height: calc(var(--space-2xl) * 3); }
}

/* ===================== CARDS GENERICOS ===================== */

.wac-card {
  background: var(--cs-surface);
  border-radius: var(--r-card);
  box-shadow: var(--sombra-card);
  padding: var(--space-lg);
}

.wac-card--destaque { border: 1px solid var(--wlb-orange-soft); }

.wac-card--lilas { background: var(--wlb-lilac-soft); box-shadow: none; }

.wac-card--acao { display: block; }
.wac-card--acao:hover { box-shadow: var(--sombra-flutuante); }

.wac-card__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.wac-card__titulo { font-size: 17px; font-weight: 700; color: var(--cs-ink); }
.wac-card__texto { margin-top: var(--space-sm); font-size: 14.5px; line-height: 1.6; color: var(--cs-ink-2); }
.wac-card__meta { font-size: 12.5px; color: var(--cs-ink-2); }

.wac-divisor { border: 0; border-top: 1px solid var(--cs-line); margin: var(--space-md) 0; }

.wac-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}

/* ===================== WIDGETS DA COLUNA DIREITA ===================== */

.wac-widget {
  background: var(--cs-surface);
  border-radius: var(--r-card);
  box-shadow: var(--sombra-card);
  padding: var(--space-md);
}

/* Widget lilas (proxima entrega): precisa vir depois de .wac-widget para
   ganhar dele na cascata, ja que a especificidade e a mesma. */
.wac-widget.wac-card--lilas { background: var(--wlb-lilac-soft); box-shadow: none; }

.wac-widget__titulo { margin-bottom: var(--space-md); font-size: 14px; font-weight: 700; color: var(--cs-ink); }

/* Card do clube */
.wac-clube__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-inner);
  background: var(--wlb-orange);
  color: var(--wlb-ink);
  font-size: 14px;
  font-weight: 900;
}
.wac-clube__nome { margin-top: var(--space-sm); font-size: 16px; font-weight: 900; color: var(--cs-ink); }
.wac-clube__texto { margin-top: var(--space-xs); font-size: 13.5px; line-height: 1.55; color: var(--cs-ink-2); }
.wac-clube__numeros {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--cs-line);
  border-bottom: 1px solid var(--cs-line);
}
.wac-clube__num { font-size: 18px; font-weight: 900; line-height: 1.1; color: var(--accent-text); }
.wac-clube__rotulo { font-size: 11px; font-weight: 500; color: var(--cs-ink-2); }

/* Leaderboard */
.wac-rank { display: flex; flex-direction: column; gap: var(--space-sm); }
.wac-rank__item { display: flex; align-items: center; gap: var(--space-sm); }
.wac-rank__pos {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  color: var(--cs-ink-2);
}
.wac-rank__nome { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--cs-ink); }
.wac-rank__nivel { font-size: 11.5px; font-weight: 500; color: var(--cs-ink-2); }
.wac-rank__xp {
  flex-shrink: 0;
  padding: 3px var(--space-sm);
  border-radius: var(--r-pill);
  background: var(--cs-surface-2);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.wac-rank__item--voce { background: var(--cs-surface-2); border-radius: var(--r-pill); padding: var(--space-xs); }

/* Membros online */
.wac-online__fila { display: flex; align-items: center; flex-wrap: wrap; }
.wac-online__fila .wac-avatar { margin-right: -8px; border: 2px solid var(--cs-surface); }
.wac-online__mais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  margin-left: 14px;
  padding: 0 var(--space-sm);
  border-radius: var(--r-pill);
  background: var(--cs-surface-2);
  color: var(--cs-ink-2);
  font-size: 12px;
  font-weight: 700;
}
.wac-online__texto { margin-top: var(--space-sm); font-size: 12.5px; color: var(--cs-ink-2); }

/* Proxima entrega */
.wac-entrega { display: flex; gap: var(--space-sm); align-items: center; }
.wac-data-chip {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 56px;
  border-radius: 999px 999px var(--space-sm) var(--space-sm);
  background: var(--cs-surface);
}
.wac-data-chip .dia { font-size: 16px; font-weight: 900; line-height: 1.1; color: var(--accent-text); }
.wac-data-chip .mes {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cs-ink-2);
}

/* ===================== AVATARES ===================== */

.wac-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--wlb-ink);
  color: var(--wlb-white);
  font-weight: 900;
  flex-shrink: 0;
}
.wac-avatar--p { width: 28px; height: 28px; font-size: 10px; }
.wac-avatar--m { width: 36px; height: 36px; font-size: 12px; }
.wac-avatar--g { width: 52px; height: 52px; font-size: 16px; }

/* AS QUATRO CORES DE AVATAR (slugs fixados pelo CHECK membros_avatar_cor_conhecida
   da 0011: laranja, lilas, terra, claro). Medido no navegador, texto de 12px,
   que nao conta como texto grande em lugar nenhum, entao o piso e 4,5:1:
     laranja  5,69:1    lilas  7,22:1    terra  9,34:1    claro  4,84:1

   CORRECAO 2026-08-06 (Felix), com o motivo escrito para nao ser desfeita sem
   querer: `terra` era `--wlb-orange-deep` (#B85C42) com texto branco e media
   4,42:1, ou seja REPROVAVA no AA por pouco. Era divida invisivel enquanto a
   cor era sorteada; virou defeito no dia em que o membro passou a ESCOLHER.

   O pedido foi "escurece o terra". Medi as duas saidas antes de escolher:
     escurecer para --cta-hover (#8F3B26): passa com 7,28:1, MAS fica a 1,28:1
       de distancia do `laranja`, e duas das quatro opcoes do seletor ficariam
       visualmente iguais. Corrige o contraste e quebra a escolha.
     clarear para --wlb-orange-soft (#F2B39A) com texto ink: passa com 9,34:1 e
       fica a 3,24:1 do `laranja`, ou seja continua sendo uma opcao distinta.
   Ficou a segunda. O conjunto agora e simetrico: duas escuras com texto claro
   (laranja, lilas) e duas claras com texto escuro (terra, claro), uma quente e
   uma fria de cada lado. Nenhuma cor nova entrou: os quatro valores ja estavam
   no DI-003-wlb. IRIS PRECISA RATIFICAR, porque a decisao e de marca; se ela
   preferir o `terra` escuro, a saida e trocar o par inteiro de vez, nunca
   voltar para o #B85C42, que reprova. */
.wac-avatar--laranja { background: var(--wlb-orange-ink); color: var(--wlb-white); }
.wac-avatar--lilas { background: var(--wlb-lilac-deep); color: #FFFFFF; }
.wac-avatar--terra { background: var(--wlb-orange-soft); color: var(--wlb-ink); }
.wac-avatar--claro { background: var(--wlb-lilac-mid); color: var(--wlb-ink); }

/* ===================== CHIPS, SELOS E BOTOES ===================== */

.wac-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 11.5px;
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: var(--space-xs) var(--space-sm);
  white-space: nowrap;
}
.wac-chip--xp { background: var(--cs-surface-2); color: var(--accent-text); }
.wac-chip--lilas { background: var(--wlb-lilac-soft); color: var(--wlb-lilac-deep); }
.wac-chip--calado { background: var(--cs-surface-2); color: var(--cs-ink-2); }

.wac-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-xs) 12px;
  border-radius: var(--r-pill);
  background: var(--wlb-lilac-soft);
  color: var(--wlb-lilac-deep);
  font-size: 12px;
  font-weight: 700;
}

.wac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--cs-line-forte);
  border-radius: var(--r-pill);
  background: var(--cs-surface);
  color: var(--cs-ink);
  font-size: 14px;
  font-weight: 700;
}
.wac-btn:hover { border-color: var(--wlb-orange); }

.wac-btn--primario { background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-fg); }
.wac-btn--primario:hover { background: var(--cta-hover); border-color: var(--cta-hover); }

.wac-btn--pequeno { padding: var(--space-sm) var(--space-md); font-size: 13px; }
.wac-btn--bloco { width: 100%; }

.wac-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.wac-btn:disabled:hover { border-color: var(--cs-line-forte); }

.wac-acoes { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

/* ===================== PROGRESSO ===================== */

.wac-progresso { min-width: 0; }

.wac-progresso__trilho {
  height: var(--space-sm);
  border-radius: var(--r-pill);
  background: var(--cs-surface-2);
  overflow: hidden;
}

.wac-progresso__barra {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--wlb-orange-deep), var(--wlb-orange));
}

.wac-progresso__legenda {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: 6px;
  font-size: 12px;
  color: var(--cs-ink-2);
}
.wac-progresso__legenda b { color: var(--cs-ink); }

/* ===================== PASSOS (onboarding) ===================== */

.wac-passos { display: flex; flex-direction: column; gap: var(--space-md); }

.wac-passo { display: flex; gap: var(--space-sm); align-items: flex-start; }

.wac-passo__num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--wlb-orange);
  background: var(--cs-surface);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 900;
}

.wac-passo--feito .wac-passo__num {
  background: var(--done-fg);
  border-color: var(--done-fg);
  color: var(--cta-fg);
}
.wac-passo--feito .wac-passo__corpo { opacity: var(--done-opacity); }

.wac-passo__corpo { flex: 1; min-width: 0; }

.wac-passo__titulo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 700;
  color: var(--cs-ink);
}

.wac-passo__texto { margin-top: var(--space-xs); font-size: 13.5px; line-height: 1.55; color: var(--cs-ink-2); }
.wac-passo__acao { margin-top: var(--space-sm); }

.wac-passo-marcador {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cs-ink-2);
}

/* ===================== TRILHA (modulos e aulas) ===================== */

.wac-modulos { display: flex; flex-direction: column; gap: var(--space-sm); }

.wac-modulo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: 12px var(--space-md);
  border: 1px solid var(--cs-line);
  border-radius: var(--r-inner);
  background: var(--cs-surface);
}

.wac-modulo__ordem {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cs-surface-2);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 900;
}

.wac-modulo__corpo { flex: 1; min-width: 0; }
.wac-modulo__titulo { font-size: 14.5px; font-weight: 700; color: var(--cs-ink); }
.wac-modulo__meta { font-size: 12px; color: var(--cs-ink-2); }

.wac-modulo--ativo { border-color: var(--wlb-orange); box-shadow: 0 0 0 3px rgba(217, 117, 89, 0.12); }
.wac-modulo--bloqueado { background: var(--cs-surface-2); border-style: dashed; }
.wac-modulo--bloqueado .wac-modulo__titulo { color: var(--cs-ink-2); }

/* ===================== PAR PDF + SKILL ===================== */

.wac-par {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--r-inner);
  background: var(--cs-surface-2);
}

.wac-par__linha { display: flex; gap: var(--space-sm); font-size: 13.5px; line-height: 1.5; color: var(--cs-ink-2); }
.wac-par__linha b { color: var(--cs-ink); }

.wac-par__marca {
  flex-shrink: 0;
  width: var(--space-sm);
  height: var(--space-sm);
  margin-top: 6px;
  border-radius: 50%;
  background: var(--wlb-lilac-mid);
}
.wac-par__linha--pago .wac-par__marca { background: var(--wlb-orange-ink); }

.wac-dica { display: inline-flex; }

/* ===================== MEMBRO, METRICAS E DADOS ===================== */

.wac-membro { display: flex; align-items: center; gap: var(--space-sm); }
.wac-membro__nome { font-size: 15px; font-weight: 700; color: var(--cs-ink); }
.wac-membro__nivel { font-size: 12.5px; color: var(--cs-ink-2); }

.wac-metricas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-top: var(--space-md); }

.wac-metrica { padding: var(--space-sm) 12px; border-radius: var(--r-inner); background: var(--cs-surface-2); }
.wac-metrica__valor { font-size: 20px; font-weight: 900; line-height: 1.1; color: var(--accent-text); }
.wac-metrica__rotulo { font-size: 11px; color: var(--cs-ink-2); }

.wac-dados { display: flex; flex-direction: column; }
.wac-dados__linha {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 12px 0;
  border-bottom: 1px solid var(--cs-line);
  font-size: 14px;
}
.wac-dados__linha:last-child { border-bottom: 0; }
.wac-dados__rotulo { color: var(--cs-ink-2); }
.wac-dados__valor { font-weight: 700; color: var(--cs-ink); text-align: right; }

/* ===================== FORMULARIO DO PERFIL ===================== */

.wac-campo { display: flex; flex-direction: column; gap: 6px; }
.wac-campo label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cs-ink-2);
}
.wac-campo input {
  width: 100%;
  min-height: 44px;
  padding: 12px var(--space-md);
  border: 1px solid var(--cs-line-forte);
  border-radius: var(--r-pill);
  background: var(--cs-surface);
  color: var(--cs-ink);
}
.wac-campo input[aria-invalid="true"] { border-color: var(--error-border); }

.wac-avatares { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

.wac-avatar-op {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid transparent;
  color: var(--wlb-ink);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wac-avatar-op[aria-pressed="true"] { border-color: var(--accent-text); box-shadow: 0 0 0 3px rgba(168, 71, 46, 0.18); }

/* ===================== AVISOS E ESTADO VAZIO ===================== */

.wac-aviso {
  padding: 12px var(--space-md);
  border: 1px solid var(--cs-line-forte);
  border-radius: var(--r-inner);
  background: var(--cs-surface);
  font-size: 14px;
  color: var(--cs-ink-2);
}
.wac-aviso[hidden] { display: none; }

/* Erro nunca usa vermelho (DI-003-wlb secao 8.2) */
.wac-aviso--erro { background: var(--error-bg); border-color: var(--error-border); color: var(--error-fg); font-weight: 500; }
.wac-aviso--ok { background: var(--wlb-lilac-soft); border-color: var(--wlb-lilac-mid); color: var(--wlb-lilac-deep); }

.wac-vazio {
  padding: var(--space-2xl) var(--space-lg);
  border: 1px dashed var(--cs-line-forte);
  border-radius: var(--r-card);
  background: var(--cs-surface);
  text-align: center;
  color: var(--cs-ink-2);
}
.wac-vazio strong { display: block; margin: var(--space-sm) 0 var(--space-xs); font-size: 16px; color: var(--cs-ink); }

.wac-vazio__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cs-surface-2);
  color: var(--accent-text);
}

/* ===================== CABECA DE SECAO ===================== */

.wac-secao__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.wac-secao__titulo { font-size: 18px; font-weight: 900; color: var(--cs-ink); }
.wac-secao__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent-text);
}
.wac-secao__link:hover { text-decoration: underline; }

/* ===================== ONBOARDING (pagina bem-vindo) ===================== */

.wac-conector {
  width: 2px;
  height: var(--space-2xl);
  margin: var(--space-lg) auto;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--wlb-orange), var(--wlb-lilac-mid));
}

/* ===================== RODAPE ===================== */

.wac-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-lg) var(--page-pad);
  border-top: 1px solid var(--cs-line);
}
.wac-rodape__frase { font-size: 13px; color: var(--cs-ink-2); }
.wac-rodape__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.wac-rodape__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12.5px;
  color: var(--cs-ink-2);
}
.wac-rodape__links a:hover { color: var(--accent-text); }

/* =============================================================================
   RESPONSIVO
   REGRA DA CASA (pedido da Laise, 2026-08-05): a SIDEBAR LATERAL fica VISIVEL
   ate 760px de largura. O painel onde ela revisa tem cerca de 800px e ela
   precisa ver a sidebar la. Por isso a coluna direita empilha antes (980px) e
   a sidebar so vira barra horizontal rolavel abaixo de 760px, no TOPO, nunca
   virando barra inferior.
   ========================================================================== */

@media (max-width: 1180px) {
  .wac-layout { grid-template-columns: 190px minmax(0, 1fr) 264px; }
  .wac-layout--duas { grid-template-columns: 190px minmax(0, 1fr); }
}

/* 761px a 980px: sidebar CONTINUA lateral e visivel; a coluna direita desce
   para o fim do conteudo, em largura cheia. E o caso do painel de 800px. */
@media (max-width: 980px) {
  .wac-layout { grid-template-columns: 190px minmax(0, 1fr); }
  .wac-lateral {
    grid-column: 2;
    padding-top: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  .wac-hero { border-radius: 0 0 40px 40px; }
}

/* Abaixo de 760px: uma coluna so. */
@media (max-width: 760px) {
  .wac-layout,
  .wac-layout--duas { grid-template-columns: 1fr; gap: var(--space-md); }

  .wac-sidebar {
    position: static;
    order: -1;
    width: 100%;
    padding-top: var(--space-md);
    gap: var(--space-sm);
  }

  .wac-nav-eyebrow { padding: 0 var(--space-xs) 6px; }

  .wac-nav {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 6px;
  }

  .wac-nav__item {
    flex-shrink: 0;
    white-space: nowrap;
    background: var(--cs-surface);
    font-size: 13px;
    padding: var(--space-sm) var(--space-md);
  }
  .wac-nav__item.is-ativo { background: var(--cta-bg); }

  .wac-sair { width: auto; align-self: flex-start; padding-left: var(--space-md); padding-right: var(--space-md); }

  .wac-lateral { grid-column: auto; }

  .wac-hero { border-radius: 0 0 32px 32px; padding-bottom: var(--space-xl); }
  .wac-hero__topo { gap: var(--space-sm); }
  .wac-busca { display: none; }

  /* Em uma coluna a sidebar fica LOGO ACIMA do feed. Manter a margem negativa
     do composer aqui faria o primeiro card subir por cima dos trilhos de
     navegacao. Nesta faixa o composer nasce abaixo dos trilhos, sem sobrepor. */
  .wac-feed { margin-top: 0; }
}

@media (max-width: 520px) {
  .wac-post, .wac-card { padding: var(--space-md); }
  .wac-post__foto { height: 170px; }
  /* Video nao entra na altura fixa do mobile: a regra acima vem depois de
     .wac-post__foto--video no arquivo e venceria por ordem, cortando o
     player pela metade. */
  .wac-post__foto--video { height: auto; }
  .wac-composer { flex-wrap: wrap; border-radius: var(--r-card); }
  /* MEDIO 2 da Vera: o `order: 3` saiu daqui tambem. Ver a nota na regra de
     max-width 1100px. */
  .wac-composer__input { flex: 1 1 100%; }
  .wac-composer__publicar { margin-left: auto; }
  .wac-composer__dica { margin-left: 0; }
  .wac-metricas { grid-template-columns: 1fr; }
  .wac-marca__nome { font-size: 17px; }
}

/* =============================================================================
   TRILHA WEAGENCY (onda 4, 2026-08-05, Felix)
   SECAO ADITIVA. Nada acima desta linha foi alterado: a pele de comunidade
   acabou de ser aprovada pela Laise e continua intacta. Tudo aqui e classe
   NOVA (ou modificador novo de classe existente), nunca redefinicao.

   Componentes reaproveitados sem tocar: .wac-hero, .wac-layout, .wac-card,
   .wac-widget, .wac-modulo, .wac-chip, .wac-progresso, .wac-btn, .wac-selo.
   O que entra aqui e o que a trilha pediu e nao existia: linha de aula
   clicavel com estado, slot de video 16:9, tipografia de leitura longa,
   indice por ancora e o card de celebracao.

   AA (WCAG 2.2): texto de corpo usa --cs-ink-2 (#4A435E) sobre --cs-surface
   (#FFFCF8), 8.9:1. Acento continua sendo --accent-text (#A8472E), 6.0:1
   sobre branco quente. O laranja puro segue so como fundo grande ou borda.
   Alvo minimo 44px em tudo que clica. Foco visivel herdado do bloco de
   acessibilidade la em cima.
   ========================================================================== */

/* ---------------- Capa da trilha ---------------- */

.wac-capa__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.wac-capa__titulo {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 900;
  line-height: 1.2;
  color: var(--cs-ink);
}

.wac-capa__promessa {
  margin-top: var(--space-sm);
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cs-ink-2);
}

.wac-capa__numeros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* ---------------- Modulo como secao da trilha ---------------- */

.wac-trilha-secao { margin-top: var(--space-xl); }

.wac-trilha-secao__cabeca {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
  scroll-margin-top: var(--space-lg);
}

.wac-trilha-secao__num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cta-bg);
  color: var(--cta-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 900;
}

.wac-trilha-secao__titulo { font-size: 16px; font-weight: 900; color: var(--cs-ink); }
.wac-trilha-secao__meta { font-size: 12px; color: var(--cs-ink-2); }
.wac-trilha-secao__resumo {
  margin: 0 0 var(--space-sm) 38px;
  max-width: 60ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cs-ink-2);
}

/* Selo de modulo completo */
.wac-selo--completo { background: var(--cs-surface-2); color: var(--accent-text); }

/* ---------------- Linha de aula (modificadores novos de .wac-modulo) ------- */

a.wac-modulo { text-decoration: none; }
a.wac-modulo:hover { border-color: var(--wlb-orange); box-shadow: var(--sombra-card); }

.wac-modulo--feito .wac-modulo__ordem { background: var(--cta-bg); color: var(--cta-fg); }
.wac-modulo--feito .wac-modulo__titulo { color: var(--cs-ink-2); }

.wac-modulo--travada { background: var(--cs-surface-2); border-style: dashed; cursor: default; }
.wac-modulo--travada .wac-modulo__titulo { color: var(--cs-ink-2); }
.wac-modulo--travada .wac-modulo__ordem { background: transparent; color: var(--cs-ink-2); }

.wac-modulo--marco {
  border-color: var(--wlb-lilac-mid);
  box-shadow: 0 0 0 3px rgba(155, 123, 199, 0.14);
}
.wac-modulo--marco .wac-modulo__ordem { background: var(--wlb-lilac-soft); color: var(--wlb-lilac-deep); }
.wac-modulo--marco.wac-modulo--feito .wac-modulo__ordem { background: var(--cta-bg); color: var(--cta-fg); }

.wac-modulo__cauda {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* Check laranja da aula concluida */
.wac-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cta-bg);
  color: var(--cta-fg);
}

/* ---------------- Celebracao de trilha completa ---------------- */

.wac-celebra {
  margin-top: var(--space-lg);
  padding: var(--space-xl) var(--space-lg);
  border-radius: var(--r-card);
  background: var(--wlb-lilac-soft);
  text-align: center;
}

.wac-celebra__selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cs-surface);
  color: var(--accent-text);
  box-shadow: var(--sombra-card);
}

.wac-celebra__titulo {
  margin-top: var(--space-md);
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 900;
  color: var(--wlb-lilac-deep);
}

.wac-celebra__texto {
  margin: var(--space-sm) auto 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--wlb-lilac-deep);
}

.wac-celebra__acoes { margin-top: var(--space-lg); justify-content: center; }

/* ---------------- Migalhas (pagina de aula) ---------------- */

.wac-crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--wlb-ink);
}
.wac-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.wac-crumbs a:hover { text-decoration: underline; }
.wac-crumbs span { opacity: 0.72; }

/* ---------------- Slot de video 16:9 ---------------- */

.wac-video-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  /* 16:9 exato, com teto de altura para o slot vazio nao engolir a primeira
     tela. Quando o player entrar, ele herda a mesma caixa. */
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-lg);
  border: 1px dashed var(--cs-line-forte);
  border-radius: var(--r-inner);
  background: var(--cs-surface-2);
  text-align: center;
}

.wac-video-slot__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cs-surface);
  color: var(--accent-text);
  box-shadow: var(--sombra-card);
}

.wac-video-slot__texto {
  max-width: 44ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cs-ink-2);
}

/* ---------------- Indice por ancora ---------------- */

.wac-indice { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); }

.wac-indice a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-sm) 14px;
  border: 1px solid var(--cs-line);
  border-radius: var(--r-pill);
  background: var(--cs-surface-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--cs-ink-2);
}
.wac-indice a:hover { border-color: var(--wlb-orange); color: var(--cs-ink); }

/* ---------------- Tipografia de leitura longa ---------------- */

.wac-aula__secao + .wac-aula__secao { margin-top: var(--space-xl); }

.wac-aula__h2 {
  max-width: 34ch;
  font-size: clamp(19px, 2.2vw, 22px);
  font-weight: 900;
  line-height: 1.3;
  color: var(--cs-ink);
  scroll-margin-top: var(--space-lg);
}

.wac-aula__corpo {
  margin-top: var(--space-md);
  max-width: 66ch;
  font-size: 17.5px;
  line-height: 1.78;
  color: var(--cs-ink-2);
}

.wac-aula__corpo > * + * { margin-top: var(--space-md); }
.wac-aula__corpo strong { color: var(--cs-ink); font-weight: 700; }

.wac-aula__corpo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--cs-surface-2);
  color: var(--cs-ink);
  word-break: break-word;
}

.wac-aula__corpo ul,
.wac-aula__corpo ol { padding-left: var(--space-lg); }
.wac-aula__corpo ul li { list-style: disc; }
.wac-aula__corpo ol li { list-style: decimal; }
.wac-aula__corpo li + li { margin-top: var(--space-sm); }

.wac-aula__corpo blockquote {
  padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
  border-left: 3px solid var(--wlb-orange);
  color: var(--cs-ink);
  font-weight: 500;
}

/* Wikilink citado dentro do script: continua legivel como wikilink */
.wac-wiki { color: var(--accent-text); font-weight: 600; word-break: break-word; }

/* Conteudo de arquivo mostrado na aula (frontmatter, ficha de CRM) */
.wac-aula__arquivo {
  overflow-x: auto;
  padding: var(--space-md);
  border: 1px solid var(--cs-line);
  border-radius: var(--r-inner);
  background: var(--cs-surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--cs-ink);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Tabela do script: rola dentro do proprio container, a pagina nunca rola de lado */
.wac-aula__rolo { overflow-x: auto; }

.wac-aula__tabela {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.5;
}
.wac-aula__tabela th,
.wac-aula__tabela td {
  padding: var(--space-sm) 12px;
  border-bottom: 1px solid var(--cs-line);
  text-align: left;
  vertical-align: top;
}
.wac-aula__tabela th { color: var(--cs-ink); font-weight: 700; }

/* ---------------- Fim da aula ---------------- */

.wac-fim { text-align: center; }
.wac-fim__acoes { justify-content: center; margin-top: var(--space-md); }
.wac-fim__nota { margin-top: var(--space-sm); font-size: 12.5px; color: var(--cs-ink-2); }

/* ---------------- Ritmo (coluna direita da trilha) ---------------- */

.wac-ritmo__xp {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.05;
  color: var(--accent-text);
}
.wac-ritmo__rotulo { font-size: 11.5px; color: var(--cs-ink-2); }

.wac-ritmo__proxima {
  display: block;
  margin-top: var(--space-md);
  padding: 12px;
  border: 1px solid var(--cs-line);
  border-radius: var(--r-inner);
  background: var(--cs-surface-2);
}
.wac-ritmo__proxima:hover { border-color: var(--wlb-orange); }
.wac-ritmo__proxima-rotulo {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cs-ink-2);
}
.wac-ritmo__proxima-titulo {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cs-ink);
}

/* Aulas mais estreitas no celular: o texto longo respira melhor */
@media (max-width: 520px) {
  .wac-aula__corpo { font-size: 17px; line-height: 1.72; }
  .wac-video-slot { padding: var(--space-md); }
  .wac-video-slot__play { width: 52px; height: 52px; }
}

/* Coluna de leitura: a pagina de aula nao tem coluna direita, e uma coluna
   central de 1100px deixaria o texto perdido no meio do card. Este modificador
   estreita a coluna inteira (video, indice, script, fim) para largura de
   documento, sem tocar no .wac-feed que o feed usa. */
.wac-feed--leitura {
  width: 100%;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* Titulo de aula no header: o mesmo componente do hero, so que o titulo de uma
   aula e uma frase, nao uma palavra. Cai para tamanho de leitura sem sair da
   faixa "display" autorizada pela secao 2 do DI-003-wlb (branco sobre laranja
   so em tamanho grande). */
.wac-hero__titulo--aula {
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.15;
}

/* ===== EMBED DE VIDEO (Tella), trilhas com video real ===== */
.wac-video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #1E1B2E; }
.wac-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wac-outras-acoes { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-md, 16px); }

/* =============================================================================
   ENTREGAVEIS DA AULA (2026-08-08, Felix)
   O caderno, o PDF de prompts, a skill pronta, o arquivo de apoio, o link.
   Desenhado por assets/js/wac-entregaveis.js.

   NENHUMA COR NOVA. A linha reaproveita a anatomia do .wac-modulo (mesma
   altura minima de alvo, mesmo raio, mesma hairline) porque as duas coisas sao
   a mesma coisa para quem le: uma fila de itens clicaveis dentro de um card.

   OS DOIS ESTADOS
   -----------------------------------------------------------------------------
   DISPONIVEL: superficie clara (--cs-surface), texto em --cs-ink, e um <a> de
   verdade, entao ele recebe foco e abre com Enter.

   EM PREPARO: superficie recuada (--cs-surface-2) com borda tracejada, o mesmo
   vocabulario que a trilha ja usa em .wac-modulo--travada para "isto ainda nao
   abre". O elemento e um <span aria-disabled>, ou seja, ele e lido e nao entra
   na ordem de tabulacao, que e o certo para algo que nao faz nada ao clique.

   POR QUE NAO USAR opacity PARA O CINZA: --done-opacity (0.55) esmaece o card
   inteiro e derruba o contraste do texto junto, o que reprovaria AA. O cinza
   aqui e feito com TOKEN DE COR (--cs-ink-2 #4A435E sobre --cs-surface-2
   #F3ECDF), CALCULADO em 2026-08-08: 7.92:1, passa AA e AAA para texto normal.
   O titulo em preparo usa o mesmo par, pelo mesmo motivo.

   Outras razoes calculadas na mesma passada, todas WCAG 2.2:
     titulo disponivel  #1E1B2E sobre #FFFCF8 = 16.41:1
     meta disponivel    #4A435E sobre #FFFCF8 =  9.10:1
     icone disponivel   #A8472E sobre #F3ECDF =  4.96:1 (grafico, minimo 3:1)
     icone em preparo   #7A7388 sobre #FFFCF8 =  4.43:1 (grafico, minimo 3:1)
   ========================================================================== */

.wac-entregaveis {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.wac-entregavel {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: 12px var(--space-md);
  border: 1px solid var(--cs-line);
  border-radius: var(--r-inner);
  background: var(--cs-surface);
  text-decoration: none;
}

.wac-entregavel__icone {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cs-surface-2);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wac-entregavel__corpo { flex: 1; min-width: 0; }

.wac-entregavel__titulo {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--cs-ink);
}

.wac-entregavel__meta {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cs-ink-2);
}

.wac-entregavel__cauda {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* Disponivel: o gesto de card da marca (DI-003-wlb secao 5). */
.wac-entregavel:hover { border-color: var(--wlb-orange); box-shadow: var(--sombra-card); }

/* Em preparo: cinza, tracejado e sem gesto de clique. */
.wac-entregavel--preparo {
  background: var(--cs-surface-2);
  border-style: dashed;
  cursor: default;
}

.wac-entregavel--preparo:hover { border-color: var(--cs-line); box-shadow: none; }
.wac-entregavel--preparo .wac-entregavel__titulo { color: var(--cs-ink-2); }
.wac-entregavel--preparo .wac-entregavel__icone { background: var(--cs-surface); color: var(--cs-ink-3); }

.wac-entregaveis__nota { margin-top: var(--space-md); }

/* ---------------- Bloco "Outras trilhas do Club" ----------------
   O paragrafo de abertura NAO reaproveita .wac-trilha-secao__resumo porque
   aquele carrega `margin-left: 38px`, um recuo que existe para alinhar o texto
   embaixo do circulo numerado do modulo. Sem circulo, o recuo vira texto
   torto. Medido na revisao visual de 2026-08-08. */
.wac-outras { margin-top: var(--space-xl); }

.wac-outras__intro {
  margin: 0 0 var(--space-md);
  max-width: 60ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cs-ink-2);
}

.wac-outras__trilha { margin-top: var(--space-lg); }

@media (max-width: 640px) {
  /* No celular a cauda desce para baixo do texto em vez de espremer o titulo. */
  .wac-entregavel { flex-wrap: wrap; }
  .wac-entregavel__corpo { flex-basis: calc(100% - 34px - var(--space-sm)); }
  .wac-entregavel__cauda { margin-left: calc(34px + var(--space-sm)); }
}

/* =============================================================================
   LEITOR DE CADERNO (2026-08-08, Felix)
   A tela /app/caderno/. O caderno de uma aula e um site pequeno (HTML mais as
   imagens) guardado em bucket privado, e ele abre AQUI DENTRO, num iframe que
   recebe a URL assinada emitida no clique.

   NENHUMA COR NOVA, NENHUM TOKEN NOVO. Tudo abaixo sai de tokens que ja
   existem no topo deste arquivo (DI-003-wlb secoes 2, 3b, 5, 8 e 9.1 clara).

   CONTRASTE, MEDIDO E NAO ESTIMADO (WCAG 2.2 AA, calculado em 2026-08-08):
     estado da barra   #4A435E sobre #FFFCF8 =  9.10:1  (texto normal, min 4.5)
     titulo do aviso   #1E1B2E sobre #FFFCF8 = 16.41:1
     texto do aviso    #4A435E sobre #FFFCF8 =  9.10:1
     botao primario    #FFFFFF sobre #A8472E =  5.82:1
     botao secundario  #1E1B2E sobre #FFFCF8 = 16.41:1
     chip "Abrir"      #A8472E sobre #F3ECDF =  4.96:1
     icone protegido   #6B3FA0 sobre #E4D4FA =  5.31:1  (grafico, min 3:1)

   A moldura do caderno NAO depende da hairline para ser percebida (a hairline
   dá 1.72:1 e nao passaria como limite de componente): quem desenha a fronteira
   e a sombra de card mais o fundo branco sobre o bege da pagina, exatamente
   como todo card do Club.
   ========================================================================== */

/* O leitor ocupa a tela: cabecalho curto, quadro alto, rodape no fim. */
.wac-corpo-leitor { min-height: 100vh; }

/* Heroi compacto: aqui a pessoa veio LER, nao navegar. Metade do respiro do
   heroi normal, sem barra de busca e sem sidebar. */
.wac-hero--leitor { border-radius: 0 0 32px 32px; padding-bottom: var(--space-lg); }
.wac-hero--leitor .wac-hero__cabeca { padding-top: var(--space-md); }
.wac-hero--leitor .wac-hero__titulo { font-size: clamp(24px, 3.2vw, 34px); }

.wac-leitor {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-lg) var(--page-pad) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Barra de comando. Fica GRUDADA no topo porque o caminho de volta para a aula
   precisa continuar alcancavel depois de 20 telas de rolagem do caderno. */
.wac-leitor__barra {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: 12px var(--space-md);
  border: 1px solid var(--cs-line);
  border-radius: var(--r-inner);
  background: var(--cs-surface);
  box-shadow: var(--sombra-card);
}

.wac-leitor__estado {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cs-ink-2);
}

/* A frase de estado NÃO some quando está vazia, e isso é de propósito em dois
   sentidos. Acessibilidade: ela é uma região `aria-live`, e região que entra e
   sai do DOM visível às vezes não é anunciada, porque o leitor de tela precisa
   dela já presente na hora em que o texto muda. Layout: um `<p>` vazio com
   `flex: 1` continua segurando o espaço, então os botões não pulam de lugar
   quando uma mensagem aparece. */

.wac-leitor__acoes { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.wac-leitor__acoes-bloco { justify-content: center; margin-top: var(--space-md); }

/* A moldura do caderno. `overflow: hidden` mais o raio de card fazem o caderno
   parecer parte do Club sem precisar de borda pesada. */
.wac-leitor__moldura {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--cs-surface);
  box-shadow: var(--sombra-card);
  border: 1px solid var(--cs-line);
}

.wac-leitor__moldura[hidden] { display: none; }

.wac-leitor__moldura iframe {
  display: block;
  width: 100%;
  border: 0;
  /* Altura de leitura: o que sobra da tela depois da barra e do heroi curto.
     `dvh` primeiro porque no celular a barra do navegador entra e sai e `vh`
     congela no maior valor, deixando um pedaco do caderno atras dela. */
  height: calc(100vh - 260px);
  height: calc(100dvh - 260px);
  min-height: 420px;
  background: var(--cs-surface);
}

@media (max-width: 760px) {
  .wac-leitor { padding-top: var(--space-md); }
  .wac-leitor__barra { gap: var(--space-sm); }
  .wac-leitor__estado { flex-basis: 100%; order: 3; }
  .wac-leitor__moldura iframe {
    height: calc(100vh - 200px);
    height: calc(100dvh - 200px);
    min-height: 360px;
  }
}

/* Linha de entregavel PROTEGIDO, na aula.
   Ela e um link normal (mesma anatomia, mesmo alvo de toque, mesmo gesto de
   hover); o que muda e o disco do icone, que vai para o par lilas do sistema.
   Lilas e a secundaria da marca e ja diz "outra natureza" em toda a interface,
   sem inventar um cadeado que sugeriria bloqueio para quem TEM acesso. */
.wac-entregavel--protegido .wac-entregavel__icone {
  background: var(--wlb-lilac-soft);
  color: var(--wlb-lilac-deep);
}

/* =============================================================================
   DOCUMENTOS PUBLICOS (2026-08-08, Felix)
   /, /regras/, /termos/ e /privacidade/.

   POR QUE ESTA SECAO EXISTE. Ate hoje essas quatro paginas carregavam so o
   base.css, que era um dark neutro PROVISORIO ("isto NAO e o design do
   produto", dizia o proprio comentario dele). Resultado auditado pela Vera em
   2026-08-08: paginas quase pretas, com pilha de fonte terminando em Roboto e
   Arial, os dois proibidos por nome no DI-003-wlb secao 3. E /regras/ e
   linkada de dentro do app pelo post fixado, entao o membro saia do creme e
   caia no preto no meio da sessao.

   Agora as quatro carregam este arquivo e ficam no tema Alabaster, o mesmo do
   interior. base.css deixou de ser referenciado por qualquer pagina publicada.

   AA (WCAG 2.2), medido, nao estimado:
     corpo   #4A435E sobre #F5EFE8 = 8.15:1
     titulo  #1E1B2E sobre #F5EFE8 = 14.70:1
     link    #A8472E sobre #F5EFE8 = 5.10:1
     cartao  #4A435E sobre #FFFCF8 = 9.10:1
   Nenhum texto usa --cs-ink-3 aqui: ele mede 3.97:1 sobre bege e reprova AA
   para texto normal. O token e decisao da Iris e continua intocado; o que muda
   e onde ele NAO pode ser usado.
   ========================================================================== */

/* Envelope de leitura longa */
.wac-envelope {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--page-pad) calc(var(--space-2xl) * 1.5);
}

.wac-doc {
  color: var(--cs-ink-2);
  font-size: 16px;
  line-height: 1.7;
}

.wac-doc h1 {
  font-size: clamp(28px, 4.6vw, 40px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--cs-ink);
}

.wac-doc h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  font-size: 20px;
  font-weight: 800;
  color: var(--cs-ink);
}

.wac-doc h3 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--cs-ink);
}

.wac-doc p { margin-bottom: var(--space-md); }
.wac-doc li { margin-bottom: var(--space-sm); }
.wac-doc ul { list-style: disc; padding-left: var(--space-lg); margin-bottom: var(--space-md); }
.wac-doc ol { list-style: decimal; padding-left: var(--space-lg); margin-bottom: var(--space-md); }
.wac-doc strong, .wac-doc b { color: var(--cs-ink); font-weight: 700; }

/* Link de documento: sublinhado de proposito. Em texto corrido, cor sozinha
   nao pode ser o unico sinal de que algo e link (WCAG 1.4.1). */
.wac-doc a {
  color: var(--accent-text);
  /* 700 e nao 600: peso 600 e um arquivo de fonte a mais (28 KB) e o unico
     motivo dele nestas paginas seria este link. Nesta faixa a diferenca visual
     entre 600 e 700 e minima; a diferenca de peso no fio nao e. */
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wac-doc a:hover { color: var(--cta-hover); }

/* Assinatura da marca no topo do documento.
   Classe propria de proposito: .wac-marca ja existe neste arquivo e e o lockup
   do header do app, com display flex e altura de alvo de toque. Reaproveitar o
   nome faria um <p> herdar regra de componente de navegacao. */
.wac-doc__marca {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-sm);
}

.wac-doc__data {
  margin-bottom: var(--space-lg);
  font-size: 14px;
  color: var(--cs-ink-2);
}

/* Aviso de rascunho (so os termos usam hoje).
   Sem vermelho e sem amarelo: a familia laranja da marca ja carrega "atencao",
   e a secao 2 do DI-003-wlb nao autoriza cor de alerta fora da paleta. */
.wac-doc__rascunho {
  background: var(--cs-surface);
  border: 1px solid var(--wlb-orange);
  border-left-width: 4px;
  border-radius: var(--r-inner);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  font-size: 14.5px;
  color: var(--cs-ink-2);
}

/* Rodape de navegacao entre os documentos */
.wac-doc__pe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--cs-line);
  font-size: 14.5px;
}
.wac-doc__pe a {
  color: var(--accent-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ---- Cartao centrado (a home provisoria) ---- */

.wac-centro {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.wac-cartao {
  width: 100%;
  max-width: 460px;
  background: var(--cs-surface);
  border-radius: var(--r-card);
  box-shadow: var(--sombra-card);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}

.wac-cartao h1 {
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--cs-ink);
}

.wac-cartao__apoio {
  margin-top: var(--space-sm);
  color: var(--cs-ink-2);
  font-size: 15.5px;
}

.wac-cartao__acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--r-pill);
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: 15px;
  font-weight: 700;
}
.wac-cartao__acao:hover { background: var(--cta-hover); }

/* =============================================================================
   TOPO DO FEED: BRIEFING SOBRE FOTO (2026-08-08, Felix)
   Direcao 8 do relatorio de direcoes, escolhida pela Laise, com a alteracao
   dela: no lugar da faixa laranja, a foto real do escritorio WeAgency.

   SECAO ADITIVA. Nada acima foi redefinido. `.wac-hero` continua exatamente
   como estava e continua laranja em /app/trilha/, /app/biblioteca/,
   /app/conta/, /app/bem-vindo/ e nas 15 paginas de aula. O que existe aqui e
   o MODIFICADOR `.wac-hero--foto`, usado so pelo feed, mais o componente novo
   `.wac-brief`, que substitui o `.wac-composer` NAQUELA pagina. O
   `.wac-composer` tambem fica de pe, intocado, porque o painel de gravacao de
   tela e o bloco de midia continuam pendurados nele.

   -----------------------------------------------------------------------------
   ONDE O TEXTO FICA, E POR QUE ELE NAO FICA SOBRE A FOTO
   -----------------------------------------------------------------------------
   A maquete punha o titulo em branco sobre a faixa. Sobre FOTO isso muda de
   figura, e a mudanca foi medida, nao estimada. A foto tem janelas acesas com
   luminancia relativa de 0,99 (branco puro). Para texto branco passar AA sobre
   o pior pixel dela, o scrim precisa de alpha por volta de 0,65 na regiao
   inteira do texto. Num hero de 260px no celular, a faixa do titulo mais a
   faixa da topbar cobrem 226 dos 260px: sobra quase nada de foto, e o scrim
   necessario apagava justamente o que a Laise escolheu mostrar (medido: a
   janela de foto quase limpa caia para 47px, com alpha 0,95 no meio).

   Entao o titulo desceu para DENTRO do cartao de briefing, que e cor solida.
   As mesmas duas linhas da maquete ("Club > Feed" e "Passa o brief."), na
   mesma ordem de leitura, so que sobre creme em vez de sobre foto. Resultado
   medido: titulo 16,41:1 e apoio 9,10:1, contra 5,2:1 que o melhor scrim
   entregava, e a foto passa a aparecer inteira.

   Sobre a foto sobra so a topbar, que precisa de 76px de scrim e nada mais.

   SCRIM, medido com a foto real composta em Python (nao no olho), pior pixel
   de cada faixa, em 360, 390, 768, 1024 e 1440:
     texto branco da marca e do avatar: 6,98:1 no pior caso (1440)
     texto dentro do pill de busca:     10,37:1 no pior caso
   As duas rampas sao declaradas em PIXEL, nunca em porcentagem: em
   porcentagem elas encolhem junto com o hero e a topbar sai da cobertura
   exatamente nos telefones, que e onde o hero e mais baixo.
   ========================================================================== */

.wac-hero--foto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: clamp(260px, 26vw, 360px);
  /* Fundo enquanto a foto nao chegou: ink da marca, nunca branco. Assim a
     topbar branca nasce legivel em vez de piscar invisivel. */
  background: var(--wlb-ink);
  padding-bottom: var(--space-2xl);
}

.wac-hero__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 46% e nao 50%: puxa o enquadramento para a faixa onde os WeAgents estao,
     que e o assunto, em vez de dividir espaco com o teto.

     A FOTO MUDOU EM 2026-08-08 e a proporcao junto: era 1,5:1 (o escritorio
     visto de fora, a noite) e passou a ser 2,36:1 (a sala de criacao com oito
     WeAgents trabalhando). A anterior perdia mais da metade da altura no corte
     do desktop, que pede quase 4:1. Esta foi enquadrada para o lugar: ninguem
     nos 15% das bordas, teto calmo em cima para a topbar branca se apoiar, e
     mesa limpa embaixo para o cartao de briefing flutuar. Conferido nos dois
     extremos, 4:1 e 1,5:1, com este mesmo 46%. */
  object-position: 50% 46%;
}

/* Duas rampas empilhadas, ambas em pixel. A de cima cobre a topbar; a de
   baixo escurece a beirada onde o cartao de briefing flutua, para a sombra
   dele ter em que se apoiar. No meio as duas chegam a zero e a foto aparece
   como foto. */
.wac-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(30, 27, 46, 0.82) 0,
      rgba(30, 27, 46, 0.76) 70px,
      rgba(30, 27, 46, 0) 150px),
    linear-gradient(to top,
      rgba(30, 27, 46, 0.55) 0,
      rgba(30, 27, 46, 0.30) 60px,
      rgba(30, 27, 46, 0) 160px);
}

/* ---------------- Cartao de briefing ---------------- */

/* position mais z-index NAO sao enfeite aqui, sao o conserto de um defeito
   real de pintura. O `.wac-feed` sobe 32px por margem negativa e o cartao
   invade o hero. Como `.wac-hero--foto` e `position: relative`, ele entra na
   camada dos elementos posicionados e passa a pintar POR CIMA de qualquer
   irmao nao posicionado, por mais tarde que ele venha no documento. Sem estas
   duas linhas, a primeira linha do cartao ("Club > Feed") sai cortada pela
   beirada da foto no desktop. */
.wac-brief {
  position: relative;
  z-index: 1;
  background: var(--cs-surface);
  border-radius: var(--r-card);
  box-shadow: var(--sombra-flutuante);
  padding: var(--space-lg);
}

.wac-brief__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);   /* 5,69:1 sobre --cs-surface */
}

.wac-brief__titulo {
  margin-top: var(--space-xs);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--cs-ink);        /* 16,41:1 */
}

.wac-brief__lead {
  margin-top: var(--space-sm);
  max-width: 54ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--cs-ink-2);      /* 9,10:1 */
}

/* ---- Linha de marcadores ---- */

.wac-brief__marcadores {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--cs-line);
}

.wac-brief__rotulo {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cs-ink-2);
}

.wac-brief__chips { display: flex; gap: 6px; flex-wrap: wrap; }

.wac-brief__chip {
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--wlb-lilac-soft);
  color: var(--wlb-lilac-deep);   /* 5,31:1 sobre lilas soft */
  font-size: 12.5px;
  font-weight: 700;
}
.wac-brief__chip:hover { border-color: var(--wlb-lilac-mid); }
/* aria-checked desde 2026-08-08, e nao mais aria-pressed: os chips deixaram de
   ser quatro botoes de alternancia independentes e viraram um radiogroup de
   escolha unica (a categoria do post, coluna posts.categoria da 0016).
   aria-pressed num radio diria a coisa errada para quem ouve a tela. */
.wac-brief__chip[aria-checked="true"] {
  background: var(--cta-bg);
  color: var(--cta-fg);           /* 5,82:1 */
}

.wac-brief__dica-chip {
  flex-basis: 100%;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--cs-ink-2);
}

/* =============================================================================
   FILTRO DO FEED POR CATEGORIA (2026-08-08, migracao 0016)
   =============================================================================
   Trilho de chips acima da lista de posts. Anatomia igual a dos chips do
   composer de proposito: e a MESMA lista de categorias, e duas aparencias
   diferentes para a mesma coisa fariam a pessoa achar que sao dois assuntos.

   ROLA NA HORIZONTAL, e isso e o ponto do componente. Sao dez chips ("Tudo"
   mais as nove categorias), e em 360px eles ocupariam quatro linhas empilhadas,
   empurrando o primeiro post para fora da primeira tela. O trilho mantem tudo
   em uma linha e diz, pelo corte do ultimo chip, que ha mais para o lado.

   `scrollbar-width: none` esconde a barra no desktop, e por isso o corte
   visual do ultimo chip e obrigatorio, nao decorativo: sem barra e sem corte,
   nada avisaria que o trilho continua. O padding-right do trilho garante que o
   ultimo chip nunca encoste na borda de forma a parecer completo.

   `scroll-snap` fica de FORA: com chips de larguras diferentes, o snap prende
   o dedo em posicoes arbitrarias e piora justamente o gesto que ele deveria
   ajudar.
   ========================================================================== */
.wac-filtro {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0 var(--space-lg) var(--space-sm) 0;
  margin-bottom: calc(var(--space-md) * -1);
  scrollbar-width: none;
}
.wac-filtro::-webkit-scrollbar { display: none; }

.wac-filtro__chip {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--cs-line-forte);
  border-radius: var(--r-pill);
  background: var(--cs-surface);
  color: var(--cs-ink-2);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.wac-filtro__chip:hover { border-color: var(--wlb-orange); color: var(--accent-text); }
.wac-filtro__chip[aria-checked="true"] {
  background: var(--cta-bg);
  border-color: var(--cta-bg);
  color: var(--cta-fg);           /* 5,82:1, o mesmo par do botao primario */
}

/* ---- Pill de categoria no card do post ----
   Contorno laranja e o padrao (regra ja existente em .wac-post__tag). As duas
   variacoes abaixo existem por FUNCAO, nao por enfeite:

   - aviso e aula-nova sao PREENCHIDAS porque sao a voz da casa, e a policy do
     banco reserva as duas a equipe (wac_categorias_post_equipe). Preenchido
     contra contornado e a diferenca visivel entre "a WeAgency esta falando" e
     "um membro esta falando";
   - conquista vai para a familia lilas porque e a categoria que tambem alimenta
     a Galeria, e o lilas e o que amarra as duas telas.

   Sem verde, sem vermelho e sem rosa em nenhuma delas (DI-003-wlb secao 2). */
.wac-post__tag--aviso,
.wac-post__tag--aula-nova {
  background: var(--cta-bg);
  border-color: var(--cta-bg);
  color: var(--cta-fg);
}
.wac-post__tag--conquista {
  border-color: var(--wlb-lilac-mid);
  color: var(--wlb-lilac-deep);   /* 6,29:1 sobre o branco quente do card */
}

/* ---- Campos ---- */

.wac-brief__assunto,
.wac-brief__corpo {
  display: block;
  width: 100%;
  margin-top: var(--space-md);
  border: 1px solid var(--cs-line-forte);
  border-radius: var(--r-inner);
  color: var(--cs-ink);
  font-size: 15px;
}

.wac-brief__assunto {
  min-height: 44px;
  padding: var(--space-sm) 14px;
  background: #FFFFFF;
  font-weight: 700;
}
.wac-brief__assunto::placeholder { color: var(--cs-ink-2); font-weight: 500; }  /* 9,31:1 */

.wac-brief__corpo {
  min-height: 84px;
  max-height: 220px;
  padding: 12px 14px;
  background: var(--cs-surface-2);
  line-height: 1.5;
  resize: none;
  overflow-y: hidden;
}
.wac-brief__corpo::placeholder { color: var(--cs-ink-2); }   /* 7,92:1 */

/* ---- Rodape de acoes ---- */

.wac-brief__pe {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

.wac-brief__secundarias { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

.wac-brief__publicar {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: 14px;
  font-weight: 700;
}
.wac-brief__publicar:hover:not(:disabled) { background: var(--cta-hover); }
.wac-brief__publicar:disabled {
  background: var(--cs-surface-2);
  color: var(--cs-ink-2);
  border: 1px solid var(--cs-line);
  cursor: not-allowed;
}

/* Abaixo de 400px o Publicar sozinho na linha, alinhado a direita, em vez de
   espremer os tres botoes e estourar a largura. */
@media (max-width: 400px) {
  .wac-brief { padding: var(--space-md); }
  .wac-brief__publicar { flex-basis: 100%; margin-left: 0; }
}

/* =============================================================================
   MENU DA CONTA NO AVATAR DO HEADER (2026-08-08, Felix)
   MEDIO 1 da auditoria da Vera.

   O PROBLEMA MEDIDO: abaixo de 760px a sidebar vira trilho horizontal e, em
   360px, so Feed e Trilha aparecem. Biblioteca, Turma, Conta e o botao Sair
   ficam fora da tela, sem nenhuma pista de que existem. Conta e onde se
   gerencia a assinatura. Assinatura de R$349 cujo cancelamento o membro nao
   acha no celular nao e problema de layout, e problema de confianca.

   O CONSERTO: o avatar do header, que ate hoje era decoracao pura
   (aria-hidden, sem foco, sem clique), vira o caminho garantido para Conta e
   Sair. Ele fica visivel em TODA largura e em TODA pagina do interior, e nunca
   entra em trilho rolavel.

   O trilho continua com overflow-x: auto de proposito, e nada nele foi tocado.

   A promocao de decoracao para controle e feita em tempo de execucao pelo
   wac-shell.js, uma vez so, e nao pelas 21 paginas: o avatar tem a mesma
   marcacao em todas elas, e 21 copias da mesma mudanca sao 21 chances de
   divergir. Ver montarMenuDaConta() la.

   AA: fundo --cs-surface, texto --cs-ink (16,41:1) e --cs-ink-2 (9,10:1).
   ========================================================================== */

.wac-conta { position: relative; margin-left: auto; flex-shrink: 0; }

/* Herda o disco do .wac-hero__avatar; o que entra aqui e o que so um BOTAO
   precisa. */
/* 44x44, e nao os 40 do avatar decorativo: no celular este botao virou o UNICO
   caminho ate Conta e ate Sair, e caminho unico nao anda no limite do alvo. */
.wac-hero__avatar--acao {
  margin-left: 0;
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.wac-hero__avatar--acao:hover { background: var(--wlb-lilac); }
.wac-hero__avatar--acao[aria-expanded="true"] {
  background: var(--wlb-white);
  color: var(--accent-text);
}

.wac-conta-menu {
  position: absolute;
  top: calc(100% + var(--space-sm));
  right: 0;
  z-index: 30;
  min-width: 224px;
  padding: var(--space-sm);
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: var(--r-inner);
  box-shadow: var(--sombra-flutuante);
}
.wac-conta-menu[hidden] { display: none; }

.wac-conta-menu__quem {
  padding: 6px var(--space-sm) var(--space-sm);
  border-bottom: 1px solid var(--cs-line);
  margin-bottom: 6px;
}
.wac-conta-menu__nome { font-size: 14px; font-weight: 700; color: var(--cs-ink); }
.wac-conta-menu__papel { font-size: 12px; color: var(--cs-ink-2); }

.wac-conta-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 44px;
  padding: var(--space-sm) var(--space-sm);
  border: 0;
  border-radius: var(--space-sm);
  background: transparent;
  color: var(--cs-ink);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}
.wac-conta-menu__item:hover { background: var(--cs-surface-2); }
.wac-conta-menu__item svg { flex-shrink: 0; color: var(--cs-ink-2); }

/* =============================================================================
   BLOCO CURSOS NA SIDEBAR: SO AS CAPAS (2026-08-08)
   =============================================================================
   Primeira versao (manha de 2026-08-08): linha com miniatura de 56px a esquerda
   e o nome do curso escrito a direita.

   Versao atual, pedido literal dela: "aqui quero so as miniaturas dos cursos".
   O nome sumiu do HTML porque ELE JA ESTA DESENHADO DENTRO DA CAPA. Repetir o
   nome ao lado da arte que ja o traz era dizer a mesma coisa duas vezes e, pior,
   custava metade da largura da sidebar para isso.

   DUAS COLUNAS, e essa e a razao de o corte funcionar: sem a coluna de texto,
   cada capa passa de 56px para cerca de 92px de largura, e o nome impresso na
   arte volta a ser legivel. Numa coluna so, cinco capas de 190px de largura
   empilhadas ocupariam quase 500px de altura na sidebar.

   PESO: as capas originais tem 1460x752 e pesam de 216 KB a 462 KB. Menu nao
   carrega isso. O que e servido sao as reducoes em assets/img/cursos/thumb/,
   112px e 224px de largura em webp, de 1,8 KB a 6,9 KB. Como a exibicao agora e
   de 92px, o `src` padrao passou a ser a de 224px (a de 112 ficaria borrada em
   tela de retina) e a de 112 sobra no srcset para tela comum.

   width e height ficam no atributo do <img>, e nao so aqui, para o navegador
   reservar a caixa antes de a imagem chegar e a sidebar nao pular.
   ========================================================================== */

.wac-cursos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0 var(--space-sm);
}

.wac-curso__caixa {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cs-surface-2);
  line-height: 0;   /* sem isto sobra a linha de base do <img> embaixo da capa */
}
.wac-curso__caixa:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.wac-curso__thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1460 / 752;   /* a proporcao real das capas */
  object-fit: cover;
}

/* Passar o mouse levanta a capa de leve. E o unico sinal de "isto e clicavel"
   que sobrou depois de o texto sair, entao ele nao e enfeite. */
.wac-curso__caixa:not(.is-desativado):hover .wac-curso__thumb { transform: scale(1.04); }
.wac-curso__thumb { transition: transform 200ms ease; }
@media (prefers-reduced-motion: reduce) {
  .wac-curso__thumb { transition: none; }
  .wac-curso__caixa:not(.is-desativado):hover .wac-curso__thumb { transform: none; }
}

/* Curso que ainda nao existe: capa dessaturada, o mesmo vocabulario visual que
   a trilha ja usa para "isto ainda nao abre". Cor nao e o unico sinal: a faixa
   diz por escrito, e o elemento e um <span aria-disabled> com aria-label
   completo, entao leitor de tela tambem sabe. */
.wac-curso__caixa.is-desativado .wac-curso__thumb {
  filter: grayscale(0.7);
  opacity: 0.55;
}

/* A faixa entra POR CIMA da capa. Sem a linha de texto ao lado, nao existe mais
   um "embaixo" onde pendurar o chip. */
.wac-curso__faixa {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3px 6px;
  background: rgba(30, 27, 46, 0.78);
  color: var(--wlb-white);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-align: center;
}

/* No trilho horizontal do celular a grade vira uma fileira que rola junto com o
   resto da navegacao, com capa um pouco maior porque ali sobra largura. */
@media (max-width: 760px) {
  .wac-cursos {
    display: flex;
    gap: var(--space-sm);
    padding: 0;
    /* OBRIGATORIO, e nao um refinamento. Abaixo de 760px a sidebar vira trilho
       horizontal, e uma fileira de cinco capas mede cerca de 610px numa faixa
       de 328px. Sem o overflow proprio, esses 280px de sobra empurram o
       DOCUMENTO inteiro e a pagina passa a rolar de lado no celular.
       Foi exatamente o que aconteceu ao trocar este bloco de .wac-nav (que ja
       tinha overflow-x: auto) para .wac-cursos: a regra nova nasceu sem ele. */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .wac-cursos::-webkit-scrollbar { display: none; }
  .wac-curso { flex: 0 0 auto; width: 116px; }
}


/* =============================================================================
   GALERIA DE CONQUISTAS (2026-08-08)
   =============================================================================
   Pedido da Laise: "uma aba de galeria pras pessoas colocarem la as conquistas
   (tipo um feed de instagram que todo mundo consegue postar)".

   TRES COLUNAS NO DESKTOP, DUAS NO CELULAR. A referencia dela e o Instagram,
   que usa tres em qualquer largura; aqui a coluna do feed e estreita (o layout
   e de duas colunas, com a sidebar comendo 210px), e tres ladrilhos em 360px
   dariam cerca de 100px cada, pequeno demais para reconhecer um print de tela,
   que e justamente o conteudo mais comum de uma conquista.

   LADRILHO QUADRADO por aspect-ratio, nunca por padding-top. A imagem por
   dentro usa object-fit: cover, entao print vertical e print horizontal
   convivem na mesma grade sem esticar ninguem.

   O PE DO LADRILHO (nome e curtidas) vive sobre um degrade escuro que so
   escurece o quarto de baixo. Nao e enfeite: sem ele, texto branco sobre um
   print de tela claro fica ilegivel, e print de tela claro e a maioria.
   ========================================================================== */

.wac-galeria__acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--r-card);
  background: var(--cs-surface);
  box-shadow: var(--sombra-flutuante);
}
.wac-galeria__acoes-titulo { font-size: 16px; font-weight: 700; }
.wac-galeria__acoes-texto {
  margin-top: 2px;
  font-size: 13px;
  color: var(--cs-ink-2);
}
/* O botao nunca encolhe abaixo do texto dele: em 360px o cartao quebra em duas
   linhas e o botao vai para a segunda, inteiro, em vez de virar duas palavras
   empilhadas dentro de uma pill estreita. */
.wac-galeria__acoes .wac-btn { flex: 0 0 auto; }

.wac-galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wac-ladrilho { position: relative; }

.wac-ladrilho__botao {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--wlb-orange-soft), var(--wlb-lilac-soft));
  cursor: pointer;
}
.wac-ladrilho__botao:hover .wac-ladrilho__midia { transform: scale(1.04); }
.wac-ladrilho__botao:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

.wac-ladrilho__midia {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 240ms ease;
}
.wac-ladrilho__midia img,
.wac-ladrilho__midia video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Selo de video no canto, para o ladrilho parado nao ser confundido com foto.
   Ele fica no canto SUPERIOR direito porque o pe de baixo ja carrega o nome e
   as curtidas. */
.wac-ladrilho__selo {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  padding: 4px;
  border-radius: 8px;
  background: rgba(30, 27, 46, 0.62);
  color: var(--wlb-white);
}

.wac-ladrilho__pe {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 18px 10px 8px;
  background: linear-gradient(to top, rgba(30, 27, 46, 0.78), rgba(30, 27, 46, 0));
  color: var(--wlb-white);
  font-size: 11.5px;
  font-weight: 700;
  text-align: left;
}
.wac-ladrilho__autor {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wac-ladrilho__curtidas {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .wac-galeria { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Lightbox ----
   <dialog> nativo: foco preso, Escape e inerte por baixo vem de graca.
   `max-height: 88dvh` e nao 88vh: no Safari do iPhone a barra de endereco
   entra e sai da conta do vh, e a caixa dimensionada em vh salta de altura
   enquanto a pessoa rola. */
.wac-lightbox {
  width: min(720px, 94vw);
  max-height: 88dvh;
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  background: var(--cs-surface);
  color: var(--cs-ink);
  overflow: hidden;
}
.wac-lightbox::backdrop { background: rgba(30, 27, 46, 0.72); }

.wac-lightbox__caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 88dvh;
  overflow-y: auto;
}

.wac-lightbox__fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(30, 27, 46, 0.62);
  color: var(--wlb-white);
  cursor: pointer;
}
.wac-lightbox__fechar:hover { background: var(--wlb-ink); }

.wac-lightbox__midia {
  background: var(--wlb-ink);
  /* Teto de altura para foto vertical nao empurrar o texto inteiro para fora
     da primeira dobra da caixa. */
  max-height: 56dvh;
}
.wac-lightbox__midia img,
.wac-lightbox__midia video {
  display: block;
  width: 100%;
  max-height: 56dvh;
  object-fit: contain;
}
.wac-lightbox__semmidia {
  padding: var(--space-xl);
  color: var(--wlb-beige);
  text-align: center;
}

.wac-lightbox__corpo { padding: var(--space-lg); }

.wac-lightbox__quem {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.wac-lightbox__autor { font-weight: 700; }
.wac-lightbox__quando { font-size: 12.5px; color: var(--cs-ink-2); }

.wac-lightbox__assunto {
  margin-top: var(--space-md);
  font-size: 17px;
  font-weight: 700;
}
.wac-lightbox__texto { margin-top: var(--space-sm); }
.wac-lightbox__texto p + p { margin-top: var(--space-sm); }

.wac-lightbox__numeros {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-md);
  color: var(--cs-ink-2);
  font-size: 13px;
  font-weight: 700;
}
.wac-lightbox__numeros span + svg { margin-left: var(--space-sm); }

.wac-lightbox__ir { margin-top: var(--space-md); }


/* =============================================================================
   EVENTOS E REUNIOES (2026-08-08, migracao 0017)
   =============================================================================
   Pedido da Laise: "area de eventos, reunioes online ali mesmo dentro da
   comunidade".

   O CARTAO E DE DUAS COLUNAS, com a data numa coluna propria a esquerda. Isso
   nao e estilo: numa agenda, a pergunta que a pessoa faz primeiro e "quando",
   e nao "o que". Data em linha corrida dentro do texto obriga a ler o titulo
   inteiro antes de descobrir se aquilo e hoje. Abaixo de 620px a coluna vira
   uma faixa horizontal no topo, porque duas colunas em 360px dariam 100px para
   a data e o resto ilegivel.
   ========================================================================== */

.wac-eventos { display: flex; flex-direction: column; gap: var(--space-md); }

.wac-evento {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border: 1px solid var(--cs-line);
  border-radius: var(--r-card);
  background: var(--cs-surface);
  box-shadow: var(--sombra-card);
}

/* Acontecendo agora: contorno laranja em vez de fundo laranja. Fundo colorido
   obrigaria a recalcular o contraste de todo texto de dentro do cartao, e o
   contorno ja resolve a unica pergunta que o destaque precisa responder. */
.wac-evento--agora { border-color: var(--wlb-orange); box-shadow: 0 0 0 2px rgba(217, 117, 89, 0.18); }

/* Passado esmaecido, nunca escondido: quem perdeu quer saber que existiu.
   0.72 e nao 0.5 de proposito: abaixo disso o texto do cartao deixaria de
   passar no contraste minimo, e "passado" nao pode significar "ilegivel". */
.wac-evento--passado { opacity: 0.72; }

.wac-evento__quando {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: var(--space-lg);
  border-right: 1px solid var(--cs-line);
}

.wac-evento__dia {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cs-ink);
  /* A data vem do toLocaleDateString em pt-BR, que devolve "quinta-feira".
     first-letter maiuscula pelo CSS em vez de por manipulacao de string: assim
     nenhuma linha de JS precisa saber sobre acento nem sobre idioma. */
  text-transform: lowercase;
}
.wac-evento__dia::first-letter { text-transform: uppercase; }

.wac-evento__hora { font-size: 13px; color: var(--cs-ink-2); }

.wac-evento__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.wac-evento__agora {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-text);
}

.wac-evento__falta { font-size: 11.5px; font-weight: 700; color: var(--cs-ink-2); }

.wac-evento__rascunho {
  font-size: 11px;
  font-weight: 700;
  padding: 2px var(--space-sm);
  border: 1px dashed var(--cs-line-forte);
  border-radius: var(--r-pill);
  color: var(--cs-ink-2);
}

.wac-evento__titulo { margin-top: var(--space-sm); font-size: 17px; font-weight: 700; }
.wac-evento__texto { margin-top: var(--space-xs); color: var(--cs-ink-2); }
.wac-evento__numeros { margin-top: var(--space-sm); font-size: 12.5px; color: var(--cs-ink-2); }

.wac-evento__acoes {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}
.wac-evento__aviso-sala { font-size: 12.5px; color: var(--cs-ink-2); }

/* "Você vai" fica com o botao aceso: aria-pressed e o estado, e o visual tem
   que concordar com ele, senao quem enxerga e quem ouve recebem respostas
   diferentes sobre a mesma coisa. */
.wac-evento__acoes .wac-btn[aria-pressed="true"] {
  background: var(--wlb-lilac-soft);
  border-color: var(--wlb-lilac-mid);
  color: var(--wlb-lilac-deep);
}

@media (max-width: 620px) {
  .wac-evento { grid-template-columns: 1fr; gap: var(--space-md); }
  .wac-evento__quando {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-sm);
    padding-right: 0;
    padding-bottom: var(--space-sm);
    border-right: 0;
    border-bottom: 1px solid var(--cs-line);
  }
}

/* ---- Bloco de criar evento (so equipe) ---- */

.wac-evento-novo {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding: var(--space-lg);
  border: 1px dashed var(--cs-line-forte);
  border-radius: var(--r-card);
  background: var(--cs-surface);
}
.wac-evento-novo__titulo { font-size: 16px; font-weight: 700; }
.wac-evento-novo__texto { font-size: 12.5px; color: var(--cs-ink-2); }

.wac-evento-novo__linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
@media (max-width: 620px) {
  .wac-evento-novo__linha { grid-template-columns: 1fr; }
}

/* select e textarea nao existiam no design system porque nenhuma tela pedia os
   dois ate agora. Herdam a mesma anatomia do input do .wac-campo, com o raio
   trocado: pill num textarea de tres linhas fica com canto estranho, e num
   select esconde a seta nativa em alguns navegadores. */
.wac-evento-novo select,
.wac-evento-novo textarea {
  width: 100%;
  min-height: 44px;
  padding: 12px var(--space-md);
  border: 1px solid var(--cs-line-forte);
  border-radius: var(--r-inner);
  background: var(--cs-surface);
  color: var(--cs-ink);
  font: inherit;
}
.wac-evento-novo textarea { resize: vertical; }

.wac-evento-novo__acoes {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}


/* =============================================================================
   BIBLIOTECA: PASTAS DE SKILL (2026-08-08, migracao 0018)
   =============================================================================
   Pedido da Laise: "dentro de um design de 'pasta' por cada uma, organizado por
   categoria".

   A LINGUETA E FEITA NO CSS, e nao com um elemento vazio no HTML. O ::before de
   .wac-pasta e um retangulo de 62px encostado no topo esquerdo, com os dois
   cantos de cima arredondados: e ele que transforma um cartao comum em pasta de
   arquivo. Um <span> so para virar lingueta seria ruido para quem le a pagina
   por leitor de tela, e forma pura e trabalho de CSS.

   O padding-top de 14px do cartao existe por causa dela: sem esse respiro, o
   nome da skill encostaria na lingueta e o desenho leria como erro de
   alinhamento em vez de pasta.

   DUAS COLUNAS ate 760px, uma abaixo disso. Nao sao tres: o corpo aberto da
   pasta tem duas frases inteiras, e em coluna de 200px elas viram uma torre de
   palavras soltas.
   ========================================================================== */

.wac-estante + .wac-estante { margin-top: var(--space-xl); }
.wac-estante__cabeca { margin-bottom: var(--space-md); }

/* A coluna do feed sobe 32px por cima da curva do header (margin-top negativa
   em .wac-feed), de proposito: e assim que o composer do Feed e o cartao da
   Galeria flutuam sobre o laranja. Um TITULO de secao nao flutua, ele so fica
   pousado em cima do laranja parecendo desalinhado. Os 48px devolvem os 32 e
   ainda deixam 16 de respiro abaixo do header. */
.wac-estante:first-child { margin-top: var(--space-2xl); }

/* Frase de apoio embaixo de um .wac-secao__titulo. Nasce aqui porque a
   Biblioteca e a primeira tela que tem seis secoes seguidas: com so um titulo
   por tela, o par titulo mais apoio nunca tinha sido preciso. */
.wac-secao__texto {
  margin-top: 2px;
  font-size: 13px;
  color: var(--cs-ink-2);
}

/* O contador ao lado do nome da pasta: quantas skills tem ali dentro. Ele
   responde antes do clique a pergunta "vale abrir esta seção". */
.wac-estante__conta {
  display: inline-block;
  margin-left: var(--space-sm);
  padding: 1px 9px;
  border-radius: var(--r-pill);
  background: var(--cs-surface-2);
  color: var(--cs-ink-2);
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}

.wac-pastas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
@media (max-width: 760px) {
  .wac-pastas { grid-template-columns: 1fr; }
}

.wac-pasta {
  position: relative;
  padding-top: 14px;
  border-radius: 4px 14px 14px 14px;
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  box-shadow: var(--sombra-card);
  /* A pasta aberta cresce; sem align-self a irma da mesma linha esticaria
     junto, com um vao branco embaixo do conteudo dela. */
  align-self: start;
}

/* A lingueta. */
.wac-pasta::before {
  content: '';
  position: absolute;
  top: -9px;
  left: -1px;
  width: 62px;
  height: 10px;
  border: 1px solid var(--cs-line);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: var(--cs-surface);
}

.wac-pasta.is-aberta,
.wac-pasta:hover { border-color: var(--wlb-orange-soft); }
.wac-pasta.is-aberta::before,
.wac-pasta:hover::before { border-color: var(--wlb-orange-soft); }

/* Pasta sem pacote ainda: papel um tom mais recuado, sem opacidade. Opacidade
   derrubaria o contraste do texto junto, e "ainda não tem arquivo" não pode
   significar "não dá para ler". */
.wac-pasta--vazia { background: var(--cs-surface-2); }
.wac-pasta--vazia::before { background: var(--cs-surface-2); }

.wac-pasta__abrir {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.wac-pasta__abrir:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; border-radius: 12px; }

.wac-pasta__icone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--wlb-lilac-soft);
  color: var(--wlb-lilac-deep);
}
.wac-pasta--vazia .wac-pasta__icone { background: var(--cs-surface); color: var(--cs-ink-2); }

.wac-pasta__texto { flex: 1; min-width: 0; }
.wac-pasta__nome { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; }
.wac-pasta__resumo {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--cs-ink-2);
}

.wac-pasta__seta {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 8px;
  color: var(--cs-ink-2);
  transition: transform 180ms ease;
}
.wac-pasta.is-aberta .wac-pasta__seta { transform: rotate(180deg); }

.wac-pasta__corpo {
  padding: 0 var(--space-md) var(--space-md);
  border-top: 1px solid var(--cs-line);
  margin-top: 2px;
  padding-top: var(--space-md);
  font-size: 13.5px;
}
.wac-pasta__corpo p + .wac-pasta__rotulo { margin-top: var(--space-md); }

.wac-pasta__rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-ink-2);
  margin-bottom: 3px;
}

.wac-pasta__breve {
  display: inline-block;
  padding: 5px 12px;
  border: 1px dashed var(--cs-line-forte);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  color: var(--cs-ink-2);
}

/* A seta nao gira para quem pediu menos movimento. A informacao nao se perde:
   quem manda no estado e o aria-expanded, e o corpo aparecendo ja diz tudo. */
@media (prefers-reduced-motion: reduce) {
  .wac-pasta__seta { transition: none; }
}


/* =============================================================================
   CAMERA JUNTO COM A GRAVACAO DE TELA (2026-08-08)
   =============================================================================
   Pedido da Laise: "na opcao de gravar a tela, tenha a opcao tambem de
   habilitar microfone e camera (tipo o app tella)".

   A PREVIA E ESPELHADA, A GRAVACAO NAO. Este `scaleX(-1)` e a unica diferenca
   entre as duas, e ela e deliberada: a pessoa se reconhece espelhada (é o
   espelho do banheiro dela), mas quem assiste veria todo texto atras dela
   invertido. O compositor no JS desenha sem espelho, e o comentario de la
   aponta para este bloco.
   ========================================================================== */

.wac-gravacao__camera {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-md);
  border-radius: var(--r-inner);
  background: var(--cs-surface-2);
}

.wac-gravacao__camera video {
  flex: 0 0 auto;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--wlb-ink);
  /* Anel branco igual ao que o compositor desenha em volta do circulo, para a
     previa mostrar o resultado e nao uma aproximacao dele. */
  box-shadow: 0 0 0 3px var(--wlb-white), 0 0 0 4px var(--cs-line);
  transform: scaleX(-1);
}

.wac-gravacao__camera-lado {
  flex: 1;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* O seletor de canto herda a anatomia do input do .wac-campo. Raio menor que a
   pill porque a seta nativa do select some no canto muito arredondado em
   alguns navegadores. */
.wac-gravacao__camera-lado select {
  width: 100%;
  min-height: 44px;
  padding: 10px var(--space-md);
  border: 1px solid var(--cs-line-forte);
  border-radius: var(--r-inner);
  background: var(--cs-surface);
  color: var(--cs-ink);
  font: inherit;
}

/* Monitor durante a gravacao: o canvas da composicao, pequeno. Ele precisa
   existir no documento de qualquer jeito (é a fonte do video), entao mostrar
   custa zero e responde a unica pergunta que aperta quem esta gravando:
   "esta pegando o meu rosto?". */
.wac-gravacao__monitor {
  border-radius: var(--r-inner);
  overflow: hidden;
  background: var(--wlb-ink);
  /* 380px e a largura em que o circulo do rosto ainda e reconhecivel na
     miniatura. Abaixo disso o monitor deixaria de responder a pergunta que
     justifica ele existir. */
  max-width: 380px;
}
.wac-gravacao__monitor canvas {
  display: block;
  width: 100%;
  height: auto;
}


/* =============================================================================
   AVATAR DE IMAGEM (2026-08-08, migracao 0019)
   =============================================================================
   Pedido da Laise: "troque o avatar da laise pelo da personagem lalas, no
   uniforme da weagency".

   A FOTO SE SOBREPOE AS INICIAIS, NAO AS SUBSTITUI. As iniciais continuam
   escritas dentro do circulo, embaixo; a imagem cobre elas com position
   absolute. Se o arquivo nao carregar (rede ruim, caminho errado depois de uma
   troca de dominio), o que aparece e o circulo colorido com a inicial, do jeito
   que sempre foi, e nao um quadrado cinza com icone de imagem quebrada.

   `position: relative` entra nos dois circulos que existem hoje (o do header e
   o do card do post) so quando ha foto, para nao mexer no que ja estava certo.
   ========================================================================== */

.wac-avatar--com-foto { position: relative; overflow: hidden; }

.wac-avatar__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  /* O recorte da personagem tem a cabeca um pouco acima do centro do quadro.
     47% sobe o enquadramento o suficiente para o queixo nao encostar na borda
     de baixo do circulo. */
  object-position: 50% 47%;
}


/* =============================================================================
   O PERCURSO: os cursos na ordem de fazer (2026-08-08)
   =============================================================================
   Pedido da Laise: "uma trilha horizontal bem dinamica e interativa, com a
   ordem correta de fazer os cursos", com as capas reais.

   TRILHO QUE ROLA NA HORIZONTAL, com os degraus ligados por uma linha continua.
   A linha e um ::before do <ol>, atras dos cartoes, e nao uma borda em cada
   item: borda por item deixaria um degrau visivel entre um cartao e o proximo,
   que e exatamente o contrario de "percurso".

   ROLA EM VEZ DE QUEBRAR EM DUAS LINHAS de proposito. Quatro cursos empilhados
   em duas fileiras deixam de ler como sequencia: viram uma grade, e grade nao
   tem "primeiro" nem "depois". Em qualquer largura, a ordem continua sendo da
   esquerda para a direita, sem excecao.

   scroll-snap ENTRA aqui (e ficou de fora do filtro do feed) porque todos os
   cartoes tem a MESMA largura: o snap para sempre com um cartao inteiro na
   frente, em vez de prender o dedo em posicao arbitraria.
   ========================================================================== */

/* Os 48px do topo devolvem os 32 que `.wac-feed` sobe por cima da curva do
   header e ainda deixam 16 de respiro. Sem eles o numero "1", que fica montado
   na borda de cima do primeiro cartao, ficaria cortado pelo header. Mesmo
   ajuste da primeira estante da Biblioteca, e pelo mesmo motivo: o que flutua
   sobre o laranja e cartao de conteudo, nao cabecalho de bloco. */
.wac-percurso { margin: var(--space-2xl) 0 var(--space-lg); }

.wac-percurso__lista {
  position: relative;
  display: flex;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0 var(--space-lg) var(--space-sm) 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximate;
  scrollbar-width: none;
}
.wac-percurso__lista::-webkit-scrollbar { display: none; }

/* A linha que liga os degraus. Fica na altura do numero, atras de tudo. */
.wac-percurso__lista::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 15px;
  height: 2px;
  background: var(--cs-line-forte);
  z-index: 0;
}

.wac-percurso__item {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 216px;
  scroll-snap-align: start;
}

.wac-percurso__caixa {
  display: block;
  padding: var(--space-md);
  border: 1px solid var(--cs-line);
  border-radius: var(--r-card);
  background: var(--cs-surface);
  box-shadow: var(--sombra-card);
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.wac-percurso__caixa:not(.is-desativado):hover { border-color: var(--wlb-orange); }
.wac-percurso__caixa:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* O numero fica montado na borda de cima, encostado na linha: e ele que
   transforma quatro cartoes soltos numa sequencia numerada. */
.wac-percurso__num {
  position: absolute;
  top: 3px;
  left: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cs-surface);
  border: 2px solid var(--cs-line-forte);
  font-size: 12px;
  font-weight: 900;
  color: var(--cs-ink-2);
}
.wac-percurso__item.is-atual .wac-percurso__num {
  background: var(--cta-bg);
  border-color: var(--cta-bg);
  color: var(--cta-fg);
}
.wac-percurso__item.is-feito .wac-percurso__num {
  border-color: var(--wlb-orange);
  color: var(--accent-text);
}

.wac-percurso__item.is-atual .wac-percurso__caixa {
  border-color: var(--wlb-orange);
  box-shadow: 0 0 0 2px rgba(217, 117, 89, 0.18), var(--sombra-card);
}

.wac-percurso__capa {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1460 / 752;
  object-fit: cover;
  border-radius: 10px;
  margin-top: 18px;   /* respiro para o numero montado na borda */
  background: var(--cs-surface-2);
}
.wac-percurso__item.is-breve .wac-percurso__capa { filter: grayscale(0.7); opacity: 0.55; }

.wac-percurso__corpo { display: block; margin-top: var(--space-sm); }
.wac-percurso__nome { display: block; font-size: 15px; font-weight: 700; }
.wac-percurso__frase {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--cs-ink-2);
}

.wac-percurso__selo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-sm);
  padding: 2px 9px;
  border: 1px solid var(--cs-line-forte);
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cs-ink-2);
}
.wac-percurso__selo--agora {
  background: var(--cta-bg);
  border-color: var(--cta-bg);
  color: var(--cta-fg);      /* 5,82:1, o mesmo par do botao primario */
}
.wac-percurso__selo--feito { border-color: var(--wlb-orange); color: var(--accent-text); }
.wac-percurso__selo--breve { border-style: dashed; }

.wac-percurso__barra {
  height: 6px;
  margin-top: var(--space-sm);
  border-radius: var(--r-pill);
  background: var(--cs-surface-2);
  overflow: hidden;
}
.wac-percurso__barra-cheia {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--wlb-orange);
}

.wac-percurso__conta { margin-top: 4px; font-size: 11.5px; color: var(--cs-ink-2); }

/* No celular o cartao encolhe um pouco para caber mais de um na tela: um
   trilho que mostra so um cartao por vez nao parece trilho, parece cartao. */
@media (max-width: 620px) {
  .wac-percurso__item { width: 184px; }
}


/* =============================================================================
   ABAS DA BIBLIOTECA E CARTAO DE ENTREGAVEL (2026-08-08)
   =============================================================================
   Pedido da Laise: "Dentro da Biblioteca vai ter duas abas: Skills ou
   Entregaveis", e dentro de Entregaveis os videos do YouTube com a thumb de la
   e o material embaixo.

   ABAS COM SUBLINHADO, e nao pills. Pill e o vocabulario que esta pagina ja usa
   para FILTRO (o trilho do feed, os chips do composer), e filtro e outra coisa:
   ele recorta uma lista, a aba troca a lista inteira. Dois gestos diferentes
   com a mesma cara e o comeco de todo clique errado.
   ========================================================================== */

.wac-abas {
  display: flex;
  gap: var(--space-lg);
  margin: var(--space-2xl) 0 var(--space-lg);
  border-bottom: 1px solid var(--cs-line);
}

.wac-abas__aba {
  position: relative;
  padding: 10px 2px 12px;
  border: 0;
  background: transparent;
  color: var(--cs-ink-2);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.wac-abas__aba:hover { color: var(--cs-ink); }
.wac-abas__aba:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }

.wac-abas__aba[aria-selected="true"] { color: var(--accent-text); }
/* O sublinhado desce 1px para cobrir a borda do tablist, senao sobra uma linha
   cinza atravessando a marca da aba ativa. */
.wac-abas__aba[aria-selected="true"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--wlb-orange);
}

/* ---- Cartao de video com o entregavel ---- */

.wac-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: var(--space-md);
}

.wac-video {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cs-line);
  border-radius: var(--r-card);
  background: var(--cs-surface);
  box-shadow: var(--sombra-card);
  overflow: hidden;
}

.wac-video__capa {
  position: relative;
  display: block;
  line-height: 0;
  background: var(--wlb-ink);
}
.wac-video__capa img {
  display: block;
  width: 100%;
  height: auto;
  /* A capa do YouTube vem 4:3 com barras pretas em cima e embaixo. O
     aspect-ratio 16:9 mais object-fit: cover corta exatamente essas barras, e
     e por isso que o card nao fica com duas tarjas pretas em volta da imagem. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.wac-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wlb-white);
  background: rgba(30, 27, 46, 0.28);
  transition: background 180ms ease;
}
.wac-video__capa:hover .wac-video__play { background: rgba(30, 27, 46, 0.5); }
.wac-video__capa:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }

.wac-video__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
  padding: var(--space-md);
}

.wac-video__titulo { font-size: 14.5px; font-weight: 700; line-height: 1.35; }

/* O bloco do material fica colado no rodape do card e com fundo proprio: ele e
   a promessa que a Laise faz no video, e nao pode ler como legenda do titulo.
   `margin-top: auto` alinha o bloco na mesma altura em todos os cards da linha,
   mesmo quando os titulos tem numeros de linha diferentes. */
.wac-video__entregavel {
  margin-top: auto;
  padding: var(--space-md);
  border-radius: var(--r-inner);
  background: var(--cs-surface-2);
}
.wac-video__entregavel--vazio { border: 1px dashed var(--cs-line-forte); background: transparent; }

.wac-video__rotulo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-ink-2);
}
.wac-video__nome { margin-top: 3px; font-size: 13.5px; line-height: 1.45; }


/* =============================================================================
   VISOR DO MATERIAL DA AULA (2026-08-09)
   =============================================================================
   Onde o material gratuito de cada aula e aberto. Ele chega como texto e e
   desenhado num iframe isolado; este bloco so cuida da caixa.

   88dvh e nao 88vh: no Safari do iPhone a barra de endereco entra e sai da conta
   do vh, e a caixa dimensionada em vh salta de altura enquanto a pessoa rola.
   ========================================================================== */

.wac-visor {
  width: min(980px, 96vw);
  height: 88dvh;
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  background: var(--cs-surface);
  color: var(--cs-ink);
  overflow: hidden;
}
.wac-visor::backdrop { background: rgba(30, 27, 46, 0.72); }

.wac-visor__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--cs-line);
}
.wac-visor__titulo { font-size: 15px; font-weight: 700; }

.wac-visor__fechar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--cs-surface-2);
  color: var(--cs-ink);
  cursor: pointer;
}
.wac-visor__fechar:hover { background: var(--wlb-ink); color: var(--wlb-white); }

.wac-visor__aviso { padding: var(--space-lg); color: var(--cs-ink-2); }

/* O quadro ocupa o que sobra da caixa. `border: 0` e obrigatorio: a borda
   padrao do iframe apareceria como um risco cinza em volta do material. */
.wac-visor__quadro {
  display: block;
  width: 100%;
  height: calc(88dvh - 71px);   /* 71px e a altura do topo */
  border: 0;
  background: var(--cs-surface);
}

/* =============================================================================
   ABA WEAGENTS (2026-08-18, Félix)
   =============================================================================
   Pedido da Laise: publicar os contratos dos WeAgents na comunidade, numa aba
   própria.

   SEÇÃO ADITIVA. Nada acima desta linha foi alterado, com uma exceção nomeada e
   explicada no fim deste bloco (a pista de rolagem do trilho, que conserta um
   defeito conhecido de 360px em vez de criar um novo).

   ZERO TOKEN NOVO. Cor, espaço, raio, sombra e tipografia saem todos do que já
   existe no topo deste arquivo (DI-003-wlb). O único valor calculado aqui é
   `--retrato`, que é o lado do círculo do retrato e vem do JavaScript porque a
   mesma marcação serve o cartão (56px) e o topo da página do agente (72px).
   ========================================================================== */

/* ---- Abertura (o LEIA-PRIMEIRO) ----
   Primeira coisa da aba, nunca um link escondido. Cartão de destaque, com a
   borda lilás que o Club já usa para "leia isto antes". */
.wac-agentes__abertura {
  border: 1px solid var(--wlb-lilac-soft);
  margin-bottom: var(--space-lg);
}
.wac-agentes__abertura-titulo {
  font-size: 19px;
  font-weight: 900;
  color: var(--cs-ink);
  margin-bottom: var(--space-sm);
}

/* Botão de continuar lendo a abertura. Existe porque a introdução mede 4.685px
   em 360px: sem ele, a pessoa rolava SETE TELAS antes de ver o primeiro WeAgent,
   numa aba cujo assunto é a lista dos 31. O texto não sai da tela, ele fica um
   clique adiante, com botão de verdade e `hidden` no que está fechado. */
.wac-agentes__mais { margin-top: var(--space-md); }

/* Atalho para a lista. Ele mora DENTRO da abertura, logo abaixo do título, e
   não depois do ensaio: assim aparece antes de a pessoa ter rolado a introdução
   inteira, que é o que faz o pulo valer o clique (Vera, MEDIO 1). */
.wac-agentes__atalho {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--r-pill);
  background: var(--wlb-lilac-soft);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--wlb-lilac-deep);
}
.wac-agentes__atalho:hover { background: var(--wlb-lilac-mid); color: var(--wlb-ink); }
/* Dentro do cartão de abertura o respiro de baixo já vem do `.wac-md`, que abre
   com margem própria. Somar as duas deixaria um buraco entre o botão e o texto. */
.wac-agentes__abertura .wac-agentes__atalho { margin-bottom: 0; }

/* O destino do atalho recebe foco por JavaScript do navegador (é um alvo de
   âncora com tabindex="-1"), e sem esta regra o anel padrão quase não aparece
   sobre o bege. */
#lista-de-agentes:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 6px;
  border-radius: var(--r-card);
}

/* ---- Grupos ---- */
.wac-agentes__grupo + .wac-agentes__grupo { margin-top: var(--space-xl); }
.wac-agentes__grupo .wac-secao__titulo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
/* Quantos agentes o grupo tem. Não é enfeite: com seis grupos de tamanhos bem
   diferentes (7, 6, 5, 7, 4, 2, na ordem em que a página mostra), o número diz
   de relance onde está o volume. */
.wac-agentes__conta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--cs-surface-2);
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-text);
}

/* ---- A lista de agentes ----
   `auto-fill` com mínimo declarado, em vez de um número fixo de colunas: a
   coluna do feed muda de largura três vezes (1180px, 980px, 760px) e uma grade
   por quantidade precisaria ser redeclarada em cada uma delas.

   O MÍNIMO É 300px, E O NÚMERO SAIU DE UMA MEDIÇÃO. Com 260px a coluna do feed
   de 1440px cabia QUATRO cartões de 262px, e o resumo (cerca de 140 caracteres,
   que é o conteúdo principal do cartão) caía para trinta caracteres por linha e
   sete linhas de altura. Trinta caracteres é metade do piso confortável de
   leitura. Com 300px são três colunas de cerca de 360px, o resumo fica em torno
   de quarenta e cinco caracteres por linha e o cartão encolhe de altura. */
.wac-agentes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.wac-agente { min-width: 0; }

.wac-agente__caixa {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  height: 100%;
  padding: var(--space-md);
  border-radius: var(--r-card);
  background: var(--cs-surface);
  box-shadow: var(--sombra-card);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.wac-agente__caixa:hover {
  box-shadow: var(--sombra-flutuante);
  transform: translateY(-2px);
}
/* O anel de foco cobre o cartão inteiro, e não só o texto: o alvo de clique é o
   cartão. */
.wac-agente__caixa:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ---- Retrato ----
   NUNCA um espaço vazio. A inicial fica desenhada no círculo e a foto entra por
   cima; se o arquivo não existir, o JavaScript remove a imagem e a inicial
   reaparece sem salto de layout, porque o círculo já tinha o tamanho final. */
.wac-agente__retrato {
  position: relative;
  width: var(--retrato, 56px);
  height: var(--retrato, 56px);
  font-size: calc(var(--retrato, 56px) * 0.36);
  overflow: hidden;
}
.wac-agente__retrato .wac-avatar__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  /* Nasce invisível e só aparece quando o arquivo chegou de verdade
     (ligarQuedaDoRetrato põe a classe). Enquanto isso, a inicial que está por
     baixo é o que se vê. Sem esta regra, um retrato que não existe deixaria o
     ícone de imagem quebrada por cima do círculo. */
  opacity: 0;
  transition: opacity 160ms ease;
}
.wac-agente__retrato .wac-avatar__foto.esta-pronta { opacity: 1; }

.wac-agente__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wac-agente__nome { font-size: 16px; font-weight: 800; color: var(--cs-ink); }
.wac-agente__papel {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.wac-agente__resumo {
  margin-top: var(--space-xs);
  font-size: 14px;
  line-height: 1.55;
  color: var(--cs-ink-2);
}

/* ---- Página de um agente ---- */
.wac-agente__voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--r-pill);
  background: var(--cs-surface);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent-text);
  /* 44px de alvo mínimo: é um link de navegação, e no celular ele é a única
     saída da leitura. */
  min-height: 44px;
}
.wac-agente__voltar:hover { background: var(--cs-surface-2); }

.wac-agente-pagina__cabeca {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--cs-line);
}
.wac-agente-pagina__nome { font-size: 24px; font-weight: 900; line-height: 1.2; }
/* O h2 recebe foco quando a troca de tela parte de um clique. Sem esta regra o
   navegador desenharia o anel padrão dele, que sobre bege claro quase não
   aparece. */
.wac-agente-pagina__nome:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: var(--space-sm);
}
.wac-agente-pagina__papel {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.wac-agente-pagina__resumo {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--r-inner);
  background: var(--cs-surface-2);
  font-size: 15px;
  line-height: 1.6;
  color: var(--cs-ink-2);
}

/* =============================================================================
   TIPOGRAFIA DO MARKDOWN RENDERIZADO (.wac-md)
   =============================================================================
   Vale para qualquer texto que passe por assets/js/wac-md.js. Nasceu na aba
   WeAgents e é de propósito genérica: o próximo lugar que mostrar markdown usa
   esta mesma folha, em vez de inventar uma segunda.

   MEDIDA DE LINHA. `max-width: 68ch` nos blocos de texto. Contrato de agente é
   documento longo, e linha de 100 caracteres numa tela de 1440px é a diferença
   entre ler e desistir. A tabela e o bloco de código ficam de fora do limite,
   porque neles a largura é conteúdo.
   ========================================================================== */

.wac-md { margin-top: var(--space-lg); }
.wac-md > *:first-child { margin-top: 0; }

.wac-md__p,
.wac-md__lista,
.wac-md__citacao { max-width: 68ch; }

.wac-md__p {
  margin-top: var(--space-md);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--cs-ink-2);
}

.wac-md__h2 {
  margin-top: var(--space-xl);
  font-size: 20px;
  font-weight: 900;
  color: var(--cs-ink);
}
.wac-md__h3 {
  margin-top: var(--space-lg);
  font-size: 17px;
  font-weight: 800;
  color: var(--cs-ink);
}
.wac-md__h4,
.wac-md__h5,
.wac-md__h6 {
  margin-top: var(--space-md);
  font-size: 15px;
  font-weight: 800;
  color: var(--accent-text);
}

.wac-md__lista {
  margin-top: var(--space-md);
  padding-left: var(--space-lg);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--cs-ink-2);
}
/* `list-style` volta porque o reset do topo do arquivo tirou o marcador de TODA
   lista, e aqui ele é informação: contrato de agente usa lista numerada para
   ordem de execução, e passo sem número deixa de ser passo. */
ul.wac-md__lista { list-style: disc; }
ol.wac-md__lista { list-style: decimal; }
.wac-md__lista li { margin-top: var(--space-xs); }
.wac-md__lista li::marker { color: var(--accent-text); }

.wac-md__citacao {
  margin-top: var(--space-md);
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  border-left: 3px solid var(--wlb-lilac-mid);
  border-radius: 0 var(--r-inner) var(--r-inner) 0;
  background: var(--cs-surface-2);
  font-size: 15px;
  line-height: 1.65;
  color: var(--cs-ink-2);
}

.wac-md__hr {
  margin: var(--space-xl) 0;
  border: 0;
  border-top: 1px solid var(--cs-line);
}

.wac-md strong { color: var(--cs-ink); font-weight: 800; }

.wac-md__code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--cs-surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  color: var(--accent-text);
  /* Caminho de arquivo é longo e não tem espaço para quebrar: sem isto ele
     empurra o cartão e a página passa a rolar de lado no celular. */
  overflow-wrap: anywhere;
}

.wac-md__pre {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--r-inner);
  background: var(--wlb-ink);
  color: var(--wlb-beige);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  /* Rola dentro de si mesmo. Bloco de código é o campeão de estourar largura, e
     um `pre` sem overflow próprio arrasta o documento inteiro. */
  overflow-x: auto;
}
.wac-md__pre code { font: inherit; color: inherit; }
/* Focável sem anel visível é armadilha: a pessoa dá Tab, o foco some da vista e
   ela não sabe mais onde está. Anel claro porque o fundo do bloco é escuro. */
.wac-md__pre:focus-visible {
  outline: 2px solid var(--wlb-orange-soft);
  outline-offset: 2px;
}

/* Referência a documento da WeWiki. NÃO é link de propósito: o destino não
   existe dentro do Club, e link que não abre nada é pior do que texto. */
.wac-md__wiki {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--wlb-lilac-soft);
  font-size: 0.92em;
  font-weight: 600;
  color: var(--wlb-lilac-deep);
  overflow-wrap: anywhere;
}

.wac-md__link {
  color: var(--accent-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Tabela ---- */
.wac-md__tabela-caixa {
  margin-top: var(--space-md);
  overflow-x: auto;
  border-radius: var(--r-inner);
  border: 1px solid var(--cs-line);
}
/* A caixa é focável (tabindex="0") para quem navega por teclado conseguir rolar
   uma tabela larga. Focável sem anel visível é armadilha. */
.wac-md__tabela-caixa:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.wac-md__tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--cs-surface);
}
.wac-md__tabela th,
.wac-md__tabela td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--cs-line);
  line-height: 1.55;
}
.wac-md__tabela th {
  background: var(--cs-surface-2);
  font-weight: 800;
  color: var(--cs-ink);
}
.wac-md__tabela td { color: var(--cs-ink-2); }
.wac-md__tabela tbody tr:last-child td { border-bottom: 0; }

/* ---- Estreito ----
   Abaixo de 620px a tabela deixa de ser tabela e vira lista empilhada: cada
   linha é um bloco e cada célula carrega o rótulo da própria coluna, escrito no
   data-rotulo pelo renderizador. Rolar uma tabela de duas colunas largas numa
   tela de 360px é o pior dos dois mundos, porque a coluna 1 sai da tela e a
   pessoa lê respostas sem as perguntas. */
@media (max-width: 620px) {
  .wac-md__tabela,
  .wac-md__tabela thead,
  .wac-md__tabela tbody,
  .wac-md__tabela tr,
  .wac-md__tabela td { display: block; width: 100%; }

  /* O cabeçalho some da tela e continua no documento para o leitor de tela. */
  .wac-md__tabela thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .wac-md__tabela tr {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--cs-line);
  }
  .wac-md__tabela tr:last-child { border-bottom: 0; }

  .wac-md__tabela td { border-bottom: 0; padding-bottom: var(--space-xs); }
  .wac-md__tabela td::before {
    content: attr(data-rotulo);
    display: block;
    margin-bottom: 2px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-text);
  }
  /* Célula sem rótulo (tabela sem cabeçalho declarado) não ganha uma linha
     vazia por cima. */
  .wac-md__tabela td[data-rotulo=""]::before { display: none; }
}

@media (max-width: 520px) {
  .wac-agentes { grid-template-columns: 1fr; }
  .wac-agente__caixa { padding: var(--space-md); }
  .wac-agente-pagina__nome { font-size: 20px; }
  /* Em 360px o cabeçalho do agente empilha: retrato de 72px mais nome de 20px
     na mesma linha não sobra largura para o papel embaixo. */
  .wac-agente-pagina__cabeca { flex-wrap: wrap; gap: var(--space-sm); }
}

/* =============================================================================
   PISTA DE ROLAGEM LATERAL
   =============================================================================
   Vale para toda caixa que rola de lado no Club: o trilho de navegação abaixo
   de 760px, o bloco de código de um contrato e a tabela larga de um contrato.
   Uma resposta só para "isto rola", em vez de uma invenção por tela.

   O DEFEITO QUE ELA CONSERTA. A barra de rolagem está escondida (o
   `-webkit-scrollbar` some no bloco de cursos) e a fileira termina numa borda
   limpa, então o trilho rola e NÃO PARECE ROLAR: em 360px, "Conta" ficava fora
   da tela sem pista nenhuma. A Vera registrou isso como MEDIO 1 em 2026-08-08 e
   o conserto de lá (menu de conta no avatar) garantiu o CAMINHO; a causa, que é
   a pista ausente, continuou de pé. Em 2026-08-18 a aba WeAgents virou o oitavo
   item da fileira, e o bloco de código do contrato trouxe o mesmo defeito
   medido: 37% do texto fora da tela em 360px.

   POR QUE NÃO É MAIS UMA SOMBRA NA PONTA (Vera, MEDIO 2, 2026-08-18). A
   primeira versão punha 28px de degradê da cor da página em cada ponta. Ela
   media 1,10:1 de luminância, ou seja, quase não se via, e pior: os 28px opacos
   pintavam por cima da fatia do próximo item, apagando com a cor do fundo a
   dica mais forte que já existia. Aquela versão saiu inteira daqui.

   O QUE ELA É AGORA. A barra de rolagem que o sistema esconde, desenhada de
   volta, ABAIXO da caixa: nenhum pixel de conteúdo é coberto e a fatia do
   próximo item continua fazendo o trabalho dela. Medido no navegador: o polegar
   dá 5,1:1 contra o fundo da página e 4,9:1 contra o próprio trilho da pista,
   os dois bem acima do 3:1 que a WCAG 2.2 pede para elemento de interface
   (1.4.11). Dentro do bloco de código, que tem fundo escuro, o polegar vira
   `--wlb-orange-soft`, que mede 9,3:1 sobre `--wlb-ink`.

   ZERO TOKEN NOVO. Cor, raio e espaço saem do que já existe no topo do arquivo.
   ========================================================================== */

.wac-rolagem {
  /* Nasce escondida: quem acende é o JavaScript, e só quando existe o que
     rolar. Pista fixa continuaria acesa com a lista inteira visível, e pista
     que mente é pista que a pessoa aprende a ignorar. */
  display: none;
  height: 4px;
  margin-top: var(--space-sm);
  border-radius: var(--r-pill);
  /* O trilho é claro de propósito. Com o hairline padrão (`--cs-line`, que é
     tinta escura a 10%) o polegar media 2,88:1 CONTRA O PRÓPRIO TRILHO, medido
     no navegador: passava contra a página e raspava contra a coisa em que ele
     encosta. Trilho claro devolve 4,9:1, e quem carrega a informação é o
     polegar, não o sulco. */
  background: var(--cs-surface-2);
}
.wac-rolagem.tem-rolagem { display: block; }

.wac-rolagem__polegar {
  display: block;
  height: 100%;
  /* As duas medidas vêm do JavaScript, calculadas do scrollWidth e do
     scrollLeft: largura = o quanto cabe, deslocamento = o quanto já andou. */
  width: var(--largura, 30%);
  margin-left: var(--desloc, 0%);
  border-radius: var(--r-pill);
  background: var(--accent-text);
}

/* No trilho da sidebar a pista só existe onde o trilho existe: acima de 760px a
   navegação é uma coluna vertical e não rola de lado. O JavaScript já não
   acenderia (a sobra é zero), e esta regra é a garantia de que ela nunca ocupa
   altura na coluna. */
@media (min-width: 761px) {
  .wac-sidebar .wac-rolagem { display: none; }
}

/* Dentro do markdown a pista fica colada na caixa que ela descreve, e não
   solta no meio do texto. */
.wac-md .wac-rolagem {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-md);
}

/* Bloco de código: fundo escuro, então o polegar clareia em vez de escurecer. */
.wac-md__pre + .wac-rolagem { background: rgba(245, 239, 232, 0.14); }
.wac-md__pre + .wac-rolagem .wac-rolagem__polegar { background: var(--wlb-orange-soft); }