/* A seta do select e desenhada como imagem de fundo encostada na direita, com cerca de 20px.
   Esta e a medida do chao dela: sem esse chao, ela cai em cima das ultimas letras e risca a
   palavra — foi assim que "Repassar para..." apareceu riscado por semanas. */
:root {
  --seta-do-select: 24px;
}

/* Tres colunas cabem na tela e a quarta aparece cortada na borda: o quadro se le como quadro,
   e a fatia visivel diz que ha mais para o lado. As setas continuam para quem prefere navegar. */
.task-board {
  --task-column-width: min(31%, 24rem);
  /* A tira recolhida inteira e o botao: nunca abaixo de 44px, o minimo de alvo de toque. */
  --task-column-collapsed-width: max(44px, 2.75rem);
  /* O carrossel mede as colunas pelo offsetLeft; sem posicao aqui a medida vinha do carrossel,
     de fora da faixa rolavel, e deixava de bater com o scrollLeft. */
  position: relative;
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
}

.task-board .task-column {
  flex: 0 0 var(--task-column-width);
  scroll-snap-align: start;
  min-height: 65vh;
}

@media (max-width: 64rem) {
  .task-board { --task-column-width: min(46%, 22rem); }
}

@media (max-width: 40rem) {
  .task-board { --task-column-width: 85%; }
}

/* Coluna recolhida: uma tira com a contagem e o titulo na vertical, como no Fizzy. Nao some por
   inteiro, porque coluna escondida sem rastro faz a pessoa achar que perdeu tarefa. */
.task-board .task-column {
  transition: background-color 150ms ease, box-shadow 150ms ease, flex-basis 180ms ease;
}

.task-board .task-column.task-column--collapsed {
  flex-basis: var(--task-column-collapsed-width);
  min-width: var(--task-column-collapsed-width);
}

.task-column--collapsed .task-column__cards {
  display: none;
}

/* Na primeira aplicacao do estado lembrado a coluna ja nasce recolhida: com transicao, a tela
   abria e fechava na cara de quem acabou de chegar. */
.task-columns--no-transitions .task-column {
  transition: none;
}

.task-column__header {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

/* O cabecalho virou botao, e o reset global (fora de @layer) e o :where(button) de base.css dao a
   ele fonte herdada, fundo transparente e o anel de hover. Tudo aqui e explicito para o botao se
   parecer com o titulo que ele era. */
.task-column__toggle {
  --hover-size: 0;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: max(44px, 2.75rem);
  margin: 0;
  padding: 0.75rem 0.75rem 0.5rem;
  border: 0;
  border-radius: 1rem 1rem 0 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.task-column__title {
  min-width: 0;
}

.task-column__toggle-icon {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--txt-muted);
  opacity: 0;
  transition: opacity 120ms ease;
}

.task-column__toggle:hover .task-column__toggle-icon,
.task-column__toggle:focus-visible .task-column__toggle-icon {
  opacity: 1;
}

/* Sem mouse nao ha hover: a seta fica sempre a vista para dizer que o titulo recolhe. */
@media (hover: none) {
  .task-column__toggle-icon { opacity: 0.6; }
}

.task-column__toggle:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: -2px;
}

/* O topo da tira e o mesmo da coluna aberta ao lado (0.75rem), entao a contagem da tira fica na
   linha das contagens das colunas abertas. */
.task-column--collapsed .task-column__toggle {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-radius: 1rem;
}

.task-column--collapsed .task-column__header {
  display: flex;
  flex: 1;
}

.task-column--collapsed .task-column__title {
  writing-mode: vertical-rl;
  max-block-size: 50vh;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.task-column--collapsed .task-column__toggle-icon,
.task-column--collapsed .task-column__you {
  display: none;
}

/* Na tira a contagem vai para o topo, e a marca da coluna (o rosto da pessoa, o selo de Feito)
   logo abaixo. A contagem e a mesma pilula das colunas abertas: havia uma barrinha atras dela que
   crescia com o numero de cartoes, e com um cartao so ela virava uma pilula esticada e torta,
   encostada no titulo. */
.task-column--collapsed .task-column__toggle .avatar,
.task-column--collapsed .task-column__fixed-mark {
  order: -1;
}

.task-column--collapsed .task-column__count {
  order: -2;
}

/* O total da pessoa so na tira: aberta, a coluna conta por etapa nos subtitulos. */
.task-column__count--strip {
  display: none;
}

.task-column--collapsed .task-column__count--strip {
  display: inline;
}

.task-column--collapsed .task-column__toggle:hover {
  background: color-mix(in oklch, var(--surface) 70%, var(--bg-pure));
}

.task-carousel {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Faixa das setas: uma linha propria acima das colunas, grudada no alto da area que rola. Com
   altura de verdade, e nao pendurada por cima das colunas, nada dela cai em cima de cartao: o
   quadro comeca abaixo dela. O fundo e opaco porque, rolando para baixo, os cartoes passam por
   tras dela como por baixo de qualquer cabecalho fixo.
   A margem negativa com o mesmo recuo por dentro faz a faixa ir de borda a borda da area que rola
   (que tem px-6 e py-4): sem isso sobrava uma fresta de 1rem no alto por onde os cartoes
   apareciam por cima da faixa. O top negativo e pelo mesmo motivo: o sticky mede a partir do
   recuo da area, e com top 0 a faixa grudava 1rem abaixo do alto, com cartoes passando na fresta. */
.task-carousel__rail {
  position: sticky;
  top: -1rem;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  margin: -1rem -1.5rem 0.5rem;
  padding: 0.75rem 1.5rem 0.5rem;
  /* O mesmo fundo do painel (bg-bg do Tailwind): --bg-pure e branco puro e destoava no claro. */
  background: var(--color-lch-white);
}

/* Sem para onde ir, a faixa nao ocupa espaco: tres colunas que cabem na tela nao precisam dela. */
.task-carousel__rail:has(> .task-carousel__nav--prev[hidden]):has(> .task-carousel__nav--next[hidden]) {
  display: none;
}

.task-carousel__nav {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.125rem;
  border-radius: 999px;
}

.task-carousel__nav--prev { grid-column: 1; justify-self: start; }
.task-carousel__nav--next { grid-column: 3; justify-self: end; }

.task-carousel__nav-label {
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--txt-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Com um cartao por cima, a seta acende como a coluna que vai recebe-lo. */
.task-carousel__nav.task-column--over {
  background: color-mix(in oklch, var(--color-link) 8%, var(--bg-pure));
  box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--color-link) 60%, transparent);
}

.task-carousel__nav.task-column--over .task-carousel__nav-label,
.task-carousel__nav.task-column--over .task-carousel__arrow {
  border-color: var(--color-link);
  color: var(--txt);
}

.task-carousel__arrow {
  --hover-size: 0;
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--surface) 85%, var(--bg-pure));
  color: var(--txt-muted);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

.task-carousel__arrow:hover {
  color: var(--txt);
  border-color: var(--border-strong);
}

/* Trocar de visão troca o conteúdo do turbo-frame sem recarregar a página: por um instante a tela
   fica parada, parecendo travada. A barra diz que algo está a caminho sem empurrar o layout. */
body:has(#module_pane[busy])::after {
  content: "";
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  height: 2px;
  z-index: 9998;
  background: linear-gradient(90deg, transparent, var(--color-link), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: task-loading-sweep 900ms ease-in-out infinite;
}

@keyframes task-loading-sweep {
  0% { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#module_pane[busy])::after { animation: none; background-size: 100% 100%; opacity: 0.6; }
}

.task-carousel__dots {
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
}

.task-carousel__dot {
  --hover-size: 0;
  width: 0.4rem;
  height: 0.4rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
  transition: background-color 120ms ease, width 120ms ease;
}

.task-carousel__dot[aria-current="true"] {
  width: 1.1rem;
  background: var(--color-link);
}

.task-item-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
}

/* Sem borda: a coluna se separa das vizinhas pelo fundo e pelo espaco entre elas. O traco em
   volta de cada uma, somado ao dos cartoes, fazia o quadro parecer uma grade de caixas.
   A mistura e com --bg-pure porque --bg nao existe no tema: misturar com ele invalidava a regra
   inteira, a coluna ficava transparente, e quem a desenhava era so a borda. */
.task-column {
  display: flex;
  flex-direction: column;
  min-height: 24rem;
  border-radius: 1rem;
  background: color-mix(in oklch, var(--surface) 60%, var(--bg-pure));
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

/* Com um cartao por cima, a coluna que vai recebe-lo se acende. O anel e por dentro para nao
   empurrar nada do lugar. */
.task-column--over {
  background: color-mix(in oklch, var(--color-link) 8%, var(--bg-pure));
  box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--color-link) 60%, transparent);
}

.task-column__count {
  font-size: 0.75rem;
  line-height: 1.25rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--border);
  color: var(--txt-muted);
}

.task-column__cards {
  flex: 1;
}

.tasks-icon-button {
  --hover-size: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: var(--surface);
  color: var(--txt-muted);
  cursor: pointer;
  outline: none;
  box-shadow: none;
  transition: color 150ms ease, border-color 150ms ease;
}

.tasks-icon-button:hover {
  color: var(--color-text);
  border-color: var(--border-strong);
}

.tasks-new-button {
  --color-positive: var(--color-link);
  --hover-size: 0;
  height: 2.25rem;
  padding: 0 0.9rem;
  background: transparent;
  border: none;
  border-radius: 0.6rem;
  font-size: 0.85rem;
  gap: 0.4rem;
  transition: color 150ms ease;
}

.tasks-new-button:hover {
  color: oklch(from var(--color-link) calc(l + 0.1) c h);
}

.tasks-icon-button--bare {
  background: transparent;
  border-color: transparent;
}

.task-note__menu { flex-shrink: 0; }
.task-note__menu summary::-webkit-details-marker { display: none; }
.task-note__menu[open] { flex: 1 1 100%; order: 10; }

/* The colour of the tone comes in as --badge-color, and the fill is derived from it, so the pill
   itself is written once here and not per badge. */
/* The small step of the status scale, in px at every width: 20 px tall, 12 px medium, 8 px sides, 12 px icon 4 px away. */
.task-badge {
  --badge-color: var(--txt-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  block-size: var(--ds-status-height-sm);
  font-size: var(--ds-status-font-sm);
  font-weight: var(--ds-weight-medium);
  line-height: 1;
  padding: 0 8px;
  border: 1px solid var(--badge-color);
  border-radius: 999px;
  color: var(--badge-color);
  background: oklch(from var(--badge-color) l c h / 0.12);
  text-decoration: none;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.task-badge__stale {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.task-note__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  block-size: var(--ds-status-height-sm);
  font-size: var(--ds-status-font-sm);
  line-height: 1;
  color: var(--txt-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 8px;
}

/* Cartao no modelo do Fizzy: uma faixa colorida diz de onde a tarefa e, o titulo pesa,
   e o rodape resume quem cuida dela. A cor identifica a lista; prazo continua semantico na pilula. */
.task-card {
  --card-color: var(--color-link);
  --card-padding-inline: 0.75rem;
  --card-padding-block: 0.55rem;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  padding: var(--card-padding-block) var(--card-padding-inline);
  border-radius: 0.4rem;
  background: color-mix(in oklch, var(--card-color) 5%, var(--surface));
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.07), 0 0 0 1px color-mix(in oklch, var(--card-color) 16%, transparent);
  transition: box-shadow 120ms ease-out;
}

.task-card:not(.task-card--perma) {
  flex-flow: row wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
}

.task-card:not(.task-card--perma) > :is(.task-card__header, .task-card__body) {
  flex: 1 0 100%;
}

.task-card:not(.task-card--perma) > .task-card__meta {
  flex: 1 1 auto;
}

.task-card:hover {
  box-shadow: 0 2px 6px oklch(0 0 0 / 0.1), 0 0 0 1px color-mix(in oklch, var(--card-color) 34%, transparent);
}

.task-card--done {
  --card-color: var(--txt-muted);
  opacity: 0.66;
}

/* A faixa sangra ate a borda do cartao, como no Fizzy: o canto vira a etiqueta. */
.task-card__header {
  display: flex;
  align-items: center;
  gap: 0.5ch;
  min-width: 0;
  margin: calc(-1 * var(--card-padding-block)) calc(-0.5 * var(--card-padding-inline)) 0 calc(-1 * var(--card-padding-inline));
}

.task-card__origin {
  flex: 0 1 auto;
  min-width: 0;
  align-self: flex-start;
  padding: 0.15rem var(--card-padding-inline);
  border-radius: 0.4rem 0 0.4rem 0;
  background: var(--card-color);
  color: var(--bg);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-card__meta-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-origin-repeat] .task-card__header {
  display: none;
}

.task-card__body {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.task-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--txt);
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}

.task-card--done .task-card__title {
  text-decoration: line-through;
}

.task-card__description {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--txt-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.task-card__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--txt-muted);
}

