/* TrueShuffle: a dark glassmorphism theme. One accent (Spotify green)
   carries the primary action, the selected source, and the focus ring;
   panels are translucent glass over a near-black ground. All state is
   driven by the id, hidden, aria-pressed, and disabled contract the
   browser app already maintains -- this sheet adds no behavior. */

:root {
  --ground: #06070c;
  --panel: rgba(255, 255, 255, 0.07);
  --panel-strong: rgba(255, 255, 255, 0.11);
  --edge: rgba(255, 255, 255, 0.16);
  --edge-bright: rgba(255, 255, 255, 0.3);
  --fg: #e8ecef;
  --muted: #8a95a1;
  --accent: #1db954;
  --accent-bright: #1ed760;
  --on-accent: #06130a;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  --radius: 0;
  --glow: 0 0 18px rgba(29, 185, 84, 0.4);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The hidden contract must win over every display rule below. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  /* The extra bottom padding keeps the fixed background dock from covering
     the last panel when the page is scrolled to its end. */
  padding: clamp(1.5rem, 5vw, 3.5rem) 1.25rem 5.5rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-family: var(--sans);
  color: var(--fg);
  line-height: 1.5;
  overflow-x: hidden;
  background: #05070c;
}

/* The authored ribbon SVG remains the default. Five dark raster variations
   preserve the same quiet center and luminous edge detail, so every choice
   stays legible behind the frosted panels. */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #070610 url("/background.svg") center / cover no-repeat;
}

html[data-background="weave"] .aurora {
  background-image: url("/background-weave.jpg");
}

html[data-background="veil"] .aurora {
  background-image: url("/background-veil.jpg");
}

html[data-background="orbit"] .aurora {
  background-image: url("/background-orbit.jpg");
}

html[data-background="tide"] .aurora {
  background-image: url("/background-tide.jpg");
}

html[data-background="prism"] .aurora {
  background-image: url("/background-prism.jpg");
}

.app {
  width: 100%;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Masthead: the monospace riffle mark is the signature; the wordmark and
   tagline sit beneath it. */
.masthead {
  text-align: center;
  padding: 0.5rem 0 0.25rem;
}

.banner {
  margin: 0 auto 0.85rem;
  font-family: var(--mono);
  font-size: clamp(0.7rem, 3.4vw, 0.95rem);
  line-height: 1.15;
  letter-spacing: 0.12em;
  color: var(--accent);
  opacity: 0.85;
  text-shadow: 0 0 14px rgba(29, 185, 84, 0.35);
}

h1 {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tagline {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* The background dock: one miniature swatch of each bundled image, pinned
   to the bottom edge so pressing one previews it behind the full page. The
   pressed swatch carries the accent ring the rest of the app uses for
   selection. */
.background-dock {
  position: fixed;
  bottom: 0.9rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  gap: 0.45rem;
  padding: 0.45rem;
  border: 1px solid var(--edge);
  background: rgba(6, 7, 12, 0.52);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.background-dock button {
  width: 2.7rem;
  height: 1.8rem;
  padding: 0;
  border: 1px solid var(--edge);
  background: #070610 center / cover no-repeat;
  opacity: 0.85;
}

.background-dock button:hover {
  opacity: 1;
}

.background-dock button[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: var(--glow);
  opacity: 1;
}

#background-ribbon {
  background-image: url("/background.svg");
}

#background-weave {
  background-image: url("/background-weave.jpg");
}

#background-veil {
  background-image: url("/background-veil.jpg");
}

#background-orbit {
  background-image: url("/background-orbit.jpg");
}

#background-tide {
  background-image: url("/background-tide.jpg");
}

#background-prism {
  background-image: url("/background-prism.jpg");
}

/* Contract fine print: quiet, muted, and short enough to be read. The
   connect note's visibility follows the Connect button by stylesheet, so
   the note is exactly as visible as the action it explains. */
.fineprint {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

#connect[hidden] ~ .connect-note {
  display: none;
}

/* The one-tap route into a standing result: a quiet accent link, no
   button chrome competing with the real actions. */
.quiet-link {
  display: inline-block;
  margin: 0.35rem 0 0;
  color: var(--accent);
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Glass panels: a light, see-through tint over a strong blur, so the sharp
   background shows through as frost. The lit top edge and border define the
   pane; the tint stays low so what reads is mostly the blurred background,
   not white. */
.panel {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}

/* If the browser cannot frost, a slightly stronger tint keeps the pane
   legible over the sharp background instead of leaving text on raw grid. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel {
    background: rgba(16, 20, 30, 0.72);
  }
}

#status {
  margin: 0;
  font-size: 1.02rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

/* Buttons: the primary connect action is filled green; disconnect and
   cancel are quiet ghosts. */
button {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 0.6rem 1.05rem;
  border-radius: 0;
  border: 1px solid var(--edge-bright);
  background: var(--panel-strong);
  color: var(--fg);
  cursor: pointer;
  transition: background-color 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
}

/* Hover lights the control up: an even accent border all the way around
   and a soft green glow. */
button:hover {
  border-color: var(--accent);
  box-shadow: var(--glow);
}

button:disabled {
  opacity: 0.45;
  cursor: default;
  border-color: var(--edge);
  box-shadow: none;
}

#connect {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

#connect:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
}

/* Status lines. */
#playlist-status,
#track-status,
#wait-status {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: var(--muted);
}

#wait-status {
  font-family: var(--mono);
  color: var(--accent-bright);
  letter-spacing: 0.02em;
}

#cancel {
  margin-bottom: 0.85rem;
}

/* Progress: a thin green fill over a faint track. */
progress {
  width: 100%;
  height: 6px;
  margin-bottom: 0.85rem;
  border: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.08);
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
}

progress::-webkit-progress-bar {
  background: rgba(255, 255, 255, 0.08);
}

progress::-webkit-progress-value {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(29, 185, 84, 0.5);
}

progress::-moz-progress-bar {
  background: var(--accent);
}

/* The source list: each row is a card in a dealt stack. */
#playlists {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 22rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--edge-bright) transparent;
}

#playlists::-webkit-scrollbar {
  width: 8px;
}

#playlists::-webkit-scrollbar-thumb {
  background: var(--edge-bright);
}

#playlists li {
  display: flex;
}

#playlists button {
  flex: 1;
  text-align: left;
  font-family: var(--sans);
  font-size: 0.95rem;
  letter-spacing: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--edge);
  background: var(--panel);
}

/* Hover and selection light the whole row evenly: an accent border on
   every side plus a green glow, no heavier edge. */
#playlists button:hover {
  background: var(--panel-strong);
  border-color: var(--accent);
  box-shadow: var(--glow);
}

#playlists button[aria-pressed="true"] {
  border-color: var(--accent);
  background: rgba(29, 185, 84, 0.16);
  box-shadow: var(--glow), inset 0 0 14px rgba(29, 185, 84, 0.14);
  color: #fff;
}

.noscript {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Keyboard focus is always visible and distinct from hover. */
:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

/* Respect reduced motion: drop the blur and every transition to flat
   translucency so the effect never causes motion discomfort. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}