/*
 * Área do aluno — segunda folha de estilos (aluno.css passou de ~60 KB; spec §17). Mesmos tokens (--ta-*) e as
 * mesmas regras de cor do topo do aluno.css; carregada depois dele (AlunoPanelProvider, AssetVersion).
 *
 * Componentes (prefixo ta-)
 *   Prova      .ta-focus-exam (etiqueta do modo prova no player) · .ta-exam-rules (regras, uma por linha) ·
 *              .ta-exam-state.is-liberada/.is-espera/.is-bloqueada/.is-aprovada (o estado de agora: título
 *              .ta-exam-state-title, texto e a ação) · .ta-exam-shortcut (details "Já sei este nível")
 *   Resultado  .ta-score-head (.is-passed) > .ta-score (style="--ta-score-total: 15; --ta-score-pass: 11") >
 *              .ta-score-number + .ta-score-bar > li(.is-hit, .is-mark = a questão da aprovação) · .ta-score-note ·
 *              .ta-wrong > .ta-wrong-item (.ta-wrong-number, -instruction, -text, -answer, -flag, -reply)
 *   Missões    .ta-missions > .ta-mission(.is-done) (.ta-mission-icon, .ta-mission-main, .ta-mission-title,
 *              .ta-mission-meta, .ta-mission-bar > span com style="width: 40%")
 *   Exercício  modo foco do exercício da turma (.ta-focus[data-ta-quiz]): .ta-cq-status (.ta-cq-count, .ta-cq-saved
 *   da turma   "Salvo às") · .ta-cq-due · .ta-cq-instructions (details) · .ta-cq-links · .ta-cq-textarea ·
 *              conferir: .ta-cq-check > .ta-cq-title, .ta-cq-lead, .ta-cq-grid > .ta-cq-cell.is-done/.is-blank,
 *              .ta-cq-legend (.ta-cq-key), .ta-cq-fine · revisão: .ta-progress-seg.is-ok/.is-bad/.is-pend/.is-here,
 *              .ta-cq-review (.ta-choice.is-chosen + .ta-cq-flag + .ta-cq-mine; .ta-cq-pairs > .ta-cq-pair;
 *              .ta-cq-answer) e a folha no fluxo .ta-sheet.ta-sheet-inline (+ .is-blank, .is-pending, .is-graded)
 *   Formatos   (Tarefa A, partial practice.format) chefão: .ta-boss-hp(.is-down) > .ta-boss-hp-icon + .ta-boss-hp-main
 *              (.ta-boss-hp-label, .ta-boss-hp-bar > span.is-on = um acerto que ainda falta) · relâmpago: .ta-timer-row >
 *              .ta-timer(.is-low; .ta-timer-bar > span com transform: scaleX(), .ta-timer-text) + .ta-timer-off ou
 *              .ta-timer-note · duelo: .ta-duel-intro · fim: .ta-result(.is-won/.is-close) > .ta-result-score,
 *              .ta-result-text, .ta-result-note · Trilha: .ta-path-boss.is-revanche (botão abaixo do texto),
 *              .ta-path-skip ("Já sei esta unidade"), .ta-duels >
 *              .ta-duel-list > .ta-duel.is-novo/.is-feito/.is-vencido (.ta-duel-mark > i + i, .ta-duel-main) ·
 *              Revisar: .ta-more (.ta-more-row, .ta-more-actions, .ta-row-icon.is-bolt) · resultado do exercício:
 *              .ta-train-again
 *   Começo     (Tarefa D) onboarding: .ta-ob-screen > .ta-ob-hello, .ta-ob-title, .ta-ob-lead, .ta-ob-choice (.ta-choice
 *              com strong + .ta-ob-hint), .ta-ob-note, .ta-ob-video, .ta-scale-mini > span.is-on (degraus da
 *              autoavaliação) · fim: .ta-ob-done + .ta-ob-summary (dl) · nivelamento: .ta-pl-count ("Pergunta N"),
 *              .ta-pl-intro (+ .ta-exam-rules), .ta-pl-result[data-band] > .ta-pl-mark (.ta-pl-numeral + .ta-pl-where),
 *              .ta-pl-title, .ta-scale (.ta-scale-steps > li.is-below/.is-here[data-band] + .ta-scale-bands), .ta-pl-note,
 *              .ta-pl-text, .ta-pl-win, .ta-pl-retake · Hoje: .ta-firstweek > .ta-firstweek-steps > .ta-firstweek-step
 *              (.is-done; .ta-firstweek-mark, .ta-firstweek-label) · .ta-install[data-ta-install] (.ta-install-head,
 *              -title, -text, -steps, -note, -actions; [data-ta-install-prompt] aparece pelo aluno-pwa.js)
 *   Textos     (Tarefa E) folha pautada .ta-paper (textarea ou .ta-paper-read > .ta-paper-text; a margem usa a cor da
 *              faixa, [data-band]) · régua de palavras .ta-meter(.is-met) > .ta-meter-bar > span + .ta-meter-label ·
 *              escrever: .ta-write-where, -title, -task, -fiction, .ta-write-dest.is-modelo/.is-ia/.is-professor,
 *              -hint, -ai · resultado: .ta-text > .ta-text-done, .ta-text-yield (.ta-text-chips, .ta-text-why),
 *              .ta-text-state.is-wait/.is-teacher/.is-ok (.ta-text-state-title), .ta-text-subtitle, .ta-mark (trecho
 *              da correção, com sup numerado), .ta-seal(.is-demo), .ta-review-summary, .ta-review-pt/-rewrite/
 *              -contest (details), .ta-fixes > .ta-fix (.ta-fix-num, .ta-fix-change > del.ta-fix-from + ins.ta-fix-to,
 *              .ta-fix-why), .ta-rubric > .ta-rubric-row (.ta-rubric-pips > i.is-on, .ta-rubric-word),
 *              .ta-teacher-note, .ta-model, .ta-checklist, .ta-text-rewrite, .ta-text-back
 *   Níveis     (Tarefa F, /niveis) .ta-lv-hero[data-band] (reusa .ta-pl-mark/.ta-pl-numeral e .ta-scale-steps; legenda .ta-lv-bands > li.is-here; .ta-lv-title,
 *              .ta-lv-subtitle, .ta-lv-status) · .ta-chip-pending · passos: .ta-lv-progress + .ta-lv-steps > .ta-lv-step
 *              (.is-done; .ta-lv-step-mark, -main, -title, -text, -go) · .ta-lv-validation (subida em validação) ·
 *              .ta-lv-done (Nível 15 concluído) · "Eu consigo": .ta-lv-candos > .ta-lv-cando.is-feito/.is-na_fila/
 *              .is-devolvido/.is-a_fazer/.is-opcional (.ta-lv-cando-head, .ta-lv-kind, -text, -hint, -comment) · radar:
 *              .ta-radar > svg.ta-radar-chart (.ta-radar-ring, -spoke, -area, -dot, -label.is-empty) + dl.ta-radar-list
 *              · .ta-lv-next[data-band] (-head, -lead, -list, -units) · .ta-lv-history (li.is-undone) · Hoje: .ta-level-note
 *   Ouvir     (player v2) .ta-listen > .ta-listen-more (depois da 1ª escuta) + .ta-listen-status[data-ta-status] ·
 *              folha: .ta-sheet-listen ("Ouvir a frase")
 */

