/* the shape lab on /motion-graphics (SPEC §10.4, site/js/shape-lab.js): the picture (.lab-view: an ink panel, the form in paper and
   accent cells), four knobs (.lab-knobs), Random / Reset (.lab-acts) and the readout line (.lab-read). The page places these parts
   (css/motion.css); here is how each of them looks. Without scripts or without WebGL only the still and its line are there
   (.lab-flatbox). data-ground="paper" on the mount point puts the live form on paper instead (ink shade, accent fill light). */
.lab-flatbox{margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0}
.lab-still{display:block;width:100%;height:100%;min-height:0;object-fit:contain;image-rendering:crisp-edges;image-rendering:pixelated;background:var(--ink)}   /* the whole form in any box: the still's own ground is the ink around it */
.lab-note{margin:10px 0 0;color:var(--mid);line-height:1.5}
.lab-live>.lab-flatbox{display:none}
.lab-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- the picture: one canvas pixel per dither cell, blown up without smoothing. A vertical swipe on it is the page's (pan-y) */
.lab-view{position:relative;overflow:hidden;background:var(--ink);cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.lab-view.is-drag{cursor:grabbing}
.lab-cv{position:absolute;left:0;top:0;display:block;image-rendering:crisp-edges;image-rendering:pixelated}
.lab-tag,.lab-hint{position:absolute;top:12px;z-index:1;pointer-events:none;line-height:1}
.lab-tag{left:12px;color:var(--paper);background:var(--ink);border:1px solid rgba(242,243,245,.42);padding:6px 8px 5px}
.lab-hint{right:12px;padding:7px 8px 6px;color:rgba(242,243,245,.6);background:var(--ink)}
.lab[data-ground="paper"] .lab-view{background:var(--paper)}   /* the other ground (the still and the OG picture are captures of the ink one) */
.lab[data-ground="paper"] .lab-tag{color:var(--ink);background:var(--paper);border-color:var(--line)}
.lab[data-ground="paper"] .lab-hint{color:var(--mid);background:var(--paper)}

/* ---- the knobs: a hairline cap with an ink mark, a ring of cells lit in accent up to the value, the label above, the value under.
   --knob is the dial's size (shape-lab.js draws it in whole pixels at that size): 104 px where there is room, 88, 72 on a phone.
   A column is exactly as wide as its dial and the four are spread over the row, so the first dial stands on the panel's left edge and
   the last on its right one: the edges Random / Reset and the readout keep too */
.lab-knobs{--knob:104px;display:grid;grid-template-columns:repeat(4,var(--knob));justify-content:space-between}
.knob{display:grid;justify-items:center;gap:12px;min-width:0;cursor:ns-resize;outline:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.knob-l{color:var(--mid);line-height:1;transition:color .15s}
.knob-v{color:var(--ink);line-height:1;white-space:nowrap;transition:color .32s}
.knob.hot .knob-v{color:var(--accent)}
.knob-d{display:block;width:var(--knob);height:var(--knob);overflow:visible;touch-action:none;shape-rendering:crispEdges}
.knob-c{fill:var(--line)}
.knob-c.on{fill:var(--accent)}
.knob-cap{fill:var(--paper);stroke:var(--ink);stroke-width:1;shape-rendering:geometricPrecision;transition:stroke .15s}
.knob-ptr rect{fill:var(--ink);shape-rendering:geometricPrecision;transition:fill .15s}
.knob:hover .knob-l,.knob.is-on .knob-l,.knob:focus-visible .knob-l{color:var(--accent)}
.knob.is-on .knob-cap,.knob:focus-visible .knob-cap{stroke:var(--accent)}
.knob.is-on .knob-ptr rect,.knob:focus-visible .knob-ptr rect{fill:var(--accent)}
.knob:focus-visible .knob-d{outline:2px solid var(--accent);outline-offset:4px}

/* ---- Random / Reset: the site's mono chips; Random in ink (the one to press), Reset on a hairline */
.lab-acts{display:grid;gap:8px}
.lab-b{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;min-width:124px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1;transition:color .15s,border-color .15s,background .15s;-webkit-tap-highlight-color:transparent}
.lab-b:hover{color:var(--accent);border-color:var(--accent)}
.lab-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lab-go{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.lab-go:hover{color:var(--paper);background:var(--accent);border-color:var(--accent)}

/* ---- the readout: the state as a node tool prints it. Labels quiet, values in ink; a value the visitor's hand is changing is in the
   accent and eases back when the hand is off (shape-lab.js sets .hot). Every value keeps its number of characters (mono, white-space:
   pre), so nothing in the line moves. One row with dots between the cells from 1024 px, a grid of cells below that */
.lab-read{margin:0;display:flex;flex-wrap:wrap;line-height:1.7}
.rd{white-space:nowrap}
.rd-k{color:var(--mid)}
.rd-v{color:var(--ink);margin-left:.7em;white-space:pre;transition:color .32s}
.rd-v.hot{color:var(--accent)}
.rd+.rd::before{content:"·";color:var(--mid);margin:0 .85em}

@media (max-width:1199px){.lab-knobs{--knob:88px}.lab-acts{grid-template-columns:1fr 1fr}.lab-b{min-width:0}}
@media (max-width:1023px){
  .lab-read{display:grid;grid-template-columns:repeat(5,max-content);justify-content:start;gap:2px 32px}
  .rd+.rd::before{content:none}
}
@media (max-width:719px){
  .lab-read{grid-template-columns:repeat(3,max-content);justify-content:space-between;column-gap:12px}
  .lab-knobs{--knob:72px}
  .knob{gap:10px}
  .lab-tag,.lab-hint{top:10px}.lab-tag{left:10px}.lab-hint{right:10px}
}
@media (prefers-reduced-motion:reduce){.knob-l,.knob-v,.knob-cap,.knob-ptr rect,.lab-b,.rd-v{transition:none}}