/* ==========================================================================
   Spindle
   Dark, content-forward. Album art is the hero; everything else recedes.
   ========================================================================== */

:root {
  --bg:            #0a0a0a;
  --sidebar:       #111111;
  --card:          #161616;
  --card-hover:    #1c1c1c;
  --line:          #232323;

  --text:          #f2f2f2;
  --text-dim:      #8e8e8e;
  --text-faint:    #5c5c5c;

  --accent:        #8b7cf8;
  --accent-dim:    rgba(139, 124, 248, 0.14);
  --accent-faint:  rgba(139, 124, 248, 0.06);

  --green:         #4ade80;
  --rose:          #fb7185;
  --danger:        #ef4444;

  --r-sm:  8px;
  --r-md:  10px;
  --r-lg:  12px;
  --r-pill: 20px;

  --sidebar-w: 220px;
  --tabbar-h:  64px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body { overflow: hidden; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 26px; }
h2 { font-size: 15px; }
h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); font-weight: 600; }
p  { margin: 0; }

.muted  { color: var(--text-dim); }
.small  { font-size: 13px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Screens
   -------------------------------------------------------------------------- */
.screen { position: fixed; inset: 0; overflow-y: auto; background: var(--bg); z-index: 10; }
.screen--center {
  display: grid; place-items: center;
  padding: calc(24px + var(--safe-t)) calc(24px + var(--safe-r)) calc(24px + var(--safe-b)) calc(24px + var(--safe-l));
}

/* --------------------------------------------------------------------------
   Brand — the groove ring mark + the "spindle" wordmark
   -------------------------------------------------------------------------- */
.brand-mark { display: block; flex: none; }

/* Wordmark: Georgia serif, light, white — with the i's tittle recoloured
   purple. The letter is a dotless ı so we can place our own dot precisely. */
.wordmark {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 300;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.005em;
}
.wm-i { position: relative; }
.wm-dot {
  position: absolute;
  left: 50%; top: 0.19em;
  width: 0.28em; height: 0.28em;
  border-radius: 50%;
  background: #8b7cf8;
  transform: translateX(-50%);
}

.brand-tagline {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #444444;
}

/* Mark + wordmark side by side (header lockup) */
.brand-lockup { display: flex; align-items: center; gap: 10px; }

/* Splash: mark, wordmark, tagline stacked and centred, timed fade */
.boot { display: grid; justify-items: center; gap: 18px; }
.brand-splash { animation: splash-fade-in .4s ease both; }
#screen-boot { transition: opacity .4s ease; }
#screen-boot.is-leaving { opacity: 0; }
@keyframes splash-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: var(--r-md);
  font-size: 15px; font-weight: 500;
  transition: background .14s ease, border-color .14s ease, opacity .14s ease;
}
.btn--block { display: flex; width: 100%; }
.btn--lg { padding: 16px; font-size: 16px; }

.btn--primary { background: var(--accent); color: #0d0a1f; font-weight: 600; }
.btn--primary:hover { background: #9a8dfa; }
.btn--primary:disabled { opacity: .45; cursor: not-allowed; }

.btn--ghost { background: var(--card); border: 1px solid var(--line); }
.btn--ghost:hover { background: var(--card-hover); }

.btn--dashed {
  background: none; border: 1px dashed var(--line); color: var(--text-dim);
  margin-top: 12px;
}
.btn--dashed:hover { border-color: var(--accent); color: var(--text); }

.link {
  color: var(--accent); font-size: 14px; font-weight: 500;
  background: none; border: none; padding: 0;
}
.link:hover { text-decoration: underline; }

.icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card); color: var(--text-dim); flex: none;
}
.icon-btn:hover { background: var(--card-hover); color: var(--text); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 13px; color: var(--text-dim); }

input[type=text], input[type=email], input[type=password], input[type=url],
input[type=search], textarea, .select {
  width: 100%;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, textarea:focus, .select:focus { border-color: var(--accent); outline: none; }
textarea { resize: vertical; }

.select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
                    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.form-error {
  background: rgba(239, 68, 68, .1);
  border: 1px solid rgba(239, 68, 68, .3);
  color: #fca5a5;
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: 13px; margin-bottom: 12px;
}

.file-label { position: relative; cursor: pointer; }

/* --------------------------------------------------------------------------
   Auth
   -------------------------------------------------------------------------- */
.auth-card { width: 100%; max-width: 380px; }
.auth-card__head { display: grid; justify-items: center; gap: 8px; margin-bottom: 32px; text-align: center; }

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-faint); font-size: 12px; margin: 18px 0;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

.auth-toggle { text-align: center; margin-top: 20px; font-size: 14px; }

/* "Forgot password?" — sits just under the password field, right-aligned. */
.auth-forgot-row { display: flex; justify-content: flex-end; margin: -6px 0 14px; font-size: 13px; }

/* --------------------------------------------------------------------------
   Onboarding
   -------------------------------------------------------------------------- */
.onboard { width: 100%; max-width: 520px; text-align: center; }
.onboard h1 { margin-bottom: 8px; }
.onboard__step > .btn, .onboard__step > .field { text-align: left; }
.onboard__back { margin-top: 18px; }

.onboard__options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
@media (max-width: 560px) { .onboard__options { grid-template-columns: 1fr; } }

