/* ==================================================================
   Airplay Live — frontend_design MAIN VIEW (audit) skin
   Overrides the legacy audit CSS (loaded before this file). Restyles
   the reused DOM only; every class the JS reads/writes is preserved.
   Signature: the POP cell as a calibrated instrument readout.
   ================================================================== */

/* ---- page canvas: centered, padded column shared by all children - */
html.fd .fd-main { min-height: 60vh; max-width: 1680px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1440px){ html.fd .fd-main { padding: 0 32px; } }

html.fd .au-content.audit-skin,
html.fd .audit-skin {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  color: var(--fd-ink);
  font-size: 13.5px;
  padding: 0 0 96px;
}
html.fd .audit-skin .mono,
html.fd .audit-skin .num {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* ---- CONTEXT BAR (reused .au-broadcast-bar) --------------------- */
/* Removed in the fd skin: the app bar already carries the view name (MAIN VIEW)
   and the station, so this bar only repeated them (+ a now-dead RETURN TO MAIN
   and the hidden USER GUIDE / gear). Hiding it closes the empty gap between the
   app bar and the topbar. Kept in the DOM (display:none) so its elements still
   exist for the topbar JS (broadcastViewLabel etc.) — no JS breakage. */
html.fd .au-broadcast-bar { display: none; }
/* broadcast/live indicator: red, matching the original radio identity */
html.fd .tp-broadcast-dot {
  background: var(--fd-live);
  box-shadow: 0 0 0 0 rgba(229,72,77,.4);
}
@keyframes tp-broadcast-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(229,72,77,.5); }
  65%  { box-shadow: 0 0 0 5px rgba(229,72,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); }
}
/* page/view name: neutral, confident — not a decorative accent hue */
html.fd .tp-broadcast-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  color: var(--fd-ink);
}

/* the broadcast-bar USER GUIDE is now a duplicate of the app-bar link
   (kept in the DOM so the app-bar button can proxy its click) */
html.fd #auditNavigateModalBtn { display: none; }
/* the gear menu only carried OPTIONS / STATION PROFILE / EXPORT CSV. In the fd
   skin OPTIONS + STATION PROFILE live in the app bar, and EXPORT CSV is a direct
   button in the library-scan hint (#libScanExportBtn), so the gear is redundant.
   Hidden (not removed) — production keeps it until the entries switch to fd. */
html.fd #auditView { display: none; }
html.fd .tp-broadcast-station {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .10em;
  color: var(--fd-ink-2);
}
html.fd .tp-broadcast-sep { color: var(--fd-hair-strong); }
html.fd .tp-broadcast-return {
  font-family: "IBM Plex Mono", monospace; font-size: 11px;
  letter-spacing: .08em; color: var(--fd-accent);
}

/* ---- TOOLBAR (reused .au-topbar / .audit-*) --------------------- */
/* horizontal padding insets the controls off the page edge so range (far left)
   and inactive (far right) line up with the table data instead of sitting flush
   against the gutter (matches the calmer airlog spacing). */
html.fd .au-topbar { padding: 14px 16px 10px; }

/* range / min-plays select: no highlight colour in the fd skin (user pref). An
   active filter is signalled by the topbar hint + reset, not by tinting the
   select, so the highlighted state is reset to the normal control appearance
   (the legacy #range.is-highlight uses --ap-accent = amber, reserved for POP). */
html.fd #range.is-highlight,
html.fd #rotationMinPlays.is-highlight {
  color: var(--fd-ink);
  border-color: var(--fd-hair-strong);
}
html.fd .audit-filters { display: flex; align-items: center; gap: 8px; }
html.fd .audit-mid { margin-top: 8px; }

/* the "Listed" count as an instrument readout */
html.fd .audit-listed-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fd-ink-3);
}
html.fd .audit-listed-num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 20px; font-weight: 600; letter-spacing: -.01em;
  color: var(--fd-ink); font-variant-numeric: tabular-nums;
}
html.fd .audit-libscan-hint {
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px;
  letter-spacing: .08em; color: var(--fd-ink-2);
}
html.fd .audit-filters-notice-active { color: var(--fd-accent); }

