/* Nova tela do curso (proposta v3, parte 1: fundação, 11/10/2026).
   Tudo sob .wv: nada aqui muda as telas atuais. Cores vêm dos --ui-* de ui.css
   (fonte única); os poucos tons próprios são o degradê do cartão "Hoje".
   Referências: Material 3 (alvos de 48 dp, movimento), Apple HIG (44 pt),
   WCAG 2.2 AA. Registro: docs/correcoes/2026-10-11-curso-v2-fundacao. */

/* Fontes auto-hospedadas (OFL, licenças em static/fonts). Só baixam quando
   algum elemento usa a família, isto é, só na tela nova. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.wv {
  --wv-font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --wv-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wv-radius-sm: 12px; --wv-radius-md: 18px; --wv-radius-lg: 22px; --wv-radius-xl: 28px;
  --wv-shadow-card: 0 10px 24px -18px rgb(0 0 0 / .45);
  --wv-shadow-sheet: 0 -20px 40px -20px rgb(0 0 0 / .5);
  --wv-dur-fast: 120ms; --wv-dur: 240ms; --wv-dur-slow: 420ms;
  --wv-ease: cubic-bezier(.2, .8, .2, 1);
  --wv-hero-a: light-dark(#0f8b8d, #17605f);
  --wv-hero-b: light-dark(#0a5c5e, #0d3a39);
  --wv-hero-ink: light-dark(#fff, #f2fbfa);
  --wv-hero-btn: light-dark(#fff, #5cc8c6);
  --wv-hero-btn-ink: light-dark(#0a5557, #082a2b);
  --wv-orb-empty: color-mix(in srgb, var(--ui-border) 80%, var(--ui-muted));
  font-family: var(--wv-font-body);
  color: var(--ui-text);
  -webkit-font-smoothing: antialiased;
}
.wv :focus-visible { outline: 3px solid var(--ui-brand); outline-offset: 3px; }
/* Título que recebe o foco ao trocar de tela (tabindex="-1") não é controle:
   o leitor de tela anuncia, mas o contorno só confundiria quem toca. */
.wv [tabindex="-1"]:focus-visible { outline: none; }

/* Tipografia */
.wv-display { font: 700 clamp(1.6rem, 6vw, 2.1rem)/1.08 var(--wv-font-display); letter-spacing: -.015em; text-wrap: balance; margin: 0; }
.wv-title { font: 700 1.35rem/1.15 var(--wv-font-display); letter-spacing: -.01em; text-wrap: balance; margin: 0; }
.wv-subtitle { font: 700 1.05rem/1.25 var(--wv-font-display); margin: 0; }
.wv-eyebrow { font: 700 .72rem/1 var(--wv-font-body); letter-spacing: .11em; text-transform: uppercase; color: var(--ui-brand); }
.wv-muted { color: var(--ui-muted); }
.wv [lang="en"] { font-size: 1.04em; }

