/* Na ponta da língua (parte 2, 19/10/2026): cartão no topo do Aprender, casa do curso,
   questão com toque direto e retorno no pé, folhas do Por quê e dos 2 minutos.
   Só tokens do app (--ui-* de ui.css, --wv-* de work-ui.css). O desenho saiu da proposta
   (docs/propostas/2026-10-19-curso-ponta-da-lingua), conferido no Edge. */

/* Aprender: o curso fixo no topo, como o destaque da tela */
.pl-card { position: relative; overflow: hidden; display: grid; gap: 14px; padding: 18px 18px 16px; 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); }
.pl-card__topo { display: flex; align-items: flex-start; gap: 12px; }
.pl-card__txt { flex: 1; min-width: 0; display: grid; gap: 6px; }
.pl-card .wv-eyebrow { color: inherit; opacity: .85; }
.pl-card h2 { margin: 0; font: 800 clamp(1.35rem, 6.4vw, 1.7rem)/1.02 var(--wv-font-display); letter-spacing: -.02em; text-wrap: balance; }
.pl-card p { margin: 0; font-size: .94rem; line-height: 1.4; opacity: .94; }
.pl-abcd { flex: none; display: grid; grid-template-columns: repeat(2, 28px); gap: 6px; margin: 2px 0 0; transform: rotate(-7deg); }
.pl-abcd i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font: 800 .78rem/1 var(--wv-font-body); font-style: normal;
  background: rgb(255 255 255 / .14); color: var(--wv-hero-ink); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .3); }
.pl-abcd i.pl-abcd__certa { background: var(--ui-achievement); color: var(--ui-on-achievement); box-shadow: 0 6px 14px -6px rgb(0 0 0 / .55); transform: scale(1.12); }

/* As 20 do dia em 4 lotes de 5 */
.pl-meta { display: flex; align-items: center; gap: 10px; font: 700 .82rem/1 var(--wv-font-body); font-variant-numeric: tabular-nums; }
.pl-meta__barra { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pl-meta__lote { display: flex; gap: 2px; }
.pl-meta__lote i { flex: 1; height: 7px; border-radius: 99px; background: rgb(255 255 255 / .24); }
.pl-meta__lote i.pl-on { background: var(--wv-hero-ink); }
.pl-meta--claro .pl-meta__lote i { background: var(--ui-raised); }
.pl-meta--claro .pl-meta__lote i.pl-on { background: var(--ui-brand); }
.pl-meta--claro .pl-meta__lote i.pl-extra { background: var(--ui-achievement); }

/* "Continue de onde parou" do trabalho vira uma faixa logo abaixo */
.pl-continuar { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border: 1px solid var(--ui-border); border-radius: 20px;
  background: var(--ui-surface); color: inherit; text-decoration: none; }
.pl-continuar__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pl-continuar__txt b { font: 700 .95rem/1.25 var(--wv-font-display); }
.pl-continuar__txt small { color: var(--ui-muted); font-size: .82rem; line-height: 1.3; }

/* Casa do curso */
.pl-casa { display: grid; gap: 18px; }
.pl-casa__cabeca { display: grid; gap: 4px; }
.pl-casa__cabeca h1 { margin: 0; font: 800 1.7rem/1.05 var(--wv-font-display); letter-spacing: -.02em; }
.pl-hoje { display: grid; gap: 12px; padding: 16px; border-radius: var(--wv-radius-lg); background: var(--ui-surface); border: 1px solid var(--ui-border); }
.pl-hoje__numero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.pl-hoje__numero strong { font: 800 2.3rem/1 var(--wv-font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pl-hoje__numero span { color: var(--ui-muted); font-weight: 650; }
.pl-chip { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px;
  background: var(--ui-positive-soft); color: var(--ui-positive); font: 700 .8rem/1.1 var(--wv-font-body); }
.pl-chip--marca { background: var(--ui-soft); color: var(--ui-brand); }
.pl-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pl-sec { display: grid; gap: 10px; }
.pl-sec__topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.pl-sec__topo .wv-link { min-height: 44px; padding: 0 4px; }
.pl-sec__topo h2 { margin: 0; font: 700 1.1rem/1.2 var(--wv-font-display); }
.pl-pontos { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ui-border); border-radius: 20px; background: var(--ui-surface); overflow: hidden; }
.pl-ponto { display: grid; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--ui-border); }
.pl-ponto:last-child { border-bottom: 0; }
.pl-ponto b { font: 700 .98rem/1.25 var(--wv-font-display); }
.pl-ponto__duas { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 8px; background: var(--ui-raised); color: var(--ui-text);
  font: 600 .76rem/1.15 var(--wv-font-body); }
.pl-tag em { font-style: normal; color: var(--ui-muted); }
.pl-pips { display: inline-flex; gap: 3px; }
.pl-pips i { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-control-border); opacity: .55; }
.pl-pips i.pl-on { background: var(--ui-positive-vivid); opacity: 1; }
.pl-rodape { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ui-muted); font-size: .86rem; }

