/* Test panel for motion sets (src/motion-sets-ui.js, only with ?motions=1) */
.motion-sets-toggle{position:fixed;right:12px;top:226px;z-index:950;padding:8px 12px;border:1px solid #c9a35a;border-radius:8px;background:#2b2418e6;color:#f3e3bd;font:600 14px 'Noto Sans Thai',sans-serif;cursor:pointer}
.motion-sets-toggle[aria-expanded="true"]{background:#5a4320}
.motion-sets-panel{position:fixed;right:12px;top:268px;z-index:950;box-sizing:border-box;width:min(440px,calc(100vw - 24px));max-height:calc(100vh - 290px);min-height:220px;display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid #c9a35a;border-radius:10px;background:#1e1a12f2;color:#f3e3bd;font:13px/1.45 'Noto Sans Thai',sans-serif;box-shadow:0 8px 24px #0008}
.motion-sets-panel[hidden]{display:none}
.motion-sets-head{display:flex;align-items:center;justify-content:space-between;font-size:15px;flex:none}
.motion-sets-close{width:32px;height:32px;border:0;border-radius:6px;background:transparent;color:#f3e3bd;font-size:20px;cursor:pointer}
.motion-sets-tabs{position:relative;display:flex;flex-wrap:wrap;gap:4px;flex:none;max-height:124px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.motion-sets-tab{padding:3px 8px;border:1px solid #6d5a36;border-radius:6px;background:#2b2418;color:#e9d7ad;cursor:pointer;font:12px/1.4 'Noto Sans Thai',sans-serif;white-space:nowrap}
.motion-sets-tab:hover,.motion-sets-tab:focus-visible{border-color:#c9a35a;outline:none}
.motion-sets-tab[aria-pressed="true"]{background:#c9a35a;color:#1e1a12;border-color:#c9a35a}
.motion-sets-note{margin:0;color:#d8c08a;font-size:12px;flex:none}
.motion-sets-moves{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));align-content:start;gap:4px;overflow:auto;overscroll-behavior:contain;min-height:60px;flex:1 1 auto}
.motion-sets-group{grid-column:1/-1;margin:6px 0 0;padding:0 2px 2px;border-bottom:1px solid #4d4128;color:#c9a35a;font:600 12px/1.4 'Noto Sans Thai',sans-serif}
.motion-sets-group:first-child{margin-top:0}
.motion-sets-move{padding:5px 6px;border:1px solid #4d4128;border-radius:6px;background:#2f281b;color:#f3e3bd;text-align:left;cursor:pointer;font:inherit;font-size:12px;overflow-wrap:anywhere}
.motion-sets-move:hover,.motion-sets-move:focus-visible{border-color:#c9a35a;outline:none}
.motion-sets-foot{display:flex;align-items:center;gap:8px;flex:none}
.motion-sets-stop{flex:none;padding:5px 12px;border:1px solid #a05a4a;border-radius:6px;background:#3a1f19;color:#f6d3c8;cursor:pointer;font:inherit}
.motion-sets-status{margin:0;color:#b9a77d;font-size:12px;min-width:0}
/* short screens (phone landscape): the open panel uses the full height, the tabs become one scrolling row */
@media (max-height:620px){
 .motion-sets-panel{top:8px;bottom:auto;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);min-height:0;width:min(360px,calc(100vw - 24px));padding:8px 10px;gap:4px}
 .motion-sets-head{font-size:13px}.motion-sets-close{width:28px;height:28px}
 .motion-sets-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-height:none;padding-bottom:2px}
 .motion-sets-moves{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}