/* ============================================================================
   IKHAYALAMI — PREMIUM PRODUCT TOUR (desktop)
   ----------------------------------------------------------------------------
   File: wwwroot/css/product-tour.css
   Pair: wwwroot/js/product-tour.js
   Trigger: header help glyph (#ikhTourTrigger)
   ----------------------------------------------------------------------------
   Architecture
     • Full-viewport SVG overlay with a single <path> that draws a giant
       rectangle MINUS the highlighted element's rounded rect = perfect
       spotlight (evenodd fill-rule). No four-div tricks, no seams.
     • Glass-morphic coach card positioned by JS using flip-fit logic.
     • Brand language: orange #F58220 jewel, charcoal #1A1A1F text, soft
       cream halo (#FFF7EE), KQG-style horizontal scan beam on the glyph.
     • Motion: spring-in card, fading spotlight cross-fade between stops,
       respects prefers-reduced-motion.
   ============================================================================ */

/* ── Design tokens ────────────────────────────────────────────────────────── */
:root {
    --ikh-tour-orange: #F58220;
    --ikh-tour-orange-soft: rgba(245, 130, 32, 0.14);
    --ikh-tour-orange-glow: rgba(245, 130, 32, 0.55);
    --ikh-tour-ink: #1A1A1F;
    --ikh-tour-ink-2: #4A4A55;
    --ikh-tour-ink-3: #8A8A95;
    --ikh-tour-cream: #FFF7EE;
    --ikh-tour-paper: #FFFFFF;
    --ikh-tour-line: rgba(26, 26, 31, 0.08);
    --ikh-tour-shadow-card: 0 32px 80px -20px rgba(15, 23, 42, 0.45), 0 12px 28px -8px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    --ikh-tour-radius: 18px;
    --ikh-tour-radius-sm: 12px;
    --ikh-tour-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ikh-tour-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================================
   1. HEADER HELP GLYPH — the entry point
   ============================================================================
   Drops into the existing .header-actions cluster next to the language
   wrapper. Pure glyph (no chip / no bordered pill) to match the look-and-feel
   of the Tenant+ "+" and profile icon. Includes a soft cream halo on hover
   plus a faint heartbeat to draw first-time eyes.
*/
.ikh-tour-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ikh-tour-orange);
    border-radius: 50%;
    transition: transform .25s var(--ikh-tour-ease), background-color .25s ease;
    -webkit-tap-highlight-color: transparent;
}

    .ikh-tour-trigger:hover,
    .ikh-tour-trigger:focus-visible {
        background: var(--ikh-tour-orange-soft);
        transform: translateY(-1px);
        outline: none;
    }

    .ikh-tour-trigger:focus-visible {
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.35);
    }

.ikh-tour-trigger__glyph {
    width: 26px;
    height: 26px;
    display: block;
    overflow: visible;
}

/* Heartbeat halo — first 24h after first paint */
.ikh-tour-trigger[data-pulse="on"]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--ikh-tour-orange-glow);
    opacity: 0;
    animation: ikhTourGlyphHalo 2.6s ease-out infinite;
    pointer-events: none;
}

@keyframes ikhTourGlyphHalo {
    0% {
        transform: scale(0.7);
        opacity: 0;
    }

    35% {
        opacity: 0.45;
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}

/* Glyph internal animations — just the core dot. The dashed outer ring and
   horizontal scan beam were removed from the SVG so their styles are gone
   too. The dot pulses gently for first-time visitors; quiet mode (set after
   the first tour run) stops it via .ikh-tour-trigger[data-quiet="on"] below. */
.ikh-tour-trigger__core {
    transform-origin: 16px 25px; /* aligned to the new dot's cy=25 */
    animation: ikhTourGlyphCore 1.6s ease-in-out infinite;
}

@keyframes ikhTourGlyphCore {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }
}

/* New-user nudge — small floating chip that appears beside the glyph
   on first paint until dismissed (JS handles localStorage). */
.ikh-tour-trigger__nudge {
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    transform: translateY(-50%);
    background: var(--ikh-tour-ink);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity .35s var(--ikh-tour-ease);
}

    .ikh-tour-trigger__nudge::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        transform: translateY(-50%);
        border: 5px solid transparent;
        border-left-color: var(--ikh-tour-ink);
    }

.ikh-tour-trigger[data-nudge="on"] .ikh-tour-trigger__nudge {
    opacity: 1;
    animation: ikhTourNudgeBob 2.4s ease-in-out infinite;
}

