/*
  oda.css: design system mínimo dos ODAs.
  Documentação em design-system/README.md. Exemplo vivo em design-system/exemplo.html.
  Os ODAs referenciam este arquivo com <link>; tools/bundle.py embute o CSS na versão distribuível.
*/

/* Nunito (SIL OFL 1.1, ver fonts/OFL-Nunito.txt): variável, pesos 200 a 1000, subconjunto latino.
   tools/bundle.py embute o arquivo como data URI na versão distribuível. */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("fonts/nunito-latin-wght-normal.woff2") format("woff2-variations");
  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;
}

/* Fira Math (SIL OFL 1.1, ver fonts/OFL-FiraMath.txt): fonte matemática sem serifa, com tabela MATH
   para frações, raízes e somatórios. Subconjunto; como regenerar em design-system/README.md. */
@font-face {
  font-family: "Fira Math";
  font-style: normal;
  font-display: swap;
  src: url("fonts/fira-math-subset.woff2") format("woff2");
}

/* Tokens: tema claro */
:root {
  color-scheme: light;

  --bg: #fff8ef;
  --surface: #ffffff;
  --surface-2: #fdf1e3;
  --ink: #2a2140;
  --ink-2: #5b5370;
  --muted: #8a8399;
  --border: #ecdcc7;
  --border-strong: #968672;

  --primary: #6b3fd4;
  --primary-ink: #ffffff;
  --primary-soft: #efe8ff;
  --accent: #ff7a45;

  --good: #12813a;
  --good-soft: #e3f6e8;
  --warn: #9a5b00;
  --warn-soft: #fff1d6;
  --bad: #c2353a;
  --bad-soft: #fde6e6;

  /* Séries de dados (gráficos, pontos, peças da simulação). Ordem fixa: use na sequência. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --grid: #efe6da;

  --font: "Nunito", ui-rounded, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.625rem;
  --step-3: 2.125rem;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 40px;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --press: 0 3px 0 var(--border);
  --hit: 44px;

  /* Tom claro de cada série, para preenchimento (área, base de barra, fundo de peça). */
  --series-1-soft: color-mix(in srgb, var(--series-1) 22%, var(--surface));
  --series-2-soft: color-mix(in srgb, var(--series-2) 22%, var(--surface));
  --series-3-soft: color-mix(in srgb, var(--series-3) 22%, var(--surface));
  --series-4-soft: color-mix(in srgb, var(--series-4) 22%, var(--surface));
  --series-5-soft: color-mix(in srgb, var(--series-5) 22%, var(--surface));
  --series-6-soft: color-mix(in srgb, var(--series-6) 22%, var(--surface));

  /* Barra fixa do topo (oda.js). Elemento sticky de um ODA usa top: var(--sticky-top). */
  --bar-h: 60px;
  --sticky-top: calc(var(--bar-h) + var(--s3));
}

/* Tokens: tema escuro (sistema operacional ou data-theme="dark") */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --bg: #17132a;
    --surface: #221c3a;
    --surface-2: #2b2448;
    --ink: #f6f1ff;
    --ink-2: #c4bcd9;
    --muted: #8f87a8;
    --border: #3d3560;
    --border-strong: #7a6fa0;
    --primary: #b39cff;
    --primary-ink: #17132a;
    --primary-soft: #342a5c;
    --accent: #ff8f61;
    --good: #5fd38a;
    --good-soft: #1e3a2c;
    --warn: #f5bf4f;
    --warn-soft: #3d3020;
    --bad: #ff8a8e;
    --bad-soft: #43232e;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #2fa52f;
    --grid: #2f2850;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #17132a;
  --surface: #221c3a;
  --surface-2: #2b2448;
  --ink: #f6f1ff;
  --ink-2: #c4bcd9;
  --muted: #8f87a8;
  --border: #3d3560;
  --border-strong: #7a6fa0;
  --primary: #b39cff;
  --primary-ink: #17132a;
  --primary-soft: #342a5c;
  --accent: #ff8f61;
  --good: #5fd38a;
  --good-soft: #1e3a2c;
  --warn: #f5bf4f;
  --warn-soft: #3d3020;
  --bad: #ff8a8e;
  --bad-soft: #43232e;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #2fa52f;
  --grid: #2f2850;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--sticky-top); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.55;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--s3); text-wrap: balance; }
h1 { font-size: var(--step-3); font-weight: 800; }
h2 { font-size: var(--step-2); font-weight: 750; }
h3 { font-size: var(--step-1); font-weight: 700; }
p, ul, ol { margin: 0 0 var(--s4); max-width: 65ch; }
a { color: var(--primary); text-underline-offset: 3px; }
strong { font-weight: 700; }
/* A Fira Math tem o "x" 9% mais alto que a Nunito. font-size-adjust iguala a altura do "x" das duas
   (0,484 é a da Nunito), para uma variável na fórmula ter o mesmo tamanho da letra do texto. */
