/* Pixel Workshop exhibit. Shared primitives live in museum.css. The canvas only changes when the visitor draws. */
.px-stage { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); align-items: start; }
.px-view { margin: 0; }
.px-canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 6px; background: #000; touch-action: none; cursor: crosshair; }
.px-canvas:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.px-side { display: grid; gap: 16px; min-width: 0; }
.px-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 6px; margin: 0 0 10px; padding: 0; border: 0; min-width: 0; }
.px-mode { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 6px 12px; border: 1px solid var(--rule-2); border-radius: var(--r-s); color: var(--ink-2); cursor: pointer; }
.px-mode input, .px-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.px-mode-t { font: 700 .98rem/1.15 var(--f-display); }
.px-mode-y { font: 400 .68rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.px-mode:has(input:checked) { border-color: var(--era); color: var(--era); background: var(--era-glow); }
.px-mode:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.px-limit { margin: 0 0 6px; color: var(--ink-2); font-size: .95rem; }
.px-tools .btn[aria-pressed="true"] { background: var(--era-glow); }
.px-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; margin: 0 0 10px; padding: 0; border: 0; min-width: 0; }
.px-sw { position: relative; display: block; min-height: 44px; cursor: pointer; }
.px-chip { position: absolute; inset: 3px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .25); }
.px-sw:has(input:checked) .px-chip { inset: 0; box-shadow: 0 0 0 3px var(--room-2), 0 0 0 5px var(--ink); }
.px-sw:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.px-small { margin: 8px 0 0; color: var(--ink-3); font-size: .85rem; }
@media (max-width: 900px) { .px-stage { grid-template-columns: minmax(0, 1fr); } .px-view { max-width: 560px; } }

/* ---------- museum interactive finish (design pass, 27 Oct) ---------- */
/* the drawing board sits in a bezel with a light-table edge in the exhibit's era colour */
.px-view { position: sticky; top: 16px; }
.px-canvas { box-shadow: 0 0 0 1px #000, 0 0 0 4px #1e1b23, 0 0 0 5px color-mix(in srgb, var(--era) 45%, transparent); }
.px-mode { background: var(--room); }
.px-mode:hover { border-color: var(--ink-3); }
.px-swatches { padding: 8px; border-radius: 6px; background: #0a090c; box-shadow: inset 0 0 0 1px #2c2732; }
.px-chip { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
@media (max-width: 900px) { .px-view { position: static; } }