@keyframes ikhTourNudgeBob {
    0%, 100% {
        transform: translateY(-50%) translateX(0);
    }

    50% {
        transform: translateY(-50%) translateX(-4px);
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   QUIET MODE — applied once a user has completed OR dismissed the tour.
   The first-visit attention-getting motion (rotating ring, pulsing core,
   scan beam, halo, nudge) becomes a static, recognisable "?" glyph. The
   button still works on click; it just stops shouting. This is the right
   default for daily users — the tour is one click away when they want it.
   ──────────────────────────────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────────────────────
   QUIET MODE — applied once a user has completed OR dismissed the tour.
   The first-visit attention-getting motion (pulsing core dot, halo, nudge)
   becomes a static, recognisable "?" glyph. The button still works on
   click; it just stops shouting. This is the right default for daily
   users — the tour is one click away when they want it.
   ──────────────────────────────────────────────────────────────────────────── */
.ikh-tour-trigger[data-quiet="on"]::before {
    /* Kill the breathing halo entirely */
    animation: none !important;
    opacity: 0 !important;
    display: none;
}

.ikh-tour-trigger[data-quiet="on"] .ikh-tour-trigger__core {
    /* Pin the dot to a calm static state — no scaling pulse */
    animation: none !important;
    opacity: 0.85;
}

.ikh-tour-trigger[data-quiet="on"] .ikh-tour-trigger__nudge {
    /* Belt-and-braces: never show the nudge chip in quiet mode */
    display: none !important;
}


/* ============================================================================
   2. OVERLAY — single SVG with evenodd spotlight cutout
   ============================================================================
   The overlay sits above everything except the tour card and the lifted
   highlighted element. We lift the highlighted element via CSS by tagging it
   with [data-ikh-tour-lit="true"] and bumping its z-index + drop shadow.
*/
.ikh-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483640; /* one rung below the card */
    pointer-events: none; /* JS opens click-blocker selectively */
    opacity: 0;
    transition: opacity .35s var(--ikh-tour-ease);
}

    .ikh-tour-overlay[data-state="open"] {
        opacity: 1;
        pointer-events: auto;
    }

    .ikh-tour-overlay svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

/* The dim mask path — fades smoothly between stops via opacity on a duplicate
   path tactic handled in JS. */
.ikh-tour-overlay__mask {
    fill: rgba(8, 12, 24, 0.62);
    transition: d 0.55s var(--ikh-tour-ease);
}

/* Spotlight border — drawn as a separate animated rect, gives the
   highlighted region a glowing orange frame. */
.ikh-tour-overlay__frame {
    fill: none;
    stroke: var(--ikh-tour-orange);
    stroke-width: 2;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 12px rgba(245, 130, 32, 0.55));
    transition: x .55s var(--ikh-tour-ease), y .55s var(--ikh-tour-ease), width .55s var(--ikh-tour-ease), height .55s var(--ikh-tour-ease);
    pointer-events: none;
}

/* Pulse ring — purely decorative, syncs with the frame */
.ikh-tour-overlay__pulse {
    fill: none;
    stroke: var(--ikh-tour-orange);
    stroke-width: 2;
    opacity: 0.55;
    transition: x .55s var(--ikh-tour-ease), y .55s var(--ikh-tour-ease), width .55s var(--ikh-tour-ease), height .55s var(--ikh-tour-ease);
    animation: ikhTourPulse 2.2s ease-out infinite;
    pointer-events: none;
}

@keyframes ikhTourPulse {
    0% {
        opacity: 0.55;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.04);
    }
}

/* When zero target (welcome / centre-screen step), suppress frame + pulse */
.ikh-tour-overlay[data-target="none"] .ikh-tour-overlay__frame,
.ikh-tour-overlay[data-target="none"] .ikh-tour-overlay__pulse {
    opacity: 0;
}


