/* ==================================================================
   Airplay Live — frontend_design TRACK VIEW skin
   Restyles the reused track.php DOM onto the fd instrument line
   (matches the audit redesign). No tk-skin overlay. Every id/class
   the Chart.js + history JS depends on is preserved. Colour/typography/
   surface only — no structural layout rewrites of the chart internals.
   ================================================================== */

/* ---- typography: Plex everywhere, mono for readouts -------------- */
html.fd .tp-ds-k, html.fd .tp-ds-v,
html.fd .ap-hgc-date, html.fd .ap-hgc-time, html.fd .ap-hgc-dur,
html.fd .ap-hgc-pop, html.fd .ap-hgc-lstn, html.fd .ap-hgc-live,
html.fd .ap-smx-score, html.fd .ap-smx-lstn,
html.fd .ap-window-btn, html.fd .tp-chart-eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* context bar (.tp-broadcast-*) is shared — styled in fd_system.css §12 */

/* ---- OBJECT TITLE (artist / track) ------------------------------ */
html.fd .tp-track-name,
html.fd .tp-title-main {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  color: var(--fd-ink); font-weight: 600; letter-spacing: -.01em;
  text-transform: none;              /* brief: not all-caps */
}
html.fd .tp-artist-name,
html.fd .tp-title-artist { color: var(--fd-ink-2); font-weight: 500; }

/* ---- KPI STRIP as calibrated readouts (.tp-data-strip) ---------- */
html.fd .tp-data-col, html.fd .tp-data-strip { border-color: var(--fd-hair); }
html.fd .tp-ds-k {
  font-size: 10px; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--fd-ink-3);
}
html.fd .tp-ds-v {
  font-size: 22px; font-weight: 600; color: var(--fd-ink);
  letter-spacing: -.01em;
}
html.fd .tp-ds-sep { color: var(--fd-hair-strong); }
html.fd .tp-ds-est { color: var(--fd-accent); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

/* POP KPI: dark value + a colour tick (not coloured small text),
   consistent with the audit POP cell. */
html.fd .tp-ds-item--pop .tp-ds-v { color: var(--fd-ink); }
html.fd .tp-ds-item--pop .tp-ds-v::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 9px; vertical-align: 2px; background: var(--fd-warn);
}
html.fd .tp-ds-v.tp-pop-color--green { color: var(--fd-ink); }
html.fd .tp-ds-v.tp-pop-color--yellow { color: var(--fd-ink); }
html.fd .tp-ds-v.tp-pop-color--red { color: var(--fd-ink); }
html.fd .tp-ds-item--pop .tp-pop-color--green::before { background: var(--fd-good); }
html.fd .tp-ds-item--pop .tp-pop-color--yellow::before { background: var(--fd-warn); }
html.fd .tp-ds-item--pop .tp-pop-color--red::before { background: var(--fd-bad); }
html.fd .tp-ds-v--stale { opacity: .5; }
html.fd .tp-ds-v--rank, html.fd .tp-ds-item--rank-toggle { color: var(--fd-accent); cursor: pointer; }

/* injected 0-100 POP meter under the POP KPI value (fd_track_chart.js) */
html.fd .fd-meter--kpi { width: 104px; max-width: 100%; margin-top: 7px; }

/* ---- CHART PANEL ------------------------------------------------- */
html.fd .tp-section,
html.fd .tp-chart-area {
  background: var(--fd-panel);
  border: 1px solid var(--fd-hair);
  border-radius: var(--fd-radius);
}
html.fd .tp-section-title {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 14px; font-weight: 600; color: var(--fd-ink);
}

/* Popularity Trend / Listener Flow heading → fd eyebrow: uppercase mono micro-
   label preceded by a short rule, mirroring the airlog BROADCAST DATE eyebrow
   (which uses the teal accent) but in the amber POP hue. The same element holds
   either label (JS swaps the text), so both get the treatment. */
html.fd .tp-chart-title {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--fd-ink-3);
}
html.fd .tp-chart-title::before {
  content: ""; display: inline-block; width: 14px; height: 2px; margin-right: 8px;
  vertical-align: middle; background: var(--fd-pop); border-radius: 1px;
}
html.fd .tp-chart-eyebrow {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fd-ink-3);
}
html.fd .ap-track-chart-wrap { background: transparent; }

