/* ==========================================================================
   TuneTable — page compositions & signature 3D pieces
   ========================================================================== */

/* ── Home: the cover spread ─────────────────────────────────────────── */
.spread { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(2.5rem, 1rem + 4vw, 5rem); }
.spread__issue { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.spread__issue::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.spread__title { margin: .2rem 0 1.4rem; }
@media (hover: hover) { .spread__title a:hover { color: var(--accent-2); } }
.spread__by { display: flex; align-items: center; gap: .8rem; font-size: var(--t-md); color: var(--paper-2); margin-bottom: 1.6rem; }
.spread__by a { color: var(--paper); font-weight: 560; }
.spread__by a:hover { color: var(--hi); }
.pullquote { position: relative; padding-left: 1.5rem; margin: 0 0 2rem; font-family: var(--font-display); font-size: var(--t-lg); font-weight: 340; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; line-height: 1.45; color: var(--paper-2); max-width: 46ch; }
.pullquote::before { content: ""; position: absolute; left: 0; top: .3em; bottom: .3em; width: 2px; background: var(--accent); }
.pullquote cite { display: block; margin-top: .8rem; font: 500 var(--t-xs)/1 var(--font-sans); font-style: normal; color: var(--paper-4); }
.spread__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; margin-bottom: 2rem; }
.spread__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
@media (max-width: 960px) { .spread { grid-template-columns: 1fr; } .spread__visual { order: -1; } }

