/* Bloco de Derivações do Planejamento da Parte (Parts::DerivationsBlockComponent, doc 58).
   Eco read-only da âncora (steps.part_id) + prosa de fontes externas. O host recebe --c-own inline
   (Part#color_slot → var(--part-N), idioma do doc 53: inline seta SÓ a identidade; quem pinta é o
   CSS). Chip do step = transcrição HTML do badge do canvas de correlação (18px, número branco 700
   10px), em canto vivo — o rx=2 é exceção do desenho SVG, não do chrome. Tokens só. */

.c-derivations-block{ margin: 9px 0 0 47px; max-width: 66ch; }
.c-derivations-block .c-phase-fields__field{ margin-left: 0; } /* o generic indenta 47px; aqui já estamos indentados */

/* ── faixa da derivação estrutural ─────────────────────────────────────────── */
.c-derivations-block__strip{ border: 1px solid var(--line-2); margin: 0 0 12px; }
.c-derivations-block__strip--empty{ border-style: dashed; }
.c-derivations-block__shead{
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  border-bottom: 1px solid var(--line); background: var(--surface-sunken);
  font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}
.c-derivations-block__shead.is-on{ color: var(--ok); } /* idioma do chip "N steps" do card */
.c-derivations-block__shead svg{ width: 10px; height: 10px; flex: 0 0 auto; }
.c-derivations-block__shead_aff{ margin-left: auto; color: var(--ink-3); letter-spacing: .06em; }

.c-derivations-block__steps{ padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.c-derivations-block__step{ display: flex; align-items: center; gap: 10px; min-width: 0; }
/* selo do número-identidade (doc 28) na cor da Parte — o mesmo desenho do badge de ancoragem */
.c-derivations-block__num{
  flex: 0 0 auto; width: 18px; height: 18px; display: grid; place-content: center;
  background: var(--c-own, var(--accent)); color: #fff; font: 700 10px/1 var(--font-ui);
}
.c-derivations-block__slabel{ font: 400 var(--fs-ui)/1.4 var(--font-ui); color: var(--ink); min-width: 0; }
.c-derivations-block__sroute{
  margin-left: auto; flex: 0 0 auto; font: 500 var(--fs-label)/1.4 var(--font-mono);
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
}

/* o vazio é pergunta de planejamento, não estado neutro */
.c-derivations-block__empty{
  padding: 10px 12px 12px; font: 400 var(--fs-meta)/1.55 var(--font-ui); font-style: italic;
  color: var(--ink-2);
}
.c-derivations-block__empty b{ font-style: normal; color: var(--ink); font-weight: 600; }

/* ── régua da prosa (fontes além do fluxo) ─────────────────────────────────── */
.c-derivations-block__prose_label{
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
.c-derivations-block__prose_label::after{ content: ""; flex: 1; height: 1px; background: var(--line); }

/* leitura (defensivo) */
.c-derivations-block--read .c-derivations-block__step{ padding: 2px 0; }
.c-derivations-block__prose--empty{ color: var(--ink-3); font-style: italic; }