/* "One arm, many processes" (Rosie 1400): a grid of small hidden-line process drawings, see /assets/js/rosie-tasks.js.
   Each tile is a drawing sheet on paper; the canvas fills a fixed-aspect stage so nothing shifts when it goes live. */
.tasks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem clamp(1rem, 1.6vw, 1.5rem); }
.task { display: grid; gap: .7rem; align-content: start; min-width: 0; margin: 0; }
.task-stage {
  position: relative; aspect-ratio: 5 / 4; background: var(--paper); border: 1px solid var(--line);
  overflow: hidden;
}
.task-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .4s linear; }
.task.is-live .task-stage canvas { opacity: 1; }
/* static drawing (no WebGL2 / no script): drawn in light-theme ink, inverted to ice for the dark theme like the drawing sheets */
.task-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: var(--draw-blend); filter: var(--draw-filter); }

/* sheet furniture: process number top-left, market category top-right, in the micro-label style */
.task-stage .task-n, .task-stage .task-cat { position: absolute; top: .55rem; z-index: 1; pointer-events: none; }
.task-stage .task-n { left: .65rem; color: var(--ink); }
.task-stage .task-cat { right: .65rem; }

.task-cap { display: grid; gap: .3rem; border-top: 2px solid var(--ink); padding-top: .7rem; }
.task h3 { font-size: 1.05rem; }
.task-cap p { font-size: .88rem; color: var(--ink-2); }

.tasks-note { margin-top: 2rem; }

/* the shared renderer's canvas: sized to one tile at a time, never shown */
.tasks-gl { position: fixed; left: 0; top: 0; visibility: hidden; pointer-events: none; z-index: -1; }

@media (max-width: 1100px) { .tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tasks { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } }