/* ==================================================================
   Airplay Live — frontend_design SYSTEM stylesheet
   Shared foundation for the redesigned audit / track / play / airlog
   pages + Station Profile & Options modals. Loaded after tokens.css so
   its --ap-* overrides win. Scope: html.fd (dark) / html.fd.light.

   Character: analytical, editorial, scientific, broadcast-professional.
   Signature: calibrated instrument readouts (IBM Plex Mono numerals).
   ================================================================== */

/* ------------------------------------------------------------------
   1. TOKEN REMAP — refine the --ap-* neutrals/surfaces/accent so both
   new and reused legacy components adopt the palette. Semantic hues
   (green/red/amber = POP) keep their meaning; only values are tuned.
   ------------------------------------------------------------------ */
html.fd {
  /* --- surfaces & ink (DARK) --- */
  --ap-gray-950: #0a0d13;   /* page background            */
  --ap-gray-900: #0f131b;
  --ap-navy-950: #0c0f16;
  --ap-navy-900: #12151d;   /* primary panel / card       */
  --ap-navy-800: #171b25;   /* inset / secondary surface  */
  --ap-navy-700: #212734;   /* raised chrome              */
  --ap-navy-600: #384356;
  --ap-gray-800: #222836;   /* hairline border            */
  --ap-gray-700: #2c3444;   /* strong border              */
  --ap-gray-600: #3a4456;
  --ap-slate-900: #12151d;
  --ap-slate-200: #222836;

  /* --- text ramp (unchanged; already correct in dark) --- */
  --ap-text-primary: #e7e9f0;
  --ap-text-display: #f2f4f8;
  --ap-text-secondary: #97a2b4;
  --ap-text-tertiary: #64748b;
  --ap-text-primary-rgb: 231,233,240;
  --ap-text-display-rgb: 242,244,248;
  --ap-text-secondary-rgb: 151,162,180;

  --ap-gray-950-rgb: 10,13,19;
  --ap-navy-900-rgb: 18,21,29;
  --ap-navy-800-rgb: 23,27,37;
  --ap-navy-700-rgb: 33,39,52;
  --ap-gray-800-rgb: 34,40,54;
  --ap-gray-700-rgb: 44,52,68;

  /* --- POP amber stays the signal --- */
  --ap-accent: #facc15;
  --ap-accent-rgb: 250,204,21;
  --ap-amber: #fbbf24;

  /* ---------- NEW semantic tokens (--fd-*) ---------- */
  --fd-page:        #0a0d13;
  --fd-panel:       #12151d;
  --fd-panel-2:     #171b25;
  --fd-panel-3:     #1c2230;
  --fd-hair:        #222836;   /* hairline           */
  --fd-hair-strong: #2f384a;   /* stronger divider   */
  --fd-line-grid:   rgba(151,162,180,.10);

  --fd-ink:      #e7e9f0;       /* primary text       */
  --fd-ink-2:    #97a2b4;       /* secondary          */
  --fd-ink-3:    #64748b;       /* tertiary / hints   */

  --fd-accent:      #4fb0d0;    /* interactive / signal blue-teal */
  --fd-accent-rgb:  79,176,208;
  --fd-accent-weak: rgba(79,176,208,.14);
  --fd-focus:       #6cc4e0;

  --fd-pop:       #fbbf24;      /* POP line / band, warm amber    */
  --fd-pop-rgb:   251,191,36;
  --fd-pos:       #34d399;      /* positive signal    */
  --fd-neg:       #f87171;      /* negative signal    */
  --fd-live:      #e5484d;      /* on-air / broadcast (radio red) */
  --fd-forecast:  #2dd4bf;      /* forecast, dashed   */
  --fd-momentum:  #a78bfa;      /* momentum           */
  --fd-exit:      #94a3b8;      /* exit point, neutral*/

  /* POP bands — locked to GLOSSARY.md UI Color Palette */
  --fd-good:  #34d399;          /* rgba(52,211,153)  */
  --fd-warn:  #facc15;          /* rgba(250,204,21)  */
  --fd-bad:   #f87171;          /* rgba(248,113,113) */

  --fd-shadow-pop: 0 8px 28px -8px rgba(0,0,0,.66), 0 2px 8px -2px rgba(0,0,0,.5);
  --fd-radius:      8px;
  --fd-radius-sm:   6px;
  color-scheme: dark;
}

