/* Tela Meu dia.
 *
 * 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, e a terceira contando com
 * `tarefas.css`, que já recusou a mesma tentação.
 *
 * Sem @media de largura, como o resto do sistema: um layout fluido só. A lista é
 * uma coluna em qualquer largura — não há segunda coluna para reflowar, e
 * inventar uma grade de cartões faria a lista de hoje parecer um catálogo em vez
 * de uma sequência do que há para fazer.
 *
 * O topo, o recado e o cartão de seção espelham `tarefas.css` e `cadastros.css`
 * de propósito, com o prefixo trocado: as telas do sistema têm o mesmo
 * vocabulário visual, e inventar um novo para cada uma faria todas divergirem na
 * primeira mudança. Esta é a primeira tela do **aluno**, e o desenho dela ser o
 * mesmo é a decisão: nada aqui é infantilizado, porque a microcópia e o layout
 * do produto já falam com ele em segunda pessoa sem mudar de registro. */

.meu-dia {
  display: grid;
  gap: var(--esp-6);
  align-content: start;
  /* A coluna de conteúdo tem teto: uma lista de cartões esticada por um monitor
   * de 27" põe metro e meio de branco entre o emoji e o nome. */
  max-width: 760px;
  margin-inline: auto;
}

.meu-dia-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. */
.meu-dia-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. */
.meu-dia-voltar:hover,
.meu-dia-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. */
.meu-dia-recado:empty {
  padding: 0;
  background: none;
  border: 0;
}

.meu-dia-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);
}

.meu-dia-painel {
  display: grid;
  gap: var(--esp-6);
  /* 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;
}

.meu-dia-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);
}

/* ─────────────────────────── a navegação por data */

/* A data no meio, uma seta de cada lado. `flex` com `wrap`, e não uma grade de
 * três colunas: numa grade as setas ficam presas às bordas e a data espremida no
 * meio; aqui ela cresce para ocupar o que sobra e, quando nem isso basta, a
 * linha quebra — sem @media, como o resto do sistema.
 *
 * Quebrando, quem desce é o último item, isto é, a seta de avançar sozinha — e
 * não "as setas", como esta prosa dizia. O `justify-content: center` existe para
 * ela descer **centrada**, e não encostada na margem esquerda debaixo da seta de
 * voltar, que é o arranjo em que as duas parecem uma coluna de dois botões e o
 * lado para onde cada uma aponta deixa de ser óbvio. Na linha inteira ele não
 * tem efeito nenhum: a data cresce e ocupa o espaço livre, então não sobra folga
 * para distribuir.
 *
 * A ordem visual é a ordem do documento (anterior, data, seguinte), então a
 * navegação por Tab passa pelas setas na mesma sequência em que o olho as vê. É
 * o que dispensa qualquer `tabindex`, que a regra 3 de
 * `test/separacao-de-papeis.test.js` proíbe em positivo de todo jeito. */
.meu-dia-navegacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2) var(--esp-3);
  min-width: 0;
}

/* A data por extenso, título da seção. Ela cresce para o meio da barra e pode
 * encolher: `flex: 1 1 12ch` dá a ela a preferência pelo espaço livre e uma base
 * pequena o bastante para "quinta-feira, 28 de fevereiro de 2028" caber numa
 * tela de 360px quebrando em duas linhas, em vez de empurrar a seta para fora.
 *
 * `min-width: 0` porque um item de flex não encolhe abaixo do conteúdo sem isso,
 * e o corpo da página nunca rola horizontalmente — é promessa do layout inteiro.
 *
 * O `font-variant-numeric: tabular-nums` que esta regra tinha até a 2.3 saiu
 * junto com o `AAAA-MM-DD`: algarismos tabulares existem para colunas de números
 * não dançarem de largura, e o que está aqui agora é uma frase, com uma ou duas
 * casas de dia no meio de trinta letras. */
.meu-dia-data {
  flex: 1 1 12ch;
  min-width: 0;
  text-align: center;
  color: var(--texto);
}

/* As setas, no molde exato de `.meu-dia-voltar`: pílula com borda, fundo de
 * painel e texto em realce. Os 44px de altura vêm da regra de `button` em
 * `base.css` — um `button` os recebe de graça, e é por isso que aqui não há
 * `min-height` repetido. `flex: none` para a seta não encolher quando a data for
 * longa: um alvo de toque que muda de tamanho com o texto ao lado é um alvo que
 * um dia fica menor que o mínimo. */
.meu-dia-seta {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: 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-size: 20px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Hover e foco compartilham o tratamento, como em `.meu-dia-voltar`: nenhuma
 * afordância existe só no hover. O anel de foco de verdade continua sendo o de
 * `base.css`, e nada aqui o toca — isto é reforço. O `:not(:disabled)` no hover
 * existe para a seta desabilitada não fingir que responde ao mouse; no foco ele
 * não é preciso, porque botão desabilitado não recebe foco. */
.meu-dia-seta:hover:not(:disabled),
.meu-dia-seta:focus-visible {
  border-color: var(--realce);
  box-shadow: var(--elevacao-interativo);
}

/* Em hoje, a seta de avançar fica desabilitada: não se passa de hoje, e quem
 * decide isso é o `seguinte: null` que o servidor mandou. O estado é marcado por
 * texto suave e borda apagada — isto é, pela perda de todo o desenho de controle
 * —, e não por cor de alerta: não há erro nenhum em estar no dia de hoje. O
 * atributo `disabled` é o que informa de verdade, porque é ele que o leitor de
 * tela anuncia e é ele que tira o botão da ordem de tabulação.
 *
 * Sem `cursor: not-allowed`, pelo mesmo motivo que `tarefas.css` e
 * `parametros.css` já escrevem: o cursor de proibido lê como "você errou". */
.meu-dia-seta:disabled {
  border-color: transparent;
  color: var(--suave);
  cursor: default;
}

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

.meu-dia-lista {
  display: grid;
  gap: var(--esp-3);
  min-width: 0;
  /* A marcação é `ul` porque as tarefas de hoje são itens do mesmo conjunto — é
   * isso que faz o leitor de tela anunciar quantas são antes da primeira. 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 `meu-dia.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.
 *
 * `border-inline-start`, e não `border-left`: a faixa acompanha a direção da
 * escrita, e é a mesma propriedade que `tarefas.css` usa no cartão do pai — os
 * dois cartões são a mesma coisa vista de dois lados, e desenhá-los diferente
 * faria o pai e o filho falarem de objetos que parecem distintos. */
.meu-dia-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);
}

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

