/* Cursos no navegador: índice (cursos.html), página de curso (curso-*.html) e player (licao.html).
   Escrito à mão. Só tokens de assets/tokens.css (claro e escuro); nada de estilo inline (CSP). */

/* cor de cada curso */
.t-cf { --c: var(--curso-cf); } .t-hb { --c: var(--curso-hb); } .t-pb { --c: var(--curso-pb); }
.t-sb { --c: var(--curso-sb); } .t-gp { --c: var(--curso-gp); }

[hidden] { display: none !important; }
.ico-st { font-weight: 800; }
.cursos-topo { padding: 24px 0 8px; }
.curso-num { font-weight: 800; font-size: .95rem; color: var(--text); margin: 0 0 .4em; }
.course .curso-num { margin-top: 10px; }
.curso-prog { font-size: .95rem; color: var(--ok); font-weight: 700; margin: 0; }
.curso-prog:empty { display: none; }

/* ---------------------------------------------------------------- página do curso */
.curso-hero { padding: 24px 0 32px; display: grid; gap: 24px; align-items: center; }
.curso-hero h1 { font-size: clamp(2rem, 6vw, 3rem); color: var(--text); }
.curso-hero .kicker a { color: inherit; }
.curso-hero .lead { color: var(--c); font-weight: 700; }
.curso-hero .muted { max-width: 38em; }
.curso-hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.curso-capa img { border-radius: var(--radius-lg); border: 1px solid var(--border); width: 100%; }
@media (min-width: 820px) { .curso-hero { grid-template-columns: 1.15fr .85fr; padding-top: 40px; } }

.curso-unidades { padding-bottom: 56px; }
.unidade { padding: 28px 0; border-top: 1px solid var(--border); }
.unidade h2 { color: var(--c); }
.unidade > .muted { max-width: 42em; }
.licoes { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.lc { display: flex; gap: 14px; align-items: flex-start; height: 100%; min-height: 44px; padding: 14px 16px;
  border-radius: var(--radius); background: var(--glass); border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.lc:hover { border-color: var(--border-strong); background: var(--glass-2); color: var(--text); }
.lc-n { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  border: 2px solid var(--c); color: var(--c); font-weight: 800; }
.lc.feita .lc-n { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.lc-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lc-title { font-weight: 800; line-height: 1.3; }
.lc-meta { color: var(--text-2); font-size: .9rem; }
.lc-st { color: var(--ok); font-size: .9rem; font-weight: 800; }
.lc-st:empty { display: none; }

.caderno { margin-top: 18px; border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 16px; background: var(--glass); }
.caderno:last-of-type { border-bottom: 1px solid var(--border); }
.caderno summary { color: var(--text); }
.md { max-width: 40rem; }
.md h3, .md h4 { font-size: 1.15rem; margin-top: 1.2em; }
.md ul, .md ol { padding-left: 1.3em; }
.md li { margin-bottom: .35em; }
.md blockquote { margin: 0 0 1em; padding-left: 14px; border-left: 3px solid var(--border-strong); color: var(--text-2); }
.caderno .md p, .caderno .md li { color: var(--text); }
.fontes { padding-left: 1.2em; }
.fontes li { margin-bottom: .8em; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- player */
.player-wrap { width: min(100% - 2 * var(--gutter), 44rem); padding: 8px 0 64px; }
.player-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 14px; }
.player-sair { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; }
.prog { flex: 1 1 14rem; display: flex; flex-direction: column; gap: 4px; }
.prog-t { font-size: .85rem; color: var(--text-2); font-weight: 700; }
progress { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border: 1px solid var(--border-input);
  border-radius: var(--radius-pill); background: var(--glass-2); overflow: hidden; color: var(--ok); }
progress::-webkit-progress-bar { background: var(--glass-2); border-radius: var(--radius-pill); }
progress::-webkit-progress-value { background: var(--ok); border-radius: var(--radius-pill); transition: width .3s ease; }
progress::-moz-progress-bar { background: var(--ok); border-radius: var(--radius-pill); }
.player-k { margin-bottom: .3em; }
.player-k a { color: inherit; }
.player-h1 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); margin-bottom: .6em; }

.etapa { background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(16px, 4vw, 28px); }
.etapa-k { display: flex; flex-wrap: wrap; gap: 6px 14px; font-weight: 800; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c, var(--accent)); margin-bottom: .5em; }
.retry { color: var(--err); }
.etapa-h { font-size: clamp(1.3rem, 3.6vw, 1.6rem); line-height: 1.3; scroll-margin-top: 16px; }
.etapa-h:focus { outline: none; }
.etapa-h:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.instr { color: var(--text-2); font-size: .95rem; }

