/* ============================================================
   PP — Play Report component styles
   Namespace: pp-
   Replaces Tailwind utility classes in play_parts/view_report.php
   ============================================================ */

:root {
  --pp-gray-100: #f3f4f6;
  --pp-gray-200: #e5e7eb;
  --pp-gray-300: #d1d5db;
  --pp-gray-400: #9ca3af;
  --pp-gray-500: #6b7280;
  --pp-gray-600: #4b5563;
  --pp-gray-700: #374151;
  --pp-gray-800: #1f2937;
  --pp-gray-900: #111827;
  --pp-gray-950: #030712;
  --pp-red-300:     #fca5a5;
  --pp-red-400:     #f87171;
  --pp-red-700:     #b91c1c;
  --pp-red-900:     #7f1d1d;
  --pp-emerald-300: #6ee7b7;
  --pp-emerald-400: #34d399;
  --pp-emerald-700: #047857;
  --pp-emerald-900: #064e3b;
  --pp-amber-300:   #fcd34d;
  --pp-amber-400:   #fbbf24;
  --pp-amber-500:   #f59e0b;
  --pp-amber-900:   #78350f;
  --pp-yellow-400:  #facc15;
  --pp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --pp-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  --pp-card-radius: 16px;
}

/* ── Page wrapper ── */
.pp-page-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ── Mobile title ── */
.pp-mobile-title {
  display: block;
  margin-bottom: 16px;
  padding: 0 4px;
}
.pp-mobile-title__artist {
  font-size: 16px;
  color: var(--pp-gray-400);
  letter-spacing: 0.025em;
}
.pp-mobile-title__track {
  font-size: 30px;
  font-weight: 700;
  color: white;
  line-height: 1.25;
  word-break: break-word;
}
.pp-mobile-title__badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pp-gray-600);
  margin-top: 2px;
}
@media (min-width: 640px) {
  .pp-mobile-title { display: none; }
}

/* ── Generic card ── */
.pp-card {
  background: var(--pp-gray-950);
  border: 1px solid var(--pp-gray-800);
  border-radius: var(--pp-card-radius);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.3), 0 10px 10px -5px rgba(0,0,0,.2);
}

/* Card with standard padding (p-4 sm:p-5) */
.pp-card--padded {
  padding: 16px;
}
@media (min-width: 640px) {
  .pp-card--padded { padding: 20px; }
}

/* Card variants */
.pp-card--flex  { display: flex; flex-direction: column; }
.pp-card--clip  { overflow: hidden; }

/* ── Card section title strip (h3 negative-margin full-bleed) ── */
.pp-card-strip {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,.75);
  margin: -16px -16px 16px;
  padding: 12px 16px;
  background: rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 640px) {
  .pp-card-strip {
    margin: -20px -20px 16px;
    padding: 12px 20px;
  }
}
.pp-card-strip__id {
  font-family: var(--pp-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pp-gray-500);
}
.pp-card-strip__action {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
  color: rgba(148,163,184,.55);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  line-height: 1;
  transition: color 150ms;
}
.pp-card-strip__action:hover { color: rgba(203,213,225,.9); }

/* ── Measurement data inline (inside POP SCORE panel) ── */
.pp-mdata-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 10px;
}
.pp-mdata-divider__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(100,116,139,.5);
  white-space: nowrap;
  flex-shrink: 0;
}
.pp-mdata-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.06);
}
.pp-mdata-inline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  margin: 0 0 10px;
}
.pp-mdata-inline__row {
  display: contents;
}
.pp-mdata-inline dt {
  font-size: 10px;
  color: rgba(148,163,184,.45);
  align-self: center;
}
.pp-mdata-inline dd {
  font-size: 10px;
  color: rgba(226,232,240,.58);
  text-align: right;
  font-variant-numeric: tabular-nums;
  align-self: center;
}
.pp-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
}
.pp-pulse-legend {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pp-mono-label,
.pp-pulse-legend__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(75,85,99,.6);
  white-space: nowrap;
}

