/* =========================================================================
   TuneZ - styles
   The brand gradient runs from Spotify green through teal and violet to Apple Music pink,
   the same colors as the Z-wave logo (static/img/logo.svg).
   ========================================================================= */

:root {
  /* Brand colors */
  --green: #16a34a;
  --spotify: #1ed760;
  --teal: #0d9488;
  --violet: #7c3aed;
  --pink: #db2777;
  --apple: #fa2d48;
  --soundcloud: #ff5500;
  --orange: #ea580c;
  --amber: #d97706;

  --grad-brand: linear-gradient(100deg, #1ed760 0%, #14b8a6 30%, #8b5cf6 65%, #fa2d48 100%);
  --grad-primary: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
  --grad-spotify: linear-gradient(135deg, #2ee06d 0%, #17b852 100%);
  --grad-apple: linear-gradient(135deg, #fb4a63 0%, #e11d48 100%);
  --grad-soundcloud: linear-gradient(135deg, #ff7a1a 0%, #f23c00 100%);

  /* Surfaces & text */
  --bg: #f5f3ff;
  --blob-1: rgba(30, 215, 96, 0.20);
  --blob-2: rgba(139, 92, 246, 0.20);
  --blob-3: rgba(250, 45, 72, 0.16);
  --surface: rgba(255, 255, 255, 0.86);
  --surface-solid: #ffffff;
  --field: #f4f1fd;
  --text: #1b1535;
  --muted: #645e80;
  --border: rgba(76, 52, 160, 0.13);
  --shadow: 0 1px 2px rgba(40, 20, 100, 0.05), 0 12px 32px rgba(60, 30, 140, 0.09);
  --ring: rgba(124, 58, 237, 0.35);

  --error: #b91c1c;
  --error-bg: #fdecec;
  --notice: #166534;
  --notice-bg: #e3f8ea;

  --radius: 20px;
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --green: #4ade80;
    --teal: #2dd4bf;
    --violet: #a78bfa;
    --pink: #f472b6;
    --orange: #fb923c;
    --amber: #fbbf24;

    --bg: #0b0918;
    --blob-1: rgba(30, 215, 96, 0.16);
    --blob-2: rgba(139, 92, 246, 0.24);
    --blob-3: rgba(250, 45, 72, 0.16);
    --surface: rgba(22, 18, 44, 0.80);
    --surface-solid: #16122c;
    --field: #1f1a3c;
    --text: #f4f1ff;
    --muted: #a8a1c7;
    --border: rgba(255, 255, 255, 0.09);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.35);
    --ring: rgba(167, 139, 250, 0.45);

    --error: #fca5a5;
    --error-bg: #3b1520;
    --notice: #86efac;
    --notice-bg: #0f2e1c;
  }
}

* { box-sizing: border-box; }

/* Make sure anything marked "hidden" stays hidden, even if it has its own display style. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 16px/1.55 var(--font-body);
  background:
    radial-gradient(38rem 30rem at -5% -5%, var(--blob-1), transparent 65%),
    radial-gradient(36rem 30rem at 105% 5%, var(--blob-3), transparent 65%),
    radial-gradient(50rem 40rem at 50% 110%, var(--blob-2), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
main.narrow { max-width: 560px; }

h1, h2 { font-family: var(--font-display); letter-spacing: -0.01em; }
h2 { margin: 0; font-size: 19px; line-height: 1.25; }
a { color: var(--violet); }
.muted { color: var(--muted); }
.small-print { font-size: 14px; margin: 0 0 10px; }

.icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  vertical-align: -0.18em;
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
  align-items: center;
  padding: 24px;
  margin-bottom: 16px;
  border-radius: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* A thin rainbow line along the top edge */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--grad-brand);
}
.hero-compact { grid-template-columns: 1fr; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 48px; height: 48px; border-radius: 14px; box-shadow: 0 6px 18px rgba(124, 58, 237, 0.3); }
.wordmark {
  margin: 0;
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 800;
  line-height: 1.05;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The big "Listen together." headline - the star of the hero */
.slogan {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 7vw, 54px);
  line-height: 1;
  letter-spacing: -0.02em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tagline { margin: 12px 0 0; font-size: 17px; color: var(--muted); }
.hl-green { color: var(--green); font-weight: 700; }
.hl-pink { color: var(--apple); font-weight: 700; }
.hl-orange { color: #e04a00; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .hl-pink { color: #ff6b81; }
  .hl-orange { color: #ff8a3d; }
}

.steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}
.steps li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: var(--field);
  border: 1px solid var(--border);
}
.step-num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.steps li:nth-child(1) .step-num { background: var(--grad-spotify); color: #052e14; }
.steps li:nth-child(2) .step-num { background: var(--grad-primary); }
.steps li:nth-child(3) .step-num { background: var(--grad-apple); }

/* The artwork. If hero.webp is missing, the gradient art underneath shows instead. */
.hero-art {
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  background:
    url("img/hero.webp") center / cover no-repeat,
    radial-gradient(circle at 25% 60%, rgba(30, 215, 96, 0.9), transparent 45%),
    radial-gradient(circle at 78% 40%, rgba(250, 45, 72, 0.85), transparent 45%),
    radial-gradient(circle at 50% 20%, rgba(139, 92, 246, 0.9), transparent 55%),
    #1a1236;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

/* A soft glow that breathes behind the artwork */
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(167, 139, 250, 0.75), rgba(236, 72, 153, 0.35) 40%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.35;
  pointer-events: none;
  animation: glow-pulse 4s ease-in-out infinite alternate;
}
@keyframes glow-pulse {
  from { opacity: 0.35; }
  to { opacity: 0.7; }
}

/* Little equalizer bars bouncing along the bottom of the artwork.
   Kept low so they sit on the rooftop edge in hero.webp, below the friends. */
.eq {
  position: absolute;
  inset: auto 12px 10px 12px;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 12%;
}
.eq span {
  flex: 1;
  height: 100%;
  border-radius: 4px 4px 2px 2px;
  background: rgba(255, 255, 255, 0.75);
  transform-origin: bottom;
  animation: eq-bounce 1.1s ease-in-out infinite alternate;
}
/* Each bar starts at its own height and time, so they don't move together */
.eq span:nth-child(1) { height: 55%; animation-delay: 0s; }
.eq span:nth-child(2) { height: 85%; animation-delay: -0.45s; }
.eq span:nth-child(3) { height: 65%; animation-delay: -0.15s; }
.eq span:nth-child(4) { height: 100%; animation-delay: -0.75s; }
.eq span:nth-child(5) { height: 70%; animation-delay: -0.3s; }
.eq span:nth-child(6) { height: 90%; animation-delay: -0.9s; }
.eq span:nth-child(7) { height: 50%; animation-delay: -0.6s; }
@keyframes eq-bounce {
  from { transform: scaleY(0.25); }
  to { transform: scaleY(1); }
}

/* The hero text fades up one piece after another when the page opens */
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.brand, .slogan, .tagline, .steps { animation: rise 0.6s ease-out both; }
.slogan { animation-delay: 0.08s; }
.tagline { animation-delay: 0.16s; }
.steps { animation-delay: 0.24s; }

/* On share and invite links the hero is shorter, so the playlist card stays near the top */
.hero-short { padding: 18px 20px; grid-template-columns: 1fr; }
.hero-short .hero-art,
.hero-short .steps { display: none; }
.hero-short .slogan { font-size: clamp(26px, 5vw, 34px); }

@media (max-width: 620px) {
  .hero { grid-template-columns: 1fr; padding: 20px; }
  .hero-art { aspect-ratio: 16 / 9; order: -1; }
}

/* --- Top navigation: Playlists / Friends -------------------------------- */

.nav-tabs {
  display: flex;
  gap: 4px;
  padding: 5px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.nav-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 10px 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.nav-tab:hover { color: var(--text); }
.nav-tab { position: relative; min-width: 0; }
.tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Phones: five tabs on one row, each an icon over a short label. */
@media (max-width: 620px) {
  .nav-tabs { gap: 2px; padding: 4px; border-radius: 20px; }
  .nav-tab { flex-direction: column; gap: 2px; padding: 7px 2px; border-radius: 16px; font-size: 12px; }
  .nav-tab .icon { width: 20px; height: 20px; }
  .nav-tab .badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; line-height: 18px; font-size: 11px; }
}
.nav-tab.active {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35);
}

.badge {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--grad-apple);
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