html.fd.light {
  color-scheme: light;
  /* --- surfaces & ink (LIGHT, first-class) --- */
  --ap-gray-950: #f4f6f8;   /* page background            */
  --ap-gray-900: #ffffff;
  --ap-navy-950: #eef1f5;
  --ap-navy-900: #ffffff;   /* primary panel / card       */
  --ap-navy-800: #f8fafc;   /* inset / secondary surface  */
  --ap-navy-700: #eef1f5;   /* raised chrome              */
  --ap-navy-600: #c9d2df;
  --ap-gray-800: #e4e8ee;   /* hairline border            */
  --ap-gray-700: #d3dae3;   /* strong border              */
  --ap-gray-600: #b7c1cf;
  --ap-slate-900: #ffffff;
  --ap-slate-200: #e4e8ee;

  --ap-text-primary: #1e293b;
  --ap-text-display: #223047;
  --ap-text-secondary: #5b6674;
  --ap-text-tertiary: #93a0b0;
  --ap-text-primary-rgb: 30,41,59;
  --ap-text-display-rgb: 34,48,71;
  --ap-text-secondary-rgb: 91,102,116;

  --ap-gray-950-rgb: 244,246,248;
  --ap-navy-900-rgb: 255,255,255;
  --ap-navy-800-rgb: 248,250,252;
  --ap-navy-700-rgb: 238,241,245;
  --ap-gray-800-rgb: 228,232,238;
  --ap-gray-700-rgb: 211,218,227;

  /* POP: line/band stays amber; the numeric value renders dark (set at
     usage). On white, small amber text is avoided per brief. */
  --ap-accent: #d97706;
  --ap-accent-rgb: 217,119,6;
  --ap-amber: #d97706;

  --fd-page:        #f4f6f8;
  --fd-panel:       #ffffff;
  --fd-panel-2:     #f8fafc;
  --fd-panel-3:     #f1f4f8;
  --fd-hair:        #e4e8ee;
  --fd-hair-strong: #d3dae3;
  --fd-line-grid:   rgba(30,41,59,.09);

  --fd-ink:      #1e293b;
  --fd-ink-2:    #5b6674;
  --fd-ink-3:    #93a0b0;

  --fd-accent:      #2f6f83;
  --fd-accent-rgb:  47,111,131;
  --fd-accent-weak: rgba(47,111,131,.10);
  --fd-focus:       #2f6f83;

  --fd-pop:       #d97706;
  --fd-pop-rgb:   217,119,6;
  --fd-pos:       #15803d;
  --fd-neg:       #b91c1c;
  --fd-live:      #cf3a3a;      /* on-air / broadcast (radio red) */
  --fd-forecast:  #0d9488;
  --fd-momentum:  #7c5cbf;
  --fd-exit:      #64748b;

  /* POP bands — darker variants for AA contrast on white */
  --fd-good:  #15803d;
  --fd-warn:  #b45309;
  --fd-bad:   #b91c1c;

  --fd-shadow-pop: 0 10px 30px -12px rgba(30,41,59,.28), 0 2px 8px -3px rgba(30,41,59,.14);
}

/* ------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------ */
html.fd, html.fd body {
  background: var(--fd-page);
  color: var(--fd-ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-feature-settings: "cv05" 1;      /* single-storey a — cleaner numerals context */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html.fd body { font-size: 13.5px; line-height: 1.5; }

html.fd .mono,
html.fd .num,
html.fd .fd-mono {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "zero" 1;      /* slashed zero — instrument feel */
}
html.fd { font-variant-numeric: tabular-nums; }

/* Uppercase mono micro-label — the instrument "eyebrow". */
html.fd .fd-kicker {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fd-ink-3);
}

html.fd ::selection { background: var(--fd-accent-weak); }

/* Focus — always visible, keyboard-first. */
html.fd :focus-visible {
  outline: 2px solid var(--fd-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

html.fd .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.fd *, html.fd *::before, html.fd *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------
   3. APPLICATION SHELL — fixed 56px top bar
   ------------------------------------------------------------------ */
html.fd .sh-body,
html.fd body.sh-body { background: var(--fd-page); }

html.fd .fd-appbar {
  position: sticky; top: 0; z-index: 60;
  height: 56px;
  display: flex; align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: var(--fd-panel);
  border-bottom: 1px solid var(--fd-hair);
}
html.fd.light .fd-appbar {
  box-shadow: 0 1px 0 rgba(30,41,59,.03);
}

html.fd .fd-appbar__brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--fd-ink);
  flex-shrink: 0;
}
html.fd .fd-appbar__logo { height: 22px; width: auto; display: block; }
html.fd .fd-appbar__wordmark {
  font-weight: 600; font-size: 14px; letter-spacing: .01em;
  color: var(--fd-ink);
}
html.fd .fd-appbar__wordmark small {
  display: block; font-family: "IBM Plex Mono", monospace;
  font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--fd-ink-3); margin-top: -2px;
}

/* Station selector — the most important identity in the bar. */
html.fd .fd-station {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 10px 0 11px;
  background: var(--fd-panel-2);
  border: 1px solid var(--fd-hair-strong);
  border-radius: var(--fd-radius-sm);
  color: var(--fd-ink);
  font-weight: 600; font-size: 13px;
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
html.fd .fd-station:hover { border-color: var(--fd-accent); }
/* .fd-station__dot (green status dot before the station name) removed 2026-07-25. */
html.fd .fd-station__caret { color: var(--fd-ink-3); font-size: 10px; }

html.fd .fd-appbar__view {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fd-ink-2);
  padding-left: 12px; margin-left: 2px;
  border-left: 1px solid var(--fd-hair);
}