.pp-flag-notice {
  margin: 12px 0 4px;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.pp-flag-notice__main {
  font-size: 11px;
  color: rgba(226,232,240,.65);
  margin: 0 0 4px;
}
.pp-flag-notice__sub {
  font-size: 10px;
  color: rgba(100,116,139,.55);
  margin: 0;
}
.pp-flag-notice__sub a {
  color: rgba(148,163,184,.55);
  text-decoration: none;
}
.pp-flag-notice__sub a:hover { color: rgba(148,163,184,.85); }

/* ── Panel h3 (Play Lens, Play History headings) ── */
.pp-panel-h3 {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pp-panel-h3__left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pp-panel-h3__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Chart card ── */
.pp-chart__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px 12px 0;
}
@media (min-width: 640px) {
  .pp-chart__header {
    flex-direction: row;
    align-items: center;
    padding: 16px 16px 0;
  }
}
.pp-chart__heading {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.pp-chart__h2 {
  font-size: 20px;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
}
.pp-chart__play-id {
  font-size: 14px;
  color: var(--pp-gray-500);
  font-weight: 400;
}
.pp-chart__track {
  display: none;
  min-width: 0;
  max-width: 55%;
  font-size: 20px;
  font-weight: 700;
  color: var(--pp-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  margin-left: auto;
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .pp-chart__track { display: block; }
}
.pp-chart__canvas-wrap {
  height: 176px;
  position: relative;
  padding: 0 12px 12px;
}
@media (min-width: 640px) {
  .pp-chart__canvas-wrap {
    height: 224px;
    padding: 0 16px 16px;
  }
}

/* No-events variant (smaller card) */
.pp-chart--noevents .pp-chart__header {
  padding: 12px;
}
@media (min-width: 640px) {
  .pp-chart--noevents .pp-chart__header { padding: 16px; }
}
.pp-chart__empty-text {
  font-size: 14px;
  color: var(--pp-gray-300);
  line-height: 1.6;
  padding: 0 12px 12px;
}
@media (min-width: 640px) {
  .pp-chart__empty-text { padding: 0 16px 16px; }
}

/* ── CAPPED / FILTERED badges ── */
.pp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 9999px;
  line-height: 1.5;
}
.pp-badge--capped {
  color: rgba(251,191,36,.8);
  background: rgba(251,191,36,.07);
  border: 1px solid rgba(251,191,36,.20);
}
.pp-badge--filtered {
  color: rgba(156,163,175,.7);
  background: rgba(156,163,175,.06);
  border: 1px solid rgba(156,163,175,.20);
}
.pp-badge__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 9px;
  cursor: default;
  opacity: .6;
  background: none;
  color: inherit;
  font-family: var(--pp-font);
  transition: opacity 130ms, background 130ms;
}
.pp-badge__info:hover {
  opacity: 1;
  background: rgba(255,255,255,.1);
}

/* ── Desktop track header ── */
.pp-track-header {
  display: none;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--pp-gray-800);
}
@media (min-width: 640px) {
  .pp-track-header { display: block; }
}
.pp-track-header__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 640px) {
  .pp-track-header__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.pp-track-header__title {
  font-size: 30px;
  font-weight: 700;
  color: white;
  line-height: 1.25;
  word-break: break-word;
}
.pp-edit-btn {
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--pp-gray-800);
  color: var(--pp-gray-100);
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--pp-gray-700);
  cursor: pointer;
  transition: background 130ms;
  font-family: var(--pp-font);
  white-space: nowrap;
}
.pp-edit-btn:hover { background: var(--pp-gray-700); }
.pp-edit-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
@media (min-width: 640px) {
  .pp-edit-btn-wrap {
    align-items: flex-end;
    flex-shrink: 0;
  }
}

