/* ==========================================================================
   APF — Controls BUTTONS (visuals only; no layout)
   Scope: [data-apf="common"] .apf-controls …
   ========================================================================== */

[data-apf="common"] .apf-controls .apf-actions button,
[data-apf="common"] .apf-controls .apf-actions .button,
[data-apf="common"] .apf-controls button[type="button"],
[data-apf="common"] .apf-controls button[type="submit"] {
    /* shape + spacing */
    padding: .66rem 1.05rem;
    border-radius: var(--radius, 12px);
    border: none;
    /* type */
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    /* color system (pulls from controls-theme.css) */
    color: #fff;
    background: var(--ctl-gradient, linear-gradient(135deg, color-mix(in oklch, var(--ctl-c1, #7fc8ff) 92%, black), color-mix(in oklch, var(--ctl-c2, #8c64ff) 92%, black)));
    /* fx */
    box-shadow: 0 8px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
    transition: transform var(--transition, .22s cubic-bezier(.5,1,.89,1)), filter var(--transition, .22s cubic-bezier(.5,1,.89,1)), box-shadow var(--transition, .22s cubic-bezier(.5,1,.89,1)), opacity var(--transition, .22s cubic-bezier(.5,1,.89,1));
    will-change: transform;
    position: relative;
    isolation: isolate;
}

    /* Neon front glow (conic), subtle until hover */
    [data-apf="common"] .apf-controls .apf-actions button::after,
    [data-apf="common"] .apf-controls .apf-actions .button::after,
    [data-apf="common"] .apf-controls button[type="button"]::after,
    [data-apf="common"] .apf-controls button[type="submit"]::after {
        content: "";
        position: absolute;
        inset: -3px;
        border-radius: inherit;
        pointer-events: none;
        mix-blend-mode: plus-lighter;
        filter: blur(8px);
        background: conic-gradient(from -45deg in oklch, transparent 0% 30%, hsl(var(--hue2,222) 96% 66%) 36% 42%, transparent 48% 60%, hsl(var(--hue1,255) 96% 66%) 66% 72%, transparent 78% 100%);
        opacity: 0;
        transition: opacity var(--transition, .22s cubic-bezier(.5,1,.89,1)), filter var(--transition, .22s cubic-bezier(.5,1,.89,1));
        z-index: -1;
    }

    /* Hover/active */
    [data-apf="common"] .apf-controls .apf-actions button:not(:disabled):hover,
    [data-apf="common"] .apf-controls .apf-actions .button:not(:disabled):hover,
    [data-apf="common"] .apf-controls button[type="button"]:not(:disabled):hover,
    [data-apf="common"] .apf-controls button[type="submit"]:not(:disabled):hover {
        transform: translateY(-2px);
        filter: brightness(1.07) saturate(1.06);
        box-shadow: 0 14px 28px rgba(0,0,0,.34), 0 0 0 2px var(--focus-ring, rgba(127,106,255,.28));
    }

        [data-apf="common"] .apf-controls .apf-actions button:not(:disabled):hover::after,
        [data-apf="common"] .apf-controls .apf-actions .button:not(:disabled):hover::after,
        [data-apf="common"] .apf-controls button[type="button"]:not(:disabled):hover::after,
        [data-apf="common"] .apf-controls button[type="submit"]:not(:disabled):hover::after {
            opacity: .9;
            filter: blur(6px) saturate(1.2);
        }

    [data-apf="common"] .apf-controls .apf-actions button:active,
    [data-apf="common"] .apf-controls .apf-actions .button:active,
    [data-apf="common"] .apf-controls button[type="button"]:active,
    [data-apf="common"] .apf-controls button[type="submit"]:active {
        transform: translateY(0);
        opacity: .96;
    }

    /* Focus-visible */
    [data-apf="common"] .apf-controls .apf-actions button:focus-visible,
    [data-apf="common"] .apf-controls .apf-actions .button:focus-visible,
    [data-apf="common"] .apf-controls button[type="button"]:focus-visible,
    [data-apf="common"] .apf-controls button[type="submit"]:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px var(--focus-ring, rgba(127,106,255,.28)), 0 0 0 1px var(--focus-ring-strong, rgba(127,106,255,.44)) inset, 0 10px 22px rgba(0,0,0,.36);
    }

    /* Disabled */
    [data-apf="common"] .apf-controls .apf-actions button:disabled,
    [data-apf="common"] .apf-controls .apf-actions .button:disabled,
    [data-apf="common"] .apf-controls button:disabled {
        background: rgba(255,255,255,.09);
        color: var(--text-mid, rgba(234,242,255,.74));
        cursor: not-allowed;
        opacity: .65;
        transform: none;
        box-shadow: none;
    }

    /* Subtle variants (optional, non-breaking if unused) */
    [data-apf="common"] .apf-controls .apf-actions button[data-variant="ghost"],
    [data-apf="common"] .apf-controls button[data-variant="ghost"] {
        background: linear-gradient(180deg, hsl(220 8% 30% / .10), hsl(220 6% 24% / .08));
        color: var(--text-high);
        border: 1px solid var(--border, hsl(222 12% 20% / .75));
        box-shadow: 0 6px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
    }

        [data-apf="common"] .apf-controls .apf-actions button[data-variant="ghost"]:hover,
        [data-apf="common"] .apf-controls button[data-variant="ghost"]:hover {
            box-shadow: 0 12px 22px rgba(0,0,0,.3), 0 0 0 2px var(--focus-ring);
            transform: translateY(-1px);
        }

    [data-apf="common"] .apf-controls .apf-actions button[data-variant="outline"],
    [data-apf="common"] .apf-controls button[data-variant="outline"] {
        background: transparent;
        color: var(--text-high);
        border: 1px solid color-mix(in oklch, var(--ctl-c2, #8c64ff) 40%, #ffffff22);
    }

        [data-apf="common"] .apf-controls .apf-actions button[data-variant="outline"]:hover,
        [data-apf="common"] .apf-controls button[data-variant="outline"]:hover {
            background: linear-gradient(180deg, hsl(220 8% 30% / .10), hsl(220 6% 24% / .08));
        }

    /* Icon-leading spacing (if buttons have inline SVGs) */
    [data-apf="common"] .apf-controls .apf-actions button > svg:first-child,
    [data-apf="common"] .apf-controls button[type="button"] > svg:first-child,
    [data-apf="common"] .apf-controls button[type="submit"] > svg:first-child {
        width: 1em;
        height: 1em;
        margin-right: .5em;
        flex: 0 0 auto;
        stroke-width: 1.5;
    }

    /* Loading state */
    [data-apf="common"] .apf-controls .apf-actions button[aria-busy="true"],
    [data-apf="common"] .apf-controls button[aria-busy="true"] {
        pointer-events: none;
        opacity: .8;
    }

        [data-apf="common"] .apf-controls .apf-actions button[aria-busy="true"]::before,
        [data-apf="common"] .apf-controls button[aria-busy="true"]::before {
            content: "";
            position: absolute;
            inset: 2px;
            border-radius: inherit;
            background: linear-gradient(135deg, transparent 0 40%, color-mix(in oklch, #fff 70%, var(--ctl-c2, #8c64ff)) 50%, transparent 60% 100%);
            opacity: .12;
            filter: blur(6px);
        }

        [data-apf="common"] .apf-controls .apf-actions button[aria-busy="true"]::after,
        [data-apf="common"] .apf-controls button[aria-busy="true"]::after {
            content: "";
            position: absolute;
            width: 1em;
            height: 1em;
            border-radius: 50%;
            border: 2px solid #fff3;
            border-top-color: #fff;
            right: .7rem;
            top: 50%;
            transform: translateY(-50%);
            animation: apf-spin 800ms linear infinite;
        }

@keyframes apf-spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}