:root {
  --bg-main: #0c0c10;
  --bg-surface: #141419;
  --bg-card: #1c1c23;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text-main: #f4f4f7f1;
  --text-muted: #f4f4f7c4;
  --color-accent: #f43f5e;
  --color-accent-hover: #e11d48;
  --sleeve-size: min(42vw, 420px);
  --radius-sm: 6px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

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

body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-sans);
  line-height: 1.5;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button,
a,
select,
input,
summary {
  touch-action: manipulation;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  justify-content: space-between;
  position: relative;
  overflow: clip;
}

/* Header: one slim, borderless row floating over the crate so the ambient color runs to the top edge */
.app-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.9rem 1.75rem 2.25rem;
  background: linear-gradient(180deg, rgba(8, 8, 11, 0.82) 0%, rgba(8, 8, 11, 0.5) 55%, transparent 100%);
  pointer-events: none;
  z-index: 250;
}

.app-header > * {
  pointer-events: auto;
}

/* Wordmark: a little record-label stamp */
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  flex: 0 0 auto;
}

.brand-icon {
  color: var(--color-accent);
}

.brand-title {
  color: var(--text-main);
}

/* Genre divider tabs (like the plastic tabs in a record-store bin) + sort */
.browse-nav {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.browse-sheet-head,
.browse-backdrop,
.browse-toggle-btn {
  display: none;
}

.vibe-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.vibe-filter-bar::-webkit-scrollbar {
  display: none;
}

.vibe-pill {
  position: relative;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0.45rem 0.8rem;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s ease;
}

.vibe-pill::after {
  content: '';
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform 0.22s ease;
}

.vibe-pill:hover {
  color: var(--text-main);
}

.vibe-pill.active {
  color: #fff;
}

.vibe-pill.active::after {
  transform: scaleX(1);
}

.sort-selector-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding-left: 1.5rem;
  border-left: 1px solid var(--border-subtle);
}

.sort-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  opacity: 0.6;
}

.sort-select {
  appearance: none;
  background-color: transparent;
  color: var(--text-main);
  border: none;
  padding: 0.2rem 1.1rem 0.2rem 0;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239494a0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 11px;
}

.sort-select option {
  background: var(--bg-surface);
  color: var(--text-main);
}

.sort-select:focus-visible,
.vibe-pill:focus-visible,
.icon-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Header Controls */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.icon-btn {
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.icon-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.08);
}

/* 3D Vertical Cover Flow Stage */
.crate-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  position: relative;
  overflow: clip;
  padding: 1.5rem 2rem 4.5rem 2rem;
}

/* Dynamic Ambient Backdrop Glow */
.ambient-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ambient-glow-img {
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  object-fit: cover;
  filter: blur(60px) saturate(2.1) brightness(1.1);
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 1200ms ease;
  will-change: opacity;
}

/* Centered Two-Column Hero Station */
.station-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  min-height: 70vh;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 3rem;
  position: relative;
  z-index: 10;
}

/* Column 1: Left 3D Vertical Crate Stack */
.station-crate-col {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  perspective: 1200px;
  min-height: calc(var(--sleeve-size) + 80px);
  min-width: 0;
}

/* Grounding Elliptical Floor Shadow beneath Crate */
.crate-floor-shadow {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--sleeve-size) * 0.96);
  height: 48px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.5) 45%, transparent 75%);
  filter: blur(14px);
  pointer-events: none;
  z-index: 2;
}

/* Vertical 3D Stage Chassis */
.crate-chassis {
  position: relative;
  width: var(--sleeve-size);
  height: var(--sleeve-size);
  transform-style: flat;
  z-index: 10;
}

/* Crate Stack */
.crate-stack {
  position: absolute;
  inset: 0;
  transform-style: flat;
}

/* Individual Sleeve in Vertical 3D Flow */
.sleeve {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  transition: opacity 400ms ease;
  will-change: transform;
  cursor: pointer;
}

.sleeve.out-of-range {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* One jacket: the cover plus its edge and lip, so they always move together */
.sleeve-body {
  position: absolute;
  inset: 0;
  transition: transform 0.2s ease;
}

/* Solid Opaque Cover Wrapper */
.sleeve-cover-wrap {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  overflow: hidden;
  background-color: #15151b;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.7),
    0 8px 18px -4px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.2s ease;
  z-index: 5;
}

.sleeve-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  background: #111;
}

/* Shifting Surface Glare, plus soft falloff toward the edges so the jacket reads as a slightly curved sheet */
.sleeve-sheen-overlay {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  pointer-events: none;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 22px rgba(0, 0, 0, 0.16);
}

/* Active Center Album: Standing upright, crisp, clean natural depth */
.sleeve.active {
  opacity: 1;
  pointer-events: auto;
}

/* The active cover is the one lifted off the stack: contact, mid and ambient shadows */
.sleeve.active .sleeve-cover-wrap {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.7),
    0 10px 20px -4px rgba(0, 0, 0, 0.55),
    0 30px 50px -14px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.sleeve.active:hover .sleeve-body {
  transform: translateY(-4px) scale(1.015);
}

