/*
 * Mente Operacional Academy: primitivos do app.
 *
 * CSS puro, sem framework e sem build (molde do app DNC). Todo valor vem de
 * tokens.css: cor, fonte, espaço e raio aqui são sempre var(--am-*). Hex, font-family
 * literal ou px de espaçamento neste arquivo é regressão.
 *
 * Celular primeiro. Tudo que muda no computador está dentro de @media (min-width: 768px),
 * e a regra de bolso herdada do molde vale aqui: APARÊNCIA do conteúdo fica fora da media
 * query, POSICIONAMENTO da barra fica dentro.
 *
 * Índice:
 *   1. base            5. selo, versão, arquivo     9. lista e linha
 *   2. estrutura       6. botão e link             10. seção numerada
 *   3. navegação       7. card e estante           11. formulário e área de soltar
 *   4. texto           8. barra de progresso       12. computador (>= 768px)
 */

/* ==== 1. base ============================================================ */

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

/* `hidden` volta a esconder. Sem o !important, qualquer classe que declare `display`
   (.am-botao é inline-flex) anula o [hidden] do navegador em silêncio. Achado do molde
   DNC em 2026-08-11. */
[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  font-family: var(--am-fonte-corpo);
  font-size: var(--am-t-corpo);
  line-height: var(--am-linha-corpo);
  color: var(--am-texto);
  background: var(--am-fundo);
}

:focus-visible {
  outline: var(--am-traco-foco) solid var(--am-foco);
  outline-offset: var(--am-traco-foco);
}

/* Ícone Lucide de contorno (identidade §8.1): o desenho vem do SVG (viewBox 24), o traço,
   o arredondado e a cor vêm daqui. Assim o mesmo <symbol> serve em qualquer cor. */
.am-ic {
  flex: 0 0 auto;
  width: var(--am-icone-inline);
  height: var(--am-icone-inline);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--am-icone-traco);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Texto só para leitor de tela. */
.am-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Pilha vertical: o ritmo entre blocos de uma tela. */
.am-pilha {
  display: flex;
  flex-direction: column;
  gap: var(--am-e-md);
}

.am-pilha--larga {
  gap: var(--am-e-xl);
}

.am-ic--grande {
  width: var(--am-icone);
  height: var(--am-icone);
}

/* ==== 2. estrutura ======================================================== */

/* A casca de toda tela: coluna que ocupa a altura inteira, para as abas do rodapé
   ficarem no pé mesmo quando o conteúdo é curto. */
.am-app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.am-principal {
  flex: 1;
  width: 100%;
  max-width: var(--am-largura-max);
  margin: 0 auto;
  padding: var(--am-e-lg) var(--am-margem-celular) var(--am-e-2xl);
}

/* Lista longa (trilha, autoria) lê melhor numa coluna mais estreita. */
.am-principal--coluna {
  max-width: var(--am-largura-coluna);
}

/* ==== 3. navegação ======================================================== */

/* -- marca: o "MO" é PROVISÓRIO (D111, 2026-10-09). O logo ainda não existe (identidade §4);
      o quadrado Laranja com letras Grafite segue a direção B do briefing (§4.2). */
.am-marca {
  display: flex;
  align-items: center;
  gap: var(--am-e-sm);
  min-height: var(--am-toque);
  min-width: var(--am-toque);
  color: inherit;
  text-decoration: none;
}

.am-marca__simbolo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--am-e-xl);
  height: var(--am-e-xl);
  border-radius: var(--am-raio);
  background: var(--am-acento);
  color: var(--am-grafite);
  font-family: var(--am-fonte-display);
  font-weight: var(--am-peso-forte);
  font-size: var(--am-t-corpo);
  letter-spacing: var(--am-letra-titulo);
  line-height: 1;
}

.am-marca__nome {
  display: flex;
  flex-direction: column;
  font-family: var(--am-fonte-display);
  font-weight: var(--am-peso-semi);
  line-height: var(--am-linha-titulo);
  color: var(--am-texto-inverso);
}

.am-marca__nome small {
  font-family: var(--am-fonte-corpo);
  font-weight: var(--am-peso-normal);
  font-size: var(--am-t-legenda);
  color: var(--am-texto-inverso-2);
}

/* -- barra de topo (Grafite: identidade §2.1, "barras de navegação") */
.am-topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--am-e-sm);
  min-height: var(--am-topo);
  padding: 0 var(--am-e-sm) 0 var(--am-margem-celular);
  background: var(--am-superficie-escura);
  color: var(--am-texto-inverso);
}

/* Pode ser <h1> (trilha do produto): o tamanho é declarado, não herdado do navegador. */
.am-topo__titulo {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--am-fonte-display);
  font-size: var(--am-t-h3);
  font-weight: var(--am-peso-semi);
  line-height: var(--am-linha-titulo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* O complemento do título (· Nível 1) só cabe no computador; no celular ele empurrava o
   nome do produto para fora da tela (sonda de 2026-10-07). */
.am-topo__sub {
  display: none;
  font-family: var(--am-fonte-corpo);
  font-weight: var(--am-peso-normal);
  color: var(--am-texto-inverso-2);
}

.am-topo__acoes {
  display: flex;
  gap: var(--am-e-xs);
  margin-left: auto;
}

.am-topo :focus-visible,
.am-lateral :focus-visible,
.am-abas :focus-visible {
  outline-color: var(--am-foco-escuro);
}

/* -- barra lateral: só existe no computador (seção 12). No celular quem navega são as abas. */
.am-lateral {
  display: none;
  flex-direction: column;
  background: var(--am-superficie-escura);
  color: var(--am-texto-inverso);
}

.am-lateral__itens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--am-e-xs);
}

.am-lateral__item {
  display: flex;
  align-items: center;
  gap: var(--am-e-md);
  min-height: var(--am-toque);
  padding: 0 var(--am-e-md);
  /* Borda sempre presente, transparente quando inativa: o texto não anda ao trocar de página. */
  border-left: var(--am-traco-ativo) solid transparent;
  color: var(--am-texto-inverso-2);
  font-weight: var(--am-peso-medio);
  text-decoration: none;
}

.am-lateral__item:hover {
  color: var(--am-texto-inverso);
}

.am-lateral__item[aria-current="page"] {
  border-left-color: var(--am-acento);
  color: var(--am-texto-inverso);
  font-weight: var(--am-peso-semi);
}

.am-lateral__item[aria-current="page"] .am-ic {
  color: var(--am-acento);
}

/* -- produtos e perfil na lateral (escolhas "1a, 2a, 3a" de 2026-10-16, _docs/design/lateral-perfil).
   O meio rola sozinho se a lista crescer; o perfil fica sempre no pé. */
.am-lateral__meio {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--am-e-lg);
}

