/* ============================================================
   POP MUSIC TRACKER (template-pop-tracker.php)
   Layout comes from game-tracker.css (masthead, figures, sections,
   tables, stacked rows); this file adds the charts and the tier keys.

   COLOUR. The tiers are a diverging scale: positive is a blue arm,
   negative a red arm, Decent the neutral middle (it stays out of the
   bars and lives in the table). Each arm was run through the dataviz
   validator as an ordinal ramp against the page ground #edefe0:
   monotone lightness, a visible step, single hue, and light ends at
   2.15:1 (blue) and 2.14:1 (red) so the two arms weigh the same.
   Every chart has a table twin, so no value rests on colour alone.

   Nothing scrolls but the page: day columns shrink to fit the track.
   ============================================================ */

.ic-pop-tracker {
  --ic-pop-ascended:  #1c5cab;
  --ic-pop-elevated:  #6da7ec;
  --ic-pop-decent:    #b9bba9;
  --ic-pop-degraded:  #ec8a6e;
  --ic-pop-corrupted: #b83a2e;
  --ic-pop-arm: 120px;
}

/* --- Keys and chips: a swatch beside ink, never coloured text --- */
.ic-pop-swatch {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: baseline;
}
.ic-pop-swatch--ascended { background: var(--ic-pop-ascended); }
.ic-pop-swatch--elevated { background: var(--ic-pop-elevated); }
.ic-pop-swatch--decent { background: var(--ic-pop-decent); }
.ic-pop-swatch--degraded { background: var(--ic-pop-degraded); }
.ic-pop-swatch--corrupted { background: var(--ic-pop-corrupted); }
.ic-pop-swatch--unread { box-shadow: inset 0 0 0 1.5px var(--ic-text-muted); }
.ic-pop-tier-label { display: inline-flex; align-items: center; white-space: nowrap; font-family: var(--ic-font-ui); font-size: var(--ic-text-small); }

.ic-pop-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ic-space-xs) var(--ic-space-lg);
  margin: 0 0 var(--ic-space-md);
  padding: 0;
  list-style: none;
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-small);
  color: var(--ic-text);
}
.ic-pop-legend li { display: inline-flex; align-items: center; margin: 0; }

/* --- Lead figure: today's split --- */
.ic-pop-split__numbers { display: flex; justify-content: space-between; gap: var(--ic-space-md); }
.ic-pop-split__numbers p { margin: 0; }
.ic-pop-split__label {
  display: inline-flex;
  align-items: center;
  margin-left: var(--ic-space-xs);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-small);
  color: var(--ic-dark-muted);
}
.ic-pop-split__bar { display: flex; gap: 2px; height: 14px; margin: var(--ic-space-md) 0 0; }
.ic-pop-split__segment { flex: var(--w) 1 0%; min-width: 0; }
.ic-pop-split__segment--positive { background: var(--ic-pop-elevated); border-radius: 4px 0 0 4px; }
.ic-pop-split__segment--decent { background: rgba(238, 240, 221, 0.28); }
.ic-pop-split__segment--negative { background: var(--ic-pop-degraded); border-radius: 0 4px 4px 0; }

/* --- The series: diverging day columns --- */
.ic-pop-day-chart {
  position: relative;
  padding: 0 0 28px 4.5rem;
}
.ic-pop-day-chart__plot {
  position: relative;
  display: flex;
  gap: clamp(1px, 0.35%, 4px);
  height: calc(var(--ic-pop-arm) * 2 + 2px);
  /* Hairlines at the scale's two ends; the baseline is drawn below. */
  border-top: 1px solid var(--ic-rule);
  border-bottom: 1px solid var(--ic-rule);
}
.ic-pop-day-chart__plot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--ic-pop-arm);
  height: 2px;
  background: var(--ic-text-strong);
}
.ic-pop-day-chart__tick,
.ic-pop-day-chart__side-label {
  position: absolute;
  left: 0;
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-meta);
  color: var(--ic-text-muted);
  line-height: 1;
}
.ic-pop-day-chart__tick--top { top: 0; }
.ic-pop-day-chart__tick--bottom { top: calc(var(--ic-pop-arm) * 2 - 0.75em); }
.ic-pop-day-chart__side-label {
  font-size: var(--ic-text-label);
  font-weight: var(--ic-weight-semibold);
  letter-spacing: var(--ic-tracking-label);
  text-transform: uppercase;
  color: var(--ic-text);
}
.ic-pop-day-chart__side-label--positive { top: calc(var(--ic-pop-arm) * 0.5); }
.ic-pop-day-chart__side-label--negative { top: calc(var(--ic-pop-arm) * 1.5); }

