/* Umbrella edition · top bar, status chips and loading screen. */
/* Top bar: black with the real logo, amber tab marker. */
[data-skin='studio'] .brand {
  align-items: center;
}
[data-skin='studio'] .brand img {
  display: block;
  height: 34px;
}
/* Temporary Honeywell wordmark (S41): a wide SVG, shorter so it keeps the bar's rhythm. */
[data-skin='studio'] .brand img[src$='.svg'] {
  height: 24px;
}
[data-skin='studio'] .brand span {
  padding-left: var(--sp-2);
  border-left: 1px solid rgb(255 255 255 / 0.18);
}
/* Main tabs as pills: the active tab gets a solid pill with strong ink, so the current section
   reads at a glance on the black bar (S46). Umbrella only — Jabil keeps the underline. */
[data-skin='studio'] #tabs {
  align-items: center;
  gap: 4px;
}
[data-skin='studio'] #tabs a {
  height: 34px;
  border-bottom: 0;
  border-radius: 999px;
  transition:
    color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
[data-skin='studio'] #tabs a:hover {
  background: rgb(255 255 255 / 0.09);
}
[data-skin='studio'] #tabs a[aria-selected='true'] {
  border-bottom-color: transparent;
  background: var(--selected-bg);
  color: var(--selected-ink);
}

/* Loading screen (brand splash): graphite faceted crystal with the amber accent (S20). */
[data-skin='studio'] .status {
  background: var(--crystal, var(--lowpoly-night, var(--brand))) center / cover no-repeat;
  color: var(--on-glass);
  font-size: var(--fs-2);
  letter-spacing: 0.02em;
}
[data-skin='studio'] .status::before {
  content: '';
  width: 34px;
  height: 34px;
  margin-bottom: var(--sp-2);
  border: 3px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: brand-spin 0.9s linear infinite;
}
[data-skin='studio'] .status {
  grid-auto-flow: row;
  align-content: center;
}
@keyframes brand-spin {
  to {
    transform: rotate(1turn);
  }
}

/* Status chips in the black top bar: dark glass, light text. */
[data-skin='studio'] .topbar .chip {
  border-color: rgb(255 255 255 / 0.14);
  background: rgb(255 255 255 / 0.07);
  color: var(--on-glass);
  transition: background var(--t-fast) var(--ease);
}
[data-skin='studio'] .topbar .chip.source {
  color: var(--on-glass-muted);
}
[data-skin='studio'] .topbar button.chip:hover {
  background: rgb(255 255 255 / 0.14);
}
[data-skin='studio'] .topbar button.chip.active {
  border-color: var(--state-alarm);
  color: #ffb3ae;
}
[data-skin='studio'] .condition-list {
  border-color: transparent;
  box-shadow: 0 13px 34px rgb(0 0 0 / 0.3);
}