.am-lateral__rotulo {
  margin: 0 0 var(--am-e-xs);
  padding: 0 var(--am-e-md);
  font-size: var(--am-t-selo);
  font-weight: var(--am-peso-semi);
  letter-spacing: var(--am-letra-caixa-alta);
  text-transform: uppercase;
  color: var(--am-texto-inverso-2);
}

/* Produto: nome em cima (quebra em 2 linhas, não corta), nível e progresso embaixo. */
.am-lateral__item--produto {
  align-items: flex-start;
  padding-top: var(--am-e-sm);
  padding-bottom: var(--am-e-sm);
}

.am-lateral__texto {
  display: flex;
  flex-direction: column;
  gap: var(--am-e-xs);
  min-width: 0;
  line-height: var(--am-linha-titulo);
}

.am-lateral__meta {
  font-size: var(--am-t-legenda);
  font-weight: var(--am-peso-normal);
  color: var(--am-texto-inverso-2);
}

/* -- pé da lateral: "Fale conosco" (chat do Chatwoot, pedido de 2026-10-16) logo acima do perfil. */
.am-lateral__pe {
  display: flex;
  flex-direction: column;
  gap: var(--am-e-sm);
}

/* -- perfil no pé da lateral (molde: SidebarPerfil do Editor Acadêmico). O menu abre para cima. */
.am-perfil {
  position: relative;
  margin: 0 var(--am-e-sm);
  padding-top: var(--am-e-sm);
  border-top: var(--am-traco) solid var(--am-borda-suave);
}

.am-perfil__botao {
  display: flex;
  align-items: center;
  gap: var(--am-e-sm);
  width: 100%;
  min-height: var(--am-toque);
  padding: var(--am-e-xs) var(--am-e-sm);
  border: 0;
  border-radius: var(--am-raio);
  background: none;
  color: var(--am-texto-inverso);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.am-perfil__texto {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  line-height: var(--am-linha-titulo);
}

.am-perfil__nome,
.am-perfil__email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.am-perfil__nome {
  font-weight: var(--am-peso-semi);
}

.am-perfil__email {
  font-size: var(--am-t-legenda);
  color: var(--am-texto-inverso-2);
}

.am-perfil__botao:hover .am-perfil__email {
  color: var(--am-texto-inverso);
}

.am-perfil__seta {
  color: var(--am-texto-inverso-2);
}

.am-perfil__botao[aria-expanded="true"] .am-perfil__seta {
  transform: rotate(180deg);
}

/* Na página da Conta o perfil é o "lugar atual": anel Laranja no círculo. */
.am-perfil__botao[aria-current="page"] .am-avatar {
  box-shadow: 0 0 0 var(--am-traco-ativo) var(--am-acento);
}

/* Círculo com a inicial: na lateral e na aba "Conta" do celular (escolha 2a). */
.am-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--am-e-xl);
  height: var(--am-e-xl);
  border-radius: var(--am-raio-pilula);
  background: var(--am-superficie-quente);
  color: var(--am-grafite);
  font-family: var(--am-fonte-display);
  font-size: var(--am-t-rotulo);
  font-weight: var(--am-peso-forte);
  line-height: 1;
}

/* Menu claro sobre a lateral escura, como no Editor. `hidden` fechado por regra própria:
   `display: flex` da classe anularia o `hidden` do navegador em silêncio. */
.am-perfil__menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + var(--am-e-xs));
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--am-e-xs);
  list-style: none;
  background: var(--am-superficie);
  color: var(--am-texto);
  border: var(--am-traco) solid var(--am-borda);
  border-radius: var(--am-raio);
  box-shadow: var(--am-sombra);
}

.am-perfil__menu[hidden] {
  display: none;
}

.am-perfil__menu :focus-visible {
  outline-color: var(--am-foco);
}

.am-perfil__opcao {
  display: flex;
  align-items: center;
  gap: var(--am-e-sm);
  width: 100%;
  min-height: var(--am-toque);
  padding: 0 var(--am-e-sm);
  border: 0;
  border-radius: var(--am-raio);
  background: none;
  color: var(--am-texto);
  font: inherit;
  /* 14px, como o menu do Editor (0,85rem): "Política de privacidade" cabe numa linha só. */
  font-size: var(--am-t-rotulo);
  font-weight: var(--am-peso-medio);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.am-perfil__opcao:hover {
  background: var(--am-fundo);
}

.am-perfil__opcao--sair {
  color: var(--am-erro);
}

.am-perfil__divisa {
  height: var(--am-traco);
  margin: var(--am-e-xs) 0;
  background: var(--am-borda-suave);
}

/* Título da página dentro do conteúdo, só no computador: no celular quem diz o nome é a barra
   de topo (página do produto, escolha 3a: no computador a lateral toma o lugar do topo). */
.am-cabecalho.am-cabecalho--computador {
  display: none;
}

/* -- abas no rodapé: só no celular */
.am-abas {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  background: var(--am-superficie-escura);
  padding-bottom: env(safe-area-inset-bottom);
}

.am-abas a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--am-e-xs);
  min-height: calc(var(--am-toque) + var(--am-e-md));
  padding: var(--am-e-sm) var(--am-e-xs);
  color: var(--am-texto-inverso-2);
  font-size: var(--am-t-legenda);
  font-weight: var(--am-peso-medio);
  text-decoration: none;
}

/* Laranja sobre Grafite: 5,5:1 (medido em 2026-10-07), passa para texto. */
.am-abas a[aria-current="page"] {
  color: var(--am-acento);
  font-weight: var(--am-peso-semi);
}

/* Aba "Conta" com a inicial no lugar do ícone (escolha 2a): o círculo no tamanho do ícone. */
.am-abas .am-avatar {
  width: var(--am-icone);
  height: var(--am-icone);
  font-size: var(--am-t-selo);
}

.am-abas a[aria-current="page"] .am-avatar {
  background: var(--am-acento);
}

/* -- caminho de volta e migalhas */
.am-voltar,
.am-migalhas a {
  display: inline-flex;
  align-items: center;
  gap: var(--am-e-xs);
  min-height: var(--am-toque);
  color: var(--am-texto-2);
  font-weight: var(--am-peso-semi);
  text-decoration: none;
}

.am-voltar:hover,
.am-migalhas a:hover {
  color: var(--am-texto);
}

.am-migalhas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--am-e-xs);
  margin: 0;
  color: var(--am-texto-2);
}

/* ==== 4. texto ============================================================ */

.am-titulo {
  margin: 0;
  font-family: var(--am-fonte-display);
  font-weight: var(--am-peso-forte);
  font-size: var(--am-t-h1);
  line-height: var(--am-linha-titulo);
  letter-spacing: var(--am-letra-titulo);
}

.am-apoio {
  margin: var(--am-e-sm) 0 0;
  max-width: var(--am-linha-max);
  color: var(--am-texto-2);
}