/* ── 3-column grid ── */
.pp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .pp-grid { gap: 24px; }
}
@media (min-width: 1024px) {
  .pp-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Play metadata dl ── */
.pp-meta {
  font-size: 12px;
  color: var(--pp-gray-400);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pp-meta__row {
  display: flex;
  justify-content: space-between;
}
.pp-meta__row--sep {
  padding-top: 8px;
  border-top: 1px solid var(--pp-gray-800);
}
.pp-meta__row--sub {
  font-size: 10px;
  opacity: 0.65;
}
.pp-meta__label {
  color: var(--pp-gray-300);
  display: flex;
  align-items: center;
  gap: 4px;
}
.pp-meta__label--green { color: var(--pp-emerald-400); font-size: 12px; }
.pp-meta__label--muted { color: var(--pp-gray-500); }
.pp-meta__value {
  font-family: var(--pp-mono);
  color: white;
  text-align: right;
}
.pp-meta__value--green  { color: var(--pp-emerald-400); font-size: 12px; font-weight: 500; }
.pp-meta__value--red    { color: var(--pp-red-400); }
.pp-meta__value--yellow { color: var(--pp-yellow-400); }

/* Shared tooltip/info button */
.pp-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(100,116,139,.5);
  font-size: 8px;
  font-style: normal;
  color: rgba(156,163,175,.7);
  cursor: default;
  transition: color 130ms, border-color 130ms, background 130ms;
  flex-shrink: 0;
  background: none;
  font-family: var(--pp-font);
  line-height: 1;
}
.pp-info-btn:hover {
  color: var(--pp-gray-300);
  border-color: rgba(100,116,139,.8);
  background: rgba(255,255,255,.05);
}
.pp-info-btn--md {
  width: 16px;
  height: 16px;
  font-size: 11px;
  border: 1px solid var(--pp-gray-600);
  background: rgba(255,255,255,.04);
  color: var(--pp-gray-400);
}
.pp-info-btn--md:hover { background: rgba(255,255,255,.08); }

/* ── Drop event tiles ── */
.pp-drops {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--pp-gray-800);
}
.pp-drops__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.pp-drops__scroll {
  overflow-x: auto;
  padding-bottom: 8px;
}
.pp-drops__row {
  display: flex;
  gap: 12px;
  font-size: 12px;
  width: max-content;
}
.pp-drop-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
}
.pp-drop-item__ts {
  font-size: 10px;
  color: var(--pp-gray-500);
  font-family: var(--pp-mono);
}
.pp-drop-item__box {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  margin-top: 4px;
  border: 1px solid;
  position: relative;
}
.pp-drop-item__box--loss {
  background: rgba(127,29,29,.8);
  color: var(--pp-red-300);
  border-color: var(--pp-red-700);
}
.pp-drop-item__box--gain {
  background: rgba(15,50,35,.8);
  color: rgba(52,211,153,.9);
  border-color: rgba(52,211,153,.35);
}
.pp-drop-item__box--capped {
  background: rgba(120,53,15,.6);
  color: var(--pp-amber-300);
  border-color: var(--pp-amber-500);
}
.pp-drop-item__box--muted {
  background: rgba(31,41,55,.6);
  color: var(--pp-gray-400);
  border-color: var(--pp-gray-600);
}
.pp-drop-item__box--zero {
  background: var(--pp-gray-800);
  color: var(--pp-gray-400);
  border-color: var(--pp-gray-700);
}
.pp-drop-item__cap {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 8px;
  line-height: 1;
  color: var(--pp-amber-400);
}

/* No-drops state */
.pp-no-drops {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--pp-gray-800);
  text-align: center;
}
.pp-no-drops__text {
  font-size: 12px;
  color: var(--pp-gray-500);
  font-style: italic;
}

