/*! RelaxingJazz.com · charts.css · "The RJ 20" (CHARTS page builder)
 * Every rule is scoped under .page--charts (the next page's stylesheet loads a moment before the router swaps
 * <main>). Colours come only from rj.css tokens, so Night and Day both work. Keyframes are prefixed rj20-.
 */

/* ===================================================================== hero: a record-sleeve "20" === */
.page--charts .rj20-hero {
  position: relative;
  /* the shared inner-page hero rhythm (C2): every eyebrow and H1 lands at the same y */
  padding-top: var(--page-hero-pad-top, clamp(3rem, 2rem + 4vw, 6rem));
  padding-bottom: var(--page-hero-pad-bottom, clamp(2rem, 1.5rem + 2vw, 3rem));
  overflow: hidden;
}
.page--charts .rj20-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;           /* the text never centres against the art */
  gap: var(--space-5);
}
.page--charts .rj20-hero__art { align-self: end; }
.page--charts .rj20-hero__text h1 { font-size: var(--page-hero-title, var(--step-6)); }
@media (min-width: 760px) {
  .page--charts .rj20-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-7); }
}
.page--charts .rj20-hero__text h1 { margin-top: var(--space-3); }
.page--charts .rj20-hero__lede { margin-top: var(--space-4); font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--text); }
.page--charts .rj20-hero__how { margin-top: var(--space-3); max-width: 54ch; color: var(--text-2); }
.page--charts .rj20-heart { color: var(--love); }
.page--charts .rj20-hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.page--charts .rj20-hero__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  color: var(--gold);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.page--charts .rj20-hero__links a:hover { color: var(--gold-2); text-decoration: underline; text-underline-offset: 0.3em; }

/* The art: a low moon, the numerals on the sea horizon, the Pitons in front, a faint reflection below. */
.page--charts .rj20-hero__art {
  position: relative;
  height: clamp(118px, 26vw, 300px);
  isolation: isolate;
  user-select: none;
}
.page--charts .rj20-hero__moon {
  position: absolute;
  right: 6%;
  top: 0;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, color-mix(in srgb, var(--gold-2) 55%, transparent), color-mix(in srgb, var(--gold) 12%, transparent) 58%, transparent 72%);
  opacity: 0.5;
  z-index: -2;
}
.page--charts .rj20-hero__num,
.page--charts .rj20-hero__reflect {
  position: absolute;
  right: 3%;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(6.5rem, 21vw, 18.5rem);
  line-height: 0.74;
  letter-spacing: -0.045em;
  white-space: nowrap;
  color: var(--gold);
}
.page--charts .rj20-hero__num { bottom: 24%; z-index: -1; }
.page--charts .rj20-hero__reflect {
  top: 76%;
  transform: scaleY(-1);
  opacity: 0.16;
  z-index: -1;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 48%);
  mask-image: linear-gradient(to top, #000 0%, transparent 48%);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .page--charts .rj20-hero__num {
    color: transparent;
    background: linear-gradient(180deg, var(--gold-2) 8%, var(--gold) 62%, color-mix(in srgb, var(--gold) 55%, transparent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
.page--charts .rj20-hero__sea {
  position: absolute;
  left: 0;
  right: 0;
  top: 76%;
  bottom: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 9%, transparent), transparent 85%);
  z-index: -2;
}
.page--charts .rj20-hero__sea::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--horizon);
}
.page--charts .rj20-hero__pitons {
  position: absolute;
  left: -6%;
  width: 74%;
  bottom: 24%;
  color: var(--pitons-ink);
  opacity: 0.96;
}

