/* Os tokens vêm de _comum/tokens.css, o mesmo arquivo do site pessoal. Antes
   esta página tinha paleta própria, escrita à mão, que já divergia das outras
   duas em fundo, superfície e raio. Aqui só ficam os apelidos locais. */
:root {
  --card: var(--bg-elev);
  --line: var(--border);
  --fg: var(--text);
  --dim: var(--text-dim);
  --certo: var(--feito);
  --errado: var(--erro);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.7 var(--font);
}

.wrap {
  max-width: 780px;
  margin-inline: auto;
  padding: 44px 20px 90px;
}

h1 {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.sub {
  color: var(--dim);
  margin: 0 0 28px;
}

h2 {
  font-size: 1.1rem;
  margin: 40px 0 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.intro {
  color: var(--dim);
  margin: 0 0 18px;
  font-size: 0.94rem;
}

a {
  color: var(--accent);
}

/* ---------- progresso ---------- */

#progresso {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  padding: 10px 0 12px;
  margin-bottom: 8px;
}

.placar {
  margin: 0 0 8px;
  font-size: 0.88rem;
  color: var(--dim);
}

.barra {
  height: 5px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}

.barra-cheia {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.25s ease;
}

/* ---------- questao ---------- */

.questao {
  margin: 20px 0;
}

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

legend {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 0 0 12px;
  font-weight: 600;
}

.numero {
  flex: none;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--dim);
  font: 600 0.78rem/1.7em var(--display);
  text-align: center;
}

.alternativa {
  display: flex;
  gap: 12px;
  align-items: baseline;
  width: 100%;
  margin: 0 0 8px;
  padding: 12px 14px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.alternativa:hover:not(:disabled) {
  border-color: var(--accent);
}

.alternativa:disabled {
  cursor: default;
  opacity: 0.75;
}

/* a resposta certa aparece SEMPRE, mesmo quando o aluno erra: esconder o certo
   transforma o exercicio em adivinhacao */
.alternativa.certa {
  border-color: var(--certo);
  opacity: 1;
}

.alternativa.errada {
  border-color: var(--errado);
  opacity: 1;
}

.alternativa.escolhida {
  background: color-mix(in srgb, var(--card) 80%, var(--accent) 20%);
}

.letra {
  flex: none;
  color: var(--dim);
  font: 600 0.82rem/1.5 var(--display);
  text-transform: uppercase;
}

/* ---------- explicacao ---------- */

.porque {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: 11px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  background: var(--card);
}

.porque.acertou {
  border-left-color: var(--certo);
}

.porque.errou {
  border-left-color: var(--errado);
}

.veredito {
  margin: 0 0 6px;
  font-weight: 600;
}

.porque.acertou .veredito {
  color: var(--certo);
}

.porque.errou .veredito {
  color: var(--errado);
}

.texto {
  margin: 0;
  color: var(--dim);
}

.refazer {
  margin-top: 12px;
  padding: 7px 13px;
  font: 500 0.84rem/1 inherit;
  color: var(--accent);
  background: none;
  border: 1px solid var(--line);
  border-radius: 99px;
  cursor: pointer;
}

.refazer:hover {
  border-color: var(--accent);
}

/* ---------- rodape ---------- */

/* o voltar principal ganha peso: e o caminho de volta para a pagina da aula,
   de onde a pessoa chegou aqui */
.rodape .voltar { color: var(--fg); font-weight: 600; font-family: var(--display); }
.rodape .voltar:hover { color: var(--accent); }

.rodape {
  margin-top: 52px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--dim);
  font-size: 0.9rem;
}

#recomecar {
  padding: 7px 13px;
  font: 500 0.84rem/1 inherit;
  color: var(--dim);
  background: none;
  border: 1px solid var(--line);
  border-radius: 99px;
  cursor: pointer;
}

#recomecar:hover {
  color: var(--fg);
  border-color: var(--accent);
}

@media (max-width: 520px) {
  .wrap {
    padding: 28px 16px 70px;
  }
}

/* ---------- demonstracoes ---------- */
/*
 * O aluno nao le sobre o problema: ele ve o problema acontecer. Cada demo tem
 * um palco (o que esta na tela), um botao que faz a coisa acontecer, e UMA
 * linha de legenda. Texto longo aqui e sinal de que a demo nao esta mostrando.
 */

