/* Airplay40 — Base (shared tokens, utilities, media, icons, tooltips, extras) */

.airplay40 {
  --gap: var(--ap40-gap, 12px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.airplay40, .airplay40 * { box-sizing: border-box; }
.airplay40 [hidden] { display: none !important; }

/* Client-side chart filters */
.airplay40 .ap40-chart-title {
  width: 100%;
  margin: 0 0 1rem;
  line-height: 1.2;
}

.airplay40 .ap40-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin: 0 0 1rem;
}
.airplay40 .ap40-filter {
  appearance: none;
  border: 1px solid color-mix(in oklab, var(--ap40-outline, #79747E) 55%, transparent);
  border-radius: 999px;
  background: var(--ap40-surface, #fff);
  color: var(--ap40-on-surface, #1d1b20);
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
  line-height: 1.2;
  padding: 7px 13px;
}
.airplay40 .ap40-filter:hover {
  border-color: var(--ap40-primary, #6750A4);
  color: var(--ap40-primary, #6750A4);
}
.airplay40 .ap40-filter[aria-pressed="true"] {
  background: var(--ap40-primary, #6750A4);
  border-color: var(--ap40-primary, #6750A4);
  color: var(--ap40-on-primary, #fff);
}
.airplay40 .ap40-filter:focus-visible {
  outline: 2px solid var(--ap40-primary, #6750A4);
  outline-offset: 2px;
}

/* Notices / Empty / Blackout */
.airplay40 .ap40-blackout,
.airplay40 .ap40-empty {
  padding: 1rem;
  border: 1px dashed var(--ap40-outline, #999);
  border-radius: var(--ap40-radius, 12px);
  background: var(--ap40-surface, #fff);
  color: var(--ap40-on-surface, #222);
}

/* Media (image box) */
.airplay40 .ap40-media { position: relative; background: #f3f3f3; }
.airplay40 .ap40-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Position badge */
.airplay40 .ap40-pos {
  position: absolute; top: 8px; left: 8px;
  padding: 4px 8px; font-weight: 700;
  background: var(--ap40-badge-bg, #E8DEF8); color: var(--ap40-badge-fg, #21005D);
  border-radius: 999px; box-shadow: var(--ap40-elev-2, 0 4px 8px rgba(0,0,0,.1));
}
.airplay40 [data-pos-style="overlay-center"] .ap40-pos { top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.25rem; }
.airplay40 [data-pos-style="left-stripe"] .ap40-pos { left: 0; top: 0; border-radius: 0 8px 8px 0; }
.airplay40 [data-pos-size="small"] .ap40-pos { font-size: .75rem; }
.airplay40 [data-pos-size="large"] .ap40-pos { font-size: 1.25rem; padding: 6px 12px; }

/* YouTube play: isolate the control from aggressive theme button styles. */
.airplay40 button.ap40-play {
  all: unset;
  box-sizing: border-box !important;
  position: absolute !important;
  bottom: var(--ap40-yt-bottom, 50px);
  right: var(--ap40-yt-right, auto);
  left: var(--ap40-yt-left, 180px);
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.55) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #FF0033 !important;
  display: grid !important;
  place-items: center;
  cursor: pointer;
  z-index: 2;
}
.airplay40 button.ap40-play:hover { background: rgba(0,0,0,.68) !important; }
.airplay40 button.ap40-play:focus-visible { outline: 2px solid var(--ap40-primary, #6750A4); outline-offset: 2px; }
.airplay40 button.ap40-play::before { content: none !important; }
.airplay40 button.ap40-play .ap40-yt-icon {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Typography / Meta */
.airplay40 .ap40-body { padding: 10px 12px 12px; }
.airplay40 .ap40-title { margin: 0 0 4px; font-size: var(--ap40-title-size, 1rem); line-height: 1.25; }
.airplay40 .ap40-artist { margin: 0 0 6px; font-size: var(--ap40-artist-size, .95rem); color: color-mix(in oklab, var(--ap40-on-surface, #1d1b20) 70%, transparent); }
.airplay40 .ap40-meta { display:flex; gap:8px; font-size: var(--ap40-meta-size, .85rem); color: color-mix(in oklab, var(--ap40-on-surface,#1d1b20) 60%, transparent); }
.airplay40 [data-title-size="small"] .ap40-title { font-size: .875rem; }
.airplay40 [data-title-size="large"] .ap40-title { font-size: 1.25rem; }
.airplay40 [data-artist-size="small"] .ap40-artist { font-size: .8rem; }
.airplay40 [data-artist-size="large"] .ap40-artist { font-size: 1.1rem; }
.airplay40 [data-meta-size="small"] .ap40-meta { font-size: .75rem; }
.airplay40 [data-meta-size="large"] .ap40-meta { font-size: 1rem; }

/* Actions row + legacy button */
.airplay40 .ap40-actions { margin-top: 4px; display:flex; gap:4px; flex-wrap:wrap; align-items:center; overflow: visible; }
.airplay40 .ap40-btn { text-decoration:none; background: var(--ap40-primary, #6750A4); color: var(--ap40-on-primary, #fff); padding: 6px 10px; border-radius: 8px; display:inline-block; }
.airplay40 .ap40-btn:focus { outline: 2px solid var(--ap40-outline, #79747E); outline-offset:2px; }

/* Logo-only icon links (Apple/Amazon) */
.airplay40 .ap40-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ap40-primary, #6750A4);
}
.airplay40 .ap40-iconbtn:hover { color: color-mix(in oklab, var(--ap40-primary, #6750A4) 70%, black 0%); }
.airplay40 .ap40-iconbtn:focus-visible { outline: 2px solid var(--ap40-primary, #6750A4); outline-offset: 2px; }
.airplay40 .ap40-icon { width: 30px; height: 30px; display:block; }

/* Tooltips */
.airplay40 [data-tooltip] { position: relative; }
.airplay40 [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  translate: 0 4px;
  max-width: 220px;
  background: color-mix(in oklab, var(--ap40-on-surface, #1d1b20) 90%, transparent);
  color: var(--ap40-surface, #fff);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: .75rem;
  line-height: 1.1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform-origin: bottom left;
  transition: opacity .15s ease, translate .15s ease;
  z-index: 20;
}
.airplay40 [data-tooltip]:hover::after,
.airplay40 [data-tooltip]:focus-visible::after { opacity: 1; translate: 0 0; }

/* Avoid clipping on right edge for the zoom button tooltip */
.airplay40 .ap40-zoom[data-tooltip]::after {
  left: auto;
  right: 0;
  transform-origin: bottom right;
}

/* Avoid clipping on right edge for the YouTube play tooltip (cards/rows) */
.airplay40 .ap40-play[data-tooltip]::after {
  left: auto;
  right: 0;
  transform-origin: bottom right;
}

/* NEW: On cards, show the zoom tooltip BELOW the button so it never hits the top edge */
.airplay40.ap40-layout-cards .ap40-card .ap40-media .ap40-zoom[data-tooltip]::after {
  bottom: auto;                         /* stop positioning above */
  top: calc(100% + 8px);                /* position below the button */
  left: auto;
  right: 0;                             /* keep right aligned */
  transform-origin: top right;
  translate: 0 -4px;                    /* subtle lift-in animation from above */
}

/* Extra chart sections (shared) */
.airplay40 .ap40-extras { margin-top: 2rem; }
.airplay40 .ap40-section-title { margin: 0 0 .75rem; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.2; }

/* Dark-mode bits shared */
.airplay40[data-theme="dark"] {
  --ap40-surface: #1F1B24;
  --ap40-on-surface: #ECE6F0;
  --ap40-primary: #D0BCFF;
  --ap40-on-primary: #381E72;
  --ap40-outline: #938F99;
}
.airplay40[data-theme="dark"] .ap40-iconbtn { color: #D0BCFF; }
@media (prefers-color-scheme: dark) {
  .airplay40[data-theme="auto"] {
    --ap40-surface: #1F1B24;
    --ap40-on-surface: #ECE6F0;
    --ap40-primary: #D0BCFF;
    --ap40-on-primary: #381E72;
    --ap40-outline: #938F99;
  }
  .airplay40[data-theme="auto"] .ap40-iconbtn { color: #D0BCFF; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .airplay40 * { transition: none !important; animation: none !important; }
  .airplay40 [data-tooltip]::after { transition: none !important; }
}

/* =========================
   Artwork Zoom (modal trigger)
   ========================= */
.airplay40 button.ap40-zoom {
    all: unset;
    box-sizing: border-box !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.55) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    display: grid !important;
    place-items: center;
    cursor: pointer;
    z-index: 2;
  }
.airplay40 button.ap40-zoom:hover { background: rgba(0,0,0,.68) !important; }
.airplay40 button.ap40-zoom:focus-visible { outline: 2px solid var(--ap40-primary, #6750A4); outline-offset: 2px; }
.airplay40 button.ap40-zoom::before { content: none !important; }
.airplay40 button.ap40-zoom .ap40-zoom-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

/* =========================
   Modal Dialog (video & image)
   ========================= */
.ap40-dialog {
  border: none;
  padding: 16px;                        /* whitespace around media for close button */
  max-width: min(96vw, 1000px);
  max-height: 92vh;                     /* cap to viewport height */
  width: auto;
  margin: auto;                         /* center the dialog (critical) */
  color: var(--ap40-on-surface, #1d1b20);
  background: var(--ap40-surface, #fff);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  display: none;                        /* preserve the native closed state */
  overflow: hidden;                     /* no internal scrollbars */
}
.ap40-dialog[open] {
  display: grid;
  place-items: center;
}
.ap40-dialog::backdrop {
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(1px);
}
.ap40-dialog .ap40-dialog-close {
  position: absolute;
  top: 6px; right: 8px;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.1);
  background: rgba(0,0,0,.05);
  color: inherit;
  display: grid; place-items: center; cursor: pointer;
  z-index: 3;
}
.ap40-dialog .ap40-dialog-close:hover { background: rgba(0,0,0,.12); }
.ap40-dialog .ap40-dialog-close:focus-visible { outline: 2px solid var(--ap40-primary, #6750A4); outline-offset: 2px; }

.ap40-dialog .ap40-dialog-body {
  margin: 0;
  padding: 0;
  display: grid;                        /* center the child (image/video wrapper) */
  place-items: center;
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
}

/* Make images scale nicely inside the dialog; hard cap to viewport minus padding */
.ap40-dialog .ap40-dialog-body img {
  display: block;
  width: auto; height: auto;
  max-width: calc(96vw - 32px);         /* 32px = 16px padding * 2 */
  max-height: calc(92vh - 32px);
  object-fit: contain;
}

/* Video wrapper fills the computed size from JS but also respects viewport caps */
.ap40-dialog .ap40-video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: calc(96vw - 32px);
  max-height: calc(92vh - 32px);
}

/* Mobile polish */
@media (max-width: 600px) {
  .ap40-dialog { padding: 12px; max-width: 96vw; max-height: 92vh; }
  .ap40-dialog .ap40-dialog-body img {
    max-width: calc(96vw - 24px);
    max-height: calc(92vh - 24px);
  }
  .ap40-dialog .ap40-video {
    max-width: calc(96vw - 24px);
    max-height: calc(92vh - 24px);
  }
  .ap40-dialog .ap40-dialog-close { width: 32px; height: 32px; top: 4px; right: 6px; }
}

/* =========================
   Row-specific tweaks for zoom button
   ========================= */
.airplay40.ap40-layout-rows .ap40-row .ap40-media button.ap40-zoom {
    top: auto !important;           /* move to bottom-right */
    bottom: 4px !important;
    right: 4px !important;
    width: 24px !important;         /* smaller button */
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
  }
.airplay40.ap40-layout-rows .ap40-row .ap40-media button.ap40-zoom .ap40-zoom-icon {
    width: 16px !important; height: 16px !important;
  }