/* compare_slider.css - Finchory before/after image comparison slider (Warm Sand).
 * ===========================================================================
 * Paired with compare_slider.js (window.FinchoryCompareSlider). Two images are
 * stacked: the AFTER image is the base (sets the box size) and the BEFORE image
 * sits on top, clipped from the right by the handle position so the left of the
 * handle shows BEFORE and the right shows AFTER. The handle is a real
 * role="slider" control (keyboard + pointer + touch). ASCII only, no emoji.
 *
 * Positioning (clip-path inset, handle left%) is set inline by the JS so the
 * slider is functional even before this stylesheet loads; this file supplies the
 * appearance only. Reduced motion + a dark (Warm Slate) theme are honored.
 * =========================================================================== */
.bb-cmp {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  border: 1px solid #e6ddcd;
  border-radius: 10px;
  overflow: hidden;
  background: #f3ede1;
  line-height: 0;
  touch-action: none;            /* let the handle own horizontal drags */
  -webkit-user-select: none;
  user-select: none;
}
.bb-cmp-base { display: block; width: 100%; height: auto; }
.bb-cmp-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: clip-path;
  transition: clip-path .12s ease;
}
.bb-cmp-clip img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
}
.bb-cmp-tag {
  position: absolute;
  top: 8px;
  z-index: 2;
  font: 600 10px 'Inter', system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #262019;
  background: #fffdf8;
  border: 1px solid #e6ddcd;
  border-radius: 99px;
  padding: 3px 8px;
  line-height: 1.4;
  pointer-events: none;
}
.bb-cmp-tag.a { left: 8px; }
.bb-cmp-tag.b { right: 8px; color: #fff7f2; background: #b4532b; border-color: #b4532b; }
.bb-cmp-grip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  z-index: 3;
  transition: left .12s ease;
}
.bb-cmp-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: #fffdf8;
  box-shadow: 0 0 0 1px rgba(60, 44, 24, .32);
}
.bb-cmp-handle {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: #fffdf8;
  border: 1px solid #d9cebb;
  box-shadow: 0 1px 4px rgba(60, 44, 24, .4);
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  touch-action: none;
}
.bb-cmp-handle svg {
  width: 20px;
  height: 20px;
  stroke: #8f3f1f;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bb-cmp-handle:focus-visible {
  outline: 2px solid rgba(180, 83, 43, .65);
  outline-offset: 3px;
}
/* While actively dragging, drop the easing so the reveal tracks the pointer 1:1. */
.bb-cmp-dragging .bb-cmp-clip,
.bb-cmp-dragging .bb-cmp-grip { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .bb-cmp-clip,
  .bb-cmp-grip { transition: none; }
}
/* Dark theme (Warm Slate), matching settings.html / onboarding.js dark tokens. */
html[data-theme=dark] .bb-cmp { background: #1c1813; border-color: #3b332a; }
html[data-theme=dark] .bb-cmp-tag { color: #f1e9da; background: #241f19; border-color: #3b332a; }
html[data-theme=dark] .bb-cmp-tag.b { color: #fff7f2; background: #b4532b; border-color: #b4532b; }
html[data-theme=dark] .bb-cmp-line { background: #f1e9da; }
html[data-theme=dark] .bb-cmp-handle { background: #2c261e; border-color: #4a4030; }
html[data-theme=dark] .bb-cmp-handle svg { stroke: #e0a37f; }