/* ORBIT Empresa · paginas/tarefas.css — as Tarefas: a página Tarefas, o Kanban e a Lista (a FQ da construção, 23/10).

   A cópia da página aprovada (4-construcao/referencia/quadro/parte.css, a terceira volta com as mudanças de 22:11 e a
   Lista, e o tarefas-comum.css dela, 4 a 8), com o prefixo da área (tq-: esta folha carrega em todas as páginas). Os
   componentes são os do sistema visual (visual.css: o-cartao, o-pill, o-tag, o-chip, o-barra, o-lista, o-linha, o-filtro,
   o-detalhe, o-vazio, o-aviso, o-menu, o-procurar, o-esqueleto), sem os redefinir, e as peças das outras páginas que o OS
   carrega em todas: o cabeçalho (casca-cabeca), as linhas e os títulos de secção da Visão (vis-linha, vis-seccao-titulo)
   e o número da gestão (g-grupo-n). As cores só das fichas, a escala 4/8 e os pontos de viragem do visual.css: o
   telemóvel até 53,75 em (860 px, ou toque deitado com pouca altura), duas colunas até 74,9375 em (1199 px), as quatro
   daí para cima.

   Na proposta, os estados eram âncoras (:target); aqui são classes que o tarefas.js põe no tabuleiro: tq-tabuleiro--
   kanban ou --lista (a vista), --projeto (um projeto escolhido), --precisa (o «Precisa de ti» escolhido: no telemóvel,
   só as que precisam de ti) e --filtrado (um projeto, o tempo, a procura ou a origem); e nas colunas e nos estados:
   data-abre (a coluna que abre no telemóvel), --vazia, --precisa e --marcada (a que veio pelo ?estado=). */

/* ── a página ──────────────────────────────────────────────────────────────────────────────────────────────────── */
/* 1280 px no máximo (a 1440, 80 px de cada lado): as quatro colunas pedem mais do que os 1160 px das outras páginas */
.tq-pagina { --largura: 1280px; }

/* o cabeçalho: o interruptor «Lista | Kanban» à direita do título (no telemóvel, na mesma linha) */
.tq-cabeca { flex-wrap: nowrap; align-items: center; }
.tq-cabeca > .casca-cabeca-texto { flex: 1 1 auto; }
/* uma caixa com as duas opções, a escolhida com o acento, as duas com a mesma largura, sem ícones */
.tq-vista {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--e-1); padding: var(--e-1);
  border: 1px solid var(--linha); border-radius: var(--r-caixa); background: var(--painel-2);
}
.tq-vista-op {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 72px; min-height: 32px;
  padding: 0 var(--e-3); border: 1px solid transparent; border-radius: var(--r); background: none; color: var(--ink-2);
  font: 500 var(--t-13)/1 var(--sans); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur), color var(--dur);
}
.tq-vista-op:hover { background: var(--hover); color: var(--ink); }
.tq-vista-op:focus-visible { outline-offset: -2px; }
.tq-vista-op[aria-pressed="true"] { border-color: var(--accent-linha); background: var(--accent-fundo); color: var(--accent-texto); }
/* no toque, 32 px à vista e 44 de alvo: o cabeçalho não cresce */
@media (max-width: 53.75em), (pointer: coarse) {
  .tq-vista-op::before { content: ""; position: absolute; inset: -6px 0; }
}

/* o que se vê pode estar atrasado (o vigia parado): uma linha fina por cima de tudo */
.tq-atrasada { display: flex; align-items: flex-start; gap: var(--e-2); margin: 0 0 var(--e-4); color: var(--ink-2); font-size: var(--t-13); line-height: 1.45; }
.tq-atrasada > .o-ic { flex: none; height: 1.45em; color: var(--aviso); }

/* ── «Precisa de ti» no computador: até três linhas, «Ver todas (4)» abre a quarta ─────────────────────────────── */
/* compacto, para o quadro começar cedo: as linhas da Visão (o-linha, vis-linha), uma frase cada uma (o nome da tarefa
   leva a ela) e as ações com o botão fino secundário, nunca o laranja */