html.fd .fd-appbar__spacer { flex: 1 1 auto; min-width: 8px; }

/* Data status cluster — right side, quiet. */
html.fd .fd-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "IBM Plex Mono", monospace; font-size: 11px;
  color: var(--fd-ink-2); white-space: nowrap;
}
html.fd .fd-status__pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--fd-pos);
  animation: fdPulse 2.4s ease-in-out infinite;
}
@keyframes fdPulse { 0%,100%{opacity:1} 50%{opacity:.35} }

html.fd .fd-appbar__links { display: flex; align-items: center; gap: 4px; }

/* Overflow wrapper: transparent on desktop (links sit inline in the bar), a
   positioned dropdown anchor on mobile. Kebab button is desktop-hidden. */
html.fd .fd-appbar__more { display: contents; }
html.fd .fd-more-btn { display: none; }

/* App-bar text/icon links (Station Profile, User Guide, Options). */
html.fd .fd-navlink {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 11px;
  border: 1px solid transparent; border-radius: var(--fd-radius-sm);
  background: transparent; color: var(--fd-ink-2);
  font-size: 12.5px; font-weight: 500; cursor: pointer;
  text-decoration: none;
  transition: background .14s, color .14s, border-color .14s;
}
html.fd .fd-navlink:hover { background: var(--fd-panel-2); color: var(--fd-ink); border-color: var(--fd-hair); }
html.fd .fd-navlink svg { width: 15px; height: 15px; opacity: .8; }

/* App-bar stability: header_nowplaying.js cycles #liveClock between the clock
   and the now-playing title in the SAME slot. Left free, a long title shoves
   the listeners/trend metrics sideways (jitter) and wraps the Station Profile /
   User Guide labels onto two lines. Fix: a fixed-width clock slot (short clock
   leaves a stable gap by design; long titles ellipsize with "…"), and keep the
   metric + link clusters from shrinking or wrapping. */
html.fd #liveClock {
  display: inline-block; width: 180px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}
html.fd .fd-status,
html.fd .fd-appbar__metrics,
html.fd .fd-appbar__links { flex-shrink: 0; }
html.fd .fd-appbar__links { flex-wrap: nowrap; }
html.fd .fd-navlink { white-space: nowrap; }

/* ------------------------------------------------------------------
   4. CONTEXT BAR — per-page identity + filters, below the app bar
   ------------------------------------------------------------------ */
html.fd .fd-context {
  position: sticky; top: 56px; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px;
  background: var(--fd-page);
  border-bottom: 1px solid var(--fd-hair);
}
html.fd .fd-context__title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
html.fd .fd-context__eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fd-accent);
}
html.fd .fd-context__h {
  font-size: 17px; font-weight: 600; color: var(--fd-ink);
  letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.fd .fd-context__meta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--fd-ink-2);
}
html.fd .fd-context__meta b { color: var(--fd-ink); font-weight: 500; }
html.fd .fd-context__sep { color: var(--fd-hair-strong); }

/* ------------------------------------------------------------------
   5. WORK AREA
   ------------------------------------------------------------------ */
html.fd .fd-work {
  max-width: 1680px; margin: 0 auto;
  padding: 20px 24px 96px;
}
@media (min-width: 1440px){ html.fd .fd-work { padding-left: 32px; padding-right: 32px; } }

/* the <main> shared by every fd page: centered, padded work column */
html.fd .fd-main { max-width: 1680px; margin: 0 auto; padding: 0 24px; min-height: 60vh; }
@media (min-width: 1440px){ html.fd .fd-main { padding: 0 32px; } }
html.fd .fd-main--bare { max-width: none; padding: 0; }

/* Panel / analysis card */
html.fd .fd-panel {
  background: var(--fd-panel);
  border: 1px solid var(--fd-hair);
  border-radius: var(--fd-radius);
}
html.fd .fd-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--fd-hair);
}
html.fd .fd-panel__title { font-size: 14px; font-weight: 600; color: var(--fd-ink); }
html.fd .fd-panel__body { padding: 16px; }

/* ------------------------------------------------------------------
   6. BUTTONS — new (.fd-btn*) + restyle reused legacy classes
   Heights 34–38px, radius 6, no bright pills for view toggles.
   ------------------------------------------------------------------ */
html.fd .fd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--fd-hair-strong);
  border-radius: var(--fd-radius-sm);
  background: var(--fd-panel-2); color: var(--fd-ink);
  font-family: inherit; font-size: 12.5px; font-weight: 500; letter-spacing: .01em;
  cursor: pointer; white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}
