/* =============================================================================
   📄 C:\vindxit\frontend\styles\steps.css
   VindXit "Paw Trail" — Pure Glow V5 (N64 Plastic Edition - Transparent Tray)
   -----------------------------------------------------------------------------
   • N64 shell plastic: semi-gloss, beveled rims, soft specular highlights
   • Clean neon halo (gold/current), green for "done"
   • Mobile-first, zero JS via [data-current="1|2|3"]
   • Spring/bob animations kept; respects reduced motion
   • Bulletproof stacking to avoid overlap with result panels
   • Transparent container: padding/gap intact, no frame/border/background
   • Tabs > spaces (project standard)
   ============================================================================= */

/* --- Theme tokens (N64 palette & material) --------------------------------- */
:root {
    --paw-url: url('/assets/images/paw.png');

    /* N64-ish primaries */
    --n64-blue:  #0047AB;
    --n64-red:   #E60012;
    --n64-green: #00A651;
    --n64-yellow:#FFC625;

    /* Plastic material tones */
    --bg-track:  #0a1329;        /* page-adaptive track backdrop */
    --card:      #0f1730;        /* base shell */
    --card-2:    #101b3a;        /* face shade */
    --lip:       #0b1024;        /* inner-lip for plastic bevel */
    --spec:      rgba(255,255,255,.12); /* specular edge line */

    --text:      #eaf2ff;
    --sub:       #a8b2cc;
    --gold:      var(--n64-yellow);     /* current accent */
    --done:      #9ad17b;               /* completed */
    --dim:       #394369;

    --radius:    20px;
    --shadow:    0 10px 28px rgba(0,0,0,.45);
    --shadow-hover: 0 16px 46px rgba(0,0,0,.55);
    --t:         .28s cubic-bezier(.4,0,.2,1);
}

/* --- Keyframes (spring, bob, paw pulse, handoff) --------------------------- */
@keyframes vx-spring {
    0%   { transform: translateY(12px) scale(.985); }
    40%  { transform: translateY(-7px) scale(1.018); }
    65%  { transform: translateY(2px) scale(.998); }
    82%  { transform: translateY(-1px) scale(1.001); }
    100% { transform: translateY(0) scale(1); }
}
@keyframes vx-bob { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-2px) scale(1.02)} }
@keyframes vx-pawpulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.065)} }
@keyframes vx-handoff-x { 0%{transform:translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(100%);opacity:0} }
@keyframes vx-handoff-y { 0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(100%);opacity:0} }

/* --- Track container ------------------------------------------------------- */
.vx-steps {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
    margin-bottom: 16px;
    overflow: visible;
    isolation: isolate;
}

/* --- Step cards (N64 shell plastic) --------------------------------------- */
.vx-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 12px;
    min-height: 76px;
    max-height: 112px;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);

    /* Plastic face: slight vertical shade + inner lip for molded look */
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.08)),
        linear-gradient(145deg, var(--card), var(--card-2));
    border: 1px solid rgba(255,255,255,.06);
    box-shadow:
        inset 0 1px 0 var(--spec),             /* specular edge */
        inset 0 -1px 0 var(--lip),            /* inner lip */
        var(--shadow);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t), filter var(--t);
    -webkit-tap-highlight-color: transparent;
}

/* Outer halo ring (very subtle; intensifies on current/hover) */
.vx-step::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 22px rgba(255,255,255,.04);
    opacity: .9;
    transition: box-shadow var(--t), opacity var(--t), filter var(--t);
}

/* Top specular swipe (gives ABS plastic sheen) */
.vx-step::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient( to bottom,
            rgba(255,255,255,.10) 0%,
            rgba(255,255,255,.06) 10%,
            transparent 35%,
            transparent 100%
        );
    opacity: .7;
    mix-blend-mode: screen;
    transition: opacity var(--t);
}

