/* notes.mdx.codes — look do ClickUp (E1/E3 do DECISOES.md).
   Tudo em var(): nunca voltar a hardcodar hex, mesma regra do Pad. */

:root {
  --brand:        #7B68EE;   /* roxo do ClickUp */
  --brand-ink:    #6355c7;
  --bg:           #f7f8f9;
  --surface:      #ffffff;
  --surface-2:    #f1f2f4;
  --sidebar:      #ffffff;
  --line:         #e6e8ec;
  --text:         #1f2430;
  --text-dim:     #6b7280;
  --text-faint:   #9aa1ad;
  --shadow:       0 1px 2px rgba(20,24,40,.08), 0 1px 3px rgba(20,24,40,.06);
  --shadow-lift:  0 8px 24px rgba(20,24,40,.16);
  --radius:       8px;
  --urgent:       #e5484d;
  --high:         #f76808;
  --medium:       #f5b800;
  --low:          #8b96a8;
  --sidebar-w:    272px;     /* o JS troca pela largura arrastada (sbLargura) */
  --tap:          28px;      /* alvo mínimo de toque; sobe no dedo (pointer: coarse) */
}

:root[data-theme="dark"], html:not([data-theme]) body.dark {
  --bg:         #16181d;
  --surface:    #1e2027;
  --surface-2:  #24262e;
  --sidebar:    #1a1c22;
  --line:       #2c2f38;
  --text:       #e6e8ed;
  --text-dim:   #9aa1ad;
  --text-faint: #6b7280;
  --shadow:      0 1px 2px rgba(0,0,0,.4);
  --shadow-lift: 0 8px 24px rgba(0,0,0,.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #16181d;
    --surface:    #1e2027;
    --surface-2:  #24262e;
    --sidebar:    #1a1c22;
    --line:       #2c2f38;
    --text:       #e6e8ed;
    --text-dim:   #9aa1ad;
    --text-faint: #6b7280;
    --shadow:      0 1px 2px rgba(0,0,0,.4);
    --shadow-lift: 0 8px 24px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; background: var(--bg); color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
kbd {
  font: 11px/1 ui-monospace, monospace; color: var(--text-faint);
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; margin-left: auto;
}
.icon-btn {
  background: none; border: 0; color: var(--text-dim); cursor: pointer;
  border-radius: 6px; width: 28px; height: 28px; font-size: 15px;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* ---------------------------------------------------------------- shell -- */
.shell {
  display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  /* 🔴 100vh no celular é a altura SEM a barra do navegador: o pé da tela
     ficava escondido atrás dela. dvh acompanha a barra aparecendo e sumindo. */
  height: 100vh; height: 100dvh;
}
/* barra recolhida no desktop (Ctrl+\ ou «): a coluna some e o ☰ da topbar volta */
body.sb-recolhida .shell { grid-template-columns: 0 minmax(0, 1fr); }
body.sb-recolhida .sidebar { visibility: hidden; border-right: 0; }
body.arrastando-barra, body.arrastando-barra * { cursor: col-resize !important; user-select: none; }

/* -------------------------------------------------------------- sidebar -- */
.sidebar {
  background: var(--sidebar); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  position: relative; overflow: hidden;
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}
/* Borda da barra: arrastar alarga (nomes compridos inteiros), clique duplo
   ajusta ao nome mais comprido, soltar abaixo de 170 px recolhe. A faixa é
   larga (8 px) e fica POR CIMA da borda, a linha visível só acende no hover. */
.sb-resize {
  position: absolute; top: 0; right: 0; bottom: 0; width: 8px; z-index: 5;
  cursor: col-resize; touch-action: none;
}
.sb-resize::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px;
  background: transparent; transition: background .12s ease;
}
.sb-resize:hover::after, .sb-resize.arrastando::after, .sb-resize:focus-visible::after {
  background: var(--brand);
}
.sb-resize:focus-visible { outline: none; }
.icon-btn { display: inline-grid; place-items: center; touch-action: manipulation; }
/* depois do .icon-btn: mesma especificidade, quem vem por último vence */
.btn-menu { display: none; flex: none; }
body.sb-recolhida .btn-menu { display: grid; place-items: center; }
.sb-recolher { font-size: 17px; line-height: 1; }
.sb-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px;
}
.sb-logo { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sb-mark {
  width: 24px; height: 24px; border-radius: 6px; background: var(--brand);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
/* o `.sb-logo` cresce (flex:1) e empurra os dois botões; um `margin-left:auto`
   no primeiro abriria um vão entre o sino e o tema */
.sb-head .icon-btn { flex: none; }

.sb-search {
  margin: 0 12px 10px; padding: 7px 10px; display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid transparent; border-radius: 7px;
  color: var(--text-dim); font: inherit; font-size: 13px; cursor: pointer; width: calc(100% - 24px);
}
.sb-search:hover { border-color: var(--line); }

.sb-tree { overflow-y: auto; padding: 4px 8px 24px; flex: 1; min-height: 0; }
/* Projetos × documentos (15/09): sem altura escolhida, os projetos ocupam o que
   precisam, ATÉ 60% da barra, e os Documentos ficam com o resto; a divisória
   fixa a altura. 🔴 Sem o teto e com `flex-shrink`, o aperto era dividido pelo
   tamanho do conteúdo: com 80 documentos os projetos caíam para 3 linhas
   (visto no print de produção; o dev tinha poucos documentos e não pegou). */
#tree { flex: 0 0 auto; min-height: 64px; max-height: 60%; }
#tree.altura-fixa { flex: none; max-height: none; }
.sb-divisor {
  flex: none; height: 8px; margin: 0 8px; position: relative; cursor: row-resize;
  border-radius: 4px; touch-action: none;
}
.sb-divisor::after {
  content: ""; position: absolute; left: 38%; right: 38%; top: 3px; height: 2px;
  border-radius: 2px; background: var(--line);
}
.sb-divisor:hover::after, .sb-divisor.arrastando::after, .sb-divisor:focus-visible::after {
  background: var(--brand);
}
.sb-divisor:focus-visible { outline: none; }
.sidebar.docs-fechado .sb-divisor { display: none; }
.sidebar.docs-fechado #tree { flex: 1 1 auto; height: auto !important; max-height: none; }
.node > .row {
  display: flex; align-items: stretch; gap: 6px; width: 100%;
  padding: 5px 8px 5px 0; border-radius: 6px; cursor: pointer; color: var(--text);
  background: none; border: 0; font: inherit; text-align: left;
  min-height: 21px;
}
.node > .row > *:not(.twisty) { align-self: center; }
.node > .row:hover { background: var(--surface-2); }
.node > .row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.node > .row.is-active { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand-ink); font-weight: 600; }
:root[data-theme="dark"] .node > .row.is-active { color: #b7aef7; }
@media (prefers-color-scheme: dark) { .node > .row.is-active { color: #b7aef7; } }

/* 🔴 O ALVO DA SETA. Era um span de 14x15 px no meio de uma linha de 31: fora
   dessa caixinha o clique caía na linha, que ABRE o projeto em vez de alternar,
   e o sintoma que chegava era "expande mas não recolhe". Agora a seta é uma
   faixa da altura INTEIRA da linha (`align-self: stretch` + `align-items` da
   linha em `stretch`), 22 px de largura: alvo de 22x31 em vez de 14x15.
   `.vazia` é o mesmo espaçador para linha sem filhos, sem handler nenhum. */
.twisty {
  flex: 0 0 22px; width: 22px; align-self: stretch;
  /* `stretch` para na CAIXA DE CONTEÚDO: com o padding vertical de 5 px da
     linha, a faixa ficava 21 px numa linha de 31 e sobravam duas faixas mortas
     em cima e embaixo, que é exatamente o modo de errar a mira. A margem
     negativa devolve o padding para dentro do alvo. */
  margin: -5px 0; padding: 5px 0;
  display: grid; place-items: center;
  color: var(--text-faint); font-size: 10px; border-radius: 5px;
}
.twisty:not(.vazia) { cursor: pointer; }
.twisty:not(.vazia):hover { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); }
.tw-glifo { display: block; line-height: 1; transition: transform .12s ease; }
.twisty.open .tw-glifo { transform: rotate(90deg); }

.dot { width: 8px; height: 8px; border-radius: 3px; flex: 0 0 8px; background: var(--brand); }
.node .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.node .count { margin-left: auto; color: var(--text-faint); font-size: 12px; }
.node .lock + .count { margin-left: 4px; }
.node .lock.compart { color: var(--brand); font-size: 11px; }
.children { margin-left: 18px; border-left: 1px solid var(--line); padding-left: 2px; }

/* Cabeçalho de espaço: Personal / Shared. A divisão é lida da ACL, não é um
   campo do banco — ver acl.escopo_de(). */
.sb-space {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 8px 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint);
}
.sb-space-n {
  font-weight: 600; letter-spacing: 0;
  background: var(--surface-2); border-radius: 8px; padding: 1px 6px;
}
/* O cabeçalho recolhe (cabecalhoSecao, no app.js): a linha inteira é o alvo.
   Só os que recolhem têm role=button; o de "Arquivados" é título de vista. */
.sb-space[role="button"] { cursor: pointer; border-radius: 6px; user-select: none; }
.sb-space[role="button"]:hover { color: var(--text-dim); background: var(--surface-2); }
.sb-space:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.sb-space .twisty {
  flex: 0 0 12px; width: 12px; margin: 0; padding: 0; align-self: center; font-size: 8px;
}
.sb-space:hover .twisty { background: none; }
/* grupo DENTRO de um espaço de documentos (Fixados, um projeto, Soltos) */
.sb-space.sub {
  padding: 6px 8px 2px 14px; text-transform: none; letter-spacing: 0;
  font-size: 12px; font-weight: 600;
}
.sb-space.sub .sb-space-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#docs-sep { padding: 2px 8px 0; }
#docs-sep .sb-space { padding-top: 8px; }

/* Controles da aba Documentos: filtro e ordem. Moram FORA da árvore, que é
   redesenhada a cada tecla, senão o campo perderia o foco. */
.docs-ctl { display: flex; gap: 6px; padding: 2px 16px 6px; }
.docs-ctl[hidden] { display: none; }
.docs-ctl input, .docs-ctl select {
  font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--text); padding: 4px 7px;
}
.docs-ctl input { flex: 1; min-width: 0; }
.docs-ctl select { flex: none; color: var(--text-dim); }
.sb-add-row { display: flex; gap: 2px; }
.sb-add-row .sb-add { width: auto; flex: 1; }
/* classe própria, não `.sb-add`: o e2e mira `#docs-tree .sb-add` e dois botões
   com a mesma classe quebrariam o modo estrito do Playwright */
.sb-pasta {
  flex: none; padding: 6px 10px; background: none; border: 0; border-radius: 6px;
  color: var(--text-dim); font: inherit; font-size: 12px; cursor: pointer;
}
.sb-pasta:hover { background: var(--surface-2); color: var(--text); }
.sb-vazio { padding: 6px 14px; font-size: 12px; color: var(--text-faint); }

/* --------------------------------------------------------------- topbar -- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
  display: flex; align-items: center; gap: 16px; padding: 10px 20px;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.tb-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.tb-left h1 {
  font-size: 17px; font-weight: 600; margin: 0; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-key, .tb-count { flex: none; white-space: nowrap; }
.tb-key:empty, .tb-count:empty { display: none; }
.tb-key {
  font: 11px/1 ui-monospace, monospace; color: var(--text-dim);
  background: var(--surface-2); padding: 4px 6px; border-radius: 4px;
}
.tb-views { display: flex; gap: 2px; margin-left: auto; flex: none; }
.view-tab {
  background: none; border: 0; padding: 6px 12px; border-radius: 6px; cursor: pointer;
  color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 500;
}
.view-tab:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.view-tab.is-active { color: var(--brand-ink); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.view-tab:disabled { opacity: .38; cursor: default; }

/* ---------------------------------------------------------------- board -- */
.board {
  flex: 1; min-height: 0; display: flex; gap: 12px; align-items: flex-start;
  overflow-x: auto; overflow-y: hidden; padding: 16px 20px 20px;
}
.col {
  flex: 0 0 288px; display: flex; flex-direction: column; max-height: 100%;
  background: var(--surface-2); border-radius: 10px; padding: 8px;
}
.col-head { display: flex; align-items: center; gap: 8px; padding: 4px 4px 10px; }
.status-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff;
}
.col-count { color: var(--text-faint); font-size: 12px; font-weight: 600; }
.col-head .icon-btn { margin-left: auto; width: 24px; height: 24px; font-size: 14px; }
/* ordem da coluna: "⇅" discreto no Manual, "↑ Prazo" destacado quando tem ordem */
.col-ordem {
  margin-left: auto; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 11px; color: var(--text-faint); padding: 2px 6px; border-radius: 5px;
  white-space: nowrap;
}
.col-ordem:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
.col-ordem.on {
  color: var(--brand-ink); font-weight: 600;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}
.col-ordem + .icon-btn { margin-left: 2px; }
.col-body { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 1px; }
.col.drag-over { outline: 2px dashed color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: -2px; }

/* Coluna aberta por link (`/c/{id}`). Pisca umas vezes e apaga: quem recebeu o
   link precisa de um segundo para achar onde olhar, e um realce permanente
   viraria estado de tela que ninguém pediu (e que o F5 herdaria). */
.col.col-alvo { outline: 2px solid var(--brand); outline-offset: -2px; animation: col-pisca 1.1s ease-in-out 3; }
@keyframes col-pisca {
  0%, 100% { background: var(--surface-2); }
  50%      { background: color-mix(in srgb, var(--brand) 16%, var(--surface-2)); }
}
@media (prefers-reduced-motion: reduce) { .col.col-alvo { animation: none; } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px; box-shadow: var(--shadow); cursor: grab; user-select: none;
}
.card:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.card.dragging { opacity: .45; cursor: grabbing; }
/* Rótulo da tarefa (rotuloTarefa, no app.js): o mesmo conteúdo em todo lugar,
   só o tamanho muda com o contexto. O nome da lista corta com reticências
   porque há lista com mais de 100 caracteres; o nome inteiro fica no title. */
.rotulo {
  display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%;
  font-size: 10px; line-height: 1.3; color: var(--text-faint); white-space: nowrap;
}
.rotulo > span + span::before { content: "·"; margin-right: 6px; opacity: .7; }
.rk-seq, .rk-id { font-family: ui-monospace, monospace; flex: none; }
.rk-proj { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.card .rotulo { display: flex; }
/* topo do card: rótulo à esquerda, relógio (com/sem data) à direita */
.card-topo { display: flex; align-items: center; gap: 6px; min-width: 0; }
.card-topo .rotulo { flex: 1; min-width: 0; }
.data-ico { flex: none; display: inline-flex; line-height: 0; }
.data-ico.com { color: var(--brand); }
.data-ico.sem { color: var(--text-faint); opacity: .85; }
.lrow .data-ico { margin-right: -4px; }
/* Sem isto o rótulo (nowrap) vira a largura MÍNIMA da coluna do quadro: com
   lista de nome comprido a coluna de 288px esticava até caber o nome inteiro.
   Pelo mesmo motivo a tabela tem teto, senão a coluna ID engolia as outras. */
.col { min-width: 0; }
.grid .rotulo { max-width: 260px; }
.detail-head #detail-rotulo { flex: 1; min-width: 0; display: flex; }
.detail-head .rotulo { font-size: 12px; color: var(--text-dim); }
.detail-head .rk-seq {
  font-size: 11px; background: var(--surface-2); padding: 3px 6px; border-radius: 4px;
}
.card-title { margin: 4px 0 0; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.tag {
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px;
  color: #fff; opacity: .92;
}
.card-foot {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  color: var(--text-faint); font-size: 11px;
}
.flag { font-weight: 700; }
.flag.urgent { color: var(--urgent); } .flag.high { color: var(--high); }
.flag.medium { color: var(--medium); } .flag.low { color: var(--low); }
.due.overdue { color: var(--urgent); font-weight: 600; }
.avatar {
  width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: 9px; font-weight: 700; margin-left: auto;
}
.add-card {
  margin-top: 8px; padding: 7px; width: 100%; background: none; border: 0; border-radius: 6px;
  color: var(--text-dim); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.add-card:hover { background: var(--surface); color: var(--text); }

/* -------------------------------------------------------------- paleta -- */
.palette-bg {
  position: fixed; inset: 0; background: rgba(16,18,26,.45);
  display: grid; place-items: start center; padding-top: 14vh; z-index: 50;
}
/* `display` no CSS vence o atributo hidden do HTML; sem isto a paleta nasce aberta */
.palette-bg[hidden] { display: none; }
.palette {
  width: min(620px, 92vw); background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-lift); overflow: hidden;
}
.palette input {
  width: 100%; padding: 15px 18px; border: 0; border-bottom: 1px solid var(--line);
  background: none; color: var(--text); font: inherit; font-size: 15px; outline: none;
}
.palette-hits { max-height: 46vh; overflow-y: auto; }
.hit {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 9px 18px; cursor: pointer; color: var(--text); font: inherit;
  border-bottom: 1px solid var(--line);
}
.hit:hover, .hit.sel { background: var(--surface-2); }
.hit-top { display: flex; align-items: center; gap: 8px; }
.hit-title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit-meta { margin-left: auto; font-size: 11px; color: var(--text-faint); flex: none; }
/* tarefa na paleta: o rótulo T-473 · id 2066 · lista, à direita do título */
.hit-rot { margin-left: auto; flex: none; max-width: 55%; }
.hit-snip { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.hit-snip b { color: var(--brand-ink); background: color-mix(in srgb, var(--brand) 16%, transparent); }
.palette-foot {
  display: flex; align-items: center; padding: 8px 18px; font-size: 11px;
  color: var(--text-faint); background: var(--surface-2);
}
.empty { padding: 28px; text-align: center; color: var(--text-faint); font-size: 13px; }

/* ----------------------------------------------------- barra de filtro -- */
.filterbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 20px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.fsearch {
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 13px;
  width: 190px; outline: none;
}
.fsearch:focus { border-color: var(--brand); }
.fchip-wrap { position: relative; }
.fchip {
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--text-dim); font: inherit; font-size: 13px;
  cursor: pointer; white-space: nowrap;
}
.fchip:hover { color: var(--text); border-color: var(--text-faint); }
.fchip.on {
  color: var(--brand-ink); border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.fpop {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 190px;
  max-height: 320px; overflow-y: auto; padding: 5px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--shadow-lift);
}
.fpop.right { left: auto; right: 0; }
.fopt, .fopt-btn, .fopt-row {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 6px 8px; border-radius: 5px; font-size: 13px; cursor: pointer;
  background: none; border: 0; color: var(--text); font-family: inherit; text-align: left;
}
.fopt:hover, .fopt-btn:hover, .fopt-row:hover { background: var(--surface-2); }
.fopt-btn.sel { color: var(--brand-ink); font-weight: 600; }
.fopt-row { padding: 0; gap: 0; }
.fopt-row .fopt-btn { flex: 1; }
.fopt-x {
  background: none; border: 0; color: var(--text-faint); cursor: pointer;
  padding: 6px 8px; border-radius: 5px; font-size: 11px;
}
.fopt-x:hover { color: var(--urgent); background: var(--surface-2); }
.fopt-empty { padding: 10px; font-size: 12px; color: var(--text-faint); }
.fclear {
  padding: 5px 10px; border: 0; border-radius: 6px; cursor: pointer; font: inherit;
  font-size: 13px; background: color-mix(in srgb, var(--urgent) 12%, transparent);
  color: var(--urgent);
}
.fright { margin-left: auto; display: flex; gap: 6px; }
.tb-count { font-size: 12px; color: var(--text-faint); }

/* --------------------------------------------------------------- lista -- */
.list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 20px 28px; }
.lgroup { margin-bottom: 18px; }
.lgroup-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lrow {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--surface); border: 1px solid var(--line); border-top: 0;
  overflow: hidden;
}
.lgroup .lrow:first-of-type { border-top: 1px solid var(--line); border-radius: 8px 8px 0 0; }
.lgroup .lrow:last-of-type { border-radius: 0 0 8px 8px; }
.lrow:hover { background: var(--surface-2); }
/* largura fixa para os títulos seguirem alinhados de linha em linha */
.lrow .rotulo { flex: 0 0 210px; }
@media (max-width: 640px) { .lrow .rotulo { flex-basis: 120px; } }
.ltitle { font-size: 13px; flex: 1; min-width: 0; overflow: hidden;
          text-overflow: ellipsis; white-space: nowrap; }
.lrow .card-tags { margin: 0; flex: none; }
.lfoot { margin: 0; flex: none; }

/* -------------------------------------------------------------- modal --- */
.modal-bg {
  position: fixed; inset: 0; background: rgba(16,18,26,.45);
  display: grid; place-items: center; z-index: 60;
}
.modal-bg[hidden] { display: none; }
.modal {
  width: min(430px, 92vw); background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-lift); padding: 20px;
}
.modal h2 { margin: 0 0 4px; font-size: 16px; }
.modal .muted { color: var(--text-dim); font-size: 12px; margin: 4px 0 14px; }
.switch { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 14px; }
.prow {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-top: 1px solid var(--line); font-size: 13px;
}
.pname { flex: 1; }
.prow select, .modal select {
  padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 12px;
}
.btn-primary {
  margin-top: 16px; width: 100%; padding: 8px; border: 0; border-radius: 7px;
  background: var(--brand); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.btn-primary:hover { background: var(--brand-ink); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

/* ------------------------------------------------- compartilhamento ------ */
.modal { max-height: 86vh; overflow-y: auto; }
.acc-estado { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.acc-badge {
  align-self: flex-start; font-size: 11px; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; background: var(--surface-2); color: var(--text-dim);
}
.acc-badge.on { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand-ink); }
.acc-h {
  margin: 16px 0 0; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-faint);
}
/* a linha do dono nao tem controle nenhum: ele nao pode ser removido */
.prow.dono { background: color-mix(in srgb, var(--brand) 7%, transparent); border-radius: 7px; padding: 7px 8px; }
.acc-tag { font-size: 11px; color: var(--text-faint); }
.prow.add { gap: 6px; flex-wrap: wrap; }
.prow.add select { flex: 1 1 auto; min-width: 90px; }
.acc-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.acc-foot .btn-primary { margin-top: 8px; }
.prow.add input[type="text"], .prow.add input:not([type]) {
  flex: 1 1 140px; min-width: 0; padding: 6px 9px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px;
  outline: none;
}
.prow.add input:focus { border-color: var(--brand); }
.acc-app { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 8px; }
.acc-app .muted { margin: 4px 0 0; }
.acc-app .btn-instalar { font-weight: 600; color: var(--brand-ink); border-color: var(--brand); }

/* ------------------------------------------------------------ mencoes ---- */
.sb-bell { position: relative; }
.sb-badge {
  position: absolute; top: -2px; right: -2px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: 999px; background: var(--urgent); color: #fff;
  font-size: 9px; font-weight: 700; display: grid; place-items: center;
}
.sb-badge[hidden] { display: none; }
.mrow {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 9px 8px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: var(--text); font: inherit; font-size: 13px;
  border-top: 1px solid var(--line);
}
.mrow:hover { background: var(--surface-2); }
.mrow.lida { opacity: .55; }
.micon { flex: 0 0 18px; }
.mtxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mtxt b { overflow: hidden; text-overflow: ellipsis; }
.msnip { color: var(--text-dim); font-size: 12px; }
.sb-logo {
  flex: 1; min-width: 0; cursor: pointer; border: 0; background: none;
  padding: 2px 4px; margin: -2px -4px; border-radius: 7px; color: inherit; font: inherit;
}
.sb-logo:hover { background: var(--surface-2); }
.sb-logo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------- pessoas e convites ---- */
.convite-form { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.convite-form input {
  flex: 1 1 140px; min-width: 0; padding: 6px 9px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px;
}
.convite-saida:empty { display: none; }
.cs-cab { display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap; }
.convite-saida .btn-primary { margin-top: 2px; }
.btn-voltar {
  border: 0; background: none; color: var(--text-dim); font: inherit; font-size: 12px;
  cursor: pointer; padding: 0 0 6px; display: block;
}
.btn-voltar:hover { color: var(--brand-ink); }
.convite-saida {
  display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 10px;
  border-radius: 8px; background: var(--surface-2); font-size: 13px;
}
.convite-link {
  width: 100%; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--text); font: 12px/1.4 ui-monospace, monospace;
}
.aviso {
  margin: 10px 0 0; padding: 9px 11px; border-radius: 8px; font-size: 12px;
  background: color-mix(in srgb, var(--urgent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--urgent) 30%, transparent);
  color: var(--text);
}

/* tela do convite: a única que roda para quem ainda não tem conta */
.convite-wrap { display: grid; place-items: center; padding: 40px 16px; overflow-y: auto; }
.convite {
  width: min(430px, 100%); text-align: center; padding: 32px 26px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-lift);
}
.convite h1 { font-size: 20px; margin: 14px 0 4px; }
.convite .muted { color: var(--text-dim); font-size: 13px; margin: 0 0 6px; }
.convite-marca {
  width: 46px; height: 46px; margin: 0 auto; border-radius: 12px;
  background: var(--brand); color: #fff; display: grid; place-items: center;
  font-size: 20px; font-weight: 700;
}
.convite-alvo {
  display: flex; flex-direction: column; gap: 2px; margin: 16px 0;
  padding: 12px; border-radius: 9px; background: var(--surface-2); font-size: 14px;
}
body.modo-convite .sidebar, body.modo-convite .topbar,
body.modo-convite .filterbar { display: none; }
body.modo-convite .shell { grid-template-columns: 1fr; }