.tq-precisa { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; margin: 0 0 var(--e-6); }
.tq-precisa-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-4); min-width: 0; min-height: 28px; }
.tq-precisa-lista { border-left: 2px solid var(--aviso); }
.tq-pl-corpo { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.tq-pl-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.tq-acao { white-space: nowrap; }
.tq-precisa-lista > .tq-precisa-mais { display: none; }
.tq-frase { margin: 0; color: var(--ink-2); font: 400 var(--t-13)/1.5 var(--sans); overflow-wrap: break-word; }
.tq-frase-nome { color: var(--ink); font-weight: 600; text-decoration: none; }
.tq-frase-nome:hover { text-decoration: underline; }
.tq-precisa .tq-ic--erro { color: var(--erro); }

/* «Precisa de ti · 4 ›»: o aviso da casa numa linha só. É a forma do telemóvel e, no computador, a de quando há um
   projeto escolhido (as três linhas eram de tarefas de fora do projeto); no computador, ocupa só o que diz */
.tq-precisa-uma {
  display: none; align-items: center; gap: var(--e-3); width: max-content; max-width: 100%; min-height: var(--ctl-campo);
  margin: 0 0 var(--e-6); padding: 0 var(--e-3) 0 var(--e-4);
  border: 1px solid var(--aviso-fundo); border-left: 2px solid var(--aviso); border-radius: var(--r);
  background: var(--aviso-fundo); color: var(--aviso); font: 600 var(--t-14)/1.2 var(--sans); text-align: left; cursor: pointer;
}
.tq-precisa-uma > .o-ic { flex: none; }
.tq-precisa-uma > span { flex: 1; min-width: 0; }
.tq-precisa-uma:hover { border-color: var(--aviso); }
.tq-tabuleiro--projeto > .tq-precisa { display: none; }
.tq-tabuleiro--projeto > .tq-precisa-uma { display: flex; }
/* o filtro dos estados, 2 × 2, é só do telemóvel (mais abaixo) */
.tq-mostrar { display: none; }

/* ── os projetos: os cartões por cima do quadro, que o filtram ─────────────────────────────────────────────────── */
.tq-projetos { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; margin: 0 0 var(--e-6); }
.tq-projetos-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-4); min-width: 0; min-height: 28px; }
.tq-projetos-titulo > .o-sep-n { margin-left: 2px; }
.tq-projetos-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4) var(--e-6); align-items: stretch; min-width: 0; }

/* um cartão com a ligação (ou o botão) esticada por cima dele: o título leva-a, o resto fica por cima quando é ligação */
.tq-cartao { position: relative; }
.tq-cartao:hover { border-color: var(--linha-2); background: var(--painel-2); }
.tq-cartao-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; text-decoration: none; cursor: pointer; }
.tq-cartao-link::after { content: ""; position: absolute; inset: 0; }
.tq-cartao-link:focus-visible { outline: none; }
.tq-cartao:has(.tq-cartao-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* um cartão de projeto: a pasta, o nome com a pill e, em baixo, o progresso; com «Hoje» ou «Esta semana», quantas
   tarefas dele há nesse tempo (só nos não escolhidos) */
.tq-proj { gap: var(--e-3); }
.tq-proj-cabeca { display: flex; align-items: flex-start; gap: var(--e-2); min-width: 0; }
.tq-proj-ic { display: inline-grid; place-items: center; flex: none; height: calc(var(--t-15) * 1.45); color: var(--ink-3); }
.tq-proj-titulo { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--ink); font: 600 var(--t-15)/1.45 var(--sans); overflow-wrap: break-word; }
/* num cartão estreito (um telemóvel pequeno), a pill desce para baixo do nome */
.tq-proj-titulo .tq-junto { max-width: 100%; flex-wrap: wrap; row-gap: var(--e-1); white-space: normal; overflow-wrap: anywhere; }
.tq-proj-barra { margin-top: auto; }   /* a barra assenta no fundo: os cartões de uma linha têm a mesma altura */
.tq-proj-barra .o-barra-cabeca { flex-wrap: wrap; gap: 2px var(--e-3); }
.tq-proj-barra .o-barra-cabeca > span { white-space: nowrap; }
.tq-proj-erro { flex: none; color: var(--erro); }
.tq-proj-quando { margin: 0; color: var(--ink-2); font: 500 var(--t-12)/1.4 var(--mono); }
.tq-proj-quando--nada { color: var(--ink-3); }
/* a barra em partes, pelos estados: uma parte por tarefa (as por começar ficam no trilho) */
.tq-partes { display: flex; gap: 2px; }
.tq-parte { flex: 1 1 0; min-width: 0; height: 100%; }
.tq-partes--proporcao > .tq-parte { flex: 0 0 auto; width: var(--v, 0%); }
.tq-parte--ok { background: var(--ok); }
.tq-parte--curso { background: var(--accent); }
.tq-parte--erro { background: var(--erro); }

/* o escolhido: o contorno do acento, o fundo em destaque e o visto no lugar da pasta; com três por linha e só dois
   projetos, ocupa duas colunas (o «O que é» cabe numa linha); com dois por linha, ou com três projetos ou mais, uma */
