/* Author: Codex | Project: Lyra | Date: 2026-09-27
 * File: bridge.css | Description: Real Lyra components consume Polaris roles while preserving glass hierarchy and layout. */
@import url("../vendor/polaris/src/styles.css");

:root, [data-glass-level] {
  --muted: var(--polaris-text-muted, #d0d8d2);
  --material-alpha: var(--polaris-glass-opacity, .72);
  --material-strong-alpha: clamp(0, calc(var(--polaris-glass-opacity, .72) + .16), 1);
  --material-card-alpha: clamp(0, calc(var(--polaris-glass-opacity, .72) + .08), 1);
  --material-blur: var(--polaris-glass-blur, 24px);
  --material-saturation: calc(var(--polaris-glass-saturation, 1.35) * 100%);
  --material-edge-alpha: var(--polaris-glass-border-opacity, .14);
  --material-fill: color-mix(in srgb, var(--polaris-surface, #0c0e10) calc(var(--material-alpha) * 100%), transparent);
  --material-strong: color-mix(in srgb, var(--polaris-surface-raised, #0c0e10) calc(var(--material-strong-alpha) * 100%), transparent);
  --material-card: color-mix(in srgb, var(--polaris-surface, #0c0e10) calc(var(--material-card-alpha) * 100%), transparent);
  --material-border: color-mix(in srgb, var(--polaris-border, #fff) calc(var(--material-edge-alpha) * 100%), transparent);
  --material-highlight: color-mix(in srgb, var(--polaris-text, #fff) calc(var(--material-light-alpha) * 100%), transparent);
  --material-control: color-mix(in srgb, var(--polaris-secondary-fill, #fff) 4.5%, transparent);
  --material-control-hover: color-mix(in srgb, var(--polaris-secondary-fill, #fff) 9.5%, transparent);
  --material-row-hover: var(--material-control);
  --material-selected: var(--material-control-hover);
  --material-selected-border: color-mix(in srgb, var(--polaris-secondary-fill, #fff) 48%, transparent);
  --material-accent-text: var(--polaris-primary-100, #b0f1d5);
}
[data-glass-level="subtle"] {
  --material-alpha: clamp(0, calc(var(--polaris-glass-opacity, .72) + .12), 1);
  --material-strong-alpha: clamp(0, calc(var(--polaris-glass-opacity, .72) + .22), 1);
  --material-card-alpha: clamp(0, calc(var(--polaris-glass-opacity, .72) + .16), 1);
  --material-blur: max(0px, calc(var(--polaris-glass-blur, 24px) - 12px));
  --material-saturation: max(0%, calc((var(--polaris-glass-saturation, 1.35) - .25) * 100%));
  --material-edge-alpha: max(0, calc(var(--polaris-glass-border-opacity, .14) - .04));
}
[data-glass-level="vivid"] {
  --material-alpha: max(0, calc(var(--polaris-glass-opacity, .72) - .04));
  --material-strong-alpha: clamp(0, calc(var(--polaris-glass-opacity, .72) + .1), 1);
  --material-card-alpha: clamp(0, calc(var(--polaris-glass-opacity, .72) + .02), 1);
  --material-blur: calc(var(--polaris-glass-blur, 24px) + 6px);
  --material-saturation: calc((var(--polaris-glass-saturation, 1.35) + .1) * 100%);
  --material-edge-alpha: min(1, calc(var(--polaris-glass-border-opacity, .14) + .07));
}
body {
  font-family: var(--polaris-font-sans-body-family, system-ui, sans-serif);
  font-size: var(--polaris-font-sans-body-size, 16px);
  font-weight: var(--polaris-font-sans-body-weight, 400);
  line-height: var(--polaris-font-sans-body-line-height, 1.4);
  letter-spacing: var(--polaris-font-sans-body-tracking, 0);
  font-stretch: var(--polaris-font-sans-body-width, normal);
  font-variation-settings: var(--polaris-font-sans-body-variation, normal);
}
.view-header h1, .connect-panel > p, .not-found h1, .profile-section h2, .analytics-card h2 {
  font-family: var(--polaris-font-sans-heading-family, system-ui, sans-serif);
  font-size: var(--polaris-font-sans-heading-size, 24px);
  font-weight: var(--polaris-font-sans-heading-weight, 700);
  line-height: var(--polaris-font-sans-heading-line-height, 1.2);
  letter-spacing: var(--polaris-font-sans-heading-tracking, -.035em);
  font-stretch: var(--polaris-font-sans-heading-width, normal);
  font-variation-settings: var(--polaris-font-sans-heading-variation, normal);
}
.app-header button, .app-header .tab, .primary-link, .chip, .playlist-action, .profile-section button, .profile-section select, .profile-section input, .analytics-controls button, .analytics-controls select {
  font-family: var(--polaris-font-control-family, system-ui, sans-serif);
  font-size: var(--polaris-font-control-size, 12px);
  font-weight: var(--polaris-font-control-weight, 650);
  line-height: var(--polaris-font-control-line-height, 1.4);
  letter-spacing: var(--polaris-font-control-tracking, 0);
  font-stretch: var(--polaris-font-control-width, normal);
  font-variation-settings: var(--polaris-font-control-variation, normal);
}
.app-status, .track-table-head, .profile-field label, .settings-field label, .analytics-metric span {
  font-family: var(--polaris-font-label-family, system-ui, sans-serif);
  font-size: var(--polaris-font-label-size, 12px);
  font-weight: var(--polaris-font-label-weight, 600);
  line-height: var(--polaris-font-label-line-height, 1.4);
  letter-spacing: var(--polaris-font-label-tracking, .02em);
  font-stretch: var(--polaris-font-label-width, normal);
  font-variation-settings: var(--polaris-font-label-variation, normal);
}
pre, code, .entity-id, .metadata-log-entry time {
  font-family: var(--polaris-font-mono-family, ui-monospace, monospace);
  font-size: var(--polaris-font-mono-size, 11px);
  font-weight: var(--polaris-font-mono-weight, 400);
  line-height: var(--polaris-font-mono-line-height, 1.65);
  letter-spacing: var(--polaris-font-mono-tracking, 0);
  font-stretch: var(--polaris-font-mono-width, normal);
  font-variation-settings: var(--polaris-font-mono-variation, normal);
}
.primary-link { background: var(--polaris-primary-fill, #00b377); color: var(--polaris-primary-text, #050606); }
.app-header { --text: var(--polaris-header-text, #fff); background: var(--material-sheen), color-mix(in srgb, var(--polaris-header-fill, #0c0e10) calc(var(--material-alpha) * 100%), transparent); }
.player-button.primary, .mode-button.active, .player-button.queue-button.shuffle-active { background: var(--polaris-secondary-fill, #fff); color: var(--polaris-secondary-text, #050606); }
.player-button.primary:hover { background: var(--polaris-primary-fill, #00b377); color: var(--polaris-primary-text, #050606); }
.app-status.online i, .operations-indicator[data-state="healthy"] i { background: var(--polaris-status-success, #00b377); }
.app-status.warning i, .operations-indicator[data-state="busy"] i { background: var(--polaris-status-warning, #ffb020); }
.app-status.offline i, .operations-indicator[data-state="error"] i { background: var(--polaris-status-error, #e24b55); }
.header-connection:has(.warning) .header-device, .header-analytics-status:has([data-state="busy"]) .header-device { color: var(--polaris-status-warning, #ffb020); }
.header-connection:has(.offline) .header-device, .header-analytics-status:has([data-state="error"]) .header-device { color: var(--polaris-status-error, #e24b55); }
:where(button, a, input, select, summary, [tabindex="0"]):focus-visible { outline-color: var(--polaris-focus, #fff); }
/* Respect Lyra's existing accessibility overrides after the bridge's derived material values. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root, [data-glass-level] { --material-fill: var(--polaris-surface, #121416); --material-strong: var(--polaris-surface-raised, #121416); --material-card: var(--polaris-surface, #121416); } }
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) { :root, [data-glass-level] { --material-fill: var(--polaris-surface, #121416); --material-strong: var(--polaris-surface-raised, #121416); --material-card: var(--polaris-surface, #121416); --material-filter: none; --material-border: var(--polaris-text-muted, #a7b4ac); --muted: var(--polaris-text, #e3e8e5); } }
@media (forced-colors: active) { :root, [data-glass-level] { --material-fill: Canvas; --material-strong: Canvas; --material-card: Canvas; --material-border: ButtonText; --material-control: ButtonFace; --material-control-hover: ButtonFace; --material-selected: Highlight; --material-selected-border: Highlight; --muted: CanvasText; --material-accent-text: LinkText; } .primary-link, .player-button.primary, .mode-button.active { background: ButtonFace; color: ButtonText; } }

/* The editor owns role materials; ordinary Lyra retains its existing saved glass-level preference. */
[data-polaris-glass-managed] body {
  --material-alpha: var(--polaris-glass-functional-opacity);
  --material-strong-alpha: min(1, calc(var(--polaris-glass-functional-opacity) * 1.119047619));
  --material-card-alpha: var(--polaris-glass-surface-opacity);
  --material-blur: var(--polaris-glass-functional-blur);
  --material-saturation: calc(var(--polaris-glass-functional-saturation) * 100%);
  --material-edge-alpha: var(--polaris-glass-functional-border-opacity);
  --material-light-alpha: calc(var(--polaris-glass-functional-border-opacity) * .3);
  --material-shadow-size: 24px;
  --material-fill: color-mix(in srgb, var(--polaris-glass-functional-tint) calc(var(--material-alpha) * 100%), transparent);
  --material-strong: color-mix(in srgb, var(--polaris-glass-functional-tint) calc(var(--material-strong-alpha) * 100%), transparent);
  --material-card: color-mix(in srgb, var(--polaris-glass-surface-tint) calc(var(--material-card-alpha) * 100%), transparent);
  --material-border: color-mix(in srgb, var(--polaris-border) calc(var(--material-edge-alpha) * 100%), transparent);
  --material-highlight: color-mix(in srgb, var(--polaris-text) calc(var(--material-light-alpha) * 100%), transparent);
  --material-control: color-mix(in srgb, var(--polaris-secondary-fill) calc(var(--material-alpha) * 5.3571%), transparent);
  --material-control-hover: color-mix(in srgb, var(--polaris-secondary-fill) calc(var(--material-alpha) * 11.3095%), transparent);
  --material-filter: blur(var(--material-blur)) saturate(var(--material-saturation));
  --material-sheen: linear-gradient(125deg, var(--material-highlight), transparent 45%);
  --material-shadow: inset 0 1px var(--material-highlight), 0 14px var(--material-shadow-size) rgba(0,0,0,.26);
  --material-row-hover: var(--material-control);
  --material-selected: var(--material-control-hover);
  --surface: var(--material-card);
  --surface-hover: var(--material-control-hover);
  --control-background: var(--material-control);
  --control-hover: var(--material-control-hover);
  --panel-background: var(--material-strong);
  --modal-background: var(--material-strong);
  --player-background: var(--material-fill);
  --line: var(--material-border);
}
[data-polaris-glass-managed] .app-header { background: var(--material-sheen), var(--material-fill); }
[data-polaris-glass-managed] .playlist-collection {
  background: color-mix(in srgb, var(--polaris-glass-container-tint) calc(var(--polaris-glass-container-opacity) * 100%), transparent);
  border-color: color-mix(in srgb, var(--polaris-border) calc(var(--polaris-glass-container-border-opacity) * 100%), transparent);
  backdrop-filter: blur(var(--polaris-glass-container-blur)) saturate(var(--polaris-glass-container-saturation));
  -webkit-backdrop-filter: blur(var(--polaris-glass-container-blur)) saturate(var(--polaris-glass-container-saturation));
}
[data-polaris-glass-managed] :is(.playlist-card, .artist-card, .view-header, .json-panel) {
  --material-highlight: color-mix(in srgb, var(--polaris-text) calc(var(--polaris-glass-surface-border-opacity) * 30%), transparent);
  --material-sheen: linear-gradient(125deg, var(--material-highlight), transparent 45%);
  background: var(--material-sheen), var(--material-card);
  border-color: color-mix(in srgb, var(--polaris-border) calc(var(--polaris-glass-surface-border-opacity) * 100%), transparent);
  backdrop-filter: blur(var(--polaris-glass-surface-blur)) saturate(var(--polaris-glass-surface-saturation));
  -webkit-backdrop-filter: blur(var(--polaris-glass-surface-blur)) saturate(var(--polaris-glass-surface-saturation));
}
[data-polaris-glass-managed] .playlist-card[open] { background: color-mix(in srgb, var(--polaris-glass-surface-tint) min(100%, calc(var(--polaris-glass-surface-opacity) * 106.8181818%)), transparent); }
/* Standalone interactive track lists use Functional; nested lists remain content. */
[data-polaris-glass-managed] .track-list { background: color-mix(in srgb, var(--polaris-glass-functional-tint) min(100%, calc(var(--polaris-glass-functional-opacity) * 104.7619048%)), transparent); backdrop-filter: var(--material-filter); -webkit-backdrop-filter: var(--material-filter); }
/* Track lists inside cards are content, not a fourth decorative material layer. */
[data-polaris-glass-managed] .playlist-card .track-list { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-polaris-glass-managed] .ambient-background { z-index: -2; }
[data-polaris-glass-managed] body::before, [data-polaris-glass-managed] body::after { z-index: -3; }
.lyra-glass-background { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: color-mix(in srgb, var(--polaris-glass-background-tint) calc(var(--polaris-glass-background-opacity) * 100%), transparent); backdrop-filter: blur(var(--polaris-glass-background-blur)) saturate(var(--polaris-glass-background-saturation)); -webkit-backdrop-filter: blur(var(--polaris-glass-background-blur)) saturate(var(--polaris-glass-background-saturation)); }
[data-polaris-glass-managed] .glass-level-picker { display: none; }
.polaris-glass-settings-note { display: none; }
[data-polaris-glass-managed] .polaris-glass-settings-note { display: block; color: var(--muted); }
/* Accessibility preferences take precedence over every adjustable material role. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-polaris-glass-managed] body { --material-fill: var(--polaris-glass-functional-tint); --material-strong: var(--polaris-glass-functional-tint); --material-card: var(--polaris-glass-surface-tint); }
  [data-polaris-glass-managed] .playlist-collection { background: var(--polaris-glass-container-tint); }
  [data-polaris-glass-managed] .track-list { background: var(--polaris-glass-functional-tint); }
  [data-polaris-glass-managed] .playlist-card[open] { background: var(--polaris-glass-surface-tint); }
  [data-polaris-glass-managed] .playlist-card .track-list { background: transparent; }
}
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  [data-polaris-glass-managed] body { --material-fill: var(--polaris-glass-functional-tint); --material-strong: var(--polaris-glass-functional-tint); --material-card: var(--polaris-glass-surface-tint); --material-filter: none; --material-control: var(--polaris-surface-raised); --material-control-hover: var(--polaris-surface-inset); --material-border: var(--polaris-text-muted); --material-sheen: none; }
  [data-polaris-glass-managed] .playlist-collection { background: var(--polaris-glass-container-tint); }
  [data-polaris-glass-managed] :is(.playlist-collection, .playlist-card, .artist-card, .view-header, .json-panel, .track-list) { backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--polaris-text-muted); }
  [data-polaris-glass-managed] .playlist-card[open] { background: var(--polaris-glass-surface-tint); }
  [data-polaris-glass-managed] .track-list { background: var(--polaris-glass-functional-tint); }
  [data-polaris-glass-managed] .playlist-card .track-list { background: transparent; }
  .lyra-glass-background { background: var(--polaris-page); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (forced-colors: active) {
  [data-polaris-glass-managed] body { --material-fill: Canvas; --material-strong: Canvas; --material-card: Canvas; --material-border: ButtonText; --material-control: ButtonFace; --material-control-hover: ButtonFace; --material-sheen: none; --material-filter: none; }
  [data-polaris-glass-managed] :is(.playlist-collection, .playlist-card, .artist-card, .view-header, .json-panel, .track-list) { background: Canvas; border-color: CanvasText; box-shadow: none; --material-sheen: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .lyra-glass-background { display: none; }
}