html.fd .fd-btn:hover { border-color: var(--fd-accent); background: var(--fd-panel-3); }
html.fd .fd-btn--primary {
  background: var(--fd-accent); border-color: var(--fd-accent); color: #fff;
}
html.fd.light .fd-btn--primary { color: #fff; }
html.fd .fd-btn--primary:hover { filter: brightness(1.06); background: var(--fd-accent); }
html.fd .fd-btn--ghost { background: transparent; border-color: transparent; color: var(--fd-ink-2); }
html.fd .fd-btn--ghost:hover { background: var(--fd-panel-2); color: var(--fd-ink); border-color: var(--fd-hair); }

/* Segmented control (7d/30d, view switch) */
html.fd .fd-seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--fd-panel-2); border: 1px solid var(--fd-hair);
  border-radius: var(--fd-radius-sm);
}
html.fd .fd-seg__btn {
  height: 28px; padding: 0 12px; border: 0; background: transparent;
  color: var(--fd-ink-2); font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px; font-weight: 500; letter-spacing: .04em; cursor: pointer;
  border-radius: 4px; text-transform: uppercase;
  transition: background .14s, color .14s;
}
html.fd .fd-seg__btn:hover { color: var(--fd-ink); }
html.fd .fd-seg__btn.is-active {
  background: var(--fd-panel); color: var(--fd-ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
html.fd.light .fd-seg__btn.is-active { box-shadow: 0 1px 2px rgba(30,41,59,.10); }

/* --- Restyle reused legacy toolbar buttons for cohesion --- */
html.fd .ap-tb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px;
  border: 1px solid var(--fd-hair-strong);
  border-radius: var(--fd-radius-sm);
  background: var(--fd-panel-2); color: var(--fd-ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; transition: background .14s, border-color .14s, color .14s;
}
html.fd .ap-tb-btn:hover { border-color: var(--fd-accent); color: var(--fd-ink); background: var(--fd-panel-3); }
html.fd .ap-tb-btn.is-active { background: var(--fd-accent-weak); border-color: var(--fd-accent); color: var(--fd-ink); }
html.fd .ap-tb-btn.is-muted { color: var(--fd-ink-2); }
html.fd .ap-tb-btn[disabled], html.fd .ap-tb-btn.is-disabled { opacity: .45; cursor: not-allowed; }
html.fd .ap-tb-btn--clear:hover { border-color: var(--fd-neg); color: var(--fd-neg); }

html.fd .ap-mode-pill {
  height: 32px; padding: 0 12px;
  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; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
}
html.fd .ap-mode-pill.is-active { background: var(--fd-accent-weak); border-color: var(--fd-accent); color: var(--fd-ink); }

/* Info (ⓘ) button */
html.fd .ap-col-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0;
  border: 0; background: transparent; color: var(--fd-ink-3);
  font-size: 12px; line-height: 1; cursor: pointer; border-radius: 50%;
  transition: color .14s;
}
html.fd .ap-col-info-btn:hover { color: var(--fd-accent); }

/* ------------------------------------------------------------------
   7. FORM CONTROLS — selects, search
   ------------------------------------------------------------------ */
html.fd .audit-compact-select,
html.fd select.fd-select,
html.fd input.fd-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: 11.5px; letter-spacing: .03em;
  cursor: pointer;
  transition: border-color .14s;
}
html.fd select.audit-compact-select { padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%2394a3b8' stroke-width='1.4' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
  -webkit-appearance: none; appearance: none;
}
html.fd .audit-compact-select:hover { border-color: var(--fd-accent); }
html.fd .audit-compact-select.is-highlight { border-color: var(--fd-accent); color: var(--fd-ink); box-shadow: inset 0 0 0 1px var(--fd-accent-weak); }
html.fd input.audit-compact-select { cursor: text; min-width: 130px; }
html.fd input.audit-compact-select::placeholder { color: var(--fd-ink-3); text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------------------------
   8. BADGES / CHIPS / calibrated POP readout
   ------------------------------------------------------------------ */
html.fd .fd-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 8px; border-radius: 5px;
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--fd-panel-2); color: var(--fd-ink-2); border: 1px solid var(--fd-hair);
}
html.fd .fd-badge--est { color: var(--fd-accent); border-color: color-mix(in srgb, var(--fd-accent) 40%, transparent); }

/* The signature: a compact 0–100 measurement bar with a tick. */
html.fd .fd-meter {
  position: relative; height: 6px; border-radius: 3px;
  background: var(--fd-panel-3);
  overflow: hidden;
}
html.fd .fd-meter__fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 3px;
  background: var(--fd-pop);
}
html.fd .fd-meter__mid {   /* 50-point reference tick */
  position: absolute; top: -2px; bottom: -2px; left: 50%; width: 1px;
  background: var(--fd-hair-strong);
}

/* ------------------------------------------------------------------
   9. SKELETON / LOADING / STALE — structural, not a spinner
   ------------------------------------------------------------------ */