.option-card {
  display: grid; justify-items: center; gap: 8px;
  padding: 28px 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  text-align: center; transition: border-color .14s ease, background .14s ease;
}
.option-card:hover { border-color: var(--accent); background: var(--card-hover); }
.option-card i { font-size: 26px; color: var(--accent); }
.option-card span { font-size: 13px; }

.import-preview {
  max-height: 240px; overflow-y: auto; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 8px; margin: 20px 0; font-size: 13px;
}
.import-preview__row { padding: 6px 8px; border-radius: 6px; display: flex; justify-content: space-between; gap: 12px; }
.import-preview__row:nth-child(odd) { background: rgba(255,255,255,.02); }
.import-preview__row span { color: var(--text-dim); flex: none; }

.progress { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin: 22px 0 12px; }
.progress__bar { height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
#app { height: 100%; }
.layout { display: flex; height: calc(100% - var(--tabbar-h) - var(--safe-b)); }

.sidebar {
  width: var(--sidebar-w); flex: none;
  background: var(--sidebar); border-right: 1px solid var(--line);
  padding: 20px 14px; overflow-y: auto;
  display: none; flex-direction: column; gap: 26px;
}
/* Per the brief, the sidebar belongs to the Pick screen only. */
body[data-view="pick"] .sidebar { display: flex; }
@media (max-width: 820px) { body[data-view="pick"] .sidebar { display: none; } }

.sidebar__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: -0.01em; padding: 0 6px;
}

.sidebar__nav { display: grid; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-sm);
  color: var(--text-dim); font-size: 14px;
  border-left: 2px solid transparent;
  transition: color .14s ease, background .14s ease;
}
.nav-item:hover { color: var(--text); }
.nav-item.is-active {
  color: var(--text);
  border-left-color: var(--accent);
  background: linear-gradient(90deg, var(--accent-dim), transparent 85%);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.nav-item i { font-size: 17px; }

.sidebar__section { display: grid; gap: 10px; }

/* All five views (Pick, Collection, Friends, Search, Profile) render inside
   #content, so padding it for the safe-area insets keeps every screen clear of
   the notch / Dynamic Island up top and the rounded corners at the sides. The
   bottom is handled by the fixed tab bar (which carries --safe-b itself). */
.content {
  flex: 1; overflow-y: auto;
  padding: calc(28px + var(--safe-t)) calc(32px + var(--safe-r)) 40px calc(32px + var(--safe-l));
}
@media (max-width: 700px) {
  .content {
    padding: calc(20px + var(--safe-t)) calc(18px + var(--safe-r)) 32px calc(18px + var(--safe-l));
  }
}
.view { max-width: 920px; margin: 0 auto; }

.view__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 6px;
}
.time-pill {
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line);
  font-size: 13px; color: var(--text-dim); flex: none;
  font-variant-numeric: tabular-nums;
}

.legend {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-faint); margin: 14px 0 26px;
}
.legend em { font-style: italic; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* --------------------------------------------------------------------------
   Result type — two cards at the top of the Pick screen
   -------------------------------------------------------------------------- */
.result-type { margin-top: 6px; }

.result-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .result-cards { grid-template-columns: 1fr; } }