.tq-proj--escolhido { grid-column: span 2; border-color: var(--accent); background: radial-gradient(circle at 18% 0%, rgb(var(--accent-texto-rgb) / .06), transparent 55%), var(--painel-2); }
.tq-proj--escolhido:hover { border-color: var(--accent); }
.tq-projetos-fila:has(> .tq-proj:nth-child(3)) > .tq-proj--escolhido { grid-column: auto; }
.tq-projetos-fila:has(.tq-proj--escolhido) > .tq-proj:not(.tq-proj--escolhido) { align-self: start; }
.tq-proj--escolhido .tq-proj-ic { color: var(--accent-texto); }
.tq-proj-texto {
  margin: 0; color: var(--ink-2); font-size: var(--t-13); line-height: 1.5; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tq-proj-posta { white-space: nowrap; color: var(--ink-3); }

/* ainda sem projetos: uma linha tracejada no lugar deles, que diz como nascem */
.tq-projetos-vazio { padding: var(--e-3) var(--e-4); }
.tq-projetos-vazio > p { margin: 0; color: var(--ink-2); font-size: var(--t-13); line-height: 1.5; }
.tq-sem-partir { white-space: nowrap; }   /* «junta-as»: a linha não parte no hífen */

/* ── a procura e os filtros (o tempo, a origem e os filtros ligados) ────────────────────────────────────────────── */
.tq-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); min-width: 0; margin: 0 0 var(--e-6); }
/* com a linha do tempo por baixo, mais perto dela do que do quadro (também no telemóvel) */
.tq-filtros.tq-filtros--nota { margin-bottom: var(--e-3); }
.tq-procurar { flex: 0 1 360px; }
.tq-menu-btn { min-height: var(--ctl-campo); }
.tq-filtros > .tq-quando { flex: none; }
.tq-quando .o-filtro { cursor: pointer; }
@media (min-width: 53.8125em) and (pointer: fine) {
  .tq-quando .o-filtro, .tq-filtro-ligado { min-height: 32px; }
}
.tq-menu-nome { color: var(--ink-2); }
.tq-menu-seta { color: var(--ink-3); transition: transform var(--dur); }
.tq-menu-btn[aria-expanded="true"] { border-color: var(--linha-campo); background: var(--painel-3); }
.tq-menu-btn[aria-expanded="true"] .tq-menu-seta { transform: rotate(180deg); }
.tq-menu .o-menu-item[aria-checked="true"], .tq-menu .o-menu-item[aria-checked="true"] .o-ic { color: var(--accent-texto); }
.tq-menu-vazio { width: 14px; height: 14px; flex: none; }   /* o lugar do ✓ nos itens não escolhidos: o texto fica alinhado */
/* o rótulo de um grupo do menu (o «Origem» do botão «Filtrar»): o ar do o-mais-rotulo da casa */
.tq-menu-rotulo {
  padding: var(--e-1) var(--e-2); color: var(--ink-3);
  font: 600 var(--t-11)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.tq-menu-rotulo + .o-menu-item { margin-top: 2px; }
/* no telemóvel, a origem passa para um só botão (mais abaixo); escolhida outra que não «Tudo», o botão marca-o */
.tq-filtrar { display: none; }
.tq-filtrar--ligado { border-color: var(--accent-linha); color: var(--accent-texto); }
/* o filtro ligado: a peça da casa (o-filtro), igual ao «Tarefa: … ✕» do Chat; tira-se no ✕ */
.tq-filtro-linha { display: flex; min-width: 0; }
.tq-filtro-ligado { max-width: 100%; min-width: 0; cursor: pointer; }
.tq-filtro-ligado > .o-ic { flex: none; }
.tq-filtro-ligado-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tq-lista-sai { display: none; }

/* «Hoje» ou «Esta semana» escolhido: a linha que diz o que é, logo por baixo da fila dos filtros */
.tq-quando-nota { margin: 0 0 var(--e-6); color: var(--ink-3); font-size: var(--t-13); line-height: 1.5; }
.tq-quando-nota > b { color: var(--ink-2); font-weight: 600; }

/* ── o quadro: quatro colunas pela ordem do dono do OS ────────────────────────────────────────────────────────────── */
.tq-quadro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-6); align-items: start; }
.tq-coluna { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.tq-coluna-cabeca { margin: 0; padding: 0 0 var(--e-2); border-bottom: 1px solid var(--linha); }
.tq-ponto { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ink-3); }
.tq-ponto--por-comecar { border: 1px solid var(--ink-3); background: transparent; }
.tq-ponto--em-curso { background: var(--accent); }
.tq-ponto--concluida { background: var(--ok); }
.tq-ponto--com-erro { background: var(--erro); }
.tq-ver-concluidas { align-self: flex-start; }
.tq-ver-postas { margin-top: var(--e-2); }
/* quem chega de um número da Visão (?estado=) vê a coluna marcada, com o traço do separador escolhido */
@media (min-width: 53.8125em) {
  .tq-coluna--marcada > .tq-coluna-cabeca { padding-bottom: calc(var(--e-2) - 1px); border-bottom: 2px solid var(--accent); color: var(--ink); }
}
/* uma coluna sem tarefas no tempo ou no projeto escolhido: o vazio da casa, com a altura de um cartão pequeno */
.tq-coluna-vazio { padding: var(--e-6) var(--e-4); border-radius: var(--r-cartao); }
.tq-coluna-vazio .o-vazio-texto { color: var(--ink-3); }
/* fora do tempo escolhido mas a precisar de ti: só com o «Precisa de ti» escolhido, no telemóvel */
.tq-quadro .tq-so-precisa { display: none; }

