@import url("fonts/fonts.css");

/* ============================================================================
   Aulas Teacher Alv — folha compartilhada
   Fonte da verdade: DESIGN.md nesta pasta. Não mude um valor aqui sem atualizar
   o DESIGN.md junto. Identidade visual = teacheralv.com; a aula não declara
   cor nem fonte nenhuma. Contrato de classes: ver o cabeçalho de lesson.js.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
/* Identidade do teacheralv.com (lida do site em 17/08/2026): fundo #08090c,
   cartão #0f1115, texto #f8fafc/#a9b6c6, azul #298dff sobre #1064c6, raio 10px,
   Bricolage Grotesque + Inter + JetBrains Mono. A aula não declara cor nenhuma. */
:root{
  /* superfície e tinta */
  --paper:#08090c;
  --card:#0f1115;
  --ink:#f8fafc;
  --ink-soft:#a9b6c6;
  --ink-mute:#7c8798;
  --rule:#28303e;
  --rule-soft:#1c1f26;

  /* acento — o azul do site, o mesmo em toda aula */
  --accent:#298dff;
  --accent-deep:#1064c6;
  --accent-wash:color-mix(in srgb, var(--accent) 13%, var(--paper));

  /* semântico */
  --ok:#4cc38a;
  --ok-wash:#0f2a1e;
  --err:#f47174;
  --err-wash:#311719;
  --ink-wash:rgba(248,250,252,.055);

  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px -14px rgba(0,0,0,.6);

  /* tipografia — as fontes do site */
  --font-display:"Bricolage Grotesque",Inter,system-ui,sans-serif;
  --font-read:"Inter",system-ui,sans-serif;
  --font-ui:"Inter",system-ui,sans-serif;
  --font-data:"JetBrains Mono",ui-monospace,monospace;

  /* espaçamento — base 4px */
  --sp-2xs:4px; --sp-xs:8px; --sp-sm:12px; --sp-md:16px;
  --sp-lg:24px; --sp-xl:32px; --sp-2xl:48px; --sp-3xl:64px;

  /* raio — o 10px dos botões do site no meio da escala */
  --r-sm:6px; --r-md:10px; --r-lg:14px;

  --measure:68ch;
  --rail:186px;
  --motion:120ms ease-out;
}

/* ------------------------------------------------------------------ base -- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* trama fraca sobre o fundo escuro, o mesmo grão do site */
  background-image:radial-gradient(rgba(255,255,255,.016) 1px, transparent 1px);
  background-size:3px 3px;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0;}
p{margin:0 0 var(--sp-md);}
a{color:var(--accent);}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-sm);}

/* ---------------------------------------------------------------- shell --- */
.shell{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  min-height:100vh;
}
.column{
  min-width:0;
  max-width:940px;
  padding:0 var(--sp-xl) var(--sp-3xl);
}

/* ------------------------------------------------------- trilho de seção -- */
.rail{
  position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto;
  display:flex; flex-direction:column;
  padding:var(--sp-lg) 0;
  border-right:1px solid var(--rule-soft); background:var(--paper);
}
.rail-title{
  font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-mute); padding:0 var(--sp-md); margin-bottom:var(--sp-sm);
}
.rail ol{list-style:none;margin:0;padding:0;}
.rail li{margin:0;}
.rail a{
  display:flex; align-items:baseline; gap:9px;
  padding:7px var(--sp-md);
  color:var(--ink-soft); text-decoration:none; font-size:13.5px; line-height:1.3;
  border-left:2px solid transparent;
  transition:background var(--motion), color var(--motion), border-color var(--motion);
}
.rail a:hover{background:var(--rule-soft); color:var(--ink);}
.rail a .n{
  font-family:var(--font-data); font-size:11px; flex:0 0 auto;
  font-variant-numeric:tabular-nums; color:var(--ink-mute);
}
.rail a[aria-current="true"]{
  border-left-color:var(--accent); color:var(--accent);
  font-weight:600; background:var(--accent-wash);
}
.rail li.is-done a .n{color:var(--ok);}
.rail-foot{
  margin-top:auto; padding:var(--sp-md) var(--sp-md) 0;
  border-top:1px solid var(--rule-soft);
}
.rail-progress{
  font-family:var(--font-data); font-size:11px; font-variant-numeric:tabular-nums;
  color:var(--ink-mute); display:block; margin-bottom:var(--sp-xs);
}
.track{display:block;height:3px;background:var(--rule);border-radius:99px;overflow:hidden;}
.track span{display:block;height:100%;width:0;background:var(--accent);transition:width var(--motion);}