/* Cabeçalho da página: título à esquerda, ação à direita; no celular a ação desce. */
.am-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--am-e-md);
  margin-bottom: var(--am-e-xl);
}

/* O bloco de texto encolhe antes de empurrar a ação para baixo. */
.am-cabecalho > :first-child {
  flex: 1 1 var(--am-card-min);
  min-width: 0;
}

/* Kicker do carrossel (identidade §9.3): barra vertical Laranja, caixa alta espaçada.
   O texto é Grafite: Laranja sobre Branco Areia reprova para texto pequeno (2,9:1). */
.am-kicker {
  margin: 0 0 var(--am-e-md);
  padding-left: var(--am-e-sm);
  border-left: var(--am-traco-kicker) solid var(--am-acento);
  font-size: var(--am-t-rotulo);
  font-weight: var(--am-peso-forte);
  line-height: var(--am-linha-titulo);
  letter-spacing: var(--am-letra-caixa-alta);
  text-transform: uppercase;
}

/* Nome de produto: Space Grotesk (identidade §3.1, "nomes de produto"), tamanho de H3.
   Altura mínima de toque também quando NÃO é link (card bloqueado): senão os nomes de cards
   vizinhos ficam desalinhados (render de 2026-10-07). */
.am-nome-produto {
  display: flex;
  align-items: center;
  min-height: var(--am-toque);
  margin: 0;
  font-family: var(--am-fonte-display);
  font-weight: var(--am-peso-forte);
  font-size: var(--am-t-h3);
  line-height: var(--am-linha-titulo);
  letter-spacing: var(--am-letra-titulo);
}

/* O nome abre o produto: alvo de toque declarado, não herdado da altura da linha. */
.am-nome-produto a {
  display: inline-flex;
  align-items: center;
  min-height: var(--am-toque);
  color: inherit;
  text-decoration: none;
}

.am-nome-produto a:hover {
  text-decoration: underline;
  text-decoration-color: var(--am-acento);
}

.am-legenda {
  margin: 0;
  font-size: var(--am-t-legenda);
  color: var(--am-texto-2);
}

/* ==== 5. selo, versão, arquivo ============================================ */

/* Selo: etiqueta pequena em caixa alta, cantos de 3px (identidade §9.3). */
.am-selo {
  display: inline-flex;
  align-items: center;
  gap: var(--am-e-xs);
  padding: var(--am-e-xs) var(--am-e-sm);
  border-radius: var(--am-raio-selo);
  background: var(--am-grafite);
  color: var(--am-branco-areia);
  font-size: var(--am-t-selo);
  font-weight: var(--am-peso-forte);
  line-height: var(--am-linha-titulo);
  letter-spacing: var(--am-letra-caixa-alta);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Grafite com texto Laranja: o selo de destaque do carrossel (LANÇAMENTO, 2026-10-05). */
.am-selo--destaque {
  color: var(--am-acento);
}

.am-selo--neutro {
  background: var(--am-superficie-quente);
  color: var(--am-grafite);
}

.am-selo .am-ic {
  width: 1.1em;
  height: 1.1em;
}

/* Versão e hash em JetBrains Mono (identidade §3.1). */
.am-versao {
  display: inline-block;
  padding: var(--am-e-xs) var(--am-e-sm);
  border-radius: var(--am-raio-selo);
  background: var(--am-superficie-quente);
  color: var(--am-grafite);
  font-family: var(--am-fonte-mono);
  font-size: var(--am-t-mono);
  line-height: var(--am-linha-mono);
  white-space: nowrap;
}

.am-versao--grande {
  font-size: var(--am-t-h3);
}

.am-arquivo {
  font-family: var(--am-fonte-mono);
  font-size: var(--am-t-legenda);
  line-height: var(--am-linha-mono);
  color: var(--am-texto-2);
  overflow-wrap: anywhere;
}

.am-duracao {
  font-family: var(--am-fonte-mono);
  font-size: var(--am-t-mono);
  color: var(--am-texto-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Estado de um item (Pronto, Enviando). O check é Verde Resultado (identidade §2.3:
   validação); o TEXTO fica Grafite, porque Verde Resultado em texto pequeno dá 3,9:1. */
.am-estado {
  display: inline-flex;
  align-items: center;
  gap: var(--am-e-xs);
  font-size: var(--am-t-rotulo);
  font-weight: var(--am-peso-semi);
  white-space: nowrap;
}

.am-estado--pronto .am-ic {
  color: var(--am-sucesso);
}

.am-estado--enviando {
  flex-direction: column;
  align-items: stretch;
  min-width: var(--am-texto-min);
}

/* ==== 6. botão e link ===================================================== */

.am-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--am-e-sm);
  min-height: var(--am-toque);
  padding: var(--am-e-sm) var(--am-e-lg);
  border: var(--am-traco) solid transparent;
  border-radius: var(--am-raio);
  font-family: inherit;
  font-size: var(--am-t-botao);
  font-weight: var(--am-peso-semi);
  line-height: var(--am-linha-titulo);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* Laranja com texto Branco (identidade §2.5). Medido em 2026-10-07: 3,08:1, que só passa como
   texto grande. Decisão do Wellington (1a, 2026-10-07): manter Branco sobre Laranja e usar 19px
   em negrito, que é texto grande pela regra WCAG (>= 18,66px negrito). Não baixar este tamanho
   nem o peso sem trocar a cor do texto. */
.am-botao--primario {
  background: var(--am-acento);
  color: var(--am-acento-texto);
  font-size: var(--am-t-botao-primario);
  font-weight: var(--am-peso-forte);
}

.am-botao--primario:hover {
  background: var(--am-acento-hover);
}

.am-botao--secundario {
  background: var(--am-superficie);
  color: var(--am-texto);
  border-color: var(--am-borda-campo);
}

.am-botao--secundario:hover {
  border-color: var(--am-texto);
}

.am-botao--texto {
  padding-left: var(--am-e-sm);
  padding-right: var(--am-e-sm);
  background: transparent;
  color: var(--am-texto);
}

.am-botao--texto:hover {
  background: var(--am-fundo);
}

.am-botao--bloco {
  width: 100%;
}

.am-botao[disabled],
.am-botao[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Botão só de ícone: alvo de toque inteiro, rótulo no aria-label. */
.am-botao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--am-toque);
  height: var(--am-toque);
  padding: 0;
  border: 0;
  border-radius: var(--am-raio);
  background: transparent;
  color: var(--am-texto-2);
  cursor: pointer;
}

.am-botao-icone:hover {
  background: var(--am-fundo);
  color: var(--am-texto);
}

.am-topo .am-botao-icone {
  color: var(--am-texto-inverso-2);
}

.am-topo .am-botao-icone:hover {
  background: color-mix(in srgb, var(--am-branco-areia) 10%, transparent);
  color: var(--am-texto-inverso);
}

/* Link de texto: Grafite com sublinhado Laranja (identidade §2.1: "sublinhados").
   Texto Laranja ou Terracota sobre Branco Areia reprova em corpo pequeno. */
.am-link {
  display: inline-flex;
  align-items: center;
  gap: var(--am-e-xs);
  min-height: var(--am-toque);
  color: var(--am-texto);
  font-weight: var(--am-peso-semi);
  text-decoration: underline;
  text-decoration-color: var(--am-acento);
  text-decoration-thickness: var(--am-traco-foco);
  text-underline-offset: 0.25em;
}

.am-link:hover {
  text-decoration-color: var(--am-acento-hover);
}

/* Link no meio de um parágrafo (resposta do FAQ): em linha e sem a altura mínima de toque,
   que abria um vão nas linhas em volta. Vem DEPOIS da .am-link para ganhar no empate. */
.am-link--texto {
  display: inline;
  min-height: 0;
}

/* ==== 7. card e estante =================================================== */

.am-cartao {
  display: flex;
  flex-direction: column;
  gap: var(--am-e-md);
  padding: var(--am-e-md);
  background: var(--am-superficie);
  border: var(--am-traco) solid var(--am-borda);
  border-radius: var(--am-raio-cartao);
  box-shadow: var(--am-sombra);
}

/* Produto que a pessoa ainda não tem: mesmo desenho, sem a elevação e no fundo da página,
   para ler como "existe" e não como "é seu". */
.am-cartao--bloqueado {
  background: var(--am-fundo);
  box-shadow: none;
}

.am-cartao__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--am-e-sm);
}