/* ── o cartão de uma tarefa ─────────────────────────────────────────────────────────────────────────────────────── */
.tq-cartao-cabeca { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.tq-cartao-titulo { margin: 0; color: var(--ink); font: 600 var(--t-15)/1.45 var(--sans); overflow-wrap: break-word; }
/* a pill segue a última palavra do título, presa a ela: as duas num inline-flex centrado */
.tq-junto { display: inline-flex; align-items: center; gap: var(--e-2); white-space: nowrap; }
/* um título que acaba numa palavra comprida (o nome de um ficheiro, um endereço) parte-se dentro dela, e a pill desce para
   a linha de baixo: nada sai do cartão nem da página (a revisão de 23/10). Uma palavra normal fica com a pill ao lado */
.tq-cartao-titulo .tq-junto { max-width: 100%; flex-wrap: wrap; row-gap: var(--e-1); white-space: normal; overflow-wrap: anywhere; }
.tq-cartao-frase { margin: 0; color: var(--ink); font-size: var(--t-13); line-height: 1.5; }
.tq-cartao-frase > b { color: var(--aviso); font-weight: 600; }
.tq-resumo {
  margin: 0; color: var(--ink-2); font-size: var(--t-13); line-height: 1.5; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* o «Como está» pode trazer o motivo de um agente, com um caminho comprido: parte-se onde for preciso */
.tq-como { margin: 0; color: var(--ink-2); font-size: var(--t-13); line-height: 1.5; overflow-wrap: anywhere; }
.tq-como > b { font-weight: 600; }
.tq-como--erro > b { color: var(--erro); }
.tq-como--ok > b { color: var(--ok); }
.tq-como--espera > b { color: var(--aviso); }
/* o progresso, uma vez: a barra da casa (o-barra), só com os passos */
.tq-barra .o-barra-cabeca b { color: var(--ink); font-weight: 600; }
.tq-barra--erro .o-barra-valor { background: var(--erro); }
/* o «Escolher» de uma decisão (estados.html): por cima da ligação que cobre o cartão */
.tq-cartao-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.tq-cartao-acao { position: relative; z-index: 1; }
/* o pé: quem trabalha (os papéis, os agentes e o projeto) e, numa linha calma, a origem e a data do estado */
.tq-cartao-pe { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; padding-top: var(--e-3); border-top: 1px solid var(--linha-fraca); }
.tq-quem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-width: 0; margin: 0; }
.tq-quem-ag { display: inline-flex; align-items: center; gap: var(--e-1); color: var(--ink-2); font: 500 var(--t-12)/1 var(--mono); white-space: nowrap; }
.tq-quem-ag > .o-ic { color: var(--ink-3); }
.tq-cartao-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-width: 0; margin: 0;
  color: var(--ink-3); font: 400 var(--t-12)/1.4 var(--mono);
}
/* quem pediu: sem nome, o começo do email, que não tem onde partir (parte-se dentro dele) */
.tq-origem { color: var(--ink-2); overflow-wrap: anywhere; }
/* a tarefa que precisa de ti: o traço amarelo à esquerda, para se ver de longe */
.tq-cartao--precisa { border-left: 2px solid var(--aviso); }
.tq-cartao--precisa:hover { border-left-color: var(--aviso); }

/* o projeto de uma tarefa: uma ligação com o ar do o-chip (a pasta, o nome e a seta), que o escolhe; com um projeto
   escolhido, a ordem nele (o o-chip da casa). No toque, 32 px à vista e 44 de alvo */
.tq-projeto {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--e-1); flex: none; max-width: 100%;
  min-height: 24px; padding: 2px var(--e-2); border: 1px solid var(--linha-2); border-radius: var(--r-pilula);
  background: var(--painel-2); color: var(--ink-2); font: 500 var(--t-12)/1 var(--mono); text-decoration: none; white-space: nowrap;
}
.tq-projeto > .o-ic { flex: none; color: var(--ink-3); }
.tq-projeto-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tq-projeto:hover { border-color: var(--accent-linha); color: var(--accent-texto); }
.tq-projeto:hover > .o-ic { color: var(--accent-texto); }
.tq-projeto:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 53.75em), (pointer: coarse) {
  .tq-projeto { min-height: 32px; padding: 0 var(--e-3); }
  .tq-projeto::before { content: ""; position: absolute; inset: -7px -2px; }
}
/* o «Para quando»: «Para hoje» destaca-se pelo peso, nunca por uma cor (as cores são dos estados) */
.tq-para { color: var(--ink-2); }
.tq-para--hoje { color: var(--ink); font-weight: 600; }

/* ── as postas de lado: recolhidas no fim ──────────────────────────────────────────────────────────────────────── */
.tq-postas { margin-top: var(--e-8); }
.tq-postas > summary { gap: var(--e-2); }
.tq-postas .o-detalhe-corpo { padding-top: 0; }
.tq-postas .vis-linha { border-top-color: var(--linha-fraca); }
.tq-posta-meta { margin-top: var(--e-1); }