/* ── Play Lens panel ── */
.pp-lens-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
}
.pp-lens-card {
  display: block;
  padding: 12px;
  background: var(--pp-gray-900);
  border-radius: 8px;
  border: 1px solid var(--pp-gray-800);
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms;
}
.pp-lens-card:hover { border-color: rgba(255,255,255,.15); }
.pp-lens-card--active {
  background: var(--pp-gray-800);
  border-color: var(--pp-gray-600);
}
.pp-lens-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4px;
}
.pp-lens-card__label {
  color: var(--pp-gray-500);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pp-lens-card__label--active {
  color: var(--pp-gray-200);
  font-weight: 700;
}
.pp-lens-card__selected-hint {
  font-size: 10px;
  color: rgba(148,163,184,.55);
  font-weight: 400;
}
.pp-lens-card__selected-sep {
  color: rgba(148,163,184,.35);
  margin: 0 5px;
}
.pp-lens-card__on-air {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(74,222,128,.85);
  background: rgba(74,222,128,.1);
  border: 1px solid rgba(74,222,128,.3);
  border-radius: 3px;
  padding: 0 4px;
  line-height: 16px;
  margin-left: 6px;
}
.pp-lens-card__title {
  font-weight: 500;
  color: var(--pp-gray-100);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-lens-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-size: 10px;
  font-family: var(--pp-mono);
  color: var(--pp-gray-500);
}
.pp-lens-card__drop--loss { color: var(--pp-red-400); }
.pp-lens-card__drop--gain { color: var(--pp-emerald-400); }
.pp-lens-card__capped-raw { color: var(--pp-gray-500); }
.pp-lens-card--delayed { border-color: rgba(250,204,21,.5); }
.pp-lens-card--delayed:hover { border-color: rgba(250,204,21,.75); }
.pp-lens-card__delayed { color: #facc15; }

.pp-lens-msg {
  display: none;
  font-size: 12px;
  color: var(--pp-gray-500);
  font-style: italic;
  text-align: center;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid rgba(31,41,55,.5);
}

.pp-lens-nav-strip {
  display: flex;
  align-items: center;
  gap: 2px;
}
.pp-lens-nav-btn {
  font-size: 10px;
  font-weight: 600;
  color: rgba(148,163,184,.5);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 2px 5px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  transition: color 150ms;
}
.pp-lens-nav-btn:hover { color: rgba(203,213,225,.9); }
.pp-lens-nav-btn:disabled { opacity: 0.3; cursor: default; }
.pp-play-links {
  display: flex;
  align-items: center;
  gap: 5px;
}
.pp-play-link {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(75,85,99,.6);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  text-decoration: none;
  transition: color 150ms;
}
.pp-play-link:hover { color: rgba(148,163,184,.7); }
.pp-play-link__sep {
  color: rgba(75,85,99,.35);
  font-size: 9px;
  font-weight: 400;
  user-select: none;
}

/* Play Lens icon legend */
.pp-legend {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(31,41,55,.5);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.pp-legend__caption {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(75,85,99,.6);
  white-space: nowrap;
}
.pp-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(75,85,99,.6);
}

/* ── Play History panel ── */
.pp-hist {
  display: flex;
  flex-direction: column;
}
.pp-hist-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  overflow-y: auto;
  max-height: 256px;
  padding-right: 4px;
}
.pp-hist-scroll::-webkit-scrollbar { width: 4px; }
.pp-hist-scroll::-webkit-scrollbar-track { background: transparent; }
.pp-hist-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1);
  border-radius: 2px;
}
.pp-hist-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background: var(--pp-gray-900);
  border-radius: 4px;
  border: 1px solid var(--pp-gray-800);
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms;
}
.pp-hist-row:is(a):hover { border-color: rgba(255,255,255,.15); }
.pp-hist-row--current {
  background: var(--pp-gray-800);
  border-color: var(--pp-gray-600);
}
.pp-hist-row__ts {
  font-family: var(--pp-mono);
  font-size: 11px;
}
.pp-hist-row__ts--current { color: var(--pp-gray-200); font-weight: 600; }
.pp-hist-row__ts--other   { color: var(--pp-gray-400); }
.pp-hist-row__dur { color: var(--pp-gray-500); font-weight: 400; }
.pp-hist-row__dur-delta { color: var(--pp-gray-600); }
.pp-hist-row__net {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.pp-hist-row__net-label { color: var(--pp-gray-500); }
.pp-hist-row__net-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 2rem;
  text-align: right;
}
.pp-hist-row__net-val--gain   { color: var(--pp-emerald-400); }
.pp-hist-row__net-val--loss   { color: var(--pp-red-400); }
.pp-hist-row__net-val--zero   { color: var(--pp-yellow-400); }

