/* ==========================================================================
   Beattier v4 Pro components: live HTML rebuilds of the Pro features.
   Sizes scale with --u (one app point). Colours from tokens.css only.
   ========================================================================== */

/* ---- Pro badge ----------------------------------------------------------- */
.pro-badge {
  display: inline-flex; align-items: center; height: calc(26 * var(--u)); padding: 0 calc(11 * var(--u));
  border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: italic;
  font-weight: 900; font-size: calc(13 * var(--u)); letter-spacing: 0.02em;
}
.on-violet .pro-badge, .pro-badge--invert { background: var(--white); color: var(--violet-500); }

/* ---- iPhone: titanium frame, bezel, buttons, lock screen ------------------ */
.lock {
  position: relative; width: calc(330 * var(--u)); aspect-ratio: 330 / 690;
  border-radius: calc(58 * var(--u)); padding: calc(3.5 * var(--u));
  background: var(--titanium);
  box-shadow: var(--shadow-float), inset 0 0 0 calc(0.75 * var(--u)) var(--titanium-edge);
  color: var(--on-photo);
}
.lock__btn { position: absolute; width: calc(3.5 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--titanium); }
.lock__btn--action { left: calc(-2.5 * var(--u)); top: calc(112 * var(--u)); height: calc(30 * var(--u)); }
.lock__btn--up { left: calc(-2.5 * var(--u)); top: calc(166 * var(--u)); height: calc(54 * var(--u)); }
.lock__btn--down { left: calc(-2.5 * var(--u)); top: calc(232 * var(--u)); height: calc(54 * var(--u)); }
.lock__btn--side { right: calc(-2.5 * var(--u)); top: calc(196 * var(--u)); height: calc(86 * var(--u)); }
.lock__screen {
  position: relative; height: 100%; overflow: hidden;
  border: calc(9 * var(--u)) solid var(--black); border-radius: calc(54.5 * var(--u));
  background: var(--black); isolation: isolate;
}
.lock__wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.lock__screen::before { content: ""; position: absolute; inset: 0; background: var(--scrim); z-index: -1; }
.lock__status { display: flex; align-items: center; justify-content: space-between; height: calc(52 * var(--u)); padding: 0 calc(22 * var(--u)) 0 calc(30 * var(--u)); font-weight: 600; font-size: calc(15 * var(--u)); }
.lock__icons { display: flex; align-items: center; gap: calc(5 * var(--u)); }
.lock__icons svg { height: calc(11 * var(--u)); width: auto; fill: currentColor; }
.lock__island {
  position: absolute; left: 50%; top: calc(11 * var(--u)); transform: translateX(-50%);
  width: calc(100 * var(--u)); height: calc(31 * var(--u));
  border-radius: var(--radius-pill); background: var(--black);
  display: flex; align-items: center; justify-content: space-between; padding: 0 calc(6 * var(--u));
}
.lock__island img { width: calc(21 * var(--u)); height: calc(21 * var(--u)); border-radius: calc(6 * var(--u)); object-fit: cover; }
.lock__island span { font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: italic; font-weight: 900; font-size: calc(12 * var(--u)); color: var(--violet-300); padding-right: calc(5 * var(--u)); }
.lock__date { text-align: center; margin-top: calc(14 * var(--u)); font-weight: 600; font-size: calc(18 * var(--u)); opacity: 0.92; }
.lock__time {
  text-align: center; font-family: var(--font-ios); font-weight: 700;
  font-size: calc(96 * var(--u)); line-height: 1; letter-spacing: -0.035em; margin-top: calc(2 * var(--u));
  opacity: 0.96;
}
.lock__dock { position: absolute; left: calc(24 * var(--u)); right: calc(24 * var(--u)); bottom: calc(30 * var(--u)); display: flex; justify-content: space-between; }
.lock__dock span { width: calc(50 * var(--u)); height: calc(50 * var(--u)); border-radius: 50%; background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: grid; place-items: center; }
.lock__dock svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); fill: currentColor; }
.lock__home { position: absolute; left: 50%; bottom: calc(8 * var(--u)); transform: translateX(-50%); width: calc(134 * var(--u)); height: calc(5 * var(--u)); border-radius: 9px; background: var(--on-photo); }
.live {
  position: absolute; left: calc(8 * var(--u)); right: calc(8 * var(--u)); bottom: calc(96 * var(--u));
  background: var(--live-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-radius: calc(26 * var(--u)); padding: calc(12 * var(--u)); color: var(--white);
}
.live__top { display: flex; gap: calc(10 * var(--u)); align-items: center; }
.live__top img { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(8 * var(--u)); object-fit: cover; }
.live__title { flex: 1; min-width: 0; }
.live__title b { display: block; font-size: calc(15 * var(--u)); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live__title small { display: block; font-size: calc(12.5 * var(--u)); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live__now { font-weight: 600; font-size: calc(12.5 * var(--u)); color: var(--band); white-space: nowrap; }
.live__skip { display: inline-flex; align-items: center; height: calc(28 * var(--u)); padding: 0 calc(11 * var(--u)); border-radius: var(--radius-pill); background: var(--glass); font-weight: 600; font-size: calc(13 * var(--u)); white-space: nowrap; }
.live__keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(6 * var(--u)); margin-top: calc(10 * var(--u)); }
.live__keys span {
  display: grid; place-items: center; height: calc(36 * var(--u)); border-radius: calc(11 * var(--u));
  background: color-mix(in srgb, var(--band) 24%, var(--black)); color: var(--band);
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: italic; font-weight: 900; font-size: calc(15 * var(--u));
}

/* ---- rating history chart ---------------------------------------------- */
.history { background: var(--card); border-radius: calc(28 * var(--u)); padding: calc(22 * var(--u)); color: var(--text); }
.history__head { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.history__head img { width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: calc(12 * var(--u)); object-fit: cover; }
.history__head b { display: block; font-size: calc(17 * var(--u)); line-height: 1.2; }
.history__head small { color: var(--text-2); font-size: calc(13.5 * var(--u)); }
.history__head .score { margin-left: auto; }
.history svg { display: block; width: 100%; height: auto; overflow: visible; }
.history .grid line { stroke: var(--hairline); stroke-width: 1; }
.history .grid text { fill: var(--text-3); font-size: 11px; font-family: var(--font-body); font-weight: 600; }
.history .path { fill: none; stroke: var(--text-3); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 6; }
.history__log { display: grid; gap: calc(6 * var(--u)); margin-top: calc(16 * var(--u)); }
.history__log div { display: grid; grid-template-columns: calc(80 * var(--u)) auto 1fr; gap: calc(12 * var(--u)); align-items: center; font-size: calc(13.5 * var(--u)); color: var(--text-2); font-weight: 500; padding: calc(8 * var(--u)) calc(10 * var(--u)); background: var(--card); border-radius: calc(14 * var(--u)); }
.history__log .score { --u: inherit; }
.history .pt circle { fill: var(--band); stroke: var(--card); stroke-width: 4; }
.history .pt text {
  fill: var(--band); font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-style: italic; font-weight: 900; font-size: 20px; letter-spacing: -0.02em;
}
.history .pt .when { fill: var(--text-3); font-family: var(--font-body); font-style: normal; font-weight: 600; font-size: 11px; letter-spacing: 0; }

/* ---- widgets ------------------------------------------------------------ */
.widget {
  text-align: left;
  background: var(--card-raised); border-radius: calc(24 * var(--u));
  box-shadow: var(--shadow-float); color: var(--text); overflow: hidden; position: relative;
}
.widget--s { width: calc(170 * var(--u)); height: calc(170 * var(--u)); }
.widget--m { width: calc(364 * var(--u)); height: calc(170 * var(--u)); }
.widget__pad { padding: calc(16 * var(--u)); height: 100%; display: flex; flex-direction: column; }
.widget__cap { font-size: calc(11 * var(--u)); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.w-stats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)) calc(10 * var(--u)); margin-top: auto; }
.w-stats__grid b {
  display: block; font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: italic;
  font-weight: 900; font-size: calc(24 * var(--u)); line-height: 1; letter-spacing: -0.03em;
}
.w-stats__grid b[data-band] { color: var(--band); }
.w-stats__grid span { font-size: calc(11.5 * var(--u)); color: var(--text-2); font-weight: 500; }
.w-recent__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--u)); margin-top: auto; }
.w-recent__row div { position: relative; }
.w-recent__row img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(12 * var(--u)); }
.w-recent__row .score { --u: inherit; position: absolute; left: calc(5 * var(--u)); bottom: calc(5 * var(--u)); height: calc(24 * var(--u)); min-width: 0; padding: 0 calc(8 * var(--u)); font-size: calc(13 * var(--u)); background: var(--card-raised); }
.w-aotd { display: grid; grid-template-columns: calc(136 * var(--u)) 1fr; gap: calc(16 * var(--u)); align-items: center; padding: calc(17 * var(--u)); }
.w-aotd img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(12 * var(--u)); }
.w-aotd__title { font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: normal; font-weight: 800; font-size: calc(18 * var(--u)); line-height: 1.12; letter-spacing: -0.02em; margin-top: calc(8 * var(--u)); }
.w-aotd__artist { color: var(--accent-text); font-weight: 600; font-size: calc(14 * var(--u)); margin-top: calc(4 * var(--u)); }
.w-aotd__score { display: flex; align-items: baseline; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--text-2); }
.w-aotd__score b { font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: italic; font-weight: 900; font-size: calc(32 * var(--u)); line-height: 1; letter-spacing: -0.03em; color: var(--band); }

