/* ============================================================================
   Guided tour — the shared spotlight walkthrough (ADR-171, an ADR-131 component)

   Four pieces, all inside one position:fixed block that covers the viewport:
     .global-tour          the block — a plain scrim while the intro card is
                           centred (is-dim), transparent while a step is spotlit;
                           it never takes the pointer itself
     .global-tour__shield  what takes the pointer: covers the viewport so the
                           page under the scrim is inert, and on an interactive
                           step guided-tour.js clips a hole in it the shape of
                           the spotlight so the control there gets real hovers,
                           focus and clicks
     .global-tour__spot    the spotlight — its spread shadow IS the scrim, so
                           the hole is the anchor's shape (see
                           --shadow-tour-spotlight in tokens.css)
     .global-tour__card    the step card, placed beside the anchor by
                           guided-tour.js (left/top set inline, side in
                           data-place, arrow offset in --ax / --ay)

   Placement is the script's job; this sheet only draws. Under 900px the card
   becomes a bottom sheet and the arrow goes away — a phone has no room beside
   an anchor. Markup: shared/components/guided_tour.html.
   ========================================================================== */

.global-tour {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-backdrop);
    font-family: var(--font-family);
    pointer-events: none;
}

.global-tour__shield {
    position: absolute;
    inset: 0;
    pointer-events: auto;
}

.global-tour.is-dim {
    background: rgba(15, 23, 42, 0.45);
}

.global-tour__spot {
    position: absolute;
    display: none;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-tour-spotlight);
    pointer-events: none;
    transition: left 0.22s ease, top 0.22s ease, width 0.22s ease, height 0.22s ease;
}

.global-tour__spot.is-open {
    display: block;
}

.global-tour__spot.is-pill {
    border-radius: var(--radius-pill);
}

.global-tour__card {
    position: absolute;
    display: none;
    width: 328px;
    max-width: calc(100vw - var(--spacing-xl));
    padding: var(--spacing-md) var(--spacing-mdlg) var(--spacing-smd);
    background: var(--color-card-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-modal);
    pointer-events: auto;
}

.global-tour__card.is-open {
    display: block;
}

.global-tour__card.is-center {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 380px;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-mdlg);
    text-align: center;
    transform: translate(-50%, -50%);
}

/* The arrow: a rotated square sharing the card's face and border, with the two
   edges that would show inside the card turned off. */
.global-tour__card::before {
    content: "";
    position: absolute;
    display: none;
    width: 12px;
    height: 12px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    transform: rotate(45deg);
}

.global-tour__card[data-place="right"]::before {
    display: block;
    left: -7px;
    top: var(--ay, 24px);
    border-right: 0;
    border-top: 0;
}

.global-tour__card[data-place="left"]::before {
    display: block;
    right: -7px;
    top: var(--ay, 24px);
    border-left: 0;
    border-bottom: 0;
}

.global-tour__card[data-place="bottom"]::before {
    display: block;
    top: -7px;
    left: var(--ax, 24px);
    border-right: 0;
    border-bottom: 0;
}

.global-tour__card[data-place="top"]::before {
    display: block;
    bottom: -7px;
    left: var(--ax, 24px);
    border-left: 0;
    border-top: 0;
}

.global-tour__close {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
}

.global-tour__eyebrow {
    margin-bottom: var(--spacing-xsm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.global-tour__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 auto var(--spacing-smd);
    border-radius: var(--radius-pill);
    background: var(--color-action-tint);
    color: var(--color-action);
    font-size: var(--font-size-xl);
}

.global-tour__title {
    margin: 0 0 var(--spacing-xsm);
    padding-right: var(--spacing-lg);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-heading);
    line-height: 1.3;
    color: var(--color-text);
}

.global-tour__card.is-center .global-tour__title {
    padding-right: 0;
    font-size: var(--font-size-h4);
}

.global-tour__body {
    margin: 0 0 var(--spacing-smd);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* The ask on a task step: what to do in the spotlight before moving on. */
.global-tour__task {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xsm);
    margin: 0 0 var(--spacing-smd);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    color: var(--color-action);
}

.global-tour__task .bi {
    flex: none;
    margin-top: var(--spacing-2xs);
}

.global-tour__card.is-done .global-tour__task .bi::before {
    content: "\f26e"; /* bi-check2 — the ask is done */
}

.global-tour__foot {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.global-tour__card.is-center .global-tour__foot {
    justify-content: center;
}

.global-tour__progress {
    flex: 1;
    height: 3px;
    margin-right: var(--spacing-sm);
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-border);
}

.global-tour__progress-fill {
    display: block;
    height: 100%;
    background: var(--color-action);
}

/* The replay button rides a toolbar at toolbar-control height. */
.global-tour-start {
    width: var(--control-h-base);
    height: var(--control-h-base);
    border-radius: var(--radius-md);
}

.global-tour-start .bi {
    font-size: var(--font-size-lg);
}

@media (prefers-reduced-motion: reduce) {
    .global-tour__spot {
        transition: none;
    }
}

@media (max-width: 899px) {
    /* Bottom sheet. Under 900px the script clears its inline left/top and
       data-place (so no arrow draws) and this rule takes over. */
    .global-tour__card:not(.is-center) {
        position: fixed;
        left: var(--spacing-smd);
        right: var(--spacing-smd);
        top: auto;
        /* --bottom-bar-h is 0px above the phone query. */
        bottom: calc(var(--bottom-bar-h) + var(--spacing-smd));
        width: auto;
        max-width: none;
    }
}