/* /home/hkiugcom/website.airplay/assets/station_profile.css
   Station Profile modal shared utilities.
   Loaded on every page that embeds shell_parts/modal_station_profile.php
   (audit, track, play, airlog). Rules moved out of audit_layout.css when
   the modal became a cross-page component. */

.au-load-pill {
  position: relative;
  overflow: hidden;
  height: 8px;
  width: 74px;
  border-radius: 9999px;
  border: 1px solid var(--ap-gray-800);
  background: var(--ap-gray-900);
}

.au-load-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  border-radius: 9999px;
  background: rgba(var(--ap-sky-rgb),0.9);
}

.au-modal-inner {
  padding: 0.75rem 1rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

@media (min-width: 640px) {
  .au-modal-inner { padding: 0.75rem 1.25rem; }
}

.au-curve-controls {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}

.au-curve-btn-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.au-date-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Note shown when a MON-SUN weekday-average curve is selected. The bar
   uses the weekday curve's own color so it reads as a legend key. */
.au-wday-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 8px;
  min-width: 0;
  font-size: 10px;
  line-height: 1.3;
  color: var(--ap-text-secondary);
}
.au-wday-note::before {
  content: '';
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: #a78bfa;
  flex-shrink: 0;
}

.au-wday-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ap-text-secondary);
  flex-shrink: 0;
  text-transform: uppercase;
}

.au-date-input {
  width: 90px;
  background: rgba(var(--ap-white-rgb),.06);
  border: 1px solid rgba(var(--ap-white-rgb),.09);
  border-radius: 6px;
  color: var(--ap-gray-100);
  padding: 6px 10px;
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1;
  cursor: pointer;
}
.au-date-input:focus {
  outline: none;
  border-color: rgba(var(--ap-white-rgb),.25);
}

.au-ref-subtitle {
  font-size: 11px;
  color: var(--ap-text-secondary);
  line-height: 1;
}

.au-chart-wrap {
  height: 160px;
  position: relative;
}

@media (min-width: 640px) {
  .au-chart-wrap { height: 210px; }
}

.au-legend-row {
  margin-top: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 11px;
  color: var(--ap-text-secondary);
  min-height: 18px;
}

.au-legend-items {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  min-width: 0;
}

.au-legend-mode {
  font-size: 10px;
  color: var(--ap-white);
  font-weight: 500;
  line-height: 1.35;
  text-align: right;
  flex-shrink: 0;
}

/* modal body loading state */
.au-modal-loading {
  color: var(--ap-text-secondary);
  font-size: 12px;
  padding: 0.5rem 0;
}

/* Station profile modal load pill animation */
@keyframes lc24h-loading-slide {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(260%); }
}
#lc24hLoadPill {
  opacity: 0.95;
}
#lc24hLoadPill.is-loading #lc24hLoadBar {
  animation: lc24h-loading-slide 1s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(var(--ap-sky-rgb),0.35);
}

/* Toggle affordance: inside this modal the ap-btn pills are on/off toggles,
   so an inactive button must stay visually distinct from an active one even
   under the cursor. Hover brightens the pill only slightly and keeps the
   text gray: white text = ON, gray text = OFF, always. */
#station_profile_modal .ap-btn:hover:not(.is-active):not([aria-pressed="true"]) {
  color: var(--ap-text-secondary);
  background: rgba(var(--ap-white-rgb),.09);
  border-color: rgba(var(--ap-white-rgb),.14);
}

/* Squared toggles: match the guide/modal button language (6px corners), not the
   global .ap-btn pill. Covers AVG CURVE / TODAY / DATE + the date-nav arrows. */
#station_profile_modal .ap-btn { border-radius: 6px; }

/* Tab bar (CURVES / GROWTH / GENRES / NEXT IMPACT / VITALS) */
.sp-tabbar {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(var(--ap-white-rgb),0.07);
  padding: 0 16px;
}

.lc24h-tab {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ap-text-secondary);
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

/* Tab bar right side: VITALS summary tab + load pill */
.sp-tabbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  flex-shrink: 0;
}

