/* ===========================================================================
   Módulo Discursivas — "Escola da Escrita".
   Segue o design system nv-* (tokens de tokens.css). Escopado em .dsc-root
   pra não vazar pro resto do app.
   =========================================================================== */
.dsc-root {
  --dsc-m0: oklch(0.66 0.10 250);
  --dsc-m1: oklch(0.72 0.13 300);
  --dsc-m2: oklch(0.70 0.12 330);
  --dsc-m3: oklch(0.72 0.11 240);
  --dsc-m4: oklch(0.74 0.14 152);
  --dsc-m5: oklch(0.76 0.13 190);
  --dsc-m6: oklch(0.80 0.13 75);
  --dsc-m7: oklch(0.74 0.12 60);
  --dsc-m8: oklch(0.70 0.15 27);
  --dsc-m9: oklch(0.68 0.13 15);
  --dsc-m10: oklch(0.66 0.11 340);
  --dsc-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  /* Superfície de leitura — MESMA linguagem do Notebook. O aluno lê texto
     longo aqui também, então a apostila herda a preferência dele
     (fundo/tipografia/tamanho/largura) via nyvvo:notas:appearance. */
  --dsc-doc-size: 17px;
  --dsc-doc-width: 720px;
  --dsc-doc-font: var(--dsc-serif);
  --dsc-ink-1: var(--text-1);
  --dsc-ink-2: var(--text-2);
  --dsc-ink-3: var(--text-3);
  --dsc-sheet-bg: transparent;
  --dsc-sheet-pad: 0px;
  --dsc-sheet-radius: 0px;
  --dsc-sheet-shadow: none;
  --dsc-sheet-border: transparent;
  /* Cores SEMÂNTICAS da apostila (erro / acerto / comentário). Precisam mudar
     com o papel: os tons claros abaixo são para o fundo escuro; no papel
     sépia/branco eles ficavam com contraste ~1.8 e o aluno não lia. */
  --dsc-sig-erro: oklch(0.78 0.13 27);
  --dsc-sig-ok: var(--accent);
  --dsc-sig-info: oklch(0.80 0.10 240);
  --dsc-sig-banca: oklch(0.78 0.12 300);

  display: block;
  padding: 4px 2px 60px;
  color: var(--text-1);
}
.dsc-root[data-doc-font="sans"] { --dsc-doc-font: var(--font-display, inherit); }
.dsc-root[data-surface="sepia"] {
  --dsc-ink-1: oklch(0.27 0.02 60); --dsc-ink-2: oklch(0.40 0.02 60); --dsc-ink-3: oklch(0.52 0.02 60);
  --dsc-sheet-bg: oklch(0.958 0.017 85); --dsc-sheet-pad: 34px 40px;
  --dsc-sheet-radius: 14px; --dsc-sheet-shadow: 0 18px 50px oklch(0 0 0 / 0.45);
  --dsc-sheet-border: oklch(0.88 0.02 85);
  --dsc-sig-erro: oklch(0.47 0.16 27); --dsc-sig-ok: oklch(0.44 0.13 152);
  --dsc-sig-info: oklch(0.44 0.14 250); --dsc-sig-banca: oklch(0.45 0.16 300);
}
.dsc-root[data-surface="white"] {
  --dsc-ink-1: oklch(0.22 0.005 250); --dsc-ink-2: oklch(0.36 0.006 250); --dsc-ink-3: oklch(0.50 0.006 250);
  --dsc-sheet-bg: oklch(1 0 0); --dsc-sheet-pad: 34px 40px;
  --dsc-sheet-radius: 14px; --dsc-sheet-shadow: 0 18px 50px oklch(0 0 0 / 0.5);
  --dsc-sheet-border: oklch(0.90 0.004 250);
  --dsc-sig-erro: oklch(0.47 0.16 27); --dsc-sig-ok: oklch(0.44 0.13 152);
  --dsc-sig-info: oklch(0.44 0.14 250); --dsc-sig-banca: oklch(0.45 0.16 300);
}
.dsc-boot, .dsc-erro { padding: 40px; text-align: center; color: var(--text-3); }

/* ---------- hero ---------- */
.dsc-hero {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 22px 24px; margin-bottom: 16px;
  background: linear-gradient(150deg, color-mix(in oklab, var(--accent) 10%, var(--bg-1)), var(--bg-1));
  border: 1px solid var(--border-subtle); border-radius: var(--r-xl, 20px);
}
.dsc-hero-txt { flex: 1; min-width: 260px; }
.dsc-hero h1 { margin: 0 0 6px; font: 700 24px/1.2 var(--font-display, inherit); letter-spacing: -0.02em; }
.dsc-hero p { margin: 0; color: var(--text-3); font-size: 13.5px; line-height: 1.6; max-width: 72ch; }
.dsc-hero-prog { display: flex; align-items: center; gap: 13px; }
.dsc-hero-prog > span { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.dsc-hero-prog small { color: var(--text-4); font-size: 11px; }
.dsc-ring {
  --p: 0;
  width: 58px; height: 58px; border-radius: 50%; position: relative;
  display: grid; place-items: center; flex: 0 0 auto;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--bg-3) 0);
}
.dsc-ring::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--bg-1); }
.dsc-ring b { position: relative; font: 700 14px var(--font-mono, monospace); color: var(--accent); }

/* ---------- ciclo (as 4 etapas) ---------- */
.dsc-ciclo { display: flex; gap: 9px; margin-bottom: 18px; flex-wrap: wrap; }
.dsc-et {
  flex: 1; min-width: 158px; padding: 12px 14px; border-radius: var(--r-lg, 14px);
  background: var(--bg-1); border: 1px solid var(--border-subtle);
}
.dsc-et.is-on { border-color: color-mix(in oklab, var(--accent) 42%, transparent); background: var(--accent-soft); }
.dsc-et .n { display: block; font: 700 9.5px var(--font-mono, monospace); letter-spacing: .09em; color: var(--text-4); margin-bottom: 5px; }
.dsc-et.is-on .n { color: var(--accent); }
.dsc-et b { display: block; font-size: 13px; margin-bottom: 2px; }
.dsc-et > span:last-child { display: block; font-size: 11.5px; color: var(--text-4); line-height: 1.45; }