/* Botões: 56 px, pressão de 2 px ao tocar */
.wv-btn {
  --wv-btn-bg: var(--ui-button); --wv-btn-ink: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 22px; border: 0; border-radius: var(--wv-radius-md);
  background: var(--wv-btn-bg); color: var(--wv-btn-ink);
  font: 700 1.05rem/1 var(--wv-font-body); text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 3px 0 color-mix(in srgb, var(--wv-btn-bg) 62%, #000),
    0 12px 20px -12px color-mix(in srgb, var(--wv-btn-bg) 80%, transparent);
  transition: transform var(--wv-dur-fast) ease, box-shadow var(--wv-dur-fast) ease, background var(--wv-dur) ease;
}
.wv-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 1px 0 color-mix(in srgb, var(--wv-btn-bg) 62%, #000); }
.wv-btn:disabled { background: var(--ui-raised); color: var(--ui-muted); box-shadow: none; cursor: default; }
.wv-btn--block { width: 100%; }
.wv-btn--sm { min-height: 44px; padding: 0 16px; font-size: .95rem; border-radius: var(--wv-radius-sm); }
.wv-btn--soft { --wv-btn-bg: var(--ui-soft); --wv-btn-ink: var(--ui-brand); box-shadow: none; }
.wv-btn--ghost { --wv-btn-bg: transparent; --wv-btn-ink: var(--ui-brand); box-shadow: inset 0 0 0 2px var(--ui-control-border); }
.wv-btn--positive { --wv-btn-bg: var(--ui-positive-vivid); --wv-btn-ink: var(--ui-on-positive-vivid); }
.wv-btn--hero { --wv-btn-bg: var(--wv-hero-btn); --wv-btn-ink: var(--wv-hero-btn-ink); box-shadow: 0 3px 0 rgb(0 0 0 / .22); }
.wv-btn--icon { width: 48px; min-height: 48px; padding: 0; border-radius: 14px; --wv-btn-bg: transparent; --wv-btn-ink: var(--ui-text); box-shadow: none; }
.wv-btn--icon:hover { background: var(--ui-raised); }

/* Etiquetas */
.wv-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: var(--ui-soft); color: var(--ui-brand); font: 700 .74rem/1 var(--wv-font-body); }
.wv-tag--positive { background: var(--ui-positive-soft); color: var(--ui-positive); }
.wv-tag--achievement { background: var(--ui-achievement); color: var(--ui-on-achievement); }

/* Cartões e linhas */
.wv-card { display: grid; gap: 12px; padding: 16px; border-radius: var(--wv-radius-lg); background: var(--ui-surface); border: 1px solid var(--ui-border); min-width: 0; }
.wv-hero { position: relative; overflow: hidden; display: grid; gap: 16px; padding: 20px; border-radius: var(--wv-radius-xl); color: var(--wv-hero-ink); background: linear-gradient(150deg, var(--wv-hero-a), var(--wv-hero-b)); box-shadow: 0 18px 30px -20px color-mix(in srgb, var(--wv-hero-b) 90%, #000); }
.wv-hero .wv-eyebrow { color: inherit; opacity: .82; }
.wv-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 20px; border: 1px solid var(--ui-border); background: var(--ui-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wv-row__ico { width: 42px; height: 42px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--ui-soft); color: var(--ui-brand); }
.wv-row b { display: block; font: 650 .95rem/1.25 var(--wv-font-body); }
.wv-row small { display: block; color: var(--ui-muted); font-size: .82rem; line-height: 1.35; }
.wv-row__chev { margin-left: auto; color: var(--ui-muted); flex: none; }

/* Ícones (24 px, traço único; tamanho e cor pelo uso) */
.wv-ico { flex: none; display: block; }

/* Progresso */
.wv-progress { height: 8px; border-radius: 99px; background: var(--ui-raised); overflow: hidden; }
.wv-progress > i { display: block; height: 100%; border-radius: inherit; background: var(--ui-brand); transition: width var(--wv-dur-slow) var(--wv-ease); }
.wv-segs { display: flex; gap: 5px; }
.wv-segs > i { flex: 1; height: 8px; border-radius: 99px; background: var(--ui-raised); position: relative; overflow: hidden; }
.wv-segs > i::after { content: ""; position: absolute; inset: 0; background: var(--ui-brand); transform: scaleX(0); transform-origin: left; transition: transform var(--wv-dur-slow) var(--wv-ease); }
.wv-segs > i.wv-on::after { transform: scaleX(1); }
.wv-segs > i.wv-cur::after { transform: scaleX(.18); }

/* Orbe: núcleo = Aprenda, anel de dentro = com apoio, anel de fora = sozinho */
.wv-orb { display: block; overflow: visible; }
.wv-orb__seg { fill: none; stroke: var(--wv-orb-empty); stroke-width: 7; stroke-linecap: round; transition: stroke var(--wv-dur-slow) ease; }
.wv-orb__seg--g { stroke: var(--ui-brand); }
.wv-orb__seg--i { stroke: var(--ui-positive-vivid); }
.wv-orb__seg--next { stroke: var(--ui-brand-vivid); animation: wv-pulse 1.6s ease-in-out infinite; }
/* Orbe da prática livre: um anel de quatro arcos; dentro da régua, mais grosso e com uma marca. */
.wv-orb__seg--um { stroke-width: 10; }
.wv-orb__seg--regua { stroke-width: 14; }
.wv-orb__marca circle { fill: var(--ui-positive-vivid); stroke: var(--ui-surface); stroke-width: 2.5; }
.wv-orb__marca path { fill: none; stroke: var(--ui-on-positive-vivid); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wv-hero .wv-orb__marca circle { fill: #b9f2bf; stroke: transparent; }
.wv-hero .wv-orb__marca path { stroke: var(--wv-hero-btn-ink); }
.wv-orb__core { fill: var(--ui-surface); stroke: var(--wv-orb-empty); stroke-width: 3; transition: fill var(--wv-dur-slow) ease; }
.wv-orb__core--on { fill: var(--ui-brand); stroke: var(--ui-brand); }
.wv-orb__num { font: 700 24px/1 var(--wv-font-display); fill: var(--ui-text); text-anchor: middle; dominant-baseline: central; }
/* Centro aceso sem a aula concluída: o número da aula, claro sobre o petróleo (revisão de 16/10). */
.wv-orb__num--on { fill: var(--ui-surface); }
.wv-orb__check { fill: none; stroke: var(--ui-surface); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.wv-orb__gold { fill: none; stroke: var(--ui-achievement); stroke-width: 2.6; stroke-dasharray: 1 6; stroke-linecap: round; transform-origin: 60px 60px; animation: wv-spin 28s linear infinite; }
.wv-orb--glow { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--ui-achievement) 55%, transparent)); }
.wv-hero .wv-orb__seg { stroke: rgb(255 255 255 / .22); }
.wv-hero .wv-orb__seg--g { stroke: #c7f4f1; }
.wv-hero .wv-orb__seg--i { stroke: #b9f2bf; }
.wv-hero .wv-orb__seg--next { stroke: #fff; }
.wv-hero .wv-orb__core { fill: rgb(255 255 255 / .14); stroke: rgb(255 255 255 / .5); }
.wv-hero .wv-orb__core--on { fill: #fff; stroke: #fff; }
.wv-hero .wv-orb__check { stroke: var(--wv-hero-btn-ink); }
.wv-hero .wv-orb__num { fill: #fff; }
.wv-hero .wv-orb__num--on { fill: var(--wv-hero-btn-ink); }

/* Erros que voltam: errou, amanhã, 3, 7 e 14 dias */
.wv-ladder { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.wv-ladder::before { content: ""; position: absolute; left: 10%; right: 10%; top: 9px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--ui-brand) 30%, var(--ui-border)); }
.wv-ladder li { position: relative; display: grid; justify-items: center; gap: 6px; font: 650 .75rem/1.2 var(--wv-font-body); color: var(--ui-muted); text-align: center; }
.wv-ladder i { width: 21px; height: 21px; border-radius: 50%; background: var(--ui-surface); border: 3px solid var(--ui-brand); z-index: 1; display: grid; place-items: center; color: var(--ui-on-positive-vivid); }
.wv-ladder .wv-ladder__now i { border-color: var(--ui-negative); }
.wv-ladder .wv-ladder__end i { background: var(--ui-positive-vivid); border-color: var(--ui-positive-vivid); }
.wv-tip { display: grid; gap: 12px; padding: 16px; border-radius: var(--wv-radius-lg); background: var(--ui-soft); border: 1px solid color-mix(in srgb, var(--ui-brand) 22%, transparent); }

/* Folha que sobe de baixo */
.wv-scrim { position: fixed; inset: 0; z-index: 60; background: rgb(10 20 22 / .55); opacity: 0; transition: opacity var(--wv-dur) ease; }
.wv-scrim.wv-on { opacity: 1; }
.wv-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 88vh; overflow-y: auto; margin-inline: auto; max-width: 640px;
  display: grid; gap: 14px; padding: 0 18px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 28px 28px 0 0;
  background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--wv-shadow-sheet);
  transform: translateY(104%); transition: transform var(--wv-dur-slow) var(--wv-ease), max-height var(--wv-dur-slow) var(--wv-ease); }
.wv-sheet.wv-on { transform: none; }
/* Maximizada pelo puxador: até o alto da tela. */
.wv-sheet.wv-sheet--cheia { max-height: calc(100dvh - env(safe-area-inset-top, 0px)); }
/* O puxador é um botão (tocar fecha, arrastar puxa): a faixa inteira do alto, presa
   enquanto o conteúdo rola, e a barrinha no meio. */
.wv-sheet__grab { position: sticky; top: 0; z-index: 2; display: grid; place-items: center; height: 34px; margin: 0 -18px -14px;
  padding: 0; border: 0; background: var(--ui-surface); color: inherit; cursor: grab; touch-action: none; }
.wv-sheet__grab::before { content: ""; width: 42px; height: 5px; border-radius: 3px; background: var(--ui-border); transition: background var(--wv-dur) ease; }
.wv-sheet__grab:hover::before, .wv-sheet__grab:active::before { background: var(--ui-muted); }
.wv-sheet__grab:active { cursor: grabbing; }
.wv-sheet__grab:focus-visible { outline: none; }
.wv-sheet__grab:focus-visible::before { outline: 2px solid var(--ui-brand); outline-offset: 4px; }

/* Trilha (parte 2): Hoje, erros que voltam, Para consolidar, trilha de orbes e folha da aula */
.wv-trilha { max-width: 640px; margin-inline: auto; display: grid; gap: 16px; padding-bottom: 32px; }
a.wv-row, a.wv-btn { text-decoration: none; }
.wv-hello { margin: 0; font: 600 .95rem/1.2 var(--wv-font-body); color: var(--ui-muted); }
.wv-hello b { color: var(--ui-text); font: 700 1.4rem/1.15 var(--wv-font-display); letter-spacing: -.01em; }
/* Anéis decorativos: no escuro cruzavam o título (revisão de 16/10, U-B22). Ficam mais
   leves no escuro e somem para a esquerda, onde está o texto (máscara radial). */
.wv-hero__rings { position: absolute; right: -56px; top: -56px; width: 240px; height: 240px; pointer-events: none;
  color: light-dark(rgb(255 255 255 / .24), rgb(242 251 250 / .11));
  -webkit-mask-image: radial-gradient(circle at 62% 38%, black 0 34%, transparent 62%);
  mask-image: radial-gradient(circle at 62% 38%, black 0 34%, transparent 62%); }
.wv-hero__row { position: relative; display: flex; align-items: center; gap: 14px; }
.wv-hero__txt { flex: 1; min-width: 0; display: grid; gap: 8px; }
/* Palavra longa ("responsabilidades") não pode alargar o cartão nem empurrar o botão. */
.wv-trilha .wv-hero { grid-template-columns: minmax(0, 1fr); }
.wv-hero__txt h2 { margin: 0; font: 700 clamp(1.15rem, 5.2vw, 1.45rem)/1.1 var(--wv-font-display); letter-spacing: -.01em;
  text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 380px) { .wv-trilha .wv-hero .wv-orb { width: 80px; height: 80px; } }
.wv-hero__txt p { margin: 0; font-size: .9rem; opacity: .9; }
.wv-hero__nota { position: relative; margin: -4px 0 0; font-size: .82rem; opacity: .88; display: flex; gap: 6px; align-items: center; }
.wv-tip__h { display: flex; gap: 12px; align-items: center; }
.wv-tip__ico { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--ui-surface); color: var(--ui-brand); }
.wv-tip p { margin: 0; font-size: .92rem; line-height: 1.45; }
.wv-tip .wv-btn--soft { justify-self: start; background: var(--ui-surface); box-shadow: inset 0 0 0 1px var(--ui-border); }
.wv-unit { display: grid; gap: 4px; margin-top: 4px; }
.wv-unit h2 { margin: 0; font: 700 1.25rem/1.15 var(--wv-font-display); }
.wv-unit__meta { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--ui-muted); }
.wv-unit__meta .wv-progress { flex: 1; height: 6px; }
.wv-path { list-style: none; margin: 4px 0 0; padding: 0; position: relative; display: grid; gap: 6px; }
.wv-path::before { content: ""; position: absolute; left: 35px; top: 34px; bottom: 34px; width: 3px; border-radius: 3px;
  background: repeating-linear-gradient(to bottom, var(--ui-border) 0 6px, transparent 6px 12px); }
.wv-node { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 8px 10px 8px 6px;
  border-radius: 22px; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wv-node:hover { background: var(--ui-surface); }
.wv-node__orb { width: 60px; height: 60px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ui-bg); }
.wv-node__txt { min-width: 0; display: grid; gap: 3px; justify-items: start; }
.wv-node__txt b { font: 650 1rem/1.25 var(--wv-font-body); }
.wv-node__txt small { font-size: .82rem; line-height: 1.35; color: var(--ui-muted); }
.wv-node__chev { margin-left: auto; flex: none; color: var(--ui-muted); }
.wv-node--atual { background: var(--ui-surface); border-color: var(--ui-border); box-shadow: var(--wv-shadow-card); }
.wv-soon { display: grid; gap: 8px; padding: 14px 16px; border-radius: 20px; border: 1px dashed var(--ui-border); color: var(--ui-muted); font-size: .88rem; }
.wv-soon b { color: var(--ui-text); font: 650 .9rem/1.2 var(--wv-font-body); }
.wv-soon ol { margin: 0; padding-left: 1.4em; display: grid; gap: 2px; }
.wv-soon p { margin: 0; }
.wv-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.wv-steps li { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 10px 0; }
.wv-steps li::before { content: ""; position: absolute; left: 14px; top: 40px; bottom: -8px; width: 2px; background: var(--ui-border); }
.wv-steps li:last-child::before { display: none; }
.wv-steps__n { width: 30px; height: 30px; z-index: 1; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--ui-border);
  background: var(--ui-surface); color: var(--ui-muted); font: 700 .8rem/1 var(--wv-font-body); }
.wv-steps .wv-feito .wv-steps__n { background: var(--ui-brand); border-color: var(--ui-brand); color: var(--ui-surface); }
.wv-steps .wv-agora .wv-steps__n { border-color: var(--ui-brand); color: var(--ui-brand); }
.wv-steps b { display: block; font: 700 .97rem/1.2 var(--wv-font-body); }
.wv-steps small { display: block; margin-top: 2px; color: var(--ui-muted); font-size: .84rem; line-height: 1.4; }
.wv-note { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; line-height: 1.4; color: var(--ui-muted); }
.wv-note .wv-ico { margin-top: 1px; color: var(--ui-brand); }
.wv-sheet .wv-title { margin-top: 4px; }
/* A ação da folha fica sempre à vista, presa ao pé enquanto o resto rola.
   O espaço de baixo sai da folha e entra na ação: o Chromium desconta o
   padding do contêiner ao prender um elemento, e o texto passaria por baixo.
   Vale também com a ação dentro de um bloco do conteúdo (Progresso, "Como ler"): só
   filha direta deixava 22 px de texto aparecendo abaixo do "Entendi" (19/10/2026). */
.wv-sheet:has(.wv-sheet__acao) { padding-bottom: 0; }
.wv-sheet__acao { position: sticky; bottom: 0; z-index: 1; margin: 0 -18px;
  padding: 12px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--ui-surface); box-shadow: 0 -14px 16px -14px rgb(0 0 0 / .35); }
.wv-sheet p { margin: 0; }
.wv-scene { width: 100%; height: auto; display: block; border-radius: 18px; }
.wv-scene .s-bg { fill: var(--ui-soft); }
.wv-scene .s-card { fill: var(--ui-surface); stroke: var(--ui-border); stroke-width: 1.5; }
.wv-scene .s-brand { fill: var(--ui-brand); }
.wv-scene .s-ink { fill: var(--ui-text); opacity: .82; }
.wv-scene .s-soft2 { fill: var(--ui-border); }
.wv-scene .s-leaf { fill: var(--ui-positive-vivid); }
.wv-scene .s-gold { fill: var(--ui-achievement); }
.wv-scene .s-ring { fill: none; stroke: var(--ui-brand); opacity: .2; stroke-width: 2; }
.wv-scene .s-bubble { fill: var(--ui-brand); }
.wv-scene .s-dot, .wv-scene .s-tick { fill: none; stroke: var(--ui-surface); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.wv-scene .s-dot { fill: var(--ui-surface); stroke: none; }
.wv-scene .s-line { fill: none; stroke: var(--ui-text); opacity: .8; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wv-scene .s-arco { fill: none; stroke-width: 8; stroke-linecap: round; }
@media (min-width: 900px) {
  .wv-trilha { max-width: 720px; }
}

/* Aula (parte 4): sessão em tela cheia, Aprenda em cartões e Rodada.
   A classe wv-sessao no body só existe com a aula aberta: esconde as barras
   do app (Material 3: tarefa focada) e some ao sair. */
body.wv-sessao .topbar, body.wv-sessao #nav { display: none !important; }
.wv-sessao-tela { min-height: 100dvh; max-width: 640px; margin-inline: auto; display: flex; flex-direction: column; }
.wv-sessao__topo { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; min-height: 64px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px 6px; background: var(--ui-bg); }
.wv-sessao__segs { flex: 1; }
.wv-sessao__titulo { flex: 1; min-width: 0; display: grid; gap: 2px; padding-right: 48px; text-align: center; }
.wv-sessao__titulo b { font: 700 1rem/1.2 var(--wv-font-display); }
.wv-sessao__titulo small { font-size: .82rem; color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wv-sessao__alerta { margin: 0 16px 8px; padding: 10px 12px; border-radius: 14px; background: var(--ui-negative-soft); color: var(--ui-text); font-size: .9rem; }
.wv-sessao__corpo { flex: 1; display: grid; gap: 16px; align-content: start; padding: 8px 16px 24px; }
.wv-sessao__acao { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 10px; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--ui-bg) 74%, transparent); }
/* Teclado aberto (html[data-teclado], marcado por teclado.js): o pé deixa de ficar preso e
   não cobre o campo em que a pessoa escreve (revisão de 16/10, U-B03). */
:root[data-teclado] .wv-sessao__acao { position: static; background: var(--ui-bg); }
.wv-btn--quadrado { width: 56px; padding: 0; flex: none; }
.wv-centro { display: grid; justify-items: center; gap: 8px; text-align: center; }
.wv-centro p { margin: 0; max-width: 34ch; }
.wv-ensino { display: grid; gap: 14px; padding: 22px; border-radius: var(--wv-radius-xl); background: var(--ui-surface); border: 1px solid var(--ui-border);
  box-shadow: 0 18px 30px -24px rgb(0 0 0 / .5); animation: wv-rise var(--wv-dur) var(--wv-ease) both; }
.wv-ensino__cabeca { display: grid; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--ui-border); }
.wv-ensino__cabeca p { margin: 0; }
.wv-ensino__texto { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.wv-balao { border-radius: 22px 22px 22px 6px; padding: 16px; background: var(--ui-soft); }
.wv-balao p { margin: 0; font: 500 1.18rem/1.6 var(--wv-font-body); }
.wv-vocab { margin: 0; display: grid; gap: 8px; }
.wv-vocab div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 14px; border-radius: 14px; background: var(--ui-raised); }
.wv-vocab dt { font: 700 1.05rem/1.2 var(--wv-font-body); }
.wv-vocab dd { margin: 0; color: var(--ui-muted); text-align: right; }
/* P08: só cartões novos; os blocos atuais mantêm o desenho/pixels. */
.wv.wv-aprenda-sessao { height: 100dvh; min-height: 0; overflow: hidden; }
.wv-aprenda-sessao .wv-sessao__corpo { min-height: 0; overflow-y: auto; }
.wv .wv-aprenda-v2 { touch-action: pan-y; overflow-wrap: anywhere; }
.wv .wv-aprenda-v2 .wv-title { font-size: 1.55rem; }
.wv .wv-aprenda__opcoes { border: 0; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
/* Retorno da checagem: só o título tem a cor do resultado; a explicação fica no texto comum. */
.wv .wv-aprenda__retorno { padding: 14px; border-radius: 16px; background: var(--ui-negative-soft); color: var(--ui-text); }
.wv .wv-aprenda__retorno b { display: flex; align-items: center; gap: 6px; color: var(--ui-negative); }
.wv .wv-aprenda__retorno--certo { background: var(--ui-positive-soft); }
.wv .wv-aprenda__retorno--certo b { color: var(--ui-positive); }
.wv .wv-aprenda__retorno p { margin: 6px 0 0; }
/* Conferida: a certa em verde e a escolhida errada em vermelho, com ícone; as outras esmaecem. */
.wv .wv-opcao.wv-opcao--certa { border-color: var(--ui-positive); background: var(--ui-positive-soft); opacity: 1; }
.wv .wv-opcao.wv-opcao--errada { border-color: var(--ui-negative); background: var(--ui-negative-soft); opacity: 1; }
.wv .wv-opcao.wv-opcao--certa .wv-opcao__letra { background: var(--ui-positive-vivid); color: var(--ui-on-positive-vivid); }
.wv .wv-opcao.wv-opcao--errada .wv-opcao__letra { background: var(--ui-negative); color: var(--ui-surface); }
.wv .wv-opcao__marca { margin-left: auto; flex: none; }
.wv .wv-opcao--certa .wv-opcao__marca { color: var(--ui-positive); }
.wv .wv-opcao--errada .wv-opcao__marca { color: var(--ui-negative); }
/* Ação de texto (Material 3, "text button"): 48 px de alvo, sem disputar com o botão principal. */
.wv-link { min-height: 48px; padding: 0 12px; border: 0; background: transparent; color: var(--ui-brand); cursor: pointer;
  font: 700 .95rem/1 var(--wv-font-body); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.wv-link:hover { text-decoration-thickness: 2.5px; }
.wv .wv-aprenda__comparacao { display: grid; gap: 10px; }
.wv .wv-aprenda__comparacao p { display: grid; gap: 5px; padding: 14px; border-radius: 16px; margin: 0; background: var(--ui-raised); }
.wv .wv-aprenda__comparacao p:first-child { background: var(--ui-negative-soft); }
.wv .wv-aprenda__comparacao p:last-child { background: var(--ui-positive-soft); }
.wv .wv-aprenda__comparacao span { font-size: .85rem; color: var(--ui-muted); }
.wv .wv-aprenda__comparacao del { color: var(--ui-negative); }
.wv .wv-aprenda__comparacao ins { color: var(--ui-positive); text-decoration: none; }
.wv .wv-aprenda__acoes { position: relative; flex-shrink: 0; display: grid; grid-template-columns: auto 1fr; }
.wv .wv-aprenda__acoes > .wv-btn--block:first-child { grid-column: 1 / -1; }
.wv .wv-aprenda__pular { grid-column: 1 / -1; justify-self: center; }
.wv .wv-aprenda-v2 .wv-player--mini { grid-template-columns: auto 1fr; }
.wv .wv-aprenda-v2 .wv-player--mini .wv-player__botoes { grid-column: 1 / -1; justify-content: center; }
.wv .wv-aprenda-v2 .wv-player--mini .wv-chip { white-space: nowrap; }
.wv-abas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: var(--ui-raised); }
.wv-abas button { min-height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--ui-muted); font: 700 .95rem/1 var(--wv-font-body); cursor: pointer; }
.wv-abas button.wv-on { background: var(--ui-surface); color: var(--ui-text); box-shadow: 0 2px 6px -2px rgb(0 0 0 / .25); }
.wv-skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wv-skill { position: relative; display: grid; gap: 4px; align-content: start; min-height: 142px; padding: 14px; border-radius: 22px;
  border: 2px solid var(--ui-control-border); background: var(--ui-surface); color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: transform var(--wv-dur-fast) ease, border-color var(--wv-dur) ease; }
.wv-skill:active { transform: scale(.98); }
.wv-skill__ico { width: 44px; height: 44px; margin-bottom: 6px; display: grid; place-items: center; border-radius: 14px; background: var(--ui-soft); color: var(--ui-brand); }
.wv-skill b { font: 700 1.1rem/1.15 var(--wv-font-display); }
.wv-skill small { font-size: .8rem; line-height: 1.35; color: var(--ui-muted); }
/* Selos do cartão ("Feita 2 vezes", "Nível-alvo B1") no fluxo: lado a lado quando cabem, um embaixo do outro
   quando não (a 360 px). Texto de status inteiro é rótulo, não badge de canto (Material 3: badge até 4 caracteres). */
.wv-skill__selos { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 6px; }
.wv-skill__nivel { width: max-content; max-width: 100%; padding: 5px 9px; display: inline-flex;
  align-items: center; gap: 6px; border-radius: 999px; background: var(--ui-soft); color: var(--ui-brand);
  font: 700 .72rem/1.2 var(--wv-font-body); }
.wv-skill__nivel b { font: inherit; font-weight: 800; }
.wv-nivel-pratica { width: max-content; max-width: 100%; margin: 0 0 12px; padding: 7px 11px; display: inline-flex;
  align-items: center; gap: 8px; border-radius: 999px; background: var(--ui-soft); color: var(--ui-brand);
  font: 700 .82rem/1.2 var(--wv-font-body); }
.wv-nivel-pratica b { font-weight: 800; }
.wv-skill__credito { margin-top: 4px; font: 700 .72rem/1 var(--wv-font-body); color: var(--ui-muted); }
.wv-skill__marca { position: absolute; top: 12px; right: 12px; color: var(--ui-positive); }
.wv-skill--proxima { border-color: var(--ui-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-brand) 18%, transparent); }
.wv-skill--feita { background: var(--ui-positive-soft); border-color: transparent; }
.wv-skill--feita .wv-skill__ico { background: var(--ui-positive-vivid); color: var(--ui-on-positive-vivid); }
.wv-skill--travada { border-style: dashed; background: transparent; cursor: default; }
.wv-skill--travada .wv-skill__ico { background: var(--ui-raised); color: var(--ui-muted); }
.wv-skill--travada b { color: var(--ui-muted); }
/* Prática livre: quantas vezes a habilidade foi feita nesta aula ("Feita 2 vezes"); some enquanto zero.
   Até 18/10 ficava no canto (absolute, com reticências) e a 360 px saía "Feita 2 ve…"; agora é o primeiro selo. */