.demo {
  margin: 24px 0 38px;
}

.demo h3 {
  font-size: 1.02rem;
  margin: 0 0 4px;
}

.palco {
  display: grid;
  gap: 14px;
}

/* segundo palco ou painel logo abaixo de outro */
.afastado { margin-top: 14px; }

@media (min-width: 660px) {
  .palco.duplo {
    grid-template-columns: 1fr 1fr;
  }
}

/* Tres lados lado a lado. Empilhados eles viram uma lista, e o que a demo
   pede e comparacao — a mesma razao do .duplo.
   Em coluna estreita o cabecalho empilha: lado a lado, o titulo quebra em
   tres linhas e briga com o selo. */
.palco.tres .painel > h3 {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.palco.tres .selo { align-self: flex-start; }
/* Tres lados lado a lado. Empilhados eles viram uma lista, e o que a demo
   pede e comparacao — a mesma razao do .duplo. */
@media (min-width: 820px) {
  .palco.tres {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 560px) and (max-width: 819px) {
  .palco.tres {
    grid-template-columns: 1fr 1fr;
  }
}

.painel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}

.painel > h3 {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px;
  font: 600 0.74rem/1.4 var(--display);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.linha {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--bg);
  font: 0.83rem/1.45 var(--display);
  transition: border-color 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

.linha.entrou {
  border-color: var(--certo);
}

.linha.sumiu {
  border-color: var(--errado);
  color: var(--errado);
  text-decoration: line-through;
  opacity: 0.5;
}

.linha.velha {
  border-color: var(--errado);
  color: var(--errado);
}

.linha.achou {
  border-color: var(--accent);
}

.vazio-painel {
  margin: 0;
  color: var(--dim);
  font-size: 0.86rem;
}

/* Nota de rodape do painel: explica o que se esta vendo. Usava a classe do
   estado vazio, que diz "nao ha nada aqui" — sentido oposto. */
.nota-painel {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 0.85rem;
}

.controles {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* O controle vem depois do palco, pela regra do padrao. A excecao e o campo
   de busca: ele nao dispara uma acao, ele FILTRA o que o palco mostra, e ler
   o resultado de baixo para cima nao funciona. */
.controles.antes { margin: 0 0 14px; }

.acao {
  padding: 9px 16px;
  font: 600 0.87rem/1 inherit;
  /* o texto acompanha o tema. Fixo em #08131b, media 10.3:1 no escuro e so
     3.8:1 no claro — reprovava em AA no botao mais clicado da pagina. Com
     var(--bg) da 10.4 e 4.6. */
  color: var(--bg);
  background: var(--accent);
  border: none;
  border-radius: 99px;
  cursor: pointer;
}

.acao:disabled {
  opacity: 0.4;
  cursor: default;
}

.acao.secundaria {
  color: var(--dim);
  background: none;
  border: 1px solid var(--line);
  font-weight: 500;
}

.acao.secundaria:hover:not(:disabled) {
  color: var(--fg);
  border-color: var(--accent);
}

.busca {
  flex: 1 1 220px;
  min-width: 0;
  padding: 9px 13px;
  font: 0.9rem/1.3 inherit;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 99px;
}

/* O campo tirava o contorno do foco por completo, e nao havia nenhuma regra
   de :focus-visible no arquivo — quem navega por teclado dependia do anel
   padrao do navegador, que varia e some aqui. Agora o anel e declarado, e so
   o clique de mouse fica sem ele. */
.busca:focus {
  border-color: var(--accent);
}

.busca:focus:not(:focus-visible) {
  outline: none;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.selo {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font: 600 0.74rem/1 var(--display);
  color: var(--dim);
  white-space: nowrap;
}

.selo.bom {
  color: var(--certo);
  border-color: var(--certo);
}

.selo.ruim {
  color: var(--errado);
  border-color: var(--errado);
}

.legenda {
  margin: 12px 0 0;
  min-height: 1.5em;
  color: var(--dim);
  font-size: 0.92rem;
}

/* ---------- grade de cartoes que viram ---------- */

.cartoes {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.cartao {
  /* <button> centraliza o conteudo na vertical por conta propria: sem o flex em
     coluna, um cartao curto flutua no meio e a grade fica desalinhada */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 15px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.cartao:hover {
  border-color: var(--accent);
}

.cartao.aberto {
  border-color: var(--certo);
}

.cartao b {
  display: block;
  margin-bottom: 4px;
}

.cartao .frente {
  color: var(--dim);
  font-size: 0.9rem;
}

.cartao .verso {
  width: 100%;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--errado);
  font-size: 0.88rem;
}

/* ---------- camadas encaixadas: SGBD, banco, tabela ---------- */
/*
 * Eram três caixas aninhadas em que só a clicada acendia. Na prática não dava
 * para acertar a de fora: as internas cobriam quase toda a área dela, e o
 * clique caía sempre na de dentro. Pior, clicar em `jogo` acendia só o `jogo`,
 * como se `cliente` e `emprestimo` não fossem tabelas.
 *
 * Agora escolhe-se a CAMADA, pelos botões de cima ou por qualquer caixa dela,
 * e a camada inteira acende — as três tabelas juntas, que é o que a frase diz.
 */

.camadas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.camada-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font: 600 0.85rem/1 var(--display);
  color: var(--dim);
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.camada-btn:hover { border-color: var(--cor); color: var(--cor); }
.camada-btn[aria-pressed='true'] {
  color: color-mix(in srgb, var(--cor) var(--tinta-chip), #000);
  border-color: var(--cor);
  background: color-mix(in srgb, var(--cor) 14%, transparent);
}
.camada-btn .ponto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cor);
}

/* Moradas das cores de camada: ficam no :root, e nao na .pilha, porque os
   botoes de escolha da demonstracao 5 da Aula 01 NAO sao descendentes da
   .pilha. Declaradas la, var(--cor-sgbd) nao resolvia no botao, e o demos.js
   contornava lendo o valor ja resolvido e gravando o hex no style — o que
   congelava a cor do tema vigente no carregamento. No tema claro a bolinha
   ficava com o ciano do escuro, a 1,7:1. */
/* Quanto a tinta do texto de um chip precisa escurecer para vencer o PROPRIO
   fundo. O chip pinta o fundo com 14% da mesma cor do texto; no tema claro isso
   baixa a luminancia do fundo o bastante para derrubar o par para 3,82:1 na
   pilula acesa e 4,06:1 no ator `voce` — medido, reprovado em AA. No escuro o
   mesmo par da 6,54:1, entao la o valor e 100% e nada muda.
   86% e nao 90% porque a 90% o pior par ficava em 4,52:1: dois centesimos
   de folga sobre o piso nao sobrevivem a um ajuste de token la na frente. */
:root { --tinta-chip: 100%; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) { --tinta-chip: 86%; }
}
:root[data-theme='light'] { --tinta-chip: 86%; }

:root {
  --cor-sgbd: var(--esp-pagina);
  --cor-banco: var(--esp-tarefa);
  --cor-schema: var(--dim);
  --cor-tabela: var(--esp-arquivo);
}

.nivel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.nivel + .nivel, .nivel .nivel { margin-top: 12px; }
.n-sgbd { --cor: var(--cor-sgbd); }
.n-banco { --cor: var(--cor-banco); background: var(--bg); }
/* o schema e a camada que a turma menos vai mexer: fica presente, com
   contorno tracejado, sem competir com as outras tres */
.n-schema { --cor: var(--cor-schema); background: var(--card); border-style: dashed; }
.n-tabela { --cor: var(--cor-tabela); background: var(--bg); margin-top: 0; padding: 11px 12px; }

.nivel:hover { border-color: color-mix(in srgb, var(--cor) 55%, var(--line)); }
/* a camada inteira acende, nao so a caixa clicada */
.nivel.acesa {
  border-color: var(--cor);
  background: color-mix(in srgb, var(--cor) 9%, var(--card));
}

.etiqueta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  font-family: var(--display);
}
.nivel .nivel .etiqueta { font-size: 0.94rem; }
.etiqueta .ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: var(--cor);
  background: color-mix(in srgb, var(--cor) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--cor) 38%, transparent);
}
.etiqueta .ico svg { width: 18px; height: 18px; }
.etiqueta .qual { font-weight: 600; letter-spacing: -0.01em; }
.etiqueta .tipo {
  margin-left: auto;
  color: var(--dim);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}