/* ============================================================================
   3. LIT ELEMENT — the spotlit DOM node
   ============================================================================
   The combination below is what reliably lifts an element above the dark
   overlay AND prevents its glow / spotlight border from being clipped by
   an ancestor with overflow:hidden or a transform-induced stacking context.

   `position: relative` ensures z-index applies. `z-index: 2147483641`
   sits exactly one rung below the coach card (2147483642) and two rungs
   above the overlay (2147483640).

   `isolation: isolate` was previously here but caused the FLOATING MEDIA
   RAIL to NOT light up — the rail uses `transform: translateY(-50%)` on
   its parent, which creates a stacking context that the lit child can't
   escape via isolation. Removed.

   `overflow: visible !important` defeats the Tenant+ pill scrollbar bug:
   the `.scrollable-pills` parent has `overflow-x: auto` and when its child
   was lifted, the browser briefly thought the child overflowed and drew
   scroll arrows for 1-2 frames. JS-side we already neutralise ancestor
   overflow, this is the second line of defence.
*/
[data-ikh-tour-lit="true"] {
    /* NOTE: we intentionally do NOT set `position: relative` here. If we
       did, an element whose layout depends on `position: absolute` (like
       `.floating-engagement` which uses position:absolute + transform
       translateY(-50%) to centre vertically) would be yanked back into
       normal document flow, jumping it to a random spot on the page while
       the spotlight cutout stays where the element WAS. Instead the JS
       sets `position: relative` only on elements that were `static`,
       leaving already-positioned elements alone. */
    z-index: 2147483641 !important;
    overflow: visible !important;
}
/* Sister lit — the second+ element in a multi-target step. Same lift, no
   different chrome. Listed separately so we can style them later if we
   need to (e.g. a softer secondary glow on supporting items). */
[data-ikh-tour-sister="true"] {
    z-index: 2147483641 !important;
    overflow: visible !important;
}


/* ============================================================================
   4. COACH CARD — the premium tooltip
   ============================================================================
*/
.ikh-tour-card {
    position: fixed;
    z-index: 2147483642;
    width: min(420px, calc(100vw - 48px));
    background: var(--ikh-tour-paper);
    border-radius: var(--ikh-tour-radius);
    /* Per design feedback: a clean 2px whitesmoke (#F5F5F5) ring around
       the entire card. Replaces the previous look where the top edge
       (where the progress bar starts) read as an unintended border in
       isolation. The all-around border anchors the card visually so the
       progress bar reads as progress, not as the card's chrome. */
    border: 2px solid whitesmoke;
    box-shadow: var(--ikh-tour-shadow-card);
    color: var(--ikh-tour-ink);
    font-family: inherit;
    overflow: hidden;
    transform: translateY(8px) scale(0.96);
    opacity: 0;
    transition: opacity .35s var(--ikh-tour-ease), transform .45s var(--ikh-tour-ease-spring), top .55s var(--ikh-tour-ease), left .55s var(--ikh-tour-ease);
    will-change: transform, opacity, top, left;
}

    .ikh-tour-card[data-state="open"] {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

/* Tail — hidden across the board now that the card carries a real
   border. With a border in place, a rotated-square tail poking out
   would show a visible seam where the card edge meets the tail's
   diagonal, and matching the seam on every placement (top / bottom /
   left / right) would mean four separate corner-border rules that
   still wouldn't line up perfectly during the open-state spring.
   Cleaner: drop the tail entirely. The spotlight cutout + the card's
   position already make it obvious which element each step is about. */
.ikh-tour-card__tail {
    display: none !important;
}

/* Inner content sits above the tail */
.ikh-tour-card__inner {
    position: relative;
    z-index: 1;
    background: var(--ikh-tour-paper);
    border-radius: var(--ikh-tour-radius);
}

/* Header strip — brand band */
.ikh-tour-card__head {
    position: relative;
    padding: 14px 18px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--ikh-tour-cream) 0%, #FFFFFF 78%);
    border-bottom: 1px solid var(--ikh-tour-line);
}

.ikh-tour-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ikh-tour-ink);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
}

    .ikh-tour-card__chip::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--ikh-tour-orange);
        box-shadow: 0 0 8px var(--ikh-tour-orange-glow);
    }

.ikh-tour-card__counter {
    /* Counter pushed to the right, but with breathing room before the close
       button so the two never overlap (was: "1 / 18" being crossed out by
       the × glyph). The close button reserves 30px on the right via the
       head's padding-right. */
    margin-left: auto;
    margin-right: 32px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ikh-tour-ink-3);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}

    .ikh-tour-card__counter strong {
        color: var(--ikh-tour-orange);
        font-weight: 800;
    }

