/* Hairline figures (js/hairline-host.mjs) in CloudCell's drawing language,
   DESIGN.md §6: a calm black line, white fill, and one orange key part lit by
   the brand's micro gradient and a soft glow. A figure only switches classes;
   every colour it shows is set here. */
[data-hairline] {
  --hairline-plate: #fff;
  --hairline-hi: var(--brand, #f04d21);
  --hairline-edge: var(--ink, #0b1113);
  --hairline-mid: #948b7d;
  --hairline-lo: #d9d2c7;
  --hairline-stroke: 1.25;
}
[data-hairline] svg path.hi { fill: url(#hairline-key); filter: drop-shadow(0 0 5px rgb(240 77 33 / 32%)); }

/* The figure crops the 400 × 320 stage to the window its module names. */
.hairline-figure { position: relative; margin: 0; }
/* Until the figure mounts, or when it cannot, its drawing fills the figure. */
.hairline-figure > img { display: block; width: 100%; height: auto; }
.hairline-figure[data-hairline-mounted] { overflow: hidden; aspect-ratio: var(--crop-w) / var(--crop-h); }
.hairline-figure > [data-hairline] {
  position: absolute;
  top: calc(-100% * var(--crop-y) / var(--crop-h));
  left: calc(-100% * var(--crop-x) / var(--crop-w));
  width: calc(100% * 400 / var(--crop-w));
}
.hairline-defs { position: absolute; width: 0; height: 0; overflow: hidden; }