/* Before / after slider. Both layers fill the stage (object-fit: cover), the
   before layer is clipped through the CSSOM (clip-path), the divider is
   positioned through the CSSOM. The range input is visually hidden but is
   the focusable control; the knob shows its focus ring. */
:root {
    --ba-b1: #c9c4b8; --ba-b2: #a59f91; --ba-b3: #8b8475; --ba-stain: rgba(92, 72, 40, .28);
    --ba-a1: #e0f2fe; --ba-a2: #bfdbfe; --ba-a3: #93c5fd; --ba-shine: #ffffff;
    --ba-line: #ffffff; --ba-knob: #ffffff; --ba-knob-ink: #10162b;
}
html[data-theme="dark"] {
    --ba-b1: #4a463e; --ba-b2: #3a362f; --ba-b3: #2c2924; --ba-stain: rgba(0, 0, 0, .35);
    --ba-a1: #1e3a5f; --ba-a2: #1d4ed8; --ba-a3: #2563eb; --ba-shine: #dbeafe;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --ba-b1: #4a463e; --ba-b2: #3a362f; --ba-b3: #2c2924; --ba-stain: rgba(0, 0, 0, .35);
        --ba-a1: #1e3a5f; --ba-a2: #1d4ed8; --ba-a3: #2563eb; --ba-shine: #dbeafe;
    }
}

.ba { margin: 0; display: grid; gap: 8px; }
.ba-stage {
    position: relative; overflow: hidden; border-radius: var(--e-radius-sm); background: var(--e-surface-2);
    aspect-ratio: 3 / 2; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize;
}
.ba-stage.ba-v { touch-action: pan-x; cursor: ns-resize; }
.ba-r-4x3 { aspect-ratio: 4 / 3; } .ba-r-16x9 { aspect-ratio: 16 / 9; } .ba-r-1x1 { aspect-ratio: 1 / 1; } .ba-r-3x4 { aspect-ratio: 3 / 4; }
.ba-layer { position: absolute; inset: 0; }
.ba-layer > * { width: 100%; height: 100%; }
.ba-img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* drawn sample panels */
.ba-sample { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.ba-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba-sample-before .ba-art path:nth-child(1) { fill: var(--ba-b1); }
.ba-sample-before .ba-art path:nth-child(2) { fill: var(--ba-b2); }
.ba-sample-before .ba-art path:nth-child(3) { fill: var(--ba-b3); }
.ba-sample-before .ba-art circle { fill: var(--ba-stain); }
.ba-sample-after .ba-art path:nth-child(1) { fill: var(--ba-a1); }
.ba-sample-after .ba-art path:nth-child(2) { fill: var(--ba-a2); }
.ba-sample-after .ba-art path:nth-child(3) { fill: var(--ba-a3); }
.ba-sample-after .ba-art circle { fill: var(--ba-shine); }
.ba-tag {
    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px;
    font-size: .7em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(255, 255, 255, .85); color: #1f2937;
}
.ba-sample-before .ba-tag { left: 10px; transform: none; }
.ba-sample-after .ba-tag { left: auto; right: 10px; transform: none; }
.ba-v .ba-sample-before .ba-tag { top: 10px; bottom: auto; left: auto; right: 10px; }
.ba-v .ba-sample-after .ba-tag { left: 10px; right: auto; }
.ba-unavail { display: grid; place-items: center; background: var(--e-surface); color: var(--e-ink-3); font-size: .8em; font-weight: 600; border: 1px dashed var(--e-line-strong); }

.ba-label {
    position: absolute; top: 10px; padding: 2px 10px; border-radius: 999px; font-size: .78em; font-weight: 700;
    background: rgba(16, 22, 43, .72); color: #fff; pointer-events: none; transition: opacity .15s var(--e-ease); max-width: 42%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ba-label-b { left: 10px; }
.ba-label-a { right: 10px; }
.ba-v .ba-label-b { top: 10px; left: 10px; }
.ba-v .ba-label-a { top: auto; bottom: 10px; right: 10px; }
.ba-label.ba-gone { opacity: 0; }

.ba-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; pointer-events: none; }
.ba-divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--ba-line); box-shadow: 0 0 6px rgba(0, 0, 0, .35); }
.ba-v .ba-divider { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 0; }
.ba-v .ba-divider::before { top: -1.5px; bottom: auto; left: 0; right: 0; width: auto; height: 3px; }
.ba-knob {
    position: absolute; top: 50%; left: 0; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%;
    display: grid; place-items: center; background: var(--ba-knob); color: var(--ba-knob-ink);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35); border: 2px solid rgba(255, 255, 255, .9);
}
.ba-v .ba-knob { top: 0; left: 50%; }
.ba-knob svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ba-stage.ba-focus .ba-knob { outline: 3px solid var(--e-focus); outline-offset: 2px; }
.ba-stage.ba-keyed .ba-divider { transition: left .12s var(--e-ease), top .12s var(--e-ease); }
.ba-stage.ba-keyed .ba-before { transition: clip-path .12s var(--e-ease); }

.ba-range { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }

.ba-cap { font-size: .86em; color: var(--e-ink-2); line-height: 1.4; overflow-wrap: anywhere; }

/* side-by-side fallback */
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; aspect-ratio: auto !important; }
.ba-pair-item { margin: 0; display: grid; gap: 4px; min-width: 0; }
.ba-pair-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--e-radius-sm); background: var(--e-surface-2); }
.ba-pair.ba-r-4x3 .ba-pair-media { aspect-ratio: 4 / 3; } .ba-pair.ba-r-16x9 .ba-pair-media { aspect-ratio: 16 / 9; }
.ba-pair.ba-r-1x1 .ba-pair-media { aspect-ratio: 1 / 1; } .ba-pair.ba-r-3x4 .ba-pair-media { aspect-ratio: 3 / 4; }
.ba-pair-media > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba-pair-label { font-size: .82em; font-weight: 700; color: var(--e-ink-2); text-align: center; }
@media (max-width: 300px) { .ba-pair { grid-template-columns: 1fr; } }