/* Before & After — shared component styles. Theme-neutral: works in any zone. */
.ba { margin: 0; }
.ba-stage {
  position: relative; overflow: hidden; border-radius: 12px; background: #cfcac2;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize;
  -webkit-tap-highlight-color: transparent;
}
.ba-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; -webkit-user-drag: none;
}
.ba-mismatch .ba-img { object-fit: contain; background: #1d1f22; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); will-change: clip-path; }
.ba-line {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); pointer-events: none;
}
.ba-handle {
  position: absolute; top: 50%; left: var(--pos); width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
  display: grid; place-items: center; cursor: ew-resize; outline-offset: 3px;
}
.ba-handle::before, .ba-handle::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.ba-handle::before { left: 11px; border-right: 7px solid #222; }
.ba-handle::after { right: 11px; border-left: 7px solid #222; }
.ba-handle:focus-visible { outline: 3px solid #EC751A; }
.ba-tag {
  position: absolute; top: 10px; padding: 5px 10px; border-radius: 999px; font: 600 .74rem/1 system-ui, sans-serif;
  letter-spacing: .03em; color: #fff; background: rgba(12, 14, 18, .66); pointer-events: none; transition: opacity .2s;
}
.ba-tag-b { left: 10px; }
.ba-tag-a { right: 10px; }
.ba-dragging .ba-tag { opacity: .35; }
.ba-warn {
  margin-top: 8px; font-size: .82rem; padding: 8px 12px; border-radius: 8px;
  background: #FBF1DE; color: #6b4610; border-left: 3px solid #8A5A12;
}
@media (prefers-reduced-motion: reduce) { .ba-tag { transition: none; } }