/* Projetos e To-Dos (Fase 9): boards no estilo monday.com no sistema de vidro.
   Cores dos rótulos só por var(--label-N): o banco guarda a chave. */

body[data-route="projetos"] .view { padding: 0; }

.pj {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top));
}

/* ---- Lado: meu trabalho e boards ---------------------------------------- */
.pj-side {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-4) var(--s-3) var(--s-6);
  border-right: 1px solid var(--border);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top));
  height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top));
  overflow: auto;
}
.pj-sec { font: 600 10px/1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--faint); margin: 14px 8px 4px; }
.pj-nav {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--text); text-align: left; cursor: pointer; font-size: var(--fs-sm);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.pj-nav:hover { background: var(--accent-soft); }
.pj-nav.active { border-color: var(--border-strong); background: var(--surface-2); box-shadow: inset 2px 0 0 var(--c, var(--accent)); }
.pj-nav.is-archived { opacity: 0.55; }
.pj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-dot { width: 8px; height: 8px; border-radius: 3px; background: var(--c); flex: none; }
.pj-new { margin-top: 14px; }
.pj-new summary { list-style: none; width: 100%; justify-content: center; }
.pj-new summary::-webkit-details-marker { display: none; }
.pj-new-form { display: grid; gap: 6px; margin-top: 8px; }
.pj-new-form .row { flex-wrap: nowrap; }
.pj-ref { flex-wrap: nowrap; }
.pj-ref:not(:has(> :not([hidden]))) { display: none; }
.lp-empty { font-size: var(--fs-xs); line-height: 1.4; padding: 2px; }
.pj-side .toggle { margin: 12px 8px 0; font-size: var(--fs-xs); }
.pj-side-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.pj-side-top .eyebrow { margin: 0 8px; }
.pj-rail-btn {
  width: 28px; height: 26px; flex: none; cursor: pointer;
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted);
}
.pj-rail-btn:hover { color: var(--text); border-color: var(--border-strong); }
.pj-ico { width: 14px; text-align: center; flex: none; }
.pj-rail-new { display: none; }
.pj-note { margin: 0 0 var(--s-2); }

/* Trilho: a barra recolhida mostra só Meu trabalho e a cor de cada board. */
@media (min-width: 900px) {
  .pj.is-rail { grid-template-columns: 52px minmax(0, 1fr); }
  .pj.is-rail .pj-side { padding: var(--s-3) 6px; align-items: center; }
  .pj.is-rail .pj-side-top { justify-content: center; }
  .pj.is-rail :is(.eyebrow, .pj-sec, .pj-name, .pj-label, .pj-nav .mono, .pj-new, .toggle) { display: none; }
  .pj.is-rail #pj-boards { display: grid; justify-items: center; gap: 2px; margin-top: 8px; }
  .pj.is-rail .pj-nav { width: 36px; height: 32px; justify-content: center; padding: 0; }
  .pj.is-rail .pj-dot { width: 12px; height: 12px; }
  .pj.is-rail .pj-rail-new { display: flex; margin-top: 10px; border-color: var(--border); }
}

/* ---- Principal ------------------------------------------------------------ */
.pj-main { min-width: 0; padding: var(--s-4) var(--s-5) var(--s-7); }
.pj-head { margin-bottom: var(--s-3); }
.pj-title {
  font: 600 var(--fs-h1)/1.2 var(--font-display); letter-spacing: var(--ls-tight);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--text); padding: 2px 6px; min-width: 0;
}
.pj-title:hover { border-color: var(--border); }
.pj-title:focus { outline: none; border-color: var(--accent); background: var(--bg-2); }
.pj-color { width: 14px; height: 14px; border-radius: 4px; border: 0; background: var(--c); cursor: pointer; box-shadow: 0 0 10px var(--c-soft); flex: none; }
.pj-links { margin-top: 6px; gap: 6px; }
.pj-link { display: inline-flex; gap: 6px; align-items: center; cursor: default; }
.pj-link a { color: var(--text); }
.pj-battery { width: 160px; }
.pj-toolbar { margin: var(--s-3) 0; }
.pj-search { width: 200px; padding: 6px 10px; font-size: var(--fs-sm); }
.pj-bulk {
  position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top) + 6px); z-index: 4;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: var(--s-3);
  border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--glass-strong); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glow);
}
.pj-bulk .input { width: auto; padding: 4px 8px; }
.linkish { background: none; border: 0; padding: 0; color: var(--accent-2); cursor: pointer; font: inherit; text-align: left; }
.linkish:hover { text-decoration: underline; }