.pp-hist-footer {
  margin-top: 12px;
  font-size: 11px;
  color: var(--pp-gray-500);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

/* Airlog section at bottom of Play History */
.pp-airlog {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(31,41,55,.6);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pp-airlog__banner {
  margin: 0 -16px;
  padding: 8px 16px;
  background: rgba(253,224,71,.06);
}
@media (min-width: 640px) {
  .pp-airlog__banner { margin: 0 -20px; padding: 8px 20px; }
}
.pp-airlog__track {
  font-size: 11px;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-airlog__track-label {
  display: inline;
  font-size: 10px;
  color: var(--pp-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pp-airlog__link {
  font-size: 10px;
  color: var(--pp-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  margin-top: 4px;
  display: block;
  transition: color 130ms;
}
.pp-airlog__link:hover { color: rgba(205,215,238,.95); }
.pp-airlog__link.is-active { color: rgba(205,215,238,.95); }
.pp-airlog__divider {
  border: none;
  border-top: 1px solid rgba(31,41,55,.6);
  margin: 6px 0 4px;
}

/* ── Measurement Data (details/summary) ── */
.pp-mdata {
  font-size: 12px;
}
.pp-mdata summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--pp-gray-200);
  transition: color 130ms;
}
@media (min-width: 640px) {
  .pp-mdata summary { padding: 20px; }
}
.pp-mdata summary::-webkit-details-marker { display: none; }
.pp-mdata summary:hover { color: white; }

.pp-mdata__chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--pp-gray-500);
  transition: transform 200ms;
}
details[open] .pp-mdata__chevron { transform: rotate(90deg); }

.pp-mdata__note {
  font-size: 12px;
  color: var(--pp-gray-500);
  font-weight: 400;
}
.pp-mdata__info-btn-wrap { margin-left: auto; }
.pp-mdata__body {
  padding: 0 16px 16px;
}
@media (min-width: 640px) {
  .pp-mdata__body { padding: 0 20px 20px; }
}
.pp-mdata__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 24px;
}
@media (min-width: 640px) {
  .pp-mdata__grid { grid-template-columns: 1fr 1fr; }
}
.pp-mdata-dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 0;
  color: var(--pp-gray-400);
  align-content: start;
}
.pp-mdata-dl + .pp-mdata-dl {
  margin-top: 16px;
}
@media (min-width: 640px) {
  .pp-mdata-dl + .pp-mdata-dl { margin-top: 0; }
}
.pp-mdata-dl__val {
  text-align: right;
  color: white;
  font-family: var(--pp-mono);
}
.pp-mdata-dl__val--muted { color: var(--pp-gray-500); }
.pp-mdata-dl__sep {
  grid-column: 1 / -1;
  padding-top: 8px;
  border-top: 1px solid rgba(31,41,55,.6);
}