/* O cabeçalho do cartão é um `button` desde a 2.5: ele abre e fecha o lado de
 * dentro, e um botão de verdade traz de graça a ordem de tabulação, o Enter, o
 * Espaço e o anúncio de controle que um `div` com ouvinte teria de imitar à mão.
 *
 * O que esta regra faz é desfazer a aparência de botão, e só ela: fundo
 * transparente, sem borda, texto alinhado ao começo da linha e largura inteira.
 * O cartão já é a superfície; um segundo retângulo desenhado dentro dele faria a
 * lista parecer uma pilha de formulários. A afordância que fica é a do cursor, a
 * do sublinhado no hover e — a que informa de verdade — o `aria-expanded`, que é
 * o que o leitor de tela anuncia e o que muda quando se clica.
 *
 * `min-height` não é repetido aqui: `base.css` já dá 44px a todo `button`, e o
 * cabeçalho tem duas linhas de texto na maioria dos cartões. `text-align: start`
 * e não `left` pela mesma razão do `border-inline-start` da faixa — a folha
 * acompanha a direção da escrita.
 *
 * O anel de foco continua sendo o de `base.css`, e nada aqui o toca. */
/* Sem `font` e sem `cursor` aqui de propósito. `base.css` já dá `font: inherit`
 * e `cursor: pointer` a todo `button`, na especificidade de **elemento** — e é
 * justamente essa a diferença que importa: repetir `font: inherit` numa classe
 * ganha de `.subtitulo`, que o cartão carrega no mesmo elemento, e o nome da
 * tarefa perderia o peso 600 que o distingue da contagem ao lado. A regra que
 * "só normaliza" era a que apagava a hierarquia tipográfica do cartão. */
.meu-dia-item-cabecalho {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: start;
}

/* Hover e foco compartilham o tratamento, como em `.meu-dia-voltar` e nas setas:
 * nenhuma afordância existe só no hover. O sublinhado é o reforço, e o anel de
 * `base.css` é a informação. */
.meu-dia-item-cabecalho:hover,
.meu-dia-item-cabecalho:focus-visible {
  text-decoration: underline;
}

/* Quantos anexos o cartão tem. Empurrada para o fim da linha porque ela é
 * resposta, e não título: o olho procura o nome à esquerda e confirma a contagem
 * à direita. `flex: none` para não encolher quando o nome for longo, e
 * `--suave` porque ela é secundária ao nome — o contraste do token continua em
 * AA, que é o piso do épico.
 *
 * Ela fica **dentro** do botão de propósito: assim entra no nome acessível dele,
 * e quem navega por leitor de tela ouve a contagem sem precisar abrir o cartão.
 * Vazia, ela não ocupa nada, e é por isso que não há regra de `:empty` aqui. */
.meu-dia-item-contagem {
  margin-inline-start: auto;
  flex: none;
  color: var(--suave);
  font-size: 14px;
  font-weight: 400;
}

/* O emoji. Maior que o corpo do texto porque ele é o reconhecimento de relance,
 * e `flex: none` para não encolher quando o nome for longo. */
.meu-dia-item-icone {
  font-size: 20px;
  line-height: 1.2;
  flex: none;
}

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

/* ─────────────────────────── o estado e a ação do cartão */

/* O cartão feito, marcado por **atributo** e não por classe.
 *
 * É o precedente de `[aria-pressed="true"]` no botão de ditar, lá embaixo, e pelo
 * mesmo motivo: quem escreve o estado escreve um valor, e não gerencia uma lista
 * de classes que precisa lembrar de tirar a anterior. `meu-dia.js` faz
 * `item.dataset.estado = tarefa.status` na criação e na repintura, e o seletor
 * responde sozinho.
 *
 * **A cor não é a informação, é o reforço.** Quem diz que a tarefa está feita é a
 * linha de texto logo abaixo — o ✓ e a frase do motivo —, e essa linha existe
 * justamente para o estado sobreviver ao monocromático, ao daltonismo e ao modo
 * de alto contraste. É o piso que o épico trava para todo estado desta tela.
 *
 * `--certo-suave` é `#DFF6E9` no claro e `#0E2E1E` no escuro, e nos dois o texto
 * é `--texto`: no escuro o par mede 12,81:1, medido em `tokens.css`. A faixa
 * lateral da tarefa continua sendo a cor dela — o estado troca a superfície, e
 * não a identidade do cartão. */
.meu-dia-item[data-estado="feita"] {
  background: var(--certo-suave);
}