/* ── The turntable (CSS 3D) ─────────────────────────────────────────── */
.turntable { --rx: 58deg; --rz: -32deg; position: relative; aspect-ratio: 1 / .86; perspective: 1600px; perspective-origin: 50% 20%; user-select: none; }
.tt-scene { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; }
.tt-deck { position: relative; width: 82%; aspect-ratio: 1.22; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateZ(var(--rz)); transition: transform .9s var(--ease-out); }
.tt-plinth {
  position: absolute; inset: 0; border-radius: 18px; transform-style: preserve-3d;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.07), transparent 50%),
    linear-gradient(135deg, var(--hw-1), var(--hw-2) 60%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 2px 0 rgba(255,255,255,.07);
}
.tt-plinth::before { /* front & side thickness */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; border-radius: 0 0 18px 18px;
  background: linear-gradient(var(--hw-3), var(--hw-2)); transform-origin: bottom; transform: rotateX(-90deg);
}
.tt-plinth::after {
  content: ""; position: absolute; inset: 0; border-radius: 18px; transform: translateZ(-26px);
  background: #050404; box-shadow: 0 0 80px 30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.02);
}
.tt-glow { position: absolute; inset: -12% -20%; transform: translateZ(-27px); background: radial-gradient(closest-side, color-mix(in oklab, var(--ambient, var(--accent)) 40%, transparent), transparent); filter: blur(30px); opacity: var(--tt-glow, .55); }
.tt-platter { position: absolute; left: 6%; top: 8%; width: 66%; aspect-ratio: 1; border-radius: 50%; transform-style: preserve-3d; transform: translateZ(4px); background: radial-gradient(circle, #2c2b29 0 63%, #4a4740 63.5% 64.5%, #1c1b19 65%); box-shadow: 0 0 0 2px #0b0a09, 0 10px 18px rgba(0,0,0,.6); }
.tt-record {
  position: absolute; inset: 3.5%; border-radius: 50%; transform: translateZ(3px);
  background:
    conic-gradient(from 20deg, transparent 0 8%, rgba(255,255,255,.07) 12%, transparent 18% 50%, rgba(255,255,255,.05) 58%, transparent 64%),
    repeating-radial-gradient(circle, #0f0e0d 0 1.1px, #1b1a18 1.4px 2.6px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  /* 33⅓ rpm. The keyframes repeat the lift off the platter: a plain rotate() would replace it, and the
     record would sink and snap back up on every turn instead of spinning. */
  animation: tt-spin 1.8s linear infinite;
}
@keyframes tt-spin { from { transform: translateZ(3px) rotate(0deg); } to { transform: translateZ(3px) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tt-record { animation: none; } }
.tt-label { position: absolute; inset: 33%; border-radius: 50%; overflow: hidden; background: var(--accent); box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.tt-label .sleeve { border-radius: 50%; width: 100%; height: 100%; }
.tt-label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9%; height: 9%; margin: -4.5% 0 0 -4.5%; border-radius: 50%; background: #d8d2c6; box-shadow: 0 0 0 2px #0b0a09; }
.tt-arm { position: absolute; right: 7%; top: 8%; width: 34%; height: 78%; transform: translateZ(14px); transform-style: preserve-3d; pointer-events: none; }
.tt-arm svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 6px rgba(0,0,0,.55)); }
.tt-arm .arm { transform-origin: 74% 12%; animation: arm-in 1.6s var(--ease-out) .3s both; }
@keyframes arm-in { from { transform: rotate(-24deg); } }
.tt-knob { position: absolute; left: 8%; bottom: 7%; width: 7%; aspect-ratio: 1; border-radius: 50%; transform: translateZ(6px); background: radial-gradient(circle at 35% 30%, #6b6255, #1e1b17); box-shadow: 0 3px 6px rgba(0,0,0,.6); }
.tt-led { position: absolute; left: 17%; bottom: 10%; width: 1.4%; aspect-ratio: 1; border-radius: 50%; transform: translateZ(2px); background: var(--accent); box-shadow: 0 0 10px 2px var(--accent); }
.tt-sleeve { position: absolute; left: 30%; bottom: 97%; width: 44%; transform-style: preserve-3d; transform-origin: bottom center; transform: translateZ(1px) rotateX(-80deg) rotateY(6deg); }
.tt-sleeve .sleeve { box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08) inset; }
.tt-caption { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: .6rem; }

/* ── Track of the week strip ───────────────────────────────────────── */
.totw { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, .5rem + 2vw, 2rem); padding: clamp(1rem, .6rem + 1.4vw, 1.6rem); border-radius: var(--r-xl); border: 1px solid var(--line); background: linear-gradient(100deg, var(--ink-1), color-mix(in oklab, var(--ink-1) 70%, var(--accent) 6%)); overflow: hidden; }
.totw__sleeve { width: clamp(72px, 9vw, 112px); }
.totw h3 { font-size: var(--t-xl); margin: .45rem 0 .3rem; }
.totw p { color: var(--paper-2); font-size: var(--t-sm); max-width: 60ch; }
.wave { display: flex; align-items: center; gap: 3px; height: 54px; }
.wave span { width: 3px; border-radius: 3px; background: linear-gradient(var(--accent), var(--brass)); height: calc(var(--h) * 1%); opacity: .85; animation: wave 1.4s var(--ease-out) infinite alternate; animation-delay: calc(var(--i) * -70ms); }
@keyframes wave { to { transform: scaleY(.45); } }
@media (max-width: 760px) { .totw { grid-template-columns: auto 1fr; } .wave { display: none; } }

/* ── Crate (3D coverflow) ───────────────────────────────────────────── */
.crate { position: relative; perspective: 1400px; margin-inline: calc(var(--gutter) * -1); }
.crate__track { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2rem calc(50% - 110px) 4.5rem; scrollbar-width: none; perspective: 1100px; perspective-origin: 50% 40%; }
.crate__track::-webkit-scrollbar { display: none; }
.crate__track { cursor: grab; }
.crate__track.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.crate__track.is-dragging a, .crate__track.is-dragging button { pointer-events: none; }
.crate__track.is-moving .crate__item { transition: filter .45s; }          /* no easing on the sleeves while it is being dragged or is coasting */
.crate__track img, .crate__track a { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.crate__item { --rot: 0deg; --z: 0px; --x: 0px; position: relative; flex: 0 0 220px; scroll-snap-align: center; transform-style: preserve-3d; backface-visibility: hidden; transform: translateX(var(--x)) translateZ(var(--z)) rotateY(var(--rot)); transition: transform .45s var(--ease-out), filter .45s; filter: brightness(var(--b, 1)); }
.crate__item .sleeve { -webkit-box-reflect: below 6px linear-gradient(transparent 62%, rgba(255,255,255,.16)); }
.crate__art { position: relative; }
.crate__art > a { display: block; }
.crate__meta { display: block; margin-top: 1.1rem; text-align: center; opacity: var(--o, 0); transition: opacity .3s; }
.crate__meta:hover b { color: var(--hi); }
.crate__play { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; opacity: var(--o, 0); transition: opacity .3s, transform var(--dur-2) var(--ease-spring), background var(--dur-1), color var(--dur-1); }
.crate__play .i { width: 15px; height: 15px; }
.crate__item:hover .crate__play, .crate__play:focus-visible { background: var(--accent); color: var(--accent-ink); }
.crate__meta b { display: block; font-weight: 560; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crate__meta span { font-size: var(--t-xs); color: var(--paper-3); }
.crate__nav { position: absolute; top: 40%; z-index: 5; transform: translateY(-50%); }
.crate__nav--prev { left: var(--gutter); } .crate__nav--next { right: var(--gutter); }
.crate::before, .crate::after { content: ""; position: absolute; top: 0; bottom: 0; width: 14%; z-index: 4; pointer-events: none; }
.crate::before { left: 0; background: linear-gradient(90deg, var(--ink-0), transparent); }
.crate::after { right: 0; background: linear-gradient(-90deg, var(--ink-0), transparent); }

/* ── Charts teaser / ranked list ────────────────────────────────────── */
.ranked { display: grid; gap: 0; counter-reset: rank; }
.ranked__row { display: grid; grid-template-columns: 4.2rem 64px minmax(0, 1fr) auto auto; gap: 1.2rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); transition: background var(--dur-1); }
.ranked__row:hover { background: linear-gradient(90deg, var(--ink-1), transparent); }
.ranked__n { font: 300 2.4rem/1 var(--font-display); letter-spacing: -.05em; color: var(--paper-4); font-variant-numeric: tabular-nums; font-variation-settings: "SOFT" 100, "WONK" 1; font-style: italic; text-align: right; }
.ranked__row:nth-child(-n+3) .ranked__n { color: var(--hi); }
.ranked__title { font-weight: 560; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranked__title:hover { color: var(--hi); }
.ranked__sub { font-size: var(--t-xs); color: var(--paper-3); }
.ranked__score { text-align: right; }
.ranked__text { min-width: 0; }
.ranked__extras { display: flex; align-items: center; gap: 1.1rem; }
.ranked__score small { display: block; font: 400 var(--t-xs)/1.4 var(--font-sans); color: var(--paper-4); }
@media (max-width: 640px) {
  .ranked__row { grid-template-columns: 2.2rem 48px minmax(0, 1fr) auto; gap: .75rem; }
  .ranked__row:has(.ranked__extras) { grid-template-columns: 2.2rem 48px minmax(0, 1fr) auto auto; }
  .ranked__n { font-size: 1.6rem; }
  .ranked__row .bars { display: none; }
  .ranked__extras { gap: 0; }
}

/* ── Explainer (signed-out home) ───────────────────────────────────── */
.sides { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-2); }
.side { padding: 2rem clamp(1rem, .5rem + 1.5vw, 2rem) 2rem 0; }
.side + .side { padding-left: clamp(1rem, .5rem + 1.5vw, 2rem); border-left: 1px solid var(--line); }
.side__n { font: 500 .6875rem/1 var(--font-mono); letter-spacing: .16em; color: var(--hi); }
.side h3 { font-size: var(--t-lg); margin: 0 0 .6rem; }
.side p { color: var(--paper-2); font-size: var(--t-sm); line-height: 1.65; }
@media (max-width: 860px) { .sides { grid-template-columns: 1fr; } .side + .side { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }

/* ── Release page ───────────────────────────────────────────────────── */
.release-hero { position: relative; isolation: isolate; padding-block: clamp(2rem, 1rem + 3vw, 3.5rem) clamp(2rem, 1rem + 3vw, 3rem); }
.release-hero::before { content: ""; position: absolute; inset: -40% -10% 10%; z-index: -1; background: radial-gradient(60% 55% at 22% 40%, color-mix(in oklab, var(--ambient, #5b3a28) 55%, transparent), transparent 70%); opacity: .55; filter: blur(30px); transition: background 1s; }
.release-hero__grid { display: grid; grid-template-columns: minmax(240px, 420px) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: end; }
@media (max-width: 860px) { .release-hero__grid { grid-template-columns: 1fr; } }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--t-xs); color: var(--paper-3); margin-bottom: 1.2rem; }
.crumbs a:hover { color: var(--paper); }
.crumbs .sep { color: var(--paper-4); }
.release-title { margin: .7rem 0 1rem; }
.release-artist { display: inline-flex; align-items: center; gap: .7rem; font-size: var(--t-lg); color: var(--paper-2); }
.release-artist a { color: var(--paper); font-weight: 560; }
.release-artist a:hover { color: var(--hi); }
.release-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: 1.4rem 0 1.8rem; font: 400 var(--t-xs)/1.4 var(--font-sans); color: var(--paper-3); }
.release-facts span + span::before { content: "·"; margin-right: 1.2rem; color: var(--paper-4); }
.release-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
/* Phones: one tidy row. Play takes the room; Listened, Log and Queue keep their icons and say what they are to screen readers. */
@media (max-width: 560px) {
  .release-actions { flex-wrap: nowrap; gap: .5rem; }
  .release-actions > .btn--primary, .release-actions > .play-hero, .release-actions > [data-play] { flex: 1; justify-content: center; }
  .release-actions .check-label { padding: 0; border-color: transparent; }
  .release-actions [data-listen-label], .release-actions .btn__label, .release-actions [data-queue-label] {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .release-actions .btn:has(.btn__label), .release-actions .queue-btn { width: 44px; padding-inline: 0; justify-content: center; }
}

/* 3D sleeve with vinyl */
.object { position: relative; perspective: 1400px; padding-right: 18%; }
.object__inner { position: relative; transform-style: preserve-3d; transform: rotateY(var(--ry, -16deg)) rotateX(var(--rx2, 6deg)); transition: transform .8s var(--ease-out); }
.object:hover .object__inner { --ry: -8deg; --rx2: 3deg; }
.object__front { position: relative; z-index: 2; transform: translateZ(6px); }
.object__front .sleeve { border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset, 0 50px 90px -30px rgba(0,0,0,.95), 0 18px 30px -12px rgba(0,0,0,.7); }
.object__spine { position: absolute; top: 0; right: 0; width: 12px; height: 100%; transform-origin: right; transform: rotateY(90deg) translateZ(0); background: linear-gradient(90deg, color-mix(in oklab, var(--sl-bg, #2b2219) 70%, #000), color-mix(in oklab, var(--sl-bg, #2b2219) 50%, #000)); }
.object__back { position: absolute; inset: 0; transform: translateZ(-6px); background: #0e0d0b; border-radius: 3px; }
.object__vinyl { position: absolute; z-index: 1; top: 3%; left: 3%; width: 94%; aspect-ratio: 1; border-radius: 50%; transform: translateZ(0) translateX(var(--vx, 26%)); transition: transform 1.1s var(--ease-out);
  background:
    conic-gradient(from 30deg, transparent 0 10%, rgba(255,255,255,.08) 14%, transparent 20% 52%, rgba(255,255,255,.06) 58%, transparent 64%),
    repeating-radial-gradient(circle, #0e0d0c 0 1.2px, #1c1b18 1.5px 2.8px);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.04); }
.object__vinyl::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: var(--label, var(--accent)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.object__vinyl::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 50%; width: 3%; height: 3%; margin: -1.5% 0 0 -1.5%; border-radius: 50%; background: var(--ink-0); }
.object:hover .object__vinyl { --vx: 40%; }
.object.is-playing .object__vinyl { animation: vinyl 1.8s linear infinite; }
@keyframes vinyl { from { transform: translateX(var(--vx, 26%)) rotate(0); } to { transform: translateX(var(--vx, 26%)) rotate(360deg); } }

/* Community panel on release */
.release-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.scorecard { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: end; }
.scorecard__meta { font-size: var(--t-xs); color: var(--paper-3); margin-top: .35rem; }

/* ── Sticky notes ───────────────────────────────────────────────────── */
[data-note-board] { position: relative; }
[data-note-anchor] { position: relative; }
.notes-on [data-note-board] { cursor: context-menu; }
.note {
  --c: var(--note-butter);
  position: absolute; z-index: 30; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  left: calc(var(--x) * 100%); top: calc(var(--y) * 100%);
  transform: rotate(var(--tilt, -3deg)) perspective(220px) rotateX(9deg);
  transform-origin: 50% 0;
  cursor: grab; touch-action: none;
  transition: transform var(--dur-2) var(--ease-out), filter var(--dur-2);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.note__paper {
  position: absolute; inset: 0; border-radius: 1px 1px 3px 3px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08) 0 13%, transparent 13.5%),
    linear-gradient(170deg, rgba(255,255,255,.35), transparent 40%),
    linear-gradient(0deg, color-mix(in oklab, var(--c) 82%, #fff) 0%, var(--c) 30%);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.4), inset 0 0 0 .5px rgba(0,0,0,.12);
}
/* The lifted bottom: two curl shadows under the bottom corners. */
.note::before, .note::after {
  content: ""; position: absolute; z-index: -1; bottom: 7px; width: 48%; height: 30%;
  background: rgba(0,0,0,.55); filter: blur(4px);
}
.note::before { left: 4px; transform: skew(-8deg) rotate(-6deg); }
.note::after { right: 4px; transform: skew(8deg) rotate(6deg); }
.note:hover { transform: rotate(var(--tilt, -3deg)) perspective(220px) rotateX(14deg) translateY(-3px) scale(1.06); filter: drop-shadow(0 3px 3px rgba(0,0,0,.4)); }
.note:active { cursor: grabbing; }
.note.is-dragging { z-index: 80; transition: none; transform: rotate(0deg) perspective(220px) rotateX(18deg) scale(1.14); filter: drop-shadow(0 18px 14px rgba(0,0,0,.45)); cursor: grabbing; }
.note.is-new { animation: note-peel .5s var(--ease-spring); }
@keyframes note-peel { from { transform: rotate(-24deg) scale(.4) translateY(-20px); opacity: 0; } }
.note.is-track::after { right: 4px; }
.note__pin { position: absolute; z-index: 2; right: -5px; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-0); color: var(--paper-2); display: grid; place-items: center; font: 600 8px/1 var(--font-mono); box-shadow: 0 0 0 1.5px var(--c); }
.note[data-color="rose"] { --c: var(--note-rose); } .note[data-color="sage"] { --c: var(--note-sage); }
.note[data-color="sky"] { --c: var(--note-sky); } .note[data-color="tangerine"] { --c: var(--note-tangerine); }
.notes-hidden .note { opacity: 0; pointer-events: none; transform: scale(.6); }

/* Placement ghost while "holding" a note after right-click */
.note-ghost { position: fixed; z-index: 400; pointer-events: none; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; transform: translate(var(--px), var(--py)) rotate(-6deg) scale(1.12); }
.note-ghost .note__paper { box-shadow: 0 20px 20px -6px rgba(0,0,0,.6); }
.note-ghost__hint { position: absolute; left: 56px; top: 8px; white-space: nowrap; padding: .3rem .55rem; border-radius: 6px; background: var(--paper); color: var(--ink-0); font: 500 var(--t-xs)/1 var(--font-sans); }
body.is-placing, body.is-placing * { cursor: copy !important; }

/* Focus view: the note brought up close */
.note-focus { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; }
.note-focus__scrim { position: absolute; inset: 0; background: rgba(6,5,4,.6); backdrop-filter: blur(5px); animation: fade var(--dur-2); }
.note-focus__card {
  --c: var(--note-butter);
  position: relative; width: min(400px, calc(100vw - 2rem)); min-height: 380px;
  display: flex; flex-direction: column; padding: 1.8rem 1.6rem 1.2rem; color: #2a2116;
  background:
    linear-gradient(180deg, rgba(0,0,0,.07) 0 11%, transparent 11.4%),
    repeating-linear-gradient(transparent 0 31px, rgba(60, 40, 20, .09) 31px 32px) 0 88px / 100% 100% no-repeat,
    linear-gradient(170deg, rgba(255,255,255,.35), transparent 40%),
    var(--c);
  border-radius: 2px 2px 6px 6px;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.85), 0 12px 24px -10px rgba(0,0,0,.6), inset 0 -2px 0 rgba(255,255,255,.35);
  transform-origin: center;
}
.note-focus__card[data-color="rose"] { --c: var(--note-rose); } .note-focus__card[data-color="sage"] { --c: var(--note-sage); }
.note-focus__card[data-color="sky"] { --c: var(--note-sky); } .note-focus__card[data-color="tangerine"] { --c: var(--note-tangerine); }
.note-focus__card::after { content: ""; position: absolute; right: 0; bottom: 0; width: 38px; height: 38px; background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,.14) 50%); border-radius: 0 0 6px 0; }
.note-focus__where { font: 600 var(--t-xs)/1.2 var(--font-sans); color: rgba(42,33,22,.6); margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.note-focus__text { flex: 1; width: 100%; min-height: 220px; border: 0; outline: 0; resize: none; background: transparent; color: #2a2116; font: 500 1.6rem/32px var(--font-hand); font-style: normal; caret-color: #2a2116; }
/* Caveat is already a slanted hand. Asking for italic on top made the browser fake a second slant that the straight
   text cursor didn't share, so the words leaned and the cursor didn't. */
.note-focus__text::placeholder { color: rgba(42,33,22,.4); }
.note-focus__bar { display: flex; align-items: center; gap: .5rem; padding-top: .9rem; border-top: 1px solid rgba(42,33,22,.14); }
.note-focus__bar .btn { --h: 32px; background: rgba(42,33,22,.08); border-color: rgba(42,33,22,.14); color: #2a2116; font-size: var(--t-xs); }
.note-focus__bar .btn:hover { background: rgba(42,33,22,.16); }
.note-focus__bar .btn--ink { background: #2a2116; color: var(--c); border-color: transparent; }
.swatches { display: flex; gap: .35rem; }
.swatch { width: 20px; height: 20px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1.5px rgba(42,33,22,.25); transition: transform var(--dur-1) var(--ease-spring); }
.swatch:hover { transform: scale(1.15); }
.swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px rgba(42,33,22,.25), 0 0 0 2px var(--c), 0 0 0 3.5px #2a2116; }

/* The pad on the right edge */
.note-pad { position: fixed; right: 18px; top: 50%; z-index: 40; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: .9rem .6rem .7rem; border-radius: 18px; background: color-mix(in oklab, var(--ink-1) 88%, transparent); border: 1px solid var(--line-2); backdrop-filter: blur(14px); box-shadow: var(--shadow-3); animation: pad-in .7s var(--ease-out) .4s both; }
@keyframes pad-in { from { opacity: 0; transform: translate(30px, -50%); } }
.note-pad__stack { position: relative; width: 48px; height: 54px; cursor: grab; touch-action: none; }
.note-pad__stack span { position: absolute; left: 0; width: 48px; height: 48px; border-radius: 1px 1px 3px 3px; background: linear-gradient(180deg, rgba(0,0,0,.08) 0 13%, transparent 13.5%), var(--c, var(--note-butter)); box-shadow: 0 1px 0 rgba(0,0,0,.25), inset 0 -1px 0 rgba(255,255,255,.35); transition: transform var(--dur-2) var(--ease-out); }
.note-pad__stack span:nth-child(1) { top: 6px; filter: brightness(.82); } .note-pad__stack span:nth-child(2) { top: 4px; filter: brightness(.88); }
.note-pad__stack span:nth-child(3) { top: 2px; filter: brightness(.94); } .note-pad__stack span:nth-child(4) { top: 0; }
.note-pad__stack:hover span:nth-child(4) { transform: translate(-3px, -4px) rotate(-6deg); }
.note-pad__colors { display: grid; gap: .35rem; }
.note-pad__colors button { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.note-pad__colors button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink-1), 0 0 0 3.5px var(--paper-2); }
.note-pad__label { writing-mode: vertical-rl; transform: rotate(180deg); font: 500 var(--t-xs)/1 var(--font-sans); color: var(--paper-3); }
.note-pad__toggle { color: var(--paper-3); } .note-pad__toggle:hover { color: var(--paper); }
@media (max-width: 760px) { .note-pad { right: 8px; top: auto; bottom: 16px; transform: none; flex-direction: row; padding: .5rem .7rem; } .note-pad__label { display: none; } .note-pad__colors { grid-auto-flow: column; } }

/* ── Track page: faders ─────────────────────────────────────────────── */
.track-hero { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: end; padding-block: clamp(2rem, 1rem + 3vw, 3.5rem) 2rem; }
@media (max-width: 640px) { .track-hero { grid-template-columns: 110px 1fr; } }
/* Phones: the sleeve sits above the title so the actions get the whole width. */
@media (max-width: 560px) { .track-hero { grid-template-columns: 1fr; gap: 1.1rem; align-items: start; } .track-hero__sleeve { width: 116px; } }
.mixer { display: grid; grid-template-columns: repeat(3, 1fr) minmax(160px, 1.3fr); gap: 1rem; align-items: stretch; }
@media (max-width: 760px) { .mixer { grid-template-columns: repeat(3, 1fr); } .mixer__cube { grid-column: 1 / -1; min-height: 220px; } }
.fader { --c: var(--accent); --v: 5; position: relative; display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 1rem .5rem 1.1rem; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--ink-2), var(--ink-1)); border: 1px solid var(--line); }
.fader--energy { --c: var(--energy); } .fader--valence { --c: var(--valence); } .fader--density { --c: var(--density); }
.fader__name { font: 600 .6875rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.fader__slot { position: relative; width: 44px; height: 220px; cursor: ns-resize; touch-action: none; }
.fader__slot::before { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 4px; margin-left: -2px; border-radius: 4px; background: #070605; box-shadow: inset 0 1px 2px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.05); }
.fader__ticks { position: absolute; inset: 6px 0; display: flex; flex-direction: column-reverse; justify-content: space-between; pointer-events: none; }
.fader__ticks i { display: flex; justify-content: space-between; font: 500 8px/0 var(--font-mono); color: var(--paper-4); }
.fader__ticks i::before, .fader__ticks i::after { content: ""; width: 9px; height: 1px; background: var(--line-3); }
.fader__fill { position: absolute; left: 50%; bottom: 6px; width: 4px; margin-left: -2px; border-radius: 4px; height: calc((var(--v) - 1) / 9 * (100% - 12px)); background: var(--c); box-shadow: 0 0 14px var(--c); transition: height var(--dur-2) var(--ease-out); }
.fader__cap { position: absolute; left: 50%; bottom: calc(6px + (var(--v) - 1) / 9 * (100% - 12px)); width: 40px; height: 22px; margin: 0 0 -11px -20px; border-radius: 5px;
  background: linear-gradient(180deg, #5a5348, #2d2923 48%, #1d1a16 52%, #3a352d);
  box-shadow: 0 6px 10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.5);
  transition: bottom var(--dur-2) var(--ease-out); }
.fader__cap::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; margin-top: -1px; background: var(--c); border-radius: 2px; box-shadow: 0 0 6px var(--c); }
.fader.is-dragging .fader__cap, .fader.is-dragging .fader__fill { transition: none; }
.fader__value { font: 400 1.7rem/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fader__word { font: 400 var(--t-xs)/1 var(--font-sans); color: var(--paper-3); min-height: 1em; }
.fader.is-locked { opacity: .55; }
.fader.is-locked .fader__slot { cursor: not-allowed; }
.mixer__cube, .mixer__cube.space { position: relative; border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(circle at 50% 40%, var(--ink-2), var(--ink-0)); overflow: hidden; min-height: 300px; }
.mixer__cube.space { min-height: 300px; }
.lockbox { display: flex; gap: 1rem; align-items: start; padding: 1rem 1.1rem; margin-top: 1rem; border-radius: var(--r); background: var(--ink-1); border: 1px dashed var(--line-2); font-size: var(--t-sm); color: var(--paper-2); }
.lockbox .btn { margin-top: .8rem; }
.track-hero__sleeve { position: relative; display: block; }
.track-hero .release-facts { margin-bottom: 1.4rem; }
.track-hero .release-facts a:hover { color: var(--paper); }
[data-sound-form] .panel__title { align-items: start; flex-wrap: wrap; }
[data-sound-form] .panel__title .meta { margin-top: .3rem; }
.sound-buttons { --gap: .5rem; flex: none; }
.sound-status { margin-top: 1rem; }
.sound-status:empty { display: none; }
.community-score { display: flex; align-items: baseline; gap: .8rem; }
.panel__label { font: 500 var(--t-sm)/1.2 var(--font-sans); color: var(--paper-3); margin-bottom: .5rem; }
.section--reviews { margin-top: 3rem; }
.composer { margin-bottom: 1.5rem; }
.composer-wrap { margin-bottom: 1.25rem; }
.composer-wrap > summary { list-style: none; display: inline-flex; cursor: pointer; }
.composer-wrap > summary::-webkit-details-marker { display: none; }
.composer-wrap[open] > summary { display: none; }
.composer__head { --gap: .8rem; margin-bottom: 1rem; }
.composer__who { font-weight: 560; font-size: var(--t-sm); }
.composer__foot { margin-top: .9rem; gap: .8rem; flex-wrap: wrap; }
.composer__foot .row { --gap: .5rem; }
/* Small linked rows in side panels: sounds-alike, lists a record is on. */
.link-rows a { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.link-rows a:last-child { border-bottom: 0; padding-bottom: 0; }
.link-rows a:hover b { color: var(--hi); }
.link-rows__art { width: 40px; flex: none; }
.link-rows__text { flex: 1; min-width: 0; }
.link-rows__text b { display: block; font-weight: 560; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--dur-1); }
.link-rows__text .meta { display: block; }
.link-rows__num { font: 500 var(--t-xs)/1 var(--font-mono); color: var(--hi); }
.siblings a { display: flex; align-items: center; gap: .7rem; padding: .42rem 0; font-size: var(--t-sm); color: var(--paper-2); }
.siblings a:hover { color: var(--paper); }
.siblings a.is-current { color: var(--hi); }
.siblings__n { width: 1.6rem; flex: none; text-align: right; font: 500 var(--t-xs)/1 var(--font-mono); color: var(--paper-4); }
.siblings__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Taste space (three.js) ─────────────────────────────────────────── */
.space { position: relative; min-height: 460px; border-radius: var(--r-xl); border: 1px solid var(--line); background: radial-gradient(90% 80% at 50% 35%, #1a1712, var(--ink-0) 75%); overflow: hidden; }
.space canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; cursor: grab; }
.space canvas:active { cursor: grabbing; }
.space__legend { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; display: flex; flex-wrap: wrap; gap: .4rem .9rem; font: 500 var(--t-xs)/1.2 var(--font-sans); color: var(--paper-3); pointer-events: none; }
.space__legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: .4rem; vertical-align: -1px; background: var(--c); }
.space__hint { position: absolute; right: 1rem; top: 1rem; font: 450 var(--t-xs)/1.2 var(--font-sans); color: var(--paper-4); pointer-events: none; }
@media (hover: none), (max-width: 640px) { .space__hint { display: none; } }
.space__tip { position: absolute; z-index: 5; pointer-events: none; display: flex; align-items: center; gap: .6rem; padding: .45rem .65rem .45rem .45rem; border-radius: var(--r); background: color-mix(in oklab, var(--ink-0) 88%, transparent); border: 1px solid var(--line-2); backdrop-filter: blur(10px); box-shadow: var(--shadow-2); transform: translate(-50%, calc(-100% - 14px)); white-space: nowrap; opacity: 0; transition: opacity var(--dur-1); }
.space__tip.is-on { opacity: 1; }
.space__tip .sleeve { width: 38px; }
.space__tip b { display: block; font-size: var(--t-sm); font-weight: 580; }
.space__tip span { font: 400 var(--t-xs)/1.3 var(--font-sans); color: var(--paper-3); }
.space__empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--paper-3); font-size: var(--t-sm); padding: 2rem; }
.space__axis { position: absolute; font: 600 .625rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; pointer-events: none; color: var(--c); transform: translate(-50%, -50%); white-space: nowrap; text-shadow: 0 1px 6px #000; }

/* ── Tuner ──────────────────────────────────────────────────────────── */
.tuner { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 1000px) { .tuner { grid-template-columns: 1fr; } }
.tuner__controls { position: sticky; top: calc(var(--topbar-h) + 1rem); }
.tuner .mixer { grid-template-columns: repeat(3, 1fr); }
.tuner .fader__slot { height: 170px; }
.knob-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; margin-top: 1.2rem; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) 0 var(--p, 30%), var(--ink-4) var(--p, 30%)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 4px var(--accent-soft), 0 2px 6px rgba(0,0,0,.5); cursor: pointer; }
.range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 4px var(--accent-soft); cursor: pointer; }
.presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; }
.results { margin-top: 1.5rem; }
.result { display: grid; grid-template-columns: 2.4rem 48px minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .7rem .2rem; border-bottom: 1px solid var(--line); animation: fade .4s var(--ease-out) both; animation-delay: calc(var(--i) * 25ms); }
.result.is-out { opacity: .45; }
.result__match { font: 500 var(--t-xs)/1 var(--font-mono); color: var(--hi); text-align: right; }
.result__match.is-out { color: var(--paper-4); }

/* ── Profile ────────────────────────────────────────────────────────── */
.profile-hero { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(1.25rem, 1rem + 2vw, 2.5rem); align-items: center; padding-block: clamp(2.5rem, 1rem + 4vw, 4rem) 2rem; }
.profile-hero h1 { font-size: var(--t-3xl); font-weight: 360; letter-spacing: -.035em; }
.profile-hero__handle { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin-top: .6rem; color: var(--paper-3); font: 400 var(--t-sm)/1.3 var(--font-sans); }
.profile-hero__handle > span { display: inline-flex; align-items: center; gap: .3rem; }
.profile-hero__bio { margin-top: 1rem; color: var(--paper-2); max-width: 56ch; }
@media (max-width: 760px) { .profile-hero { grid-template-columns: auto 1fr; } .profile-hero__actions { grid-column: 1 / -1; } }
.taste-line { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 340; line-height: 1.3; letter-spacing: -.02em; max-width: 28ch; }
.taste-line em { color: var(--hi); }

/* Diary (editorial calendar) */
.diary-month { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 2rem; padding: 2rem 0; border-top: 1px solid var(--line-2); }
.diary-month__label { position: sticky; top: calc(var(--topbar-h) + 1.5rem); align-self: start; }
.diary-month__label b { display: block; font: 360 var(--t-2xl)/1 var(--font-display); letter-spacing: -.03em; }
.diary-month__label span { font: 500 var(--t-xs)/1 var(--font-sans); color: var(--paper-3); }
.diary-entry { display: grid; grid-template-columns: 3rem 52px minmax(0, 1fr) auto auto; gap: 1rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.diary-entry__day { font: 300 1.7rem/1 var(--font-display); color: var(--paper-2); font-variant-numeric: tabular-nums; text-align: right; }
.diary-entry__day small { display: block; font: 500 var(--t-xs)/1.4 var(--font-sans); color: var(--paper-4); }
.diary-entry__icons { display: flex; gap: .4rem; color: var(--paper-3); }
@media (max-width: 760px) { .diary-month { grid-template-columns: 1fr; gap: 1rem; } .diary-month__label { position: static; } }

/* Lists */
.list-cover { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); isolation: isolate; }
.list-cover .sleeve { grid-row: 1; box-shadow: -10px 0 18px -6px rgba(0,0,0,.7); }
.list-cover .sleeve:nth-child(1) { grid-column: 1 / span 2; z-index: 5; }
.list-cover .sleeve:nth-child(2) { grid-column: 2 / span 2; z-index: 4; }
.list-cover .sleeve:nth-child(3) { grid-column: 3 / span 2; z-index: 3; }
.list-cover .sleeve:nth-child(4) { grid-column: 4 / span 2; z-index: 2; }
.list-card { display: grid; gap: 1rem; padding: 1.1rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--ink-1); transition: border-color var(--dur-1), transform var(--dur-2) var(--ease-out); }
.list-card:hover { border-color: var(--line-3); transform: translateY(-3px); }
.list-card h3 { font-size: var(--t-lg); font-weight: 450; }
.list-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; margin-bottom: 2.5rem; }
.list-head h1 { margin-top: .8rem; }
.list-head .lede { margin-top: 1rem; }
.list-head__by { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.2rem; }
.list-head__by > a { font-weight: 560; font-size: var(--t-sm); }
.list-head__by > a:hover { color: var(--hi); }
.list-head__actions { display: flex; align-items: center; gap: .5rem; }
@media (max-width: 640px) { .list-head { grid-template-columns: 1fr; gap: 1.25rem; } }
.list-items { counter-reset: li; }
.list-item__lead { display: flex; align-items: center; gap: .3rem; }
.list-item__art { position: relative; display: block; }
.list-item__text { min-width: 0; }
.list-item__title { display: block; font-weight: 580; font-size: var(--t-md); }
.list-item__title:hover { color: var(--hi); }
/* The owner's note in the margin, in their own hand. */
.list-item__note { margin-top: .35rem; color: var(--brass); font-size: 1.35rem; }
.list-item__end { display: flex; align-items: center; gap: 1rem; }
@media (max-width: 640px) { .list-item { grid-template-columns: auto 52px minmax(0, 1fr) auto; gap: .8rem; } .list-item__n { width: 1.8rem; font-size: 1.5rem; } .list-item__end { gap: .6rem; } }
.sheet__foot--split { justify-content: space-between; }
.sheet__foot--split .row { --gap: .5rem; }
.list-item { display: grid; grid-template-columns: auto 64px minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); background: var(--ink-0); }
.list-item__n { font: 300 2rem/1 var(--font-display); font-style: italic; color: var(--paper-4); width: 2.6rem; text-align: right; font-variation-settings: "SOFT" 100, "WONK" 1; }
.list-item__grip { cursor: grab; color: var(--paper-4); padding: .3rem; }
.list-item.is-dragging { opacity: .5; }
.list-item.is-over { box-shadow: 0 -2px 0 var(--accent) inset; }

/* ── Search palette ─────────────────────────────────────────────────── */
dialog.palette { margin: 12vh auto auto; width: min(680px, calc(100% - 1.5rem)); border-radius: var(--r-xl); background: color-mix(in oklab, var(--ink-1) 94%, transparent); border: 1px solid var(--line-2); box-shadow: 0 50px 120px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.4); backdrop-filter: blur(20px); overflow: hidden; }
dialog.palette[open] { animation: palette-in var(--dur-2) var(--ease-out); }
dialog.palette::backdrop { background: rgba(6,5,4,.55); backdrop-filter: blur(3px); }
@keyframes palette-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.palette__bar { display: flex; align-items: center; gap: .8rem; padding: 0 1.1rem; border-bottom: 1px solid var(--line); }
.palette__bar .i { color: var(--paper-3); width: 20px; height: 20px; }
.palette__input { flex: 1; height: 62px; border: 0; outline: 0; background: transparent; font-size: var(--t-lg); color: var(--paper); }
.palette__input::placeholder { color: var(--paper-4); }
.palette__mode { font: 500 var(--t-xs)/1 var(--font-sans); color: var(--hi); white-space: nowrap; }
.palette__results { max-height: min(60vh, 520px); overflow-y: auto; padding: .4rem; scroll-padding: .5rem; }
.palette__group { padding: .8rem .75rem .4rem; font: 500 var(--t-xs)/1 var(--font-sans); color: var(--paper-4); }
.palette__item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: .85rem; align-items: center; width: 100%; padding: .5rem .7rem; border-radius: var(--r-sm); text-align: left; color: var(--paper-2); }
.palette__item .p-text { min-width: 0; }
.palette__input::-webkit-search-cancel-button { display: none; }
.palette__item b { display: block; font-weight: 560; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__item .p-text > span { display: block; font-size: var(--t-xs); color: var(--paper-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__item[aria-selected="true"] { background: var(--ink-3); }
.palette__item[aria-selected="true"] .palette__enter { opacity: 1; }
.palette__enter { opacity: 0; font: 500 .6875rem/1 var(--font-mono); color: var(--paper-3); display: flex; align-items: center; gap: .4rem; }
.palette__item .sleeve, .palette__item .avatar { width: 40px; --s: 40px; }
.palette__icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--ink-3); display: grid; place-items: center; color: var(--paper-2); }
.palette__item.is-done .palette__enter { opacity: 1; color: var(--hi); }
.palette__foot { display: flex; gap: 1.2rem; padding: .7rem 1.1rem; border-top: 1px solid var(--line); font: 400 .6875rem/1 var(--font-mono); color: var(--paper-4); }
.palette__foot span { display: inline-flex; align-items: center; gap: .4rem; }
.palette__empty { padding: 2.5rem 1rem; text-align: center; color: var(--paper-3); font-size: var(--t-sm); }

/* ── Auth ───────────────────────────────────────────────────────────── */
.auth { min-height: calc(100dvh - var(--topbar-h)); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 520px); }
.auth__wall { position: relative; overflow: hidden; perspective: 1200px; border-right: 1px solid var(--line); background: var(--ink-0); }
.auth__plane { position: absolute; left: 50%; top: 50%; width: 170%; display: grid; grid-template-columns: repeat(7, 1fr); gap: 18px; transform: translate(-50%, -50%) rotateX(48deg) rotateZ(-18deg); animation: drift 60s linear infinite alternate; }
@keyframes drift { to { transform: translate(-50%, -62%) rotateX(48deg) rotateZ(-18deg); } }
.auth__plane .sleeve { box-shadow: 0 20px 30px -10px rgba(0,0,0,.9); }
.auth__wall::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 50%, transparent, var(--ink-0) 85%), linear-gradient(0deg, var(--ink-0), transparent 40%); }
.auth__quote { position: absolute; z-index: 2; left: clamp(1.5rem, 1rem + 3vw, 4rem); bottom: clamp(1.5rem, 1rem + 3vw, 4rem); right: 2rem; max-width: 30ch; }
.auth__quote p { font: 340 var(--t-2xl)/1.08 var(--font-display); letter-spacing: -.03em; }
.auth__quote p em { color: var(--hi); }
.auth__form { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 1rem + 4vw, 4rem); }
.auth__form h1 { font-size: var(--t-2xl); margin: .8rem 0 .6rem; }
.auth__form form { margin-top: 2rem; }
.demo-accounts { margin-top: 2rem; padding: 1rem; border-radius: var(--r); border: 1px dashed var(--line-2); font-size: var(--t-xs); color: var(--paper-3); }
.demo-accounts button { font: 500 var(--t-xs)/1 var(--font-sans); color: var(--paper-2); padding: .35rem .55rem; border-radius: 6px; background: var(--ink-2); border: 1px solid var(--line); }
.demo-accounts button:hover { color: var(--paper); border-color: var(--line-3); }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth__wall { display: none; } }