.nota-lateral {
  margin: 10px 0 0;
  padding: 11px 13px;
  border-left: 2px solid var(--esp-tarefa);
  color: var(--dim);
  font-size: 0.88rem;
}
.nota-lateral code { font: 0.9em/1 var(--mono); }

.tabelas {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 12px;
}

/* ---------- diagramas da linha do tempo ----------
 *
 * SVG inline, desenhado a mao: sem biblioteca, sem imagem externa, sem
 * <style> dentro do SVG. Tudo em currentColor, entao o desenho acompanha o
 * tema sem duplicar paleta.
 *
 * UMA animacao por diagrama, e so no que esta aberto. Movimento espalhado
 * vira ruido; a animacao aqui carrega o argumento — a varredura que percorre
 * a base inteira, o ponto que navega ponteiro por ponteiro, o valor que liga
 * as duas tabelas.
 */

.palco-tempo { margin-top: 16px; }

.diagrama {
  margin: 0;
  padding: 16px 16px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.diagrama svg {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin-inline: auto;
  color: var(--fg);
}

.diagrama figcaption {
  margin-top: 10px;
  color: var(--dim);
  font-size: 0.88rem;
  text-align: center;
}

/* caixas e ligacoes */
.diagrama .no rect { fill: var(--bg); stroke: var(--border-strong); stroke-width: 1; }
.diagrama .no text { fill: var(--fg); font: 600 12px var(--display); text-anchor: middle; }
.diagrama .lig line { stroke: var(--border-strong); stroke-width: 1.4; fill: none; }
/* O autorrelacionamento da Aula 06 e uma curva, nao um segmento: a ligacao sai
   da caixa e volta para ela mesma. Sem esta regra o <path> herda o padrao do
   SVG — fill preto, sem traco — e vira uma mancha solida sobre a caixa. */
.diagrama .lig path { stroke: var(--border-strong); stroke-width: 1.4; fill: none; }
.diagrama .lig circle { fill: var(--esp-tarefa); }

/* tabelas */
.diagrama .tabela rect { fill: var(--bg); stroke: var(--border-strong); stroke-width: 1; }
.diagrama .tabela line { stroke: var(--line); stroke-width: 1; }
.diagrama .tabela.destaque rect { stroke: var(--accent); }
.diagrama .cab { fill: var(--dim); font: 600 10px var(--display); text-anchor: middle; letter-spacing: 0.04em; }
.diagrama .cel { fill: var(--fg); font: 400 12px var(--mono); text-anchor: middle; }
.diagrama .cel.chave { fill: var(--accent); font-weight: 600; }
.diagrama .nome-tab { fill: var(--dim); font: 600 11px var(--display); text-anchor: middle; }

/* rotulos */
.diagrama .rotulo { fill: var(--dim); font: 400 11px var(--display); text-anchor: middle; }
.diagrama .rotulo-lig { fill: var(--fg); font: 600 10px var(--display); text-anchor: middle; }
/* o uso concreto de cada formato: e o que tira o diagrama do abstrato */
.diagrama .uso { fill: var(--dim); font: 400 9px var(--display); text-anchor: middle; }

/* A varredura do hierarquico. Tracinhos marchando sao discretos demais para
   ler como movimento; o que se ve e o facho passando pedido a pedido. */
.diagrama .varre {
  fill: none;
  stroke: var(--errado);
  stroke-width: 2;
  stroke-dasharray: 9 7;
}
.diagrama.ativo .varre { animation: varrendo 0.9s linear infinite; }
@keyframes varrendo { to { stroke-dashoffset: -16; } }

.diagrama .facho {
  fill: color-mix(in srgb, var(--errado) 26%, transparent);
  stroke: var(--errado);
  stroke-width: 1;
}
.diagrama.ativo .facho { animation: passando 4s steps(1, end) infinite; }
@keyframes passando {
  0%, 24% { transform: translateX(0); }
  25%, 49% { transform: translateX(80px); }
  50%, 74% { transform: translateX(184px); }
  75%, 100% { transform: translateX(264px); }
}

/* Modelo em rede: cada seta acende na sua vez. Era um ponto com
   <animateMotion>, que nao anda quando o SVG nasce display:none — o
   navegador nao inicia a linha do tempo SMIL num sub-arvore escondida. */
.diagrama .hop {
  fill: none;
  stroke: var(--esp-tarefa);
  stroke-width: 2.4;
  /* pathLength="1" no SVG: o traco cobre exatamente o caminho, seja qual for
     o comprimento real. Antes era 120 no olho, e sobrava ou faltava. */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}
.diagrama.ativo .hop { animation: saltando 2.7s linear infinite; }
.diagrama.ativo .hop.h2 { animation-delay: 0.9s; }
.diagrama.ativo .hop.h3 { animation-delay: 1.8s; }
@keyframes saltando {
  0% { stroke-dashoffset: 1; opacity: 1; }
  22% { stroke-dashoffset: 0; opacity: 1; }
  33%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* O elo por valor, como um circuito.
 *
 * Era um traco que se desenhava e se apagava. Isso mostrava a LIGACAO, mas
 * nao o que a aula quer: o valor indo de uma tabela para a outra. Agora o
 * trilho fica sempre visivel e um pulso corre por ele, sem parar, chegando
 * no 7 do outro lado — que acende quando o pulso chega.
 *
 * O laco e perfeito porque o caminho tem pathLength="1": um traco de 0.18
 * com 0.82 de vao percorre exatamente o comprimento e volta ao inicio sem
 * emenda. Nao ha comeco nem fim de ciclo para pegar no estado errado.
 */

.diagrama .elo-trilho {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 34%, transparent);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.diagrama .elo-fluxo {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 0.18 0.82;
  stroke-dashoffset: 1;
  opacity: 0;
}
.diagrama.ativo .elo-fluxo {
  opacity: 1;
  animation: correndo 2.4s linear infinite;
}
@keyframes correndo { to { stroke-dashoffset: 0; } }

/* o 7 de destino acende quando o pulso chega */
.diagrama .chegada {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  opacity: 0;
  transform-origin: 301px 76px;
}
.diagrama.ativo .chegada { animation: chegando 2.4s ease-out infinite; }
@keyframes chegando {
  0%, 74% { opacity: 0; transform: scale(0.5); }
  84% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.25); }
}