.sleeve.active:hover .sleeve-cover-wrap {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.7),
    0 14px 26px -4px rgba(0, 0, 0, 0.55),
    0 40px 60px -16px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.sleeve.active .sleeve-sheen-overlay {
  background:
    radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 35%), rgba(255, 255, 255, 0.06) 0%, transparent 60%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.28) 100%);
}

/* Flow Above (Past albums scrolled up): Leaning backward, stepping up into a packed crate stack */
.sleeve.flow-above {
  opacity: 1;
}

.sleeve.flow-above .sleeve-cover-wrap {
  box-shadow:
    0 -1px 1px rgba(0, 0, 0, 0.6),
    0 -6px 12px -2px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.sleeve.flow-above .sleeve-sheen-overlay {
  background: linear-gradient(180deg, transparent 40%, rgba(255, 255, 255, 0.12) 100%);
}

/* Flow Below (Upcoming albums scrolled down): Leaning backward, stepping down into a packed crate stack */
.sleeve.flow-below {
  opacity: 1;
}

.sleeve.flow-below .sleeve-cover-wrap {
  box-shadow:
    0 -1px 1px rgba(0, 0, 0, 0.6),
    0 -7px 12px -2px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.sleeve.flow-below .sleeve-sheen-overlay {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 60%);
}

/* Fallback cover */
.cover-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  text-align: center;
}

.fallback-artist {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.fallback-title {
  font-size: 0.92rem;
  color: var(--text-muted);
}

.empty-crate-msg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--text-muted);
}

/* ==========================================================================
   Column 2: Active Metadata (typographical, no card borders, no boxes)
   ========================================================================== */
.station-metadata-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 15;
  padding: 1rem 0;
  min-width: 0;
  container-type: inline-size;
  transition: opacity 160ms ease;
}

.station-metadata-col.is-updating {
  opacity: 0;
}

.meta-title {
  font-size: clamp(2.2rem, 9cqi, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text-main);
  transition: opacity 160ms ease;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  text-wrap: pretty;
  padding-bottom: 0.15em;
  margin-bottom: -1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.meta-artist {
  font-size: clamp(1.3rem, 5cqi, 1.9rem);
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Meta block: facts on one line under a hairline, genres as small-caps labels (same voice as the header tabs) */
.meta-details-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border-strong);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
}

.meta-details-row > span:empty {
  display: none;
}

.meta-details-row > span + span:not(:empty)::before {
  content: '\00b7';
  margin: 0 0.65rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.35);
}

.meta-genres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

.meta-genre-tag + .meta-genre-tag::before {
  content: '/';
  margin: 0 0.8rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.3);
}

/* Inspect button */
.meta-actions {
  margin-top: 0.5rem;
}

.meta-inspect-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: var(--text-main);
  padding: 0.8rem 1.6rem;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border-radius: 9999px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.meta-inspect-btn:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.16);
}

.meta-actions {
  margin-top: 1rem;
}

/* Minimalist Floating Navigation Pill */
.floating-nav-pill {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(18, 18, 24, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  padding: 0.35rem 0.65rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65);
  z-index: 200;
}

.nav-pill-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-pill-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.08);
}

.nav-pill-counter {
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text-main);
  padding: 0 0.4rem;
  user-select: none;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.15rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-primary {
  background-color: var(--color-accent);
  color: #fff;
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
}

.btn-secondary {
  background-color: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-subtle);
}

.btn-secondary:hover {
  border-color: var(--border-strong);
  background: #272732;
}

.btn-danger {
  background-color: transparent;
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.3);
}

.btn-danger:hover {
  background-color: rgba(248, 113, 113, 0.1);
  border-color: #f87171;
}

/* Interactive Vinyl Inspection Showcase Modal */

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 20;
}

.modal-close:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.12);
}


/* 12" Vinyl Disc with micro-grooves and center label */
.vinyl-disc {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 264px;
  height: 264px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, #08080a 0px, #08080a 2px, #1c1c22 3px, #08080a 4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transform: translateX(0);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.vinyl-disc.ejected {
  transform: translateX(120px);
}

.disc-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 45deg,
      transparent 0deg,
      rgba(255, 255, 255, 0.12) 35deg,
      transparent 70deg,
      transparent 180deg,
      rgba(255, 255, 255, 0.12) 215deg,
      transparent 250deg);
  pointer-events: none;
}

.disc-label {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
}

.disc-label-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.spindle-hole {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: #09090c;
  border: 2px solid #a3824c;
  border-radius: 50%;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Right: Gatefold Matte Liner Notes Card */

.sides-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.side-col h4 {
  font-size: 0.8rem;
  color: var(--text-main);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Settings Drawer */
.settings-drawer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
  z-index: 600;
}

.settings-drawer.open {
  opacity: 1;
  pointer-events: auto;
}

.drawer-card {
  width: min(92vw, 440px);
  height: 100%;
  background: #141419;
  border-left: 1px solid var(--border-subtle);
  padding: 1.75rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.75);
}

