/* Material system tokens inherit OpenPlayer's album-derived palette. */
:root {
    --md-sys-color-primary: var(--primary);
    --md-sys-color-on-primary: var(--on-primary);
    --md-sys-color-primary-container: var(--primary-container);
    --md-sys-color-on-primary-container: var(--on-primary-container);
    --md-sys-color-secondary: var(--on-surface-variant);
    --md-sys-color-on-secondary: var(--surface);
    --md-sys-color-secondary-container: var(--secondary-container, var(--surface-variant));
    --md-sys-color-on-secondary-container: var(--on-secondary-container, var(--on-surface));
    --md-sys-color-tertiary-container: var(--tertiary-container, var(--primary-container));
    --md-sys-color-on-tertiary-container: var(--on-tertiary-container, var(--on-primary-container));
    --md-sys-color-surface: var(--surface);
    --md-sys-color-surface-container: var(--surface-container);
    --md-sys-color-surface-container-low: var(--surface-container);
    --md-sys-color-surface-container-high: var(--surface-container-high);
    --md-sys-color-surface-container-highest: var(--surface-variant);
    --md-sys-color-on-surface: var(--on-surface);
    --md-sys-color-on-surface-variant: var(--on-surface-variant);
    --md-sys-color-outline: var(--outline);
    --md-sys-color-outline-variant: var(--outline-variant);
    --md-sys-color-error: var(--error);
    --md-sys-color-on-error: var(--surface);
    --md-sys-typescale-body-large-font: 'DM Sans', sans-serif;
    --md-sys-typescale-body-medium-font: 'DM Sans', sans-serif;
    --md-sys-typescale-label-large-font: 'DM Sans', sans-serif;
    --md-sys-typescale-title-medium-font: 'DM Sans', sans-serif;
    --md-sys-typescale-headline-small-font: 'Space Grotesk', sans-serif;
}

md-slider {
    display: block;
    width: 100%;
    min-width: 0;
    touch-action: pan-y;
}

.m3-slider-container,
.progress-bar-wrapper,
.oled-progress-bar,
.oled-vol-slider-track {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 48px;
    padding: 0;
    background: transparent;
    overflow: visible;
}

#seek-slider,
#oled-seek-slider,
#oled-vol-slider {
    position: relative;
    height: 48px;
    opacity: 1;
    background: transparent;
    margin: 0;
    cursor: pointer;
}

.eq-sliders {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
    width: 100%;
    padding: 12px 8px 8px;
}

.eq-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.v-slider-container {
    position: relative;
    flex: none;
    width: 48px;
    height: 160px;
}

.eq-label {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    text-align: center;
}

.v-slider {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160px;
    height: 48px;
    min-width: 0;
    margin: -24px 0 0 -80px;
    transform: rotate(-90deg);
    touch-action: pan-x;
}

/* Material Web owns component geometry and states; the app only supplies tokens. */
:is(md-filled-button, md-filled-tonal-button, md-outlined-button, md-text-button) {
    --md-filled-button-container-color: var(--primary);
    --md-filled-button-label-text-color: var(--on-primary);
    --md-filled-button-icon-color: var(--on-primary);
    --md-filled-tonal-button-container-color: var(--primary);
    --md-filled-tonal-button-label-text-color: var(--on-primary);
    --md-filled-tonal-button-icon-color: var(--on-primary);
    --md-filled-tonal-button-hover-state-layer-color: var(--on-primary);
    --md-filled-tonal-button-pressed-state-layer-color: var(--on-primary);
}

:is(md-filled-button, md-filled-tonal-button, md-outlined-button, md-text-button).m3-action-btn {
    width: auto;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}

md-filled-button.filled-btn,
md-filled-tonal-button.filled-btn {
    width: 100%;
    margin: 0;
    --md-filled-button-container-height: 48px;
    --md-filled-button-container-shape: 20px;
    --md-filled-button-label-text-weight: 600;
    --md-filled-button-icon-color: var(--on-primary);
    --md-filled-tonal-button-container-height: 48px;
    --md-filled-tonal-button-container-shape: 20px;
    --md-filled-tonal-button-label-text-weight: 600;
    --md-filled-tonal-button-icon-color: var(--on-primary);
}

md-filled-tonal-button.filled-btn {
    --md-filled-tonal-button-container-color: var(--primary);
    --md-filled-tonal-button-label-text-color: var(--on-primary);
    --md-filled-tonal-button-icon-color: var(--on-primary);
}