html.fd .fd-skel {
  background: linear-gradient(90deg,
    var(--fd-panel-2) 0%, var(--fd-panel-3) 50%, var(--fd-panel-2) 100%);
  background-size: 200% 100%;
  animation: fdShimmer 1.3s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes fdShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

html.fd .fd-progress { height: 3px; border-radius: 2px; background: var(--fd-panel-3); overflow: hidden; }
html.fd .fd-progress__bar { height: 100%; background: var(--fd-accent); border-radius: 2px; transition: width .3s ease; }

/* ------------------------------------------------------------------
   10. FLOATING LAYERS — menus & modals get the shadow, panels don't
   ------------------------------------------------------------------ */
html.fd .fd-pop-layer,
html.fd .page-gear-menu,
html.fd .ap-menu {
  background: var(--fd-panel);
  border: 1px solid var(--fd-hair-strong);
  border-radius: var(--fd-radius);
  box-shadow: 0 18px 44px -16px rgba(0,0,0,.55), 0 4px 14px -6px rgba(0,0,0,.4);
}
html.fd.light .fd-pop-layer,
html.fd.light .page-gear-menu,
html.fd.light .ap-menu {
  box-shadow: 0 18px 44px -16px rgba(30,41,59,.24), 0 4px 14px -6px rgba(30,41,59,.14);
}

/* ------------------------------------------------------------------
   11. SHARED app-bar station menu + live metrics + footer
   (every fd page needs these — keep here, not per-page)
   ------------------------------------------------------------------ */
html.fd .fd-station-wrap { position: relative; }
html.fd .fd-station-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
  min-width: 190px; padding: 6px;
}
html.fd .fd-station-menu__item {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border-radius: var(--fd-radius-sm); text-decoration: none;
  color: var(--fd-ink); font-size: 13px; font-weight: 500;
}
html.fd .fd-station-menu__item:hover { background: var(--fd-panel-2); }
html.fd .fd-station-menu__item.is-current { color: var(--fd-accent); }
html.fd .fd-station-menu__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fd-ink-3); }
html.fd .fd-station-menu__item.is-current .fd-station-menu__dot { background: var(--fd-pos); }
html.fd .fd-station-menu__check { margin-left: auto; color: var(--fd-accent); }

html.fd .fd-appbar__metrics { display: flex; align-items: center; }
html.fd .fd-appbar__metrics .sh-hdr-metric-label {
  font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fd-ink-3);
}
html.fd .fd-appbar__metrics #listenerCount,
html.fd .fd-appbar__metrics #trendValue {
  font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums;
  color: var(--fd-ink); font-weight: 600;
}

html.fd .fd-footer { border-top: 1px solid var(--fd-hair); background: var(--fd-panel); }
html.fd .fd-footer__inner {
  max-width: 1680px; margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--fd-ink-2);
}
html.fd .fd-footer__brand { color: var(--fd-ink); font-weight: 600; letter-spacing: .08em; font-size: 11px; }
html.fd .fd-footer__sep { color: var(--fd-hair-strong); }
html.fd .fd-footer__spacer { flex: 1 1 auto; }
html.fd .fd-footer__meta { color: var(--fd-ink-3); font-size: 11px; letter-spacing: .04em; }

/* ------------------------------------------------------------------
   12. SHARED context bar (.tp-broadcast-*) — track / play / airlog.
   audit uses .au-broadcast-bar (styled in fd_audit.css).
   ------------------------------------------------------------------ */
/* Removed in the fd skin (track / play / airlog): the app bar already carries
   the view name + station, so this bar only repeated them (+ the track USER
   GUIDE leftover and the hidden gear). Hiding it closes the gap under the app
   bar. Kept in the DOM (display:none) so any page JS referencing its nodes is
   safe. Note: play's AIRLOG action lives in the Play Report card, not here. */
html.fd .tp-broadcast-bar { display: none; }
html.fd .tp-broadcast-dot { background: var(--fd-live); box-shadow: 0 0 0 0 rgba(229,72,77,.4); }
html.fd .tp-broadcast-label {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; color: var(--fd-ink);
}
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); }
/* the in-page USER GUIDE buttons are duplicates of the app-bar link
   (kept in the DOM so the app-bar can proxy them if needed) */
html.fd #playUserGuideBtn, html.fd #airlogUserGuideBtn { display: none; }
/* the shared gear menu (#apGear on play / track / airlog) only held OPTIONS /
   STATION PROFILE — both in the fd app bar — plus AIRLOG on play, now relocated
   to a Play Report action (.pp-airlog-action). Redundant in fd, so hidden.
   Production keeps it until the entries switch to fd. */
html.fd #apGear { display: none; }

/* ------------------------------------------------------------------
   13. MODAL POLISH — Station Profile + Options (reused, floating).
   Restyles the shared .ap-audit-modal* chrome + .sp-tabbar tabs +
   .au-opts-* controls. Modals are the one place shadows are allowed.
   ------------------------------------------------------------------ */