.settings-drawer.open .drawer-card {
  transform: translateX(0);
}

.drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.settings-group {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.settings-group:last-child {
  border-bottom: none;
}

.settings-group h4 {
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.settings-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.settings-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 0.75rem;
  margin-bottom: 0.35rem;
}

.settings-group input {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  color: var(--text-main);
  font-size: 0.85rem;
}

.settings-group input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.settings-hint {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

.sync-status {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  min-height: 1.2rem;
  color: var(--text-muted);
}

.sync-status.success {
  color: #34d399;
}

.sync-status.error {
  color: #f87171;
}

/* Responsive adjustments */
@media (max-width: 960px) {
  :root {
    --sleeve-size: min(74vw, 40vh, 380px);
  }

  /* Compact: cover flow fills the screen, title/artist sit in the gap under the active cover */
  .crate-stage {
    padding: 0 1rem 4.5rem 1rem;
    overflow: clip;
    align-items: center;
  }

  .station-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-height: 0;
    padding: 0;
  }

  .station-crate-col {
    min-height: 0;
    width: 100%;
    justify-content: center;
  }

  .station-metadata-col {
    width: var(--sleeve-size);
    min-width: 260px;
    max-width: 100%;
    height: 78px;
    margin: 32px auto 0;
    padding: 0;
    gap: 0.2rem;
    align-items: center;
    text-align: center;
    justify-content: flex-start;
    max-height: none;
  }

  .meta-title {
    font-size: 1.3rem;
    line-height: 1.2;
    margin-bottom: 0;
    padding-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: -0.5rem;
  }

  .meta-artist {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .meta-details-row,
  .meta-genres,
  .meta-actions {
    display: none;
  }

  .station-metadata-col {
    z-index: -4 !important;
  }
}

/* An upright tablet has the room for a bigger cover and a fuller title block */
@media (min-width: 700px) and (max-width: 960px) {
  :root {
    --sleeve-size: min(64vw, 42vh, 500px);
  }

  .meta-title {
    font-size: 1.5rem;
  }

  .meta-artist {
    font-size: 1.1rem;
  }
}

@media (max-width: 640px) {

  .floating-nav-pill {
    bottom: 1rem;
  }

  
}

/* Large displays (e.g. 2304x1296) */
@media (min-width: 1800px) {
  .station-container {
    max-width: 1500px;
  }

  .meta-title {
    font-size: clamp(2.6rem, 9cqi, 4.8rem);
  }

  .meta-artist {
    font-size: clamp(1.6rem, 5cqi, 2.4rem);
  }

  .meta-details-row {
    font-size: 1.3rem;
  }

  .meta-genres {
    font-size: 0.85rem;
  }
}
/* Header, compact: [Browse v] [settings]; genres + sort open as a bottom sheet */
@media (max-width: 960px) {
  .app-header {
    gap: 0.5rem;
    padding: 0.6rem 0.75rem 1.75rem 1rem;
  }

  .brand {
    display: none;
  }

  .browse-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 190px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    border-radius: 9999px;
    padding: 0.4rem 0.75rem;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
  }

  .browse-toggle-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .browse-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 290;
  }

  .browse-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
    background: rgba(16, 16, 21, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-strong);
    border-radius: 18px 18px 0 0;
    transform: translateY(105%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 300;
    pointer-events: auto;
  }

  body.browse-open .browse-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  body.browse-open .browse-nav {
    transform: none;
  }

  .browse-sheet-head {
    display: block;
    padding: 0.5rem 0 1rem;
  }

  .browse-sheet-head::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-strong);
    margin: 0 auto 1.1rem;
  }

  .browse-sheet-title {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-accent);
  }

  .vibe-filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: visible;
  }

  .vibe-pill {
    text-align: left;
    padding: 0.85rem 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: none;
    border-bottom: 1px solid var(--border-subtle);
  }

  .vibe-pill::after {
    left: auto;
    right: 0;
    bottom: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translateY(50%) scale(0);
  }

  .vibe-pill.active::after {
    transform: translateY(50%) scale(1);
  }

  .sort-selector-wrap {
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 0 0;
    border-left: none;
  }

  .sort-select {
    font-size: 0.95rem;
    padding-right: 1.4rem;
  }
}

/* Header, mid-width desktop: keep every genre tab visible */
@media (min-width: 961px) and (max-width: 1240px) {
  .app-header {
    gap: 1rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .brand {
    letter-spacing: 0.2em;
  }

  .browse-nav {
    gap: 1rem;
  }

  .vibe-pill {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    letter-spacing: 0.1em;
  }

  .vibe-pill::after {
    left: 0.55rem;
    right: 0.55rem;
  }

  .sort-label {
    display: none;
  }

  .sort-selector-wrap {
    padding-left: 1rem;
  }
}

/* ==========================================================================
   Overlays step aside for the sleeve view
   ========================================================================== */
.app-header,
.floating-nav-pill {
  transition: opacity 240ms ease;
}

body.sleeve-open .app-header,
body.sleeve-open .floating-nav-pill {
  opacity: 0;
  pointer-events: none;
}

body.sleeve-open .app-header > * {
  pointer-events: none;
}

/* ==========================================================================
   Settings drawer: quiet typography, underline fields, pill actions
   ========================================================================== */
.settings-drawer {
  background: rgba(0, 0, 0, 0.6);
}

.drawer-card {
  width: min(92vw, 420px);
  background: rgba(14, 14, 18, 0.96);
  border-left: 1px solid var(--border-subtle);
  padding: 2rem 1.75rem 2.5rem;
  box-shadow: none;
}

.drawer-top {
  align-items: flex-start;
  margin-bottom: 2rem;
}

.drawer-eyebrow {
  display: block;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-accent);
  margin-bottom: 0.4rem;
}