/* ===================================================================== layout ======================= */
.page--charts .rj20-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-7), 6vw, var(--space-8));
  padding-top: var(--space-4);
}
@media (min-width: 1080px) {
  .page--charts .rj20-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 356px); align-items: start; gap: clamp(var(--space-6), 4vw, var(--space-8)); }
}
.page--charts .rj20-aside { display: grid; gap: var(--space-5); align-content: start; }
/* Wide and tall enough for the whole poll above the player bar: it keeps you company down the long chart. */
@media (min-width: 1080px) and (min-height: 980px) {
  .page--charts .rj20-aside { align-self: stretch; }
  .page--charts .rj20-aside .sotw { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}
@media (min-width: 720px) and (max-width: 1079px) {
  .page--charts .sotw__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.page--charts .rj20-nojs {
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  color: var(--text-2);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
}
.page--charts .rj20-nojs a { color: var(--gold); }

/* ===================================================================== tabs + panels ================ */
.page--charts .rj20-tabs { margin-bottom: var(--space-6); }
.page--charts .rj20-panel { outline-offset: 8px; }
.page--charts .rj20-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-5);
}
.page--charts .rj20-panel__heading { min-width: 0; }
.page--charts .rj20-panel__title { font-size: var(--step-3); }
.page--charts .rj20-panel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.55em;
  margin-top: var(--space-2);
  color: var(--text-3);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
.page--charts .rj20-sep { color: var(--gold); opacity: 0.8; }
.page--charts .rj20-panel__tools { flex: 0 1 19rem; min-width: min(100%, 15rem); }
.page--charts .rj20-panel__tools .select { min-height: 44px; font-size: var(--step--1); }
.page--charts .rj20-days { justify-content: flex-start; }
@media (min-width: 720px) { .page--charts .rj20-days { justify-content: flex-end; } }
.page--charts .rj20-subhead {
  margin: var(--space-6) 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.page--charts .rj20-foot { margin-top: var(--space-5); max-width: 62ch; color: var(--text-3); font-size: var(--step--1); line-height: 1.55; }
.page--charts .rj20-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--gold) var(--tint), transparent);
  color: var(--text);
  font-size: var(--step--1);
}
.page--charts .rj20-note .icon { margin-top: 0.15em; color: var(--gold); }

/* ===================================================================== chart rows ================== */
.page--charts .rj20-list { display: block; margin: 0; padding: 0; list-style: none; }
.page--charts .rj20-row {
  position: relative;
  display: grid;
  grid-template-columns: 3.6rem auto minmax(0, 1fr) auto auto;
  grid-template-areas: "pos art main stats actions";
  align-items: center;
  gap: var(--space-2) clamp(var(--space-3), 1.8vw, var(--space-5));
  padding: var(--space-3) var(--space-2) var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  transition: background-color var(--dur-1) var(--ease);
}
.page--charts .rj20-row:hover { background: color-mix(in srgb, var(--surface-hover) 55%, transparent); }
.page--charts .rj20-row.is-on-air { background: linear-gradient(90deg, color-mix(in srgb, var(--live) 9%, transparent), transparent 70%); box-shadow: inset 2px 0 0 var(--live); }