/* ── os vazios, a carregar e o erro ─────────────────────────────────────────────────────────────────────────────── */
.tq-tabuleiro .o-vazio.tq-quadro-vazio, .tq-tabuleiro .o-vazio.tq-primeiro-dia { padding: var(--e-8) var(--e-4); }
.tq-esqueleto-grupo { display: flex; flex-direction: column; min-width: 0; }
.tq-esqueleto--85 { width: 85%; }
.tq-esqueleto--40 { width: 40%; }
.tq-esqueleto--titulo { height: 14px; }
.tq-falhou .o-detalhe { margin-top: var(--e-3); background: var(--painel); }
.tq-falhou .o-detalhe-corpo { font-family: var(--mono); font-size: var(--t-12); overflow-wrap: anywhere; }
.tq-falhou .o-detalhe-corpo > p { margin: 0; }

/* ── duas colunas (o computador estreito e o tablet) ───────────────────────────────────────────────────────────── */
@media (min-width: 53.8125em) and (max-width: 74.9375em) {
  .tq-quadro { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--e-8); }
  .tq-projetos-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tq-proj--escolhido { grid-column: auto; }
}

/* ── a Lista: o relatório das tarefas ───────────────────────────────────────────────────────────────────────────── */
/* um resumo curto por cima e, por baixo, os quatro estados pela ordem do Kanban, cada tarefa numa linha em palavras
   simples (o título, a frase, quem pediu e desde quando, e o projeto). No computador, cada estado é uma tabela sem
   cabeçalho, com as colunas alinhadas de um estado para o outro */
.tq-lista-resumo { margin: 0 0 var(--e-6); max-width: 96ch; color: var(--ink-2); font-size: var(--t-corpo); line-height: 1.6; }
.tq-lista-resumo b { color: var(--ink); font-weight: 600; }
.tq-lista { display: flex; flex-direction: column; gap: var(--e-8); min-width: 0; }
.tq-lista-seccao { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; scroll-margin-top: calc(var(--topo-alt) + var(--e-4)); }
.tq-lista-cabeca { margin: 0; }
/* quem chega por um estado (?estado=) vê o rótulo dele com o acento, como a coluna marcada no Kanban */
.tq-lista-seccao--marcada > .tq-lista-cabeca { color: var(--accent-texto); }
/* uma linha: as quatro colunas, com as linhas de base alinhadas; a linha toda abre a tarefa (o título estica-se por cima
   dela); o projeto fica por cima (nunca uma ligação dentro de outra) */
.tq-ll {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 232px 136px;
  column-gap: var(--e-6); row-gap: var(--e-1); align-items: baseline; min-height: 44px;
  padding: var(--e-3) var(--e-4) var(--e-3) calc(var(--e-4) - 2px);   /* os 2 px do traço do «Precisa de ti» */
  border-top: 1px solid var(--linha); border-left: 2px solid transparent; transition: background-color var(--dur);
}
.tq-lista-linhas > li:first-child { border-top: 0; }
.tq-ll:hover { background: var(--hover); }
.tq-ll:has(.tq-ll-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.tq-ll--precisa { border-left-color: var(--aviso); }
.tq-lista .tq-ll--so-precisa, .tq-lista-linhas--so-precisa { display: none; }
.tq-ll-titulo { grid-column: 1; margin: 0; color: var(--ink); font: 600 var(--t-14)/1.45 var(--sans); overflow-wrap: break-word; }
.tq-ll-link { color: inherit; text-decoration: none; }
.tq-ll-link::after { content: ""; position: absolute; inset: 0; }
.tq-ll-link:focus-visible { outline: none; }
.tq-ll:hover .tq-ll-link { text-decoration: underline; text-underline-offset: 2px; }
.tq-ll-frase { grid-column: 2; margin: 0; color: var(--ink-2); font-size: var(--t-13); line-height: 1.5; overflow-wrap: break-word; }
.tq-ll-frase > b { font-weight: 600; }
.tq-ll-frase--ok > b { color: var(--ok); }
.tq-ll-frase--erro > b { color: var(--erro); }
.tq-ll-precisa > b { color: var(--aviso); }
/* a IA a trabalhar agora: o ponto da casa à frente da frase */
.tq-ll-frase > .o-ponto { margin-right: var(--e-2); vertical-align: 1px; }
.tq-ll-pe { display: contents; }
/* quem e quando em texto corrido: o nome, o ponto e a primeira palavra da data juntos (a linha parte dentro da data) */
.tq-ll-meta { grid-column: 3; min-width: 0; margin: 0; color: var(--ink-3); font: 400 var(--t-12)/1.45 var(--mono); }
.tq-ll-junto { white-space: nowrap; }
.tq-ll-junto > .tq-origem { white-space: normal; }   /* um nome que não cabe parte-se dentro dele; o ponto fica preso ao fim */
.tq-ll-para { display: block; margin-top: var(--e-1); }
.tq-ll-onde { grid-column: 4; justify-self: start; max-width: 100%; }
/* com rato e a quatro colunas, o projeto (24 px) fica ao centro da linha do título (20 px) e não a estica */
@media (min-width: 75em) and (pointer: fine) {
  .tq-ll-onde { align-self: start; margin-block: -2px; }
}
/* as postas de lado na Lista: a mesma linha, sem pílula; a linha não abre nada, e o «Reabrir» fica por baixo da frase */
.tq-ll--posta:hover { background: transparent; }
.tq-ll-reabrir { grid-column: 2; justify-self: start; margin-top: var(--e-1); }
.tq-postas--lista .o-detalhe-corpo { padding: 0; }
/* «Ver todas as concluídas ›»: a última linha da caixa das concluídas */
.tq-ll-ver {
  display: flex; align-items: center; gap: var(--e-1); width: 100%; min-height: 40px; padding: 0 var(--e-4); border: 0;
  border-top: 1px solid var(--linha); background: none; color: var(--ink-2); font: 500 var(--t-13)/1.3 var(--sans);
  text-align: left; cursor: pointer;
}
.tq-ll-ver > .o-ic { color: var(--ink-3); }
.tq-ll-ver:hover { background: var(--hover); color: var(--ink); }
.tq-ll-ver:focus-visible { outline-offset: -2px; }
.tq-ll-mais { list-style: none; }
.tq-lista-linhas > .tq-ll-mais:first-child > .tq-ll-ver { border-top: 0; }
/* um estado sem nada: uma linha na caixa tracejada da casa */
.tq-lista-seccao > .tq-lista-vazio {
  align-items: flex-start; justify-content: center; min-height: 44px; padding: var(--e-2) var(--e-4); border-radius: var(--r-cartao);
  text-align: left;
}
.tq-lista-vazio .o-vazio-texto { color: var(--ink-3); }
/* a carregar: as linhas em esqueleto, nas colunas da tabela */
.tq-ll--esqueleto { align-items: center; pointer-events: none; }
.tq-ll--esqueleto > .o-esqueleto { margin: 0; }
.tq-ll--esqueleto > .o-esqueleto:nth-child(1) { width: 72%; }
.tq-ll--esqueleto > .o-esqueleto:nth-child(2) { width: 88%; }
.tq-ll--esqueleto > .o-esqueleto:nth-child(3) { width: 64%; }
.tq-lista-resumo.tq-esqueleto-grupo { display: flex; flex-direction: column; max-width: 720px; }
.tq-lista-resumo.tq-esqueleto-grupo > .o-esqueleto { margin-top: 0; }
.tq-lista-resumo.tq-esqueleto-grupo > .o-esqueleto + .o-esqueleto { margin-top: var(--e-2); }

/* no computador estreito, três colunas: o projeto desce para baixo de quem e quando, na mesma coluna */
@media (min-width: 53.8125em) and (max-width: 74.9375em) {
  .tq-ll { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 232px; column-gap: var(--e-4); }
  .tq-ll-pe { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); grid-column: 3; min-width: 0; }
  .tq-ll-onde { grid-column: auto; }
}