/* ── Artist page ────────────────────────────────────────────────────── */
.artist-hero { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: end; padding-block: clamp(2.5rem, 1rem + 4vw, 4.5rem) 2.5rem; }
.portrait { position: relative; width: clamp(140px, 12vw + 80px, 240px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(120% 120% at 25% 15%, hsl(var(--h) 45% 50%), hsl(calc(var(--h) + 40) 40% 18%) 70%); display: grid; place-items: center; font: 300 clamp(3rem, 2rem + 3vw, 5rem)/1 var(--font-display); letter-spacing: -.04em; color: hsl(var(--h) 40% 88%); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.12); }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.15) contrast(1.05); }
.portrait__edit { position: absolute; right: 6%; bottom: 6%; z-index: 3; }
.artist-name { font-size: var(--t-4xl); font-weight: 330; letter-spacing: -.045em; line-height: .9; }
.genres { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; }
@media (max-width: 640px) { .artist-hero { grid-template-columns: 1fr; } }
.artist-hero__portrait { position: relative; }
.artist-hero .release-facts { margin: 1.2rem 0 0; }
.artist-hero .lede { margin-top: 1.2rem; }
.portrait--sm { width: 96px; font-size: 1.8rem; flex: none; }
.portrait-form { --gap: 1.25rem; align-items: start; }
.section--first { margin-top: 2rem; }
.footnote { margin-top: 2.5rem; }
.artist-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2rem 1.25rem; }
.artist-tile { display: grid; justify-items: center; gap: .8rem; text-align: center; }
.artist-tile .portrait { width: 100%; font-size: 2.6rem; transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3); }
.artist-tile:hover .portrait { transform: translateY(-4px) scale(1.02); }
.artist-tile b { font-weight: 560; font-size: var(--t-sm); }