/* O cartão perdoado. **A terceira posição do `data-estado`, e a 2.11 é quem a
 * trouxe.**
 *
 * Perdoada não é feita nem pendente: ela é derivada da existência de um perdão ativo
 * e chega no campo `estado`, montado por `estadoDoCartao` em
 * `servidor/dominio/fechamento.js`. `dia_tarefa.status` continua valendo `pendente`
 * ou `feita` e não sabe nada disso — é por isso que esta regra tem um valor novo sem
 * que nenhuma coluna tenha mudado de vocabulário, e é por isso que `meu-dia.js`
 * passou a escrever `item.dataset.estado = tarefa.estado` em vez de `tarefa.status`.
 *
 * **O cartão perdoado não leva ✓**, e a linha de estado o diz por escrito: "O pai
 * perdoou esta tarefa." A marca de verificação afirma "isto foi feito", e o perdão
 * afirma o contrário disso — a tarefa não foi feita, e deixou de pesar. Quem
 * comunica o estado aqui é a frase, com a cor só reforçando (UX-DR8).
 *
 * `--perdao-suave` é `#FEF1DC` no claro e `#33260C` no escuro. A linha de estado usa
 * `--suave` sobre ele, e o par foi **medido** nos dois temas: claro `#5B6486` sobre
 * `#FEF1DC` = 5,21:1; escuro `#98A0BF` sobre `#33260C` = 5,70:1. Os dois acima do
 * 4,5:1 de AA para texto pequeno, então a linha continua em `--suave`. O motivo do
 * pai, logo abaixo dela, é `--texto` sobre a mesma superfície — 15,47:1 no claro e
 * 12,85:1 no escuro. A faixa lateral continua sendo a cor da tarefa: o estado troca a
 * superfície, e não a identidade do cartão. */
.meu-dia-item[data-estado="perdoada"] {
  background: var(--perdao-suave);
}

/* O motivo que o pai escreveu, visível no cartão **fechado** e fora do detalhe.
 *
 * **É a decisão de desenho que esta história toma contra duas previsões escritas.**
 * `publico/js/meu-dia.js` anotou na 2.6 e na 2.8 que o perdão entraria no bloco do
 * detalhe, junto de comentário e justificativa. A previsão estava errada, e os dois
 * comentários foram corrigidos por escrito. Comentário e justificativa são texto que
 * o **aluno** escreveu e pode reler; o motivo do perdão é a explicação de por que a
 * pendência dele deixou de pesar, ele é obrigatório justamente para ser lido
 * (UX-DR26), e o que exige um clique para aparecer não é visível. Ele fica ao lado da
 * linha de estado, como a justificativa já fica no painel do pai.
 *
 * `--texto` e não `--suave`: ele é o conteúdo, e não o rótulo dele. `pre-line` porque
 * a quebra de linha que o pai digitou é dele, e reproduzi-la por marcação montada em
 * JavaScript seria, por um caminho lateral, o que o `textContent` existe para não
 * fazer. `overflow-wrap` porque texto ditado chega com palavras longas sem espaço. */
.meu-dia-item-perdao {
  min-width: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  color: var(--texto);
}

/* A linha de estado: o ✓ e a frase do motivo.
 *
 * `--suave` no texto porque ela é secundária ao nome da tarefa. Os pares medidos são
 * os que a tela de fato renderiza, e não o do resto do cartão: esta linha nasce
 * `hidden` no cartão pendente e só aparece nos outros dois estados, isto é, **sempre
 * sobre `--certo-suave` ou sobre `--perdao-suave`**. No claro, `#5B6486` sobre
 * `#DFF6E9` dá 5,13:1 e sobre `#FEF1DC` dá 5,21:1; no escuro, `#98A0BF` sobre
 * `#0E2E1E` dá 5,69:1 e sobre `#33260C` dá 5,70:1 — os quatro acima do 4,5:1 de AA,
 * que é o piso do épico. Medir contra `--painel-fundo`, que é o fundo do cartão
 * pendente, seria medir o par que ninguém vê. `overflow-wrap` porque a frase
 * é curta hoje e o cartão promete 360px sem rolagem horizontal em qualquer frase
 * que o Épico 4 acrescente.
 *
 * Escondida, ela não ocupa nada: `base.css` faz `[hidden] { display: none
 * !important }`, e é ele que ganha do `display: flex` desta classe — é a mesma
 * razão pela qual o `detalhe` pode nascer `hidden` sendo um `grid`. */
.meu-dia-item-estado {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  min-width: 0;
  color: var(--suave);
  overflow-wrap: anywhere;
}

/* O ✓, na cor de correção. `flex: none` para ele não encolher quando a frase for
 * longa, e é a única coisa desta linha que muda de cor: o texto ao lado fica em
 * `--suave` porque é ele que carrega a informação e precisa ser lido, não
 * notado. */
.meu-dia-item-marca {
  flex: none;
  color: var(--certo);
  font-weight: 600;
}

/* A fila da ação. Uma só, e continua sendo uma: a 2.8 veio e **não** pôs botão aqui
 * — o de salvar justificativa vive dentro do `detalhe`, junto do campo que ele
 * salva, como o de comentário —, e a 2.11 veio e **também não**. Aquele parágrafo
 * previa o perdão como o próximo candidato a esta fila; a previsão estava errada, e
 * a razão é a única que importa nesta tela: **quem perdoa é o pai**, e o botão dele
 * mora no painel. Aqui o perdão é só leitura — a superfície âmbar, a frase de estado
 * e o motivo escrito.
 *
 * **E num cartão perdoado esta fila simplesmente não existe**, porque
 * `publico/js/meu-dia.js` não monta `montarAcao` nele. Não há regra de folha
 * escondendo botão nenhum, e a assimetria com a área da justificativa (que **é**
 * escondida por folha, quarenta linhas abaixo) é deliberada: ali o elemento existe e
 * some porque `mudarFechamento` vira o `data-estado` sem redesenhar; aqui o cartão
 * perdoado só chega por uma leitura nova, e o que não deve existir é melhor não ser
 * criado. O argumento inteiro — o aluno finalizaria uma tarefa perdoada, a tela
 * escreveria `feita` sobre um cartão que a próxima leitura devolve como `perdoada`, e
 * a tela discordaria de si mesma — está no docblock de `montarCartao`.
 *
 * `flex-wrap` porque numa tela de 360px um segundo botão desce em vez de empurrar o
 * primeiro para fora.
 *
 * `justify-content: start` (que é o padrão do flex, e por isso não está escrito)
 * mais `flex: none` no botão fazem o botão ter a largura do texto dele: um botão
 * da largura do cartão lê como barra de ação, e não como "eu fiz isto". É a mesma
 * decisão, com as mesmas palavras, do `justify-items: start` do bloco de
 * comentário. */