/* -------------------------------------------------------------- toast --- */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: 9px 16px; border-radius: 7px;
  font-size: 13px; box-shadow: var(--shadow-lift); z-index: 80;
}
.toast.err { background: var(--urgent); color: #fff; }
.lock { font-size: 10px; }

.only-mobile { display: none; }
.sb-scrim { display: none; }
/* O layout de celular mora no fim do arquivo (seção "celular e toque"): ele
   precisa vir DEPOIS das regras de board, detalhe e documento que sobrescreve. */

/* ==========================================================================
   F2 — painel de detalhe da tarefa (slide-over estilo ClickUp)
   ========================================================================== */
.detail-bg {
  position: fixed; inset: 0; background: rgba(16,18,26,.35);
  display: flex; justify-content: flex-end; z-index: 70;
}
.detail-bg[hidden] { display: none; }
body.no-scroll { overflow: hidden; }

.detail {
  width: min(760px, 94vw); height: 100%; background: var(--surface);
  border-left: 1px solid var(--line); box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column; animation: slidein .16s ease;
}
@keyframes slidein { from { transform: translateX(24px); opacity: .6 } to { transform: none; opacity: 1 } }

.detail-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 20px;
  border-bottom: 1px solid var(--line); flex: none;
}
.detail-head .icon-btn { margin-left: auto; }
.detail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 40px; }

