/* Winston V3 — top bar. Slim, always visible. */

.top-bar {
  height: var(--top-bar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 var(--content-pad-mobile);
  z-index: var(--z-topbar);
  position: sticky;
  top: 0;
  gap: var(--space-3);
}

.top-bar-left, .top-bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 0 0 auto;
}

/* Middle slot — operational health grid lives here. Takes all the
   space between brand and the right cluster (System Check + Halt).
   Hidden on tablets/phones via status-segment.css. */
.top-bar-middle {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  margin: 0 var(--space-3);
}

/* Halt button is the only element in the right cluster that may NOT
   shrink or hide. The System Check pill collapses its label on
   phones; Halt stays full-width. */
.top-bar-right .halt-btn {
  flex: 0 0 auto;
}

/* Mobile (≤ --bp-sm: 600px): tighten the gaps so the Halt button keeps
   its label and the brand stays readable. */
@media (max-width: 600px) {
  .top-bar { padding: 0 var(--space-3); gap: var(--space-2); }
  .top-bar-right { gap: var(--space-2); }
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  font-weight: var(--weight-semi);
  font-size: var(--type-md);
  letter-spacing: var(--tracking-snug);
}
.brand:hover { text-decoration: none; }

.brand-mark { border-radius: 7px; }
.brand-text { line-height: 1; }

@media (min-width: 1024px) {
  .top-bar { padding: 0 var(--content-pad); }
  /* Desktop: the brand + collapse toggle live in the sidebar head (the
     full-height left rail), so the top bar's left slot is empty — hide it so
     the health grid aligns to the top bar's content padding. The mobile
     layout keeps the brand in this slot. */
  .top-bar-left { display: none; }
}