.meu-dia-item-acao {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-3);
  min-width: 0;
  margin-block-start: var(--esp-1);
}

/* O botão de finalizar: a **forma** do molde primário de `.meu-dia-envio-botao`
 * — as mesmas medidas, o mesmo raio, o mesmo peso, o mesmo par hover/foco — na
 * **cor própria** que UX-DR11 exige, e não no índigo de ação.
 *
 * `_bmad-output/planning-artifacts/epics.md:201` escreve a regra pelo nome
 * ("Botão **Finalizado** com cor própria — verde `certo`, **não** índigo de
 * ação") e `:361` a mapeia a esta história. O motivo é de hierarquia, e não de
 * gosto: `--realce` é a cor de "Salvar comentário" e de "Anexar", os dois botões
 * secundários deste mesmo cartão. Pintar com ela o gesto que o produto inteiro
 * existe para receber faz o botão principal desaparecer entre os secundários —
 * três controles da mesma cor, e nenhum deles parecendo o que a tela pede. Em
 * verde ele é o único assim na folha, e a cor já é a do estado que o clique
 * produz: o ✓ da linha de estado usa `--certo`, e o botão anuncia para onde o
 * cartão vai.
 *
 * `--sobre-certo` no texto, e não branco fixo, pela razão que `tokens.css`
 * escreve no próprio token: no escuro `--certo` clareia para #4ADE80 e branco
 * sobre ele mede 1,74:1. O par do token mede 5,48:1 no claro e 9,93:1 no escuro.
 *
 * Ele é o botão primário do cartão enquanto a tarefa está pendente, e é o certo:
 * finalizar é a ação que a tela existe para receber, e ela compete com "Salvar
 * comentário" e "Anexar" — que estão atrás de um clique de expandir, e portanto
 * nunca aparecem ao mesmo tempo que este. */
.meu-dia-item-acao-botao {
  flex: none;
  padding: var(--esp-2) var(--esp-4);
  background: var(--certo);
  color: var(--sobre-certo);
  border: 1px solid var(--certo);
  border-radius: var(--raio-sm);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: box-shadow 120ms ease, filter 120ms ease;
}

/* Feito o cartão, o botão vira secundário — o molde de `.meu-dia-ditar`, com
 * superfície neutra.
 *
 * **Não é enfeite: é o que diz que a ação principal já aconteceu.** Um
 * "Desfinalizado" preenchido em realce dentro de um cartão verde-suave
 * disputaria a atenção com o estado que ele acabou de produzir, e num dia de oito
 * cartões feitos a lista inteira ficaria pedindo para ser clicada. Desfazer
 * continua a um toque, com o mesmo alvo de 44px que `base.css` dá a todo
 * `button`; o que muda é o peso visual.
 *
 * O hover e o foco são herdados das regras abaixo: elas mexem só em `box-shadow`
 * e `filter`, então a superfície neutra desta regra sobrevive ao ponteiro. O que
 * elas **não** entregam aqui é retorno de ponteiro visível: sobre `--painel`, o
 * `brightness(1.08)` não tem para onde ir no claro (já é branco) e
 * `--elevacao-interativo` é `none` no escuro. Quem carrega o estado de foco é o
 * anel de `base.css`, que é o que a acessibilidade cobra; hover é enfeite, e
 * enfeite que falta não é afordância perdida.
 *
 * **A borda é `--certo`, e não `--borda`.** Este é o único botão da folha que
 * fica em cima de uma superfície colorida, e `--borda` (#DDE1EE) sobre
 * `--certo-suave` (#DFF6E9) dá 1,15:1 — o contorno do controle some, e a WCAG
 * 1.4.11 pede 3:1 para o limite de um componente. `--certo` é a cor que o próprio
 * ✓ já usa dois nós acima, então o contorno não introduz vocabulário novo: ele
 * amarra o botão ao estado que o cartão está anunciando, e é legível nos dois
 * temas (#0B7A45 sobre #DFF6E9 no claro, #4ADE80 sobre #0E2E1E no escuro). */
.meu-dia-item[data-estado="feita"] .meu-dia-item-acao-botao {
  background: var(--painel);
  color: var(--texto);
  border-color: var(--certo);
}

/* Hover e foco compartilham o tratamento: nenhuma afordância existe só no hover.
 * O anel de foco de `base.css` continua por cima, e não é substituído por nada
 * daqui. É o mesmo par dos outros três botões desta folha — e, como neles, o
 * `box-shadow` é `none` no tema escuro por decisão de `tokens.css:158`: o que
 * responde ao ponteiro lá é o `filter`, e o que responde ao teclado é o anel. */
.meu-dia-item-acao-botao:hover:not(:disabled),
.meu-dia-item-acao-botao:focus-visible {
  box-shadow: var(--elevacao-interativo);
  filter: brightness(1.08);
}

/* Desabilitado enquanto o pedido sobe. 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. É a mesma escolha, com as mesmas palavras, de
 * `.meu-dia-envio-botao:disabled` e de `.meu-dia-comentario-botao:disabled`.
 *
 * **O seletor carrega o `.meu-dia-item` de propósito, e não é enfeite.** Sem ele
 * a regra teria uma classe e um pseudo (0,2,0) e perderia para
 * `.meu-dia-item[data-estado="feita"] .meu-dia-item-acao-botao` (0,3,0), que está
 * escrita acima: o botão do cartão **feito** ficaria com a superfície de painel
 * enquanto o pedido sobe, isto é, com aparência de botão vivo em cima de um
 * controle que não aceita clique. Com o ancestral, as duas regras empatam em
 * especificidade e esta, que vem depois, ganha — que é justamente a armadilha que
 * o par de `[aria-pressed="true"]` lá embaixo documenta pelo outro lado. */