/* Ações coladas no pé do card: cards da mesma fileira alinham os botões. */
.am-cartao__acoes {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--am-e-sm);
}

.am-estante {
  display: grid;
  gap: var(--am-e-lg);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--am-card-min)), 1fr));
}

/* Bloco "Sua versão" no topo da trilha. */
.am-versao-bloco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-e-md);
}

/* No celular o botão de baixar ocupa a linha inteira (alvo largo para o polegar). */
.am-versao-bloco > .am-botao {
  width: 100%;
}

.am-versao-bloco__info {
  display: flex;
  flex-direction: column;
  gap: var(--am-e-xs);
  min-width: 0;
}

.am-versao-bloco__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--am-e-sm);
}

/* ==== 8. barra de progresso =============================================== */

/* A largura vem de `style="--am-progresso: 60%"` no próprio elemento: é DADO, não layout. */
.am-progresso {
  display: flex;
  flex-direction: column;
  gap: var(--am-e-xs);
}

.am-progresso__rotulo {
  display: flex;
  justify-content: space-between;
  gap: var(--am-e-sm);
  font-size: var(--am-t-legenda);
  color: var(--am-texto-2);
}

/* `display: block` explícito: a barra também é usada dentro de <span> (linha de aula). */
.am-progresso__trilho {
  display: block;
  height: var(--am-barra-progresso);
  border-radius: var(--am-raio-pilula);
  background: var(--am-superficie-quente);
  overflow: hidden;
}

.am-progresso__barra {
  display: block;
  width: var(--am-progresso, 0%);
  height: 100%;
  border-radius: var(--am-raio-pilula);
  background: var(--am-acento);
}

/* ==== 9. lista e linha ==================================================== */

.am-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--am-superficie);
  border: var(--am-traco) solid var(--am-borda);
  border-radius: var(--am-raio-cartao);
  box-shadow: var(--am-sombra);
  overflow: hidden;
}

.am-lista > * + * {
  border-top: var(--am-traco) solid var(--am-borda-suave);
}

/* Linha flexível: quando o texto não cabe ao lado das ações (celular, autoria), as ações
   descem para a linha de baixo, alinhadas à direita. */
.am-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--am-e-sm);
  min-height: calc(var(--am-toque) + var(--am-e-md));
  padding: var(--am-e-sm) var(--am-e-md);
  color: inherit;
  text-decoration: none;
}

a.am-linha:hover,
button.am-linha:hover {
  background: var(--am-fundo);
}

/* Linha que abre algo na própria tela (o "Fale conosco" da Ajuda abre o chat): botão com a
   cara da linha de link. */
button.am-linha {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.am-linha__estado {
  display: flex;
  color: var(--am-borda-campo);
}

.am-linha--feita .am-linha__estado {
  color: var(--am-sucesso);
}

.am-linha--atual .am-linha__estado {
  color: var(--am-acento);
}

.am-linha__num {
  flex: 0 0 auto;
  min-width: 1.25em;
  font-family: var(--am-fonte-display);
  font-weight: var(--am-peso-semi);
  color: var(--am-texto-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.am-linha__texto {
  flex: 1 1 var(--am-texto-min);
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-weight: var(--am-peso-semi);
  line-height: var(--am-linha-titulo);
  overflow-wrap: anywhere;
}

.am-linha__meta {
  margin-top: var(--am-e-xs);
  font-size: var(--am-t-legenda);
  font-weight: var(--am-peso-normal);
  color: var(--am-texto-2);
}

.am-linha__fim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--am-e-sm);
  margin-left: auto;
}

.am-linha__fim .am-ic {
  color: var(--am-texto-2);
}

/* A seta solta no fim da linha é enfeite (a linha inteira é o link). No celular ela sai e
   devolve espaço ao título; volta no computador. Ícone DENTRO de botão não é afetado. */
.am-linha__fim > .am-ic {
  display: none;
}

/* Aula onde a pessoa parou: fundo Areia ("seção destaque", identidade §2.5) e marca Laranja. */
.am-linha--atual {
  background: var(--am-superficie-quente);
  box-shadow: inset var(--am-traco-ativo) 0 0 var(--am-acento);
}

a.am-linha--atual:hover {
  background: var(--am-superficie-quente);
}

/* Linha cujo texto não pode ser espremido (e-mail, frase de diagnóstico): o texto pede a
   largura de um cartão e a ação desce para baixo no celular (render de 2026-10-10: o e-mail
   quebrava no meio ao dividir a linha com "Criar acesso"). */
/* No celular o texto fica com a linha toda menos o ícone de estado; no computador volta ao
   normal (seção 12) e a ação fica à direita. */
.am-linha--texto-largo .am-linha__texto {
  flex-basis: calc(100% - var(--am-e-xl));
}

/* Linha de aviso dentro da lista (não é link): "As aulas entram aqui conforme são
   gravadas" (D110, 2026-10-09). Texto e ícone no tom secundário. */
.am-linha--aviso {
  color: var(--am-texto-2);
}

.am-linha--aviso .am-linha__estado > .am-ic {
  color: var(--am-texto-2);
}

/* ==== 10. seção numerada ================================================== */

.am-secao {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--am-e-md);
  padding: var(--am-e-xl) 0;
  border-top: var(--am-traco) solid var(--am-borda-suave);
}