.d-title {
  width: 100%; border: 1px solid transparent; border-radius: 6px; resize: none;
  background: none; color: var(--text); font: inherit; font-size: 20px;
  font-weight: 600; line-height: 1.35; padding: 6px 8px; overflow: hidden;
}
.d-title:hover:not([readonly]) { border-color: var(--line); }
.d-title:focus { border-color: var(--brand); outline: none; background: var(--bg); }

.d-props {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px 14px; margin: 14px 0 10px;
}
.d-prop { display: flex; align-items: center; gap: 8px; min-width: 0; }
.d-prop > label { font-size: 12px; color: var(--text-dim); flex: 0 0 84px; }
.dd-wrap { position: relative; min-width: 0; }
.dd {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 4px 9px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dd:hover:not(:disabled) { border-color: var(--brand); }
.dd:disabled { cursor: default; opacity: .75; }
.dd.mini { padding: 2px 7px; font-size: 12px; }
.dd-pop {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 180px;
  max-height: 300px; overflow-y: auto; padding: 5px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--shadow-lift);
}
.dd-opt {
  display: flex; align-items: center; gap: 7px; width: 100%; padding: 6px 8px;
  border: 0; border-radius: 5px; background: none; color: var(--text);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.dd-opt:hover { background: var(--surface-2); }

.d-date, .d-num {
  padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px;
}
.d-num { width: 72px; }
.d-people { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.person {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px;
  background: var(--surface-2); border-radius: 20px; font-size: 12px;
}
.d-labels { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tag-x { display: inline-flex; align-items: center; gap: 5px; }
.tagx {
  background: none; border: 0; color: inherit; cursor: pointer; opacity: .7;
  font-size: 9px; padding: 0;
}
.tagx:hover { opacity: 1; }
.d-parent { font-size: 13px; margin-bottom: 12px; }
/* caminho da lista e quem criou, logo abaixo do cabeçalho do painel */
.d-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px;
  font-size: 12px; color: var(--text-dim); margin: -4px 0 8px;
}
.d-trilha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; min-width: 0; }
.d-trilha .linkish { font-size: 12px; color: var(--text-dim); }
.d-trilha-sep, .d-criada { color: var(--text-faint); }
/* tarefa-mãe e relação: o rótulo (T-N · id · lista) e o título */
.d-reltask { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.d-reltask .rotulo { flex: none; max-width: 45%; }

.d-sec {
  display: flex; align-items: center; gap: 8px;
  margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--line);
}
.d-sec h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.d-sec-x {
  font-size: 11px; font-weight: 600; color: var(--text-faint);
  background: var(--surface-2); padding: 1px 7px; border-radius: 10px;
}

.d-editor { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.d-cm { min-height: 130px; max-height: 420px; overflow-y: auto; }
.d-cm .cm-editor { background: var(--surface); color: var(--text); }
.d-cm .cm-editor.cm-focused { outline: none; }
.d-cm .cm-content { padding: 12px; font-size: 14px; caret-color: var(--brand); }
.d-cm .cm-gutters { background: var(--surface); border-right: 1px solid var(--line); }
.d-sync {
  padding: 4px 12px; font-size: 11px; color: var(--text-faint);
  background: var(--surface-2); border-top: 1px solid var(--line);
}
.d-sync.ok { color: #46A758; }
.d-sync.off { color: var(--high); }
.d-add-desc {
  width: 100%; padding: 14px; background: none; border: 1px dashed var(--line);
  border-radius: 8px; color: var(--text-dim); font: inherit; font-size: 13px; cursor: pointer;
}
.d-add-desc:hover { border-color: var(--brand); color: var(--brand-ink); }

.d-list { display: flex; flex-direction: column; }
.d-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px;
  border-radius: 6px; font-size: 13px; min-width: 0;
}
.d-item:hover { background: var(--surface-2); }
.d-item .right { margin-left: auto; }
.linkish {
  background: none; border: 0; padding: 0; color: var(--text); font: inherit;
  font-size: 13px; text-align: left; cursor: pointer; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.linkish:hover { color: var(--brand-ink); text-decoration: underline; }
.relkind { font-size: 11px; color: var(--text-faint); flex: 0 0 118px; }
.itemx {
  background: none; border: 0; color: var(--text-faint); cursor: pointer;
  font-size: 11px; padding: 2px 6px; border-radius: 4px;
}
.itemx:hover { color: var(--urgent); background: var(--surface-2); }
.d-add { display: flex; gap: 6px; padding: 6px 8px; }
.d-add input, .d-add select {
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 13px; outline: none;
}
.d-add input { flex: 1; }
.d-add input:focus { border-color: var(--brand); }
.rel-add select { flex: 0 0 auto; }

.d-time { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.d-running { font-variant-numeric: tabular-nums; color: var(--brand-ink); font-weight: 600; }
.btn-mini {
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 12px; cursor: pointer;
}
.btn-mini:hover { border-color: var(--brand); color: var(--brand-ink); }
.btn-stop {
  padding: 4px 10px; border: 0; border-radius: 6px; background: var(--urgent);
  color: #fff; font: inherit; font-size: 12px; cursor: pointer;
}

.d-comments { display: flex; flex-direction: column; gap: 10px; }
.d-comment { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; }
.d-comment.resolvido { opacity: .55; }
.c-head { display: flex; align-items: center; gap: 7px; font-size: 12px; margin-bottom: 5px; }
.c-head .right { margin-left: auto; }
.c-body { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.c-compose { display: flex; gap: 8px; align-items: flex-end; }
.c-compose textarea {
  flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 13px;
  resize: vertical; outline: none;
}
.c-compose textarea:focus { border-color: var(--brand); }

.d-activity { display: flex; flex-direction: column; gap: 2px; }
.act {
  display: flex; align-items: baseline; gap: 5px; font-size: 12px;
  color: var(--text-dim); padding: 3px 8px; border-radius: 5px;
}
.act:hover { background: var(--surface-2); }
.act .right { margin-left: auto; flex: none; }
.act b { color: var(--text); }

.btn-danger {
  margin-top: 28px; padding: 7px 14px; border: 1px solid var(--urgent);
  border-radius: 7px; background: none; color: var(--urgent);
  font: inherit; font-size: 13px; cursor: pointer;
}
.btn-danger:hover { background: var(--urgent); color: #fff; }

.card { cursor: pointer; }
.card:active { cursor: grabbing; }
.lrow { cursor: pointer; }

/* ==========================================================================
   F4 — tabela, calendário, gantt   ·   F5 — documentos
   ========================================================================== */
.tablewrap, .calwrap, .ganttwrap { flex: 1; min-height: 0; overflow: auto; padding: 12px 20px 28px; }

.grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.grid th {
  position: sticky; top: 0; z-index: 2; text-align: left; font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); background: var(--surface); padding: 8px 10px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.grid th.custom { color: var(--brand-ink); }
.grid td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.grid tbody tr { cursor: pointer; }
.grid tbody tr:hover td { background: var(--surface-2); }
.grid .mono { font: 10px/1 ui-monospace, monospace; color: var(--text-faint); }
.grid .cell-title { max-width: 460px; }
.grid .cell-title .tag { margin-left: 6px; }
.grid td.overdue { color: var(--urgent); font-weight: 600; }
.grid td.custom { color: var(--text-dim); }

.cal-month { margin-bottom: 26px; }
.cal-month h3 { margin: 0 0 8px; font-size: 14px; text-transform: capitalize; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow {
  font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-faint);
  text-align: center; padding-bottom: 2px;
}
.cal-cell {
  min-height: 92px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px; display: flex; flex-direction: column; gap: 3px;
}
.cal-cell.vazia { background: none; border-color: transparent; }
.cal-cell.hoje { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.cal-num { font-size: 11px; color: var(--text-faint); font-weight: 600; }
.cal-task {
  display: block; width: 100%; text-align: left; font-size: 11px; line-height: 1.3;
  padding: 3px 5px; border: 0; border-left: 3px solid var(--brand); border-radius: 4px;
  background: var(--surface-2); color: var(--text); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-task:hover { background: var(--bg); }
.cal-mais { font-size: 10px; color: var(--text-faint); padding-left: 5px; }
.cal-nota { margin-top: 12px; font-size: 12px; }

.gantt { min-width: max-content; }
.gantt-scale, .gantt-row { display: flex; align-items: center; }
.gantt-scale { position: sticky; top: 0; z-index: 2; background: var(--surface); padding-bottom: 4px; }
.gantt-lbl {
  flex: 0 0 260px; font-size: 12px; padding-right: 10px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.gantt-axis { display: flex; }
.gantt-day {
  flex: none; font-size: 9px; color: var(--text-faint); text-align: center;
  border-left: 1px solid var(--line);
}
.gantt-day.fds { background: var(--surface-2); }
.gantt-track { position: relative; height: 26px; border-bottom: 1px solid var(--line); }
.gantt-bar {
  position: absolute; top: 5px; height: 16px; border-radius: 4px; cursor: pointer;
  opacity: .9;
}
.gantt-bar:hover { opacity: 1; }
.gantt-bar.urgente { box-shadow: 0 0 0 2px var(--urgent); }
/* gantt (15/09): linha de hoje, setas de bloqueio, faixa "Sem data" e o alvo
   do arrasto */
.gantt { position: relative; }
.gantt-day.hoje {
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  color: var(--brand-ink); font-weight: 700;
}
.gantt-hoje {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--brand); opacity: .45; pointer-events: none;
}
.gantt-setas { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; overflow: visible; }
.gs-seta { fill: none; stroke: var(--text-dim); stroke-width: 1.5; }
.gs-seta.conflito { stroke: var(--urgent); }
.gantt-setas marker path { fill: var(--text-dim); }
.gantt-setas marker path.conflito { fill: var(--urgent); }
.gantt-alvo {
  position: absolute; top: 0; bottom: 0; z-index: 3; pointer-events: none;
  background: color-mix(in srgb, var(--brand) 18%, transparent); border: 1px dashed var(--brand);
  font-size: 10px; color: var(--brand-ink); text-align: center; padding-top: 2px;
}
.gantt-alvo[hidden] { display: none; }
.gantt-semdata {
  margin: 0 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.gantt-semdata > summary { cursor: pointer; padding: 8px 12px; font-size: 13px; font-weight: 600; }
.gantt-semdata > summary .muted { font-weight: 400; }
.gantt-semdata-lista {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 12px;
  max-height: 190px; overflow-y: auto;
}
.gantt-chip {
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: inherit; font-size: 12px; padding: 4px 9px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--surface-2); color: var(--text); cursor: grab;
}
.gantt-chip:hover { border-color: var(--brand); }
/* rolar até hoje NÃO leva junto a coluna de rótulos, a faixa e a nota: presas
   à esquerda, com fundo opaco (as barras passam por baixo) e acima das setas */
.gantt-row .gantt-lbl, .gantt-scale .gantt-lbl { position: sticky; left: 0; z-index: 4; }
.gantt-row .gantt-lbl { background: var(--bg); }
.gantt-scale .gantt-lbl { background: var(--surface); }
.ganttwrap > .gantt-semdata, .ganttwrap > .cal-nota { position: sticky; left: 0; }
/* card: "⛔ bloqueada" (n_bloqueios) */
.bloq { color: var(--urgent); font-weight: 600; }
/* menções (15/09): abas, ✓ por linha e o "marcar todas" no topo */
.m-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -4px 0 10px; }
.m-aba {
  font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line); background: none; color: var(--text-dim);
}
.m-aba.on {
  border-color: var(--brand); color: var(--brand-ink); font-weight: 600;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}
.m-todas { margin-left: auto; }
.mlinha { display: flex; align-items: center; gap: 4px; }
.mlinha .mrow { flex: 1; min-width: 0; }

.sb-sep {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint); padding: 12px 14px 4px; border-top: 1px solid var(--line);
  margin-top: 6px;
}
.sb-docs { flex: 1 1 auto; min-height: 90px; }
.sb-add {
  width: 100%; text-align: left; padding: 6px 10px; background: none; border: 0;
  border-radius: 6px; color: var(--text-dim); font: inherit; font-size: 12px; cursor: pointer;
}
.sb-add:hover { background: var(--surface-2); color: var(--text); }
.sb-add.on { color: var(--brand-ink); font-weight: 600; }
/* arquivado continua clicavel, so para de disputar atencao */
.node > .row.arquivado { opacity: .55; }
.node > .row.arquivado .label { text-decoration: line-through; text-decoration-thickness: 1px; }
/* na vista de arquivados a linha diz de ONDE saiu: sem isso "HANDOFF" e
   "Padrão EC 1000" aparecem lado a lado sem dizer que moram em projetos
   diferentes, e desarquivar vira aposta. */
.sb-caminho { margin: -3px 0 5px 30px; font-size: 11px; line-height: 1.3;
              color: var(--text-faint); white-space: nowrap; overflow: hidden;
              text-overflow: ellipsis; }

/* ------------------------------------------------- arrastar na arvore ---- */
/* `box-shadow: inset` em vez de `border`: borda muda a altura da linha e a
   arvore inteira treme a cada dragover. */
/* vale para as DUAS arvores: projeto e documento usam o mesmo motor */
.sb-tree .row[draggable="true"] { cursor: grab; }
.sb-tree .row.dragging { opacity: .45; cursor: grabbing; }
.sb-tree .row.drop-into {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.sb-tree .row.drop-antes  { box-shadow: inset 0  2px 0 0 var(--brand); }
.sb-tree .row.drop-depois { box-shadow: inset 0 -2px 0 0 var(--brand); }
.sb-tree.drop-raiz {
  background: color-mix(in srgb, var(--brand) 7%, transparent);
  outline: 1px dashed color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: -3px;
  border-radius: 8px;
}

/* --------------------------------------------------------- menu de contexto */
/* `fixed` porque o menu e posicionado em coordenada de viewport (clientX/Y) e
   a barra lateral rola: `absolute` deixaria o menu preso ao scroll. z-index
   entre a barra (40) e o modal (60), que e quem o menu chama. */
.ctx-menu {
  position: fixed; z-index: 55; min-width: 190px; padding: 5px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--shadow-lift);
}
.ctx-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border-radius: 5px; font-size: 13px; cursor: pointer;
  background: none; border: 0; color: var(--text); font-family: inherit; text-align: left;
}
.ctx-item:hover { background: var(--surface-2); }
.ctx-item.danger { color: var(--urgent); }
.ctx-item.danger:hover { background: color-mix(in srgb, var(--urgent) 12%, transparent); }
.ctx-sep { height: 1px; background: var(--line); margin: 4px 2px; }
.ctx-cores { display: flex; gap: 6px; padding: 6px 8px; }
.ctx-cor {
  width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--line);
  cursor: pointer; padding: 0;
}
.ctx-cor:hover { transform: scale(1.15); }
.ctx-cor.nenhuma { background: repeating-linear-gradient(45deg, var(--surface-2) 0 3px, var(--line) 3px 6px); }

.docwrap { flex: 1; min-height: 0; display: flex; gap: 20px; overflow: hidden; padding: 16px 20px 20px; }
.doc-editor {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.doc-cm { flex: 1; min-height: 0; overflow-y: auto; }
.doc-cm .cm-editor { background: var(--surface); color: var(--text); height: 100%; }
.doc-cm .cm-editor.cm-focused { outline: none; }
.doc-cm .cm-content { padding: 18px 22px; font-size: 15px; caret-color: var(--brand); }
.doc-cm .cm-gutters { background: var(--surface); border-right: 1px solid var(--line); }
.doc-side {
  flex: 0 0 230px; overflow-y: auto; font-size: 13px;
  display: flex; flex-direction: column; gap: 4px;
}
.doc-side h4 {
  margin: 14px 0 4px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-faint);
}
body.modo-doc .tb-views { display: none; }

/* ==========================================================================
   Celular, toque e PWA (24/09/2026)
   Antes: no celular o título do projeto sumia (as abas o espremiam até 0),
   "6 tarefas" ficava por cima das abas, os filtros quebravam em 3 linhas,
   a gaveta abria sem fundo e não fechava ao escolher um projeto, e todo
   campo com fonte < 16 px fazia o iOS dar zoom na página ao focar.
   ========================================================================== */
@media (max-width: 860px) {
  :root { --sidebar-w: min(86vw, 340px) !important; }
  .shell, body.sb-recolhida .shell { grid-template-columns: minmax(0, 1fr); }
  body.sb-recolhida .sidebar { visibility: visible; }

  /* gaveta */
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 45;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .22s cubic-bezier(.32,.72,0,1), visibility 0s linear .22s;
    border-right: 1px solid var(--line);
  }
  .sidebar.open {
    transform: none; visibility: visible; box-shadow: var(--shadow-lift);
    transition: transform .22s cubic-bezier(.32,.72,0,1), visibility 0s;
  }
  .sidebar.puxando { transition: none; }
  .sb-scrim {
    display: block; position: fixed; inset: 0; z-index: 44;
    background: rgba(16,18,26,.42); opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  .sidebar.open + .sb-scrim { opacity: 1; pointer-events: auto; }
  .sb-resize { display: none; }
  /* no celular a gaveta rola INTEIRA: duas árvores com rolagem própria numa
     tela de 844 px viravam duas janelinhas de 8 linhas; a divisória sai */
  .sidebar { overflow-y: auto; overscroll-behavior: contain; }
  .sidebar .sb-tree, .sidebar #tree, .sidebar #tree.altura-fixa {
    flex: none; overflow: visible; height: auto !important; max-height: none; min-height: 0;
  }
  .sb-divisor { display: none; }
  .sb-head { position: sticky; top: 0; z-index: 2; background: var(--sidebar); }
  .btn-menu, body.sb-recolhida .btn-menu { display: grid; place-items: center; }
  /* nome comprido quebra em até 2 linhas: no dedo não existe tooltip */
  .node .label {
    white-space: normal; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.3; overflow-wrap: anywhere;
  }

  /* topbar em duas linhas: ☰ + título inteiro em cima, abas roláveis embaixo */
  .topbar {
    flex-wrap: wrap; gap: 6px 8px; padding: 8px 12px 0;
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
  }
  .tb-left { flex: 1 1 100%; gap: 8px; }
  .tb-left h1 { font-size: 16px; }
  .tb-views {
    flex: 1 1 100%; margin: 0 -12px; padding: 0 12px 6px; gap: 4px;
    overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  }
  .tb-views::-webkit-scrollbar { display: none; }
  .view-tab { flex: none; scroll-snap-align: start; padding: 7px 12px; }
  body.modo-doc .topbar { padding-bottom: 8px; }

  /* filtros numa linha só, rolando de lado; o pop-up vira folha de baixo
     (`fixed` escapa do corte do overflow da barra) */
  .filterbar {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding: 8px 12px; gap: 6px; overscroll-behavior-x: contain;
  }
  .filterbar::-webkit-scrollbar { display: none; }
  .filterbar > * { flex: none; }
  .fsearch { width: 150px; }
  .fright { margin-left: 0; }
  .fpop, .fpop.right {
    position: fixed; top: auto; left: 8px; right: 8px; bottom: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    min-width: 0; max-height: 62dvh; z-index: 65; padding: 8px;
    border-radius: 14px; box-shadow: 0 -8px 40px rgba(0,0,0,.28);
  }
  .fopt, .fopt-btn { padding: 11px 10px; font-size: 15px; }

  /* quadro: uma coluna por tela, com a próxima aparecendo, e parada no lugar */
  .board {
    padding: 12px; gap: 10px; scroll-snap-type: x mandatory; scroll-padding: 0 12px;
    overscroll-behavior-x: contain;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .col { flex: 0 0 min(84vw, 340px); scroll-snap-align: start; }
  .list, .tablewrap, .calwrap, .ganttwrap {
    padding: 10px 12px; padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
  .lrow { flex-wrap: wrap; row-gap: 4px; }
  .lrow .rotulo { flex: 1 1 100%; }
  .ltitle { white-space: normal; flex-basis: 60%; }
  .cal-cell { min-height: 64px; padding: 3px; }
  .cal-task { font-size: 10px; padding: 2px 3px; }
  .gantt-lbl { flex-basis: 150px; }

  /* documento: o painel lateral (links, backlinks) desce para baixo do texto */
  .docwrap { flex-direction: column; overflow-y: auto; padding: 10px 12px; gap: 12px; }
  .doc-editor { flex: 1 0 68dvh; }
  .doc-side { flex: none; overflow: visible; }
  .doc-cm .cm-content { padding: 14px; }

  /* painel da tarefa: tela cheia */
  .detail { width: 100vw; border-left: 0; }
  .detail-head { padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); }
  .detail-body { padding: 12px 12px calc(40px + env(safe-area-inset-bottom)); }
  .d-props { grid-template-columns: 1fr; }
  .relkind { flex-basis: 84px; }

  /* busca e modais */
  .palette-bg { padding-top: calc(10px + env(safe-area-inset-top)); }
  .palette { width: calc(100vw - 16px); }
  .palette-hits { max-height: 64dvh; }
  .modal { width: calc(100vw - 20px); max-height: 88dvh; }
  .toast { bottom: calc(20px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); }

  /* 🔴 iOS dá zoom na página inteira ao focar campo com fonte < 16 px */
  input, select, textarea, .cm-content { font-size: 16px !important; }
}

/* Dedo, não mouse: alvos de 40 px, sem o atalho de teclado na busca e sem
   hover grudado (no toque o :hover fica aceso depois do toque). */
@media (pointer: coarse) {
  :root { --tap: 40px; }
  .icon-btn { width: var(--tap); height: var(--tap); font-size: 18px; }
  .node > .row { min-height: var(--tap); padding-top: 6px; padding-bottom: 6px; }
  .twisty { flex-basis: 30px; width: 30px; margin: -6px 0; padding: 6px 0; }
  .sb-space[role="button"] { min-height: 36px; }
  .sb-search { padding: 10px 12px; font-size: 15px; }
  .sb-search kbd { display: none; }
  .sb-add, .sb-pasta { padding: 10px; font-size: 14px; }
  .view-tab, .fchip, .fclear, .btn-mini { min-height: 36px; }
  .col-head .icon-btn { width: 36px; height: 36px; }
  .ctx-item { padding: 11px 10px; font-size: 15px; }
  .hit { padding: 12px 16px; }
  .sb-divisor { height: 16px; }
  .sb-divisor::after { top: 7px; }
  button, [role="button"], .row { touch-action: manipulation; }
}
@media (hover: none) {
  .node > .row:hover, .card:hover, .lrow:hover, .icon-btn:hover,
  .sb-add:hover, .view-tab:hover:not(:disabled) { background: inherit; }
  .node > .row.is-active:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }
  .card:hover { border-color: var(--line); background: var(--surface); }
  .lrow:hover { background: var(--surface); }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .sb-scrim { transition: none !important; }
}