/* --------------------------------------------------- cabeçalho da aula ---- */
.masthead{
  border-left:3px solid var(--accent);
  padding:var(--sp-2xl) 0 var(--sp-lg) var(--sp-lg);
  margin-bottom:var(--sp-xl);
}
.masthead .kicker{
  font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent); margin-bottom:var(--sp-sm);
}
.masthead h1{
  font-size:clamp(28px,3.2vw,38px); line-height:1.13; font-weight:800;
  font-variation-settings:"opsz" 96; font-weight:800;
  max-width:24ch; margin-bottom:var(--sp-sm);
}
.masthead .standfirst{
  font-family:var(--font-read); font-size:17px; line-height:1.6;
  color:var(--ink-soft); max-width:60ch; margin-bottom:var(--sp-md);
}
.masthead .standfirst i,.masthead .standfirst em{color:var(--accent);}
.meta{display:flex;flex-wrap:wrap;gap:var(--sp-xs);align-items:center;}
.chip{
  font-size:12px; font-weight:600; letter-spacing:.03em; color:var(--ink-soft);
  border:1px solid var(--rule); border-radius:var(--r-sm);
  padding:5px 10px; background:var(--card); text-decoration:none;
}
.chip--level{
  color:var(--accent); border-color:var(--accent); background:var(--accent-wash);
  font-family:var(--font-data); font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------- seção de exercício --- */
.section{
  border-top:1px solid var(--rule-soft);
  padding-top:var(--sp-lg); margin-top:var(--sp-xl);
  scroll-margin-top:var(--sp-lg);
}
.section:first-of-type{border-top:0;margin-top:0;}
.section-head{margin-bottom:var(--sp-md);}
.eyebrow{
  display:flex; align-items:baseline; gap:var(--sp-sm); flex-wrap:wrap;
  font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:var(--sp-2xs);
}
.eyebrow .n{
  font-family:var(--font-data); font-size:12px; font-weight:600;
  letter-spacing:.04em; color:var(--accent); font-variant-numeric:tabular-nums;
}
.section h2{font-size:22px; line-height:1.25; font-variation-settings:"opsz" 40; font-weight:700; margin-bottom:var(--sp-2xs);}
.section h3{font-size:18px; line-height:1.30; margin-top:var(--sp-lg); font-variation-settings:"opsz" 28; font-weight:700;}
.hint{font-size:14px; color:var(--ink-mute); max-width:56ch; margin:0 0 var(--sp-md);}

/* ------------------------------------------------------ bloco de leitura -- */
.reading{
  font-family:var(--font-read); font-size:18px; line-height:1.7;
  color:var(--ink-soft); max-width:var(--measure);
}
.reading p{margin:0 0 var(--sp-md);}
.reading b,.reading strong{color:var(--ink);font-weight:600;}
.reading .target{color:var(--ink); font-weight:600; box-shadow:inset 0 -.42em 0 var(--accent-wash);}
.gloss{position:relative; border-bottom:1px dotted var(--accent); cursor:help; color:var(--ink);}
/* z-index acima da focusbar (z5): no modo foco a barra fixa cobria a definição
   das palavras da última linha do texto */
.gloss[data-def]:hover::after,.gloss[data-def].is-open::after{
  content:attr(data-def);
  position:absolute; left:0; top:100%; z-index:60; min-width:220px; max-width:340px;
  margin-top:var(--sp-2xs); padding:var(--sp-xs) var(--sp-sm);
  font-family:var(--font-ui); font-size:13.5px; line-height:1.45; color:var(--ink-soft);
  background:var(--card); border:1px solid var(--rule); border-radius:var(--r-md);
  box-shadow:var(--shadow);
}

.video{
  position:relative; aspect-ratio:16/9; width:100%; max-width:var(--measure);
  background:var(--card); border:1px solid var(--rule); border-radius:var(--r-lg);
  overflow:hidden; margin-bottom:var(--sp-md);
}
.video iframe,.video img{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover;}
.video-cover{cursor:pointer;}
.video-cover::after{
  content:"PLAY"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--font-data); font-size:13px; letter-spacing:.14em;
  color:var(--card); background:var(--ink); padding:8px 16px; border-radius:var(--r-sm);
}

