/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */


/* ═══════════════════════════════════════════════════
   Design System — "Stripped Down"
   See public/style-guide.html for full reference
   ═══════════════════════════════════════════════════ */

/* --- Typography --- */

.page-heading {
  font-size: 2.2rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: #111;
}

.section-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #999;
  font-weight: 500;
}

.stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #bbb;
  font-weight: 500;
  margin-bottom: 2px;
}

.stat-value {
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: #111;
}

.stat-value-text {
  font-size: 1.1rem;
  font-weight: 400;
  color: #111;
}

.text-body {
  font-size: 0.88rem;
  color: #111;
}

.text-body-medium {
  font-size: 0.88rem;
  font-weight: 500;
  color: #111;
}

.text-caption {
  font-size: 0.82rem;
  color: #999;
}

.text-small {
  font-size: 0.78rem;
  color: #bbb;
}

.text-micro {
  font-size: 0.72rem;
  color: #999;
}

/* --- Layout --- */

.section-divider {
  border-top: 1px solid #eee;
  padding-top: 32px;
  margin-top: 32px;
}

.border-divider {
  border-bottom: 1px solid #eee;
}

/* --- Buttons --- */

.btn-link {
  font-size: 0.82rem;
  color: #999;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
}

.btn-link-sm {
  font-size: 0.78rem;
  color: #999;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  margin-top: 4px;
  cursor: pointer;
}

/* --- Status dots --- */

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50% !important;
  display: inline-block;
  flex-shrink: 0;
}

.status-dot-connected {
  background: #111;
}

.status-dot-disconnected {
  background: #ddd;
}

/* --- Toggle rows --- */

