/* Parts::StepCorrelationComponent — correlação steps↔Parte (Peça 3) num MODAL (<dialog>, padrão
   Ui::ConfirmComponent). O gatilho é neutro (NÃO segue a cor da fase). No diagrama: steps desta Parte
   no acento da casa (índigo, como a seleção do editor); outras Partes em cinza esmaecido; livres neutros. */

.c-parts-step-correlation{ display: inline-flex; }

/* gatilho: outline neutro grafite (independe da fase) */
.c-parts-step-correlation__trigger{
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 12px; border: 1px solid var(--line-2); background: transparent;
  color: var(--ink-2); font: 600 var(--fs-ui)/1 var(--font-ui); letter-spacing: -.005em;
  transition: border-color var(--t1) var(--ease), color var(--t1) var(--ease), background var(--t1) var(--ease);
}
.c-parts-step-correlation__trigger:hover{ border-color: var(--brand); color: var(--brand); background: #fcfcfb; }
.c-parts-step-correlation__trigger svg{ flex: 0 0 auto; }

/* ── modal ─────────────────────────────────────────────────────────────────────── */
.c-parts-step-correlation__dialog{
  padding: 0; border: 0; background: transparent; color: var(--ink);
  max-width: min(1180px, 94vw); width: 94vw;
}
.c-parts-step-correlation__dialog::backdrop{
  background: color-mix(in srgb, var(--ink) 46%, transparent); backdrop-filter: blur(2px);
}
.c-parts-step-correlation__dialog[open]{ animation: c-psc-in 160ms var(--ease) both; }
.c-parts-step-correlation__dialog[open]::backdrop{ animation: c-psc-fade 160ms var(--ease) both; }

.c-parts-step-correlation__box{
  margin: 0; background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px -28px rgba(17, 17, 17, .55);
  display: flex; flex-direction: column; max-height: 88vh;
}
.c-parts-step-correlation__bar{
  flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.c-parts-step-correlation__kicker{
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.c-parts-step-correlation__title{ margin-top: 7px; font-weight: 700; font-size: var(--fs-lead); letter-spacing: -.02em; }
.c-parts-step-correlation__barside{ display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.c-parts-step-correlation__count{ font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .06em; color: var(--ink-3); }
.c-parts-step-correlation__count b{ color: var(--accent); font-weight: 600; }
.c-parts-step-correlation__close{
  width: 30px; height: 30px; border: 1px solid var(--line-2); background: var(--surface);
  color: var(--ink-2); cursor: pointer; font-size: var(--fs-ui); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--t1) var(--ease), color var(--t1) var(--ease);
}
.c-parts-step-correlation__close:hover{ border-color: var(--brand); color: var(--brand); }

.c-parts-step-correlation__empty{
  padding: 40px 24px; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-3); font-style: italic; margin: 0; text-align: center;
}

/* viewport do diagrama: scroll nativo = pan; o wrap escala no fit-to-width (origin top-left) */
.c-parts-step-correlation__view{
  flex: 1 1 auto; min-height: 0; height: min(64vh, 540px); overflow: auto; padding: 8px;
  background: repeating-linear-gradient(0deg, rgba(42, 49, 64, .02) 0 1px, transparent 1px 24px);
}
.c-parts-step-correlation__wrap{ transform-origin: top left; transition: transform var(--t2) var(--ease); }

/* SVG — lifelines + headers (espelha o editor, em miniatura).
   Texto do SVG fica em px DELIBERADAMENTE (como no editor-canvas): a geometria é desenhada por JS
   (sequence_editor/render.js) e o texto precisa caber nela — não é tipografia de página (doc 50). */
.c-parts-step-correlation__ll{ stroke: var(--line-2); stroke-width: 1.2; }
.c-parts-step-correlation__phead{ fill: var(--surface-sunken); stroke: var(--line-2); stroke-width: 1.2; }
.c-parts-step-correlation__pidx{ font: 600 8.5px/1 var(--font-mono); fill: var(--ink-3); letter-spacing: .06em; }
.c-parts-step-correlation__pname{ font: 600 11px/1 var(--font-ui); fill: var(--ink-2); }

/* uma mensagem (step): --c carrega a cor do estado de dono */
.c-parts-step-correlation__step{ cursor: pointer; }
.c-parts-step-correlation__hit{ stroke: transparent; stroke-width: 18; fill: none; }
.c-parts-step-correlation__msg{ stroke: var(--c); stroke-width: 1.5; fill: none; transition: stroke var(--t1) var(--ease); }
.c-parts-step-correlation__msg--return{ stroke-dasharray: 5 4; }
.c-parts-step-correlation__badge{ fill: var(--c); transition: fill var(--t1) var(--ease); }
.c-parts-step-correlation__bnum{ font: 700 10px/1 var(--font-ui); fill: #fff; }
.c-parts-step-correlation__mlabel{ font: 500 11px/1 var(--font-ui); fill: var(--c); transition: fill var(--t1) var(--ease); }
.c-parts-step-correlation__step:hover .c-parts-step-correlation__msg{ stroke-width: 2.4; }

/* Estados de dono (doc 53). Duas dimensões ORTOGONAIS, e é isso que faz o modal ler:
     --c-own = QUEM é o dono → cor de identidade, vem do style inline (var(--part-N), por color_index)
     --c     = como PINTAR   → derivada aqui, a partir de --c-own + o estado (meu/de outra/livre)
   Antes as duas viviam juntas: "meu" era sempre índigo e "de outra" sempre ocre, então todas as
   Partes dividiam o mesmo par de cores e o canvas não dizia de QUEM era o step.

   Precisam ser DUAS variáveis: style inline vence regra de classe, então se o inline setasse --c
   direto, o color-mix do --other abaixo jamais valeria (o esmaecido nunca apareceria). */
.c-parts-step-correlation__step--free{ --c: var(--line-2); }
.c-parts-step-correlation__step--free .c-parts-step-correlation__mlabel{ fill: var(--ink-3); }

/* desta Parte: a cor dela, cheia e grossa — é o alvo do clique */
.c-parts-step-correlation__step--mine{ --c: var(--c-own, var(--accent)); }
.c-parts-step-correlation__step--mine .c-parts-step-correlation__msg{ stroke-width: 2.2; }

/* JÁ ancorado por OUTRA Parte (partição exclusiva: 1 step → ≤1 Parte). Mantém a cor DELA — é como se
   sabe de quem é — mas recua: lavada no papel, tracejada e not-allowed. A reatribuição é feita a
   partir da Parte dona (cliente ignora o clique; servidor recusa com 409).
   O fallback --ink-3 não é decorativo: no 409 o controller APAGA o --c-own, porque ali o cliente
   descobre que "o dono é outro" sem descobrir QUEM — pintar a cor de quem clicou seria mentira. */
.c-parts-step-correlation__step--other{
  --c: color-mix(in srgb, var(--c-own, var(--ink-3)) 42%, var(--paper));
  cursor: not-allowed;
}
.c-parts-step-correlation__step--other .c-parts-step-correlation__msg{ stroke-dasharray: 3 3; }
.c-parts-step-correlation__step--other .c-parts-step-correlation__mlabel{
  fill: color-mix(in srgb, var(--c-own, var(--ink-3)) 78%, var(--paper)); font-style: italic;
}
.c-parts-step-correlation__step--other:hover .c-parts-step-correlation__msg{ stroke-width: 1.5; } /* sem realce de hover: não é alvo */

/* rodapé: legenda + fit-to-width */
.c-parts-step-correlation__foot{
  flex: 0 0 auto; display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  padding: 11px 20px; border-top: 1px solid var(--line);
  font: 500 var(--fs-label)/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
}
/* Uma entrada POR PARTE dona (não mais "meu/de outra"): o swatch traz a cor de identidade e o texto
   traz o NOME — é o único lugar onde a cor vira nome. `normal-case` porque nome de Parte é prosa do
   usuário, não rótulo do sistema (o resto do rodapé segue mono uppercase). */
.c-parts-step-correlation__leg{
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  color: var(--ink-3); text-transform: none; font-family: var(--font-ui); letter-spacing: 0;
}
.c-parts-step-correlation__leg--mine{ color: var(--ink-2); font-weight: 600; }
.c-parts-step-correlation__leg--free{ text-transform: uppercase; font-family: var(--font-mono); letter-spacing: .04em; }
/* trunca nome longo sem empurrar o "ajustar à largura" p/ fora */
.c-parts-step-correlation__leg > :not(.c-parts-step-correlation__sw){
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch;
}
.c-parts-step-correlation__sw{ width: 14px; height: 3px; flex: 0 0 auto; background: var(--c-own, var(--line-2)); }
.c-parts-step-correlation__spacer{ flex: 1 1 auto; }
.c-parts-step-correlation__fit{ display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ink-2); user-select: none; }
.c-parts-step-correlation__fit input{ accent-color: var(--brand); }

@keyframes c-psc-in{ from{ opacity: 0; transform: translateY(-8px) scale(.99); } to{ opacity: 1; transform: none; } }
@keyframes c-psc-fade{ from{ opacity: 0; } to{ opacity: 1; } }

@media (prefers-reduced-motion: reduce){
  .c-parts-step-correlation__dialog[open], .c-parts-step-correlation__dialog[open]::backdrop{ animation: none; }
  .c-parts-step-correlation__wrap, .c-parts-step-correlation__msg, .c-parts-step-correlation__badge,
  .c-parts-step-correlation__mlabel, .c-parts-step-correlation__trigger{ transition: none; }
}