/* =========================================================
   v1.20 — Motion System v1 + compact CNT-5
   Motion communicates state/continuity; decoration stays quiet.
   ========================================================= */
:root{
  --motion-instant:70ms;
  --motion-fast:110ms;
  --motion-small:150ms;
  --motion-medium:220ms;
  --motion-large:320ms;
  --motion-emphasis:400ms;
  --ease-standard:cubic-bezier(.2,0,.38,.9);
  --ease-enter:cubic-bezier(0,0,.38,.9);
  --ease-exit:cubic-bezier(.2,0,1,.9);
  --ease-emphasis:cubic-bezier(.2,.8,.2,1);
}

/* Shared interaction grammar. Keep frequent animation to compositor-friendly properties. */
button,[role="button"],.nav-item,.panel,.metric,.account-card,.platform-card,.mail-thread-v118,
.stage-rail button,.bundle-component-v112,.output-card,.review-item,.action-item,.filter,.cnt-chip{
  transition:
    transform var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard),
    border-color var(--motion-small) var(--ease-standard),
    background-color var(--motion-small) var(--ease-standard),
    color var(--motion-small) var(--ease-standard),
    box-shadow var(--motion-small) var(--ease-standard);
}
button:not(:disabled):active,[role="button"]:active{transform:translateY(1px) scale(.995)}
button:disabled{cursor:not-allowed}
:focus-visible{transition:outline-color var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard)}
.page.active{animation:cf-page-enter-v120 var(--motion-medium) var(--ease-enter)}
.drawer.open{animation:cf-layer-enter-v120 var(--motion-medium) var(--ease-enter)}
.toast-msg{animation:cf-toast-enter-v120 var(--motion-medium) var(--ease-enter)}