/* -------------------------------------------------------- par de match ---- */
/* o match não é texto corrido, então não fica preso aos 68ch da leitura: com a
   coluna estreita, metade das definições quebrava em duas linhas, a coluna da
   direita ficava ~100px mais alta que a da esquerda e a última definição caía
   fora da tela na hora da aula */
.match{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);
  gap:var(--sp-sm); max-width:min(880px, 100%);
}
.match ul{list-style:none;margin:0;padding:0;}
.match .col-label{
  font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:var(--sp-xs);
}
.pair{
  display:block; width:100%; text-align:left; cursor:pointer;
  font-family:var(--font-ui); font-size:14.5px; line-height:1.45; color:var(--ink-soft);
  background:var(--card); border:1px solid var(--rule); border-radius:var(--r-md);
  padding:9px 13px; margin-bottom:5px;
  transition:border-color var(--motion), background var(--motion), color var(--motion);
}
.pair:hover{border-color:var(--ink-mute);}
.pair .word{font-weight:600; color:var(--ink);}
.pair .pos{font-family:var(--font-read); font-style:italic; color:var(--ink-mute); font-size:13px; margin-left:5px;}

/* botão de áudio: irmão do .pair dentro do <li>, nunca dentro dele —
   um <button> dentro de outro <button> é HTML inválido e o navegador
   expulsa o de dentro para fora do card */
.match li{display:flex; align-items:flex-start; gap:6px;}
.match li .pair{flex:1;}

/* --------------------------------------------------------- gap fill ------- */
/* o banco de palavras fica numa coluna fixa à direita das frases, e acompanha
   a rolagem — sem isso ele sumia da tela nas frases de baixo e obrigava a
   trabalhar com tudo pequeno para enxergar os dois */
[data-exercise="gap"]{
  display:grid; grid-template-columns:minmax(0,1fr) 180px;
  gap:0 var(--sp-lg); align-items:start;
  max-width:calc(var(--measure) + 180px + var(--sp-lg));
}
[data-exercise="gap"] .gap-list{grid-column:1; grid-row:1;}
[data-exercise="gap"] .actions{grid-column:1; grid-row:2;}
.bank{
  grid-column:2; grid-row:1 / span 2;
  position:sticky; top:var(--sp-md);
  display:flex; flex-direction:column; align-items:stretch; gap:var(--sp-xs);
  padding:var(--sp-sm); margin-bottom:var(--sp-md);
  border:1px dashed var(--rule); border-radius:var(--r-md); background:var(--card);
}
.bank .token{text-align:center;}
.token{
  font-family:var(--font-ui); font-size:14px; font-weight:600; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-sm);
  padding:5px 11px; cursor:pointer;
  transition:border-color var(--motion), background var(--motion), opacity var(--motion);
}
.token:hover{border-color:var(--ink-mute);}
.token.is-used{opacity:.3; pointer-events:none;}
.gap-list{list-style:none;margin:0;padding:0;max-width:var(--measure);counter-reset:gapline;}
.gap-list li{
  display:grid; grid-template-columns:26px 1fr; gap:var(--sp-xs);
  font-family:var(--font-read); font-size:18px; line-height:2; color:var(--ink-soft);
  padding:var(--sp-xs) 0; border-bottom:1px solid var(--rule-soft);
}
.gap-list li::before{
  counter-increment:gapline; content:counter(gapline,decimal-leading-zero);
  font-family:var(--font-data); font-size:11px; font-variant-numeric:tabular-nums;
  color:var(--ink-mute); padding-top:8px;
}
.blank{
  display:inline-block; min-width:9ch; text-align:center; cursor:pointer;
  font-family:var(--font-ui); font-size:15px; font-weight:600; color:var(--ink);
  border-bottom:1.5px solid var(--ink-mute); padding:0 6px 1px; margin:0 2px;
  transition:border-color var(--motion), color var(--motion);
}
.blank.is-empty{color:transparent;}
.blank:hover{border-bottom-color:var(--ink);}

/* -------------------------------------------------- múltipla escolha ------ */
.questions{list-style:none;margin:0;padding:0;max-width:var(--measure);counter-reset:q;}
.question{padding:var(--sp-md) 0; border-bottom:1px solid var(--rule-soft);}
.question:last-child{border-bottom:0;}
/* bloco com o número absoluto, não grid: como grid, todo filho direto virava
   item de grid e era promovido a bloco — o marcador de minuto (.stamp) caía
   numa linha própria, fora do lugar, ignorando o inline-block */