.result-card {
  display: grid; justify-items: start; gap: 6px;
  padding: 18px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .14s ease, background .14s ease;
}
.result-card:hover { border-color: #333; background: var(--card-hover); }
.result-card i { font-size: 24px; color: var(--text-dim); transition: color .14s ease; }
.result-card strong { font-size: 16px; font-weight: 600; }
.result-card span { font-size: 13px; color: var(--text-dim); line-height: 1.45; }

.result-card.is-active {
  border-color: var(--accent);
  background: linear-gradient(160deg, var(--accent-dim), var(--card) 70%);
}
.result-card.is-active i { color: var(--accent); }

.arc-length {
  display: flex; align-items: center; gap: 14px;
  margin-top: 12px; padding: 12px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
}
.arc-length__label { font-size: 14px; font-weight: 500; }
.arc-length .stepper { width: 128px; flex: none; }
.arc-length .muted { margin-left: auto; }

.block { margin-bottom: 30px; }
.block > h2 { margin-bottom: 12px; }
.block__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Chips, segmented control, stepper
   -------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line);
  font-size: 12px; color: var(--text-dim);
  transition: all .14s ease;
}
.chip:hover { color: var(--text); border-color: #333; }
.chip.is-active { background: var(--accent-dim); border-color: var(--accent); color: var(--text); }


.stepper {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 4px;
}
.stepper button {
  width: 32px; height: 32px; border-radius: 6px;
  display: grid; place-items: center; color: var(--text-dim);
}
.stepper button:hover:not(:disabled) { background: var(--card-hover); color: var(--text); }
.stepper button:disabled { opacity: .3; cursor: not-allowed; }
.stepper span { font-variant-numeric: tabular-nums; font-weight: 600; }

/* --------------------------------------------------------------------------
   Horizontal scrollers
   -------------------------------------------------------------------------- */
.scroller {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.scroller::-webkit-scrollbar { display: none; }

.suggestion {
  flex: none; width: 190px;
  display: grid; gap: 4px; align-content: start;
  padding: 16px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .14s ease, background .14s ease;
}
.suggestion:hover { border-color: var(--accent); background: var(--card-hover); }
.suggestion i { font-size: 20px; color: var(--accent); margin-bottom: 4px; }
.suggestion strong { font-size: 14px; font-weight: 600; }
.suggestion span { font-size: 12px; color: var(--text-dim); line-height: 1.4; }

.scroller--art .art-tile { flex: none; width: 116px; }

/* --------------------------------------------------------------------------
   Selector grids (mood, occasion)
   -------------------------------------------------------------------------- */
.selector-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
@media (max-width: 620px) { .selector-grid { grid-template-columns: repeat(2, 1fr); } }

.selector {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 14px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--line);
  font-size: 14px; color: var(--text-dim);
  transition: all .14s ease;
}
.selector:hover { color: var(--text); border-color: #333; }
.selector i { font-size: 18px; flex: none; }
.selector.is-active {
  background: var(--accent-dim); border-color: var(--accent); color: var(--text);
}
.selector.is-active i { color: var(--accent); }

.selector__nudge {
  position: absolute; top: 8px; right: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* Spans the whole selector grid, under the tiles. */
.selector-more {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border-radius: var(--r-md);
  border: 1px dashed var(--line);
  color: var(--text-dim); font-size: 13px;
  transition: border-color .14s ease, color .14s ease;
}
.selector-more:hover { border-color: var(--accent); color: var(--text); }
.selector-more i { font-size: 15px; }

/* --------------------------------------------------------------------------
   Album art
   -------------------------------------------------------------------------- */
.art {
  width: 100%; aspect-ratio: 1; border-radius: var(--r-sm);
  background: var(--card); object-fit: cover; display: block;
}
.art--placeholder {
  display: grid; place-items: center;
  color: var(--text-faint); font-size: 22px;
  border: 1px solid var(--line);
}

/* Title fallback tile — album title on a name-derived colour. Font scales with
   the tile via container query units, so it fits at 44px (a row) and 140px (the
   detail sheet) alike. Long titles wrap and clamp instead of overflowing. */
.art--title {
  display: grid; place-items: center;
  overflow: hidden;
  padding: 8%;
}
.art--title span {
  width: 100%;                 /* fill the tile so text wraps at word boundaries */
  color: #ffffff; font-weight: 600; line-height: 1.16; text-align: center;
  /* wrap between words only; a word too wide for a tiny tile clips rather than
     breaking one character per line */
  font-size: 15px;             /* fallback until JS measures the tile */
}

/* Manual cover-art override in the detail sheet */
.art-edit { margin-top: 8px; }
.art-edit__toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.art-edit__toggle i { font-size: 15px; }
.art-edit__form { display: grid; gap: 8px; }
.art-edit__form input { font-size: 13px; }
.art-edit__form .btn { padding: 8px 14px; }

.art-tile { text-align: left; display: grid; gap: 6px; }
.art-tile strong {
  font-size: 13px; font-weight: 500; line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.art-tile span { font-size: 12px; color: var(--text-dim); }

/* --------------------------------------------------------------------------
   Collection ↔ Wishlist toggle
   -------------------------------------------------------------------------- */
.coll-toggle {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 6px;
  background: #161616; border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 24px;
}
.coll-tab {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 0; padding: 12px; border-radius: 8px;
  border: 1px solid transparent;
  color: #555; font-size: 14px; font-weight: 500;
  transition: all .14s ease;
}
.coll-tab span:not(.coll-count) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coll-tab i { font-size: 18px; }
.coll-tab:hover { color: var(--text-dim); }

.coll-tab--collection.is-active {
  background: #1e1a3a; border-color: #5a4fd4; color: var(--text);
}
.coll-tab--collection.is-active i { color: var(--accent); }

.coll-tab--wishlist.is-active {
  background: #1a1020; border-color: #7a3050; color: #c47aa0;
}
.coll-tab--wishlist.is-active i { color: #c47aa0; }

.coll-tab--stats.is-active {
  background: #1e1a3a; border-color: #5a4fd4; color: var(--text);
}
.coll-tab--stats.is-active i { color: var(--accent); }

.coll-count {
  min-width: 22px; padding: 1px 7px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06);
  font-size: 12px; font-variant-numeric: tabular-nums;
  color: inherit;
}
.coll-tab.is-active .coll-count { background: rgba(255, 255, 255, .12); }

/* Wishlist panel */
.wish-add-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 14px; margin-bottom: 16px;
  border: 1px dashed #7a3050; border-radius: var(--r-md);
  background: none; color: #c47aa0;
  font-size: 14px; font-weight: 500;
  transition: background .14s ease, border-color .14s ease;
}
.wish-add-btn:hover { background: #1a1020; border-color: #c47aa0; }
.wish-add-btn i { font-size: 18px; }

.wish-row { align-items: center; }
.wish-row .row__art { width: 44px; height: 44px; }

.wish-actions--stack {
  display: flex; flex-direction: column; gap: 6px; flex: none;
}
.wish-actions--stack .wish-btn { justify-content: flex-start; }
.wish-btn--collected {
  background: var(--accent-dim); border-color: transparent; color: var(--accent);
}
.wish-btn--collected:hover { border-color: var(--accent); background: rgba(139, 124, 248, .22); }

.album-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .album-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .album-grid { grid-template-columns: repeat(2, 1fr); } }
.album-grid .art-tile:hover .art { opacity: .82; }

/* --------------------------------------------------------------------------
   Results — single pick and arc
   -------------------------------------------------------------------------- */
.results { margin-top: 34px; scroll-margin-top: 20px; }

.arc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.arc-tag {
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--accent-dim); border: 1px solid var(--accent);
  color: var(--text); font-size: 12px;
}
.arc-count { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.arc-list { display: grid; gap: 8px; }

.arc-row {
  display: grid;
  grid-template-columns: 26px 68px 1fr;
  gap: 14px; align-items: start;
  padding: 14px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line);
  text-align: left; width: 100%;
  transition: border-color .14s ease;
}
.arc-row:hover { border-color: #2e2e2e; }
.arc-row__num {
  font-variant-numeric: tabular-nums; color: var(--text-faint);
  font-size: 13px; padding-top: 24px; text-align: center;
}
.arc-row__art { width: 68px; height: 68px; border-radius: var(--r-sm); }
.arc-row__body { display: grid; gap: 5px; min-width: 0; }
.arc-row__title { font-weight: 600; font-size: 15px; }
.arc-row__artist { font-size: 13px; color: var(--text-dim); }
.arc-row__reason { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

.badge {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 500; width: fit-content;
  background: var(--accent-dim); color: var(--accent);
}
.badge--start { background: rgba(74, 222, 128, .12); color: var(--green); }
.badge--finish { background: rgba(251, 113, 133, .12); color: var(--rose); }
.badge--muted { background: var(--line); color: var(--text-faint); }

.arc-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-faint); font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em;
  margin: 6px 0;
}
.arc-divider::before, .arc-divider::after {
  content: ''; flex: 1; border-top: 1px dashed var(--line);
}

.extend {
  margin-top: 16px; padding: 14px;
  border: 1px solid var(--accent); border-radius: var(--r-lg);
  background: var(--accent-faint);
}
.extend__btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font-weight: 500;
}
.extend__btn:disabled { opacity: .5; cursor: not-allowed; }
.extend__plus { color: var(--accent); font-size: 13px; }
.extend__foot {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   Session rating
   -------------------------------------------------------------------------- */

/* "Rate this session" — deliberately quiet, sits between the pick and Extend. */
.rate-session {
  display: flex; align-items: center; gap: 6px;
  margin: 14px auto 0; padding: 4px 8px;
  font-size: 13px; color: #555;
  transition: color .14s ease;
}
.rate-session:hover { color: var(--text-dim); }
.rate-session i { font-size: 15px; }

/* Rating sheet: three cards side by side */
.rate-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rate-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 10px; border-radius: var(--r-md);
  border: 1.5px solid transparent; text-align: center;
  transition: border-color .14s ease, transform .1s ease;
}
.rate-card i { font-size: 24px; }
.rate-card__label { font-size: 12.5px; font-weight: 500; }
.rate-card:active { transform: scale(.97); }

.rate-card--nailed { background: #0f1e14; color: #4db88a; }
.rate-card--good   { background: #1a1a1a; color: #888; }
.rate-card--missed { background: #1e0e14; color: #c47aa0; }

.rate-card--nailed.is-selected { border-color: #4db88a; }
.rate-card--good.is-selected   { border-color: #888; }
.rate-card--missed.is-selected { border-color: #c47aa0; }

/* Optional note */
.rate-note { position: relative; margin-top: 16px; }
.rate-note input { width: 100%; }
.rate-note__count {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--text-faint); pointer-events: none;
}

.rate-actions { margin-top: 20px; display: grid; gap: 10px; justify-items: center; }
.rate-actions .btn--block { justify-content: center; }
.rate-skip { color: var(--text-faint); font-size: 13px; }

/* Rating dot + note in the listening log */
.session-title { display: flex; align-items: center; gap: 7px; }
.rate-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none;
}
.rate-dot--nailed { background: #4db88a; }
.rate-dot--good   { background: #888; }
.rate-dot--missed { background: #c47aa0; }
.rate-note-text {
  font-size: 12px; color: var(--text-faint); font-style: italic; margin-top: 2px;
}

/* Single pick */
.single {
  display: grid; grid-template-columns: 200px 1fr; gap: 22px;
  padding: 20px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line);
}
@media (max-width: 620px) { .single { grid-template-columns: 1fr; } }
.single__body { display: grid; gap: 8px; align-content: center; }
.single__title { font-size: 22px; font-weight: 600; }
.single__artist { color: var(--text-dim); }
.single__reason { color: var(--text-dim); line-height: 1.6; margin-top: 4px; }

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */
.search-bar { position: relative; margin-bottom: 26px; }
.search-bar i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); pointer-events: none;
}
.search-bar input { padding-left: 40px; border-radius: var(--r-md); }

.browse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.browse-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 18px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--line);
  font-size: 14px; text-align: left;
  transition: border-color .14s ease, background .14s ease;
}
.browse-tile:hover { border-color: var(--accent); background: var(--card-hover); }
.browse-tile i { font-size: 19px; color: var(--accent); }

/* --------------------------------------------------------------------------
   Profile
   -------------------------------------------------------------------------- */
.profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.avatar {
  width: 60px; height: 60px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent);
  font-size: 22px; font-weight: 600;
}

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 30px; }
.stat {
  display: grid; gap: 2px; padding: 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.stat strong { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--text-dim); }

.rows { display: grid; gap: 2px; }
.row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; border-radius: var(--r-sm);
  background: var(--card); border: 1px solid transparent;
  font-size: 14px; text-align: left;
  transition: background .14s ease;
}
.row:hover:not(.row--static):not(:disabled) { background: var(--card-hover); }
.row:disabled { opacity: .5; cursor: default; }
.row i:first-child { font-size: 17px; color: var(--text-dim); flex: none; }
.row > span:not(.badge) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__chev { color: var(--text-faint); font-size: 15px; }
.row--danger { color: #f87171; }
.row--danger i { color: #f87171; }
.row--static { cursor: default; }

.row__art { width: 40px; height: 40px; border-radius: 6px; flex: none; }
.row__stack { flex: 1; display: grid; gap: 1px; min-width: 0; }
.row__stack strong { font-size: 14px; font-weight: 500; }
.row__stack span { font-size: 12px; color: var(--text-dim); }

.empty {
  padding: 26px; text-align: center; color: var(--text-faint); font-size: 13px;
  border: 1px dashed var(--line); border-radius: var(--r-md);
}

/* --------------------------------------------------------------------------
   Tab bar + FAB
   -------------------------------------------------------------------------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(17, 17, 17, .92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.tab {
  display: grid; place-items: center; gap: 2px;
  color: var(--text-faint); font-size: 10px;
  transition: color .14s ease;
}
.tab i { font-size: 21px; }
.tab.is-active { color: var(--accent); }

.fab {
  position: fixed; right: 22px; z-index: 45;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 18px);
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #0d0a1f;
  box-shadow: 0 6px 20px rgba(139, 124, 248, .3);
  transition: transform .14s ease;
}
.fab:hover { transform: scale(1.05); }
.fab i { font-size: 24px; transition: transform .18s ease; }
.fab.is-open i { transform: rotate(45deg); }

/* Two-option menu that pops above the FAB — must sit above the scrim (z 50). */
.fab-menu {
  position: fixed; right: 22px; z-index: 55;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 84px);
  display: grid; gap: 8px;
  animation: rise-toast .16s ease;
}
.fab-menu__item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
  transition: border-color .14s ease, background .14s ease;
}
.fab-menu__item:hover { background: var(--card-hover); border-color: var(--accent); }
.fab-menu__item i { font-size: 18px; color: var(--accent); }