.wv-skill__conta { width: max-content; max-width: 100%; padding: 5px 9px; border-radius: 999px;
  background: var(--ui-positive-vivid); color: var(--ui-on-positive-vivid); font: 800 .72rem/1.2 var(--wv-font-body); font-variant-numeric: tabular-nums; }
.wv-node__conta { flex: none; min-width: 32px; padding: 4px 8px; border-radius: 99px; text-align: center;
  background: var(--ui-positive-vivid); color: var(--ui-on-positive-vivid); font: 800 .8rem/1 var(--wv-font-body); font-variant-numeric: tabular-nums; }
.wv-selo { padding: 4px 8px; border-radius: 99px; background: var(--ui-brand); color: var(--ui-surface); font: 700 .7rem/1 var(--wv-font-body); }
.wv-gerenciar { color: var(--ui-muted); font-size: .9rem; }
.wv-gerenciar summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.wv-gerenciar[open] { display: grid; gap: 10px; }
.wv-gerenciar p { margin: 0; }
@media (min-width: 900px) {
  .wv-sessao-tela { max-width: 720px; }
}

/* Perguntas e retorno (parte 5: Ler; Ouvir reaproveita na parte 6).
   Uma pergunta por tela, opções em cartões com rádio de verdade (o leitor de
   tela anuncia pergunta, opção e estado), campo curto com o limite à vista. */