.ic-pop-day {
  position: relative;
  display: grid;
  grid-template-rows: var(--ic-pop-arm) 2px var(--ic-pop-arm);
  flex: 1 1 0;
  min-width: 0;
  max-width: 24px;
  transition: opacity var(--ic-fast) var(--ic-ease);
}
.ic-pop-day__positive,
.ic-pop-day__negative { display: flex; gap: 2px; }
/* Up stacks from the baseline: Elevated nearest it, Ascended outermost. */
.ic-pop-day__positive { grid-row: 1; flex-direction: column-reverse; padding-bottom: 2px; transform-origin: bottom; }
.ic-pop-day__negative { grid-row: 3; flex-direction: column; padding-top: 2px; transform-origin: top; }
.ic-pop-segment {
  display: block;
  flex: none;
  height: calc(var(--v) / var(--scale) * var(--ic-pop-arm));
  min-height: 1px;
}
.ic-pop-day__positive .ic-pop-segment:last-child { border-radius: 4px 4px 0 0; }
.ic-pop-day__negative .ic-pop-segment:last-child { border-radius: 0 0 4px 4px; }
.ic-pop-segment--ascended { background: var(--ic-pop-ascended); }
.ic-pop-segment--elevated { background: var(--ic-pop-elevated); }
.ic-pop-segment--degraded { background: var(--ic-pop-degraded); }
.ic-pop-segment--corrupted { background: var(--ic-pop-corrupted); }

.ic-pop-day__date {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-meta);
  color: var(--ic-text-muted);
  white-space: nowrap;
}
.ic-pop-day.is-label-wide .ic-pop-day__date { visibility: visible; }
.ic-pop-day:first-child .ic-pop-day__date { left: 0; transform: none; }
.ic-pop-day:last-child:not(:first-child) .ic-pop-day__date { left: auto; right: 0; transform: none; }

/* Hover: the column under the pointer stays, the rest step back. */
.ic-pop-day-chart.is-hovering .ic-pop-day:not(.is-active) { opacity: 0.4; }

/* --- The day charge: one line --- */
.ic-pop-line-chart { position: relative; padding: 0 0 0 4.5rem; }
.ic-pop-line-chart__plot {
  position: relative;
  height: 180px;
  border-top: 1px solid var(--ic-rule);
  border-bottom: 1px solid var(--ic-rule);
}
.ic-pop-line-chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ic-pop-line-chart__zero-line { stroke: var(--ic-text-muted); stroke-width: 1; }
.ic-pop-line-chart__path { fill: none; stroke: var(--ic-text-strong); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ic-pop-line-chart__tick {
  position: absolute;
  left: 0;
  top: calc(var(--y) * 180px / 100);
  transform: translateY(-50%);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-meta);
  font-variant-numeric: tabular-nums;
  color: var(--ic-text-muted);
}
.ic-pop-line-chart__dot {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--ic-text-strong);
  box-shadow: 0 0 0 2px var(--ic-bg);
}
.ic-pop-line-chart__end-value {
  position: absolute;
  right: 0;
  top: calc(var(--y) * 1%);
  transform: translateY(-170%);
  font-family: var(--ic-font-mono);
  font-size: var(--ic-text-small);
  color: var(--ic-text-strong);
}
.ic-pop-line-chart__crosshair {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--x) * 1%);
  width: 1px;
  background: var(--ic-text-muted);
  pointer-events: none;
}
.ic-pop-line-chart__dates {
  display: flex;
  justify-content: space-between;
  margin-top: var(--ic-space-sm);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-meta);
  color: var(--ic-text-muted);
}

