/* Kanban genérico (ilha) — board + cards (Produtos | Partes). Escopado sob .c-board; as classes
   internas (col/card/…) são geradas pelo Stimulus controller. O dossiê é página própria (dossier). */

/* height:100% — quem tem a viewport é o frame (c-ui-frame, doc 51); embutido no Sistema a raiz
   dele dimensiona. */
.c-board{ display:flex; flex-direction:column; height:100%; overflow:hidden; }
.c-board__island{ flex:1 1 auto; min-height:0; display:flex; }

/* ── board ─────────────────────────────────────────────────────────────────── */
.c-board__board{ flex:1 1 auto; display:flex; gap:14px; overflow-x:auto; overflow-y:hidden;
  padding:22px 40px; align-items:stretch; }
.c-board__board::after{ content:""; flex:0 0 26px; }

/* Coluna = painel delimitado (fundo rebaixado + borda), contém os cards e evita a sensação de
   vazamento lateral. Altura plena; os cards rolam dentro (col__cards). */
.c-board .col{ flex:0 0 300px; box-sizing:border-box; display:flex; flex-direction:column;
  background:var(--surface-sunken); border:1px solid var(--line); padding:14px 12px; }
/* Animação de entrada só na montagem (col--enter); re-renders (mover card) não re-disparam. */
.c-board .col--enter{ animation:c-pb-rise 420ms var(--ease) both; }
.c-board .col__head{ padding-bottom:12px; margin-bottom:12px; border-bottom:2px solid var(--hue, var(--line-2));
  display:flex; flex-direction:column; gap:6px; flex:0 0 auto; }
.c-board .col__title-row{ display:flex; align-items:center; justify-content:space-between; }
/* Sem quadradinho de cor: a régua sob o cabeçalho e o contador já carregam a hue da fase — o
   quadrado era um terceiro sinal dizendo o mesmo, e enchia o card de quadradinhos concorrentes. */
.c-board .col__title{ font-weight:700; font-size:var(--fs-ui); letter-spacing:.01em; display:flex;
  align-items:center; gap:8px; text-transform:uppercase; }
.c-board .col__count{ font-family:var(--font-mono); font-size:var(--fs-label); font-weight:600; color:var(--hue, var(--ink-3)); }
.c-board .col__k{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); }
.c-board .col__cards{ flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column; gap:10px;
  padding:2px; transition:background 120ms; min-height:60px; }
.c-board .col__cards.is-over{ background:color-mix(in srgb, var(--hue, var(--ink-3)) 9%, transparent);
  outline:1px dashed var(--hue, var(--ink-3)); }
/* "+ Novo projeto" na coluna da 1ª fase: a criação mora onde o projeto nasce. Tracejado, como o
   vazio que ele substitui — é um convite, não um card. */
.c-board .col__new{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
  padding:16px 8px; cursor:pointer; background:transparent; border:1px dashed var(--line-2);
  font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3);
  transition:border-color 140ms var(--ease), color 140ms var(--ease), background 140ms var(--ease);
}
.c-board .col__new:hover{ border-color:var(--brand); color:var(--brand); background:var(--surface); }
.c-board .col__new:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.c-board .col__new-plus{ font-family:var(--font-ui); font-size:var(--fs-ui); line-height:1; }

.c-board .col__empty{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); text-align:center; padding:20px 8px;
  border:1px dashed var(--line-2); line-height:1.8; }

/* card — escala de cinza neutra; NÃO varia com a coluna/fase. Sem faixa lateral. */
.c-board .card{ position:relative; background:var(--surface); box-shadow:0 0 0 1px var(--line);
  padding:13px 14px 12px 16px; cursor:grab; --card-accent:var(--ink-2);
  transition:box-shadow 140ms var(--ease), transform 140ms var(--ease); }
.c-board .card:hover{ box-shadow:0 0 0 1px var(--ink-3), 0 10px 22px -14px var(--ink-2); transform:translateY(-2px); }
.c-board .card.is-dragging{ opacity:.4; cursor:grabbing; }
.c-board .card__eyebrow{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.13em;
  text-transform:uppercase; color:var(--card-accent); font-weight:600; margin-bottom:7px; }
