/* The six stories: charts, rows, suggestion records. */

/* ---------- now playing ---------- */

.now {
  display: flex; align-items: center; gap: 10px; align-self: flex-start; max-width: 100%;
  padding: 6px 14px 6px 6px; border-radius: 99px; margin-bottom: 22px;
}
.now img, .now .ph { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.now .t { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.now .t span { font-weight: 400; color: var(--ink-2); }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; flex: none; }
.eq i { width: 3px; border-radius: 2px; background: var(--accent); animation: eq 1s var(--ease) infinite alternate; }
.eq i:nth-child(2) { animation-delay: -.35s; }
.eq i:nth-child(3) { animation-delay: -.7s; }
@keyframes eq { from { height: 3px; } to { height: 14px; } }

/* ---------- day strip (24 hours) ---------- */

.strip { padding: 18px 16px 12px; margin-top: 26px; }
.strip-bars { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 88px; }
.strip-bars i {
  display: block; border-radius: 3px; min-height: 3px;
  background: rgba(42, 36, 30, .1);
  transform-origin: bottom; transition: transform 1s var(--ease-out); transition-delay: calc(var(--k) * 18ms + 200ms);
}
.strip-bars i.on { background: var(--accent); opacity: .55; }
.strip-bars i.peak { opacity: 1; }
.strip-bars i.later { background: transparent; box-shadow: inset 0 0 0 1px rgba(42, 36, 30, .08); }
.page.pre .strip-bars i, .page.pre .bars i { transform: scaleY(.04); }
.axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 8px; font-variant-numeric: tabular-nums; }

/* ---------- facts ---------- */

.facts { margin-top: 12px; padding: 4px 16px; }
.fact { display: flex; align-items: center; gap: 12px; min-height: 58px; }
.fact + .fact { border-top: 1px solid var(--line); }
.fact .k { font-size: 14px; color: var(--muted); width: 64px; flex: none; }
.fact .v { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fact .v small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-2); }
.fact img, .fact .ph { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; }

.ph { background: linear-gradient(135deg, var(--accent-soft), rgba(255,255,255,.6)); display: grid; place-items: center; color: var(--accent); }
.ph svg { width: 45%; height: 45%; }

/* ---------- bar charts (week, months) ---------- */

.chart { padding: 30px 16px 14px; margin-top: 22px; }
.bars { display: grid; gap: 8px; align-items: end; height: 190px; }
.bars.w7 { grid-template-columns: repeat(7, 1fr); }
.bars.w12 { grid-template-columns: repeat(12, 1fr); gap: 5px; height: 160px; }
.bars button {
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
  position: relative; border-radius: 10px;
}
.bars i {
  display: block; position: relative; border-radius: 9px 9px 6px 6px; min-height: 4px;
  background: var(--accent); opacity: .42;
  transform-origin: bottom; transition: transform 1.1s var(--ease-out), opacity .3s ease; transition-delay: calc(var(--k) * 45ms + 180ms);
}
.bars .cur i, .bars button[aria-pressed="true"] i { opacity: 1; }
.bars .ghost {
  position: absolute; left: 18%; right: 18%; bottom: 0; border-radius: 8px 8px 5px 5px;
  background: var(--accent); opacity: .14; pointer-events: none;
}
.bars .future i { background: rgba(42, 36, 30, .07); opacity: 1; }
.bars .val {
  position: absolute; left: 50%; bottom: calc(var(--h) + 6px); transform: translateX(-50%);
  font-size: 11.5px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .3s ease;
}
.bars .cur .val, .bars button[aria-pressed="true"] .val { opacity: 1; }
.bars.w12 .val { font-size: 10.5px; }
.labels { display: grid; margin-top: 8px; font-size: 12px; color: var(--muted); text-align: center; }
.labels.w7 { grid-template-columns: repeat(7, 1fr); gap: 8px; }
.labels.w12 { grid-template-columns: repeat(12, 1fr); gap: 5px; }
.labels .cur { color: var(--ink); font-weight: 700; }
.caption { margin-top: 14px; font-size: 15px; color: var(--ink-2); min-height: 1.45em; }
.caption b { color: var(--ink); }

/* ---------- all time ---------- */