/* ---- Peças comuns ---------------------------------------------------------- */
.lbl {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 10px; border-radius: var(--radius-sm);
  background: var(--c-soft); color: var(--c); border: 1px solid var(--c);
  font: 600 12px/18px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.lbl.wide { width: 100%; }
.prio { font: 500 12px/18px var(--font-mono); color: var(--muted); }
.prio-critica { color: var(--danger); font-weight: 600; }
.prio-alta { color: var(--warn); }
.prio-media { color: var(--info); }
.prio-baixa, .prio-none { color: var(--faint); }
.avatar {
  display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: 50%; background: var(--accent-2-soft); border: 1px solid var(--border-strong);
  color: var(--accent-2); font: 600 11px/1 var(--font-display); text-transform: uppercase;
}
.battery { display: flex; height: 16px; border-radius: 4px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); width: 100%; }
.battery i { display: block; background: var(--c); opacity: 0.85; }
.progress { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--grad-plasma); }
.due-overdue { color: var(--danger) !important; font-weight: 600; }
.due-today { color: var(--warn) !important; font-weight: 600; }
.due-soon { color: var(--accent-4) !important; }

.popover {
  position: fixed; z-index: 30; min-width: 170px; max-width: min(360px, calc(100vw - 16px));
  padding: 6px; display: grid; gap: 3px;
  background: var(--glass-strong); border: 1px solid var(--border-strong); border-radius: var(--radius);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-2);
}
.popover.wide { min-width: min(360px, calc(100vw - 16px)); }
.pop-item { background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 4px 6px; text-align: left; cursor: pointer; color: var(--text); }
.pop-item:hover, .pop-item:focus-visible { background: var(--accent-soft); outline: none; }
.pop-item.on { border-color: var(--border-strong); }
.pop-scroll { display: grid; gap: 2px; max-height: 280px; overflow: auto; }
.pop-form { display: grid; gap: 6px; }
.swatches { display: grid; grid-template-columns: repeat(5, 28px); gap: 6px; }
.swatch { width: 28px; height: 22px; border-radius: 6px; border: 2px solid transparent; background: var(--c); cursor: pointer; }
.swatch.on, .swatch:hover { border-color: var(--plasma-core); }
.pop-label { margin: 2px 6px; font: 600 10px/1.4 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--faint); }
.pop-sep { width: 100%; margin: 3px 0; border: 0; border-top: 1px solid var(--border); }
.pop-item.danger { color: var(--danger); }
.pop-item.faint { color: var(--muted); }
.pop-form .row { flex-wrap: nowrap; }

/* Painel "Status e grupos" (boards/structure-panel.js), no lugar do painel da tarefa */
.sp-title { font: 600 var(--fs-h3)/1.2 var(--font-display); }
.sp-list { display: grid; gap: 6px; }
.sp-row { display: flex; align-items: center; gap: 6px; }
.sp-row .swatch { width: 22px; flex: none; }
.sp-row .input, .sp-add .input { padding: 6px 8px; font-size: var(--fs-sm); min-width: 0; }
.sp-cat { width: 132px; flex: none; }
.sp-grip, .kb-grip, .bt-grip { color: var(--faint); cursor: grab; touch-action: none; font-size: 11px; letter-spacing: -2px; padding: 4px 2px; flex: none; }
.sp-add { margin-top: 8px; flex-wrap: nowrap; }
.sp-help { font-size: var(--fs-xs); line-height: 1.5; margin: 8px 0 0; }

/* Arraste */
.dnd-ghost { position: fixed; z-index: 40; pointer-events: none; opacity: 0.9; transform: rotate(1.5deg); box-shadow: var(--shadow-2), var(--glow); }
.dnd-source { opacity: 0.35; }
body.dnd-active, body.dnd-active * { cursor: grabbing !important; user-select: none; }

