/* Black and White Photo Converter; the editor itself is shared/photo-edit.css. */
.bw-tool{--bw-height:70vh}
.bw-tool__compare{
    --bw-ratio:1.5;
    --split:50%;
    position:relative;
    width:min(100%,calc(var(--bw-height) * var(--bw-ratio)));
    aspect-ratio:var(--bw-ratio);
    margin-inline:auto;
    overflow:hidden;
    border-radius:8px;
    background:#eef1f4;
    /* A sideways drag compares, an upward swipe still scrolls the page. */
    touch-action:pan-y;
    cursor:ew-resize;
    user-select:none;
    -webkit-user-select:none;
}
.bw-tool__compare canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.bw-tool__compare canvas:last-of-type{clip-path:inset(0 0 0 var(--split))}
.bw-tool__tag{position:absolute;top:8px;padding:2px 8px;border-radius:4px;background:rgba(23,33,43,.78);color:#fff;font-size:12px;font-weight:700;pointer-events:none}
.bw-tool__tag--before{left:8px}
.bw-tool__tag--after{right:8px}
.bw-tool__handle{position:absolute;top:0;bottom:0;left:var(--split);width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 0 1px #17212b;pointer-events:none}
.bw-tool__split{display:block;margin-top:8px;color:var(--pe-muted);font-size:11px;font-weight:800}
.bw-tool input[type="range"]{display:block;width:100%;min-height:44px;margin:0;accent-color:var(--pe-blue);touch-action:pan-y}
.bw-tool__presets,
.bw-tool__filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:12px}
.bw-tool__presets{grid-template-columns:repeat(2,minmax(0,1fr))}
.bw-tool__presets button{
    min-height:44px;
    padding:0 4px;
    border:1px solid #d2cdd9;
    border-radius:9px;
    background:#fff;
    color:var(--pe-text);
    font-size:13px;
    font-weight:800;
    cursor:pointer;
}
.bw-tool__presets button[aria-pressed="true"]{border-color:var(--pe-blue);background:var(--pe-blue-soft);color:var(--pe-blue-dark)}
.bw-tool__filters legend{grid-column:1 / -1}
.bw-tool__slider{display:flex;align-items:center;gap:8px}
.bw-tool__slider input[type="range"]{flex:1 1 auto;min-width:0}
.bw-tool__slider .photo-edit__secondary{flex:none;padding:0 10px}
/* The button carries the save's progress, so its text stays readable while it is disabled. */
.bw-tool .photo-edit__primary:disabled{opacity:1}
@media(max-width:600px){
    .bw-tool{--bw-height:min(260px,35svh)}
}