/* Shared interaction layer. Keep component identity and layout in each application. */
:root { color-scheme: dark; --interface-focus: var(--av-silver, var(--accent-two, var(--x-accent, #78b4ff))); --interface-header-offset: 100px; }
[hidden] { display: none !important; }
:where(button:not(:disabled), input[type=submit]:not(:disabled), input[type=button]:not(:disabled), summary, a[href], [role=button]:not([aria-disabled=true])) { cursor: pointer; touch-action: manipulation; }
:where(button:disabled, input:disabled, select:disabled, [aria-disabled=true]) { cursor: not-allowed; }
:where(button[aria-busy=true], [data-busy=true]) { cursor: wait; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--interface-focus); outline-offset: 3px; }
:where(a, button, summary) { -webkit-tap-highlight-color: #78b4ff40; }
:where(input, select, textarea) { color-scheme: dark; }
:where(h1, h2, h3) { text-wrap: balance; }
:where(main, section, h1, h2, h3, a, button, input, select, textarea, [tabindex]) { scroll-margin-top: var(--interface-header-offset); scroll-margin-bottom: 24px; }
:where(td, dd, output) { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
:where(th) { font-variant-numeric: tabular-nums; }
:where(body:not(.artists-landing)) [class~="text-slate-500"], :where(body:not(.artists-landing)) [class~="text-slate-600"] { color: #94a3b8; }
:where(dialog, [role=dialog]) { overscroll-behavior: contain; }
:where(dialog, [role=dialog]) :where([class*=overflow-y-auto]) { overscroll-behavior: contain; }
:where(dialog) { max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; }
.interface-skip { position: fixed; top: -100px; left: max(16px, env(safe-area-inset-left)); z-index: 2147483647; padding: 12px 18px; border-radius: 8px; background: #dbeafe; color: #0b0b0d; font: 600 14px/1.4 system-ui; }
.interface-skip:focus { top: max(12px, env(safe-area-inset-top)); }
.interface-field-error { color: #fda4af; font-size: 12px; line-height: 1.5; margin: 6px 0 0; }
[aria-invalid=true] { border-color: #fb7185 !important; }
.interface-spinner { display: inline-block; flex-shrink: 0; width: 1em; height: 1em; margin-inline-end: 8px; vertical-align: -.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: interface-spin .8s linear infinite; }
button[aria-busy=true]:not(:has(.interface-spinner))::before { content: ''; display: inline-block; width: 1em; height: 1em; margin-inline-end: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: interface-spin .8s linear infinite; }
@keyframes interface-spin { to { transform: rotate(360deg); } }
.interface-motion-control { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; margin: 12px; padding: 8px 12px; border: 1px solid currentColor; border-radius: 8px; background: var(--av-midnight, var(--bg-soft, #111214)); color: var(--av-frost, var(--text, #e2e8f0)); font: 500 12px/1.4 system-ui; }
.interface-motion-control:hover { border-color: var(--interface-focus); filter: brightness(1.1); }
.interface-motion-paused *, .interface-motion-paused *::before, .interface-motion-paused *::after { animation-play-state: paused !important; }
.interface-windowed > * { content-visibility: auto; contain-intrinsic-size: auto 72px; }
.interface-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
body:not(.artists-landing) { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
body:not(.artists-landing) > footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
#whatsapp-fab { bottom: max(16px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); }
#site-header { padding-top: env(safe-area-inset-top); }
body:not(.artists-landing) :where(p, h1, h2, h3) { overflow-wrap: break-word; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  body:not(.artists-landing) *, body:not(.artists-landing) *::before, body:not(.artists-landing) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (pointer: fine) { html { overscroll-behavior: none; } }