/* ALTOSPIN UI interaction tokens. The host's color-scheme chooses the palette. */
:root {
  --as-ui-hover: light-dark(#edf4ee, #24362c);
  --as-ui-selected: light-dark(#dcebe0, #2a4334);
  --as-ui-selected-hover: light-dark(#d2e5d8, #304b3b);
  --as-ui-selection-border: light-dark(#9ab9a4, #50735e);
  /* Audio and other dense plots need separate selected surface and data colors. */
  --as-ui-range-background: light-dark(#17291f, #111c16);
  --as-ui-range-foreground: light-dark(#78ad8b, #a4daba);
  --as-ui-interaction-text: light-dark(#223329, #e4ece6);
  --as-ui-interaction-muted: light-dark(#53675a, #a8b8ad);
  --as-ui-interaction-focus: light-dark(#286044, #a4daba);
  --as-ui-interaction-radius: 5px;
  --as-ui-interaction-duration: 150ms;
}

/* No keyboard focus ring — hover and selection only. Forced colors keep an outline. */
:focus-visible {
  outline: none !important;
}

/* Arrow pointer only — no pointing hand on links or controls. */
a,
button,
summary,
label,
select,
input[type='button'],
input[type='submit'],
input[type='reset'],
input[type='checkbox'],
input[type='radio'],
input[type='file'],
[role='button'],
[role='menuitem'],
[role='tab'],
[role='option'],
[role='switch'],
[role='checkbox'],
[role='radio'],
.as-ui-interactive {
  cursor: default;
}

/* Opt in on rows, cards or controls. The caller owns semantics and behavior. */
.as-ui-interactive {
  border-radius: var(--as-ui-interaction-radius);
  transition: background-color var(--as-ui-interaction-duration) ease,
    box-shadow var(--as-ui-interaction-duration) ease;
}
.as-ui-interactive:not(:disabled):not([aria-disabled='true']):is(:hover, :focus-within) {
  background-color: var(--as-ui-hover);
  color: var(--as-ui-interaction-text);
}
.as-ui-interactive:is([data-selected='true'], [aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])) {
  background-color: var(--as-ui-selected);
  color: var(--as-ui-interaction-text);
  box-shadow: inset 0 0 0 1px var(--as-ui-selection-border);
}
.as-ui-interactive:not(:disabled):not([aria-disabled='true']):is([data-selected='true'], [aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])):hover {
  background-color: var(--as-ui-selected-hover);
}
.as-ui-interactive:focus-visible {
  outline: none !important;
}
.as-ui-interaction-muted { color: var(--as-ui-interaction-muted); }

@media (prefers-reduced-motion: reduce) {
  :root { --as-ui-interaction-duration: 0ms; }
}
@media (forced-colors: active) {
  :root {
    --as-ui-hover: Canvas;
    --as-ui-selected: Highlight;
    --as-ui-selected-hover: Highlight;
    --as-ui-selection-border: Highlight;
    --as-ui-range-background: Highlight;
    --as-ui-range-foreground: HighlightText;
    --as-ui-interaction-focus: Highlight;
    --as-ui-interaction-text: CanvasText;
    --as-ui-interaction-muted: CanvasText;
  }
  :focus-visible,
  .as-ui-interactive:focus-visible {
    outline: 1px solid Highlight !important;
  }
  .as-ui-interactive:is([data-selected='true'], [aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])) {
    --as-ui-interaction-text: HighlightText;
    --as-ui-interaction-muted: HighlightText;
    forced-color-adjust: none;
    color: HighlightText;
    outline: 1px solid Highlight;
  }
}

/* Compact text actions for dense lists and upload queues. */
button.as-ui-button-compact {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 26px;
  padding: 3px 8px;
  font-size: 12px;
  line-height: 18px;
  border-radius: var(--as-ui-interaction-radius);
}
button.as-ui-button-compact:focus-visible {
  outline: none;
}
@media (pointer: coarse) {
  button.as-ui-button-compact { min-height: 44px; }
}

/* Shared, quiet feedback for account preference persistence. */
.as-ui-preference-status {
  position: fixed;
  bottom: 64px;
  inset-inline-end: 16px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 10px 14px;
  color: var(--as-ui-interaction-text);
  background: var(--as-ui-selected);
  border: 1px solid var(--as-ui-selection-border);
  border-radius: var(--as-ui-interaction-radius);
  font-size: 13px;
}
.as-ui-preference-status button {
  padding: 4px 8px;
  color: inherit;
  border: 0;
  border-radius: var(--as-ui-interaction-radius);
  background: transparent;
}

.studio-list-filter-empty:not([hidden]) { display: flex; align-items: center; gap: 8px; }
.studio-list-filter-empty button { color: inherit; background: transparent; border: 0; border-radius: var(--as-ui-interaction-radius); padding: 4px 8px; }