.meu-dia-item .meu-dia-item-acao-botao:disabled {
  background: var(--painel-fundo);
  color: var(--suave);
  border-color: var(--borda);
  cursor: default;
  box-shadow: none;
  filter: none;
}

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

/* ─────────────────────────────── o lado de dentro do cartão */

/* O bloco que o cabeçalho abre. Ele nasce `hidden`, e quem o esconde é a regra
 * `[hidden] { display: none !important }` de `base.css` — escrita lá justamente
 * porque um `display: grid` de classe atropelaria o padrão do navegador e
 * deixaria na tela um elemento "escondido".
 *
 * A linha acima separa o de dentro do de fora sem uma segunda superfície: um
 * painel com fundo próprio dentro de um cartão que já tem fundo próprio é a
 * caixa dentro da caixa que faz uma lista de tarefas parecer um formulário
 * aninhado. `border-block-start`, e não `border-top`, pela mesma razão do
 * `border-inline-start` da faixa. */
.meu-dia-item-detalhe {
  display: grid;
  gap: var(--esp-3);
  min-width: 0;
  margin-block-start: var(--esp-2);
  padding-block-start: var(--esp-3);
  border-block-start: 1px solid var(--borda);
}

/* A lista de anexos. `ul` porque os anexos de uma tarefa são itens do mesmo
 * conjunto — é isso que faz o leitor de tela anunciar quantos são antes do
 * primeiro —, e o marcador some porque a lista é curta e o cartão já a delimita.
 * Vazia, ela não ocupa espaço nenhum, e é por isso que a frase de "nada anexado"
 * é um parágrafo ao lado e não um item dentro dela: um `li` de aviso entraria na
 * contagem que o leitor de tela anuncia. */
.meu-dia-anexos {
  display: grid;
  gap: var(--esp-2);
  min-width: 0;
  list-style: none;
}

/* Cada anexo é um link com corpo de alvo de toque: 44px valem para qualquer
 * alvo de clique, e um link não recebe isso da regra de `button` de `base.css`.
 * `word-break` porque nome de arquivo vem de câmera e de aplicativo de mensagem,
 * e chega com trinta caracteres sem espaço nenhum — sem ele, o cartão empurraria
 * a coluna inteira para fora da tela e o corpo da página rolaria na horizontal,
 * que é o que este layout promete não fazer. */
.meu-dia-anexo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 0;
  color: var(--realce);
  overflow-wrap: anywhere;
}

/* Hover e foco compartilham o tratamento: nenhuma afordância existe só no
 * hover. Aqui o sublinhado é o repouso — é um link dentro de um bloco de texto,
 * e sem ele a cor sozinha teria de dizer que é clicável, que é justamente o que
 * o épico proíbe. */
.meu-dia-anexo:hover,
.meu-dia-anexo:focus-visible {
  text-decoration: underline;
}

/* "Nada anexado ainda." e a frase do dia que nunca foi aberto. As duas são fato,
 * e não erro: sem cor de alerta, pelo mesmo motivo de `.meu-dia-vazio`. */
.meu-dia-anexos-vazio {
  color: var(--suave);
}

/* O campo de arquivo e o botão, lado a lado enquanto couberem. `flex-wrap`
 * porque o nome do arquivo escolhido aparece dentro do próprio campo e pode ser
 * longo: numa tela de 360px o botão desce para a linha de baixo em vez de
 * empurrar o campo para fora. */
.meu-dia-envio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  min-width: 0;
}

/* **O alvo de toque de 44px desta linha é o rótulo, e não o campo.**
 *
 * `base.css` não alcança `input[type="file"]`: a regra de alvo de clique daquela
 * folha enumera `button`, `[role="button"]`, os três `input` de botão, `select` e
 * `.alvo`. Mas pôr o piso no campo também não resolve, e vale escrever por quê:
 * `min-height` estica a **caixa** do campo, e não o botão "Escolher arquivo" que
 * o navegador desenha dentro dela — aquele botão vive no shadow DOM, mantém a
 * altura intrínseca dele e, no Chrome e no Safari, é o único ponto do campo que
 * abre o seletor. Prometer 44px ali é prometer o que o CSS não entrega.
 *
 * Um `<label for>` de campo de arquivo **abre o seletor** quando clicado, em todo
 * navegador — então o alvo grande é ele, e aí a promessa é de fato entregue.
 * `display: flex` mais `align-items: center` porque um rótulo com `min-height` e
 * nada mais deixaria o texto encostado no topo dos 44px, e o alinhamento da
 * linha é o que faz o alvo maior não parecer um erro de layout. */
.meu-dia-envio-rotulo {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--texto);
  cursor: pointer;
}

/* A caixa do campo acompanha a altura do rótulo ao lado — uma caixa mais baixa
 * desalinharia a linha —, mas o piso aqui é moldura, e não alvo de toque: quem
 * garante os 44px de área ativável é o rótulo acima.
 *
 * `flex: 1 1 16ch` dá ao campo a preferência pelo espaço livre com uma base
 * pequena o bastante para ele caber ao lado do botão numa tela estreita, e
 * `min-width: 0` porque um item de flex não encolhe abaixo do conteúdo sem
 * isso — e o conteúdo aqui é um nome de arquivo que a pessoa não escolheu ter
 * longo. */
.meu-dia-envio-campo {
  flex: 1 1 16ch;
  min-width: 0;
  min-height: 44px;
  padding: var(--esp-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--painel);
  color: var(--texto);
  font: inherit;
}

