/* A transparent gallery slot holds three real screenshots, like a small deck. */
.workspace-card--stack {
  position: relative;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  isolation: isolate;
}
.stack-deck {
  position: relative;
  display: grid;
  margin: 10% 9%;
}
.stack-slide {
  grid-area: 1 / 1;
  align-self: start;
  min-width: 0;
  border: 1px solid var(--gallery-card-border);
  border-radius: var(--radius-card);
  background: var(--gallery-card-fill);
  box-shadow: var(--stack-slide-shadow);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  transform-origin: center;
  transition: transform 360ms cubic-bezier(.22,1,.36,1);
}
.stack-slide[data-stack-depth="0"] { z-index: 3; transform: none; }
.stack-slide[data-stack-depth="1"] { z-index: 2; transform: translate(3px,-4px) rotate(4deg) scale(.985); }
.stack-slide[data-stack-depth="2"] { z-index: 1; transform: translate(-4px,6px) rotate(-4deg) scale(.97); }
.stack-slide img {
  display: block;
  width: 100%;
  height: auto;
}
@supports (corner-shape: squircle) {
  .stack-slide { border-radius: var(--gallery-card-radius); corner-shape: squircle; }
}
.stack-controls {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease-out;
}
.stack-controls[hidden] { display: none; }
.stack-control {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--stack-control-border);
  border-radius: var(--radius-pill);
  background: var(--stack-control-fill);
  color: var(--stack-control-color);
  box-shadow: var(--stack-control-shadow);
  cursor: pointer;
  pointer-events: none;
  transition: background-color 160ms ease-out, transform 160ms ease-out;
}
.stack-control img { display: block; width: 24px; height: 24px; }
.stack-control:hover { background: var(--stack-control-hover-fill); }
.stack-control:active { transform: scale(.94); }
.stack-control:focus-visible { outline: var(--stroke-focus) solid var(--color-focus); outline-offset: 3px; }
.workspace-card--stack:hover .stack-controls,
.workspace-card--stack:has(.stack-control:focus-visible) .stack-controls { opacity: 1; }
.workspace-card--stack:hover .stack-control,
.workspace-card--stack:has(.stack-control:focus-visible) .stack-control { pointer-events: auto; }
.stack-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
@media (max-width: 679px), (hover: none), (pointer: coarse) {
  .stack-controls { opacity: 1; }
  .stack-control { pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .stack-slide, .stack-controls, .stack-control { transition: none; }
}