/* Luxe search (v0.3.19): a clear glass bar, bright text with a soft glow.
   Applies to the modern presets; Pixel, GeoCities, Terminal and Zine keep their
   own retro search styling. Loaded last so it wins over the older search rules. */
:root:not([data-theme-preset=pixel]):not([data-theme-preset=geocities]):not([data-theme-preset=terminal]):not([data-theme-preset=zine]) {
  --luxe-ink: color-mix(in srgb, var(--ink) 92%, transparent);
  --luxe-soft: color-mix(in srgb, var(--ink) 55%, transparent);
  --luxe-line: color-mix(in srgb, var(--ink) 22%, transparent);
  --luxe-line-strong: color-mix(in srgb, var(--ink) 45%, transparent);
  --luxe-tint: color-mix(in srgb, var(--page) 14%, transparent);
  --luxe-sheen: color-mix(in srgb, #fff 9%, transparent);
  /* Light themes: a white halo reads as glow; a dark one would look smudged. */
  --luxe-glow: rgb(255 255 255 / .9);
  --luxe-halo: color-mix(in srgb, var(--ink) 6%, transparent);
}
:root[data-theme=dark]:not([data-theme-preset=pixel]):not([data-theme-preset=geocities]):not([data-theme-preset=terminal]):not([data-theme-preset=zine]) {
  --luxe-ink: #fff;
  --luxe-soft: rgb(255 255 255 / .58);
  --luxe-line: rgb(255 255 255 / .2);
  --luxe-line-strong: rgb(255 255 255 / .46);
  --luxe-tint: rgb(8 10 18 / .16);
  --luxe-sheen: rgb(255 255 255 / .07);
  --luxe-glow: rgb(255 255 255 / .5);
  --luxe-halo: rgb(255 255 255 / .07);
}

:root:not([data-theme-preset=pixel]):not([data-theme-preset=geocities]):not([data-theme-preset=terminal]):not([data-theme-preset=zine]) :is(#music-global-search, #globe-search-form) {
  color: var(--luxe-ink);
  background: linear-gradient(180deg, var(--luxe-sheen), transparent 70%), var(--luxe-tint) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 var(--luxe-sheen),
    0 0 28px var(--luxe-halo),
    0 8px 30px rgb(0 0 0 / .14) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  padding: 5px 6px 5px 10px;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
:root:not([data-theme-preset=pixel]):not([data-theme-preset=geocities]):not([data-theme-preset=terminal]):not([data-theme-preset=zine]) :is(#music-global-search, #globe-search-form):is(:hover, :focus-within) {
  border-color: var(--luxe-line-strong) !important;
  box-shadow:
    inset 0 1px 0 var(--luxe-sheen),
    0 0 0 1px var(--luxe-halo),
    0 0 36px var(--luxe-halo),
    0 0 14px color-mix(in srgb, var(--luxe-glow) 30%, transparent),
    0 8px 30px rgb(0 0 0 / .16) !important;
}

/* Field text: bright, slightly glowing; the placeholder stays quiet. */
:root:not([data-theme-preset=pixel]):not([data-theme-preset=geocities]):not([data-theme-preset=terminal]):not([data-theme-preset=zine]) :is(#music-global-search, #globe-search-form) input[type=search] {
  color: var(--luxe-ink);
  caret-color: var(--luxe-ink);
  background: transparent !important;
  border: 0;
  box-shadow: none !important;
  letter-spacing: .015em;
  text-shadow: 0 0 10px var(--luxe-glow);
}
:root:not([data-theme-preset=pixel]):not([data-theme-preset=geocities]):not([data-theme-preset=terminal]):not([data-theme-preset=zine]) :is(#music-global-search, #globe-search-form) input[type=search]::placeholder {
  color: var(--luxe-soft);
  text-shadow: none;
  letter-spacing: .02em;
}
:root:not([data-theme-preset=pixel]):not([data-theme-preset=geocities]):not([data-theme-preset=terminal]):not([data-theme-preset=zine]) :is(#music-global-search, #globe-search-form) input[type=search]::-webkit-search-cancel-button {
  filter: grayscale(1) brightness(1.6);
  opacity: .6;
}

/* Source picker: text only, set off by a hairline divider. */
:root:not([data-theme-preset=pixel]):not([data-theme-preset=geocities]):not([data-theme-preset=terminal]):not([data-theme-preset=zine]) #music-global-search select {
  color: var(--luxe-soft);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--luxe-line);
  border-radius: 0;
  padding: 6px 4px 6px 12px;
  letter-spacing: .03em;
  transition: color .2s ease, text-shadow .2s ease;
}
:root:not([data-theme-preset=pixel]):not([data-theme-preset=geocities]):not([data-theme-preset=terminal]):not([data-theme-preset=zine]) #music-global-search select:is(:hover, :focus-visible) {
  color: var(--luxe-ink);
  text-shadow: 0 0 8px var(--luxe-glow);
}
:root:not([data-theme-preset=pixel]):not([data-theme-preset=geocities]):not([data-theme-preset=terminal]):not([data-theme-preset=zine]) #music-global-search select option {
  color: var(--ink);
  background: var(--page);
  text-shadow: none;
}