.am-secao:first-of-type {
  border-top: 0;
  padding-top: 0;
}

/* Número Laranja sobre Grafite (5,5:1). Laranja direto no Branco Areia daria 2,9:1. */
.am-secao__numero {
  display: grid;
  place-items: center;
  width: var(--am-toque);
  height: var(--am-toque);
  border-radius: var(--am-raio);
  background: var(--am-superficie-escura);
  color: var(--am-acento);
  font-family: var(--am-fonte-display);
  font-weight: var(--am-peso-forte);
  font-size: var(--am-t-h3);
  line-height: 1;
}

.am-secao__titulo {
  margin: 0;
  font-weight: var(--am-peso-semi);
  font-size: var(--am-t-h2);
  line-height: var(--am-linha-titulo);
}

.am-secao__apoio {
  margin: var(--am-e-xs) 0 0;
  color: var(--am-texto-2);
}

/* No celular o corpo ocupa a largura inteira (o número não come 60px de cada campo). */
.am-secao__corpo {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--am-e-lg);
  min-width: 0;
}

/* Botão solto no corpo da seção (Novo módulo): do tamanho do texto, não da coluna. */
.am-secao__corpo > .am-botao {
  align-self: flex-start;
}

/* Bloco dentro da seção (um módulo de aulas, a nova versão). */
.am-bloco__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-e-sm);
  margin-bottom: var(--am-e-sm);
}

.am-bloco__titulo {
  margin: 0;
  font-weight: var(--am-peso-semi);
  font-size: var(--am-t-h3);
  line-height: var(--am-linha-titulo);
}

.am-bloco__titulo small {
  font-size: var(--am-t-corpo);
  font-weight: var(--am-peso-normal);
  color: var(--am-texto-2);
}

.am-bloco__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--am-e-xs);
}

/* Barra final de ações (Salvar). */
.am-acoes-fim {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--am-e-sm);
}

.am-acoes-fim .am-botao {
  flex: 1 1 auto;
}

/* ==== 11. formulário e área de soltar ===================================== */

.am-campos {
  display: grid;
  gap: var(--am-e-md);
}

.am-campo {
  display: flex;
  flex-direction: column;
  gap: var(--am-e-xs);
  min-width: 0;
}

.am-campo__rotulo {
  font-size: var(--am-t-rotulo);
  font-weight: var(--am-peso-semi);
}

.am-campo__dica {
  margin: 0;
  font-size: var(--am-t-legenda);
  color: var(--am-texto-2);
}

/* 16px no campo não é estética: abaixo disso o Safari do iPhone dá zoom ao focar. */
.am-entrada {
  width: 100%;
  min-height: var(--am-toque);
  padding: var(--am-e-sm) var(--am-e-md);
  border: var(--am-traco) solid var(--am-borda-campo);
  border-radius: var(--am-raio);
  background: var(--am-superficie);
  color: var(--am-texto);
  font-family: inherit;
  font-size: var(--am-t-corpo);
  line-height: var(--am-linha-corpo);
}

.am-entrada:focus-visible {
  border-color: var(--am-texto);
}

.am-entrada--mono {
  font-family: var(--am-fonte-mono);
}

textarea.am-entrada {
  min-height: calc(var(--am-toque) * 2);
  resize: vertical;
}

.am-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--am-e-sm);
  margin: 0;
  padding: 0;
  border: 0;
}

.am-opcao {
  flex: 1 1 var(--am-card-min);
  display: flex;
  align-items: flex-start;
  gap: var(--am-e-sm);
  min-height: var(--am-toque);
  padding: var(--am-e-sm) var(--am-e-md);
  border: var(--am-traco) solid var(--am-borda-campo);
  border-radius: var(--am-raio);
  background: var(--am-superficie);
  cursor: pointer;
}

.am-opcao input {
  flex: 0 0 auto;
  width: var(--am-icone-inline);
  height: var(--am-icone-inline);
  margin: 0;
  accent-color: var(--am-acento);
}

.am-opcao:has(input:checked) {
  border-color: var(--am-texto);
  box-shadow: inset 0 0 0 var(--am-traco) var(--am-texto);
}

.am-opcao__texto {
  display: flex;
  flex-direction: column;
  font-weight: var(--am-peso-semi);
  line-height: var(--am-linha-titulo);
}

.am-opcao__texto small {
  margin-top: var(--am-e-xs);
  font-size: var(--am-t-legenda);
  font-weight: var(--am-peso-normal);
  color: var(--am-texto-2);
}

/* Área de soltar arquivo. `data-arrastando` é o estado de quando o arquivo está por cima. */
.am-soltar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--am-e-sm);
  padding: var(--am-e-lg) var(--am-e-md);
  border: var(--am-traco-foco) dashed var(--am-borda-campo);
  border-radius: var(--am-raio-cartao);
  background: var(--am-fundo);
  color: var(--am-texto-2);
  text-align: center;
}

.am-soltar[data-arrastando] {
  border-color: var(--am-acento);
  background: var(--am-superficie-quente);
}

.am-soltar__titulo {
  margin: 0;
  color: var(--am-texto);
  font-weight: var(--am-peso-semi);
}

/* A miniatura de capa (.am-capa) saiu em 2026-10-09 (escolha 4a): o banco não tem imagem
   de capa, e a estante mostra o nome do produto sobre o Grafite. */

/* ==== 11b. entrada: entrar, recuperar senha, convite (2026-10-08) ======== */

/* Coluna estreita das telas de entrada: o formulário não estica a 55rem no computador. */
.am-principal--estreita {
  max-width: 28rem;
}

/* Formulário de uma coluna mesmo no computador (o .am-campos vira 2 colunas a partir de 768px). */
.am-campos.am-campos--uma {
  grid-template-columns: minmax(0, 1fr);
}

/* Senha com botão "Mostrar" dentro do campo. O botão tem alvo de toque cheio (44px). */
.am-senha {
  position: relative;
}

.am-senha .am-entrada {
  padding-right: 5.5rem;
}

.am-senha__mostrar {
  position: absolute;
  top: 0;
  right: 0;
  min-width: var(--am-toque);
  min-height: var(--am-toque);
  padding: 0 var(--am-e-md);
  border: 0;
  background: transparent;
  color: var(--am-texto);
  font: inherit;
  font-size: var(--am-t-rotulo);
  font-weight: var(--am-peso-semi);
  cursor: pointer;
}

/* Medidor de força da senha e lista do que falta (protótipo aprovado em 2026-10-16,
   `_docs/design/senha-forte/`). Preenchido por js/medidor-senha.js com a regra única de
   js/forca-senha.js. A cor nunca fala sozinha: o rótulo diz Fraca, Razoável ou Forte, e cada
   item tem ícone e texto. */