.wv-sessao__conta { min-width: 40px; text-align: right; font: 700 .85rem/1 var(--wv-font-body); color: var(--ui-muted); }
.wv-ler { display: grid; gap: 16px; align-content: start; }
.wv-instrucao { margin: 0; font-size: .9rem; color: var(--ui-muted); }
.wv-fonte { border-radius: var(--wv-radius-lg); background: var(--ui-surface); border: 1px solid var(--ui-border); }
.wv-fonte summary { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 16px; cursor: pointer; color: var(--ui-brand); font: 700 .9rem/1 var(--wv-font-body); }
.wv-fonte p { margin: 0; padding: 0 16px 16px; font-size: 1.05rem; line-height: 1.65; }
.wv-pergunta { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; min-width: 0; }
/* Celular (revisão de 16/10, U-B01): a pergunta fica à vista sob o topo enquanto a fonte rola
   e some quando a pergunta de verdade aparece (padrão de cabeçalho preso do Material 3).
   Tocar leva às opções. --wv-topo é a altura medida do topo da sessão. */
.wv-pergunta-fixa { position: sticky; top: var(--wv-topo, 64px); z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px; align-items: center; width: 100%; min-height: 48px; padding: 10px 12px 10px 14px; border-radius: var(--wv-radius-md);
  border: 1px solid color-mix(in srgb, var(--ui-brand) 35%, var(--ui-border)); background: var(--ui-surface); color: var(--ui-text);
  box-shadow: 0 10px 18px -14px rgb(0 0 0 / .55); font: inherit; text-align: left; cursor: pointer;
  transition: opacity var(--wv-dur) ease, visibility var(--wv-dur) ease; }
.wv-pergunta-fixa[hidden] { display: none; }
.wv-pergunta-fixa--oculta { opacity: 0; visibility: hidden; pointer-events: none; }
.wv-pergunta-fixa__rotulo { grid-column: 1; font: 700 .72rem/1.1 var(--wv-font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ui-brand); }
.wv-pergunta-fixa__texto { grid-column: 1; font: 700 1rem/1.3 var(--wv-font-display);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wv-pergunta-fixa__ir { grid-column: 2; grid-row: 1 / span 2; color: var(--ui-brand); transform: rotate(90deg); }
.wv-sessao-tela .wv-pergunta__texto { scroll-margin-top: calc(var(--wv-topo, 64px) + 16px); }
.wv-pergunta__texto { padding: 0; font: 700 1.25rem/1.3 var(--wv-font-display); color: var(--ui-text); }
.wv-pergunta__dica { margin: 0; font-size: .88rem; }
.wv-opcoes { display: grid; gap: 10px; }
.wv-opcao { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 14px; border-radius: 18px;
  border: 2px solid var(--ui-control-border); background: var(--ui-surface); cursor: pointer; font-size: 1.02rem; line-height: 1.35;
  transition: border-color var(--wv-dur) ease, background var(--wv-dur) ease, transform var(--wv-dur-fast) ease; }
.wv-opcao:active { transform: scale(.99); }
.wv-opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wv-opcao__letra { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--ui-raised); font: 700 .9rem/1 var(--wv-font-body); color: var(--ui-muted); }
.wv-opcao:has(input:checked) { border-color: var(--ui-brand); background: var(--ui-soft); }
.wv-opcao:has(input:checked) .wv-opcao__letra { background: var(--ui-brand); color: var(--ui-surface); }
.wv-opcao:has(input:focus-visible) { outline: 3px solid var(--ui-brand); outline-offset: 3px; }
.wv-opcao:has(input:disabled) { cursor: default; opacity: .7; }
.wv-campo { width: 100%; min-height: 56px; padding: 0 16px; border-radius: 16px; border: 2px solid var(--ui-control-border); background: var(--ui-surface);
  color: var(--ui-text); font: 500 1.1rem/1 var(--wv-font-body); }