html.fd .ap-audit-modal-backdrop { background: rgba(4,7,12,.60); backdrop-filter: none; }
html.fd.light .ap-audit-modal-backdrop { background: rgba(15,23,42,.32); }

html.fd .ap-audit-modal-panel {
  background: var(--fd-panel);
  border: 1px solid var(--fd-hair-strong);
  border-radius: var(--fd-radius);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.6), 0 6px 18px -8px rgba(0,0,0,.45);
}
html.fd.light .ap-audit-modal-panel {
  box-shadow: 0 24px 60px -20px rgba(30,41,59,.28), 0 6px 18px -8px rgba(30,41,59,.16);
}
html.fd .ap-audit-modal-head { border-bottom: 1px solid var(--fd-hair); }
html.fd .ap-audit-title-accent { color: var(--fd-ink); font-weight: 600; }
html.fd .ap-audit-modal-close-x { color: var(--fd-ink-2); border-radius: var(--fd-radius-sm); }
html.fd .ap-audit-modal-close-x:hover { color: var(--fd-ink); background: var(--fd-panel-2); }
html.fd .sp-station-pill {
  font-family: "IBM Plex Mono", monospace; letter-spacing: .08em;
  color: var(--fd-ink); font-weight: 600;
}
html.fd .sp-ref-note { color: var(--fd-ink-2); }
html.fd .sp-ref-note-label { color: var(--fd-ink-3); font-family: "IBM Plex Mono", monospace; letter-spacing: .1em; }

/* tabs */
html.fd .sp-tabbar { border-bottom: 1px solid var(--fd-hair); }
html.fd .lc24h-tab {
  font-family: "IBM Plex Mono", monospace; font-weight: 500; letter-spacing: .1em;
  color: var(--fd-ink-2); border-bottom: 2px solid transparent;
}
html.fd .lc24h-tab:hover { color: var(--fd-ink); }
html.fd .lc24h-tab.is-active,
html.fd .lc24h-tab.active,
html.fd .lc24h-tab[aria-selected="true"] {
  color: var(--fd-ink); border-bottom-color: var(--fd-accent);
}
html.fd .sp-tab-info { color: var(--fd-ink-3); }

/* Options: section labels, values, descriptions */
html.fd .opts-label,
html.fd .au-opts-toggle-label {
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fd-ink-3);
}
html.fd .au-opts-para, html.fd .au-opts-desc { color: var(--fd-ink-2); }
html.fd .au-opts-val { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; color: var(--fd-ink); }
html.fd .au-opts-val--green, html.fd .au-opts-desc--green { color: var(--fd-good); }
html.fd .au-opts-val--yellow, html.fd .au-opts-desc--yellow { color: var(--fd-warn); }
html.fd .au-opts-val--red, html.fd .au-opts-desc--red { color: var(--fd-bad); }
html.fd .opts-box { background: var(--fd-panel-2); border: 1px solid var(--fd-hair); border-radius: var(--fd-radius); }

/* range sliders + toggles pick up the interactive accent */
html.fd .au-range-input { accent-color: var(--fd-accent); }
html.fd .ap-audit-circle-toggle input:checked + .ap-audit-circle-ui { background: var(--fd-accent); border-color: var(--fd-accent); }

/* text/threshold inputs */
html.fd .au-opts-text-input, html.fd .au-opts-threshold-input, html.fd .au-opts-textarea {
  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;
}
html.fd .au-opts-text-input:focus, html.fd .au-opts-threshold-input:focus { border-color: var(--fd-accent); }

/* theme + apply/reset buttons */
html.fd .theme-btn {
  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: .06em; text-transform: uppercase;
}
html.fd .theme-btn:hover { color: var(--fd-ink); border-color: var(--fd-accent); }
html.fd .theme-btn.is-active, html.fd .theme-btn.active, html.fd .theme-btn[aria-pressed="true"] {
  background: var(--fd-accent-weak); border-color: var(--fd-accent); color: var(--fd-ink);
}

/* ACCURACY button (opens the forecast-accuracy diagnostic) sits beside the
   POP-column estimates toggle. Its production markup carries an inline green
   style that is off the fd palette; neutralise it into a quiet secondary
   action so it reads in line with the restrained scheme. The inline style
   forces !important. Production styling is untouched. */
html.fd #auditForecastAccBtn {
  color: var(--fd-ink-2) !important;
  border-color: var(--fd-hair-strong) !important;
  font-family: "IBM Plex Mono", monospace; letter-spacing: .06em;
}
html.fd #auditForecastAccBtn:hover {
  color: var(--fd-ink) !important;
  border-color: var(--fd-accent) !important;
}

/* ADVANCED button, moved to the Options modal header (left of RESET). A quiet
   attention tone — restrained interactive blue — plus a small gap off RESET so
   it reads as a separate, heavier action (opens advanced tools incl. delete). */
