/* Navegação do site e refinamentos visuais dentro das aulas publicadas. O publicar.ps1
   injeta a marcação e este arquivo só na cópia publicada; as aulas-fonte, o lesson.css e
   o lesson.js não mudam, e nada aqui mexe em comportamento: só aparência. Usa as
   variáveis do lesson.css, para ficar nativo no visual escuro da aula. */

/* ---------------------------------------------------- trilha fixa no topo -- */
/* Vidro fosco grudado no topo: o aluno sempre vê onde está (Home › A1 › Part › Class). */
.trilha-aula{
  position:sticky; top:0; z-index:6;
  display:flex; flex-wrap:nowrap; align-items:center; gap:6px;
  min-height:44px; margin:0 0 var(--sp-lg, 24px); padding:6px 0;
  overflow-x:auto; white-space:nowrap; scrollbar-width:none;
  background:rgba(8,9,12,.72);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule-soft, #1c1f26);
  font:600 13.5px/1.4 var(--font-ui, Inter, sans-serif); color:var(--ink-mute, #7c8798);
}
.trilha-aula::-webkit-scrollbar{display:none;}
.trilha-aula a{
  padding:6px 4px; border-radius:var(--r-sm, 6px);
  color:var(--ink-soft, #a9b6c6); text-decoration:none;
  transition:color 150ms ease-out;
}
.trilha-aula a:hover{color:var(--accent, #298dff);}
.trilha-aula [aria-current]{color:var(--ink, #f8fafc);}
.trilha-aula svg{width:14px; height:14px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
/* as seções não ficam escondidas atrás da trilha ao pular pelo menu lateral */
.section[data-section]{scroll-margin-top:60px;}
/* tela estreita: o banco de palavras das lacunas também gruda no topo; desce para
   baixo da trilha em vez de ficar escondido atrás dela */
@media (max-width:860px){
  .bank{top:44px;}
}

/* ------------------------------------------------- Previous / Next lesson -- */
.aula-pager{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-sm, 12px);
  margin:var(--sp-xl, 32px) 0 var(--sp-lg, 24px);
}
.aula-pager__link{
  display:flex; flex-direction:column; gap:6px; min-height:84px; justify-content:center;
  padding:var(--sp-md, 16px) var(--sp-lg, 24px);
  border:1px solid var(--rule, #28303e); border-radius:var(--r-lg, 14px);
  background:var(--card, #0f1115); text-decoration:none;
  transition:border-color 150ms ease-out, background 150ms ease-out;
}
.aula-pager__link:hover{border-color:var(--accent, #298dff); background:var(--accent-wash, #0f1115);}
.aula-pager__rotulo{
  font:700 11px/1 var(--font-ui, Inter, sans-serif); letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent, #298dff);
}
.aula-pager__titulo{font:700 16px/1.3 var(--font-display, Inter, sans-serif); color:var(--ink, #f8fafc);}
.aula-pager__link--next{grid-column:2; align-items:flex-end; text-align:right;}

/* foco por teclado nos links da navegação: anel na cor de destaque */
.trilha-aula a:focus-visible, .aula-pager__link:focus-visible{
  outline:none; box-shadow:0 0 0 2px var(--paper, #08090c), 0 0 0 4px var(--accent, #298dff);
}

/* ------------------------------------------------ exercícios: só aparência -- */
/* toque na alternativa: leve "afundar" (o clique e a correção seguem no lesson.js) */
.option{
  transition:border-color var(--motion, 120ms ease-out), background var(--motion, 120ms ease-out),
             color var(--motion, 120ms ease-out), box-shadow var(--motion, 120ms ease-out), transform 150ms ease-out;
}
.option:active{transform:scale(.98);}
/* acerto: além do verde, um ✓ (não depende só de cor) */
.option.is-correct::after{content:"\2713"; float:right; margin-left:10px; font-weight:800;}
.blank.is-correct::after{content:"\2009\2713"; font-weight:800;}

/* --------------------------------------- aviso de conquista (XP e badges) -- */
/* conclusão da aula ou badge nova: aparece embaixo, some sozinho, não bloqueia nada */
.ta-toast{
  position:fixed; left:50%; bottom:88px; z-index:50; transform:translate(-50%, 16px);
  display:flex; align-items:center; gap:12px; max-width:min(92vw, 380px);
  padding:12px 18px 12px 12px; border:1px solid var(--rule, #28303e); border-radius:var(--r-lg, 14px);
  background:var(--card, #0f1115); box-shadow:0 12px 32px rgba(0,0,0,.45);
  color:var(--ink, #f8fafc); font-family:var(--font-ui, Inter, sans-serif);
  opacity:0; pointer-events:none; transition:opacity 200ms ease-out, transform 200ms ease-out;
}
.ta-toast.is-open{opacity:1; transform:translate(-50%, 0);}
.ta-toast__icone{width:40px; height:40px; flex:0 0 40px; padding:9px; border-radius:50%;
  background:linear-gradient(135deg, #8b5cf6, var(--accent, #298dff)); color:#fff;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.ta-toast__txt{display:flex; flex-direction:column; line-height:1.3;}
.ta-toast__txt strong{font-size:15px; font-weight:800;}
.ta-toast__txt span{color:var(--ink-soft, #a9b6c6); font-size:13.5px;}

@media (max-width:600px){
  .aula-pager{grid-template-columns:1fr;}
  .aula-pager__link--next{grid-column:auto; align-items:flex-start; text-align:left;}
}
@media (prefers-reduced-motion:reduce){
  .option, .trilha-aula a, .aula-pager__link, .ta-toast{transition:none;}
  .option:active{transform:none;}
}
@media print{
  .trilha-aula, .aula-pager, .ta-toast{display:none;}
}