.page--charts .rj20-row__pos { grid-area: pos; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.page--charts .rj20-row__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--text-2);
  font-variant-numeric: lining-nums tabular-nums;
}
.page--charts .rj20-row--top .rj20-row__num { color: var(--gold); font-style: italic; }
.page--charts .rj20-row__move .move { font-size: var(--step--2); }
.page--charts .rj20-row__art { grid-area: art; }
.page--charts .rj20-row__art .art { --art-size: 56px; box-shadow: var(--shadow-1), inset 0 0 0 1px var(--border); }
.page--charts .rj20-row__main { grid-area: main; min-width: 0; }
.page--charts .rj20-row__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text);
  font-weight: 500;
  line-height: 1.32;
}
.page--charts .rj20-row__artist { display: block; margin-top: 2px; overflow: hidden; color: var(--text-2); font-size: var(--step--1); line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.page--charts .rj20-row__artist a { color: inherit; text-decoration: none; }
.page--charts .rj20-row__artist a:hover { color: var(--gold); text-decoration: underline; }
.page--charts .rj20-row__album { display: block; overflow: hidden; color: var(--text-3); font-size: var(--step--2); font-style: italic; text-overflow: ellipsis; white-space: nowrap; }
.page--charts .rj20-row__kicker {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--gold);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.page--charts .rj20-row__stats {
  grid-area: stats;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  color: var(--text-3);
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.page--charts .rj20-row__sub { display: inline-flex; gap: 0.7em; }
.page--charts .rj20-loves { display: inline-flex; align-items: center; gap: 0.32em; color: var(--text); font-size: var(--step--1); font-weight: 500; }
.page--charts .rj20-loves__icon { width: 0.95em; height: 0.95em; vertical-align: 0; color: var(--love); }
.page--charts .rj20-stat--plays { color: var(--text); font-size: var(--step--1); font-weight: 500; }
.page--charts .rj20-row__actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.page--charts .rj20-row__vote { display: inline-flex; align-items: center; gap: var(--space-2); }
.page--charts .rj20-row__vote:empty { display: none; }
.page--charts .rj20-row__vote .love-btn__count { display: none; } /* the row already shows its own ♥ total */
.page--charts .rj20-row__aired {
  color: var(--text-3);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.page--charts .rj20-row__aired.is-live { color: var(--live); }

/* Number one: the sleeve's cover star */
.page--charts .rj20-row--first {
  grid-template-columns: 4.6rem auto minmax(0, 1fr) auto;
  grid-template-areas: "pos art main actions" "pos art stats actions";
  align-items: center;
  row-gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: clamp(var(--space-4), 2.5vw, var(--space-5));
  padding-left: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: var(--radius-l);
  background:
    radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--glow) 13%, transparent), transparent 62%),
    var(--surface-solid);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.page--charts .rj20-row--first::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  background: var(--horizon);
  opacity: 0.6;
}
.page--charts .rj20-row--first:hover { background: radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--glow) 16%, transparent), transparent 62%), var(--surface-hover); }
.page--charts .rj20-row--first .rj20-row__pos { align-self: start; }
.page--charts .rj20-row--first .rj20-row__num { font-size: var(--step-6); color: var(--gold); font-style: italic; }
.page--charts .rj20-row--first .rj20-row__art .art { --art-size: clamp(104px, 13vw, 160px); border-radius: var(--radius-m); box-shadow: var(--shadow-3), inset 0 0 0 1px var(--border); }
.page--charts .rj20-row--first .rj20-row__main { align-self: end; }
.page--charts .rj20-row--first .rj20-row__title { font-family: var(--font-display); font-size: var(--step-3); font-weight: 500; line-height: 1.12; }
.page--charts .rj20-row--first .rj20-row__artist { margin-top: var(--space-2); font-size: var(--step-0); }
.page--charts .rj20-row--first .rj20-row__album { font-size: var(--step--1); }
.page--charts .rj20-row--first .rj20-row__stats { flex-direction: row; flex-wrap: wrap; align-items: center; justify-self: start; align-self: start; gap: var(--space-2) var(--space-4); }
.page--charts .rj20-row--first .rj20-loves { font-size: var(--step-0); }
.page--charts .rj20-row--first .rj20-row__actions { align-self: start; }