/* O botão de anexar, no molde do botão de ação de `tarefas.css`: preenchido em
 * --realce, com `--sobre-realce` no texto porque no tema escuro o realce clareia
 * e um branco fixo cairia abaixo do contraste AA. */
.meu-dia-envio-botao {
  flex: none;
  padding: var(--esp-2) var(--esp-4);
  background: var(--realce);
  color: var(--sobre-realce);
  border: 1px solid var(--realce);
  border-radius: var(--raio-sm);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: box-shadow 120ms ease, filter 120ms ease;
}

.meu-dia-envio-botao:hover:not(:disabled),
.meu-dia-envio-botao:focus-visible {
  box-shadow: var(--elevacao-interativo);
  filter: brightness(1.08);
}

/* 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. É a mesma escolha, com as mesmas palavras, de
 * `tarefas.css`, de `parametros.css` e da seta desabilitada acima. */
.meu-dia-envio-botao:disabled {
  background: var(--painel-fundo);
  color: var(--suave);
  border-color: var(--borda);
  cursor: default;
  box-shadow: none;
  filter: none;
}

/* ─────────────────────────────── os comentários do cartão */

/* A lista de comentários. `ul` porque os comentários de uma tarefa são itens do
 * mesmo conjunto — é isso que faz o leitor de tela anunciar quantos são antes do
 * primeiro —, e o marcador some porque a lista é curta e o cartão já a delimita.
 * Vazia, ela não ocupa espaço nenhum, e é por isso que "Nada comentado ainda." é
 * um parágrafo ao lado e não um item dentro dela: um `li` de aviso entraria na
 * contagem que o leitor anuncia. É a mesma decisão, e o mesmo desenho, da lista
 * de anexos acima. */
.meu-dia-comentarios {
  display: grid;
  gap: var(--esp-2);
  min-width: 0;
  list-style: none;
}

/* Cada comentário é texto de gente, e as duas declarações abaixo são o que o
 * mantém legível.
 *
 * `white-space: pre-line` porque a quebra de linha é permitida no comentário de
 * propósito — comentário ditado vem em frases, e o campo é `textarea`. Sem ela o
 * `\n` gravado colapsa em espaço na renderização, e "Fiz a página 1." seguido de
 * "A 2 ficou pela metade." vira uma linha só: o dado continua certo no banco e a
 * tela mente sobre ele. `pre-line` e não `pre` porque só a quebra escrita conta —
 * `pre` preservaria também a indentação que uma colagem trouxer e devolveria a
 * rolagem horizontal que a linha de baixo existe para impedir.
 *
 * `overflow-wrap: anywhere` porque uma palavra sem espaço — um endereço colado,
 * uma sequência de teclado — não pode empurrar o cartão para fora da tela. O
 * reset de `base.css` já cobre `li`, e a repetição aqui é deliberada: a regra de
 * lá é sobre elementos de texto em geral, e esta é a promessa de 360px deste
 * cartão, que precisa continuar valendo se aquele seletor mudar.
 *
 * **A justificativa entra nesta lista, e não numa regra própria** (2.8). Ela é o
 * mesmo tipo de coisa: texto que o aluno escreveu no mesmo cartão, no mesmo campo
 * multilinha, com as mesmas duas necessidades — a quebra de linha preservada por
 * folha e a palavra sem espaço que não pode empurrar o cartão para fora da tela.
 * Uma segunda cópia destas três declarações seria a que fica para trás no dia em
 * que alguém trocar `pre-line` por outra coisa em uma delas, e o sintoma seria a
 * quebra de linha sumindo num dos dois textos e não no outro. É o precedente da
 * lista de seletores que a regra de hover dos botões, lá embaixo, já usa. */
