/* Umbrella edition · controls and states: buttons, segments, badges, alarms, icons. */
/* Buttons and segmented controls: flat at rest, extruded when selected (S23). */
[data-skin='studio'] .seg {
  gap: var(--sp-1);
  padding: 6px;
  border-radius: 999px;
}
[data-skin='studio'] .seg button,
[data-skin='studio'] .detail-view .back,
[data-skin='studio'] .units button {
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  color: var(--hud-text);
  transition:
    box-shadow var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
[data-skin='studio'] .units button {
  border-left: 4px solid var(--c);
  border-radius: 10px;
}
[data-skin='studio'] .seg button:hover,
[data-skin='studio'] .units button:hover,
[data-skin='studio'] .detail-view .back:hover {
  color: var(--accent-strong);
}
/* Selected: extruded amber (S23). Pressed: the extrusion squashes as if pushed in. */
[data-skin='studio'] .seg button[aria-pressed='true'],
[data-skin='studio'] .detail-view [role='tab'][aria-selected='true'],
[data-skin='studio'] .kit-pager button[aria-current='page'] {
  background: var(--selected-bg);
  box-shadow: var(--selected);
  color: var(--selected-ink);
  font-weight: 700;
  transform: translate(-1px, -1px);
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
[data-skin='studio'] .seg button:active,
[data-skin='studio'] .units button:active,
[data-skin='studio'] .detail-view .back:active,
[data-skin='studio'] .kit-pager button:active {
  box-shadow: var(--selected-pressed);
  transform: translate(1px, 1px);
}
[data-skin='studio'] .units button[aria-pressed='false'] {
  box-shadow: var(--inset);
}
[data-skin='studio'] :is(button, input, a, select):disabled {
  opacity: 0.45;
  box-shadow: none;
  cursor: not-allowed;
}
[data-skin='studio'] .view :is(button, input, select, a, tr[tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
[data-skin='studio'] .rate input:focus {
  box-shadow: var(--inset);
  outline: none;
}

/* Status badges: a flat outlined pill with a coloured state dot. */
[data-skin='studio'] .view .badge,
[data-skin='studio'] .detail-view .badge {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 3px 10px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hud-border);
  color: var(--hud-text);
}
[data-skin='studio'] :is(.view, .detail-view) .badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--state-stopped);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.6);
}
[data-skin='studio'] :is(.view, .detail-view) .badge.running::before {
  background: var(--state-running);
}
[data-skin='studio'] :is(.view, .detail-view) .badge.unknown::before {
  background: var(--state-warning);
}
[data-skin='studio'] :is(.view, .detail-view) .badge.alarm {
  color: #a3191a;
}
[data-skin='studio'] :is(.view, .detail-view) .badge.alarm::before {
  background: var(--state-alarm);
}
/* Alarm rows and condition notes keep a clear red cue on the neutral surface. */
[data-skin='studio'] .grid tr.sev-critical {
  background: rgb(255 90 82 / 0.08);
  box-shadow: inset 4px 0 0 var(--state-alarm);
}
[data-skin='studio'] .cond,
[data-skin='studio'] .notice {
  border-radius: 10px;
}
[data-skin='studio'] .cond.sev-critical,
[data-skin='studio'] .notice.warn {
  box-shadow:
    var(--raised),
    inset 4px 0 0 var(--state-alarm);
}
/* Detail sheet tabs: segmented, pressed when selected. */
[data-skin='studio'] .detail-view [role='tab'][aria-selected='true'] {
  border-radius: 999px;
}

/* Rail icons keep a small shadow on the dark glass; view icons stay flat. */
[data-skin='studio'] .equipment-rail svg {
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.4));
}