/* Componentes do portal novo. Cores só por variáveis de tema.css. */

/* Botões (tela 0, como o protótipo e grupovibe.tech): pílula, sans 500, nunca a mono nem caixa alta.
   .botao-primario é a pílula cheia em --acento com texto --neutro-900 (par conferido em tema.test.ts,
   PARES_DE_CONTRASTE, também no hover em --acento-300); .botao-secundario é a pílula com contorno.
   Vale igual para <button>, <a> e o <summary> de um <details> que funciona como botão ("Comentar",
   "Sugerir correção", "Editar"). min-height: 44px (tarefa 6, alvo de toque WCAG 2.5.5/2.5.8) em
   QUALQUER tamanho de tela — é o botão principal/secundário do portal todo (inclui "Sair" do menu da
   conta, .menu-conta-sair, que herda daqui: sem isto, a regra de .botao (que carrega depois, em
   componentes.css) vencia a de portal.css por ordem de arquivo, mesma especificidade). */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 44px;
  padding: 0 var(--esp-5);
  border: 1px solid transparent;
  border-radius: var(--raio-pilula);
  cursor: pointer;
  font: 500 0.9rem / 1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  list-style: none;
}
.botao::-webkit-details-marker {
  display: none;
}
.botao:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
.botao-primario {
  border-color: var(--acento);
  background: var(--acento);
  color: var(--neutro-900);
}
.botao-primario:hover {
  border-color: var(--acento-300);
  background: var(--acento-300);
}
.botao-secundario {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink);
}
.botao-secundario:hover {
  border-color: var(--acento);
  color: var(--acento);
}
/* .botao-pequeno fica com 36px no desktop (mouse/trackpad, sem exigência de 44px) e some para 44px só
   no celular (@media max-width: 760px, mais abaixo) — ele marca ações densas e secundárias ("Sugerir
   correção", "Ver lista", "Desmarcar") que ficam lado a lado ou empilhadas de perto; 44px sempre
   deixaria essas áreas mais apertadas que o protótipo no desktop, sem ganho (o WCAG 2.5.5/2.5.8 só
   exige o alvo maior quando o ponteiro é grosso, isto é, no toque). */
.botao-pequeno {
  min-height: 36px;
  padding: 0 var(--esp-4);
  font-size: 0.85rem;
}

/* Corpo de 16px/1.7 (tarefa 6): line-height do body geral é 1.55 (portal.css); a prosa das seções
   ganha um pouco mais de respiro para leitura longa. */
.prosa {
  max-width: 900px;
  /* Tela 2 (protótipo): o corpo do artigo em --neutro-200, mais escuro que o cinza de apoio. */
  color: var(--neutro-200);
  line-height: 1.7;
}
/* Marcadores das listas na cor do tipo/empresa da página (tela 2, protótipo). --accent-forte: a variante
   que passa contraste, como todo "color:" de marca. As listas do quiz (✔) e de tarefas têm os seus. */
.prosa ul > li:not(.correta):not(.tarefa)::marker {
  color: var(--accent-forte);
}
.prosa p,
.prosa li {
  font-size: 1rem;
}
.prosa strong,
.prosa h3,
.prosa h4 {
  color: var(--ink);
  font-weight: 500;
}
.prosa h3 {
  margin: 34px 0 10px;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}
.prosa h4 {
  margin: 22px 0 6px;
  /* --accent-forte, não --accent (tarefa 8): etiqueta mono pequena, precisa da variante >= 4,5:1. */
  color: var(--accent-forte);
  font: 500 0.72rem / 1.4 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.prosa a {
  /* --accent-forte, não --accent (tarefa 8): achado no navegador em --dnx (razão 4,42, abaixo de 4,5). */
  color: var(--accent-forte);
}
/* Tabela da prosa: só a largura do conteúdo, até a da coluna (max-content + max-width), sem a faixa
   vazia à direita das tabelas estreitas; a larga quebra o texto dentro da coluna e, se nem assim
   couber (celular), rola na horizontal. A sombra na borda direita avisa que há mais conteúdo: a
   máscara em --surface acompanha o conteúdo (local) e só a descobre quando ainda dá para rolar. */
.prosa table {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 22px 0;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9rem;
  background:
    linear-gradient(to left, var(--surface) 40%, transparent) right center / var(--esp-9) 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 18%, transparent), transparent) right center / var(--esp-3) 100% no-repeat scroll,
    var(--surface);
}
.prosa th,
.prosa td {
  padding: 12px 14px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.prosa th {
  color: var(--ink);
  font: 600 0.8125rem / 1.4 var(--sans);
  background: var(--bg);
}
.prosa blockquote {
  margin: 18px 0;
  padding: 16px 22px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
}
.prosa pre {
  padding: 16px;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  font: 400 0.8rem / 1.5 var(--mono);
}
.prosa .objection-list {
  margin-top: 18px;
}
.prosa .objection-list .resposta {
  padding: 0 56px 8px 22px;
}
.prosa .question-grid {
  grid-template-columns: 1fr;
  margin-top: 18px;
}
.prosa .question span {
  display: block;
  min-width: 0;
}
.prosa .question .enunciado {
  display: block;
  margin-bottom: 8px;
}
.prosa .question ul {
  margin: 0;
  padding-left: 20px;
}
.prosa li.correta {
  color: var(--ink);
  font-weight: 500;
}
.prosa li.correta::marker {
  content: "✔  ";
  color: var(--vibe-forte);
}
.prosa li.tarefa {
  list-style: none;
  margin-left: -20px;
}
.prosa li.tarefa::before {
  content: "☐ ";
  color: var(--muted-2);
}
.prosa li.tarefa.feita::before {
  content: "☑ ";
  color: var(--vibe-forte);
}
.section-head h2 {
  font-size: var(--fs-h2-lg);
}

.restrito {
  position: relative;
}
/* Seção "Interno" / "Avaliador" inteira (tela 2): o mesmo tratamento leve do bloco restrito
   (.restrito.bloco, abaixo) — só borda, de 2px com 4px à esquerda, e respiro menor — em vez do
   bloco pesado de largura toda. A etiqueta "Interno · só liderança e curador" continua no topo. */
section.restrito.content-section {
  margin: 24px 0;
  padding: 24px 28px;
  border-width: 2px 2px 2px 4px;
  border-style: solid;
  border-radius: var(--raio-2);
}
/* Só borda, sem tinta de fundo (tela 2, ajuste do Emanuel): a faixa de 4px à esquerda, a borda fina e
   a etiqueta já marcam o conteúdo restrito. Vale para interno e avaliador, seção e bloco — o texto fica
   sobre o fundo normal da página/card, a mesma legibilidade do resto do artigo. */
.restrito.interno {
  border-color: var(--restrito-interno);
  background: transparent;
}
.restrito.avaliador {
  border-color: var(--restrito-avaliador);
  background: transparent;
}
.restrito.bloco,
blockquote.restrito {
  margin: 22px 0;
  padding: 14px 24px;
  border-width: 2px 2px 2px 4px;
  border-style: solid;
}
.etiqueta {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 9px;
  color: var(--sobre-escuro);
  font: 500 0.62rem / 1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.interno > .etiqueta {
  background: var(--restrito-interno);
}
.avaliador > .etiqueta {
  background: var(--restrito-avaliador);
}
.etiqueta-atual {
  display: inline-block;
  align-self: flex-start;
  margin-top: 18px;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font: 400 0.62rem / 1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--surface);
}

/* Situação pessoal do quiz (card do catálogo/início) e "Em preparação" (rascunho, só liderança): sempre
   texto, nunca só cor (os tokens -forte já têm 4,5:1 sobre --surface, conferido em tema.test.ts). */
.card-situacao {
  margin: 8px 0 0;
  font: 500 0.78rem / 1.3 var(--sans);
}
.card-situacao--aprovado,
.card-situacao--concluido {
  color: var(--ok-forte);
}
.card-situacao--refazer {
  color: var(--alerta-forte);
}
.card-situacao--nao-iniciado,
.card-situacao--sem-quiz,
.card-situacao--preparacao {
  color: var(--muted);
}

/* Botão para o modo apresentação (/apresentacoes/<id>): na capa (hero-copy) e no fim da página do playbook. */
.botao-slides {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 13px 18px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--raio-pilula);
  font: 500 0.875rem / 1 var(--sans);
}
.botao-slides:hover {
  border-color: var(--accent);
  color: var(--accent-forte);
}
.hero-copy .botao-slides {
  margin-top: 28px;
}
.botao-slides-fim {
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
}

/* "Apresentação original" (offering migrado de um playbook atual): logo abaixo do título do hero, abre o
   modo apresentação (/apresentacoes/<id>) em nova aba. Link de ação, em sans (nunca a mono). */
.link-apresentacao {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  width: fit-content;
  min-height: 44px;
  color: var(--acento);
  font: 500 var(--fs-corpo) / 1.3 var(--sans);
  text-decoration: none;
}
.link-apresentacao svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.link-apresentacao:hover span {
  text-decoration: underline;
}

/* "Ouvir" (áudio do pacote): <details> sem JavaScript. O <summary> é um .botao secundário (44px de
   alvo, foco visível do .botao); aberto, mostra o player nativo do navegador logo abaixo. */
.ouvir {
  margin-top: var(--esp-4);
}
.ouvir-botao {
  list-style: none;
  width: fit-content;
}
.ouvir-botao svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.ouvir[open] .ouvir-botao {
  border-color: var(--acento);
  color: var(--acento);
}
.ouvir-player {
  margin-top: var(--esp-3);
}
.ouvir-player audio {
  display: block;
  width: 100%;
  max-width: 480px;
  min-height: 44px;
}

/* Capa gerada: pacotes sem imagem. Componente, não imagem: não é cortada nem esmaecida. Tons -neon
   (nunca a cor "de texto" -forte): capa é decorativa sobre fundo escuro, não é texto corrido. */
.card-image--gerada {
  display: flex;
}
.capa-gerada {
  flex: 1;
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: center;
  gap: 14px;
  padding: 28px 18px;
  color: var(--sobre-escuro);
  min-height: 100%;
  background:
    radial-gradient(circle at 72% 28%, color-mix(in srgb, var(--capa-cor) 85%, transparent), transparent 62%),
    linear-gradient(color-mix(in srgb, var(--sobre-escuro) 6%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, color-mix(in srgb, var(--sobre-escuro) 6%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--ink);
}
.capa-icone-wrap {
  display: contents;
}
.capa-gerada .capa-fabricantes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.capa-gerada .capa-fabricantes span {
  padding: 6px 10px;
  background: color-mix(in srgb, var(--sobre-escuro) 94%, transparent);
  color: var(--ink);
  font: 700 0.78rem / 1 var(--sans);
  border-radius: 4px;
}
.capa-gerada .capa-fabricantes .logo {
  padding: 5px 8px;
}
.capa-gerada .capa-fabricantes img {
  height: 20px;
  width: auto;
}
.capa-gerada .capa-icone {
  width: clamp(64px, 52cqw, 220px);
  height: auto;
  color: var(--capa-luz);
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--capa-luz) 75%, transparent));
}
.capa-gerada .capa-texto {
  display: grid;
  gap: 8px;
  text-align: center;
}
.capa-gerada .capa-fase {
  color: var(--capa-luz);
  font: 400 0.7rem / 1.2 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.capa-gerada .capa-titulo {
  color: var(--sobre-escuro);
  font: 500 clamp(1.05rem, 11cqw, 2.1rem) / 1.08 var(--sans);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* Capa gerada dentro do hero (tarefa 6, tela 2): célula própria da grade auto-fit de .playbook-hero
   (sem posicionamento absoluto — era a causa da capa sobrepor o título a 390px, pendência do ajuste
   4), com os cantos do card grande. */
.playbook-hero .capa-gerada {
  min-height: 320px;
  border-radius: var(--raio-3);
}

/* Capa gerada dentro do card do catálogo/início: a capa vira uma faixa 16:9 (curta e larga) em vez da
   coluna alta do hero acima, então o layout centralizado dá lugar a selos em cima e ícone+texto lado a
   lado — o mesmo arranjo valia só no celular antes de o card ganhar capa 16:9 também no desktop. */
.card-image--gerada .capa-gerada {
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "fab fab" "ico txt";
  justify-items: start;
  gap: 8px 14px;
  padding: 14px 16px;
}
.card-image--gerada .capa-fabricantes {
  grid-area: fab;
  justify-content: flex-start;
}
.card-image--gerada .capa-icone {
  grid-area: ico;
  width: clamp(40px, 20cqw, 84px);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--capa-luz) 70%, transparent));
}
.card-image--gerada .capa-texto {
  grid-area: txt;
  gap: 2px;
  text-align: left;
}
.card-image--gerada .capa-titulo {
  font-size: clamp(1rem, 4.6cqw, 1.4rem);
}

