:root {
  --txt-muted-on-surface: light-dark(oklch(45% 0.015 145), oklch(76% 0.006 145));
  --link-on-surface: light-dark(oklch(from oklch(var(--lch-accent)) min(l, 0.45) c h), oklch(var(--lch-accent)));
  --positive-on-surface: light-dark(oklch(from oklch(var(--lch-primary)) min(l, 0.45) c h), oklch(var(--lch-primary)));
  --negative-on-surface: light-dark(oklch(from oklch(var(--lch-red)) min(l, 0.45) c h), oklch(var(--lch-red)));
  --alert-on-surface: light-dark(oklch(from oklch(var(--lch-orange)) min(l, 0.47) min(c, 0.15) h), oklch(var(--lch-orange)));
}

/* Acessibilidade do modulo de Tarefas: contraste sobre o cartao, alvos de toque e controles que so
   apareciam com o mouse. Mora num arquivo proprio, carregado logo depois do tasks.css (a lista e em
   ordem alfabetica), para que estas regras vençam as de la sem reescreve-las uma a uma. */

/* ---------------------------------------------------------------- contraste (WCAG 1.4.3) ---- */

/* O fundo do cartao e mais escuro que a pagina, e o cinza de apoio e as cores de estado, pensados
   para a pagina, caiam para perto de 3:1 em cima dele: dono, idade, etapa, pilulas, passos, rodape,
   prazo perto e vencido. Dentro do cartao (e das colunas e grupos em volta dele) esses tokens passam
   a apontar para a versao "sobre superficie", que no claro escurece e no escuro fica igual. */
.task-card,
.task-comments,
.task-column,
#tasks_list_groups,
.task-view-groups,
.task-perma__back,
#tasks_completed_wrapper,
#tasks_completed_bar {
  --txt-muted: var(--txt-muted-on-surface);
  --color-link: var(--link-on-surface);
  --color-positive: var(--positive-on-surface);
  --color-negative: var(--negative-on-surface);
  --color-alert: var(--alert-on-surface);
}

/* A letra sobre a cor do cartao (faixa de origem, etapa atual). A view manda --card-ink, escolhida
   pela luminancia de cada cor da paleta; sem origem a faixa e a cor do link, que muda por conta e
   por tema, e a escolha e feita aqui pela claridade dela: escura acima de 62%, branca abaixo. */
.task-card {
  --card-ink-auto: oklch(from var(--card-color) clamp(0, (0.62 - l) * 1000, 1) 0 0);
}

.task-card__origin,
.task-card__stage-name--current,
.task-card__stage-name--current:hover,
span.task-card__stage-name--current:hover {
  color: var(--card-ink, var(--card-ink-auto));
}

.task-card__stage-name--done.task-card__stage-name--current {
  color: oklch(from var(--color-positive) clamp(0, (0.62 - l) * 1000, 1) 0 0);
}

/* O numero da tarefa, a hora do comentario e a do historico eram esmaecidos por opacidade em cima
   de uma cor que ja era a mais fraca: "#80" chegava a 2:1. A hierarquia fica no tamanho e no peso. */
.task-card__number,
.task-comment__when,
.task-history__when {
  opacity: 1;
}

/* -------------------------------------------------------- alvos de toque (WCAG 2.5.5/2.5.8) ---- */

/* No toque, cada controle miudo ganha uma area invisivel de 44px em volta, sem mudar o desenho: um
   pseudo-elemento centrado no botao, que conta como parte dele para o dedo. Campos e seletores nao
   tem pseudo-elemento; neles a area cresce por padding e volta pelo margin negativo, e como o fundo
   e transparente nada muda na tela. */