html.fd .au-opts-adv-btn {
  color: var(--fd-accent);
  border-color: rgba(var(--fd-accent-rgb), .40);
  margin-right: 6px;
}
html.fd .au-opts-adv-btn:hover {
  color: var(--fd-ink);
  border-color: var(--fd-accent);
  background: var(--fd-accent-weak);
}

/* ---------------------------------------------------------------------------
   14. IMPACT / LISTENER-FLOW MODAL — interior polish. Same modal opens from
   the play.php "LISTENER FLOW" button (play_parts/view_impact.php) and the
   audit table's impact icon in the pop/plays column (audit_parts/view_modals
   .php); the markup is identical, so we hook the shared ids (#impactModal /
   #impactChart / #impactPlayInfo). The chrome is §13 (.ap-audit-modal-*) and
   the chart colours come from AP_PAL (already fd-remapped under html.fd), so
   this only refines the INTERIOR: the chart bezel + the mono caption beneath.
   The one literal in the chart JS (rgba(2,6,23,.55) label chip) lives in
   production JS we do not fork; it reads as a neutral dark chip on both themes.
--------------------------------------------------------------------------- */
/* seat the canvas on the inset surface so it reads as an instrument readout.
   :has() targets the wrapper on both markups (.au-impact-chart-wrap on audit,
   the utility-height div on play) without depending on either class name. */
html.fd #impactModal div:has(> #impactChart) {
  background: var(--fd-panel-2);
  border: 1px solid var(--fd-hair);
  border-radius: var(--fd-radius-sm);
  padding: 8px 10px 6px;
}

/* caption row under the chart → fd mono micro-label */
html.fd #impactModal #impactPlayInfo {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  color: var(--fd-ink-3);
  text-decoration: none;
}
/* enabled = the "open track" link; disabled state (.pointer-events-none, the
   window/date label) stays the muted micro-label above. */
html.fd #impactModal #impactPlayInfo:not(.pointer-events-none) {
  color: var(--fd-accent);
  cursor: pointer;
}
html.fd #impactModal #impactPlayInfo:not(.pointer-events-none):hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   15. Breathing room under the app bar. The reused broadcast bar (which used to
   provide it) is hidden in the fd skin, so add a little top padding to the work
   area on every page. Longhand after the .fd-main shorthand so it survives the
   responsive padding override. (fd_audit.css repeats this because it redefines
   .fd-main after this sheet.)
--------------------------------------------------------------------------- */
html.fd .fd-main { padding-top: 18px; }
html.fd .fd-main--bare { padding-top: 0; }

/* ---------------------------------------------------------------------------
   16. App-bar Back button (detail pages) + Station-Profile Listen button.
--------------------------------------------------------------------------- */
/* Back: an app-bar affordance on detail pages only. Hidden by default and
   shown via the header's data-ap-page (which ap_nav keeps current on soft-nav,
   so it toggles without a page refresh). */