/* ---------- grade / módulos ---------- */
.dsc-grade { display: flex; flex-direction: column; gap: 12px; }
.dsc-mod { background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--r-lg, 14px); overflow: hidden; }
.dsc-mod { --trilha-x: 26px; }  /* eixo único: barra do módulo + pontos das aulas */
.dsc-mod-head {
  display: flex; align-items: center; gap: 13px;
  /* padding-left alinha o centro da barra (4px) no eixo da trilha */
  padding: 15px 18px 15px calc(var(--trilha-x) - 2px);
}
/* a barrinha do módulo é o avanço dele: trilho apagado + preenchimento --p% */
.dsc-mod-cor {
  width: 4px; height: 36px; border-radius: 99px; flex: 0 0 auto;
  position: relative; overflow: hidden;
  background: color-mix(in oklab, var(--cor, var(--text-4)) 24%, transparent);
}
.dsc-mod-cor::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--p, 0) * 1%); background: var(--cor, var(--text-4));
  border-radius: 99px; transition: height .35s ease;
}
.dsc-mod-tt { flex: 1; min-width: 0; }
.dsc-mod-tt b { display: block; font-size: 15px; }
.dsc-mod-tt > span { font-size: 12px; color: var(--text-4); }
.dsc-mod-badge {
  font: 600 11px var(--font-mono, monospace); color: var(--text-4);
  background: var(--bg-2); border-radius: 999px; padding: 4px 11px; flex: 0 0 auto;
}
.dsc-mod-badge.is-on { color: var(--accent); background: var(--accent-soft); }

/* módulo ainda não entregue: cinza, apagado, com cadeado */
.dsc-mod.is-locked { opacity: .52; }
.dsc-mod.is-locked .dsc-mod-cor { --cor: var(--text-4); --p: 0; }
.dsc-mod-lock { font-size: 14px; flex: 0 0 auto; }
.dsc-mod-temas { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px 41px; }
.dsc-mod-temas span {
  font-size: 11px; color: var(--text-4); background: var(--bg-2);
  border: 1px solid var(--border-subtle); border-radius: 999px; padding: 3px 10px;
}
.dsc-mod-prev { padding: 0 18px 14px 41px; font: 600 11px var(--font-mono, monospace); color: var(--text-4); }

/* ---------- lista de aulas (trilha vertical) ---------- */
.dsc-aulas {
  /* padding-left 0: o eixo vem do módulo, e o botão se posiciona por ele.
     Assim a barra do cabeçalho e os pontos ficam na MESMA vertical.
     (o -2px do trilho desconta a borda de 1px do botão + metade da linha) */
  padding: 0 12px 12px 0;
}
.dsc-aula-li {
  position: relative;
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 12px; border-radius: var(--r-md, 10px); border: 1px solid transparent;
  background: transparent; cursor: pointer; transition: .14s; font-family: inherit;
}
.dsc-aula-li:hover { background: var(--bg-2); border-color: var(--border-subtle); }

/* O TRILHO. Duas metades por linha (acima e abaixo do marcador) pra dar
   pra pintar cada uma: o preenchimento tem que parar no meio do ponto
   em que o aluno está, não na borda da linha. */
.dsc-aula-li::before,
.dsc-aula-li::after {
  content: ""; position: absolute; left: calc(var(--trilha-x) - 2px);
  width: 2px; border-radius: 2px; background: var(--border-soft);
  transition: background .25s ease;
}
.dsc-aula-li::before { top: 0; height: 50%; }
/* a primeira aula sobe até a barra do módulo — a trilha vira uma linha só */
.dsc-aula-li:first-child::before { top: -21px; height: calc(50% + 21px); }
.dsc-aula-li::after { top: 50%; bottom: 0; }
.dsc-aula-li:last-child::after { display: none; }
/* percorrido: sai da aula concluída e chega até o meio do próximo ponto */
.dsc-aula-li.is-done::before,
.dsc-aula-li.is-done::after,
.dsc-aula-li.is-done + .dsc-aula-li::before { background: var(--accent); }