.c-board .card__title{ font-weight:700; font-size:var(--fs-lead); line-height:1.2; letter-spacing:-.015em; color:#1a1a1a; }
/* Projeto que DIVIDE o fluxo com irmãos. O sinal é o nome do sistema no eyebrow — não uma cor nem
   tarja lateral: o card é neutro por decisão (acima), e a cor aqui competiria com a fase. O nome
   diz o que a cor não diria: DE QUAL sistema, e quem são os irmãos. */
/* Sistema: um DOT de estado (sempre) + o "Ver sistema" no canto (só quando há com quem dividir).
   O dot é o único ponto do card onde a cor NÃO é da fase — por isso é um ponto, e não uma tarja:
   6px não competem com nada, e o card segue neutro (ver a decisão acima). */
/* Círculo — a ÚNICA exceção de raio fora do canvas do fluxo (CLAUDE.md: geometria sharp). Aqui ela
   se paga: um quadrado de 6px é lido como mais um quadradinho de fase (o board está cheio deles);
   o círculo diz "sou de outra natureza" antes de a cor dizer qualquer coisa. */
.c-board .card__dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  margin-right:6px; vertical-align:1px;
}
.c-board .card__dot--shared{ background:var(--ok); }      /* em sistema: fluxo compartilhado */
.c-board .card__dot--solo{ background:var(--danger); }    /* fluxo próprio */

/* "Ver sistema" — a AÇÃO. No canto superior, fora da leitura da coluna: aparece no hover do card.
   O teclado nunca o perde (focus-visible), e ele é um link de verdade — não um botão fingido.
   O eyebrow cede a faixa da direita para ele não cobrir o texto. */
.c-board .card--shared .card__eyebrow{
  padding-right:74px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.c-board .card__system{
  /* cabe na FAIXA do eyebrow (top + padding calibrados p/ a base ficar acima do título): descer
     mais colava no título — e afastar o título só nos cards shared quebraria o ritmo da coluna. */
  position:absolute; top:8px; right:12px;
  font-family:var(--font-mono); font-size:var(--fs-label); line-height:1; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--ink-3); text-decoration:none;
  border:1px solid var(--line-2); padding:2px 5px; background:var(--surface);
  opacity:0; transition:opacity 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}
.c-board .card:hover .card__system,
.c-board .card__system:focus-visible{ opacity:1; }
.c-board .card__system:hover{ color:var(--brand); border-color:var(--brand); }
@media (hover: none){ .c-board .card__system{ opacity:1; } } /* no toque não há hover: sempre visível */
.c-board .card__meta{ margin-top:10px; display:flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.04em; color:var(--ink-2); }
.c-board .card__meta b{ color:var(--ink); font-weight:600; }
.c-board .card__sep{ color:var(--line-2); }
.c-board .card__bar{ height:3px; background:var(--line); margin-top:10px; position:relative; }
.c-board .card__bar > span{ position:absolute; inset:0 auto 0 0; background:var(--card-accent); }

/* ── Partes no card (só board de Projetos): pips + acordeão inline ──────────── */
/* pips: 1 quadradinho por Parte — NEUTROS. Eram coloridos pela fase da Parte e, somados às colunas
   coloridas, viravam confete. A fase não se perdeu: ela voltou como texto, no acordeão. */
.c-board .pips{ display:flex; gap:3px; align-items:center; }
.c-board .pip{ width:9px; height:9px; flex:0 0 auto; background:var(--line-2); }
.c-board .pips__more{ margin-left:3px; }
.c-board .plbl{ font-family:var(--font-mono); font-size:var(--fs-label); font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); }
.c-board .plbl b{ color:var(--ink); font-weight:600; }
.c-board .pempty{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); }

/* acordeão: <details> nativo. summary = pips + rótulo + caret; clicar não navega (JS). */
.c-board .acc{ margin-top:12px; }
.c-board .acc--empty{ display:flex; align-items:center; }
.c-board .acc > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px;
  padding:3px 2px; margin:0 -2px; transition:background 120ms var(--ease); }
.c-board .acc > summary::-webkit-details-marker{ display:none; }
.c-board .acc > summary:hover{ background:color-mix(in srgb, var(--accent) 6%, transparent); }
.c-board .acc__lbl{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; }
.c-board .acc__caret{ width:0; height:0; border-left:3px solid transparent; border-right:3px solid transparent;
  border-top:4px solid var(--ink-3); transition:transform 140ms var(--ease), border-top-color 140ms; }
.c-board .acc[open] .acc__caret{ transform:rotate(180deg); border-top-color:var(--accent); }
.c-board .acc__body{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:7px; }
.c-board .acc__row{ display:flex; align-items:center; gap:8px;
  font-family:var(--font-ui); font-size:var(--fs-meta); line-height:1.25; color:var(--ink-2); }
.c-board .acc__row i{ width:7px; height:7px; flex:0 0 auto; background:var(--line-2); }
/* a fase da Parte, que era cor, agora é palavra */
.c-board .acc__group + .acc__group{ margin-top:9px; }
.c-board .acc__group-label{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:5px; }
.c-board .acc__row span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@keyframes c-pb-rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .c-board *{ animation:none !important; } }