/* Osmo Fixed Underlay Navigation, scoped to Heavy Hits side drawers. */
body[data-menu-status="open"] { overflow-x: clip; }
.hh-underlay-surface { translate: var(--hh-underlay-x, 0px) 0; }
.hh-underlay-panel.hh-underlay-present {
  clip-path: var(--hh-underlay-clip, inset(0));
  transition: none !important;
  max-width: min(var(--hh-underlay-limit, 100vw), calc(100vw - 24px)) !important;
}
.hh-underlay-panel::backdrop { background: transparent; backdrop-filter:none; }
.hh-underlay-crate-root {
  background: transparent !important;
  backdrop-filter: none !important;
  pointer-events: none;
  z-index: 2147483647 !important;
  transition: none !important;
}
.hh-underlay-crate-root.hh-underlay-present { display:block !important; opacity:1 !important; }
.hh-underlay-crate-root.hh-underlay-closed { visibility:hidden !important; }
.hh-underlay-crate-root .hh-underlay-panel.hh-underlay-present {
  display:flex !important; pointer-events:auto; transform:none !important; opacity:1 !important;
}
.hh-underlay-overlay {
  position: fixed; inset: 0; z-index: 2147483646;
  visibility:hidden; pointer-events:none; overflow:clip;
  translate: var(--hh-underlay-x, 0px) 0;
}
.hh-underlay-overlay.is-active { visibility:visible; pointer-events:auto; }
.hh-underlay-overlay .underlay-nav__dark { position:absolute; inset:0; background:rgba(4,6,15,.48); opacity:0; }
.hh-underlay-overlay .underlay-nav__borders { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; }
.hh-underlay-overlay .underlay-nav__border-row { display:flex; justify-content:flex-end; }
.hh-underlay-overlay .underlay-nav__corner { display:block; width:20px; height:20px; transform-origin:100% 0; background-image:radial-gradient(circle farthest-side at 0 100%,transparent 99%,var(--hh-underlay-frame,#141622)); }
.hh-underlay-overlay .underlay-nav__corner.is--bottom { transform-origin:100% 100%; background-image:radial-gradient(circle farthest-side at 0 0,transparent 99%,var(--hh-underlay-frame,#141622)); }
body[data-underlay-side="left"] .hh-underlay-overlay .underlay-nav__border-row { justify-content:flex-start; }
body[data-underlay-side="left"] .hh-underlay-overlay .underlay-nav__corner { rotate:y 180deg; }
@media(prefers-reduced-motion:reduce) { .hh-underlay-overlay .underlay-nav__dark { opacity:1 !important; } }
@media(forced-colors:active) { .hh-underlay-panel.hh-underlay-present { border:1px solid CanvasText; } .hh-underlay-overlay .underlay-nav__corner { display:none; } }

/* Owner-selected flat side drawers. Controls and content cards keep their own UI. */
.hh-underlay-panel,
.hh-underlay-panel > :is(header, footer, .gp-drawer-header, .gp-drawer-footer),
#crate-offcanvas .hh-underlay-panel > :first-child {
  border: 0 !important;
  border-radius: 0 !important;
}
.hh-underlay-overlay .underlay-nav__corner { display: none; }
/* Owner-selected: zinc-950 in dark mode. */
.dark .hh-modern-ui .hh-underlay-panel {
  background-color: oklch(14.1% 0.005 285.823) !important;
}
.dark .hh-modern-ui .hh-underlay-panel > :is(header, footer, .gp-drawer-header, .gp-drawer-footer),
.dark .hh-modern-ui #crate-offcanvas .hh-underlay-panel > :first-child {
  background-color: inherit;
}

/* Fill the drawer with a scrolling list above a stationary export footer. */
#crate-offcanvas .hh-underlay-panel { overflow: hidden; }
#crate-offcanvas .hh-underlay-panel > .relative {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
}
#crate-offcanvas .hh-underlay-panel > .relative > :first-child {
  flex: 1 1 0%;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#crate-offcanvas .hh-underlay-panel > .relative > :first-child > ul {
  height: auto;
  min-height: 100%;
  flex-shrink: 0;
}
#crate-offcanvas .hh-underlay-panel > .relative > :not(:first-child) { flex-shrink: 0; }
#crate-offcanvas .hh-underlay-panel #zip-progress {
  margin-top: auto;
  height: auto;
  min-height: 72px;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

/* Crate rows: no dividers (owner); version badges match the Beta badge. */
#crate-offcanvas .hh-crate-item { border-bottom-width: 0; }
/* Slightly tighter artist / title / mix stack (was 16px / 20px / 16px). */
#crate-offcanvas .hh-crate-item .text-xs { line-height: .9375rem; }
#crate-offcanvas .hh-crate-item .text-sm { line-height: 1.125rem; }
.hh-crate-version {
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--hh-accent, #5145cd) 12%, transparent);
  color: var(--hh-accent, #5145cd);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
}
.dark .hh-crate-version { color: color-mix(in srgb, var(--hh-accent, #5145cd) 50%, white); }