/* ── Mod ────────────────────────────────────────────────────────────── */
.mod-hero { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-block: 2.5rem 1.5rem; }
.mod-nav { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 2rem; }
.mod-nav a { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: var(--r-full); font-size: var(--t-sm); font-weight: 550; color: var(--paper-3); border: 1px solid transparent; }
.mod-nav a:hover { color: var(--paper); background: var(--ink-2); }
.mod-nav a[aria-current="page"] { color: var(--brass); border-color: var(--brass-line-2); background: var(--brass-soft); }
.mod-nav .count { font: 600 .625rem/1 var(--font-mono); padding: .2rem .4rem; border-radius: var(--r-full); background: var(--accent); color: var(--accent-ink); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.kpi { padding: 1.2rem 1.3rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--ink-1); }
.kpi b { display: block; font: 340 2.6rem/1 var(--font-display); letter-spacing: -.04em; margin: .7rem 0 .3rem; font-variant-numeric: tabular-nums; }
.kpi span { font-size: var(--t-xs); color: var(--paper-3); }
.contrib { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.contrib.is-reversed { opacity: .5; }
.contrib__kind { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--ink-3); color: var(--paper-2); }
.picker { position: relative; }
.picker__results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); max-height: 320px; overflow: auto; padding: .35rem; border-radius: var(--r); background: var(--ink-2); border: 1px solid var(--line-2); box-shadow: var(--shadow-3); }
.picker__results button { display: grid; grid-template-columns: 36px 1fr; gap: .7rem; align-items: center; width: 100%; padding: .45rem .55rem; border-radius: var(--r-sm); text-align: left; }
.picker__results button:hover, .picker__results button[aria-selected="true"] { background: var(--ink-3); }
.picker__results b { display: block; font-size: var(--t-sm); font-weight: 560; }
.picker__results span { font-size: var(--t-xs); color: var(--paper-3); }
.picked { display: flex; align-items: center; gap: .9rem; padding: .7rem; border-radius: var(--r); background: var(--ink-2); border: 1px solid var(--line-2); }
.picked .sleeve { width: 52px; }

/* ── Error page ─────────────────────────────────────────────────────── */
.error-page { min-height: 70dvh; display: grid; place-items: center; text-align: center; padding: 4rem 1rem; }
.error-page__code { font: 200 clamp(6rem, 4rem + 12vw, 14rem)/.85 var(--font-display); letter-spacing: -.06em; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--paper-4); position: relative; }
.error-page__code .disc { display: inline-block; width: .78em; height: .78em; vertical-align: -.02em; margin: 0 .02em; border-radius: 50%; background: radial-gradient(circle, var(--ink-0) 0 5%, var(--accent) 5.5% 18%, #0d0c0a 18.5% 19.5%, transparent 20%), repeating-radial-gradient(circle, #121110 0 1.5px, #1d1c19 2px 4px); animation: skip 2.6s steps(1) infinite, spin 2s linear infinite; }
@keyframes skip { 0%, 70% { translate: 0 0; } 72% { translate: 0 -6px; } 74%, 100% { translate: 0 0; } }

/* ── Audio playback: play controls ─────────────────────────────────── */
.play-n { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--paper-3); transition: background var(--dur-1), color var(--dur-1); }
.play-n > * { grid-area: 1 / 1; }
.play-n__num { font: 500 var(--t-xs)/1 var(--font-mono); font-variant-numeric: tabular-nums; transition: opacity var(--dur-1); }
.play-n__icon { display: grid; place-items: center; opacity: 0; transform: scale(.7); transition: opacity var(--dur-1), transform var(--dur-2) var(--ease-spring); }
.play-n__icon .i { width: 14px; height: 14px; fill: currentColor; stroke-width: 1.2; transform: translateX(1px); }
.play-n__sleeve { width: 30px; }
.play-n__sleeve .sleeve { border-radius: 3px; }
.track:hover .play-n, .play-n:focus-visible { color: var(--paper); background: var(--ink-3); }
.track:hover .play-n .play-n__num, .play-n:focus-visible .play-n__num { opacity: 0; }
.track:hover .play-n .play-n__icon, .play-n:focus-visible .play-n__icon { opacity: 1; transform: none; }
.play-n--sleeve { border-radius: 4px; overflow: hidden; }
.track:hover .play-n--sleeve .play-n__sleeve { filter: brightness(.45); }
.track__n--sleeve { width: 30px; }

.play-btn { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--paper); color: var(--ink-0); box-shadow: 0 6px 16px -6px rgba(0,0,0,.7); transition: transform var(--dur-2) var(--ease-spring), background var(--dur-1); }
.play-btn > * { grid-area: 1 / 1; }
.play-btn .i { width: 14px; height: 14px; fill: currentColor; stroke-width: 1.2; transform: translateX(1px); }
.play-btn:hover { transform: scale(1.08); background: var(--paper-hover); }
.play-hero .i { fill: currentColor; stroke-width: 1.2; }

/* Equalizer bars replace the icon on whatever is playing right now. */
.eq { display: none; align-items: end; gap: 2px; height: 12px; }
.eq i { width: 3px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: bottom; animation: eq .9s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: -.35s; } .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 0% { transform: scaleY(.25); } 100% { transform: scaleY(1); } }
.is-current.play-n { color: var(--hi); background: var(--accent-soft); }
.is-current.play-n .play-n__num, .is-current.play-n .play-n__sleeve { opacity: 0; }
.is-current.play-n .play-n__icon { opacity: 1; transform: none; }
.is-playing.play-n .play-n__icon, .is-playing.play-btn > .i, .is-playing.play-hero > .i { display: none; }
.is-playing.play-n .eq, .is-playing.play-btn .eq, .is-playing.play-hero .eq { display: inline-flex; }
.is-current.play-btn { background: var(--accent); color: var(--accent-ink); }
.track:has(.is-current) .track__title a { color: var(--hi); }

/* ── Now-playing dock ──────────────────────────────────────────────── */
/* Above the film grain (z 9999) so nothing is ever drawn over the YouTube player. */
.dock {
  position: fixed; z-index: 10000; right: 16px; bottom: 16px; width: 380px;
  display: flex; flex-direction: column; gap: 10px; padding: 12px;
  border-radius: 20px; border: 1px solid var(--line-2);
  background: color-mix(in oklab, var(--ink-1) 94%, transparent);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4);
  transform: translateY(calc(100% + 40px)); opacity: 0; pointer-events: none;
  transition: transform .55s var(--ease-out), opacity .3s;
}
.dock.is-open { transform: none; opacity: 1; pointer-events: auto; }
.dock::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transition: opacity .4s; }
.dock.is-playing::before { opacity: .9; }
.dock__head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.dock__sleeve { width: 48px; display: block; }
.dock.is-playing .dock__sleeve .sleeve { animation: breathe 3.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.04); } }
.dock__meta { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.dock__title { font-weight: 600; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock__title:hover { color: var(--hi); }
.dock__artist { font-size: var(--t-xs); color: var(--paper-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock__src { display: inline-flex; align-items: center; gap: .3rem; width: max-content; margin-top: 3px; font: 600 var(--t-xs)/1 var(--font-sans); color: var(--paper-3); }
.dock__src:empty { display: none; }
.dock__src .i { width: 12px; height: 12px; }
.dock__src.is-spotify { color: var(--valence); }
.dock__src.is-youtube { color: var(--paper-2); }
.dock__src.is-backup { color: var(--brass); padding: .22rem .45rem; border-radius: var(--r-full); background: var(--brass-soft); box-shadow: inset 0 0 0 1px var(--brass-line-2); cursor: help; }
.dock__ctl { display: flex; align-items: center; gap: 2px; }
.dock__btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--paper-2); transition: background var(--dur-1), color var(--dur-1); }
.dock__btn:hover:not(:disabled) { background: var(--ink-3); color: var(--paper); }
.dock__btn:disabled { opacity: .3; cursor: default; }
.dock__btn .i { width: 16px; height: 16px; }
.dock__btn--main { width: 38px; height: 38px; background: var(--paper); color: var(--ink-0); }
.dock__btn--main:hover:not(:disabled) { background: var(--paper-hover); color: var(--ink-0); }
.dock__btn--main .i, .dock__btn .i use[href="#i-skip-next"], .dock__btn .i use[href="#i-skip-prev"] { fill: currentColor; }
.dock__btn--close { margin-left: 4px; }

.dock__stage { position: relative; border-radius: 12px; overflow: hidden; background: var(--ink-0); }
.dock__sp, .dock__yt, .dock__msg { display: none; }
.dock__stage[data-state="spotify"] .dock__sp { display: block; height: 80px; }
.dock__stage[data-state="youtube"] .dock__yt { display: block; aspect-ratio: 16 / 9; min-height: 200px; }
.dock__stage[data-state="loading"] .dock__msg, .dock__stage[data-state="missing"] .dock__msg { display: flex; }
.dock__sp iframe, .dock__yt iframe { display: block; width: 100%; height: 100%; border: 0; }
.dock__msg { flex-direction: column; gap: .7rem; padding: 1rem; min-height: 80px; justify-content: center; font-size: var(--t-sm); color: var(--paper-2); background: repeating-linear-gradient(-45deg, var(--ink-1) 0 8px, var(--ink-0) 8px 16px); }
.dock__msg b { color: var(--paper); font-weight: 560; }
.dock__msg a:not(.btn) { color: var(--hi); }
.dock__links { display: flex; flex-wrap: wrap; gap: .4rem; }
.dock__foot { display: flex; align-items: center; gap: .8rem; font: 500 var(--t-xs)/1 var(--font-sans); color: var(--paper-4); padding: 0 4px; }
.dock__foot:not(:has(:not([hidden]):not(.grow):not(:empty))) { display: none; }
.dock__open { display: inline-flex; align-items: center; gap: .3rem; color: var(--paper-3); }
.dock__open:hover, .dock__fix:hover { color: var(--paper); }
.dock__open .i { width: 12px; height: 12px; }
.dock__fix { font: inherit; color: var(--paper-3); }
/* "This is a 30-second preview" — shown once per visit when Spotify plays a preview. */
.dock__preview { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; margin: 0; padding: .6rem 2.2rem .6rem .75rem; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line); font-size: var(--t-xs); line-height: 1.45; color: var(--paper-2); }
.dock__preview a { display: inline-flex; align-items: center; gap: .2rem; font-weight: 560; color: var(--hi); }
.dock__preview a:hover { color: var(--accent-2); }
.dock__preview a .i { width: 11px; height: 11px; }
.dock__preview-x { position: absolute; top: .4rem; right: .4rem; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: var(--paper-3); }
.dock__preview-x:hover { color: var(--paper); background: var(--ink-3); }

body.has-dock .colophon { padding-bottom: calc(var(--dock-h, 0px) + 2rem); }
/* The sticky-note pad moves up out of the player's way. */
@media (min-width: 761px) { body.has-dock .note-pad { top: calc(var(--topbar-h) + 20px); transform: none; transition: top .5s var(--ease-out); } }
/* With the player open, notices stack just above it, so "Added to your queue" is seen, not hidden behind it. */
@media (min-width: 761px) { body.has-dock .toasts { left: auto; right: 16px; transform: none; align-items: flex-end; bottom: calc(var(--dock-h, 0px) + 28px); } }
@media (max-width: 760px) {
  .dock { left: 8px; right: 8px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px); width: auto; }
  body.has-dock .toasts { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--dock-h, 0px) + 18px); }
  body.has-dock .note-pad { bottom: calc(var(--dock-h, 0px) + 16px); }
}

/* ── Settings: Audio playback ──────────────────────────────────────── */
.pb__list { display: grid; gap: .6rem; }
.pb-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .95rem 1rem; border-radius: var(--r); border: 1px solid var(--line); background: var(--ink-0); cursor: pointer; transition: border-color var(--dur-1), background var(--dur-2), opacity var(--dur-2); }
.pb-row:hover { border-color: var(--line-3); }
.pb-row:has(.toggle:checked) { border-color: var(--accent-line); background: linear-gradient(100deg, var(--accent-soft), transparent 70%), var(--ink-0); }
.pb-row--off:has(.toggle:checked) { border-color: var(--line-3); background: var(--ink-2); }
.pb-row.is-locked { opacity: .42; cursor: not-allowed; }
.pb-row__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ink-3); color: var(--paper-2); transition: background var(--dur-2), color var(--dur-2); }
.pb-row:has(.toggle:checked) .pb-row__icon { background: var(--accent); color: var(--accent-ink); }
.pb-row--off:has(.toggle:checked) .pb-row__icon { background: var(--paper-2); color: var(--ink-0); }
.pb-row__text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.pb-row__text b { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: var(--t-base); color: var(--paper); }
.pb-row__text b .chip { height: 20px; font-size: .5625rem; }
.pb-row__text > span { font-size: var(--t-sm); color: var(--paper-3); line-height: 1.5; text-wrap: pretty; }

