/* ============================================================
   TAREFA ASSÍNCRONA

   O aluno está sozinho, num celular, por três horas e meia. Tudo
   aqui é medido pra leitura longa, e não pra consulta rápida como
   o resto do app: linha mais curta, texto maior, campo de escrita
   que não parece formulário de banco.

   Usa os tokens de design/tokens.css. Nada de cor solta.
   ============================================================ */

#tela-tarefa .conteudo { max-width: 42rem; }

.tarefa__olho {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texto-fraco); margin: 0 0 var(--e2); font-weight: 700;
}
.tarefa__titulo {
  font-family: var(--fonte-display); font-size: 2.1rem; line-height: 1.1;
  margin: 0 0 var(--e5);
}
.tarefa__p { font-size: 1.05rem; line-height: 1.65; margin: 0 0 var(--e4); }
.tarefa__p--forte { font-weight: 700; }
.tarefa__item {
  font-size: 1rem; line-height: 1.55; margin: 0 0 var(--e3);
  padding-left: var(--e4); text-indent: calc(var(--e4) * -1);
}
.tarefa__item::before { content: "•"; color: var(--texto-fraco); padding-right: var(--e3); }
.tarefa__sub {
  font-family: var(--fonte-display); font-size: 1.15rem;
  margin: var(--e6) 0 var(--e3);
}

.tarefa__abertura, .tarefa__situacaoCaixa {
  border: 2px solid var(--borda-forte); border-radius: var(--raio-g);
  padding: var(--e5); margin-bottom: var(--e6);
  background: var(--superficie);
}

.tarefa__avisoCaixa {
  font-size: 0.95rem; line-height: 1.5; margin: var(--e4) 0 0;
  padding: var(--e4); border-radius: var(--raio-p);
  background: var(--fundo-2); border-left: 4px solid var(--acento);
}

.tarefa__etapa {
  border-top: 3px solid var(--texto); padding-top: var(--e5);
  margin: var(--e8) 0; scroll-margin-top: var(--e4);
}
.tarefa__etapaNumero {
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texto-fraco); margin: 0 0 var(--e2); font-weight: 700;
}
.tarefa__etapaTitulo {
  font-family: var(--fonte-display); font-size: 1.6rem; line-height: 1.15;
  margin: 0 0 var(--e5);
}

.tarefa__texto {
  background: var(--fundo-2); border-radius: var(--raio);
  padding: var(--e5); margin-bottom: var(--e5);
}
.tarefa__textoTitulo {
  font-family: var(--fonte-display); font-size: 1.3rem; margin: 0 0 var(--e4);
}

.tarefa__instrucao { font-size: 1rem; line-height: 1.55; margin: 0 0 var(--e5); font-weight: 700; }
.tarefa__enunciado { font-size: 1rem; line-height: 1.5; margin: 0 0 var(--e3); font-weight: 700; }
.tarefa__rotuloCampo { font-size: 0.85rem; color: var(--texto-fraco); margin: var(--e4) 0 var(--e2); }
.tarefa__estrutura { font-size: 0.9rem; color: var(--texto-suave); margin: 0 0 var(--e3); font-style: italic; }

.tarefa__pergunta, .tarefa__situacao, .tarefa__opcional, .tarefa__producao {
  margin-bottom: var(--e6);
}

/* Campo grande e de borda grossa: o dedo do aluno tem que acertar
   no celular, e campo pequeno convida resposta pequena. */
.tarefa__campo, .tarefa__nome, .tarefa__select {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 1rem; line-height: 1.5;
  padding: var(--e3) var(--e4);
  border: 2px solid var(--borda-forte); border-radius: var(--raio-p);
  background: var(--fundo-2); color: var(--texto);
  min-height: var(--toque);
}
.tarefa__campo { resize: vertical; min-height: 5rem; }
.tarefa__campo:focus, .tarefa__nome:focus, .tarefa__select:focus {
  outline: 3px solid var(--foco); outline-offset: 1px; border-color: var(--acento);
}
.tarefa__nome { font-size: 1.05rem; font-weight: 700; }
.tarefa__campo::placeholder, .tarefa__nome::placeholder { color: var(--texto-fraco); }

.tarefa__exemplo {
  border: 2px solid var(--borda-forte); border-radius: var(--raio);
  padding: var(--e4); margin: var(--e5) 0 var(--e4);
  background: var(--fundo-2);
}
.tarefa__exemploRotulo {
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texto-fraco); margin: 0 0 var(--e3); font-weight: 700;
}
.tarefa__exemploCabecalho {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.82rem;
  white-space: pre-wrap; margin: 0 0 var(--e3); color: var(--texto-suave);
}
.tarefa__exemploCorpo {
  margin: 0; padding: var(--e4); border-left: 4px solid var(--acento);
  background: var(--superficie); border-radius: 0 var(--raio-p) var(--raio-p) 0;
  font-size: 1rem; line-height: 1.55;
}

