/* Devlog media blocks: ::compare, ::toggle, ::clip and ::timelapse in a post (scripts/media-blocks.mjs builds them,
   media.js runs them). Linked only on pages that use one, so every other page's inline sheet stays as it is.
   The build gives each picture its whole-number display size; it's never smoothed. Without JavaScript, a pair
   shows side by side. */
.prose .mb { margin-top:1.6em; }
.mb-frame { position:relative; width:fit-content; max-width:calc(100% - var(--p) * 4); margin:0 auto calc(var(--p) * 3);
  background:var(--ink); box-shadow:var(--o), var(--d); overflow:hidden; touch-action:pan-y; }
.mb-frame.mb-full { width:calc(100% - var(--p) * 4); }
.prose .mb-frame img, .prose .mb-frame video { display:block; max-width:100%; height:auto; margin:0; box-shadow:none;
  image-rendering:pixelated; image-rendering:crisp-edges; }
.mb-side { position:relative; }
.mb-b { position:absolute; inset:0; }
.prose .mb-frame .mb-b > img, .prose .mb-frame .mb-full video { width:100%; }
.prose .mb-frame .mb-b > img { height:100%; }
.prose .mb-frame .mb-poster + video, .prose .mb-frame .mb-b video { position:absolute; inset:0; width:100%; height:100%; }

/* labels on the picture, in the pixel font */
.mb-tag { position:absolute; top:6px; z-index:1; display:flex; align-items:center; gap:6px; padding:5px 6px; background:var(--ink); pointer-events:none; }
.mb-tag-a { left:6px; }
.mb-tag-b { right:6px; }
.mb-toggle .mb-tag-b { left:6px; right:auto; }
.mb-badge { background:var(--orange); }

/* compare: drag the divider (or focus it and use the arrow keys) */
.mb-compare .mb-b { clip-path:inset(0 0 0 var(--pos, 50%)); }
.mb-compare .mb-frame::after { content:""; position:absolute; top:0; bottom:0; left:var(--pos, 50%); width:var(--p); margin-left:-1px; z-index:1;
  background:var(--fur); box-shadow:calc(var(--p) * -1) 0 0 0 var(--ink), var(--p) 0 0 0 var(--ink); pointer-events:none; }
.mb-handle { position:absolute; top:0; bottom:0; left:var(--pos, 50%); z-index:2; width:48px; margin-left:-24px;
  display:flex; align-items:center; justify-content:center; cursor:ew-resize; }
.mb-grip { display:flex; align-items:center; gap:var(--p); padding:9px 6px; background:var(--fur); box-shadow:var(--o); }
.mb-handle:focus-visible { outline:none; }
.mb-handle:focus-visible .mb-grip { outline:3px solid var(--orange); outline-offset:3px; }
.mb-live .mb-frame { cursor:ew-resize; }

/* toggle: one shot, two versions, a button for each */
.mb-toggle .mb-b { opacity:0; }
.mb-toggle.show-b .mb-b { opacity:1; }
.mb-ui { display:flex; flex-wrap:wrap; justify-content:center; gap:0 6px; margin-top:6px; }
.mb-ui .btn[aria-pressed=true] { background:var(--orange); transform:translate(var(--p), var(--p)); box-shadow:var(--o), var(--d-press); }

/* the clips' Pause / Play */
.mb-pp { position:absolute; right:9px; bottom:9px; z-index:3; min-width:64px; min-height:44px; padding:8px 12px; border:0; cursor:pointer;
  font:inherit; font-size:15px; font-weight:700; background:var(--card); color:var(--ink); box-shadow:var(--o); }
.mb-pp:focus-visible { outline-offset:-6px; }

.prose .mb figcaption { text-align:center; }
.mb-span { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 8px; }
.mb-span-v { font-weight:700; color:var(--ink); }

/* no JavaScript: the two versions side by side, each with its label */
@media (scripting: none) {
  .mb-two .mb-frame { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:calc(var(--p) * 3); width:calc(100% - var(--p) * 4);
    background:none; box-shadow:none; overflow:visible; }
  .mb-two .mb-side { box-shadow:var(--o); background:var(--ink); }
  .mb-two .mb-b { position:relative; inset:auto; clip-path:none; opacity:1; }
  .prose .mb-two .mb-frame .mb-side > img { width:100%; height:auto; }
  .mb-two .mb-tag-b { left:6px; right:auto; }
  .mb-compare .mb-frame::after, .mb-ui { display:none; }
}