/* Clovermind, the pencil plate (js/pencil-plate.js).
   Only what the drawing needs: the sheet's box, its paper and the canvas. The card round it, the
   sheet's size and the caption under it belong to the page.

   The sheet reserves its box before the script runs (no layout shift) and shows the pencil paper
   colour, the Pong board's own (#EFE6D5, --board in main.css), so there is no flash before the paint.
   The page sets the size: give .plate__sheet a width and either --plate-aspect (4 / 3 by default),
   its own aspect-ratio, or a height (flex: 1 in a card works too). Override --plate-radius to match
   the card the sheet sits in. The drawing is recomposed for any aspect from 5:2 to 1:1. */

.plate { margin: 0; }

.plate__sheet {
  position: relative;
  aspect-ratio: var(--plate-aspect, 4 / 3);
  overflow: hidden;
  isolation: isolate;
  background: #EFE6D5;
  border-radius: var(--plate-radius, 16px);
  line-height: 0;
}

.plate__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* With scripting off the sheet is not left blank: it shows the same drawing, still (rendered once
   from js/pencil-plate.js, the marks alone on a clear ground), whole and centred on the paper colour.
   Each drawing has its own: the network (4:3) and the anatomy (3:2, composed for the Adam 15 page's
   540 px slot). --plate-still-position moves it (e.g. "75% 50%" where a title sits over the left of
   the sheet). Browsers with scripts on never fetch either. */
@media (scripting: none) {
  .plate__sheet {
    background-image: url("../assets/pencil-plate-still.webp");
    background-position: var(--plate-still-position, 50% 50%);
    background-size: contain;
    background-repeat: no-repeat;
  }
  [data-pencil-plate="anatomy"] .plate__sheet { background-image: url("../assets/pencil-anatomy-still.webp"); }
}