/* Global builder toolbar — `.global-builder-toolbar` is the canonical strip a
   builder-type page (form/pipeline-template editor) puts inside its
   record_header card's actions slot: save-state indicator, undo/redo, an
   optional preview step, and the primary Publish action (ADR-131).

   Sits on the light content surface, not the dark global-app-header — undo/redo/
   preview/save reuse `.global-icon-btn--sm`; only the save-status text and
   the brand-colored Publish pill are defined here. */

.global-builder-toolbar {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.global-builder-toolbar__save {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* One save signal colors every save indicator the same way. template_builder's
   editing JS sets data-state on every [data-save-status] element (the top-bar
   text and the drawer autosave), so both color from this single mapping.
   form_builder's JS only sets data-save-status, never data-state, so these are
   a no-op there. */
[data-save-status][data-state="saved"] { color: var(--color-success); }
[data-save-status][data-state="error"] { color: var(--color-error); }
[data-save-status][data-state="dirty"] { color: var(--color-warning); }

/* Publish — text + icon on desktop, icon-only on mobile (the label collapses
   via the same d-none d-sm-inline Bootstrap utility the old header button
   used). */
.global-builder-toolbar__publish {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-button);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-action);
    background: var(--color-action);
    color: var(--color-neutral-ink-fg);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.global-builder-toolbar__publish:hover {
    background: color-mix(in srgb, var(--color-action) 85%, black);
    border-color: color-mix(in srgb, var(--color-action) 85%, black);
}