md-filled-button.filled-btn,
md-filled-tonal-button.filled-btn,
md-text-button.text-btn {
    --md-text-button-container-height: 40px;
    --md-text-button-container-shape: 20px;
    --md-text-button-label-text-color: var(--primary);
}

.import-action-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

md-icon-button,
md-filled-icon-button {
    flex-shrink: 0;
}

md-icon-button {
    --md-icon-button-icon-color: var(--on-surface-variant);
}

md-filled-icon-button.play-fab,
md-filled-icon-button.oled-play-fab {
    --md-filled-icon-button-container-shape: 20px;
    --md-filled-icon-button-container-color: var(--primary);
    --md-filled-icon-button-icon-color: var(--on-primary);
    --md-filled-icon-button-icon-size: 32px;
}

md-filled-icon-button.filled-tonal {
    --md-filled-icon-button-container-color: var(--primary);
    --md-filled-icon-button-icon-color: var(--on-primary);
}

md-outlined-text-field,
md-outlined-select {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    --md-outlined-text-field-container-shape: 12px;
    --md-outlined-select-text-field-container-shape: 12px;
}

md-outlined-text-field { user-select: text; }

#search-bar-container {
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    background: transparent;
    border: none;
}

#search-input {
    flex: 1;
    min-width: 0;
    height: auto;
    background: transparent;
    padding: 0;
}

#sort-select {
    width: 152px;
    padding: 0;
    background: transparent;
}

md-tabs.settings-tabs {
    display: block;
    padding: 0;
    border-radius: 0;
    --md-primary-tab-container-color: var(--surface-container-high);
}

md-primary-tab.tab-btn {
    padding: 0;
    border-radius: 0;
    background: transparent;
}

md-dialog {
    display: block;
    inset: 0;
    margin: auto;
    max-width: min(560px, calc(100vw - 32px));
}
.dialog-content { display: flex; flex-direction: column; gap: 20px; }
md-list {
    background: transparent;
    --md-list-container-color: transparent;
}
md-list-item {
    background-color: transparent;
    border-radius: var(--shape-large);
}
.ctx-menu md-list-item {
    --md-list-item-label-text-size: 0.875rem;
    --md-list-item-one-line-container-height: 48px;
}

@media (max-width: 480px) {
    #search-bar-container { flex-wrap: wrap; }
    #search-input { flex-basis: 100%; }
    #sort-select { width: 100%; }
    .controls-row { gap: 8px; padding: 0; }
    .progress-area-container { padding: 0 16px; gap: 4px; }
}

md-list-item.m3-list-item {
    display: block;
    padding: 0;
    border-radius: var(--shape-large-increased);
    --md-list-item-label-text-color: var(--on-surface);
    --md-list-item-supporting-text-color: var(--on-surface-variant);
}

md-list-item.active {
    background-color: var(--primary-container);
    --md-list-item-label-text-color: var(--on-primary-container);
    --md-list-item-supporting-text-color: var(--on-primary-container);
}

md-linear-progress { width: 100%; }
md-circular-progress { width: 40px; height: 40px; }
md-linear-progress.mini-progress {
    height: 4px;
    --md-linear-progress-track-height: 4px;
    --md-linear-progress-track-shape: 0px;
}

.track-card { position: relative; }
.track-card > md-ripple { border-radius: inherit; }
.track-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }

.surface-close { flex-shrink: 0; margin-left: auto; }
.drawer-header { position: relative; padding-right: 64px; }
.drawer-header .surface-close { position: absolute; top: 24px; right: 16px; }

@media (prefers-reduced-motion: reduce) {
    .m3-sheet, .m3-fullscreen, .nav-drawer, .track-card { transition: none; }
}

md-icon-button,
md-filled-icon-button { align-items: stretch; }
md-filled-icon-button.play-fab {
    --md-filled-icon-button-container-height: 64px;
    --md-filled-icon-button-container-width: 64px;
}
md-filled-icon-button.oled-play-fab {
    --md-filled-icon-button-container-height: 72px;
    --md-filled-icon-button-container-width: 72px;
}
/* Tabs and panels must retain their height inside scrolling audio settings. */
.m3-sheet-content { min-height: 0; }
md-tabs.settings-tabs,
.tab-content { flex-shrink: 0; }

md-filled-icon-button.play-fab,
md-filled-icon-button.oled-play-fab { align-items: stretch; }
:is(md-filled-button, md-filled-tonal-button, md-outlined-button, md-text-button) [slot="icon"] {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 1;
}

