/* ── Bond page walkthrough (BondPageTour.js) ─────────────────────────────
   Same spotlight tour as big ticket (at-size.css .cb-ats-tour), shared by the
   category pages, the bond detail page and the mobile bond sheet. The
   spotlight is one element whose enormous box-shadow is the dimming, so
   moving it moves the hole. Sits above the bottom nav (10000) and the mobile
   bond sheet (10101) so it can point inside the sheet. */

.pt-tour {
    position: fixed;
    inset: 0;
    z-index: 10300;
}

.pt-tour-spot {
    position: fixed;
    border-radius: var(--cb-radius-md);
    box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.66), 0 0 0 1px var(--cb-accent-amber), 0 0 24px rgba(255, 183, 77, 0.35);
    transition: top 0.38s var(--cb-ease), left 0.38s var(--cb-ease),
                width 0.38s var(--cb-ease), height 0.38s var(--cb-ease);
    pointer-events: none;
}

.pt-tour-card {
    position: fixed;
    width: 360px;
    max-width: calc(100vw - 32px);
    padding: 16px 18px 14px;
    background: var(--cb-bg-surface);
    border: 1px solid var(--cb-border-accent);
    border-radius: var(--cb-radius-md);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
    font-family: var(--cb-font);
    transition: top 0.38s var(--cb-ease), left 0.38s var(--cb-ease);
}

.pt-tour-count {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cb-accent-amber);
    margin-bottom: 6px;
}

.pt-tour-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--cb-text-primary);
    line-height: 1.3;
    margin-bottom: 6px;
    text-wrap: balance;
}

body.cardboard .pt-tour-body {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--cb-text-secondary);
    margin: 0 0 14px;
}

.pt-tour-actions { display: flex; align-items: center; gap: 8px; }

.pt-tour-skip {
    margin-right: auto;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--cb-font);
    font-size: 12px;
    color: var(--cb-text-muted);
    cursor: pointer;
}

.pt-tour-skip:hover { color: var(--cb-text-primary); }

.pt-tour-back,
.pt-tour-next {
    font-family: var(--cb-font);
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: var(--cb-radius-full);
    cursor: pointer;
}

.pt-tour-back {
    background: none;
    border: 1px solid var(--cb-border-accent);
    color: var(--cb-text-secondary);
}

.pt-tour-back:hover { color: var(--cb-text-primary); }

.pt-tour-next {
    background: var(--cb-text-primary);
    border: 1px solid var(--cb-text-primary);
    color: var(--cb-bg-page);
}

.pt-tour-next:hover { opacity: 0.85; }

/* Replay link: "see how it works", same look as big ticket's. */
.pt-howlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: none;
    font-family: var(--cb-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--cb-accent-amber);
    cursor: pointer;
    white-space: nowrap;
}

.pt-howlink:hover { text-decoration: underline; }

.cb-category-header .pt-howlink { margin-top: 10px; }
.bdp-top-actions .pt-howlink { margin-left: auto; margin-right: 10px; }
.cat-mobile-header .pt-howlink { margin-left: auto; font-size: 11px; }
.mbds-id-top .pt-howlink { font-size: 11px; margin-right: 10px; }

@media (max-width: 768px) {
    /* Card becomes a sheet pinned to whichever screen edge the target is not
       near; JS sets data-edge. */
    .pt-tour-card {
        left: 16px !important;
        right: 16px;
        width: auto;
        max-width: none;
    }
    .pt-tour-card[data-edge="bottom"] { top: auto !important; bottom: calc(16px + env(safe-area-inset-bottom)); }
    .pt-tour-card[data-edge="top"] { bottom: auto; top: calc(16px + env(safe-area-inset-top)) !important; }
    .pt-tour-back, .pt-tour-next { padding: 11px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .pt-tour-spot, .pt-tour-card { transition: none; }
}