/* Tela Tarefas.
 *
 * Só tokens: nenhum valor de cor, raio, espaçamento ou elevação solto aqui —
 * tudo vem de `tokens.css`, como manda a folha de fundação. **As oito cores de
 * tarefa não aparecem nesta folha em lugar nenhum**: nem como hex, nem como
 * oito classes. Quem sabe a cor de uma tarefa é o dado, e a folha só sabe usar a
 * propriedade `--cor-tarefa` que o JavaScript põe no elemento — derivada do
 * token `--tarefa-<nome>`. Oito classes aqui seriam a segunda lista das cores,
 * que é justamente o que a AC do épico proíbe.
 *
 * Sem @media de largura, como o resto do sistema: um layout fluido só. O
 * formulário e a lista ficam lado a lado enquanto couberem e viram uma coluna
 * quando não couberem, por `auto-fit` + `minmax()`, sem breakpoint e sem segunda
 * versão da tela.
 *
 * O topo, o recado, o cartão de seção e o botão espelham `parametros.css` e
 * `contas.css` de propósito, com o prefixo trocado: as telas do pai têm o mesmo
 * vocabulário visual, e inventar um novo para cada uma faria todas divergirem na
 * primeira mudança. O que esta folha tem de próprio são as opções em pastilha e
 * o cartão de tarefa. */

.tarefas {
  display: grid;
  gap: var(--esp-6);
  align-content: start;
  /* A coluna de conteúdo tem teto: um formulário de campos curtos esticado por
   * um monitor de 27" vira etiquetas separadas dos campos por meio metro de
   * branco. */
  max-width: 1100px;
  margin-inline: auto;
}

.tarefas-topo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
  align-items: baseline;
  justify-content: space-between;
}

/* Link de navegação com corpo de controle: 44px de altura mínima valem para
 * qualquer alvo de clique, e um link não recebe isso da regra de `button` de
 * `base.css`. A classe `alvo` no HTML já garante a altura; aqui vem o resto. */
.tarefas-voltar {
  display: inline-flex;
  align-items: center;
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--painel);
  color: var(--realce);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Hover e foco compartilham o tratamento: nenhuma afordância existe só no
 * hover. O sublinhado volta no hover porque um link sem sublinhado precisa de
 * *alguma* confirmação de que é link, e a cor sozinha não pode ser a única. */
.tarefas-voltar:hover,
.tarefas-voltar:focus-visible {
  border-color: var(--realce);
  box-shadow: var(--elevacao-interativo);
  text-decoration: underline;
}

/* Região viva dos recados. Vazia, ela some visualmente mas CONTINUA
 * renderizada: uma região viva que nasce com `display: none` não é observada
 * pelo leitor de tela, e o recado que aparecesse depois passaria em silêncio. */
.tarefas-recado:empty {
  padding: 0;
  background: none;
  border: 0;
}

.tarefas-recado {
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--painel-fundo);
  color: var(--texto);
}

.tarefas-painel {
  display: grid;
  gap: var(--esp-6);
  /* O formulário e a lista lado a lado enquanto couberem. O `min()` é o que
   * impede o `minmax` de virar o piso que estoura a tela em 360px. */
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  /* Sem isto, um item de grid tem largura mínima igual à do conteúdo, e o nome
   * mais longo de uma tarefa empurraria a coluna inteira para fora da tela — a
   * rolagem apareceria no corpo da página, que é o que esta folha promete não
   * acontecer. */
  min-width: 0;
}

.tarefas-secao {
  display: grid;
  gap: var(--esp-4);
  align-content: start;
  min-width: 0;
  padding: clamp(var(--esp-4), 3vw, var(--esp-5));
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--elevacao-repouso);
}

/* ───────────────────────────────────── o formulário */

.tarefas-form {
  display: grid;
  gap: var(--esp-5);
}

.tarefas-campo {
  display: grid;
  gap: var(--esp-1);
  align-content: start;
  min-width: 0;
}

.tarefas-campo label {
  color: var(--texto);
}

/* `input` NÃO está na regra de 44px de `base.css`, que cobre `button`, `select`
 * e os `input` de botão. É aqui que o campo de texto ganha a altura mínima de
 * alvo de clique. */
.tarefas-entrada {
  min-height: 44px;
  width: 100%;
  padding: var(--esp-2) var(--esp-3);
  background: var(--painel);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  /* 16px é o piso que impede o iOS de dar zoom sozinho ao focar o campo — e um
   * zoom que a pessoa não pediu desfaz o enquadramento da tela inteira. */
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 120ms ease;
}

.tarefas-entrada:hover,
.tarefas-entrada:focus-visible {
  border-color: var(--realce);
}

.tarefas-dica {
  color: var(--suave);
}

/* Os quatro grupos de opção. O `fieldset` vem com borda e recuo próprios do
 * navegador, que brigariam com o cartão da seção; zerados aqui, o que fica é a
 * `legend` fazendo o papel de etiqueta do grupo — que é por ela ser `legend`, e
 * não pelo desenho. */
