/* Guided product tour overlay.
   Uses the shell tokens from app.css so the tour follows the active theme. */

.ptour {
    position: fixed;
    inset: 0;
    z-index: 6000;
    opacity: 0;
    transition: opacity .2s ease;
    --ptour-veil: rgba(16, 16, 28, .58);
}

.ptour.is-open { opacity: 1; }
.ptour.is-leaving { opacity: 0; }

/* The veil is a single element; the "hole" punches through it with a very
   large spread shadow, which animates far more smoothly than clip-path. */
/* Not clickable: dismissing on an outside click loses the tour when someone
   clicks the page to look at what a step is pointing at. */
.ptour__veil {
    position: absolute;
    inset: 0;
    background: var(--ptour-veil);
}

.ptour__hole {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px var(--ptour-veil);
    pointer-events: none;
    opacity: 0;
    transition:
        top .42s cubic-bezier(.32, .72, 0, 1),
        left .42s cubic-bezier(.32, .72, 0, 1),
        width .42s cubic-bezier(.32, .72, 0, 1),
        height .42s cubic-bezier(.32, .72, 0, 1),
        border-radius .42s cubic-bezier(.32, .72, 0, 1),
        opacity .2s ease;
}

/* With a target on screen the spotlight's spread shadow supplies the dimming,
   so the veil stays transparent and only serves as the click-to-dismiss layer.
   Without a target (a centred step) the veil dims on its own. */
.ptour:not(.is-centered) .ptour__veil { background: transparent; }

.ptour__ring {
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 2px solid var(--accent);
    opacity: .9;
}

.ptour__ring::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 2px solid var(--accent);
    animation: ptour-pulse 2s ease-out infinite;
}

@keyframes ptour-pulse {
    0%   { transform: scale(1);    opacity: .55; }
    70%  { transform: scale(1.06); opacity: 0; }
    100% { transform: scale(1.06); opacity: 0; }
}

.ptour__card {
    position: fixed;
    width: min(23rem, calc(100vw - 24px));
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(16, 16, 28, .24);
    padding: 1.05rem 1.15rem 1rem;
    transition:
        top .42s cubic-bezier(.32, .72, 0, 1),
        left .42s cubic-bezier(.32, .72, 0, 1);
}

.ptour.is-centered .ptour__card {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(27rem, calc(100vw - 32px));
}

.ptour__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .55rem;
}

.ptour__count {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
}

.ptour__skip {
    background: none;
    border: 0;
    padding: .15rem .1rem;
    font: inherit;
    font-size: .78rem;
    color: var(--ink-mute);
    cursor: pointer;
    border-radius: 4px;
}

.ptour__skip:hover { color: var(--ink); text-decoration: underline; }

.ptour__title {
    margin: 0 0 .35rem;
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.01em;
}

.ptour__body {
    margin: 0 0 1rem;
    font-size: .89rem;
    line-height: 1.65;
    color: var(--ink-soft);
    word-break: keep-all;
}

.ptour__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.ptour__dots { display: flex; gap: .3rem; }

.ptour__dot {
    width: .38rem;
    height: .38rem;
    border-radius: 50%;
    background: var(--line);
    transition: background .25s ease, width .25s ease;
}

.ptour__dot.is-done { background: var(--accent-soft); }

.ptour__dot.is-on {
    width: 1.1rem;
    border-radius: 999px;
    background: var(--accent);
}

.ptour__btns { display: flex; gap: .4rem; }

.ptour__btn {
    font: inherit;
    font-size: .84rem;
    font-weight: 600;
    padding: .4rem .95rem;
    border-radius: 8px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease;
}

.ptour__btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

.ptour__btn--ghost {
    background: transparent;
    color: var(--ink-soft);
    border-color: var(--line);
}

.ptour__btn--ghost:hover { background: var(--surface-sunk); border-color: var(--line); color: var(--ink); }

.ptour__btn:focus-visible,
.ptour__skip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Entry animation for the card only; the spotlight glides on its own. */
.ptour.is-open .ptour__card { animation: ptour-in .32s cubic-bezier(.32, .72, 0, 1) both; }

@keyframes ptour-in {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.ptour.is-open.is-centered .ptour__card { animation: ptour-in-center .32s cubic-bezier(.32, .72, 0, 1) both; }

@keyframes ptour-in-center {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(.985); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

html[data-theme="dark"] .ptour {
    --ptour-veil: rgba(4, 6, 14, .68);
}

html[data-theme="dark"] .ptour__card {
    box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
}

/* Shown while the tour waits for a deployment to finish. Deliberately quiet:
   it sits out of the way and never blocks the progress view. */
.ptour-hint {
    position: fixed;
    right: 74px;
    bottom: 18px;
    z-index: 5900;
    display: flex;
    align-items: center;
    gap: .6rem;
    max-width: min(22rem, calc(100vw - 92px));
    padding: .6rem .7rem .6rem .85rem;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 8px 26px rgba(16, 16, 28, .16);
    font-size: .85rem;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
}

.ptour-hint.is-open { opacity: 1; transform: none; }

.ptour-hint__dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
    animation: ptour-hint-pulse 1.8s ease-in-out infinite;
}

@keyframes ptour-hint-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

.ptour-hint__text { flex: 1 1 auto; }

.ptour-hint__close {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-mute);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}

.ptour-hint__close:hover { background: var(--surface-sunk); color: var(--ink); }
.ptour-hint__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

html[data-theme="dark"] .ptour-hint { box-shadow: 0 8px 26px rgba(0, 0, 0, .5); }

/* Floating launcher. Sits above the waiting pill so the two never overlap. */
.ptour-launch {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 5800;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
}

/* Follows .button--primary from app.css: a white glyph on the accent. The
   earlier surface-coloured version disappeared against the page. */
.ptour-launch__btn {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(87, 87, 248, .34);
    transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.ptour-launch__btn:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(87, 87, 248, .42);
}

.ptour-launch__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ptour-launch__menu {
    display: flex;
    flex-direction: column;
    min-width: 11rem;
    padding: .25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(16, 16, 28, .18);
    animation: ptour-launch-in .16s ease both;
}

@keyframes ptour-launch-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.ptour-launch__item {
    text-align: left;
    padding: .5rem .6rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

.ptour-launch__item:hover { background: var(--surface-sunk); }
.ptour-launch__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

html[data-theme="dark"] .ptour-launch__menu { box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }

html[data-theme="dark"] .ptour-launch__btn { box-shadow: 0 6px 18px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .ptour-launch__btn:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .62); }

/* On a narrow screen there is no room beside the launcher, and stacking the
   pill above it would collide with the open menu. It moves to the top instead,
   where a status message reads naturally anyway. */
@media (max-width: 30rem) {
    .ptour-hint {
        right: 12px;
        left: 12px;
        top: 12px;
        bottom: auto;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ptour,
    .ptour__hole,
    .ptour__card,
    .ptour__dot { transition: none !important; }

    .ptour__ring::after,
    .ptour-hint__dot { animation: none; }
    .ptour-hint { transition: none !important; }
    .ptour-launch__btn { transition: none !important; }
    .ptour-launch__menu { animation: none; }
    .ptour.is-open .ptour__card,
    .ptour.is-open.is-centered .ptour__card { animation: none; }
}