/* Профиль: личность, статистика прослушивания, достижения, любимые артисты, топы.
   Один акцент (синий), иерархия — размером и воздухом, а не цветными словами.
   Материалы/тени — по токенам, чтобы темы (styles/theme.css) переопределяли их. */

/* Шестерёнка настроек — в правый край шапки. */
.head__end { margin-left: auto; }

/* ---------- личность ---------- */
.prof { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px var(--gutter) 18px; }
.avatar--xl { width: 96px; height: 96px; min-width: 96px; font-size: 38px; border-radius: 50%; overflow: hidden; }
.avatar--xl .avatar__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.prof__idline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.prof__name { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.prof__title { font-size: 12px; font-weight: 700; color: var(--accent-soft); background: var(--accent-tint); padding: 4px 11px; border-radius: var(--pill); border: 0; cursor: pointer; }
.prof__title:active { transform: scale(0.95); }
.prof__handle { font-size: 13px; font-weight: 600; color: var(--t3); }

/* ---------- карточка статистики ---------- */
.statcard { margin: 0 var(--gutter) 22px; padding: 20px 18px 16px; border-radius: 18px;
  background: var(--surface-1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-1); }
.statcard__hero { display: flex; align-items: baseline; gap: 8px; }
.statcard__num { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.statcard__unit { font-size: 14px; font-weight: 600; color: var(--t2); }
.statcard__since { margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--t3); }
.statcard__row { display: flex; gap: 10px; margin-top: 16px; }
.statchip { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 12px; background: var(--surface-2); }
.statchip b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.statchip span { font-size: 11px; font-weight: 600; color: var(--t3); }

/* ---------- секции профиля ---------- */
.psec { padding: 0 var(--gutter); margin-bottom: 24px; }
.psec__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.psec__title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.psec__hint { font-size: 11px; font-weight: 600; color: var(--t4); }
.psec__edit { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--accent-soft); background: none; border: 0; padding: 4px 2px; cursor: pointer; }
.psec__edit:active { opacity: 0.6; }
.psec__empty { font-size: 13px; font-weight: 500; color: var(--t3); line-height: 1.5; }

/* ---------- достижения ---------- */
.achgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ach { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 15px 8px 12px; border-radius: 14px;
  background: var(--surface-1); border: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform var(--dur-press, 0.12s) ease, border-color 0.2s ease; position: relative; cursor: pointer; }
.ach:active { transform: scale(0.96); }
.ach__ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--t2); }
.ach__name { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.2; color: var(--t2); }
.ach--locked { opacity: 0.4; cursor: default; }
.ach--on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.ach--on .ach__ic { background: var(--accent-tint); color: var(--accent-soft); }
.ach--on .ach__name { color: var(--t1); }
.ach__badge { position: absolute; top: 7px; right: 8px; font-size: 9px; font-weight: 800; letter-spacing: 0.02em; color: var(--accent-soft); }

/* ---------- горизонтальная лента артистов ---------- */
.artscroll { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.artscroll::-webkit-scrollbar { display: none; }
/* Карточка артиста — кнопка (тап открывает его страницу): сброс дефолтов кнопки
   + лёгкий пресс, как у остальных тап-целей приложения. */
.artcard { flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 8px; scroll-snap-align: start; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--dur-press, .12s) ease; }
.artcard:active { transform: scale(.94); }
.artcard__art { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.artcard__art img { width: 100%; height: 100%; object-fit: cover; }
.artcard__ini { font-size: 28px; font-weight: 800; color: var(--t3); }
.artcard__name { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.2; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artcard__sub { font-size: 10px; font-weight: 600; color: var(--t4); }

/* ---------- топ-треки ---------- */
/* Строка топ-трека — кнопка (тап играет трек): сброс дефолтов + лёгкий пресс. */
.toptrack { display: flex; align-items: center; gap: 12px; padding: 8px 0; width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--dur-press, .12s) ease; }
.toptrack:active { transform: scale(.98); }

/* ---------- Друзья (карточка в профиле) ---------- */
/* Соц-слой переехал из настроек: карточка со стопкой аватаров ведёт на экран друзей.
   Материал — как statcard/промо; пресс — мгновенная реакция (apple: feedback на нажатие). */
.friendcard {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border-radius: 16px;
  background: var(--surface-1); border: 1px solid var(--line, rgba(255, 255, 255, 0.06));
  color: inherit; font: inherit; text-align: left; cursor: pointer; position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background 160ms ease;
}
.friendcard:active { transform: scale(.97); background: var(--surface-2); }
.friendcard__avatars { display: flex; flex: none; }
.friendcard__avatars:empty { display: none; }
.friendcard__avatars .avatar {
  width: 38px; height: 38px; font-size: 15px; margin-left: -12px;
  box-shadow: 0 0 0 2px var(--bg); position: relative;   /* кольцо цветом фона отделяет наложенные аватары */
}
.friendcard__avatars .avatar:first-child { margin-left: 0; }
.avatar--more { display: grid; place-items: center; background: var(--surface-2); color: var(--t3); font-weight: 800; }
.friendcard__text { flex: 1; min-width: 0; }
.friendcard__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.friendcard__count { font-size: 12px; font-weight: 700; color: var(--t3); background: var(--surface-2); padding: 1px 8px; border-radius: 999px; }
.friendcard__count:empty { display: none; }
.friendcard__sub { font-size: 12px; color: var(--t3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friendcard__chev { flex: none; }
/* ---------- Профиль друга (read-only) ---------- */
/* Карточки артистов/треков друга — только показ (не кнопки): гасим курсор и пресс. */
.artcard--static, .toptrack--static { cursor: default; }
.artcard--static:active, .toptrack--static:active { transform: none; }
/* CTA «Открыть медиатеку друга» — во всю ширину под шапкой профиля друга. */
.playpill--wide { width: 100%; justify-content: center; margin: 4px 0 8px; }

/* Иконка людей — пока аватаров ещё нет (пустое состояние / до загрузки друзей). */
.friendcard__icon { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); }
.friendcard__icon[hidden] { display: none; }
/* Вариант в медиатеке: не в .psec, поэтому свой отступ снизу. */
.friendcard--lib { margin: 2px 0 12px; }
@media (prefers-reduced-motion: reduce) { .friendcard { transition: background 160ms ease; } .friendcard:active { transform: none; } }
.toptrack__rank { flex: none; width: 18px; text-align: center; font-size: 14px; font-weight: 800; color: var(--t3); font-variant-numeric: tabular-nums; }
.toptrack__cover { flex: none; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.toptrack__cover img { width: 100%; height: 100%; object-fit: cover; }
.toptrack__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.toptrack__meta b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toptrack__meta i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toptrack__time { flex: none; font-size: 12px; font-weight: 700; color: var(--t3); font-variant-numeric: tabular-nums; }

/* Крупнее на десктопе — профиль как колонка по центру. */
@media (min-width: 1024px) {
  .achgrid { grid-template-columns: repeat(6, 1fr); }
}