/* Material 3 Expressive system roles and component sizing. */
:root {
    --expressive-motion-standard: cubic-bezier(0.2, 0, 0, 1);
    --expressive-motion-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
    --expressive-motion-accelerated: cubic-bezier(0.3, 0, 0.8, 0.15);
    --expressive-duration-short: 150ms;
    --expressive-duration-medium: 350ms;
    --expressive-duration-long: 500ms;
    --shape-extra-small: 4px;
    --shape-small: 8px;
    --shape-medium: 12px;
    --shape-large: 16px;
    --shape-large-increased: 20px;
    --shape-extra-large: 28px;
    --shape-extra-large-increased: 32px;
    --shape-extra-extra-large: 48px;

    --md-sys-color-secondary: var(--secondary, var(--on-surface-variant));
    --md-sys-color-on-secondary: var(--on-secondary, var(--surface));
    --md-sys-color-secondary-container: var(--secondary-container, var(--surface-container-high));
    --md-sys-color-on-secondary-container: var(--on-secondary-container, var(--on-surface));
    --md-sys-color-tertiary: var(--tertiary, var(--primary));
    --md-sys-color-on-tertiary: var(--on-tertiary, var(--on-primary));
    --md-sys-color-tertiary-container: var(--tertiary-container, var(--primary-container));
    --md-sys-color-on-tertiary-container: var(--on-tertiary-container, var(--on-primary-container));
    --md-sys-color-surface-dim: var(--surface);
    --md-sys-color-surface-bright: var(--surface-container-high);
    --md-sys-color-surface-container-lowest: var(--surface);
    --md-sys-color-surface-container-low: var(--surface-container);
    --md-sys-color-inverse-surface: var(--on-surface);
    --md-sys-color-inverse-on-surface: var(--surface);
    --md-sys-color-scrim: #000;
    --md-sys-color-shadow: #000;
    --md-sys-typescale-body-large-font: 'Roboto Flex', 'DM Sans', sans-serif;
    --md-sys-typescale-body-medium-font: 'Roboto Flex', 'DM Sans', sans-serif;
    --md-sys-typescale-label-large-font: 'Roboto Flex', 'DM Sans', sans-serif;
    --md-sys-typescale-title-medium-font: 'Roboto Flex', 'DM Sans', sans-serif;
    --md-sys-typescale-headline-small-font: 'Space Grotesk', 'Roboto Flex', sans-serif;
    --md-ref-typeface-plain: 'Roboto Flex', 'DM Sans', sans-serif;
    --md-ref-typeface-brand: 'Roboto Flex', 'DM Sans', sans-serif;
}

/* Give the sliders distinct expressive emphasis while preserving a 48px touch area. */
md-slider {
    --md-slider-state-layer-size: 48px;
    --md-slider-handle-height: 44px;
    --md-slider-handle-width: 4px;
    --md-slider-handle-shape: 9999px;
    --md-slider-active-track-shape: 9999px;
    --md-slider-inactive-track-shape: 9999px;
    --md-slider-label-container-height: 32px;
    --md-slider-label-container-color: var(--inverse-surface, var(--on-surface));
    --md-slider-label-text-color: var(--inverse-on-surface, var(--surface));
    --md-slider-active-track-color: var(--primary);
    --md-slider-inactive-track-color: var(--surface-container-highest, var(--surface-variant));
    --md-slider-handle-color: var(--primary);
    --md-slider-focus-handle-color: var(--primary);
    --md-slider-hover-handle-color: var(--primary);
    --md-slider-pressed-handle-color: var(--primary);
}

#seek-slider,
#oled-seek-slider,
#vol-slider,
#oled-vol-slider,
.v-slider {
    --md-slider-active-track-height: 16px;
    --md-slider-inactive-track-height: 16px;
}

.material-slider {
    --md-slider-active-track-height: 24px;
    --md-slider-inactive-track-height: 24px;
}

/* Shared Expressive states: full state layers, soft corners, and spring-like easing. */
:is(md-filled-button, md-filled-tonal-button, md-outlined-button, md-text-button) {
    --md-filled-button-container-shape: 20px;
    --md-filled-button-container-height: 40px;
    --md-filled-tonal-button-container-shape: 20px;
    --md-filled-tonal-button-container-height: 40px;
    --md-outlined-button-container-shape: 20px;
    --md-outlined-button-container-height: 40px;
    --md-text-button-container-shape: 20px;
    --md-text-button-container-height: 40px;
    --md-filled-button-hover-state-layer-color: var(--on-primary);
    --md-filled-tonal-button-hover-state-layer-color: var(--on-primary);
    --md-outlined-button-hover-state-layer-color: var(--primary);
    --md-text-button-hover-state-layer-color: var(--primary);
    transition: transform var(--expressive-duration-short) var(--expressive-motion-standard);
}