.ikh-tour-card__close {
    /* Pulled up to the very corner — clear of the counter, clear of the
       chip. Slightly larger touch target (32×32) so it's easier to hit. */
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--ikh-tour-ink-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, color .2s ease;
}

    .ikh-tour-card__close:hover {
        background: rgba(0, 0, 0, 0.06);
        color: var(--ikh-tour-ink);
    }

    .ikh-tour-card__close svg {
        width: 14px;
        height: 14px;
    }

/* Progress bar (top edge of card) */
.ikh-tour-card__progress {
    height: 3px;
    background: rgba(245, 130, 32, 0.14);
    overflow: hidden;
}

.ikh-tour-card__progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #F58220 0%, #FFB060 100%);
    border-radius: 0 3px 3px 0;
    width: 0%;
    transition: width .55s var(--ikh-tour-ease);
    box-shadow: 0 0 10px rgba(245, 130, 32, 0.55);
}

/* Body */
.ikh-tour-card__body {
    padding: 18px 20px 8px;
}

.ikh-tour-card__title {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 6px 0;
    letter-spacing: -0.01em;
    color: var(--ikh-tour-ink);
    display: flex;
    align-items: center;
    gap: 10px;
}

.ikh-tour-card__icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--ikh-tour-orange-soft);
    color: var(--ikh-tour-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ikh-tour-card__icon svg {
        width: 18px;
        height: 18px;
    }

.ikh-tour-card__lede {
    font-size: 13px;
    font-weight: 600;
    color: var(--ikh-tour-orange);
    margin: 0 0 6px 0;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ikh-tour-card__desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ikh-tour-ink-2);
    margin: 0 0 12px 0;
}

    .ikh-tour-card__desc strong {
        color: var(--ikh-tour-ink);
        font-weight: 700;
    }

    .ikh-tour-card__desc code {
        background: var(--ikh-tour-cream);
        border: 1px solid rgba(245, 130, 32, 0.22);
        color: var(--ikh-tour-orange);
        font-size: 12.5px;
        font-weight: 700;
        padding: 1px 6px;
        border-radius: 6px;
    }

/* Optional feature pills (e.g. "AI · Live · Multilingual") */
.ikh-tour-card__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px 0;
}

.ikh-tour-card__pill {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--ikh-tour-cream);
    color: var(--ikh-tour-orange);
    border: 1px solid rgba(245, 130, 32, 0.22);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
}

    .ikh-tour-card__pill svg {
        width: 10px;
        height: 10px;
    }

/* Footer — nav row */
.ikh-tour-card__foot {
    padding: 8px 20px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ikh-tour-card__skip {
    background: transparent;
    border: none;
    color: var(--ikh-tour-ink-3);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 4px;
    margin-right: auto;
    letter-spacing: 0.02em;
    transition: color .2s ease;
}

    .ikh-tour-card__skip:hover {
        color: var(--ikh-tour-ink);
    }

.ikh-tour-card__btn {
    appearance: none;
    border: 1px solid var(--ikh-tour-line);
    background: #fff;
    color: var(--ikh-tour-ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 9px 14px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .2s var(--ikh-tour-ease);
}

    .ikh-tour-card__btn:hover {
        background: var(--ikh-tour-cream);
        border-color: rgba(245, 130, 32, 0.35);
    }

    .ikh-tour-card__btn svg {
        width: 12px;
        height: 12px;
    }

    .ikh-tour-card__btn[disabled] {
        opacity: 0.35;
        cursor: not-allowed;
    }

.ikh-tour-card__btn--primary {
    background: var(--ikh-tour-ink);
    border-color: var(--ikh-tour-ink);
    color: #fff;
    box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

    .ikh-tour-card__btn--primary:hover {
        background: var(--ikh-tour-orange);
        border-color: var(--ikh-tour-orange);
        color: #fff;
        transform: translateY(-1px);
    }

/* Dot rail */
.ikh-tour-card__dots {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 20px 14px;
}

.ikh-tour-card__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(26, 26, 31, 0.15);
    transition: all .25s var(--ikh-tour-ease);
    cursor: pointer;
    border: none;
    padding: 0;
}

    .ikh-tour-card__dot[data-active="true"] {
        background: var(--ikh-tour-orange);
        width: 22px;
        border-radius: 4px;
    }

    .ikh-tour-card__dot:hover:not([data-active="true"]) {
        background: rgba(26, 26, 31, 0.35);
    }


/* ============================================================================
   5. WELCOME / FINALE — full-screen modal variants
   ============================================================================
   Used at step 0 (warm welcome) and step N (graduation card).
*/
.ikh-tour-card[data-variant="welcome"],
.ikh-tour-card[data-variant="finale"] {
    width: min(520px, calc(100vw - 48px));
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.96);
}

    .ikh-tour-card[data-variant="welcome"][data-state="open"],
    .ikh-tour-card[data-variant="finale"][data-state="open"] {
        transform: translate(-50%, -50%) scale(1);
    }

    .ikh-tour-card[data-variant="welcome"] .ikh-tour-card__tail,
    .ikh-tour-card[data-variant="finale"] .ikh-tour-card__tail {
        display: none;
    }

.ikh-tour-hero {
    position: relative;
    height: 140px;
    overflow: hidden;
    background: radial-gradient(120% 100% at 0% 0%, rgba(245, 130, 32, 0.18) 0%, transparent 60%), radial-gradient(120% 100% at 100% 100%, rgba(245, 130, 32, 0.10) 0%, transparent 55%), linear-gradient(135deg, #1A1A1F 0%, #2A2A35 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ikh-tour-hero__grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 75%);
}

.ikh-tour-hero__svg {
    position: relative;
    width: 100px;
    height: 100px;
    overflow: visible;
}

.ikh-tour-hero__beam {
    animation: ikhTourBeam 3.4s ease-in-out infinite;
    transform-origin: center;
}

@keyframes ikhTourBeam {
    0%, 100% {
        transform: rotate(0deg);
        opacity: 0.4;
    }

    50% {
        transform: rotate(180deg);
        opacity: 0.9;
    }
}

.ikh-tour-hero__pulse {
    animation: ikhTourCorePulse 1.6s ease-in-out infinite;
    transform-origin: center;
}

@keyframes ikhTourCorePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.85;
    }

    50% {
        transform: scale(1.25);
        opacity: 1;
    }
}