.drawer-top h3 {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.drawer-top .modal-close {
  position: static;
  flex: 0 0 auto;
  background: transparent;
  border: none;
  width: 44px;
  height: 44px;
  margin: -0.4rem -0.6rem 0 0;
  border-radius: 50%;
  color: var(--text-muted);
}

.drawer-top .modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
}

.settings-group {
  margin-bottom: 0;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.settings-group:first-child {
  padding-top: 0.25rem;
}

.settings-group h4 {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.settings-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 1.1rem;
}

.settings-group label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-top: 1rem;
  margin-bottom: 0;
}

.settings-group input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  padding: 0.55rem 0;
  font-size: 1rem;
  transition: border-color 0.15s ease;
}

.settings-group input:focus {
  border-bottom-color: var(--color-accent);
}

.settings-group .btn {
  border-radius: 9999px;
  padding: 0.7rem 1.4rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.settings-group .btn-primary {
  background: var(--color-accent);
}

.settings-group .btn-secondary {
  background: transparent;
  border-color: var(--border-strong);
}

.settings-group .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
}

.settings-group .btn-danger {
  border-color: rgba(248, 113, 113, 0.35);
}

/* Compact: settings rise from the bottom like the browse sheet */
@media (max-width: 640px) {
  .settings-drawer {
    align-items: flex-end;
    justify-content: stretch;
  }

  .drawer-card {
    width: 100%;
    height: auto;
    max-height: 90vh;
    border-left: none;
    border-top: 1px solid var(--border-strong);
    border-radius: 18px 18px 0 0;
    transform: translateY(105%);
    padding: 1.5rem 1.5rem calc(2rem + env(safe-area-inset-bottom));
  }

  .settings-drawer.open .drawer-card {
    transform: translateY(0);
  }
}

.settings-drawer {
  visibility: hidden;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}

.settings-drawer.open {
  visibility: visible;
  transition-delay: 0s;
}

@media (max-width: 960px) {
  .browse-nav {
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.3s;
  }

  body.browse-open .browse-nav {
    visibility: visible;
    transition-delay: 0s;
  }
}

/* ==========================================================================
   Album inspector: the jacket on the left; the sleeve's inside and back, printed, on the right.
   Sans = data and interface. Serif = words written to be read (the story, credit names, notes).
   ========================================================================== */
:root {
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

.gatefold-workspace {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1), transform 320ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 320ms;
}

/* The blur only exists while the sheet is open, so the crate scrolls at full speed underneath */
.gatefold-workspace.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

/* The tint and blur live on their own layer behind the content, so a problem painting either can't hide the page */
.gatefold-workspace::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(8, 8, 11, 0.66);
  pointer-events: none;
}

/* Small screens scroll the whole sheet, so the backdrop stays put while the content moves over it */
@media (max-width: 960px) {
  .gatefold-workspace::before {
    position: fixed;
  }
}

/* Once the sleeve is open the crate underneath isn't seen or touched: stop painting it */
.crate-chassis {
  transition: visibility 0s;
}

body.sleeve-open .crate-chassis {
  visibility: hidden;
  transition: visibility 0s linear 340ms;
}

.gatefold-workspace.open::before {
  backdrop-filter: blur(36px) saturate(1.2);
  -webkit-backdrop-filter: blur(36px) saturate(1.2);
}

.gf-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 2rem 0.25rem;
  z-index: 5;
}

.gatefold-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: none;
  padding: 0.5rem 0;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.gatefold-back-btn:hover {
  color: var(--text-main);
}

.gf-stepper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-muted);
}

.gf-step-count {
  min-width: 4.5rem;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}

.gf-step-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.gf-step-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
}

/* Desktop: two equal halves; the right one scrolls */
.gatefold-stage {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
}

.gatefold-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding: 0.5rem 1.5rem 3rem 2.5rem;
}

.gf-object {
  --jacket: min(560px, 30vw, 62vh);
  position: relative;
  width: var(--jacket);
  height: var(--jacket);
  perspective: 1800px;
  /* centre the jacket and the ejected record as one unit */
  transform: translateX(calc(var(--jacket) * -0.19));
}

.gf-object.is-flippable {
  cursor: pointer;
}