/* ---- TABLE SHELL: the hero, in a clean panel --------------------- */
html.fd .au-content .ap-audit-table-wrap {
  border: 1px solid var(--fd-hair);
  border-radius: var(--fd-radius);
  background: var(--fd-panel);
  margin-top: 4px;
}

/* ---- HEADER ROW -------------------------------------------------- */
html.fd .audit-skin th,
html.fd .ap-audit-table th {
  background: var(--fd-panel);
  color: var(--fd-ink-2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 10px; height: 40px;
  border-bottom: 1px solid var(--fd-hair-strong);
  vertical-align: middle;
}
html.fd .ap-audit-table th:hover { color: var(--fd-ink); }
html.fd .ap-audit-table th .ap-col-info-btn { margin-left: 4px; }

/* ---- DATA ROWS --------------------------------------------------- */
html.fd .audit-skin td,
html.fd .ap-audit-table td {
  padding: 0 10px; height: 44px;
  border-bottom: 1px solid var(--fd-hair);
  color: var(--fd-ink);
  font-size: 13.5px; line-height: 1.3;
  vertical-align: middle;
}
html.fd .ap-audit-table tbody tr:last-child td { border-bottom: 0; }
html.fd .audit-skin tr:hover,
html.fd .ap-audit-table tbody tr:hover { background: var(--fd-panel-2); }

/* on-air: neutral raised row + a red "live" left-marker (radio convention,
   not analytically weighted). Kept subtle: on-air isn't a POP signal. */
html.fd .ap-audit-table tbody tr.ap-row-onair { background: var(--fd-panel-3); }
html.fd .ap-audit-table tbody tr.ap-row-onair td:first-child { box-shadow: inset 3px 0 0 var(--fd-live); }
html.fd td.ap-pop-onair-dim { color: var(--fd-ink-2); }

/* excluded / marked: dim but keep legible */
html.fd .ap-audit-table tbody tr.au-row-excluded { opacity: .5; }

/* gap separator */
html.fd .au-gap-label {
  font-family: "IBM Plex Mono", monospace; color: var(--fd-ink-3);
  letter-spacing: .12em; font-weight: 500;
}
html.fd .au-gap-line { background: var(--fd-hair); }

/* ---- ARTIST / TITLE --------------------------------------------- */
html.fd .ap-track-link { text-decoration: none; color: inherit; }
html.fd td.col-artist { color: var(--fd-ink-2); }
html.fd td.col-artist .ap-track-link { color: var(--fd-ink-2); font-weight: 400; }
html.fd td.col-artist .ap-track-link:hover { color: var(--fd-accent); }
html.fd td.ap-td-track .ap-track-text { color: var(--fd-ink); font-weight: 500; }
html.fd td.ap-td-track .ap-track-link:hover .ap-track-text,
html.fd td.ap-td-track a.ap-track-link:hover { color: var(--fd-accent); }

/* ---- LAST PLAYED ------------------------------------------------- */
html.fd td.col-last .ap-last-d { color: var(--fd-ink); font-weight: 500; }
html.fd td.col-last .ap-last-t { color: var(--fd-ink-3); }

/* ---- POP CELL: the calibrated readout ---------------------------- */
/* Dark, confident number + a compact colour tick (never coloured small
   text). ratio-good/warn/bad are preserved (JS recolours them live) but
   here they drive the tick, not the glyph colour. */
html.fd td[data-col-key="npop"] {
  color: var(--fd-ink);
  font-weight: 600;
  font-size: 15px;
  text-align: right;
  white-space: nowrap;
}
html.fd th[data-col-key="npop"] { text-align: right; }
html.fd td[data-col-key="npop"]::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  margin-right: 8px; vertical-align: 1px;
  background: var(--fd-warn);           /* default / not-ready */
}
html.fd td[data-col-key="npop"].ratio-good { color: var(--fd-ink); }
html.fd td[data-col-key="npop"].ratio-warn { color: var(--fd-ink); }
html.fd td[data-col-key="npop"].ratio-bad  { color: var(--fd-ink); }
html.fd td[data-col-key="npop"].ratio-good::before { background: var(--fd-good); }
html.fd td[data-col-key="npop"].ratio-warn::before { background: var(--fd-warn); }
html.fd td[data-col-key="npop"].ratio-bad::before  { background: var(--fd-bad); }
html.fd td[data-col-key="npop"].ratio-na::before   { background: var(--fd-hair-strong); }
/* on-air POP: dimmed, tick hidden (value is provisional) */
html.fd td[data-col-key="npop"].ap-pop-onair-dim { color: var(--fd-ink-2); font-weight: 500; }
html.fd td[data-col-key="npop"].ap-pop-onair-dim::before { background: var(--fd-ink-3); }