@media (pointer: coarse) {
  .task-card .task-card__agenda,
  .task-card__due,
  .task-link-add,
  .task-step__check,
  .task-step__remove,
  .task-comment__action,
  .task-reaction,
  .task-history__summary,
  .task-date-trigger,
  .task-chip,
  .task-perma__back,
  button.task-comments__send,
  [data-tasks-form-target="dateSelectedState"],
  [data-tasks-form-target="todayBtn"],
  [data-tasks-form-target="tomorrowBtn"],
  .task-card__stage-name,
  .task-carousel__dot {
    position: relative;
  }

  .task-card .task-card__agenda::after,
  .task-card__due::after,
  .task-link-add::after,
  .task-step__check::after,
  .task-step__remove::after,
  .task-history__summary::after,
  .task-date-trigger::after,
  .task-chip::after,
  .task-perma__back::after,
  button.task-comments__send::after,
  [data-tasks-form-target="dateSelectedState"]::after,
  [data-tasks-form-target="todayBtn"]::after,
  [data-tasks-form-target="tomorrowBtn"]::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: max(100%, 44px);
    block-size: max(100%, 44px);
    transform: translate(-50%, -50%);
  }

  /* Etapas e reacoes ficam lado a lado, em linhas que quebram: com 44px cada uma cobriria a vizinha
     e o toque na borda iria para a outra. Aqui a area cresce ate a metade do vao entre elas na
     largura e ate 44px de altura, e a ordem de pintura faz a de baixo ganhar so a sobra. */
  .task-card__stage-name::after,
  .task-reaction::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: calc(100% + 0.3rem);
    block-size: max(100%, 44px);
    transform: translate(-50%, -50%);
  }

  .task-comment__actions {
    gap: 0.75rem;
  }

  .task-comment__action {
    inline-size: 2rem;
    block-size: 2rem;
  }

  .task-comment__action::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: calc(100% + 0.75rem);
    block-size: max(100%, 44px);
    transform: translate(-50%, -50%);
  }

  /* Os pontos do carrossel sao de 6px com 6px de vao: nenhuma area de 44px cabe sem cobrir o
     vizinho. O vao abre para 18px so no toque, e cada ponto fica com 24px de largura e 44 de altura. */
  .task-carousel__dots {
    gap: 1.125rem;
  }

  .task-carousel__dot::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: calc(100% + 1.125rem);
    block-size: 44px;
    transform: translate(-50%, -50%);
  }

  /* Os seletores invisiveis de "Repassar" (cartao) e "+ quem acompanha" ja cobrem a pilula:
     passam a vazar por cima e por baixo dela ate somar 44px. */
  .task-card__handover select {
    inset: calc((100% - 44px) / 2) 0;
    block-size: max(100%, 44px);
  }

  .task-watchers__add select {
    inset: 50% auto auto 50%;
    inline-size: 44px;
    block-size: 44px;
    transform: translate(-50%, -50%);
  }

  .task-picker select.task-inline-select,
  input.task-tags__new,
  input.task-steps__new,
  .task-steps__new input {
    padding-block: 12px;
    margin-block: -12px;
  }
}

/* ------------------------------------------------ controles que so apareciam com o mouse ---- */

/* Editar e apagar a fala, apagar um passo e reagir a um comentario apareciam quando o mouse
   passava por cima. No celular nao ha mouse: ficavam invisiveis e so se achavam por acaso. */
@media (hover: none) {
  .task-comment__action,
  .task-step__remove,
  .task-comment .task-reactions:not(:has(.task-reaction:not(.task-reaction--add))) {
    opacity: 1;
  }
}

/* ------------------------------------------------------------- estrutura das telas ---- */

/* Os grupos de Hoje, Todas e Acompanhando: o titulo do grupo e h2 (os cartoes tem h3), e os
   cartoes de cada grupo formam uma lista. A lista nao desenha nada. */
.task-view-group__title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--txt-muted);
}

.task-view-group__title--overdue {
  color: var(--color-negative);
}

.task-view-group__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A tarefa que sai do grupo (concluida, repassada) deixa o li vazio para tras. */
.task-view-group__items > li:not(:has(*)) {
  display: none;
}

/* Na lista, o subtitulo da etapa passou a ser h2; o h2 nao pode trazer margem nem tamanho proprios. */
h2.task-column__stage {
  margin: 0;
  font-size: 0.65rem;
}

/* A caixa de Minhas preferencias. O base.css zera a aparencia de todo input; sem isto ela some. */
input[type="checkbox"].task-check {
  appearance: auto;
  accent-color: var(--accent);
  inline-size: 1.05rem;
  block-size: 1.05rem;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

/* O titulo do balao da agenda: diz de qual tarefa e a data, para quem olha e para quem ouve. */
.task-agenda-pop h2.task-agenda-pop__heading {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--txt);
  overflow-wrap: anywhere;
}

/* !important para vencer o style="outline:none" inline desses botoes. */
:is([data-controller~="tasks-sidebar"], [data-controller~="tasks-form"], .task-card, .task-agenda-pop)
  :is(button, a[href], summary, select, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--ds-focus-ring) !important;
  outline-offset: 0 !important;
}

:is([data-controller~="tasks-form"], .task-agenda-pop) [data-datetime-picker-target="calendar"][tabindex]:focus-visible {
  outline: none !important;
}

[data-datetime-picker-target="calendar"]:focus-visible .air-datepicker-cell.-focus- {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: -2px;
}

.tasks-icon-button:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 0;
}