button.task-card__lock {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--txt-muted);
  cursor: help;
}

button.task-card__lock:hover {
  background: var(--hover);
  color: var(--txt);
}

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

.task-card__watchers + button.task-card__lock {
  margin-inline-start: 0;
}

@media (pointer: coarse) {
  button.task-card__lock {
    inline-size: 2rem;
    block-size: 2rem;
    margin-block: -0.375rem;
  }
}

.task-card__watchers {
  display: flex;
  margin-left: auto;
  flex: 0 0 auto;
}

.task-card__watchers > * + * {
  margin-left: -0.375rem;
}

/* A fileira de acoes do cartao: as pilulas de prazo e agenda moram num elemento proprio (a
   resposta da agenda o redesenha pelo id), e aqui ele se desfaz para que o repasse entre na
   mesma fileira e quebre linha junto com elas. */
.task-card__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  min-width: 0;
}

.task-card__actions:not(:has(*)) {
  display: none;
}

.task-card__actions > .task-card__pills {
  display: contents;
}

/* O seletor cobre a pilula inteira, invisivel: clica-se em "Repassar" e o menu do sistema abre.
   Fonte de 16px para o iPhone nao dar zoom ao abrir. A regra global de select mora fora de
   @layer, por isso tudo aqui e dito por inteiro. */
.task-card .task-card__agenda.task-card__handover {
  position: relative;
  border-color: var(--border);
  color: var(--txt-muted);
}

/* Pelo teclado o foco cai no seletor invisivel: a borda da pilula e quem mostra onde ele esta. */
.task-card .task-card__agenda.task-card__handover:focus-within {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: -1px;
  color: var(--txt);
}

.task-card__handover select {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: transparent;
  font-size: 16px;
  opacity: 0;
  cursor: pointer;
}

.task-card__pills {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  min-width: 0;
}

/* A coluna de criar acompanha a altura das outras, sem borda como elas, num fundo mais fraco: e
   um lugar vago no quadro, e nao uma caixa solta encostada na ultima coluna. */
.task-board .task-column--new {
  flex: 0 0 12rem;
  background: color-mix(in oklch, var(--surface) 20%, var(--bg-pure));
  align-items: stretch;
}

.task-board .task-column--new input {
  inline-size: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 0.75rem;
  background: transparent;
  color: var(--txt-muted);
  font-size: 0.8125rem;
  transition: background-color 120ms ease, color 120ms ease;
}

.task-board .task-column--new input::placeholder {
  color: var(--txt-muted);
}

.task-board .task-column--new input:hover,
.task-board .task-column--new input:focus {
  outline: none;
  box-shadow: none;
  color: var(--txt);
  background: color-mix(in oklch, var(--surface) 70%, var(--bg-pure));
}

/* Dentro de uma coluna a etapa ja esta escrita no cabecalho: repetir no cartao e ruido. */
.task-column__cards .task-card__stage {
  display: none;
}

/* A regra global de select (inputs.css) mora fora de @layer, entao vence qualquer utilitaria
   do Tailwind: um select com text-[11px] p-0 border-none saia com 16px, 100% de largura e
   pilula em volta. Esta classe e do mesmo tipo de folha e tem especificidade maior. */
select.task-inline-select {
  inline-size: auto;
  max-inline-size: 100%;
  min-inline-size: 0;
  /* A setinha do select e desenhada como fundo, encostada na direita. Com padding
     zero ela cai em cima das ultimas letras e risca a palavra: aqui fica o lugar dela. */
  padding: 0 var(--seta-do-select) 0 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  color: var(--txt-muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

select.task-inline-select:focus,
select.task-inline-select:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Dentro da coluna de uma pessoa, a etapa vira um subtitulo: a leitura e de cima a baixo. */
.task-column__stage {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.1rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-muted);
}

.task-column__stage-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A lista vista como lista separa as tarefas em aberto por etapa, com o subtitulo de cima. Todo
   grupo esta no DOM para receber cartao por turbo_stream ou por arrasto; aqui some o vazio, menos
   a caixa de entrada, que e onde a tarefa nova cai. Enquanto se arrasta os vazios voltam, para
   haver onde soltar. Pelo :has e nao por atributo porque o cartao entra e sai sem o servidor
   redesenhar o grupo. */
.task-list-group + .task-list-group {
  margin-top: 0.75rem;
}

.task-list-group:not(.task-list-group--inbox):not(:has(.task-list-group__items > [id^="tasks_item_"])) {
  display: none;
}

.task-list-groups--dragging .task-list-group:not(.task-list-group--inbox):not(:has(.task-list-group__items > [id^="tasks_item_"])) {
  display: block;
}

.task-list-group__empty {
  display: none;
  padding: 0.5rem 0.1rem;
  font-size: 0.75rem;
  color: var(--txt-muted);
}

.task-list-group:not(:has(.task-list-group__items > [id^="tasks_item_"])) .task-list-group__empty {
  display: block;
}

/* O grupo vazio aberto so para o arrasto e uma faixa onde soltar, nao um texto solto. */
.task-list-groups--dragging .task-list-group__empty {
  border: 1px dashed color-mix(in oklch, var(--txt-muted) 45%, transparent);
  border-radius: 0.5rem;
  padding-inline: 0.6rem;
}

/* Lista sem tarefa nenhuma: a frase da caixa de entrada ja diz onde a nova vai cair, e o aviso
   grande de lista vazia repetiria a mesma coisa logo abaixo. Com tudo concluido e o contrario:
   fica o "Tudo pronto!", e a frase da caixa sai. */
#tasks-items-container:has(#tasks_list_groups) #tasks_empty_state,
#tasks-items-container:has(#tasks_all_completed_state) .task-list-group__empty {
  display: none;
}

/* O subtitulo ja diz a etapa: repetir no cartao e ruido, como na coluna do quadro. */
.task-list-group .task-card__stage {
  display: none;
}

/* A conversa da tarefa, no molde do Fizzy: o rosto de lado, a fala dentro de um balao, tudo
   numa coluna estreita e centralizada. Estreita de proposito: linha comprida cansa de ler. */
.task-comments {
  --comment-padding-block: 0.5rem;
  --comment-padding-inline: 1.1rem;
  --comment-max: 58ch;
  --comment-bg: var(--surface);

  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  /* Folga para o rosto, que avanca para fora da coluna do balao. */
  padding-inline: 0.75rem;
  margin-top: 1.25rem;
  min-width: 0;
}

.task-comments__list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.task-comment {
  position: relative;
  display: flex;
  align-items: flex-start;
  inline-size: 100%;
  max-inline-size: var(--comment-max);
  margin-inline: auto;
  min-width: 0;
}

/* O rosto encosta no balao e entra um pouco nele: sao a mesma fala, e nao duas coisas lado a lado. */
.task-comment__avatar {
  flex-shrink: 0;
  margin-top: calc(var(--comment-padding-block) * 0.75);
  margin-inline: calc(var(--comment-padding-inline) * -0.55);
  z-index: 1;
}

.task-comment__content {
  flex: 1;
  min-width: 0;
  padding: var(--comment-padding-block) calc(var(--comment-padding-inline) * 0.55)
           calc(var(--comment-padding-block) * 1.3) var(--comment-padding-inline);
  border-radius: 0.4rem;
  background: var(--comment-bg);
  overflow-wrap: break-word;
}

.task-comment__head {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
}

/* Quem falou e quando sao a mesma linha: o nome pesa, a hora so acompanha. */
.task-comment__byline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 0.4rem;
  min-width: 0;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
}

.task-comment__author {
  font-weight: 700;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-comment__when {
  font-size: 0.7rem;
  color: var(--txt-muted);
  opacity: 0.8;
}

.task-comment__actions {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Editar e apagar sao da dona da fala: ficam escondidos ate a mao passar por cima. */
.task-comment__action {
  display: grid;
  place-items: center;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--txt-muted);
  opacity: 0;
  cursor: pointer;
  --hover-size: 0;
  transition: opacity 120ms ease, color 120ms ease;
}

.task-comment:hover .task-comment__action,
.task-comment__action:focus-visible {
  opacity: 1;
}

.task-comment__action:hover {
  color: var(--txt);
}

.task-comment__body {
  margin-top: 0.1rem;
  /* Espaco reservado a direita para o botao de reagir, que flutua no canto de baixo. */
  padding-right: 1.6rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--txt);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.task-comment--new {
  align-items: flex-end;
  gap: 0.5rem;
}

.task-comment--new .task-comment__avatar {
  margin: 0 0 0.45rem;
}

.task-comments__form {
  flex: 1;
  min-width: 0;
}

.task-comments__row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  inline-size: 100%;
}

.task-comments__field {
  flex: 1;
  min-width: 0;
  max-block-size: 40vh;
  overflow-y: auto;
  padding-block: 0.1rem;
}

textarea.task-comments__input {
  inline-size: 100%;
  min-width: 0;
  min-block-size: 1.5rem;
  resize: none;
  field-sizing: content;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--txt);
  font-size: 0.85rem;
  line-height: 1.5;
}

textarea.task-comments__input:focus {
  outline: none;
  box-shadow: none;
}

.task-comments__actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-block: -0.3rem;
}

.task-comments__attach:has(input:focus-visible),
.task-comments__send:focus-visible {
  opacity: 1;
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 0;
}

.task-files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
  min-width: 0;
}

.task-files__image {
  max-block-size: 9rem;
  border-radius: 0.4rem;
}

.task-files__doc {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-inline-size: 14rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.7rem;
  color: var(--txt-muted);
  text-decoration: none;
}

.task-files__doc:hover {
  color: var(--txt);
}

/* Um cartao esticado pela largura inteira da tela deixa titulo e selo a um palmo um do outro.
   Dentro de uma coluna ele ocupa a coluna; fora dela, para de crescer onde ainda se le. */
.task-card {
  max-inline-size: 56rem;
}

.task-column__cards .task-card {
  max-inline-size: none;
}

/* Quem acompanha se le pelas caras, em fila, com um "+" redondo do mesmo tamanho no fim. */
.task-watchers {
  display: flex;
  align-items: center;
  /* O verbo vem logo depois dos rostos: sem folga, saia "AnaCarlosacompanham". */
  gap: 0.35rem;
  padding-left: 28px;
  min-width: 0;
}

.task-watchers__empty {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.4rem;
  font-size: 0.7rem;
  color: var(--txt-muted);
}

.task-watchers__face {
  margin-left: -0.375rem;
  border: 2px solid var(--bg);
  border-radius: 999px;
  transition: opacity 120ms ease;
}

.task-watchers__face:first-of-type {
  margin-left: 0;
}

.task-watchers__face:hover {
  opacity: 0.6;
}

.task-watchers__more {
  display: grid;
  place-items: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-left: -0.375rem;
  border: 2px solid var(--bg);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--txt-secondary);
}

/* O seletor cobre o botao inteiro, invisivel: clica-se no "+" e o menu do sistema abre. */
.task-watchers__add {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-left: 0.25rem;
  border: 1px dashed var(--border);
  border-radius: 999px;
  color: var(--txt-muted);
  transition: border-color 120ms ease, color 120ms ease;
}