/* Small header action button (e.g. "Add to wishlist") */
.pill-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line);
  color: var(--text); font-size: 13px; font-weight: 500;
  transition: border-color .14s ease, background .14s ease;
}
.pill-btn:hover { border-color: var(--accent); background: var(--card-hover); }
.pill-btn i { font-size: 15px; color: var(--accent); }

/* --------------------------------------------------------------------------
   Sheets
   -------------------------------------------------------------------------- */
.scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(2px);
  animation: fade .18s ease;
}
@keyframes fade { from { opacity: 0; } }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--sidebar);
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  padding: 10px 20px calc(20px + var(--safe-b));
  animation: rise .24s cubic-bezier(.22, 1, .36, 1);
}
@keyframes rise { from { transform: translateY(100%); } }
@media (min-width: 900px) {
  .sheet { left: 50%; transform: translateX(-50%); width: 620px; }
  @keyframes rise { from { transform: translate(-50%, 100%); } }
}

.sheet__grip {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--line); margin: 0 auto 14px;
}
.sheet__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.sheet__head h2 { font-size: 19px; }
.sheet__head .muted { font-size: 13px; margin-top: 2px; }
.sheet__body { overflow-y: auto; flex: 1; margin: 0 -20px; padding: 0 20px 4px; }
.sheet__actions { display: flex; gap: 10px; margin-top: 20px; }
.sheet__actions .btn { flex: 1; }