.toggle-row {
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.toggle-label {
  font-size: 0.88rem;
  color: #111;
}

.toggle-description {
  font-size: 0.78rem;
  color: #bbb;
}

/* --- Navigation --- */

.nav-text {
  font-size: 0.82rem;
  font-weight: 500;
}

/* --- Homepage --- */

.hero-heading {
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.hero-subtext {
  font-size: 1.15rem;
  color: #666;
  line-height: 1.6;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;
}

.hero-pill {
  font-size: 0.85rem;
  color: #999;
  font-weight: 400;
}

.hero-divider {
  width: 40px;
  height: 1px;
  background: #ddd;
  margin: 60px auto;
}

/* --- Album display --- */

.album-title {
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: #111;
}

.artist-name {
  font-size: 1rem;
  font-weight: 400;
  color: #999;
}

/* --- Footer --- */

.footer-link {
  color: #bbb;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-link:hover {
  color: #111;
}

/* Navigation links: muted gray with hover to black */
.nav-link {
  color: #bbb;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: #111;
}

/* Album display fade in animation on page load */
@keyframes albumFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#album_display {
  animation: albumFadeIn 0.5s ease-out;
}

/* Album hover 3D effect (no shadows, no border-radius) */
[data-album-hover-target="artwork"] {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

[data-album-hover-target="artwork"] img,
[data-album-hover-target="artwork"] > div {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Modal animation enhancements */
[data-modal-target="backdrop"] {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition:
    opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    backdrop-filter 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

[data-modal-target="panel"] {
  transition:
    opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change: transform, opacity;
  border: 1px solid #eee;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  [data-modal-target="backdrop"],
  [data-modal-target="panel"] {
    transition: none !important;
  }

  #album_display {
    animation: none !important;
  }

  [data-album-hover-target="artwork"] {
    transition: none !important;
  }
}

/* Track listing fade-in animation */
@keyframes trackFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Track listing animations (monochrome) */
[data-track-listing-target="track"] {
  transition:
    background-color 0.2s ease-out,
    transform 0.2s ease-out;
  cursor: default;
}

[data-track-listing-target="track"]:hover {
  background-color: rgba(0, 0, 0, 0.02);
  transform: translateX(4px);
}

/* Track position number subtle highlight on hover */
[data-track-listing-target="track"]:hover .text-gray-500 {
  color: #111;
  transition: color 0.2s ease-out;
}

/* Smooth transitions for track titles */
[data-track-listing-target="track"] .text-gray-900 {
  transition: color 0.2s ease-out;
}

/* Side selector smooth transitions */
[data-track-listing-target="sideSelector"] {
  transition: border-color 0.2s ease-out;
}

/* Track list container for smooth height changes */
[data-track-listing-target="trackList"] {
  transition: height 0.3s ease-out;
}

/* Track filtering transitions */
[data-track-listing-target="track"].filtering {
  transform: scale(0.95);
  opacity: 0;
  transition:
    opacity 0.2s ease-out,
    transform 0.2s ease-out;
}

/* Track loading state shimmer (monochrome) */
[data-track-listing-target="track"].loading {
  background: linear-gradient(90deg,
    rgba(229, 231, 235, 0.1) 25%,
    rgba(229, 231, 235, 0.3) 50%,
    rgba(229, 231, 235, 0.1) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Stat grid: canonical hairline-bordered tile group from public/style-guide.html */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid #eee;
  background: #fff;
}

.stat-grid > turbo-frame {
  display: contents;
}

.stat-item {
  padding: 24px;
}

.stat-item--top {
  border-bottom: 1px solid #eee;
}

.stat-item--left {
  border-right: 1px solid #eee;
}

/* Toggle switch (style guide: 40x22px, pill-shaped, black when on) */
.toggle-track {
  width: 40px;
  height: 22px;
  background: #ddd;
  border-radius: 11px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

.toggle-track.on {
  background: #111;
}

.toggle-track.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.toggle-track .toggle-knob {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: transform 0.2s;
}

.toggle-track.on .toggle-knob {
  transform: translateX(18px);
}

/* Disable track animations for reduced motion users */
@media (prefers-reduced-motion: reduce) {
  [data-track-listing-target="track"],
  [data-track-listing-target="sideSelector"],
  [data-track-listing-target="trackList"] {
    transition: none !important;
  }

  [data-track-listing-target="track"].loading {
    animation: none !important;
  }

  @keyframes trackFadeIn {
    from, to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes shimmer {
    from, to {
      background-position: 0% 0;
    }
  }
}

/* ═══════════════════════════════════════════════════
   Grooves picker / Hi-Fi vinyl player
   Adapted from Grooves Hi-Fi.html prototype
   ═══════════════════════════════════════════════════ */

.grooves-stage {
  position: relative;
  min-height: calc(100vh - 140px);
  background: #fafafa;
  overflow: hidden;
  transition: background 700ms ease, color 700ms ease;
}

.grooves-stage.is-dark {
  background: #050505;
  color: #f4f4f4;
}

/* SVG groove field */
.groove-field {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200vmax;
  height: 200vmax;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: opacity;
  transition: opacity 500ms ease;
}

.groove-field circle {
  fill: none;
  stroke: #111;
  stroke-opacity: 0.05;
  transition: stroke 700ms ease, stroke-opacity 700ms ease;
  animation: groove-sonar 7s ease-out infinite;
}

@keyframes groove-sonar {
  0%, 100% { stroke-opacity: 0.05; }
  6%       { stroke-opacity: 0.13; }
  14%      { stroke-opacity: 0.06; }
}

.grooves-stage.is-inking .groove-field,
.grooves-stage.is-revealed .groove-field,
.grooves-stage.is-exiting .groove-field {
  opacity: 0;
}

.grooves-stage.is-inking .groove-field circle,
.grooves-stage.is-revealed .groove-field circle,
.grooves-stage.is-exiting .groove-field circle,
.grooves-stage.is-dark .groove-field circle {
  animation: none;
}

.grooves-stage.is-dark .groove-field circle {
  stroke: #fff;
  stroke-opacity: 0.06;
}

@media (prefers-reduced-motion: reduce) {
  .groove-field circle { animation: none; }
}

/* Center stack: hit-region containing dot, hover hint, filter trigger and panel */
.grooves-center-stack {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 760px;
  max-width: 92vw;
  height: 360px;
  z-index: 3;
}

.grooves-stage.is-inking .grooves-center-stack,
.grooves-stage.is-revealed .grooves-center-stack,
.grooves-stage.is-exiting .grooves-center-stack {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

/* Black dot — geometric center */
.grooves-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #050505;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 280ms ease, transform 240ms cubic-bezier(.2, .7, .2, 1);
}

.grooves-dot-label {
  font: 500 12px/1 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 200ms ease, letter-spacing 240ms ease;
}

.grooves-dot:hover .grooves-dot-label {
  opacity: 1;
  letter-spacing: 0.4em;
}

.grooves-center-stack:hover .grooves-dot,
.grooves-stage.is-filter-open .grooves-dot {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 30px 80px -20px rgba(0, 0, 0, 0.25);
}

.grooves-dot:hover {
  transform: translate(-50%, -50%) scale(1.03);
}

.grooves-dot:active {
  transform: translate(-50%, -50%) scale(0.97);
}

/* Hover hint + filter trigger sit absolutely below the dot */
.grooves-hover-zone {
  position: absolute;
  left: 50%;
  top: calc(50% + 70px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  white-space: nowrap;
}

.grooves-hover-text {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #999;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 240ms ease, transform 240ms ease;
}

.grooves-center-stack:hover .grooves-hover-text,
.grooves-stage.is-filter-open .grooves-hover-text {
  opacity: 1;
  transform: translateY(0);
}

.grooves-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 4px 8px;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #aaa;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 240ms ease 60ms, transform 240ms ease 60ms, color 160ms ease;
}

.grooves-center-stack:hover .grooves-filter-trigger,
.grooves-stage.is-filter-open .grooves-filter-trigger {
  opacity: 1;
  transform: translateY(0);
}

.grooves-filter-trigger:hover {
  color: #111;
}

.grooves-filter-trigger .caret {
  display: inline-block;
  transition: transform 200ms ease;
}

.grooves-stage.is-filter-open .grooves-filter-trigger .caret {
  transform: rotate(180deg);
}

.grooves-filter-trigger .filter-value {
  color: #111;
}

/* Filter panel sits below trigger; opens on click only */
.grooves-filter-panel {
  position: absolute;
  left: 50%;
  top: calc(50% + 130px);
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: 720px;
  max-width: 92vw;
  padding: 24px 24px 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.grooves-stage.is-filter-open .grooves-filter-panel {
  opacity: 1;
  pointer-events: auto;
}

.grooves-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
  border: 1px solid #ddd;
  background: transparent;
  color: #555;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
  transition: all 140ms ease;
}

.grooves-chip:hover {
  border-color: #111;
  color: #111;
}

.grooves-chip[aria-pressed="true"] {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Ink reveal — black circle expands from the dot */
.grooves-ink {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #050505;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition: transform 800ms cubic-bezier(.7, 0, .3, 1), opacity 200ms ease;
}

.grooves-stage.is-inking .grooves-ink,
.grooves-stage.is-revealed .grooves-ink,
.grooves-stage.is-exiting .grooves-ink {
  opacity: 1;
}

.grooves-stage.is-inking .grooves-ink,
.grooves-stage.is-revealed .grooves-ink {
  transform: translate(-50%, -50%) scale(40);
}

.grooves-stage.is-exiting .grooves-ink {
  transform: translate(-50%, -50%) scale(0);
  transition: transform 700ms cubic-bezier(.7, 0, .3, 1), opacity 200ms ease 600ms;
}

/* Result composition — fades in once the ink covers everything */
.grooves-result {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 5;
  transition: opacity 600ms ease 600ms, visibility 0s linear 1200ms;
}

.grooves-stage.is-revealed .grooves-result {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 600ms ease 600ms, visibility 0s linear 600ms;
}

.grooves-stage.is-exiting .grooves-result {
  opacity: 0;
  transition: opacity 280ms ease;
}

.grooves-result-cover {
  width: min(38vh, 360px);
  aspect-ratio: 1 / 1;
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  transition:
    transform 700ms cubic-bezier(.2, .7, .2, 1) 700ms,
    opacity 600ms ease 700ms;
  background: #1a1a1a;
  overflow: hidden;
  view-transition-name: vinyl-cover;
}

.grooves-result-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.grooves-stage.is-revealed .grooves-result-cover {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.grooves-result-meta {
  text-align: center;
  margin-top: 36px;
  color: #fff;
  transform: translateY(8px);
  opacity: 0;
  transition:
    transform 600ms cubic-bezier(.2, .7, .2, 1) 900ms,
    opacity 500ms ease 900ms;
}

.grooves-stage.is-revealed .grooves-result-meta {
  transform: translateY(0);
  opacity: 1;
}

.grooves-result-title {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

.grooves-result-artist {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 8px;
  letter-spacing: 0.02em;
}

.grooves-result-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 36px;
  flex-wrap: wrap;
  transform: translateY(8px);
  opacity: 0;
  transition:
    transform 600ms cubic-bezier(.2, .7, .2, 1) 1050ms,
    opacity 500ms ease 1050ms;
}

.grooves-stage.is-revealed .grooves-result-actions {
  transform: translateY(0);
  opacity: 1;
}

/* Buttons — reusable inside the dark grooves stage */
.grooves-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  background: #fff;
  color: #111;
  border: 1px solid #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.grooves-btn:hover {
  background: #f0f0f0;
}

.grooves-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.grooves-btn--ghost:hover {
  background: #fff;
  color: #111;
  border-color: #fff;
}

/* Spin-again swap animation: outgoing slides down + fades, incoming bubbles up */
.grooves-stage.is-swap-out .grooves-result-cover {
  transform: translateY(40px) scale(0.94) !important;
  opacity: 0 !important;
  transition: transform 360ms cubic-bezier(.6, 0, .4, 1), opacity 320ms ease !important;
}

.grooves-stage.is-swap-out .grooves-result-meta,
.grooves-stage.is-swap-out .grooves-result-actions {
  transform: translateY(24px) !important;
  opacity: 0 !important;
  transition: transform 320ms ease, opacity 280ms ease !important;
}

.grooves-stage.is-swap-in .grooves-result-cover {
  transform: translateY(-40px) scale(0.94) !important;
  opacity: 0 !important;
  transition: none !important;
}

.grooves-stage.is-swap-in .grooves-result-meta,
.grooves-stage.is-swap-in .grooves-result-actions {
  transform: translateY(-20px) !important;
  opacity: 0 !important;
  transition: none !important;
}

.grooves-stage.is-swap-revealed .grooves-result-cover {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  transition: transform 480ms cubic-bezier(.2, .7, .2, 1), opacity 380ms ease !important;
}

.grooves-stage.is-swap-revealed .grooves-result-meta {
  transform: translateY(0) !important;
  opacity: 1 !important;
  transition: transform 460ms cubic-bezier(.2, .7, .2, 1) 80ms, opacity 380ms ease 80ms !important;
}

.grooves-stage.is-swap-revealed .grooves-result-actions {
  transform: translateY(0) !important;
  opacity: 1 !important;
  transition: transform 460ms cubic-bezier(.2, .7, .2, 1) 160ms, opacity 380ms ease 160ms !important;
}

/* ═══════════════════════════════════════════════════
   Vinyl player — playing state
   ═══════════════════════════════════════════════════ */

.vinyl-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  gap: 44px;
  min-height: calc(100vh - 140px);
}

.vinyl-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  width: min(48vh, 440px);
}

.vinyl-cover {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  transform: translateX(0);
  transition: transform 900ms cubic-bezier(.7, 0, .3, 1);
  background: #1a1a1a;
  overflow: hidden;
  view-transition-name: vinyl-cover;
}

/* Slow the morph between the suggestion cover and the now-playing cover so
   the size change reads as a deliberate animation rather than a snap. */
@supports (view-transition-name: vinyl-cover) {
  ::view-transition-old(vinyl-cover),
  ::view-transition-new(vinyl-cover) {
    animation-duration: 700ms;
    animation-timing-function: cubic-bezier(.2, .7, .2, 1);
  }
  ::view-transition-group(vinyl-cover) {
    animation-duration: 700ms;
    animation-timing-function: cubic-bezier(.2, .7, .2, 1);
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 350ms;
  }
}

.vinyl-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vinyl-stage.is-spinning .vinyl-cover {
  transform: translateX(-12%);
}

.vinyl-record {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: translateX(0);
  opacity: 0;
  transition:
    transform 900ms cubic-bezier(.7, 0, .3, 1),
    opacity 600ms ease;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45));
}

.vinyl-stage.is-spinning .vinyl-record {
  transform: translateX(50%);
  opacity: 1;
}

.vinyl-spinner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: vinyl-spin 4s linear infinite;
  animation-play-state: paused;
}

.vinyl-stage.is-spinning .vinyl-spinner {
  animation-play-state: running;
}

@keyframes vinyl-spin {
  to { transform: rotate(360deg); }
}

.vinyl-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center,
      #0a0a0a 0px, #0a0a0a 1px,
      #1a1a1a 1px, #1a1a1a 3px),
    radial-gradient(circle at 30% 30%, #2a2a2a 0%, #0a0a0a 60%);
}

/* Subtle glare wedge — moving highlight masked off the gold label */
.vinyl-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      rgba(255, 255, 255, 0)    0deg,
      rgba(255, 255, 255, 0.10) 18deg,
      rgba(255, 255, 255, 0)    50deg,
      rgba(255, 255, 255, 0)    180deg,
      rgba(255, 255, 255, 0.05) 200deg,
      rgba(255, 255, 255, 0)    230deg,
      rgba(255, 255, 255, 0)    360deg);
  -webkit-mask: radial-gradient(circle at center, transparent 18%, #000 22%);
          mask: radial-gradient(circle at center, transparent 18%, #000 22%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.vinyl-label {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36%;
  height: 36%;
  border-radius: 50%;
  background: #c19a3d;
  transform: translate(-50%, -50%);
}

.vinyl-label::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #050505;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.vinyl-label-text {
  position: absolute;
  left: 50%;
  top: 72%;
  transform: translate(-50%, -50%);
  font: 700 10px/1 'Space Mono', ui-monospace, monospace;
  color: rgba(0, 0, 0, 0.55);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vinyl-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 720px;
}

.vinyl-link-soft {
  display: block;
  background: none;
  border: none;
  padding: 0;
  text-align: center;
  text-decoration: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: color 160ms ease;
}

.vinyl-link-soft:hover {
  color: #b8862a;
}

.vinyl-title {
  font-size: clamp(36px, 3.6vw, 48px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
  color: #111;
}

.vinyl-artist {
  font-size: 16px;
  color: #666;
  letter-spacing: 0.01em;
}

.vinyl-controls {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.vinyl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  background: #111;
  color: #fff;
  border: 1px solid #111;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.vinyl-btn:hover { background: #000; }

.side-selector {
  display: flex;
  align-items: center;
  gap: 14px;
}

.side-selector-label {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #999;
}

.side-chips { display: flex; gap: 6px; }

.side-chip {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: transparent;
  font: 600 13px/1 'Space Grotesk', system-ui, sans-serif;
  color: #888;
  cursor: pointer;
  transition: all 160ms ease;
}

.side-chip:not(.is-on):not(:disabled):hover {
  border-color: #111;
  color: #111;
}

.side-chip.is-on {
  background: #050505;
  border-color: #050505;
  color: #fff;
}

.side-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Quiet "Start over" link beneath the playback controls. Form-rendered
   button_to wraps this in a <form> — we strip its borders/spacing so the
   button itself sits as a plain text-link on the page. */
.vinyl-start-over {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 8px 12px;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #999;
  cursor: pointer;
  transition: color 160ms ease;
}

.vinyl-start-over:hover { color: #111; }

.vinyl-start-over-icon {
  font-size: 13px;
  line-height: 1;
}

/* button_to wraps its <button> in a <form class="button_to">; keep the form
   tight so it doesn't introduce extra spacing around the start-over link. */
.vinyl-info form.button_to {
  margin: 0;
  display: inline-flex;
}

/* Immersive takeover: while inking / revealed / exiting, the dark stage
   covers the entire viewport (over the nav and footer) so the result reads
   as a full-screen moment, not a panel sandwiched between chrome. */
.grooves-stage.is-inking,
.grooves-stage.is-revealed,
.grooves-stage.is-exiting {
  position: fixed;
  inset: 0;
  z-index: 50;
  min-height: 100vh;
}

/* Play transition lead-in: the dark backdrop dissolves and the title,
   artist, and action buttons fade away, leaving the album cover anchored
   in place. The cross-page cover resize is then handled by the browser's
   native View Transitions API (see ::view-transition-* rules below) so the
   cover smoothly morphs into its dashboard size on the new page. */
.grooves-stage.is-playing-enter {
  background: #fafafa !important;
  transition: background 600ms ease;
}
.grooves-stage.is-playing-enter .grooves-ink {
  transform: translate(-50%, -50%) scale(0) !important;
  opacity: 0 !important;
  transition: transform 700ms cubic-bezier(.7, 0, .3, 1), opacity 600ms ease !important;
}
.grooves-stage.is-playing-enter .grooves-result-cover {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}
.grooves-stage.is-playing-enter .grooves-result-meta,
.grooves-stage.is-playing-enter .grooves-result-actions {
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: opacity 360ms ease, transform 360ms ease !important;
}

@media (max-width: 880px) {
  .grooves-result {
    padding: 40px 20px;
  }
  .grooves-result-cover {
    width: min(60vw, 280px);
  }
  .vinyl-player {
    padding: 40px 20px;
    gap: 32px;
  }
  .vinyl-stage {
    width: min(70vw, 340px);
  }
  .vinyl-stage.is-spinning .vinyl-cover {
    transform: translateX(-8%);
  }
  .vinyl-stage.is-spinning .vinyl-record {
    transform: translateX(40%);
  }
  .vinyl-controls { gap: 16px; }
}

.toast {
  font-family: "Space Grotesk", sans-serif;
  border: 1px solid #111;
}

.toast--notice {
  background: #fff;
  color: #111;
}

.toast--error {
  background: #111;
  color: #fff;
}

.toast-body {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 14px 18px;
}

.toast-message {
  flex: 1;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.toast-close {
  padding: 0;
  background: transparent;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  color: #999;
  cursor: pointer;
}

.toast--error .toast-close {
  color: #bbb;
}