/* --- Cards --------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
/* Cards that need attention get a rainbow border */
.card.glow {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box,
    var(--grad-brand) border-box;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.push-right { margin-left: auto; white-space: nowrap; }

/* Colored icon squares next to each section title */
.chip {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  flex-shrink: 0;
  color: var(--chip);
  background: color-mix(in srgb, var(--chip) 15%, transparent);
}
.chip .icon { width: 19px; height: 19px; }
.chip-green { --chip: var(--green); }
.chip-teal { --chip: var(--teal); }
.chip-violet { --chip: var(--violet); }
.chip-pink { --chip: var(--pink); }
.chip-orange { --chip: var(--orange); }
.chip-amber { --chip: var(--amber); }

/* --- Connected services ---------------------------------------------------- */

.service-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.service-row + .service-row { border-top: 1px solid var(--border); }
.service-info { flex: 1; min-width: 0; }
.service-info span { display: block; font-size: 14px; }
.service-mark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.service-mark.spotify { background: var(--spotify); box-shadow: 0 0 0 4px rgba(30, 215, 96, 0.18); }
.service-mark.apple { background: var(--apple); box-shadow: 0 0 0 4px rgba(250, 45, 72, 0.18); }
.service-mark.soundcloud { background: var(--soundcloud); box-shadow: 0 0 0 4px rgba(255, 85, 0, 0.18); }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 11px 20px;
  font: inherit;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn.small { padding: 7px 15px; font-size: 14px; }
.btn.primary { background: var(--grad-primary); box-shadow: 0 6px 16px rgba(124, 58, 237, 0.3); }
.btn.spotify { background: var(--grad-spotify); color: #052e14; box-shadow: 0 6px 16px rgba(30, 215, 96, 0.25); }
.btn.apple { background: var(--grad-apple); box-shadow: 0 6px 16px rgba(250, 45, 72, 0.25); }
.btn.soundcloud { background: var(--grad-soundcloud); box-shadow: 0 6px 16px rgba(255, 85, 0, 0.25); }
.btn.outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.link-button {
  border: 0;
  padding: 0;
  background: none;
  color: var(--violet);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

:is(button, input, select, a):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* --- Send tabs ------------------------------------------------------------ */

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tab {
  border: 1px solid var(--border);
  background: var(--field);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.active { color: #fff; border-color: transparent; background: var(--grad-primary); } /* service tabs override below */
.tab.active[data-tab="spotify"] { background: var(--grad-spotify); color: #052e14; }
.tab.active[data-tab="apple"],
.tab.active[data-tab="apple_link"] { background: var(--grad-apple); }
.tab.active[data-tab="soundcloud"],
.tab.active[data-tab="soundcloud_link"] { background: var(--grad-soundcloud); }
.tab.active[data-profile-tab],
.tab.active[data-song-sort] { background: var(--grad-primary); }
a.song-title { color: inherit; text-decoration: none; }
a.song-title:hover { text-decoration: underline; }
.back-row { margin: 0 0 10px; }
.nav-tabs { scroll-margin-top: 64px; } /* stays clear of the sticky top bar when scrolled to */
#song-page .song-card { padding: 14px; }
#song-page .song-art { width: 96px; height: 96px; }
#song-page .song-title { font-size: 19px; white-space: normal; }
#song-composer textarea { margin-top: 8px; }

/* --- Form fields ----------------------------------------------------------- */

select, input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--field);
  color: var(--text);
  font: inherit;
}
select:disabled { color: var(--muted); }
.field-label { display: block; margin: 18px 0 6px; font-size: 14px; font-weight: 700; }
.hint { margin-top: 8px; }

.inline-form { display: flex; gap: 8px; }
.inline-form input { flex: 1; min-width: 0; }

.share-row { display: flex; gap: 8px; }
.share-row input { flex: 1; min-width: 0; }

/* --- Background vibe picker ------------------------------------------------ */
/* Each swatch is a tiny still preview of the looks in "Playlist vibes" below. */

.vibe-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
}
.swatch[aria-checked="true"] { border-color: var(--surface-solid); box-shadow: 0 0 0 3px var(--ring); }
.swatch[data-theme="auto"] { width: auto; padding: 0 12px; border-radius: 999px; font-size: 13px; }
.swatch[data-theme="tunesy"] { background: var(--grad-brand); }
.swatch[data-theme="lofi"] { background: linear-gradient(135deg, #a78bfa, #5eead4); }
.swatch[data-theme="neon"] { background: linear-gradient(115deg, #07061a 40%, #ec4899 45%, #07061a 50%, #22d3ee 55%, #07061a 60%); }
.swatch[data-theme="vinyl"] { background: radial-gradient(circle, #ea580c 0 18%, #2a1608 20% 100%); }
.swatch[data-theme="hiphop"] { background: radial-gradient(circle, #facc15 0 30%, #0b0904 70%); }
.swatch[data-theme="rock"] { background: linear-gradient(160deg, #dc2626, #0d0506 70%); }
.swatch[data-theme="chill"] { background: linear-gradient(135deg, #7dd3fc, #99f6e4); }
.vibe-line { margin-top: 12px !important; }
.vibe-line + .vibe-picker { margin-top: 4px; }

/* --- Songs & results ------------------------------------------------------- */

.song-list { margin: 10px 0 0; padding-left: 24px; font-size: 15px; }
.song-list li { margin: 3px 0; padding-left: 4px; }
.song-list li::marker { color: var(--violet); font-weight: 700; }
.song-list .artist { color: var(--muted); }

/* --- Sending songs to friends ------------------------------------------------------ */

.song-row { align-items: flex-start; }
.song-row .row-text { display: flex; flex-direction: column; gap: 6px; }
.song-note { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.send-song {
  margin: 8px 0 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--field);
  border: 1px solid var(--border);
}
.friend-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.add-to-playlist { display: flex; flex-direction: column; gap: 8px; }
.add-to-playlist .actions { margin-top: 0; }
.add-result .song-search { margin-top: 6px; }
.friend-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  font-size: 14px;
  cursor: pointer;
}
.friend-pick input { width: auto; margin: 0; accent-color: var(--violet); }
.send-song .actions { margin-top: 6px; align-items: center; }

/* --- Listening now ------------------------------------------------------------------ */

.listening-card { flex: 0 0 min(260px, 80vw); scroll-snap-align: start; }
.listening-label { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; font-weight: 700; }
.listening-label.spotify { color: var(--green); }
.listening-label.apple { color: var(--apple); }
.now-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--spotify);
  animation: now-pulse 1.6s ease-in-out infinite;
}
@keyframes now-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30, 215, 96, 0.5); }
  50% { box-shadow: 0 0 0 5px rgba(30, 215, 96, 0); }
}
#share-listening .switch + .switch { margin-top: 12px; }

/* --- Song of the day --------------------------------------------------------------- */

.picks-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.pick { flex: 0 0 min(260px, 80vw); scroll-snap-align: start; }
.pick-who { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.pick-who .avatar { width: 28px; height: 28px; font-size: 11px; }
.pinned-song { margin-top: 14px; }
.pinned-song .small-print { margin: 0 0 6px; }

/* --- Chats -------------------------------------------------------------------------- */

.chat-row { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.chat-row .row-text { flex: 1; }
.chat-row.unseen strong::after { content: none; }
.streak-tag { font-weight: 600; font-size: 13px; color: var(--amber); }
.chat-head { flex-wrap: wrap; }
.chat-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.streak {
  border: 1px solid color-mix(in srgb, var(--amber) 50%, transparent);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  color: var(--amber);
  border-radius: 999px;
  padding: 3px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent);
}
.chat-members { padding: 10px 0 4px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.chat-scroll { max-height: min(60vh, 520px); overflow-y: auto; padding: 4px 2px; }
.chat-messages { display: flex; flex-direction: column; gap: 8px; }
.bubble {
  max-width: 85%;
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: 16px 16px 16px 4px;
  background: var(--field);
  border: 1px solid var(--border);
}
.bubble.mine {
  align-self: flex-end;
  border-radius: 16px 16px 4px 16px;
  background: color-mix(in srgb, var(--violet) 14%, var(--field));
}
.bubble-who { display: block; font-size: 12px; font-weight: 700; color: var(--violet); }
.bubble-text { margin: 2px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble .song-card { margin: 4px 0; background: var(--surface-solid); }
.bubble-time { display: block; font-size: 11px; color: var(--muted); text-align: right; }
.chat-system { align-self: center; margin: 4px 0; font-size: 13px; color: var(--muted); text-align: center; }
.chat-jump { display: block; margin: 8px auto 0; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.chat-form textarea { flex: 1; min-width: 0; resize: none; }
#chat-song-chosen { margin-top: 8px; }
@media (max-width: 480px) {
  .chat-form { flex-wrap: wrap; }
  .chat-form textarea { flex-basis: 100%; }
  .chat-form .btn { flex: 1; }
}

/* --- Feed and posts --------------------------------------------------------------- */

.post-list { display: flex; flex-direction: column; gap: 12px; }
.post {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.post.reply { padding: 10px 12px; box-shadow: none; background: var(--field); }
.post-head { display: flex; align-items: center; gap: 10px; }
.post-head .row-text { flex: 1; min-width: 0; }
.post-head .detail { display: block; font-size: 13px; color: var(--muted); }
.post-head a { color: inherit; text-decoration: none; }
.post-head a:hover { text-decoration: underline; }
.reposted-by { margin: 0 0 8px; }
.post-body { margin: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.post .song-card { margin-bottom: 10px; }
.post-images.count-1 { grid-template-columns: 1fr; }
.post-images.count-1 img { aspect-ratio: 4 / 3; }
.post-image { position: relative; padding: 0; border: 0; background: none; cursor: zoom-in; }
.post-image img { display: block; }
.remove-photo {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.post-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.post-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--field);
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.post-action:hover { color: var(--text); }
.post-action.active { color: var(--pink); border-color: color-mix(in srgb, var(--pink) 40%, transparent); }
.post-action .count:empty { display: none; }
.replies { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.reply-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.composer textarea { margin-top: 12px; }

/* Comments on songs and artists (plan 062) */
.comments-card { scroll-margin-top: 84px; } /* clear of the top bar when 💬 jumps here */
.comments-card .tabs { margin-top: 14px; }
.comment-composer .actions { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.comment-composer .small-print { margin: 6px 0 0; }
.check-row { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check-row input { width: 18px; height: 18px; margin: 0; }
.debated-badge {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pink) 14%, transparent);
  color: var(--pink);
  font-size: 12px;
  font-weight: 700;
}
.post-action.vote.active[aria-label="Dislike"] { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, transparent); }
.post-action:disabled { cursor: default; opacity: 0.7; }
.song-comments-link { margin-left: 10px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.song-comments-link:hover { color: var(--text); }
.song-top-take {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
  padding: 6px 10px;
  border: 0;
  border-left: 3px solid var(--pink);
  border-radius: 0 10px 10px 0;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.song-top-take .take-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-style: italic;
}
.song-top-take .take-meta { color: var(--muted); font-size: 12px; }
.song-activity { color: var(--muted); font-size: 12px; white-space: nowrap; }  /* plan 064 */

/* ---- Ratings, 0 to 10 (plan 068) ---- */
.rating-average { margin: 0 0 6px; font-size: 15px; }
.rating-average strong { font-size: 28px; font-family: var(--font-display); }
.rating-yours { margin: 12px 0 4px; font-weight: 700; }
.rating-picker { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.rating-value { align-self: center; font-family: var(--font-display); font-size: 44px; font-weight: 800; line-height: 1;
                font-variant-numeric: tabular-nums; }
.rating-frame { position: relative; }
.rating-strip {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--field);
  cursor: ew-resize;
  touch-action: pan-x;
}
.rating-strip::-webkit-scrollbar { display: none; }
.rating-strip:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.rating-ruler {
  box-sizing: content-box;
  width: 4000px;            /* 4 px per 0.01, see RATING_STEP_PX */
  padding: 0 50%;           /* so 0 and 10 can both reach the centre line */
}
.rating-scale {
  position: relative;
  width: 4002px;            /* one more tick at 10 */
  height: 56px;
  background:
    linear-gradient(to right, var(--muted) 2px, transparent 2px) 0 0 / 400px 26px repeat-x,
    linear-gradient(to right, var(--border) 1px, transparent 1px) 0 0 / 40px 14px repeat-x;
}
.rating-label { position: absolute; bottom: 6px; transform: translateX(-50%); font-size: 13px; font-weight: 700;
                color: var(--muted); }
.rating-label.half { font-size: 10px; font-weight: 500; opacity: 0.75; }
.rating-marker { position: absolute; top: -4px; bottom: -4px; left: 50%; width: 3px; margin-left: -1px;
                 border-radius: 2px; background: var(--pink); pointer-events: none; }
.rating-hint { margin: 0; text-align: center; }
.score-badge { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- Shelves on profiles (plan 069) ---- */
.shelf-sort { margin-bottom: 4px; }
.shelf { margin-top: 18px; }
.shelf-title { margin: 0 0 8px; font-size: 17px; }
.shelf-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.album-tile {
  flex: 0 0 132px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
}
.album-art { width: 132px; height: 132px; border-radius: 10px; object-fit: cover; background: var(--field); }
.album-art-empty { display: grid; place-items: center; font-size: 36px; color: #fff; background: var(--grad-primary); }
.album-name { margin-top: 6px; font-weight: 700; font-size: 14px; line-height: 1.25; overflow: hidden;
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.album-artist { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.album-meta { font-size: 12px; font-weight: 700; }
.shelf-open { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.shelf-open-title { margin: 0; font-weight: 700; }

/* ---- Accounts (plan 067) ---- */
.account-form { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.account-form .field-label { margin-top: 6px; }
.account-form > .btn { align-self: flex-start; margin-top: 8px; }
.account-form + .account-form { margin-top: 18px; }
.password-row { display: flex; align-items: center; gap: 8px; }
.password-row input { flex: 1; min-width: 0; }
.confirm-banner {
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--notice);
  border-radius: 12px;
  background: var(--surface);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.account-link { max-width: 460px; margin: 40px auto; }
.account-link-title { font-size: 26px; margin: 18px 0 8px; }

/* ---- Discover (plan 066), in the owner's Higgsfield look (plan 074) ----
   Like the video: the artwork fills each card and drifts slowly, the words sit in the middle, a dot pager on the right,
   a round play button in the corner, and a mini player above the tab bar. Colours come from the site's tokens. */
body[data-showing="discover"] .ad-banner,
body[data-showing="discover"] .footer { display: none; }
body:not([data-showing="discover"]) .discover-strip { display: none; }  /* the strip is for Discover only */
.discover-strip {
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  font-size: 14px;
}
.discover-strip a { font-weight: 700; color: var(--accent); }
.discover-head { max-width: 480px; margin: 0 auto 10px; }
.discover-page-title { margin: 0 0 6px; font-family: var(--font-display); font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.discover-mixes { display: flex; gap: 22px; }
.discover-mix {
  padding: 6px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.discover-mix:hover { color: var(--text); }
.discover-mix.active { color: var(--accent); border-bottom-color: var(--accent); }
.discover-stage { position: relative; max-width: 480px; margin: 0 auto; }
.discover-feed {
  /* The height is set by sizeDiscover() to fill the screen; this is the fallback. */
  height: calc(100dvh - 260px);
  min-height: 380px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  border-radius: 22px;
}
.discover-feed::-webkit-scrollbar { display: none; }
.discover-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 54px 18px 20px;
  box-sizing: border-box;
  margin-bottom: 8px;
  border-radius: 22px;
  background: #120f1c;
  color: #fff;
  cursor: pointer;
}
.discover-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
  will-change: transform;
}
.discover-cover-empty { display: grid; place-items: center; font-size: 96px; color: rgba(255, 255, 255, 0.5);
                        background: radial-gradient(circle at 50% 30%, #4c1d95, #120f1c 70%); }
/* Dark at the top and bottom, a soft veil in the middle, so white words read on any artwork. */
.discover-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(8, 6, 14, 0.55) 0%, rgba(8, 6, 14, 0) 22%, rgba(8, 6, 14, 0) 60%, rgba(8, 6, 14, 0.85) 100%),
    radial-gradient(80% 50% at 50% 48%, rgba(8, 6, 14, 0.62), rgba(8, 6, 14, 0)),
    rgba(8, 6, 14, 0.18);  /* a light veil over everything, so white words read even on a bright cover */
  pointer-events: none;
}
.discover-hint, .discover-center, .discover-actions, .discover-play, .discover-progress { position: relative; z-index: 1; }
.discover-hint {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(8, 6, 14, 0.6);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.discover-center { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-left: 34px; text-align: center;
                   text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); }
.discover-reason { margin: 0 0 4px; color: #c084fc; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
                   text-transform: uppercase; }
.discover-heading { margin: 0; font-family: var(--font-display); font-size: 40px; font-weight: 800; line-height: 1.05;
                    letter-spacing: -0.02em; overflow-wrap: anywhere; }
.discover-title { color: #fff; text-decoration: none; }
.discover-title:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.discover-artist { color: rgba(255, 255, 255, 0.92); font-size: 18px; font-weight: 600; text-decoration: none; }
.discover-artist:hover { color: #fff; text-decoration: underline; }
.discover-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; margin: 2px 0 0; font-size: 15px;
                 color: rgba(255, 255, 255, 0.78); }
.discover-album + .discover-score::before { content: "•"; margin-right: 8px; }
.discover-star { color: var(--accent); }
.discover-score .readout-value { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.discover-score.unrated .readout-value { font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.discover-take {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 300px;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.discover-take .take-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
                            overflow-wrap: anywhere; }
.discover-take .take-meta { font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.discover-actions {
  position: absolute;
  left: 14px;
  right: 76px;
  bottom: 16px;
  display: flex;
  gap: 4px;
}
.discover-action {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 2px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.discover-action:hover, .discover-action:focus-visible { background: rgba(255, 255, 255, 0.1); }
.discover-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.discover-action-icon { font-size: 18px; line-height: 1; }
.discover-action-label { font-size: 11px; font-weight: 600; opacity: 0.85; }
.discover-action-count { font-size: 11px; font-weight: 700; color: #d8b4fe; }
.discover-action-count:empty { display: none; }
.discover-play {
  position: absolute;
  right: 16px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.discover-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.discover-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: calc(var(--progress, 0) * 100%);
  background: var(--accent);
}
/* The dot pager on the right edge */
.discover-dots {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.discover-dots .dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.discover-dots .dot.on { height: 16px; border-radius: 3px; background: #fff; }
/* The mini player */
.discover-mini {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 480px;
  margin: 8px auto 0;
  padding: 8px 10px;
  box-sizing: border-box;
  border-radius: 14px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  overflow: hidden;
}
.discover-mini[hidden] { display: none; }
.discover-mini-art { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.discover-mini-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.discover-mini-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.discover-mini-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.discover-mini-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--text);
                     font-size: 18px; cursor: pointer; }
.discover-mini-btn:hover { background: var(--field); }
.discover-mini-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--progress, 0) * 100%);
                          background: var(--accent); }
/* Before a card settles, its words wait for the motion to bring them in (only when motion is on). */
.discover-card.is-pending .discover-reveal > * { opacity: 0; }
@media (max-height: 700px) {
  .discover-heading { font-size: 32px; }
  .discover-take { display: none; }
}

/* ---- The song page (plan 073; colours and type from plan 074) ----
   Same palette and type as Discover: a big framed cover with a serif title, mono labels instead of pill badges over
   each section, the rating as a lime readout, and comments as an editorial list with hairline dividers. */
body[data-showing="song"] .card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-solid);
  box-shadow: none;
  backdrop-filter: none;
}
body[data-showing="song"] .card.glow { border-width: 1px; }
body[data-showing="song"] .section-title .chip { display: none; }
body[data-showing="song"] .section-title { margin-bottom: 12px; }
body[data-showing="song"] .section-title h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
body[data-showing="song"] .section-title h2 .muted { color: var(--accent); }
body[data-showing="song"] .back-row .link-button {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
/* The hero: a big cover, then the title */
body[data-showing="song"] #song-page .song-card {
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 0;
  border: 0;
  background: none;
}
body[data-showing="song"] #song-page .song-art {
  align-self: center;
  width: min(100%, 360px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 4px;
  outline: 1px solid rgba(242, 241, 236, 0.12);
  outline-offset: 5px;
}
body[data-showing="song"] #song-page .song-art-empty { font-size: 72px; color: var(--accent); background: #1b1b1e; }
body[data-showing="song"] #song-page .song-text { gap: 4px; }
body[data-showing="song"] #song-page .song-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.02;
  white-space: normal;
  overflow-wrap: anywhere;
}
body[data-showing="song"] #song-page .song-artists,
body[data-showing="song"] #song-page .song-album {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: normal;
}
body[data-showing="song"] #song-page .song-artists { color: var(--text); }
body[data-showing="song"] .song-links a,
body[data-showing="song"] .song-comments-link,
body[data-showing="song"] .artist-link {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent) !important;
  text-decoration: none;
}
body[data-showing="song"] #song-page .song-side { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
body[data-showing="song"] .btn { border-radius: 4px; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.08em;
                                 text-transform: uppercase; }
body[data-showing="song"] .btn.outline { border-color: var(--border); color: var(--text); background: transparent; }
body[data-showing="song"] .btn.outline:hover { border-color: var(--accent); color: var(--accent); }
body[data-showing="song"] .sample-btn::before { background: var(--surface-solid); }
/* The rating as a readout */
body[data-showing="song"] .rating-average { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.06em;
                                            text-transform: uppercase; color: var(--muted); }
body[data-showing="song"] .rating-average strong { font-family: var(--font-body); font-size: 48px; font-weight: 700;
                                                   letter-spacing: 0; color: var(--accent); margin-right: 6px; }
body[data-showing="song"] .rating-yours { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.12em;
                                          text-transform: uppercase; color: var(--muted); }
body[data-showing="song"] .rating-value { font-family: var(--font-body); color: var(--text); }
body[data-showing="song"] .rating-strip { border-radius: 4px; background: var(--bg); }
body[data-showing="song"] .rating-label { font-family: var(--font-body); font-weight: 500; }
body[data-showing="song"] .rating-hint { font-family: var(--font-body); font-size: 11px; }
/* Sort tabs */
body[data-showing="song"] .tab { border-radius: 4px; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.08em;
                                 text-transform: uppercase; background: transparent; }
body[data-showing="song"] .tab.active { background: var(--accent); border-color: var(--accent); }
body[data-showing="song"] .link-button { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.08em;
                                         text-transform: uppercase; }
/* The rating ruler's marks, bright enough to read on black (song page and Discover's sheet) */
body[data-showing="song"] .rating-scale,
body[data-showing="discover"] .rating-scale {
  background:
    linear-gradient(to right, rgba(242, 241, 236, 0.6) 2px, transparent 2px) 0 0 / 400px 26px repeat-x,
    linear-gradient(to right, rgba(242, 241, 236, 0.22) 1px, transparent 1px) 0 0 / 40px 14px repeat-x;
}
body[data-showing="song"] .rating-label,
body[data-showing="discover"] .rating-label { color: rgba(242, 241, 236, 0.7); font-family: var(--font-body); }
/* Comments and posts: an editorial list, not a stack of boxes */
body[data-showing="song"] .post-list { gap: 0; }
body[data-showing="song"] .post {
  padding: 16px 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body[data-showing="song"] .post.reply { padding: 10px 0 10px 14px; border-top: 0; border-left: 1px solid var(--border); }
body[data-showing="song"] .post-head .detail { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.04em; }
body[data-showing="song"] .post-body { font-size: 16px; line-height: 1.5; }
body[data-showing="song"] .post-action { border-radius: 4px; background: transparent; font-family: var(--font-body);
                                         font-size: 12px; }
body[data-showing="song"] .post-action.active { color: var(--accent); border-color: var(--accent); }
body[data-showing="song"] .post-action.vote.active[aria-label="Dislike"] { color: #ff8a7a; border-color: #ff8a7a; }
body[data-showing="song"] .debated-badge { border-radius: 3px; background: none; border: 1px solid var(--accent); color: var(--accent);
                                           font-family: var(--font-body); font-size: 10px; letter-spacing: 0.08em;
                                           text-transform: uppercase; }
body[data-showing="song"] .composer textarea,
body[data-showing="song"] input { border-radius: 4px; }
body[data-showing="song"] .comment-composer .small-print,
body[data-showing="song"] .card > .small-print { font-family: var(--font-body); font-size: 11px; }
@media (max-width: 480px) {
  body[data-showing="song"] #song-page .song-title { font-size: 36px; }
}

/* The bottom sheet (comments, add to playlist, send) */
.sheet {
  width: 100%;
  max-width: 560px;
  max-height: 85dvh;
  margin: auto auto 0;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 22px 22px 0 0;
  background: var(--bg);
  color: var(--text);
  overflow-y: auto;
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.5); }
/* Chrome can, rarely, leave an opened sheet out of the pop-up layer (seen on the first tap after a page loads). Then it
   would sit below the page and every Discover button would seem to do nothing. Pin it to the bottom of the screen
   anyway, so it always shows. */
.sheet[open]:not(:modal) {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 1000;
  margin: 0 auto;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6);
}
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-up 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
}
@keyframes sheet-up {
  from { transform: translateY(100%); }
}
.sheet-grip { width: 44px; height: 5px; margin: 10px auto 4px; border-radius: 999px; background: var(--border); }
.sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 6px 0 10px;
              background: var(--bg); }
.sheet-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .discover-feed { scroll-behavior: auto; scroll-snap-type: none; }
}
/* Six tabs on a computer: a little less padding so "Discover" and "Playlists" fit (plan 070) */
@media (min-width: 621px) {
  .nav-tab { padding: 10px 6px; gap: 6px; }
}
/* Six tabs on a 360 px phone */
@media (max-width: 400px) {
  .nav-tab { font-size: 11px; padding: 7px 0; }
  .nav-tab .icon { width: 19px; height: 19px; }
}
.feed-end { text-align: center; margin: 20px 0; }
.feed-more { height: 1px; }
.image-viewer {
  max-width: min(96vw, 900px);
  padding: 10px;
  border: 0;
  border-radius: 16px;
  background: var(--surface-solid);
  color: var(--text);
}
.image-viewer::backdrop { background: rgba(0, 0, 0, 0.7); }
.image-viewer img { display: block; max-width: 100%; max-height: 80vh; border-radius: 10px; margin-bottom: 10px; }

/* --- Post menus and reports ---------------------------------------------------- */

.post-menu { position: relative; }
.post-menu-toggle { font-size: 20px; line-height: 1; text-decoration: none; padding: 0 6px; }
.menu {
  position: absolute;
  right: 0;
  z-index: 5;
  min-width: 140px;
  padding: 6px;
  border-radius: 12px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.menu-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.menu-item:hover { background: var(--field); }
.report-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.report-form .actions { margin-top: 0; align-items: center; }
.report-card .post-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.report-list { margin: 10px 0 0; padding-left: 20px; font-size: 14px; }
.post-images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 10px; }
.post-images img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }

/* --- Song cards --------------------------------------------------------------- */

.song-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 14px;
  background: var(--field);
  border: 1px solid var(--border);
}
.song-card.compact { padding: 6px 8px; gap: 10px; }
.song-art {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 10px;
  object-fit: cover;
  background: var(--grad-primary);
}
.song-card.compact .song-art { width: 40px; height: 40px; }
.song-art-empty { display: grid; place-items: center; color: #fff; font-size: 22px; }
.song-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; line-height: 1.35; }
.song-title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-artists, .song-album { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-links { margin-top: 2px; font-size: 12px; }
.song-open { font-weight: 600; }
.song-card[data-service="spotify"] .song-open { color: var(--green); }
.song-card[data-service="apple"] .song-open { color: var(--apple); }
.song-card[data-service="soundcloud"] .song-open { color: #e04a00; }
.song-side { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.song-results { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

/* ▶ buttons for 30-second samples. The ring fills as the sample plays. */
.sample-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0 8px 0 0;
  padding: 0;
  vertical-align: middle;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: conic-gradient(var(--violet) calc(var(--progress, 0) * 1turn), var(--border) 0);
}
/* The inner circle, with a ▶ (or ■ while playing) drawn on top */
.sample-btn::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--surface-solid);
}
.sample-btn::after {
  content: "";
  position: relative;
  margin-left: 2px;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--violet);
}
.sample-btn.playing::after { margin: 0; border: 0; width: 8px; height: 8px; border-radius: 1px; background: var(--violet); }
.sample-btn.loading { background: conic-gradient(var(--violet) 0.25turn, var(--border) 0); animation: spin 0.8s linear infinite; }
.sample-btn.loading::after { display: none; }
.no-sample { margin-right: 8px; font-size: 12px; color: var(--muted); cursor: help; }

/* Close matches under a song we couldn't find */
.close-matches { list-style: none; margin: 6px 0 10px; padding: 0 0 0 4px; font-size: 14px; }
.close-matches li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.close-matches li + li { border-top: 1px solid var(--border); }
.close-matches .match-text { flex: 1; min-width: 0; }
.fix-song .small-print { margin: 2px 0 8px; }
.song-search { margin: 4px 0 12px; }
.song-search .close-matches { margin-top: 8px; }
.added-note { margin: 4px 0 10px !important; color: var(--notice); font-weight: 700; font-size: 14px; }
@media (max-width: 480px) {
  .close-matches li { flex-wrap: wrap; }
  .close-matches .btn { margin-left: auto; }
}

.result {
  margin-top: 16px;
  padding: 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--violet) 8%, var(--field));
  border: 1px solid color-mix(in srgb, var(--violet) 25%, transparent);
  overflow-wrap: anywhere;
}
.result p { margin: 0 0 10px; }
.result p:last-child { margin-bottom: 0; }

/* Red/green message boxes inside cards (e.g. the add-to-playlist result) */
.notice, .error {
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 600;
}
.notice { background: var(--notice-bg); color: var(--notice); }
.error { background: var(--error-bg); color: var(--error); }
.card .error { margin: 14px 0 0; }

/* Messages that pop up at the top of the screen, wherever you've scrolled to */
.toast-stack {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 32px));
  z-index: 1000;
  display: grid;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  border-radius: 14px;
  border: 1px solid;
  box-shadow: var(--shadow);
  pointer-events: auto;
  animation: toast-in 0.2s ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
}
.toast.error { background: var(--error-bg); color: var(--error); border-color: color-mix(in srgb, var(--error) 35%, transparent); }
.toast.notice { background: var(--notice-bg); color: var(--notice); border-color: color-mix(in srgb, var(--notice) 35%, transparent); }
.toast-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
}
.toast-body { flex: 1; min-width: 0; }
.toast.notice .toast-text { flex: 1; min-width: 0; }
.toast-title { display: block; font-size: 15px; }
.toast-text { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.toast-close {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: -10px -6px -10px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
/* The same reason, in small print under the button or switch you used */
.inline-error { margin: 8px 0 0; color: var(--error); font-weight: 600; font-size: 14px; }
.inline-error::before { content: "⚠ "; }

/* --- Done animations ------------------------------------------------------- */

/* Text only screen readers hear */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.done-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-bottom: 12px;
}
.done-count { flex: 1; min-width: 0; margin: 0; font-size: 17px; }
.done-num { font-family: var(--font-display); font-size: 24px; font-variant-numeric: tabular-nums; }
.done-bar {
  flex-basis: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--field);
  overflow: hidden;
}
.done-bar span {
  display: block;
  height: 100%;
  width: calc(var(--pct, 0) * 100%);
  border-radius: inherit;
  background: var(--grad-brand);
  transition: width 1.2s ease-out;
  animation: fill 1.2s ease-out;
}
@keyframes fill { from { width: 0; } }

/* A record dropping into a little wooden crate */
.crate { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.crate-box {
  position: absolute;
  inset: auto 2px 0 2px;
  height: 26px;
  border-radius: 4px 4px 7px 7px;
  background: linear-gradient(var(--amber), color-mix(in srgb, var(--amber) 75%, #3b1d00));
  border-top: 4px solid color-mix(in srgb, var(--amber) 60%, #2a1400);
  z-index: 1;
}
.record {
  position: absolute;
  left: 8px;
  top: 2px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 40%, rgba(255, 255, 255, 0.12) 41% 42%, transparent 43% 60%,
                    rgba(255, 255, 255, 0.1) 61% 62%, transparent 63%),
    radial-gradient(circle, var(--pink) 0 18%, #111 19% 100%);
  animation: record-drop 0.7s cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
}
@keyframes record-drop {
  from { transform: translateY(-40px) rotate(-90deg); opacity: 0; }
  80% { transform: translateY(9px) rotate(-6deg); opacity: 1; }
  to { transform: translateY(6px) rotate(0); opacity: 1; }
}

/* When every song was found, a few music notes pop out of the crate */
.done-banner.all-found .crate::before,
.done-banner.all-found .crate::after,
.done-banner.all-found .crate-box::after {
  content: "♪";
  position: absolute;
  top: 0;
  z-index: 2;
  font-size: 16px;
  font-weight: 700;
  color: var(--violet);
  opacity: 0;
  animation: pop-note 1.1s ease-out 0.6s both;
}
.done-banner.all-found .crate::before { left: 2px; }
.done-banner.all-found .crate::after { left: 36px; color: var(--pink); animation-delay: 0.75s; }
.done-banner.all-found .crate-box::after { left: 18px; top: -26px; color: var(--teal); animation-delay: 0.9s; }
@keyframes pop-note {
  0% { transform: translateY(10px) scale(0.6); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(-22px) scale(1); opacity: 0; }
}

/* --- Friends --------------------------------------------------------------- */

.friend-code {
  margin: 14px 0;
  padding: 16px;
  text-align: center;
  font: 700 30px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 0.12em;
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--amber) 60%, transparent);
  background: color-mix(in srgb, var(--amber) 9%, var(--field));
}

.link-code { font-size: 36px; border-color: color-mix(in srgb, var(--teal) 60%, transparent); background: color-mix(in srgb, var(--teal) 9%, var(--field)); }
.devices-heading { margin: 18px 0 4px; font-family: var(--font-display); font-size: 16px; }

.list { display: flex; flex-direction: column; }
.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  margin: 0 -8px;
  border-radius: 12px;
}
.list-row:hover { background: var(--field); }
.list-row + .list-row { border-top: 1px solid var(--border); }
.list-row .row-text { flex: 1; min-width: 0; }
.list-row .detail { display: block; font-size: 14px; color: var(--muted); }
.list-row .row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.list-row.unseen strong::after {
  content: "New";
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--grad-apple);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 2px;
}

/* Round initials, colored per person */
.avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  background: var(--avatar);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
  object-fit: cover;
}
.avatar-big { width: 72px; height: 72px; font-size: 26px; }

/* --- Top bar (every page) ------------------------------------------------------ */

.top-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  margin: 0 -16px 12px;
  padding: 0 16px;
  padding-top: env(safe-area-inset-top);
  box-sizing: content-box;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.top-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none;
             font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.top-brand img { border-radius: 8px; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
}
.icon-button:hover { background: var(--field); }

/* --- Top rated leaderboard ------------------------------------------------------------ */

.top-explain { margin: 0 0 12px; }
.top-filters { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }
.top-filters .tabs { margin-bottom: 0; }
.top-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.top-row { display: flex; align-items: flex-start; gap: 10px; }
.top-rank {
  flex: 0 0 34px;
  height: 34px;
  margin-top: 8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font: 800 15px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--field);
}
.top-1 .top-rank { color: #5c3d00; background: linear-gradient(135deg, #ffe08a, #f5b700); }
.top-2 .top-rank { color: #2f3640; background: linear-gradient(135deg, #f1f3f6, #b9c0ca); }
.top-3 .top-rank { color: #4a2508; background: linear-gradient(135deg, #f3c19a, #c97a3d); }
.top-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.top-score { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; margin-right: 4px; }
.top-score strong { font: 800 18px var(--font-display); font-variant-numeric: tabular-nums; }
.top-score span { font-size: 11px; white-space: nowrap; }
.top-rate { white-space: nowrap; }
.top-ruler { padding: 12px; border-radius: 14px; background: var(--field); border: 1px solid var(--border); }
@media (max-width: 480px) {
  .top-row .song-card.compact .song-side { flex-wrap: wrap; justify-content: flex-end; }
}
/* Computers get the search box itself in the top bar; phones get the 🔍 button. */
.top-search { display: none; width: 260px; padding: 8px 14px; border-radius: 999px; font-size: 14px; }
@media (min-width: 760px) {
  .top-search { display: block; }
  #open-search { display: none; }
}

/* --- Search ------------------------------------------------------------------------- */

.search-box input { font-size: 17px; padding: 12px 16px; border-radius: 999px; }
.search-recent { margin-top: 12px; }
.search-recent .small-print { display: flex; gap: 10px; align-items: center; margin: 0 0 6px; }
.search-results { margin-top: 8px; }
.search-group { margin-top: 14px; }
.search-row { color: inherit; text-decoration: none; }
.search-row:focus-visible, a.song-title:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: 10px; }
.artist-row { margin: 10px 0 0; }
.tab.active[data-artist-sort] { background: var(--grad-primary); color: #fff; border-color: transparent; }

/* --- Settings ------------------------------------------------------------------ */

.settings-layout { display: block; }
.settings-index { display: none; }
.settings-section { scroll-margin-top: 70px; }
.settings-section > .settings-heading:first-child { margin-top: 8px; }
.settings-section .card h3 { margin: 0; font-family: var(--font-display); font-size: 17px; }
.services-shortcut { padding: 14px 18px; font-size: 15px; }
.choice-group { margin: 16px 0 0; padding: 0; border: 0; }
.choice-group legend { margin-bottom: 6px; }
.choice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--violet); }
.danger-card { border-color: color-mix(in srgb, var(--error) 45%, transparent); }
.danger-card h3 { color: var(--error); }
.btn.danger { background: #dc2626; color: #fff; box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25); }
.delete-list { margin: 6px 0 12px; padding-left: 20px; }
.saved-note { min-height: 1.2em; margin: 6px 0 0; color: var(--notice); }
@media (min-width: 760px) {
  .settings-layout { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: start; }
  .settings-index { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 76px; }
  .settings-index a { padding: 7px 10px; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; }
  .settings-index a:hover { background: var(--field); color: var(--text); }
}

/* --- Profile page and Edit profile ------------------------------------------- */

.tag-private { color: var(--violet); background: color-mix(in srgb, var(--violet) 15%, transparent); }
.tag-public { color: var(--teal); background: color-mix(in srgb, var(--teal) 15%, transparent); }
.settings-heading { margin: 24px 4px 12px; font-size: 20px; }
#profile-actions .btn { flex: 0 0 auto; }

.profile-head { display: flex; align-items: center; gap: 16px; }
.profile-who { flex: 1; min-width: 0; }
.profile-who h2 { font-size: 24px; }
.profile-who .small-print { margin: 2px 0 0; }
.profile-bio { margin: 14px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  resize: vertical;
}
.counter { text-align: right; margin: 4px 0 0; }
.switch { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; cursor: pointer; }
.switch input { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--violet); }

.empty {
  margin: 0;
  padding: 18px;
  text-align: center;
  color: var(--muted);
  border-radius: 14px;
  border: 1px dashed var(--border);
}

/* --- Ad slots ---------------------------------------------------------------- */
/* Fixed sizes (728x90 on computers, 320x100 on phones) so a real ad can drop in later without the page jumping. */

.ad-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 90px;
  max-width: 728px;
  overflow: hidden;
  margin: 0 auto 16px;
  padding: 22px 20px 14px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: var(--surface);
  transition: transform 0.15s, box-shadow 0.15s;
}
.ad-banner:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.ad-label {
  position: absolute;
  top: 6px;
  left: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ad-text { flex: 1; min-width: 0; margin: 0; font-weight: 600; }
.ad-short { display: none; }

/* On phones: the 320x100 shape, with the short text and the button side by side */
@media (max-width: 620px) {
  .ad-banner { height: 100px; gap: 10px; padding: 22px 14px 10px; }
  .ad-text { font-size: 15px; line-height: 1.3; }
  .ad-long { display: none; }
  .ad-short { display: inline; }
}

/* --- Website vs App -------------------------------------------------------- */

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.compare-col {
  display: flex;
  flex-direction: column;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
}
/* The app column gets the same rainbow border as glowing cards */
.compare-col.app {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--field), var(--field)) padding-box,
    var(--grad-brand) border-box;
  box-shadow: 0 8px 24px rgba(219, 39, 119, 0.15);
}
.compare-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.compare-head h3 { margin: 0; font-family: var(--font-display); font-size: 18px; }
.compare-col .get-app { align-self: flex-start; margin-top: auto; }

/* Small pill labels */
.tag {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.tag-now { color: var(--green); background: color-mix(in srgb, var(--green) 15%, transparent); }
.tag-soon { color: var(--pink); background: color-mix(in srgb, var(--pink) 15%, transparent); }

.compare-list { list-style: none; margin: 0 0 16px; padding: 0; font-size: 15px; }
.compare-list li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.compare-list li .icon { margin-top: 3px; color: var(--green); }
.compare-col.app .compare-list li .icon { color: var(--pink); }

/* Rows slide in once when the card scrolls into view (only when JS turns it on) */
.will-reveal .compare-list li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  transition-delay: calc(var(--i, 0) * 60ms);
}
.will-reveal.revealed .compare-list li { opacity: 1; transform: none; }

@media (max-width: 620px) {
  .compare { grid-template-columns: 1fr; }
}

/* --- App waitlist ---------------------------------------------------------- */

.get-app { margin-top: 16px; }
.hero .get-app { animation: rise 0.6s ease-out 0.32s both; }
.hero-short .get-app { display: none; }
#waitlist-done { color: var(--notice); font-weight: 600; }

/* --- Footer ---------------------------------------------------------------- */

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  font-size: 13px;
  color: var(--muted);
}
.footer img { border-radius: 6px; }

@media (max-width: 480px) {
  .card { padding: 18px; }
  #waitlist .inline-form { flex-wrap: wrap; }
  #waitlist .inline-form .btn { width: 100%; }
  .list-row { flex-wrap: wrap; }
  .list-row .row-actions { width: 100%; padding-left: 52px; }
  .friend-code { font-size: 24px; }
}

/* --- Playlist vibes --------------------------------------------------------- */
/* Share pages take on a look that matches the playlist (see bridge/themes.py).
   Everything moves slowly and softly; the reduce-motion block below stops it all. */

.vibe-bg { display: none; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
body[data-theme]:not([data-theme=""]):not([data-theme="tunesy"]) .vibe-bg { display: block; }
.vibe-bg::before, .vibe-bg::after { content: ""; position: absolute; pointer-events: none; }
.vibe-tag { color: var(--violet); background: color-mix(in srgb, var(--violet) 15%, transparent); }

/* Some looks are always dark, whatever the phone or computer is set to. */
body:is([data-theme="neon"], [data-theme="hiphop"], [data-theme="rock"]) {
  color-scheme: dark;
  --green: #4ade80;
  --teal: #2dd4bf;
  --violet: #c4b5fd;
  --pink: #f9a8d4;
  --orange: #fb923c;
  --amber: #fbbf24;
  --surface: rgba(14, 10, 24, 0.84);
  --surface-solid: #120d20;
  --field: rgba(255, 255, 255, 0.07);
  --text: #f6f3ff;
  --muted: #b9b2d4;
  --border: rgba(255, 255, 255, 0.12);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.45);
  --ring: rgba(196, 181, 253, 0.5);
  --error: #fca5a5;
  --error-bg: #3b1520;
  --notice: #86efac;
  --notice-bg: #0f2e1c;
}
body:is([data-theme="neon"], [data-theme="hiphop"], [data-theme="rock"]) .hl-pink { color: #ff6b81; }
body:is([data-theme="neon"], [data-theme="hiphop"], [data-theme="rock"]) .hl-orange { color: #ff8a3d; }

/* Lo-fi: muted purple and teal, with a soft film grain */
body[data-theme="lofi"] { --bg: #ece6f5; --blob-1: rgba(45, 212, 191, 0.18); --blob-2: rgba(139, 92, 246, 0.2); --blob-3: rgba(167, 139, 250, 0.16); }
body[data-theme="lofi"] .vibe-bg {
  background:
    radial-gradient(40rem 30rem at 15% 20%, rgba(124, 58, 237, 0.18), transparent 65%),
    radial-gradient(40rem 32rem at 90% 85%, rgba(13, 148, 136, 0.18), transparent 65%);
}
body[data-theme="lofi"] .vibe-bg::after {
  inset: -50%;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  animation: grain 8s steps(1) infinite; /* one jump per keyframe: 5 in 8 seconds */
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
}

/* Neon (EDM): dark, with pink and cyan glow lines slowly sliding */
body[data-theme="neon"] { --bg: #07061a; --blob-1: rgba(34, 211, 238, 0.16); --blob-2: rgba(236, 72, 153, 0.18); --blob-3: rgba(124, 58, 237, 0.2); }
body[data-theme="neon"] .vibe-bg {
  background:
    repeating-linear-gradient(115deg, transparent 0 90px, rgba(236, 72, 153, 0.22) 91px 93px, transparent 94px 180px),
    repeating-linear-gradient(115deg, transparent 0 140px, rgba(34, 211, 238, 0.18) 141px 143px, transparent 144px 260px);
  background-size: 400px 400px, 520px 520px;
  filter: drop-shadow(0 0 6px rgba(236, 72, 153, 0.5));
  animation: neon-slide 24s linear infinite;
}
@keyframes neon-slide {
  from { background-position: 0 0, 0 0; }
  to { background-position: 400px 0, -520px 0; }
}

/* Warm vinyl (soul): orange and brown, a big faint record turning in the corner */
body[data-theme="vinyl"] { --bg: #fbf0e4; --blob-1: rgba(234, 88, 12, 0.18); --blob-2: rgba(180, 83, 9, 0.16); --blob-3: rgba(251, 146, 60, 0.18); }
body[data-theme="vinyl"] .vibe-bg::after {
  width: 70vmin;
  height: 70vmin;
  right: -18vmin;
  bottom: -18vmin;
  border-radius: 50%;
  opacity: 0.16;
  background:
    repeating-radial-gradient(circle, #2a1608 0 2px, #3d2210 3px 5px),
    #2a1608;
  -webkit-mask: radial-gradient(circle, transparent 0 6%, #000 6.5% 17%, transparent 17.5% 18%, #000 18.5%);
  mask: radial-gradient(circle, transparent 0 6%, #000 6.5% 17%, transparent 17.5% 18%, #000 18.5%);
  animation: spin 30s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Hip-hop: gold and black, a slow pulsing bass circle */
body[data-theme="hiphop"] { --bg: #0b0904; --blob-1: rgba(234, 179, 8, 0.14); --blob-2: rgba(161, 98, 7, 0.16); --blob-3: rgba(250, 204, 21, 0.1); }
body[data-theme="hiphop"] .vibe-bg::after {
  width: 90vmin;
  height: 90vmin;
  left: 50%;
  top: 50%;
  margin: -45vmin 0 0 -45vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 204, 21, 0.22), rgba(202, 138, 4, 0.1) 45%, transparent 70%);
  animation: bass 8s ease-in-out infinite alternate;
}
@keyframes bass {
  from { transform: scale(0.85); opacity: 0.6; }
  to { transform: scale(1.08); opacity: 1; }
}

/* Rock: deep red and black, a gentle stage-light flicker */
body[data-theme="rock"] { --bg: #0d0506; --blob-1: rgba(220, 38, 38, 0.16); --blob-2: rgba(127, 29, 29, 0.24); --blob-3: rgba(239, 68, 68, 0.14); }
body[data-theme="rock"] .vibe-bg::before {
  inset: 0;
  background:
    conic-gradient(from 160deg at 25% -10%, transparent 0 8deg, rgba(248, 113, 113, 0.18) 12deg 20deg, transparent 26deg),
    conic-gradient(from 180deg at 75% -10%, transparent 0 8deg, rgba(220, 38, 38, 0.16) 12deg 22deg, transparent 28deg);
  animation: stage 9s ease-in-out infinite alternate;
}
@keyframes stage {
  0% { opacity: 0.55; }
  40% { opacity: 0.9; }
  55% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* Chill: pale blue-green, slowly drifting like water */
body[data-theme="chill"] { --bg: #eaf7f6; --blob-1: rgba(45, 212, 191, 0.2); --blob-2: rgba(56, 189, 248, 0.18); --blob-3: rgba(134, 239, 172, 0.16); }
body[data-theme="chill"] .vibe-bg {
  background:
    radial-gradient(30rem 20rem at 20% 30%, rgba(56, 189, 248, 0.18), transparent 70%),
    radial-gradient(34rem 22rem at 80% 70%, rgba(45, 212, 191, 0.2), transparent 70%),
    radial-gradient(28rem 18rem at 50% 100%, rgba(134, 239, 172, 0.16), transparent 70%);
  background-size: 140% 140%;
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  from { background-position: 0% 0%; }
  to { background-position: 100% 100%; }
}

/* In dark mode the light looks get darker versions of their colors. */
@media (prefers-color-scheme: dark) {
  body[data-theme="lofi"] { --bg: #120f22; }
  body[data-theme="lofi"] .vibe-bg::after { opacity: 0.12; }
  body[data-theme="vinyl"] { --bg: #170d07; --surface: rgba(32, 20, 12, 0.82); --surface-solid: #20140c; --field: #2b1c11; }
  body[data-theme="vinyl"] .vibe-bg::after { opacity: 0.35; background: repeating-radial-gradient(circle, #6b3a14 0 2px, #4a2810 3px 5px), #4a2810; }
  body[data-theme="chill"] { --bg: #06161a; --surface: rgba(10, 30, 36, 0.8); --surface-solid: #0b2228; --field: #10303a; }
}

/* --- Reduce motion ---------------------------------------------------------- */
/* People who asked their phone or computer for less movement see everything still. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================================
   The owner's Higgsfield look (plan 074): a deep purple-black app, one neon purple accent, a clean bold sans,
   rounded cards, purple ratings, and a bottom tab bar on phones. It sets the site's tokens, so every page follows.
   ========================================================================= */
:root {
  color-scheme: dark;
  --accent: #a855f7;
  --violet: #a855f7;
  --pink: #a855f7;
  --bg: #0b0a12;
  --blob-1: transparent;
  --blob-2: rgba(124, 58, 237, 0.22);
  --blob-3: transparent;
  --surface: rgba(23, 20, 33, 0.92);
  --surface-solid: #171421;
  --field: #211d2e;
  --text: #f5f3ff;
  --muted: #9d98b3;
  --border: rgba(255, 255, 255, 0.08);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --ring: rgba(168, 85, 247, 0.45);
  --grad-primary: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  --grad-brand: linear-gradient(135deg, #a855f7 0%, #6d28d9 100%);
  --error: #fca5a5;
  --error-bg: #3b1520;
  --notice: #86efac;
  --notice-bg: #0f2e1c;
  --radius: 18px;
  --font-display: "Syne", "Sora", system-ui, sans-serif;  /* plan 075: distinctive headings */
  --font-body: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body { background: radial-gradient(90rem 40rem at 50% -10%, rgba(124, 58, 237, 0.22), transparent 60%), var(--bg); }
.card { backdrop-filter: none; }
.card.glow { border: 1px solid var(--border); background: var(--surface-solid); }
.btn.primary { background: var(--grad-primary); color: #fff; box-shadow: 0 8px 22px rgba(168, 85, 247, 0.32); }
.tab.active, .nav-tab.active { color: #fff; }
.chip { background: rgba(168, 85, 247, 0.16); color: var(--accent); }
.top-bar { background: rgba(11, 10, 18, 0.82); }
/* Phones: the tabs become a bottom tab bar, icons over labels, the current one purple (like the image). */
@media (max-width: 620px) {
  .nav-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    margin: 0;
    gap: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: rgba(11, 10, 18, 0.94);
    backdrop-filter: blur(14px);
    box-shadow: none;
  }
  .nav-tab.active { background: none; color: var(--accent); box-shadow: none; }
  main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .discover-heading { font-size: 34px; }
}
/* Scrolling (plan 074): a card below the screen waits invisible until it rises in (app.js, revealObserver). */
@media (prefers-reduced-motion: no-preference) {
  .will-reveal { opacity: 0; }
}

/* =========================================================================
   The tab bar like the owner's image (plan 075): a wide rounded panel with the tabs spread evenly, the current
   tab a soft glowing purple pill, and a glowing line along the bottom edge under it that slides between tabs.
   ========================================================================= */
.nav-tabs {
  position: relative;
  justify-content: space-between;
  gap: 4px;
  padding: 14px 16px;
  margin-bottom: 26px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(26, 22, 38, 0.92), rgba(15, 13, 22, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 40px rgba(0, 0, 0, 0.35);
  overflow: visible;
}
/* A faint track along the bottom edge, for the glowing line to run on */
.nav-tabs::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.nav-tab {
  flex: 1 1 0;
  padding: 12px 10px;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(235, 232, 245, 0.72);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.nav-tab .icon { width: 20px; height: 20px; opacity: 0.85; }
.nav-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.nav-tab.active {
  color: #fff;
  font-weight: 600;
  border-color: rgba(192, 132, 252, 0.35);
  background:
    radial-gradient(120% 140% at 50% 120%, rgba(168, 85, 247, 0.55), rgba(168, 85, 247, 0) 60%),
    linear-gradient(180deg, rgba(139, 92, 246, 0.42), rgba(109, 40, 217, 0.32));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 26px -10px rgba(168, 85, 247, 0.85);
}
.nav-tab.active .icon { opacity: 1; }
.nav-indicator {
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 1;
  width: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.4), #c084fc 30%, #a855f7 70%, rgba(168, 85, 247, 0.4));
  box-shadow: 0 0 14px 2px rgba(168, 85, 247, 0.75), 0 0 34px 6px rgba(124, 58, 237, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
/* Phones: the bar sits at the bottom of the screen (plan 074), with the glowing line along its top edge. */
@media (max-width: 620px) {
  .nav-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; width: auto;
              padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); margin: 0; border-radius: 0; border-width: 1px 0 0;
              background: rgba(11, 10, 18, 0.95); backdrop-filter: blur(14px); box-shadow: none; }
  .nav-tabs::after { top: -1px; bottom: auto; left: 0; right: 0; }
  .nav-tab { padding: 7px 2px; gap: 2px; font-size: 11px; border-radius: 14px; }
  .nav-tab.active { background: none; border-color: transparent; box-shadow: none; color: var(--accent); }
  .nav-indicator { top: -1px; bottom: auto; }
}
/* Headings in Syne, at 700 (its 800 runs very wide) and a little tighter */
h1, h2, .discover-page-title, .discover-heading, .wordmark, .top-brand { font-family: var(--font-display); font-weight: 700;
                                                                        letter-spacing: -0.01em; }
/* Computers: the top bar and the tab bar span wider than the page content, like the owner's image, so every tab
   label fits on one line. */
@media (min-width: 900px) {
  .top-bar, .nav-tabs {
    width: min(1040px, calc(100vw - 64px));
    box-sizing: border-box;
    margin-left: 50%;
    translate: -50% 0;
  }
  .top-bar { margin-right: 0; padding: 0 24px; }
}
.discover-empty { max-width: 480px; margin: 40px auto; padding: 0 20px; text-align: center; color: var(--muted); }

/* =========================================================================
   Discover's New and Familiar sections (plan 078), in the look of plans 074 and 076
   ========================================================================= */
.discover-mixes { flex-wrap: wrap; row-gap: 4px; }
.discover-card.is-familiar .discover-reason { color: #fbcfe8; }
.familiar { max-width: 480px; margin: 0 auto; }
.familiar[hidden] { display: none; }
.familiar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 16px; }
.familiar-sort { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-solid); }
.familiar-sort-btn {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.familiar-sort-btn.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.45), rgba(109, 40, 217, 0.35));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.familiar-search {
  flex: 1;
  min-width: 160px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.familiar-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.familiar-list { display: flex; flex-direction: column; gap: 12px; }
.familiar-item {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-solid);
}
.familiar-item .song-card { background: none; border: 0; padding: 0; }
.familiar-score { color: var(--accent); font-size: 15px; }
.familiar-meta { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.familiar-own { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.familiar-label { margin: 4px 0 0; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.familiar-group { display: flex; flex-direction: column; gap: 6px; }
.familiar-snippet {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  align-items: center;
  padding: 8px 12px;
  border: 0;
  border-left: 2px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.familiar-snippet:hover { background: rgba(168, 85, 247, 0.14); }
.familiar-snippet:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.familiar-post { border-left-color: #f0abfc; }
.familiar-snippet-text { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                         overflow-wrap: anywhere; }
.familiar-snippet-time { flex-shrink: 0; color: var(--muted); font-size: 12px; }
.familiar-load { align-self: flex-start; font-size: 13px; }
.familiar-more { text-align: center; margin: 16px 0; }
/* The comment or post you came to see, from Familiar */
.is-highlighted { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; transition: outline-color 0.6s; }
.discover-stage[hidden] { display: none; }
/* Keyboard focus on Discover's section row and the Familiar order switch (web-design-guidelines review, plan 078) */
.discover-mix:focus-visible, .familiar-sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.familiar-snippet { text-decoration: none; }

/* =========================================================================
   Send inside TuneZ (plan 079): the sheet, the recipients, the picture
   ========================================================================= */
.send-sheet { display: flex; flex-direction: column; gap: 12px; padding-bottom: 6px; }
.send-sheet .song-card { background: var(--field); border: 0; }
.send-note { margin: 4px 0; }
.send-search {
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.send-search:focus-visible, .send-message:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.send-targets { display: flex; flex-direction: column; gap: 4px; max-height: 38dvh; overflow-y: auto; overscroll-behavior: contain; }
.send-target {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  cursor: pointer;
}
.send-target[hidden] { display: none; }
.send-target:hover { background: var(--field); }
.send-target:has(input:checked) { border-color: rgba(192, 132, 252, 0.45); background: rgba(168, 85, 247, 0.14); }
.send-target:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.send-target input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.send-target.is-off { opacity: 0.5; cursor: not-allowed; }
.send-target-who { display: flex; flex-direction: column; min-width: 0; }
.send-target-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.send-target-sub { color: var(--muted); font-size: 12px; }
.send-chat-emblem { display: grid; place-items: center; font-size: 18px; background: rgba(168, 85, 247, 0.2); }
.send-message {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  resize: vertical;
}
.send-extras { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.send-counter { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.send-preview { position: relative; align-self: flex-start; }
.send-preview[hidden] { display: none; }
.send-preview img { display: block; max-width: 100%; max-height: 180px; border-radius: 14px; }
.send-preview-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 6, 14, 0.75);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
.send-go { min-height: 48px; font-size: 16px; }
.send-go:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.sent-picture { display: block; padding: 0; margin: 6px 0; border: 0; background: none; cursor: zoom-in; }
.sent-picture img { display: block; max-width: min(100%, 260px); max-height: 260px; border-radius: 12px; object-fit: cover; }

/* =========================================================================
   Autoscroll switch on Discover (plan 080)
   ========================================================================= */
.discover-head { position: relative; }
.autoscroll-switch {
  position: absolute;
  top: 6px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.autoscroll-switch[hidden] { display: none; }
.switch-track {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--field);
  border: 1px solid var(--border);
  transition: background 0.2s, border-color 0.2s;
}
.switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #cfc9e3;
  transition: transform 0.2s, background 0.2s;
}
.autoscroll-switch[aria-checked="true"] { color: var(--text); }
.autoscroll-switch[aria-checked="true"] .switch-track { background: var(--grad-primary); border-color: transparent;
                                                        box-shadow: 0 0 14px rgba(168, 85, 247, 0.55); }
.autoscroll-switch[aria-checked="true"] .switch-thumb { transform: translateX(16px); background: #fff; }
.autoscroll-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) {
  .switch-track, .switch-thumb { transition: none; }
}

/* Favorites (plan 081) */
.favorite-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.favorite-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.favorite-btn.is-favorite { background: var(--accent); border-color: var(--accent); color: #fff; }
.discover-action.is-favorite { background: rgba(168, 85, 247, 0.28); }
.discover-action.is-favorite .discover-action-icon { filter: none; }
.discover-action.is-favorite .discover-action-label { color: #e9d5ff; }

/* =========================================================================
   The chat's song picker: Favorites, Liked, Rated, Search (plan 083)
   ========================================================================= */
.library-picker { display: grid; gap: 10px; margin: 8px 0; }
.library-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.library-tabs::-webkit-scrollbar { display: none; }
.library-tab {
  flex: 1 0 auto;
  min-height: 44px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--field);
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.library-tab[aria-selected="true"] { background: var(--grad-primary); border-color: transparent; color: #fff;
                                      box-shadow: 0 0 14px rgba(168, 85, 247, 0.45); }
.library-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.library-panel { display: grid; gap: 8px; }
.library-panel input[type="search"] { width: 100%; min-height: 44px; }
.library-panel .song-results { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
.library-panel > .btn[hidden] { display: none; }
.library-score { color: #e9d5ff; font-size: 13px; font-weight: 600; white-space: nowrap; }

/* =========================================================================
   Friend requests, people search and the inbox in three sections (plan 084)
   ========================================================================= */
.inbox-tabs { margin-bottom: 10px; }
.inbox-tabs .library-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
                           flex: 1 1 auto; padding: 0 8px; font-size: 13px; }
.inbox-tabs .badge { position: static; }
#people-search { width: 100%; min-height: 44px; }
#people-results { margin-bottom: 14px; }
.inbox-subhead { margin: 16px 0 4px; font-size: 14px; color: var(--muted); font-weight: 600; }
.friend-action { display: inline-flex; align-items: center; flex-shrink: 0; }
.friend-action .btn { min-height: 44px; }
.search-row { display: flex; align-items: center; gap: 12px; }
.search-row .person-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
                           color: inherit; text-decoration: none; min-height: 44px; }
.search-row .person-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: 10px; }
.activity-row { color: inherit; text-decoration: none; min-height: 44px; }
.activity-row:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: 10px; }
.activity-line { display: block; overflow-wrap: anywhere; }
#activity-more { margin-top: 10px; min-height: 44px; }

/* --- plan 085: Top rated is one line per song, and the title opens a menu --- */
.top-list { gap: 0; }
.top-row { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--border); }
.top-rank { flex: 0 0 32px; height: auto; margin: 0; display: block; text-align: center; border-radius: 0; background: none;
            font: 600 15px/1 var(--font-body, inherit); font-variant-numeric: tabular-nums; color: var(--muted); }
.top-rank.top-medal { font-size: 22px; }
.top-title { flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
             font: 600 16px/1.2 inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.top-average { flex: 0 0 auto; min-width: 44px; text-align: right; font: 700 17px/1 inherit; font-variant-numeric: tabular-nums; color: var(--text); }
.top-sheet { display: flex; flex-direction: column; }
.top-sheet-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 48px; padding: 0 4px;
                  border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; color: var(--text);
                  font: 600 16px/1.2 inherit; text-decoration: none; text-align: left; cursor: pointer; }
.top-sheet-rate { padding: 12px 4px; border-bottom: 1px solid var(--border); }
.top-sheet-rated { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 4px; font-weight: 600; }

/* plan 086: favorite counts */
.favorite-btn .favorite-label, .discover-action-label, .rating-favorites { font-variant-numeric: tabular-nums; }
.rating-favorites { margin: 4px 0 0; }