/* ---- Tabela --------------------------------------------------------------- */
.bt { display: grid; gap: var(--s-5); }
.bt-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.bt-collapse { background: none; border: 0; color: var(--c); cursor: pointer; font-size: 14px; width: 20px; }
.bt-group-name {
  font: 600 var(--fs-h3)/1.2 var(--font-display); color: var(--c);
  background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; min-width: 60px; field-sizing: content;
}
.bt-group-name:focus { outline: none; border-color: var(--c); background: var(--bg-2); }
.bt-group.collapsed .table-wrap { display: none; }
.bt-table { min-width: 860px; border-left: 3px solid var(--c); border-radius: var(--radius-sm); background: var(--glass); }
.bt-row {
  display: grid;
  grid-template-columns: 22px 28px minmax(220px, 1fr) 128px 96px 124px 132px minmax(90px, 150px) 64px;
  align-items: center; gap: 0;
  min-height: 38px;
  border-bottom: 1px solid var(--border);
}
.bt-row > span { padding: 0 6px; min-width: 0; display: flex; align-items: center; gap: 6px; height: 100%; border-right: 1px solid var(--border); }
.bt-row > span:last-child { border-right: 0; }
.bt-head { min-height: 30px; font: 600 10px/1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--faint); }
.bt-head > span { justify-content: center; }
.bt-head > .c-title { justify-content: flex-start; }
.bt-row[data-id]:hover { background: var(--surface); }
.bt-row.is-selected { background: var(--accent-soft); }
.bt-row.is-done .cell-input[data-act="title"] { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.bt-row.is-sub .c-title { padding-left: 28px; }
.bt-row.is-sub .c-title::before { content: "↳"; color: var(--faint); }
.c-grip { justify-content: center; color: var(--faint); cursor: grab; touch-action: none; font-size: 11px; letter-spacing: -2px; }
.c-sel { justify-content: center; }
.c-sel input { accent-color: var(--accent); }
.c-status, .c-prio, .c-due, .c-effort { justify-content: center; }
.c-tags { overflow: hidden; flex-wrap: nowrap; }
.cell-input, .cell-date {
  width: 100%; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 4px 6px; color: var(--text); font-size: var(--fs-sm);
}
.cell-input:hover, .cell-date:hover { border-color: var(--border); }
.cell-input:focus, .cell-date:focus { outline: none; border-color: var(--accent); background: var(--bg-2); }
.cell-input.num { text-align: right; font-family: var(--font-mono); }
.cell-date { font-family: var(--font-mono); font-size: 12px; color: var(--muted); color-scheme: var(--scheme); }
.cell-btn { width: 100%; background: transparent; border: 0; padding: 3px 0; cursor: pointer; color: inherit; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.cell-btn.person { justify-content: flex-start; }
.cell-btn.tags { justify-content: flex-start; gap: 4px; overflow: hidden; }
.tp-tags { justify-content: flex-start; flex-wrap: wrap; gap: 4px; min-height: 30px; }

/* Seletor de etiquetas (boards/tag-picker.js) */
.tg { display: grid; gap: 6px; min-width: min(280px, calc(100vw - 32px)); }
.tg-search { padding: 6px 8px; font-size: var(--fs-sm); }
.tg-item { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.tg-item input { accent-color: var(--accent); }
.tg-create { color: var(--accent-2); font-size: var(--fs-sm); }
.tg-empty, .tg-help { margin: 4px 6px; font-size: var(--fs-xs); line-height: 1.4; }
.cell-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.open-btn { background: none; border: 1px solid transparent; border-radius: 6px; color: var(--faint); cursor: pointer; padding: 0 6px; opacity: 0; }
.bt-row:hover .open-btn, .open-btn:focus-visible { opacity: 1; }
.open-btn:hover { color: var(--accent-2); border-color: var(--border-strong); }
.sub-toggle { background: none; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--muted); font: 500 11px/16px var(--font-mono); padding: 0 6px; cursor: pointer; white-space: nowrap; }
.bt-add { grid-template-columns: 22px 28px minmax(220px, 1fr); border-bottom: 0; }
.bt-add .cell-input::placeholder { color: var(--faint); }
.bt-foot { display: grid; grid-template-columns: 22px 28px minmax(220px, 1fr) 128px 96px 124px; align-items: center; min-height: 30px; }
.bt-foot > span { padding: 0 6px; }
.bt-new-group { justify-self: start; flex-wrap: nowrap; }
.bt-new-group .input { width: 240px; padding: 6px 10px; font-size: var(--fs-sm); border-style: dashed; }
@media (hover: none) { .open-btn { opacity: 1; } }

/* ---- Kanban --------------------------------------------------------------- */
.kb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px); gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-3); align-items: start; }
.kb-col { background: var(--glass); border: 1px solid var(--border); border-top: 3px solid var(--c); border-radius: var(--radius); padding: 8px; }
.kb-head { display: flex; align-items: center; gap: 4px; padding: 0 0 8px; }
.kb-dot { width: 12px; height: 12px; padding: 0; flex: none; border: 0; border-radius: 4px; background: var(--c); cursor: pointer; }
.kb-name {
  flex: 1; min-width: 0; padding: 3px 5px;
  font: 600 var(--fs-sm)/1.2 var(--font-display); color: var(--c);
  background: transparent; border: 1px solid transparent; border-radius: 6px;
}
.kb-name:hover { border-color: var(--border); }
.kb-name:focus { outline: none; border-color: var(--accent); background: var(--bg-2); color: var(--text); }
.kb-count { font-size: 11.5px; color: var(--faint); }
.kb-menu { padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.kb-menu:hover { background: var(--accent-soft); color: var(--text); }
.kb-newcol { display: grid; gap: 6px; align-content: start; padding: 8px; border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.kb-newcol .row { flex-wrap: nowrap; }
.kb-newcol .input { padding: 6px 8px; font-size: var(--fs-sm); }
.kb-list { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.kb-card {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; cursor: pointer; touch-action: pan-y;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.kb-card:hover, .kb-card:focus-visible { border-color: var(--border-strong); box-shadow: var(--glow); outline: none; }
.kb-card.is-done .kb-title { color: var(--muted); text-decoration: line-through; }
.kb-group { font: 600 10px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c); }
.kb-title { margin: 4px 0; font-size: var(--fs-sm); line-height: 1.35; overflow-wrap: anywhere; }
.kb-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.kb-meta { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.kb-due { font: 500 11.5px/1 var(--font-mono); color: var(--muted); }
.kb-add .input { padding: 6px 8px; font-size: var(--fs-sm); background: transparent; border-style: dashed; }

/* ---- Calendário ----------------------------------------------------------- */
.cal-bar { margin-bottom: var(--s-3); }
.cal-title { font: 600 var(--fs-h3)/1 var(--font-display); text-transform: capitalize; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--glass); }
.cal-dow { padding: 6px; text-align: center; font: 600 10px/1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--border); }
.cal-day { min-height: 112px; padding: 4px; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-width: 0; }
.cal-day:nth-child(7n + 7) { border-right: 0; }
.cal-day.is-out { background: rgba(2, 3, 10, 0.25); }
.cal-day.is-out .cal-num { color: var(--faint); }
.cal-day.is-today { box-shadow: inset 0 0 0 1px var(--accent); }
.cal-day.is-today .cal-num { color: var(--plasma-core); background: var(--accent); border-radius: var(--radius-pill); padding: 0 6px; }
.cal-num { align-self: flex-end; font: 500 11px/18px var(--font-mono); color: var(--muted); }
.cal-chip {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 2px 6px; border-radius: 5px; border: 0; border-left: 3px solid var(--c);
  background: var(--c-soft); color: var(--text); font-size: 12px; line-height: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; touch-action: pan-y;
}
.cal-chip.is-done { opacity: 0.5; text-decoration: line-through; }
.cal-chip.is-late { box-shadow: inset 0 0 0 1px var(--danger); }
.cal-start { font: 500 10.5px/16px var(--font-mono); color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-more { background: none; border: 0; color: var(--accent-2); font: 500 11px/1 var(--font-mono); text-align: left; cursor: pointer; padding: 2px 4px; }
.cal.is-week .cal-day { min-height: 320px; }

/* ---- Gantt ---------------------------------------------------------------- */
.tl { --tl-label-w: 220px; }
.tl-bar-top { margin-bottom: var(--s-2); }
.tl-scroll { overflow: auto; max-height: calc(100dvh - 300px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--glass); }
.tl-head, .tl-row { display: flex; }
.tl-head { position: sticky; top: 0; z-index: 3; background: var(--glass-strong); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-bottom: 1px solid var(--border); }
.tl-label {
  position: sticky; left: 0; z-index: 2; flex: none; width: var(--tl-label-w);
  padding: 0 10px; display: flex; align-items: center;
  background: var(--bg-2); border-right: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
button.tl-label { border: 0; border-right: 1px solid var(--border); text-align: left; cursor: pointer; }
button.tl-label:hover { color: var(--accent-2); }
.tl-ticks { position: relative; height: 30px; flex: none; }
.tl-tick { position: absolute; top: 8px; font: 500 10.5px/1 var(--font-mono); color: var(--faint); padding-left: 3px; border-left: 1px solid var(--border); height: 22px; }
.tl-tick.month { color: var(--accent-2); text-transform: uppercase; letter-spacing: 0.08em; }
.tl-body { position: relative; }
.tl-body::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--tl-label-w) + var(--today)); width: 1px; background: var(--accent-3); box-shadow: var(--glow-hot); pointer-events: none; z-index: 1; }
.tl-row { min-height: 34px; border-bottom: 1px solid var(--border); }
.tl-track { position: relative; flex: none; }
.tl-grouprow .tl-label { color: var(--c); font: 600 11px/1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; }
.tl-grouprow { min-height: 26px; }
.tl-bar {
  position: absolute; top: 6px; height: 22px; display: flex; align-items: center;
  border-radius: 6px; background: var(--c-soft); border: 1px solid var(--c); color: var(--text);
  font-size: 12px; cursor: grab; touch-action: none; overflow: visible;
}
.tl-bar span { padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; pointer-events: none; }
.tl-bar.is-narrow { overflow: visible; }
.tl-bar.is-narrow span { position: absolute; left: calc(100% + 6px); padding: 0; color: var(--muted); overflow: visible; }
.tl-bar.is-done { opacity: 0.55; }
.tl-bar.is-late { box-shadow: 0 0 0 1px var(--danger), 0 0 12px var(--danger-soft); }
.tl-h { width: 8px; align-self: stretch; cursor: ew-resize; flex: none; }
.tl-h:hover { background: var(--c); }
.tl-undated { margin-top: var(--s-3); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tl-h[data-edge="start"] { border-radius: 5px 0 0 5px; }
.tl-h[data-edge="end"] { border-radius: 0 5px 5px 0; }

/* Dependências (Fase 10): setas em SVG sobre as trilhas, conector para ligar,
   caminho crítico e barra bloqueada. Cores em tokens.css (--dep-*, --critical*, --blocked*). */
.tl-deps { position: absolute; top: 0; left: var(--tl-label-w); overflow: visible; pointer-events: none; z-index: 1; }
.tl-dep-line { fill: none; stroke: var(--dep-line); stroke-width: 1.5; }
.tl-dep-head { fill: var(--dep-line); }
.tl-dep-head.is-critical { fill: var(--critical); }
.tl-dep-hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: pointer; }
.tl-dep:hover .tl-dep-line { stroke: var(--dep-line-hover); stroke-width: 2; }
.tl-dep.is-critical .tl-dep-line { stroke: var(--critical); stroke-width: 2; }
.tl-dep-draft { fill: none; stroke: var(--dep-line-hover); stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: none; }
.tl-link {
  position: absolute; top: 50%; right: -15px; z-index: 2;
  width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  border: 2px solid var(--dep-line-hover); background: var(--bg-2);
  cursor: crosshair; touch-action: none; opacity: 0; transition: opacity var(--t-fast);
}
.tl-row:hover .tl-link { opacity: 1; }
/* No modo "ligar" por toque o conector não serve; arrastando dele (is-drawing), a mira. */
.tl-body.is-linking .tl-link { display: none; }
.tl-body:is(.is-linking, .is-drawing) .tl-bar { cursor: crosshair; }
.tl-bar.is-narrow:has(.tl-link) span { left: calc(100% + 22px); }
.tl-body.is-linking .tl-bar.is-narrow span { left: calc(100% + 6px); }
.tl-bar.is-target, .tl-bar.is-link-from { box-shadow: 0 0 0 2px var(--dep-line-hover), var(--glow); }
.tl-bar.is-critical { box-shadow: 0 0 0 2px var(--critical), 0 0 12px var(--critical-soft); }
.tl-bar.is-blocked { border-style: dashed; }
.tl-lock { font-weight: 400; margin-right: 4px; color: var(--blocked); }
.tl-dep-names { margin: 0 6px; font-size: var(--fs-sm); line-height: 1.4; max-width: 300px; }
.tl-lag { width: 72px; padding: 4px 8px; }
.pj-shifted { color: var(--accent-2); }
.dep-badge {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  padding: 0 6px; border-radius: var(--radius-pill);
  border: 1px solid var(--blocked); background: var(--blocked-soft); color: var(--blocked);
  font: 500 11px/16px var(--font-mono); white-space: nowrap;
}
@media (hover: none) { .tl-link { display: none; } }

/* ---- Meu trabalho --------------------------------------------------------- */
.mw-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--border); transition: opacity var(--t-slow); }
.mw-row:hover { background: var(--surface); }
.mw-row.is-done { opacity: 0.35; }
.mw-check { accent-color: var(--ok); width: 16px; height: 16px; flex: none; }
.mw-title { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); text-align: left; cursor: pointer; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; }
.mw-title:hover { color: var(--accent-2); }
.mw-board { cursor: pointer; background: transparent; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-link { cursor: pointer; background: var(--accent-soft); color: var(--accent-2); border-color: transparent; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-atrasadas .section-title { color: var(--danger); }
.mw-hoje .section-title { color: var(--warn); }

/* ---- Painel da tarefa ----------------------------------------------------- */
.tp {
  position: fixed; z-index: 20;
  top: calc(var(--topbar-h) + env(safe-area-inset-top) + 8px); right: 8px; bottom: 8px;
  width: min(460px, calc(100vw - 16px)); overflow: auto;
  padding: 12px 16px 16px;
  background: var(--glass-strong); border: 1px solid var(--border-strong); border-radius: var(--radius);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-2), var(--glow-inset);
  animation: tp-in var(--t-base) var(--ease-hud);
}
@keyframes tp-in { from { transform: translateX(24px); opacity: 0; } }
.tp-head { display: flex; align-items: center; gap: 8px; }
.tp-board { cursor: pointer; background: transparent; }
.tp-title { font: 600 var(--fs-h2)/1.25 var(--font-display); resize: none; overflow: hidden; margin: 8px 0 4px; background: transparent; border-color: transparent; padding: 4px 6px; }
.tp-title:hover { border-color: var(--border); }
.tp-grid { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 6px 10px; align-items: center; margin: 10px 0 4px; }
.tp-grid .input { padding: 6px 8px; font-size: var(--fs-sm); color-scheme: var(--scheme); }
.tp-grid .row { flex-wrap: nowrap; }
.tp-grid .cell-btn { justify-content: flex-start; }
.tp-grid .lbl.wide { width: auto; min-width: 120px; }
.tp-k { font: 500 11px/1 var(--font-mono); color: var(--faint); letter-spacing: 0.04em; text-transform: uppercase; }
.tp-sec { margin-top: 18px; }
.tp-sec .section-title { margin-bottom: 8px; }
.tp-sub { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.tp-sub input { accent-color: var(--ok); }
.tp-sub.is-done .linkish { color: var(--muted); text-decoration: line-through; }
.tp-sub .linkish { color: var(--text); }
.tp-subadd { margin-top: 6px; }
.tp-subadd .input { padding: 6px 8px; font-size: var(--fs-sm); border-style: dashed; }
.tp-comment { display: grid; gap: 6px; justify-items: end; }
.tp-updates { display: grid; gap: 8px; margin-top: 10px; }
.tp-update { font-size: var(--fs-sm); }
.tp-update.comentario { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.tp-update.evento { color: var(--muted); padding-left: 10px; border-left: 2px solid var(--border-strong); }
.tp-update.evento > div { font-size: 12.5px; }
.tp-foot { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--border); }
.tp-dep-k { margin: 10px 0 4px; }
.tp-dep { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.tp-dep .linkish { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tp-dep-state { color: var(--blocked); flex: none; }
.tp-dep-state.is-closed { color: var(--ok); }
.tp-dep-lag { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.tp-dep-lag .input { width: 56px; padding: 2px 6px; font-size: var(--fs-xs); }
.tp-dep-add { margin: 6px 0 4px; padding: 6px 8px; font-size: var(--fs-sm); }
.kb-meta .dep-badge, .mw-row .dep-badge { order: -1; }

/* ---- Módulo do cockpit ---------------------------------------------------- */
.module-task { align-items: center; }
.module-pulse .module-link { gap: 5px; }
.module-pulse .progress { width: 100%; }

/* ---- Temas claros (monday, areia) ------------------------------------------
   Os valores vêm de tokens.css; aqui só o que muda de forma: superfícies
   sólidas sem desfoque e rótulos cheios, como no monday. */
body[data-pj-theme] .pj { background: var(--bg); color: var(--text); }
body[data-pj-theme] :is(.pj-side, .popover, .tp, .pj-bulk, .tl-head) { backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-pj-theme] .lbl { background: var(--c); color: var(--c-on); border-color: transparent; }
body[data-pj-theme] .battery i { opacity: 1; }
body[data-pj-theme] .bt-table { background: var(--surface-2); box-shadow: var(--shadow-1); }
body[data-pj-theme] .kb-col { border-top: 0; padding-top: 0; overflow: hidden; }
body[data-pj-theme] .kb-head { margin: 0 -8px 8px; padding: 8px; background: var(--c); }
body[data-pj-theme] .kb-head :is(.kb-name, .kb-count, .kb-grip, .kb-menu) { color: var(--c-on); }
body[data-pj-theme] .kb-head .kb-name:focus { color: var(--text); }
body[data-pj-theme] .kb-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-on); opacity: 0.6; }
body[data-pj-theme] .kb-dot:hover { opacity: 1; }
body[data-pj-theme] .pj .chip.active { color: var(--accent); font-weight: 600; }
body[data-pj-theme] .kb-card { box-shadow: var(--shadow-1); }
body[data-pj-theme] .tl-bar { background: var(--c); color: var(--c-on); border-color: transparent; }
body[data-pj-theme] .tl-bar.is-narrow span { color: var(--muted); }
body[data-pj-theme] .tl-bar:not(.is-narrow) .tl-lock { color: var(--c-on); }
body[data-pj-theme] .cal-day.is-out { background: var(--bg-3); }

/* ---- Tablet e celular ----------------------------------------------------- */
@media (max-width: 899px) {
  .pj { grid-template-columns: minmax(0, 1fr); }
  .pj-side {
    position: static; height: auto; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px;
    overflow-x: auto; padding: 8px var(--gutter); border-right: 0; border-bottom: 1px solid var(--border);
  }
  .pj-side .eyebrow, .pj-sec, .pj-side .toggle, .pj-side-top { display: none; }
  #pj-boards { display: contents; }
  .pj-nav { width: auto; flex: none; white-space: nowrap; border-color: var(--border); border-radius: var(--radius-pill); padding: 4px 10px; }
  .pj-nav .mono { display: none; }
  .pj-new { margin: 0; flex: none; position: relative; }
  .pj-new[open] .pj-new-form {
    position: fixed; left: var(--gutter); right: var(--gutter); z-index: 12;
    padding: 12px; background: var(--glass-strong); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-2);
  }
  .pj-main { padding: var(--s-3) var(--gutter) calc(var(--dock-h) + var(--s-7) + env(safe-area-inset-bottom)); }
  .pj-battery { width: 100px; }
  .pj-search { width: 100%; order: 3; }
}
@media (max-width: 719px) {
  .pj-title { font-size: var(--fs-h2); }
  .pj-head .btn { padding: 4px 8px; }
  .kb { grid-auto-columns: 84vw; scroll-snap-type: x mandatory; }
  .kb-col { scroll-snap-align: start; }
  .cal-day { min-height: 76px; }
  .cal-chip { font-size: 10.5px; padding: 1px 3px; }
  .cal.is-week .cal-grid { grid-template-columns: minmax(0, 1fr); }
  .cal.is-week .cal-dow { display: none; }
  .cal.is-week .cal-day { min-height: 0; border-right: 0; }
  .cal.is-week .cal-num { align-self: flex-start; }
  .tl { --tl-label-w: 130px; }
  .tp {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 88dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: calc(var(--dock-h) + var(--s-5) + env(safe-area-inset-bottom));
    z-index: 9; animation-name: tp-up;
  }
  @keyframes tp-up { from { transform: translateY(40px); opacity: 0; } }
  .tp-grid { grid-template-columns: 76px minmax(0, 1fr); }
}