/* Bubbling under: compact rows in a quiet drawer */
.page--charts .rj20-bubbling {
  margin-top: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: color-mix(in srgb, var(--surface-solid) 55%, transparent);
}
.page--charts .rj20-bubbling__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-l);
  cursor: pointer;
  list-style: none;
}
.page--charts .rj20-bubbling__summary::-webkit-details-marker { display: none; }
.page--charts .rj20-bubbling__summary:hover .rj20-bubbling__label { color: var(--gold); }
.page--charts .rj20-bubbling__label { font-family: var(--font-display); font-size: var(--step-1); transition: color var(--dur-1) var(--ease); }
.page--charts .rj20-bubbling__range { color: var(--text-3); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.page--charts .rj20-bubbling__chev { margin-left: auto; color: var(--gold); transition: transform var(--dur-2) var(--ease); }
.page--charts .rj20-bubbling[open] .rj20-bubbling__chev { transform: rotate(180deg); }
.page--charts .rj20-bubbling__body { padding: 0 var(--space-5) var(--space-3); }
.page--charts .rj20-bubbling__note { color: var(--text-3); font-size: var(--step--1); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.page--charts .rj20-list--compact .rj20-row { padding-block: var(--space-2); }
.page--charts .rj20-list--compact .rj20-row:last-child { border-bottom: 0; }
.page--charts .rj20-list--compact .rj20-row__num { font-size: var(--step-2); }
.page--charts .rj20-list--compact .rj20-row__art .art { --art-size: 44px; }
.page--charts .rj20-list--compact .rj20-row__album { display: none; }

/* ===================================================================== warming up + empty ========== */
.page--charts .rj20-warm {
  position: relative;
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  padding-bottom: clamp(var(--space-7), 6vw, var(--space-8));
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  border-radius: var(--radius-l);
  background:
    radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 70%),
    var(--surface-solid);
  overflow: hidden;
}
.page--charts .rj20-warm::after {
  content: "";
  position: absolute;
  right: -2%;
  bottom: 0;
  width: min(420px, 70%);
  aspect-ratio: 1200 / 160;
  background: var(--text-3);
  opacity: 0.22;
  -webkit-mask: url("../img/pitons.svg") center bottom / 100% 100% no-repeat;
  mask: url("../img/pitons.svg") center bottom / 100% 100% no-repeat;
}
.page--charts .rj20-warm__kicker { color: var(--gold); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.page--charts .rj20-warm__title { margin-top: var(--space-2); font-size: var(--step-4); }
.page--charts .rj20-warm__text { margin-top: var(--space-3); max-width: 56ch; color: var(--text-2); }
.page--charts .rj20-warm__actions { margin-top: var(--space-5); }
.page--charts .rj20-empty { padding-block: clamp(var(--space-6), 5vw, var(--space-8)); }
.page--charts .rj20-empty__actions { justify-content: center; }
.page--charts .rj20-empty--small { padding: var(--space-5) var(--space-4); }
.page--charts .rj20-empty--small .empty-state__msg { font-size: var(--step-0); }

/* ===================================================================== Song of the Week ============ */
.page--charts .sotw {
  position: relative;
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  border: 1px solid color-mix(in srgb, var(--coral) 30%, var(--border));
  border-radius: var(--radius-l);
  background:
    radial-gradient(110% 70% at 100% 0%, color-mix(in srgb, var(--coral) 11%, transparent), transparent 62%),
    var(--surface-solid);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}
.page--charts .sotw::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--coral), transparent);
  opacity: 0.7;
}
.page--charts .sotw__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--coral);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.page--charts .sotw__kicker .icon { width: 1.1em; height: 1.1em; }
.page--charts .sotw__title { margin-top: var(--space-2); font-size: var(--step-3); }
.page--charts .sotw__intro { margin-top: var(--space-3); color: var(--text-2); font-size: var(--step--1); line-height: 1.6; }
.page--charts .sotw__winner { margin-top: var(--space-3); color: var(--text-2); font-family: var(--font-display); font-style: italic; font-size: var(--step-1); line-height: 1.4; }
.page--charts .sotw__winner strong { color: var(--gold); font-weight: 400; }
.page--charts .sotw__status { display: flex; align-items: center; gap: 0.45em; margin-top: var(--space-3); color: var(--text-3); font-size: var(--step--2); font-weight: 500; letter-spacing: 0.02em; }
.page--charts .sotw__status .icon { width: 1.05em; height: 1.05em; color: var(--coral); }
.page--charts .sotw__status.is-closed .icon { color: var(--gold); }
.page--charts .sotw__options { display: grid; gap: var(--space-2); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.page--charts .sotw-opt {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  overflow: hidden;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.page--charts button.sotw-opt:hover { border-color: var(--coral); background: var(--surface-hover); }
.page--charts button.sotw-opt:active { transform: translateY(1px); }
.page--charts button.sotw-opt[aria-disabled="true"] { opacity: 0.6; }
.page--charts button.sotw-opt[aria-disabled="true"]:hover { border-color: var(--border-strong); background: transparent; }
.page--charts .sotw-opt.is-busy { opacity: 0.7; cursor: progress; }
.page--charts .sotw-opt.is-mine { border-color: var(--coral); background: color-mix(in srgb, var(--coral) var(--tint), transparent); }
.page--charts .sotw-opt.is-winner { border-color: var(--gold); background: color-mix(in srgb, var(--gold) var(--tint), transparent); }
.page--charts .sotw-opt.is-static { border-color: var(--border); }
.page--charts .sotw-opt.is-static.is-winner { border-color: var(--gold); }
.page--charts .sotw-opt__art .art { --art-size: 48px; border-radius: 6px; }
.page--charts .sotw-opt__text { min-width: 0; }
.page--charts .sotw-opt__title { display: block; font-weight: 500; line-height: 1.3; }
.page--charts .sotw-opt__artist { display: block; overflow: hidden; color: var(--text-2); font-size: var(--step--1); text-overflow: ellipsis; white-space: nowrap; }
.page--charts .sotw-opt__tags { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: 3px; }
.page--charts .sotw-opt__tag { display: inline-flex; align-items: center; gap: 0.3em; color: var(--coral); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.page--charts .sotw-opt__tag .icon { width: 1em; height: 1em; }
.page--charts .sotw-opt__tag--win { color: var(--gold); }
.page--charts .sotw-opt__pct { color: var(--text); font-size: var(--step--1); font-weight: 600; font-variant-numeric: tabular-nums; }
.page--charts .sotw-opt__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--text-3) 22%, transparent); }
.page--charts .sotw-opt__fill {
  --pct: 0;
  position: absolute;
  inset: 0;
  background: var(--text-3);
  transform: scaleX(var(--pct));
  transform-origin: left center;
  transition: transform var(--dur-3) var(--ease);
}
.page--charts .sotw-opt.is-mine .sotw-opt__fill { background: var(--coral); }
.page--charts .sotw-opt.is-winner .sotw-opt__fill { background: var(--gold); }
.page--charts .sotw__total { margin-top: var(--space-4); color: var(--text-3); font-size: var(--step--1); line-height: 1.55; }
.page--charts .sotw__note { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); color: var(--text-2); font-size: var(--step--1); line-height: 1.55; }
.page--charts .sotw__skeleton { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.page--charts .sotw__skel-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-m); }
.page--charts .sotw__skel-row .skeleton--art { width: 48px; aspect-ratio: 1; }
.page--charts .sotw .error-state, .page--charts .sotw .empty-state { margin-top: var(--space-4); padding: var(--space-5) var(--space-4); }