.gf-flipper {
  position: absolute;
  inset: 0;
  z-index: 10;
  transform-style: preserve-3d;
  transition: transform 800ms cubic-bezier(0.3, 0.8, 0.2, 1);
}

.gf-flipper.is-flipped {
  transform: rotateY(180deg);
}

.gf-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 3px;
  background: #15151b;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.gf-back {
  transform: rotateY(180deg);
}

.gf-back.is-placeholder .gatefold-jacket-art {
  filter: grayscale(0.7) brightness(0.32) blur(3px);
  transform: scale(1.04);
}

.gatefold-jacket-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gatefold-jacket-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 55%);
  pointer-events: none;
}

.gatefold-disc-slot {
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: 8px;
  width: 92%;
  z-index: 5;
  pointer-events: none;
}

.gatefold-vinyl-disc {
  /* The pressing's colour is applied inline from the Discogs format (notes.js); this is the standard black record */
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #08080a 0px, #08080a 2px, #1c1c22 3px, #08080a 4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(0);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gatefold-vinyl-disc.ejected {
  transform: translateX(calc(var(--jacket) * 0.38));
}

/* No back cover: the flipped sleeve stays behind and the record comes forward, centred on the square */
.disc-front .gatefold-disc-slot {
  z-index: 20;
}

.disc-front .gatefold-vinyl-disc {
  transform: translateX(calc(var(--jacket) * 0.04 - 8px));
}

.gf-flip-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 9999px;
  padding: 0.6rem 1.2rem;
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.gf-flip-btn[hidden] {
  display: none;
}

.gf-flip-btn:hover {
  color: var(--text-main);
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
}

/* Right: the printed side */
.gatefold-right {
  display: flex;
  flex-direction: column;
  gap: 3.25rem;
  padding: 0.75rem 3.5rem 6rem 1rem;
  overflow-y: auto;
  scrollbar-width: none;
}

.gatefold-right::-webkit-scrollbar {
  display: none;
}

.gf-section[hidden] {
  display: none;
}

.gatefold-title {
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: pretty;
}

.gatefold-artist {
  margin-top: 0.4rem;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-muted);
}

/* Spec strip: small-caps label over value, like the back of a record */
.gf-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  margin-top: 1.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border-strong);
}

.gf-spec dt {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.gf-spec dd {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-main);
}

.gf-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

.gf-tag + .gf-tag::before {
  content: '/';
  margin: 0 0.8rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.3);
}

.gatefold-section-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-accent);
}

.gatefold-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* Tracklist */
.gatefold-sides-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 2.5rem;
}

.gatefold-side-col {
  min-width: 0;
}

.gatefold-side-hdr {
  margin-bottom: 0.4rem;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}

.gatefold-tracks {
  list-style: none;
}

.gatefold-tracks li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.4rem 0;
  min-width: 0;
  font-size: 0.98rem;
  color: var(--text-main);
}

.gf-tpos {
  flex: 0 0 26px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.25;
  color: var(--text-muted);
  opacity: 0.7;
}

.gf-tname {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.gf-ttime {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  opacity: 0.7;
}

.gf-lyrics {
  flex: 0 0 auto;
  width: 1.4rem;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--text-muted);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.gatefold-tracks li:hover .gf-lyrics,
.gf-lyrics:focus-visible {
  opacity: 0.85;
}

.gf-lyrics:hover {
  color: var(--color-accent);
  opacity: 1;
}

@media (hover: none) {
  .gf-lyrics {
    opacity: 0.4;
  }
}

/* Credits: set like the back of a sleeve */
.gf-credits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2rem 2.5rem;
}

.gf-credit-group h4 {
  margin-bottom: 0.7rem;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}

.gf-credit-group ul {
  list-style: none;
}

.gf-credit-group li {
  display: flex;
  flex-direction: column;
  padding: 0.35rem 0;
}

.gf-credit-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--text-main);
}

.gf-credit-role {
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.gf-more summary {
  padding: 0.4rem 0;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-accent);
  cursor: pointer;
  list-style: none;
}

.gf-more summary::-webkit-details-marker {
  display: none;
}

/* The story: prose from Wikipedia */
.gatefold-wiki {
  max-width: 64ch;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
}

.gatefold-wiki p {
  margin-bottom: 0.9rem;
}

.gf-lede {
  font-size: 1.16rem;
  color: rgba(255, 255, 255, 0.92);
}

.gf-prose-head {
  margin: 2rem 0 0.8rem;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}

.gatefold-wiki .gf-source {
  margin-top: 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.gatefold-wiki a {
  color: inherit;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 3px;
}

/* Elsewhere in your crate */
.gf-connections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.5rem 1.5rem;
}

