@layer components {

    /* Keep tall animations visible when inside a panel */
    .section-panel:has(#procStep1Brief) {
        overflow: visible;
    }

    /* No :root here — consume tokens from core */

    #procStep1Brief,
    #procStep1Brief * {
        box-sizing: border-box;
        min-width: 0;
    }

    #procStep1Brief {
        padding: 12px;
        color: var(--ink-dark);
    }

    /* ===== Glass container ===== */
    #step1-describe .camp-ui {
        position: relative;
        display: grid;
        gap: var(--gap-md);
        padding: 16px;
        border-radius: var(--r-lg);
        background: linear-gradient(180deg, var(--panel-tint), rgba(255, 255, 255, 0)), var(--panel-dark);
        border: 1px solid var(--bd-soft);
        box-shadow: var(--shadow-deck);
        overflow: hidden;
    }

    /* Gradient outline + soft glow */
    #step1-describe .camp-ui::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        pointer-events: none;
        z-index: 2;
        background: linear-gradient(135deg, var(--edge-1), var(--edge-2));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    #step1-describe .camp-ui::before {
        content: "";
        position: absolute;
        inset: -24px;
        border-radius: 24px;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(60% 40% at 20% 0%, var(--edge-out), transparent 70%);
        filter: blur(22px);
    }

    /* ---- Brief rows (dark chips) ---- */
    #step1-describe .camp-form {
        display: grid;
        gap: 12px;
    }

    #step1-describe .f-row {
        position: relative;
        display: grid;
        /* caret removed → three columns */
        grid-template-columns: 26px auto 1fr;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-radius: var(--r-md);
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .10);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    }

    /* Hide caret node if it still exists in the HTML */
    #step1-describe .f-caret {
        display: none !important;
    }

    /* Icons: force light (IMG/SVG) */
    #step1-describe .f-ico {
        width: 18px;
        height: 18px;
        display: block;
        color: #eaeefc;
        fill: currentColor;
        stroke: currentColor;
        filter: invert(1) brightness(1);
    }

    #step1-describe .f-row svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
    }

    /* Labels/values on dark */
    #step1-describe .f-label {
        font-weight: 700;
        color: var(--ink-dark);
        white-space: nowrap;
        font-size: 14px;
    }

    #step1-describe .f-val {
        font-weight: 800;
        color: var(--ink-dark);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ---- Remove CTA button entirely ---- */
    #step1-describe .camp-btn {
        display: none !important;
    }

    /* ---- Searching state (Lottie + copy + shimmering progress) ---- */
    #step1-describe .camp-search {
        display: none;
        align-items: center;
        gap: 14px;
        z-index: 1;
    }

    #step1-describe .camp-ui.is-searching .camp-form {
        display: none;
    }

    #step1-describe .camp-ui.is-searching .camp-search {
        display: flex;
    }

    #step1-describe .lottie {
        width: 96px;
        height: 96px;
        display: block;
        flex: 0 0 auto;
        filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .35));
    }

    #step1-describe .search-copy strong {
        display: block;
        margin-bottom: 8px;
        color: var(--ink-dark);
    }

    #step1-describe .search-copy small {
        color: var(--ink-muted);
    }

    /* Progress bar with shimmer */
    #step1-describe .pbar {
        position: relative;
        height: 8px;
        width: clamp(200px, 36vw, 320px);
        border-radius: 999px;
        background: #263148;
        border: 1px solid rgba(255, 255, 255, .10);
        overflow: hidden;
    }

    #step1-describe .pbar b {
        display: block;
        height: 100%;
        width: 0%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--ai-c1), var(--ai-c2));
        transition: width .9s cubic-bezier(.2, .8, .2, 1);
        position: relative;
        overflow: hidden;
    }

    #step1-describe .pbar b::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .25) 44%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .25) 56%, transparent 70%);
        background-size: 200% 100%;
        animation: step1Shimmer .9s linear infinite;
        mix-blend-mode: overlay;
        pointer-events: none;
    }

    @keyframes step1Shimmer {
        from {
            background-position: 200% 0;
        }

        to {
            background-position: -200% 0;
        }
    }

    /* Optional typing sweep on form rows */
    #step1-describe .f-row.is-typing::after {
        content: "";
        position: absolute;
        inset: -1px;
        background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
        background-size: 200% 100%;
        animation: step1Sweep .8s ease-in-out infinite;
        mix-blend-mode: overlay;
        pointer-events: none;
    }

    @keyframes step1Sweep {
        from {
            background-position: 200% 0;
        }

        to {
            background-position: -200% 0;
        }
    }

    /* ---- Mobile tweaks ---- */
    @media (max-width:640px) {
        #step1-describe .camp-ui {
            padding: 12px;
        }

        #step1-describe .f-row {
            /* caret removed → keep three columns on mobile too */
            grid-template-columns: 22px auto 1fr;
            padding: 10px 12px;
        }

        #step1-describe .lottie {
            width: 80px;
            height: 80px;
        }
    }

    /* Dark-mode is already native with this palette */
    /* ===== Fixed height knobs ===== */
    :root {
        /* how tall a single brief row is */
        --row-h: 44px;
        /* tweak to taste */
        --rows: 4;
        /* you have 4 typed rows */
        --rows-gap: 12px;
        /* matches .camp-form gap */
        /* total inner content height (rows + gaps) */
        --camp-body-h: calc(var(--rows) * var(--row-h) + (var(--rows) - 1) * var(--rows-gap));
    }

    /* Lock the glass card height so it never jumps */
    #step1-describe .camp-ui {
        min-height: var(--camp-body-h);
        /* padding sits outside this; fine for consistency */
    }

    #step1-describe .f-row {
        height: var(--row-h);
        /* instead of min-height */
        overflow: hidden;
        /* prevents ::after / inner text from spilling */
    }

    #step1-describe .f-row.is-typing::after {
        inset: 0;
        /* was -1px, which leaked outside */
        border-radius: inherit;
        /* keep the rounded glow */
    }

    /* Search state must occupy the same inner height */
    #step1-describe .camp-search {
        min-height: var(--camp-body-h);
        align-items: center;
        /* already set, keeps it centered within the reserved height */
    }

    /* Reserve space for the transient "leads found" line so it doesn't push/snap */
    #step1-describe #foundCount {
        display: block;
        min-height: 1.2em;
    }

    /* ---- Mobile: slightly tighter rows so height fits nicely ---- */
    @media (max-width:640px) {
        :root {
            --row-h: 40px;
            /* smaller row on mobile */
            --rows-gap: 10px;
        }
    }
}

