/* ═══════════════════════════════════════════════════════
   canYeKnow — Page Styles
   Токены — из shared/theme.css; общие компоненты
   (.btn-header, .segmented-control, #search-modal, .page-title)
   — из shared/components.css. Здесь только то, что специфично
   для каталога: сетка альбомов, треклист, клипы, документалки.
   ═══════════════════════════════════════════════════════ */

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

body {
  font-family: var(--body-font, 'Manrope', system-ui, -apple-system, sans-serif);
  font-size: var(--fs-600);
  background: var(--bg-base);
  color: var(--text);
  min-height: 100vh;
}

main {
  max-width: 820px;
  margin: 0 auto;
  padding: 68px var(--sp-600) 120px;
}

/* ── Hero ─────────────────────────────────────────────── */


.ye-title { margin-bottom: var(--sp-300); }

.ye-sub {
  font-size: var(--fs-500);
  color: var(--on-base-muted);
  text-shadow: var(--on-base-shadow);
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.5;
}

.ye-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-300) var(--sp-600);
  margin-top: var(--sp-600);
}

.ye-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--on-base-muted); text-shadow: var(--on-base-shadow); }
.ye-stat b {
  font-size: var(--fs-900);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-base);
}

.view-sub {
  font-size: var(--fs-400);
  color: var(--text-muted);
  text-align: center;
  margin: var(--sp-500) 0 var(--sp-600);
}

/* ── Сетка альбомов ───────────────────────────────────── */

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-400);
  margin-top: var(--sp-600);
}

.album-card {
  display: flex;
  gap: var(--sp-400);
  padding: var(--sp-400);
  text-decoration: none;
  color: inherit;
  background: var(--win-bg);
  border: 1px solid var(--header-border);
  border-radius: var(--radius-200);
  transition: border-color var(--t-base), transform var(--t-base), background var(--t-base);
}
/* Акцент альбома. Данные несут свой цвет (--album-acc через inline style),
   но в Win95/GoT/Term/Brutal 23 разноцветные карточки ломают тему (а в
   Term-dark у Yeezus #111 — чёрный градиент на чёрном). Поэтому --acc по
   умолчанию = акцент темы, и только «цветные» Liquid/Disco берут цвет из
   данных. Исключение задокументировано в DESIGN.md. */
.album-card, .album-head, .vid-row, .doc-card { --acc: var(--nav-active); }
html[data-style="liquid"] .album-card, html[data-style="liquid"] .album-head,
html[data-style="liquid"] .vid-row,    html[data-style="liquid"] .doc-card,
html[data-style="disco"]  .album-card, html[data-style="disco"]  .album-head,
html[data-style="disco"]  .vid-row,    html[data-style="disco"]  .doc-card {
  --acc: var(--album-acc, var(--nav-active));
}

.album-card:hover {
  border-color: var(--acc);
  transform: translateY(-2px);
  background: var(--hover-bg);
}
.album-card:focus-visible {
  outline: 2px solid var(--nav-active);
  outline-offset: 2px;
}

.album-art {
  position: relative;
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--emoji-sm);
  border-radius: calc(var(--radius-200) - 4px);
  background: linear-gradient(145deg, var(--acc) 0%, transparent 130%);
  /* Обложки альбомов — © лейблов, поэтому глиф на градиенте акцента. */
}

.album-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.album-card-top {
  display: flex;
  align-items: center;
  gap: var(--sp-200);
  font-size: var(--fs-200);
  color: var(--text-muted);
}
.album-year { font-weight: 600; }

.album-name { font-size: var(--fs-600); font-weight: 600; line-height: 1.25; }
.album-with { font-size: var(--fs-200); color: var(--acc); font-weight: 600; }
.album-sub { font-size: var(--fs-300); color: var(--text-muted); line-height: 1.4; margin-top: 2px; }

/* Обложка перекрывает глиф; если картинка не загрузилась, JS сносит
   <img> и остаётся градиент с эмодзи. */
.cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ── Карточка альбома ─────────────────────────────────── */

.back-link {
  margin: var(--sp-600) 0 var(--sp-500);
  display: inline-flex;
  gap: var(--sp-200);
  align-items: center;
}

