/* G102 repair reveal: two aligned photographs, one vertical comparison boundary. */
.repair-figure.compare-figure{display:flex;flex-direction:column;gap:0;min-width:0}
.repair-comparison{--split:50%;position:relative;flex:0 0 auto;aspect-ratio:1;min-height:510px;overflow:hidden;background:#d6d5d0;isolation:isolate;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.compare-image,.compare-after{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.repair-comparison .compare-image{object-fit:cover;object-position:center;filter:none!important;transform:none!important;transition:none;min-height:0}
.compare-after{clip-path:inset(var(--split) 0 0 0);z-index:1;will-change:clip-path}
.compare-frame{position:absolute;inset:15px;border:1px solid #ffffff59;z-index:2;pointer-events:none}
.compare-frame:before,.compare-frame:after{content:'';position:absolute;width:22px;height:22px;border:solid #ffffffab;inset:-1px auto auto -1px;border-width:1px 0 0 1px}
.compare-frame:after{inset:auto -1px -1px auto;border-width:0 1px 1px 0}
.compare-model{position:absolute;top:29px;right:28px;z-index:3;color:#303b3c;font:9px var(--mono);letter-spacing:.12em;pointer-events:none}
.compare-label{position:absolute;left:29px;z-index:3;display:flex;align-items:center;gap:10px;color:#fff;background:#11191cce;border:1px solid #ffffff42;padding:8px 11px;pointer-events:none;font-size:10px;line-height:1.4;transition:opacity .25s}
.compare-label strong{font:9px var(--mono);letter-spacing:.09em}
.compare-label span{border-left:1px solid #ffffff44;padding-left:10px}
.compare-label-before{top:28px}.compare-label-after{bottom:28px}
.repair-comparison[data-end="after"] .compare-label-before,.repair-comparison[data-end="before"] .compare-label-after{opacity:0}
.compare-divider{position:absolute;left:0;right:0;top:var(--split);height:48px;transform:translateY(-50%);z-index:5;cursor:ns-resize;touch-action:none;outline:none}
.compare-divider:before{content:'';position:absolute;left:0;right:0;top:23px;height:2px;background:#fff;box-shadow:0 0 12px #ffffffbd,0 0 28px #ffffff6b;pointer-events:none}
.compare-divider:after{content:'';position:absolute;left:0;right:0;bottom:25px;height:42px;background:linear-gradient(0deg,#ffffff40,transparent);pointer-events:none}
.compare-handle{position:absolute;left:50%;top:0;transform:translateX(-50%);width:48px;height:48px;background:#f8f8f2f0;border:1px solid #fff;color:#1c2a28;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:0 3px 17px #1020163d;z-index:1}
.compare-handle svg{width:16px;height:26px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.compare-hint{position:absolute;left:calc(50% + 35px);top:13px;font-size:9px;line-height:22px;color:#fff;background:#152023c9;padding:0 8px;border-radius:2px;white-space:nowrap;pointer-events:none;transition:opacity .3s}
.repair-comparison.is-dragging .compare-hint{opacity:0}
.compare-divider:focus-visible .compare-handle{outline:3px solid var(--bronze);outline-offset:4px}
.repair-comparison[data-end="before"] .compare-divider{top:calc(100% - 24px)}
.repair-comparison[data-end="after"] .compare-divider{top:24px}
.repair-comparison[data-end] .compare-divider:before,.repair-comparison[data-end] .compare-divider:after{opacity:0}
.compare-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0 3px}
.compare-presets{display:flex;align-items:center;gap:0}
.compare-presets button{font-size:10px;border:1px solid var(--line);background:none;min-height:34px;padding:6px 12px;color:var(--muted)}
.compare-presets button+button{border-left:0}
.compare-presets button[aria-pressed="true"]{background:var(--surface-2);color:var(--ink)}
.compare-auto{display:flex;align-items:center;gap:7px;font-size:10px;min-height:34px;color:var(--bronze);border:0;background:none;padding:5px 0 5px 10px}
.compare-auto>span:first-child{font:12px var(--mono)}
.compare-figure figcaption{line-height:1.7;margin-top:9px;gap:10px}
.compare-figure figcaption>span:first-child{font-size:10px;color:var(--muted)}
.compare-figure figcaption>span:last-child{font-size:8px;color:var(--muted);text-align:right}
@media(min-width:641px) and (max-width:1100px){.repair-comparison{min-height:505px}.compare-label{left:22px;font-size:9px;padding:7px 8px;gap:7px}.compare-label strong{font-size:8px}.compare-label span{padding-left:7px}.compare-model{right:23px;font-size:8px}.compare-hint{font-size:8px;padding:0 6px;left:calc(50% + 29px)}.compare-handle{width:44px;height:44px;top:2px}.compare-auto,.compare-presets button{font-size:9px}.compare-presets button{padding:6px 8px}}
@media(max-width:640px){.repair-comparison{flex:none;min-height:0;height:auto;aspect-ratio:4/5}.compare-frame{inset:11px}.compare-model{right:23px;top:25px;font-size:8px}.compare-label{left:23px;padding:7px 9px;font-size:9px;gap:8px}.compare-label strong{font-size:8px}.compare-label-before{top:22px}.compare-label-after{bottom:22px}.compare-label span{padding-left:8px}.compare-hint{font-size:8px;left:calc(50% + 31px);padding:0 6px}.compare-handle{width:44px;height:44px;top:2px}.compare-controls{padding-top:10px}.compare-figure figcaption>span:first-child{font-size:9px}.compare-figure figcaption>span:last-child{font-size:7px}}
@media(max-width:360px){.compare-label{left:18px;font-size:8px;gap:5px}.compare-label strong{font-size:7px}.compare-model{font-size:7px;right:18px}.compare-hint{font-size:7px;left:calc(50% + 28px);padding:0 5px}.compare-figure figcaption{display:block}.compare-figure figcaption>span{display:block;text-align:left!important}}
@media print{.compare-figure{display:none}}

@media(min-width:1101px){.repair-parts{display:flex;flex-direction:column}.repair-parts .parts-grid{flex:1;grid-template-rows:repeat(3,minmax(166px,1fr))}}
