/* Edge movement is private to the sheet/control. It must not invalidate all
   rows/cards via an inherited custom property on every pointer frame. */
@property --peek { syntax:'<length>'; inherits:false; initial-value:0px; }
.edge-entry::before { --peek:inherit; }
.sheet-scroll { contain:layout paint; }
:is(body, body:has(#theme-toggle-input:checked)):is([data-view=detail],[data-view=compare]) .edge-sheet:not(.is-closing) {
  visibility:hidden;opacity:0;pointer-events:none;
}
:is(body, body:has(#theme-toggle-input:checked)):is([data-view=detail],[data-view=compare]) .edge-sheet:not(.is-closing)>.sheet-scroll {
  content-visibility:hidden;
}
/* Keep an edge page paintable during its final 850 ms slide when the next
   route is the compare sheet. Without this exception the compare route's
   preview-hiding rule makes portrait garage/ranking exits appear to teleport. */
:is(body, body:has(#theme-toggle-input:checked)):is([data-view=detail],[data-view=compare]) .edge-sheet.is-closing {
  visibility:visible!important;opacity:1!important;pointer-events:none;
}
:is(body, body:has(#theme-toggle-input:checked)):is([data-view=detail],[data-view=compare]) .edge-sheet.is-closing>.sheet-scroll {
  content-visibility:visible!important;
}
.rank-row { content-visibility:auto; contain-intrinsic-size:auto 72px; }
/* Garage photographs share a 4:3 viewport and keep their intrinsic shape.
   Cutouts get a uniform cover scale before the viewport clips their edges. */
.vehicle-cell .panel-image,
.compare-vehicle .panel-image { aspect-ratio:4 / 3; overflow:hidden; }
/* Keep every card's image inside the same 4:3 window without stretching.
   Cover crops a photo at its intrinsic ratio; transparent archive cutouts
   retain their measured crop math below. */
.vehicle-cell .panel-image > img { width:100%;height:100%;max-height:none;object-fit:cover; }
.vehicle-cell .panel-image--archive .panel-image-crop {
  left:50%!important;top:50%!important;
  width:max(100%,calc(100% * var(--photo-ratio, 1.333333) * .75))!important;
  height:max(100%,calc(100% * 1.333333 / var(--photo-ratio, 1.333333)))!important;
  transform:translate(-50%,-50%);
}
/* The canvas owns touch panning; page/nav controls retain their native actions. */
.home-scene, .float-field, .float-tile { touch-action:none; }
#ranking-load-more { min-height:44px; }

/* Animate the garage's expandable "more conditions" panel. The native
   details element normally toggles display instantly, so keep the grid in
   the flow with a zero max-height and fade/slide both directions. */
.filter-more { overflow:visible; }
.filter-more > .filter-more-grid {
  display:grid!important;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(-5px);
  padding-top:0;
  padding-bottom:0;
  pointer-events:none;
  transition:max-height 360ms cubic-bezier(.22,.8,.32,1),
    opacity 220ms ease, transform 360ms cubic-bezier(.22,.8,.32,1),
    padding 360ms cubic-bezier(.22,.8,.32,1);
}
.filter-more[open] > .filter-more-grid {
  max-height:640px;
  opacity:1;
  transform:none;
  padding-bottom:7px;
  pointer-events:auto;
}
.filter-more > summary::after { transition:transform 260ms ease, color 180ms ease; }

/* Custom archive scrollbars. Firefox uses scrollbar-*; Chromium/WebKit uses
   the pseudo-elements. This covers the garage/ranking rails, the portrait
   filter panel, and the nested active/tier filter scrollers. */
:is(.sheet-scroll, .compare-scroll, .portrait-filter-toolbar,
    .portrait-filter-toolbar .collection-filters, .filter-more-grid,
    .active-filters, .tier-filters) {
  scrollbar-width:thin;
  scrollbar-color:var(--control-line, #85857a) transparent;
}
:is(.sheet-scroll, .compare-scroll, .portrait-filter-toolbar,
    .portrait-filter-toolbar .collection-filters, .filter-more-grid,
    .active-filters, .tier-filters)::-webkit-scrollbar { width:10px; height:10px; }
:is(.sheet-scroll, .compare-scroll, .portrait-filter-toolbar,
    .portrait-filter-toolbar .collection-filters, .filter-more-grid,
    .active-filters, .tier-filters)::-webkit-scrollbar-track { background:transparent; }
:is(.sheet-scroll, .compare-scroll, .portrait-filter-toolbar,
    .portrait-filter-toolbar .collection-filters, .filter-more-grid,
    .active-filters, .tier-filters)::-webkit-scrollbar-thumb {
  background:var(--control-line, #85857a);
  border:3px solid transparent;
  border-radius:999px;
  background-clip:padding-box;
  min-height:30px;
}
:is(.sheet-scroll, .compare-scroll, .portrait-filter-toolbar,
    .portrait-filter-toolbar .collection-filters, .filter-more-grid,
    .active-filters, .tier-filters)::-webkit-scrollbar-thumb:hover {
  background:var(--ink, #161614);
  border-width:2px;
}
@media (max-width:700px), (orientation:portrait) and (max-width:1100px) {
  .filter-more > .filter-more-grid { max-height:0; }
  .filter-more[open] > .filter-more-grid { max-height:520px; }

  /* portrait-ui keeps the semantic hidden attribute in sync with the
     toggle. Override its display only in this toolbar so the attribute can
     still be animated instead of making the panel teleport in/out. */
  .portrait-filter-toolbar .collection-filters {
    display:grid!important;
    transition:max-height 380ms cubic-bezier(.22,.8,.32,1),
      opacity 220ms ease, transform 380ms cubic-bezier(.22,.8,.32,1),
      visibility 0s linear 0s;
  }
  .portrait-filter-toolbar .collection-filters[hidden] {
    max-height:0!important;
    overflow:hidden!important;
    opacity:0;
    transform:translateY(-6px);
    visibility:hidden;
    pointer-events:none;
    transition:max-height 380ms cubic-bezier(.22,.8,.32,1),
      opacity 220ms ease, transform 380ms cubic-bezier(.22,.8,.32,1),
      visibility 0s linear 380ms;
  }
  .portrait-filter-toolbar .collection-filters:not([hidden]) {
    max-height:min(300px, calc((100dvh - var(--portrait-header-height, 60px) - var(--portrait-nav-height, 64px) - env(safe-area-inset-bottom, 0px) - 88px) * .5))!important;
    overflow:auto!important;
    opacity:1;
    transform:none;
    visibility:visible;
    pointer-events:auto;
  }
}
@media (max-width:700px), (orientation:portrait) and (max-width:1100px) {
  :is(body, body:has(#theme-toggle-input:checked)) .home-scene,
  :is(body, body:has(#theme-toggle-input:checked)) .float-field,
  :is(body, body:has(#theme-toggle-input:checked)) .float-tile { touch-action:none; }
}

/* The compare archive crop has its own intrinsic-ratio positioning. Keep it
   above the shared garage cover rule because this stylesheet is loaded last. */
.compare-vehicle .panel-image--archive .panel-image-crop {
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
}
.compare-vehicle .panel-image--story > img,
.compare-vehicle .panel-uncropped-image {
  object-fit:contain;
}