.toggle { appearance: none; -webkit-appearance: none; position: relative; width: 46px; height: 28px; flex: none; border-radius: var(--r-full); background: var(--ink-4); box-shadow: inset 0 1px 2px rgba(0,0,0,.5); cursor: pointer; transition: background var(--dur-2); }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper-2); box-shadow: 0 2px 4px rgba(0,0,0,.45); transition: transform var(--dur-2) var(--ease-spring), background var(--dur-2); }
.toggle:checked { background: var(--accent); }
.toggle:checked::after { transform: translateX(18px); background: var(--accent-ink); }
.toggle:disabled { cursor: not-allowed; }
.toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.pb-backup { margin: .2rem 0 .3rem; padding: 1.1rem 1.1rem 1rem; border-radius: var(--r); border: 1px dashed var(--line-2); background: color-mix(in oklab, var(--ink-1) 70%, var(--ink-0)); animation: fade .35s var(--ease-out); }
.pb-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: .5rem; margin-top: .9rem; padding: 0; list-style: none; }
.pb-flow__step { display: flex; flex-direction: column; gap: .3rem; padding: .8rem .85rem; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line); font-size: var(--t-xs); color: var(--paper-3); line-height: 1.45; }
.pb-flow__step b { font-size: var(--t-sm); color: var(--paper); font-weight: 600; }
.pb-flow__n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 .625rem/1 var(--font-mono); }
.pb-flow__arrow { display: flex; align-items: center; justify-content: center; position: relative; min-width: 76px; }
.pb-flow__arrow::before { content: ""; position: absolute; left: 4px; right: 10px; top: 50%; border-top: 1px dashed var(--line-3); }
.pb-flow__arrow::after { content: ""; position: absolute; right: 4px; top: calc(50% - 4px); border: 4px solid transparent; border-left-color: var(--paper-3); }
.pb-flow__arrow span { position: relative; z-index: 1; padding: .15rem .4rem; border-radius: 6px; background: var(--ink-1); font: 500 var(--t-xs)/1.2 var(--font-sans); color: var(--paper-3); text-align: center; }
.pb-backup.is-yt-off [data-flow-yt] { opacity: .35; text-decoration: line-through; text-decoration-color: var(--paper-4); }
.pb-backup.is-yt-off [data-flow-yt] + .pb-flow__arrow { display: none; }
.pb-backup.is-yt-off .pb-flow { grid-template-columns: 1fr auto 1fr 1fr; }
.pb-backup [data-flow-off-note] { margin-top: .8rem; }
@media (max-width: 700px) {
  .pb-flow, .pb-backup.is-yt-off .pb-flow { grid-template-columns: 1fr; }
  .pb-flow__arrow { min-height: 30px; }
  .pb-flow__arrow::before { left: 50%; right: auto; top: 2px; bottom: 8px; border-top: 0; border-left: 1px dashed var(--line-3); }
  .pb-flow__arrow::after { right: auto; left: calc(50% - 4px); top: auto; bottom: 0; border-left-color: transparent; border-top-color: var(--paper-3); }
}
@media (max-width: 640px) { .track .play-n, .track .play-n__sleeve, .track__n--sleeve { width: 24px; height: 24px; } }

/* ── v4: titles sized by length ─────────────────────────────────────── */
.fit { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; overflow-wrap: break-word; padding-block: .04em .1em; }
.display-1.fit, .artist-name.fit { font-size: calc(var(--t-4xl) * var(--fit, 1)); }
.display-2.fit { font-size: calc(var(--t-3xl) * var(--fit, 1)); }
.fit[data-fit="long"] { line-height: 1; letter-spacing: -.03em; }
.fit.is-clamped { cursor: zoom-in; }
.fit.is-open { -webkit-line-clamp: unset; line-clamp: none; cursor: zoom-out; }

/* ── v4: play on chart sleeves ──────────────────────────────────────── */
.ranked__art { position: relative; }
.ranked__art > a { display: block; }
.play-cover { position: absolute; right: -8px; bottom: -8px; width: 32px; height: 32px; box-shadow: 0 0 0 3px var(--ink-0), 0 8px 18px -6px rgba(0,0,0,.8); transition: transform var(--dur-2) var(--ease-spring), background var(--dur-1), color var(--dur-1); }
.play-cover .i { width: 12px; height: 12px; }
.ranked__row:hover .play-cover, .play-cover:focus-visible { background: var(--accent); color: var(--accent-ink); transform: scale(1.08); }
@media (max-width: 640px) { .play-cover { width: 28px; height: 28px; right: -6px; bottom: -6px; } }

/* ── v4: home autoplay deck ─────────────────────────────────────────── */
.autoplay { position: absolute; top: .85rem; right: 1rem; z-index: 2; display: flex; align-items: center; gap: .5rem; }
.autoplay__switch { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .35rem .3rem .75rem; border-radius: var(--r-full); border: 1px solid var(--line-2); background: color-mix(in oklab, var(--ink-0) 82%, transparent); backdrop-filter: blur(8px); cursor: pointer; font: 600 var(--t-xs)/1 var(--font-sans); color: var(--paper-3); transition: border-color var(--dur-2), color var(--dur-2); }
.autoplay__switch:hover { border-color: var(--line-3); color: var(--paper-2); }
.autoplay__led { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); transition: background var(--dur-2), box-shadow var(--dur-2); }
.autoplay.is-on .autoplay__switch { color: var(--paper); border-color: var(--accent-line); }
.autoplay.is-on .autoplay__led { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.autoplay[data-state="playing"] .autoplay__led { animation: led 1.6s ease-in-out infinite; }
.autoplay__btn { display: inline-flex; align-items: center; gap: .45rem; height: 30px; padding: 0 .85rem 0 .7rem; border-radius: var(--r-full); background: var(--paper); color: var(--ink-0); font: 600 var(--t-xs)/1 var(--font-sans); box-shadow: 0 6px 16px -6px rgba(0,0,0,.7); transition: transform var(--dur-2) var(--ease-spring), background var(--dur-1); }
.autoplay__btn:hover { transform: translateY(-1px); background: var(--paper-hover); }
.autoplay__btn .i { width: 12px; height: 12px; fill: currentColor; stroke-width: 2.6; }
.autoplay__btn[hidden] { display: none; }
.autoplay[data-state="blocked"] .autoplay__btn { background: var(--accent); color: var(--accent-ink); animation: nudge 1.8s ease-out infinite; }
.toggle--sm { width: 34px; height: 20px; }
.toggle--sm::after { top: 3px; left: 3px; width: 14px; height: 14px; }
.toggle--sm:checked::after { transform: translateX(14px); }
@keyframes led { 50% { opacity: .4; box-shadow: 0 0 2px var(--accent); } }
@keyframes nudge { 0% { box-shadow: 0 0 0 0 var(--accent-line); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
@media (max-width: 760px) { .autoplay { position: static; grid-column: 1 / -1; justify-self: start; flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .autoplay__led, .autoplay__btn, .dock.is-blocked .dock__btn--main { animation: none !important; } }

/* Dock: autoplay held back by the browser */
.dock__foot { flex-wrap: wrap; row-gap: .5rem; }
.dock__hint { order: -1; flex-basis: 100%; display: flex; align-items: center; gap: .45rem; font: 500 var(--t-xs)/1.35 var(--font-sans); color: var(--hi); }
.dock__hint[hidden] { display: none; }
.dock__hint .i { width: 12px; height: 12px; fill: currentColor; flex: none; }
.dock.is-blocked .dock__btn--main { background: var(--accent); color: var(--accent-ink); animation: nudge 1.8s ease-out infinite; }

/* ── v4: tuner "Any" ────────────────────────────────────────────────── */
.fader__any { font: 600 .625rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; padding: .42rem .7rem; border-radius: var(--r-full); border: 1px solid var(--line-2); color: var(--paper-3); background: transparent; transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-2); }
.fader__any:hover { color: var(--paper); border-color: var(--line-3); }
.fader__any[aria-pressed="true"] { background: var(--c); color: var(--ink-0); border-color: transparent; box-shadow: 0 0 16px color-mix(in oklab, var(--c) 50%, transparent); }
.fader.is-any .fader__slot { opacity: .26; filter: saturate(0); }
.fader.is-any .fader__value { font-style: italic; color: var(--paper-2); }
.fader.is-any .fader__word { color: var(--c); }

/* ── v4: misc ───────────────────────────────────────────────────────── */
.portrait img { object-position: 50% 28%; }
.portrait-credit { margin-top: .9rem; }
.pb-sub { margin: 1.2rem 0 .2rem; padding-top: 1.1rem; border-top: 1px dashed var(--line-2); }
.palette__item .avatar img { animation: fade var(--dur-2) var(--ease-out); }

/* ── v5: pages change in place while music plays ────────────────────── */
html.is-navigating .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--brass) 70%, transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: navbar 1.1s var(--ease-out) infinite; }
html.is-navigating { cursor: progress; }
@keyframes navbar { from { background-position: -50% 0; } to { background-position: 150% 0; } }
#main:focus { outline: none; }

/* ── v5: queue ──────────────────────────────────────────────────────── */
.nav__count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: .4rem; padding: 0 5px; border-radius: var(--r-full); background: var(--accent); color: var(--accent-ink); font: 700 .625rem/1 var(--font-mono); vertical-align: 1px; }
.nav__count[hidden] { display: none; }
.queue-btn .i { stroke-width: 1.9; }
.queue-btn.is-on { color: var(--hi); border-color: var(--accent-line); background: linear-gradient(100deg, var(--accent-soft), transparent 80%), var(--ink-1); }

.queue-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: center; margin-bottom: 2.6rem; }
.queue-stack { position: relative; width: 300px; height: 230px; perspective: 900px; }
.queue-stack__sleeve { position: absolute; left: 40px; top: 30px; width: 150px; transform-origin: 50% 100%;
  transform: translate3d(calc(var(--i) * 30px), calc(var(--i) * -6px), calc(var(--i) * -70px)) rotateY(-26deg) rotateZ(calc(var(--i) * 2.5deg - 2deg));
  filter: brightness(calc(1 - var(--i) * .14)); box-shadow: 0 30px 40px -22px rgba(0,0,0,.95); border-radius: 4px; transition: transform var(--dur-3) var(--ease-out); }