.tarefas-grupo {
  display: grid;
  gap: var(--esp-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.tarefas-grupo legend {
  /* `float` nenhum e `padding` nenhum: a `legend` aqui é só o rótulo do grupo,
   * empilhado acima das opções. O `padding-block-end` é o respiro que o `gap` do
   * grid não dá a ela, porque uma `legend` não é item do grid do próprio
   * `fieldset`. */
  padding: 0 0 var(--esp-2);
  color: var(--texto);
}

/* As opções em fila que quebra de linha, sem breakpoint. */
.tarefas-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  min-width: 0;
}

/* Cada opção é uma pastilha com o controle nativo dentro. **O rádio e a caixa
 * continuam visíveis de propósito**: são eles que dizem o que está escolhido
 * para quem não distingue a diferença de cor da borda — o estado nunca é
 * comunicado só por cor. A moldura em --realce é reforço, e não a informação. */
.tarefas-opcao {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 44px;
  padding: var(--esp-2) var(--esp-3);
  background: var(--painel-fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  color: var(--texto);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.tarefas-opcao:hover {
  border-color: var(--realce);
}

/* O foco do teclado mora no controle nativo, e o anel dele é o de `base.css`.
 * Esta regra só faz a pastilha inteira acompanhar, para que o alvo de 44px e o
 * indicador de foco sejam a mesma coisa aos olhos de quem navega por Tab. */
.tarefas-opcao:has(input:focus-visible) {
  border-color: var(--realce);
  box-shadow: var(--elevacao-interativo);
}

.tarefas-opcao:has(input:checked) {
  border-color: var(--realce);
  background: var(--realce-suave);
}

.tarefas-opcao-nome {
  font-size: 16px;
  line-height: 1.4;
}

/* A amostra da cor. Redonda e pequena: ela acompanha o nome escrito ao lado, e
 * não o substitui. A borda existe para que a amostra continue visível quando a
 * cor for próxima do fundo do tema. */
.tarefas-amostra {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: none;
  border: 1px solid var(--borda);
  border-radius: var(--raio-full);
  background: var(--cor-tarefa, var(--painel));
}

/* A grade dos vinte e quatro ícones. Pastilhas menores, porque o emoji já é a
 * informação inteira e o nome dele vive em `.so-leitor`. */
.tarefas-opcoes-icone .tarefas-opcao {
  padding: var(--esp-2);
}

.tarefas-icone {
  font-size: 20px;
  line-height: 1.2;
}

/* Ação principal da tela: preenchido em --realce, como o botão de cada
 * formulário das outras telas do pai. */
.tarefas-botao {
  justify-self: start;
  min-height: 44px;
  padding: var(--esp-3) var(--esp-5);
  background: var(--realce);
  /* --sobre-realce, e não branco fixo: no escuro o --realce clareia e o branco
   * cairia para 2,77:1. O token acompanha o tema. */
  color: var(--sobre-realce);
  border: 1px solid var(--realce);
  border-radius: var(--raio-sm);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  transition: box-shadow 120ms ease, filter 120ms ease;
}

.tarefas-botao:hover,
.tarefas-botao:focus-visible {
  box-shadow: var(--elevacao-interativo);
  filter: brightness(1.08);
}

.tarefas-botao:active {
  filter: brightness(0.94);
}

/* Desabilitado durante o envio. Sem realce, porque não há ação — e sem
 * `cursor: not-allowed`, que lê como "você errou" para quem só está esperando o
 * servidor responder. */
.tarefas-botao:disabled {
  background: var(--painel-fundo);
  color: var(--suave);
  border-color: var(--borda);
  cursor: default;
}

.tarefas-botao:disabled:hover,
.tarefas-botao:disabled:focus-visible {
  box-shadow: none;
  filter: none;
}

/* ───────────────────────────────────── a lista */

.tarefas-lista {
  display: grid;
  gap: var(--esp-3);
  min-width: 0;
  /* A marcação é `ul` porque as tarefas são itens do mesmo conjunto — é isso que
   * faz o leitor de tela anunciar quantas são. O marcador some porque o cartão
   * já delimita cada item para o olho. */
  list-style: none;
}

/* O cartão de tarefa, com a faixa lateral de 4px na cor da tarefa. A cor vem da
 * propriedade que `tarefas.js` põe no elemento a partir do nome gravado; o
 * `--borda` de reserva vive dentro do `var()` que o JavaScript escreve; o
 * `var(--cor-tarefa, …)` daqui só responde por elemento que ele não alcançou. */
.tarefas-item {
  display: grid;
  gap: var(--esp-1);
  min-width: 0;
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borda);
  border-inline-start: 4px solid var(--cor-tarefa, var(--borda));
  border-radius: var(--raio-md);
  background: var(--painel-fundo);
}

.tarefas-item-nome {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  min-width: 0;
  color: var(--texto);
}

.tarefas-item-icone {
  font-size: 20px;
  line-height: 1.2;
  flex: none;
}

.tarefas-item-descricao {
  color: var(--texto);
}

.tarefas-item-linha {
  color: var(--suave);
}

/* O rótulo de cada linha do rodapé do cartão. Peso, e não cor: a linha inteira
 * já é texto suave, e um segundo tom aqui seria hierarquia demais para duas
 * palavras. */
.tarefas-item-rotulo {
  font-weight: 600;
}

/* Vazio é fato, e não erro: sem ilustração, sem sugestão de ação e sem a cor de
 * alerta que faria a ausência de tarefa parecer um problema. */
.tarefas-vazio {
  color: var(--suave);
}