/* Demo tour — custom card + moving highlight (no Driver.js). */

/* (The desktop unhide of .pg-practice-onpage-btn was removed 2026-07-18 —
   Phil: the header Practice button is the by-design desktop entry, and the
   on-page pill looked wrong beside the song title. Demo entry on desktop is
   the auto-launch links (?tour=1 / rockygrass QR) + header Practice; the
   on-page pill stays mobile-only as designed.) */

/* The moving highlight — a loud pulsing ring over the current control. Sits
   above the card so it shows even if they overlap. pointer-events:none so the
   user can click the control straight through it. */
.pg-tour-hl {
    position: fixed;
    z-index: 2147483600;
    pointer-events: none;
    box-sizing: border-box;     /* border drawn INSIDE the box — no 6px bloat that pushed rings past their content */
    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); }
}

/* The fixed card — bottom-center, stays put while the highlight moves. */
.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; }
.pg-tour-card__next.is-ready { box-shadow: 0 0 0 3px rgba(83, 169, 107, 0.35); }

/* Persistent "Take a tour" re-open button inside the player. */
/* Absolutely positioned (centered) so it stays OUT of the topbar's grid
   flow. The topbar is a fixed 3-column grid (title | mode picker |
   actions) and this button is injected/removed dynamically — as an in-flow
   grid item it added a 4th child with no column, pushing the actions
   cluster (keyboard / save / close) onto a second row and breaking the
   header. Out of flow, it takes no grid track. */
.pg-practice__topbar:has(.pg-demo-tour-reopen) { position: relative; }
.pg-demo-tour-reopen {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    font: 700 12px/1 system-ui, -apple-system, sans-serif;
    padding: 6px 12px;
    border-radius: 14px;
    background: #53A96B;
    color: #ffffff;
    border: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    white-space: nowrap;
}
.pg-demo-tour-reopen:hover { background: #468d59; }

/* ── Mobile (≤768px) ────────────────────────────────────────────────
   On a phone every mode docks its controls at the bottom, where the
   card sits — so the engine flips the card to the top (.--top) when the
   highlight is in the lower half. Card goes near-full-width, and caps
   its height so the long intro/isolate copy scrolls instead of running
   off the screen. */
@media (max-width: 768px) {
    .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;
    }
    .pg-tour-card--top {
        top: 14px;
        bottom: auto;
    }
    /* The mobile topbar is too cramped to host the re-open chip without
       covering the title/controls — float it as a small fixed corner chip
       instead (hidden while a tour is running). */
    .pg-demo-tour-reopen {
        position: fixed;
        left: auto;
        right: 12px;
        top: auto;
        bottom: 12px;
        transform: none;
        z-index: 100060;
        font-size: 11px;
        padding: 6px 11px;
    }
}