.stem{
  display:block; position:relative; padding-left:38px;
  font-family:var(--font-read); font-size:17.5px; line-height:1.5; color:var(--ink);
  margin-bottom:var(--sp-sm);
}
.stem::before{
  counter-increment:q; content:counter(q,decimal-leading-zero);
  position:absolute; left:0; top:6px;
  font-family:var(--font-data); font-size:11px; font-variant-numeric:tabular-nums;
  color:var(--ink-mute);
}
/* inline-block: como span inline, a borda vazava da caixa de linha e o número
   escapava do contorno quando a pergunta quebrava linha */
.stamp{
  display:inline-block; line-height:1.5; vertical-align:baseline;
  font-family:var(--font-data); font-size:12px; font-variant-numeric:tabular-nums;
  color:var(--accent); border:1px solid var(--rule); border-radius:var(--r-sm);
  padding:1px 7px 2px; margin-left:var(--sp-xs); white-space:nowrap;
}
.options{list-style:none; margin:0 0 0 38px; padding:0; display:grid; gap:6px;}
.options.is-row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.option{
  display:block; width:100%; text-align:left; cursor:pointer;
  font-family:var(--font-ui); font-size:14.5px; line-height:1.45; color:var(--ink-soft);
  background:var(--card); border:1px solid var(--rule); border-radius:var(--r-md);
  padding:10px 13px;
  transition:border-color var(--motion), background var(--motion), color var(--motion), box-shadow var(--motion);
}
.option:hover{border-color:var(--ink-mute);}
.why{
  display:none; margin:var(--sp-xs) 0 0 38px; padding:var(--sp-xs) var(--sp-sm);
  font-size:13.5px; line-height:1.5; color:var(--ink-soft);
  background:var(--card); border-left:2px solid var(--rule);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.why.is-open{display:block;}
.question.is-right .why{border-left-color:var(--ok);}
.question.is-wrong .why{border-left-color:var(--err);}

/* ------------------------------------------------- resposta escrita ------- */
.rows{list-style:none;margin:0;padding:0;max-width:var(--measure);counter-reset:row;}
.rows li{
  display:grid; grid-template-columns:26px 1fr; gap:var(--sp-2xs) var(--sp-xs);
  padding:var(--sp-sm) 0; border-bottom:1px solid var(--rule-soft);
}
.rows li::before{
  counter-increment:row; content:counter(row,decimal-leading-zero);
  font-family:var(--font-data); font-size:11px; font-variant-numeric:tabular-nums;
  color:var(--ink-mute); padding-top:8px;
  grid-column:1; grid-row:1;
}
/* o conteúdo do item — prompt, input e solução, com ou sem <div> em volta —
   fica sempre na coluna larga; sem isto o input caía na coluna de 26px do
   número e virava uma pílula onde não dava para digitar */
.rows li > *{grid-column:2;}
.rows .prompt{font-family:var(--font-read); font-size:17.5px; line-height:1.5; color:var(--ink); margin:0;}
.rows .cue{
  font-family:var(--font-data); font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent); margin-right:var(--sp-xs);
}
input[type="text"],textarea{
  font-family:var(--font-ui); font-size:14.5px; color:var(--ink);
  background:var(--card); border:1px solid var(--rule); border-radius:var(--r-md);
  padding:8px 11px; width:100%; max-width:520px; margin-top:6px;
  transition:border-color var(--motion), background var(--motion);
}
textarea{min-height:190px; line-height:1.6; max-width:var(--measure); resize:vertical;}
input[type="text"]:hover,textarea:hover{border-color:var(--ink-mute);}
.solution{display:none; font-size:13.5px; color:var(--ok); margin-top:5px;}
.solution.is-open{display:block;}