.queue-stack:hover .queue-stack__sleeve { transform: translate3d(calc(var(--i) * 44px), calc(var(--i) * -10px), calc(var(--i) * -70px)) rotateY(-18deg) rotateZ(calc(var(--i) * 3.5deg - 3deg)); }
.queue-stack__sleeve--empty { aspect-ratio: 1; border: 1.5px dashed var(--line-3); background: repeating-linear-gradient(135deg, transparent 0 10px, rgb(var(--paper-rgb) / .03) 10px 11px); box-shadow: none; }
.queue__hint { display: inline-flex; align-items: center; gap: .35rem; }
.queue__list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.qitem { --lift: 0px; position: relative; display: grid; grid-template-columns: 22px 34px 64px minmax(0, 1fr) auto auto; gap: 1rem; align-items: center; padding: .85rem .6rem .85rem .2rem; border-bottom: 1px solid var(--line); background: var(--ink-0); transition: background var(--dur-1), opacity var(--dur-3), transform var(--dur-3) var(--ease-out); }
.qitem:hover { background: linear-gradient(90deg, var(--ink-1), var(--ink-0)); }
.qitem__grip { display: grid; place-items: center; height: 40px; color: var(--paper-4); cursor: grab; touch-action: none; border-radius: var(--r-xs); }
.qitem__grip:hover { color: var(--paper-2); background: var(--ink-2); }
.qitem.is-dragging { z-index: 5; transform: translateY(var(--lift)) scale(1.012); background: var(--ink-2); box-shadow: 0 24px 40px -18px rgba(0,0,0,.9), 0 0 0 1px var(--line-2); border-radius: var(--r); transition: background var(--dur-1), box-shadow var(--dur-1); }
.qitem.is-dragging .qitem__grip { cursor: grabbing; color: var(--hi); }
.qcheck { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-3); color: var(--accent-ink); transition: background var(--dur-2), border-color var(--dur-2), transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2); }
.qcheck:hover { border-color: var(--accent); transform: scale(1.08); box-shadow: 0 0 0 4px var(--accent-soft); }
.qcheck svg { width: 58%; height: 58%; stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset var(--dur-3) var(--ease-out) 60ms; }
.qcheck[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.qcheck[aria-pressed="true"] svg { stroke-dashoffset: 0; }
.qitem__art { display: block; width: 64px; }
.qitem__text { min-width: 0; display: grid; gap: .15rem; }
.qitem__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: fit-content; max-width: 100%; background: linear-gradient(currentColor, currentColor) 0 55% / 0 1.5px no-repeat; transition: background-size var(--dur-3) var(--ease-out), color var(--dur-2); }
.qitem__title:hover { color: var(--hi); }
.qitem__sub { font-size: var(--t-xs); color: var(--paper-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qitem__note { width: min(100%, 420px); margin-top: .15rem; padding: .15rem 0; border: 0; border-bottom: 1px dashed transparent; background: transparent; color: var(--brass); font: 500 1.3rem/1.15 var(--font-hand); transition: border-color var(--dur-1), color var(--dur-1); }
.qitem__note::placeholder { color: var(--paper-4); }
.qitem__note:hover { border-bottom-color: var(--line-2); }
.qitem__note:focus { outline: none; border-bottom-color: var(--accent); color: var(--paper); }
.qitem__note.is-saved { border-bottom-color: var(--valence); }
.qitem__note-done { color: var(--paper-3); font: 500 1.2rem/1.15 var(--font-hand); }
.qitem__when { white-space: nowrap; }
.qitem__actions { display: flex; align-items: center; gap: .5rem; }
.qitem__remove { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--paper-4); opacity: 0; transition: opacity var(--dur-1), color var(--dur-1), background var(--dur-1); }
.qitem:hover .qitem__remove, .qitem__remove:focus-visible { opacity: 1; }
.qitem__remove:hover { color: var(--paper); background: var(--ink-3); }
@media (hover: none) { .qitem__remove { opacity: 1; } }
/* checking off: the title gets struck through, then the row slips away */
.qitem.is-checking .qitem__title { background-size: 100% 1.5px; color: var(--paper-3); }
.qitem.is-checking { opacity: .45; transform: translateX(14px); transition-delay: 0s, .18s, .18s; }
.qitem.is-unchecking { opacity: .5; }
.qitem.is-leaving { opacity: 0; transform: translateX(-18px); }
.qitem.is-done { grid-template-columns: 34px 52px minmax(0, 1fr) auto auto; padding-left: .8rem; background: transparent; }   /* no grip column */
.qitem.is-done .qitem__art { width: 52px; filter: grayscale(.7) brightness(.8); }
.qitem.is-done .qitem__title { color: var(--paper-2); background-size: 100% 1.5px; }
.queue-empty { display: flex; align-items: center; gap: 1.4rem; padding: 1.6rem; border: 1px dashed var(--line-2); border-radius: var(--r-lg); margin-top: 1rem; }
.queue-empty[hidden] { display: none; }
.queue-empty .empty__disc { width: 64px; height: 64px; flex: none; }
.queue-empty > div:nth-child(2) { flex: 1; }
.queue-empty h3 { font-size: var(--t-lg); }
.queue-ideas__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.idea { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .7rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-1); }
.idea__art { display: block; width: 56px; }
.idea__text { min-width: 0; display: grid; gap: .2rem; }
.idea__text .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idea__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idea__title:hover { color: var(--hi); }
.queue-done[hidden] { display: none; }
@media (max-width: 760px) {
  .queue-head { grid-template-columns: 1fr; }
  .queue-stack { display: none; }
  .queue__hint { display: none; }
  .qitem { grid-template-columns: 20px 30px 48px minmax(0, 1fr) auto; gap: .65rem; }
  .qitem__art { width: 48px; }
  .qitem__when { display: none; }
  .qitem.is-done { grid-template-columns: 30px 44px minmax(0, 1fr) auto; padding-left: .4rem; }
  .qitem.is-done .qitem__art { width: 44px; }
}
@media (prefers-reduced-motion: reduce) { .queue-stack__sleeve, .qitem { transition: none; } }
/* With the player open, leave room to scroll the end of every page clear of it. */
body.has-dock #main { padding-bottom: calc(var(--dock-h, 0px) + 24px); }
@media (max-width: 640px) { body.has-dock #main { padding-bottom: calc(var(--dock-h, 0px) + 16px); } }

/* ==========================================================================
   Home
   ========================================================================== */
.greeting { margin: 1.6rem 0 -.4rem; font: 400 var(--t-lg)/1.3 var(--font-display); color: var(--paper-2); letter-spacing: -.01em; }
.greeting__aside { margin-left: .4rem; font: 450 var(--t-sm)/1 var(--font-sans); color: var(--paper-3); }
.greeting__aside:hover { color: var(--hi); }
.signoff { margin-top: .9rem; font-size: 1.45rem; color: var(--brass); }
.pullquote .signoff { font-style: normal; }
.upnext__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.upnext__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .85rem; align-items: center; padding: .65rem; border-radius: var(--r); border: 1px solid var(--line); transition: background var(--dur-1), border-color var(--dur-1); }
.upnext__item:hover { background: var(--ink-1); border-color: var(--line-2); }
.upnext__art { display: block; width: 64px; }
.upnext__text { min-width: 0; display: grid; gap: .1rem; font-size: var(--t-sm); }
.upnext__text b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upnext__text > span:not(.upnext__note) { color: var(--paper-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upnext__note { color: var(--brass); font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intro__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-bottom: 1.4rem; }
.intro__head h2 { font-size: var(--t-xl); max-width: 22ch; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 2.5rem; }
.community-line { margin: 4rem 0 1rem; padding: 1.6rem 0; border-top: 1px solid var(--line); color: var(--paper-3); font-size: var(--t-sm); text-align: center; }
@media (max-width: 900px) { .upnext__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .upnext__row { grid-template-columns: 1fr; } .upnext__item { grid-template-columns: 52px minmax(0, 1fr); } .upnext__art { width: 52px; } }

/* ==========================================================================
   Record page: actions, More menu, people you follow, reviews
   ========================================================================== */
.more { position: relative; }
.more__menu { position: absolute; top: calc(100% + 6px); left: 0; right: auto; min-width: 230px; z-index: 30; transform-origin: top left; }
.more__menu button, .more__menu a { display: flex; width: 100%; align-items: center; gap: .65rem; padding: .6rem .7rem; border-radius: var(--r-sm); font-size: var(--t-sm); color: var(--paper-2); text-align: left; }
.more__menu button:hover, .more__menu a:hover { background: var(--ink-3); color: var(--paper); }
.more__menu kbd { margin-left: auto; }
.friends__list { display: grid; gap: .55rem; }
.friends__list li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.friends__who { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; font-size: var(--t-sm); color: var(--paper-2); }
.friends__who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friends__who:hover { color: var(--paper); }
.friends .meta { margin-top: .6rem; }
.byline-tag { font: 550 .6875rem/1 var(--font-sans); color: var(--brass); padding: .25rem .45rem; border-radius: var(--r-xs); background: var(--brass-soft); }
.verified { display: inline-flex; align-items: center; gap: .3rem; color: var(--hi); }
.verified .i { width: 14px; height: 14px; }
.review__body.is-long:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden; }
.review__more { grid-column: 2; justify-self: start; margin-top: -.3rem; font-size: var(--t-sm); font-weight: 550; color: var(--hi); }
.review__more:hover { color: var(--accent-2); }
.review__subject b { display: block; font-weight: 580; }
.review__subject .meta { display: block; }
.review__subject-art { display: block; width: 40px; flex: none; }
.segmented--sm a, .segmented--sm button { padding: .34rem .75rem; }
.release-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.release-body { margin-top: 1rem; }
.section-head--bare { margin-bottom: 0; border: 0; }
.sound-legend { display: flex; gap: 1rem; align-items: center; font-size: var(--t-xs); color: var(--paper-3); }
.sound-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.sound-legend span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.sound-legend__e { --c: var(--energy); } .sound-legend__v { --c: var(--valence); } .sound-legend__d { --c: var(--density); }
.sync--block { margin: 1rem 0; }
.disc-label { padding: 1.2rem .6rem .6rem; font-size: var(--t-sm); color: var(--paper-3); }
.score--quiet { color: var(--paper-3); }
.sig-note { margin-top: 1.1rem; }
.empty-line { font-size: var(--t-sm); padding: .4rem 0 1rem; }

/* Touch screens have no right-click and little room: notes come from the record's More menu instead of the pad. */
/* Touch screens and small windows: the side pad gives way to one note to tear off, bottom left, above the
   tab bar (and above the player when it's open). Tap it, then tap where the note goes; tap it again to cancel. */
.note-fab { display: none; }
@media (hover: none) and (pointer: coarse), (max-width: 760px) {
  .note-pad { display: none !important; }
  .note-fab {
    --c: var(--note-butter);
    position: fixed; z-index: 70; left: max(14px, env(safe-area-inset-left, 0px)); bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 14px);
    width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border-radius: 3px;
    transform: rotate(-6deg); transition: transform var(--dur-2) var(--ease-spring), bottom .5s var(--ease-out);
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55)); -webkit-tap-highlight-color: transparent;
  }
  .note-fab__paper { position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(180deg, rgba(0, 0, 0, .08) 0 14%, transparent 14.5%), linear-gradient(135deg, transparent 78%, rgba(0, 0, 0, .18) 78.5%), var(--c); }
  .note-fab .i { position: relative; width: 20px; height: 20px; color: #2a2116; stroke-width: 2.4; }
  .note-fab__cancel { display: none; }
  .note-fab.is-armed { transform: rotate(0deg) scale(1.06); }
  .note-fab.is-armed .note-fab__add { display: none; }
  .note-fab.is-armed .note-fab__cancel { display: block; }
  .note-fab__count { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 10px; background: var(--ink-0); box-shadow: 0 0 0 1.5px var(--c); font: 600 11px/1 var(--font-mono); color: var(--paper); transform: rotate(6deg); }
  .note-fab:active { transform: rotate(-2deg) scale(.96); }
  .note-fab:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
}
@media (max-width: 760px) { body.has-dock .note-fab { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--dock-h, 0px) + 22px); } }
/* On a phone the actions wrap, and More usually lands near the right edge: open the menu leftwards. */
@media (max-width: 640px) { .more__menu { left: auto; right: 0; transform-origin: top right; } }

/* ==========================================================================
   Profile: stats line, favourite four
   ========================================================================== */
.profile-hero__actions { --gap: .5rem; }
.tab-body { margin-top: 2.25rem; }
.tab-body--narrow { max-width: 820px; }
.tab-body__action { margin-bottom: 1.5rem; }
.tab-tools { margin: 2rem 0 1.5rem; }
.taste-line { margin-bottom: 1.5rem; }
.tab-body .space { min-height: 420px; }
.list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 1.25rem; }
.diary-entry__text { min-width: 0; }
.diary-entry__text > a { display: block; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-row { display: flex; align-items: center; gap: .9rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.person-row b { font-weight: 580; }
.person-row .meta { display: block; }
.person-row .byline-tag, .person-row .verified { margin-left: .35rem; vertical-align: .1em; }
.textarea--short { min-height: 90px; }
.sheet__switches { --gap: 1.5rem; margin-top: 1.1rem; }
.profile-stats { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin-top: 1.25rem; font-size: var(--t-sm); color: var(--paper-3); }
.profile-stats b { color: var(--paper); font-weight: 600; font-variant-numeric: tabular-nums; }
.profile-stats a:hover { color: var(--paper); }
.fav4 { margin: .4rem 0 2.4rem; }
.fav4__title { font: 500 var(--t-sm)/1 var(--font-sans); color: var(--paper-3); margin-bottom: 1rem; }
/* Four sleeves leaning on a shelf, each a touch crooked, the way records actually stand. */
.fav4__row { display: grid; grid-template-columns: repeat(4, minmax(0, 156px)); gap: clamp(.7rem, 2vw, 1.5rem); padding: 0 .3rem 1.1rem; border-bottom: 3px solid var(--ink-4); box-shadow: 0 1px 0 var(--line); }
.fav4__slot { position: relative; display: block; transform: rotate(var(--r, 0deg)); transform-origin: 50% 100%; transition: transform var(--dur-2) var(--ease-out); filter: drop-shadow(0 14px 14px rgba(0,0,0,.55)); }
.fav4__slot:nth-child(1) { --r: -1.6deg; } .fav4__slot:nth-child(2) { --r: .9deg; } .fav4__slot:nth-child(3) { --r: -.6deg; } .fav4__slot:nth-child(4) { --r: 1.8deg; }
.fav4__slot:hover { transform: rotate(0deg) translateY(-5px); }
.fav4__slot--empty { aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: .45rem; border: 1.5px dashed var(--line-3); border-radius: 4px; color: var(--paper-3); font-size: var(--t-xs); filter: none; }
.fav4__slot--empty:hover { color: var(--hi); border-color: var(--accent-line); }
.fav4__change { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(11,10,8,.78); color: var(--paper); opacity: 0; transition: opacity var(--dur-1); }
.fav4__slot:hover .fav4__change, .fav4__change:focus-visible { opacity: 1; }
@media (hover: none) { .fav4__change { opacity: .9; } }
@media (max-width: 640px) { .fav4__change { width: 24px; height: 24px; top: 4px; right: 4px; } .fav4__change .i { width: 12px; height: 12px; } }
@media (max-width: 640px) {
  .fav4__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
  .profile-hero { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1rem; padding-block: 1.75rem 1.25rem; }
  .profile-hero .avatar--xl { --s: 72px; }
  .profile-hero h1 { font-size: var(--t-2xl); }
  .profile-hero__actions { grid-column: 1 / -1; }
}

/* ==========================================================================
   Settings
   ========================================================================== */
.flash { margin-bottom: 1.5rem; border-color: var(--accent-line); background: var(--accent-soft); }
.settings-profile { --gap: 1.25rem; align-items: start; }
.settings-profile__fields { min-width: min(260px, 100%); }
.settings-pair { --gap: 1rem; }
.settings-pair .field { margin: 1.1rem 0 0; min-width: min(200px, 100%); }
.settings-password { --gap: 1rem; align-items: end; }
.settings-password .field { margin-top: 0; min-width: min(200px, 100%); }
.form-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.25rem; }
.panel__desc { margin-top: .3rem; font-size: var(--t-sm); color: var(--paper-3); }
.panel__desc--spaced { margin: 0 0 1rem; }
.panel__copy { font-size: var(--t-sm); color: var(--paper-2); }
.panel__copy .sync { margin-right: .6rem; }
.lockbox--mod { margin-top: 1.25rem; }
.lockbox__chips { --gap: .5rem; margin-top: .6rem; }
.lockbox__note { margin-top: .6rem; }

/* ==========================================================================
   Small named pieces that used to be inline styles
   ========================================================================== */
.section-head--tight { margin-bottom: .6rem; }
.queue-head__tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.4rem; }
.score--display { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 380; }
.stat__bars { display: flex; align-items: end; gap: .7rem; }
.totw__by { font: 400 .6em/1 var(--font-sans); color: var(--paper-3); }
.totw__row { --gap: 1rem; margin-top: .9rem; }
.artist-search { width: min(320px, 80vw); }
.artist-tile__meta { display: block; margin-top: .25rem; }
.about__title { margin-bottom: 1rem; }
.meters--demo { margin-bottom: 1.5rem; max-width: 520px; }
.radius-out { min-width: 2.4em; text-align: right; }
.space--tuner { min-height: 520px; }
.tuner-results-head { margin-top: 1.5rem; }
.taste-line--lg { font-size: var(--t-lg); }
.tuner-results { margin-top: .5rem; }
.form-error { margin-bottom: 1rem; }
.auth-row { margin-top: 1.1rem; }
.auth-submit { width: 100%; margin-top: 1.5rem; justify-content: center; }
.auth-note { margin-top: 1rem; }
.demo-accounts__note { margin-bottom: .6rem; }
.demo-accounts__list { --gap: .4rem; }
.list-card__desc { margin-top: .35rem; font-size: var(--t-sm); color: var(--paper-3); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list-card__by { --gap: .5rem; margin-top: .8rem; }
.account__name { font-weight: 600; }
.account__meta { --gap: .5rem; margin-top: .35rem; }
.log-subject { --gap: 1rem; margin-bottom: 1.5rem; }
.log-subject__art { width: 64px; flex: none; }
.log-subject__kind { font-size: var(--t-sm); color: var(--paper-3); }
.log-subject__title { margin-top: .35rem; }
.log-subject__by { font-size: var(--t-sm); color: var(--paper-3); }
.log-when { --gap: 1.5rem; align-items: end; }
.log-when__date { flex: 1; min-width: 180px; }
.log-when__relisten { padding-bottom: .7rem; }
.log-score { margin-top: 1.5rem; }
.log-review { margin-top: 1.5rem; }
.new-list-row { margin-top: 1.25rem; }

/* ==========================================================================
   Your desk: the queue, this month, your numbers
   ========================================================================== */
.desk-head { margin-bottom: 2rem; }
.desk-stats { display: flex; flex-wrap: wrap; gap: .6rem 1.7rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.desk-stats a { display: grid; gap: .2rem; }
.desk-stats b { font: 360 var(--t-2xl)/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--paper); transition: color var(--dur-1); }
.desk-stats span { font-size: var(--t-xs); color: var(--paper-3); }
.desk-stats a:hover b { color: var(--hi); }
.desk-body { margin-top: .5rem; }
.desk .section-head { flex-wrap: wrap; align-items: center; row-gap: .8rem; }
.desk .section-head .queue-head__tools { margin-top: 0; }
.desk .queue-ideas__grid { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
.cal__day.is-first { font-size: 9px; letter-spacing: .02em; }
.desk .queue__hint { display: flex; flex-wrap: wrap; margin: -.1rem 0 1rem; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal__dow { padding-bottom: 2px; font-size: 10px; color: var(--paper-4); text-align: center; }
.cal__day { aspect-ratio: 1; display: grid; place-items: center; border-radius: 7px; background: var(--ink-2); font: 500 11px/1 var(--font-mono); color: var(--paper-4); font-variant-numeric: tabular-nums; }
.cal__day.lvl-1 { background: color-mix(in oklab, var(--accent) 30%, var(--ink-2)); color: var(--paper-2); }
.cal__day.lvl-2 { background: color-mix(in oklab, var(--accent) 58%, var(--ink-2)); color: var(--paper); }
.cal__day.lvl-3 { background: var(--accent); color: var(--accent-ink); }
.cal__day.is-today { box-shadow: 0 0 0 1.5px var(--paper); }
.cal__day.is-ahead { opacity: .4; }
.desk-log { margin-top: 1rem; }
.desk-top { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.desk-top li { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) auto; align-items: center; gap: .7rem; font-size: var(--t-sm); }
.desk-top a { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--paper-2); }
.desk-top a:hover { color: var(--paper); }
.desk-top__bar { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--brass) calc(var(--p) * 1%), var(--ink-3) 0); }
.desk-top__n { min-width: 1.5em; font: 500 var(--t-xs)/1 var(--font-mono); color: var(--paper-3); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .desk-stats { gap: .7rem 1.25rem; } .desk-stats b { font-size: var(--t-xl); } }
@media (max-width: 760px) { .desk .queue__hint { display: none; } }
/* The queue sits in the desk's main column, so it folds by the column's width rather than the window's. */
.desk-main { container-type: inline-size; }
@container (max-width: 640px) {
  .qitem { grid-template-columns: 20px 30px 48px minmax(0, 1fr) auto; gap: .65rem; }
  .qitem__art { width: 48px; }
  .qitem__when { display: none; }
  .qitem.is-done { grid-template-columns: 30px 44px minmax(0, 1fr) auto; padding-left: .4rem; }
  .qitem.is-done .qitem__art { width: 44px; }
}



