/* Stickers from the app (picniccore-shopping-list, design/stickers: the bee
   and ladybug decor stickers and the strawberry item sticker, converted from
   the app's VectorDrawables with its tools/vd2svg.py). They're decoration,
   so they're CSS backgrounds that screen readers and the feed never see, and
   each sits in space that's always empty at any width:
     bee         beside the date, at the right end of the post's header
     strawberry  beside the video (side by side layout), or beside the
                 "(github repo)" line (phones, where the video fills the column)
     ladybug     walking along the rule above the newer/older links
   Each gets the app's hard sticker shadow, scaled with its size. */
:root {
  --sticker-shadow: #6e7bd0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sticker-shadow: #3f4866;
  }
}
:root[data-theme="dark"] {
  --sticker-shadow: #3f4866;
}

.post-head,
.prose .video,
.prose > p:has(> a[href*="picniccore-shopping-list"]),
.post-nav {
  position: relative;
}

.post-head::after,
.prose .video::after,
.prose > p:has(> a[href*="picniccore-shopping-list"])::after,
.post-nav::before {
  content: "";
  position: absolute;
  width: var(--s);
  height: var(--s);
  background: var(--img) center / contain no-repeat;
  /* The app's offset (1.6, 2.2) on a 52-unit sticker. */
  filter: drop-shadow(calc(var(--s) * 0.031) calc(var(--s) * 0.042) 0 var(--sticker-shadow));
  pointer-events: none;
}

.post-head::after {
  --s: 4rem;
  --img: url("sticker-bee.svg");
  right: 0.5rem;
  bottom: -2.4rem;
  transform: rotate(-14deg);
}

/* The video is never wider than min(80svh, 42rem) times its shape (the
   video shortcode), so the strawberry goes just past that. */
.prose .video::after {
  --s: 5.25rem;
  --img: url("sticker-strawberry.svg");
  left: calc(min(100%, min(80svh, 42rem) * var(--ratio)) + 2.5rem);
  top: 52%;
  transform: rotate(9deg);
}

/* The repo line's strawberry is for phones only (below). */
.prose > p:has(> a[href*="picniccore-shopping-list"])::after {
  content: none;
}

.post-nav::before {
  --s: 3.5rem;
  --img: url("sticker-ladybug.svg");
  right: 3rem;
  top: calc(var(--s) * -0.72);
  transform: rotate(78deg);
}

@media (max-width: 52rem) {
  .post-head::after {
    --s: 3rem;
    right: 0.25rem;
    bottom: -1.9rem;
  }
  .prose .video::after {
    content: none;
  }
  .prose > p:has(> a[href*="picniccore-shopping-list"])::after {
    content: "";
    --s: 3.25rem;
    --img: url("sticker-strawberry.svg");
    right: 1.25rem;
    top: 40%;
    transform: translateY(-50%) rotate(-8deg);
  }
  .post-nav::before {
    --s: 2.75rem;
    right: 1.5rem;
  }
}