/* --- Tooltip: values lead, labels follow --- */
.ic-pop-tooltip {
  position: absolute;
  z-index: 5;
  min-width: 12rem;
  padding: var(--ic-space-sm) var(--ic-space-md);
  background: var(--ic-surface);
  border: 1px solid var(--ic-rule);
  border-radius: var(--ic-radius);
  box-shadow: var(--ic-shadow);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-small);
  line-height: 1.45;
  color: var(--ic-text);
  pointer-events: none;
}
.ic-pop-tooltip__date { margin: 0 0 var(--ic-space-xs); font-size: var(--ic-text-meta); color: var(--ic-text-muted); }
.ic-pop-tooltip__row { display: flex; align-items: center; gap: var(--ic-space-sm); margin: 0; }
.ic-pop-tooltip__row strong { min-width: 2.8em; font-variant-numeric: tabular-nums; color: var(--ic-text-strong); }
.ic-pop-tooltip__swatch { display: inline-block; width: 12px; height: 2px; }

/* --- Each source chart today --- */
.ic-pop-sources { margin: 0; padding: 0; list-style: none; }
.ic-pop-sources__row {
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) 1fr 9rem;
  grid-template-areas: "label track n" "meta track n";
  column-gap: var(--ic-space-lg);
  align-items: center;
  padding: var(--ic-space-sm) 0;
  border-bottom: 1px solid var(--ic-rule-soft);
}
.ic-pop-sources__label { grid-area: label; font-size: var(--ic-text-small); color: var(--ic-text-strong); }
.ic-pop-sources__meta { grid-area: meta; font-size: var(--ic-text-meta); color: var(--ic-text-muted); }
.ic-pop-sources__track {
  grid-area: track;
  position: relative;
  height: 12px;
  background: var(--ic-bg-alt);
  border-radius: var(--ic-radius-sm);
}
.ic-pop-sources__track::after {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 50%;
  width: 1px;
  background: var(--ic-text-muted);
}
.ic-pop-sources__bar { position: absolute; top: 0; bottom: 0; width: calc(var(--w) * 0.5%); min-width: 2px; }
.ic-pop-sources__bar.is-positive { left: 50%; background: var(--ic-pop-ascended); border-radius: 0 4px 4px 0; }
.ic-pop-sources__bar.is-negative { right: 50%; background: var(--ic-pop-corrupted); border-radius: 4px 0 0 4px; }
.ic-pop-sources__charge { grid-area: n; font-family: var(--ic-font-mono); font-size: var(--ic-text-small); text-align: right; color: var(--ic-text-strong); }

/* --- Today's songs --- */
.ic-pop-songs .ic-tracker-subline { margin-top: 2px; }
.ic-pop-pending { color: var(--ic-text); }

/* Grow-in, only once JS is running and only until the block is seen. */
.ic-tracker-js .ic-pop-day-chart:not(.is-in-view) .ic-pop-day__positive { transform: scaleY(0); }
.ic-tracker-js .ic-pop-day-chart:not(.is-in-view) .ic-pop-day__negative { transform: scaleY(0); }
.ic-pop-day__positive,
.ic-pop-day__negative { transition: transform 600ms var(--ic-ease); }

@media (max-width: 900px) {
  .ic-pop-sources__row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label n" "track track" "meta meta";
    row-gap: var(--ic-space-xs);
  }
}

@media (max-width: 640px) {
  .ic-pop-tracker { --ic-pop-arm: 90px; }
  .ic-pop-day-chart,
  .ic-pop-line-chart { padding-left: 2.5rem; }
  .ic-pop-day-chart__side-label { display: none; }
  .ic-pop-day.is-label-wide .ic-pop-day__date { visibility: hidden; }
  .ic-pop-day.is-label-narrow .ic-pop-day__date { visibility: visible; }
  .ic-pop-split__numbers .ic-tracker-figure__number { font-size: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ic-pop-day__positive,
  .ic-pop-day__negative,
  .ic-pop-day { transition: none; }
  .ic-tracker-js .ic-pop-day-chart:not(.is-in-view) .ic-pop-day__positive,
  .ic-tracker-js .ic-pop-day-chart:not(.is-in-view) .ic-pop-day__negative { transform: none; }
}