.gf-connection {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.5rem;
  margin: 0 -0.5rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.gf-connection:hover {
  background: rgba(255, 255, 255, 0.06);
}

.gf-connection img {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.gf-connection-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.gf-connection-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}

.gf-connection-artist {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.gf-connection-why {
  margin-top: 0.15rem;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.gf-copy-rows dt {
  padding-top: 0.15rem;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

.gf-copy-rows dd {
  font-size: 0.95rem;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.gf-copy-rows dd.is-mono {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.gf-release-notes {
  margin-top: 1.25rem;
}

.gf-release-notes summary {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-accent);
  cursor: pointer;
}

.gf-release-notes p {
  max-width: 62ch;
  margin-top: 0.8rem;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--text-muted);
  white-space: pre-line;
}

.gatefold-back-btn:focus-visible,
.gf-step-btn:focus-visible,
.gf-flip-btn:focus-visible,
.gf-connection:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Phones and tablets held upright: one column. The sheet scrolls as a whole; the bar stays put. A phone on its side
   is too short for that, so it keeps the two-column layout. */
@media (max-width: 960px) and (min-height: 521px) {
  .gatefold-workspace {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .gf-bar {
    position: sticky;
    top: 0;
    padding: 0.5rem 0.75rem 0.5rem 1.1rem;
    background: rgba(10, 10, 14, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .gatefold-stage {
    display: block;
    overflow: visible;
  }

  .gatefold-left {
    padding: 1.4rem 1rem 0;
  }

  .gf-object {
    --jacket: min(64vw, 340px);
  }

  /* Tablets held upright have room for a bigger sleeve */
  @media (min-width: 700px) {
    .gf-object {
      --jacket: min(58vw, 460px);
    }
  }

  .gatefold-right {
    overflow: visible;
    gap: 2.75rem;
    padding: 2rem 1.25rem 6rem;
  }

  .gatefold-title {
    font-size: 2rem;
  }

  .gatefold-artist {
    font-size: 1.2rem;
  }

  .gf-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1.5rem;
  }

  .gatefold-sides-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gf-flipper,
.gatefold-vinyl-disc,
.gatefold-workspace {
    transition-duration: 0.01ms;
  }
}

/* ==========================================================================
   Inspector, round two: sticky title, section navigation, finished Watch / Your copy / artist blocks
   ========================================================================== */
.gf-section {
  scroll-margin-top: 1.5rem;
}

/* Top bar: back | title (once the big one scrolls away) | stepper */
.gf-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.gf-stepper {
  justify-self: end;
}

.gf-bar-title {
  max-width: min(46vw, 560px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-main);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

.gf-bar.is-scrolled .gf-bar-title {
  opacity: 1;
  transform: none;
}

.gf-tabs {
  display: none;
  position: relative; /* so a tab's offsetLeft is measured from the tab strip */
}

/* Desktop: the contents, listed under the jacket like the back of a sleeve */
.gf-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin-top: 0.75rem;
}

.gf-rail button {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.1rem;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  opacity: 0.6;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.gf-rail button::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.5rem;
  height: 1px;
  background: currentColor;
  transition: width 0.2s ease;
}

.gf-rail button:hover {
  opacity: 1;
}

.gf-rail button.active {
  color: var(--color-accent);
  opacity: 1;
}

.gf-rail button.active::before {
  width: 0.8rem;
}

/* Short wide windows (an iPad on its side) have no room to list sections under the jacket: they ride in the top bar */
@media (min-width: 961px) and (max-height: 760px), (max-width: 960px) and (max-height: 520px) {
  .gf-rail {
    display: none;
  }

  .gf-bar-title {
    display: none;
  }

  .gf-tabs {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    justify-content: center;
    gap: 1.6rem;
  }

  .gf-stepper {
    grid-column: 3;
    grid-row: 1;
  }

  .gf-tabs button {
    position: relative;
    padding: 0.7rem 0;
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: pointer;
  }

  .gf-tabs button::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform 0.2s ease;
  }

  .gf-tabs button.active {
    color: var(--text-main);
  }

  .gf-tabs button.active::after {
    transform: scaleX(1);
  }
}

/* Watch: link cards. Nothing loads from YouTube except the thumbnail. */
.gf-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.5rem 1.25rem;
}

.gf-video {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
}

.gf-video-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(145deg, #23232c 0%, #131318 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.gf-video-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gf-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: rgba(8, 8, 11, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  transition: background 0.15s ease;
}

.gf-video-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -7px 0 0 -4px;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
}

.gf-video:hover .gf-video-play {
  background: var(--color-accent);
}

.gf-video-title {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-main);
}

.gf-video-source {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.gf-video:hover .gf-video-source {
  color: var(--color-accent);
}

/* Your copy: the pressing, then how it lives in your crate */
.gf-copy-group + .gf-copy-group {
  margin-top: 2rem;
}

.gf-copy-group h4 {
  margin-bottom: 0.5rem;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}

.gf-copy-rows > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.gf-inline-link {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-main);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding-bottom: 2px;
}

.gf-inline-link:hover {
  border-color: var(--color-accent);
}

/* The artist: portrait (when there is one) beside the bio; links that show where they go */
.gf-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem 2.25rem;
}

.gf-band.has-photo {
  grid-template-columns: minmax(0, 1fr) 200px;
}

.gf-band.has-photo .gf-band-photo {
  order: 2;
}

.gf-band-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 3px;
}