.task-watchers__add:hover {
  border-color: var(--color-link);
  border-style: solid;
  color: var(--color-link);
}

.task-watchers__add select {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: transparent;
  opacity: 0;
  cursor: pointer;
}

/* "Repassar para..." lia-se como texto morto ao lado de um icone. Em pilula, diz que se clica. */
.task-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.6rem 0.1rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--txt-muted);
  transition: border-color 120ms ease, color 120ms ease;
}

.task-picker:hover,
.task-picker:focus-within {
  border-color: var(--color-link);
  color: var(--txt);
}

.task-picker:has(:focus-visible) {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 0;
}

.task-picker select.task-inline-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  background-image: none;
  color: inherit;
  font-size: inherit;
  field-sizing: content;
  cursor: pointer;
}

/* O card aberto e o mesmo cartao, numa tela sua: cabe mais, entao respira mais. */
.task-perma {
  max-inline-size: 48rem;
  /* Centralizado no painel. Encostado a esquerda, o cartao ficava com um vazio do tamanho dele
     proprio do lado direito, e a tela parecia inacabada. */
  margin-inline: auto;
}

.task-card--perma {
  --card-padding-inline: 1.1rem;
  --card-padding-block: 0.9rem;
  gap: 0.6rem;
}

.task-card--perma:hover {
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.07), 0 0 0 1px color-mix(in oklch, var(--card-color) 16%, transparent);
}

.task-card__title-link {
  color: inherit;
  text-decoration: none;
}

.task-card__title-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Num aparelho de toque nao ha ESC para apertar. */
@media (pointer: coarse) {
  .task-perma__kbd { display: none; }
}

.task-perma__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
  font-size: 0.7rem;
  color: var(--txt-muted);
}

.task-perma__meta-sep {
  opacity: 0.5;
}

/* A pilula de prazo e um caminho para o cartao, e nao um botao que edita no lugar. */
.task-card__due {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 0.5rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.7rem;
  text-decoration: none;
  transition: opacity 120ms ease;
}

.task-card__due:hover {
  opacity: 0.75;
}

/* O botao de Agenda do cartao fechado. Ele e um button de verdade, e o reset e o inputs.css
   moram fora de @layer e venceriam as utilitarias: por isso a pilula se desenha aqui, inteira,
   e a view so manda a cor do estado. */
.task-card .task-card__agenda {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 0.5rem;
  border: 1px solid;
  border-radius: 999px;
  background: transparent;
  font-size: 0.7rem;
  line-height: 1.6;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  text-decoration: none;
  --hover-size: 0;
  transition: opacity 120ms ease;
}

.task-card .task-card__agenda:hover {
  opacity: 0.75;
}

.task-card .task-card__agenda:has(.task-card__agenda-text) {
  max-width: min(100%, 16rem);
  min-width: 0;
}

.task-card .task-card__agenda > svg {
  flex-shrink: 0;
}

.task-card__agenda-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Quem nao manda na tarefa le o mesmo selo, e nao clica nele. */
.task-card .task-card__agenda--badge {
  cursor: default;
}

/* Volta para a lista: o cabecalho da tela do cartao e caminho, nao rotulo. */
.task-perma__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: var(--txt-muted);
  font-size: 0.875rem;
  text-decoration: none;
  --hover-size: 0;
}

.task-perma__back:hover {
  color: var(--txt);
}

/* O convite para anexar um link: discreto, do tamanho de um rotulo. */
.task-link-add {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--txt-muted);
  font-size: 0.75rem;
  cursor: pointer;
  --hover-size: 0;
}

.task-link-add:hover {
  color: var(--txt);
}

/* A checklist da tarefa: o caminho andado se le de relance, sem contar item por item. */
.task-steps {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 0.4rem;
}

.task-steps__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--txt-muted);
  padding-left: 28px;
}

.task-steps__bar {
  flex: 0 0 5rem;
  block-size: 3px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.task-steps__bar > span {
  display: block;
  block-size: 100%;
  border-radius: 999px;
  background: var(--color-positive);
  transition: width 200ms ease;
}

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

.task-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 28px;
  min-width: 0;
}

.task-step__check {
  display: inline-flex;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--txt-muted);
  cursor: pointer;
  --hover-size: 0;
}

.task-step--done .task-step__check {
  color: var(--color-positive);
}

.task-step__content {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--txt);
  overflow-wrap: anywhere;
}

.task-step--done .task-step__content {
  color: var(--txt-muted);
  text-decoration: line-through;
}

.task-step__remove {
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--txt-muted);
  opacity: 0;
  cursor: pointer;
  transition: opacity 120ms ease;
  --hover-size: 0;
}

.task-step:hover .task-step__remove,
.task-step__remove:focus-visible {
  opacity: 1;
}

.task-steps__new {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 28px;
  color: var(--txt-muted);
}

input.task-steps__new,
.task-steps__new input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--txt);
  font-size: 0.8125rem;
  box-shadow: none;
}

.task-steps__new input::placeholder {
  color: var(--txt-muted);
}

/* Etiquetas: o que a tarefa e, e nao em que pe ela esta. */
.task-tags {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  padding-left: 28px;
  min-width: 0;
}

.task-tags__icon {
  display: inline-flex;
  color: var(--txt-muted);
}

.task-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--txt-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  --hover-size: 0;
  transition: border-color 120ms ease, color 120ms ease;
}

button.task-tag:hover {
  border-color: var(--color-negative);
  color: var(--color-negative);
  text-decoration: line-through;
}

/* Encostado nas pilulas e com um substantivo por dentro, o campo de somar era lido como mais
   uma etiqueta, chamada "etiqueta". Fora da pilula, afastado e atras de um sinal de mais, ele
   volta a ser o convite que e. */
.task-tags__add {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-inline-start: 0.4rem;
  color: var(--txt-muted);
}

.task-tags__add-sign {
  display: inline-flex;
  color: var(--txt-muted);
}

.task-tags__add:focus-within,
.task-tags__add:focus-within .task-tags__add-sign {
  color: var(--txt);
}

input.task-tags__new {
  /* Cabe o convite inteiro: cortado pela metade ele viraria outra palavra solta na linha. */
  inline-size: 17ch;
  min-inline-size: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--txt);
  font-size: 0.7rem;
  box-shadow: none;
}

input.task-tags__new:focus {
  inline-size: 20ch;
  outline: none;
}

input.task-tags__new::placeholder {
  color: var(--txt-muted);
}

.task-tags__error {
  flex-basis: 100%;
  margin: 0;
  color: var(--color-negative);
  font-size: 0.7rem;
}

/* No cartao fechado a etiqueta acompanha o titulo, sem roubar a linha do prazo. */
.task-card__tags {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-top: 0.2rem;
}

/* Reagir: dizer "isso" sem gastar um comentario inteiro. */
.task-reactions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  padding-left: 28px;
  min-width: 0;
}

/* Dentro da fala, reagir mora no rodape do balao. Sem reacao nenhuma o botao encolhe para o
   canto de baixo a direita, como no Fizzy: quem nao reagiu nao precisa ver uma barra vazia. */
.task-comment .task-reactions {
  padding-left: 0;
  margin-top: 0.4rem;
}

.task-comment .task-reactions:not(:has(.task-reaction:not(.task-reaction--add))) {
  position: absolute;
  inset-block-end: 0.25rem;
  inset-inline-end: 0.3rem;
  margin: 0;
  opacity: 0.45;
  transition: opacity 120ms ease;
}

.task-comment:hover .task-reactions,
.task-comment .task-reactions:focus-within {
  opacity: 1;
}

.task-reaction {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--txt-secondary);
  font-size: 0.75rem;
  line-height: 1.5;
  cursor: pointer;
  --hover-size: 0;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.task-reaction:hover {
  border-color: var(--color-link);
}

.task-reaction--mine {
  border-color: var(--color-link);
  background: oklch(from var(--color-link) l c h / 0.12);
}

.task-reaction__count {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--txt-muted);
}

.task-reaction--add {
  color: var(--txt-muted);
  list-style: none;
}

.task-reaction--add::-webkit-details-marker {
  display: none;
}

.task-reactions__picker {
  position: relative;
  display: inline-flex;
}

.task-reactions__menu {
  display: none;
  position: absolute;
  inset-block-start: calc(100% + 0.25rem);
  inset-inline-start: 0;
  z-index: 20;
  gap: 0.15rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 4px 12px oklch(0 0 0 / 0.18);
}

.task-reactions__picker[open] .task-reactions__menu {
  display: flex;
}

.task-reactions__option {
  padding: 0.1rem 0.3rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-size: 0.95rem;
  cursor: pointer;
  --hover-size: 0;
}

.task-reactions__option:hover {
  background: var(--hover, color-mix(in oklch, var(--surface) 70%, var(--bg)));
}

/* A tecla que faz o mesmo que o link, dita em voz baixa. */
.task-perma__kbd {
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.65rem;
  color: var(--txt-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Os detalhes em texto rico: a barra de ferramentas so aparece com o campo em foco, para uma
   tarefa de uma linha nao carregar um editor inteiro na cara de quem olha. */
.task-description {
  padding-left: 28px;
  min-width: 0;
}

.task-description__field {
  min-block-size: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--txt);
  font-size: 0.875rem;
  box-shadow: none;
}

.task-description lexxy-toolbar {
  display: none;
  border: none;
  padding: 0 0 0.3rem;
}

.task-description:focus-within lexxy-toolbar {
  display: flex;
}

/* O numero pelo qual a tarefa se cita numa conversa. */
.task-card__number {
  opacity: 0.7;
  margin-right: 0.3rem;
}

.task-comment__form {
  margin-top: 0.3rem;
  padding-right: 1.6rem;
}

/* O campo de reescrever a fala: do tamanho da fala, e nao do compositor da conversa. */
textarea.task-comment__input {
  inline-size: 100%;
  resize: none;
  field-sizing: content;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-link);
  border-radius: 0.4rem;
  background: transparent;
  color: var(--txt);
  font-size: 0.85rem;
  line-height: 1.5;
}

textarea.task-comment__input:focus {
  outline: none;
  box-shadow: none;
}

/* Um carimbo, como no Fizzy: de longe se ve que a tarefa acabou, sem ler linha nenhuma. */
.task-stamp {
  position: absolute;
  /* Embaixo, nao em cima: o canto de cima a direita e das etapas. */
  inset-block-end: 3.4rem;
  inset-inline-end: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.3rem 0.9rem;
  border: 2px solid var(--color-positive);
  border-radius: 0.4rem;
  color: var(--color-positive);
  rotate: -8deg;
  opacity: 0.55;
  pointer-events: none;
}

.task-stamp__word {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.task-stamp__date {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

@media (max-width: 40rem) {
  .task-stamp { position: static; rotate: none; align-self: flex-start; }
}

/* base.css zera a aparencia de todo input; sem isto o radio some e a lista padrao
   fica sem indicar o que esta escolhido. O Calendario ja resolve igual. */
input[type="radio"].task-radio {
  appearance: auto;
  accent-color: var(--accent);
  inline-size: 1.05rem;
  block-size: 1.05rem;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

/* O _reset.css manda font: inherit em input, button, textarea e select, e mora fora de
   @layer: as utilitarias de tamanho do Tailwind perdem a disputa, e o tamanho do texto
   passa a ser o de quem esta em volta. Onde o tamanho importa, ele vem daqui. */
.task-chip { font-size: 0.6875rem; }

.task-sidebar-board-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  border-radius: 999px;
  color: var(--txt);
  font-size: 0.875rem;
  font-weight: 400;
}

.task-sidebar-board-row--link:hover { background: var(--hover); }

.task-project-name {
  font-size: 0.875rem;
  font-weight: 400;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.3;
  color: inherit;
}

.task-list-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.3;
  color: inherit;
}

.task-list-name:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 0;
  border-radius: 4px;
}

.task-list-move {
  position: relative;
}

select.task-list-move__select {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
  appearance: none;
}