/* window range control -> segmented look */
html.fd .ap-window-btns { display: inline-flex; gap: 2px; padding: 3px;
  background: var(--fd-panel-2); border: 1px solid var(--fd-hair); border-radius: var(--fd-radius-sm); }
html.fd .ap-window-btn {
  height: 26px; padding: 0 11px; border: 0; background: transparent;
  color: var(--fd-ink-2); font-size: 11px; font-weight: 500; letter-spacing: .04em;
  border-radius: 4px; cursor: pointer; text-transform: uppercase;
}
html.fd .ap-window-btn:hover { color: var(--fd-ink); }
html.fd .ap-window-btn.is-on,
html.fd .ap-window-btn.is-active,
html.fd .ap-window-btn[aria-pressed="true"] {
  background: var(--fd-accent-weak); color: var(--fd-accent); font-weight: 600;
}

/* legend bar */
html.fd .ap-track-legend-bar, html.fd #apTrackLegend {
  border-top: 1px solid var(--fd-hair); color: var(--fd-ink-2);
}
html.fd .ap-legend {
  background: var(--fd-panel); border: 1px solid var(--fd-hair-strong);
  border-radius: var(--fd-radius-sm); box-shadow: var(--fd-shadow-pop);
}
html.fd .ap-legend-item, html.fd .ap-legend button { color: var(--fd-ink-2); font-family:"IBM Plex Mono",monospace; font-size: 11px; }

/* ---- AIRPLAY HISTORY: play cards -------------------------------- */
html.fd #apAirplayHistoryTitle,
html.fd .tp-section-title { color: var(--fd-ink); }
html.fd #apAirplayHistoryMeta, html.fd #apAirplayHistorySub {
  font-family:"IBM Plex Mono",monospace; font-size: 11px; letter-spacing: .06em; color: var(--fd-ink-2);
}
html.fd .ap-hgrid { gap: 12px; }
html.fd .ap-hgc-card, html.fd .ap-smx-card {
  background: var(--fd-panel);
  border: 1px solid var(--fd-hair);
  border-radius: var(--fd-radius);
  text-decoration: none;
  transition: border-color .14s, background .14s;
}
html.fd .ap-hgc-card:hover, html.fd .ap-smx-card:hover {
  border-color: var(--fd-hair-strong); background: var(--fd-panel-2);
}
html.fd .ap-hgc-date { color: var(--fd-ink); font-weight: 600; font-size: 12px; letter-spacing: .04em; }
/* POP PEAK card: grey the in-card date, since the date also sits above the card
   and the grey hints the play may fall outside the visible timeline order. */
html.fd .ap-hgc-peak .ap-hgc-date { color: var(--fd-ink-2); }
html.fd .ap-hgc-time { color: var(--fd-ink-2); font-size: 12px; }
html.fd .ap-hgc-dur  { color: var(--fd-ink-3); font-size: 11px; }
html.fd .ap-hgc-lstn, html.fd .ap-smx-lstn { color: var(--fd-ink-2); font-size: 11px; }

/* POP badge on a card: value dark, colour as a soft band pill */
html.fd .ap-hgc-pop {
  font-weight: 600; color: var(--fd-ink);
  padding: 1px 7px; border-radius: 5px; border: 1px solid var(--fd-hair-strong);
}
html.fd .ap-hgc-pop-h { border-color: color-mix(in srgb, var(--fd-good) 45%, transparent); }
html.fd .ap-hgc-pop-m { border-color: color-mix(in srgb, var(--fd-warn) 45%, transparent); }
html.fd .ap-hgc-pop-l { border-color: color-mix(in srgb, var(--fd-bad) 45%, transparent); }
html.fd .ap-smx-score { color: var(--fd-ink); font-weight: 600; }

/* on-air card = red (radio convention) */
html.fd .ap-hgc-live { color: var(--fd-live); font-weight: 600; }

/* footer + app-bar station menu + live metrics: shared, in fd_system.css */

/* Forecast-accuracy pill (created by track_chart.js). Full label on desktop,
   short "ACCURACY" on phones so it fits the pop-chart legend row. */
.ap-fca-short { display: none; }
@media (max-width: 639px) {
  .ap-fca-full { display: none; }
  .ap-fca-short { display: inline; }
}