/* Temporary viewing layer only. Original semantic anchors remain untouched. */

#groupLayer{position:absolute;inset:0;z-index:2100;pointer-events:none;cursor:default}
#groupVeil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,#fffdf628 0,#f8f6f11c 52%,transparent 85%)}
#groupThreads{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;opacity:1;transition:opacity 220ms}
#groupThreads line{stroke:#796786;stroke-width:.8;stroke-opacity:.21;vector-effect:non-scaling-stroke;stroke-linecap:round}
#groupCards{position:absolute;inset:0;pointer-events:none}
#groupCards .groupCard{position:absolute;display:block;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:2px;background:transparent;transform:translate(-50%,-50%);pointer-events:auto;cursor:zoom-in;touch-action:manipulation;transition:left 480ms cubic-bezier(.22,.74,.2,1),top 480ms cubic-bezier(.22,.74,.2,1),width 480ms cubic-bezier(.22,.74,.2,1),height 480ms cubic-bezier(.22,.74,.2,1),opacity 220ms ease;will-change:left,top,width,height;isolation:isolate}
#groupCards .groupCard:hover{background:transparent}
#groupCards .groupCard:disabled{opacity:1;cursor:default}
.groupCard::before{content:"";position:absolute;inset:12% 3% 3%;z-index:-1;background:radial-gradient(ellipse,#fffdf68c,transparent 72%);pointer-events:none}
.groupCard img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 12px 11px #453c4f26);transition:filter 220ms;user-select:none;-webkit-user-drag:none}
.groupCard:hover img,.groupCard:focus-visible img{filter:drop-shadow(0 15px 14px #453c4f38)}
#groupCards .groupCard:focus-visible{outline:2px solid #826591;outline-offset:6px;border-radius:2px}
.groupCaption{position:absolute;left:0;right:0;bottom:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:calc(2.6em + 21px);margin:0;padding:16px 6px 5px;background:linear-gradient(transparent,#fffdf4ed 48%,#fffdf7f7);color:#423447;text-align:center;font-size:11px;line-height:1.3;font-weight:400;opacity:0;pointer-events:none;transition:opacity 150ms}
.groupCard:hover .groupCaption,.groupCard:focus-visible .groupCaption{opacity:1}
#groupCards .groupCard.muted{opacity:.16;pointer-events:none}
#groupCards .groupCard.selected{z-index:2;cursor:default}

#groupBar{position:absolute;top:0;left:12px;right:12px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:21px 23px;column-gap:12px;align-items:center;height:56px;max-height:56px;padding:6px 0;pointer-events:auto;color:#574961;cursor:default;transition:opacity 180ms}
#closeGroup{grid-column:2;grid-row:1 / 3;align-self:center;min-height:44px;padding:8px 13px;border:1px solid #cbbfd28c;background:#faf9f3b8;box-shadow:0 3px 16px #4b385508;border-radius:24px;font-size:11px;white-space:nowrap;color:#57435f}
#closeGroup:hover{background:#fffef9;border-color:#9f89ac}
#closeGroup:focus-visible{outline-color:#785d8a;outline-offset:2px}

#stage.group-expanded{cursor:default}
#stage.group-expanded #medium{opacity:.16}
#stage.group-expanded #points,#stage.group-expanded #points .point{pointer-events:none}
#stage.group-moving #groupCards .groupCard,#stage.group-moving #groupBar{pointer-events:none}
#stage.group-moving .groupCaption{opacity:0}
#stage.group-expanded.inspecting #groupBar,#stage.group-expanded.inspecting #groupThreads{visibility:hidden;opacity:0;pointer-events:none}
#stage.group-expanded.inspecting #groupCards .groupCard:not(.selected){opacity:0;pointer-events:none}
#stage.group-expanded.inspecting #groupCards .groupCard.selected{pointer-events:none}
#stage.group-expanded.inspecting .groupCaption{opacity:0}

@media(max-width:520px){
  #groupBar{left:9px;right:9px;column-gap:7px}
  #closeGroup{padding:7px 10px;font-size:10px}
  .groupCaption{font-size:10px;padding-left:4px;padding-right:4px}
}
@media(max-width:380px){
  #groupBar{column-gap:5px}
  #closeGroup{padding:7px 8px}
}
@media(prefers-reduced-motion:reduce){
  #groupCards .groupCard,.groupCard img,.groupCaption,#groupThreads,#groupBar{transition:none!important}
}
#stage[data-reduced-motion=true] #groupCards .groupCard,#stage[data-reduced-motion=true] .groupCard img,#stage[data-reduced-motion=true] .groupCaption,#stage[data-reduced-motion=true] #groupThreads,#stage[data-reduced-motion=true] #groupBar{transition:none!important}
