/* protein.css: minimal styles for the live protein engine (js/protein.js).
   Markup: <figure class="protein"><img class="protein__poster" src="..." alt=""><canvas></canvas></figure>
   Layout (size, position) belongs to the page. Poster sits under the canvas; the canvas fades in on first draw. */
.protein {
  position: relative;
  display: block;
  margin: 0;
  --protein-ratio: 1;
}

.protein canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--protein-ratio);
  opacity: 0;
  transition: opacity 0.4s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.protein canvas.is-drawn { opacity: 1; }

/* Page-sized canvas: let the parent decide the height. */
.protein--fill canvas { height: 100%; aspect-ratio: auto; }

.protein > img,
.protein .protein__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Interactive canvases: vertical scroll stays with the page, horizontal drags rotate. The canvas is role img, never a tab stop. */
.protein canvas[data-interactive] {
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.protein canvas:focus { outline: none; }

/* Keyboard target (opts.keyTarget, default the canvas parent): two-tone ring, 4px white then a 2px #1270CC outline, reads on any background. */
[data-protein-key]:focus { outline: none; }
[data-protein-key]:focus-visible {
  outline: 2px solid #1270CC;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px #fff;
}

html.is-static .protein canvas { transition: none; }

/* Thread layer: one instance as a fixed full-viewport canvas (create it with paper: null, dprCap: 1.5). It never takes pointer
   events. The page picks the stacking with z-index (behind or in front of type). --multiply blends the canvas element with the
   page, so the ink tints coloured fields instead of sitting on them. Fade with inst.setOpacity, not with CSS opacity. */
.protein-layer {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
}
.protein-layer--multiply { mix-blend-mode: multiply; }