.album-head {
  display: flex;
  gap: var(--sp-500);
  align-items: center;
  padding: var(--sp-600);
  border-radius: var(--radius-200);
  background: linear-gradient(120deg, color-mix(in srgb, var(--acc) 22%, transparent) 0%, transparent 70%);
  border: 1px solid var(--header-border);
}

.album-head-art {
  position: relative;
  /* Явная ширина: на мобиле .album-head становится колонкой, и flex-basis
     начинает управлять высотой — без width обложка схлопывалась под глиф. */
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--emoji-sm);
  border-radius: calc(var(--radius-200) - 4px);
  background: linear-gradient(145deg, var(--acc) 0%, transparent 130%);
}

.album-head-text { min-width: 0; }
.album-head-title { margin: var(--sp-100) 0 var(--sp-200); text-align: left; }
.album-head-sub { font-size: var(--fs-400); color: var(--text-muted); line-height: 1.45; }

.album-head-link {
  margin-top: var(--sp-300);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-100);
}

.album-about {
  font-size: var(--fs-600);
  line-height: 1.65;
  margin: var(--sp-600) 0;
}

.credits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-300) var(--sp-500);
  padding: var(--sp-400) var(--sp-500);
  border-radius: var(--radius-200);
  background: var(--win-bg);
  border: 1px solid var(--header-border);
}
.credit dt { margin-bottom: 2px; }
.credit dd { font-size: var(--fs-400); line-height: 1.45; }

.section-head { margin: var(--sp-700) 0 var(--sp-300); }

.lyrics-note {
  font-size: var(--fs-300);
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: var(--sp-300);
  padding-left: var(--sp-300);
  border-left: 2px solid var(--nav-active);
}

/* ── Треклист ─────────────────────────────────────────── */

.tracks { list-style: none; }

.track { border-bottom: 1px solid var(--panel-sep); }
.track:last-child { border-bottom: none; }

.track-row {
  display: flex;
  align-items: center;
  gap: var(--sp-300);
  padding: var(--sp-300) var(--sp-200);
  border-radius: var(--radius-100);
}
.track--open .track-row { cursor: pointer; }
.track--open .track-row:hover { background: var(--hover-bg); }
.track-row:focus-visible { outline: 2px solid var(--nav-active); outline-offset: 2px; }

.track-n {
  flex: 0 0 24px;
  font-size: var(--fs-200);
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.track-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-200); }
.track-t { font-size: var(--fs-500); font-weight: 500; }
.track-f { font-size: var(--fs-300); color: var(--text-muted); }

.track--skit .track-t { font-weight: 400; color: var(--text-muted); font-style: italic; }

.track-badge {
  display: inline-flex;
  align-items: center;
  color: var(--text-link);
  color: var(--text-faint);
}

.track-caret { color: var(--text-muted); transition: transform var(--t-base); display: inline-flex; }
.track.expanded .track-caret { transform: rotate(180deg); }

.track-detail { padding: var(--sp-100) var(--sp-200) var(--sp-400) var(--sp-800); }

.track-note { font-size: var(--fs-500); line-height: 1.6; }
.track-note-head { display: block; margin-bottom: var(--sp-100); }

.track-meta { font-size: var(--fs-300); color: var(--text-muted); margin-top: var(--sp-200); }

.song-links { display: flex; flex-wrap: wrap; gap: var(--sp-200); margin-top: var(--sp-300); }
.song-link { display: inline-flex; align-items: center; gap: var(--sp-100); }

/* ── Клипы ────────────────────────────────────────────── */

.vid-list { display: flex; flex-direction: column; gap: var(--sp-200); }

.vid-row {
  display: flex;
  align-items: center;
  gap: var(--sp-400);
  padding: var(--sp-300) var(--sp-400);
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-200);
  border: 1px solid transparent;
  border-left: 3px solid var(--acc);
  background: var(--win-bg);
  transition: border-color var(--t-base), transform var(--t-base);
}
.vid-row:hover { border-color: var(--acc); transform: translateX(3px); }
.vid-row:focus-visible { outline: 2px solid var(--nav-active); outline-offset: 2px; }