/* Keep height stable by overlaying the search layer */
#step1-describe .camp-ui {
    position: relative;
}

/* Show search as an absolute overlay */
#step1-describe .camp-search {
    position: absolute;
    inset: 0;
    /* fill the glass card */
    display: none;
    /* hidden until searching */
    align-items: center;
    justify-content: center;
    padding: 16px;
    /* match card padding visually */
    z-index: 3;
}

/* When searching: keep the form in flow (height stays),
   but make it invisible and non-interactive */
#step1-describe .camp-ui.is-searching .camp-form {
    visibility: hidden;
    pointer-events: none;
}

/* Show the overlay */
#step1-describe .camp-ui.is-searching .camp-search {
    display: flex;
}

/* Remove the old display:none rules if present */
#step1-describe .camp-ui.is-searching .camp-form {
    /* old */
    display: none !important;
}

#step1-describe .camp-ui.is-searching .camp-search {
    /* old */
    display: flex;
}

/* ↑ keep only the new rules above; delete these two if they exist */

/* Overlay search layer so height comes from the form */
#step1-describe .camp-ui {
    position: relative;
}

/* absolute overlay */
#step1-describe .camp-search {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 3;
}

#step1-describe .camp-ui.is-searching .camp-search {
    display: flex;
}

/* keep form in flow (height source), just hide it visually */
#step1-describe .camp-ui.is-searching .camp-form {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: initial !important;
    /* override any older display:none rules */
}

/* Lock the OUTER animation container height when class is present */
#procStep1Brief.is-locked {
    height: var(--proc-lock-h);
    overflow: hidden;
    /* prevents any 1px overflow */
}