/* Search-to-add results */
.add-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px; border-radius: var(--r-sm); text-align: left;
}
.add-row:hover { background: var(--card); }
.add-row .row__art { width: 48px; height: 48px; }

/* Whole-row tap target (the "Start from an album" search results) */
.add-row--tap { cursor: pointer; }
.add-row--tap > i { flex: none; color: var(--text-faint); font-size: 18px; }
.add-row--tap:hover > i { color: var(--accent); }
.add-row__cta {
  flex: none; padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--accent-dim); color: var(--accent);
  font-size: 12px; font-weight: 500;
  transition: background .14s ease;
}
.add-row__cta:hover:not(:disabled) { background: rgba(139, 124, 248, .24); }
.add-row[data-owned="true"] .add-row__cta {
  background: var(--line); color: var(--text-faint); cursor: default;
}
.add-row .icon-btn { width: 32px; height: 32px; }
.add-row .icon-btn.is-on { color: var(--accent); cursor: default; }
.add-row .icon-btn:not(.is-on):hover { color: var(--rose); }

/* Wishlist "♡ Want it" CTA (the wishlist-mode primary button) */
.add-row__cta--wish {
  display: inline-flex; align-items: center; gap: 5px;
}
.add-row[data-wished="true"] .add-row__cta--wish {
  background: var(--line); color: var(--text-faint); cursor: default;
}

