/* Editor::ToolbarComponent — a bancada.
   Não é uma barra "nova": é a última linha da ficha técnica, onde a célula deixa de informar e
   passa a agir (rótulo mono minúsculo em cima, controle embaixo). Sticky, porque o canvas rola
   por baixo dela. Quem fecha o cabeçalho é a régua do próprio topbar (doc 51) — a régua preta
   que morava aqui virava traço dobrado. */
.c-editor-toolbar{
  /* Exceção local, como o raio do canvas: a bancada do editor roda um degrau ABAIXO do gabarito
     compacto do DS. O canvas é a tela — a barra some para dar altura ao desenho. Estes tokens não
     saem daqui; fora do editor vale --control-h-sm. */
  --tool-h:22px; --tool-fs:var(--fs-meta);
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: stretch;
  padding: 0 40px;
  background: var(--surface);
  border-bottom: var(--bd);   /* hairline de ponta a ponta, como o do rodapé */
}

.c-editor-toolbar__cell{
  display: flex; flex-direction: column; gap: 5px; justify-content: center;
  padding: 8px var(--s4) 9px;
  border-left: var(--bd);
}
.c-editor-toolbar__cell:first-child{ border-left: 0; padding-left: 0; }
.c-editor-toolbar__cell--end{ margin-left: auto; border-left: 0; padding-right: 0; align-items: flex-end; }

.c-editor-toolbar__label{
  font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}

.c-editor-toolbar__row{ display: flex; align-items: center; gap: 6px; }

/* ferramenta: o botão do DS em escala de barra. Mono (é palavra-chave de UML, não prosa). */
.c-editor-toolbar__t{
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--tool-h); min-width: 44px; padding: 0 8px;
  border: 1px solid var(--line-2); background: transparent; cursor: pointer;
  color: var(--ink); font: 600 var(--tool-fs)/1 var(--font-mono); letter-spacing: .04em;
  transition: background var(--t1) var(--ease), border-color var(--t1) var(--ease),
              color var(--t1) var(--ease);
}
.c-editor-toolbar__t:hover{ background: var(--surface-sunken); border-color: var(--ink-3); }
.c-editor-toolbar__t:active{ transform: translateY(1px); }
/* O toggle de fluxo (as-is/to-be) é LINK, não botão: trocar de fluxo é trocar de página. Mesma
   ferramenta, mesma forma — só o sublinhado do <a> sai da frente. */
a.c-editor-toolbar__t{ text-decoration: none; }

/* aceso = grafite da marca (doc 52): o índigo (--accent) é realce DO DESENHO — seleção no canvas —
   e não cor de botão de chrome (doc 03). O vínculo barra↔seleção ficou por conta do estado, não da cor. */
/* +/− : a mesma ferramenta em formato de sinal — quadrada, sem a largura mínima de palavra */
.c-editor-toolbar__t--icon{ min-width: 22px; padding: 0; font-size: var(--tool-fs); }
/* o nível de zoom é leitura E botão (clicar volta a 100%): por isso é ferramenta, não rótulo */
.c-editor-toolbar__t--readout{ min-width: 46px; color: var(--ink-2); }

.c-editor-toolbar__t--on{ background: var(--brand); border-color: var(--brand); color: #fff; }
.c-editor-toolbar__t--on:hover{ background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }

/* A página principal (a ancorável) ganha um ponto discreto à esquerda do rótulo — o selo que a
   distingue dos rascunhos sem competir com o "aceso" (que é a página aberta agora). */
.c-editor-toolbar__t--principal{ padding-left: 6px; }
.c-editor-toolbar__t--principal::before{
  content: "•"; margin-right: 4px; color: var(--brand); font-size: var(--fs-ui); line-height: 0;
}
.c-editor-toolbar__t--principal.c-editor-toolbar__t--on::before{ color: #fff; }

/* O "+" cria uma página (button_to → um <form>): mantém o form inline para não quebrar a fileira. */
.c-editor-toolbar__new{ display: inline-flex; }

/* Dropdown dos rascunhos: <details> + menu_controller (fechar-ao-clicar-fora e Esc de graça, como o
   menu da conta). O gatilho é um __t com caret; o painel abre absoluto sobre o canvas. */
.c-editor-toolbar__flow{ position: relative; display: inline-flex; }
.c-editor-toolbar__trigger{ gap: 6px; list-style: none; cursor: pointer; }
.c-editor-toolbar__trigger::-webkit-details-marker{ display: none; }

/* caret triangular puro-CSS (herda a cor do texto → branco quando aceso); gira 180° ao abrir. */
.c-editor-toolbar__caret{
  width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor; transition: transform var(--t1) var(--ease);
}
.c-editor-toolbar__flow[open] .c-editor-toolbar__caret{ transform: rotate(180deg); }

.c-editor-toolbar__menu{
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 132px; max-height: 60vh; overflow-y: auto; padding: 4px;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: 0 18px 40px -22px rgba(17, 17, 17, .5);
  animation: c-editor-toolbar-menu-in var(--t1) var(--ease) both;
}
@keyframes c-editor-toolbar-menu-in{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){ .c-editor-toolbar__menu{ animation: none; } }

/* Linha do menu: rótulo posicional, materializa no hover; o aberto usa o mesmo acento das abas. */
.c-editor-toolbar__item{
  padding: 6px 8px; text-decoration: none; text-align: left; white-space: nowrap;
  color: var(--ink); font: 600 var(--tool-fs)/1 var(--font-mono); letter-spacing: .04em;
  transition: background var(--t1) var(--ease), color var(--t1) var(--ease);
}
.c-editor-toolbar__item:hover{ background: var(--surface-sunken); }
.c-editor-toolbar__item--on{ background: var(--brand); color: #fff; }
.c-editor-toolbar__item--on:hover{ background: var(--brand-ink); }

/* Apagar o rascunho: o MESMO botão do chrome, só que na bancada (doc 52) — a ação é da página,
   mora com ela. button_to embrulha num form: margem zero para assentar na célula. */
.c-editor-toolbar__cell--end form{ margin: 0; }