.dsc-aula-mk {
  position: relative; z-index: 1; /* o ponto cobre o trilho */
  flex: 0 0 auto; box-sizing: border-box;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 700 11px var(--font-mono, monospace);
  background: var(--bg-3); color: var(--text-4);
  border: 2px solid var(--bg-1); /* respiro entre o ponto e a linha */
  transition: .18s;
}
.dsc-aula-li:hover .dsc-aula-mk { background: var(--bg-3); color: var(--text-2); }
.dsc-aula-li.is-done .dsc-aula-mk {
  background: var(--accent); color: oklch(0.17 0.03 152); border-color: var(--bg-1);
}
/* “você está aqui”: primeira aula não concluída da trilha */
.dsc-aula-li.is-atual { background: color-mix(in oklab, var(--accent) 7%, transparent); }
.dsc-aula-li.is-atual .dsc-aula-mk {
  background: var(--bg-1); color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
  animation: dsc-ponto-pulso 2.4s ease-in-out infinite;
}
.dsc-aula-li.is-atual .dsc-aula-tt b { color: var(--accent); }
@keyframes dsc-ponto-pulso {
  0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 0 color-mix(in oklab, var(--accent) 40%, transparent); }
  55%      { box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px color-mix(in oklab, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .dsc-aula-li.is-atual .dsc-aula-mk { animation: none; }
}
.dsc-aula-tt { flex: 1; min-width: 0; }
.dsc-aula-tt b { display: block; font-size: 13.5px; color: var(--text-1); margin-bottom: 2px; }
.dsc-aula-tt > span { display: block; font-size: 11.5px; color: var(--text-4); line-height: 1.45; }
.dsc-aula-li.is-done .dsc-aula-tt b { color: var(--text-2); }
.dsc-aula-min { flex: 0 0 auto; font: 400 11px var(--font-mono, monospace); color: var(--text-4); }

.dsc-nota-rodape {
  margin: 18px 2px 0; padding: 13px 16px; border-radius: var(--r-md, 10px);
  background: var(--bg-1); border: 1px dashed var(--border-soft);
  color: var(--text-4); font-size: 12px; line-height: 1.6;
}

/* ===========================================================================
   AULA
   =========================================================================== */
.dsc-aula-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dsc-bar-sp { flex: 1; }
.dsc-voltar {
  background: transparent; border: 0; color: var(--text-3); cursor: pointer;
  font: 600 12.5px var(--font-sans, inherit); padding: 4px 0;
}
.dsc-voltar:hover { color: var(--text-1); }

/* ---------- aparência da apostila (mesmo controle do Notebook) ---------- */
.dsc-ap-wrap { position: relative; }
.dsc-ap-btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 9px; border-radius: 9px; cursor: pointer;
  background: var(--bg-1); border: 1px solid var(--border-subtle); color: var(--text-2);
}
.dsc-ap-btn:hover { border-color: var(--accent); }
.dsc-ap-glyph { font: 700 13px/1 var(--dsc-serif); }
.dsc-ap-swatch {
  display: block; width: 16px; height: 3px; border-radius: 2px;
  border: 1px solid oklch(1 0 0 / .18); background: var(--bg-0);
}
.dsc-root[data-surface="sepia"] .dsc-ap-swatch { background: oklch(0.958 0.017 85); border-color: oklch(0.88 0.02 85); }
.dsc-root[data-surface="white"] .dsc-ap-swatch { background: oklch(1 0 0); border-color: oklch(0.85 0.004 250); }
.dsc-ap-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 290px; text-align: left;
  background: var(--bg-1); border: 1px solid var(--border-soft); border-radius: var(--r-lg, 14px);
  box-shadow: 0 22px 60px oklch(0 0 0 / .55); padding: 14px;
}
.dsc-ap-pop[hidden] { display: none; }
.dsc-ap-pop h4 { margin: 0 0 3px; font: 700 13px var(--font-sans, inherit); color: var(--text-1); text-transform: none; letter-spacing: 0; }
.dsc-ap-pop .sub { margin: 0 0 12px; font-size: 11.5px; color: var(--text-4); }
.dsc-ap-pop .lbl {
  color: var(--text-3); font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; margin: 14px 0 8px;
}
.dsc-ap-pop .surfs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dsc-ap-pop .surf {
  display: block; width: 100%; padding: 7px; cursor: pointer; text-align: center; transition: .14s;
  background: var(--bg-2); border: 1.5px solid var(--border-subtle); border-radius: var(--r-md, 10px);
}
.dsc-ap-pop .surf:hover { border-color: var(--border-strong); }
.dsc-ap-pop .surf.is-active { border-color: var(--accent); background: var(--accent-soft); }
.dsc-ap-pop .prev {
  display: flex !important; flex-direction: column !important; justify-content: center; gap: 4px;
  width: 100%; height: 40px; border-radius: 7px; margin-bottom: 6px; padding: 0 8px;
  border: 1px solid oklch(1 0 0 / .05);
}
.dsc-ap-pop .prev i { display: block; height: 3px; border-radius: 2px; }
.dsc-ap-pop .prev i:first-child { width: 70%; }
.dsc-ap-pop .prev i:last-child { width: 82%; }
.dsc-ap-pop .prev[data-s="dark"] { background: var(--bg-0); }
.dsc-ap-pop .prev[data-s="dark"] i { background: oklch(1 0 0 / .30); }
.dsc-ap-pop .prev[data-s="dark"] i:first-child { background: oklch(1 0 0 / .55); }
.dsc-ap-pop .prev[data-s="sepia"] { background: oklch(0.958 0.017 85); }
.dsc-ap-pop .prev[data-s="sepia"] i { background: oklch(0.55 0.02 60 / .45); }
.dsc-ap-pop .prev[data-s="sepia"] i:first-child { background: oklch(0.35 0.02 60 / .8); }
.dsc-ap-pop .prev[data-s="white"] { background: oklch(1 0 0); }
.dsc-ap-pop .prev[data-s="white"] i { background: oklch(0.45 0.005 250 / .45); }
.dsc-ap-pop .prev[data-s="white"] i:first-child { background: oklch(0.25 0.005 250 / .8); }
.dsc-ap-pop .nm { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.dsc-ap-pop .surf.is-active .nm { color: var(--accent); }
.dsc-ap-pop .row { display: flex; gap: 7px; }
.dsc-ap-pop .row4 { gap: 5px; }
.dsc-ap-pop .row4 .opt { font-size: 11px; padding: 0 2px; }
.dsc-ap-pop .opt {
  flex: 1; height: 32px; border-radius: 8px; cursor: pointer; display: grid; place-items: center;
  background: var(--bg-2); border: 1px solid var(--border-subtle); color: var(--text-3);
  font: 600 12px var(--font-sans, inherit); transition: .14s;
}
.dsc-ap-pop .opt:hover { color: var(--text-1); border-color: var(--border-soft); }
.dsc-ap-pop .opt.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.dsc-ap-pop .opt.serif { font-family: var(--dsc-serif); font-size: 14px; }
.dsc-ap-pop .opt.a1 { font-size: 11px; } .dsc-ap-pop .opt.a2 { font-size: 13px; } .dsc-ap-pop .opt.a3 { font-size: 15px; }
.dsc-ap-pop .saved {
  margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--border-subtle);
  color: var(--text-4); font-size: 11px;
}

/* ---------- a folha da apostila ---------- */
.dsc-folha {
  max-width: var(--dsc-doc-width);
  margin: 0 auto; /* centraliza na coluna: sem isso a folha fica encostada
                     à esquerda com um vão morto até a lateral */
  background: var(--dsc-sheet-bg);
  padding: var(--dsc-sheet-pad);
  border-radius: var(--dsc-sheet-radius);
  box-shadow: var(--dsc-sheet-shadow);
  border: 1px solid var(--dsc-sheet-border);
  transition: background .18s ease, padding .18s ease, max-width .18s ease;
}
/* dentro da folha, o texto usa a tinta e a tipografia escolhidas */
.dsc-folha .dsc-sec { background: transparent; border: 0; padding: 0 0 4px; margin-bottom: 22px; }
/* !important + -webkit-text-fill-color: existem regras globais de heading no
   app (gradient-text/cor fixa) que vencem a cor local — nos modos claros o
   título sumia no papel. Mesma armadilha do h1[class*="title"] do Notebook. */