/* .filtros é a base compartilhada com o formulário de /revisao (revisao.tsx): não mexer no visual
   dele aqui. O cartão do catálogo (barra de filtros em cartão, ajuste 3 da tarefa 5) entra só como
   .filtros-catalogo, .filtros-linha e as classes -busca/-contagem/-limpar/-enviar, que só existem na
   página do catálogo. */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  margin: var(--esp-6) 0 0;
}
.filtros label {
  display: grid;
  gap: 6px;
  color: var(--muted-2);
  font: 400 0.66rem / 1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.filtros select,
.filtros input {
  /* Alvo de toque de 44px (tarefa da tela 4; era 40px) — mesmo valor em qualquer largura, não só no
     celular: o filtro do catálogo é clicado com o dedo também no desktop touch. */
  min-height: 44px;
  max-width: 100%;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: 400 0.9rem var(--sans);
}
.filtros a {
  /* Alvo de toque de 44px (tarefa 8; era 40px). Esta regra, não a de .filtros-limpar, é quem vale:
     ".filtros a" (classe+elemento) tem mais especificidade que ".filtros-limpar" sozinho — a versão
     de 44px marcada lá nunca chegava a valer. O botão "Filtrar" ao lado continua em 40px. */
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

/* Cartão da barra de filtros do catálogo: duas linhas (busca + segmentado; selects + contagem +
   "Limpar filtros" + "Filtrar"). Só entra com a classe extra .filtros-catalogo, então /revisao
   (mesma classe .filtros base) não muda. */
.filtros-catalogo {
  flex-direction: column;
  align-items: stretch;
  padding: var(--esp-4);
  border-radius: var(--raio-3);
  background: var(--surface);
  box-shadow: var(--sombra-1);
}
.filtros-linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  align-items: center;
}
.filtros-busca {
  flex: 1 1 240px;
  min-width: 200px;
}
/* Ícone de lupa (decorativo, aria-hidden — o rótulo acessível "Busca" está em .rotulo-oculto no label):
   posicionado sobre o campo, com o texto do campo deslocado pra não ficar embaixo dele. Cor por token
   (--muted), sem nenhuma cor fixa. */
.filtros-busca-campo {
  position: relative;
  display: flex;
}
.filtros-busca-campo svg {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}
.filtros-busca input {
  width: 100%;
  padding-left: 34px;
  box-sizing: border-box;
}
/* Dentro do cartão (fundo --surface), select/busca ficam no fundo --bg para se destacar do cartão —
   mesmo par ink/bg já conferido em tema.test.ts, só troca o fundo do campo. */
.filtros-catalogo input,
.filtros-catalogo select {
  background: var(--bg);
}
.filtros-contagem {
  margin: 0 0 0 auto;
  padding-right: var(--esp-2);
  color: var(--muted);
  font: 400 0.8rem var(--sans);
  white-space: nowrap;
}
.filtros-limpar {
  color: var(--acento);
  font: 500 0.8rem var(--sans);
  text-decoration: none;
}
.filtros-limpar:hover {
  text-decoration: underline;
}
/* O JavaScript (catalogo.js) é quem acrescenta .js-ativo ao enviar o formulário sozinho ao mudar um
   campo — sem JavaScript, .filtros-enviar nunca ganha essa classe e o botão "Filtrar" continua
   visível e funcionando (requisito: filtro automático só melhora, nunca é a única forma de filtrar). */
.filtros-catalogo.js-ativo .filtros-enviar {
  display: none;
}

/* Segmentado de campo real (rádios, não botões): usado no "Tipo" do catálogo, que precisa continuar
   sendo um campo de formulário comum (funciona sem JavaScript, como os selects ao lado). Por padrão o <input type="radio"> fica visível e comum (círculo
   nativo, accent-color); só quando o navegador suporta :has() (abaixo) é que ele passa a cobrir o
   <label> inteiro e some visualmente — sem :has() não haveria nenhuma pista de qual opção está
   marcada, então o círculo nativo é a pista. */
.segmentado-campo {
  display: inline-flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--raio-pilula);
  overflow: hidden;
}
.segmentado-campo label {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  /* Alvo de toque de 44px (tarefa da tela 4; era 40px), igual aos selects ao lado. */
  min-height: 44px;
  padding: 0 var(--esp-4);
  border-left: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font: 500 0.85rem / 1 var(--sans);
  white-space: nowrap;
}
.segmentado-campo label:first-child {
  border-left: 0;
}
.segmentado-campo input[type="radio"] {
  accent-color: var(--acento);
}
.segmentado-campo label:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
/* Sem suporte a :has(): o círculo nativo do rádio (accent-color acima) já mostra qual opção está
   marcada, então só falta um contorno de foco de 2px nele (o resto do arquivo usa :focus-visible do
   próprio controle do mesmo jeito). */
@supports not selector(:has(*)) {
  .segmentado-campo input[type="radio"]:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
  }
}
/* Com suporte a :has(): o <input type="radio"> passa a cobrir o <label> inteiro (clicável, focável,
   mesmo alvo de toque) e some visualmente (opacity: 0) — :checked/:focus-visible do rádio escondido
   estilizam o rótulo visível, com o par de contraste sobre-escuro/acento já conferido em
   tema.test.ts. */
@supports selector(:has(*)) {
  .segmentado-campo label {
    position: relative;
  }
  .segmentado-campo input[type="radio"] {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .segmentado-campo label:has(input:checked) {
    background: var(--acento);
    border-color: var(--acento);
    color: var(--sobre-escuro);
    font-weight: 600;
  }
  .segmentado-campo label:has(input:focus-visible) {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
    z-index: 1;
  }
}

/* Quiz interativo (tela 3, protótipo Quiz.dc.html): início, uma questão por vez, retorno da questão
   confirmada, resultado e histórico. Funciona inteiro sem JavaScript: a questão é um <form> comum. */
.quiz-shell {
  width: min(var(--content), calc(100% - var(--margem-conteudo) * 2));
  margin: 0 auto;
  padding: 56px 0 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.quiz-titulo {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.quiz-shell .prosa {
  margin: 0;
}
.quiz-info {
  margin: -8px 0 0;
  color: var(--muted-2);
  font: 400 0.72rem / 1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.quiz-aviso {
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--restrito-avaliador);
  background: var(--restrito-avaliador-fundo);
  color: var(--ink);
}
.quiz-bloqueio {
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
}
.quiz-shell .botao {
  min-height: 44px;
}

/* Cabeçalho do quiz: "Sair do quiz", etiqueta com o pacote, contador de acertos e a barra de segmentos. */
.quiz-topo {
  display: grid;
  gap: var(--esp-3);
}
.quiz-topo-linha {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--esp-4);
}
.quiz-sair {
  justify-self: start;
  min-height: 44px;
  padding: 0 var(--esp-4);
}
.quiz-sair svg {
  width: 16px;
  height: 16px;
}
.quiz-topo-titulo {
  display: grid;
  gap: 2px;
  text-align: center;
  min-width: 0;
}
.quiz-topo-etiqueta {
  margin: 0;
  color: var(--accent-forte);
  font: 500 0.6875rem / 1.4 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.quiz-topo-pacote {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-corpo);
  font-weight: 500;
}
.quiz-topo-contador {
  justify-self: end;
  margin: 0;
  color: var(--muted);
  font: 400 var(--fs-meta) / 1.4 var(--sans);
  text-align: right;
}
.quiz-passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--esp-1);
}
.quiz-passo {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: var(--neutro-800);
}
.quiz-passo--atual {
  background: var(--acento);
}
.quiz-passo--certa {
  background: var(--ok);
}
.quiz-passo--errada {
  background: var(--alerta);
}

/* Uma questão por vez (e o retorno dela): coluna de até 760px, enunciado em 30px. */
.quiz-shell--questao,
.quiz-shell--resultado {
  gap: var(--esp-9);
}
.quiz-shell--questao {
  max-width: 760px;
}
.quiz-shell--resultado {
  max-width: 1080px;
}
.quiz-questao {
  display: grid;
  gap: 22px;
}
.quiz-questao-numero {
  margin: 0;
  color: var(--muted-2);
  font: 400 var(--fs-meta) / 1.4 var(--sans);
}
.quiz-enunciado {
  margin: 0;
  color: var(--ink);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.quiz-alternativas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
/* Cartões A-D: o <input type="radio"> continua o controle real, dentro do próprio <label>, que vira o
   cartão. Mesma técnica do segmentado de tipo do catálogo (.segmentado-campo): sem suporte a :has(), o
   círculo nativo do rádio fica visível como pista de qual alternativa está marcada; com suporte, ele
   cobre o cartão (clicável, focável, mesmo alvo de toque) e some visualmente. */
.quiz-alt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: var(--esp-4) 18px;
  border-radius: var(--raio-3);
  background: var(--surface);
  box-shadow: var(--sombra-1);
  color: var(--ink);
  font-size: var(--fs-corpo-lg);
  line-height: 1.45;
}
label.quiz-alt {
  cursor: pointer;
}
label.quiz-alt:hover {
  box-shadow: 0 0 0 1px var(--neutro-600);
}
.quiz-letra {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--raio-2);
  background: var(--neutro-800);
  color: var(--neutro-300);
  font: 500 var(--fs-meta) / 1 var(--sans);
}
.quiz-alt-texto {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  font: inherit;
}
.quiz-alt input[type="radio"] {
  flex: none;
  accent-color: var(--acento);
}
@supports not selector(:has(*)) {
  .quiz-alt input[type="radio"] {
    width: 18px;
    height: 18px;
  }
  .quiz-alt input[type="radio"]:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
  }
}
@supports selector(:has(*)) {
  .quiz-alt input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .quiz-alt:has(input:checked) {
    background: var(--acento-900);
    box-shadow: 0 0 0 1px var(--acento);
  }
  .quiz-alt:has(input:checked) .quiz-letra {
    background: var(--acento-700);
    color: var(--acento-100);
  }
  .quiz-alt:has(input:focus-visible) {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
  }
}
/* Retorno da questão confirmada (só leitura): certa em verde com check, a escolhida errada em
   laranja-avermelhado com x, e o texto "Correta"/"Sua resposta" junto (nunca só a cor). */
