/* ==================================================================
   Airplay Live — frontend_design AIRLOG skin
   Restyles the reused airlog DOM (al-* namespace) onto the fd
   instrument line, matching the audit table. No .al-skin overlay.
   Every id/class the airlog JS depends on is preserved; the flags
   timeline canvas (.al-ftl-cv) keeps its literal draw colours.
   ================================================================== */

/* ---- page column ------------------------------------------------ */
html.fd .al-page.audit-skin, html.fd .al-page {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  color: var(--fd-ink); font-size: 13.5px; padding-bottom: 96px;
}
html.fd .al-page .mono, html.fd .al-td, html.fd .al-th {
  font-variant-numeric: tabular-nums;
}

/* ---- masthead / toolbar ----------------------------------------- */
html.fd .al-topbar {
  background: var(--fd-panel); border: 1px solid var(--fd-hair);
  border-radius: var(--fd-radius); margin-bottom: 16px;
}
html.fd .al-mast { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; }

/* date nav */
html.fd .al-date-nav-title {
  font-family:"IBM Plex Mono",monospace; font-size: 10px; letter-spacing:.13em;
  text-transform: uppercase; color: var(--fd-ink-3);
}
html.fd .al-date-nav-title::before {
  content: ""; display: inline-block; width: 14px; height: 2px; margin-right: 8px;
  vertical-align: middle; background: var(--fd-accent); border-radius: 1px;
}
html.fd .al-date-input {
  height: 34px; padding: 0 10px; background: var(--fd-panel-2); color: var(--fd-ink);
  border: 1px solid var(--fd-hair-strong); border-radius: var(--fd-radius-sm);
  font-family:"IBM Plex Mono",monospace; font-size: 12px;
}
html.fd .al-date-nav-btn {
  height: 34px; padding: 0 11px; display: inline-flex; align-items: center;
  border: 1px solid var(--fd-hair-strong); border-radius: var(--fd-radius-sm);
  background: var(--fd-panel-2); color: var(--fd-ink-2);
  font-family:"IBM Plex Mono",monospace; font-size: 11px; letter-spacing:.05em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
}
html.fd .al-date-nav-btn:hover { border-color: var(--fd-accent); color: var(--fd-ink); }

/* day stat = big mono readout (audit "Listed" style) */
html.fd .al-daystat-num {
  font-family:"IBM Plex Mono",monospace; font-size: 22px; font-weight: 600;
  color: var(--fd-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
html.fd .al-daystat-lbl {
  font-family:"IBM Plex Mono",monospace; font-size: 10px; letter-spacing:.12em;
  text-transform: uppercase; color: var(--fd-ink-3);
}
html.fd .al-desc-count, html.fd .al-empty { color: var(--fd-ink-2); }

/* type legend / filters */
html.fd .al-legend-item, html.fd .al-legend-filter {
  color: var(--fd-ink-2); font-family:"IBM Plex Mono",monospace; font-size: 10.5px;
  letter-spacing:.05em; border-radius: var(--fd-radius-sm); cursor: pointer;
}
html.fd .al-legend-filter:hover { color: var(--fd-ink); }
html.fd .al-legend-filter[aria-pressed="false"], html.fd .al-legend-filter.is-off { opacity: .4; }
html.fd .al-legend-label { color: inherit; }

/* ---- table ------------------------------------------------------ */
html.fd .al-table-wrap {
  border: 1px solid var(--fd-hair); border-radius: var(--fd-radius);
  background: var(--fd-panel); overflow-x: auto;
}
html.fd .al-table { width: 100%; border-collapse: collapse; }
html.fd .al-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;
  height: 40px; padding: 0 12px; text-align: left;
  border-bottom: 1px solid var(--fd-hair-strong); white-space: nowrap;
}
html.fd .al-th:hover { color: var(--fd-ink); }
html.fd .al-th.al-sort-asc, html.fd .al-th.al-sort-desc { color: var(--fd-ink); }
html.fd .al-th.al-sort-asc .al-th-flex::after { content: "▲"; margin-left: 6px; font-size: 8px; color: var(--fd-accent); }
html.fd .al-th.al-sort-desc .al-th-flex::after { content: "▼"; margin-left: 6px; font-size: 8px; color: var(--fd-accent); }

html.fd .al-td {
  height: 44px; padding: 0 12px; color: var(--fd-ink); font-size: 13px;
  border-bottom: 1px solid var(--fd-hair); vertical-align: middle; white-space: nowrap;
}
html.fd .al-row:hover { background: var(--fd-panel-2); }
html.fd .al-row--highlight { background: color-mix(in srgb, var(--fd-accent) 8%, transparent); }
html.fd .al-row--highlight td:first-child { box-shadow: inset 3px 0 0 var(--fd-accent); }
html.fd .al-table tbody tr:last-child .al-td { border-bottom: 0; }

/* numeric columns right-aligned + mono */
html.fd .al-col-lstn, html.fd .al-col-pop, html.fd .al-col-exitsec,
html.fd .al-col-dur, html.fd .al-col-playid, html.fd .al-col-trackid {
  text-align: right; font-family:"IBM Plex Mono",monospace;
}
html.fd td.al-col-pop { color: var(--fd-ink); font-weight: 600; }
html.fd td.al-col-playid, html.fd td.al-col-trackid { color: var(--fd-ink-3); }
html.fd .al-sub { color: var(--fd-ink-3); font-size: 11px; }

/* artist / title */
html.fd .al-col-artist { color: var(--fd-ink-2); }
html.fd .al-col-title { color: var(--fd-ink); }
html.fd .al-track-link { color: inherit; text-decoration: none; }
html.fd .al-track-link:hover { color: var(--fd-accent); }

/* status marks */
html.fd .al-data-mark--ok   { color: var(--fd-pos); }
html.fd .al-data-mark--pend { color: var(--fd-warn); }
html.fd .al-data-mark--miss { color: var(--fd-ink-3); }

/* type badges (keep purple/blue semantic hues, tone into fd) */
html.fd .al-badge--show  { color: var(--fd-momentum); }
html.fd .al-badge--break { color: var(--fd-accent); }

/* ---- flagged-days view ------------------------------------------ */
html.fd .al-flags-view { color: var(--fd-ink); }
html.fd .al-fdelta--pos { color: var(--fd-pos); }
html.fd .al-fdelta--neg { color: var(--fd-neg); }
/* .al-ftl-cv canvas keeps its own draw colours */

/* ---- back to top (shared control) ------------------------------- */
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); }