.vx-step:active { transform: scale(.99); }
.vx-step:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* --- Paw badge (gold coin w/ emboss) -------------------------------------- */
.vx-step .vx-paw {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex: 0 0 auto;

    /* Coin body with bevel */
    background:
        radial-gradient(70% 70% at 50% 30%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.15)),
        radial-gradient(100% 100% at 50% 50%, rgba(255,198,37,.20), transparent 70%);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.35),
        inset 0 -2px 0 rgba(0,0,0,.35),
        0 0 0 1px rgba(255,255,255,.06),
        0 10px 18px rgba(0,0,0,.35);

    transition: transform var(--t), filter var(--t), box-shadow var(--t);
}

/* Paw glyph (embossed) */
.vx-step .vx-paw::after {
    content: "";
    position: absolute;
    inset: 8px;
    background: var(--gold);
    -webkit-mask-image: var(--paw-url);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: var(--paw-url);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;

    opacity: .82;
    filter: drop-shadow(0 0 10px rgba(255,198,37,.35));
    transition: opacity var(--t), filter var(--t), transform var(--t);
}

/* Sparkle specks */
.vx-step .vx-paw::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background:
        radial-gradient(3px 3px at 22% 28%, rgba(255,198,37,.55), transparent 60%),
        radial-gradient(2px 2px at 62% 18%, rgba(255,255,255,.70), transparent 60%),
        radial-gradient(2.5px 2.5px at 78% 72%, rgba(255,198,37,.45), transparent 60%),
        radial-gradient(2px 2px at 36% 82%, rgba(255,255,255,.60), transparent 60%);
    opacity: 0;
    filter: blur(.2px);
    transition: opacity var(--t);
}

/* --- Labels --------------------------------------------------------------- */
.vx-step .vx-labels { display:flex; flex-direction:column; min-width:0; align-items:center; max-width:100%; }
.vx-step .vx-title  { font-weight: 900; font-size: .98rem; line-height:1.2; color:var(--text); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; letter-spacing:.2px; }
.vx-step .vx-sub    { font-size: .86rem; line-height:1.25; color:var(--sub); opacity:.95; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* --- Current, Done, Hover states ----------------------------------------- */
.vx-steps[data-current="1"] .vx-step[data-step="1"],
.vx-steps[data-current="2"] .vx-step[data-step="2"],
.vx-steps[data-current="3"] .vx-step[data-step="3"] {
    transform: translateY(-2px);
    border-color: rgba(255,198,37,.30);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        inset 0 -1px 0 rgba(0,0,0,.38),
        0 0 0 1px rgba(255,198,37,.30),
        0 14px 36px rgba(0,0,0,.50),
        0 0 46px rgba(255,198,37,.22);
    animation: vx-spring 520ms cubic-bezier(.2,1,.22,1) 1;
}

.vx-steps[data-current="1"] .vx-step[data-step="1"] .vx-paw::after,
.vx-steps[data-current="2"] .vx-step[data-step="2"] .vx-paw::after,
.vx-steps[data-current="3"] .vx-step[data-step="3"] .vx-paw::after {
    opacity: 1;
    filter: drop-shadow(0 0 14px rgba(255,198,37,.75));
    animation: vx-pawpulse 1800ms ease-in-out infinite, vx-bob 2600ms ease-in-out infinite;
}
.vx-steps[data-current="1"] .vx-step[data-step="1"] .vx-paw::before,
.vx-steps[data-current="2"] .vx-step[data-step="2"] .vx-paw::before,
.vx-steps[data-current="3"] .vx-step[data-step="3"] .vx-paw::before { opacity:.45; }

/* Done steps — green plastic glow */
.vx-steps[data-current="2"] .vx-step[data-step="1"] .vx-paw::after,
.vx-steps[data-current="3"] .vx-step[data-step="1"] .vx-paw::after,
.vx-steps[data-current="3"] .vx-step[data-step="2"] .vx-paw::after {
    background: var(--done);
    opacity: .95;
    filter: drop-shadow(0 0 11px rgba(154,209,123,.70));
}

/* Desktop hover: magnetic lift + brighter sheen */
@media (hover:hover) and (pointer:fine) {
    .vx-step:hover {
        transform: translateY(-3px);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.50),
            inset 0 -1px 0 rgba(0,0,0,.40),
            0 0 0 1px rgba(255,198,37,.34),
            var(--shadow-hover),
            0 0 44px rgba(255,198,37,.24);
    }
    .vx-step:hover .vx-paw::before { opacity:.40; }
    .vx-step:hover::after { opacity:.9; }
}