.quiz-alt--correta {
  background: var(--ok-fundo);
  box-shadow: 0 0 0 1px var(--ok);
}
.quiz-alt--errada {
  background: var(--alerta-fundo);
  box-shadow: 0 0 0 1px var(--alerta);
}
.quiz-alt-marca {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  color: var(--muted);
  font: 500 var(--fs-etiqueta) / 1.2 var(--sans);
}
.quiz-alt-marca svg {
  width: 20px;
  height: 20px;
}
.quiz-alt--correta .quiz-alt-marca {
  color: var(--ok-forte);
}
.quiz-alt--errada .quiz-alt-marca {
  color: var(--alerta-forte);
}
.quiz-feedback {
  display: flex;
  gap: var(--esp-3);
  padding: var(--esp-4) 18px;
  border-radius: var(--raio-3);
}
.quiz-feedback > svg {
  flex: none;
  width: 22px;
  height: 22px;
}
.quiz-feedback--certa {
  background: var(--ok-fundo);
  color: var(--ok-forte);
}
.quiz-feedback--errada {
  background: var(--alerta-fundo);
  color: var(--alerta-forte);
}
.quiz-feedback-titulo {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: var(--fs-corpo);
  font-weight: 500;
}
.quiz-feedback-texto {
  margin: 0;
  color: var(--neutro-200);
  font-size: 0.875rem;
  line-height: 1.55;
}
.quiz-questao-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--esp-3);
  margin-top: var(--esp-2);
}
.quiz-questao-acoes .botao {
  padding: 0 18px;
  font-size: var(--fs-corpo);
}
.quiz-questao-acoes svg {
  width: 16px;
  height: 16px;
}
.quiz-dica {
  flex: 1 1 240px;
  margin: 0;
  color: var(--muted-2);
  font-size: var(--fs-meta);
}

/* Resultado: card com o anel conic de 112px, "Aprovada"/"Quase lá" em texto, as ações em pílula, e a
   lista de respostas com as erradas na tinta de alerta. */
.quiz-resultado-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--esp-6);
  align-items: start;
}
.quiz-resultado {
  display: grid;
  gap: 14px;
  padding: var(--esp-8);
  border-radius: var(--raio-3);
}
.quiz-resultado--aprovado {
  background: linear-gradient(160deg, var(--ok-fundo), var(--surface) 70%);
  box-shadow: 0 0 0 1px var(--ok);
}
.quiz-resultado--quase {
  background: linear-gradient(160deg, var(--alerta-fundo), var(--surface) 70%);
  box-shadow: 0 0 0 1px var(--alerta);
}
.quiz-resultado-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-5);
}
.quiz-resultado-texto {
  flex: 1 1 200px;
  display: grid;
  gap: 6px;
}
.quiz-resultado-titulo {
  margin: 0;
  color: var(--ink);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.quiz-anel {
  --anel-cor: var(--ok);
  position: relative;
  flex: none;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: conic-gradient(var(--anel-cor) calc(var(--anel-pct) * 1%), var(--neutro-800) 0);
}
.quiz-resultado--quase .quiz-anel {
  --anel-cor: var(--alerta);
}
.quiz-anel::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--surface);
}
.quiz-anel-centro {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.quiz-anel-numero {
  color: var(--ink);
  font: 500 2rem / 1 var(--sans);
}
.quiz-anel-total {
  color: var(--muted);
  font-size: var(--fs-etiqueta);
}
.quiz-resultado-rotulo {
  margin: 0;
  color: var(--ok-forte);
  font: 500 0.6875rem / 1.4 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.quiz-resultado--quase .quiz-resultado-rotulo {
  color: var(--alerta-forte);
}
.quiz-placar {
  margin: 0;
  color: var(--neutro-200);
  font-size: var(--fs-corpo);
}
.quiz-resultado-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
}
.quiz-refazer-bloqueado {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-meta);
}
.quiz-respostas {
  display: grid;
  gap: 6px;
}
.quiz-respostas h2 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: var(--fs-h3);
  font-weight: 500;
}
.quiz-respostas-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.quiz-resposta {
  border-radius: var(--raio-2);
}
.quiz-resposta--errada {
  background: var(--alerta-fundo);
}
.quiz-resposta-linha {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: 44px;
  padding: 10px var(--esp-3);
  border-radius: var(--raio-2);
  color: var(--ink);
  font-size: 0.875rem;
  text-decoration: none;
}
a.quiz-resposta-linha:hover {
  box-shadow: 0 0 0 1px var(--line-strong);
}
.quiz-resposta-linha:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
.quiz-resposta svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--ok-forte);
}
.quiz-resposta--errada svg {
  color: var(--alerta-forte);
}
.quiz-resposta-numero {
  flex: none;
  width: 22px;
  color: var(--muted-2);
  font-size: var(--fs-etiqueta);
}
.quiz-resposta-texto {
  flex: 1;
  min-width: 0;
}
.quiz-resposta-nota {
  flex: none;
  color: var(--muted);
  font-size: var(--fs-etiqueta);
}

/* Histórico compacto ("Suas tentativas"), no início do quiz e no resultado. */
.quiz-historico {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.quiz-historico h2 {
  margin: 0 0 6px;
  font-size: var(--fs-corpo-lg);
  font-weight: 500;
  color: var(--ink);
}
.quiz-historico-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--esp-5);
}
.quiz-historico-lista a {
  display: inline-flex;
  align-items: center;
  /* Alvo de toque de 44px (tarefa 8). */
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.875rem;
}
.quiz-historico-lista a:hover {
  color: var(--accent-forte);
}
.quiz-historico-vazio {
  margin: 0;
  color: var(--muted-2);
}
@media (max-width: 760px) {
  .quiz-shell {
    padding: 24px 0 64px;
  }
  .quiz-shell--questao,
  .quiz-shell--resultado {
    gap: var(--esp-7);
  }
  /* No celular: "Sair do quiz" e o contador numa linha, o título do pacote embaixo, largura toda. */
  .quiz-topo-linha {
    grid-template-columns: auto 1fr;
  }
  .quiz-topo-titulo {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: left;
  }
  .quiz-enunciado,
  .quiz-resultado-titulo {
    font-size: 24px;
  }
  .quiz-resultado {
    padding: var(--esp-5);
  }
  .quiz-questao-acoes .botao {
    flex: 1 1 100%;
  }
  /* "Correta"/"Sua resposta" desce para a própria linha, alinhada ao texto (depois da tecla A-D), em vez
     de espremer a alternativa numa coluna estreita. */
  .quiz-alt {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .quiz-alt-marca {
    flex-basis: 100%;
    padding-left: 42px;
  }
}
/* Resumo do quiz no cartão "Etapa 1 · Quiz" da Hora de praticar (tela 2): o cartão já é a caixa, então
   o resumo não tem borda nem fundo próprios. "10 questões · aprovação com 8" em destaque (20px, como o
   protótipo), a situação pessoal em cinza e o link "Fazer o quiz" como botão principal em pílula. */
.quiz-resumo {
  margin: 0;
  display: grid;
  gap: 8px;
}
.quiz-resumo .quiz-info {
  margin: 0;
  color: var(--ink);
  font: 500 1.25rem / 1.3 var(--sans);
  letter-spacing: -0.01em;
  text-transform: none;
}
.quiz-resumo-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}
.quiz-resumo-link {
  justify-self: start;
  margin-top: 6px;
  min-height: 44px;
  font: 500 0.9rem / 1 var(--sans);
}

/* "Hora de praticar" (tela 2, protótipo Pacote.dc.html): fim do artigo do pacote, no lugar das seções
   Quiz e Roleplay. Dois cartões de etapa numa grade auto-fit (mínimo de 260px): o do quiz com a tinta
   do acento (fundo --acento-900 esmaecendo para --surface, pares ink/muted/acento × acento-900
   conferidos em tema.test.ts) e o do roleplay em superfície simples, esmaecido quando bloqueado. */
.hora-de-praticar {
  scroll-margin-top: var(--ancora-topo);
  padding: 56px 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  max-width: 900px;
}
.hora-de-praticar-etiqueta {
  margin: 0;
  color: var(--muted-2);
  font: 400 0.6875rem / 1.3 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hora-de-praticar h2 {
  margin: 0;
  font-size: var(--fs-h2-lg);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.hora-de-praticar-intro {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: var(--fs-corpo);
}
.etapas-praticar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
  align-items: start;
}
.etapa-praticar {
  scroll-margin-top: var(--ancora-topo);
  min-width: 0;
  padding: 22px;
  border-radius: var(--raio-3);
  background: var(--surface);
  box-shadow: var(--sombra-1);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.etapa-praticar--quiz {
  background: linear-gradient(160deg, var(--acento-900), var(--surface) 75%);
  box-shadow: 0 0 0 1px var(--acento-700);
}
.etapa-praticar-topo {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.etapa-praticar-numero {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--muted);
  font: 500 0.8125rem / 1 var(--sans);
}
.etapa-praticar-rotulo {
  color: var(--muted);
  font: 500 0.75rem / 1.3 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.etapa-praticar--quiz .etapa-praticar-numero {
  border-color: var(--acento);
  color: var(--acento);
}
.etapa-praticar--quiz .etapa-praticar-rotulo {
  color: var(--acento);
}
.etapa-praticar-cadeado {
  display: grid;
  margin-left: auto;
  color: var(--muted);
}
.etapa-praticar-cadeado svg {
  width: 18px;
  height: 18px;
}
.roleplay-cenario {
  scroll-margin-top: var(--ancora-topo);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.roleplay-cenario h3 {
  margin: 0;
  color: var(--ink);
  font: 500 0.9375rem / 1.4 var(--sans);
}
.roleplay-cenario-corpo {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}
.roleplay-cenario-corpo p {
  margin: 2px 0 0;
}
.roleplay-cenario-corpo h4 {
  margin: 8px 0 0;
  color: var(--ink);
  font: 500 0.8125rem / 1.4 var(--sans);
}
.etapa-praticar-nota,
.etapa-praticar-situacao {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}
.etapa-praticar-situacao {
  justify-self: start;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--raio-pilula);
  color: var(--ink);
  font: 500 0.8125rem / 1.3 var(--sans);
}
.etapa-praticar--bloqueada .etapa-praticar-situacao {
  color: var(--muted);
}
/* Gabarito e briefing do avaliador (só avaliador e liderança, tela 2): recolhido por padrão, com o
   resumo em pílula de contorno (sem JavaScript: <details> nativo). */
.gabarito-avaliadores {
  margin-top: 6px;
}
.gabarito-avaliadores > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--esp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--raio-pilula);
  cursor: pointer;
  color: var(--ink);
  font: 500 0.875rem / 1 var(--sans);
  list-style: none;
}
.gabarito-avaliadores > summary::-webkit-details-marker {
  display: none;
}
.gabarito-avaliadores > summary::after {
  content: "+";
  margin-left: 10px;
  color: var(--muted);
}
.gabarito-avaliadores[open] > summary::after {
  content: "−";
}
.gabarito-avaliadores > summary:hover {
  border-color: var(--acento);
}
.gabarito-avaliadores > summary:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
.gabarito-corpo {
  margin-top: 16px;
  padding: 4px 22px 18px;
  border-radius: var(--raio-3);
  background: var(--surface);
  box-shadow: var(--sombra-1);
}
.gabarito-corpo > h3:first-child {
  margin-top: 18px;
}

.quizzes-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.quizzes-lista li {
  background: var(--surface);
}
.quizzes-lista a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  color: var(--ink);
  text-decoration: none;
}
.quizzes-lista a:hover {
  color: var(--accent-forte);
}
.quiz-lista-titulo {
  font-size: 0.95rem;
}
.quiz-lista-situacao {
  color: var(--muted-2);
  font: 400 0.8125rem / 1 var(--sans);
}