/* Narrow screens: compress the tab bar so VITALS stays on screen. */
@media (max-width: 560px) {
  .sp-tabbar {
    padding: 0 8px;
    /* Safety net for very narrow screens (<340px): allow a nudge-scroll
       instead of pushing VITALS off screen. No visible scrollbar. */
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sp-tabbar::-webkit-scrollbar {
    display: none;
  }
  .lc24h-tab {
    padding: 10px 6px;
    font-size: 10px;
    letter-spacing: 0.03em;
  }
  /* "LISTENER CURVES" shortens to "CURVES" so VITALS is not cut off. */
  .sp-tab-lbl-long {
    display: none;
  }
  /* DATE mode: the date nav wraps to its own full-width row anyway, so use
     the space for bigger touch targets (easy to mis-tap at the desktop size,
     and a stray tap now collapses the nav back to the DATE button). */
  .au-date-nav {
    flex-basis: 100%;
    margin-top: 4px;
    gap: 0.375rem;
  }
  .au-date-nav .au-date-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    text-align: center;
    font-size: 14px;
    padding: 10px 12px;
  }
  .au-date-nav .ap-btn.is-xs {
    padding: 9px 16px;
    font-size: 13px;
  }
  .sp-tabbar-right {
    padding-left: 4px;
    gap: 4px;
  }
  #lc24hLoadPill {
    display: none;
  }
}

/* Reference-station note (public demo stations only) */
.sp-ref-note {
  margin-top: 10px;
  padding: 7px 10px 8px;
  border: 1px solid rgba(var(--ap-white-rgb),0.07);
  border-left: 2px solid rgba(var(--ap-text-secondary-rgb),0.45);
  border-radius: 6px;
  background: rgba(var(--ap-white-rgb),0.03);
  font-size: 10.5px;
  color: var(--ap-text-secondary);
  line-height: 1.5;
}

/* Genre view: the release-era cards sit tight above; give this note the same
   line-break's breathing room that was removed from below the genre bars. */
#spNoteGenre {
  margin-top: 23px;
}

.sp-ref-note-label {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ap-text-secondary);
  margin-bottom: 2px;
}

/* Timezone line: its own paragraph under the demo sentence. */
.sp-ref-note-times {
  display: block;
  margin-top: 7px;
  color: var(--ap-text-tertiary);
}

/* Legend row item (curve color dot + label) */
.sp-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Next Impact tab: loading / empty / error status line */
.ap-ni-status {
  color: var(--ap-text-secondary);
  font-size: 11px;
  padding: 8px 0;
}

/* Tab with no qualifying data yet: dimmed but clickable (shows readiness) */
.lc24h-tab.is-dim {
  opacity: 0.5;
}

/* Modal header: station name as a quiet pill after the title */
.sp-station-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2.5px 9px 2px;
  border-radius: 6px;
  border: 1px solid rgba(var(--ap-navy-600-rgb),0.45);
  background: rgba(var(--ap-white-rgb),0.04);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ap-text-secondary);
  line-height: 1.3;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Soft divider between station name and location inside the pill: a faint
   pipe rather than a hard character, so it separates without competing. */
.sp-pill-sep {
  margin: 0 6px;
  font-weight: 400;
  color: var(--ap-text-tertiary);
}

/* Header title carries the station name + location pill; let it wrap so a
   long location (e.g. "BIG 80S | NEW YORK, UNITED STATES") drops below the
   "STATION PROFILE" label on narrow screens instead of overflowing. */
.ap-audit-modal-head .ap-audit-title-accent {
  flex-wrap: wrap;
}

/* Tab bar: small round "i" info button (opens More Tools at Next Impact) */
.sp-tab-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 2px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--ap-text-secondary-rgb),0.4);
  background: none;
  color: var(--ap-text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: color .15s, border-color .15s;
}
/* Enlarged invisible hit area (small visual size, comfortable target) */
.sp-tab-info::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}
.sp-tab-info:hover,
.sp-tab-info:focus-visible {
  color: var(--ap-slate-200);
  border-color: rgba(var(--ap-text-secondary-rgb),0.7);
  outline: none;
}