/* ---------------------------------------------------------- discussão ----- */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--sp-sm); max-width:calc(var(--measure) + 120px);
}
.card{
  font-family:var(--font-read); font-size:16px; line-height:1.5; color:var(--ink-soft);
  background:var(--card); border:1px solid var(--rule); border-left:2px solid var(--accent);
  border-radius:var(--r-md); padding:var(--sp-sm) var(--sp-md); cursor:pointer; text-align:left;
  transition:border-color var(--motion), color var(--motion), opacity var(--motion);
}
.card:hover{border-color:var(--ink-mute);}
.card.is-done{opacity:.5; border-left-color:var(--ok);}
details.useful{
  border:1px solid var(--rule); border-radius:var(--r-md); background:var(--card);
  padding:var(--sp-sm) var(--sp-md); margin-top:var(--sp-md); max-width:var(--measure);
}
details.useful>summary{
  cursor:pointer; list-style:none; font-size:13px; font-weight:600;
  letter-spacing:.02em; color:var(--accent);
}
details.useful>summary::-webkit-details-marker{display:none;}
details.useful>summary::before{content:"+ "; font-family:var(--font-data);}
details.useful[open]>summary::before{content:"– ";}
.phrases{display:flex;flex-wrap:wrap;gap:var(--sp-xs);margin-top:var(--sp-sm);}
.phrases span{
  font-family:var(--font-read); font-size:15px; color:var(--ink-soft);
  border:1px solid var(--rule); border-radius:var(--r-sm); padding:3px 9px; background:var(--paper);
}

/* ------------------------------------------------------------- notas ------ */
.note{
  border:1px solid var(--rule); border-left:2px solid var(--accent);
  border-radius:0 var(--r-md) var(--r-md) 0; background:var(--card);
  padding:var(--sp-sm) var(--sp-md); margin:0 0 var(--sp-md); max-width:var(--measure);
  font-size:14.5px; line-height:1.55; color:var(--ink-soft);
}
.note b{color:var(--ink);}
.note ul{margin:var(--sp-xs) 0 0; padding-left:var(--sp-md);}
.note li{margin-bottom:5px;}
.note li i,.note .ex{font-family:var(--font-read); font-size:15.5px; color:var(--ink);}

/* ------------------------------------------------------------ botões ------ */
.actions{display:flex;flex-wrap:wrap;gap:var(--sp-sm);align-items:center;margin-top:var(--sp-md);}
.btn{
  font-family:var(--font-ui); font-size:14px; font-weight:600;
  border:1px solid transparent; border-radius:var(--r-md);
  padding:9px 16px; cursor:pointer;
  transition:background var(--motion), border-color var(--motion), color var(--motion);
}
.btn--primary{background:var(--accent); color:#fff;}
.btn--primary:hover{background:var(--accent-deep);}
.btn--ghost{background:transparent; color:var(--ink-soft); border-color:var(--rule);}
.btn--ghost:hover{border-color:var(--ink-mute); color:var(--ink);}
.score{
  margin-left:auto; align-self:center;
  font-family:var(--font-data); font-size:13px; font-variant-numeric:tabular-nums;
  color:var(--ink-mute);
}
.score.is-full{color:var(--ok);}

/* ------------------------------------------------- estados compartilhados - */
/* selecionado: contorno de tinta neutro — nunca o acento, senão colide com o
   vermelho de erro (DESIGN.md, decisão de 17/08/2026) */
.is-selected{
  border-color:var(--ink) !important; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink);
}
.is-correct{
  border-color:var(--ok) !important; background:var(--ok-wash) !important;
  color:var(--ok); font-weight:600;
}
.is-wrong{
  border-color:var(--err) !important; background:var(--err-wash) !important; color:var(--err);
}
/* pares fechados do match: cada par com a própria cor, para ligar de longe a
   palavra à definição. Dez matizes, um por par (as aulas têm até 10), para
   que nenhuma cor se repita; escolhidas por distância perceptual (ΔE mínimo
   ~32 entre quaisquer duas, contra 21 e repetições na paleta antiga de 8, que
   tinha quatro azuis/verdes vizinhos — queixa do professor em 17/09/2026). O
   vermelho ficou de fora para não confundir com erro. O motor aplica
   hue-0..hue-9 pelo data-pair, então a mesma dupla recebe sempre a mesma cor. */