/* --- Handoff glow dot ----------------------------------------------------- */
.vx-steps::before {
    content: "";
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, var(--gold) 0%, rgba(255,198,37,.35) 55%, rgba(255,198,37,0) 70%);
    filter: blur(.2px);
    opacity: 0;
    pointer-events: none;
}
.vx-steps[data-current="2"]::before { top: 12px; left: calc(50% - 5px); animation: vx-handoff-y 700ms ease-out 1; }
.vx-steps[data-current="3"]::before { top: calc(50% - 5px); left: calc(50% - 5px); animation: vx-handoff-y 700ms ease-out 1; }

@media (min-width: 901px) {
    .vx-steps[data-current="2"]::before { top: calc(50% - 5px); left: calc((100%/6) - 5px); animation: vx-handoff-x 700ms ease-out 1; }
    .vx-steps[data-current="3"]::before { top: calc(50% - 5px); left: calc((100%/2) - 5px); animation: vx-handoff-x 700ms ease-out 1; }
}

/* --- Desktop layout -------------------------------------------------------- */
@media (min-width: 901px) {
    .vx-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        padding: 20px 24px 26px;
        margin-bottom: 24px;
    }

    .vx-step {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        padding: 16px 18px 16px 16px;
        min-height: 100px;
        max-height: 150px;
        gap: 16px;
    }

    .vx-step .vx-paw       { width: 66px; height: 66px; }
    .vx-step .vx-paw::after{ inset: 9px; }
    .vx-step .vx-labels    { align-items:flex-start; max-width: calc(100% - 92px); }
    .vx-step .vx-title     { font-size: 1.14rem; letter-spacing:.25px; }
    .vx-step .vx-sub       { font-size: .96rem; opacity:.9; }
}

/* --- Ultra-small phones ---------------------------------------------------- */
@media (max-width: 380px) {
    .vx-steps { gap: 8px; padding: 10px; margin-bottom: 12px; }
    .vx-step  { min-height: 70px; max-height: 94px; padding: 10px; gap: 7px; }
    .vx-step .vx-paw { width: 44px; height: 44px; }
    .vx-step .vx-paw::after { inset: 6px; }
    .vx-step .vx-title { font-size: .93rem; }
    .vx-step .vx-sub   { font-size: .83rem; }
}

/* --- Motion preference ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* --- Stacking & overlap safeguards ---------------------------------------- */
#stepsBar,
.vx-steps,
[data-component="steps"] {
    position: relative !important;
    z-index: 9999 !important;
    isolation: isolate;
}
#resultSection,
.score-container,
.panel,
.card,
.lady-floater,
[vx-floating] {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 8px;
}
*[style*="z-index"] { z-index: 2 !important; }
header, .site-header, .topbar { position: relative !important; z-index: 10000 !important; }
/* === ALT INDICATOR B: Top tab notch for current =========================== */

.vx-step[aria-current="page"]::before {
    /* reuse ::before for halo? switch to an inner notch element; so add a new layer */
    box-shadow: none;  /* neutralize previous ::before use on current only */
}

.vx-step[aria-current="page"] .vx-paw::before { opacity: .4; } /* keep specks */

.vx-step[aria-current="page"] .vx-labels::before {
    content: "";
    position: absolute;
    top: -8px; left: 22px; width: 34px; height: 10px;
    border-radius: 10px 10px 2px 2px / 10px 10px 2px 2px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.25)),
        linear-gradient(180deg, var(--gold), #dba61f);
    box-shadow:
        0 1px 0 rgba(255,255,255,.35) inset,
        0 -1px 0 rgba(0,0,0,.35) inset,
        0 6px 12px rgba(0,0,0,.35);
}