:is(md-filled-button, md-filled-tonal-button, md-outlined-button, md-text-button):active {
    transform: scale(0.97);
}

md-icon-button,
md-filled-icon-button {
    --md-icon-button-state-layer-shape: 16px;
    --md-icon-button-hover-state-layer-color: var(--primary);
    --md-icon-button-pressed-state-layer-color: var(--primary);
    --md-filled-icon-button-container-shape: 20px;
    --md-filled-icon-button-hover-state-layer-color: var(--on-primary);
    --md-filled-icon-button-pressed-state-layer-color: var(--on-primary);
}

md-icon-button.active,
md-icon-button[selected] {
    --md-icon-button-icon-color: var(--primary);
    --md-icon-button-hover-icon-color: var(--primary);
    --md-icon-button-focus-icon-color: var(--primary);
    --md-icon-button-pressed-icon-color: var(--primary);
}

md-filled-icon-button.play-fab,
md-filled-icon-button.oled-play-fab {
    --md-filled-icon-button-container-shape: 28px;
    --md-filled-icon-button-icon-size: 32px;
}

md-outlined-text-field,
md-outlined-select {
    --md-outlined-text-field-container-shape: 16px;
    --md-outlined-select-text-field-container-shape: 16px;
    --md-outlined-text-field-focus-outline-color: var(--primary);
    --md-outlined-select-text-field-focus-outline-color: var(--primary);
}

md-tabs.settings-tabs {
    --md-primary-tab-active-indicator-shape: 9999px;
    --md-primary-tab-active-indicator-color: var(--primary);
    --md-primary-tab-label-text-font: 'Roboto Flex', 'DM Sans', sans-serif;
    --md-primary-tab-label-text-weight: 650;
}

md-dialog {
    --md-dialog-container-shape: 28px;
    --md-dialog-container-color: var(--surface-container-high);
    --md-dialog-headline-font: 'Space Grotesk', 'Roboto Flex', sans-serif;
}

md-switch {
    --md-switch-selected-track-color: var(--primary);
    --md-switch-selected-handle-color: var(--on-primary);
    --md-switch-selected-icon-color: var(--on-primary);
    --md-switch-track-color: var(--surface-container-highest, var(--surface-variant));
    --md-switch-handle-color: var(--on-surface-variant);
}

md-list-item.m3-list-item {
    --md-list-item-hover-state-layer-color: var(--primary);
    --md-list-item-pressed-state-layer-color: var(--primary);
}

md-linear-progress {
    --md-linear-progress-track-shape: 9999px;
}

.track-card {
    border-radius: var(--shape-large-increased);
    transition: transform var(--expressive-duration-medium) var(--expressive-motion-emphasized),
        background-color var(--expressive-duration-short) var(--expressive-motion-standard);
}

.track-card img,
.track-card .no-art {
    border-radius: var(--shape-large);
}

.mini-player {
    border-radius: var(--shape-extra-large-increased);
    transition: transform var(--expressive-duration-medium) var(--expressive-motion-emphasized),
        opacity var(--expressive-duration-short) var(--expressive-motion-standard);
}

.m3-sheet {
    border-radius: var(--shape-extra-large-increased) var(--shape-extra-large-increased) 0 0;
    background: var(--surface-container);
    transition: transform var(--expressive-duration-long) var(--expressive-motion-emphasized);
}

.m3-backdrop:not(.visible),
.m3-sheet:not(.open),
.m3-fullscreen:not(.open),
.nav-drawer:not(.open) {
    transition-timing-function: var(--expressive-motion-accelerated);
}

.nav-drawer {
    border-radius: 0 var(--shape-extra-large-increased) var(--shape-extra-large-increased) 0;
    transition: transform var(--expressive-duration-medium) var(--expressive-motion-emphasized);
}

.m3-sheet-header h3,
.drawer-title,
.home-header h1,
.meta-data h2 {
    font-variation-settings: 'opsz' 32, 'wght' 650, 'GRAD' 25;
    letter-spacing: -0.025em;
}

.m3-list-item,
.m3-icon-btn,
.surface-close {
    transition-timing-function: var(--expressive-motion-standard);
    transition-duration: var(--expressive-duration-short);
}

@media (max-width: 480px) {
    .material-slider {
        --md-slider-active-track-height: 20px;
        --md-slider-inactive-track-height: 20px;
    }

    .m3-sheet {
        border-radius: var(--shape-extra-large) var(--shape-extra-large) 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
#queue-btn { border: none; }