.pair.is-correct.hue-0{--hue:#3d8bff;}  /* azul */
.pair.is-correct.hue-1{--hue:#34d97b;}  /* verde */
.pair.is-correct.hue-2{--hue:#ffe14d;}  /* amarelo */
.pair.is-correct.hue-3{--hue:#22d3ee;}  /* ciano */
.pair.is-correct.hue-4{--hue:#c28cff;}  /* lilás */
.pair.is-correct.hue-5{--hue:#ff9a3c;}  /* laranja */
.pair.is-correct.hue-6{--hue:#ec4ff0;}  /* magenta */
.pair.is-correct.hue-7{--hue:#b5e61d;}  /* lima */
.pair.is-correct.hue-8{--hue:#d9b77e;}  /* areia */
.pair.is-correct.hue-9{--hue:#ff8fc8;}  /* rosa */
.pair.is-correct[class*="hue-"]{
  border-color:var(--hue) !important;
  background:color-mix(in srgb, var(--hue) 20%, var(--paper)) !important;
  color:var(--hue);
}
.pair.is-correct[class*="hue-"] .word{color:var(--hue);}

.blank.is-correct,.blank.is-wrong{background:transparent !important; font-weight:600;}
.blank.is-correct{border-bottom-color:var(--ok); color:var(--ok);}
.blank.is-wrong{border-bottom-color:var(--err); color:var(--err);}
.is-locked{pointer-events:none;}

/* ------------------------------------------------------- modo foco -------- */
body.focus-mode .section[data-section]{display:none;}
body.focus-mode .section[data-section].is-active{display:block;}
/* a barra de navegação existe nos dois modos: no foco troca a seção ativa,
   na rolagem leva à seção seguinte/anterior */
.focusbar{
  display:flex; position:sticky; bottom:0; z-index:5;
  gap:var(--sp-sm); align-items:center;
  margin-top:var(--sp-xl); padding:var(--sp-sm) 0;
  border-top:1px solid var(--rule); background:var(--paper);
}
.focusbar .where{
  margin-left:auto; font-family:var(--font-data); font-size:12px;
  font-variant-numeric:tabular-nums; color:var(--ink-mute);
}
.toggle{
  font-family:var(--font-ui); font-size:11px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-mute); background:transparent;
  border:1px solid var(--rule); border-radius:var(--r-sm); padding:5px 10px; cursor:pointer;
  transition:color var(--motion), border-color var(--motion), background var(--motion);
}
.toggle:hover{color:var(--ink); border-color:var(--ink-mute);}
.toggle[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink);}

/* ------------------------------------------------------- answer key ------- */
/* gerado pelo motor a partir da marcação; fechado por padrão, para o professor */
.keypanel{
  margin-top:var(--sp-2xl); max-width:var(--measure);
  border:1px solid var(--rule); border-radius:var(--r-md); background:var(--card);
  padding:var(--sp-sm) var(--sp-md);
}
.keypanel>summary{
  cursor:pointer; list-style:none; font-size:13px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute);
}
.keypanel>summary::-webkit-details-marker{display:none;}
.keypanel>summary::before{content:"+ "; font-family:var(--font-data); color:var(--accent);}
.keypanel[open]>summary::before{content:"– ";}
.keypanel h4{
  font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); margin:var(--sp-md) 0 var(--sp-2xs);
}
.keypanel h4.keyjump{cursor:pointer;}
.keypanel h4.keyjump:hover{text-decoration:underline;}
.keypanel ol{
  margin:0; padding-left:var(--sp-lg);
  font-size:14px; line-height:1.6; color:var(--ink-soft);
}
.keypanel b{color:var(--ink); font-weight:600;}
@media print{ .keypanel{display:none !important;} }

/* --------------------------------------------------------- rodapé --------- */
.colophon{
  margin-top:var(--sp-2xl); padding-top:var(--sp-md); border-top:1px solid var(--rule);
  font-size:12.5px; line-height:1.6; color:var(--ink-mute); max-width:var(--measure);
}
.toast{
  position:fixed; left:50%; bottom:var(--sp-lg); transform:translateX(-50%);
  background:var(--ink); color:var(--paper); font-size:13.5px;
  padding:9px 16px; border-radius:var(--r-md); box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity var(--motion);
}
.toast.is-open{opacity:1;}

/* --------------------------------------------------------------- imagem --- */
/* Foto que faz parte do exercício, não decoração: entra com legenda e mantém
   a mesma medida do bloco de leitura. */
.photo-strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--sp-sm); max-width:var(--measure); margin-top:var(--sp-md);
}
.photo-strip figure{margin:0;}
.photo-strip img,.article-img{
  display:block; width:100%; height:auto;
  border:1px solid var(--rule); border-radius:var(--r-md); background:var(--card);
}
.article-img{max-width:var(--measure); margin:0 0 var(--sp-md);}
.photo-strip figcaption{
  font-family:var(--font-ui); font-size:12.5px; color:var(--ink-mute);
  margin-top:var(--sp-2xs);
}

/* ------------------------------------------------------------------ fala --- */
/* Botão de áudio: ícone de volume no azul do site — que agora é o próprio
   --accent do sistema. O rótulo de texto do HTML ("audio") fica invisível mas
   segue lá para leitores de tela. Ícone via mask. Some na impressão. */
.spk{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; padding:0; margin-right:var(--sp-xs);
  font-size:0; color:transparent; overflow:hidden;
  background:transparent; border:1px solid var(--rule); border-radius:var(--r-sm);
  cursor:pointer; vertical-align:middle; flex:0 0 auto;
  transition:border-color var(--motion), background var(--motion);
}
.spk::before{
  content:""; display:block; width:15px; height:15px; flex:0 0 auto;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l6 5V4L7 9H3z'/%3E%3Cpath d='M16.5 8a5.5 5.5 0 0 1 0 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M19.5 5.5a10 10 0 0 1 0 13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l6 5V4L7 9H3z'/%3E%3Cpath d='M16.5 8a5.5 5.5 0 0 1 0 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M19.5 5.5a10 10 0 0 1 0 13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.spk:hover{border-color:var(--accent);}
.spk.is-playing{background:var(--accent); border-color:var(--accent);}
.spk.is-playing::before{background:#fff;}
.match li .spk{margin:9px 0 0;}
.reading p .spk{margin:2px var(--sp-xs) 0 0; float:left;}
.reading p.reading-now{box-shadow:inset 3px 0 0 var(--accent); padding-left:var(--sp-sm);}

@media print{ .spk{display:none !important;} }

/* ------------------------------------------------------- responsivo ------- */
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr);}
  .rail{
    position:static; height:auto; overflow:visible;
    border-right:0; border-bottom:1px solid var(--rule-soft); padding:var(--sp-md) 0;
  }
  .rail ol{display:flex; flex-wrap:wrap; gap:var(--sp-2xs); padding:0 var(--sp-md);}
  .rail a{border-left:0; border-bottom:2px solid transparent; padding:4px var(--sp-xs);}
  .rail a[aria-current="true"]{border-left:0; border-bottom-color:var(--accent);}
  .rail-foot{margin-top:var(--sp-sm);}
  .column{padding:0 var(--sp-md) var(--sp-2xl);}
  .masthead{padding-left:var(--sp-md);}
  .match,.cards{grid-template-columns:1fr;}
  .options,.why{margin-left:0;}
  .reading{font-size:16.5px;}
  /* tela estreita: o banco volta para cima das frases, horizontal e grudado
     no topo enquanto rola */
  [data-exercise="gap"]{display:block;}
  .bank{
    position:sticky; top:0; z-index:4;
    flex-direction:row; flex-wrap:wrap; align-items:center;
  }
  .bank .token{text-align:left;}
}

/* ------------------------------------------------------------ professor --- */
/* O personagem é um DESENHO (catálogo em _img/alv-*.webp), nunca foto: figura de
   corpo inteiro com contorno próprio, então não leva fio de luz nem recorte.
   Dois usos:
     .teacher        → figura + balão de fala, nos momentos que ensinam
     .teacher--solo  → só a figura, discreta à direita, nas demais seções     */
.teacher{
  display:flex; align-items:center; gap:var(--sp-sm);
  max-width:var(--measure); margin:0 0 var(--sp-md);
}
.teacher img{
  flex:0 0 auto; height:150px; width:auto; display:block;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));
}
.teacher .say{
  position:relative; flex:1 1 auto;
  background:var(--card); border:1px solid var(--rule); border-radius:var(--r-md);
  padding:var(--sp-sm) var(--sp-md);
  font-size:14.5px; line-height:1.55; color:var(--ink-soft);
}
.teacher .say b{color:var(--ink);}
.teacher .say p{margin:0;}
.teacher .say p + p{margin-top:var(--sp-xs);}
.teacher .say::before{
  content:""; position:absolute; left:-7px; top:50%; margin-top:-6px;
  width:12px; height:12px; transform:rotate(45deg); background:var(--card);
  border-left:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
/* só a figura: acompanha a seção sem competir com o exercício */
.teacher--solo{
  display:flex; justify-content:flex-end; align-items:flex-end;
  max-width:var(--measure); margin:calc(var(--sp-md) * -1) 0 var(--sp-xs);
  pointer-events:none;
}
.teacher--solo img{height:112px; opacity:.92;}
@media (max-width:720px){
  .teacher img{height:112px;}
  .teacher--solo img{height:78px;}
}
@media print{
  .teacher img{display:none;}
  .teacher--solo{display:none;}
  .teacher .say::before{display:none;}
  .teacher .say{border-left:2px solid var(--accent);}
}

/* ---------------------------------------------------------- impressão ----- */
@media print{
  :root{
    --paper:#fff; --card:#fff; --ink:#111; --ink-soft:#333; --ink-mute:#666;
    --rule:#bbb; --rule-soft:#ddd; --accent:#1064c6; --accent-deep:#0a4a94;
    --accent-wash:#eef4fc; --ok:#1c6b45; --ok-wash:#eef7f1;
    --err:#a23030; --err-wash:#fbeeee; --ink-wash:rgba(0,0,0,.05); --shadow:none;
  }
  .rail,.actions,.focusbar,.toast,.toggle,.video,.spk{display:none !important;}
  body{background:#fff;color:#000;background-image:none;}
  .shell{display:block;}
  .column{max-width:none;padding:0;}
  .section{break-inside:avoid;}
  body.focus-mode .section[data-section]{display:block !important;}
}

/* -------------------------------------------------- movimento reduzido ---- */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}

/* ------------------------------------------------- herdado das aulas ------ */
/* Regras que viviam como style= dentro de cada aula ate 21/09/2026. O pacote
   nao aceita estilo inline: mesmos valores, agora em um lugar so. */
.rail-foot .toggle{margin-top:12px;}
.note[data-results]{white-space:pre-wrap;}
details.useful .reading{font-size:16px;}
details.useful .reading h2{font-size:18px; margin:24px 0 8px;}
details.useful .reading h2:first-child{margin-top:14px;}
.section > .hint--spaced{margin-top:24px;}

/* ------------------------------------------- vocabulário com foto (A1) --- */
/* Curso A1 (24/09/2026): o aluno aprende a palavra pela imagem.
   O lado do significado vira uma grade de cards, foto 4:3 em cima e a
   definição curta embaixo. O motor não muda: ele embaralha o <li> e lê só o
   texto do card (a foto tem alt vazio, a definição é o nome do botão). */
.match--pics{grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr); max-width:min(1100px,100%);}
.match--pics > div:last-child ul{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-xs);
}
.match--pics > div:last-child li{display:block;}
.pair--pic{display:flex; flex-direction:column; height:100%; padding:0; margin:0; overflow:hidden;}
.pair--pic .pic{
  display:block; width:100%; aspect-ratio:4/3; height:auto; object-fit:cover;
  background:var(--rule-soft); border-bottom:1px solid var(--rule);
}
.pair--pic .def{display:block; padding:7px 10px 9px; font-size:13.5px; line-height:1.35;}