html.fd .fd-back-btn { display: none; }
html.fd [data-ap-page="track.php"] .fd-back-btn,
html.fd [data-ap-page="play.php"] .fd-back-btn { display: inline-flex; }
html.fd .fd-back-btn {
  align-items: center; gap: 5px;
  height: 34px; padding: 0 12px 0 9px; margin-right: 2px;
  border: 1px solid var(--fd-hair); border-radius: var(--fd-radius-sm);
  background: transparent; color: var(--fd-ink-2);
  font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
html.fd .fd-back-btn:hover { background: var(--fd-panel-2); color: var(--fd-ink); border-color: var(--fd-hair-strong); }
html.fd .fd-back-btn svg { width: 15px; height: 15px; }

/* Mobile app-bar Back (standalone track/play only): the in-body mobile Back copy
   was removed - in the detail modal you navigate via the slim embed header
   (TRACK VIEW link / close), so the body button was redundant. On the standalone
   pages the app-bar .fd-back-btn stays as the back affordance; on phones it goes
   icon-only so it stays compact in the narrow bar. The embed header has no
   .fd-back-btn, so this does not affect the modal. */
@media (max-width: 767px) {
  html.fd [data-ap-page="track.php"] .fd-back-btn,
  html.fd [data-ap-page="play.php"]  .fd-back-btn {
    padding: 0; width: 34px; justify-content: center; gap: 0;
  }
  html.fd [data-ap-page="track.php"] .fd-back-btn span,
  html.fd [data-ap-page="play.php"]  .fd-back-btn span { display: none; }
}

/* Listen: live-stream toggle in the Station Profile modal header, right of the
   station pill. Calm teal interactive by default; filled while playing. */
html.fd .sp-listen-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 23px; padding: 0 9px; margin-right: 4px;
  border: 1px solid var(--fd-accent); border-radius: 6px;
  background: transparent; color: var(--fd-accent);
  font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 500;
  letter-spacing: .08em; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
html.fd .sp-listen-btn:hover { background: var(--fd-accent-weak); }
html.fd .sp-listen-btn[data-state="playing"] {
  background: var(--fd-accent); color: var(--fd-panel); border-color: var(--fd-accent);
}
html.fd .sp-listen-btn [data-role="play-icon"] { font-size: 8px; line-height: 1; }

/* ==================================================================
   MOBILE APP BAR (<= 767px)
   ------------------------------------------------------------------
   The fd design was built desktop-first; the 56px app bar is a single
   non-wrapping row of fixed-width clusters (logo, back, station, view,
   180px clock, listener metrics, three text action links). On a phone
   their combined width far exceeds the viewport, so the page gained a
   horizontal scrollbar and the browser inflated the layout viewport —
   which also made position:fixed modals render oversized.

   On phones the bar becomes a preview: it keeps identity (logo, station,
   page name) and the live listener/trend metrics, drops the quiet clock,
   and folds the three secondary actions into one overflow (kebab) menu —
   the standard mobile app-bar pattern. Station name and page label are
   the flexible items: they ellipsize before anything can push the bar
   past the screen edge. Desktop layout above 767px is untouched.
   ================================================================== */
@media (max-width: 767px) {
  html.fd .fd-appbar {
    height: 52px;
    gap: 8px;
    padding: 0 10px;
  }

  /* Quiet on phones: clock / now-playing slot (the widest fixed cluster). */
  html.fd .fd-status { display: none; }

  html.fd .fd-appbar__logo { height: 20px; }

  /* Station + page name yield width first (ellipsize) so the bar can never
     be forced wider than the viewport. */
  html.fd .fd-station {
    height: 30px; padding: 0 9px; gap: 6px;
    font-size: 12px; min-width: 0;
  }
  html.fd .fd-station__name {
    max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html.fd .fd-station__caret { display: none; }
  html.fd .fd-appbar__view {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding-left: 9px; margin-left: 0; font-size: 10px;
  }
  /* Audit "MAIN VIEW" wraps to two lines on phones so it shows in full instead
     of ellipsizing to "MAIN". max-width ~5.5ch fits one word per line, breaking
     at the space; the flex bar keeps the two lines vertically centred. */
  html.fd [data-ap-page="audit.php"] .fd-appbar__view {
    white-space: normal; overflow: visible; text-overflow: clip;
    max-width: 5.5ch; line-height: 1.04; text-align: left;
  }

  /* Listeners + trend stay, just smaller numerals. */
  html.fd .fd-appbar__metrics #listenerCount,
  html.fd .fd-appbar__metrics #trendValue { font-size: 16px; }

  /* Overflow (kebab) menu ------------------------------------------------ */
  html.fd .fd-appbar__more { display: block; position: relative; flex-shrink: 0; }

  html.fd .fd-more-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex-shrink: 0;
    border: 1px solid transparent; border-radius: var(--fd-radius-sm);
    background: transparent; color: var(--fd-ink-2); cursor: pointer;
    transition: background .14s, color .14s, border-color .14s;
  }
  html.fd .fd-more-btn:hover,
  html.fd .fd-more-btn[aria-expanded="true"] {
    background: var(--fd-panel-2); color: var(--fd-ink); border-color: var(--fd-hair);
  }
  html.fd .fd-more-btn svg { width: 18px; height: 18px; }

  /* The action links become the kebab's dropdown panel. */
  html.fd .fd-appbar__links {
    position: absolute; top: calc(100% + 6px); right: 0;
    flex-direction: column; align-items: stretch;
    min-width: 210px; padding: 6px; gap: 2px;
    background: var(--fd-panel);
    border: 1px solid var(--fd-hair-strong);
    border-radius: var(--fd-radius);
    box-shadow: 0 18px 44px -16px rgba(0,0,0,.55), 0 4px 14px -6px rgba(0,0,0,.4);
    display: none; z-index: 70;
  }
  html.fd .fd-appbar__more.is-open .fd-appbar__links { display: flex; }
  html.fd .fd-appbar__links .fd-navlink {
    width: 100%; justify-content: flex-start; height: 40px;
    padding: 0 10px; font-size: 13.5px; color: var(--fd-ink);
  }
  html.fd .fd-appbar__links .fd-navlink svg { opacity: .7; }
  html.fd.light .fd-appbar__links {
    box-shadow: 0 18px 44px -16px rgba(30,41,59,.24), 0 4px 14px -6px rgba(30,41,59,.14);
  }

  /* Shared modal chrome must not force a min-width past a narrow screen. */
  html.fd .ap-audit-modal-panel { min-width: 0; }
}

/* Very narrow phones: drop the page-name label (least critical identity — the
   content below already names the view) so logo + station + metrics + kebab
   always fit without a horizontal scrollbar. */
@media (max-width: 379px) {
  html.fd .fd-appbar__view { display: none; }
  html.fd .fd-station__name { max-width: 62px; }
}