.dsc-root .dsc-folha .dsc-sec h3 {
  font-family: var(--dsc-doc-font) !important;
  color: var(--dsc-ink-1) !important;
  -webkit-text-fill-color: var(--dsc-ink-1) !important;
  background: none !important;
  font-size: calc(var(--dsc-doc-size) * 1.18);
}
.dsc-root .dsc-folha .dsc-quiz h4 { -webkit-text-fill-color: var(--accent); }
.dsc-folha .dsc-sec p {
  font-family: var(--dsc-doc-font); font-size: var(--dsc-doc-size);
  line-height: 1.75; color: var(--dsc-ink-2);
}
.dsc-folha .dsc-sec strong { color: var(--dsc-ink-1); }
.dsc-folha .dsc-ex q { color: var(--dsc-ink-1); font-size: calc(var(--dsc-doc-size) * .92); }
.dsc-folha .dsc-ex i { color: var(--dsc-ink-3); }
.dsc-folha .dsc-ex i strong { color: var(--dsc-ink-2); }
.dsc-folha .dsc-destaque { color: var(--dsc-ink-1); font-size: calc(var(--dsc-doc-size) * .88); }
.dsc-folha .dsc-reescrita .box { color: var(--dsc-ink-2); }
.dsc-folha .dsc-reescrita .depois { color: var(--dsc-ink-1); }
.dsc-folha .dsc-reescrita-nota { color: var(--dsc-ink-3) !important; }
/* Blocos internos derivam do PAPEL, não de cores fixas: no escuro ficam
   claros-translúcidos; no papel claro ficam cinza-translúcidos. Assim a
   folha inteira é coerente em qualquer fundo, em vez de virar retalho. */
.dsc-folha :is(.dsc-formula, .dsc-quiz-ctx, .dsc-quiz) {
  background: color-mix(in oklab, var(--dsc-ink-1) 6%, transparent) !important;
  border-color: color-mix(in oklab, var(--dsc-ink-3) 25%, transparent) !important;
}
.dsc-folha .dsc-formula span {
  background: color-mix(in oklab, var(--dsc-ink-1) 9%, transparent);
  color: var(--dsc-ink-1);
}
.dsc-folha .dsc-formula .ar { background: none; color: var(--dsc-ink-3); }
.dsc-folha .dsc-quiz-en { color: var(--dsc-ink-2); }
.dsc-folha .dsc-quiz-ctx { color: var(--dsc-ink-1); }
.dsc-folha .dsc-opt {
  background: color-mix(in oklab, var(--dsc-ink-1) 5%, transparent);
  border-color: color-mix(in oklab, var(--dsc-ink-3) 22%, transparent);
  color: var(--dsc-ink-2);
}
.dsc-folha .dsc-opt .l {
  background: color-mix(in oklab, var(--dsc-ink-1) 10%, transparent);
  color: var(--dsc-ink-3);
}
/* HOVER e SELEÇÃO legíveis nos 3 fundos: tudo derivado da tinta do papel,
   nunca de cor fixa. No escuro clareia; no papel escurece — sem nunca
   deixar texto e fundo com a mesma luminosidade. */
.dsc-folha .dsc-opt:hover:not(.is-locked) {
  background: color-mix(in oklab, var(--dsc-ink-1) 11%, transparent);
  border-color: color-mix(in oklab, var(--dsc-ink-3) 45%, transparent);
  color: var(--dsc-ink-1);
}
.dsc-folha .dsc-opt:hover:not(.is-locked) .l {
  background: color-mix(in oklab, var(--dsc-ink-1) 18%, transparent);
  color: var(--dsc-ink-1);
}
/* certa/errada mantêm contraste próprio, com tinta escura no papel claro */
.dsc-root[data-surface="sepia"] .dsc-folha .dsc-opt.is-certa,
.dsc-root[data-surface="white"] .dsc-folha .dsc-opt.is-certa {
  background: oklch(0.74 0.16 152 / .20); border-color: oklch(0.50 0.14 152 / .6);
  color: oklch(0.28 0.06 152); -webkit-text-fill-color: oklch(0.28 0.06 152);
}
.dsc-root[data-surface="sepia"] .dsc-folha .dsc-opt.is-errada,
.dsc-root[data-surface="white"] .dsc-folha .dsc-opt.is-errada {
  background: oklch(0.68 0.18 27 / .16); border-color: oklch(0.55 0.16 27 / .55);
  color: oklch(0.32 0.10 27); -webkit-text-fill-color: oklch(0.32 0.10 27);
}
/* seleção de texto (o aluno grifa a apostila) */
.dsc-folha ::selection { background: color-mix(in oklab, var(--accent) 32%, transparent); color: var(--dsc-ink-1); }
/* itens da trilha: hover que funciona em qualquer tema */
.dsc-aula-li:hover .dsc-aula-tt b { color: var(--accent); }
.dsc-aula-li:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dsc-folha .dsc-quiz-resp { color: var(--dsc-ink-2); }
/* nos modos claros a folha ganha respiro em volta pra parecer papel,
   não um bloco colado no painel escuro */
.dsc-root[data-surface="sepia"] .dsc-aula-grid,
.dsc-root[data-surface="white"] .dsc-aula-grid { gap: 22px; }

.dsc-aula-head {
  padding: 20px 24px; margin-bottom: 16px;
  background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--r-lg, 14px);
}
.dsc-aula-head .kk {
  font: 700 10px var(--font-mono, monospace); letter-spacing: .09em; text-transform: uppercase;
  color: var(--dsc-m2); margin-bottom: 6px;
}
.dsc-aula-head h1 { margin: 0 0 8px; font: 700 23px/1.2 var(--font-display, inherit); letter-spacing: -0.02em; }
.dsc-aula-head p { margin: 0; color: var(--text-3); font-size: 13.5px; line-height: 1.6; max-width: 72ch; }
.dsc-aula-head .meta { display: flex; gap: 8px; margin-top: 13px; flex-wrap: wrap; }
.dsc-aula-head .meta span {
  font: 600 11px var(--font-mono, monospace); background: var(--bg-2); color: var(--text-3);
  border-radius: 999px; padding: 4px 11px;
}
.dsc-aula-head .meta .ok { background: var(--accent-soft); color: var(--accent); }

.dsc-aula-grid { display: grid; grid-template-columns: 1fr 290px; gap: 16px; align-items: start; }
@media (max-width: 980px) { .dsc-aula-grid { grid-template-columns: 1fr; } }

.dsc-sec {
  background: var(--bg-1); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg, 14px); padding: 18px 22px; margin-bottom: 13px;
}
.dsc-sec h3 { margin: 0 0 11px; font: 700 17px var(--font-display, inherit); letter-spacing: -0.01em; }
.dsc-sec p { margin: 0 0 12px; color: var(--text-2); font-size: 14px; line-height: 1.7; }
.dsc-sec p:last-child { margin-bottom: 0; }
.dsc-sec strong { color: var(--text-1); }

.dsc-destaque {
  padding: 14px 17px; margin: 0 0 13px; border-radius: var(--r-md, 10px);
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  color: var(--text-1); font-size: 13.5px; line-height: 1.65;
}
.dsc-destaque strong { color: var(--accent); }

