/* Before and after (before-after.php): the first picture, the second over it clipped from the handle rightward, a white
 * line with the site's pink knob, short labels in the top corners. A range input lies over the whole picture (invisible),
 * so a drag, a tap or the arrow keys move the handle; vertical swipes still scroll the page on a phone. */
.oyb-ba { margin: 1.6em auto; }
.oyb-ba.is-oyb-tall { max-width: 420px; }
.oyb-ba__frame { position: relative; overflow: hidden; border-radius: 12px; background: var(--oyb-color-media); user-select: none; -webkit-user-select: none; }
.entry-content .oyb-ba img.oyb-ba__img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; border-radius: 0; }
.oyb-ba__b { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--oyb-ba, 50%)); }
.oyb-ba__line { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--oyb-ba, 50%); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(26, 26, 46, .18); pointer-events: none; }
.oyb-ba__knob { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--oyb-button); box-shadow: 0 4px 14px rgba(26, 26, 46, .3); transition: transform .2s var(--oyb-ease-out, ease); }
.oyb-ba__knob::before, .oyb-ba__knob::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border: solid #fff; border-width: 0 0 2.5px 2.5px; }
.oyb-ba__knob::before { left: 11px; transform: rotate(45deg); }
.oyb-ba__knob::after { right: 11px; transform: rotate(-135deg); }
.oyb-ba__label { position: absolute; z-index: 2; top: 12px; max-width: 42%; padding: 5px 10px; border-radius: var(--oyb-radius-pill, 999px); background: rgba(26, 26, 46, .72); color: #fff; font: 700 11px/1.3 var(--oyb-font-mono); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: opacity .2s ease; }
.oyb-ba__label.is-a { left: 12px; }
.oyb-ba__label.is-b { right: 12px; }
.oyb-ba.is-a-hidden .oyb-ba__label.is-a, .oyb-ba.is-b-hidden .oyb-ba__label.is-b { opacity: 0; } /* the handle has covered that side */
.oyb-ba__range { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; background: transparent; }
.oyb-ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; }
.oyb-ba__range::-moz-range-thumb { width: 44px; height: 100%; border: 0; }
.oyb-ba__frame:has(.oyb-ba__range:focus-visible) .oyb-ba__knob { outline: 3px solid var(--oyb-button-hover); outline-offset: 3px; }
@media (hover: hover) { .oyb-ba__frame:hover .oyb-ba__knob { transform: scale(1.08); } }
.oyb-ba__caption { margin: 8px 0 0; font-size: 14px; font-style: italic; text-align: center; color: var(--oyb-color-muted); }
@media (prefers-reduced-motion: reduce) { .oyb-ba * { transition: none !important; } }