/* Playlist builder tour. Its card is the practice tour's (.pg-tour-card--pt:
   the sizes, the drag, the big intro/closing cards all come from demo-tour.css,
   which pg-demo-song.php loads ahead of this sheet). The generic card + ring
   rules below are the older base look, kept as they were; the playlist
   tour's own additions (.pg-tour-card--pl) are at the end. */

.pg-tour-hl {
    position: fixed;
    z-index: 2147483600;
    pointer-events: none;
    box-sizing: border-box;
    border: 2px solid #53A96B;
    border-radius: 9px;
    box-shadow: 0 0 0 3px rgba(83, 169, 107, 0.4), 0 0 20px 5px rgba(83, 169, 107, 0.55);
    animation: pg-tour-pulse 1.5s ease-in-out infinite;
}
@keyframes pg-tour-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(83, 169, 107, 0.4), 0 0 16px 4px rgba(83, 169, 107, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(83, 169, 107, 0.28), 0 0 30px 11px rgba(83, 169, 107, 0.72); }
}

.pg-tour-card {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 2147483650;   /* above the highlight ring — on small screens they can overlap; the card must stay readable */
    width: 390px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    background: #ffffff;
    color: #1d2b22;
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.3);
    padding: 16px 18px 14px;
    font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.pg-tour-card__x {
    position: absolute; top: 9px; right: 11px;
    width: 22px; height: 22px; padding: 0;
    border: 0; border-radius: 5px; background: none;
    color: #9aa0a6; font-size: 13px; line-height: 1; cursor: pointer;
}
.pg-tour-card__x:hover { color: #333; background: rgba(0, 0, 0, 0.06); }
.pg-tour-card__title { font-size: 15px; font-weight: 700; margin: 0 22px 6px 0; }
.pg-tour-card__body { color: #2c3a31; }
.pg-tour-card__body b { color: #1d2b22; }
.pg-tour-card__done {
    margin-top: 9px; padding: 7px 10px; border-radius: 8px;
    background: rgba(83, 169, 107, 0.13); color: #2f6b44;
    font-weight: 600; font-size: 13px;
}
.pg-tour-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.pg-tour-card__progress { color: #8a9591; font-size: 12px; }
.pg-tour-card__btns { display: inline-flex; gap: 8px; }
.pg-tour-card__back, .pg-tour-card__next {
    border: 0; border-radius: 7px; padding: 7px 13px;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.pg-tour-card__back { background: #eef1f0; color: #43504a; }
.pg-tour-card__back:hover { background: #e2e7e5; }
.pg-tour-card__next { background: #53A96B; color: #fff; }
.pg-tour-card__next:hover { background: #468d59; }

/* A quiet "?" help affordance tucked by the close button — the tour
   auto-runs for first-timers, so this only needs to hint "re-take the tour"
   without the permanent centered-green-pill shout. */
.pg-hub-topbar:has(.pg-playlist-tour-reopen) { position: relative; }
.pg-playlist-tour-reopen {
    position: absolute;
    right: 54px;               /* just left of the close × */
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 15px/1 system-ui, -apple-system, sans-serif;
    border-radius: 50%;
    /* The hub topbar is white now (Phil, 2026-09-19). */
    background: #f1f3f5;
    color: #4b5563;
    border: 0;
    cursor: pointer;
}
.pg-playlist-tour-reopen:hover { background: #e5e7eb; }

/* ── Stacked layout (phone / portrait tablet) ───────────────────────────
   The card can't sit over the bottom-docked library + footer controls, so
   the engine flips it to the top (.pg-tour-card--top) when the target is
   low. Near-full-width with a capped, scrollable height for long copy. */
body.pg-hub-stacked .pg-tour-card {
    left: 12px;
    right: 12px;
    bottom: 14px;
    width: auto;
    max-width: none;
    transform: none;
    padding: 14px 15px 12px;
    max-height: 46vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
body.pg-hub-stacked .pg-tour-card--top {
    top: 14px;
    bottom: auto;
}

/* The "?" menu — two kinds of help behind one button: the walkthrough of the hub
   in front of you, or the narrated clip. Sits under the button in the dark topbar,
   so it takes the light panel treatment the rest of the hub's popovers use. */
.pg-hub-help-menu {
    position: absolute;
    right: 44px;
    top: calc(50% + 20px);
    z-index: 8;
    min-width: 244px;
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #dbe3ea;
    box-shadow: 0 16px 40px rgba(16, 28, 40, .22);
}
.pg-hub-help-menu__item {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.pg-hub-help-menu__item:hover,
.pg-hub-help-menu__item:focus-visible { background: #eef4f1; }
.pg-hub-help-menu__label {
    display: block;
    font: 600 15px/1.25 var(--pg-font-ui, system-ui, sans-serif);
    color: var(--pg-blue, #1E4F75);
}
.pg-hub-help-menu__sub {
    display: block;
    margin-top: 2px;
    font: 400 12.5px/1.35 var(--pg-font-ui, system-ui, sans-serif);
    color: #6b7c88;
}

/* ── The refreshed card (Phil, 09-24) ───────────────────────────────────
   demo-tour.css sizes it (.pg-tour-card--pt); these only fit it to the hub. */
/* Desktop: the card moves up when its bottom spot would cover the ring
   (playlist-tour.js placeCard). */
body:not(.pg-hub-stacked) .pg-tour-card--pl.pg-tour-card--top { top: 26px; bottom: auto; }
/* Stacked hub (phones, and portrait tablets over 768px where the --pt desktop
   width would otherwise pin a 540px card to the left edge): full width,
   room at the top for the grip bar. */
body.pg-hub-stacked .pg-tour-card.pg-tour-card--pl:not(.pg-tour-card--intro) {
    width: auto;
    max-width: none;
    padding: 20px 17px 13px;
}
/* A long card scrolls inside its capped height on a phone: a swipe on its
   text scrolls it, and the strip along its top edge (under the grip bar)
   still drags it. */
.pg-tour-card--pl.pg-tour-card--scroll:not(.pg-tour-card--intro) { touch-action: pan-y; }
.pg-tour-card--pl .pg-tour-card__grip {
    position: absolute; top: 0; left: 0; right: 40px; height: 20px;
    touch-action: none;
}
.pg-tour-card--pl.pg-tour-card--intro .pg-tour-card__grip { display: none; }