.task-list-move:has(select:focus-visible) {
  visibility: visible;
  background: var(--hover);
  color: var(--txt);
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 0;
}

/* O corpo do cartao aberto, no modelo do Fizzy: o que se le e se escreve a esquerda, as etapas
   em pe a direita. Quem escolhe onde a tarefa esta ve todas as opcoes de uma vez, em vez de
   abrir uma lista suspensa para descobri-las. */
.task-card--perma .task-card__body {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
}

.task-card--perma .task-card__content {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.task-card__stages {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* A largura sai do nome de coluna mais longo. Fixa em 20ch, ela sobrava uns dois dedos que
     abriam um vazio entre o texto e as etapas, e o olho lia as duas coisas como separadas. */
  inline-size: fit-content;
  min-inline-size: 6rem;
  max-inline-size: 30%;
  padding-block: 0.2rem;
}

.task-card__stage-name {
  --hover-size: 0;

  display: flex;
  align-items: center;
  gap: 0.3rem;
  inline-size: 100%;
  padding: 0.2em 0.5em;
  border: none;
  border-radius: 0.25em;
  background: transparent;
  color: var(--txt-muted);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.task-card__stage-name:hover:not(.task-card__stage-name--current) {
  background: color-mix(in oklch, var(--card-color) 15%, transparent);
  color: var(--txt);
}

/* A etapa em que a tarefa esta e a unica pintada: de longe se ve onde ela esta. */
.task-card__stage-name--current {
  background: var(--card-color);
  color: var(--bg);
  opacity: 1;
  cursor: default;
}

.task-card__stage-name--current:hover {
  background: var(--card-color);
  color: var(--bg);
}

.task-card__stage-name--done {
  margin-block-start: 0.35rem;
  box-shadow: 0 -1px 0 0 var(--border);
  padding-block-start: 0.45em;
  border-radius: 0 0 0.25em 0.25em;
}

.task-card__stage-name--done.task-card__stage-name--current {
  background: var(--color-positive);
  box-shadow: none;
}

/* Num aparelho estreito as etapas descem para baixo do conteudo e se espalham em linha:
   uma coluna de 20ch ao lado nao cabe. */
@media (max-width: 42rem) {
  .task-card--perma .task-card__body {
    flex-direction: column;
    gap: 0.8rem;
    /* Em coluna, o flex-start faz o filho crescer ate a largura intrinseca dele, e o campo do
       titulo usa field-sizing: content: com um titulo longo a coluna inteira estourava o cartao
       e o texto saia cortado pela direita. Esticado, ele obedece a largura do cartao. */
    align-items: stretch;
  }

  .task-card__stages {
    inline-size: 100%;
    max-inline-size: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .task-card__stage-name {
    inline-size: auto;
  }

  .task-card__stage-name--done {
    margin-block-start: 0;
    box-shadow: none;
    padding-block-start: 0.2em;
    border-radius: 0.25em;
  }
}

/* O historico da tarefa: fechado por padrao, porque quem abre o cartao quer ler a tarefa e nao
   a biografia dela — mas a pergunta "quem moveu isto?" fica a um clique. */
.task-history {
  margin-block-start: 0.6rem;
  font-size: 0.72rem;
  color: var(--txt-muted);
}

.task-history__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0;
  cursor: pointer;
  list-style: none;
  color: var(--txt-muted);
}

.task-history__summary::-webkit-details-marker { display: none; }

.task-history__summary:hover { color: var(--txt); }

.task-history__list {
  margin: 0.4rem 0 0;
  padding: 0 0 0 1.2rem;
  list-style: none;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.task-history__line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  line-height: 1.4;
}

.task-history__who { font-weight: 600; color: var(--txt-secondary, var(--txt)); }

.task-history__when { color: var(--txt-muted); opacity: 0.8; }

/* A tipografia do card aberto, medida no Fizzy: la o titulo e clamp(1.1rem, 6vw, 1.8rem) com
   peso 900, e tudo o mais fica em text-small. Aqui o titulo tinha o mesmo tamanho do resto da
   tela, entao o cartao nao tinha hierarquia nenhuma: tudo pesava igual e nada guiava a leitura. */
.task-card--perma {
  --card-padding-inline: 1.5rem;
  --card-padding-block: 1.3rem;
}

.task-card--perma .task-field__title {
  /* field-sizing: content quer o tamanho do conteudo; o teto e o que o obriga a quebrar linha. */
  max-inline-size: 100%;
  font-size: clamp(1.1rem, 3vw, 1.45rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.task-card--perma .task-description,
.task-card--perma .task-description__field {
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Na leitura o titulo e texto, e nao campo: sem estas margens zeradas o h1 trazia as do navegador
   e o cartao de quem acompanha ficava com outro desenho que o do dono. */
.task-card--perma h1.task-field__title {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--txt);
}

/* Concluida, o titulo aparece riscado, para o dono e para quem acompanha: o selo diz que acabou,
   o risco diz o que acabou. */
.task-card--perma.task-card--done .task-field__title {
  text-decoration: line-through;
}

/* Sem o circulo ao lado do titulo, o recuo de 28px que o contornava deixa de fazer sentido:
   tudo se alinha pela mesma margem esquerda do titulo. */
.task-card--perma .task-description,
.task-card--perma .task-link-add {
  padding-left: 0;
  margin-left: 0;
}

/* O recuo de 28px existia para contornar o circulo de concluir. Sem ele na tela do cartao,
   tudo se alinha pela mesma margem do titulo — inclusive o que vem de outros parciais. */
.task-card--perma .task-description,
.task-card--perma .task-link-add,
.task-card--perma .task-tags,
.task-card--perma .task-watchers,
.task-card--perma .task-reactions,
.task-card--perma .task-step,
.task-card--perma .task-steps__new,
.task-card--perma .task-steps__head,
.task-card--perma .task-card__content [class*="pl-[28px]"] {
  padding-left: 0;
  margin-left: 0;
}

/* Os controles miudos — prazo, agenda, repassar, quem acompanha — sao apoio, nao conteudo:
   ficam num tamanho so, abaixo da descricao, sem disputar com o titulo. */
.task-card--perma .task-card__content .task-picker,
.task-card--perma .task-card__content .task-chip,
.task-card--perma .task-watchers,
.task-card--perma .task-steps {
  font-size: 0.78rem;
}

.task-card--perma .task-perma__meta {
  font-size: 0.78rem;
}

/* Anexar um link, o prazo, a agenda e o repasse sao a mesma classe de coisa: apoio. Em quatro
   linhas empilhadas, cada uma de uma largura, eles viravam uma escada logo abaixo do titulo e
   disputavam com ele o lugar nobre. Numa linha que quebra, o titulo volta a mandar.
   Agenda e repasse nao podem entrar no form_with (formulario dentro de formulario o navegador
   descarta), entao quem some e a caixa: com display:contents os quatro viram irmaos na mesma
   linha, sem ninguem mudar de lugar no HTML. */
.task-card__fields {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.task-card__fields > form,
.task-card--perma .task-card__aux {
  display: contents;
}

/* Titulo, descricao, campos de link e anexos sao conteudo, nao controle: cada um na sua linha. */
.task-card__line {
  flex: 1 0 100%;
  min-inline-size: 0;
}

/* No rodape do cartao, quem acompanha fica ao lado de quem cuida: sao a mesma informacao. */
.task-perma__meta {
  flex-wrap: wrap;
}

.task-perma__meta .task-watchers {
  margin-left: auto;
  padding-left: 0;
}

/* As colunas do quadro, na tela de Configurações: uma linha por coluna, na ordem do quadro. */
.task-column-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface);
}

.task-column-row__handle {
  cursor: grab;
  color: var(--txt-muted);
  flex-shrink: 0;
}

.task-column-row__pin {
  color: var(--color-link);
  flex-shrink: 0;
}

/* O _reset.css e o inputs.css moram fora de @layer e vencem qualquer utilitaria do Tailwind em
   input: o tamanho, a borda e o fundo do campo de nome precisam vir daqui para pegar. */
/* Nos nomes da lista, a coluna do quadro vai a esquerda como referencia, e o campo e o apelido. */
.task-column-row__label {
  flex: 0 0 40%;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  color: var(--txt-muted);
}

.task-column-row__name {
  flex: 1;
  min-inline-size: 0;
  font-size: 0.8125rem;
  padding: 0.15rem 0.3rem;
  margin: 0;
  background: transparent;
  color: var(--txt);
  border: 1px solid transparent;
  border-radius: 0.4rem;
  box-shadow: none;
  cursor: text;
}

.task-column-row__name:hover,
.task-column-row__name:focus,
.task-column-row__name:focus-visible {
  background: var(--hover);
  border-color: var(--border);
  outline: none;
  box-shadow: none;
}

.task-column-row__name:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: -1px;
}

/* O selo diz o que a linha é, nao o que ela faz: fica em texto miudo, sem virar botao. */
.task-column-row__badge {
  flex-shrink: 0;
  font-size: 0.6875rem;
  color: var(--txt-muted);
  white-space: nowrap;
}

.task-column-row__remove {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--txt-muted);
  cursor: pointer;
  --hover-size: 0;
}

.task-column-row__remove:hover {
  background: var(--hover);
  color: var(--txt);
}

/* O campo de coluna nova repete o do fim do quadro: tracejado, para dizer que ainda nao existe. */
.task-column-row__new {
  inline-size: 100%;
  font-size: 0.8125rem;
  padding: 0.4rem 0.6rem;
  margin: 0;
  background: transparent;
  color: var(--txt);
  border: 1px dashed var(--border);
  border-radius: 0.75rem;
  box-shadow: none;
}

.task-column-row__new:focus,
.task-column-row__new:focus-visible {
  border-style: solid;
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: -1px;
}

/* Um texto que e botao: discreto como o verbo ao lado, sublinhado para dizer que se clica. A
   classe dupla vence o _reset.css e o inputs.css, que ficam fora de @layer e pintariam um botao. */
.task-watchers .task-watchers__leave {
  --hover-size: 0;
  margin-left: 0.35rem;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 0.72rem;
  color: var(--txt-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  white-space: nowrap;
}

.task-watchers .task-watchers__leave:hover {
  color: var(--txt);
}

/* O verbo ao lado dos rostos. Sem ele, um avatar solto embaixo de "Repassar para..." parecia
   o responsavel da tarefa, e nao quem apenas acompanha. */
.task-watchers__verb {
  font-size: 0.72rem;
  color: var(--txt-muted);
  white-space: nowrap;
}

/* Quem nao pode mover ve as etapas, para saber em que pe a tarefa esta, mas elas nao podem
   parecer clicaveis: sem isto a pessoa clicava, o texto era selecionado, e nada acontecia. */
span.task-card__stage-name {
  cursor: default;
  user-select: none;
  opacity: 0.75;
}

span.task-card__stage-name:hover {
  background: transparent;
  color: var(--txt-muted);
}

span.task-card__stage-name--current:hover {
  background: var(--card-color);
  color: var(--bg);
}

/* Feito e fixa como a Caixa de entrada, e se marca do mesmo jeito: um selo na cor do link antes do
   nome, que as colunas que se renomeiam nao tem. */
.task-column__fixed-mark {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-link);
}

/* O que terminou antes desta semana fica numa dobra no pe de Feito, fora da contagem. */
.task-column__older {
  padding-top: 0.25rem;
}

.task-column__older-summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.75rem;
  color: var(--txt-muted);
}

.task-column__older-summary::-webkit-details-marker { display: none; }
.task-column__older-summary:hover { color: var(--txt); }
.task-column__older-summary > svg { transition: rotate 0.15s ease; }
.task-column__older[open] > .task-column__older-summary { margin-bottom: 0.5rem; }
.task-column__older[open] > .task-column__older-summary > svg { rotate: 90deg; }

.task-completions-more {
  display: flex;
  justify-content: center;
  padding: 0.25rem 0;
}

.task-completions-more__button {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  font-size: 0.75rem;
  color: var(--color-link);
  cursor: pointer;
}