.split { padding: 18px 16px; margin-top: 24px; }
.split-bar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; gap: 3px; }
.split-bar i { display: block; height: 100%; border-radius: 99px; transition: flex-grow 1.2s var(--ease-out); }
.split-key { display: flex; gap: 18px; margin-top: 12px; font-size: 14px; flex-wrap: wrap; }
.split-key span { display: inline-flex; align-items: center; gap: 7px; }
.split-key i { width: 10px; height: 10px; border-radius: 50%; }
.years { margin-top: 10px; padding: 6px 16px; }
.year { display: grid; grid-template-columns: 48px 1fr 64px; align-items: center; gap: 12px; min-height: 40px; font-size: 14px; font-variant-numeric: tabular-nums; }
.year i { height: 8px; border-radius: 99px; background: var(--accent); opacity: .5; transform-origin: left; transition: transform 1.1s var(--ease-out); }
.year:last-child i { opacity: 1; }
.page.pre .year i { transform: scaleX(0); }
.year span:last-child { text-align: right; color: var(--ink-2); }

/* ---------- top ---------- */

.seg-ctl { display: grid; grid-template-columns: repeat(4, 1fr); padding: 3px; border-radius: 13px; margin: 18px 0 20px; position: relative; }
.seg-ctl button { position: relative; z-index: 1; min-height: 36px; font-size: 13.5px; font-weight: 600; border-radius: 10px; color: var(--ink-2); transition: color .3s ease; }
.seg-ctl button[aria-pressed="true"] { color: var(--ink); }
.seg-ctl .thumb {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 4);
  background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(60, 44, 28, .12), 0 4px 12px rgba(60, 44, 28, .06);
  transform: translateX(calc(var(--at, 0) * 100%)); transition: transform .5s var(--ease);
}
.hero-artist { display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: end; }
.hero-artist img, .hero-artist .ph { width: 132px; height: 132px; border-radius: 24px; object-fit: cover; box-shadow: var(--shadow-lift); }
.hero-artist .n { font: 700 30px/1.02 var(--display); letter-spacing: -.03em; overflow-wrap: anywhere; }
.hero-artist .s { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.rank { counter-reset: r; padding: 4px 14px; margin-top: 16px; }
.row { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.row + .row { border-top: 1px solid var(--line); }
.row .pos { width: 18px; font: 700 15px/1 var(--display); color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.row img, .row .ph { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; flex: none; }
.row .who { flex: 1; min-width: 0; }
.row .who b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .who span { display: block; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .amt { font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- for you ---------- */

.recs { display: grid; gap: 12px; margin-top: 20px; }
.rec { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; padding: 12px; border-radius: 24px; }
.rec .cover { position: relative; width: 76px; height: 76px; }
.rec .cover img, .rec .cover .ph { width: 100%; height: 100%; border-radius: 16px; object-fit: cover; }
.rec .n { font: 700 18px/1.15 var(--display); letter-spacing: -.015em; }
.rec .why { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.rec .song { font-size: 13px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec .acts { display: flex; flex-direction: column; gap: 6px; }
.play {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: #FFF8EF; box-shadow: 0 6px 16px rgba(42, 36, 30, .22);
  transition: transform .35s var(--ease), background-color .3s ease;
}
.play svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.play:active { transform: scale(.9); transition-duration: .1s; }
.play[disabled] { opacity: .25; box-shadow: none; }
.play.on { background: var(--accent); }
.open { width: 44px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-2); }
.ring { position: absolute; inset: -4px; border-radius: 20px; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.rec.playing .ring { opacity: 1; }
.ring rect { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.rec-empty { padding: 22px 18px; margin-top: 20px; }
.rec-empty p { margin: 0 0 12px; color: var(--ink-2); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 16px; font-weight: 600; font-size: 16px;
  transition: transform .35s var(--ease), background-color .3s ease, box-shadow .35s var(--ease);
}
.btn:active { transform: scale(.96); transition-duration: .1s; }
.btn-ink { background: var(--ink); color: #FFF8EF; box-shadow: 0 2px 4px rgba(42, 36, 30, .16), 0 10px 26px rgba(42, 36, 30, .18); }
.btn-glass { background: var(--glass-hi); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.more { align-self: center; margin-top: 18px; }

.empty-day { margin-top: 26px; padding: 18px 16px; }
.empty-day p { margin: 0; color: var(--ink-2); }
.empty-day b { color: var(--ink); }