/* Compare component (spec 7.3). Linked by base.njk whenever a page loads compare.js. */
.compare { margin: 0; }
.compare__frame { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.compare__layer { position: relative; }
.compare__layer[hidden] { display: none; }
.compare__layer img { width: 100%; }
.compare__tag { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 6px 10px; border-radius: 3px; background: rgba(26,18,11,.86); color: var(--on-dark); font: 700 14px/1.2 var(--font-ui); letter-spacing: .03em; pointer-events: none; }
.compare.is-live .compare__frame { grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; border-radius: 2px; }
.compare.is-live .compare__layer { grid-area: 1 / 1; }
.compare--slider.is-live .compare__before { z-index: 2; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.compare--slider.is-live .compare__tag--r { left: auto; right: 12px; }
.compare--toggle.is-live .compare__layer { opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; }
.compare--toggle.is-live .compare__layer.is-shown { opacity: 1; visibility: visible; }
.compare__range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; background: transparent; }
.compare__range[hidden] { display: none; }
.compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 44px; }
.compare__range::-moz-range-thumb { width: 2px; height: 44px; border: 0; }
.compare__handle { display: none; }
.compare--slider.is-live .compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); z-index: 3; display: block; width: 2px; margin-left: -1px; background: var(--on-dark); box-shadow: 0 0 0 1px rgba(26,18,11,.3); pointer-events: none; }
.compare__knob { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: var(--r-btn); background: var(--on-dark); color: var(--deep); box-shadow: var(--shadow); }
.compare__range:focus-visible + .compare__handle .compare__knob { outline: 3px solid var(--link); outline-offset: 2px; box-shadow: 0 0 0 7px var(--on-dark); }
.compare__cap { max-width: 44em; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; padding: 4px; border: 1px solid var(--c-rule-2); border-radius: var(--r-card); background: var(--c-card); }
.seg[hidden] { display: none; }
.seg__btn { min-height: 44px; padding: 8px 14px; border: 0; border-radius: var(--r-btn); background: transparent; cursor: pointer; font: 600 15px/1.2 var(--font-ui); color: var(--c-text); }
.seg__btn:hover { background: var(--c-rule); }
.seg__btn[aria-pressed="true"] { background: var(--c-btn); color: var(--c-btn-fg); }