.am-forca {
  display: grid;
  gap: var(--am-e-xs);
}

.am-forca__topo {
  display: flex;
  align-items: center;
  gap: var(--am-e-sm);
  font-size: var(--am-t-legenda);
}

.am-forca__barra {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--am-e-xs);
}

.am-forca__barra span {
  height: var(--am-e-xs);
  border-radius: var(--am-raio-pilula);
  background: var(--am-borda-suave);
}

.am-forca[data-forca="fraca"] .am-forca__barra span:nth-child(1) {
  background: var(--am-erro);
}

.am-forca[data-forca="razoavel"] .am-forca__barra span:nth-child(-n + 2) {
  background: var(--am-acento);
}

.am-forca[data-forca="forte"] .am-forca__barra span {
  background: var(--am-sucesso);
}

.am-requisitos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--am-e-xs);
  font-size: var(--am-t-legenda);
  color: var(--am-texto-2);
}

.am-requisitos li {
  display: flex;
  align-items: flex-start;
  gap: var(--am-e-xs);
}

.am-requisitos li[data-estado="ok"],
.am-requisitos li[data-estado="erro"] {
  color: var(--am-texto);
}

.am-requisitos li[data-estado="ok"] .am-ic {
  color: var(--am-sucesso);
}

.am-requisitos li[data-estado="erro"] .am-ic {
  color: var(--am-erro);
}

/* Aceite dos termos no primeiro acesso. A .am-opcao nasceu para ficar lado a lado no painel
   (flex-basis de um card): numa coluna isso vira ALTURA, então aqui ela ocupa só o conteúdo.
   Os links ficam FORA da caixa, com os 44px de todo .am-link: dentro da frase eles mediam 20px
   no celular e o toque errado marcava a caixa em vez de abrir o termo (render de 2026-10-16). */
.am-aceite {
  flex: 0 0 auto;
  align-items: center;
}

.am-aceite .am-opcao__texto {
  font-weight: var(--am-peso-normal);
  line-height: var(--am-linha-corpo);
}

.am-aceite-links {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--am-e-lg);
  margin-top: calc(-1 * var(--am-e-sm));
}

/* Aviso dentro do formulário: erro de credencial ou confirmação de envio. A cor fica na borda e
   no ícone; o texto segue em --am-texto pelo contraste (ver --am-erro no tokens.css). */
.am-aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--am-e-sm);
  margin: 0;
  padding: var(--am-e-sm) var(--am-e-md);
  border-left: var(--am-traco-kicker) solid var(--am-borda);
  border-radius: var(--am-raio);
  background: var(--am-superficie);
  color: var(--am-texto);
  font-size: var(--am-t-rotulo);
}

.am-aviso > .am-ic {
  flex: 0 0 auto;
  margin-top: 0.125rem;
}

.am-aviso--erro {
  border-left-color: var(--am-erro);
}

.am-aviso--erro > .am-ic {
  color: var(--am-erro);
}

.am-aviso--ok {
  border-left-color: var(--am-sucesso);
}

.am-aviso--ok > .am-ic {
  color: var(--am-sucesso);
}

/* Passos do primeiro acesso (convite): feito, agora, depois. */
.am-passos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--am-e-xs) var(--am-e-md);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--am-t-rotulo);
  color: var(--am-texto-2);
}

.am-passos__item {
  display: inline-flex;
  align-items: center;
  gap: var(--am-e-xs);
}

.am-passos__item--feito > .am-ic {
  color: var(--am-sucesso);
}

.am-passos__item--atual {
  color: var(--am-texto);
  font-weight: var(--am-peso-semi);
}

.am-passos__item--atual > .am-ic {
  color: var(--am-acento);
}

/* Rodapé curto das telas de entrada (termos, privacidade). */
.am-rodape-entrada {
  display: flex;
  flex-wrap: wrap;
  gap: var(--am-e-xs) var(--am-e-md);
  margin: var(--am-e-xl) 0 0;
  font-size: var(--am-t-legenda);
  color: var(--am-texto-2);
}

/* ==== 11c. aula e instalar (2026-10-08) =================================== */

/* Página da aula: coluna única no celular; no computador, aula à esquerda e trilha à
   direita (escolha 1a de 2026-10-08, "vídeo no topo, aulas embaixo"). */
.am-aula {
  display: grid;
  gap: var(--am-e-xl);
}

.am-aula__principal {
  display: flex;
  flex-direction: column;
  gap: var(--am-e-md);
  min-width: 0;
}

/* Seção dentro da aula (Materiais) respira dos botões de navegação logo acima. */
.am-aula__principal > section {
  margin-top: var(--am-e-md);
}

/* Moldura do vídeo. No app, o iframe do Cloudflare Stream ocupa a moldura inteira. */
.am-player {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--am-raio-cartao);
  background: var(--am-superficie-escura);
  color: var(--am-texto-inverso);
  overflow: hidden;
}

.am-player > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.am-player__tocar {
  width: calc(var(--am-icone) * 2.5);
  height: calc(var(--am-icone) * 2.5);
  stroke-width: 1.5;
}

/* Aula sem vídeo (Cloudflare Stream desligado ou aula ainda sem gravação): a frase
   ocupa a moldura no lugar do botão de tocar. Peça nova da Fase 2 (2026-10-08). */
.am-player__aviso {
  margin: 0;
  padding: var(--am-e-lg);
  max-width: var(--am-linha-max);
  text-align: center;
  color: var(--am-texto-inverso);
}

/* Anterior e próxima: dividem a linha no celular; a próxima é o botão principal. */
.am-navegacao-aula {
  display: flex;
  gap: var(--am-e-sm);
}

.am-navegacao-aula .am-botao {
  flex: 1 1 0;
}

/* Bloco "Instalar" do produto (decisão 2a de 2026-10-08: comando, nunca .zip). */
.am-comando {
  display: flex;
  align-items: stretch;
  border: var(--am-traco) solid var(--am-borda-campo);
  border-radius: var(--am-raio);
  background: var(--am-superficie-escura);
  overflow: hidden;
}

.am-comando__texto {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: var(--am-e-sm) var(--am-e-md);
  overflow-x: auto;
  color: var(--am-texto-inverso);
  font-family: var(--am-fonte-mono);
  font-size: var(--am-t-mono);
  line-height: var(--am-linha-mono);
  white-space: nowrap;
  align-self: center;
}

.am-comando__copiar {
  flex: 0 0 auto;
  min-width: var(--am-toque);
  min-height: var(--am-toque);
  padding: 0 var(--am-e-md);
  border: 0;
  border-left: var(--am-traco) solid color-mix(in srgb, var(--am-branco-areia) 20%, transparent);
  background: transparent;
  color: var(--am-texto-inverso);
  font: inherit;
  font-size: var(--am-t-rotulo);
  font-weight: var(--am-peso-semi);
  cursor: pointer;
}