/* miniatura da palavra que falta: a mesma foto do match, de novo */
.gap-list--pics li{grid-template-columns:26px 68px 1fr; align-items:center;}
.gap-list--pics .thumb{
  display:block; width:68px; height:51px; object-fit:cover;
  border:1px solid var(--rule); border-radius:var(--r-sm); background:var(--rule-soft);
}

@media (max-width:720px){
  .match--pics{grid-template-columns:1fr;}
  .match--pics > div:last-child ul{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gap-list--pics li{grid-template-columns:22px 56px 1fr;}
  .gap-list--pics .thumb{width:56px; height:42px;}
}

/* ------------------------------------------ conversa e escrita com foto (A1) --- */
/* 24/09/2026: cartão de conversa com tema concreto ganha uma miniatura à esquerda (de
   preferência uma foto que a própria aula já usa no vocabulário). O card continua um
   <button class="card">: clicar na foto marca o card, e cartões sem foto convivem na
   mesma grade. A escrita ganha uma foto de partida acima da caixa de texto. */
.card--pic{display:flex; align-items:center; gap:var(--sp-sm); padding-left:var(--sp-sm);}
.card--pic .pic{
  flex:0 0 72px; width:72px; height:54px; object-fit:cover;
  border-radius:var(--r-sm); border:1px solid var(--rule); background:var(--rule-soft);
}
.writing-pic{margin:0 0 var(--sp-md); max-width:360px;}
.writing-pic img{
  display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r-md); border:1px solid var(--rule); background:var(--rule-soft);
}
@media print{ .card--pic .pic, .writing-pic{display:none;} }