math { font-family: "Fira Math", math; font-size-adjust: ex-height 0.484; }
/* Números e textos da fórmula na mesma fonte do parágrafo; variáveis e símbolos ficam na Fira Math. */
mn, mtext { font-family: "Nunito", "Fira Math", math; }
code { font-family: var(--font-mono); font-size: 0.9em; }

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* hidden sempre esconde, mesmo em componente com display próprio (.btn, .cluster, .legend...). */
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Layout */
.oda {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--s2) var(--s4) var(--s6);
}
.oda-header { margin-bottom: var(--s5); }
.eyebrow {
  display: inline-block;
  margin-bottom: var(--s2);
  padding: var(--s1) var(--s3);
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--step--1);
  font-weight: 700;
}
.lede { font-size: var(--step-1); color: var(--ink-2); }

.stack > * + * { margin-top: var(--s4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
/* minmax(0, ...) e min-width: 0 impedem que um SVG ou tabela larga empurre a página para o lado. */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.split > * { min-width: 0; }
@media (min-width: 768px) {
  .split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}
.scroll-x { overflow-x: auto; }

/* Barra fixa do topo, inserida pelo oda.js: transparente no começo da página; com fundo, seção e
   título quando o h1 sai da tela (classe .is-scrolled). */
.oda-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--bar-h);
  border-bottom: 2px solid transparent;
  transition: background-color 160ms, border-color 160ms;
}
.oda-bar.is-scrolled {
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  border-bottom-color: var(--border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.oda-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  max-width: 1000px;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--s4);
}
.oda-bar-title {
  display: grid;
  min-width: 0;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms, transform 160ms;
}
.oda-bar.is-scrolled .oda-bar-title { opacity: 1; transform: none; }
.oda-bar-eyebrow, .oda-bar-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.oda-bar-eyebrow { font-size: var(--step--1); font-weight: 700; color: var(--primary); }
.oda-bar-name { font-weight: 800; }

.oda-bar-tools { flex: none; display: flex; align-items: center; gap: var(--s2); }

/* Botão de idioma, dentro da barra: mostra a sigla do idioma para onde ele leva. */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--hit);
  min-height: 36px;
  padding: 0 var(--s3);
  border: 2px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--press);
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
}
.lang-toggle:active { transform: translateY(2px); box-shadow: none; }
.lang-toggle:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* Link de volta para a home do projeto, acima da seção no cabeçalho. */
.oda-home {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit);
  margin-bottom: var(--s1);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink-2);
  text-decoration: none;
}
.oda-home:hover { color: var(--primary); text-decoration: underline; }
.oda-header > .oda-home { display: flex; width: fit-content; }

/* Botão de tema, dentro da barra */
.theme-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--hit);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.theme-toggle-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 68px;
  height: 36px;
  padding: 0 9px;
  border: 2px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--press);
}
.theme-toggle-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle-icon.moon { fill: var(--ink-2); stroke: none; }
.theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  transition: transform 180ms ease;
}
.theme-toggle[aria-checked="true"] .theme-toggle-thumb { transform: translateX(32px); }
.theme-toggle:focus-visible { outline: none; }
.theme-toggle:focus-visible .theme-toggle-track { outline: 3px solid var(--primary); outline-offset: 2px; }

/* Superfícies */
.card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s5);
}
.stage {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s4);
  overflow: hidden;
}
.stage > svg, .stage > canvas { display: block; width: 100%; height: auto; }

/* Controles */
.field { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.field > label, .field > .label { font-weight: 700; }
.field .hint { font-size: var(--step--1); color: var(--ink-2); }
.field output {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--primary);
}

input[type="range"] {
  width: 100%;
  min-height: var(--hit);
  accent-color: var(--primary);
  margin: 0;
}
input[type="number"], input[type="text"], select {
  min-height: var(--hit);
  padding: var(--s2) var(--s3);
  border: 2px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
input[type="checkbox"], input[type="radio"] {
  width: 22px; height: 22px; accent-color: var(--primary);
}

/* Grupo de opções: fieldset com legend no estilo do rótulo do .field. */
fieldset.field { margin: 0 0 var(--s4); padding: 0; border: 0; min-width: 0; }
fieldset.field > legend { margin-bottom: var(--s2); padding: 0; font-weight: 700; }
.choices { display: flex; flex-wrap: wrap; gap: var(--s2); }
/* Opção em pílula: <label class="choice"><input type="radio|checkbox"> Texto</label> */
.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--hit);
  padding: var(--s1) var(--s4) var(--s1) var(--s3);
  border: 2px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-weight: 700;
  cursor: pointer;
}
.choice:hover { background: var(--surface-2); }
.choice:has(:checked) { border-color: var(--primary); background: var(--primary-soft); }
.choice:has(:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }
.choice input:focus-visible { outline: none; }
.choice:has(:disabled) { opacity: 0.6; cursor: not-allowed; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--hit);
  padding: var(--s2) var(--s5);
  border: 2px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--press);
  transition: transform 80ms, box-shadow 80ms;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(3px); box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