.am-comando__copiar:focus-visible {
  outline-color: var(--am-foco-escuro);
}

/* ==== 11d. ajuda: perguntas que abrem ao toque (2026-10-08) ============== */

.am-perguntas {
  display: flex;
  flex-direction: column;
  gap: var(--am-e-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.am-pergunta {
  border: var(--am-traco) solid var(--am-borda);
  border-radius: var(--am-raio-cartao);
  background: var(--am-superficie);
}

.am-pergunta > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-e-sm);
  min-height: var(--am-toque);
  padding: var(--am-e-sm) var(--am-e-md);
  font-weight: var(--am-peso-semi);
  cursor: pointer;
  list-style: none;
}

.am-pergunta > summary::-webkit-details-marker {
  display: none;
}

/* Seta desenhada pela borda: gira quando a pergunta abre. Cor do texto, sem cor literal. */
.am-pergunta > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: var(--am-e-xs);
  border-right: var(--am-traco-foco) solid currentColor;
  border-bottom: var(--am-traco-foco) solid currentColor;
  transform: rotate(45deg);
}

.am-pergunta[open] > summary::after {
  transform: rotate(-135deg);
}

.am-pergunta__resposta {
  padding: 0 var(--am-e-md) var(--am-e-md);
  color: var(--am-texto-2);
}

.am-pergunta__resposta > p {
  margin: 0;
  max-width: var(--am-linha-max);
}

/* ==== 11e. comentários da aula (2026-10-09) =============================== */

/* Seção aberta embaixo da aula (escolha 1a). Sem curtidas (3a). O comentário nasce
   pendente e só a própria pessoa o vê até o Wellington aprovar (2a, painel da Fase 4). */
.am-comentarios {
  display: flex;
  flex-direction: column;
  gap: var(--am-e-md);
  margin: var(--am-e-xl) 0 0;
  padding: 0;
  list-style: none;
}

.am-comentario {
  display: flex;
  flex-direction: column;
  gap: var(--am-e-xs);
}

.am-comentario__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--am-e-xs) var(--am-e-sm);
  font-size: var(--am-t-rotulo);
}

.am-comentario__autor {
  font-weight: var(--am-peso-semi);
}

.am-comentario__quando {
  color: var(--am-texto-2);
}

.am-comentario__texto {
  margin: 0;
  max-width: var(--am-linha-max);
  overflow-wrap: anywhere;
  /* A quebra de linha que a pessoa digitou aparece (2026-10-09, código da seção). */
  white-space: pre-line;
}

/* Respostas: um nível só, recuadas com o traço à esquerda. */
.am-comentario__respostas {
  display: flex;
  flex-direction: column;
  gap: var(--am-e-md);
  margin: var(--am-e-xs) 0 0;
  padding: 0 0 0 var(--am-e-md);
  border-left: var(--am-traco-ativo) solid var(--am-borda-suave);
  list-style: none;
}

/* "Responder" fica alinhado à esquerda, sem o recuo do botão de texto. */
.am-comentario .am-botao--texto {
  align-self: flex-start;
  margin-left: calc(var(--am-e-sm) * -1);
}

/* ==== 11f. painel: autoria e comentários (2026-10-09) ===================== */

/* Contador de pendentes (Comentários). Grafite sobre Laranja: 5,5:1. */
.am-contador {
  display: inline-grid;
  place-items: center;
  min-width: var(--am-e-lg);
  height: var(--am-e-lg);
  padding: 0 var(--am-e-xs);
  border-radius: var(--am-raio-pilula);
  background: var(--am-acento);
  color: var(--am-grafite);
  font-size: var(--am-t-selo);
  font-weight: var(--am-peso-forte);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.am-lateral__item .am-contador {
  margin-left: auto;
}

/* "Sair" do painel: botao com a cara de item do menu. */
.am-lateral__item[hidden] {
  display: none;
}

button.am-lateral__item {
  width: 100%;
  background: none;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  font: inherit;
  font-weight: var(--am-peso-medio);
  text-align: left;
  cursor: pointer;
}

/* Nas abas do celular o contador fica no canto do ícone, sem alargar a aba. */
.am-abas a {
  position: relative;
}

.am-abas .am-contador {
  position: absolute;
  top: var(--am-e-xs);
  left: calc(50% + var(--am-e-xs));
}

/* Aula aberta para edição DENTRO da lista do produto (escolha 2b): a linha fica e o
   formulário abre logo abaixo. A marca é a mesma da aula atual na trilha do aluno. */
.am-linha--aberta {
  background: var(--am-superficie-quente);
  box-shadow: inset var(--am-traco-ativo) 0 0 var(--am-acento);
}

.am-edicao {
  display: flex;
  flex-direction: column;
  gap: var(--am-e-lg);
  padding: var(--am-e-md) var(--am-e-md) var(--am-e-lg);
  background: var(--am-fundo);
  border-top: var(--am-traco) solid var(--am-borda-suave);
}

/* Envio do vídeo: barra e o botão de cancelar na mesma linha no computador. No celular a
   barra ocupa a linha inteira e o Cancelar desce (render de 2026-10-09: dividindo a linha,
   o nome do arquivo quebrava no meio). */
.am-envio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--am-e-sm);
}

.am-envio > .am-progresso {
  flex: 1 1 var(--am-card-min);
}

/* Botão solto dentro de um campo (+ PDF): do tamanho do texto, não da coluna. */
.am-campo > .am-botao {
  align-self: flex-start;
}

/* Sublista simples dentro de um bloco (PDFs da aula, produtos de uma conta): ícone, texto
   e uma ação por linha, sem cartão em volta. */
.am-sublista {
  display: flex;
  flex-direction: column;
  gap: var(--am-e-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.am-sublista__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--am-e-sm);
}

.am-sublista__texto {
  flex: 1 1 var(--am-texto-min);
  min-width: 0;
}

/* Complemento da linha (datas de um acesso) embaixo do nome, em letra miúda. */
.am-sublista__texto small {
  display: block;
  font-size: var(--am-t-legenda);
  color: var(--am-texto-2);
}

/* Filtro de abas no alto de uma lista (Pendentes, Aprovados, Recusados). O traço Laranja
   é marca, não texto: o texto ativo fica Grafite. */
.am-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--am-e-xs);
  margin: 0 0 var(--am-e-lg);
  padding: 0;
  list-style: none;
  border-bottom: var(--am-traco) solid var(--am-borda-suave);
}

.am-filtro a {
  display: inline-flex;
  align-items: center;
  gap: var(--am-e-sm);
  min-height: var(--am-toque);
  margin-bottom: calc(var(--am-traco) * -1);
  padding: 0 var(--am-e-sm);
  border-bottom: var(--am-traco-ativo) solid transparent;
  color: var(--am-texto-2);
  font-size: var(--am-t-rotulo);
  font-weight: var(--am-peso-medio);
  text-decoration: none;
}

