/*
  justincook.dev · dev / AI tools, option B · ART LAYER (styles)
  Include after the page's own <style>:  <link rel="stylesheet" href="art/devtools-b-art.css">
  Every rule here targets an element that art/devtools-b-art.js marks ONLY once its image has loaded. With no image,
  nothing matches and the code drawing (the workbench svg, the bare mat) shows exactly as before.
  Slot sizes: art/README.md, section "Devtools B". All sizes are sheet pixels (the page zooms the 1280 x 800 sheet).
*/
:root{
  /* D1 · the title sheet's scene: the box the code workbench (.wb) occupies */
  --jc-art-bench-left:688px;--jc-art-bench-top:132px;--jc-art-bench-w:544px;--jc-art-bench-h:520px;
  --jc-art-bench-pos:50% 50%;
  --jc-art-bench-opacity:1;
  --jc-art-bench-feather-x:2.5%;  /* the art's ground fades into the sheet's paper at the slot's edges; */
  --jc-art-bench-feather-y:7%;    /* narrower at the sides, where the mat comes within 15 px of the edge */
  /* D2 · each tool's finished object, beside the drawn screen: the first item of the right column (.col, 456 wide,
     its content centred on the 540 px panel), above the claim. The files are 3:2 (544 x 363) with about 15 percent
     of flat ground round the object; the pull brings the object's left edge out to the claim's left edge. */
  --jc-art-tool-w:216px;--jc-art-tool-h:144px;
  --jc-art-tool-gap:20px;
  --jc-art-tool-pull:-28px;
  --jc-art-tool-opacity:1;
  --jc-art-tool-blend:darken;     /* where the art's cream is lighter than the sheet, the sheet shows */
  --jc-art-tool-lift:1.03;        /* brightness that lifts a file's ground to the sheet's paper (per file below) */
  --jc-art-tool-feather:10%;      /* the ground fades out at every edge, so no box shows where the grounds differ */
  /* the rest of the bench: each tile's construction drawing, inside the pictogram's 128 px hairline frame */
  --jc-art-glyph-size:126px;
  --jc-art-glyph-blend:darken;    /* the drawings' cream is at or above the sheet's paper, so only the ink shows */
  --jc-art-glyph-lift:1.06;       /* lifts the warmest ground (the door) to the paper; the orange ink barely moves */
  --jc-art-glyph-soft:30%;        /* the width of the wipe's soft pencil edge */
  --jc-art-outline:#FF2E9A;
}

img.jc-art{position:absolute;display:block;max-width:none;border:0;pointer-events:none;user-select:none;-webkit-user-drag:none}

/* D1 · first child of the title sheet; the code workbench svg keeps its box and is hidden under the art */
.sheet>img.jc-art-bench{left:var(--jc-art-bench-left);top:var(--jc-art-bench-top);width:var(--jc-art-bench-w);height:var(--jc-art-bench-h);object-fit:cover;object-position:var(--jc-art-bench-pos);opacity:var(--jc-art-bench-opacity);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--jc-art-bench-feather-x),#000 calc(100% - var(--jc-art-bench-feather-x)),transparent),linear-gradient(180deg,transparent,#000 var(--jc-art-bench-feather-y),#000 calc(100% - var(--jc-art-bench-feather-y)),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 var(--jc-art-bench-feather-x),#000 calc(100% - var(--jc-art-bench-feather-x)),transparent),linear-gradient(180deg,transparent,#000 var(--jc-art-bench-feather-y),#000 calc(100% - var(--jc-art-bench-feather-y)),transparent);
  mask-composite:intersect}
.sheet.jc-art-bench-on>svg.wb{visibility:hidden}

/* the blends below mix with what the sheet paints under them; the sticky screens (and the review offset) make each
   sheet its own group, so the sheet carries the paper itself (the same colour as the page round it) */
.sheet{background:var(--paper)}

/* D2 · the first item of the right column, in the flow (the claim and its lines move down under it) */
.col>img.jc-art-tool{position:relative;flex:none;align-self:flex-start;width:var(--jc-art-tool-w);height:var(--jc-art-tool-h);
  margin:0 0 var(--jc-art-tool-gap) var(--jc-art-tool-pull);object-fit:contain;opacity:var(--jc-art-tool-opacity);mix-blend-mode:var(--jc-art-tool-blend);filter:brightness(var(--jc-art-tool-lift));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--jc-art-tool-feather),#000 calc(100% - var(--jc-art-tool-feather)),transparent),linear-gradient(180deg,transparent,#000 var(--jc-art-tool-feather),#000 calc(100% - var(--jc-art-tool-feather)),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 var(--jc-art-tool-feather),#000 calc(100% - var(--jc-art-tool-feather)),transparent),linear-gradient(180deg,transparent,#000 var(--jc-art-tool-feather),#000 calc(100% - var(--jc-art-tool-feather)),transparent);
  mask-composite:intersect}
/* per file: the lift that takes its measured ground (the 5th percentile of its edge band) to the paper #F4EFE4 */
img.jc-art-tool[data-art-key="tool.chronicle"]{--jc-art-tool-lift:1.105}
img.jc-art-tool[data-art-key="tool.bedrock"]{--jc-art-tool-lift:1.08}
img.jc-art-tool[data-art-key="tool.temper"]{--jc-art-tool-lift:1.075}
img.jc-art-tool[data-art-key="tool.clifactory"]{--jc-art-tool-lift:1.055}

/* the rest of the bench · over the pictogram's frame, whose lines hide under it (the frame itself stays).
   The page tweens --pen (0 to 1) on the tile with its pencil: the drawing wipes in left to right behind a soft edge. */
.tile>img.jc-art-glyph{left:1px;top:1px;width:var(--jc-art-glyph-size);height:var(--jc-art-glyph-size);mix-blend-mode:var(--jc-art-glyph-blend);filter:brightness(var(--jc-art-glyph-lift));
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--pen,1) * (100% + var(--jc-art-glyph-soft)) - var(--jc-art-glyph-soft)),transparent calc(var(--pen,1) * (100% + var(--jc-art-glyph-soft))));
  mask-image:linear-gradient(90deg,#000 calc(var(--pen,1) * (100% + var(--jc-art-glyph-soft)) - var(--jc-art-glyph-soft)),transparent calc(var(--pen,1) * (100% + var(--jc-art-glyph-soft))))}
.tile.jc-art-on>svg.glyph>*{visibility:hidden}
html[data-motion="still"] .tile>img.jc-art-glyph{-webkit-mask-image:none;mask-image:none}
@media (prefers-reduced-motion:reduce){.tile>img.jc-art-glyph{-webkit-mask-image:none;mask-image:none}}

html.jc-art-outline img.jc-art{outline:1px dashed var(--jc-art-outline);outline-offset:-1px}