.gf-band-photo figcaption {
  margin-top: 0.5rem;
  font-size: 0.66rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.gf-band-photo a {
  color: inherit;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
}

.gf-band-bio {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}

.gf-video:focus-visible,
.gf-rail button:focus-visible,
.gf-tabs button:focus-visible,
.gf-inline-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Phones and tablets: section tabs ride in the sticky bar; the title replaces "Back to Crate" once scrolled */
@media (max-width: 960px) and (min-height: 521px) {
  .gf-section {
    scroll-margin-top: 7.5rem;
  }

  .gf-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding-bottom: 0;
  }

  .gf-bar-title {
    max-width: none;
    text-align: center;
  }

  .gf-bar.is-scrolled .gf-back-text {
    display: none;
  }

  .gf-tabs {
    grid-column: 1 / -1;
    display: flex;
    gap: 1.4rem;
    margin: 0 -0.75rem 0 -1.1rem;
    padding: 0 1.1rem;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border-subtle);
  }

  .gf-tabs::-webkit-scrollbar {
    display: none;
  }

  .gf-tabs button {
    position: relative;
    flex: 0 0 auto;
    padding: 0.7rem 0;
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: pointer;
  }

  .gf-tabs button::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform 0.2s ease;
  }

  .gf-tabs button.active {
    color: var(--text-main);
  }

  .gf-tabs button.active::after {
    transform: scaleX(1);
  }

  .gf-rail {
    display: none;
  }

  .gf-copy-rows > div {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 0.75rem;
  }

  .gf-band.has-photo {
    grid-template-columns: minmax(0, 1fr);
  }

  .gf-band.has-photo .gf-band-photo {
    order: 0;
  }
}

/* Artist links: two short lines. "Follow" is the artist's own places (with a handle or domain when that is
   the informative part); "Read & listen" is reference, where the name alone says it all. */
.gf-links {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.gf-links-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: baseline;
  gap: 1rem;
}

.gf-links-row.is-bare {
  grid-template-columns: minmax(0, 1fr);
}

.gf-links-label {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

.gf-links-row ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  list-style: none;
}

.gf-links-row a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--text-main);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  padding-bottom: 1px;
  transition: border-color 0.15s ease;
}

.gf-links-row a:hover {
  border-color: var(--color-accent);
}

.gf-link-name {
  font-size: 0.9rem;
  font-weight: 600;
}

.gf-link-handle {
  font-size: 0.78rem;
  color: var(--text-muted);
}

@media (max-width: 960px) {
  .gf-links-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }
}

/* ==========================================================================
   Crate stack: a real jacket edge, in place of text drawn over the artwork
   ========================================================================== */
.sleeve-edge {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: -5px;
  width: 5px;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg, rgba(14, 14, 18, 0.95) 0%, rgba(88, 88, 98, 0.6) 55%, rgba(255, 255, 255, 0.2) 100%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.16), -3px 0 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* Jacket thickness: the top edge catches the light, so each strip in the stack reads as a physical sleeve */
.sleeve-lip {
  position: absolute;
  top: -3px;
  left: -5px;
  right: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.1) 100%);
  pointer-events: none;
}

/* Active cover follows the pointer: a slight tilt and a moving highlight (mouse and trackpad only) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .sleeve.active:hover .sleeve-body {
    transform: perspective(1000px) rotateX(calc(var(--tilt-y, 0) * -5deg)) rotateY(calc(var(--tilt-x, 0) * 6deg)) translateY(-4px) scale(1.015);
    transition: transform 0.12s ease-out;
  }
}

/* Settings: Discogs connection */
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

a.btn {
  text-decoration: none;
}

.settings-advanced {
  margin-top: 1.5rem;
}

.settings-advanced summary {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  cursor: pointer;
}

.settings-advanced summary:hover {
  color: var(--text-main);
}

.settings-advanced[open] summary {
  margin-bottom: 0.5rem;
}

.settings-desc strong {
  color: var(--text-main);
  font-weight: 700;
}

/* Discogs attribution: their terms ask for a notice with the sign-in and credit next to their data */
.discogs-notice {
  margin-top: 1.1rem;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--text-muted);
  opacity: 0.8;
}

.gf-attribution {
  margin-top: -0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
}

.gf-attribution[hidden] {
  display: none;
}

.gf-attribution a {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-main);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding-bottom: 2px;
}

.gf-attribution a:hover {
  border-color: var(--color-accent);
}

.gf-attribution p {
  max-width: 62ch;
  margin-top: 0.9rem;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--text-muted);
  opacity: 0.8;
}

/* A page that loads straight into an album appears at once: no fade that could stall and leave only the blur showing */
.gatefold-workspace.instant {
  transition: none;
}

/* Search: an icon that opens into a field. "/" focuses it. */
.crate-search {
  display: flex;
  align-items: center;
  margin: 0;
}

.search-input {
  width: 0;
  padding: 0;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
  opacity: 0;
  transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease, border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-left: 0.4rem;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0aa' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23444450' stroke='none'/%3E%3Cline x1='8' y1='8' x2='16' y2='16'/%3E%3Cline x1='16' y1='8' x2='8' y2='16'/%3E%3C/svg%3E") center / contain no-repeat;
}

