/* ===========================================
   Setup-guide checklist widget + spotlight (TASK-315)
   Rendered by partials/_setup_guide.html; behaviour in js/onboarding.js.
   Theme tokens only — no literal colors.
   =========================================== */

.setup-guide {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 900; /* below dialogs (dialog-backdrop) but above page content */
    width: 20.5rem;
    max-width: calc(100vw - 2.5rem);
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-widget);
}

.og-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.75rem 0.5rem 1rem;
    cursor: pointer;
    user-select: none;
}

.og-title {
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    white-space: nowrap;
}

.og-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.og-icon-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0 0.25rem;
    font-size: 1rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--r-sm);
}

.og-icon-btn:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.og-chevron {
    transition: transform 0.15s ease;
}

.og-progress {
    height: 4px;
    margin: 0 1rem;
    border-radius: var(--r-pill);
    background: var(--surface-progress);
    overflow: hidden;
}

.og-progress-fill {
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--c-secondary);
    transition: width 0.25s ease;
}

.og-steps {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.og-step {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    border-radius: var(--r-md);
}

.og-step.current {
    background: var(--c-secondary-ghost);
}

.og-step-main {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
    padding: 0.5rem;
    text-decoration: none;
    border-radius: var(--r-md);
}

.og-step-main:hover {
    background: var(--surface-hover);
}

.og-check {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 50%;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    background: var(--surface-alt);
}

.og-step.done .og-check {
    background: var(--c-success);
    border-color: var(--c-success);
    color: var(--c-bg);
}

.og-step.current .og-check {
    border-color: var(--c-secondary);
    color: var(--c-secondary-bold);
}

.og-step-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.og-step-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.og-step.done .og-step-title {
    text-decoration: line-through;
    color: var(--text-muted);
    font-weight: 500;
}

.og-step.skipped .og-step-title {
    color: var(--text-muted);
    font-weight: 500;
}

.og-step-desc {
    display: none;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.og-step.current .og-step-desc {
    display: block;
}

.og-skip {
    flex-shrink: 0;
    align-self: center;
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--r-sm);
    white-space: nowrap;
}

.og-skip:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.og-actions {
    padding: 0 1rem 1rem;
}

.og-actions .og-start {
    width: 100%;
}

/* Collapsed: header-only pill */
.setup-guide.collapsed {
    width: auto;
    overflow: hidden;
}

.setup-guide.collapsed .og-progress,
.setup-guide.collapsed .og-steps,
.setup-guide.collapsed .og-actions {
    display: none;
}

.setup-guide.collapsed .og-chevron {
    transform: rotate(180deg);
}

/* Mobile: dock full-width at the bottom */
@media (max-width: 640px) {
    .setup-guide {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        width: auto;
        max-width: none;
        max-height: 55vh;
    }
}

/* ---- Spotlight (hash #setup=<target> → [data-onboarding-target]) ---- */

.onboarding-spotlight {
    position: absolute;
    /* Above all page chrome (top-nav 1002, header dropdowns 1010, app tooltips
       1200) so the punch-hole shadow dims it too; below modals (2000). */
    z-index: 1500;
    pointer-events: none;
    border-radius: var(--r-md);
    border: 2px solid var(--c-secondary);
    /* One element dims the whole page and punches the hole around the target. */
    box-shadow: 0 0 0 200vmax var(--overlay-bg);
}

/* While a spotlight is live (body.onboarding-live) the guide widget rises
   above the dim — the tour is driven from it, so it must never sit under
   its own overlay. The tooltip still wins where the two overlap. */
.onboarding-live .setup-guide {
    z-index: 1510;
}

.onboarding-tooltip {
    position: absolute;
    z-index: 1520; /* above the ring (1500) and the lifted widget (1510) */
    width: 19rem;
    max-width: calc(100vw - 2rem);
    padding: 1rem;
    background: var(--surface);
    border: 2px solid var(--c-success);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-popover);
}

.onboarding-tooltip h4 {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.onboarding-tooltip p {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.onboarding-tooltip-actions {
    display: flex;
    gap: 0.5rem;
}