/* RelaxingJazz.com · listeners.css (scoped to the live listener map page) */
.page--listeners .lm-hero {
  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));
}
.page--listeners .lm-hero .h-display { font-size: var(--page-hero-title, var(--step-6)); }
.page--listeners .lm-hero .lede { margin-top: var(--space-4); max-width: 46rem; }
.page--listeners .lm-stats { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); margin: var(--space-6) 0 0; }
.page--listeners .lm-stats dt {
  color: var(--text-3); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.page--listeners .lm-stats dd { margin: 0; color: var(--gold); font-family: var(--font-display); font-size: var(--step-5); line-height: 1.1; }

.page--listeners .lm-map { margin: 0; padding: clamp(var(--space-3), 2vw, var(--space-5)); overflow: hidden; }
.page--listeners .lm-map__stage { position: relative; border-radius: var(--radius-m); overflow: hidden; outline-offset: 4px; }
.page--listeners .lm-map__svg { display: block; width: 100%; height: auto; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.page--listeners .lm-map__stage.is-zoomed .lm-map__svg { touch-action: none; }
.page--listeners .lm-map__svg:active { cursor: grabbing; }
.page--listeners .lm-map__controls { position: absolute; top: var(--space-3); right: var(--space-3); display: grid; gap: 6px; }
.page--listeners .lm-map__btn {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--surface-solid) 88%, transparent); color: var(--text);
  font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.page--listeners .lm-map__btn:hover { color: var(--gold); border-color: var(--gold); }
.page--listeners .lm-map__btn .icon { width: 1.1rem; height: 1.1rem; }
.page--listeners .lm-map__hint {
  position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%); margin: 0;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--text); font-size: var(--step--1);
  white-space: nowrap; pointer-events: none;
}
.page--listeners .lm-tip {
  position: absolute; z-index: 2; max-width: 16rem; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-m);
  background: var(--surface-solid); box-shadow: var(--shadow-2); pointer-events: none;
}
.page--listeners .lm-tip__title { margin: 0; color: var(--text); font-weight: 600; }
.page--listeners .lm-tip__n { margin: 2px 0 0; color: var(--gold); font-size: var(--step--1); font-weight: 600; }
.page--listeners .lm-tip ul { list-style: none; margin: var(--space-2) 0 0; padding: var(--space-2) 0 0; border-top: 1px solid var(--border); color: var(--text-2); font-size: var(--step--1); }
.page--listeners .lm-map__land path {
  fill: color-mix(in srgb, var(--text) 10%, transparent);
  stroke: var(--bg-raised, var(--bg)); stroke-width: calc(0.4px / var(--lm-z, 1));
  transition: fill var(--dur-2, 0.3s) var(--ease, ease-out), fill-opacity var(--dur-2, 0.3s) var(--ease, ease-out);
}
.page--listeners .lm-map__land path.is-on { fill: var(--gold); fill-opacity: calc(0.22 + var(--lm-i, 0.5) * 0.55); }
.page--listeners .lm-dot { fill: var(--coral); fill-opacity: 0.92; stroke: var(--bg); stroke-width: calc(0.9px / var(--lm-z, 1)); cursor: pointer; }
.page--listeners .lm-dot:hover { fill: var(--gold-2, var(--gold)); }
/* The studio in Saint Lucia: a broadcast tower with "on air" rings */
.page--listeners .lm-hq { cursor: pointer; }
.page--listeners .lm-hq__halo { fill: var(--bg); fill-opacity: 0.6; }
.page--listeners .lm-hq__mast, .page--listeners .lm-hq__waves { fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.page--listeners .lm-hq__waves { stroke-width: 1.3; stroke-opacity: 0.85; }
.page--listeners .lm-hq__tip { fill: var(--coral); }
.page--listeners .lm-hq__ring { fill: none; stroke: var(--gold); stroke-width: 1.2; opacity: 0; }
.page--listeners .lm-hq__label {
  fill: var(--gold); font-family: var(--font-ui); font-size: 8.5px; font-weight: 600; letter-spacing: 0.06em;
  paint-order: stroke; stroke: var(--bg); stroke-width: 2.6px; stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
  .page--listeners .lm-hq__ring { transform-box: fill-box; transform-origin: center; animation: lm-onair 2.6s ease-out infinite; }
  .page--listeners .lm-hq__ring--late { animation-delay: 1.3s; }
}
@keyframes lm-onair { 0% { transform: scale(0.6); opacity: 0.85; } 100% { transform: scale(3); opacity: 0; } }
.page--listeners .lm-tip__line { margin: var(--space-2) 0 0; color: var(--text-2); font-size: var(--step--1); }
@media (prefers-reduced-motion: no-preference) {
  .page--listeners .lm-dot { animation: lm-glow 3.2s ease-in-out infinite; }
}
@keyframes lm-glow { 0%, 100% { fill-opacity: 0.95; } 50% { fill-opacity: 0.6; } }
.page--listeners .lm-map__status { margin: var(--space-3) 0 0; color: var(--text-3); font-size: var(--step--1); }

.page--listeners .lm-lists__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-6) var(--space-8); }
.page--listeners .lm-rank { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.page--listeners .lm-rank li {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--border); color: var(--text-2);
}
.page--listeners .lm-rank__n { color: var(--gold); font-variant-numeric: tabular-nums; font-weight: 600; }
.page--listeners .lm-bars { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.page--listeners .lm-bars li { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr auto; align-items: center; gap: var(--space-4); }
.page--listeners .lm-bars__label { color: var(--text); }
.page--listeners .lm-bars__bar { height: 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.page--listeners .lm-bars__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--gold-fill, var(--gold)); }
.page--listeners .lm-bars__n { color: var(--text-2); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
@media (max-width: 34.9375em) {
  .page--listeners .lm-bars li { grid-template-columns: 1fr auto; }
  .page--listeners .lm-bars__bar { grid-column: 1 / -1; grid-row: 2; }
}
.page--listeners .lm-notes p { margin: var(--space-3) 0 0; color: var(--text-2); }
.page--listeners .lm-notes a { color: var(--gold); }
.page--listeners .lm-credit { font-size: var(--step--1); color: var(--text-3); }