/* ── Home: the chart's two lists, and "play these songs" ───────────────── */
.section-head__tools { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }
.ranked[hidden], .ranked__play[hidden] { display: none; }
.ranked__play { margin-top: 1rem; }

/* ── Home: the features rail (this week / now playing) ─────────────────── */
.feature { position: relative; }
.feature__rail { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: calc(var(--gutter) * -1); }
.feature__rail::-webkit-scrollbar { display: none; }
.feature__slide { flex: 0 0 100%; min-width: 0; box-sizing: border-box; padding-inline: var(--gutter); scroll-snap-align: start; overflow-x: clip; scroll-snap-stop: always; }
.feature__slide[hidden] { display: none; }
.feature__slide--now[aria-busy="true"] [data-now-body] { opacity: .55; transition: opacity .2s; }
[data-now-body] { transition: opacity .25s; }
.feature__slide--now .tt-record { animation-play-state: paused; }
.feature__slide--now.is-playing .tt-record { animation-play-state: running; }
.spread--now .score--mine { color: var(--paper-2); }
.spread--now .spread__by { flex-wrap: wrap; row-gap: .2rem; }
.spread__from { color: var(--paper-2); }
.spread__from:hover { color: var(--hi); }

.feature__arrow { position: absolute; top: 45%; z-index: 6; transform: translateY(-50%); width: 34px; height: 34px; background: color-mix(in oklab, var(--ink-2) 86%, transparent); backdrop-filter: blur(6px); }
.feature__arrow[hidden] { display: none; }
.feature__arrow--prev { left: calc(var(--gutter) * -1 + 2px); }
.feature__arrow--next { right: calc(var(--gutter) * -1 + 2px); }
@media (hover: none) and (pointer: coarse) { .feature__arrow { display: none; } }

.feature__dots { display: flex; justify-content: center; gap: .35rem; margin-top: 1rem; margin-bottom: -.4rem; position: relative; z-index: 6; }
.feature__dots[hidden] { display: none; }
.feature__dots button { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .85rem; border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 600; color: var(--paper-3); transition: color var(--dur-1), background var(--dur-1); }
.feature__dots button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; }
.feature__dots button:hover { color: var(--paper); }
.feature__dots button[aria-selected="true"] { background: var(--ink-3); color: var(--paper); }
.feature__dots button[aria-selected="true"]::before { opacity: 1; background: var(--accent); }
.feature__dots .is-new::before { animation: tt-live 1.2s ease-in-out 4; background: var(--accent); opacity: 1; }
@media (max-width: 640px) {
  .feature__dots { margin-top: .4rem; gap: .1rem; }
  .feature__dots button { padding: .6rem .55rem; }
  .feature__dots button span { display: none; }
}
.kicker .dot.dot--live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: tt-live 1.4s ease-in-out infinite; }
@keyframes tt-live { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .kicker .dot.dot--live, .feature__dots .is-new::before { animation: none; } }

/* ── Volume knob (player dock) ─────────────────────────────────────────── */
.knob { display: inline-flex; align-items: center; gap: .35rem; cursor: ns-resize; touch-action: none; user-select: none; border-radius: var(--r-full); padding: 1px 6px 1px 1px; color: var(--paper-3); }
.knob:hover, .knob:focus-visible { color: var(--paper); }
.knob__svg { width: 28px; height: 28px; overflow: visible; }
.knob__track { fill: none; stroke: var(--ink-4); stroke-width: 3; stroke-linecap: round; }
.knob__fill { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.knob__cap { fill: var(--ink-3); stroke: color-mix(in oklab, var(--paper) 22%, transparent); stroke-width: 1; }
.knob__tick { stroke: var(--paper); stroke-width: 2; stroke-linecap: round; }
.knob__val { font: 600 var(--t-xs)/1 var(--font-sans); min-width: 2.6ch; font-variant-numeric: tabular-nums; }
.knob.is-muted .knob__tick { stroke: var(--paper-4); }
.knob.is-off { cursor: help; opacity: .6; }
.knob.is-off .knob__tick { stroke: var(--paper-4); }
.knob.is-off .knob__val { font-weight: 500; }

/* ── Welcome ("Where do you listen?") and the apps list ────────────────── */
.welcome { max-width: 46rem; }
.welcome__form .pb__list { display: grid; gap: .7rem; }
.welcome__kicker { margin-top: .8rem; }
.welcome__note { margin-top: 1rem; }
.pb-row--app .pb-row__text > span { line-height: 1.5; }
.pb-row .link { white-space: nowrap; }
.chip--accent { background: var(--accent-soft); color: var(--hi); }

.ask { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin-top: 1rem; padding: .9rem 1.1rem; border-radius: var(--r-lg); border: 1px solid var(--accent-line); background: linear-gradient(100deg, var(--accent-soft), transparent 70%), var(--ink-1); }
.ask__text { display: grid; gap: .2rem; min-width: 0; flex: 1 1 22rem; }
.ask__text span { color: var(--paper-3); font-size: var(--t-sm); }
.ask__actions { display: flex; align-items: center; gap: .5rem; }
.more__sep { display: block; padding: .5rem .7rem .2rem; font-size: var(--t-xs); color: var(--paper-4); }
.more__mine { margin-left: auto; font-size: var(--t-xs); color: var(--hi); }
.listen-on .more__menu { min-width: 200px; }
@media (max-width: 640px) { .listen-on .more__menu { left: 0; right: auto; transform-origin: top left; max-width: calc(100vw - 24px); } }   /* it isn't the last button in the row, so it opens rightwards */

/* ── Dock: Spotify app mode ────────────────────────────────────────── */
.dock__stage[data-state="app"] .dock__msg { display: flex; }
.dock__app { display: inline-flex; align-items: center; gap: .3rem; font: inherit; color: var(--hi); font-weight: 560; }
.dock__app:hover { color: var(--accent-2); }
.dock__app .i { width: 12px; height: 12px; }
.dock__bar { display: block; height: 3px; border-radius: 2px; background: var(--ink-3); overflow: hidden; }
.dock__bar i { display: block; height: 100%; background: var(--accent); transition: width 1s linear; }
.dock__stage[data-state="app"] .dock__msg > span:not(.dock__links):not(.dock__bar) { color: var(--paper-3); }
.dock__listen { position: relative; }
.dock__listen .more__menu { top: auto; bottom: calc(100% + 8px); left: auto; right: 0; min-width: 180px; }
.dock__listen .dock__open { font: inherit; }

/* ── ⓘ explanation cards (scores and sound ratings) ───────────────── */
.info { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; color: var(--paper-4); vertical-align: middle; transition: color .15s, background .15s; }
.info .i { width: 15px; height: 15px; }
.info:hover, .info[aria-expanded="true"] { color: var(--hi); background: color-mix(in oklab, var(--accent) 14%, transparent); }
@media (pointer: coarse) { .info { width: 30px; height: 30px; margin: -4px -2px; } .info .i { width: 17px; height: 17px; } }
.kicker .info, .panel__label .info, .meter__label b .info { margin-inline-start: .15rem; }

.infocard {
  --c: var(--accent);
  position: fixed; inset: auto; margin: 0; z-index: 10100; width: 340px; max-height: min(78vh, 600px); overflow: auto;
  padding: 1.1rem 1.15rem 1rem; border-radius: 18px; border: 1px solid var(--line-2);
  background: var(--ink-1); color: var(--paper-2); font-size: var(--t-sm); line-height: 1.5; text-align: left;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.4);
  animation: infocard-in .16s ease-out;
}
.infocard:focus { outline: none; }
.infocard--energy { --c: var(--energy); } .infocard--valence { --c: var(--valence); } .infocard--density, .infocard--sound { --c: var(--density); }
.infocard__x { position: absolute; top: .5rem; right: .55rem; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; font-size: 20px; line-height: 1; color: var(--paper-3); }
.infocard__x:hover { color: var(--paper); background: var(--ink-3); }
.infocard__kicker { display: block; font: 500 var(--t-xs)/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--c); margin-bottom: .35rem; }
.infocard h4 { margin: 0 2rem .5rem 0; font: 500 var(--t-lg)/1.2 var(--font-display); color: var(--paper); }
.infocard__lede { margin: 0; color: var(--paper); }
.infocard__scale { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; margin: .95rem 0 .2rem; padding: 0; list-style: none; }
.infocard__scale li { display: grid; gap: .1rem; padding: .45rem .4rem .5rem; border-radius: 6px; background: var(--ink-3); border-top: 3px solid color-mix(in oklab, var(--c) calc((var(--i) + 1) * 100% / var(--n)), var(--ink-3)); }
.infocard__scale b { font: 500 var(--t-xs)/1.2 var(--font-mono); color: var(--paper); font-variant-numeric: tabular-nums; }
.infocard__scale span { font-size: 11px; line-height: 1.25; color: var(--paper-3); overflow-wrap: anywhere; }
.infocard__table { width: 100%; margin: .95rem 0 .2rem; border-collapse: collapse; font-size: var(--t-xs); }
.infocard__table th { text-align: left; font-weight: 500; color: var(--paper-3); padding: 0 0 .35rem; }
.infocard__table th + th, .infocard__table td + td { text-align: right; }
.infocard__table td { padding: .3rem 0; border-top: 1px solid var(--line); color: var(--paper); font-variant-numeric: tabular-nums; }
.infocard__points { margin: .9rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.infocard__points li { position: relative; padding-left: 1rem; color: var(--paper-2); text-wrap: pretty; }
.infocard__points li::before { content: ""; position: absolute; left: .1rem; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--c); }
.infocard__more { display: inline-block; margin-top: .9rem; font-weight: 560; color: var(--hi); }
.infocard__more:hover { color: var(--accent-2); }
@keyframes infocard-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .infocard { animation: none; } }
@media (max-width: 760px) {
  .infocard { left: 10px; right: 10px; top: auto; width: auto; bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom) + 10px); max-height: 70vh; }
}

/* ── v9: compact dock for Spotify, "A song's frequency", album strip under Now playing ───────────────────────
   Spotify's own player already shows the cover, title and artist, so with it on screen the dock drops its copy:
   "Play in the Spotify app" top left, × top right, the player, then the Spotify badge with back / pause / forward. */
.dock__app { align-self: start; justify-self: start; }
.dock.is-compact, .dock.is-app { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; column-gap: 6px; row-gap: 8px; align-items: center; }
.dock.is-compact .dock__head, .dock.is-compact .dock__meta, .dock.is-compact .dock__ctl,
.dock.is-app .dock__head, .dock.is-app .dock__meta, .dock.is-app .dock__ctl { display: contents; }
.dock.is-compact > .dock__app, .dock.is-app > .dock__app { order: 1; grid-column: 1 / 5; padding: .3rem 0; }
.dock.is-compact .dock__btn--close, .dock.is-app .dock__btn--close { order: 2; grid-column: 5; margin: 0; justify-self: end; }
.dock.is-compact .dock__sleeve, .dock.is-compact .dock__title, .dock.is-compact .dock__artist { display: none; }
.dock.is-app .dock__sleeve { order: 3; grid-column: 1; grid-row: span 2; margin-right: 6px; }
.dock.is-app .dock__title { order: 4; grid-column: 2 / -1; align-self: end; }
.dock.is-app .dock__artist { order: 5; grid-column: 2 / -1; align-self: start; }
.dock.is-compact .dock__stage, .dock.is-app .dock__stage { order: 6; grid-column: 1 / -1; }
.dock.is-compact .dock__preview, .dock.is-app .dock__preview { order: 7; grid-column: 1 / -1; }
.dock.is-compact .dock__src, .dock.is-app .dock__src { order: 8; grid-column: 1 / 3; margin: 0; justify-self: start; }
.dock.is-compact [data-dock="prev"], .dock.is-app [data-dock="prev"] { order: 9; grid-column: 3; }
.dock.is-compact [data-dock="toggle"], .dock.is-app [data-dock="toggle"] { order: 10; grid-column: 4; }
.dock.is-compact [data-dock="next"], .dock.is-app [data-dock="next"] { order: 11; grid-column: 5; }
.dock.is-compact .dock__foot, .dock.is-app .dock__foot { order: 12; grid-column: 1 / -1; }
.dock.is-compact .dock__src.is-spotify, .dock.is-app .dock__src.is-spotify { padding: .35rem .6rem; border-radius: var(--r-full); background: color-mix(in oklab, var(--valence) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--valence) 35%, transparent); }