/* ===================================================================== How voting works ============= */
.page--charts .rj20-how {
  margin-top: clamp(var(--space-7), 6vw, var(--space-8));
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface-solid);
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}
.page--charts .rj20-how__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-l);
  cursor: pointer;
  list-style: none;
  font-weight: 500;
}
.page--charts .rj20-how__summary::-webkit-details-marker { display: none; }
.page--charts .rj20-how__label { display: inline-flex; align-items: center; gap: 0.6em; margin: 0; font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; line-height: 1.3; color: inherit; transition: color var(--dur-1) var(--ease); }
.page--charts .rj20-how__label .icon { color: var(--gold); }
.page--charts .rj20-how__summary:hover .rj20-how__label { color: var(--gold); }
.page--charts .rj20-how__sign { position: relative; flex: none; width: 14px; height: 14px; }
.page--charts .rj20-how__sign::before,
.page--charts .rj20-how__sign::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transition: transform var(--dur-2) var(--ease);
}
.page--charts .rj20-how__sign::after { transform: rotate(90deg); }
.page--charts .rj20-how[open] .rj20-how__sign::after { transform: rotate(0deg); }
.page--charts .rj20-how__body { padding: 0 var(--space-5) var(--space-5); }
.page--charts .rj20-how__list { display: grid; gap: var(--space-4); margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--border); list-style: none; counter-reset: rj20-how; }
.page--charts .rj20-how__list > li { position: relative; padding-left: 2.2rem; counter-increment: rj20-how; }
@media (min-width: 760px) {
  .page--charts .rj20-how__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-7); }
}
.page--charts .rj20-how__list > li::before {
  content: counter(rj20-how);
  position: absolute;
  left: 0;
  top: -0.05em;
  color: var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1;
}
.page--charts .rj20-how__list h3 { font-family: var(--font-ui); font-size: var(--step-0); font-weight: 600; line-height: 1.35; }
.page--charts .rj20-how__list p { margin-top: var(--space-1); color: var(--text-2); font-size: var(--step--1); line-height: 1.6; }
.page--charts .rj20-how__list a { color: var(--gold); }
.page--charts .rj20-how__list a:hover { color: var(--gold-2); }