.task-completions-more__button:hover { background: var(--hover); }
.task-completions-more__button:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.task-completions-more__button[aria-busy="true"] { color: var(--txt-muted); cursor: progress; }

/* A marca de concluida no cartao: e estado, nao botao, entao nao tem cursor nem hover. */
.task-card__done-mark {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-link);
}

/* O balao de "Por na agenda" do cartao fechado. Ele mora no body, fora do cartao, e por isso se
   desenha inteiro aqui: dentro do cartao herdaria o corte da coluna e o arrastar do quadro. Nada
   aqui define display nos pedacos que o datetime-picker esconde com .hidden, porque esta folha
   esta fora de @layer e venceria a utilitaria. */
.task-agenda-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}

.task-agenda-pop {
  position: fixed;
  inline-size: 16.5rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface);
  color: var(--txt);
  box-shadow: 0 12px 32px oklch(0 0 0 / 0.18), 0 2px 6px oklch(0 0 0 / 0.08);
  pointer-events: auto;
}

/* No celular o balao ancorado sairia pela borda: vira folha presa ao rodape, com fundo escuro que
   fecha ao toque, como as outras folhas do app. */
.task-agenda-layer--sheet {
  pointer-events: auto;
  background: oklch(0 0 0 / 0.45);
}

.task-agenda-layer--sheet .task-agenda-pop {
  inset: auto 0 0 0;
  inline-size: auto;
  max-block-size: 88dvh;
  overflow-y: auto;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  border-radius: 1.25rem 1.25rem 0 0;
  border-inline: none;
  border-block-end: none;
}

.task-agenda-pop__form {
  margin: 0;
}

.task-agenda-pop__title {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--txt-muted);
}

.task-agenda-pop__shortcuts {
  display: flex;
  gap: 0.375rem;
  margin-block-end: 0.5rem;
}

.task-agenda-pop button.task-agenda-pop__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--txt);
  font-size: 0.8125rem;
  line-height: 1.5;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  --hover-size: 0;
}

.task-agenda-pop button.task-agenda-pop__chip:hover,
.task-agenda-pop button.task-agenda-pop__chip:focus-visible {
  border-color: var(--color-link);
  color: var(--color-link);
}

.task-agenda-pop__calendar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-block-end: 0.5rem;
  color: var(--txt-muted);
}

.task-agenda-pop select.task-agenda-pop__select {
  flex: 1 1 auto;
  inline-size: auto;
  min-inline-size: 0;
  padding: 0.25rem 1.75rem 0.25rem 0.625rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background-color: transparent;
  color: var(--txt);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.task-agenda-pop__time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.5rem;
}

.task-agenda-pop__clock {
  display: inline-flex;
  color: var(--txt-muted);
}

.task-agenda-pop__time-field {
  position: relative;
  flex: 1 1 auto;
}

.task-agenda-pop input.task-agenda-pop__time-input {
  inline-size: 100%;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--txt);
  font-size: 0.875rem;
  outline: none;
  box-shadow: none;
  filter: none;
}

.task-agenda-pop__time-options {
  position: absolute;
  inset: auto 0 calc(100% + 0.375rem) 0;
  z-index: 1;
  max-block-size: 12rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface);
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.16);
}

/* Na folha do celular a lista de horas abria para cima, por cima do calendario inteiro. Ali ela
   entra no fluxo, logo abaixo do campo: a folha cresce para cima e o calendario fica a vista. */
.task-agenda-layer--sheet .task-agenda-pop__time-options {
  position: static;
  margin-block-start: 0.375rem;
  max-block-size: 9rem;
  box-shadow: none;
}

/* Com a lista no fluxo o campo cresce para baixo: o relogio fica na altura do campo, nao no meio. */
.task-agenda-layer--sheet .task-agenda-pop__time {
  align-items: flex-start;
}

.task-agenda-layer--sheet .task-agenda-pop__clock {
  margin-block-start: 0.45rem;
}

.task-agenda-pop button.task-agenda-pop__time-option {
  display: block;
  inline-size: 100%;
  padding: 0.4rem 0.875rem;
  border: none;
  background: transparent;
  color: var(--txt);
  font-size: 0.875rem;
  text-align: start;
  outline: none;
  box-shadow: none;
  --hover-size: 0;
}

.task-agenda-pop button.task-agenda-pop__time-option:hover {
  background: color-mix(in oklch, var(--color-link) 12%, transparent);
}

.task-agenda-pop__error {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--color-negative);
}

.task-agenda-pop__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.375rem;
  margin-block-start: 0.625rem;
}

.task-agenda-pop button.task-agenda-pop__cancel,
.task-agenda-pop button.task-agenda-pop__confirm {
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  --hover-size: 0;
}

.task-agenda-pop button.task-agenda-pop__cancel {
  background: transparent;
  color: var(--color-link);
}

.task-agenda-pop button.task-agenda-pop__confirm {
  background: var(--color-link);
  color: var(--accent-foreground);
}

.task-agenda-pop button.task-agenda-pop__confirm:focus-visible,
.task-agenda-pop button.task-agenda-pop__cancel:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 0;
}

/* A porta para o atendimento de onde a tarefa nasceu: no alto da tela da tarefa, em pilula, para
   se ler como caminho. */
.task-perma__conversation {
  margin-block-end: 0.5rem;
}

.task-conversation-door {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-inline-size: 100%;
  padding: 0.2rem 0.75rem 0.2rem 0.6rem;
  border: 1px solid var(--color-link);
  border-radius: 999px;
  background: oklch(from var(--color-link) l c h / 0.1);
  color: var(--color-link);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  --hover-size: 0;
  transition: opacity 120ms ease;
}

.task-conversation-door > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.task-conversation-door:hover {
  opacity: 0.8;
}

/* Sem acesso a conversa, o mesmo lugar sem desenho de botao: a borda igual a da pilula que e link
   fazia a pessoa tocar e nada acontecer. */
.task-conversation-door--locked {
  padding-inline: 0;
  border-color: transparent;
  background: transparent;
  color: var(--txt-muted);
  font-weight: 500;
}

.task-perma__conversation:has(.task-conversation-door--locked) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
}

.task-conversation-door__why {
  font-size: 0.72rem;
  color: var(--txt-muted);
}

/* Nas configuracoes abertas pela engrenagem de uma lista, a linha que separa o que e so da lista
   do que vale para todo mundo. Sem ela, os controles globais pareciam do quadro que se olhava. */
.task-settings-global--after-list {
  margin-top: 2.5rem;
}

.task-settings-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--txt-muted);
}

.task-settings-divider::before,
.task-settings-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}

/* Na leitura, sem etiqueta e sem passo, as caixas das duas ficam vazias (continuam na pagina porque
   sao alvo de atualizacao ao vivo), mas cada uma somava o espaco entre linhas: o titulo ficava
   solto, longe da origem e dos rostos do rodape. Vazias, nao ocupam lugar. */
.task-card--perma .task-tags:not(:has(*)),
.task-card--perma .task-steps:not(:has(li, form)) {
  display: none;
}

/* Os botoes pequenos da barra lateral: renomear, criar lista num processo, fechar o processo. Sao
   button, e o _reset.css (fora de @layer) apagaria tamanho e fundo das utilitarias: vem daqui. */
.task-sidebar-action {
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--txt-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  /* O anel de hover global (base.css) desenhava um circulo em volta de um botao de 24px. */
  --hover-size: 0;
}

.task-sidebar-action:hover,
.task-sidebar-action:focus-visible {
  background: var(--hover);
  color: var(--txt);
  outline: none;
}

@media (hover: hover) {
  .task-sidebar-action--reveal {
    inline-size: 0;
    margin-inline-start: -0.375rem;
    overflow: hidden;
    opacity: 0;
  }
  .group:hover .task-sidebar-action--reveal,
  .group:focus-within .task-sidebar-action--reveal {
    inline-size: 1.5rem;
    margin-inline-start: 0;
    opacity: 1;
  }

  .task-sidebar--calm .group:hover .task-sidebar-action--reveal,
  .task-sidebar--calm .group:focus-within .task-sidebar-action--reveal {
    inline-size: 0;
    margin-inline-start: -0.375rem;
    opacity: 0;
    pointer-events: none;
  }

  /* Na linha da lista o espaco e do nome: com mouse, renomear e o duplo clique nele. O lapis fica
     so para o toque, onde o duplo clique nao e confiavel. */
  .task-sidebar-action--touch { display: none; }
}

@media (hover: hover) {
  details.task-sidebar-board-menu { display: none; }
}

@media (hover: none) {
  .task-sidebar-action--pointer { display: none; }

  summary.task-sidebar-board-menu__summary {
    inline-size: 44px;
    block-size: 44px;
    margin-block: -0.5rem;
    margin-inline-end: -0.5rem;
  }
}

#tasks-sidebar-lists:not(.task-sidebar-boards--dragging) .task-sidebar-project__drop {
  display: none;
}

/* O processo vazio diz como trazer a primeira lista; com uma lista dentro a frase sai. */
.task-sidebar-project__lists:has([data-list-id], [data-new-list-input]) > .task-sidebar-project__empty,
#tasks-lists-container:has([data-list-id], [data-new-list-input]) > .task-sidebar-project__empty {
  display: none;
}

@media (hover: none) {
  .task-list-handle {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin: -0.5rem -0.375rem -0.5rem -0.5625rem;
    touch-action: none;
  }
}

@media (hover: hover) {
  [data-tasks-sidebar-reorder-target~="item"],
  [data-tasks-sidebar-reorder-target~="item"] .task-list-name {
    cursor: grab;
  }
}

@media (hover: none) {
  [data-tasks-sidebar-reorder-target~="item"] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

.task-sidebar-board--over {
  border-radius: 0.75rem;
  background: color-mix(in oklch, var(--color-link) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-link) 45%, transparent);
}

.task-sidebar-boards--dragging [data-tasks-sidebar-reorder-target~="board"] .task-sidebar-project__empty {
  margin-inline-end: 0.5rem;
  border: 1px dashed color-mix(in oklch, var(--txt-muted) 45%, transparent);
  border-radius: 0.5rem;
}

.task-sidebar-boards--dragging #tasks-lists-container::after {
  content: attr(data-drop-label);
  display: block;
  margin: 0.25rem 0.5rem 0;
  padding: 0.35rem 0.6rem;
  border: 1px dashed color-mix(in oklch, var(--txt-muted) 45%, transparent);
  border-radius: 0.5rem;
  font-size: 11px;
  color: var(--txt-muted);
}

.task-sidebar-boards--dragging .task-sidebar-board--over .task-sidebar-project__empty,
.task-sidebar-boards--dragging .task-sidebar-board--over #tasks-lists-container::after {
  border-color: transparent;
}

/* O campo de renomear ocupa o lugar do nome, no mesmo tamanho: parece o nome virando editavel. */
input.task-rename-input {
  flex: 1 1 auto;
  min-inline-size: 0;
  inline-size: auto;
  padding: 0 0.25rem;
  margin: 0 -0.25rem;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  background: var(--surface, transparent);
  color: var(--txt);
  font: inherit;
  font-size: inherit;
  box-shadow: none;
  outline: none;
}

/* Os processos fechados, no pe da barra: recolhidos, porque sao o caminho de volta e nao o dia a dia. */
.task-closed-projects {
  margin-top: 0.75rem;
  padding-inline: 0.5rem;
  font-size: 0.6875rem;
  color: var(--txt-muted);
}

.task-closed-projects__summary {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  list-style: none;
}

.task-closed-projects__summary::-webkit-details-marker { display: none; }

/* summary ganha o anel de hover global e o contorno de foco a cada clique: aqui so no teclado. */
.task-closed-projects__summary { --hover-size: 0; }
.task-closed-projects__summary:focus:not(:focus-visible) { outline: none; box-shadow: none; }

.task-closed-projects__caret { transition: transform 0.15s; }

.task-closed-projects[open] .task-closed-projects__caret { transform: rotate(90deg); }

