/* Mobile Swipe and Physics
 * Cinematic scroll-snapping for badges and operator strips.
 */

@media (max-width: 700px) {
    .spec-strip,
    .frame-operators {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 0.5rem; /* Room for scrollbar if needed */
        scrollbar-width: none; /* Hide scrollbar in Firefox */
    }

    .spec-strip::-webkit-scrollbar,
    .frame-operators::-webkit-scrollbar {
        display: none; /* Hide scrollbar in Chrome/Safari */
    }

    .spec-pill,
    .operator-chip {
        scroll-snap-align: start;
        flex-shrink: 0;
    }

    /* Physics: add a bit of "weight" to the cards during swipe */
    .frame-card {
        scroll-snap-align: center;
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }
}

/* Enriched Code Block States */
.frame-code-enrichment {
    position: relative;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--token-bg);
    overflow: hidden;
    margin: 1rem 0;
}

.frame-code-enrichment:hover {
    border-color: var(--teal);
}

.frame-code-enrichment::after {
    content: 'spw-enriched';
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 6px;
    background: var(--teal);
    color: white;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}