/* Done state still via :has */
.vx-steps .vx-step:has(~ .vx-step[aria-current="page"]) .vx-paw::after {
    background: var(--done);
    opacity: .95;
    filter: drop-shadow(0 0 11px rgba(154,209,123,.70));
}
/* === PAW COLOR STATES (N64 plastic cues) ================================== */

/* Default paw = neutral coin gold (upcoming step) */
.vx-step .vx-paw::after {
    background: var(--gold);
    opacity: .75;
    filter: drop-shadow(0 0 7px rgba(255,198,37,.35));
    transition: background var(--t), filter var(--t), opacity var(--t);
}

/* Current step paw = N64 GREEN (signal you're HERE now) */
.vx-step[aria-current="page"] .vx-paw::after {
    background: var(--n64-green);
    opacity: 1;
    filter: drop-shadow(0 0 14px rgba(0,166,81,.8));
}

/* Done steps = darker gold (progress achieved) */
.vx-steps .vx-step:has(~ .vx-step[aria-current="page"]) .vx-paw::after {
    background: var(--gold);
    opacity: .95;
    filter: drop-shadow(0 0 11px rgba(255,198,37,.55));
}
/* === CURRENT STEP PAW SIZE BOOST ========================================= */

/* Current step paw = 10% bigger for emphasis */
.vx-step[aria-current="page"] .vx-paw {
    transform: scale(1.1);
    transition: transform var(--t);
}

/* Optional: keep the bounce/bob animation aligned */
.vx-step[aria-current="page"] .vx-paw::after {
    transform: scale(1.05); /* slight extra lift for glyph */
}
/* === PAW SIZE HIERARCHY =================================================== */

/* Default: shrink all paws down */
.vx-step .vx-paw {
    transform: scale(0.8);
    transition: transform var(--t), filter var(--t);
}

/* Current step paw = +10% (so total ~1.1 vs normal 1.0) */
.vx-step[aria-current="page"] .vx-paw {
    transform: scale(1.1);
}



/* --- Mobile square row layout (max 900px) --------------------------------- */
@media (max-width: 900px) {
    .vx-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
        padding: 1px;
        margin: 10px auto 9px;
        width: 70%;
        max-width: 70vw;
        justify-content: center;
        padding-top: 20px;
    }

    .vx-step {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1px;
        min-height: auto;
        aspect-ratio: 1 / 1; /* Square shape */
        max-height: none;
        gap: 0;
    }

    .vx-step .vx-paw { width: 40px; height: 40px; margin-bottom: 20px;}
    .vx-step .vx-paw::after { inset: 1px; }
    .vx-step .vx-title { font-size: .56rem; }
    .vx-step .vx-sub { font-size: .48rem; }

    /* Overlap prevention: elevate steps container */
    .vx-steps,
    .vx-step {
        position: relative !important;
        z-index: 10001 !important;
    }
}

/* --- Global mobile overlap shield ----------------------------------------- */
@media (max-width: 900px) {
    #resultSection,
    .score-container,
    .panel,
    .card,
    .lady-floater,
    [vx-floating],
    *[style*="z-index"] {
        z-index: 1 !important;
        margin-top: 16px;
    }
    header, .site-header, .topbar { z-index: 10002 !important; }
}

/* --- Desktop layout (with top gap) ----------------------------------------- */
@media (min-width: 901px) {
    .vx-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        padding: 20px 24px 26px;
        margin: 10px 0 24px;
    }

    .vx-step {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        padding: 16px 18px 16px 16px;
        min-height: 100px;
        max-height: 150px;
        gap: 16px;
    }

    .vx-step .vx-paw       { width: 66px; height: 66px; }
    .vx-step .vx-paw::after{ inset: 9px; }
    .vx-step .vx-labels    { align-items:flex-start; max-width: calc(100% - 92px); }
    .vx-step .vx-title     { font-size: 1.14rem; letter-spacing:.25px; }
    .vx-step .vx-sub       { font-size: .96rem; opacity:.9; }
}
/* --- Mobile square row layout (max 900px) --------------------------------- */
@media (max-width: 900px) {
    .vx-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
        padding: 1px;
        margin: 10px auto 9px;
        width: 70%;
        max-width: 70vw;
        justify-content: center;
        padding-top: 20px;
    }

    .vx-step {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1px;
        min-height: auto;
        aspect-ratio: 1 / 1; /* Square shape */
        max-height: none;
        gap: 4px;
    }

    .vx-step .vx-labels {
        order: -1;
    }

    .vx-step .vx-paw { width: 40px; height: 40px; margin-bottom: 0; }
    .vx-step .vx-paw::after { inset: 1px; }
    .vx-step .vx-title { font-size: .56rem; }
    .vx-step .vx-sub { font-size: .48rem; }

    /* Overlap prevention: elevate steps container */
    .vx-steps,
    .vx-step {
        position: relative !important;
        z-index: 10001 !important;
    }
}