/* Estas herdavam o `fill: none` da regra .elo, que deixou de existir quando o
   elo virou trilho + fluxo. Sem ele o navegador preenche a area fechada pela
   curva e o tracejado vira uma cunha preta. */
.diagrama .elo.conviver {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .diagrama.ativo .varre,
  .diagrama.ativo .hop { animation: none; stroke-dashoffset: 0; }
  .diagrama.ativo .elo-fluxo { animation: none; stroke-dasharray: none; opacity: 1; }
  .diagrama.ativo .chegada { animation: none; opacity: 0.9; transform: none; }
  .diagrama .hop { opacity: 1; }
  .diagrama.ativo .facho { animation: none; }
  .diagrama .facho { opacity: 0.5; }
}

/* ---------- linha do tempo ---------- */

.tempo {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.marco {
  width: 100%;
  padding: 13px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: 4px 4px 11px 11px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.marco:hover,
.marco.ativo {
  border-color: var(--accent);
}

.marco .ano {
  display: block;
  font: 600 0.76rem/1.6 var(--display);
  color: var(--dim);
}
.marco .nome { display: block; font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }
.marco .ex { display: block; margin-top: 3px; color: var(--dim); font-size: 0.8rem; }

/* a legenda dos marcos vira tres verbetes, nao um paragrafo corrido */
.verbete { margin: 0 0 7px; }
.verbete:last-child { margin-bottom: 0; }
.verbete b { color: var(--fg); font-family: var(--display); font-weight: 600; }

/* ---------- registro de operacoes ---------- */
/*
 * O painel mostra o ESTADO; o registro mostra o que aconteceu para chegar
 * nele. Sem ele a demo pede que o aluno deduza a operacao a partir do
 * resultado — e no modo SGBD a operacao e justamente o que a aula ensina:
 * quem manda o INSERT nao escolhe o id, o servidor devolve.
 */

.registro {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.registro h3 {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dim);
}

.log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.log li {
  display: grid;
  grid-template-columns: 4.2em 5.4em 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
}
.log li:first-child { border-top: none; }

.log .hora { color: var(--dim); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.log .ator {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  font: 600 0.72rem/1.5 var(--display);
  color: color-mix(in srgb, var(--quem) var(--tinta-chip), #000);
  background: color-mix(in srgb, var(--quem) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--quem) 40%, transparent);
}
.log .ana { --quem: var(--esp-pagina); }
.log .bruno { --quem: var(--esp-arquivo); }
.log .servidor { --quem: var(--esp-tarefa); }

.log .op { color: var(--fg); }
.log .resultado {
  margin-left: 10px;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
  font: 500 0.76rem/1.6 var(--display);
  white-space: nowrap;
}
.log .planilha { --quem: var(--esp-arquivo); }
.log .banco { --quem: var(--esp-tarefa); }
/* as familias de comando: DDL mexe na forma, DML no conteudo, DCL em quem pode */
.log .ddl { --quem: var(--esp-pagina); }
.log .dml { --quem: var(--esp-quiz); }
.log .dcl { --quem: var(--esp-arquivo); }
.log .voce { --quem: var(--accent); }
.log .campo { --quem: var(--esp-arquivo); }
.log .entidade { --quem: var(--esp-quiz); }
.log .op code {
  display: inline-block;
  font: 0.86em/1.5 var(--mono);
  color: var(--dim);
}
.log > li.perdeu > .op { color: var(--errado); }
.log > li.ganhou > .op { color: var(--certo); }
/* no registro em par quem sinaliza e a borda e o selo do resultado; pintar
   os paragrafos inteiros deixa a coluna toda vermelha ou verde e cansa */
.log.par > li.perdeu > .op,
.log.par > li.ganhou > .op { color: var(--fg); }

/* ---------- registro em par ----------
 *
 * Quando os dois lados fazem a MESMA coisa ao mesmo tempo, empilhar numa
 * lista unica obriga o aluno a parear as linhas de cabeca. Lado a lado, o
 * registro tem a mesma leitura dos paineis que estao logo acima.
 */

.log.par {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.log.par li {
  display: block;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.log.par .coluna.perdeu { border-color: color-mix(in srgb, var(--errado) 45%, var(--line)); }
.log.par .coluna.ganhou { border-color: color-mix(in srgb, var(--certo) 45%, var(--line)); }
.log.par .coluna.perdeu .resultado { color: var(--errado); border-color: var(--errado); }
.log.par .coluna.ganhou .resultado { color: var(--certo); border-color: var(--certo); }

.log.par .ator { display: inline-block; margin-bottom: 8px; }

.log.par .op {
  margin: 0 0 6px;
  color: var(--fg);
  font-size: 0.86rem;
}
.log.par .op:last-child { margin-bottom: 0; }
.log.par .op code { display: block; margin-bottom: 4px; }
.log.par .resultado { margin-left: 0; }

/* o veredito fecha embaixo, nas duas colunas */
/* O .so-veredito nao tem hora nem ator: e uma frase so. Sem isto ele herda a
   grade de tres colunas do .log li (hora, ator, operacao) e o texto cai na
   primeira — 4.2em de largura — quebrando quase letra a letra. */
.log .so-veredito {
  display: block;
}

.log.par .so-veredito {
  grid-column: 1 / -1;
  border: none;
  border-left: 2px solid var(--line);
  border-radius: 0;
  background: none;
  padding: 2px 0 2px 13px;
}
.log.par .so-veredito.perdeu { border-left-color: var(--errado); }
.log.par .so-veredito .op { color: var(--dim); }

@media (max-width: 620px) {
  .log.par { grid-template-columns: 1fr; }
}

/* ---------- comandos por familia (Aula 02) ---------- */

.comandos {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.comando {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 12px 14px;
  text-align: left;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cor);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.comando.ddl { --cor: var(--esp-pagina); }
.comando.dml { --cor: var(--esp-quiz); }
.comando.dcl { --cor: var(--esp-arquivo); }
.comando:hover { background: var(--bg-hover); }
.comando.aceso { border-color: var(--cor); background: color-mix(in srgb, var(--cor) 10%, var(--card)); }

.comando code { font: 0.82rem/1.4 var(--mono); color: var(--fg); }
.comando .familia { display: flex; gap: 8px; align-items: baseline; font-size: 0.8rem; color: var(--dim); }
.comando .familia b { color: var(--cor); font-family: var(--display); letter-spacing: 0.02em; }

/* consulta exibida como bloco, na demo de independencia */
/* Varios blocos empilhados so precisam de respiro entre eles. NAO use o
   `.comandos` para isso: ele e uma grade `auto-fit` de 270px e, num painel
   largo, quebra em duas colunas de 331px — menos que a linha da notacao
   relacional, que mede 560px e nascia com barra de rolagem. */
.consulta + .consulta { margin-top: 8px; }
.consulta {
  margin: 0;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.consulta code { font: 0.84rem/1.6 var(--mono); color: var(--fg); white-space: pre; }

/* ---------- garimpo do minimundo (Aula 03) ---------- */

.frases { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.frase {
  display: flex;
  gap: 10px;
  align-items: baseline;
  width: 100%;
  padding: 9px 11px;
  text-align: left;
  font: inherit;
  font-size: 0.88rem;
  color: var(--dim);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.frase:hover { border-color: var(--accent); }
.frase .marca { flex: none; width: 1em; color: var(--dim); font-weight: 700; }
.frase.dentro { color: var(--fg); border-color: color-mix(in srgb, var(--certo) 50%, var(--line)); }
.frase.dentro .marca { color: var(--certo); }

/* os tres testes, aparecendo em cascata */
.testes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.teste {
  display: grid;
  grid-template-columns: 1.4em 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-sm);
  animation: surgindo 0.28s ease-out both;
  animation-delay: var(--atraso, 0s);
}
@keyframes surgindo { from { opacity: 0; transform: translateY(-4px); } }
.teste .sinal { font-weight: 700; }
.teste .resposta { color: var(--dim); font-size: 0.84rem; }
.teste.passou { border-left-color: var(--certo); }
.teste.passou .sinal { color: var(--certo); }
.teste.falhou { border-left-color: var(--errado); }
.teste.falhou .sinal { color: var(--errado); }
.teste.nem-rodou { opacity: 0.5; }

/* painel que ganha ou perde a comparacao */
.painel.ruim { border-color: color-mix(in srgb, var(--errado) 50%, var(--line)); }
.painel.bom { border-color: color-mix(in srgb, var(--certo) 50%, var(--line)); }

/* a frase com os verbos clicaveis */
.frase-alvo { margin: 0 0 16px; font-size: 1.05rem; line-height: 2.1; }
.verbo {
  padding: 3px 10px;
  font: 600 1rem/1 var(--display);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  cursor: pointer;
}
.verbo:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.verbo.escolhido { color: var(--bg); background: var(--accent); border-color: var(--accent); }

/* notacao MER: retangulo e entidade, losango e relacionamento */
.diagrama .entidade rect { fill: var(--bg); stroke: var(--fg); stroke-width: 1.4; }
.diagrama .entidade text { fill: var(--fg); font: 600 12px var(--display); text-anchor: middle; }
.diagrama .relacionamento polygon { fill: var(--bg); stroke: var(--accent); stroke-width: 1.4; }
.diagrama .relacionamento text { fill: var(--accent); font: 600 11px var(--display); text-anchor: middle; }
/* a cardinalidade fica na ponta da ligacao, e e o que muda quando se escolhe */
.diagrama .card { fill: var(--esp-quiz); font: 700 13px var(--mono); text-anchor: middle; }

/* ---------- notacao de atributo no MER (Aula 04) ---------- */

.diagrama .atr { fill: var(--bg); stroke: var(--fg); stroke-width: 1.3; }
.diagrama .atr.fora { fill: none; }
.diagrama .atr.derivado { stroke-dasharray: 5 4; }
.diagrama .atr-nome { fill: var(--fg); font: 400 11px var(--display); text-anchor: middle; }

/* ---------- grade de celulas repetidas ---------- */

.chips {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

.chip {
  padding: 7px 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  font: 0.74rem/1.3 var(--display);
  text-align: center;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.chip.novo {
  border-color: var(--certo);
  color: var(--certo);
}

.chip.velho {
  border-color: var(--errado);
  color: var(--errado);
}

.ficha {
  padding: 13px;
  border: 1px solid var(--accent);
  border-radius: 11px;
  background: var(--bg);
  font: 0.86rem/1.5 var(--display);
}

.aponta {
  margin: 10px 0 0;
  color: var(--dim);
  font-size: 0.86rem;
}