/* Controle deslizante travado até o palpite: aria-disabled não impede arrastar, então o script do
   ODA devolve o valor e mostra o aviso; aqui ele só parece indisponível. */
input[type="range"][aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn[aria-disabled="true"]:active { transform: none; box-shadow: var(--press); }
/* Botão de alternar (palpite, mostrar/esconder): aria-pressed="true" quando ligado. */
.btn[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--primary) 60%, black);
}
.btn-primary:hover { background: color-mix(in srgb, var(--primary) 88%, black); }

/* Leituras e feedback */
.stat {
  display: grid;
  gap: var(--s1);
  padding: var(--s4);
  border-radius: var(--r);
  background: var(--surface-2);
}
.stat .label { font-size: var(--step--1); color: var(--ink-2); font-weight: 700; }
.stat .value { font-size: var(--step-2); font-weight: 800; font-variant-numeric: tabular-nums; }
.stats { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
/* Painel compacto: rótulo e valor na mesma linha, para valores longos (R$ 1.816,70) em coluna estreita. */
.stats.compact { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.stats.compact .stat { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); }
.stats.compact .value { font-size: var(--step-1); }
.stat.wide { grid-column: 1 / -1; }

/* Etiqueta pequena: "Desafio extra", "feita". */
.tag {
  display: inline-block;
  padding: 0 var(--s2);
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--step--1);
  font-weight: 800;
  vertical-align: 3px;
}
.tag[data-tone="good"] { background: var(--good-soft); color: var(--good); }

.feedback {
  padding: var(--s3) var(--s4);
  border-radius: var(--r);
  border-left: 6px solid var(--muted);
  background: var(--surface-2);
}
.feedback:empty { display: none; }
.feedback[data-tone="good"] { border-color: var(--good); background: var(--good-soft); }
.feedback[data-tone="hint"] { border-color: var(--primary); background: var(--primary-soft); }
.feedback[data-tone="warn"] { border-color: var(--warn); background: var(--warn-soft); }
.feedback[data-tone="bad"]  { border-color: var(--bad);  background: var(--bad-soft); }

/* Palpite registrado e aviso de bloqueio. O resumo fica no lugar do formulário depois que o aluno
   registra; o aviso fica embaixo do botão com aria-disabled, ligado a ele por aria-describedby. */
.guess-summary, .locked-note {
  margin: 0;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  font-size: var(--step--1);
  font-weight: 700;
}
.guess-summary { background: var(--surface-2); }
.locked-note { background: var(--primary-soft); }

/* Dados */
.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--step--1); color: var(--ink-2); }
.legend .swatch {
  display: inline-block; width: 12px; height: 12px; margin-right: var(--s2);
  border-radius: 4px; vertical-align: -1px;
}

