/* =========================================================
   mbrd - the sticker pad (ui/sticker-window.ts)

   A shelf of shapes that flies in from the right, the sidebar's entrance on
   the Playlist's corner, and deliberately matches the player's proportions.
   ========================================================= */

/* ---------------------------------------------------------
   The sticker pad (ui/sticker-window.ts)
   --------------------------------------------------------- */
.sticker-window {
  position: fixed;
  z-index: var(--z-overlay);
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + var(--dock));
  width: min(320px, calc(100vw - 32px));
  max-height: min(68vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--paper-card);
  border: var(--hairline) solid var(--rule-2);
  /* --leaf, the sidebar's corner: the same floating sheet. */
  border-radius: var(--leaf);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  /* #sidebar's entrance, mirrored: out past the right edge, in on --ease-back.
     The 22px clears the shadow, so nothing of the sheet shows while it waits. */
  transform: translateX(calc(100% + 22px));
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-back),
              opacity var(--dur-fast) var(--ease),
              visibility 0s linear var(--dur-base);
}
.sticker-window.is-open {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.sticker-window-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border-bottom: var(--hairline) solid var(--rule-2);
  -webkit-user-select: none;
  user-select: none;
}
.sticker-window-title {
  font-family: var(--font-display);
  font-size: var(--t-title);
  color: var(--ink);
}
.sticker-window-spacer { flex: 1 1 auto; }
.sticker-window-close {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--icon-button);
  height: var(--icon-button);
  padding: 0;
  border: 0;
  border-radius: var(--leaf);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
/* paper-2 not paper-3: paper-3 is the press state and the hover must not match it. */
@media (hover: hover) {
  .sticker-window-close:hover { background: var(--paper-2); color: var(--accent-deep); }
}
.sticker-window-close:active { background: var(--paper-3); }
.sticker-window-close:focus-visible { background: var(--paper-2); color: var(--accent-deep); }
.sticker-window-close svg { width: var(--icon-glyph); height: var(--icon-glyph); }

.sticker-window-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 10px 14px;
}

/* Category heading. No filter field: ~45 shapes fit in a short scroll. */
.sticker-cat {
  margin: 12px 2px 6px;
  font-family: var(--font-display);
  font-size: var(--t-tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sticker-cat:first-child { margin-top: 6px; }

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 4px;
}

.sticker-tile {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 7px;
  border-radius: var(--leaf);
  cursor: grab;
  /* Drag source: browser must not claim the gesture as a scroll. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.sticker-tile:hover { background: var(--paper-2); }
.sticker-tile:focus-visible { outline: 2px solid var(--select); outline-offset: -2px; }
/* Armed: loud on purpose so the board visibly shows a shape is in hand. */
.sticker-tile.is-armed {
  background: var(--select-fill);
  box-shadow: inset 0 0 0 2px var(--select);
}
.sticker-tile .sticker-art {
  width: 100%;
  height: 100%;
  /* No shadow: 45 shadows in a grid reads as texture, not depth. */
  filter: none;
}

/* Hidden until hovered or pinned: 45 stars at once overwhelms the grid. */
.sticker-fav {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-3);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.sticker-fav svg { width: 100%; height: 100%; }
.sticker-tile:hover .sticker-fav,
.sticker-tile:focus-within .sticker-fav { opacity: 1; }
.sticker-fav[aria-pressed="true"] {
  opacity: 1;
  color: var(--accent-warm);
  fill: currentColor;
}
/* Always visible in the favourites row: the star is the way to unpin. */
.sticker-tile.is-favourite .sticker-fav { opacity: 1; }

/* Ghost following the pointer. Centred on the cursor where the sticker will land. */
.sticker-ghost {
  position: fixed;
  z-index: var(--z-menu);
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  pointer-events: none;
  opacity: 0.9;
  rotate: -6deg;
}

/* Copy cursor while a shape is armed for placement. */
:root.sticker-arming #viewport,
:root.sticker-arming #viewport * { cursor: copy; }