/* One design drawn on its garment: the thumbnail first, the viewer's canvas over it.
   The viewer appends its own `canvas.garment-viewer` and a 2 px bar; both fill the box, and the
   canvas is transparent, so the well's lattice shows through where there is no garment. */

.garment-view {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* The loading bar the viewer draws takes its colour from this element's text colour unless a
     page sets the token. The metadata ink keeps it quiet on the lattice. */
  --garment-viewer-bar: var(--color-meta);
}

.garment-view canvas,
.garment-view-thumbnail {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The thumbnail goes when the viewer has drawn, and only then. Not `display: none`: the element
   keeps its place, so nothing on the card moves at the moment the garment appears. */
.garment-view-gone {
  opacity: 0;
}

.garment-view-thumbnail {
  transition: opacity 0.2s ease-in;
}

.garment-view-waiting {
  position: absolute;
  inset: 0;
  display: grid;
  /* `place-content`, not `place-items`: the words and the reason under them are two rows and have
     to sit together in the middle, not one in each half of the box. */
  place-content: center;
  justify-items: center;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-meta);
}

/* Why there is no thumbnail yet, under the waiting words: the reason the worker that draws them
   gave, in the metadata ink and not shouted (the customer's well, which is where a version too new
   to have a picture shows). */
.garment-view-why {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-meta);
  text-transform: none;
}

/* **Why there is no garment to turn**, at the foot of the picture: the component's own words and,
   under them, the reason the host gave (`ativv_types::design::viewer_trouble`). A quiet line over
   whatever is drawn in the box, on a wash of the paper so it reads over a thumbnail; it goes the
   moment a garment draws. Before 8 Oct 2026 a mount that would not draw said this to the browser's
   console and nothing to the person looking (Reed's first look). */
.garment-view-trouble {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-1) var(--space-2);
  background: color-mix(in oklab, var(--color-paper-lattice) 85%, transparent);
  color: var(--color-meta);
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-align: center;
}

/* Inside the trouble line the reason is the second row, not a block of its own margin. */
.garment-view-trouble > .garment-view-why {
  margin-top: 0;
}