.fig { margin: 0 0 18px; }
.fig img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); background: var(--noite-2); }
.fig figcaption { margin-top: 10px; font-family: var(--font-display); font-size: 1.1rem; line-height: 1.6; }
.etapa .md p { font-size: 1.08rem; line-height: 1.75; }
.quadro { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.6; padding: 18px; border-radius: var(--radius); border: 2px dashed var(--border-strong); }

/* alternativas (radio nativo, visível) */
.opcoes { display: grid; gap: 10px; }
.opcao { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; cursor: pointer;
  border: 2px solid var(--border-strong); border-radius: 16px; background: var(--glass); }
.opcao:hover { background: var(--glass-2); }
.opcao input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--sel); }
.opcao:has(input:checked) { border-color: var(--sel); background: var(--sel-bg); box-shadow: inset 0 0 0 1px var(--sel); }
.opcao:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.opcao:has(input:disabled) { cursor: default; }
.op-t { flex: 1; }
.op-st { flex: none; font-weight: 800; font-size: .9rem; }
.opcao.ok { border-color: var(--ok); background: var(--ok-bg); box-shadow: none; } .opcao.ok .op-st { color: var(--ok); }
.opcao.err { border-color: var(--err); background: var(--err-bg); box-shadow: none; } .opcao.err .op-st { color: var(--err); }

.frase { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.9; }
.lacuna { display: inline-block; min-width: 6em; padding: 0 6px; border-bottom: 3px solid var(--sel); text-align: center; font-weight: 800; }
.lacuna.vazia .lacuna-w::before { content: "\00a0"; }

/* fichas (pares e categorias) */
.chip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; min-height: 48px; padding: 10px 12px; text-align: left;
  font: 600 .98rem/1.35 var(--font-body); color: var(--text); background: var(--glass); cursor: pointer;
  border: 2px solid var(--border-strong); border-radius: 14px; }
.chip:hover { background: var(--glass-2); }
.chip[aria-pressed="true"] { border-color: var(--sel); background: var(--sel-bg); box-shadow: inset 0 0 0 2px var(--sel); }
.chip[aria-pressed="true"]::after { content: "selecionado"; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sel); }
.chip[aria-disabled="true"] { cursor: default; }
.chip-t { flex: 1 1 8rem; overflow-wrap: anywhere; }
.par-tag:empty { display: none; }
.par-tag { flex: none; display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 999px; font-weight: 800; color: var(--bg); background: var(--pc, var(--sel)); }
.par-st { font-weight: 800; font-size: .88rem; }
.par-st:empty { display: none; }
.a0 { --pc: var(--par-1); } .a1 { --pc: var(--par-2); } .a2 { --pc: var(--par-3); } .a3 { --pc: var(--par-4); } .a4 { --pc: var(--par-5); }
.chip.ligado { border-color: var(--pc); border-style: solid; }
.chip.ok, .seq-it.ok { border-color: var(--ok); background: var(--ok-bg); box-shadow: none; } .chip.ok .par-st, .seq-it.ok .par-st { color: var(--ok); }
.chip.err, .seq-it.err { border-color: var(--err); background: var(--err-bg); border-style: dashed; box-shadow: none; } .chip.err .par-st, .seq-it.err .par-st { color: var(--err); }
.chip.ok::after, .chip.err::after { content: none; }

