/* The shared layout for Squesmos's studio sections (SAD, the Physics Simulator, Polygonometry, Squigtones):
   one command bar (the main action on the left, menus on the right), a build rail on the left, the selection's
   properties on the right. Each page brings its own colours (--blue, --border, …); this file only arranges. */
.cmdbar{display:flex;align-items:center;gap:6px;padding:6px 14px;border-bottom:1px solid var(--border);background:var(--surface);min-height:48px;flex-wrap:nowrap}
.cmdbar>*{flex-shrink:0}
.cmdbar .cgroup{display:flex;align-items:center;gap:6px}
.cmdbar .cdiv{width:1px;height:24px;background:var(--border);margin:0 6px}
.cmdbar .spacer{flex:1 1 auto;min-width:8px}
.cmdbar .clabel{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--fg3);margin-right:2px}

/* menus: a button that opens a list of actions, each with its shortcut */
.menu{position:relative}
.mbtn{display:inline-flex;align-items:center;gap:5px;border:1px solid transparent;background:none;border-radius:8px;padding:6px 10px;cursor:pointer;font-size:.84rem;font-weight:600;color:var(--fg2);white-space:nowrap}
.mbtn::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px;opacity:.6}
.mbtn:hover,.mbtn[aria-expanded="true"]{background:#fff;border-color:var(--border);color:var(--blue)}
.mlist{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 50px -12px rgba(15,23,42,.35),0 4px 14px rgba(15,23,42,.10);padding:6px;z-index:60;display:flex;flex-direction:column;gap:1px;max-height:min(70vh,560px);overflow-y:auto}
.mlist.right{left:auto;right:0}
.mlist[hidden]{display:none}
.mlist button,.mlist label{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:7px 10px;border:0;background:none;border-radius:8px;font:inherit;font-size:.84rem;color:var(--fg);cursor:pointer;white-space:nowrap}
.mlist button:hover:not(:disabled),.mlist label:hover{background:var(--blue-tint);color:var(--blue)}
.mlist button:disabled{opacity:.4;cursor:default}
.mlist .mkey{margin-left:auto;padding-left:18px;font:.72rem var(--mono,monospace);color:var(--fg4)}
.mlist hr{border:0;border-top:1px solid var(--border);margin:4px 2px}
.mlist .mcap{font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3);padding:7px 10px 3px}
.mlist input[type=checkbox]{margin:0}
.mlist button[aria-pressed="true"]{color:var(--blue);font-weight:650}
.mlist button[aria-pressed="true"]::after{content:"✓";margin-left:auto;padding-left:14px}

/* a titled section inside a side panel */
.psec{display:flex;flex-direction:column;gap:7px}
.psec>.ptitle{font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--fg3)}

/* mid-size screens (tablets, narrow windows): the command bar wraps onto a second line rather than running off the side */
@media (min-width:761px) and (max-width:1180px){
  .cmdbar{flex-wrap:wrap;row-gap:6px}
}
/* phones: the command bar becomes one row you swipe sideways; menus open as sheets from the bottom */
@media (max-width:760px){
  .cmdbar{overflow-x:auto;scrollbar-width:none;padding:6px 10px}
  .cmdbar::-webkit-scrollbar{display:none}
  .mlist{position:fixed;left:8px !important;right:8px !important;top:auto;bottom:8px;min-width:0;max-height:60vh}
}