.wv-campo:focus-visible { outline: 3px solid var(--ui-brand); outline-offset: 2px; border-color: var(--ui-brand); }
.wv-contador { margin: 0; font-size: .85rem; color: var(--ui-muted); }
.wv-contador--passou { color: var(--ui-negative); font-weight: 650; }
.wv-apoio { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--ui-raised); cursor: pointer; }
.wv-apoio input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--ui-brand); }
.wv-apoio span { display: grid; gap: 2px; font-size: .92rem; }
.wv-apoio small { color: var(--ui-muted); font-size: .82rem; }
.wv-resultado { gap: 10px; }
.wv-anel { position: relative; width: 132px; height: 132px; }
.wv-anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wv-anel__trilho { stroke: var(--ui-raised); }
.wv-anel__parte { stroke: var(--ui-brand); transition: stroke-dashoffset var(--wv-dur-slow) var(--wv-ease); }
.wv-anel--tudo .wv-anel__parte { stroke: var(--ui-positive-vivid); }
.wv-anel > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.wv-anel b { font: 700 1.9rem/1 var(--wv-font-display); }
.wv-anel small { color: var(--ui-muted); font-size: .8rem; }
.wv-retorno { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wv-retorno__item { width: 100%; min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px;
  border: 1px solid var(--ui-border); background: var(--ui-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wv-retorno__marca { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; }
.wv-certo .wv-retorno__marca { background: var(--ui-positive-soft); color: var(--ui-positive); }
.wv-errado .wv-retorno__marca { background: var(--ui-negative-soft); color: var(--ui-negative); }
.wv-retorno__texto { min-width: 0; display: grid; gap: 3px; }
.wv-retorno__texto b { font: 650 .97rem/1.3 var(--wv-font-body); }
.wv-retorno__texto small { color: var(--ui-muted); font-size: .84rem; line-height: 1.35; }
.wv-retorno__chev { margin-left: auto; flex: none; color: var(--ui-muted); }
.wv-porque { display: grid; gap: 6px; }
.wv-porque p { margin: 0; line-height: 1.5; }
.wv-trecho { margin: 0; padding: 12px 14px; border-left: 4px solid var(--ui-brand); border-radius: 0 14px 14px 0; background: var(--ui-soft); font-size: 1.02rem; line-height: 1.55; }
@media (min-width: 900px) {
  .wv-sessao-tela.wv-sessao--larga { max-width: 1040px; }
  /* Revisão de 16/10 (U-B23): no desktop o pé vem logo depois do conteúdo (continua preso
     embaixo se o conteúdo passar da tela) e os botões têm a largura deles, à direita, como
     as ações de um diálogo no Material 3; o voltar fica à esquerda. O Aprenda tem rolagem
     própria e fica como está. */
  .wv-sessao-tela:not(.wv-aprenda-sessao) > .wv-sessao__corpo { flex: none; }
  .wv-sessao__acao:not(.wv-aprenda__acoes) { justify-content: flex-end; }
  .wv-sessao__acao:not(.wv-aprenda__acoes) > .wv-btn--block { width: auto; min-width: 240px; flex: none; }
  .wv-sessao__acao:not(.wv-aprenda__acoes) > .wv-btn--quadrado { margin-right: auto; }
  .wv-ler--lado { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .wv-ler--lado .wv-fonte { position: sticky; top: 76px; }
}

/* Player de Ouvir (parte 6): tocar grande, onda que acende, "Ouvir de novo" e 0,8× */
.wv-fonte-audio { display: grid; gap: 8px; align-content: start; }
.wv-player { display: grid; gap: 12px; padding: 16px; border-radius: var(--wv-radius-lg); background: var(--ui-surface); border: 1px solid var(--ui-border); }
.wv-player__alto { display: flex; align-items: center; gap: 14px; }
.wv-player__tocar { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--ui-button); color: #fff; box-shadow: 0 3px 0 color-mix(in srgb, var(--ui-button) 62%, #000);
  transition: transform var(--wv-dur-fast) ease, box-shadow var(--wv-dur-fast) ease; }
.wv-player__tocar:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--ui-button) 62%, #000); }
.wv-onda { flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; gap: 3px; }
.wv-onda i { flex: 1; min-width: 2px; height: var(--h, 12px); border-radius: 3px; background: var(--wv-orb-empty); transition: background var(--wv-dur) ease; }
.wv-onda i.wv-on { background: var(--ui-brand); }
.wv-player__baixo { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wv-player__tempo { font: 650 .9rem/1 var(--wv-font-body); color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.wv-player__botoes { display: flex; gap: 8px; flex-wrap: wrap; }
/* 48 px (Material 3): os chips do player são o alvo mais tocado de Ouvir. */
.wv-chip { min-height: 48px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ui-control-border);
  background: var(--ui-surface); color: var(--ui-brand); font: 700 .88rem/1 var(--wv-font-body); cursor: pointer; }
.wv-chip.wv-on { background: var(--ui-brand); border-color: var(--ui-brand); color: var(--ui-surface); }
.wv-player__falha { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ui-negative); font-size: .9rem; }
/* Minijogador: uma linha com tocar, tempo, "De novo" e 0,8×, e o progresso por baixo. */
.wv-player--mini { position: relative; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px 14px; }
.wv-player--mini .wv-player__tocar { width: 48px; height: 48px; }
.wv-player--mini .wv-player__botoes { flex-wrap: nowrap; gap: 6px; }
.wv-player--mini .wv-chip { padding: 0 10px; font-size: .82rem; }
.wv-player--mini .wv-player__tempo { white-space: nowrap; font-size: .82rem; }
.wv-player--mini .wv-player__falha { grid-column: 1 / -1; }
.wv-player__linha { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; border-radius: 3px; background: var(--wv-orb-empty); overflow: hidden; }
.wv-player__linha i { display: block; height: 100%; background: var(--ui-brand); transition: width var(--wv-dur) linear; }
.wv-player__falha[hidden] { display: none; }
@media (min-width: 900px) {
  .wv-ler--lado .wv-fonte-audio { position: sticky; top: 76px; }
}

/* Escrever (parte 7): papel recolhível, editor, espera da leitura e retorno em abas */
.wv-instrucao--forte { color: var(--ui-text); font-size: 1rem; line-height: 1.5; }
.wv-papel__fatos { margin: 0; padding: 0 16px 16px 34px; display: grid; gap: 6px; font-size: .95rem; line-height: 1.45; }
.wv-papel summary { min-height: 56px; padding: 10px 16px; display: grid; gap: 4px; align-content: center; }
.wv-papel__titulo { display: flex; align-items: center; gap: 8px; }
.wv-papel__titulo small { color: var(--ui-muted); font-weight: 600; }
.wv-papel__resumo { color: var(--ui-text); font: 500 .92rem/1.4 var(--wv-font-body); }
.wv-papel[open] .wv-papel__resumo { display: none; }
.wv-ler > .wv-tag { justify-self: start; }
.wv-editor { display: grid; gap: 8px; }
.wv-editor__texto { min-height: 190px; padding: 14px 16px; resize: vertical; font: 400 1.05rem/1.55 var(--wv-font-body); }
.wv-contador--dentro { color: var(--ui-positive); font-weight: 650; }
.wv-frases { display: grid; gap: 8px; }
.wv-frases .wv-chip { font-weight: 600; color: var(--ui-text); }
.wv-espera { padding-top: 24px; }
.wv-espera__barras { height: 52px; display: flex; align-items: center; gap: 8px; }
.wv-espera__barras i { width: 10px; height: 20px; border-radius: 6px; background: var(--ui-brand); animation: wv-escuta .9s ease-in-out infinite alternate; }
.wv-espera__barras i:nth-child(2) { animation-delay: .15s; }
.wv-espera__barras i:nth-child(3) { animation-delay: .3s; }
@keyframes wv-escuta { from { height: 14px; opacity: .6; } to { height: 48px; opacity: 1; } }
.wv-escrita__original { margin: 0; padding: 16px; border-radius: var(--wv-radius-lg); background: var(--ui-surface); border: 1px solid var(--ui-border);
  font-size: 1.05rem; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.wv-fonte .wv-escrita__original { border: 0; padding-top: 0; }
.wv-marca { border-radius: 4px; padding: 1px 2px; }
.wv-marca--error { background: var(--ui-negative-soft); }
.wv-marca--error s { text-decoration-color: var(--ui-negative); text-decoration-thickness: 2px; }
.wv-marca--correct { text-decoration: underline 2px var(--ui-positive); text-underline-offset: 4px; }
.wv-marca--suggestion { text-decoration: underline dotted 2px var(--ui-brand); text-underline-offset: 4px; }
/* Número no meio da frase: a pílula tem 28 px para não abrir a linha; a área de toque, 46 px (::after). */
.wv-ref { min-width: 28px; height: 28px; margin: 0 2px; padding: 0 7px; border: 0; border-radius: 99px; vertical-align: 1px; cursor: pointer;
  background: var(--ui-brand); color: var(--ui-surface); font: 700 .78rem/28px var(--wv-font-body); position: relative; }
.wv-ref::after { content: ""; position: absolute; inset: -9px; }
.wv-abas--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wv-abas--tres button { font-size: .88rem; padding: 0 4px; }
.wv-comentarios, .wv-criterios { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wv-comentario, .wv-criterio { display: grid; gap: 6px; padding: 14px; border-radius: 18px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-left-width: 5px; }
.wv-comentario p, .wv-criterio p { margin: 0; line-height: 1.5; }
.wv-comentario--error { border-left-color: var(--ui-negative); }
.wv-comentario--correct { border-left-color: var(--ui-positive); }
.wv-comentario--suggestion { border-left-color: var(--ui-brand); }
.wv-comentario:focus-visible { outline: 3px solid var(--ui-brand); outline-offset: 2px; }
.wv-criterio { border-left-color: var(--ui-positive); }
.wv-criterio--volta { border-left-color: var(--ui-negative); }
.wv-criterio__topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wv-nivel { display: flex; gap: 4px; flex: none; }
.wv-nivel i { width: 18px; height: 8px; border-radius: 4px; background: var(--ui-raised); }
.wv-nivel i.wv-on { background: var(--ui-brand); }
.wv-criterio .wv-tag { justify-self: start; }

/* Falar (parte 8): orbe de sete barras, preparo, legendas e controles da chamada.
   O orbe segue o som real (--orb-level, voice.createVisualizer): em silêncio as
   barras ficam paradas, sem animação que finja fala (mesma regra da Conversa).
   Verde-folha é a pessoa; azul-petróleo, a colega (regra de cores do app). */
.wv-voz { --orb-level: 0; --wv-voz-cor: var(--ui-brand-vivid); position: relative; flex: none; display: grid; place-items: center;
  width: 168px; height: 168px; margin: 6px auto 2px; border-radius: 50%; color: var(--wv-voz-cor);
  border: 1px solid color-mix(in srgb, var(--wv-voz-cor) 30%, transparent);
  background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--wv-voz-cor) 16%, transparent), transparent 70%);
  box-shadow: 0 0 calc(22px + var(--orb-level) * 36px) color-mix(in srgb, var(--wv-voz-cor) 24%, transparent);
  transition: color var(--wv-dur) ease, border-color var(--wv-dur) ease, box-shadow 90ms linear, opacity var(--wv-dur) ease; }
.wv-voz::before, .wv-voz::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; transition: transform 90ms linear; }
.wv-voz::before { inset: 16px; border: 1px solid color-mix(in srgb, currentColor 26%, transparent); transform: scale(calc(1 + var(--orb-level) * .12)); }
.wv-voz::after { inset: 32px; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); transform: scale(calc(1 + var(--orb-level) * .2)); }
.wv-voz__barras { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; height: 64px; }
.wv-voz__barras i { display: block; width: 7px; height: calc(var(--h) * (.45 + var(--orb-level) * 1.05)); border-radius: 10px; background: currentColor; transition: height 90ms linear; }
.wv-voz[data-estado="voce"] { --wv-voz-cor: var(--ui-positive); }
.wv-voz[data-estado="conectando"] { opacity: .65; }
.wv-voz--pequeno { width: 116px; height: 116px; margin: 10px auto 6px; }
.wv-voz--pequeno::before { inset: 12px; }
.wv-voz--pequeno::after { inset: 24px; }
.wv-voz--pequeno .wv-voz__barras { gap: 4px; height: 46px; }
.wv-voz--pequeno .wv-voz__barras i { width: 5px; height: calc(var(--h) * .7); }
.wv-voz-palco { gap: 6px; }
.wv-voz__estado { margin: 4px 0 0; min-height: 1.5em; font: 700 1.2rem/1.25 var(--wv-font-display); color: var(--ui-text); }
.wv-voz__meta { margin: 0; display: flex; gap: 14px; justify-content: center; color: var(--ui-muted); font: 600 .9rem/1 var(--wv-font-body); font-variant-numeric: tabular-nums; }
.wv-voz__meta b { color: var(--ui-text); }
.wv-legendas { display: grid; gap: 8px; }
.wv-legendas ol, .wv-legendas__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wv-legendas ol:empty { display: none; }
.wv-legenda { display: grid; gap: 2px; justify-self: start; max-width: 88%; padding: 10px 14px; border-radius: 18px 18px 18px 6px;
  background: var(--ui-surface); border: 1px solid var(--ui-border); }