html.fd .ap-pop-est-mark {
  font-size: 9px; font-weight: 500; vertical-align: super;
  color: var(--fd-accent); margin-left: 1px; opacity: .95;
}

/* ---- PLAYS ------------------------------------------------------- */
html.fd td[data-col-key="plays_range"] { text-align: right; color: var(--fd-ink); font-weight: 500; }
html.fd th[data-col-key="plays_range"] { text-align: right; }

/* ---- PERF BAR ---------------------------------------------------- */
html.fd .ap-perf-bar {
  background: var(--fd-panel-3);
  border-radius: 3px; height: 6px; overflow: hidden;
}
html.fd .ap-perf-fill { background: var(--fd-accent); border-radius: 3px; }
html.fd .ap-showmix-label { color: var(--fd-ink-3); font-family:"IBM Plex Mono",monospace; letter-spacing:.08em; }

/* on-air duration cell: the small red dot is the one live signal (radio
   convention); the label itself stays a restrained mono micro-label so it sits
   in the palette instead of shouting red. */
html.fd .ap-onair-dot { background: var(--fd-live); }
html.fd .ap-onair-text {
  color: var(--fd-ink-2);
  font-family:"IBM Plex Mono",monospace;
  text-transform: uppercase; letter-spacing:.1em;
}

/* ---- LIBRARY-SCAN low-catalog notice ----------------------------- */
html.fd .au-libscan-notice {
  border: 1px solid var(--fd-hair); border-radius: var(--fd-radius);
  background: var(--fd-panel-2); padding: 18px 20px; margin-top: 12px;
}
html.fd .au-libscan-notice-title {
  font-family:"IBM Plex Mono",monospace; font-size: 12px; letter-spacing:.1em;
  text-transform: uppercase; color: var(--fd-accent); margin-bottom: 6px;
}
html.fd .au-libscan-notice-body { color: var(--fd-ink-2); font-size: 13px; }

/* ---- LOADING (skeleton feel) ------------------------------------- */
html.fd #auditTableLoading {
  padding: 40px 16px; text-align: center;
  color: var(--fd-ink-3); font-family:"IBM Plex Mono",monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
html.fd #auditInfiniteStatus {
  color: var(--fd-ink-3); font-family:"IBM Plex Mono",monospace;
  font-size: 10.5px; letter-spacing: .1em; text-align:center; padding: 14px;
}

/* ---- BACK-TO-TOP ------------------------------------------------- */
html.fd .ap-backtop {
  background: var(--fd-panel); border: 1px solid var(--fd-hair-strong);
  color: var(--fd-ink-2); border-radius: var(--fd-radius-sm);
  font-family:"IBM Plex Mono",monospace; letter-spacing:.06em;
}
html.fd .ap-backtop:hover { border-color: var(--fd-accent); color: var(--fd-ink); }

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

/* breathing room under the app bar (broadcast bar is hidden). Repeated here
   because this sheet redefines .fd-main after fd_system.css. */
html.fd .fd-main { padding-top: 18px; }
html.fd .fd-main--bare { padding-top: 0; }

/* Phase C (docs/AUDIT.md): persistent active-sort indicator, decorated by
   assets/audit/fd_audit_enhance.js. Replaces the old one-time LAST PLAYED pulse
   with a standing caret + emphasis on the sorted column, and a faint hover
   affordance on the other sortable headers. */
html.fd .ap-audit-table th.is-sorted { color: var(--fd-ink); }
html.fd .ap-audit-table th .ap-sort-caret { margin-left: 5px; font-size: 9px; color: var(--fd-accent); vertical-align: middle; }
html.fd .ap-audit-table th.is-sortable:not(.is-sorted):hover::after { content: "\2195"; margin-left: 5px; font-size: 9px; color: var(--fd-ink-3); }