.task-closed-projects__hint {
  margin: 0.25rem 0.25rem 0.375rem;
  line-height: 1.4;
}

.task-closed-projects__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-closed-projects__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0.25rem 0.25rem 0.625rem;
  border-radius: 999px;
  color: var(--txt-secondary);
}

.task-closed-projects__item:hover { background: var(--hover); }

button.task-closed-projects__reopen {
  flex-shrink: 0;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--txt);
  font-size: 0.6875rem;
  cursor: pointer;
}

button.task-closed-projects__reopen:hover { background: var(--hover); }

/* Recado do repasse. Popover do navegador, entao o estilo padrao dele (centrado, inset 0) e
   desfeito aqui; a posicao vem do controlador, encostada no seletor. Os campos e botoes sao ditos
   por inteiro porque _reset.css e inputs.css ficam fora de @layer. */
.task-handover-pop {
  position: fixed;
  inset: auto;
  margin: 0;
  inline-size: 280px;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--bg-raised, var(--bg));
  color: var(--txt);
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.18);
}
.task-handover-pop:popover-open { display: flex; flex-direction: column; gap: 0.5rem; }
.task-handover-pop__title { margin: 0; font-size: 13px; font-weight: 600; }
.task-handover-pop__label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 12px; color: var(--txt-muted); }
textarea.task-handover-pop__note {
  inline-size: 100%;
  font-size: 13px;
  line-height: 1.4;
  color: var(--txt);
  background: var(--bg);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 0.5rem;
  padding: 0.4rem 0.55rem;
  resize: none;
  outline: none;
  box-shadow: none;
}
textarea.task-handover-pop__note:focus { outline: 2px solid var(--ds-focus-ring); outline-offset: -1px; }
.task-handover-pop__actions { display: flex; justify-content: flex-end; gap: 0.4rem; }
button.task-handover-pop__cancel,
button.task-handover-pop__confirm {
  --hover-size: 0;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}
button.task-handover-pop__cancel { border: 1px solid var(--border); background: transparent; color: var(--txt-muted); }
button.task-handover-pop__confirm { border: 0; background: var(--color-link); color: var(--accent-foreground); }

/* O aviso de repasse com "Desfazer" fica o tempo da janela do servidor e aceita clique. */
.flash--undo .flash__inner {
  animation-duration: 8s;
  pointer-events: auto;
  align-items: center;
  gap: 12px;
}
button.flash__action {
  --hover-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  box-shadow: none;
}

/* O comentario virou editor de texto rico para aceitar @mencao. Fica com a cara do campo simples
   de antes: sem borda, sem barra de ferramentas, do tamanho do que se escreve. */
lexxy-editor.task-comments__input,
lexxy-editor.task-comment__input {
  display: block;
  inline-size: 100%;
  min-width: 0;
  min-block-size: 1.5rem;
  color: var(--txt);
  font-size: 0.85rem;
  line-height: 1.5;
  box-shadow: none;
}

lexxy-editor.task-comments__input {
  --lexxy-editor-rows: 1lh;
  padding: 0;
  border: none;
  background: transparent;
}

.task-comments__input .lexxy-editor__content {
  padding: 0;
  outline: none;
}

lexxy-editor.task-comment__input {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-link);
  border-radius: 0.4rem;
  background: transparent;
}

lexxy-editor.task-comments__input lexxy-toolbar,
lexxy-editor.task-comment__input lexxy-toolbar {
  display: none;
}

/* O texto rico ja traz os proprios paragrafos; manter o pre-wrap somaria linhas em branco. */
.task-comment__body--rich {
  white-space: normal;
}

.task-comment__body--rich p,
.task-comment__body--rich div {
  margin: 0;
}

.task-repeat {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-inline-start: 28px;
  font-size: 0.75rem;
}
.task-card--perma .task-repeat { display: contents; }

button.task-repeat__trigger {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--txt-muted);
  font-size: 0.75rem;
  line-height: 1.5;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
button.task-repeat__trigger:hover,
button.task-repeat__trigger:focus-visible { border-color: var(--border-strong, var(--border)); color: var(--txt); }
button.task-repeat__trigger--on {
  border-color: var(--color-link);
  color: var(--color-link);
  background: oklch(from var(--color-link) l c h / 0.12);
}
button.task-repeat__trigger--on:hover { border-color: var(--color-link); color: var(--color-link); }
button.task-repeat__trigger[aria-disabled="true"],
button.task-repeat__trigger[aria-disabled="true"]:hover,
button.task-repeat__trigger:disabled,
button.task-repeat__trigger:disabled:hover { border-style: dashed; border-color: var(--border); color: var(--txt-muted); opacity: 0.6; cursor: not-allowed; }

.task-repeat__hint { display: none; color: var(--txt-muted); font-size: 0.7rem; }
button.task-repeat__trigger[aria-disabled="true"] + .task-repeat__hint,
button.task-repeat__trigger:disabled + .task-repeat__hint { display: inline; }

.task-repeat__meta { color: var(--txt-muted); }

button.task-repeat__stop {
  --hover-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--txt-muted);
  font-size: 0.75rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  box-shadow: none;
  cursor: pointer;
}
button.task-repeat__stop:hover { color: var(--color-negative); }

.task-repeat__pop {
  position: fixed;
  inset: auto;
  margin: 0;
  inline-size: 300px;
  max-block-size: calc(100dvh - 16px);
  overflow-y: auto;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--bg-raised, var(--bg));
  color: var(--txt);
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.18);
  font-size: 13px;
}
.task-repeat__form { display: flex; flex-direction: column; gap: 0.7rem; }
.task-repeat__title { margin: 0; font-size: 13px; font-weight: 600; }
.task-repeat__section[hidden] { display: none; }
.task-repeat__field { display: flex; flex-direction: column; gap: 0.25rem; color: var(--txt-muted); font-size: 12px; }
.task-repeat__field--inline { flex-direction: row; align-items: center; gap: 0.4rem; color: var(--txt); font-size: 13px; }
.task-repeat__section fieldset,
fieldset.task-repeat__section,
fieldset.task-repeat__anchors { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
fieldset.task-repeat__section legend,
fieldset.task-repeat__anchors legend {
  display: block;
  padding: 0;
  margin: 0 0 0.3rem;
  text-align: start;
  font-size: 12px;
  color: var(--txt-muted);
}

select.task-repeat__select,
input.task-repeat__number {
  inline-size: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 0.5rem;
  background-color: var(--bg);
  color: var(--txt);
  font-size: 13px;
  box-shadow: none;
  outline: none;
}
select.task-repeat__select { padding-inline-end: var(--seta-do-select); }
input.task-repeat__number { inline-size: 4.5rem; }
select.task-repeat__select:focus,
input.task-repeat__number:focus { outline: 2px solid var(--ds-focus-ring); outline-offset: -1px; }

.task-repeat__anchor {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  cursor: pointer;
}
.task-repeat__anchor + .task-repeat__anchor { margin-block-start: 0.35rem; }
.task-repeat__anchor input { position: absolute; inline-size: 1px; block-size: 1px; margin: 0; opacity: 0; }
.task-repeat__anchor:has(input:checked) { border-color: var(--color-link); background: oklch(from var(--color-link) l c h / 0.08); }
.task-repeat__anchor:has(input:focus-visible) { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.task-repeat__radio {
  flex-shrink: 0;
  inline-size: 14px;
  block-size: 14px;
  margin-block-start: 0.15rem;
  border: 1.5px solid var(--txt-muted);
  border-radius: 999px;
}
.task-repeat__anchor input:checked + .task-repeat__radio { border-color: var(--color-link); box-shadow: inset 0 0 0 2.5px var(--bg-raised, var(--bg)); background: var(--color-link); }
.task-repeat__anchor span:not(.task-repeat__radio) { display: flex; flex-direction: column; }
.task-repeat__anchor strong { font-weight: 600; }
.task-repeat__anchor small { color: var(--txt-muted); font-size: 12px; }

.task-repeat__days { display: flex; gap: 0.3rem; }
.task-repeat__day { position: relative; cursor: pointer; }
.task-repeat__day input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.task-repeat__day span {
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--txt-muted);
  font-size: 12px;
  font-weight: 600;
}
.task-repeat__day input:checked + span {
  border-color: var(--color-link);
  background: var(--color-link);
  color: var(--accent-foreground);
}
.task-repeat__day input:focus-visible + span { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }

.task-repeat__actions { display: flex; justify-content: flex-end; gap: 0.4rem; }
button.task-repeat__cancel,
button.task-repeat__save {
  --hover-size: 0;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}
button.task-repeat__cancel { border: 1px solid var(--border); background: transparent; color: var(--txt-muted); }
button.task-repeat__save { border: 0; background: var(--color-link); color: var(--accent-foreground); }
button.task-repeat__save:disabled { opacity: 0.45; cursor: not-allowed; }
.task-repeat__error { margin: 0; color: var(--color-negative); font-size: 12px; }
.task-repeat__error[hidden] { display: none; }
.task-repeat__pop:focus { outline: none; }

.task-card__repeat { display: inline-flex; align-items: center; margin-inline-start: 1px; }

.task-history__link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.task-repeat__pop .ds-check { font-size: 13px; }

.task-board-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-6);
  border-block-end: 1px solid var(--ds-border);
}

.task-board-filters :where(button, summary, a) { --hover-size: 0; }

.task-board-filters__count {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  margin: 0 0 0 auto;
  font-size: var(--ds-font-size-xs);
  color: var(--ds-text-muted);
}

.task-board-filters__clear {
  color: var(--ds-link);
  font-weight: var(--ds-weight-semibold);
  text-decoration: none;
}

.task-board-filters__clear:hover { text-decoration: underline; }
.task-board-filters__clear:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; border-radius: var(--ds-radius-sm); }

.task-board-filter {
  position: relative;
  display: inline-flex;
}

.task-board-filter__summary {
  list-style: none;
  user-select: none;
}

.task-board-filter__summary::-webkit-details-marker { display: none; }

.task-board-filter__summary--on,
.task-board-filter[open] > .task-board-filter__summary {
  background: var(--ds-cta-soft);
  color: var(--ds-on-cta-soft);
}

.task-board-filter__summary--on:hover { background: var(--ds-cta-soft-hover); }

.task-board-filter__menu {
  position: absolute;
  inset-block-start: calc(100% + var(--ds-space-1));
  inset-inline-start: 0;
  z-index: var(--ds-z-dropdown);
  translate: var(--shift-inline, 0) 0;
  min-inline-size: 13rem;
  max-inline-size: min(18rem, calc(100vw - 16px));
  max-block-size: var(--max-height, min(60vh, 24rem));
  overflow-y: auto;
  padding: var(--ds-menu-inset);
  background: var(--ds-menu-bg);
  color: var(--ds-menu-text);
  border: 1px solid var(--ds-menu-border);
  border-radius: var(--ds-menu-radius);
}

.popup-orientation-top .task-board-filter__menu {
  inset-block-start: auto;
  inset-block-end: calc(100% + var(--ds-space-1));
}

.task-board-filter__options {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 0;
}

.task-board-filter__option {
  padding: var(--ds-space-2);
  border-radius: var(--ds-radius-lg);
  font-size: var(--ds-font-size-compact);
  cursor: pointer;
}

.task-board-filter__option:hover { background: var(--ds-hover); }

.task-sort .task-board-filter__menu { inset-inline-start: auto; inset-inline-end: 0; min-inline-size: 12rem; }
.task-sort :where(summary, a) { --hover-size: 0; }

.task-sort__options {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-sort__option {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2);
  border-radius: var(--ds-radius-lg);
  font-size: var(--ds-font-size-compact);
  color: var(--ds-text);
  text-decoration: none;
}

.task-sort__option:hover { background: var(--ds-hover); }
.task-sort__option:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
.task-sort__option[aria-current="true"] { font-weight: var(--ds-weight-semibold); }
.task-sort__check { display: inline-flex; inline-size: 13px; color: var(--ds-link); }

