/* ============ LIGHT / DARK COMPARE ============
   One screen exported twice, light and dark, stacked at the same size. The
   dark copy sits on top and is clipped to the right of the divider, so the
   reader sees light on the left and dark on the right and drags the split
   (js/compare.js). Each mode's tag lives in its own layer and is clipped with
   it, so a tag never shows over the other mode.

   The divider position is --pos (0 to 100). Without script it stays at 50, so
   both modes show. Dragging uses pointer events with touch-action:pan-y: a
   horizontal drag moves the divider and a vertical swipe still scrolls the
   page. Keyboard users get the range input, which is invisible but focusable;
   its focus ring is drawn on the knob. */

.compare{
  --pos:50;
  position:relative;margin:0;overflow:hidden;
  border-radius:12px;background:var(--sink);
  cursor:ew-resize;touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
}
/* the site's hairline edge, drawn over both modes so it follows the rounded
   corner and stays the same colour on either side of the divider */
.compare::after{
  content:"";position:absolute;inset:0;z-index:3;
  border-radius:inherit;box-shadow:inset 0 0 0 1px var(--rule);
  pointer-events:none;
}
.compare img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  pointer-events:none;-webkit-user-drag:none;
}
.compare-top{
  position:absolute;inset:0;
  clip-path:inset(0 0 0 calc(var(--pos) * 1%));
}

/* ---- the mode tags, bottom corners (the top holds the product's banner
   and logo) ---- */
.compare-tag{
  position:absolute;bottom:clamp(8px,1.4vw,14px);left:clamp(8px,1.4vw,14px);
  padding:3px 8px;border-radius:999px;
  font-family:var(--body);font-size:var(--t-label-size);font-weight:500;line-height:1.4;
  background:rgba(255,255,255,.92);color:#18181b;
  box-shadow:0 0 0 1px rgba(24,24,27,.12);
  pointer-events:none;
}
.compare-top .compare-tag{
  left:auto;right:clamp(8px,1.4vw,14px);
  background:rgba(24,24,27,.9);color:#f4f4f5;
  box-shadow:0 0 0 1px rgba(255,255,255,.16);
}

/* ---- the divider and its knob ---- */
.compare-handle{
  position:absolute;top:0;bottom:0;left:calc(var(--pos) * 1%);
  width:2px;margin-left:-1px;background:#fff;
  box-shadow:0 0 0 1px rgba(24,24,27,.18),0 0 12px rgba(0,0,0,.18);
  pointer-events:none;
}
.compare-knob{
  position:absolute;top:50%;left:50%;
  width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;color:#18181b;
  box-shadow:0 0 0 1px rgba(24,24,27,.12),0 2px 8px rgba(0,0,0,.2);
  transition:transform .15s ease;
}
.compare-knob svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.compare.is-dragging .compare-knob{transform:scale(1.08);}

/* .on-field (pagekit compare(field=)): each mode sits on its own background,
   the light one on the base layer and the dark one on the clipped top layer,
   so the divider splits the background with the screen. The capture is inset
   by --ix / --iy and rounded by --ir (its own corner, so the baked white
   corners of the export are clipped away). */
.compare.on-field{background:var(--light-field);border-radius:14px;}
.compare.on-field .compare-top{background:var(--dark-field);}
.compare.on-field img{
  inset:var(--iy) var(--ix);
  width:calc(100% - 2 * var(--ix));height:calc(100% - 2 * var(--iy));
  border-radius:var(--ir, clamp(6px,0.6vw,10px));
}

/* the range input: present for keyboard and screen readers, never seen */
.compare-range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;pointer-events:none;
}
.compare:has(.compare-range:focus-visible) .compare-knob{
  outline:2px solid var(--accent);outline-offset:3px;
}

/* phones: the capture is small, so the tags and knob give it more room */
@media (max-width:699px){
  .compare-tag{padding:1px 6px;font-size:12px;}
  .compare-knob{width:32px;height:32px;margin:-16px 0 0 -16px;}
  .compare-knob svg{width:16px;height:16px;}
}

@media (prefers-reduced-motion:reduce){
  .compare-knob{transition:none;}
}