.vid-year {
  flex: 0 0 40px;
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.vid-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vid-t { font-size: var(--fs-500); font-weight: 500; }
.vid-meta { font-size: var(--fs-300); color: var(--text-muted); }
.vid-go { color: var(--text-muted); display: inline-flex; }

/* ── Документалки ─────────────────────────────────────── */

.doc-list { display: flex; flex-direction: column; gap: var(--sp-400); }

.doc-card {
  padding: var(--sp-500);
  border-radius: var(--radius-200);
  background: var(--win-bg);
  border: 1px solid var(--header-border);
  border-top: 3px solid var(--acc);
}

.doc-head { display: flex; gap: var(--sp-400); align-items: flex-start; margin-bottom: var(--sp-300); }
.doc-art {
  flex: 0 0 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-900);
  border-radius: calc(var(--radius-200) - 4px);
  background: linear-gradient(145deg, var(--acc) 0%, transparent 130%);
}
.doc-t { font-size: var(--fs-800); font-weight: 600; line-height: 1.25; }
.doc-meta { font-size: var(--fs-300); color: var(--text-muted); margin-top: 3px; line-height: 1.5; }

.doc-desc { font-size: var(--fs-500); line-height: 1.65; }

.doc-parts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-200);
  margin: var(--sp-300) 0;
}
.doc-parts li {
  font-size: var(--fs-200);
  letter-spacing: var(--track-1);
  padding: 3px var(--sp-200);
  border-radius: var(--radius-900);
  color: var(--text-muted);
  border: 1px solid var(--header-border);
}

.doc-why { font-size: var(--fs-400); line-height: 1.6; margin-top: var(--sp-300); color: var(--text-muted); }
.doc-why-head { display: block; margin-bottom: 3px; }

.doc-link { margin-top: var(--sp-400); display: inline-flex; align-items: center; gap: var(--sp-100); }

/* ── Футер ────────────────────────────────────────────── */

.ye-foot {
  margin-top: var(--sp-800);
  padding-top: var(--sp-500);
  border-top: 1px solid var(--panel-sep);
  font-size: var(--fs-300);
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
}
.ye-foot a { color: inherit; }

/* ── Поисковая выдача ─────────────────────────────────── */

.sr-label { display: block; font-size: var(--fs-500); }
.sr-sub { display: block; font-size: var(--fs-300); color: var(--text-muted); margin-top: 1px; }

/* ── Темовые оверрайды ────────────────────────────────── */

/* win95: никаких скруглений и градиентов — плоские bevel-панели. */
html[data-style="win95"] .album-art,
html[data-style="win95"] .album-head-art,
html[data-style="win95"] .doc-art {
  background: var(--acc);
  border-radius: 0;
}
html[data-style="win95"] .album-head { background: var(--win-bg); }
html[data-style="win95"] .cover { border-radius: 0; }

/* term: моноширинный каталог — числа и метки в верхнем регистре. */
html[data-style="term"] .album-name,
html[data-style="term"] .track-t,
html[data-style="term"] .vid-t,
html[data-style="term"] .doc-t { letter-spacing: var(--track-1); }

/* disco: свечение карточек, пилюли-теги. */
html[data-style="disco"] .album-card,
html[data-style="disco"] .doc-card {
  transition: transform var(--t-base), box-shadow var(--t-base);
}
html[data-style="disco"] .album-card:hover,
html[data-style="disco"] .doc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--nav-active), 0 12px 36px var(--accent-glow);
}
html[data-style="disco"] .album-name { font-weight: 800; }

/* ── Mobile ───────────────────────────────────────────── */

@media (max-width: 600px) {
  main { padding: 60px var(--sp-400) 140px; }
  .album-grid { grid-template-columns: 1fr; }
  .album-head { flex-direction: column; text-align: center; gap: var(--sp-300); }
  .album-head-art { flex-basis: auto; width: 120px; height: 120px; font-size: var(--emoji-md); }
  .album-head-title { text-align: center; }
  .track-detail { padding-left: var(--sp-300); }
  .ye-stats { gap: var(--sp-200) var(--sp-500); }
  .ye-stat b { font-size: var(--fs-800); }
  .song-links { gap: var(--sp-200); }
}