/* Agenda — o que sobrou da tabela: a aba das faltas. A lista dos marcados
   deixou de ser <table> e virou a lista por dia de dias.css; aqui ficam a
   margem do dia, as colunas e a justificativa que a aba das faltas ainda usa,
   na mesma <table> da fila (cabeçalho de verdade, colunas alinhadas,
   agrupamento por <tbody>).

   As larguras são fixas de propósito: a tabela troca de busca sem recarregar a
   folha, e largura fixa é o que faz as colunas continuarem alinhadas. */

/* A data mora na margem, não em cima da lista — é o que faz a tela ler como
   livro de agenda. Quase encosta na borda da folha, e o rótulo da coluna vai
   com ela. */
.agenda .cel-dia { width: 132px; padding-left: 12px; border-right: 1px solid var(--line); }

/* A tipografia é só da célula da lista: no cabeçalho, "Dia" continua sendo
   rótulo de coluna como todos os outros. O desenho é o da margem da lista
   por dia (.dia-cab em dias.css): rótulo mono em cima, a data "19/10"
   embaixo, e hoje só com a tinta cheia. */
.agenda tbody .cel-dia {
  vertical-align: top; padding: 14px 12px; text-align: left;
  font-family: var(--mono); font-weight: 400; letter-spacing: 0; text-transform: none;

  & .dw {
    display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
    line-height: 1.4; color: var(--ink-faint);
  }

  & .dn {
    display: block; margin-top: 2px;
    font-family: var(--sans); font-size: 20px; font-weight: 700;
    line-height: 1.1; letter-spacing: -.02em; color: var(--ink-muted);
  }

  &.hoje .dn { color: var(--ink); }
}

/* O realce do ponteiro é da linha, não do dia: o grupo aqui é um dia inteiro,
   e quem aponta uma delas está trabalhando aquele exame daquela pessoa — não
   as oito horas em volta. E acende pela ação, não pela passagem: quando o
   ponteiro chega no botão é que há decisão. Quem responde é o :has nativo. */
.agenda tbody tr:has(.cel-acao a:hover) td {
  background: color-mix(in oklab, var(--surface-2) 50%, var(--surface));
}

/* a divisa entre dias cruza a margem também */
.agenda tbody:not(:first-of-type) > tr:first-child > .cel-dia {
  border-top: 1px solid var(--line-strong);
}

.agenda .cel-nome { width: 188px; }

.agenda .cel-clinica { width: 158px; }

.cnome { font-size: 13.5px; display: block; }

.cprot {
  font-family: var(--mono); font-size: 12px; color: var(--ink-faint);
  display: block; margin-top: 3px;
}

/* o telefone é link porque o trabalho desta tela é ligar */
.pfone:is(a):hover { color: var(--accent); }

/* A ação, colada à direita e sem quebra. */
.agenda .cel-acao {
  width: 235px; text-align: right; vertical-align: middle;
  white-space: nowrap;

  & .bmarcar + .bmarcar { margin-left: 6px; }
}

/* Faltas: a justificativa é prosa e fica com a largura que sobra; a ação é a
   saída de volta para a fila. */
.agenda--faltas .cel-why { width: auto; text-align: left; }

.why { font-size: 12.5px; color: var(--ink-muted); font-style: italic; }

/* O mesmo texto, agora escrevível: sem moldura no repouso, moldura leve
   quando o ponteiro chega e azul quando o foco entra — de resto é a linha
   italicizada de sempre, para a tabela não virar um formulário. */
.why:is(textarea) {
  width: 100%; font-family: inherit; border: 0; background: transparent;
  border-radius: var(--r); padding: 3px 6px; margin: -3px -6px;
  resize: none; overflow: hidden;

  /* quebra linha como o texto que era, e cresce com o que se escreve — onde
     o field-sizing ainda não chegou, fica a linha única do rows="1". */
  field-sizing: content;

  &:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }

  &:focus {
    outline: 0; font-style: normal; color: var(--ink);
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent);
  }
}

/* contagem de resultados da busca da agenda */
.agenda-hits {
  font-family: var(--mono); font-size: 12px; letter-spacing: .05em;
  color: var(--ink-faint); margin: 0 0 18px;
}

/* Comparecimento — a justificativa e a remarcação só existem depois de "não
   compareceu". A conta é do :has nativo: esta tela não tem JavaScript. */
.attendance .quando-falta { display: none; }

.attendance:has(.cards input[value="no"]:checked) .quando-falta { display: block; }