/* ── o telemóvel (até 860 px, ou toque deitado com pouca altura) ───────────────────────────────────────────────── */
/* ── as ações (a FA, 23/10): o ⋯ do projeto escolhido e as janelas dele ─────────────────────────────────────────── */
/* o ⋯ (só o admin), ao meio da primeira linha do nome (o nome pode partir em duas), por cima da ligação esticada do
   cartão; o alvo de 44 px sai o mesmo para cima e para baixo da linha do nome, sobre o espaço à volta dela. O menu da
   casa abre por baixo dele, encostado à direita do cartão */
.tq-proj-ancora { flex: none; align-self: flex-start; }
.tq-proj-mais {
  --tq-t: var(--t-15);
  --tq-sobra: calc((var(--tq-t) * 1.45 - var(--ctl)) / 2);
  position: relative; z-index: 1; flex: none; margin: var(--tq-sobra) calc(-1 * var(--e-2)) var(--tq-sobra) 0;
}
.tq-proj-mais[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
.tq-acoes { top: calc(100% + var(--e-1)); right: calc(-1 * var(--e-2)); min-width: 256px; }
.tq-acoes-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.tq-acoes-nome { min-width: 0; }
/* «Juntar tarefas ao projeto»: uma tarefa por linha, para marcar, com o estado e de quem é por baixo do nome */
.tq-juntar { max-height: min(50vh, 360px); margin: 0; overflow-y: auto; border: 1px solid var(--linha); border-radius: var(--r-caixa); }
.tq-juntar > li + li { border-top: 1px solid var(--linha); }
.tq-juntar-item { padding: var(--e-2) var(--e-3); }
.tq-juntar-item:hover { background: var(--hover); }
.tq-juntar-texto { min-width: 0; }
.tq-juntar-nome { display: block; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }

@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) {
  /* as etiquetas pequenas a 12 px (a regra da casa: nada abaixo de 12 no telemóvel) */
  .tq-tabuleiro .o-tag, .tq-tabuleiro .o-pill, .tq-tabuleiro .o-chip, .tq-tabuleiro .o-grupo-rotulo, .tq-tabuleiro .o-barra-cabeca,
  .tq-tabuleiro .o-sep-n { font-size: var(--t-12); }
  .tq-precisa { display: none; }
  /* a linha «Precisa de ti · 4 ›», sempre, com a largura toda; escolhida, com o traço */
  .tq-precisa-uma, .tq-tabuleiro--projeto > .tq-precisa-uma {
    display: flex; width: 100%; min-height: 48px; margin-bottom: var(--e-5); font-size: var(--t-15);
  }
  .tq-tabuleiro--precisa > .tq-precisa-uma { border-color: var(--aviso); }
  /* os projetos: uma fila que desliza para o lado dentro dela, de ponta a ponta do ecrã (a página não desliza; é a
     exceção desta página, como os separadores e as etiquetas da casa); cada cartão com 288 px, para se ver a ponta do
     seguinte */
  .tq-projetos { gap: var(--e-2); margin-bottom: var(--e-4); }
  .tq-projetos-fila {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(288px, calc(100% - 56px)); gap: var(--e-3);
    margin: calc(-1 * var(--e-1)) calc(-1 * var(--margem-d)) 0 calc(-1 * var(--margem-e));
    padding: var(--e-1) var(--margem-d) var(--e-1) var(--margem-e);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem-e) var(--margem-d);
    scrollbar-width: none;
  }
  .tq-projetos-fila::-webkit-scrollbar { display: none; }
  .tq-proj { scroll-snap-align: start; }
  .tq-proj-titulo { font-size: var(--t-16); }   /* o nome a 16, como o dos cartões das tarefas */
  .tq-proj-ic { height: calc(var(--t-16) * 1.45); }
  .tq-proj--escolhido { grid-column: auto; align-self: start; }
  .tq-proj-posta { display: block; }
  .tq-proj-mais { --tq-t: var(--t-16); margin-right: calc(-1 * var(--e-3)); }
  /* o ⋯ numa folha de baixo (a do «Mais» da casa), com o véu: fixa, não fica presa à fila que desliza */
  .tq-acoes {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: var(--z-veu);
    width: auto; min-width: 0; max-width: none; padding: var(--e-2) var(--margem-d) calc(var(--e-4) + env(safe-area-inset-bottom, 0px)) var(--margem-e);
    border-width: 1px 0 0; border-radius: var(--r-janela) var(--r-janela) 0 0; animation: o-entra-baixo var(--dur-2) ease-out;
  }
  .tq-acoes .o-menu-item { min-height: 48px; }
  .tq-acoes-cabeca { margin-bottom: var(--e-1); padding: var(--e-1) 0 var(--e-2) var(--e-3); }
  /* o filtro dos estados (só no Kanban): a peça do painel do Chat, as quatro opções 2 × 2 */
  .tq-mostrar {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-1); min-width: 0; margin: 0 0 var(--e-4); padding: var(--e-1);
    border: 1px solid var(--linha); border-radius: var(--r-caixa); background: var(--painel-2);
  }
  .tq-mostrar-op {
    --tq-n: var(--ink-3);
    display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); min-width: 0; min-height: var(--ctl);
    padding: 0 var(--e-2); border: 1px solid transparent; border-radius: var(--r); background: none; color: var(--ink-2);
    font: 500 var(--t-13)/1 var(--sans); text-align: left; cursor: pointer;
  }
  .tq-mostrar-op:hover { background: var(--hover); color: var(--ink); }
  .tq-mostrar-op:focus-visible { outline-offset: -2px; }
  .tq-mostrar-rotulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
  .tq-mostrar-n { flex: none; color: var(--tq-n); font: 500 var(--t-12)/1 var(--mono); font-variant-numeric: tabular-nums; }
  .tq-mostrar-op[aria-checked="true"] { --tq-n: var(--accent-texto); border-color: var(--accent-linha); background: var(--accent-fundo); color: var(--accent-texto); }
  /* a procura e um só botão de filtros, na mesma linha; o tempo por baixo; os filtros ligados, numa linha por baixo dele */
  .tq-filtros { margin-bottom: var(--e-5); }
  .tq-tabuleiro--projeto .tq-filtros:not(.tq-filtros--nota) { margin-bottom: var(--e-4); }
  .tq-filtros > .tq-quando { order: 2; flex: 1 0 100%; }
  .tq-procurar { flex: 1 1 auto; }
  .tq-filtrar { display: flex; flex: none; }
  .tq-filtrar-btn { width: var(--ctl); min-width: var(--ctl); padding: 0; }
  .tq-filtrar .o-menu { width: min(300px, calc(100vw - 2 * var(--e-4))); }
  .tq-menu-rotulo { font-size: var(--t-12); }
  .tq-filtro-linha { order: 3; flex: 1 0 100%; }
  /* o tempo: uma caixa com as três opções lado a lado (como o filtro dos estados, por cima dele) */
  .tq-quando {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-1); margin: 0; padding: var(--e-1);
    border: 1px solid var(--linha); border-radius: var(--r-caixa); background: var(--painel-2); overflow: visible;
  }
  .tq-quando .o-filtro { justify-content: center; min-width: 0; border-color: transparent; border-radius: var(--r); background: none; font-size: var(--t-13); }
  .tq-quando .o-filtro[aria-pressed="true"] { border-color: var(--accent-linha); background: var(--accent-fundo); color: var(--accent-texto); }
  /* uma coluna de cada vez: a que abre (a do 2 × 2) */
  .tq-quadro { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
  .tq-coluna, .tq-coluna-cabeca { display: none; }
  .tq-coluna[data-abre] { display: flex; }
  /* «Precisa de ti · 4 ›» escolhido: só os cartões que precisam de ti, debaixo do rótulo da coluna deles */
  .tq-tabuleiro--precisa .tq-coluna[data-abre] { display: none; }
  .tq-tabuleiro--precisa .tq-coluna.tq-coluna--precisa { display: flex; }
  .tq-tabuleiro--precisa .tq-coluna-cabeca { display: flex; }
  .tq-tabuleiro--precisa .tq-coluna-cabeca > .g-grupo-n { display: none; }
  .tq-tabuleiro--precisa .tq-quadro .tq-cartao:not(.tq-cartao--precisa), .tq-tabuleiro--precisa .tq-coluna-vazio,
  .tq-tabuleiro--precisa .tq-ver-concluidas { display: none; }
  .tq-tabuleiro--precisa .tq-quadro .tq-so-precisa { display: flex; }
  /* com um projeto escolhido: as tarefas dele todas, por estado, pela ordem das colunas do computador, cada estado com o
     rótulo dele; sai o filtro 2 × 2. Os estados sem tarefas não aparecem */
  .tq-tabuleiro--projeto > .tq-mostrar { display: none; }
  .tq-tabuleiro--projeto .tq-quadro > .tq-coluna, .tq-tabuleiro--projeto .tq-coluna-cabeca { display: flex; }
  .tq-tabuleiro--projeto .tq-quadro > .tq-coluna--vazia { display: none; }
  /* o cartão no telemóvel: o título a 16 */
  .tq-cartao-titulo { font-size: var(--t-16); }
  .tq-postas { margin-top: var(--e-6); }
  .tq-quando-nota { margin-bottom: var(--e-5); }
  /* a Lista: cada linha empilha-se (o título, a frase, quem e quando e, numa linha só dele, o projeto) */
  .tq-lista { gap: var(--e-6); }
  .tq-lista-resumo { margin-bottom: var(--e-5); }
  .tq-ll { grid-template-columns: minmax(0, 1fr); min-height: 48px; }
  .tq-ll-titulo, .tq-ll-frase, .tq-ll-meta, .tq-ll--esqueleto > .o-esqueleto { grid-column: 1; }
  .tq-ll-titulo { font-size: var(--t-15); }
  .tq-ll-pe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); min-width: 0; }
  .tq-ll-pe:has(> .tq-projeto) > .tq-ll-meta { flex: 1 0 100%; }
  .tq-ll-onde { grid-column: auto; }
  .tq-ll-ver { min-height: 44px; }
  .tq-ll-reabrir { margin-top: 0; }
  /* com um filtro ligado, os estados sem nada não aparecem: as tarefas ficam logo à vista */
  .tq-tabuleiro--filtrado .tq-lista-seccao--vazia { display: none; }
  /* «Precisa de ti · 4 ›» escolhido: só as linhas que precisam de ti, debaixo do rótulo do estado delas; saem o resumo,
     os números dos estados, os vazios e as postas de lado, e o filtro ligado tira-o */
  .tq-tabuleiro--lista.tq-tabuleiro--precisa .tq-ll:not(.tq-ll--precisa),
  .tq-tabuleiro--lista.tq-tabuleiro--precisa .tq-lista-seccao:not(.tq-lista-seccao--precisa),
  .tq-tabuleiro--lista.tq-tabuleiro--precisa .tq-lista-resumo,
  .tq-tabuleiro--lista.tq-tabuleiro--precisa .tq-lista-cabeca > .g-grupo-n,
  .tq-tabuleiro--lista.tq-tabuleiro--precisa .tq-lista-vazio,
  .tq-tabuleiro--lista.tq-tabuleiro--precisa .tq-ll-mais,
  .tq-tabuleiro--lista.tq-tabuleiro--precisa .tq-postas { display: none; }
  .tq-tabuleiro--lista.tq-tabuleiro--precisa .tq-lista-seccao--precisa { display: flex; }
  .tq-tabuleiro--lista.tq-tabuleiro--precisa .tq-lista .tq-ll--so-precisa { display: grid; }
  .tq-tabuleiro--lista.tq-tabuleiro--precisa .tq-lista-linhas--so-precisa { display: block; }
  .tq-tabuleiro--lista.tq-tabuleiro--precisa .tq-lista-sai { display: flex; }
  /* com linhas escondidas, só as que se veem levam o traço de cima */
  .tq-tabuleiro--lista.tq-tabuleiro--precisa .tq-ll { border-top: 0; }
  .tq-tabuleiro--lista.tq-tabuleiro--precisa .tq-ll--precisa ~ .tq-ll--precisa { border-top: 1px solid var(--linha); }
}