/* Search button: a ghost pill that lights up instead of a filled block. */
:root:not([data-theme-preset=pixel]):not([data-theme-preset=geocities]):not([data-theme-preset=terminal]):not([data-theme-preset=zine]) :is(#music-global-search, #globe-search-form) button {
  color: var(--luxe-ink);
  background: transparent !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 999px !important;
  padding: 8px 16px;
  letter-spacing: .04em;
  text-shadow: 0 0 8px color-mix(in srgb, var(--luxe-glow) 60%, transparent);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
:root:not([data-theme-preset=pixel]):not([data-theme-preset=geocities]):not([data-theme-preset=terminal]):not([data-theme-preset=zine]) :is(#music-global-search, #globe-search-form) button:hover:not(:disabled) {
  background: var(--luxe-halo) !important;
  border-color: var(--luxe-line-strong) !important;
  box-shadow: 0 0 16px var(--luxe-halo), inset 0 0 10px var(--luxe-halo);
}
:root:not([data-theme-preset=pixel]):not([data-theme-preset=geocities]):not([data-theme-preset=terminal]):not([data-theme-preset=zine]) :is(#music-global-search, #globe-search-form) :is(button, select):focus-visible {
  outline: 1px solid var(--luxe-line-strong);
  outline-offset: 2px;
  border-radius: 999px;
}
/* The whole pill brightens on focus (see :focus-within above), so the field needs no box. */
:root:not([data-theme-preset=pixel]):not([data-theme-preset=geocities]):not([data-theme-preset=terminal]):not([data-theme-preset=zine]) :is(#music-global-search, #globe-search-form) input[type=search]:focus-visible {
  outline: none;
}

/* Reduced transparency (e.g. Windows "Transparency effects" off): stay see-through
   but drop the blur and deepen the tint a little so text keeps its contrast. */
@media (prefers-reduced-transparency: reduce) {
  :root:not([data-theme-preset=pixel]):not([data-theme-preset=geocities]):not([data-theme-preset=terminal]):not([data-theme-preset=zine]) {
    --luxe-tint: color-mix(in srgb, var(--page) 34%, transparent);
  }
  :root:not([data-theme-preset=pixel]):not([data-theme-preset=geocities]):not([data-theme-preset=terminal]):not([data-theme-preset=zine]) :is(#music-global-search, #globe-search-form) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Layout: the bar is see-through now, so it must never sit on top of the nav.
   Wide screens keep it centred on the page. Mid-width screens keep it in the gap
   between the left nav (about 530px when signed in, with Globe) and the right-hand
   group (about 330px). Below 1180px it moves to its own row under the nav, as on phones. */
@media (min-width: 1180px) {
  :root #music-global-search {
    left: max(530px, calc(50vw - 270px));
    right: auto;
    transform: none;
    width: min(540px, calc(100vw - 860px));
  }
}
@media (min-width: 761px) and (max-width: 1179.98px) {
  :root #music-global-search {
    top: 72px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(540px, calc(100vw - 48px));
  }
}