/* Página Revisão (rotas/revisao.tsx): lista de sugestões de correção de vários pacotes/seções (seções
   Pendentes e Resolvidas), cada uma com o link para o alvo acima do mesmo bloco .comentario usado nas
   páginas de pacote/playbook. */
.revisao-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin-top: 30px;
  max-width: 900px;
}
.revisao-item {
  display: grid;
  gap: 8px;
  box-shadow: var(--sombra-1);
}
.revisao-alvo {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--muted-2);
  font: 500 0.72rem / 1.4 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.revisao-alvo a {
  color: var(--accent-forte);
  text-decoration: none;
}
.revisao-alvo a:hover {
  text-decoration: underline;
}
.revisao-alvo .aviso {
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
/* Aviso "e-mail não enviado" (revisão nº1 da tarefa 6): precisa se destacar da linha de origem
   (.revisao-alvo, discreta) — mesmas cores de alerta usadas em .quiz-aviso, só com tema.css/tema.ts. */
.revisao-email-aviso {
  margin: 0;
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--restrito-avaliador);
  background: var(--restrito-avaliador-fundo);
  color: var(--ink);
  font: 500 0.68rem / 1.4 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* Tela 5: "Resolvidas" era um <h2> fixo; agora um <details> fechado por padrão (o vaivém de marcar/
   desmarcar não some da lista de sugestões pendentes, mas a lista de resolvidas some da primeira
   olhada). O <summary> mantém a cara de heading (mesma fonte de h2) só que clicável, com "+"/"–"
   como os outros <details> do portal (.gabarito-avaliadores, .ajuda) e a contagem em .contagem. */
.revisao-resolvidas > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 44px;
  cursor: pointer;
  color: var(--ink);
  font: 500 var(--fs-h2) / 1.3 var(--sans);
  list-style: none;
}
.revisao-resolvidas > summary::-webkit-details-marker {
  display: none;
}
.revisao-resolvidas > summary::after {
  content: "+";
  color: var(--muted);
  font-weight: 400;
}
.revisao-resolvidas[open] > summary::after {
  content: "–";
}
/* Estado vazio (tela 5): quando a pessoa não tem nenhuma sugestão no escopo dela (antes de qualquer
   filtro), a ilustração da tela 0 (compacta) substitui os filtros e as duas seções — nunca aparece
   junto com um filtro sem resultado, que continua só com o texto simples de cada seção. */
.revisao-vazio {
  display: grid;
  justify-items: center;
  gap: var(--esp-4);
  max-width: 420px;
  margin: var(--esp-9) auto;
  text-align: center;
  color: var(--muted);
}
.revisao-vazio p {
  margin: 0;
}

/* Comentários de revisão (etapa 6): bloco ao fim de cada seção comentável e contagem no menu lateral. */
.side-nav nav a {
  grid-template-columns: 17px minmax(0, 1fr) auto;
}
.contagem {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--sobre-escuro);
  font: 600 0.6875rem / 1 var(--sans);
}
/* Texto só para leitor de tela: mesma técnica clássica (1px, clip, sem espaço no fluxo visual).
   Nunca reusar esta classe fora dos comentários: comentarios-pagina.test.tsx confere vazamento de
   dado restrito checando a ausência literal de "visualmente-oculto" na página (proxy pra "sem
   contagem de comentário nenhuma"). Outros rótulos ocultos (ex.: o papel ao lado do avatar do
   cabeçalho, o <legend> da escolha de papel) usam
   .rotulo-oculto, com o mesmo efeito visual, pra não colidir com esse teste. */
.visualmente-oculto,
.rotulo-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Tela 2 (protótipo Pacote.dc.html): o bloco de comentários é um <details> — o <summary> é a pílula de
   contorno "n comentários" com até 3 avatares (ou "Comentar"), e o painel aberto é um card com a lista,
   o formulário de comentar e "Sugerir correção". Abre sem JavaScript (e já aberto com ?aberto=). */
.comentarios {
  margin: 20px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  max-width: 900px;
}
.comentarios-botao {
  justify-self: start;
  max-width: 100%;
  min-height: 44px;
  list-style: none;
}
.comentarios-botao-icone {
  display: grid;
}
.comentarios-botao-icone svg {
  width: 16px;
  height: 16px;
}
.comentarios-avatares {
  display: flex;
  padding-left: 6px;
}
.comentarios-avatar {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: -6px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  color: var(--ink);
  font: 600 0.5625rem / 1 var(--sans);
}
.comentarios[open] > .comentarios-botao {
  border-color: var(--acento);
}
.comentarios-aviso {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
}
.comentarios-painel {
  padding: 16px;
  border-radius: var(--raio-3);
  background: var(--surface);
  box-shadow: var(--sombra-1);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.comentario {
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--raio-2);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
/* Visual da conversa (protótipo Pacote.dc.html): avatar redondo (iniciais, decorativo) no início do
   cabeçalho — sem respostas recuadas e sem selo "Resolvido" (etapa 6 revista: comentário público sem
   estado). O fundo vem de uma das 8 classes avatar-cor-N (abaixo, tela 5): um tom por pessoa, nunca
   um cinza único — a razão de contraste com o texto --ink (>= 12:1 nos 8 tons) é conferida em
   tema.test.ts, em PARES_DE_CONTRASTE. */
.comentario-avatar {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 2px;
  border-radius: 50%;
  color: var(--ink);
  font: 500 0.6rem / 1 var(--sans);
  text-transform: none;
  vertical-align: middle;
}
/* Avatar por pessoa (tela 5): um hue fixo de tema.css por índice (--avatar-1..--avatar-8), escolhido
   por src/app/avatar.ts:classeDoAvatar a partir de um hash do e-mail — sempre a mesma cor para a
   mesma pessoa, nunca cor crua no markup. Usada em .comentario-avatar, .comentarios-avatar e
   .header-avatar (o resumo do menu da conta). */
.avatar-cor-1 {
  background: var(--avatar-1);
}
.avatar-cor-2 {
  background: var(--avatar-2);
}
.avatar-cor-3 {
  background: var(--avatar-3);
}
.avatar-cor-4 {
  background: var(--avatar-4);
}
.avatar-cor-5 {
  background: var(--avatar-5);
}
.avatar-cor-6 {
  background: var(--avatar-6);
}
.avatar-cor-7 {
  background: var(--avatar-7);
}
.avatar-cor-8 {
  background: var(--avatar-8);
}
.comentarios-convite {
  margin: 0;
  padding: 12px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--raio-2);
  color: var(--muted);
  font-size: 0.88rem;
}
/* Ajuste pedido pelo Emanuel na conferência da tela 5: o nome do autor e a data apareciam em mono
   caixa alta, um tratamento reservado a etiquetas pequenas (ver "mono só nas etiquetas" em
   tema.test.ts) — não a texto corrido como um nome de pessoa. Agora é sans normal: o nome em --ink/
   peso 500 (.comentario-autor, abaixo) e a data (.comentario-data, sem regra própria) herda a cor
   --muted e o tamanho --fs-meta daqui, como um texto de apoio comum. Vale tanto para o cabeçalho do
   comentário (pacote/playbook) quanto para o cartão de sugestão da Revisão — os dois usam esta classe. */
.comentario-cabecalho {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  overflow-wrap: anywhere;
  color: var(--muted);
  font: 400 var(--fs-meta) / 1.4 var(--sans);
}
.comentario-autor {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-weight: 500;
}
.comentario-editado {
  color: var(--muted-2);
}
.comentario-texto {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  color: var(--ink);
  font-size: 0.95rem;
}
/* Faixa de confirmação (comentarios.tsx, FaixaSugestaoEnviada): topo do conteúdo quando a URL traz
   ?sugestao=enviada, depois do 303 de POST /sugestoes. */
.faixa-confirmacao {
  margin: 0 0 24px;
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  max-width: 900px;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.92rem;
}
.comentario-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}
.comentario-form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.comentario-editar,
.comentar,
.sugerir {
  max-width: 100%;
  box-sizing: border-box;
}
.comentario-editar form,
.comentar form,
.sugerir form {
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--bg);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.comentario-editar label,
.comentar label,
.sugerir label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.85rem;
}
.comentario-editar textarea,
.comentar textarea,
.sugerir textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 90px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: 400 0.92rem / 1.5 var(--sans);
  resize: vertical;
}
.sugerir input[type="url"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: 400 0.92rem / 1.5 var(--sans);
}
.comentario-editar form .botao,
.comentar form .botao,
.sugerir form .botao {
  justify-self: start;
}
/* Ajuda "?" da sugestão de correção (comentarios.tsx, FormularioSugestao): <details> próprio, sem
   JavaScript, com um "?" redondo. */
.ajuda {
  margin: 10px 0 16px;
}
/* 44px (tarefa 6, alvo de toque): era 40x40 — achado ao remedir as telas com a barra "Sugerir
   correção"/"?" (medicoes.json, portal-pacote-topo). */
.ajuda summary {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
  font: 500 0.85rem / 1 var(--sans);
  list-style: none;
}
.ajuda summary::-webkit-details-marker {
  display: none;
}
.ajuda p {
  margin: 8px 0 0;
  max-width: 60ch;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 760px) {
  section.restrito.content-section {
    padding: 20px 16px;
  }
  .playbook-hero .capa-gerada {
    min-height: 200px;
  }
  /* Alvo de 44px no celular pro botão "Filtrar" e "Limpar filtros" — select/input/segmentado já são
     44px em qualquer largura (regra base, tarefa da tela 4). Sem largura fixa: tudo continua em
     % / flex-wrap, sem rolagem horizontal. */
  .filtros button,
  .filtros-limpar {
    min-height: 44px;
  }
  /* A pílula única (border-radius:999px + overflow:hidden) só funciona numa linha só: com 4 opções
     ela não cabe em 390px e, ao quebrar linha, o recorte da pílula cortava "Offering" pela metade e
     sobrava um vão arredondado enorme ao lado. No celular vira uma grade de pastilhas soltas, cada
     uma com sua própria borda arredondada, que quebra linha normalmente. */
  .segmentado-campo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-2);
    width: 100%;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .segmentado-campo label {
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--raio-2);
  }
  /* Mesma especificidade da regra ":first-child" lá em cima (que zera a borda esquerda pro efeito de
     pílula contínua) — aqui, depois no arquivo, devolve a borda esquerda pro efeito de pastilha solta. */
  .segmentado-campo label:first-child {
    border-left: 1px solid var(--line);
  }
  .filtros-contagem {
    margin-left: 0;
    padding-right: 0;
  }
}

/* Tela de escolha de papel (rotas/escolher-papel.tsx, tela 0): paisagem de fundo (SVG inline, só formas;
   as cores vêm destas classes, sempre tokens do tema: céu azul-claro, serra e colinas em azul do
   grupo, verde-água e grafite, bem suaves) e o texto num cartão --surface por cima — o contraste do
   texto é sempre o do cartão, nunca o da ilustração. */