.wv-legenda small { font: 700 .72rem/1.2 var(--wv-font-body); letter-spacing: .04em; color: var(--ui-brand); }
.wv-legenda p { margin: 0; font-size: 1rem; line-height: 1.45; overflow-wrap: anywhere; }
.wv-legenda--voce { justify-self: end; border-radius: 18px 18px 6px 18px; background: var(--ui-positive-soft); border-color: transparent; }
.wv-legenda--voce small { color: var(--ui-positive); }
.wv-legendas > .wv-btn { justify-self: center; }
.wv-frases__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.wv-frases__lista li { padding: 9px 14px; border-radius: 999px; background: var(--ui-raised); font: 600 .95rem/1.25 var(--wv-font-body); }
.wv-frases__lista--dentro { padding: 0 16px 16px; }
.wv-cuidados { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wv-cuidados li { display: flex; align-items: center; gap: 12px; font-size: .95rem; line-height: 1.4; }
.wv-cuidados .wv-ico, .wv-custo .wv-ico { color: var(--ui-brand); }
.wv-custo { margin: 0; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--ui-soft); font-size: .92rem; line-height: 1.45; }
.wv-btn--mudo { --wv-btn-ink: var(--ui-negative); box-shadow: inset 0 0 0 2px var(--ui-negative); }
/* Com a linha do custo, o pé fica opaco: só a margem de cima esmaece, e o texto que rola não aparece por trás. */
.wv-sessao__acao:has(> .wv-acao-pilha) { padding-top: 20px; background: linear-gradient(to top, var(--ui-bg) calc(100% - 16px), transparent); }
.wv-acao-pilha { flex: 1; min-width: 0; display: grid; gap: 8px; }
.wv-acao-pilha__botoes { display: flex; gap: 10px; }
.wv-acao-pilha__botoes > .wv-btn--ghost:not(.wv-btn--block) { flex: none; }
.wv-acao__nota { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--ui-muted); font: 600 .84rem/1.2 var(--wv-font-body); }
.wv-acao__nota .wv-ico { color: var(--ui-brand); }
/* Tela baixa (360x640): o orbe da chamada encolhe para o papel aparecer sem rolar tanto. */
@media (max-height: 700px) {
  .wv-voz:not(.wv-voz--pequeno) { width: 128px; height: 128px; }
  .wv-voz:not(.wv-voz--pequeno) .wv-voz__barras { height: 52px; gap: 5px; }
}

/* Celebração (parte 9): só nos marcos da aula. O orbe entra crescendo, os
   confetes caem uma vez (mostarda só com o dourado) e os três números saem do
   que a pessoa fez. Com "reduzir movimento", nada se mexe. */
.wv-sessao__acao > .wv-btn--ghost:not(.wv-btn--block):not(.wv-btn--quadrado) { flex: none; }
.wv-celebracao { position: relative; gap: 10px; padding-top: 12px; }
.wv-celebracao > .wv-orb { position: relative; z-index: 1; margin-bottom: 6px; animation: wv-pop .7s var(--wv-ease) both; }
.wv-celebracao > .wv-display, .wv-celebracao > p { position: relative; z-index: 1; }
.wv-celebracao > p { max-width: 36ch; line-height: 1.5; }
.wv-confete { position: absolute; inset: -8px -16px auto; height: 420px; overflow: hidden; pointer-events: none; }
.wv-confete i { position: absolute; top: -16px; left: var(--x); width: 8px; height: 14px; border-radius: 2px; opacity: 0;
  animation: wv-cai var(--t) var(--d) cubic-bezier(.25, .7, .4, 1) forwards; }
.wv-confete i:nth-child(3n) { width: 10px; height: 10px; border-radius: 50%; }
.wv-confete--a { background: var(--ui-brand); }
.wv-confete--b { background: var(--ui-positive-vivid); }
.wv-confete--c { background: var(--ui-brand-vivid); }
.wv-confete--d { background: var(--ui-achievement); }
@keyframes wv-cai { 0% { opacity: 1; transform: translateY(0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(400px) rotate(var(--r)); } }
@keyframes wv-pop { from { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.04); } to { opacity: 1; transform: none; } }
.wv-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wv-numero { display: grid; gap: 4px; align-content: start; justify-items: center; min-height: 112px; padding: 14px 8px; border-radius: 18px;
  border: 1px solid var(--ui-border); background: var(--ui-surface); color: inherit; font: inherit; text-align: center; animation: wv-rise var(--wv-dur-slow) var(--wv-ease) both; }
.wv-numero:nth-child(2) { animation-delay: 90ms; }
.wv-numero:nth-child(3) { animation-delay: 180ms; }
.wv-numero b { font: 700 1.7rem/1.05 var(--wv-font-display); font-variant-numeric: tabular-nums; }
.wv-numero small { font-size: .78rem; line-height: 1.3; color: var(--ui-muted); }
.wv-numero--botao { cursor: pointer; border: 2px solid var(--ui-brand); background: var(--ui-soft); }
.wv-numero__link { margin-top: auto; padding-top: 4px; font: 700 .8rem/1 var(--wv-font-body); color: var(--ui-brand); text-decoration: underline; text-underline-offset: 3px; }
.wv-voltam { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wv-voltam li { display: flex; gap: 12px; align-items: center; }
.wv-voltam b { display: block; font: 650 .95rem/1.25 var(--wv-font-body); }
.wv-voltam small { display: block; color: var(--ui-muted); font-size: .84rem; line-height: 1.35; }

/* Para consolidar (parte 9): a regra no alto, o que volta hoje e cada item com origem e voltas. */
.wv-tip > .wv-btn { justify-self: start; }
/* A regra em Para consolidar: título e escada sempre à vista; o texto fica em "Como funciona",
   aberto na primeira vez e recolhido para quem já leu a dica na Trilha (validação de 11/10). */
.wv-regra summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; cursor: pointer;
  color: var(--ui-brand); font: 700 .9rem/1 var(--wv-font-body); }