.dsc-formula {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 14px 16px; margin: 0 0 13px; background: var(--bg-2); border-radius: var(--r-md, 10px);
}
.dsc-formula span {
  padding: 7px 13px; border-radius: 8px; background: var(--bg-3);
  color: var(--text-1); font-weight: 600; font-size: 12.5px;
}
.dsc-formula .ar { background: none; color: var(--text-4); padding: 0; }

.dsc-ex {
  display: flex; gap: 13px; padding: 14px 16px; border-radius: var(--r-md, 10px);
  margin-bottom: 10px; font-size: 13.5px; line-height: 1.65;
}
.dsc-ex .mk {
  flex: 0 0 auto; width: 23px; height: 23px; border-radius: 7px;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.dsc-ex .c { flex: 1; min-width: 0; }
.dsc-ex q { display: block; font-family: var(--dsc-serif); font-size: 14.5px; color: var(--text-1); margin-bottom: 7px; quotes: none; }
.dsc-ex i { display: block; font-style: normal; color: var(--text-4); font-size: 12.5px; line-height: 1.6; }
.dsc-ex i strong { color: var(--text-2); }
.dsc-ex.is-bom { background: color-mix(in oklab, var(--accent) 9%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); }
.dsc-ex.is-bom .mk { background: var(--accent); color: oklch(0.17 0.03 152); }
.dsc-ex.is-meio { background: oklch(0.80 0.14 75 / .08); border: 1px solid oklch(0.80 0.14 75 / .32); }
.dsc-ex.is-meio .mk { background: oklch(0.80 0.14 75); color: oklch(0.18 0.03 75); }
.dsc-ex.is-ruim { background: oklch(0.68 0.18 27 / .08); border: 1px solid oklch(0.68 0.18 27 / .32); }
.dsc-ex.is-ruim .mk { background: oklch(0.68 0.18 27); color: oklch(0.16 0.03 27); }

.dsc-reescrita { display: grid; grid-template-columns: 1fr auto 1fr; gap: 13px; align-items: center; }
@media (max-width: 760px) { .dsc-reescrita { grid-template-columns: 1fr; } .dsc-reescrita .seta { transform: rotate(90deg); } }
.dsc-reescrita .box { padding: 13px 15px; border-radius: var(--r-md, 10px); font-family: var(--dsc-serif); font-size: 13.5px; line-height: 1.65; }
.dsc-reescrita .lbl {
  display: block; margin-bottom: 6px; font: 700 9.5px var(--font-sans, inherit);
  letter-spacing: .08em; text-transform: uppercase; font-family: var(--font-sans, inherit);
}
.dsc-reescrita .antes { background: oklch(0.68 0.18 27 / .08); border: 1px solid oklch(0.68 0.18 27 / .3); color: var(--text-3); }
.dsc-reescrita .antes .lbl { color: var(--dsc-sig-erro); }
.dsc-reescrita .depois { background: color-mix(in oklab, var(--accent) 9%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); color: var(--text-1); }
.dsc-reescrita .depois .lbl { color: var(--dsc-sig-ok); }
.dsc-reescrita .seta { color: var(--dsc-ink-3); font-size: 18px; text-align: center; }
.dsc-reescrita-nota { margin: 12px 0 0 !important; font-size: 12.5px !important; color: var(--text-4) !important; }

/* REDE DE SEGURANÇA: dentro da folha, todo texto herda a tinta do papel.
   O app tem várias regras globais que pintam texto de claro (pensadas pro
   tema escuro) — no modo branco elas deixavam trechos ilegíveis. Aqui a
   folha manda; os blocos coloridos abaixo redefinem quando precisam. */
.dsc-folha :is(p, li, td, th, span, div, b, strong, em, i, q, small, summary, label, textarea) {
  -webkit-text-fill-color: currentColor;
}
.dsc-folha { color: var(--dsc-ink-2); }

/* ---------- blocos de apostila ---------- */
.dsc-lista { margin: 0 0 4px; padding-left: 4px; list-style: none; }
.dsc-lista li {
  position: relative; padding-left: 24px; margin: 10px 0;
  font-family: var(--dsc-doc-font); font-size: var(--dsc-doc-size);
  line-height: 1.7; color: var(--dsc-ink-2);
}
.dsc-lista li::before {
  content: ""; position: absolute; left: 6px; top: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.dsc-lista.is-num { counter-reset: dsc; }
.dsc-lista.is-num li::before {
  counter-increment: dsc; content: counter(dsc); width: auto; height: auto;
  background: none; box-shadow: none; top: 0; left: 0;
  font: 700 12px var(--font-mono, monospace); color: var(--accent);
}
.dsc-lista li strong { color: var(--dsc-ink-1); }

.dsc-passos { margin: 0; padding: 0; list-style: none; counter-reset: p; }
.dsc-passos li {
  counter-increment: p; position: relative; padding-left: 42px; margin-bottom: 16px;
}
.dsc-passos li::before {
  content: counter(p); position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font: 700 13px var(--font-mono, monospace);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
}
.dsc-passos li b {
  display: block; font-family: var(--dsc-doc-font); font-size: calc(var(--dsc-doc-size) * .97);
  color: var(--dsc-ink-1); margin-bottom: 3px; line-height: 1.5;
}
.dsc-passos li span {
  display: block; font-size: calc(var(--dsc-doc-size) * .86);
  color: var(--dsc-ink-3); line-height: 1.6;
}

/* !important em tudo: existem regras GLOBAIS de table/th/td no app (fundo
   escuro e texto claro) que venciam as locais — no papel branco a tabela
   ficava com texto claro sobre claro, ilegível. */
.dsc-tabela-wrap {
  overflow-x: auto; margin: 4px 0;
  /* a tabela sangra um pouco pra fora da coluna de texto: com 4 colunas na
     largura de leitura (720px) a última coluna ficava com ~90px e o exemplo
     quebrava de 2 em 2 palavras. */
  margin-inline: -14px; padding-inline: 14px;
}
.dsc-tabela {
  width: 100%; border-collapse: collapse; background: transparent !important;
  font-size: calc(var(--dsc-doc-size) * .82);
  /* fixed = colunas com peso igual. No auto, a 1ª coluna (verbos longos,
     que não quebram) roubava o espaço da coluna de exemplo. */
  table-layout: fixed;
}
.dsc-tabela thead, .dsc-tabela tbody, .dsc-tabela tr { background: transparent !important; }
.dsc-tabela th, .dsc-tabela td {
  padding: 10px 11px; overflow-wrap: anywhere; text-align: left; vertical-align: top;
  background: transparent !important;
  border-bottom: 1px solid color-mix(in oklab, var(--dsc-ink-3) 22%, transparent) !important;
  color: var(--dsc-ink-2) !important;
  -webkit-text-fill-color: var(--dsc-ink-2) !important;
  line-height: 1.55;
}
.dsc-tabela th {
  font: 700 11.5px var(--font-sans, inherit) !important; letter-spacing: .02em;
  color: var(--dsc-ink-1) !important;
  -webkit-text-fill-color: var(--dsc-ink-1) !important;
  border-bottom-width: 2px !important;
}
.dsc-tabela td strong, .dsc-tabela th strong {
  color: var(--dsc-ink-1) !important; -webkit-text-fill-color: var(--dsc-ink-1) !important;
}
.dsc-tabela tr:last-child td { border-bottom: 0 !important; }
/* faixa alternada sutil, derivada do papel */
.dsc-tabela tbody tr:nth-child(odd) td { background: color-mix(in oklab, var(--dsc-ink-1) 3.5%, transparent) !important; }

.dsc-atencao {
  display: flex; gap: 13px; padding: 14px 16px; margin: 0 0 16px;
  border-radius: var(--r-md, 10px); border-left: 3px solid;
}
.dsc-atencao .ic { flex: 0 0 auto; font-size: 16px; line-height: 1.3; }
.dsc-atencao .c { flex: 1; min-width: 0; }
.dsc-atencao b { display: block; font-size: 13px; margin-bottom: 4px; }
.dsc-atencao p {
  margin: 0 0 6px !important; font-size: calc(var(--dsc-doc-size) * .88) !important;
  line-height: 1.6 !important;
  /* sem !important o texto herdava a tinta clara e sumia no papel branco */
  color: var(--dsc-ink-2) !important;
  -webkit-text-fill-color: var(--dsc-ink-2) !important;
}
.dsc-atencao p strong { color: var(--dsc-ink-1) !important; -webkit-text-fill-color: var(--dsc-ink-1) !important; }
.dsc-atencao p:last-child { margin-bottom: 0 !important; }
.dsc-atencao.is-erro { background: oklch(0.68 0.18 27 / .10); border-color: oklch(0.68 0.18 27); }
.dsc-atencao.is-erro b { color: var(--dsc-sig-erro); }
.dsc-atencao.is-dica { background: var(--accent-soft); border-color: var(--accent); }
.dsc-atencao.is-dica b { color: var(--dsc-sig-ok); }
.dsc-atencao.is-banca { background: oklch(0.72 0.13 300 / .10); border-color: oklch(0.72 0.13 300); }
.dsc-atencao.is-banca b { color: var(--dsc-sig-banca); }

.dsc-caso {
  position: relative; padding: 18px 20px; margin: 0 0 16px;
  border-radius: var(--r-lg, 14px);
  background: color-mix(in oklab, var(--dsc-ink-1) 5%, transparent);
  border: 1px solid color-mix(in oklab, var(--dsc-ink-3) 25%, transparent);
}
.dsc-caso-tag {
  display: inline-block; font: 700 9.5px var(--font-mono, monospace);
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent);
  background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; margin-bottom: 9px;
}
.dsc-caso h3 { margin: 0 0 8px !important; font-size: calc(var(--dsc-doc-size) * 1.05) !important; color: var(--dsc-ink-1) !important; }
.dsc-caso p { margin: 0 0 10px; font-family: var(--dsc-doc-font); font-size: calc(var(--dsc-doc-size) * .94); color: var(--dsc-ink-2); line-height: 1.7; }
.dsc-caso-enun {
  padding: 14px 16px; border-radius: var(--r-md, 10px); margin: 10px 0;
  background: color-mix(in oklab, var(--dsc-ink-1) 6%, transparent);
  border-left: 3px solid var(--dsc-ink-3);
  font-family: var(--dsc-doc-font); font-size: calc(var(--dsc-doc-size) * .94);
  color: var(--dsc-ink-1); line-height: 1.7;
}
.dsc-caso-analise {
  padding: 12px 15px; border-radius: var(--r-md, 10px);
  background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent);
  font-size: calc(var(--dsc-doc-size) * .86); color: var(--dsc-ink-2); line-height: 1.65;
}
.dsc-caso-analise strong { color: var(--dsc-ink-1); }
/* a análise pode ter mais de um parágrafo — precisa vencer o ".dsc-caso p"
   acima, que é do enunciado e usa outro corpo de texto. */
