/*
 * Charts and ranked lists for blog posts, made in the Studio draft editor.
 * Linked from a post page by scripts/new-post.mjs when its body has one.
 *
 * The markup is plain HTML so translation only touches the visible text:
 *   <figure class="vs-chart vs-chart--bar|column|line|donut"> with a
 *   <figcaption> (title + source note) and an <ol class="vs-chart-rows"> of
 *   <li data-value style="--v:<0-100%>;--c:<color>"> rows (label, value, note).
 *   Line charts add an <svg class="vs-line"> polyline; donuts add a
 *   <div class="vs-donut"> with a conic-gradient.
 *   <ol class="vs-rank"> rows: name, optional stat, optional note.
 */

.vs-chart {
  --vs-panel: var(--panel, #121017);
  --vs-line: var(--line, rgba(236, 234, 242, 0.09));
  --vs-text: var(--text, #eceaf2);
  --vs-muted: var(--muted, #908da1);
  --vs-track: rgba(236, 234, 242, 0.07);
  margin: 28px 0;
  padding: 20px 22px 18px;
  background: var(--vs-panel);
  border: 1px solid var(--vs-line);
  border-radius: 14px;
  font-variant-numeric: tabular-nums;
}
.vs-chart figcaption { display: flex; flex-direction: column; gap: 3px; margin-bottom: 18px; }
.vs-chart-title { font-size: 17px; font-weight: 700; color: var(--vs-text); line-height: 1.3; }
.vs-chart-note { font-size: 13px; color: var(--vs-muted); line-height: 1.45; }
.vs-chart-note:empty { display: none; }
/* :root raises these above a post's own .post-content ol / li rules. */
:root .vs-chart-rows { list-style: none; margin: 0; padding: 0; }
:root .vs-chart-rows > li { margin: 0; padding: 0; }
.vs-chart-rows li::before { content: none; }
.vs-l { color: var(--vs-text); font-weight: 500; }
.vs-v { color: var(--vs-text); font-weight: 700; }
.vs-s { color: var(--vs-muted); font-size: 12.5px; }
.vs-s:empty { display: none; }

/* horizontal bars */
.vs-chart--bar .vs-chart-rows { display: flex; flex-direction: column; gap: 16px; }
.vs-chart--bar li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; font-size: 14.5px; }
.vs-chart--bar li::after {
  content: "";
  grid-column: 1 / -1;
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--c, #6cd6e8) var(--v, 0%), var(--vs-track) var(--v, 0%));
}
.vs-chart--bar .vs-s { grid-column: 1 / -1; order: 3; }

/* vertical columns */
.vs-chart--column .vs-chart-rows { display: flex; align-items: flex-end; gap: 10px; height: 240px; padding-top: 8px; border-bottom: 1px solid var(--vs-line); }
.vs-chart--column li { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; font-size: 12.5px; text-align: center; }
.vs-chart--column .vs-v { order: 1; font-size: 13px; }
.vs-chart--column li::before { content: ""; order: 2; display: block; width: 100%; max-width: 56px; height: calc(var(--v, 0%) * 0.72); min-height: 2px; border-radius: 6px 6px 0 0; background: var(--c, #6cd6e8); }
.vs-chart--column .vs-l { order: 3; line-height: 1.25; overflow-wrap: anywhere; }
.vs-chart--column .vs-s { order: 4; }

/* line */
.vs-chart--line .vs-line { display: block; width: 100%; height: 170px; overflow: visible; }
.vs-chart--line .vs-line polyline { fill: none; stroke: var(--c, #6cd6e8); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.vs-chart--line .vs-line .vs-area { fill: var(--c, #6cd6e8); opacity: 0.12; stroke: none; }
.vs-chart--line .vs-chart-rows { display: flex; justify-content: space-between; gap: 6px; margin-top: 10px; border-top: 1px solid var(--vs-line); padding-top: 10px; }
.vs-chart--line li { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; text-align: center; }
.vs-chart--line .vs-v { font-size: 13px; }
.vs-chart--line .vs-l { overflow-wrap: anywhere; }

/* donut / share */
.vs-chart--donut .vs-donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.vs-chart--donut .vs-donut { flex: 0 0 auto; width: 170px; height: 170px; border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%); mask: radial-gradient(circle, transparent 54%, #000 55%); }
.vs-chart--donut .vs-chart-rows { flex: 1 1 200px; display: flex; flex-direction: column; gap: 10px; }
.vs-chart--donut li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; font-size: 14px; }
.vs-chart--donut li::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--c, #6cd6e8); }
.vs-chart--donut .vs-s { grid-column: 2 / -1; }

/* ranked list */
:root .vs-rank {
  --vs-text: var(--text, #eceaf2);
  --vs-muted: var(--muted, #908da1);
  --vs-line: var(--line, rgba(236, 234, 242, 0.09));
  list-style: none;
  counter-reset: vs-rank;
  margin: 24px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
}
:root .vs-rank > li {
  counter-increment: vs-rank;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 2px 14px;
  align-items: baseline;
  padding: 14px 0;
  margin: 0;
  border-bottom: 1px solid var(--vs-line);
}
.vs-rank > li:last-child { border-bottom: 0; }
.vs-rank > li::before {
  content: counter(vs-rank);
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--vs-muted);
  text-align: center;
}
.vs-rank > li:nth-child(1)::before { color: var(--brand-gold, #f3c012); }
.vs-rank > li:nth-child(2)::before { color: var(--brand-green, #b6cb74); }
.vs-rank > li:nth-child(3)::before { color: var(--brand-cyan, #6cd6e8); }
.vs-rank-name { font-size: 17px; font-weight: 700; color: var(--vs-text); line-height: 1.3; }
.vs-rank-stat { font-size: 14px; font-weight: 600; color: var(--vs-text); white-space: nowrap; }
.vs-rank-stat:empty { display: none; }
.vs-rank-note { grid-column: 2 / -1; font-size: 14.5px; color: var(--vs-muted); line-height: 1.5; }
.vs-rank-note:empty { display: none; }

@media (max-width: 560px) {
  .vs-chart { padding: 16px 16px 14px; }
  .vs-chart--column .vs-chart-rows { height: 200px; gap: 6px; }
  .vs-chart--donut .vs-donut { width: 140px; height: 140px; }
  :root .vs-rank > li { grid-template-columns: 40px minmax(0, 1fr); }
  .vs-rank > li::before { font-size: 24px; grid-row: 1 / span 3; }
  .vs-rank-stat { grid-column: 2; }
}

/*
 * End-of-post sign-up banner and the inline "try it free" prompt.
 * .post-cta is also styled by each post page's own CSS; the :root prefix wins over it.
 *   <div class="post-cta"> .post-cta-head, <p> (per-post line), ul.post-cta-chips, a.btn-launch, small.post-cta-micro
 *   <p class="vs-inline-cta"> one sentence with a single link, placed after the paragraph that names the song.
 */
:root .post-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 32px;
  background: linear-gradient(160deg, #1a1722, var(--panel, #121017));
  border-color: rgba(236, 234, 242, 0.18);
  border-radius: 18px;
}
:root .post-cta .post-cta-head {
  max-width: 22ch;
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--text, #eceaf2);
}
:root .post-cta p { margin: 0 !important; max-width: 46ch; }
/* :root beats the post page's ".post-content ul" (24px bottom margin, 22px indent) and "ul li" (8px margin). */
:root .post-cta .post-cta-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
:root .post-cta .post-cta-chips li {
  margin: 0;
  padding: 4px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text, #eceaf2);
  border: 1px solid rgba(236, 234, 242, 0.18);
  border-radius: 999px;
}
:root .post-cta .btn-launch { margin-top: 8px; } /* 8px gap + 8px = 16px under the chips */
.post-cta-chips i { margin-right: 6px; font-style: normal; color: var(--music, #c084fc); }
.post-cta-micro { font-size: 13px; color: var(--muted, #908da1); }

:root .vs-inline-cta {
  padding: 14px 18px;
  background: var(--panel, #121017);
  border-left: 3px solid var(--brand-cyan, #6cd6e8);
  border-radius: 0 12px 12px 0;
}
.vs-inline-cta a { color: var(--brand-cyan, #6cd6e8); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  :root .post-cta { padding: 26px 20px; }
}