.wv-regra summary::-webkit-details-marker { display: none; }
.wv-regra summary .wv-ico { transition: transform var(--wv-dur) ease; }
.wv-regra details[open] summary .wv-ico { transform: rotate(90deg); }
.wv-regra__texto { display: grid; gap: 10px; padding-top: 4px; }
.wv-regra__texto p { margin: 0; }
.wv-regra__texto .wv-btn { justify-self: start; }
.wv-tip > p { margin: 0; }
.wv-grupo { display: grid; gap: 10px; }
.wv-grupo h2 { display: flex; align-items: center; gap: 8px; }
.wv-grupo h2 small { min-width: 26px; padding: 3px 8px; border-radius: 99px; background: var(--ui-raised); color: var(--ui-muted); font: 700 .78rem/1.2 var(--wv-font-body); text-align: center; }
.wv-revs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wv-rev { display: grid; gap: 8px; padding: 16px; border-radius: var(--wv-radius-lg); background: var(--ui-surface); border: 1px solid var(--ui-border); min-width: 0; }
.wv-rev > .wv-btn { justify-self: start; }
.wv-rev__topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wv-rev__ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--ui-soft); color: var(--ui-brand); }
.wv-rev__origem { margin: 0; font-size: .9rem; color: var(--ui-text); }
.wv-rev__origem small { display: block; margin-top: 2px; color: var(--ui-muted); font-size: .82rem; }
.wv-rev__frase { margin: 0; font-size: .86rem; line-height: 1.4; color: var(--ui-muted); }
.wv-rev--feita { background: var(--ui-positive-soft); border-color: transparent; }
.wv-rev--feita .wv-rev__ico { background: var(--ui-positive-vivid); color: var(--ui-on-positive-vivid); }
.wv-medidor { display: flex; align-items: center; gap: 5px; }
.wv-medidor i { width: 28px; height: 8px; border-radius: 4px; background: var(--ui-raised); }
.wv-medidor i.wv-on { background: var(--ui-positive-vivid); }
.wv-medidor span { margin-left: 6px; font: 650 .82rem/1 var(--wv-font-body); color: var(--ui-muted); }
.wv-tag--calma { background: var(--ui-raised); color: var(--ui-text); }
.wv-adiar { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.wv-adiar .wv-btn { flex-direction: column; gap: 2px; min-height: 64px; }
.wv-adiar small { font: 600 .78rem/1 var(--wv-font-body); opacity: .8; }
.wv-vazio { justify-items: start; }
.wv-vazio p { margin: 0; }

/* Galeria (parte 1): só para conferir a fundação */
.wv-galeria { max-width: 760px; margin: auto; display: grid; gap: 28px; padding-bottom: 32px; }
.wv-galeria > section { display: grid; gap: 12px; }
.wv-galeria h2 { font: 700 1.15rem/1.2 var(--wv-font-display); margin: 0; }
.wv-fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wv-grade { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.wv-amostra { display: grid; gap: 6px; padding: 12px; border-radius: var(--wv-radius-md); border: 1px solid var(--ui-border); background: var(--ui-surface); font-size: .8rem; color: var(--ui-muted); text-align: center; justify-items: center; }
.wv-amostra b { color: var(--ui-text); font-size: .85rem; }
.wv-cor { width: 100%; height: 44px; border-radius: 12px; border: 1px solid var(--ui-border); }

@keyframes wv-pulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .35; } }
@keyframes wv-spin { to { transform: rotate(360deg); } }
@keyframes wv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.wv-enter { animation: wv-rise var(--wv-dur-slow) var(--wv-ease) both; }
@media (prefers-reduced-motion: reduce) {
  .wv *, .wv *::before, .wv *::after, .wv-sheet, .wv-scrim { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Prática livre, P3: tutorial "Como funciona" e dicas da primeira vez. */
.wv-tutorial { display: grid; gap: 12px; justify-items: start; }
.wv-tutorial__ico { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; background: var(--ui-soft); color: var(--ui-brand); }
/* Trecho da resposta marcado no texto (primeira vez): fundo e sublinhado, sem a barrinha no
   começo de cada linha. A barra lateral fica só no bloco citado (.wv-trecho, "Por quê?"). */
.wv-destaque { background: color-mix(in srgb, var(--ui-brand) 16%, transparent); color: inherit; border-radius: 4px; padding: 1px 2px;
  text-decoration: underline 2px color-mix(in srgb, var(--ui-brand) 70%, transparent); text-underline-offset: 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wv-dica { margin: 0; display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--wv-radius-md);
  background: var(--ui-soft); font-size: .88rem; line-height: 1.45; color: var(--ui-text); }
.wv-dica .wv-ico { flex: none; color: var(--ui-brand); margin-top: 1px; }
.wv-dica b { color: var(--ui-brand); }
.wv-lista-pedido { display: grid; gap: 8px; padding: 12px; border-radius: var(--wv-radius-md); border: 1px solid var(--ui-border); background: var(--ui-surface); }
.wv-lista-pedido ol, .wv-dicas-fala ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
/* Itens do pedido numerados (círculo vazio com o número): ✓ antes de escrever parecia cumprido. */
.wv-lista-pedido__n { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--ui-brand); color: var(--ui-brand); font: 800 .72rem/1 var(--wv-font-body); font-variant-numeric: tabular-nums; }
.wv-lista-pedido li, .wv-dicas-fala li { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; line-height: 1.4; }
.wv-lista-pedido .wv-ico, .wv-dicas-fala .wv-ico { flex: none; color: var(--ui-brand); margin-top: 2px; }
.wv-dicas-fala { display: grid; gap: 8px; padding: 12px; border-radius: var(--wv-radius-md); background: var(--ui-soft); }
.wv-exemplo p { margin: 8px 0 4px; }
/* Escrever no celular (revisão de 16/10): "Seu papel" e "Ver um exemplo" lado a lado, como
   botões segmentados (Material 3), e um painel de cada vez embaixo. O editor sobe. */
.wv-apoios { display: grid; gap: 8px; }
.wv-apoios__botoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.wv-apoios__botoes--dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wv-apoios__botao { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 6px 10px;
  border-radius: var(--wv-radius-md); border: 1px solid var(--ui-control-border); background: var(--ui-surface); color: var(--ui-brand);
  font: 700 .9rem/1.15 var(--wv-font-body); cursor: pointer; text-align: center; }
.wv-apoios__botao small { color: var(--ui-muted); font-weight: 600; font-size: .78rem; }
.wv-apoios__botao[aria-expanded="true"] { background: var(--ui-soft); border-color: var(--ui-brand); }
.wv-apoios__painel { padding: 12px 14px; border-radius: var(--wv-radius-md); border: 1px solid var(--ui-border); background: var(--ui-surface); }
.wv-apoios__painel[hidden] { display: none; }
.wv-apoios__painel .wv-papel__fatos { padding: 0 0 0 18px; }
.wv-apoios__painel.wv-exemplo p { margin: 0 0 6px; }
.wv-trecho-audio { justify-self: start; }

/* P17: lista de trechos, no padrão de capítulos de players de mídia.
   Revisão de 16/10: recolhível em "Ouvir por partes" e sem rolagem própria (a lista
   presa prendia o dedo); uma linha de 48 px por parte; a que toca fica destacada. */
.wv-reproducao { display: grid; gap: 10px; min-width: 0; }
.wv-reproducao .wv-player--mini { grid-template-columns: auto minmax(0, 1fr); }
.wv-reproducao .wv-player--mini .wv-player__botoes { grid-column: 1 / -1; flex-wrap: wrap; }
.wv-partes { border-radius: var(--wv-radius-lg); border: 1px solid var(--ui-border); background: var(--ui-surface); }
.wv-partes__titulo { list-style: none; min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 14px;
  cursor: pointer; color: var(--ui-brand); font: 700 .92rem/1.2 var(--wv-font-body); }
.wv-partes__titulo::-webkit-details-marker { display: none; }
.wv-partes__titulo small { color: var(--ui-muted); font: 600 .84rem/1.2 var(--wv-font-body); }
.wv-partes__titulo .wv-ico { margin-left: auto; transform: rotate(90deg); transition: transform var(--wv-dur) ease; }
.wv-partes[open] .wv-partes__titulo .wv-ico { transform: rotate(-90deg); }
.wv-partes__titulo:focus-visible { outline: 3px solid var(--ui-brand); outline-offset: -3px; border-radius: var(--wv-radius-lg); }
.wv-partes__apoio { margin: 0 14px 8px; font-size: .85rem; }
.wv-partes ol { list-style: none; padding: 0 8px 8px; margin: 0; display: grid; gap: 4px; }
.wv-parte { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 8px; border: 1px solid transparent; border-radius: var(--wv-radius-sm);
  background: transparent; color: var(--ui-text); font: inherit; text-align: left; cursor: pointer; }
.wv-parte:hover { background: var(--ui-raised); }
.wv-parte--ativa, .wv-parte--ativa:hover { background: var(--ui-soft); border-color: var(--ui-brand); color: var(--ui-brand); }
.wv-parte:focus-visible { outline: 3px solid var(--ui-brand); outline-offset: 1px; }
.wv-parte__icone { display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; flex: none; color: var(--ui-brand); background: var(--ui-soft); }
.wv-parte--ativa .wv-parte__icone { background: var(--ui-brand); color: var(--ui-surface); }
.wv-parte__nome { min-width: 0; font-size: .92rem; line-height: 1.25; }
.wv-parte__nome b { font-weight: 700; }
.wv-parte__duracao { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; color: var(--ui-muted); font-size: .86rem; }
.wv-parte--ativa .wv-parte__duracao { color: inherit; }

/* P07: tipos de questão do IELTS nas aulas (ielts-perguntas.js). Referência de mercado: a
   interface do IELTS on computer (lacuna sublinhada, instrução do limite em caixa alta, letras
   dos parágrafos, lista de títulos) com os componentes do Material 3 já usados aqui (chips e
   cartões de opção). Só classes novas: as telas do trabalho não mudam. */
.wv-pergunta--ielts { display: grid; gap: 10px; min-width: 0; }
.wv-tipo-ielts { justify-self: start; display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px;
  background: var(--ui-soft); color: var(--ui-brand); font: 700 .74rem/1 var(--wv-font-body); letter-spacing: .02em; }
.wv-lacuna { display: inline-block; width: 4.5em; height: 1.05em; vertical-align: -.15em; margin: 0 .2em;
  border-bottom: 2px solid var(--ui-brand); }
.wv-limite { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 8px 12px;
  border-radius: var(--wv-radius-sm); border: 1px solid var(--ui-border); background: var(--ui-surface); font-size: .88rem; }
.wv-limite b { color: var(--ui-text); font: 800 .8rem/1.3 var(--wv-font-body); letter-spacing: .04em; }
.wv-limite span { color: var(--ui-muted); }
.wv-pergunta--ielts .wv-opcao__letra { width: auto; min-width: 32px; padding: 0 6px; }
.wv-opcao__texto { display: grid; gap: 2px; min-width: 0; }
.wv-opcao__texto small { color: var(--ui-muted); font-size: .84rem; }
.wv-opcao__texto .wv-opcao__uso { color: var(--ui-brand); font-weight: 650; }
.wv-lista-titulo { margin: 4px 0 0; }
.wv-paragrafos { display: grid; gap: 12px; padding: 0 16px 16px; }
.wv-fonte .wv-paragrafo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 0; }
.wv-paragrafo__letra { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--ui-raised);
  color: var(--ui-muted); font: 800 .85rem/1 var(--wv-font-body); margin-top: 2px; }