/* ============================================================================
   6. PARKED CARD MODE — when the tour points at a fixed/floating element
   ============================================================================
   The floating rails sit on the screen edge — give the card extra breathing
   room from the spotlight via larger gap.
*/
.ikh-tour-card[data-anchor-mode="edge"] { /* no extra rules — handled by JS positioning offsets */
}


/* ============================================================================
   7. CLICK-BLOCKER & SAFE-ZONE
   ============================================================================
   When the tour is active we still allow the user to interact with the
   highlighted element (it's lifted above the overlay). All other clicks are
   absorbed by the overlay.
*/
body.ikh-tour-active {
    overflow: hidden;
}

/* NOTE: we intentionally do NOT set `overflow: auto` on the lit element.
   That older rule caused the Tenant+ pill to render with scrollbar arrows
   for the brief moment the lift was active — the browser thought the
   slightly enlarged glow shadow overflowed the pill. The lit element's
   own rule `overflow: visible !important` (section 3 above) handles this. */

/* Lock pointer for non-lit content (mask path catches everything else) */
.ikh-tour-overlay[data-state="open"] {
    pointer-events: auto;
}


/* ============================================================================
   8. PREMIUM TOOLTIP DETAILS — niceties
   ============================================================================
*/
.ikh-tour-card__keys {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    font-size: 10.5px;
    color: var(--ikh-tour-ink-3);
    font-weight: 600;
}

    .ikh-tour-card__keys kbd {
        font-family: inherit;
        background: #fff;
        border: 1px solid var(--ikh-tour-line);
        border-bottom-width: 2px;
        border-radius: 5px;
        padding: 1px 5px;
        font-size: 10px;
        font-weight: 700;
        color: var(--ikh-tour-ink-2);
        line-height: 1;
    }


/* ============================================================================
   9. REDUCED MOTION
   ============================================================================
*/
@media (prefers-reduced-motion: reduce) {
    .ikh-tour-overlay,
    .ikh-tour-overlay__mask,
    .ikh-tour-overlay__frame,
    .ikh-tour-overlay__pulse,
    .ikh-tour-card,
    .ikh-tour-trigger,
    .ikh-tour-trigger__core,
    .ikh-tour-hero__beam,
    .ikh-tour-hero__pulse {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}


/* ============================================================================
   10. DARK-MODE FRIENDLINESS (the chrome we render is already dark-on-light,
       but we soften the card border in dark surroundings)
   ============================================================================
*/
@media (prefers-color-scheme: dark) {
    .ikh-tour-card {
        box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.7), 0 16px 36px -10px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    }
}