/* Labeled buttons on each wishlist row */
.wish-actions { display: flex; gap: 8px; flex: none; }
.wish-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; white-space: nowrap;
  background: var(--card-hover); border: 1px solid var(--line); color: var(--text-dim);
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.wish-btn i { font-size: 14px; }
.wish-btn--add:hover { border-color: var(--accent); color: var(--text); background: var(--accent-dim); }
.wish-btn--remove:hover { border-color: var(--danger); color: #f87171; }
@media (max-width: 560px) {
  .wish-btn span { display: none; } /* icon-only on narrow screens */
  .wish-btn { padding: 8px; }
}

.meta-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.meta-head .row__art { width: 64px; height: 64px; border-radius: var(--r-sm); }

.stars { display: flex; gap: 6px; }
.stars button { font-size: 22px; color: var(--text-faint); transition: color .1s ease; }
.stars button.is-on { color: var(--accent); }

/* Album detail */
.detail-hero { display: flex; gap: 18px; margin-bottom: 22px; }
.detail-hero .art { width: 140px; height: 140px; flex: none; border-radius: var(--r-md); }
.detail-hero__body { display: grid; gap: 4px; align-content: center; }
.detail-hero__title { font-size: 20px; font-weight: 600; }

.detail-section { margin-bottom: 20px; }
.detail-section h3 { margin-bottom: 8px; }
.detail-section p { color: var(--text-dim); line-height: 1.6; font-size: 14px; }

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line);
  font-size: 11px; color: var(--text-dim);
}

