/*
 * The mascot's canvas on a product poster.
 *
 * Design: docs/superpowers/specs/2026-08-07-product-dock-design.md
 *
 * It is a CHILD of .product-poster-art rather than a sibling of the poster, and
 * that is the requirement rather than a preference. The gallery (z-index 2), the
 * photograph (3) and the issue chip (4) all live inside that subtree, so a
 * canvas outside it could only ever be entirely above or entirely below the
 * whole poster -- and the one thing this layering is for is putting him BETWEEN
 * the frame's backdrop and the product. category-mascot.css says the same thing
 * about tiles inside panels, for the same reason.
 *
 * At z-index 1 he is above the paper circle and below everything that carries
 * product information. He therefore cannot cover the photograph, the name, the
 * price or the issue number -- not as a matter of tuning, but of stacking.
 */
.product-dock {
  position: absolute;
  inset: 0;

  /*
   * Load-bearing. .product-poster-art is `display: grid; place-items: center`,
   * and self-alignment applies to absolutely-positioned children too: without
   * this he gets a shrink-to-fit box centred in the frame instead of one
   * filling it, and the camera frustum stops matching the render surface.
   *
   * The same `place-items: center` is what centres .product-poster-art::before,
   * the paper circle -- it has no offsets of its own. Anyone tempted to remove
   * it to "fix" this box moves the circle instead.
   */
  place-self: stretch;
  width: 100%;
  height: 100%;

  z-index: 1;

  /* He is scenery. Every control on this poster stays clickable through him,
     and he is not announced: there is nothing here a reader needs. */
  pointer-events: none;
}

.product-dock > canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * The flat mascot drawing that .product-poster-art falls back to when a product
 * has no photographs of its own (catalog-render.mjs, the images.length === 0
 * branch). While a live one is standing in the frame there must not also be a
 * drawing of him in it -- the same replacement category-mascot.css describes,
 * where one mascot who walks between the panels took the place of seven copies
 * of the same PNG.
 *
 * Hidden by a class on the frame rather than removed, so putting it back is one
 * line in retire() and in the context-loss handler. `visibility` rather than
 * `display` keeps the frame's grid measuring exactly as it did without him.
 */
.product-poster-art.has-dock-mascot > img { visibility: hidden; }

/*
 * Ground for him on the stacked poster.
 *
 * Below the poster's two-column breakpoint the art frame is short and its
 * content is centred rather than pushed aside, so the comic cover spans nearly
 * the whole width and reaches most of the way down: at a 390px viewport the
 * frame is 341x470 and the cover occupies x 61..280 down to y 400. There is no
 * end of the floor for him to stand on, which is why he did not mount here at
 * all until now.
 *
 * The frame is `place-items: center`, so bottom padding does not add dead space
 * under the content -- it lifts the centre and leaves a clear band beneath it.
 * That band is his floor, and product-dock-plan.mjs sizes it: --dock-floor is
 * floorReserve(mascotHeight(frame)), set by product-dock-boot.mjs in the same
 * task the poster is built in, so the frame is never laid out at one height and
 * then re-laid at another under the reader's thumb.
 *
 * Only when he is actually coming. A visitor who asked for reduced motion, or
 * whose device is narrower than DOCK_MIN_WIDTH, gets the poster unchanged
 * rather than a band of empty accent colour where a mascot is not going to be.
 */
@media (max-width: 759px) {
  .product-poster-art.has-dock-floor { padding-bottom: var(--dock-floor); }
}

/*
 * His tap target, and the only part of the dock that takes a pointer.
 *
 * .product-dock above is `pointer-events: none` so the whole poster stays
 * clickable through his canvas; this one box opts back in, and product-dock.mjs
 * sizes and moves it to his footprint every frame he is standing. It carries no
 * paint of its own -- the mascot behind it is the affordance -- and it is
 * `hidden` whenever a tap would be ignored, which is the whole of his walk back
 * in after an explosion.
 *
 * `touch-action: manipulation` because a thumb that lands on him on the way
 * past must still be able to scroll the page; `user-select: none` because a
 * long press on a box with no text should not start a selection.
 */
.dock-poke {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}