.meu-dia-comentario,
.meu-dia-justificativa {
  min-width: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* "Nada comentado ainda." e "Nada justificado ainda." são fato, e não erro: sem
 * cor de alerta, pelo mesmo motivo de `.meu-dia-vazio` e de
 * `.meu-dia-anexos-vazio`. As duas frases dizem a mesma coisa sobre dois blocos
 * irmãos do mesmo cartão, e por isso compartilham o bloco em vez de o copiarem. */
.meu-dia-comentarios-vazio,
.meu-dia-justificativa-vazio {
  color: var(--suave);
}

/* ─────────────────────────────── a justificativa do cartão */

/* A área inteira da justificativa: a frase do vazio, o texto guardado e o bloco
 * de escrever.
 *
 * Ela existe como contêiner por duas razões, e as duas são estruturais. A
 * primeira é o espaçamento: o `detalhe` é grid com `gap: var(--esp-3)`, que é o
 * respiro **entre** os blocos do cartão; as três peças de dentro desta área são um
 * bloco só e precisam do próprio espaçamento, mais curto. A segunda é a regra logo
 * abaixo, que esconde a área inteira quando a tarefa fecha — com um nó, é um
 * seletor; sem ele, seriam três que têm de concordar para sempre. */
.meu-dia-justificativa-area {
  display: grid;
  gap: var(--esp-2);
  min-width: 0;
}

/* **A regra que cumpre a terceira AC da 2.8: a justificativa some do cartão
 * feito.**
 *
 * Ela está pendurada no mesmo atributo de `.meu-dia-item[data-estado="feita"]` lá
 * em cima e do botão de ação — o interruptor que `publico/js/meu-dia.js` já vira
 * numa linha ao finalizar.
 *
 * **É a folha que esconde, e não o JavaScript, e a razão é o caminho que não
 * redesenha.** `mudarFechamento` (em `meu-dia.js`) é o único lugar que muda
 * `tarefa.status` **sem** reconstruir a lista: ele repinta à mão o `data-estado`,
 * a linha de estado e o rótulo do botão. Cada coisa nova que dependesse do status
 * viraria mais uma linha de repintura ali, e a que faltasse produziria um cartão
 * meio atualizado — aqui, uma justificativa continuando à vista num cartão que já
 * anuncia "Feita", até a próxima recarga. Pendurar a visibilidade no atributo que
 * aquele código já escreve faz o estado ter **um** interruptor em vez de dois que
 * podem discordar. É o mesmo argumento que a 2.7 usou para escolher `data-estado`
 * em vez de uma classe.
 *
 * **E `display: none`, e não `visibility: hidden` nem `opacity: 0`.** A AC diz
 * "some", e não "fica apagado": o conteúdo tem de sair também da árvore de
 * acessibilidade, senão quem navega por leitor de tela continua ouvindo a
 * justificativa e o campo de escrevê-la dentro de um cartão que, para todos os
 * outros, não os tem. `visibility` e `opacity` deixam os controles focáveis ou
 * anunciáveis, que é a forma de a promessa valer só para quem enxerga.
 *
 * **O que ela esconde é a tela do aluno, e mais nada.** O dado continua saindo de
 * `GET /api/alunos/:id/dia` em qualquer status — é a mesma resposta que o painel do
 * pai lê, e a metade "continua visível no painel do meu pai" da AC depende disso.
 * Quem cobra que ninguém resolva o esconde-esconde no servidor é a regra 12 de
 * `test/separacao-de-papeis.test.js`; quem cobra que esta regra continue existindo
 * é a ponte folha↔estado de `test/servidor.test.js`, que busca esta folha servida.
 *
 * O texto **não** é apagado do banco junto: reabrir o cartão devolve a
 * justificativa intacta, porque ela nunca saiu de lugar nenhum.
 *
 * **A área da justificativa fica visível no cartão perdoado, e a 2.11 decidiu isso
 * por escrito.** As duas coisas são as duas metades da mesma conversa: a
 * justificativa é a voz do aluno dizendo o que não deu, e o motivo do perdão é a
 * resposta do pai a ela. Escondê-la ali apagaria a metade que explica a outra, e o
 * cartão passaria a mostrar a decisão sem a alegação. O argumento de esconder no
 * cartão feito não se transporta: lá a justificativa deixou de descrever o estado
 * ("não deu" numa tarefa que deu), e num cartão perdoado **pendente** ela continua
 * descrevendo exatamente o que aconteceu.
 *
 * **Mas o seletor pende de `data-status`, e não de `data-estado`, e é a mudança que
 * faz as duas frases acima valerem juntas.** Escrito `[data-estado="feita"]`, ele
 * deixava de valer no cartão `feita` **e** perdoada — a combinação que
 * `estadoDoCartao` admite de propósito, e que nasce da corrida entre o filho
 * finalizando e o pai perdoando: ali `data-estado` vale `"perdoada"`, a regra não
 * disparava, e o cartão voltava a exibir "Por que não deu para fazer?" sobre uma
 * tarefa que o próprio aluno marcou como feita. É exatamente a incoerência que esta
 * regra existe para impedir, reaparecida pela porta do terceiro estado. `data-status`
 * é o **fato gravado** (`pendente` ou `feita`), e é dele que esta pergunta depende:
 * uma tarefa que deu continua tendo dado depois de perdoada.
 *
 * A troca não custa o interruptor único do parágrafo acima: `publico/js/meu-dia.js`
 * escreve os dois atributos lado a lado, nos mesmos dois lugares — a montagem do
 * cartão e a repintura de `mudarFechamento` —, e o comentário de lá diz que eles
 * andam juntos.
 *
 * O que some do cartão perdoado é **outra coisa**: a fila de ação, e não por folha —
 * `publico/js/meu-dia.js` não monta o botão. O parágrafo de `.meu-dia-item-acao`
 * conta por quê. */
.meu-dia-item[data-status="feita"] .meu-dia-justificativa-area {
  display: none;
}

/* O bloco de escrever: rótulo, campo e os dois botões.
 *
 * `grid` e não `flex` como o bloco de envio, porque aqui o campo ocupa a linha
 * inteira: um `textarea` de três linhas ao lado de um botão deixaria os dois
 * estreitos numa tela de 360px, que é justamente onde o comentário é escrito. Os
 * botões vêm depois, e `justify-items: start` é o que os impede de esticar de
 * ponta a ponta da coluna — um botão da largura do cartão lê como barra de ação,
 * e não como "salvar o que eu escrevi".
 *
 * O bloco da justificativa (2.8) é o mesmo molde e entra na mesma lista: rótulo em
 * cima, campo ocupando a linha e um botão que não estica. Copiar as quatro
 * declarações para uma regra própria seria a segunda cópia de um desenho que não
 * tem razão nenhuma para divergir — e a que divergiria seria a de baixo, na
 * primeira vez que alguém ajustasse o `gap` de uma delas. */
.meu-dia-comentario-bloco,
.meu-dia-justificativa-bloco {
  display: grid;
  gap: var(--esp-2);
  justify-items: start;
  min-width: 0;
}

/* Os rótulos visíveis dos dois campos. São `<label for>` de verdade — o texto que
 * o leitor de tela anuncia é o mesmo que a pessoa lê, e clicar neles põe o cursor
 * no campo. */
.meu-dia-comentario-rotulo,
.meu-dia-justificativa-rotulo {
  color: var(--texto);
  cursor: pointer;
}

/* Os dois campos de texto do cartão — o do comentário e o da justificativa (2.8).
 *
 * Uma lista de seletores, e não duas regras: são o mesmo `textarea` de três linhas
 * no mesmo bloco, com as mesmas onze declarações, e a segunda cópia seria a que
 * fica para trás no primeiro ajuste de moldura. O argumento do piso de 44px, do
 * `width: 100%` e do `resize: vertical` vale igual para os dois.
 *
 * **O piso de 44px é escrito aqui porque a regra de `base.css` não alcança
 * `textarea`**: aquela lista enumera `button`, `[role="button"]`, os três `input`
 * de botão, `select` e `.alvo`. Um `textarea` de três linhas já passa disso com
 * folga na prática, e mesmo assim o piso fica: `rows` é sugestão que um
 * `font-size` menor ou um zoom de sistema encolhem, e o alvo de toque é promessa
 * do épico, não consequência de uma altura de linha.
 *
 * `width: 100%` mais `box-sizing` herdado do reset porque o campo é a linha
 * inteira do bloco, e `min-width: 0` porque um item de grid não encolhe abaixo do
 * conteúdo sem isso — o conteúdo aqui é uma palavra que a pessoa não escolheu ter
 * longa.
 *
 * `resize: vertical` e não `both`: quem escreve um comentário longo quer mais
 * altura, e arrastar a largura para fora do cartão devolveria a rolagem
 * horizontal que este layout promete não ter. */
.meu-dia-comentario-campo,
.meu-dia-justificativa-campo {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: var(--esp-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--painel);
  color: var(--texto);
  font: inherit;
  resize: vertical;
}

/* Desabilitado enquanto o comentário sobe, no mesmo tratamento dos dois botões
 * lá embaixo. Sem esta regra o campo ficava com a aparência exata de um campo
 * vivo — `background` e `color` estão escritos acima, e escrevê-los é o que
 * desliga o cinza que o navegador daria de graça —, de modo que a pessoa
 * continuava digitando e via cada tecla ser recusada sem nada dizer por quê. Um
 * campo que não aceita escrita precisa parecer um campo que não aceita escrita.
 * `cursor: default` e não `not-allowed` pela mesma razão do botão: ela não
 * errou, está esperando. */
.meu-dia-comentario-campo:disabled,
.meu-dia-justificativa-campo:disabled {
  background: var(--painel-fundo);
  color: var(--suave);
  cursor: default;
}

/* Os dois botões, no molde de `.meu-dia-envio-botao`. O de salvar é preenchido em
 * --realce, com `--sobre-realce` no texto porque no tema escuro o realce clareia
 * e um branco fixo cairia abaixo do contraste AA. */
.meu-dia-comentario-botao,
.meu-dia-justificativa-botao {
  padding: var(--esp-2) var(--esp-4);
  background: var(--realce);
  color: var(--sobre-realce);
  border: 1px solid var(--realce);
  border-radius: var(--raio-sm);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: box-shadow 120ms ease, filter 120ms ease;
}

/* O de ditar é secundário: mesma forma e mesmo alvo, superfície neutra. Dois
 * botões preenchidos lado a lado disputariam a ação principal, e a principal aqui
 * é salvar — ditar é uma das duas formas de encher o campo, e a outra (o teclado)
 * não tem botão nenhum. Ele só existe onde o navegador tem reconhecimento de
 * fala; `publico/js/meu-dia.js` não o cria nos outros. */
.meu-dia-ditar {
  padding: var(--esp-2) var(--esp-4);
  background: var(--painel);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: box-shadow 120ms ease, filter 120ms ease;
}

/* Hover e foco compartilham o tratamento, nos dois botões: nenhuma afordância
 * existe só no hover. O anel de foco de `base.css` continua por cima, e não é
 * substituído por nada daqui. */
.meu-dia-comentario-botao:hover:not(:disabled),
.meu-dia-comentario-botao:focus-visible,
.meu-dia-justificativa-botao:hover:not(:disabled),
.meu-dia-justificativa-botao:focus-visible,
.meu-dia-ditar:hover:not(:disabled),
.meu-dia-ditar:focus-visible {
  box-shadow: var(--elevacao-interativo);
  filter: brightness(1.08);
}

/* O microfone ligado. **O estado não é comunicado só por cor**: além da
 * superfície de realce, a borda muda de espessura por dentro (`inset`), de modo
 * que "está ouvindo" continua visível em monocromático e para quem não distingue
 * os matizes. É o piso que o épico trava para todo estado desta tela. */
.meu-dia-ditar[aria-pressed="true"] {
  background: var(--realce);
  color: var(--sobre-realce);
  border-color: var(--realce);
  box-shadow: inset 0 0 0 2px var(--sobre-realce);
}

/* O anel de dentro sobrevive ao hover e ao foco. Não é repetição: a regra de
 * hover acima é `.classe:hover:not(:disabled)`, mais específica do que
 * `.classe[aria-pressed]`, e por isso ganharia dela mesmo estando escrita antes
 * — e o `box-shadow` dela vale `none` no tema escuro (`tokens.css`), onde
 * `--elevacao-interativo` é `none`. O resultado seria o estado "ouvindo"
 * comunicado só pela cor no exato gesto em que a pessoa está com o ponteiro em
 * cima, que em tela de toque é o estado que fica grudado depois do toque. */
.meu-dia-ditar[aria-pressed="true"]:hover:not(:disabled),
.meu-dia-ditar[aria-pressed="true"]:focus-visible {
  box-shadow: inset 0 0 0 2px var(--sobre-realce);
}

/* O microfone desabilitado enquanto o comentário sobe, no mesmo tratamento — e
 * com as mesmas palavras — de `.meu-dia-comentario-botao:disabled`. */
.meu-dia-ditar:disabled {
  background: var(--painel-fundo);
  color: var(--suave);
  border-color: var(--borda);
  box-shadow: none;
  cursor: default;
  filter: none;
}

/* Desabilitado durante o salvamento. 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. É a mesma escolha, com as mesmas palavras, de
 * `.meu-dia-envio-botao:disabled`. */
.meu-dia-comentario-botao:disabled,
.meu-dia-justificativa-botao:disabled {
  background: var(--painel-fundo);
  color: var(--suave);
  border-color: var(--borda);
  cursor: default;
  box-shadow: none;
  filter: none;
}