/* ALTOSPIN UI interaction tokens. Dark by default; light palette only inside studio when appearance is light. */
:root {
  --as-ui-hover: #24362c;
  --as-ui-selected: #2a4334;
  --as-ui-selected-hover: #304b3b;
  --as-ui-selection-border: #50735e;
  /* Audio and other dense plots need separate selected surface and data colors. */
  --as-ui-range-background: #111c16;
  --as-ui-range-foreground: #a4daba;
  --as-ui-interaction-text: #e4ece6;
  --as-ui-interaction-muted: #a8b8ad;
  --as-ui-interaction-focus: #a4daba;
  --as-ui-interaction-radius: 5px;
  --as-ui-interaction-duration: 150ms;
  --as-ui-interaction-zoom: 1.06;
}

:root[data-color-scheme="light"] body.studio {
  --as-ui-hover: #dcebe0;
  --as-ui-selected: #dcebe0;
  --as-ui-selected-hover: #d2e5d8;
  --as-ui-selection-border: #9ab9a4;
  --as-ui-range-background: #17291f;
  --as-ui-range-foreground: #78ad8b;
  --as-ui-interaction-text: #223329;
  --as-ui-interaction-muted: #53675a;
  --as-ui-interaction-focus: #286044;
}

@media (prefers-color-scheme: light) {
  :root:not([data-color-scheme]) body.studio {
    --as-ui-hover: #dcebe0;
    --as-ui-selected: #dcebe0;
    --as-ui-selected-hover: #d2e5d8;
    --as-ui-selection-border: #9ab9a4;
    --as-ui-range-background: #17291f;
    --as-ui-range-foreground: #78ad8b;
    --as-ui-interaction-text: #223329;
    --as-ui-interaction-muted: #53675a;
    --as-ui-interaction-focus: #286044;
  }
}

/* A shared fallback keeps keyboard focus visible on every surface. */
:focus-visible {
  outline: 2px solid var(--as-ui-interaction-focus, currentColor);
  outline-offset: 2px;
}

/* Seeking with a pointer keeps keyboard control without drawing a focus ring.
   The waveform clears this state on keyboard seeking and blur. */
.waveform-view.is-pointer-focused:focus {
  outline: none;
}

/* 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: 2px solid var(--as-ui-interaction-focus, currentColor);
  outline-offset: 2px;
}
/* Scale instead of hover wash. Wrap controls in .as-ui-interaction-zoom, or add .as-ui-interactive-zoom on each control. */
:is(.as-ui-interaction-zoom .as-ui-interactive, .as-ui-interactive.as-ui-interactive-zoom) {
  transition: background-color var(--as-ui-interaction-duration) ease,
    box-shadow var(--as-ui-interaction-duration) ease,
    color var(--as-ui-interaction-duration) ease,
    transform var(--as-ui-interaction-duration) ease;
}
:is(.as-ui-interaction-zoom .as-ui-interactive, .as-ui-interactive.as-ui-interactive-zoom):not(:disabled):not([aria-disabled='true']):is(:hover, :focus-within) {
  transform: scale(var(--as-ui-interaction-zoom));
}
:is(.as-ui-interaction-zoom .as-ui-interactive, .as-ui-interactive.as-ui-interactive-zoom):not(:disabled):not([aria-disabled='true']):not(:is([data-selected='true'], [aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false']))):is(:hover, :focus-within) {
  background-color: transparent;
  box-shadow: none;
  color: var(--as-ui-interaction-zoom-color, var(--as-ui-interaction-text));
}
:is(.as-ui-interaction-zoom .as-ui-interactive, .as-ui-interactive.as-ui-interactive-zoom):not(:disabled):not([aria-disabled='true']):is([data-selected='true'], [aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])):is(:hover, :focus-within) {
  background-color: var(--as-ui-selected);
  box-shadow: inset 0 0 0 1px var(--as-ui-selection-border);
}
.as-ui-interaction-muted { color: var(--as-ui-interaction-muted); }

@media (prefers-reduced-motion: reduce) {
  :root { --as-ui-interaction-duration: 0ms; }
  :is(.as-ui-interaction-zoom .as-ui-interactive, .as-ui-interactive.as-ui-interactive-zoom):is(:hover, :focus-within) {
    transform: none;
  }
}
@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,
.studio-list-filter-empty 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; }