/* ============== ONBOARDING COACHMARKS ============== */
/* One-time first-visit guide, driven by framework/ui/CoachmarkTour.js. Backdrop
   dims and blocks the app; a ring spotlights the step target and an anchored
   bubble explains it. No spotlight cutout. */
.kc-coach-layer {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.55);
    touch-action: none;
}

.kc-coach-ring {
    position: fixed;
    border-radius: 14px;
    box-shadow: 0 0 0 3px var(--kc-turquoise), 0 0 24px var(--kc-turquoise-glow);
    pointer-events: none;
    transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.kc-coach {
    position: fixed;
    width: min(320px, calc(100vw - 28px));
    padding: 16px 18px 14px;
    background: var(--kc-card-bg);
    border: 1px solid var(--kc-card-border-highlight);
    border-radius: var(--kc-card-radius);
    box-shadow: var(--kc-shadow-md);
    backdrop-filter: blur(8px);
    animation: kc-coach-in 0.22s ease;
}

@keyframes kc-coach-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.kc-coach-arrow {
    position: absolute;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    left: var(--coach-arrow-x, 50%);
    background: var(--kc-card-bg);
    border: 1px solid var(--kc-card-border-highlight);
    transform: rotate(45deg);
}
.kc-coach[data-place="below"] .kc-coach-arrow {
    top: -8px;
    border-right: 0;
    border-bottom: 0;
}
.kc-coach[data-place="above"] .kc-coach-arrow {
    bottom: -8px;
    border-left: 0;
    border-top: 0;
}
.kc-coach[data-place="center"] .kc-coach-arrow { display: none; }

.kc-coach-step {
    display: block;
    font: 700 10px/1 var(--kc-font-title);
    letter-spacing: 0.08em;
    color: var(--kc-turquoise-bright);
    margin-bottom: 6px;
}

.kc-coach-title {
    margin: 0 0 6px;
    font: 700 15px/1.2 var(--kc-font-title);
    color: var(--kc-text-primary);
}

.kc-coach-body {
    margin: 0 0 14px;
    font: 400 13px/1.45 var(--kc-font-body);
    color: var(--kc-text-secondary);
}

.kc-coach-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.kc-coach-skip {
    background: none;
    border: 0;
    padding: 8px 4px;
    font: 600 12px/1 var(--kc-font-body);
    color: var(--kc-text-muted);
    cursor: pointer;
}
.kc-coach-skip:hover { color: var(--kc-text-secondary); }

.kc-coach-next {
    min-height: 36px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: 600 13px/1 var(--kc-font-body);
    color: #0d0d0d;
    background: var(--kc-turquoise);
    box-shadow: 0 4px 12px rgba(0, 199, 139, 0.25);
    cursor: pointer;
    transition: all 200ms ease;
}
.kc-coach-next:hover {
    background: var(--kc-turquoise-bright);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 199, 139, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .kc-coach { animation: none; }
    .kc-coach-ring { transition: none; }
}