.custom-compare-toolbar{display:flex;gap:7px;margin:0 0 7px}.custom-compare-toolbar button{min-height:40px;border:1px solid #9cae9c;border-radius:7px;background:transparent;color:#fff;padding:8px 12px;font:600 12px system-ui;cursor:pointer}.custom-compare-toolbar #custom-compare-toggle{flex:1}.custom-compare-toolbar button[aria-pressed=true]{background:#f8f5ee;color:#233630}#custom-compare-help{font:11px/1.4 system-ui;color:#f8f5ee;margin:4px 0 8px}.custom-compare-frame{position:relative;clear:both;line-height:0;min-width:0}.custom-comparison{position:absolute;inset:0;z-index:4;overflow:hidden;touch-action:none;cursor:ew-resize;direction:ltr;--compare-split:50%}.custom-comparison[hidden],.custom-comparison [hidden]{display:none!important}.custom-comparison .custom-before{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;margin:0;background:#e9dfd0;clip-path:inset(0 calc(100% - var(--compare-split)) 0 0);pointer-events:none}.custom-comparison .custom-before-label,.custom-comparison .custom-after-label{position:absolute;top:8px;background:#162a22e8;color:#fff;border-radius:5px;padding:6px 9px;font:600 11px/1.2 system-ui;pointer-events:none}.custom-before-label{left:8px}.custom-after-label{right:8px}.custom-compare-line{position:absolute;left:var(--compare-split);top:0;bottom:0;width:2px;transform:translateX(-1px);background:white;box-shadow:0 0 5px #0007;pointer-events:none}.custom-compare-line>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:white;color:#233630;box-shadow:0 2px 10px #0005;font:700 25px/1 system-ui}.custom-comparison:focus-visible{outline:3px solid #b48456;outline-offset:-3px}.custom-compare-toolbar button:focus-visible{outline:3px solid #b48456;outline-offset:2px}@media print{.custom-comparison,.custom-compare-toolbar,#custom-compare-help{display:none!important}}

/* Compact preview controls on mobile. */
@media (max-width:760px){
 .planner-view-controls{gap:4px;margin-bottom:4px}
 .planner-view-controls button,
 .planner-view-controls #planner-reset-all,
 .custom-compare-toolbar button{min-height:30px;padding:5px 8px;border-radius:5px;font-size:11px;line-height:18px}
 .custom-compare-toolbar{gap:4px;margin-bottom:4px}
}