/* One unboxed control glides into the action rail. Its text replaces the label
   through a crossfade rather than replacing an element or adding a black box. */
.compare-sheet {
  --compare-base-height:80dvh;
  --compare-rail-height:66px;
  --compare-control-height:36px;
  --compare-dock-progress:0;
  --compare-label-exit:0;
  height:calc(var(--compare-base-height) + var(--compare-rail-offset,0px));
  transition:transform 850ms var(--ease),visibility 850ms;
}
.compare-sheet.rail-shifted { height:calc(var(--compare-base-height) + var(--compare-rail-offset,0px)); }
.compare-actionbar { min-height:var(--compare-rail-height); height:var(--compare-rail-height); flex-shrink:0; }
#compare-action-label {
  display:block;
  opacity:calc(1 - var(--compare-label-exit));
  transform:translate3d(0,calc(-8px * var(--compare-label-exit)),0);
  pointer-events:none;
}
#compare-close {
  position:fixed;
  --compare-dock-progress:0;
  --compare-control-height:36px;
  left:0;
  top:var(--compare-close-top,calc(80dvh + 16px));
  bottom:auto;
  z-index:55;
  width:max-content;
  max-width:calc(100% - 32px);
  height:var(--compare-control-height);
  min-height:var(--compare-control-height);
  display:none;
  align-items:center;
  gap:8px;
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  mix-blend-mode:difference;
  font-size:clamp(14px,1.1vw,18px);
  font-weight:600;
  line-height:1.3;
  white-space:nowrap;
  transform:translate3d(calc(var(--close-x,44vw) * (1 - var(--compare-dock-progress)) + var(--compare-dock-x,16px) * var(--compare-dock-progress)),0,0);
  transition:opacity 160ms;
}
#compare-close span { margin-left:0; }
#compare-close:hover { background:transparent; color:#fff; }
#compare-close:focus-visible { outline:1px solid currentColor; outline-offset:5px; }
/* Reserve separate slots for the following close and the right-hand action. */
.compare-actionbar>a { position:relative; z-index:3; flex-shrink:0; }
@media (max-width:700px) {
  .compare-sheet { --compare-base-height:85dvh; --compare-rail-height:62px; }
  #compare-close { font-size:12px; --close-x:15px; --compare-dock-x:15px; }
  #compare-close span { display:inline; }
  .compare-actionbar>a { font-size:15px; }
}
@media (max-height:560px) and (min-width:701px) { .compare-sheet { --compare-base-height:84dvh; } }
@media (pointer:coarse),(prefers-reduced-motion:reduce) {
  #compare-close { --close-x:16px; --compare-dock-x:16px; }
}

body[data-view=compare] #compare-close { display:inline-flex; animation:compare-control-enter 850ms var(--ease) both; }
@keyframes compare-control-enter { from { translate:0 -92dvh; } to { translate:0 0; } }
.compare-scroll { overflow-anchor:none; }
@media (max-width:700px) { @keyframes compare-control-enter { from { translate:0 -97.75dvh; } to { translate:0 0; } } }
@media (prefers-reduced-motion:reduce) { body[data-view=compare] #compare-close { animation:none; } }