.dsc-caso-analise p { margin: 0 0 9px; font-family: inherit; font-size: inherit; color: inherit; line-height: inherit; }
.dsc-caso-analise p:last-child { margin-bottom: 0; }

/* ~~forma errada~~ ao lado da certa: riscado precisa continuar legível */
.dsc-folha s {
  text-decoration-color: color-mix(in oklab, var(--dsc-ink-1) 45%, transparent);
  text-decoration-thickness: 1.5px;
  color: color-mix(in oklab, var(--dsc-ink-1) 62%, transparent);
}

.dsc-resumo {
  padding: 18px 20px; margin: 6px 0 16px; border-radius: var(--r-lg, 14px);
  background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
}
.dsc-resumo h4 {
  margin: 0 0 11px; font: 700 12.5px var(--font-sans, inherit);
  /* no papel claro o verde-claro do accent sumia — usa um verde escuro
     quando o fundo é claro. -webkit-text-fill-color porque regras globais
     de heading sobrescrevem o `color`. */
  color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important;
  text-transform: none; letter-spacing: 0;
}
.dsc-root[data-surface="sepia"] .dsc-resumo h4,
.dsc-root[data-surface="white"] .dsc-resumo h4,
.dsc-root[data-surface="sepia"] .dsc-quiz h4,
.dsc-root[data-surface="white"] .dsc-quiz h4 {
  color: oklch(0.46 0.13 152) !important; -webkit-text-fill-color: oklch(0.46 0.13 152) !important;
}
.dsc-root[data-surface="sepia"] .dsc-folha .dsc-destaque strong,
.dsc-root[data-surface="white"] .dsc-folha .dsc-destaque strong,
.dsc-root[data-surface="sepia"] .dsc-caso-tag,
.dsc-root[data-surface="white"] .dsc-caso-tag {
  color: oklch(0.46 0.13 152) !important; -webkit-text-fill-color: oklch(0.46 0.13 152) !important;
}
.dsc-resumo ul { margin: 0; padding-left: 4px; list-style: none; }
.dsc-resumo li {
  position: relative; padding-left: 20px; margin-bottom: 8px;
  font-size: calc(var(--dsc-doc-size) * .86); color: var(--dsc-ink-2); line-height: 1.6;
}
.dsc-resumo li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.dsc-resumo li strong { color: var(--dsc-ink-1); }
.dsc-resumo li:last-child { margin-bottom: 0; }

