/* Onboarding spotlight tour (2026-07-23) — see js/ibv-onboarding.js.
   Visual language borrows directly from the site's existing --ibv-* tokens
   (ibv-tokens.css) and the serif-uppercase "mini label" kicker style used
   throughout Settings/Compose (.ibv-mini-label, the model-selector's small
   uppercase provider line) — deliberately no new palette/typography
   introduced for this feature.

   z-index: highest "normal" UI layer on the site tops out around 9500 (see
   ibv-warp-refs.css's ref-chip drag layers) — this sits just above that so
   the tour can spotlight anything, but stays below the 99999 boot splash
   (which is gone by the time a user could ever see the tour anyway). */

.ibv-onb-blocker {
    position: fixed;
    inset: 0;
    z-index: 9800;
    background: transparent;
    cursor: default;
}

/* The "hole" is this box itself (transparent, exactly sized to the target
   element) — the huge box-shadow paints the dim everywhere else. Purely
   decorative (pointer-events:none): .ibv-onb-blocker underneath is what
   actually blocks clicks, uniformly, including over the spotlighted
   element itself — deliberate, so the tour can never be the accidental
   trigger of a real (possibly billed) Generate click. */
.ibv-onb-spot {
    position: fixed;
    z-index: 9801;
    border-radius: 12px;
    box-shadow:
        0 0 0 9999px rgba(28, 20, 14, .58),
        0 0 0 2px var(--ibv-accent),
        0 0 0 7px rgba(200, 90, 52, .22);
    pointer-events: none;
    transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}

.ibv-onb-tip {
    position: fixed;
    z-index: 9802;
    width: 300px;
    max-width: calc(100vw - 20px);
    background: var(--ibv-card);
    border: 1px solid var(--ibv-border);
    border-radius: var(--ibv-radius);
    box-shadow: var(--ibv-shadow);
    padding: 16px 18px;
    font-family: var(--ibv-font-sans);
    color: var(--ibv-text);
    transition: top .2s ease, left .2s ease;
}

.ibv-onb-kicker {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ibv-accent);
    margin-bottom: 6px;
}

.ibv-onb-title {
    font-family: var(--ibv-font-serif);
    font-size: 1.22rem;
    color: var(--ibv-ink);
    margin: 0 0 6px;
    line-height: 1.2;
}

.ibv-onb-body {
    font-size: .85rem;
    line-height: 1.55;
    color: var(--ibv-text);
    margin-bottom: 14px;
}

.ibv-onb-dots {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.ibv-onb-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ibv-border);
    flex-shrink: 0;
}

.ibv-onb-dot-active {
    background: var(--ibv-accent);
}

.ibv-onb-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ibv-onb-actions-right {
    display: flex;
    gap: 8px;
}

.ibv-onb-actions .ibv-btn {
    padding: 6px 12px;
    font-size: .78rem;
}

@media (max-width: 480px) {
    .ibv-onb-tip { width: calc(100vw - 20px); }
}