/* ---- era review ----------------------------------------------------------- */
.era { background: var(--card); border-radius: calc(30 * var(--u)); padding: calc(22 * var(--u)); color: var(--text); }
.era__year {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: italic; font-weight: 900;
  font-size: calc(96 * var(--u)); line-height: 0.82; letter-spacing: -0.05em; color: var(--accent-text);
}
.era__sub { color: var(--text-2); font-size: calc(14 * var(--u)); font-weight: 500; margin: calc(8 * var(--u)) 0 calc(16 * var(--u)); }
.era__pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); }
.era__pick { background: var(--card-raised); border-radius: calc(18 * var(--u)); padding: calc(10 * var(--u)); }
.era__pick small { display: block; font-size: calc(11.5 * var(--u)); font-weight: 700; color: var(--text-3); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: calc(8 * var(--u)); }
.era__pick img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(12 * var(--u)); }
.era__pick div { display: flex; align-items: center; justify-content: space-between; gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); }
.era__pick b { font-size: calc(14 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.era__pick .score { --u: inherit; }
.era .dist__bar { margin-top: calc(16 * var(--u)); height: calc(10 * var(--u)); }

/* ---- collections ---------------------------------------------------------- */
.coll { width: calc(170 * var(--u)); color: var(--text); }
.coll__cover { aspect-ratio: 1; border-radius: calc(22 * var(--u)); overflow: hidden; position: relative; box-shadow: var(--shadow-soft); }
.coll__cover--grad { background: var(--violet-500); }
.coll__cover--grad span {
  position: absolute; left: calc(14 * var(--u)); bottom: calc(12 * var(--u)); color: var(--white);
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: italic; font-weight: 900;
  font-size: calc(30 * var(--u)); line-height: 0.9; letter-spacing: -0.03em;
}
.coll__cover--mosaic { display: grid; grid-template-columns: 1fr 1fr; }
.coll__cover--mosaic img, .coll__cover--photo img { width: 100%; height: 100%; object-fit: cover; }
.coll b { display: block; margin-top: calc(10 * var(--u)); font-size: calc(15 * var(--u)); }
.coll small { color: var(--text-2); font-size: calc(13 * var(--u)); }

/* ---- compilation ------------------------------------------------------------ */
.comp { background: var(--card); border-radius: calc(28 * var(--u)); padding: calc(18 * var(--u)); color: var(--text); }
.comp__head { display: flex; gap: calc(12 * var(--u)); align-items: center; margin-bottom: calc(8 * var(--u)); }
.comp__head img { width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: calc(12 * var(--u)); object-fit: cover; }
.comp__head b { display: block; font-size: calc(17 * var(--u)); }
.comp__head small { color: var(--text-2); font-size: calc(13 * var(--u)); }
.comp .track { grid-template-columns: calc(34 * var(--u)) 1fr auto; }
.comp .track img { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(8 * var(--u)); object-fit: cover; }
.comp .track small { display: block; color: var(--text-3); font-size: calc(12 * var(--u)); font-weight: 500; }
.link-chip { display: inline-flex; gap: 4px; align-items: center; color: var(--accent-text); font-weight: 600; }

/* ---- profile -------------------------------------------------------------- */
.profile { width: calc(330 * var(--u)); background: var(--card-raised); border-radius: calc(30 * var(--u)); overflow: hidden; box-shadow: var(--shadow-float); color: var(--text); }
.profile__banner { height: calc(110 * var(--u)); background: var(--violet-500); }
.profile__body { padding: 0 calc(18 * var(--u)) calc(18 * var(--u)); }
.profile__avatar {
  width: calc(76 * var(--u)); height: calc(76 * var(--u)); border-radius: 50%; margin-top: calc(-38 * var(--u));
  background: var(--accent); color: var(--white); display: grid; place-items: center;
  border: calc(4 * var(--u)) solid var(--card-raised);
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: italic; font-weight: 900; font-size: calc(32 * var(--u));
}
.profile__name { font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: italic; font-weight: 900; font-size: calc(24 * var(--u)); letter-spacing: -0.03em; margin-top: calc(8 * var(--u)); }
.profile__handle { color: var(--text-2); font-size: calc(13.5 * var(--u)); }
.profile__mod { background: var(--card); border-radius: calc(18 * var(--u)); padding: calc(12 * var(--u)); margin-top: calc(12 * var(--u)); }
.profile__mod small { display: block; font-size: calc(11.5 * var(--u)); font-weight: 700; color: var(--text-3); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: calc(8 * var(--u)); }
.profile__covers { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--u)); }
.profile__covers img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(10 * var(--u)); }
.profile__decades { display: flex; align-items: flex-end; gap: calc(6 * var(--u)); height: calc(46 * var(--u)); }
.profile__decades span { flex: 1; background: var(--accent); border-radius: calc(5 * var(--u)); opacity: 0.85; }
.profile__decades-l { display: flex; gap: calc(6 * var(--u)); margin-top: calc(6 * var(--u)); }
.profile__decades-l i { flex: 1; text-align: center; font-style: normal; font-size: calc(11 * var(--u)); color: var(--text-3); font-weight: 600; }

/* ---- plans ------------------------------------------------------------------ */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.plan { background: var(--card); border-radius: 32px; padding: 30px; color: var(--text); position: relative; }
.plan--hl { background: var(--accent); color: var(--white); --text-2: rgba(255, 255, 255, 0.8); }
.plan__name { font-family: var(--font-display); font-stretch: var(--display-stretch); font-style: italic; font-weight: 900; font-size: 40px; letter-spacing: -0.035em; line-height: 1; }
.plan p { color: var(--text-2); margin: 12px 0 0; font-size: 16px; }
.plan__tag { position: absolute; top: 26px; right: 26px; }
.plan ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; font-weight: 500; font-size: 15px; }
.plan li::before { content: "✓"; display: inline-block; width: 22px; font-weight: 700; color: var(--accent-text); }
.plan--hl li::before { color: var(--white); }

@media (max-width: 760px) {
  .plans { grid-template-columns: 1fr; }
  .plan { padding: 24px; border-radius: 28px; }
  .plan__name { font-size: 32px; }
}