/* --- Global mobile overlap shield ----------------------------------------- */
@media (max-width: 900px) {
    #resultSection,
    .score-container,
    .panel,
    .card,
    .lady-floater,
    [vx-floating],
    *[style*="z-index"] {
        z-index: 1 !important;
        margin-top: 16px;
    }
    header, .site-header, .topbar { z-index: 10002 !important; }
}

/* --- Desktop layout (with top gap) ----------------------------------------- */
@media (min-width: 901px) {
    .vx-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        padding: 20px 24px 26px;
        margin: 10px 0 24px;
    }

    .vx-step {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        padding: 16px 18px 16px 16px;
        min-height: 100px;
        max-height: 150px;
        gap: 16px;
    }

    .vx-step .vx-paw       { width: 66px; height: 66px; }
    .vx-step .vx-paw::after{ inset: 9px; }
    .vx-step .vx-labels    { align-items:flex-start; max-width: calc(100% - 92px); }
    .vx-step .vx-title     { font-size: 1.14rem; letter-spacing:.25px; }
    .vx-step .vx-sub       { font-size: .96rem; opacity:.9; }
}
/* --- Mobile square row layout (max 900px) --------------------------------- */
@media (max-width: 900px) {
    .vx-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
        padding: 1px;
        margin: 10px auto 9px;
        width: 70%;
        max-width: 70vw;
        justify-content: center;
        padding-top: 20px;
    }

    .vx-step {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1px;
        min-height: auto;
        aspect-ratio: 1 / 1; /* Square shape */
        max-height: none;
        gap: 4px;
    }

    .vx-step .vx-labels {
        display: contents;
    }

    .vx-step .vx-title {
        order: -1;
    }

    .vx-step .vx-sub {
        order: 1;
    }

    .vx-step .vx-paw { width: 40px; height: 40px; margin-bottom: 0; order: 0; }
    .vx-step .vx-paw::after { inset: 1px; }
    .vx-step .vx-title { font-size: .56rem; }
    .vx-step .vx-sub { font-size: .48rem; }

    /* Overlap prevention: elevate steps container */
    .vx-steps,
    .vx-step {
        position: relative !important;
        z-index: 10001 !important;
    }
}

/* --- Global mobile overlap shield ----------------------------------------- */
@media (max-width: 900px) {
    #resultSection,
    .score-container,
    .panel,
    .card,
    .lady-floater,
    [vx-floating],
    *[style*="z-index"] {
        z-index: 1 !important;
        margin-top: 16px;
    }
    header, .site-header, .topbar { z-index: 10002 !important; }
}

/* --- Desktop layout (with top gap) ----------------------------------------- */
@media (min-width: 901px) {
    .vx-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        padding: 20px 24px 26px;
        margin: 10px 0 24px;
    }

    .vx-step {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        padding: 16px 18px 16px 16px;
        min-height: 100px;
        max-height: 150px;
        gap: 16px;
    }

    .vx-step .vx-paw       { width: 66px; height: 66px; }
    .vx-step .vx-paw::after{ inset: 9px; }
    .vx-step .vx-labels    { align-items:flex-start; max-width: calc(100% - 92px); }
    .vx-step .vx-title     { font-size: 1.14rem; letter-spacing:.25px; }
    .vx-step .vx-sub       { font-size: .96rem; opacity:.9; }
}