.stats-bars { display: grid; gap: 10px; }
.stats-bar { display: grid; gap: 5px; }
.stats-bar__top { display: flex; justify-content: space-between; font-size: 13px; }
.stats-bar__top span:last-child { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.stats-bar__track { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.stats-bar__fill { height: 100%; background: var(--accent); border-radius: 3px; }

/* --------------------------------------------------------------------------
   Toast + spinner
   -------------------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 80;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 20px);
  max-width: min(90vw, 420px);
  padding: 12px 18px; border-radius: var(--r-md);
  background: #1e1e1e; border: 1px solid var(--line);
  font-size: 13px; box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
  animation: rise-toast .2s ease;
}
.toast--error { border-color: rgba(239, 68, 68, .4); color: #fca5a5; }
@keyframes rise-toast { from { opacity: 0; transform: translate(-50%, 8px); } }

.toast { display: flex; align-items: center; gap: 14px; }
.toast__action {
  flex: none; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--accent-dim); color: var(--accent);
  font-size: 13px; font-weight: 600;
}
.toast__action:hover { background: rgba(139, 124, 248, .24); }

.spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.thinking {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 40px; color: var(--text-dim); font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

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

/* Small button variant for the inline Accept / Send request / Following CTAs. */
.btn--sm { padding: 7px 13px; font-size: 13px; border-radius: var(--r-sm); }

/* Request-count badges layered on the nav icons. */
.nav-item { position: relative; }
.nav-badge {
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto;
  display: inline-grid; place-items: center;
  border-radius: 9px; background: var(--accent); color: #0d0a1f;
  font-size: 11px; font-weight: 700; line-height: 1;
}
.tab__icon { position: relative; display: inline-grid; place-items: center; }
.tab-badge {
  position: absolute; top: -4px; right: -9px;
  min-width: 15px; height: 15px; padding: 0 4px;
  display: inline-grid; place-items: center;
  border-radius: 8px; background: var(--rose); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
}

/* Avatars in friend-sized variants (the base .avatar is 60px). */
.avatar--sm { width: 40px; height: 40px; font-size: 15px; }
.avatar--lg { width: 76px; height: 76px; font-size: 28px; }

/* Friend search + list rows reuse .row; add a little spacing under results. */
.friend-results { display: grid; gap: 2px; margin-bottom: 26px; }
.friend-results:empty { margin-bottom: 0; }
.friend-row { cursor: pointer; }
.req-actions { display: flex; gap: 8px; flex: none; }

/* Activity feed */
#friend-feed { display: grid; gap: 12px; }
.feed-item {
  padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line);
  display: grid; gap: 10px;
}
.feed-item__head { display: flex; align-items: center; gap: 10px; }
.feed-item__who { display: grid; gap: 1px; }
.feed-item__who strong { font-size: 14px; font-weight: 600; }
.feed-item__text { font-size: 14px; color: var(--text); }
.feed-album {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: var(--r-md); background: var(--bg);
}
.feed-album__art { width: 48px; height: 48px; border-radius: 6px; flex: none; }
.feed-album__info { flex: 1; display: grid; gap: 2px; min-width: 0; }
.feed-album__info strong { font-size: 14px; font-weight: 500; }
.feed-album__info span { font-size: 12px; }

.wl-btn {
  flex: none; padding: 7px 12px; border-radius: var(--r-pill);
  background: var(--accent-dim); color: var(--accent);
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.wl-btn:hover:not(:disabled) { background: rgba(139, 124, 248, .24); }
.wl-btn:disabled { background: var(--line); color: var(--text-dim); cursor: default; }
.wl-btn.is-wished { background: var(--accent-dim); color: var(--accent); }

/* Grouped additions card (2+ records) — the whole card taps open the sheet. */
.feed-item--group { text-align: left; width: 100%; cursor: pointer; transition: border-color .14s ease; }
.feed-item--group:hover { border-color: #2e2e2e; }
.feed-thumbs { display: flex; gap: 8px; }
.feed-thumb { width: 48px; height: 48px; flex: none; border-radius: 6px; overflow: hidden; }
.feed-thumb__art { width: 100%; height: 100%; }
.feed-thumb--more {
  display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line);
  color: var(--text-dim); font-size: 13px; font-weight: 600;
}

/* Empty activity state */
.feed-empty {
  display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 34px 20px; border: 1px dashed var(--line); border-radius: var(--r-lg);
}
.feed-empty i { font-size: 26px; color: var(--text-faint); margin-bottom: 4px; }
.feed-empty strong { font-size: 15px; font-weight: 600; }
.feed-empty span { font-size: 13px; max-width: 260px; }

/* "See all activity" — muted, subtle, full-width under the 5 cards */
.see-all-activity {
  width: 100%; padding: 12px; border-radius: var(--r-md);
  background: transparent; border: 1px solid var(--line);
  color: var(--text-dim); font-size: 13px; font-weight: 500;
  transition: color .14s ease, border-color .14s ease;
}
.see-all-activity:hover { color: var(--text); border-color: #333; }

/* Full activity page */
.activity-title { font-size: 22px; margin-bottom: 20px; }
.activity-list { display: grid; gap: 12px; }

/* Expanded-additions bottom sheet */
.sheet--additions { background: #161616; max-height: 70vh; }
.addition-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.addition-row__thumb { width: 44px; height: 44px; flex: none; border-radius: 6px; overflow: hidden; }
.addition-row__art { width: 100%; height: 100%; }
.addition-row__info { flex: 1; display: grid; gap: 2px; min-width: 0; }
.addition-row__info strong { font-size: 14px; font-weight: 500; }
.addition-row__info span { font-size: 12px; }
.addition-row__owned { flex: none; white-space: nowrap; }

/* Friend profile */
.friend-back { display: inline-block; margin-bottom: 18px; }
.friend-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.friend-head__body { display: grid; gap: 4px; }
.friend-head__body h1 { font-size: 24px; }
.friend-head__actions { margin-top: 8px; }

/* Purple-tinted overlap card */
.overlap-card {
  display: grid; gap: 4px; margin-bottom: 30px;
  padding: 18px; border-radius: var(--r-lg);
  background: var(--accent-dim); border: 1px solid rgba(139, 124, 248, .28);
}
.overlap-card strong { font-size: 15px; font-weight: 600; }
.overlap-card span { font-size: 13px; }

/* Friend collection grid: reuses .album-grid, adds the heart overlay. */
.friend-tile { position: relative; text-align: left; display: grid; gap: 6px; }
.friend-tile strong {
  font-size: 13px; font-weight: 500; line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.friend-tile span { font-size: 12px; color: var(--text-dim); }
.tile-heart {
  position: absolute; top: 6px; right: 6px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10, 10, 10, .62); backdrop-filter: blur(4px);
  color: #fff; font-size: 15px; line-height: 1;
}
.tile-heart:hover:not(:disabled) { background: rgba(10, 10, 10, .82); }
.tile-heart.is-wished { color: var(--accent); cursor: default; }
.friend-seeall { margin-top: 14px; }

/* Session dots on a friend's profile (green / gray / rose). */
.friend-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.friend-dot--green { background: var(--green); }
.friend-dot--gray  { background: var(--text-faint); }
.friend-dot--rose  { background: var(--rose); }

/* --------------------------------------------------------------------------
   Invites
   -------------------------------------------------------------------------- */

/* Friends header with the Invite button pinned to the right. */
.view__head--row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.view__head--row h1 { margin: 0; }

/* Banner on the sign-up screen when arriving from an invite link. */
.invite-banner {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px; padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--accent-dim); border: 1px solid rgba(139, 124, 248, .28);
  color: var(--text); font-size: 13px; line-height: 1.35;
}
.invite-banner i { color: var(--accent); font-size: 18px; flex: none; }

/* Post-signup "add your inviter" screen. */
.invite-screen { text-align: center; margin-bottom: 24px; }
.invite-screen h1 { font-size: 22px; margin-bottom: 8px; }
.invite-screen__actions { display: grid; gap: 10px; }

/* --------------------------------------------------------------------------
   Pick screen "Filters" button — hidden by default; the phone breakpoint
   below reveals it (the sidebar's Genre filter has nowhere else to go there).
   -------------------------------------------------------------------------- */
.pick-filters {
  display: none;
  align-items: center; gap: 8px; align-self: flex-start;
  margin: 0 0 22px;
  padding: 11px 16px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line);
  font-size: 14px; font-weight: 500; color: var(--text);
}
.pick-filters i { font-size: 18px; color: var(--accent); }

/* ==========================================================================
   iPhone portrait (< 768px)
   Single column, tab-bar-only navigation, larger touch targets. Placed last so
   it overrides the earlier, narrower breakpoints.
   ========================================================================== */
@media (max-width: 767px) {

  /* PART 1 — no sidebar; the bottom tab bar is the only navigation. The Genre
     filter moves into the #sheet-filters bottom sheet, opened from here. */
  body[data-view="pick"] .sidebar { display: none; }
  .pick-filters { display: inline-flex; }

  /* PART 8 — page titles / greeting a touch smaller; section titles (h2) stay. */
  .view__head h1 { font-size: 20px; }
  .friend-head__body h1 { font-size: 22px; }

  /* PART 2 — Pick: full-width selector cards; 2-up mood & occasion grids. */
  .result-cards { grid-template-columns: 1fr; }
  .selector-grid { grid-template-columns: repeat(2, 1fr); }
  .arc-length { flex-wrap: wrap; }
  .arc-length .muted { margin-left: 0; }

  /* PART 3 / 4 / 5 — art grids (collection, friend profile, search) drop to 3. */
  .album-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }

  /* PART 8 — album/friend tile names slightly smaller. */
  .art-tile strong, .friend-tile strong { font-size: 11px; }

  /* PART 4 / 6 — stats stay three across but get more compact. */
  .stat { padding: 14px 10px; }
  .stat strong { font-size: 20px; }
  .stat span { font-size: 11px; }

  /* PART 7 — comfortable touch targets (Apple's 44px minimum). */
  .btn { min-height: 44px; }
  .btn--sm { min-height: 40px; }
  .nav-item, .row, .selector, .browse-tile, .result-card { min-height: 44px; }
  .stepper button { width: 40px; height: 40px; }
  .chip { min-height: 40px; padding: 9px 14px; display: inline-flex; align-items: center; }
  .wl-btn, .wish-btn, .req-actions .btn { min-height: 40px; }

  /* PART 8 — tab-bar labels 9px; a little vertical breathing room per tab. */
  .tab { font-size: 9px; padding: 6px 0; }

  /* Three collection tabs are tight on a phone — drop the count pills (the same
     count sits in the header subtitle) so the labels have room. */
  .coll-toggle .coll-count { display: none; }
  .coll-tab { gap: 6px; padding: 12px 8px; }

  /* PART 7 — keep the floating + clear of the tab bar, tucked bottom-right. */
  .fab { right: 18px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px); }
}

