/* ===========================================================================
   LAB STACK — one shared corner for the small preview pickers (Consultation
   Copy, About Lab) and the Theme Lab's re-open button, so none of them ever
   sits on top of another or under the Theme Lab panel. lab-stack.js moves the
   whole stack out of the Theme Lab's way wherever that panel is dragged,
   docked or resized. Remove with the labs: nothing on the site depends on it.
   =========================================================================== */
.lab-stack{position:fixed;left:0;top:0;z-index:9001;display:flex;flex-direction:column;align-items:flex-end;
  gap:8px;pointer-events:none;max-width:calc(100vw - 24px);
  transition:transform .2s ease;will-change:transform;}
.lab-stack[data-side="left"]{align-items:flex-start;}
.lab-stack > *{pointer-events:auto;}
.lab-stack .cl-dock,.lab-stack .al-dock,.lab-stack .tl-pill{position:static;left:auto;right:auto;top:auto;bottom:auto;}
.lab-stack .cl-dock{width:230px;max-width:100%;}
.lab-stack .al-dock{min-width:0;width:200px;max-width:100%;}
.lab-stack .cl-list{max-height:var(--lab-list-max,min(60vh,420px));}
/* phone: the About Lab folds to a two-by-two of names so it and the Theme Lab
   leave the page readable */
@media (max-width:640px){
  .lab-stack .al-dock{width:min(100%,250px);flex-direction:row;flex-wrap:wrap;padding:8px;}
  .lab-stack .al-dock-label{flex:1 0 100%;}
  .lab-stack .al-chip{flex:1 1 calc(50% - 3px);padding:6px 8px;}
  .lab-stack .al-chip small{display:none;}
}
@media (prefers-reduced-motion:reduce){ .lab-stack{transition:none;} }