.pagina-escolha {
  min-height: 100vh;
  background: var(--acento-900);
}
.paisagem {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.paisagem-ceu-alto {
  stop-color: var(--acento-800);
}
.paisagem-ceu-baixo {
  stop-color: var(--neutro-900);
}
.paisagem-halo {
  fill: var(--surface);
  opacity: 0.35;
}
.paisagem-sol {
  fill: var(--surface);
  opacity: 0.9;
}
.paisagem-serra {
  fill: var(--acento-700);
  opacity: 0.6;
}
.paisagem-colina-fundo {
  fill: var(--vibe-claro);
  opacity: 0.45;
}
.paisagem-colina-meio {
  fill: var(--acento-600);
  opacity: 0.5;
}
.paisagem-trilha {
  fill: none;
  stroke: var(--surface);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 2 16;
  opacity: 0.85;
}
.paisagem-colina-frente {
  fill: var(--grupo);
  opacity: 0.25;
}
/* Variante compacta (tela 5, estado vazio da Revisão): a mesma ilustração, sem ser o fundo cheio da
   tela — um bloco pequeno, no fluxo normal (não fixa nem cobrindo a página). A especificidade de
   duas classes (.paisagem.paisagem--compacta) garante que estas regras vençam as de .paisagem acima,
   não importa a ordem das duas classes na tag nem a ordem das regras no arquivo. */
.paisagem.paisagem--compacta {
  position: static;
  inset: auto;
  z-index: auto;
  width: 220px;
  height: 140px;
}
.pagina-escolha .site-header,
.escolha {
  position: relative;
  z-index: 1;
}
.escolha {
  display: grid;
  place-items: center;
  min-height: calc(100vh - var(--cabecalho-altura) - var(--cabecalho-topo));
  padding: var(--esp-9) var(--margem-conteudo);
}
.escolha-cartao {
  width: min(680px, 100%);
  padding: var(--esp-8);
  border-radius: var(--raio-3);
  background: var(--surface);
  box-shadow: var(--sombra-3);
  display: grid;
  gap: var(--esp-2);
}
.escolha-cartao .eyebrow {
  margin: 0;
}
.escolha-cartao h1 {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.escolha-ajuda {
  margin: 0;
  color: var(--muted);
}
/* Escolha de papel em Capas (telas de entrada, plano 2026-10-04-telas-de-entrada): cartões escuros como as
   capas do catálogo, um por papel. O <input type="radio"> continua sendo o controle (visualmente oculto,
   focável: Tab entra no grupo, setas trocam) e a marca ao lado (.papel-marca) mostra o estado sem depender
   de :has(). Movimento revisado com a review-animations: só transform e opacity (o anel de seleção e a
   sombra de hover são pseudo-elementos que só mudam de opacidade), pressionar em 100ms e soltar em 160ms,
   nada animado quando a seleção vem do teclado, hover só com ponteiro fino e movimento reduzido sem
   deslocamento. */
.escolha-cartao--capas {
  width: min(880px, 100%);
  transition: opacity var(--dur-curta) var(--curva-saida) 80ms;
}
.papel-form {
  display: grid;
  gap: var(--esp-6);
  margin-top: var(--esp-4);
}
.papel-campos {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.papel-capas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--esp-4);
}
.papel-capa {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--esp-4);
  min-height: 220px;
  padding: var(--esp-5);
  border-radius: var(--raio-3);
  color: var(--sobre-escuro);
  background:
    radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--capa-cor) 70%, transparent), transparent 58%),
    linear-gradient(color-mix(in srgb, var(--sobre-escuro) 6%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, color-mix(in srgb, var(--sobre-escuro) 6%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--ink);
  cursor: pointer;
  transition:
    transform var(--dur-toque) var(--curva-saida),
    opacity 150ms var(--curva-saida);
}
/* Anel de seleção (::before) e sombra de hover (::after): só opacidade. */
.papel-capa::before,
.papel-capa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms var(--curva-saida);
}
.papel-capa::before {
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px var(--acento);
}
.papel-capa::after {
  box-shadow: var(--sombra-3);
}
.papel-capa:has(.papel-radio:checked)::before {
  opacity: 1;
}
/* Pressionar: 100ms (resposta no pointer-down); soltar volta nos 160ms da regra base. */
.papel-capa:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}
@media (hover: hover) and (pointer: fine) {
  .papel-capa:hover::after {
    opacity: 1;
  }
}
/* Entrada: as capas chegam em cascata de 40ms (tela vista uma vez por login). Só "backwards": acabada a
   animação, ela some e não prende o transform do pressionar nem o da saída. */
.papel-capas .papel-capa {
  animation: acesso-surge var(--dur-media) var(--curva-saida) backwards;
}
.papel-capas .papel-capa:nth-child(2) {
  animation-delay: 40ms;
}
.papel-capas .papel-capa:nth-child(3) {
  animation-delay: 80ms;
}
.papel-capas .papel-capa:nth-child(n + 4) {
  animation-delay: 120ms;
}
.papel-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}
.papel-marca {
  position: absolute;
  top: var(--esp-4);
  left: var(--esp-4);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--borda-sobre-escuro);
  border-radius: 50%;
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
}
.papel-marca::after {
  content: "";
  width: 10px;
  height: 5px;
  border: solid var(--ink);
  border-width: 0 0 2px 2px;
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg) scale(0.6);
  transition:
    opacity 150ms var(--curva-saida),
    transform 150ms var(--curva-saida);
}
.papel-radio:checked + .papel-marca {
  border-color: var(--sobre-escuro);
  background: var(--sobre-escuro);
}
.papel-radio:checked + .papel-marca::after {
  opacity: 1;
  transform: translateY(-1px) rotate(-45deg) scale(1);
}
.papel-capa:has(.papel-radio:focus-visible) {
  outline: 2px solid var(--acento);
  outline-offset: 6px;
}
/* Seleção pelo teclado (setas): troca instantânea, nunca animar ação de teclado. */
.papel-capa:has(.papel-radio:focus-visible)::before,
.papel-capa:has(.papel-radio:focus-visible) .papel-marca,
.papel-capa:has(.papel-radio:focus-visible) .papel-marca::after {
  transition: none;
}
.papel-capa-icone {
  justify-self: end;
  width: 64px;
  height: 64px;
  color: var(--capa-luz);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--capa-luz) 70%, transparent));
}
.papel-capa-texto {
  display: grid;
  gap: var(--esp-1);
}
.papel-capa-fase {
  color: var(--capa-luz);
  font: 400 0.7rem / 1.2 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.papel-rotulo {
  color: var(--sobre-escuro);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.papel-descricao {
  color: var(--texto-sobre-escuro);
  font-size: var(--fs-meta);
  line-height: 1.45;
}
.papel-enviar {
  justify-self: start;
  min-height: 48px;
  padding: 0 var(--esp-7);
  transition: transform var(--dur-toque) var(--curva-saida);
}
.papel-enviar:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}
.papel-enviar svg {
  width: 18px;
  height: 18px;
}
/* Saída para o Início (/estatico/entrada.js põe data-saindo e envia depois de data-saida-ms = 280ms): a
   capa escolhida cresce 2% ("você entra nela"), as outras somem e o cartão esmaece. */
.escolha-cartao--capas:has(form[data-saindo]) {
  opacity: 0;
}
form[data-saindo] .papel-capa:has(.papel-radio:checked) {
  transform: scale(1.02);
  transition-duration: var(--dur-curta);
}
form[data-saindo] .papel-capa:not(:has(.papel-radio:checked)) {
  opacity: 0;
  transform: scale(0.97);
}
@media (max-width: 760px) {
  .escolha {
    place-items: start center;
    padding: var(--esp-6) var(--margem-conteudo) var(--esp-9);
  }
  .escolha-cartao {
    padding: var(--esp-6) var(--esp-5);
  }
  .escolha-cartao h1 {
    font-size: var(--fs-h2-lg);
  }
  .papel-capa {
    min-height: 0;
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .papel-capa-icone {
    grid-row: 1;
    grid-column: 2;
    align-self: start;
    width: 48px;
    height: 48px;
  }
  .papel-capa-texto {
    grid-row: 1;
    grid-column: 1;
    padding-top: var(--esp-8);
  }
  .papel-enviar {
    justify-self: stretch;
  }
}

/* Telas de acesso (componentes/acesso.tsx): /entrar, a espera "Autenticando…" e os erros do login, no
   layout "Noite". À esquerda, a capa escura com a arte Trilha e as empresas; à direita, o painel claro. No
   celular, a capa vira uma faixa de marca no topo. Sem JavaScript. */
.pagina-acesso {
  margin: 0;
  background: var(--surface);
}
.noite {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
}
.noite-capa {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: var(--esp-8);
  padding: var(--esp-9) clamp(24px, 4vw, 56px);
  background: var(--neutro-100);
  color: var(--texto-sobre-escuro);
}
.noite-capa > :not(.noite-arte) {
  position: relative;
  z-index: 1;
}
.noite-marca {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  color: var(--sobre-escuro);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.noite-marca img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  box-shadow: 0 0 0 1px var(--veu-12);
}
.noite-chamada {
  display: grid;
  gap: var(--esp-4);
  max-width: 460px;
  margin-top: clamp(32px, 10vh, 120px);
}
.noite-chamada .eyebrow {
  margin: 0;
  color: var(--vibe-neon);
}
.noite-frase {
  margin: 0;
  color: var(--sobre-escuro);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.noite-empresas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-5);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--texto-sobre-escuro-2);
  font-size: var(--fs-meta);
}
.noite-empresas li {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}
.noite-empresas li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ponto);
  box-shadow: 0 0 8px var(--ponto);
}
/* Arte Trilha: o caminho que o portal propõe (ler o pacote, quiz, roleplay, aprovado), em neon sobre a
   grade fina das capas do catálogo. Decorativa (aria-hidden); o texto da capa fica sempre acima dela. */
.noite-arte {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.arte-trilha {
  background:
    linear-gradient(color-mix(in srgb, var(--sobre-escuro) 6%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, color-mix(in srgb, var(--sobre-escuro) 6%, transparent) 1px, transparent 1px) 0 0 / 24px 24px;
}
.arte-trilha svg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 66%;
}
.trilha-base {
  fill: none;
  stroke: var(--veu-12);
  stroke-width: 18;
  stroke-linecap: round;
}
.trilha-caminho {
  fill: none;
  stroke: var(--vibe-neon);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 2 14;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--vibe-neon) 70%, transparent));
}
.trilha-marco {
  fill: var(--neutro-100);
  stroke: var(--luz);
  stroke-width: 2;
}
.trilha-icone {
  stroke: var(--luz);
}
.trilha-marco-grupo--fim .trilha-marco {
  fill: var(--luz);
}
.trilha-marco-grupo--fim .trilha-icone {
  stroke: var(--neutro-100);
}
.trilha-rotulo {
  fill: var(--texto-sobre-escuro-2);
  font: 400 13px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Espera: os pontos da trilha andam (constante: linear). É o único movimento que não é transform/opacity
   (stroke-dashoffset num caminho pequeno, pintura barata); com movimento reduzido, parado. */
.noite[data-espera] .trilha-caminho {
  animation: trilha-anda 700ms linear infinite;
}
@keyframes trilha-anda {
  to {
    stroke-dashoffset: -16;
  }
}
.noite-painel {
  display: grid;
  place-items: center;
  padding: var(--esp-9) var(--margem-conteudo);
}
.noite-conteudo {
  width: min(380px, 100%);
  min-height: 440px;
  display: grid;
  align-content: center;
  gap: var(--esp-4);
}
.noite-conteudo h1 {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.noite-conteudo .eyebrow {
  margin: 0;
}
.noite-logo {
  width: 132px;
  height: 32px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: var(--esp-6);
}
/* Entrada do painel: o conteúdo chega da direita (8px, "seguir em frente"), 240ms ease-out forte, com
   30ms entre os itens. Tela ocasional (uma vez por login). A capa e a moldura não animam: entre /entrar,
   a espera e os erros, o navegador pinta a página nova no mesmo lugar e a capa parece a mesma. */
.noite-avanca > * {
  animation: noite-avanca var(--dur-media) var(--curva-saida) both;
}
.noite-avanca > :nth-child(2) {
  animation-delay: 30ms;
}
.noite-avanca > :nth-child(3) {
  animation-delay: 60ms;
}
.noite-avanca > :nth-child(4) {
  animation-delay: 90ms;
}
.noite-avanca > :nth-child(n + 5) {
  animation-delay: 120ms;
}
@keyframes noite-avanca {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
}
@keyframes acesso-surge {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes acesso-aparece {
  from {
    opacity: 0;
    visibility: hidden;
  }
}
.acesso-ajuda {
  margin: 0;
  color: var(--muted);
}
.acesso-ms {
  width: 100%;
  min-height: 48px;
  margin-top: var(--esp-4);
  gap: var(--esp-3);
  font-size: var(--fs-corpo-lg);
  transition: transform var(--dur-toque) var(--curva-saida);
}
.acesso-ms:active,
.acesso-acoes .botao:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}
.acesso-ms-logo {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.acesso-aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  margin: 0;
  padding-top: var(--esp-4);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-meta);
  line-height: 1.45;
}
.acesso-aviso svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}
.acesso-dev {
  margin: 0;
  font-size: var(--fs-meta);
}
.acesso-link,
.acesso-reserva a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--acento);
  text-underline-offset: 3px;
}
.acesso-link:focus-visible,
.acesso-reserva a:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--raio-1);
}
.acesso-nota {
  margin: 0;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-2);
  background: var(--ok-fundo);
  color: var(--ok-forte);
  font-size: var(--fs-meta);
  font-weight: 500;
}
/* Link de reserva da espera: só aparece se a espera passar do normal (--reserva-atraso); até lá também
   fica fora da árvore de acessibilidade (visibility). Sem suporte a animação, já aparece. */
