/* Shared 420x294 workshop face at exactly half size; CSS only arranges it. */
#libraryGrid{display:flex;gap:0;align-items:flex-end;overflow-x:auto;overflow-y:hidden;position:relative;padding:8px 4px 12px;min-height:172px;touch-action:pan-y pinch-zoom;overscroll-behavior-x:contain;scrollbar-width:none}
#libraryGrid::-webkit-scrollbar{display:none}
#libraryGrid>.library-empty{flex:1;min-width:100%;min-height:147px}
#libraryGrid .drawer-cartridge{flex:0 0 36px;width:36px;height:151px;position:relative;border:0;border-radius:0;padding:0;margin:0;background:transparent;overflow:hidden;text-align:left;isolation:isolate;transform:none;box-shadow:none}
#libraryGrid .drawer-cartridge.expanded{flex-basis:210px;width:210px}
#libraryGrid .drawer-face{display:block;position:absolute;left:0;top:0;width:210px;height:147px;image-rendering:pixelated;clip-path:polygon(0 0,74% 0,80% 5.4%,100% 5.4%,100% 100%,0 100%);pointer-events:none}
#libraryGrid .drawer-cartridge:focus-visible{outline:2px solid #586f50;outline-offset:-2px}
.drawer-title{font-family:Exqt,Mona12,monospace;font-size:12px;line-height:24px;min-height:24px;margin:8px 0 0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#41483e}
.drawer-title[hidden]{display:none}
#libraryGrid .drawer-cartridge{overflow:visible;isolation:auto}
.drawer-controls{display:flex;justify-content:center;align-items:center;gap:8px;margin:0;width:round(down,100%,2px)}
.drawer-controls[hidden]{display:none}
.drawer-controls button:first-child,.drawer-controls button:last-child{min-width:36px;min-height:36px}
.drawer-position{min-width:64px;text-align:center;font:400 12px/24px Exqt,MonaEmoji,Mona12,monospace;color:#41483e}
.drawer-info{text-align:center;width:round(down,100%,2px)}.drawer-info[hidden],.drawer-actions[hidden]{display:none}
.drawer-description{font:400 12px/24px Exqt,MonaEmoji,Mona12,monospace;color:#565d54;word-break:keep-all;overflow-wrap:anywhere;max-height:72px;overflow:hidden;margin:0 auto;max-width:420px;white-space:pre-wrap}
.drawer-description.expanded{max-height:none}
.drawer-description-toggle{display:block;margin:0 auto;padding:0 8px;min-height:24px;border:0;background:none;color:#536579;text-decoration:underline;font:400 12px/24px Exqt,MonaEmoji,Mona12,monospace}
.drawer-description-toggle[hidden]{display:none}
.drawer-actions{display:flex;justify-content:center;align-items:center;margin:12px 0 0;padding-top:10px;border-top:1px solid #c7bfbd}
.drawer-actions .smallbutton{min-height:36px}

/* Edge room lets the first and last cards share the same selection position. */
#libraryGrid::before,#libraryGrid::after{content:'';flex:0 0 var(--drawer-edge,0px);height:1px;pointer-events:none}

/* Keep the selected label at its approved size; recess neighbouring covers. */
#libraryGrid .drawer-cartridge:not(.expanded) .drawer-face{width:180px;height:126px;top:24px}
#libraryGrid .drawer-cartridge:not(.expanded){pointer-events:none}
#libraryGrid .drawer-cartridge.expanded{z-index:2}

/* Stack both sides behind the selection, revealing equal 36px outer edges. */
#libraryGrid .after-selected .drawer-face{left:auto;right:0}

/* Empty drawers have no carousel spacers or horizontal scrolling. */
#libraryGrid.is-empty{overflow-x:hidden;align-items:center;justify-content:center}
#libraryGrid.is-empty::before,#libraryGrid.is-empty::after{content:none}
#libraryGrid.is-empty>.library-empty{flex:1 1 100%;width:100%;min-width:0}