.semantic-frame-control {
    position: relative;
    isolation: isolate;
}

/* A child-image family (the points coin) is clipped to that exact icon box.
   Portrait variants clip only the actual image, preserving static badges
   outside the round crop. Both are authored PNG sprites, not CSS motion. */
.semantic-frame-control[data-frame-render-mode="live-child-image"] {
    overflow: hidden;
}

.semantic-frame-control[data-frame-render-mode="authored-live-variant"] > [data-frame-live-clip] {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    line-height: 0;
}

/* Product portraits often declare `transition: all`.  Visibility is a
   discrete property, so allowing it into that transition keeps the native
   image hidden for an extra beat after the authored sequence releases it.
   Restrict transitions to genuinely visual continuous properties so the
   exact source image is restored on the same frame as the canvas clears. */
.semantic-frame-control[data-frame-render-mode="authored-live-variant"] > [data-frame-live-clip] > img,
.semantic-frame-control[data-frame-render-mode="live-child-image"] > img {
    transition-property: transform, border-color, box-shadow, filter, opacity !important;
}

.semantic-frame-host {
    position: relative;
    isolation: isolate;
}

.semantic-frame-visual,
.semantic-frame-panel-visual {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    opacity: 0;
    user-select: none;
    object-fit: fill;
    transform: translateZ(0);
    contain: paint;
}

/* Product styles such as `.quick-btn span { position: relative; }` must not
   turn the runtime visual into an in-flow child and recursively grow cards. */
.semantic-frame-control > .semantic-frame-visual,
.semantic-frame-host > .semantic-frame-visual,
.semantic-frame-panel > .semantic-frame-panel-visual {
    position: absolute !important;
}

.semantic-frame-exact {
    background-position: center;
    background-size: 100% 100%;
}

.semantic-frame-nine-slice {
    box-sizing: border-box;
    border: 1px solid transparent;
    border-image-repeat: stretch;
    border-image-outset: 0;
}

.semantic-frame-input-visual {
    inset: auto;
}

.semantic-frame-playing > .semantic-frame-visual,
.semantic-frame-playing + .semantic-frame-visual,
.semantic-frame-visual.semantic-frame-playing,
.semantic-frame-panel-visual.semantic-frame-playing {
    opacity: 1;
}

.semantic-frame-panel {
    position: relative;
    isolation: isolate;
}

.semantic-frame-panel > .semantic-frame-panel-visual {
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

/* Full-body frame families temporarily own their exact static component
   source. Dynamic-safe shell families intentionally leave live DOM content
   visible and therefore never match these selectors. */
.semantic-frame-control[data-frame-render-mode="full-body"] {
    /* `transition: all` must not fade native text back in after the baked
       surface releases it. Keep authored hover/geometry transitions only. */
    transition-property: transform, background, border-color, border-radius,
        box-shadow, opacity, filter, width, height, min-width, min-height,
        max-width, max-height, padding, margin, left, right, top, bottom !important;
}

.semantic-frame-control[data-frame-render-mode="full-body"].semantic-frame-playing {
    /* The authored frame owns the complete visible carrier while it plays.
       Leaving the native background/image/border underneath a transparent
       frame produces a second static object and obvious ghosting. */
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    text-shadow: none !important;
}

/* Dynamic Call/Check/amount text remains live while authored frames alone own
   the button carrier. This is not an overlay: the native material is removed
   for the playback interval and only the real text stays above the canvas. */
.semantic-frame-control[data-frame-render-mode="live-label-body"][data-frame-carrier-ownership="replace"].semantic-frame-playing {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.semantic-frame-control[data-frame-render-mode="live-label-body"] > [data-frame-live-content] {
    display: inline-block;
    position: relative;
    z-index: 5;
}

/* The native input remains the single state authority for checkboxes. The
   frame canvas is transparent except for a component-shaped trace, so focus,
   checked state and system rendering never compete with a second raster body. */
.semantic-frame-control[data-frame-render-mode="native-control-overlay"] {
    isolation: isolate;
}

.semantic-frame-control[data-frame-render-mode="native-control-overlay"] + [data-frame-surface],
.semantic-frame-control[data-frame-render-mode="native-control-overlay"] > [data-frame-surface] {
    pointer-events: none !important;
}

/* Exact current-image variants replace only the picture they were authored
   from. The profile badge and points balance remain stable and sharp. */
.semantic-frame-control[data-frame-render-mode="authored-live-variant"].semantic-frame-playing > [data-frame-live-clip] > img,
.semantic-frame-control[data-frame-render-mode="live-child-image"].semantic-frame-playing > img,
.semantic-frame-control[data-frame-render-mode="live-child-image"].semantic-frame-playing > [data-frame-live-actor] {
    visibility: hidden !important;
}

/* Bottom HUD animation owns only the icon image. Its label remains native and
   stable, so a square icon sequence is never stretched across the full nav
   cell and the text never disappears during feedback. */
.semantic-frame-control[data-frame-render-mode="nav-icon-body"].semantic-frame-playing [data-button-frame-image] {
    visibility: hidden !important;
}

.semantic-frame-control[data-frame-render-mode="full-body"].semantic-frame-playing > :not(.semantic-frame-visual) {
    visibility: hidden !important;
}

/* The invisible native checkbox still owns keyboard focus and state while
   its authored carrier plays. Hiding it would drop focus after Space. */
.semantic-frame-control.reference-setting-toggle[data-frame-render-mode="full-body"].semantic-frame-playing > input[type="checkbox"] {
    visibility: visible !important;
}

.semantic-frame-control[data-frame-render-mode="full-body"].semantic-frame-playing::before,
.semantic-frame-control[data-frame-render-mode="full-body"].semantic-frame-playing::after {
    opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    .semantic-frame-visual,
    .semantic-frame-panel-visual {
        display: none !important;
    }
}