.acesso-reserva {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-meta);
}
.noite-avanca > .acesso-reserva {
  animation: acesso-aparece var(--dur-curta) var(--curva-saida) var(--reserva-atraso) both;
}
/* Indicador da espera no painel: uma trilha curta que anda (só transform, linear). */
.noite-passos {
  width: 126px;
  height: 8px;
  margin: var(--esp-2) 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, var(--ink) 20%, var(--ink) 80%, transparent);
}
.noite-passos::before {
  content: "";
  display: block;
  width: calc(100% + 18px);
  height: 100%;
  background: radial-gradient(circle, var(--acento) 2.4px, transparent 2.9px) 0 50% / 18px 8px repeat-x;
  animation: noite-passos 700ms linear infinite;
}
@keyframes noite-passos {
  from {
    transform: translateX(-18px);
  }
  to {
    transform: translateX(0);
  }
}
/* Erros: selo com ícone (sem animação própria: erro não comemora), etiqueta na cor do selo. */
.acesso-selo {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--alerta-fundo);
  color: var(--alerta-forte);
}
.acesso-selo svg {
  width: 26px;
  height: 26px;
}
.acesso-selo + .eyebrow {
  color: var(--alerta-forte);
}
.acesso-selo--neutro {
  background: var(--line-soft);
  color: var(--muted);
}
.acesso-selo--neutro + .eyebrow {
  color: var(--muted);
}
.acesso-acoes {
  display: grid;
  gap: var(--esp-2);
  margin-top: var(--esp-3);
}
.acesso-acoes .botao {
  width: 100%;
  transition: transform var(--dur-toque) var(--curva-saida);
}
@media (max-width: 760px) {
  .noite {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .noite-capa {
    min-height: 220px;
    gap: var(--esp-4);
    padding: var(--esp-6) var(--margem-conteudo);
  }
  /* A frase grande cruzaria a trilha; o painel logo abaixo já tem o título. */
  .noite-chamada {
    margin-top: var(--esp-2);
  }
  .noite-frase,
  .noite-empresas,
  .trilha-rotulo {
    display: none;
  }
  .arte-trilha svg {
    left: 40%;
    width: 60%;
    height: 100%;
  }
  .noite-painel {
    place-items: start center;
    padding: var(--esp-6) var(--margem-conteudo) var(--esp-9);
  }
  .noite-conteudo {
    min-height: 0;
  }
  .noite-logo {
    display: none;
  }
  .noite-conteudo h1 {
    font-size: var(--fs-h2-lg);
  }
}
/* Movimento reduzido: nada se desloca nem gira; só a opacidade, que ajuda a entender a troca. */
@media (prefers-reduced-motion: reduce) {
  .noite-avanca > *,
  .papel-capas .papel-capa {
    animation-name: acesso-aparece;
  }
  .noite-avanca > .acesso-reserva {
    animation-name: acesso-aparece;
  }
  .noite-passos {
    display: none;
  }
  .noite[data-espera] .trilha-caminho {
    animation: none;
  }
  .papel-capa:active,
  .papel-enviar:active,
  .acesso-ms:active,
  .acesso-acoes .botao:active,
  form[data-saindo] .papel-capa:has(.papel-radio:checked),
  form[data-saindo] .papel-capa:not(:has(.papel-radio:checked)) {
    transform: none;
  }
  .papel-marca::after {
    transform: translateY(-1px) rotate(-45deg);
  }
}

/* "Marcar como concluído" no fim do artigo (tela 1): só em pacote sem quiz (rotas/pacote.tsx). */
.concluir-pacote {
  scroll-margin-top: var(--ancora-topo);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3) var(--esp-4);
  padding: var(--esp-8) 0;
}
.concluir-pacote-texto {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-corpo);
}
.concluir-pacote form {
  margin: 0;
}

/* /trilha (Home por papel, 2026-10-04; antes era o Início do vendedor, tela 1): "Seu próximo passo",
   "Sua trilha" em 3 etapas (Grupo → Empresa → Offerings) com barra segmentada e a faixa de quizzes. A
   Home nova (1a/1c/1d) fica no fim deste arquivo. */
.home-etiqueta {
  margin: 0;
  color: var(--muted);
  font: 400 0.6875rem / 1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.proximo-passo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  min-width: 0;
  margin-top: var(--esp-7);
  padding: var(--esp-6);
  border-radius: var(--raio-3);
  background: linear-gradient(160deg, var(--acento-900), var(--surface) 70%);
  box-shadow: 0 0 0 1px var(--acento-700);
}
.proximo-passo .home-etiqueta {
  color: var(--acento);
}
.proximo-passo h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.proximo-passo-meta {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-corpo);
}
.proximo-passo-acao {
  margin-top: var(--esp-1);
}
.proximo-passo-depois {
  margin: auto 0 0;
  padding-top: var(--esp-3);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-meta);
}
/* "Refazer às HH:MM" durante o bloqueio de 1h: parece um botão, mas não é clicável. */
.botao-bloqueado {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--muted);
  cursor: default;
}
.trilha {
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
  margin-top: var(--esp-9);
  padding: var(--esp-6);
  border-radius: var(--raio-3);
  background: var(--surface);
  box-shadow: var(--sombra-1);
}
.trilha-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-2) var(--esp-4);
}
.trilha-topo h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
}
.trilha-topo p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-meta);
}
.trilha-topo-link {
  margin-left: auto;
  color: var(--acento);
  font-size: var(--fs-meta);
  text-decoration: none;
}
.trilha-etapas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.etapa {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  min-width: 0;
  padding: 14px;
  border-radius: var(--raio-2);
  box-shadow: var(--sombra-1);
}
.etapa--concluida {
  background: var(--bg);
  box-shadow: none;
}
.etapa--atual {
  background: var(--acento-900);
  box-shadow: 0 0 0 1px var(--acento-700);
}
.etapa-topo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  color: var(--muted);
  font-size: var(--fs-etiqueta);
}
.etapa-status {
  margin-left: auto;
}
.etapa--concluida .etapa-status {
  color: var(--ok-forte);
}
.etapa--atual .etapa-status {
  color: var(--acento);
}
.etapa h3 {
  margin: 0;
  font-size: var(--fs-corpo);
  font-weight: 500;
}
.etapa-barra {
  display: flex;
  gap: 3px;
}
.etapa-segmento {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--neutro-700);
}
.etapa-segmento--feito {
  background: var(--ok);
}
.etapa-segmento--refazer {
  background: var(--alerta);
}
.etapa-detalhe {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-etiqueta);
}
/* Vários itens (módulos): cada um com a situação curta; corta em 2 linhas sem estourar a etapa. */
.etapa-detalhe--itens {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.etapa-icone {
  display: inline-grid;
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--muted-2);
}
.etapa-icone svg {
  width: 100%;
  height: 100%;
}
.etapa-icone--concluida {
  color: var(--ok);
}
.etapa-icone--atual {
  color: var(--acento);
}
/* Etiqueta "Equipe X" na cor da marca da equipe (--cor-equipe vem da rota: var(--<marca>-forte)). */
.home-equipe {
  color: var(--cor-equipe, var(--vibe-forte));
}
.etapa-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--esp-3);
  margin: 0;
  font-size: var(--fs-meta);
}
.etapa-link {
  color: var(--acento);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.etapa-link:hover,
.trilha-topo-link:hover {
  text-decoration: underline;
}

.trilha-quizzes {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}
.trilha-quizzes-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
}
.trilha-quizzes-topo h3 {
  margin: 0;
  font-size: var(--fs-corpo);
  font-weight: 500;
}
.trilha-quizzes-topo p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-meta);
}
.faixa-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1) 14px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--fs-etiqueta);
}
.faixa-legenda li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.faixa-cor {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--neutro-700);
}
.faixa-quizzes {
  display: grid;
  grid-template-columns: repeat(var(--colunas), minmax(0, 1fr));
  gap: var(--esp-1);
}
.faixa-celula {
  position: relative;
  display: block;
  height: 22px;
  border-radius: var(--raio-1);
  background: var(--neutro-700);
}
.faixa-cor--aprovado,
.faixa-celula--aprovado {
  background: var(--ok);
}
.faixa-cor--refazer,
.faixa-celula--refazer {
  background: var(--alerta);
}
.faixa-celula:hover {
  box-shadow: 0 0 0 2px var(--line-strong);
}
.faixa-celula:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
.faixa-lista .quizzes-lista {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--esp-3);
}
.faixa-lista .quizzes-lista a {
  justify-content: flex-start;
  padding: 10px 14px;
}
.faixa-lista .quiz-lista-titulo {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 1040px) {
  .faixa-lista .quizzes-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .trilha {
    padding: var(--esp-4);
  }
  .faixa-lista .quizzes-lista {
    grid-template-columns: minmax(0, 1fr);
  }
  .faixa-quizzes {
    gap: 3px;
  }
  /* .botao-pequeno sobe para 44px só no celular (tarefa 6, alvo de toque) — o comentário acima da
     regra base (desktop) explica por que ela fica em 36px lá. */
  .botao-pequeno {
    min-height: 44px;
  }
  /* Alvo de toque de 44px na faixa de quizzes (tarefa 6): a célula visual continua com 22px de altura
     (a faixa inteira precisa caber numa linha só) — quem cresce é só a área clicável, via um
     pseudo-elemento absoluto que estoura 11px para cima e para baixo (22 + 11 + 11 = 44). Só verticalmente
     (inset com 0 nas laterais): a largura da célula não muda, então os vizinhos da mesma linha nunca
     dividem área clicável entre si. .faixa-celula já é position:relative (regra base, acima). */
  .faixa-celula::before {
    content: "";
    position: absolute;
    inset: -11px 0;
  }
}
/* Tela 2: dentro do painel de comentários (que já é um card), o formulário de comentar não precisa de
   outra caixa em volta. */
