/* ============================================================
   jpeg.css — "Compression Laboratory"

   Layers compression-specific furniture on the shared bench. The
   @import must stay first: CSS requires @import before other rules.
   color.css is pulled in for the image-stage, scene-picker and
   drop-target styles, which are not colour-specific at all.
   ============================================================ */

@import url("color.css");

/* Block diagrams want crisp pixels, never smoothing. */
.jp-stage canvas,
.jp-blocks canvas {
  image-rendering: pixelated;
}

/* The pipeline strip is wide and short. The ratio is chosen to match
   what bay 01 actually draws — five square blocks in a row plus their
   labels — so the canvas is not mostly empty. */
.jp-pipeline { background: var(--cam-sunk); }
.jp-pipeline canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4.2 / 1;
}
@media (max-width: 700px) {
  .jp-pipeline canvas { aspect-ratio: 5.6 / 1; }
}

/* Side-by-side comparison panes share one border. */
.jp-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--cam-rule);
}
@media (max-width: 620px) { .jp-pair { grid-template-columns: 1fr; } }

/* Verdict chip for the resolution-vs-quality bay. */
.jp-verdict {
  font-family: var(--cam-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cam-good);
}