.dock__freq { display: inline-flex; align-items: center; gap: .3rem; font: inherit; color: var(--paper-4); }
.dock__freq .i { width: 12px; height: 12px; }
.dock__freq[aria-pressed="true"] { color: var(--hi); }
.dock__freq:hover { color: var(--paper); }

.totw--album { margin-top: clamp(.75rem, .4rem + 1vw, 1.25rem); grid-template-columns: auto minmax(0, 1fr); }
.chip--mobile { background: color-mix(in oklab, var(--valence) 16%, transparent); color: var(--valence); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--valence) 38%, transparent); font-weight: 600; }

/* ── Genre shelves ───────────────────────────────────────────────────────
   A few quiet places to browse by genre. Wide screens: labels down the edges of the window and a shelf at the foot
   of the page. Narrower: every genre stands on the foot shelf. Spines take their tint from the theme. */
.shelves { margin-top: clamp(1rem, .5rem + 2vw, 2rem); padding-bottom: clamp(2.5rem, 1rem + 4vw, 4.5rem); }
/* One row on one board. On a phone the row slides sideways, like running a finger along a shelf. */
.shelf {
  display: flex; align-items: flex-end; gap: .4rem;
  padding: 12px .6rem 0;                      /* room above, so a spine can lift without being clipped */
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  border-bottom: 8px solid var(--ink-4); border-radius: 0 0 4px 4px;   /* the board the spines stand on */
  box-shadow: 0 16px 22px -14px rgba(0,0,0,.7);
}
.shelf::-webkit-scrollbar { display: none; }
.spine {
  --v: 0; --tint: var(--accent); flex: none;
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  padding: calc(.7rem + var(--v) * .4rem) .62rem;
  writing-mode: vertical-rl;
  font: 500 var(--t-xs)/1 var(--font-sans); letter-spacing: .03em; color: var(--paper-2);
  background: linear-gradient(90deg, color-mix(in oklab, var(--tint) 16%, var(--ink-2)), var(--ink-2) 70%);
  border: 1px solid var(--line-2); border-bottom: 0; border-radius: 3px 3px 0 0;
  box-shadow: inset 2px 0 0 color-mix(in oklab, var(--tint) 45%, transparent);
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-1), border-color var(--dur-1);
}
.spine:hover, .spine:focus-visible { transform: translateY(-7px); color: var(--paper); border-color: var(--line-3); }
.spine[aria-current="page"] { color: var(--paper); border-color: var(--accent-line); transform: translateY(-4px); }
.spine--all { writing-mode: horizontal-tb; align-self: flex-end; padding: .55rem .8rem; margin-left: auto; background: none; box-shadow: none; border-style: dashed; color: var(--paper-3); }
.spine--kind { --tint: var(--paper-3); color: var(--paper-3); }                                   /* kinds of record: quieter, no colour */
.spine--kind:hover, .spine--kind:focus-visible { color: var(--paper); }
.spine--first { margin-left: 1.1rem; }                                                           /* a little air between the kinds and the genres */

/* Edge rails: out in the margins, so only where the page leaves room for them. */
.rail { display: none; }
@media (min-width: 1560px) {
  .rail { position: fixed; top: 50%; z-index: 4; display: flex; flex-direction: column; gap: 1.75rem; padding: 1.5rem 0; transform: translateY(-50%); }
  .rail--left  { left: clamp(.75rem, 1.4vw, 2rem); border-left: 1px solid var(--line-2); padding-left: .9rem; }
  .rail--right { right: clamp(.75rem, 1.4vw, 2rem); border-right: 1px solid var(--line-2); padding-right: .9rem; }
  .rail__item {
    writing-mode: vertical-rl; font: 500 var(--t-xs)/1 var(--font-sans); letter-spacing: .06em; color: var(--paper-3);
    white-space: nowrap; transition: color var(--dur-1), transform var(--dur-2) var(--ease-out);
  }
  .rail--left .rail__item { transform: rotate(180deg); }          /* reads upwards, like a spine on the left */
  .rail__item:hover, .rail__item:focus-visible { color: var(--hi); }
  .rail--left .rail__item:hover { transform: rotate(180deg) translateY(-3px); }
  .rail--right .rail__item:hover { transform: translateY(3px); }
  .rail__item[aria-current="page"] { color: var(--paper); }
  .spine--edge { display: none; }                                  /* already on an edge */
}
@media (prefers-reduced-motion: reduce) { .spine, .rail__item { transition: none; } }

/* The genres page */
.genre-list { display: flex; flex-wrap: wrap; gap: .55rem .5rem; list-style: none; padding: 0; }
.genre-list .chip { height: 32px; padding: 0 .85rem; font-size: var(--t-sm); }
.genre-list__n { color: var(--paper-4); font-variant-numeric: tabular-nums; }

/* ── Admin inbox ──────────────────────────────────────────────────────── */
.mail-bar { margin-bottom: 1rem; }
.mail-back { margin-bottom: 1.25rem; }
.mail-list th.mail-list__dot, .mail-list td.mail-list__dot { width: 1.4rem; padding-right: 0; }
.mail-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.mail-list__from { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--paper-2); }
.mail-list tr.is-unread .mail-list__from, .mail-list tr.is-unread .link { color: var(--paper); font-weight: 600; }
.mail-setup { max-width: 46rem; }
.mail-setup p + p, .mail-setup p + .mail-setup__code { margin-top: 1rem; }
.mail-setup__code, .mail__body {
  font: 400 var(--t-sm)/1.6 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere;
  padding: 1rem 1.1rem; background: var(--ink-1); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--paper-2);
}
.mail-setup__notes { margin: 1rem 0 0; padding-left: 1.1rem; color: var(--paper-3); font-size: var(--t-sm); line-height: 1.7; }
.mail-setup code { font: 500 .92em var(--font-mono); color: var(--paper-2); }
.mail { max-width: 52rem; }
.mail__subject { font-size: var(--t-xl); margin-bottom: 1rem; }
.mail__head { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: 0 0 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.mail__head dt { color: var(--paper-4); }
.mail__head dd { margin: 0; color: var(--paper-2); overflow-wrap: anywhere; }
.mail__files { margin-bottom: 1rem; }
.mail__body { font-family: var(--font-sans); font-size: var(--t-base); color: var(--paper); margin-bottom: 1rem; }

/* ── Pin to a shelf ──────────────────────────────────────────────────────
   The pull-a-record icon, the picker, the quick look behind the side shelves, and personal shelves. */
.card__pin {
  position: absolute; top: .5rem; left: .5rem; z-index: 5;
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  color: var(--paper); background: rgba(10, 10, 10, .7); border: 1px solid var(--line-2); backdrop-filter: blur(6px);
  opacity: 0; transform: scale(.85);
  transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-spring), background var(--dur-1), color var(--dur-1);
}
.card:hover .card__pin, .card__pin:focus-visible, .card__pin.is-on { opacity: 1; transform: none; }
.card__pin:hover { background: var(--paper); color: var(--ink-0); }
.card__pin.is-on { color: var(--hi); border-color: var(--accent-line); }
@media (hover: none) { .card__pin { opacity: 1; transform: none; } }

.shelf-sheet { width: min(660px, calc(100% - 2rem)); }
.shelf-sheet__search { display: flex; align-items: center; gap: .6rem; margin: 1rem 1.5rem 0; padding: 0 .9rem; height: 42px; border: 1px solid var(--line-2); border-radius: var(--r-full); background: var(--ink-2); color: var(--paper-3); }
.shelf-sheet__search:focus-within { border-color: var(--accent-line); color: var(--paper); }
.shelf-sheet__search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: var(--t-sm); }
.shelf-sheet__body { max-height: min(58dvh, 520px); overflow-y: auto; overscroll-behavior: contain; }
.shelf-group + .shelf-group { margin-top: 1.5rem; }
.shelf-group__head { display: flex; align-items: baseline; justify-content: space-between; }
.shelf-group__head h3 { font: 600 var(--t-sm)/1.2 var(--font-sans); letter-spacing: 0; color: var(--paper-2); }
.shelf-group__note { margin-top: .5rem; font-size: var(--t-xs); color: var(--paper-3); line-height: 1.5; }
.shelf-group__more { margin-top: .7rem; font-size: var(--t-xs); }
.shelf-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; }
.shelf-chip {
  display: inline-flex; align-items: center; gap: .4rem; height: 30px; padding: 0 .8rem;
  border: 1px solid var(--line-2); border-radius: var(--r-full); background: var(--ink-2);
  font: 500 var(--t-xs)/1 var(--font-sans); color: var(--paper-2); white-space: nowrap;
  transition: border-color var(--dur-1), color var(--dur-1), background var(--dur-1), transform var(--dur-1);
}
.shelf-chip small { color: var(--paper-4); font-variant-numeric: tabular-nums; }
.shelf-chip:hover:not(:disabled) { border-color: var(--line-3); color: var(--paper); }
.shelf-chip:active:not(:disabled) { transform: scale(.96); }
.shelf-chip.is-on { color: var(--hi); border-color: var(--accent-line); background: var(--accent-soft); }
.shelf-chip:disabled { opacity: .45; cursor: not-allowed; }
.shelf-new { display: flex; gap: .5rem; margin-top: .8rem; }
.shelf-new input { flex: 1; min-width: 0; height: 32px; padding: 0 .8rem; border: 1px solid var(--line-2); border-radius: var(--r-full); background: var(--ink-1); font-size: var(--t-xs); }
.shelf-new input:focus { outline: 0; border-color: var(--accent-line); }
.shelf-new.is-busy { opacity: .6; pointer-events: none; }

/* Quick look behind a side shelf: folds out from the edge of the window. */
.peek {
  position: fixed; z-index: 70; width: 300px; padding: .9rem; border-radius: var(--r);
  background: var(--ink-2); border: 1px solid var(--line-2); box-shadow: var(--shadow-3);
  opacity: 0; transform: translateX(var(--from, -16px)) scale(.94); pointer-events: none;
  transition: opacity .18s, transform .3s var(--ease-out);
}
.peek--left { --from: -18px; transform-origin: left center; }
.peek--right { --from: 18px; transform-origin: right center; }
.peek.is-in { opacity: 1; transform: none; pointer-events: auto; }
.peek__head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .7rem; }
.peek__head b { font: 500 var(--t-md)/1.2 var(--font-display); }
.peek__open { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--t-xs); color: var(--hi); }
.peek__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.peek__rec { position: relative; display: block; transition: transform .3s var(--ease-out); animation: peek-in .38s var(--ease-out) backwards; animation-delay: calc(var(--n, 0) * 45ms + 70ms); }
.peek__rec:hover { transform: translateY(-4px) rotate(-1.5deg); }
.peek__pin { position: absolute; right: 3px; bottom: 3px; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: var(--ink-0); color: var(--hi); box-shadow: 0 0 0 1px var(--line-3); }
.peek__sk { display: block; aspect-ratio: 1; border-radius: 3px; }
.peek__foot { margin-top: .7rem; font-size: var(--t-xs); line-height: 1.45; color: var(--paper-3); }
@keyframes peek-in { from { opacity: 0; transform: translateY(10px) scale(.94); } }
@media (prefers-reduced-motion: reduce) { .peek, .peek__rec { transition: none; animation: none; } }

/* Your own shelves on your profile: records stood up on a board; pull one out to look at it. */
.my-shelves__new { display: flex; gap: .5rem; align-items: center; }
.my-shelves__new .input { height: 32px; width: min(220px, 42vw); font-size: var(--t-xs); }
.my-shelves__empty { max-width: 52ch; }
.board { margin-top: 2.4rem; }
.board__head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .7rem; }
.board__title { font-size: var(--t-lg); }
.board__tools { margin-left: auto; display: flex; gap: .9rem; font-size: var(--t-xs); color: var(--paper-3); }
.board__row { display: flex; align-items: flex-end; gap: .6rem; min-height: 140px; padding: 16px .9rem 0; overflow-x: auto; scrollbar-width: none; perspective: 800px; }
.board__row::-webkit-scrollbar { display: none; }
.board__rec { position: relative; flex: none; width: clamp(84px, 9vw, 118px); transform-origin: 50% 100%; transform: rotateY(-12deg); transition: transform .35s var(--ease-out); }
.board__rec:nth-child(3n) { transform: rotateY(-12deg) rotate(1.4deg); }
.board__rec:nth-child(4n+2) { transform: rotateY(-12deg) rotate(-.8deg); }
.board__rec:hover, .board__rec:focus-within { transform: translateY(-14px) rotateY(0) rotate(0); z-index: 2; }
.board__rec .sleeve { box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 12px 14px -10px rgba(0,0,0,.9); }
.board__take { position: absolute; top: -8px; right: -6px; z-index: 3; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ink-0); color: var(--paper-2); box-shadow: 0 0 0 1px var(--line-3); opacity: 0; transition: opacity var(--dur-1); }
.board__rec:hover .board__take, .board__take:focus-visible { opacity: 1; }
.board__take:hover { color: var(--paper); }
@media (hover: none) { .board__take { opacity: 1; } }
.board__empty { align-self: center; padding: 1.2rem 0; font-size: var(--t-sm); color: var(--paper-4); }
.board__plank { height: 14px; border-radius: 0 0 5px 5px; border-top: 2px solid var(--line-3); background: linear-gradient(var(--ink-4), var(--ink-2)); box-shadow: 0 18px 24px -14px rgba(0,0,0,.75); }
@media (prefers-reduced-motion: reduce) { .board__rec { transition: none; } }