/* Tela de tags — so o que nao existe no tema/style. Nenhuma classe daqui e'
   lida por app.js: esta pagina nao carrega o app.js.
   TEMPORARIA: some junto com a pasta quando o ClickUp voltar (DESIGN.md). */

.conteudo-largo { max-width: 52rem; }

.tags-aviso { margin-bottom: 16px; }
.tags-card  { padding: 18px; margin-bottom: 20px; }

/* Campo e botao na mesma linha; no celular o botao desce e ocupa a largura. */
.tags-busca-linha { display: flex; gap: 10px; align-items: stretch; }
.tags-busca-linha .campo { flex: 1 1 auto; min-width: 0; }
.tags-busca-linha .btn   { flex: 0 0 auto; }

@media (max-width: 480px) {
  .tags-busca-linha { flex-wrap: wrap; }
  .tags-busca-linha .btn { width: 100%; }
}

/* --ink-2 = 6,2:1. O piso do projeto e' 4,8:1 (--ink-3). */
.tags-ajuda {
  margin-top: 8px;
  font-size: var(--t-xs);
  color: var(--ink-2);
  line-height: 1.5;
}
.tags-ajuda code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--hover);
  border-radius: var(--r-mini);
  padding: 1px 5px;
}

.tags-tarefa { margin-bottom: 14px; }
.tags-tarefa-nome {
  font-weight: 600;
  font-size: var(--t-base);
  overflow-wrap: anywhere;
  margin-bottom: 8px;
}
.tags-tarefa-meta { display: flex; gap: 6px; flex-wrap: wrap; }

.tags-espaco-erro { margin-bottom: 14px; }

.tags-lista-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 10px;
}
/* O filtro nao e' campo de formulario: encolhe para nao competir com a lista. */
.tags-filtro { width: auto; max-width: 180px; }

.tags-lista { display: flex; flex-wrap: wrap; gap: 8px; }

/* O alvo de toque do .check e' menor que 44px por ser inline; aqui a lista e'
   de mesa, mas o dedo tambem usa — sobe para o piso do projeto. */
.tag-check { min-height: 44px; }

/* Marca discreta: quem dispara robo nao pode parecer igual a rotulo, mas
   tambem nao pode gritar mais que o nome da tag. */
.tag-gatilho { border-color: var(--info-line); }

.tags-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.tags-rodape .status { flex: 1 1 200px; overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .tags-rodape .btn { width: 100%; }
}

.modal-alerta {
  display: inline-block;
  margin-top: 10px;
  color: var(--bad-ink);
  font-weight: 500;
}