.search-input::placeholder {
  color: var(--text-muted);
}

body.search-open .search-input {
  width: 11rem;
  padding: 0.3rem 0.4rem;
  opacity: 1;
  border-bottom-color: var(--border-subtle);
}

body.search-open .search-input:focus {
  border-bottom-color: var(--text-main);
}

@media (max-width: 960px) {
  body.search-open .browse-toggle-btn,
body.search-open #settings-toggle-btn {
    display: none;
  }

  body.search-open .header-actions,
body.search-open .crate-search {
    flex: 1 1 auto;
  }

  body.search-open .search-input {
    width: 100%;
    font-size: 1rem; /* 16px: keeps iOS from zooming the page on focus */
  }
}

/* Touch: fingertip-sized targets (about 44px) without changing how anything looks */
@media (pointer: coarse) {
  .icon-btn {
    width: 44px;
    height: 44px;
  }

  .browse-toggle-btn {
    min-height: 38px;
  }

  .nav-pill-btn {
    width: 40px;
    height: 40px;
  }

  .gf-step-btn {
    width: 44px;
    height: 44px;
  }

  .gatefold-back-btn {
    min-height: 44px;
  }

  .gf-tabs button {
    min-height: 40px;
  }

  .gf-flip-btn {
    min-height: 44px;
  }

  .vibe-pill,
  .sort-select {
    min-height: 40px;
  }

  /* Small links and glyphs keep their look; an invisible halo makes them easy to hit */
  .gf-lyrics,
  .gf-links-row a,
  .gf-inline-link,
  .gf-credit-name a,
  .gf-source a {
    position: relative;
  }

  .gf-lyrics::after,
  .gf-links-row a::after,
  .gf-inline-link::after,
  .gf-source a::after {
    content: '';
    position: absolute;
    inset: -11px -8px;
  }
}

/* The crate is for touching; the album page is for reading, so its text can be selected and copied */
.crate-stack {
  -webkit-touch-callout: none;
}

.gatefold-workspace .gatefold-right {
  user-select: text;
  -webkit-user-select: text;
}

/* ==========================================================================
   Safe areas: the notch and Dynamic Island, the status bar (clock and battery), the home indicator.
   The page draws edge to edge, so everything that sits at an edge keeps clear of them.
   ========================================================================== */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

.app-layout {
  padding-left: var(--sal);
  padding-right: var(--sar);
}

.app-header {
  left: var(--sal);
  right: var(--sar);
  padding-top: calc(0.9rem + var(--sat));
}

.floating-nav-pill {
  bottom: calc(1.5rem + var(--sab));
}

.gatefold-workspace {
  padding-left: var(--sal);
  padding-right: var(--sar);
}

.gf-bar {
  padding-top: calc(1.1rem + var(--sat));
}

.gatefold-right {
  padding-bottom: calc(6rem + var(--sab));
}

.drawer-card {
  padding-top: calc(1.75rem + var(--sat));
  padding-bottom: calc(1.75rem + var(--sab));
  padding-right: calc(1.75rem + var(--sar));
}

@media (max-width: 960px) {
  .app-header {
    padding-top: calc(0.6rem + var(--sat));
  }

  .crate-stage {
    padding-bottom: calc(4.5rem + var(--sab));
  }

  .gf-bar {
    padding-top: calc(0.5rem + var(--sat));
  }
}

@media (max-width: 640px) {
  .floating-nav-pill {
    bottom: calc(1rem + var(--sab));
  }
}

/* A phone on its side: very little height, so the album page is compact but keeps its two columns */
@media (max-width: 960px) and (max-height: 520px) {
  .gf-object {
    --jacket: min(30vw, 50dvh, 260px);
  }

  .gf-back-text {
    display: none;
  }

  .gf-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding-top: calc(0.4rem + var(--sat));
    padding-bottom: 0.2rem;
    gap: 0.75rem;
  }

  .gf-tabs {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 1.2rem;
    justify-content: flex-start;
  }

  .gf-tabs::-webkit-scrollbar {
    display: none;
  }

  .gf-tabs button {
    flex: 0 0 auto;
  }

  .gatefold-title {
    font-size: 1.6rem;
  }

  .gatefold-artist {
    font-size: 1rem;
  }

  .gatefold-right {
    gap: 2rem;
    padding: 0.5rem 1.25rem calc(4rem + var(--sab)) 1rem;
  }
}

/* Depth shading on the stack: a black veil, so shading changes never re-render the cover itself */
.sleeve-dim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* Touch screens: no shadow animations while the stack moves (many covers change state at once) */
@media (hover: none) {
  .sleeve-cover-wrap {
    transition: none;
  }
}

/* The app fills the screen edge to edge, including under the home indicator, however the browser reports its height */
html {
  height: 100%;
  background: var(--bg-main);
}

.app-layout {
  position: fixed;
  inset: 0;
  height: auto;
}