.task-board-filter__empty {
  margin: 0;
  padding: var(--ds-space-2);
  font-size: var(--ds-font-size-xs);
  color: var(--ds-text-muted);
}

.task-board-filter__actions {
  display: flex;
  justify-content: flex-end;
  padding: var(--ds-space-1) var(--ds-space-1) 0;
}

@media (pointer: coarse) {
  .task-board-filter__option { min-block-size: 44px; }
}

@media (max-width: 639px) {
  .task-board-filters { padding-inline: var(--ds-space-4); }
}

.task-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 4rem;
  text-align: center;
  color: var(--txt);
}

.task-search-empty__title {
  margin: 0.5rem 0 0;
  font-size: var(--ds-font-size-base);
}

.task-search-empty__hint {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--txt-muted);
}

.task-search-empty__create { margin-top: 1rem; }

.task-search-empty__composer {
  inline-size: 100%;
  margin-top: 1.25rem;
  text-align: start;
}

.task-search__summary {
  margin: 0 0 var(--ds-space-2);
  font-size: var(--ds-font-size-xs);
  color: var(--ds-text-muted);
}

.task-search__more {
  margin: var(--ds-space-1) 0 var(--ds-space-3);
  font-size: var(--ds-font-size-xs);
  color: var(--ds-text-muted);
}

.task-search__done { margin-block-start: var(--ds-space-4); }

.task-search__done-summary {
  --hover-size: 0;
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding-block: var(--ds-space-2);
  list-style: none;
  cursor: pointer;
  color: var(--ds-text-muted);
}

.task-search__done-summary::-webkit-details-marker { display: none; }
.task-search__done-summary > svg { transition: rotate var(--ds-duration-fast) ease; }
.task-search__done[open] > .task-search__done-summary > svg { rotate: 90deg; }
.task-search__done-summary:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; border-radius: var(--ds-radius-sm); }

.task-search-form .cs-search input:placeholder-shown ~ .cs-search-clear { display: none; }

.task-visibility {
  margin-block-end: 2rem;
}

.task-visibility__options {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-block-end: 0.75rem;
}

.task-visibility__option {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--txt-muted);
}

.task-visibility__fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.task-visibility__option {
  align-items: center;
  cursor: pointer;
}

.task-visibility__option:has(.task-visibility__radio:checked) {
  border-color: var(--color-link);
  color: var(--txt);
}

.task-visibility__option:has(.task-visibility__radio:focus-visible) {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 0;
}

.task-visibility__option--locked {
  cursor: not-allowed;
}

.task-visibility__option--locked :is(.task-visibility__icon, .task-visibility__name, .task-visibility__detail) {
  opacity: 0.6;
}

.task-visibility__refusal {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--txt);
}

.task-visibility__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding-block-start: 0.1rem;
}

.task-visibility__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.task-visibility__name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.task-visibility__badge {
  padding: 0 0.45rem;
  border-radius: 999px;
  background: oklch(from var(--color-link) l c h / 0.14);
  color: var(--color-link);
  font-size: 0.6875rem;
  font-weight: 600;
}

.task-visibility__detail {
  font-size: 0.75rem;
  color: var(--txt-muted);
}

.task-visibility__members {
  display: grid;
  gap: 0.375rem;
  margin-block-end: 0.75rem;
}

.task-visibility__members[hidden] {
  display: none;
}

.task-visibility__members-label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--txt);
}

.task-manage__who-sees .task-visibility {
  margin-block-end: 0;
}

.task-visibility__warning {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--txt-muted);
}

.task-visibility__warning[hidden] { display: none; }

.task-visibility__warning svg {
  flex-shrink: 0;
  margin-block-start: 0.1rem;
}

button.task-visibility__action {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--txt);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

button.task-visibility__action:hover:not(:disabled) {
  background: var(--hover);
}

button.task-visibility__action:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.task-board.task-board--dragging .task-column--refuses {
  opacity: 0.4;
  transition: opacity 120ms ease;
}

.task-menu {
  position: relative;
  display: inline-flex;
}

.task-menu__summary {
  --hover-size: 0;
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 999px;
  color: var(--txt-muted);
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s, color 0.15s;
}

.task-menu__summary::-webkit-details-marker { display: none; }

.task-menu__summary:hover,
.task-menu[open] > .task-menu__summary {
  background: var(--hover);
  color: var(--txt);
}

.task-menu__summary:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 0;
}

.task-menu__list {
  position: absolute;
  inset-block-start: calc(100% + var(--ds-space-1));
  inset-inline-end: 0;
  z-index: var(--ds-z-dropdown);
  display: flex;
  flex-direction: column;
  min-inline-size: 11rem;
  max-inline-size: min(18rem, calc(100vw - 16px));
  padding: var(--ds-space-1);
  background: var(--ds-bg-pure);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  box-shadow: 0 10px 30px oklch(0 0 0 / 0.14);
}

.popup-orientation-top .task-menu__list {
  inset-block-start: auto;
  inset-block-end: calc(100% + var(--ds-space-1));
}

.task-menu__item,
button.task-menu__item {
  --hover-size: 0;
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  inline-size: 100%;
  padding: var(--ds-space-2);
  border: 0;
  border-radius: var(--ds-radius-lg);
  background: transparent;
  color: var(--ds-text);
  font-size: var(--ds-font-size-compact);
  font-weight: 400;
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.task-menu__item svg { color: var(--txt-muted); flex-shrink: 0; }

.task-menu__item:hover { background: var(--ds-hover); }

.task-menu__item:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }

.task-menu__item--danger,
.task-menu__item--danger svg { color: var(--color-negative); }

@media (pointer: coarse) {
  .task-menu__item { min-block-size: 44px; }
}

a.task-sidebar-manage-projects {
  display: inline-block;
  margin: 0.75rem 0 0 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  color: var(--txt-muted);
  font-size: 0.75rem;
  text-decoration: none;
  white-space: nowrap;
}

a.task-sidebar-manage-projects:hover { color: var(--txt); background: var(--hover); }

.task-projects-page {
  padding: 1.5rem;
}

@media (max-width: 40rem) {
  .task-projects-page { padding: 1rem; }
}

.task-new-project {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-inline-size: 28rem;
}

.task-new-project__label,
legend.task-visibility__legend {
  display: block;
  inline-size: 100%;
  margin: 0;
  padding: 0;
  text-align: start;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--txt);
}

input.task-new-project__name {
  inline-size: 100%;
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--txt);
  font-size: 0.9375rem;
}

.task-new-project__who .task-new-project__label { margin-block-end: 0.5rem; }

.task-new-project__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-start: 0.25rem;
}

button.task-new-project__submit {
  --color-positive: var(--color-link);
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
}

a.task-new-project__cancel {
  color: var(--txt-muted);
  font-size: 0.875rem;
  text-decoration: none;
}

a.task-new-project__cancel:hover { color: var(--txt); }

.task-manage {
  max-inline-size: 56rem;
}

.task-manage__empty {
  margin: 0;
  color: var(--txt-muted);
  font-size: 0.875rem;
}

.task-manage__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-manage__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: var(--surface);
}

.task-manage__row--closed { background: transparent; }

.task-manage__main {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-inline-size: 0;
  flex: 1 1 18rem;
}

.task-manage__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 0.6rem;
  background: var(--bg);
  color: var(--txt-muted);
}

.task-manage__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-inline-size: 0;
}

a.task-manage__name,
.task-manage__name {
  overflow: hidden;
  color: var(--txt);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.task-manage__name:hover { text-decoration: underline; }

.task-manage__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin: 0;
  color: var(--txt-muted);
  font-size: 0.75rem;
}

.task-manage__who {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
}

.task-manage__who--company { color: var(--color-link); }

.task-manage__badge {
  padding: 0 0.45rem;
  border-radius: 999px;
  background: oklch(from var(--color-link) l c h / 0.14);
  color: var(--color-link);
  font-weight: 600;
}

.task-manage__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

button.task-manage__action,
a.task-manage__action,
summary.task-manage__action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-pure);
  color: var(--txt);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  --hover-size: 0;
}

button.task-manage__action:hover:not(:disabled),
a.task-manage__action:hover,
summary.task-manage__action:hover { background: var(--hover); }

button.task-manage__action:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

button.task-manage__action--primary {
  border-color: var(--color-link);
  background: var(--color-link);
  color: var(--bg-pure);
}

button.task-manage__action--primary:hover:not(:disabled) {
  background: oklch(from var(--color-link) calc(l - 0.05) c h);
}

button.task-manage__action--danger { color: var(--color-negative); }

summary.task-manage__action { list-style: none; }
summary.task-manage__action::-webkit-details-marker { display: none; }
summary.task-manage__action:focus:not(:focus-visible) { outline: none; box-shadow: none; }

.task-manage__rename[open] { flex-basis: 100%; order: 1; }

.task-manage__actions:has(> .task-manage__rename[open]) { flex-basis: 100%; }

.task-manage__rename[open] > summary { margin-block-end: 0.5rem; }

.task-manage__rename-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

input.task-manage__rename-input {
  flex: 1 1 12rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-pure);
  color: var(--txt);
  font-size: 0.8125rem;
}

.task-manage__readonly {
  color: var(--txt-muted);
  font-size: 0.75rem;
}

.task-manage__closed { margin-block-start: 2rem; }

.task-manage__closed-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.task-manage__count {
  color: var(--txt-muted);
  font-weight: 400;
}

.task-manage__hint {
  margin: 0 0 0.6rem;
  color: var(--txt-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.task-board-head {
  container-type: inline-size;
  flex-shrink: 0;
  padding: var(--ds-space-3) var(--ds-space-6);
  border-block-end: 1px solid var(--ds-border);
}

.task-board-head__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "lead summary" "picker picker";
  align-items: center;
  gap: var(--ds-space-2) var(--ds-space-3);
}

.task-board-head__lead {
  grid-area: lead;
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
}

.task-board-head__summary {
  grid-area: summary;
  min-inline-size: 0;
  overflow: hidden;
  text-align: end;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-board-head .task-board-picker { grid-area: picker; min-inline-size: 0; padding: 0.25rem; margin: -0.25rem; }

@container (min-width: 53rem) {
  .task-board-head__row {
    grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "lead picker summary";
  }
}

@container (max-width: 34rem) {
  .task-board-head__row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "lead" "picker" "summary";
    row-gap: var(--ds-space-2);
  }

  .task-board-head__summary { text-align: center; line-height: 1.2; }
  .task-board-head__lead { justify-content: center; }
}

@media (max-width: 639px) {
  .task-board-head { padding-inline: var(--ds-space-4); }
}

.task-board-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
}

.task-board-picker__button {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  max-inline-size: min(26rem, 100%);
  min-block-size: 2.25rem;
  padding: var(--ds-space-1) var(--ds-space-4) var(--ds-space-1) var(--ds-space-3);
  border: 1px solid light-dark(var(--ds-border), oklch(from var(--accent) 0.5 min(c, 0.08) h));
  border-radius: var(--ds-radius-full);
  background: var(--ds-cta-soft);
  color: var(--ds-on-cta-soft);
  font-size: var(--ds-font-size-base);
  font-weight: var(--ds-weight-semibold);
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.06);
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

.task-board-picker__button:hover { background: var(--ds-cta-soft-hover); box-shadow: 0 2px 8px oklch(0 0 0 / 0.1); }
.task-board-picker__button:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }

.task-board-picker__icon { flex-shrink: 0; }

.task-board-picker__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-board-picker__caret {
  flex-shrink: 0;
  margin-inline-start: var(--ds-space-1);
  opacity: 0.8;
  transition: rotate 150ms ease;
}

.task-board-picker__button[aria-expanded="true"] .task-board-picker__caret { rotate: 180deg; }

.task-board-picker__menu {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 0;
  min-inline-size: 18rem;
  max-inline-size: min(24rem, calc(100vw - 16px));
  max-block-size: min(70vh, 32rem);
  overflow-y: auto;
  border: 1px solid var(--ds-menu-border);
  border-radius: var(--ds-menu-radius);
  background: var(--ds-menu-bg);
  color: var(--ds-menu-text);
  color: var(--ds-text);
  box-shadow: 0 12px 32px oklch(0 0 0 / 0.18), 0 2px 6px oklch(0 0 0 / 0.08);
}

