/* Ui::TopbarComponent — o cabeçalho fino (doc 51): a linha única que substituiu os três
   cabeçalhos altos (c-page-head, c-dossier__head, c-editor-header). A régua da marca fecha
   embaixo — mesma régua de 2px que fechava o c-page-head, agora como borda. */
.c-ui-topbar{
  flex: 0 0 auto; min-height: 50px;
  /* gutter 40px = o do conteúdo abaixo (ilha do board, bancada, stage): as bordas direitas de
     botões em barras vizinhas se ALINHAM — era o desalinhamento apontado no doc 52 */
  display: flex; align-items: center; gap: 16px; padding: 6px 40px;
  background: var(--surface); border-bottom: 2px solid var(--brand);
}
/* o título toma a faixa livre; sem min-width:0 ele empurra as ações para fora */
.c-ui-topbar__title{ flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
/* estilo de título para quem passa texto (o slot também aceita um form de rename, que traz o seu) */
.c-ui-topbar__heading{
  margin: 0; font: 800 var(--fs-lead)/1.1 var(--font-ui); letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c-ui-topbar__meta{
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.c-ui-topbar__actions{ flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.c-ui-topbar__actions form{ margin: 0; } /* button_to embrulha num form */
/* em telas estreitas a meta é o primeiro sacrifício — as ações não podem sair da linha */
@media (max-width: 1100px){ .c-ui-topbar__meta{ display: none; } }