/* ---------- quiz ---------- */
.dsc-quiz {
  background: var(--bg-1); border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  border-radius: var(--r-lg, 14px); padding: 18px 22px; margin-bottom: 13px;
}
.dsc-quiz h4 { margin: 0 0 9px; font: 700 14px var(--font-sans, inherit); color: var(--accent); }
.dsc-quiz-en { margin: 0 0 13px; font-size: 13.5px; color: var(--text-2); line-height: 1.6; }
.dsc-quiz-ctx {
  padding: 12px 14px; margin-bottom: 12px; border-radius: var(--r-md, 10px);
  background: var(--bg-2); font-family: var(--dsc-serif); font-size: 14px; color: var(--text-1); line-height: 1.6;
}
.dsc-quiz-ops { display: flex; flex-direction: column; gap: 8px; }
.dsc-opt {
  /* justify-content: flex-start é obrigatório: a regra global de <button>
     do app usa `center` e empurrava a alternativa toda pro meio da caixa. */
  display: flex; align-items: flex-start; justify-content: flex-start !important;
  gap: 11px; width: 100%; text-align: left !important;
  padding: 12px 14px; border-radius: var(--r-md, 10px); background: var(--bg-2);
  border: 1px solid var(--border-subtle); color: var(--text-2);
  font: 400 13px/1.5 var(--font-sans, inherit); cursor: pointer; transition: .14s;
}
.dsc-opt > span:last-child { flex: 1; min-width: 0; text-align: left; }
.dsc-opt:hover:not(.is-locked) { border-color: var(--border-strong); color: var(--text-1); }
.dsc-opt .l {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; background: var(--bg-3);
  display: grid; place-items: center; font: 700 11px var(--font-mono, monospace); color: var(--text-4);
}
.dsc-opt.is-locked { cursor: default; }
.dsc-opt.is-certa {
  background: color-mix(in oklab, var(--accent) 13%, transparent);
  border-color: color-mix(in oklab, var(--accent) 45%, transparent); color: var(--text-1);
}
.dsc-opt.is-certa .l { background: var(--accent); color: oklch(0.17 0.03 152); }
.dsc-opt.is-errada { background: oklch(0.68 0.18 27 / .10); border-color: oklch(0.68 0.18 27 / .4); }
.dsc-opt.is-errada .l { background: oklch(0.68 0.18 27); color: oklch(0.16 0.03 27); }
.dsc-quiz-resp {
  margin-top: 13px; padding: 13px 15px; border-radius: var(--r-md, 10px);
  background: oklch(0.72 0.11 240 / .10); border: 1px solid oklch(0.72 0.11 240 / .3);
  font-size: 12.5px; color: var(--text-2); line-height: 1.65;
}
.dsc-quiz-resp strong { color: var(--dsc-sig-info); }

/* ---------- fim da aula: concluir + comemoração ---------- */
.dsc-fim { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; align-items: center; }

.dsc-btn-pri.is-done {
  background: color-mix(in oklab, var(--accent) 22%, transparent) !important;
  color: var(--accent) !important;
  border: 1px solid color-mix(in oklab, var(--accent) 50%, transparent);
}
/* pulso curto ao marcar — a recompensa imediata do clique */
.dsc-btn-pri.is-celebrando { animation: dsc-pop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes dsc-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.13); box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 22px transparent; }
}

/* faíscas — vivem no <body> pra não serem cortadas por overflow */
.dsc-faisca {
  position: fixed; z-index: 9999; width: 7px; height: 7px; border-radius: 2px;
  pointer-events: none; opacity: 0; animation: dsc-faisca .85s ease-out forwards;
}
@keyframes dsc-faisca {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.4) rotate(200deg); }
}

/* o próximo passo chama atenção depois de concluir */
.dsc-btn-gh.is-chamando {
  animation: dsc-chama 1.5s ease-in-out 4;
  border-color: color-mix(in oklab, var(--accent) 55%, transparent) !important;
  color: var(--accent) !important;
}
@keyframes dsc-chama {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 42%, transparent); }
  50%      { box-shadow: 0 0 0 7px transparent; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .dsc-btn-pri.is-celebrando, .dsc-btn-gh.is-chamando, .dsc-faisca { animation: none !important; }
}
.dsc-btn-pri {
  padding: 11px 18px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--accent); color: oklch(0.17 0.03 152); font: 600 13px var(--font-sans, inherit);
}
.dsc-btn-pri:hover { background: oklch(0.80 0.15 152); }
.dsc-btn-pri:disabled { opacity: .6; cursor: default; }
.dsc-btn-gh {
  padding: 11px 18px; border-radius: 10px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--border-subtle); color: var(--text-2);
  font: 600 13px var(--font-sans, inherit);
}
.dsc-btn-gh:hover { color: var(--text-1); border-color: var(--border-strong); }
.dsc-btn-full { width: 100%; margin-top: 4px; }

/* ---------- lateral / flashcards ---------- */
.dsc-card {
  background: var(--bg-1); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg, 14px); padding: 16px 17px; margin-bottom: 12px;
}
.dsc-card h4 {
  margin: 0 0 11px; font: 700 10.5px var(--font-mono, monospace);
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-4);
}
.dsc-card-flash {
  background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 11%, transparent), var(--bg-1));
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
}
.dsc-card-flash h4 { color: var(--accent); }
.dsc-flash {
  padding: 12px 14px; border-radius: var(--r-md, 10px); background: var(--bg-2);
  border: 1px solid var(--border-subtle); margin-bottom: 9px;
}
.dsc-flash .f { font-size: 12.5px; color: var(--text-1); font-weight: 600; margin-bottom: 7px; }
.dsc-flash .v { font-size: 12px; color: var(--text-3); line-height: 1.55; padding-top: 8px; border-top: 1px dashed var(--border-soft); }
.dsc-flash-nota { margin: 9px 0 0; font-size: 11px; color: var(--text-3); line-height: 1.5; }