.am-filtro a:hover {
  color: var(--am-texto);
}

.am-filtro a[aria-current="page"] {
  border-bottom-color: var(--am-acento);
  color: var(--am-texto);
  font-weight: var(--am-peso-semi);
}

/* Item em bloco de uma lista, quando a linha não basta: um comentário na fila (escolha 3a),
   uma conta encontrada na busca (2c). Título, contexto em letra miúda, conteúdo e ações. */
.am-item {
  display: flex;
  flex-direction: column;
  gap: var(--am-e-sm);
  padding: var(--am-e-md);
}

.am-item__titulo {
  margin: 0;
  font-weight: var(--am-peso-semi);
  line-height: var(--am-linha-titulo);
  overflow-wrap: anywhere;
}

.am-item__meta {
  margin: 0;
  font-size: var(--am-t-legenda);
  color: var(--am-texto-2);
  overflow-wrap: anywhere;
}

.am-item__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--am-e-sm);
}

/* Estado que pede atenção (Saúde: e-mail desligado). Ícone Terracota; o texto fica Grafite,
   porque Terracota em texto pequeno reprova (4,2:1, tabela corrigida em 2026-10-07). */
.am-estado--alerta .am-ic {
  color: var(--am-erro);
}

/* Busca com o botão ao lado (Contas). No celular estreito o botão desce. */
.am-busca {
  display: flex;
  flex-wrap: wrap;
  gap: var(--am-e-sm);
}

.am-busca > .am-entrada {
  flex: 1 1 var(--am-texto-min);
  width: auto;
  /* Sem isto o campo não encolhe abaixo da largura própria do navegador e empurra o botão
     para baixo (render de 2026-10-10, celular). */
  min-width: 0;
}

/* O comentário a que este responde (resposta é sempre a um comentário de cima). */
.am-citacao {
  margin: 0;
  padding: 0 0 0 var(--am-e-md);
  border-left: var(--am-traco-ativo) solid var(--am-borda-suave);
  color: var(--am-texto-2);
  font-size: var(--am-t-rotulo);
  overflow-wrap: anywhere;
}

/* ==== 11g. o que mudou: notas da versão (2026-10-17) ====================== */

/* As notas são o texto do painel, sem formatação: a linha que começa com "- " vira item
   de lista e o resto vira parágrafo (escolha 2a de 2026-10-17). */
.am-notas {
  display: flex;
  flex-direction: column;
  gap: var(--am-e-sm);
  max-width: var(--am-linha-max);
  overflow-wrap: anywhere;
}

.am-notas > p {
  margin: 0;
}

/* disc explícito: dentro da lista de versões anteriores o navegador trocaria pelo círculo
   vazado de lista aninhada (render de 2026-10-17). */
.am-notas > ul {
  margin: 0;
  padding-left: var(--am-e-lg);
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: var(--am-e-xs);
}

/* Versão anterior: o número em mono e a data, dentro da linha que abre. */
.am-pergunta__versao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--am-e-xs) var(--am-e-sm);
  min-width: 0;
}

/* ==== 11h. documentos: Termos de uso e Política de privacidade (2026-10-18) == */

/* Texto longo na largura de leitura: seções com título, parágrafos e listas. */
.am-documento {
  display: flex;
  flex-direction: column;
  gap: var(--am-e-md);
  max-width: var(--am-linha-max);
  overflow-wrap: anywhere;
}

.am-documento > h2 {
  margin: var(--am-e-lg) 0 0;
  font-family: var(--am-fonte-display);
  font-size: var(--am-t-h3);
  font-weight: var(--am-peso-forte);
  line-height: var(--am-linha-titulo);
}

.am-documento p {
  margin: 0;
}

.am-documento ul {
  margin: 0;
  padding-left: var(--am-e-lg);
  display: flex;
  flex-direction: column;
  gap: var(--am-e-xs);
  list-style: disc;
}

.am-documento__versao {
  margin: var(--am-e-xs) 0 0;
  color: var(--am-texto-2);
  font-size: var(--am-t-legenda);
}

/* ==== 12. computador (>= 768px) =========================================== */

@media (min-width: 768px) {
  /* Barra lateral fixa à esquerda. O conteúdo desloca por PADDING, nunca por margin:
     margin-left explícito mata o `margin: 0 auto` e a tela gruda à esquerda (molde DNC). */
  .am-app--com-lateral {
    padding-left: var(--am-lateral);
  }

  .am-lateral {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--am-lateral);
    z-index: 20;
    padding: var(--am-e-lg) 0;
    gap: var(--am-e-xl);
  }

  .am-lateral .am-marca {
    padding: 0 var(--am-e-md);
  }

  .am-abas,
  .am-topo--celular {
    display: none;
  }

  .am-cabecalho.am-cabecalho--computador {
    display: flex;
  }

  .am-topo {
    padding: 0 var(--am-e-lg);
  }

  .am-topo__sub {
    display: inline;
  }

  .am-versao-bloco > .am-botao {
    width: auto;
  }

  .am-linha__fim > .am-ic {
    display: block;
  }

  .am-principal {
    padding: var(--am-e-2xl) var(--am-e-2xl) var(--am-e-3xl);
  }

  .am-titulo {
    font-size: var(--am-t-h1-largo);
  }

  .am-nome-produto,
  .am-bloco__titulo {
    font-size: var(--am-t-h3-largo);
  }

  .am-secao__titulo {
    font-size: var(--am-t-h2-largo);
  }

  .am-cartao {
    padding: var(--am-e-lg);
  }

  .am-linha {
    gap: var(--am-e-sm) var(--am-e-md);
    padding: var(--am-e-sm) var(--am-e-lg);
  }

  .am-edicao {
    padding: var(--am-e-lg);
  }

  .am-linha--texto-largo .am-linha__texto {
    flex-basis: var(--am-texto-min);
  }

  .am-item {
    padding: var(--am-e-md) var(--am-e-lg);
  }

  .am-filtro a {
    padding: 0 var(--am-e-md);
  }

  .am-secao {
    gap: var(--am-e-md) var(--am-e-lg);
  }

  .am-secao__corpo {
    grid-column: 2;
  }

  .am-campos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .am-campo--largo {
    grid-column: 1 / -1;
  }

  .am-acoes-fim .am-botao {
    flex: 0 0 auto;
  }

  .am-aula {
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    align-items: start;
  }

  .am-aula__lateral {
    position: sticky;
    top: calc(var(--am-topo) + var(--am-e-lg));
  }

  .am-navegacao-aula {
    justify-content: space-between;
  }

  .am-navegacao-aula .am-botao {
    flex: 0 0 auto;
  }
}