/* 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; }

/* 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 (defaults; cards override; rows use inline layout) */
.airplay40 .ap40-play {
  position: absolute;
  bottom: var(--ap40-yt-bottom, 50px);
  right: var(--ap40-yt-right, auto);
  left: var(--ap40-yt-left, 180px);
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.55);
  color: var(--ap40-yt, #FF0033);
  display: grid; place-items: center; cursor: pointer;
  z-index: 2;
}
.airplay40 .ap40-play:hover { background: rgba(0,0,0,.68); }
.airplay40 .ap40-play:focus-visible { outline: 2px solid var(--ap40-primary, #6750A4); outline-offset: 2px; }

/* 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); }

/* 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 */
}

/* Extras (shared) */
.airplay40 .ap40-extras { margin-top: 1rem; }
.airplay40 .ap40-section-title { margin: .5rem 0; font-size: 1.05rem; }
.airplay40 .ap40-extra-list { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.airplay40 .ap40-extra { display:flex; gap:10px; align-items:baseline; border:1px dashed color-mix(in oklab, var(--ap40-outline, #79747E) 40%, transparent); padding:8px 10px; border-radius:8px; }

/* Dark-mode bits shared */
.airplay40[data-theme="dark"], @media (prefers-color-scheme: dark) {
  .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 .ap40-zoom {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.55);
  color: var(--ap40-primary, #6750A4);
  display: grid; place-items: center; cursor: pointer;
  z-index: 2;
}
.airplay40 .ap40-zoom:hover { background: rgba(0,0,0,.68); }
.airplay40 .ap40-zoom:focus-visible { outline: 2px solid var(--ap40-primary, #6750A4); outline-offset: 2px; }
.airplay40 .ap40-zoom-icon { display: block; }

.airplay40 .ap40-zoom { color: #ffffff; }

/* =========================
   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: grid;                        /* center content */
  place-items: center;
  overflow: hidden;                     /* no internal scrollbars */
}
.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 .ap40-zoom {
  top: auto;           /* move to bottom-right */
  bottom: 4px;
  right: 4px;
  width: 24px;         /* smaller button */
  height: 24px;
}
.airplay40.ap40-layout-rows .ap40-row .ap40-media .ap40-zoom .ap40-zoom-icon {
  width: 16px; height: 16px;
}