.pares { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.col-h { font-family: var(--font-body); font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin: 0 0 8px; }
.col-l, .banco, .caixa-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.banco { display: flex; flex-wrap: wrap; margin-bottom: 18px; }
.banco > li { flex: 1 1 14rem; }
.banco-vazio { padding: 10px 0; }
.caixas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.caixa { padding: 12px; border-radius: 16px; border: 2px solid var(--pc); background: var(--glass); display: flex; flex-direction: column; gap: 10px; }
.caixa-h { font-family: var(--font-body); font-size: 1rem; font-weight: 800; color: var(--pc); margin: 0; }
.caixa-b { min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 2px dashed var(--pc); background: transparent; color: var(--text);
  font: 800 .95rem var(--font-body); cursor: pointer; }
.caixa-b:hover { background: var(--glass-2); }
.caixa-b[aria-disabled="true"] { opacity: .65; cursor: default; }

/* ordenar */
.seq { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.seq-it { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 12px; border: 2px solid var(--border-strong); border-radius: 14px; background: var(--glass); }
.seq-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--border-strong); font-weight: 800; }
.seq-t { flex: 1; min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; }
.seq-bs { flex: none; display: flex; gap: 6px; }
.seq-b { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--border-strong); background: var(--glass-2); color: var(--text); font: 800 1.2rem var(--font-body); cursor: pointer; }
.seq-b:hover { border-color: var(--sel); }
.seq-b[aria-disabled="true"] { opacity: .4; cursor: default; }

/* estimar */
.est-lab { font-weight: 800; }
.est-v { font-family: var(--font-display); font-size: 1.6rem; color: var(--c, var(--accent)); margin-left: 6px; }
.est-row { display: flex; align-items: center; gap: 12px; }
.est-row input[type="range"] { flex: 1; min-width: 0; height: 44px; accent-color: var(--sel); margin: 0; }
.est-b { flex: none; width: 48px; height: 48px; border-radius: 999px; border: 2px solid var(--border-strong); background: var(--glass-2); color: var(--text); font: 800 1.4rem var(--font-body); cursor: pointer; }
.est-b:disabled { opacity: .5; cursor: default; }
.est-lim { display: flex; justify-content: space-between; color: var(--text-2); font-size: .85rem; margin-top: 4px; }

/* flashcard */
.flash-wrap { perspective: 900px; }
.flash { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 12rem; padding: 24px;
  border-radius: var(--radius-lg); border: 2px solid var(--c, var(--accent)); background: var(--glass-2); color: var(--text); cursor: pointer; text-align: center;
  transition: transform .35s ease; }
.flash.virado { transform: rotateX(360deg); }
.flash-f { font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 1.9rem); line-height: 1.25; font-weight: 700; }
.flash-b { font-size: 1.12rem; line-height: 1.6; }
.flash-dica { font-size: .85rem; font-weight: 800; color: var(--text-2); }

/* ações e resposta */
.acoes { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; }
@media (min-width: 560px) { .acoes { align-items: flex-end; } .acoes .btn { min-width: 12rem; } }
.dica-erro { margin: 0; color: var(--err); font-weight: 700; }
.fb { margin-top: 22px; padding: 18px; border-radius: var(--radius); border: 2px solid; }
.fb-ok { border-color: var(--ok); background: var(--ok-bg); }
.fb-err { border-color: var(--err); background: var(--err-bg); }
.fb-h { font-family: var(--font-body); font-size: 1.25rem; font-weight: 800; }
.fb-ok .fb-h { color: var(--ok); } .fb-err .fb-h { color: var(--err); }
.fb-body > :last-child { margin-bottom: 0; }
.fb-certa { margin-bottom: 1em; }
.fb-certa ul, .fb-certa ol { margin: .4em 0 0; padding-left: 1.3em; }
.fb-src { font-size: .88rem; color: var(--text-2); }
.fb-volta { font-weight: 700; }
.fb .acoes { margin-top: 14px; }

.fim { text-align: center; padding: clamp(20px, 5vw, 40px); background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.fim-h { color: var(--ok); font-size: clamp(1.7rem, 5vw, 2.4rem); }
.fim-h:focus { outline: none; }
.fim-h:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.fim-stats { list-style: none; padding: 0; margin: 0 0 1em; font-size: 1.1rem; }
.fim .cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }
.fim .btn { text-align: center; padding-block: 10px; height: auto; }
.player-k a { display: inline-block; padding-block: 6px; }