.comentarios-painel .comentar form {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Diagramas Mermaid (tela 2, opção b; render/markdown.ts e /estatico/diagramas.js): sem JavaScript fica
   o código-fonte num <pre> comum (.prosa pre); com o SVG pronto, o código some e o diagrama ocupa um
   card com rolagem horizontal própria se não couber (nunca alarga a página). */
.diagrama {
  margin: 22px 0;
  max-width: 100%;
}
.diagrama--pronto .diagrama-fonte {
  display: none;
}
.diagrama-svg {
  padding: var(--esp-4);
  overflow-x: auto;
  border-radius: var(--raio-2);
  background: var(--surface);
  box-shadow: var(--sombra-1);
}
/* Largura mínima: no celular o diagrama rola na horizontal dentro do card em vez de encolher até
   ficar ilegível. */
.diagrama-svg svg {
  display: block;
  min-width: 560px;
  height: auto;
  margin: 0 auto;
}

/* Controle de ofertas (rotas/controle.tsx, só liderança; plano 2026-10-03-formato-v3, Parte B): o
   resumo por empresa e uma tabela por empresa, no mesmo desenho das tabelas da .prosa. A tabela rola
   na horizontal dentro do próprio bloco no celular, sem alargar a página. */
.controle-bloco {
  margin-top: var(--esp-9);
}
.controle-bloco h2 {
  margin: 0 0 var(--esp-4);
  font-size: var(--fs-h2);
  font-weight: 500;
}
.controle-rolagem {
  max-width: 100%;
  overflow-x: auto;
}
.controle-tabela {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: var(--surface);
  font-size: var(--fs-meta);
}
.controle-tabela--resumo {
  min-width: 640px;
}
.controle-tabela th,
.controle-tabela td {
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.controle-tabela thead th,
.controle-tabela tbody th {
  color: var(--ink);
  font: 600 var(--fs-meta) / 1.4 var(--sans);
  background: var(--bg);
}
.controle-tabela--resumo td {
  font-variant-numeric: tabular-nums;
}
.controle-tabela .controle-total {
  font-weight: 600;
}
.controle-tabela a {
  color: var(--acento);
  overflow-wrap: anywhere;
}
/* Links do site: "site" ou "site 1", "site 2" lado a lado (a URL inteira fica no title). */
.controle-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.controle-links a {
  white-space: nowrap;
}
.controle-vazio {
  color: var(--muted);
}
/* Celular: sem rolagem horizontal. Cada oferta vira um cartão (oferta em destaque, a situação logo
   abaixo e os demais campos com o rótulo de data-rotulo), e o resumo de cada empresa vira uma lista de
   selos com a contagem. O cabeçalho das colunas sai da tela, mas continua para leitor de tela. */
@media (max-width: 600px) {
  .controle-rolagem {
    overflow-x: visible;
  }
  .controle-tabela,
  .controle-tabela--resumo {
    min-width: 0;
  }
  .controle-tabela,
  .controle-tabela tbody,
  .controle-tabela tr,
  .controle-tabela td,
  .controle-tabela tbody th {
    display: block;
  }
  .controle-tabela {
    background: none;
  }
  .controle-tabela thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .controle-tabela tr {
    margin-bottom: var(--esp-3);
    padding: var(--esp-4);
    border: 1px solid var(--line);
    border-radius: var(--raio-2);
    background: var(--surface);
  }
  .controle-tabela td,
  .controle-tabela tbody th {
    padding: 0;
    border: 0;
  }
  .controle-tabela td + td {
    margin-top: var(--esp-2);
  }
  .controle-tabela td[data-rotulo] {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--esp-3);
  }
  .controle-tabela td[data-rotulo]::before {
    content: attr(data-rotulo);
    color: var(--muted);
  }
  .controle-tabela .controle-oferta {
    color: var(--ink);
    font: 600 var(--fs-corpo) / 1.35 var(--sans);
  }
  .controle-tabela .controle-situacao {
    margin-top: var(--esp-1);
    margin-bottom: var(--esp-3);
  }
  /* Resumo: o nome da empresa e, embaixo, os selos "Situação · n" e o total, quebrando linha. */
  .controle-tabela--resumo tr {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2);
  }
  .controle-tabela--resumo tbody th {
    flex: 1 0 100%;
    background: none;
    font-size: var(--fs-corpo);
  }
  .controle-tabela--resumo td,
  .controle-tabela--resumo td + td {
    margin: 0;
  }
  .controle-tabela--resumo td[data-rotulo] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--esp-2);
    padding: 3px var(--esp-2);
    border: 1px solid currentColor;
    border-radius: var(--raio-pilula);
    font: 600 var(--fs-etiqueta) / 1.3 var(--sans);
    color: var(--ink);
  }
  .controle-tabela--resumo td[data-rotulo]::before {
    color: inherit;
    font-weight: 500;
  }
  .controle-tabela--resumo td[data-situacao="sem-playbook"] {
    color: var(--alerta-forte);
  }
  .controle-tabela--resumo td[data-situacao="playbook-antigo"],
  .controle-tabela--resumo td[data-situacao="formato-antigo"] {
    color: var(--atencao-forte);
  }
  .controle-tabela--resumo td[data-situacao="v3-em-revisao"] {
    color: var(--acento);
  }
  .controle-tabela--resumo td[data-situacao="revisado"] {
    color: var(--ok-forte);
  }
}
/* Selo da situação: texto na cor do estado sobre --surface/--bg (pares -forte conferidos em
   tema.test.ts), com borda na mesma cor — sem fundo próprio. */
.selo-situacao {
  display: inline-block;
  padding: 3px var(--esp-2);
  border: 1px solid currentColor;
  border-radius: var(--raio-pilula);
  font: 500 var(--fs-etiqueta) / 1.3 var(--sans);
  white-space: nowrap;
}
.selo-situacao--sem-playbook {
  color: var(--alerta-forte);
}
.selo-situacao--playbook-antigo,
.selo-situacao--formato-antigo {
  color: var(--atencao-forte);
}
.selo-situacao--v3-em-revisao {
  color: var(--acento);
}
.selo-situacao--revisado {
  color: var(--ok-forte);
}

/* ===== Home por papel (plano 2026-10-04, protótipo em docs/design/Home aprovada) =====
   1a "Mesa de trabalho" (vendedor e avaliador, .home-mesa), 1c "Painel de liderança" (.home-lideranca)
   e, no celular, a 1d. A ordem do DOM (rotas/inicio.tsx) já é a ordem de leitura, de Tab e a visual do
   celular: aqui só há colunas, nunca grid-area. Mapa de cores do protótipo para os tokens no plano. */
.home-mesa,
.home-lideranca {
  padding-top: var(--esp-8);
}
.home-mesa-topo,
.home-lideranca-topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--esp-6) var(--esp-9);
  align-items: end;
}
.home-mesa-topo h1,
.home-lideranca-topo h1 {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}
.home-pendencias {
  margin: var(--esp-2) 0 0;
  color: var(--muted);
  font-size: var(--fs-corpo-lg);
}

/* Busca grande (CampoDeBusca grande + atalho "/", publico/inicio.js): campo de 52px no desktop. */
.home-busca {
  margin: 0;
}
.filtros-busca--grande {
  display: block;
}
.home-busca .filtros-busca-campo svg {
  left: var(--esp-5);
  width: 18px;
  height: 18px;
}
.home-busca input {
  width: 100%;
  min-height: 52px;
  padding: 0 52px 0 50px;
  border: 1px solid var(--acento-700);
  border-radius: var(--raio-3);
  background: var(--surface);
  color: var(--ink);
  font: 400 var(--fs-corpo-lg) var(--sans);
}
.home-busca input::placeholder {
  color: var(--placeholder);
}
.home-busca input:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
/* Dica da busca (CampoDeBusca com placeholderCurto): faz o papel do placeholder, que não muda com CSS —
   a longa no desktop, a curta ("Buscar ofertas…") no celular; some quando o campo tem texto. */
.busca-dica {
  position: absolute;
  left: 50px;
  right: 52px;
  top: 50%;
  overflow: hidden;
  color: var(--placeholder);
  font: 400 var(--fs-corpo-lg) var(--sans);
  white-space: nowrap;
  transform: translateY(-50%);
  pointer-events: none;
}
.busca-dica-curta {
  display: none;
}
.filtros-busca-campo input:not(:placeholder-shown) ~ .busca-dica {
  display: none;
}
.busca-atalho {
  position: absolute;
  right: var(--esp-4);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.busca-atalho kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--esp-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--raio-1);
  color: var(--muted);
  font: 400 var(--fs-etiqueta) / 1 var(--mono);
}

/* Linha "Continue de onde parou" | trilha compacta. Sem "Continue", a trilha ocupa a linha inteira. */
.home-mesa-linha {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--esp-5);
  margin-top: var(--esp-8);
}
.home-mesa-linha--sem-continue {
  grid-template-columns: minmax(0, 1fr);
}
.continue {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  gap: var(--esp-6);
  align-items: center;
  min-width: 0;
  padding: var(--esp-5);
  border-radius: var(--raio-3);
  background: var(--surface);
  box-shadow: var(--sombra-1);
}
.continue-capa {
  overflow: hidden;
  aspect-ratio: 5 / 3;
  border-radius: var(--raio-2);
}
.continue-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  min-width: 0;
}
.continue .home-etiqueta {
  color: var(--cor-equipe, var(--acento));
}
.continue-corpo h2 {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.continue-meta {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-meta);
}
.continue-acao {
  min-width: 0;
}

.trilha-compacta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: var(--esp-6);
  border-radius: var(--raio-3);
  background: var(--acento-900);
  box-shadow: 0 0 0 1px var(--acento-700);
}
.trilha-compacta-desktop {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}
.trilha-compacta-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
}
.trilha-compacta .home-etiqueta {
  color: var(--acento);
}
.trilha-compacta-ver {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--acento);
  font-size: var(--fs-meta);
  text-decoration: none;
}
.trilha-compacta-ver:hover,
.trilha-compacta-proximo a:hover,
.home-ofertas-catalogo:hover,
.painel-controle-abrir:hover,
.painel-ver-todas:hover {
  text-decoration: underline;
}
.trilha-compacta-barra {
  display: flex;
  gap: 3px;
}
.trilha-compacta-barra .etapa-segmento {
  height: 5px;
}
.trilha-compacta-proximo {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-corpo-lg);
  overflow-wrap: anywhere;
}
.trilha-compacta-proximo a {
  color: var(--acento);
  text-decoration: none;
}
.trilha-compacta-aviso {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-meta);
}
.trilha-compacta-concluida {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-corpo);
}
.trilha-compacta-celular {
  display: none;
}

/* "Ofertas da <equipe>": título e "Ver as N no catálogo" (sem chips de filtro: ajustes de 2026-10-04). */
.home-ofertas {
  margin-top: var(--esp-9);
}
.home-ofertas-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3) var(--esp-5);
  margin-bottom: var(--esp-4);
}
.home-ofertas-topo h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.novidade:focus-visible,
.painel-item a:focus-visible,
.trilha-compacta a:focus-visible,
.home-ofertas-catalogo:focus-visible,
.painel-controle-abrir:focus-visible,
.painel-ver-todas:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
.home-ofertas-catalogo,
.painel-controle-abrir,
.painel-ver-todas {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  color: var(--acento);
  font-size: var(--fs-corpo);
  text-decoration: none;
  white-space: nowrap;
}
.home-ofertas-vazio {
  margin: 0;
  color: var(--muted);
}
.home-ofertas-vazio a {
  color: var(--acento);
}
.ofertas-grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--esp-4);
}