.tarefa__escolher {
  font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer;
  padding: var(--e3) var(--e5); border-radius: 999px; min-height: var(--toque);
  border: 2px solid var(--texto); background: var(--superficie); color: var(--texto);
  margin-bottom: var(--e3);
}
.tarefa__escolher[aria-pressed="true"] { background: var(--texto); color: var(--fundo); }

.tarefa__contador { font-size: 0.9rem; font-weight: 700; color: var(--texto-fraco); margin: 0 0 var(--e5); }
.tarefa__contador--pronto { color: var(--ok); }

.tarefa__tema {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; padding: var(--e4); margin-bottom: var(--e3);
  border: 2px solid var(--borda-forte); border-radius: var(--raio);
  background: var(--superficie); color: var(--texto);
}
.tarefa__tema[aria-pressed="true"] {
  border-color: var(--acento); border-width: 3px; background: var(--acento-veu);
}
.tarefa__temaRotulo {
  display: block; font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 700; color: var(--texto-fraco);
}
.tarefa__temaTexto { display: block; font-size: 1rem; line-height: 1.45; margin-top: var(--e2); }

/* Segue o padrao do .veredito das mecanicas: borda inteira e fundo
   tingido. O app ja ensinou a turma a ler certo e errado assim, e
   duas gramaticas pra mesma coisa no mesmo produto e ruido. */
.tarefa__retorno {
  margin-top: var(--e4); padding: var(--e4);
  border-radius: var(--raio-g);
  border: 1px solid var(--borda); background: var(--superficie);
}
.tarefa__retorno--ok {
  background: var(--ok-veu);
  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
}
.tarefa__retorno--nao {
  background: var(--erro-veu);
  border-color: color-mix(in srgb, var(--erro) 30%, transparent);
}
.tarefa__veredito { font-weight: 700; margin: 0 0 var(--e2); font-size: 0.98rem; }
.tarefa__porque { margin: 0; font-size: 0.95rem; line-height: 1.55; }

.tarefa__aviso { font-size: 0.9rem; color: var(--texto-suave); margin: var(--e5) 0 var(--e3); line-height: 1.5; }

.tarefa__salvo { font-size: 0.82rem; color: var(--texto-fraco); margin: var(--e3) 0 0; }
.tarefa__salvo--erro { color: var(--erro); font-weight: 700; }

.tarefa__entrega { border-top-width: 6px; }
.tarefa__comoEntregar {
  border: 2px solid var(--borda-forte); border-radius: var(--raio);
  padding: var(--e5); margin: var(--e5) 0; background: var(--fundo-2);
}
.tarefa__acao { display: block; width: 100%; margin-bottom: var(--e3); }
.tarefa__alerta { color: var(--erro); font-weight: 700; font-size: 0.95rem; margin: var(--e3) 0 0; }
.tarefa__nota { font-size: 0.9rem; color: var(--texto-fraco); margin-top: var(--e5); line-height: 1.5; }

.tarefa__observado { margin-top: var(--e6); }

/* A caixa da aba no hub */
.tarefas-hub { margin: var(--e5) 0; }
.tarefas-hub__titulo {
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texto-fraco); margin: 0 0 var(--e3); font-weight: 700;
}
.tarefas-hub__cartao {
  border: 3px solid var(--texto); border-radius: var(--raio-g);
  padding: var(--e4); margin-bottom: var(--e3); background: var(--superficie);
  box-shadow: var(--sombra-dura-p);
}
.tarefas-hub__abrir {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; background: none; border: 0; padding: 0; color: var(--texto);
  margin-bottom: var(--e3);
}
.tarefas-hub__nome {
  display: block; font-family: var(--fonte-display); font-size: 1.2rem;
  line-height: 1.2;
}
.tarefas-hub__linha { display: block; font-size: 0.95rem; line-height: 1.45; margin-top: var(--e2); }
.tarefas-hub__tempo { display: block; font-size: 0.8rem; color: var(--texto-fraco); margin-top: var(--e2); }

/* Aluno que entrou por link de tarefa não vê o resto do app, pela
   mesma razão do celular na sala: ele veio fazer uma coisa só. */
body[data-tarefa="sim"] .topbar__acoes,
body[data-tarefa="sim"] .topbar__centro { display: none; }