/* ===== Prova do nível: player ===== */
.ta-focus-tag.ta-focus-exam { background: var(--ta-navy); color: #fff; }

/* ===== Prova do nível: página ===== */
.ta-exam-rules {
    list-style: none; margin: 0; padding: .25rem 1.1rem; background: var(--ta-card);
    border: 1px solid var(--ta-line); border-radius: var(--ta-radius);
}
.ta-exam-rules li { position: relative; padding: .7rem 0 .7rem 1.1rem; line-height: 1.5; }
.ta-exam-rules li + li { border-top: 1px solid var(--ta-line); }
.ta-exam-rules li::before {
    content: ""; position: absolute; left: 0; top: 1.25rem; width: .45rem; height: .45rem;
    border-radius: 2px; background: var(--ta-band);
}
.ta-exam-rules strong { color: var(--ta-navy); }

.ta-exam-state {
    --ta-state: var(--ta-blue);
    display: grid; gap: .6rem; padding: 1.1rem 1.15rem 1.2rem; background: var(--ta-card);
    border: 1px solid var(--ta-line); border-left: 4px solid var(--ta-state); border-radius: var(--ta-radius);
}
.ta-exam-state.is-espera { --ta-state: var(--ta-pending); }
.ta-exam-state.is-bloqueada { --ta-state: var(--ta-line-strong); }
.ta-exam-state.is-aprovada { --ta-state: var(--ta-ok); }
.ta-exam-state p { margin: 0; line-height: 1.55; }
.ta-exam-state-title {
    margin: 0; font-family: var(--ta-font-head); font-weight: 700; font-size: 1.25rem; line-height: 1.2; color: var(--ta-navy);
}
.ta-exam-state .ta-btn-block { margin-top: .25rem; }

.ta-exam-shortcut summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.ta-exam-shortcut summary strong { color: var(--ta-navy); }
.ta-exam-shortcut p { margin: .25rem 0 .75rem; line-height: 1.55; }

/* ===== Prova do nível: resultado ===== */
.ta-score-head { gap: .5rem; }
.ta-score { display: grid; gap: .55rem; margin-top: .5rem; }
.ta-score-number { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.ta-score-number strong {
    font-family: var(--ta-font-head); font-weight: 700; font-size: 2.25rem; line-height: 1; color: var(--ta-navy);
    letter-spacing: -.02em;
}
.ta-score-number span { color: var(--ta-muted); font-size: .9375rem; }
/* um traço por questão: os acertos preenchidos (da esquerda), a marca da aprovação depois da questão N */
.ta-score-bar {
    list-style: none; margin: 0; padding: 0 0 .6rem; display: grid; gap: 4px;
    grid-template-columns: repeat(var(--ta-score-total, 15), minmax(0, 1fr));
}
.ta-score-bar li { position: relative; height: 26px; border-radius: 4px; background: #e6e3e5; }
.ta-score-bar li.is-hit { background: var(--ta-navy); }
.ta-score-head.is-passed .ta-score-bar li.is-hit { background: var(--ta-ok); }
.ta-score-bar li.is-mark::after {
    content: ""; position: absolute; right: -3px; top: -5px; bottom: -9px; width: 2px; border-radius: 1px;
    background: var(--ta-ink);
}
.ta-score-note { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; line-height: 1.55; }

.ta-wrong { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ta-wrong-item {
    display: grid; gap: .35rem; padding: .9rem 1rem .6rem; background: var(--ta-card);
    border: 1px solid var(--ta-line); border-radius: var(--ta-radius);
}
.ta-wrong-item p { margin: 0; }
.ta-wrong-number { font-size: .8125rem; font-weight: 700; color: var(--ta-muted); }
.ta-wrong-instruction { color: var(--ta-ink); line-height: 1.5; }
.ta-wrong-text { font-size: 1.0625rem; line-height: 1.45; color: var(--ta-navy); font-weight: 600; overflow-wrap: anywhere; }
.ta-wrong-answer { color: var(--ta-muted); font-size: .9375rem; overflow-wrap: anywhere; }
.ta-wrong-answer span { color: var(--ta-err); font-weight: 600; }
.ta-wrong-flag {
    padding: .5rem .7rem; border-radius: var(--ta-radius-sm); background: var(--ta-pending-bg); color: var(--ta-pending);
    font-size: .875rem; font-weight: 600; margin-bottom: .4rem !important;
}
.ta-wrong-reply { display: block; margin-top: .25rem; color: var(--ta-ink); font-weight: 400; }
.ta-wrong-item .ta-sheet-flag { justify-self: start; padding-left: 0; }
.ta-wrong-item .ta-flag-form { margin: .25rem 0 .5rem; }

/* ===== Missões da semana (Eu, Hoje) ===== */
.ta-missions {
    list-style: none; margin: 0; padding: 0; background: var(--ta-card);
    border: 1px solid var(--ta-line); border-radius: var(--ta-radius); overflow: hidden;
}
.ta-mission { display: flex; align-items: flex-start; gap: .8rem; padding: .85rem 1rem; }
.ta-mission + .ta-mission { border-top: 1px solid var(--ta-line); }
.ta-mission-icon {
    flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; margin-top: .1rem; border-radius: 50%;
    background: var(--ta-blue-soft); color: var(--ta-blue-ink);
}
.ta-mission-icon .ta-icon { width: 18px; height: 18px; }
.ta-mission.is-done .ta-mission-icon { background: var(--ta-ok-bg); color: var(--ta-ok); }
.ta-mission-main { flex: 1; min-width: 0; display: grid; gap: .3rem; }
.ta-mission-title { margin: 0; font-weight: 600; color: var(--ta-ink); line-height: 1.4; }
.ta-mission-meta { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem .75rem; color: var(--ta-muted); font-size: .875rem; }
.ta-mission.is-done .ta-mission-meta strong { color: var(--ta-ok); }
.ta-mission-bar { height: 6px; border-radius: var(--ta-pill); background: #e6e3e5; overflow: hidden; }
.ta-mission-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--ta-blue); }
.ta-mission.is-done .ta-mission-bar > span { background: var(--ta-ok); }
.ta-missions-note { margin: .6rem 0 0; }

/* ===== Exercício da turma em modo foco (ClassQuizFocusPlayer): responder, conferir, revisar ===== */
.ta-cq-status { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .15rem 1rem; }
.ta-cq-status p { margin: 0; }
.ta-cq-count { color: var(--ta-muted); font-size: .9375rem; }
.ta-cq-count strong { font-family: var(--ta-font-head); font-weight: 700; color: var(--ta-navy); }
.ta-cq-saved { color: var(--ta-ok); font-size: .8125rem; font-weight: 600; }
.ta-cq-due { margin: -.6rem 0 0; color: var(--ta-muted); font-size: .875rem; }
.ta-cq-instructions { background: var(--ta-card); border: 1px solid var(--ta-line); border-radius: var(--ta-radius-sm); }
.ta-cq-instructions summary {
    display: flex; align-items: center; min-height: 44px; padding: 0 .9rem; cursor: pointer;
    color: var(--ta-blue-ink); font-weight: 600; font-size: .9375rem;
}
.ta-cq-instructions .ta-prose { padding: 0 .9rem .85rem; }
.ta-cq-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.ta-cq-textarea { min-height: 9rem; line-height: 1.5; }
[data-ta-quiz] .ta-focus-foot .ta-btn:disabled { cursor: default; opacity: .45; }

.ta-cq-check { display: grid; gap: .9rem; }
.ta-cq-title { margin: .25rem 0 0; font: 700 1.5625rem/1.15 var(--ta-font-head); color: var(--ta-navy); letter-spacing: -.01em; }
.ta-cq-lead { margin: 0; line-height: 1.5; color: var(--ta-ink); }
/* um número por questão, como uma folha de respostas: cheio = respondida, tracejado = em branco */
.ta-cq-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: .5rem; }
.ta-cq-cell {
    width: 100%; aspect-ratio: 1; min-height: 48px; border-radius: 12px; cursor: pointer;
    font: 700 1.125rem/1 var(--ta-font-head); font-variant-numeric: tabular-nums;
}
.ta-cq-cell.is-done { background: var(--ta-navy); border: 2px solid var(--ta-navy); color: #fff; }
.ta-cq-cell.is-blank { background: #fff; border: 2px dashed var(--ta-line-strong); color: var(--ta-navy); }
.ta-cq-cell.is-blank:hover { border-color: var(--ta-blue); }
.ta-cq-cell:focus-visible { outline: none; box-shadow: var(--ta-ring-focus); }
.ta-cq-legend { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; color: var(--ta-muted); font-size: .875rem; }
.ta-cq-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.ta-cq-key { display: inline-block; width: 14px; height: 14px; border-radius: 4px; box-sizing: border-box; }
.ta-cq-key.is-done { background: var(--ta-navy); }
.ta-cq-key.is-blank { border: 2px dashed var(--ta-line-strong); }
.ta-cq-fine { display: grid; gap: .3rem; color: var(--ta-muted); font-size: .9375rem; line-height: 1.5; }
.ta-cq-fine p { margin: 0; }

/* revisão: a situação de cada questão no progresso (acompanha o título da folha) */
.ta-progress-seg.is-ok { background: var(--ta-ok); }
.ta-progress-seg.is-bad { background: var(--ta-err); }
.ta-progress-seg.is-pend { background: var(--ta-pending); }
.ta-progress-seg.is-here { box-shadow: 0 0 0 2px var(--ta-bg), 0 0 0 4px var(--ta-navy); }
.ta-cq-review .ta-choices { list-style: none; margin: 0; padding: 0; }
.ta-cq-review .ta-choice { cursor: default; }
.ta-cq-review .ta-choice:not(.is-correct):not(.is-wrong):hover { border-color: var(--ta-line); }
.ta-choice.is-chosen .ta-choice-mark { border-color: var(--ta-blue); background: var(--ta-blue); box-shadow: inset 0 0 0 4px #fff; }
.ta-choice.is-correct.is-chosen .ta-choice-mark { border-color: var(--ta-ok); background: var(--ta-ok); }
.ta-choice.is-wrong.is-chosen .ta-choice-mark { border-color: var(--ta-err); background: var(--ta-err); }
.ta-choice-multi.is-chosen .ta-choice-mark { box-shadow: none; }
.ta-cq-flag { display: inline-flex; flex: none; color: var(--ta-ok); }
.ta-cq-mine {
    flex: none; padding: .15rem .55rem; border-radius: var(--ta-pill); background: rgba(19, 38, 58, .08);
    color: var(--ta-ink); font-size: .75rem; font-weight: 700; white-space: nowrap;
}
.ta-cq-pairs { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ta-cq-pair { display: grid; gap: .2rem; padding: .7rem .9rem; border: 2px solid var(--ta-line); border-radius: 12px; background: #fff; overflow-wrap: anywhere; }
.ta-cq-pair.is-correct { border-color: var(--ta-ok); background: var(--ta-ok-bg); }
.ta-cq-pair.is-wrong { border-color: var(--ta-err); background: var(--ta-err-bg); }
.ta-cq-pair-prompt { font-weight: 600; color: var(--ta-ink); }
.ta-cq-pair-given { display: inline-flex; align-items: center; gap: .35rem; color: var(--ta-ink); }
.ta-cq-pair.is-correct .ta-cq-pair-given .ta-icon { color: var(--ta-ok); }
.ta-cq-pair.is-wrong .ta-cq-pair-given .ta-icon { color: var(--ta-err); }
.ta-cq-pair-correct { color: var(--ta-ok); font-size: .9375rem; font-weight: 600; }
.ta-cq-answer { display: grid; gap: .3rem; padding: .8rem 1rem; background: var(--ta-card); border: 1px solid var(--ta-line); border-radius: 12px; }
.ta-cq-answer p { margin: 0; }
.ta-cq-answer-text { font-size: 1.0625rem; line-height: 1.5; overflow-wrap: anywhere; }
/* a folha no fluxo da página (a revisão lê com calma): as cores da folha do player, sem prender embaixo */
.ta-sheet.ta-sheet-inline {
    position: static; max-height: none; overflow: visible; padding: 1rem 1.1rem;
    border-radius: var(--ta-radius); box-shadow: none; animation: none;
}
.ta-sheet.is-blank { background: #eeecee; color: var(--ta-ink); }
.ta-sheet.is-blank .ta-sheet-icon { background: var(--ta-muted); }
.ta-sheet.is-blank .ta-sheet-title { color: var(--ta-ink); }
.ta-sheet.is-pending { background: var(--ta-pending-bg); }
.ta-sheet.is-pending .ta-sheet-icon { background: var(--ta-pending); }
.ta-sheet.is-pending .ta-sheet-title { color: var(--ta-pending); }
.ta-sheet.is-graded { background: var(--ta-blue-soft); }
.ta-sheet.is-graded .ta-sheet-icon { background: var(--ta-navy); }
.ta-sheet.is-graded .ta-sheet-title { color: var(--ta-navy); }
.ta-sheet-inline .ta-quiz-feedback { margin-top: .25rem; }
.ta-cq-back { justify-self: center; margin-top: .25rem; }
.ta-quiz-alt { justify-self: center; }

/* ===== Formatos (Tarefa A): chefão, relâmpago, duelo, "Revisar meus erros", "Treinar de novo" ===== */
/* A vida do chefão: a faixa marinho com um segmento vermelho por acerto que ainda falta (cada acerto apaga um) */
.ta-boss-hp {
    display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: .75rem;
    padding: .7rem .9rem; border-radius: var(--ta-radius); background: var(--ta-navy); color: #fff;
}
.ta-boss-hp-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--ta-red); }
.ta-boss-hp.is-down .ta-boss-hp-icon { background: rgba(255, 255, 255, .16); }
.ta-boss-hp-main { display: grid; gap: .45rem; min-width: 0; }
.ta-boss-hp-label { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 .75rem; font-size: .875rem; line-height: 1.3; }
.ta-boss-hp-label strong { font: 700 1rem/1.2 var(--ta-font-head); }
.ta-boss-hp-label span { color: #d5deea; font-variant-numeric: tabular-nums; }
.ta-boss-hp-bar { display: flex; gap: 3px; height: 10px; }
.ta-boss-hp-bar > span { flex: 1; border-radius: 3px; background: rgba(255, 255, 255, .16); transition: background-color .3s; }
.ta-boss-hp-bar > span.is-on { background: var(--ta-red); }

/* O relógio do relâmpago: barra que encolhe e os segundos; nos últimos 10 s, cor de aviso */
.ta-timer-row { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; }
.ta-timer { flex: 1 1 12rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; }
.ta-timer-bar { display: block; height: 10px; border-radius: var(--ta-pill); background: #e6e3e5; overflow: hidden; }
.ta-timer-bar > span { display: block; height: 100%; background: var(--ta-blue); transform-origin: left center; transition: transform .25s linear; }
.ta-timer-text { min-width: 3.2ch; font: 700 1.25rem/1 var(--ta-font-head); font-variant-numeric: tabular-nums; color: var(--ta-navy); text-align: right; }
.ta-timer.is-low .ta-timer-bar > span { background: var(--ta-warn); }
.ta-timer.is-low .ta-timer-text { color: var(--ta-warn); }
.ta-timer-row .ta-timer-off { justify-self: auto; }
.ta-timer-note { margin: 0; color: var(--ta-muted); font-size: .9375rem; }

/* O aviso do duelo, no 1º item */
.ta-duel-intro { margin: 0; padding: .7rem .9rem; border-radius: 12px; background: var(--ta-blue-soft); color: var(--ta-navy); line-height: 1.5; }
.ta-duel-intro strong { font-family: var(--ta-font-head); }

/* O resultado do formato no fim da sessão */
.ta-result {
    width: 100%; display: grid; gap: .55rem; justify-items: center; padding: 1rem 1.1rem 1.1rem; box-sizing: border-box;
    border-radius: var(--ta-radius); background: var(--ta-card); border: 1px solid var(--ta-line);
}
.ta-result-score { margin: 0; display: grid; gap: .15rem; }
.ta-result-score strong { font: 700 2.25rem/1 var(--ta-font-head); color: var(--ta-navy); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ta-result-score span { color: var(--ta-muted); font-size: .9375rem; }
.ta-result.is-won .ta-result-score strong { color: var(--ta-ok); }
.ta-result-text { margin: 0; max-width: 36ch; line-height: 1.5; }
.ta-result-note { margin: 0; color: var(--ta-muted); font-size: .875rem; max-width: 36ch; line-height: 1.45; }

/* Trilha: a revanche do chefão (o botão longo desce para baixo do texto), "Já sei esta unidade" e os duelos */
.ta-path-boss.is-revanche { grid-template-columns: 40px minmax(0, 1fr); }
/* .ta-inline-form é display: contents — o item da grade é o botão */
.ta-path-boss.is-revanche > .ta-inline-form > .ta-btn { grid-column: 2; justify-self: start; }
.ta-path-skip {
    display: grid; gap: .5rem; justify-items: start; padding: .8rem .95rem; border-radius: 12px;
    border: 1px dashed var(--ta-line-strong);
}
.ta-path-skip p { margin: 0; color: var(--ta-muted); font-size: .9375rem; line-height: 1.45; }
.ta-duels { display: grid; gap: .6rem; margin-top: .5rem; }
.ta-duels > .ta-section-title, .ta-duels > p { margin: 0; }
.ta-duel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ta-duel {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: .75rem;
    padding: .75rem .9rem; background: var(--ta-card); border: 1px solid var(--ta-line); border-radius: var(--ta-radius);
}
/* dois círculos sobrepostos: as duas formas do contraste; vencido, os dois firmes */
.ta-duel-mark { position: relative; width: 44px; height: 30px; }
.ta-duel-mark i { position: absolute; top: 2px; width: 26px; height: 26px; border-radius: 50%; box-sizing: border-box; }
.ta-duel-mark i:first-child { left: 0; border: 2.5px solid var(--ta-blue); }
.ta-duel-mark i:last-child { right: 0; border: 2.5px solid var(--ta-navy); background: rgba(18, 57, 95, .08); }
.ta-duel.is-vencido .ta-duel-mark i:first-child { background: var(--ta-blue); }
.ta-duel.is-vencido .ta-duel-mark i:last-child { background: var(--ta-navy); }
.ta-duel-main { min-width: 0; }
.ta-duel-title { margin: 0; font: 600 1rem/1.3 var(--ta-font-head); color: var(--ta-navy); overflow-wrap: anywhere; }
.ta-duel-meta { margin: .1rem 0 0; font-size: .875rem; color: var(--ta-muted); line-height: 1.4; }

/* Revisar: "Revisar meus erros" e a rodada relâmpago */
.ta-more .ta-more-row { flex-direction: row; align-items: center; }
.ta-more-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0; flex: none; }
.ta-more-actions .ta-link-btn { min-height: 36px; padding: .25rem 0; }
.ta-row-icon.is-bolt { background: var(--ta-warn-bg); color: var(--ta-warn); }
@media (max-width: 640px) {
    .ta-more .ta-more-row { flex-wrap: wrap; }
    .ta-more .ta-more-row .ta-row-main { flex: 1 1 calc(100% - 56px); }
    .ta-more-actions { flex-direction: row; align-items: center; gap: .9rem; width: 100%; padding-left: 56px; }
    .ta-more-actions .ta-btn { width: auto; }
}

/* Resultado do exercício: "Treinar de novo" */
.ta-train-again { display: grid; gap: .35rem; }
.ta-train-again p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .ta-score-bar li, .ta-mission-bar > span { transition: none; }
    .ta-boss-hp-bar > span, .ta-timer-bar > span { transition: none; }
}

/* ===== Texto livre: escrever (ProductionMission) e resultado (TextResult) — Tarefa E do M2 ===== */
/* folha pautada: linhas a cada --ta-paper-line, margem vertical na cor da faixa; o texto cai sobre as linhas */
.ta-paper {
    --ta-paper-line: 2rem;
    --ta-paper-top: .55rem;
    display: block; width: 100%; box-sizing: border-box; margin: 0;
    padding: var(--ta-paper-top) 1rem var(--ta-paper-top) 2.6rem;
    font: 500 1.0625rem/var(--ta-paper-line) var(--ta-font-body); color: var(--ta-ink);
    background-color: #fff;
    background-image:
        linear-gradient(90deg, transparent 1.85rem, color-mix(in srgb, var(--ta-band) 45%, transparent) 1.85rem,
            color-mix(in srgb, var(--ta-band) 45%, transparent) calc(1.85rem + 2px), transparent calc(1.85rem + 2px)),
        repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--ta-paper-line) - 1px),
            #e6e2e5 calc(var(--ta-paper-line) - 1px), #e6e2e5 var(--ta-paper-line));
    background-position: 0 0, 0 var(--ta-paper-top);
    background-attachment: local;
    border: 2px solid var(--ta-line-strong); border-radius: var(--ta-radius);
}
textarea.ta-paper { min-height: calc(9 * var(--ta-paper-line) + 2 * var(--ta-paper-top)); resize: vertical; }
textarea.ta-paper:focus { outline: none; border-color: var(--ta-blue); box-shadow: 0 0 0 3px rgba(23, 107, 224, .2); }
.ta-paper-read { border-width: 1px; border-color: var(--ta-line); }
.ta-paper-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; line-height: var(--ta-paper-line, 2rem); }

/* régua de palavras até o mínimo do nível */
.ta-meter { display: grid; gap: .35rem; }
.ta-meter-bar { display: block; height: 6px; border-radius: var(--ta-pill); background: #e6e3e5; overflow: hidden; }
.ta-meter-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--ta-band); transition: width .2s ease-out; }
.ta-meter-label { font-size: .9375rem; color: var(--ta-muted); }
.ta-meter.is-met .ta-meter-bar > span { background: var(--ta-ok); }
.ta-meter.is-met .ta-meter-label { color: var(--ta-ok); font-weight: 600; }

/* escrever */
.ta-write-where { flex: 1; margin: 0; font-size: .875rem; font-weight: 600; color: var(--ta-band-ink); overflow-wrap: anywhere; }
.ta-write-title {
    margin: 0; font: 700 1.5625rem/1.15 var(--ta-font-head); color: var(--ta-navy); letter-spacing: -.01em;
    overflow-wrap: anywhere; text-wrap: balance;
}
.ta-write-task { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--ta-ink); }
.ta-write-fiction { margin: 0; display: flex; align-items: flex-start; gap: .45rem; font-size: .9375rem; color: var(--ta-muted); }
.ta-write-fiction .ta-icon { margin-top: .15rem; flex: none; }
.ta-write-dest {
    --ta-dest: var(--ta-band);
    display: grid; gap: .35rem; padding: .8rem 1rem; background: var(--ta-card); border: 1px solid var(--ta-line);
    border-left: 4px solid var(--ta-dest); border-radius: 12px; line-height: 1.5;
}
.ta-write-dest p { margin: 0; }
.ta-write-dest strong { color: var(--ta-navy); }
.ta-write-dest.is-ia { --ta-dest: var(--ta-blue); }
.ta-write-dest.is-professor { --ta-dest: var(--ta-pending); }
.ta-write-field { margin-top: .25rem; }
.ta-write-hint { margin: 0; font-size: .9375rem; color: var(--ta-muted); line-height: 1.5; }
.ta-write-ai { margin-top: .5rem; padding-top: 1rem; border-top: 1px solid var(--ta-line); }

/* resultado */
.ta-text { display: grid; gap: 1.5rem; }
.ta-text > .ta-section, .ta-text > .ta-section + .ta-section { margin: 0; }
.ta-text-done {
    margin: 0; display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-radius: 12px;
    background: var(--ta-ok-bg); color: var(--ta-ok); font-weight: 600;
}
.ta-text-yield { display: grid; gap: .5rem; }
.ta-text-chips { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.ta-section > .ta-text-chips { margin-top: .6rem; }
.ta-text-why { margin: 0; line-height: 1.55; color: var(--ta-ink); }
.ta-text-state {
    --ta-state: var(--ta-line-strong);
    display: grid; gap: .35rem; justify-items: start; padding: .9rem 1rem; background: var(--ta-card);
    border: 1px solid var(--ta-line); border-left: 4px solid var(--ta-state); border-radius: 12px; line-height: 1.5;
}
.ta-text-state p { margin: 0; }
.ta-text-state .ta-btn { margin-top: .25rem; }
.ta-text-state-title { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--ta-ink); }
.ta-text-state.is-wait { --ta-state: var(--ta-blue); }
.ta-text-state.is-teacher { --ta-state: var(--ta-pending); }
.ta-text-state.is-teacher .ta-text-state-title { color: var(--ta-pending); }
.ta-text-state.is-ok { --ta-state: var(--ta-ok); background: var(--ta-ok-bg); }
.ta-text-state.is-ok .ta-text-state-title { color: var(--ta-ok); }
.ta-text-subtitle { margin: 1.1rem 0 .5rem; font: 600 1.0625rem/1.3 var(--ta-font-head); color: var(--ta-navy); }

/* trecho apontado pela correção, com o número do ponto */
.ta-mark { background: var(--ta-err-bg); color: inherit; box-shadow: inset 0 -2px 0 var(--ta-err); border-radius: 3px; padding: 0 1px; }
.ta-mark sup {
    display: inline-grid; place-items: center; min-width: 1.05rem; height: 1.05rem; margin-left: 2px; border-radius: 50%;
    background: var(--ta-err); color: #fff; font: 700 .6875rem/1 var(--ta-font-body); vertical-align: .55em;
}

.ta-seal {
    margin: 0 0 .75rem; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem;
    border-radius: var(--ta-pill); background: var(--ta-blue-soft); color: var(--ta-navy); font-size: .875rem; font-weight: 600;
}
.ta-seal.is-demo { background: var(--ta-warn-bg); color: var(--ta-warn); }
.ta-review-summary { margin: 0 0 .5rem; line-height: 1.55; color: var(--ta-ink); }
.ta-review-pt summary, .ta-review-rewrite summary, .ta-review-contest summary {
    display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--ta-blue-ink);
    font-size: .9375rem; font-weight: 600;
}
.ta-review-pt p { margin: 0 0 .5rem; line-height: 1.5; color: var(--ta-ink); }
.ta-review-rewrite .ta-paper-text {
    padding: .5rem 1rem; background: #fff; border: 1px solid var(--ta-line); border-radius: 12px; line-height: 1.6;
}
.ta-fixes { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .6rem; }
.ta-fix {
    display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .75rem; padding: .9rem 1rem;
    background: var(--ta-card); border: 1px solid var(--ta-line); border-radius: var(--ta-radius);
}
.ta-fix-num {
    display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: var(--ta-err); color: #fff; font-weight: 700; font-size: .875rem;
}
.ta-fix-change { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .35rem; font-size: 1.0625rem; line-height: 1.4; }
.ta-fix-from {
    color: var(--ta-err); background: var(--ta-err-bg); padding: .05rem .35rem; border-radius: 6px;
    text-decoration: line-through; text-decoration-thickness: 1.5px; overflow-wrap: anywhere;
}
.ta-fix-to { color: var(--ta-ok); background: var(--ta-ok-bg); padding: .05rem .35rem; border-radius: 6px; text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.ta-fix-arrow { display: inline-flex; color: var(--ta-muted); }
.ta-fix-why { margin: .4rem 0 0; font-size: .9375rem; line-height: 1.5; color: var(--ta-ink); }
.ta-rubric { margin: .75rem 0 0; padding: .1rem 1rem; background: var(--ta-card); border: 1px solid var(--ta-line); border-radius: var(--ta-radius); }
.ta-rubric-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; }
.ta-rubric-row + .ta-rubric-row { border-top: 1px solid var(--ta-line); }
.ta-rubric dt { font-size: .9375rem; font-weight: 600; color: var(--ta-ink); }
.ta-rubric dd { margin: 0; display: flex; align-items: center; gap: .6rem; }
.ta-rubric-pips { display: inline-flex; gap: 4px; }
.ta-rubric-pips i { width: 18px; height: 6px; border-radius: var(--ta-pill); background: #e3e0e2; }
.ta-rubric-pips i.is-on { background: var(--ta-band); }
.ta-rubric-word { min-width: 5.25rem; text-align: right; font-size: .8125rem; color: var(--ta-muted); }
.ta-review-contest { margin-top: .5rem; }

.ta-teacher-note {
    display: grid; gap: .4rem; padding: 1rem 1.1rem; background: var(--ta-card); border: 1px solid var(--ta-line);
    border-left: 4px solid var(--ta-pending); border-radius: var(--ta-radius);
}
.ta-teacher-kicker { margin: 0; font-weight: 700; color: var(--ta-pending); }
.ta-teacher-text { margin: 0; white-space: pre-line; line-height: 1.55; color: var(--ta-ink); overflow-wrap: anywhere; }
.ta-teacher-date { margin: 0; font-size: .8125rem; color: var(--ta-muted); }

.ta-model {
    margin: 0; padding: .9rem 1.1rem; background: #fff; border: 1px solid var(--ta-line); border-radius: var(--ta-radius);
    font-size: 1.0625rem; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere;
}
.ta-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.ta-checklist label { display: flex; align-items: flex-start; gap: .7rem; min-height: 44px; padding: .35rem 0; cursor: pointer; line-height: 1.45; }
.ta-checklist input { flex: none; width: 22px; height: 22px; margin: .05rem 0 0; accent-color: var(--ta-ok); }
.ta-checklist input:checked + span { color: var(--ta-muted); }
.ta-text-rewrite { display: grid; gap: .75rem; margin-top: .75rem; }
.ta-text-back { margin: 0; text-align: center; }

@media (prefers-reduced-motion: reduce) {
    .ta-meter-bar > span { transition: none; }
}

/* ===== Onboarding, nivelamento, primeira semana e instalação (Tarefa D; spec §12) ===== */
/* Telas do onboarding (/comecar): uma pergunta por tela, alternativas com título + explicação */
.ta-ob-screen { gap: .85rem; }
.ta-ob-back { display: inline-flex; align-items: center; gap: .15rem; margin: -.5rem 0 -.35rem -.2rem; text-decoration: none; }
.ta-ob-hello { margin: 0; font-weight: 600; color: var(--ta-blue-ink); }
.ta-ob-title { margin: 0; font: 700 1.75rem/1.15 var(--ta-font-head); color: var(--ta-navy); letter-spacing: -.015em; text-wrap: balance; }
.ta-ob-lead { margin: 0 0 .35rem; color: var(--ta-muted); line-height: 1.5; max-width: 38ch; }
.ta-ob-choice .ta-choice-text { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.ta-ob-choice .ta-choice-text strong { font-weight: 600; color: var(--ta-ink); }
.ta-ob-hint { font-size: .875rem; font-weight: 400; color: var(--ta-muted); line-height: 1.4; }
.ta-ob-note { margin: 0; padding: .75rem .9rem; border-radius: 12px; background: var(--ta-blue-soft); color: var(--ta-ink); line-height: 1.5; }
.ta-ob-video { aspect-ratio: 16 / 9; border-radius: var(--ta-radius); overflow: hidden; background: var(--ta-navy); }
.ta-ob-video iframe { display: block; width: 100%; height: 100%; border: 0; }
/* autoavaliação: 4 degraus crescentes (o mesmo desenho da escala de níveis do resultado) */
.ta-scale-mini { display: flex; align-items: flex-end; gap: 3px; flex: none; height: 20px; }
.ta-scale-mini span { width: 5px; border-radius: 2px; background: var(--ta-line-strong); }
.ta-scale-mini span:nth-child(1) { height: 6px; }
.ta-scale-mini span:nth-child(2) { height: 10px; }
.ta-scale-mini span:nth-child(3) { height: 15px; }
.ta-scale-mini span:nth-child(4) { height: 20px; }
.ta-scale-mini span.is-on { background: var(--ta-navy); }
.ta-ob-done .ta-done-lead { max-width: 36ch; }
.ta-ob-summary { width: 100%; margin: 0; display: grid; background: var(--ta-card); border: 1px solid var(--ta-line); border-radius: var(--ta-radius); text-align: left; }
.ta-ob-summary > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; }
.ta-ob-summary > div + div { border-top: 1px solid var(--ta-line); }
.ta-ob-summary dt { color: var(--ta-muted); }
.ta-ob-summary dd { margin: 0; font-weight: 600; color: var(--ta-ink); text-align: right; }

/* Nivelamento (/nivelamento): contagem no topo, apresentação e resultado */
.ta-pl-count { flex: 1; margin: 0; font-weight: 600; color: var(--ta-muted); }
.ta-pl-intro { display: grid; gap: .85rem; }
.ta-pl-result { display: grid; gap: 1rem; padding-top: .5rem; }
.ta-pl-mark { display: flex; align-items: flex-end; gap: .9rem; }
.ta-pl-numeral {
    font: 700 6.5rem/.8 var(--ta-font-head); color: var(--ta-band-ink); letter-spacing: -.05em;
    font-variant-numeric: tabular-nums; margin-left: -.06em;
}
.ta-pl-where { display: grid; gap: .15rem; padding-bottom: .35rem; }
.ta-pl-where span:first-child { font: 700 1.5rem/1.1 var(--ta-font-head); color: var(--ta-ink); }
.ta-pl-where span:last-child { font-weight: 600; color: var(--ta-band-ink); }
.ta-pl-title { margin: 0; font: 600 1.125rem/1.4 var(--ta-font-body); color: var(--ta-ink); }
.ta-pl-text { margin: 0; line-height: 1.5; }
.ta-pl-note { margin: 0; padding: .7rem .9rem; border-radius: 12px; background: var(--ta-pending-bg); color: var(--ta-pending); font-weight: 600; line-height: 1.45; }
.ta-pl-win { display: grid; gap: .6rem; padding: 1rem; border-radius: var(--ta-radius); background: var(--ta-blue-soft); }
.ta-pl-win p { margin: 0; line-height: 1.45; }
.ta-pl-retake { margin: 0; font-size: .875rem; }
.ta-pl-result .ta-done-actions { max-width: none; }
/* a escala dos 15 níveis: cada degrau na cor da sua faixa; o do resultado alto e com o número */
.ta-scale { display: grid; gap: .45rem; padding: 1.6rem .9rem .8rem; background: var(--ta-card); border: 1px solid var(--ta-line); border-radius: var(--ta-radius); }
.ta-scale-steps, .ta-scale-bands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 3px; }
.ta-scale-steps { align-items: end; height: 30px; }
.ta-scale-steps li { position: relative; height: 10px; border-radius: 3px; background: var(--ta-band); opacity: .2; }
.ta-scale-steps li.is-below { opacity: .5; }
.ta-scale-steps li.is-here { height: 30px; opacity: 1; }
.ta-scale-steps li.is-here span {
    position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
    font: 700 .875rem/1 var(--ta-font-head); color: var(--ta-band-ink);
}
.ta-scale-bands li {
    padding-left: 4px; border-left: 2px solid var(--ta-line-strong); font-size: .75rem; color: var(--ta-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* no celular, "Básico" (2 degraus) não cabe na coluna e virava "Bási…": a legenda quebra em linha, como em /niveis */
@media (max-width: 30rem) {
    .ta-scale-bands { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
    .ta-scale-bands li { overflow: visible; }
}

/* "Sua primeira semana" (Hoje) */
.ta-firstweek-steps { list-style: none; padding: 0; }
.ta-firstweek-step { display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: .6rem 1rem; }
.ta-firstweek-step + .ta-firstweek-step { border-top: 1px solid var(--ta-line); }
.ta-firstweek-mark {
    display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%;
    border: 2px solid var(--ta-line-strong); color: var(--ta-muted); font: 700 .8125rem/1 var(--ta-font-head);
}
.ta-firstweek-step.is-done .ta-firstweek-mark { border-color: var(--ta-ok); background: var(--ta-ok); color: #fff; }
.ta-firstweek-step.is-done .ta-firstweek-label { color: var(--ta-muted); }
a.ta-firstweek-label { font-weight: 600; color: var(--ta-blue-ink); text-decoration: none; }
a.ta-firstweek-label:hover { text-decoration: underline; }

/* Card de instalação do app (Hoje): só por toque, nunca modal */
.ta-install { display: grid; gap: .65rem; padding: 1rem; background: var(--ta-card); border: 1px solid var(--ta-line); border-radius: var(--ta-radius); }
.ta-install[hidden], .ta-install [hidden] { display: none !important; }
.ta-install-head { display: flex; align-items: center; gap: .7rem; }
.ta-install-title { margin: 0; font: 600 1.125rem/1.25 var(--ta-font-head); color: var(--ta-navy); }
.ta-install-text, .ta-install-note { margin: 0; line-height: 1.5; }
.ta-install-note { font-size: .875rem; color: var(--ta-muted); }
.ta-install-steps { margin: 0; padding-left: 1.3rem; display: grid; gap: .3rem; line-height: 1.5; list-style: decimal; }
.ta-install-steps li::marker { color: var(--ta-muted); font-weight: 600; }
.ta-install-actions { display: flex; justify-content: flex-end; gap: .25rem; flex-wrap: wrap; }

/* ===== Níveis: "Seu nível" (/niveis, Tarefa F) ===== */
.ta-chip-pending { background: var(--ta-pending-bg); color: var(--ta-pending); }
.ta-lv-hero { display: grid; gap: .7rem; padding-top: .25rem; }
.ta-lv-title { margin: 0; font: 700 1.5rem/1.1 var(--ta-font-head); color: var(--ta-ink); }
.ta-lv-subtitle { margin: 0; font: 600 1.125rem/1.35 var(--ta-font-head); color: var(--ta-navy); }
.ta-lv-status { margin: 0; }
.ta-lv-hero .ta-scale { margin-top: .3rem; }
.ta-lv-bands { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.ta-lv-bands li { padding-left: .45rem; border-left: 3px solid var(--ta-band); font-size: .8125rem; line-height: 1.3; color: var(--ta-muted); }
.ta-lv-bands strong { font-weight: 600; color: var(--ta-band-ink); }
.ta-lv-bands li.is-here strong { font-weight: 800; }

.ta-lv-progress { margin: 0 0 .7rem; display: flex; align-items: center; gap: .75rem; }
.ta-lv-progress .ta-level-bar { flex: 1; }
.ta-lv-steps, .ta-lv-candos, .ta-lv-history, .ta-lv-next-list { list-style: none; margin: 0; padding: 0; }
.ta-lv-steps { background: var(--ta-card); border: 1px solid var(--ta-line); border-radius: var(--ta-radius); margin-bottom: .75rem; }
.ta-lv-step { display: flex; align-items: flex-start; gap: .8rem; padding: .9rem 1rem; }
.ta-lv-step + .ta-lv-step { border-top: 1px solid var(--ta-line); }
.ta-lv-step-mark {
    display: grid; place-items: center; width: 28px; height: 28px; flex: none; margin-top: .05rem; border-radius: 50%;
    border: 2px solid var(--ta-line-strong); background: var(--ta-card);
}
.ta-lv-step.is-done .ta-lv-step-mark { border-color: var(--ta-ok); background: var(--ta-ok); color: #fff; }
.ta-lv-step-main { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.ta-lv-step-title { font-weight: 700; color: var(--ta-ink); }
.ta-lv-step.is-done .ta-lv-step-title { color: var(--ta-ok); }
.ta-lv-step-text { color: var(--ta-muted); font-size: .9375rem; line-height: 1.45; }
.ta-lv-step-go {
    align-self: center; flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 .25rem;
    font-weight: 600; color: var(--ta-blue-ink); text-decoration: underline; text-underline-offset: 3px;
}
.ta-lv-step-go:focus-visible { outline: none; box-shadow: var(--ta-ring-focus); border-radius: 6px; }

.ta-lv-validation {
    display: grid; gap: .75rem; padding: 1rem 1.1rem 1.1rem; background: var(--ta-pending-bg);
    border-radius: var(--ta-radius); border-left: 4px solid var(--ta-pending);
}
.ta-lv-validation-title, .ta-lv-done-title { margin: 0; font: 700 1.25rem/1.2 var(--ta-font-head); color: var(--ta-pending); }
.ta-lv-validation > p { margin: 0; line-height: 1.55; color: var(--ta-ink); }
.ta-lv-done { display: grid; gap: .4rem; padding: 1.2rem 1.15rem; background: var(--ta-navy); color: #fff; border-radius: var(--ta-radius); }
.ta-lv-done-title { color: #fff; font-size: 1.5625rem; }
.ta-lv-done p { margin: 0; line-height: 1.5; color: #dbe4ee; }

.ta-lv-candos { display: grid; gap: .6rem; }
.ta-lv-cando {
    display: grid; gap: .35rem; padding: .85rem 1rem .9rem; background: var(--ta-card);
    border: 1px solid var(--ta-line); border-left: 4px solid var(--ta-line-strong); border-radius: var(--ta-radius);
}
.ta-lv-cando.is-feito { border-left-color: var(--ta-ok); }
.ta-lv-cando.is-na_fila { border-left-color: var(--ta-pending); }
.ta-lv-cando.is-devolvido { border-left-color: var(--ta-warn); }
.ta-lv-cando p { margin: 0; }
.ta-lv-cando-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .75rem; }
.ta-lv-kind { font-size: .8125rem; font-weight: 700; color: var(--ta-band-ink); }
.ta-lv-cando-text { font: 600 1.0625rem/1.4 var(--ta-font-head); color: var(--ta-navy); }
.ta-lv-cando.is-opcional .ta-lv-cando-text { color: var(--ta-ink); font-weight: 500; }
.ta-lv-cando-hint { color: var(--ta-muted); font-size: .9375rem; line-height: 1.45; }
.ta-lv-cando-comment {
    margin: .2rem 0 0; padding: .6rem .75rem; border-radius: var(--ta-radius-sm); background: var(--ta-warn-bg);
    color: var(--ta-ink); line-height: 1.5; overflow-wrap: anywhere;
}
.ta-lv-cando-comment span { font-weight: 700; color: var(--ta-warn); }
.ta-lv-cando .ta-link { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; }

/* radar de 6 eixos: o polígono na cor da faixa; eixo sem dado com o rótulo apagado */
.ta-radar { display: grid; gap: .75rem; padding: 1rem; background: var(--ta-card); border: 1px solid var(--ta-line); border-radius: var(--ta-radius); }
.ta-radar-chart { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; overflow: visible; }
.ta-radar-ring { fill: none; stroke: var(--ta-line); stroke-width: 1; }
.ta-radar-spoke { stroke: var(--ta-line); stroke-width: 1; }
.ta-radar-area { fill: var(--ta-band); fill-opacity: .16; stroke: var(--ta-band); stroke-width: 2; stroke-linejoin: round; }
.ta-radar-dot { fill: var(--ta-band); }
.ta-radar-label { font: 600 12px var(--ta-font-body); fill: var(--ta-ink); }
.ta-radar-label.is-empty { fill: var(--ta-muted); font-weight: 400; }
.ta-radar-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 1rem; }
.ta-radar-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .45rem 0; border-top: 1px solid var(--ta-line); }
.ta-radar-list dt { color: var(--ta-ink); font-size: .9375rem; }
.ta-radar-list dd { margin: 0; text-align: right; font-size: .875rem; color: var(--ta-muted); }
.ta-radar-list dd strong { font: 700 1rem/1 var(--ta-font-head); color: var(--ta-navy); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .ta-radar-list { grid-template-columns: 1fr; } }

.ta-lv-next {
    display: grid; gap: .6rem; padding: 1rem 1.1rem 1.1rem; background: var(--ta-card);
    border: 1px solid var(--ta-line); border-top: 4px solid var(--ta-band); border-radius: var(--ta-radius);
}
.ta-lv-next p { margin: 0; }
.ta-lv-next-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.ta-lv-next-head strong { font: 700 1.125rem/1.3 var(--ta-font-head); color: var(--ta-navy); }
.ta-lv-next-head span { font-weight: 600; color: var(--ta-band-ink); }
.ta-lv-next-lead { color: var(--ta-muted); font-size: .9375rem; }
.ta-lv-next-list { display: grid; gap: .5rem; }
.ta-lv-next-list li { display: grid; gap: .1rem; line-height: 1.45; padding-left: .8rem; border-left: 2px solid var(--ta-line); }
.ta-lv-next-units { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; color: var(--ta-ink); font-size: .9375rem; line-height: 1.45; }
.ta-lv-next-units li { display: flex; gap: .5rem; }
.ta-lv-next-units li::before { content: ""; flex: none; width: .4rem; height: .4rem; margin-top: .5rem; border-radius: 2px; background: var(--ta-band); }

.ta-lv-history { position: relative; display: grid; gap: .9rem; padding-left: 1.1rem; }
.ta-lv-history::before { content: ""; position: absolute; left: .3rem; top: .4rem; bottom: .4rem; width: 2px; border-radius: 1px; background: var(--ta-line-strong); }
.ta-lv-history li { position: relative; display: grid; gap: .1rem; line-height: 1.45; }
.ta-lv-history li::before {
    content: ""; position: absolute; left: -1.05rem; top: .35rem; width: .6rem; height: .6rem; border-radius: 50%;
    background: var(--ta-navy); box-shadow: 0 0 0 3px var(--ta-bg);
}
.ta-lv-history time { font-size: .8125rem; font-weight: 600; color: var(--ta-muted); }
.ta-lv-history em { font-style: normal; color: var(--ta-muted); }
.ta-lv-history li.is-undone span { color: var(--ta-muted); }
.ta-lv-history li.is-undone::before { background: var(--ta-line-strong); }
/* barra do nível na Hoje: a subida em validação, abaixo da barra */
.ta-level-note { font-size: .875rem; font-weight: 600; color: var(--ta-pending); }

/* folha de feedback: idioma da explicação pelo nível do item (Pendências do M2, P9). 9–10: o pt logo abaixo do
   inglês, menor e em cor secundária; 11–15: o pt dentro de "Ver em português" */
.ta-sheet-pt { font-size: .875rem; color: var(--ta-muted); }
.ta-sheet-ptbox summary { cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--ta-muted); min-height: 44px; display: flex; align-items: center; }
.ta-sheet-ptbox p { font-size: .9375rem; }

/* player v2 (spec ativos-ia v2 §8 P1): "Outra voz", "Outro sotaque" e os trechos depois da 1ª escuta; o status
   ("Voz 2 de 4", "Trecho 1 de 3") em aria-live, discreto e sumido quando vazio; "Ouvir a frase" na folha */
.ta-listen-more { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.ta-listen-status[data-ta-status] { padding: 0; background: none; color: var(--ta-muted); font-weight: 500; font-size: .9375rem; }
.ta-listen-status:empty { display: none; }
.ta-sheet-listen { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }
.ta-sheet-listen .ta-listen-btn { flex: 0 0 auto; }