.task-board-picker__menu::backdrop { background: transparent; }

.task-board-picker__panel { padding: var(--ds-space-2); }

.task-board-picker__title {
  margin: 0;
  padding: var(--ds-space-1) var(--ds-space-2) var(--ds-space-2);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
}

.task-board-picker__options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-board-picker__option {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-2);
  border-radius: var(--ds-radius-lg);
  color: var(--ds-text);
  text-decoration: none;
  outline: none;
}

.task-board-picker__option:hover,
.task-board-picker__option:focus-visible { background: var(--ds-hover); }
.task-board-picker__option:focus-visible { box-shadow: none; outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }

.task-board-picker__option[aria-current="page"],
.task-board-picker__option[aria-current="true"] { background: var(--ds-cta-soft); color: var(--ds-on-cta-soft); }

.task-board-picker__option-icon { flex-shrink: 0; color: var(--ds-text-muted); }
.task-board-picker__option[aria-current="page"] .task-board-picker__option-icon,
.task-board-picker__option[aria-current="true"] .task-board-picker__option-icon { color: inherit; }

.task-board-picker__option-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-inline-size: 0;
}

.task-board-picker__option-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ds-font-size-compact);
  font-weight: var(--ds-weight-semibold);
}

.task-board-picker__option-name:has(.task-board-picker__main) {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.task-board-picker__option-label { overflow: hidden; text-overflow: ellipsis; }
.task-board-picker__main {
  flex-shrink: 0;
  padding: 0 0.4rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-weight-medium);
  line-height: 1.4;
  opacity: 0.75;
}

.task-board-picker__option-detail {
  font-size: var(--ds-font-size-xs);
  color: var(--ds-text-muted);
}

.task-board-picker__option[aria-current="page"] .task-board-picker__option-detail,
.task-board-picker__option[aria-current="true"] .task-board-picker__option-detail { color: inherit; opacity: 0.8; }

.task-board-picker__check { flex-shrink: 0; }

.task-board-picker__footer {
  margin-block-start: var(--ds-space-2);
  padding-block-start: var(--ds-space-2);
  border-block-start: 1px solid var(--ds-border);
}

.task-board-picker__manage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2);
  border-radius: var(--ds-radius-lg);
  color: var(--ds-link);
  font-size: var(--ds-font-size-compact);
  font-weight: var(--ds-weight-semibold);
  text-decoration: none;
  outline: none;
}

.task-board-picker__manage:hover,
.task-board-picker__manage:focus-visible { background: var(--ds-hover); }
.task-board-picker__manage:focus-visible { box-shadow: none; outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }

@media (pointer: coarse) {
  .task-board-picker__option,
  .task-board-picker__manage { min-block-size: 44px; }
}

@media (max-width: 639px) {
  .task-board-picker__menu {
    inset: auto 0 0 0;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: none;
    max-block-size: 80dvh;
    border-inline: none;
    border-block-end: none;
    border-radius: var(--ds-radius-2xl) var(--ds-radius-2xl) 0 0;
  }

  .task-board-picker__menu::backdrop { background: oklch(0 0 0 / 0.45); }

  .task-board-picker__panel { padding: var(--ds-space-3) var(--ds-space-3) calc(var(--ds-space-3) + env(safe-area-inset-bottom)); }
}

.task-destination {
  display: inline-flex;
  min-inline-size: 0;
}

.task-destination__button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-inline-size: 0;
  max-inline-size: 16rem;
  padding: 0 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--txt-muted);
  font-size: 0.7rem;
  line-height: 1.6;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  --hover-size: 0;
  transition: color 120ms ease, border-color 120ms ease;
}

.task-destination__button:hover,
.task-destination__button[aria-expanded="true"] {
  color: var(--txt);
  border-color: var(--border-strong);
}

.task-destination__button:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }

.event-dialog__task-form .task-destination__button {
  padding: 0.2rem 0.6rem;
  border-color: var(--border-strong);
  background: var(--bg-raised);
  color: var(--txt);
}

.task-destination__icon { display: inline-flex; flex-shrink: 0; }

.task-destination__name {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.task-destination__option {
  inline-size: 100%;
  border: none;
  background: transparent;
  text-align: start;
  font: inherit;
  cursor: pointer;
  box-shadow: none;
  --hover-size: 0;
}

button.task-destination__option:hover,
button.task-destination__option:focus-visible { background: var(--ds-hover); }

button.task-destination__option[aria-current="true"] { background: var(--ds-cta-soft); color: var(--ds-on-cta-soft); }

.task-destination__option[aria-current="false"] .task-board-picker__check { visibility: hidden; }

.task-composer {
  gap: 0.3rem;
  max-inline-size: none;
}

.task-composer:focus-within {
  box-shadow: none;
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: -1px;
}

input.task-composer__title,
textarea.task-composer__description {
  inline-size: 100%;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  filter: none;
  color: var(--txt);
}

input.task-composer__title {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
}

textarea.task-composer__description {
  font-size: 0.75rem;
  line-height: 1.35;
  resize: none;
  field-sizing: content;
}

input.task-composer__title::placeholder,
textarea.task-composer__description::placeholder {
  color: var(--txt-muted);
  font-weight: inherit;
}

input.task-composer__title:focus,
textarea.task-composer__description:focus {
  box-shadow: none;
  outline: none;
}

.task-composer__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  margin-top: 0.15rem;
}

.task-composer .task-composer__chips.hidden,
.task-composer .task-composer__description.hidden,
.task-composer .task-composer__chip.hidden {
  display: none;
}

.task-composer .task-composer__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--txt-muted);
  font-size: 0.7rem;
  line-height: 1.6;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  --hover-size: 0;
  transition: opacity 120ms ease;
}

.task-composer .task-composer__chip:hover {
  opacity: 0.75;
}

.task-composer .task-composer__chip--set {
  border-color: var(--color-link);
  background: oklch(from var(--color-link) l c h / 0.12);
  color: var(--color-link);
}

.task-composer__chip-clear {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  cursor: pointer;
}

.task-composer:not(.task-composer--open) {
  border: 1px dashed var(--border);
  background: transparent;
  cursor: text;
}

.task-composer:not(.task-composer--open):hover { border-color: var(--color-link); }

.task-composer:not(.task-composer--open) .task-composer__extra { display: none; }


.task-composer__title-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  cursor: text;
}

.task-composer__plus {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 999px;
  background: oklch(from var(--color-link) l c h / 0.12);
  color: var(--color-link);
}

.task-composer__head,
.task-composer__due {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.task-composer__head [hidden],
.task-composer__chips [hidden],
.task-composer__due.hidden { display: none; }

.task-composer {
  --composer-chip-size: 0.7rem;
}

.task-composer .task-destination__button,
.task-composer .task-picker,
.task-composer .task-composer__chip,
.task-composer button.task-repeat__trigger {
  gap: 4px;
  padding: 0 0.5rem;
  font-size: var(--composer-chip-size);
  line-height: 1.6;
}

.task-composer .task-picker {
  padding-block: 0;
  cursor: pointer;
}

.task-composer .task-picker:hover,
.task-composer .task-picker:focus-within {
  border-color: var(--border-strong);
  color: var(--txt);
}

.task-composer select.task-inline-select {
  block-size: auto;
  min-block-size: 0;
  font-size: var(--composer-chip-size);
  line-height: inherit;
}

.task-picker__caret { flex-shrink: 0; pointer-events: none; }

.task-composer .task-description.task-composer__description {
  padding-inline-start: calc(22px + 0.45rem);
}

.task-composer__description .lexxy-editor__content {
  padding-inline: 0;
}

@media (pointer: coarse) {
  .task-composer {
    --composer-chip-size: 16px;
  }

  .task-composer .task-composer__chips,
  .task-composer .task-composer__head {
    gap: 0.5rem;
  }
}

.task-composer__description lexxy-editor,
.task-composer__description .lexxy-editor__content {
  min-block-size: 2.5rem;
  max-block-size: 12rem;
}

.task-composer__body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.task-composer__body .task-tags,
.task-composer .task-repeat { padding-left: 0; }

.task-composer__description { font-size: 0.8rem; }

.task-composer__error {
  margin: 0;
  color: var(--color-negative);
  font-size: 0.75rem;
}

button.task-composer__repeat-clear {
  --hover-size: 0;
  display: inline-grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--txt-muted);
  box-shadow: none;
  cursor: pointer;
}

.task-composer__pop {
  position: fixed;
  inset: auto;
  margin: 0;
}

.task-composer__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
}

.task-composer__keys {
  margin-inline-end: auto;
  color: var(--txt-muted);
  font-size: 0.7rem;
}

button.task-composer__cancel,
button.task-composer__create {
  --hover-size: 0;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
}

button.task-composer__cancel { border: 1px solid var(--border); background: transparent; color: var(--txt-muted); }
button.task-composer__create { border: 0; background: var(--color-link); color: var(--accent-foreground); }
button.task-composer__create:disabled { opacity: 0.55; cursor: progress; }

@media (max-width: 640px) {
  .task-composer__keys { display: none; }
}

.task-agenda-pop__calendars {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-agenda-pop button.task-agenda-pop__calendar-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  inline-size: 100%;
  min-block-size: 2.25rem;
  padding: 0.375rem 0.5rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--txt);
  font-size: 0.875rem;
  text-align: start;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  --hover-size: 0;
}

.task-agenda-pop button.task-agenda-pop__calendar-option:hover,
.task-agenda-pop button.task-agenda-pop__calendar-option:focus-visible {
  background: var(--ds-hover);
  color: var(--color-link);
}

@media (pointer: coarse) {
  .task-agenda-pop button.task-agenda-pop__calendar-option { min-block-size: 44px; }
}

.task-org-board {
  margin-block-end: 2rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface);
}
.task-org-board__head { display: flex; align-items: center; gap: 0.5rem; margin-block-end: 0.25rem; }
.task-org-board__status {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-positive);
  background: oklch(from var(--color-positive) l c h / 0.12);
}
.task-org-board__status--off { color: var(--txt-muted); background: var(--bg); border: 1px solid var(--border); }
.task-org-board__hint,
.task-org-board__note,
.task-org-board__now { margin: 0 0 0.75rem; font-size: 13px; color: var(--txt-muted); }
.task-org-board__now { color: var(--txt); font-weight: 500; }
.task-org-board__note { padding: 0.6rem 0.75rem; border-radius: 0.6rem; border: 1px dashed var(--border-strong, var(--border)); color: var(--txt); }
.task-org-board__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; }
.task-org-board__field { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 14rem; min-inline-size: 0; font-size: 12px; color: var(--txt-muted); }
select.task-org-board__select {
  inline-size: 100%;
  padding: 0.4rem 0.6rem;
  padding-inline-end: var(--seta-do-select);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 0.6rem;
  background-color: var(--bg);
  color: var(--txt);
  font-size: 13px;
  box-shadow: none;
  outline: none;
}
select.task-org-board__select:focus { outline: 2px solid var(--ds-focus-ring); outline-offset: -1px; }
button.task-org-board__button { font-size: 13px; --btn-padding: 0.45em 1.1em; }
button.task-org-board__button:disabled { opacity: 0.5; cursor: not-allowed; }
.task-org-board__small { margin: 0.6rem 0 0; font-size: 12px; color: var(--txt-muted); }
.task-org-board__enable { margin-block-start: 1rem; }

.tasks-org-off {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 1rem;
  border-block-end: 1px solid var(--border);
  background: var(--surface);
  color: var(--txt-muted);
  font-size: 13px;
  line-height: 1.4;
}
.tasks-org-off svg { flex-shrink: 0; margin-block-start: 0.15rem; }
@media (min-width: 100ch) {
  .tasks-org-off { padding-inline: 1.5rem; }
}