/* Change B (docs/design/liner-mobile-lock/README.md "Status row open and close"): the status row always lives in
   a grid wrapper that slides open (1fr) and closed (0fr); nothing pops. The inner keeps min-height 0 and clips
   overflow so the row can collapse. Reduced motion lifts every transition below. */

.sync-status-slot{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1) 1.5s,opacity .4s ease 1.5s}
.sync-status-slot[data-open="true"]{grid-template-rows:1fr;opacity:1;transition-delay:0s,.12s}
/* The plain clip carries min-height:0 and overflow:hidden so the grid item can collapse past the section's
   padding, border and margin. The section keeps its own box (padding/margin/border), now inside the clip. */
.sync-status-clip{min-height:0;overflow:hidden}
/* The inner padding gains 6px so the primary button's 3px press lip is not clipped by the overflow. */
.sync-status-slot .sync-status{padding-bottom:6px}
@media (max-width:719px),(max-height:559.98px){.sync-status-slot .sync-status{padding-bottom:22px}}
/* The closed row adds no box of its own (0fr, no margin), so the card's padding is the gap under the playhead
   whether the row is open or closed (CJ 2026-10-09). */

/* The title warms to red as the line locks (red when synced). */
.sync-title{transition:color .4s ease}
.sync-status[data-state="synced"] .sync-title{color:var(--lr-red)}

@media (prefers-reduced-motion: reduce){.sync-status-slot,.sync-status-clip,.sync-title{transition:none}.sync-status-slot{transition-delay:0s}}