/* Stessa barra di rigger, senza gli strumenti che qui non esistono. */
.toolbar {
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-chrome);
  box-shadow: var(--shadow-chrome);
}

.toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar__logo {
  display: grid;
  place-items: center;
  color: var(--accent);
}

.toolbar__name {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/*
 * Titolo del board caricato, a fianco del nome dell'app. Un separatore e un peso
 * piu' leggero lo distinguono da "Rigger": e' il *cosa* si sta guardando, non il
 * nome dello strumento. Nascosto (hidden) finche' il board non ne porta uno.
 */
.toolbar__board {
  padding-left: 10px;
  border-left: 1px solid var(--border-soft);
  color: var(--text-secondary);
  font-size: var(--text-md);
  font-weight: 500;
}

.toolbar__board[hidden] {
  display: none;
}

.toolbar__spacer {
  flex: 1 1 auto;
}

.toolbar__button {
  height: 30px;
  min-width: 30px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  transition:
    background var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease);
}

.toolbar__button:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.toolbar__button:active {
  transform: translateY(1px);
}

.toolbar__button--icon {
  display: grid;
  place-items: center;
  padding: 0;
}

.toolbar__button--value {
  min-width: 58px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.toolbar__group {
  display: flex;
  gap: 4px;
}

.toolbar__status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
}

.toolbar__meta {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.toolbar__meta--dim {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/*
 * Avviso di configurazione. Compare **solo** quando c'e' qualcosa che non va
 * (board illeggibile, cartella dist assente) e porta dritto alle impostazioni: e'
 * l'unico momento in cui un percorso conta piu' delle schermate.
 */
.toolbar__warning {
  overflow: hidden;
  max-width: 40ch;
  padding: 4px 9px;
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  background: rgb(255 95 86 / 12%);
  color: var(--danger);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toolbar__warning[hidden] {
  display: none;
}

@media (width < 1000px) {
  .toolbar__warning {
    max-width: 16ch;
  }
}