/* Aviso dos 3 dias e primeira vez */
.pl-alerta { display: grid; gap: 10px; padding: 16px; border-radius: var(--wv-radius-lg); background: var(--ui-soft);
  border: 1px solid color-mix(in srgb, var(--ui-brand) 22%, transparent); }
.pl-alerta b { display: flex; align-items: center; gap: 8px; color: var(--ui-brand); font: 700 1.02rem/1.25 var(--wv-font-display); }
.pl-alerta p { margin: 0; line-height: 1.45; }

/* A questão: uma por tela, toque direto */
.pl-sessao__dia { flex: none; min-width: 52px; text-align: right; color: var(--ui-muted); font: 700 .86rem/1 var(--wv-font-body); font-variant-numeric: tabular-nums; }
.pl-q { display: grid; gap: 14px; }
.pl-q__origem { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pl-q__origem small { color: var(--ui-muted); font-size: .8rem; }
.pl-q__instrucao { margin: 0; font-size: 1rem; line-height: 1.45; }
.pl-q__enunciado { margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--ui-raised); font: 650 1.06rem/1.4 var(--wv-font-body); }
.pl-q__opcoes { display: grid; gap: 10px; }
.pl-q .wv-opcao { width: 100%; font: inherit; text-align: left; color: inherit; }
.pl-q .wv-opcao:disabled { cursor: default; }
.pl-q .wv-opcao.pl-apagada { opacity: .55; }
/* O retorno fica no pé, junto do Continuar: as 4 opções e a explicação cabem em 360 × 780
   sem rolar (padrão de Duolingo e Babbel: o resultado sobe de baixo, a questão não se mexe). */
.pl-acao { flex-direction: column; align-items: stretch; }
.pl-dica { margin: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; color: var(--ui-muted); font-size: .92rem; }
.pl-retorno { display: grid; gap: 6px; padding: 12px 14px 14px 16px; border-radius: 18px; background: var(--ui-negative-soft); }
.pl-retorno--certo { background: var(--ui-positive-soft); }
.pl-retorno__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pl-retorno__topo b { display: flex; align-items: center; gap: 6px; color: var(--ui-negative); font: 700 1.04rem/1.2 var(--wv-font-display); }
.pl-retorno--certo .pl-retorno__topo b { color: var(--ui-positive); }
.pl-retorno__topo .wv-link { min-height: 44px; padding: 0 2px 0 8px; }
.pl-retorno p { margin: 0; line-height: 1.42; }
.pl-volta { color: var(--ui-muted); font-size: .86rem; }

/* Folha dos 2 minutos */
.pl-oferta { display: grid; gap: 14px; }
.pl-oferta h2 { margin: 0; font: 800 1.45rem/1.1 var(--wv-font-display); letter-spacing: -.01em; text-wrap: balance; }
.pl-oferta p { margin: 0; line-height: 1.45; }
.pl-saldo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 16px;
  background: var(--ui-raised); font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-saldo span { display: inline-flex; align-items: center; gap: 8px; }
.pl-saldo s { color: var(--ui-muted); text-decoration-thickness: 1.5px; }
.pl-oferta__acoes { display: grid; gap: 10px; }
.pl-nota { color: var(--ui-muted); font-size: .84rem; line-height: 1.45; }

/* Cartão: link discreto para a casa do curso */
.pl-card__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.pl-card__links a { min-height: 44px; display: inline-flex; align-items: center; color: inherit; font: 700 .88rem/1 var(--wv-font-body);
  text-decoration: underline; text-underline-offset: 4px; opacity: .92; }

/* Esperando o lote: o esqueleto da questão, nunca uma rodinha solta */
.pl-preparando { display: grid; gap: 12px; }
.pl-preparando i { display: block; height: 62px; border-radius: 18px; background: linear-gradient(90deg, var(--ui-raised), var(--ui-surface), var(--ui-raised));
  background-size: 200% 100%; animation: pl-brilho 1.2s linear infinite; }
.pl-preparando i:first-child { height: 22px; width: 50%; }
@keyframes pl-brilho { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .pl-preparando i { animation: none; } }

/* Telas de fim (até amanhã, prontas acabaram, primeira vez) */
.pl-fim { display: grid; gap: 16px; align-content: start; }
.pl-fim h1 { margin: 0; font: 800 1.7rem/1.1 var(--wv-font-display); letter-spacing: -.02em; text-wrap: balance; }
.pl-fim p { margin: 0; line-height: 1.5; }
.pl-motivos { display: grid; gap: 8px; }
.pl-motivos .wv-btn { justify-content: flex-start; }