/* ── Pop Score panel ── */
.pp-pop-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 16px 0 8px;
}
.pp-pop-score {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--pp-gray-100);
  font-variant-numeric: tabular-nums;
}
.pp-pop-score__denom {
  font-size: 20px;
  font-weight: 400;
  color: var(--pp-gray-500);
}
.pp-pop-bar-wrap {
  height: 4px;
  border-radius: 9999px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
  margin-bottom: 20px;
}
.pp-pop-bar {
  height: 100%;
  border-radius: 9999px;
  background: rgba(52,211,153,.65);
  transition: width 500ms ease;
}
.pp-pop-dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  font-size: 12px;
}
.pp-pop-dl__label {
  color: var(--pp-gray-500);
  padding: 6px 0;
  border-bottom: 1px solid rgba(31,41,55,.5);
}
.pp-pop-dl__val {
  color: var(--pp-gray-200);
  padding: 6px 0;
  border-bottom: 1px solid rgba(31,41,55,.5);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pp-pop-dl__label:last-of-type,
.pp-pop-dl__val:last-of-type {
  border-bottom: none;
}
.pp-pop-dl__label--sub {
  font-size: 10px;
  opacity: 0.65;
  padding-left: 8px;
}
.pp-pop-dl__val--sub {
  font-size: 10px;
  color: var(--pp-gray-500);
}
.pp-pop-dl__val--green { color: var(--pp-emerald-400); }
.pp-pop-dl__val--muted { color: var(--pp-gray-500); }
.pp-pop-sep {
  grid-column: 1 / -1;
  height: 1px;
  background: rgba(31,41,55,.5);
  margin: 2px 0;
}
.pp-pop-notice {
  margin-top: 16px;
  font-size: 11px;
  color: var(--pp-gray-600);
  line-height: 1.5;
}

/* ── Exit point block ── */
.pp-exit-block {
  margin-top: 8px;
}
.pp-exit-block__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 12px;
}
.pp-exit-block__label { color: var(--pp-gray-500); }
.pp-exit-block__val {
  color: var(--pp-gray-200);
  font-variant-numeric: tabular-nums;
}
.pp-exit-bar-wrap {
  height: 5px;
  border-radius: 9999px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
  margin-bottom: 4px;
}
.pp-exit-bar {
  height: 100%;
  border-radius: 9999px;
  background: rgba(125,211,252,.6);
}
.pp-exit-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--pp-gray-600);
  margin-bottom: 6px;
}

/* ── POP FORMATION box ── */
.pp-pulse-section {
  margin: 16px -16px 0;
}
@media (min-width: 640px) {
  .pp-pulse-section { margin: 16px -20px 0; }
}
.pp-pulse-canvas {
  display: block;
  width: 100%;
  height: 24px;
}
.pp-formation-box {
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}
.pp-pulse-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 0;
}
.pp-pulse-caption__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(100,116,139,.5);
}
.pp-pulse-caption__timer {
  font-size: 9px;
  font-family: var(--pp-mono);
  color: rgba(52,211,153,.45);
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: right;
}
.pp-mdata-inline--formation {
  margin: 0;
  padding: 4px 12px 10px;
}

/* ── Accessibility ── */
*:focus-visible {
  outline: 2px solid rgba(99,179,237,.6);
  outline-offset: 2px;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .pp-lens-card,
  .pp-hist-row,
  .pp-mdata__chevron,
  .pp-edit-btn { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   BROADCAST HEADER v2 (shared pattern with track.php / audit.php)
═══════════════════════════════════════════════════════════ */

.pp-play-header {
  padding: 0 4px;
  margin-bottom: 20px;
}

.tp-broadcast-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
}
.tp-broadcast-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e63535;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(230,53,53,0.4);
  animation: tp-broadcast-pulse 2.4s ease-in-out infinite;
}
@keyframes tp-broadcast-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(230,53,53,0.55); }
  65%  { box-shadow: 0 0 0 6px rgba(230,53,53,0); }
  100% { box-shadow: 0 0 0 0 rgba(230,53,53,0); }
}
@media (prefers-reduced-motion: reduce) {
  .tp-broadcast-dot { animation: none; }
}
.tp-broadcast-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(230,53,53,0.82);
}
.tp-broadcast-sep {
  font-size: 11px;
  color: rgba(255,255,255,0.14);
}
.tp-broadcast-station {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.50);
}

.tp-meta-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .tp-meta-row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
  }
}
.tp-title-display {
  min-width: 0;
  flex: 1 1 auto;
}
.tp-artist-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.62);
  margin: 0 0 6px;
  line-height: 1.2;
}
.tp-track-name {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: #eef0f4;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
@media (min-width: 480px) {
  .tp-track-name { font-size: 1.75rem; }
}
@media (min-width: 768px) {
  .tp-track-name { font-size: 2.05rem; }
}