/* ===================================================================
   First-Run Tour — spotlight coachmarks over the tab bar + finale.
   Sits above header/tabs/toasts so the spotlight can dim the whole UI
   (the ring's giant box-shadow is the dimmer — no separate scrim).
   =================================================================== */

.frt {
    position: fixed;
    inset: 0;
    z-index: var(--z-toast, 2000);
    opacity: 0;
    transition: opacity 240ms ease;
    /* Block taps on the dimmed UI; the ring/tooltip re-enable their own. */
    pointer-events: auto;
}
.frt.is-open { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .frt { transition: none; }
}

/* Spotlight: a transparent window over the target whose massive shadow
   darkens everything outside it. Gold rim ties it to the brand. */
.frt-ring {
    position: fixed;
    border-radius: 16px;
    box-shadow: 0 0 0 9999px rgba(15, 15, 35, 0.78);
    outline: 2px solid var(--accent-gold, #FFD93D);
    outline-offset: 2px;
    transition: left 280ms cubic-bezier(0.4, 0, 0.2, 1),
                top 280ms cubic-bezier(0.4, 0, 0.2, 1),
                width 280ms cubic-bezier(0.4, 0, 0.2, 1),
                height 280ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .frt-ring { transition: none; }
}

.frt-skip {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: 14px;
    z-index: 2;
    appearance: none;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-size: 13px;
    padding: 7px 16px;
    border-radius: 100px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.frt-skip:active { background: rgba(255, 255, 255, 0.24); }

/* Tooltip card — anchored above the spotlit tab (JS positions it). */
.frt-tip {
    position: fixed;
    max-width: min(320px, calc(100vw - 24px));
    background: var(--paper, #F4F1EA);
    color: var(--ink, #1a1a1a);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(191, 149, 63, 0.4);
}
.frt-tip-title {
    font-family: var(--font-display, 'Archivo Black', sans-serif);
    font-size: 17px;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}
.frt-tip-body {
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(26, 26, 26, 0.78);
}
.frt-tip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
}
.frt-tip-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(26, 26, 26, 0.45);
    letter-spacing: 0.05em;
}
.frt-tip-next {
    appearance: none;
    background: linear-gradient(135deg, #bf953f, #fcf6ba 40%, #b38728 60%, #fbf5b7);
    color: #1a1a1a;
    border: none;
    border-radius: 100px;
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 9px 22px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.frt-tip-next:active { transform: translateY(1px); }

/* Pop-in when a tooltip (re)appears. */
.frt-pop { animation: frtPop 260ms cubic-bezier(0.34, 1.4, 0.5, 1); }
@keyframes frtPop {
    0%   { opacity: 0; transform: translateY(8px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* The finale is centre-anchored via translate, so it can't share the
   keyframe's transform — fade only. */
.frt-tip.frt-finale.frt-pop { animation: frtFade 260ms ease; }
@keyframes frtFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .frt-pop, .frt-tip.frt-finale.frt-pop { animation: none; }
}

.frt-finale { text-align: center; max-width: min(340px, calc(100vw - 24px)); }
.frt-finale-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}
.frt-btn {
    appearance: none;
    border: none;
    border-radius: 100px;
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-size: 14px;
    font-weight: 700;
    padding: 12px 20px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.frt-btn--primary {
    background: linear-gradient(135deg, #bf953f, #fcf6ba 40%, #b38728 60%, #fbf5b7);
    color: #1a1a1a;
}
.frt-btn--ghost {
    background: transparent;
    color: rgba(26, 26, 26, 0.6);
    border: 1px solid rgba(26, 26, 26, 0.18);
}
.frt-btn:active { transform: translateY(1px); }