/* --------------------------------------------------------------------------
   Collection stats page (a sub-page of Profile)
   Reuses .stat-row/.stat, .stats-bar*, .friend-dot*, .album-grid, .select.
   -------------------------------------------------------------------------- */
.stats-block { margin-bottom: 30px; }
.stats-block > h2 { margin-bottom: 14px; }
.stats-page .stat-row { margin-bottom: 30px; }

/* Decade chips */
.decade-row { display: flex; flex-wrap: wrap; gap: 8px; }
.decade-chip {
  display: grid; justify-items: center; gap: 2px;
  min-width: 56px; padding: 12px 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
}
.decade-chip strong { font-size: 15px; font-weight: 600; }
.decade-chip span { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.decade-chip.is-top {
  background: var(--accent-dim); border-color: var(--accent);
}
.decade-chip.is-top span { color: var(--accent); }

/* Top artists */
.rank-list { display: grid; gap: 2px; }
.rank-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--card); border: 1px solid var(--line);
}
.rank-num {
  flex: none; width: 22px; text-align: center;
  color: var(--text-faint); font-weight: 600; font-variant-numeric: tabular-nums;
}
.rank-name { flex: 1; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-count { flex: none; font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* Session ratings */
.rating-list { display: grid; gap: 10px; }
.rating-row { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.rating-label { flex: 1; }
.rating-count { color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* Listening streak */
.streak {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px; border-radius: var(--r-lg);
  background: var(--accent-dim); border: 1px solid rgba(139, 124, 248, .28);
}
.streak__current { display: flex; align-items: center; gap: 10px; }
.streak__current i { font-size: 22px; color: var(--accent); }
.streak__current strong { font-size: 17px; font-weight: 600; }
.streak .muted { font-size: 13px; }

/* Empty state for the session sections */
.stats-empty {
  display: flex; align-items: center; gap: 10px;
  padding: 22px; border-radius: var(--r-md);
  border: 1px dashed var(--line); color: var(--text-faint); font-size: 14px;
}
.stats-empty i { font-size: 20px; color: var(--accent); }

/* Full-collection section header + controls */
.stats-coll-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.stats-coll-controls { display: flex; align-items: center; gap: 10px; }
.stats-sort { width: auto; min-width: 150px; }

/* Grid / list view toggle */
.view-toggle {
  display: flex; flex: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden;
}
.vt-btn {
  width: 40px; height: 38px; display: grid; place-items: center;
  color: var(--text-dim); font-size: 17px;
  transition: background .14s ease, color .14s ease;
}
.vt-btn:hover { color: var(--text); }
.vt-btn.is-active { background: var(--accent-dim); color: var(--accent); }

/* List view rows */
.stats-list-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px 10px; border-radius: var(--r-sm); text-align: left;
  transition: background .14s ease;
}
.stats-list-row:hover { background: var(--card-hover); }
/* Fixed 40px thumb wrapper; the art (image or title-tile) fills it. The wrapper
   is a plain block flex-item with overflow:hidden, so its flex min-size is 0 and
   the pinned width holds regardless of the title-tile's intrinsic size. */
.stats-list__thumb {
  width: 40px; height: 40px; flex: none;
  border-radius: 6px; overflow: hidden;
}
.stats-list__art { width: 100%; height: 100%; border-radius: 6px; }
.stats-list__body { flex: 1; display: grid; gap: 1px; min-width: 0; }
.stats-list__name { font-size: 13px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-list__artist { font-size: 11px; color: var(--text-dim); }
.stats-list__year { font-size: 10px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.stats-list__genre {
  flex: none; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line);
  font-size: 11px; color: var(--text-dim); white-space: nowrap;
}