/* ---------- prática: o aluno escreve antes de ver o modelo ---------- */
.dsc-pratica {
  position: relative; padding: 18px 20px; margin: 0 0 18px;
  border-radius: var(--r-lg, 14px);
  background: color-mix(in oklab, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 34%, transparent);
}
.dsc-pratica-tag {
  display: inline-block; font: 700 9.5px var(--font-mono, monospace);
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent);
  background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; margin-bottom: 9px;
}
.dsc-root[data-surface="sepia"] .dsc-pratica-tag,
.dsc-root[data-surface="white"] .dsc-pratica-tag {
  color: var(--dsc-sig-ok) !important; -webkit-text-fill-color: var(--dsc-sig-ok) !important;
}
.dsc-pratica h3 {
  margin: 0 0 8px !important; font-size: calc(var(--dsc-doc-size) * 1.05) !important;
  color: var(--dsc-ink-1) !important;
}
.dsc-pratica-enun {
  font-family: var(--dsc-doc-font); font-size: calc(var(--dsc-doc-size) * .94);
  color: var(--dsc-ink-1); line-height: 1.7; margin-bottom: 12px;
}
.dsc-pratica-apoio { margin-bottom: 12px; background: transparent !important; border: 0 !important; padding: 0 !important; }
/* !important + text-fill: existe regra global que pinta summary de claro
   (pensada pro tema escuro) — no papel branco o texto sumia (1,09:1). */
.dsc-root .dsc-pratica-apoio summary {
  cursor: pointer; list-style: none; font: 600 12px var(--font-sans, inherit);
  color: var(--dsc-ink-3) !important; -webkit-text-fill-color: var(--dsc-ink-3) !important;
}
.dsc-pratica-apoio summary::before { content: "▸ "; }
.dsc-pratica-apoio[open] summary::before { content: "▾ "; }
.dsc-root .dsc-pratica-apoio summary:hover { color: var(--dsc-ink-1) !important; -webkit-text-fill-color: var(--dsc-ink-1) !important; }
.dsc-pratica-apoio ul { margin: 9px 0 0; padding-left: 20px; }
.dsc-pratica-apoio li {
  font-size: calc(var(--dsc-doc-size) * .86); color: var(--dsc-ink-2);
  line-height: 1.6; margin-bottom: 5px;
}
/* O campo do aluno: papel dentro do papel.
   Dois cuidados contra as regras globais de input:
   1. a classe .nv-input no elemento — é a exceção que o próprio
      "textarea:not(.nv-input)" do spa-modules.css prevê;
   2. o seletor com .dsc-root na frente, pra ter mais classes que aquela
      regra (que também usa !important e venceria um seletor de uma classe). */
.dsc-root .dsc-pratica-campo {
  width: 100%; resize: vertical; min-height: 96px;
  background: color-mix(in oklab, var(--dsc-ink-1) 4%, transparent) !important;
  border: 1px solid color-mix(in oklab, var(--dsc-ink-3) 34%, transparent) !important;
  border-radius: var(--r-md, 10px) !important; padding: 12px 14px !important;
  font-family: var(--dsc-doc-font) !important;
  font-size: calc(var(--dsc-doc-size) * .94) !important;
  color: var(--dsc-ink-1) !important; line-height: 1.7; outline: none;
}
.dsc-root .dsc-pratica-campo:focus { border-color: var(--accent) !important; }
.dsc-root .dsc-pratica-campo::placeholder { color: var(--dsc-ink-3); opacity: .75; }
.dsc-pratica-barra {
  display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap;
}
.dsc-pratica-barra .conta {
  font: 600 11px var(--font-mono, monospace); color: var(--dsc-ink-3);
}
.dsc-pratica-btn {
  margin-left: auto; cursor: pointer;
  background: var(--accent); color: oklch(0.17 0.03 152);
  border: 0; border-radius: 999px; padding: 8px 16px;
  font: 600 12.5px var(--font-sans, inherit); transition: .15s;
}
.dsc-pratica-btn:hover { background: oklch(0.80 0.15 152); }
/* o modelo, revelado só depois */
.dsc-pratica-modelo { margin-top: 14px; }
.dsc-pratica-modelo[hidden] { display: none !important; }
.dsc-pratica-modelo .mod {
  padding: 13px 15px; border-radius: var(--r-md, 10px);
  background: color-mix(in oklab, var(--dsc-ink-1) 6%, transparent);
  border-left: 3px solid var(--accent);
}
.dsc-pratica-modelo .mod > b {
  display: block; margin-bottom: 7px; font: 700 10.5px var(--font-mono, monospace);
  letter-spacing: .09em; text-transform: uppercase; color: var(--dsc-ink-3);
}
.dsc-pratica-modelo .txt p {
  margin: 0 0 9px; font-family: var(--dsc-doc-font);
  font-size: calc(var(--dsc-doc-size) * .94); color: var(--dsc-ink-1); line-height: 1.7;
}
.dsc-pratica-modelo .txt p:last-child { margin-bottom: 0; }
.dsc-pratica-modelo .porque {
  margin: 12px 0 0; font-size: calc(var(--dsc-doc-size) * .86);
  color: var(--dsc-ink-2); line-height: 1.65;
}
.dsc-pratica-modelo .confira {
  margin-top: 13px; padding: 12px 15px; border-radius: var(--r-md, 10px);
  background: color-mix(in oklab, var(--dsc-ink-1) 4%, transparent);
  border: 1px solid color-mix(in oklab, var(--dsc-ink-3) 22%, transparent);
}
.dsc-pratica-modelo .confira > b {
  display: block; margin-bottom: 8px; font-size: 12.5px; color: var(--dsc-ink-1);
}
.dsc-pratica-modelo .confira ul { margin: 0; padding-left: 4px; list-style: none; }
.dsc-pratica-modelo .confira li {
  position: relative; padding-left: 22px; margin-bottom: 7px;
  font-size: calc(var(--dsc-doc-size) * .86); color: var(--dsc-ink-2); line-height: 1.6;
}
.dsc-pratica-modelo .confira li::before {
  content: "☐"; position: absolute; left: 0; color: var(--dsc-ink-3);
}
.dsc-pratica-modelo .aviso {
  margin: 12px 0 0; font-size: 12px; color: var(--dsc-ink-3); line-height: 1.55;
}