/* Cartão compacto (componentes/card.tsx, variante "compacta"): no topo, a faixa com a capa gerada do
   Catálogo (ajustes de 2026-10-04: cor da empresa, ícone da fase e fabricantes; a mesma .capa-gerada e
   as mesmas --capa-cor/--capa-luz, só rearranjadas numa linha de 64px); no corpo, o título e embaixo a
   situação do quiz (amostra de cor + texto) e o status do playbook. */
.playbook-card--compacta {
  min-height: 44px;
}
.card-faixa {
  flex: none;
  height: 64px;
}
.card-faixa .capa-gerada {
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-rows: 1fr;
  grid-template-areas: "ico txt fab";
  align-items: center;
  gap: var(--esp-2);
  padding: 0 var(--esp-4);
}
.card-faixa .capa-icone {
  width: 28px;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--capa-luz) 70%, transparent));
}
/* Selos alinhados à direita; se não couberem, cortam à direita (flex-start), nunca por cima da fase. */
.card-faixa .capa-fabricantes {
  justify-content: flex-start;
  justify-self: end;
  flex-wrap: nowrap;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  gap: var(--esp-1);
}
.card-faixa .capa-fabricantes span {
  flex: none;
  padding: 4px 6px;
  font-size: 0.7rem;
}
.card-faixa .capa-fabricantes .logo {
  padding: 4px 6px;
}
.card-faixa .capa-fabricantes img {
  height: 16px;
  max-width: 56px;
  object-fit: contain;
}
/* A fase é texto: fundo --ink próprio, para o contraste do -neon (>= 4,5:1, tema.test.ts) não depender
   de onde cai o degradê da cor da empresa. */
.card-faixa .capa-fase {
  padding: 2px var(--esp-1);
  border-radius: var(--raio-1);
  background: var(--ink);
  color: var(--capa-luz);
  white-space: nowrap;
}
.card-corpo {
  flex: 1;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5) var(--esp-5);
}
.playbook-card--compacta h3 {
  margin: 0;
  font-size: var(--fs-corpo-lg);
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.card-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-1) var(--esp-3);
  margin-top: var(--esp-2);
  color: var(--muted);
  font-size: var(--fs-meta);
}
.playbook-card--compacta .card-situacao {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
  color: var(--muted);
  font: 400 var(--fs-meta) / 1.3 var(--sans);
}
.playbook-card--compacta .card-situacao::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--neutro-700);
}
.playbook-card--compacta .card-situacao--aprovado::before,
.playbook-card--compacta .card-situacao--concluido::before {
  background: var(--ok);
}
.playbook-card--compacta .card-situacao--refazer::before {
  background: var(--alerta);
}

/* "Novo e revisado": uma linha por pacote, a linha inteira é o link. */
.novidades {
  margin-top: var(--esp-9);
  padding: var(--esp-6) var(--esp-7);
  border-radius: var(--raio-3);
  background: var(--surface);
  box-shadow: var(--sombra-1);
}
.novidades-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-2) var(--esp-4);
  margin-bottom: var(--esp-3);
}
.novidades-topo h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.novidades-topo p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-corpo);
}
.novidades-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.novidades-lista li + li {
  border-top: 1px solid var(--line-soft);
}
.novidade {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) minmax(0, 220px);
  gap: var(--esp-4);
  align-items: center;
  min-height: 44px;
  padding: var(--esp-2) 0;
  color: var(--ink);
  text-decoration: none;
}
.novidade:hover .novidade-titulo {
  color: var(--acento);
}
.novidade-data {
  color: var(--muted);
  font: 400 var(--fs-etiqueta) / 1.3 var(--mono);
  letter-spacing: 0.08em;
}
.novidade-titulo {
  font-weight: 500;
  overflow-wrap: anywhere;
}
.novidade-origem {
  color: var(--muted);
  font-size: var(--fs-corpo);
}

/* 1c: Controle de ofertas em barras empilhadas (a largura de cada segmento vem do flex-grow no style;
   a cor, da classe), "Para revisar" e "Comentários recentes" em duas colunas. */
.painel-controle,
.para-revisar,
.comentarios-recentes {
  min-width: 0;
  padding: var(--esp-6) var(--esp-7);
  border-radius: var(--raio-3);
  background: var(--surface);
  box-shadow: var(--sombra-1);
}
.painel-controle {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin-top: var(--esp-8);
}
.painel-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
}
.painel-topo h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.painel-sub {
  margin: 0 0 0 auto;
  color: var(--muted);
  font-size: var(--fs-meta);
}
.painel-controle-linha {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: var(--esp-4);
  align-items: center;
}
.painel-controle-empresa {
  font-size: var(--fs-corpo-lg);
}
.barra-controle {
  display: flex;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.barra-situacao {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  min-width: 28px;
  height: 36px;
  padding: 0 var(--esp-3);
  overflow: hidden;
  container-type: inline-size;
  font-size: var(--fs-meta);
  white-space: nowrap;
}
.barra-situacao:first-child {
  border-radius: var(--raio-2) 0 0 var(--raio-2);
}
.barra-situacao:last-child {
  border-radius: 0 var(--raio-2) var(--raio-2) 0;
}
.barra-situacao:only-child {
  border-radius: var(--raio-2);
}
.barra-numero {
  font-weight: 600;
}
/* Segmento estreito demais para o rótulo: fica só o número, e o rótulo continua para leitor de tela
   (recorte, não display:none) e no title do segmento. */
@container (max-width: 96px) {
  .barra-rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
.barra-situacao--sem-playbook {
  background: var(--neutro-700);
  color: var(--ink);
}
.barra-situacao--antigo {
  background: var(--atencao-forte);
  color: var(--sobre-escuro);
}
.barra-situacao--v3-em-revisao {
  background: var(--acento);
  color: var(--sobre-escuro);
}
.barra-situacao--revisado {
  background: var(--ok-forte);
  color: var(--sobre-escuro);
}
.painel-colunas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-5);
  margin-top: var(--esp-7);
}
.painel-lista {
  margin: var(--esp-3) 0 0;
  padding: 0;
  list-style: none;
}
.painel-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--esp-4);
  padding: var(--esp-3) 0;
  border-top: 1px solid var(--line-soft);
}
.painel-item-corpo {
  min-width: 0;
}
.painel-item-titulo,
.painel-item-quem {
  margin: 0;
  overflow-wrap: anywhere;
}
.painel-item-titulo {
  font-size: var(--fs-corpo-lg);
  font-weight: 500;
}
/* Título com link: inline (quebra em duas linhas sem invadir o resumo), com padding vertical que leva a
   área de toque a 44px sem mudar a altura da linha (24px de linha + 2 × 10px). */
.painel-item-titulo a {
  padding: 10px 0;
  color: inherit;
  text-decoration: none;
}
/* Link "pacote · seção" no meio da linha do autor: continua inline (quebra junto com o texto), e o
   padding vertical (sem mudar a linha) leva a área de toque a 44px. */
.painel-onde a {
  padding: 14px 0;
  color: var(--muted);
  text-decoration: none;
}
.painel-item a:hover {
  color: var(--acento);
  text-decoration: underline;
}
.painel-item-resumo,
.painel-item-trecho {
  margin: var(--esp-1) 0 0;
  color: var(--muted);
  font-size: var(--fs-corpo);
  overflow-wrap: anywhere;
}
.painel-item-trecho {
  color: var(--ink);
}
.painel-item-quem {
  color: var(--muted);
  font-size: var(--fs-meta);
}
.painel-autor {
  color: var(--ink);
  font-weight: 500;
}
.painel-data {
  color: var(--muted);
  font: 400 var(--fs-etiqueta) / 1.6 var(--mono);
  white-space: nowrap;
}
.painel-vazio {
  margin: var(--esp-3) 0 0;
  color: var(--muted);
}
/* Catálogo: o filtro "Com apresentação" que veio da Home aparece como filtro ativo. */
.filtros-ativo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0 var(--esp-3);
  border-radius: var(--raio-pilula);
  background: var(--acento-900);
  color: var(--acento);
  font-size: var(--fs-meta);
}

@media (max-width: 1040px) {
  .home-ofertas-topo h2 {
    flex-basis: 100%;
  }
  .ofertas-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .continue {
    grid-template-columns: 140px minmax(0, 1fr);
  }
  .continue-acao {
    grid-column: 1 / -1;
  }
}

/* 1d (celular): um bloco por linha, na ordem do DOM. */
@media (max-width: 760px) {
  .home-mesa,
  .home-lideranca {
    padding-top: var(--esp-6);
  }
  .home-mesa-topo,
  .home-lideranca-topo,
  .home-mesa-linha,
  .painel-colunas {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-mesa-topo,
  .home-lideranca-topo {
    gap: var(--esp-4);
  }
  .home-mesa-topo h1,
  .home-lideranca-topo h1 {
    font-size: var(--fs-h2-lg);
  }
  .home-busca input {
    min-height: 48px;
    border-radius: var(--raio-pilula);
    font-size: var(--fs-corpo);
  }
  .busca-atalho {
    display: none;
  }
  .busca-dica {
    font-size: var(--fs-corpo);
  }
  .busca-dica-longa {
    display: none;
  }
  .busca-dica-curta {
    display: inline;
  }
  .home-mesa-linha {
    gap: var(--esp-3);
    margin-top: var(--esp-5);
  }
  .continue {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--esp-3);
    padding: var(--esp-5);
  }
  .continue-capa {
    display: none;
  }
  .continue-acao .botao {
    width: 100%;
    justify-content: center;
  }
  .trilha-compacta {
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  .trilha-compacta-desktop {
    display: none;
  }
  .trilha-compacta-celular {
    display: flex;
    align-items: center;
    gap: var(--esp-4);
    min-height: 44px;
    padding: var(--esp-3) var(--esp-4);
    border-radius: var(--raio-3);
    background: var(--acento-900);
    box-shadow: 0 0 0 1px var(--acento-700);
    color: var(--ink);
    text-decoration: none;
  }
  .trilha-compacta-celular::after {
    content: "\203A";
    margin-left: auto;
    color: var(--acento);
    font-size: var(--fs-h3);
  }
  .trilha-compacta-celular-rotulo {
    flex: none;
    color: var(--acento);
    font: 400 var(--fs-etiqueta) / 1.3 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .trilha-compacta-celular-proximo {
    min-width: 0;
    font-size: var(--fs-corpo);
    overflow-wrap: anywhere;
  }
  .home-ofertas {
    margin-top: var(--esp-7);
  }
  .home-ofertas-topo {
    gap: var(--esp-3);
  }
  .home-ofertas-catalogo {
    margin-left: 0;
  }
  .ofertas-grade {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--esp-2);
  }
  /* Cartão compacto no celular: a faixa (56px) em cima e, embaixo, a amostra do quiz e o título numa
     linha; sem o status do playbook (o protótipo 1d omite). O texto da situação continua para leitor
     de tela (font-size 0). */
  .card-faixa {
    height: 56px;
  }
  .card-corpo {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "amostra titulo";
    gap: var(--esp-3);
    align-items: center;
    padding: var(--esp-3) var(--esp-4);
  }
  .playbook-card--compacta h3 {
    grid-area: titulo;
  }
  .playbook-card--compacta .card-rodape {
    grid-area: amostra;
    margin: 0;
  }
  .playbook-card--compacta .card-playbook {
    display: none;
  }
  .playbook-card--compacta .card-situacao {
    font-size: 0;
  }
  .novidades,
  .painel-controle,
  .para-revisar,
  .comentarios-recentes {
    padding: var(--esp-5);
  }
  .novidade {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: var(--esp-3) 0;
  }
  .novidade-origem {
    font-size: var(--fs-meta);
  }
  .painel-controle-linha {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--esp-2);
  }
  .painel-sub {
    margin-left: 0;
  }
}