table.data { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
table.data th, table.data td { padding: var(--s2) var(--s3); text-align: right; border-bottom: 1px solid var(--border); }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data th { font-size: var(--step--1); color: var(--ink-2); }

/* Texto dentro de SVG de gráfico: contorno da cor do fundo para ler por cima de linhas. */
svg .halo { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }

/* Bancada: palco (simulação) e painel de tarefas lado a lado. Ver "Painel de tarefas" no README. */
.workbench { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.workbench > * { min-width: 0; }
@media (min-width: 900px) {
  .workbench { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .workbench > .stage { align-self: start; }
  /* Acompanha a rolagem a coluna mais curta, se ela couber na janela (o oda.js decide e grava em
     data-sticky). Coluna fixa mais alta que a janela esconderia o próprio pé. Sem o script, o palco. */
  .workbench:not([data-sticky]) > .stage,
  .workbench[data-sticky="stage"] > .stage { position: sticky; top: var(--sticky-top); }
  .workbench[data-sticky="panel"] > :not(.stage, .sr-only) { align-self: start; position: sticky; top: var(--sticky-top); }
}

/* Painel de tarefas: montado pelo ODA.taskPanel() do oda.js; uma tarefa por vez. */
.task-panel { display: flex; flex-direction: column; gap: var(--s4); }
.task-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
.task-progress { margin: 0; font-size: var(--step--1); font-weight: 800; color: var(--primary); }
.task-dots { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0; padding: 0; list-style: none; max-width: none; }
.task-dots li {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.task-dots li[data-done="true"] { background: var(--good); border-color: var(--good); color: var(--surface); }
.task-dots li[data-current="true"] { outline: 3px solid var(--primary); outline-offset: 1px; }
.task { display: grid; gap: var(--s3); align-content: start; }
.task h3 { margin: 0; font-size: var(--step-2); font-weight: 800; }
.task h3:focus { outline: none; }
.task h3:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
.task p { margin: 0; }
.task .feedback { margin: 0; }
.task:not([data-done="true"]) .task-done { display: none; }
.task .stack > * + * { margin-top: var(--s3); }
/* Dica curta dentro da tarefa ("Sem ideia? Toque em Não sei."). */
.tip { font-size: var(--step--1); color: var(--ink-2); }
/* Resposta digitada: campo e botões na mesma linha, que quebra no celular. */
.answer { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: end; }
.answer .field { margin: 0; }
.answer input { width: 9ch; }
.task-nav { display: flex; justify-content: space-between; gap: var(--s3); margin-top: auto; padding-top: var(--s2); }

/* Gaveta do celular: o oda.js grava data-dock no painel quando a tela é estreita. O painel gruda no pé
   da tela enquanto a bancada está à vista, para a tarefa e o feedback ficarem perto do palco; tocar
   no palco recolhe a gaveta a uma linha (título e último feedback), e o botão abre de novo. */
.task-dock-toggle, .task-dock-status { display: none; }
.task-panel[data-dock] {
  position: sticky;
  bottom: 0;
  z-index: 20;
  max-height: 50vh;
  max-height: 50dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: var(--s3);
  padding: var(--s4);
  border-color: var(--border-strong);
  box-shadow: 0 -8px 20px color-mix(in srgb, var(--ink) 16%, transparent);
}
.task-panel[data-dock] .task-dock-toggle { display: inline-flex; min-height: 36px; padding: 0 var(--s3); font-size: var(--step--1); }
.task-panel[data-dock] .task h3 { font-size: var(--step-1); }
.task-panel[data-dock="closed"] { overflow: hidden; }
/* Recolhida, fica só o topo, a linha de status e o título da tarefa atual; some também o que é irmão
   das tarefas (controles que várias tarefas dividem, como no 07-05). */
.task-panel[data-dock="closed"] .task-dots,
.task-panel[data-dock="closed"] > :not(.task-top, .task-dock-status, .task),
.task-panel[data-dock="closed"] .task:not([hidden]) > :not(h3) { display: none; }
.task-panel[data-dock="closed"] .task-dock-status:not(:empty) {
  order: 1;
  display: block;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  border-left: 4px solid var(--muted);
  background: var(--surface-2);
  font-size: var(--step--1);
}
/* O corte em duas linhas fica no span de dentro: com padding no mesmo elemento, a terceira linha
   aparecia pela metade no espaço do padding. */
.task-dock-status > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.task-dock-status[data-tone="good"] { border-color: var(--good); background: var(--good-soft); }
.task-dock-status[data-tone="hint"] { border-color: var(--primary); background: var(--primary-soft); }
.task-dock-status[data-tone="warn"] { border-color: var(--warn); background: var(--warn-soft); }
.task-dock-status[data-tone="bad"] { border-color: var(--bad); background: var(--bad-soft); }

/* Bloco recolhido dentro da página ("Para ir além", tabela equivalente). */
details.more { border: 2px solid var(--border); border-radius: var(--r); padding: var(--s2) var(--s4); background: var(--surface); }
details.more > summary { min-height: var(--hit); display: flex; align-items: center; font-weight: 700; cursor: pointer; }
details.more[open] > summary { margin-bottom: var(--s3); }

/* Guia do professor */
.teacher-guide {
  margin-top: var(--s6);
  border: 2px dashed var(--border);
  border-radius: var(--r-lg);
  padding: var(--s4) var(--s5);
}
.teacher-guide > summary {
  min-height: var(--hit);
  display: flex;
  align-items: center;
  font-weight: 700;
  cursor: pointer;
}
.teacher-guide[open] > summary { margin-bottom: var(--s3); }

.credits { margin-top: var(--s5); font-size: var(--step--1); color: var(--ink-2); }

@media (forced-colors: active) {
  .btn, .card, .stage, .feedback { border-color: CanvasText; }
}