/* URTH · workshop step 5, infrared (A61, 9 Oct 2026). The few rules this step adds to the workshop's own (workshop.css):
   the picture is a canvas in the aerial frame of 1b, with the + and − of the 3D steps, and the index ramp in the legend. */
.frame.ir5{background:var(--urth-forest-900);touch-action:pan-y}
.frame.ir5 .pic{transform-origin:50% 50%;will-change:transform}
.frame.ir5 .pic canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.frame.ir5.zoomed .pic{cursor:grab}
.frame.ir5.zoomed .pic canvas{image-rendering:pixelated}
.frame.ir5 .chip-tl{background:var(--urth-cream-50);color:var(--urth-forest-900);border-color:transparent}
.frame.ir5 .lines .lot{stroke:#F2C94C;stroke-width:2}
.frame.ir5 .zoom{position:absolute;right:var(--urth-s-3);bottom:22px;display:flex;gap:6px}
.frame.ir5 .zoom button{appearance:none;width:36px;height:36px;border-radius:50%;border:0;background:var(--urth-cream-50);color:var(--urth-forest-900);font:700 20px/1 var(--urth-font-body);cursor:pointer;box-shadow:var(--urth-shadow-1)}
.frame.ir5 .zoom button:focus-visible{outline:none;box-shadow:var(--urth-focus)}
.frame.ir5 .chip-bl{max-width:calc(100% - 120px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
.frame.ir5 .setsw{bottom:62px}
.ir5-ramp{height:14px;border-radius:var(--urth-r-pill);margin:var(--urth-s-3) 0 4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
  background:linear-gradient(90deg,#94765A 0%,#ECE4D0 30%,#E0DC94 45%,#96C86E 45.1%,#0F5F30 100%)}
.ir5-ramp-k{display:grid;grid-template-columns:30% 15% 1fr auto;margin:0 0 var(--urth-s-2);font-size:12px;color:var(--urth-text-muted);font-variant-numeric:tabular-nums}
.thumb .tn{max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prop .ph.aer.ir img{image-rendering:auto}
@media (max-width:600px){.frame.ir5 .zoom{bottom:14px}.frame.ir5 .zoom button{width:32px;height:32px}.frame.ir5 .setsw{left:var(--urth-s-3);top:50px;bottom:auto}.frame.ir5 .chip-bl{max-width:calc(100% - 100px)}}