@keyframes cf-page-enter-v120{from{opacity:.58;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes cf-layer-enter-v120{from{opacity:0;transform:translateY(-5px) scale(.992)}to{opacity:1;transform:none}}
@keyframes cf-toast-enter-v120{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes cf-state-spin-v120{to{transform:rotate(360deg)}}
@keyframes cf-state-breathe-v120{0%,100%{opacity:.42;transform:scale(.82)}50%{opacity:1;transform:scale(1)}}
@keyframes cf-state-shimmer-v120{from{transform:translateX(-115%)}to{transform:translateX(115%)}}
@keyframes cf-confirm-v120{0%{opacity:0;transform:scale(.72)}65%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes cf-highlight-v120{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.22)}100%{box-shadow:0 0 0 8px rgba(var(--accent-rgb),0)}}

/* Generic state motion. Apply only while a real/local prototype state is active. */
[data-motion-state-v120]{position:relative}
button[data-motion-state-v120]{display:inline-flex;align-items:center;justify-content:center;gap:6px}
button[data-motion-state-v120]::before{
  content:"";width:11px;height:11px;flex:0 0 11px;border-radius:50%;box-sizing:border-box
}
button[data-motion-state-v120="waiting"]::before{
  background:var(--warn);animation:cf-state-breathe-v120 1.25s ease-in-out infinite
}
button[data-motion-state-v120="processing"]::before,
button[data-motion-state-v120="saving"]::before,
button[data-motion-state-v120="syncing"]::before{
  border:1.5px solid color-mix(in srgb,currentColor 28%,transparent);border-top-color:currentColor;
  animation:cf-state-spin-v120 .72s linear infinite
}
button[data-motion-state-v120="success"]::before{
  content:"✓";border:0;width:auto;height:auto;border-radius:0;color:var(--good);font-weight:800;
  animation:cf-confirm-v120 var(--motion-medium) var(--ease-emphasis)
}
button[data-motion-state-v120="error"]::before{content:"!";border:0;width:auto;height:auto;border-radius:0;color:var(--bad);font-weight:850}
.motion-highlight-v120{animation:cf-highlight-v120 var(--motion-large) var(--ease-exit)}

/* Small operational state dots. Only active work loops. */
.state-dot-v120{width:7px;height:7px;border-radius:50%;background:var(--text-faint);display:inline-block;flex:0 0 auto}
.state-dot-v120.ready{background:var(--good)}
.state-dot-v120.waiting{background:var(--warn);animation:cf-state-breathe-v120 1.25s ease-in-out infinite}
.state-dot-v120.processing{background:var(--accent);animation:cf-state-breathe-v120 .92s ease-in-out infinite}
.state-dot-v120.error{background:var(--bad)}

/* Selected/current states get continuity, never a large bounce. */
.bundle-component-compact-v120.active,.mail-thread-v118[aria-pressed="true"],.stage-rail button.active{
  transform:translateY(-1px)
}

/* CNT-5 compact package shell. */
.media-bundle-compact-v120{padding:8px!important;display:grid;grid-template-columns:minmax(0,1fr);gap:7px;min-width:0;overflow:hidden}
.bundle-summary-v120{display:flex;align-items:center;gap:10px;min-width:0;width:100%;max-width:100%}
.bundle-id-v120{display:flex;align-items:center;gap:8px;min-width:0;flex:1}.bundle-id-v120>div{min-width:0}
.bundle-id-v120>span{
  height:30px;min-width:46px;padding:0 7px;border-radius:8px;border:1px solid rgba(var(--accent-rgb),.28);
  background:rgba(var(--accent-rgb),.07);color:var(--accent);font-size:9.5px;font-weight:800;display:grid;place-items:center
}
.bundle-id-v120 b{display:block;font-size:11px}.bundle-id-v120 small{display:block;color:var(--text-muted);font-size:8.6px;margin-top:1px}
.bundle-summary-actions-v120{margin-left:auto;display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.bundle-summary-actions-v120 .bundle-readiness-v112{height:25px}
.bundle-components-compact-v120{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important;min-width:0;width:100%;max-width:100%}
.bundle-component-compact-v120{
  appearance:none;width:100%;min-height:43px;border:1px solid var(--stroke-subtle);border-radius:8px;background:var(--surface-inset);
  display:grid;grid-template-columns:22px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:6px;row-gap:0;
  align-items:center;text-align:left;padding:6px 7px;color:var(--text-secondary);cursor:pointer
}
.bundle-component-compact-v120:hover{border-color:var(--stroke-default);background:var(--surface-hover);transform:translateY(-1px)}
.bundle-component-compact-v120.active{border-color:rgba(var(--accent-rgb),.42);background:rgba(var(--accent-rgb),.065);box-shadow:inset 0 -2px 0 rgba(var(--accent-rgb),.42)}
.bundle-component-icon-v120{grid-row:1/-1;width:22px;height:22px;border-radius:6px;border:1px solid var(--stroke-subtle);display:grid;place-items:center;color:var(--accent);font-size:9px}
.bundle-component-compact-v120 b{font-size:9.7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bundle-component-compact-v120 strong{font-size:9px;justify-self:end}
.bundle-component-compact-v120 small{grid-column:2/-1;font-size:7.8px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bundle-handoff-compact-v120{
  min-width:0;width:100%;max-width:100%;display:flex;align-items:center;gap:8px;padding:6px 7px;border:1px solid var(--stroke-subtle);border-radius:8px;background:var(--surface-primary)
}
.bundle-handoff-status-v120{display:flex;align-items:center;gap:7px;min-width:0}.bundle-handoff-status-v120>div{min-width:0}
.bundle-handoff-status-v120 b{display:block;font-size:9.7px}.bundle-handoff-status-v120 small{display:block;color:var(--text-muted);font-size:8.1px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bundle-handoff-compact-v120>.toolset{margin-left:auto;flex:0 0 auto;display:flex;gap:4px}
.bundle-details-v120{
  min-width:0;width:100%;max-width:100%;border:1px solid var(--stroke-subtle);border-radius:9px;background:var(--surface-inset);padding:9px;transform-origin:top center
}
.bundle-details-head-v120{display:flex;align-items:flex-start;gap:8px;margin-bottom:7px}.bundle-details-head-v120>div{min-width:0}.bundle-details-head-v120 b{font-size:10.5px}.bundle-details-head-v120 p{font-size:8.8px;color:var(--text-muted);margin:2px 0 0}.bundle-details-head-v120 .btn{margin-left:auto}
.bundle-details-grid-v120{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:7px}
.bundle-details-grid-v120 section{border:1px solid var(--stroke-subtle);border-radius:7px;background:var(--surface-primary);padding:7px;min-width:0}
.bundle-details-grid-v120 header{display:flex;align-items:center;gap:5px}.bundle-details-grid-v120 header span{color:var(--accent);font-size:8px}.bundle-details-grid-v120 header b{font-size:9.3px}.bundle-details-grid-v120 p{font-size:8.3px;color:var(--text-muted);line-height:1.38;margin:4px 0}.bundle-details-grid-v120 small{font-size:7.8px;color:var(--text-faint)}
.bundle-detail-handoff-v120{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:7px;align-items:center;margin-top:7px;padding-top:7px;border-top:1px solid var(--stroke-subtle)}
.bundle-detail-handoff-v120>span{width:23px;height:23px;border:1px solid var(--stroke-subtle);border-radius:6px;display:grid;place-items:center;color:var(--accent)}
.bundle-detail-handoff-v120 b{font-size:9.5px}.bundle-detail-handoff-v120 p{font-size:8.3px;line-height:1.4;color:var(--text-muted);margin:2px 0 0}

/* Tiny visual continuity for tabs/rails without layout-heavy animation. */
.studio-tabs button.active,.publish-tabs button.active,.analyze-tabs button.active,.radar-tabs button.active,.inspector-tabs button.active{
  text-shadow:0 0 14px rgba(var(--accent-rgb),.18)
}

/* Skeleton utility for future/content-local loading. */
.skeleton-v120{position:relative;overflow:hidden;background:var(--surface-secondary);color:transparent!important;border-radius:6px}
.skeleton-v120::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);animation:cf-state-shimmer-v120 1.35s linear infinite}

@media(max-width:900px){
  .bundle-summary-v120{align-items:flex-start;flex-wrap:wrap}.bundle-summary-actions-v120{width:100%;margin-left:0;justify-content:flex-start}
  .bundle-details-grid-v120{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  #studio-production .production-shell{grid-template-columns:minmax(0,1fr)!important;min-width:0!important;width:100%!important;overflow:hidden}
  #studio-production .production-shell>*{min-width:0!important;max-width:100%!important}
  #studio-production .production-commandbar,#studio-production .mobile-edit-stack{overflow-x:auto!important;overflow-y:hidden!important}
  #studio-production .production-bench.active{min-width:0!important;max-width:100%!important;overflow:hidden}
  .media-bundle-compact-v120{padding:7px!important}
  .bundle-components-compact-v120{grid-template-columns:1fr 1fr!important}
  .bundle-component-compact-v120{min-height:42px}
  .bundle-handoff-compact-v120{align-items:flex-start;flex-wrap:wrap}
  .bundle-handoff-compact-v120>.toolset{width:100%;margin-left:14px;display:grid!important;grid-template-columns:1fr 1fr}
  .bundle-handoff-compact-v120>.toolset .btn{width:100%}
  .bundle-details-grid-v120{grid-template-columns:1fr}
  .bundle-detail-handoff-v120{grid-template-columns:24px minmax(0,1fr)}
  .bundle-detail-handoff-v120 .btn{grid-column:1/-1;justify-self:end}
  .bundle-id-v120 small{max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

@media(prefers-reduced-motion:reduce){
  .state-dot-v120.waiting,.state-dot-v120.processing,
  button[data-motion-state-v120]::before,.skeleton-v120::after{animation:none!important}
  .bundle-component-compact-v120.active,.mail-thread-v118[aria-pressed="true"],.stage-rail button.active{transform:none!important}
}