/* ===================================================================== small screens ============== */
@media (max-width: 599px) {
  .page--charts .rj20-row {
    grid-template-columns: 3.1rem auto minmax(0, 1fr) auto;
    grid-template-areas: "pos art main actions" "pos art stats actions";
    row-gap: 2px;
    column-gap: var(--space-3);
  }
  .page--charts .rj20-row__num { font-size: var(--step-3); }
  .page--charts .rj20-row__move .move { font-size: 0.6rem; letter-spacing: 0.02em; }
  .page--charts .rj20-row__art .art { --art-size: 48px; }
  .page--charts .rj20-row__album { display: none; }
  .page--charts .rj20-row__stats { flex-direction: row; flex-wrap: wrap; align-items: center; justify-self: start; gap: 0 var(--space-3); }
  .page--charts .rj20-loves { font-size: var(--step--2); }
  .page--charts .rj20-stat--plays { font-size: var(--step--2); }
  .page--charts .rj20-stat--lw { display: none; }
  .page--charts .rj20-row__actions { flex-direction: column-reverse; align-items: flex-end; gap: 0; }
  .page--charts .rj20-row__vote { flex-direction: column; gap: 2px; }
  .page--charts .rj20-row__aired { font-size: 0.66rem; }
  .page--charts .rj20-row--first {
    grid-template-columns: 3.1rem auto minmax(0, 1fr);
    grid-template-areas: "pos art main" "pos art stats" "pos art actions";
    padding: var(--space-4) var(--space-3) var(--space-3) 0;
    row-gap: var(--space-2);
  }
  .page--charts .rj20-row--first .rj20-row__num { font-size: var(--step-5); }
  .page--charts .rj20-row--first .rj20-row__art .art { --art-size: 92px; }
  .page--charts .rj20-row--first .rj20-row__title { font-size: var(--step-2); }
  .page--charts .rj20-row--first .rj20-row__artist { font-size: var(--step--1); }
  .page--charts .rj20-row--first .rj20-row__actions { flex-direction: row; justify-content: flex-start; margin-left: -10px; }
  .page--charts .rj20-panel__tools { flex: 1 1 100%; }
  .page--charts .rj20-row--first .rj20-row__vote { flex-direction: row; }
  .page--charts .rj20-bubbling__summary, .page--charts .rj20-bubbling__body { padding-inline: var(--space-4); }
  .page--charts .rj20-how__summary, .page--charts .rj20-how__body { padding-inline: var(--space-4); }
  .page--charts .rj20-hero__art { height: 104px; margin-top: calc(-1 * var(--space-3)); }
  .page--charts .rj20-hero__num, .page--charts .rj20-hero__reflect { font-size: 5.6rem; }
  .page--charts .rj20-hero__pitons { width: 70%; }
  .page--charts .rj20-row__aired { white-space: normal; max-width: 4.6em; text-align: right; line-height: 1.15; }
}

/* ===================================================================== motion (calm, optional) ===== */
@media (prefers-reduced-motion: no-preference) {
  .page--charts .rj20-hero__num { animation: rj20-surface 1.4s var(--ease) both; }
  .page--charts .rj20-hero__reflect { animation: rj20-reflect 1.4s var(--ease) both; }
  .page--charts .rj20-hero__sea::before { transform-origin: center; animation: rj20-horizon 1.6s var(--ease) both; }
  .page--charts .rj20-panel:not([hidden]) { animation: rj20-fade var(--dur-2) var(--ease); }
  .page--charts .rj20-list.is-entering > .rj20-row { animation: rj20-rise var(--dur-3) var(--ease) both; animation-delay: calc(var(--i, 0) * 32ms); }
}
@keyframes rj20-surface { from { opacity: 0; transform: translateY(10%); } to { opacity: 1; transform: none; } }
@keyframes rj20-reflect { from { opacity: 0; } to { opacity: 0.16; } }
@keyframes rj20-horizon { from { transform: scaleX(0.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rj20-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rj20-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }