/* A compact card deck; the existing glass theme remains the source of color. */
.wb-stack-toggle {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border: 1px solid rgba(100, 116, 139, .2);
  border-radius: 999px;
  color: #64748b;
  background: rgba(255, 255, 255, .45);
  font-size: 14px;
  line-height: 20px;
}
.wb-stack-toggle[aria-pressed="true"] {
  color: #334155;
  background: rgba(100, 116, 139, .12);
}
.dark .wb-stack-toggle {
  color: rgba(226, 230, 236, .64);
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .08);
}
.dark .wb-stack-toggle[aria-pressed="true"] {
  color: rgba(245, 247, 250, .9);
  background: rgba(255, 255, 255, .085);
}
.wb-stack-toggle:focus-visible,
#main-view .wb-task-card:focus-visible {
  outline: 2px solid #94a3b8;
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .wb-stack-toggle { display: inline-flex; }

  #main-view .wb-stack-ready {
    --wb-stack-peek: 64px;
    position: relative;
    isolation: isolate;
    overflow-anchor: none;
    scrollbar-width: none;
  }
  #main-view .wb-stack-ready::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  /* Fixed breathing room prevents the scrollbar from jumping on every hover. */
  #main-view .wb-stack-ready::after {
    content: "";
    display: block;
    height: var(--wb-stack-height, 0px);
    pointer-events: none;
  }
  #main-view .wb-stack-ready > .wb-stack-item {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    height: var(--wb-stack-card-height, auto);
    min-height: 64px;
    margin: 0 !important;
    padding: 12px 10px;
    border-radius: 11px;
    transform: translate3d(0, var(--wb-stack-y, 0px), 0);
    clip-path: inset(0 0 calc(100% - var(--wb-stack-peek)) 0 round 11px);
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    animation: none;
    transition: transform 300ms cubic-bezier(.22, .72, .18, 1),
      clip-path 240ms cubic-bezier(.22, .72, .18, 1);
  }
  #main-view .wb-stack-ready > .wb-stack-item:not(.is-stack-open) .wb-card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #main-view .wb-stack-ready > .wb-stack-item .remark-card,
  #main-view .wb-stack-ready > .wb-stack-item .wb-card-divider {
    opacity: 0;
    transition: opacity 140ms ease;
  }
  #main-view .wb-stack-ready > .is-stack-open {
    clip-path: inset(0 0 0 0 round 11px);
    border-color: rgba(100, 116, 139, .3) !important;
  }
  #main-view .wb-stack-ready > .is-stack-open .remark-card,
  #main-view .wb-stack-ready > .is-stack-open .wb-card-divider {
    opacity: 1;
    transition-delay: 45ms;
  }
  .dark #main-view .wb-stack-ready > .is-stack-open {
    border-color: rgba(255, 255, 255, .13) !important;
    background: linear-gradient(155deg, rgba(255, 255, 255, .065), transparent),
      rgba(32, 33, 37, .8) !important;
  }
  #main-view .wb-stack-ready.wb-stack-measuring > .wb-stack-item {
    height: auto;
    transition: none;
  }
  #main-view .wb-stack-ready.wb-stack-measuring .wb-card-title {
    white-space: normal;
    overflow: visible;
  }
  #main-view .wb-stack-ready.wb-stack-frozen > .wb-stack-item {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-view .wb-stack-ready > .wb-stack-item,
  #main-view .wb-stack-ready > .wb-stack-item .remark-card,
  #main-view .wb-stack-ready > .wb-stack-item .wb-card-divider {
    transition: none;
  }
}