/* Before / After — image comparison slider. b-ba, kabdalis2 design tokens.
   The whole frame is covered by an invisible <input type="range"> so drag and
   arrow keys both work natively; --ba-pos drives the clip + handle. */
.b-ba{ margin:0; }
.b-ba__frame{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius,14px);
    background:var(--surface2,#f5f1ea);
    border:1px solid var(--line,#e4ded2);
}
.b-ba__img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    display:block;
}
.b-ba__top{
    position:absolute; inset:0;
    clip-path:inset(0 calc(100% - var(--ba-pos,50%)) 0 0);
    transition:clip-path 80ms ease;
}

/* Corner labels — small mono pills. */
.b-ba__label{
    position:absolute; top:10px; z-index:1;
    padding:4px 10px;
    border-radius:999px;
    background:var(--surface2,#f5f1ea);
    color:var(--ink,#25211b);
    border:1px solid var(--line,#e4ded2);
    font-family:var(--font-mono);
    font-size:.72rem;
    text-transform:uppercase; letter-spacing:.05em;
    pointer-events:none;
}
.b-ba__label--l{ left:10px; }
.b-ba__label--r{ right:10px; }

/* Handle — vertical line + grip circle at --ba-pos. */
.b-ba__handle{
    position:absolute; top:0; bottom:0;
    left:var(--ba-pos,50%);
    width:2px; margin-left:-1px;
    background:var(--accent);
    transition:left 80ms ease;
    pointer-events:none;
}
.b-ba__grip{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:40px; height:40px;
    border-radius:50%;
    background:var(--accent);
    color:var(--on-accent, #fff);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,.25);
}

/* The range input stretches invisibly across the frame — a ≥40px-tall native
   control that handles pointer drag and arrow keys for free. */
.b-ba__range{
    position:absolute; inset:0;
    width:100%; height:100%;
    margin:0; padding:0;
    opacity:0;
    cursor:ew-resize;
    -webkit-appearance:none;
    appearance:none;
}
.b-ba__frame:has(.b-ba__range:focus-visible) .b-ba__grip{
    outline:2px solid var(--on-accent, #fff);
    outline-offset:2px;
}

/* No lag while actively dragging. */
.b-ba__frame:has(.b-ba__range:active) .b-ba__top,
.b-ba__frame:has(.b-ba__range:active) .b-ba__handle{ transition:none; }

@media (prefers-reduced-motion: reduce){
    .b-ba__top,
    .b-ba__handle{ transition:none; }
}

/* --- Editor-only preview (both images side by side) --- */
.kabdalis-ba-editor__cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.kabdalis-ba-editor__tag{
    font-family:var(--font-mono);
    font-size:.72rem;
    text-transform:uppercase; letter-spacing:.05em;
    color:var(--muted);
    margin-bottom:6px;
}
.kabdalis-ba-editor__img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    border-radius:var(--radius,14px);
    display:block;
}
.kabdalis-ba-editor__empty{
    display:flex; align-items:center; justify-content:center;
    aspect-ratio:16/10;
    background:var(--surface2,#f5f1ea);
    border:1px dashed var(--line,#e4ded2);
    border-radius:var(--radius,14px);
}