.wv-fonte .wv-paragrafo--alvo { padding: 8px; border-radius: var(--wv-radius-sm); background: var(--ui-soft);
  outline: 2px solid var(--ui-brand); outline-offset: -2px; }
.wv-paragrafo--alvo .wv-paragrafo__letra { background: var(--ui-brand); color: var(--ui-surface); }

/* P09: Escrever e Falar das aulas do IELTS (ielts-escrita.js, ielts-falar.js). Referências de
   mercado: o relatório de Writing do IELTS Ready/British Council (nome oficial do critério com o
   comentário), o retorno em abas do Grammarly e a tela de preparo do Duolingo English Test
   (o que vai acontecer, quanto dura e o que custa, antes de começar). Só classes novas. */
.wv-ielts-tarefa { display: grid; gap: 10px; min-width: 0; }
.wv-ielts-pontos { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }
.wv-ielts-plano > summary small { margin-left: 6px; color: var(--ui-muted); font-weight: 500; }
.wv-ielts-plano > p { margin: 0 16px 10px; }
.wv-ielts-plano__partes { margin: 0; padding: 0 16px 16px; list-style: none; display: grid; gap: 12px; counter-reset: plano; }
.wv-ielts-plano__partes li { display: grid; gap: 6px; counter-increment: plano; }
.wv-ielts-plano__partes label::before { content: counter(plano) ". "; color: var(--ui-brand); }
.wv-ielts-plano__campo { min-height: 56px; padding: 10px 12px; resize: vertical; font: 400 1rem/1.45 var(--wv-font-body); }
.wv-editor__texto--longo { min-height: 320px; }
.wv-ielts-banda { margin: 0; display: inline-flex; align-items: baseline; gap: 10px; justify-self: start;
  padding: 8px 14px; border-radius: var(--wv-radius-sm); background: var(--ui-soft); color: var(--ui-brand); }
.wv-ielts-banda span { font-size: .86rem; font-weight: 650; }
.wv-ielts-banda b { font: 800 1.6rem/1 var(--wv-font-body); font-variant-numeric: tabular-nums; }
.wv-ielts-banda-criterio { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--ui-soft);
  color: var(--ui-brand); font-weight: 750; font-size: .86rem; font-variant-numeric: tabular-nums; }
.wv-criterio__topo b small { display: block; color: var(--ui-muted); font-weight: 500; font-size: .8rem; }
.wv-ielts-passos { display: grid; gap: 8px; }
.wv-ielts-passos ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.wv-ielts-custo { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--wv-radius-sm);
  border: 1px solid var(--ui-border); background: var(--ui-surface); }
.wv-ielts-custo h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.wv-ielts-custo p { margin: 0; }
.wv-ielts-etapas { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.wv-ielts-etapas li { padding: 6px 12px; border-radius: 999px; background: var(--ui-raised); color: var(--ui-muted); font-weight: 650; font-size: .86rem; }
.wv-ielts-etapas li[aria-current="step"] { background: var(--ui-soft); color: var(--ui-brand); outline: 2px solid var(--ui-brand); outline-offset: -2px; }
.wv-ielts-cartao { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--wv-radius-sm);
  border: 1px solid var(--ui-control-border, var(--ui-border)); background: var(--ui-surface); }
.wv-ielts-cartao ul { margin: 0; padding-left: 1.3em; }
.wv-ielts-cartao p, .wv-ielts-cartao h2 { margin: 0; }

/* P10 · banda-alvo nas aulas do IELTS: a frase da agenda por tipo ("NOT GIVEN volta
   amanhã, num texto novo"), a banda da prática no retorno, o desafio da unidade
   (seção em partes e relógio opcional) e o diagnóstico. Só classes novas, cores
   pelos tokens --ui-*; o mostarda continua só na conquista (tests/test_cores.py). */
.wv-rev__volta { margin: 0; font-size: .92rem; line-height: 1.4; color: var(--ui-text); }
.wv-rev__volta small { display: block; margin-top: 2px; color: var(--ui-muted); font-size: .82rem; }
.wv-relogio { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  background: var(--ui-soft); color: var(--ui-brand); font-weight: 700; font-size: .86rem; font-variant-numeric: tabular-nums; }
.wv-relogio--fim { background: var(--ui-raised); color: var(--ui-text); }
.wv-relogio-opcao { display: flex; gap: 12px; align-items: flex-start; min-height: 48px; padding: 12px 14px; border-radius: var(--wv-radius-sm);
  border: 1px solid var(--ui-border); background: var(--ui-surface); cursor: pointer; }
.wv-relogio-opcao input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--ui-brand); }
.wv-relogio-opcao span { display: grid; gap: 2px; min-width: 0; }
.wv-relogio-opcao small { color: var(--ui-muted); font-size: .84rem; line-height: 1.4; }
.wv-desafio-bandas { display: grid; gap: 10px; }
.wv-desafio-bandas h2, .wv-desafio-bandas p { margin: 0; }
.wv-desafio-bandas ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wv-desafio-bandas li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 12px;
  border-radius: var(--wv-radius-sm); background: var(--ui-soft); min-width: 0; }
.wv-desafio-bandas li small { color: var(--ui-muted); font-size: .78rem; }
.wv-desafio-bandas li b { font: 800 1.2rem/1 var(--wv-font-body); font-variant-numeric: tabular-nums; color: var(--ui-brand); }
@media (min-width: 900px) { .wv-desafio-bandas ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wv-diag { display: grid; gap: 14px; min-width: 0; }
.wv-diag > h1, .wv-diag > p { margin: 0; }
.wv-diag-como { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wv-diag-como li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.wv-diag-como .wv-ico { flex: none; color: var(--ui-brand); margin-top: 1px; }
.wv-diag-placar { display: grid; gap: 10px; }
.wv-diag-placar h2, .wv-diag-placar p { margin: 0; }
.wv-diag-tipos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wv-diag-tipos li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: var(--wv-radius-sm);
  background: var(--ui-raised); min-width: 0; }
.wv-diag-tipos li span { min-width: 0; overflow-wrap: anywhere; }
.wv-diag-tipos li b { flex: none; font-variant-numeric: tabular-nums; }
.wv-diag-tipos--certo b { color: var(--ui-positive); }