/* Let the satchel use the space supplied by the resizable sidebar. Slot order
   and contents remain inventory-ui.js's responsibility; no resize loop or
   per-frame work is needed to lay out a normal or expanded inventory. */
#pack .inventory-space {
  min-width: 0;
  min-height: 0;
}

body:not(.compact-ui) #pack .inventory-space {
  container-type: size;
  flex: 1 1 auto;
  display: block;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

#pack #inventory {
  --satchel-cell-min: clamp(44px, 12cqw, 64px);
  --cell-size: auto;
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--satchel-cell-min)), 1fr));
  grid-template-rows: none;
  grid-auto-flow: row;
  grid-auto-rows: minmax(44px, 96px);
  align-content: start;
  align-items: stretch;
  justify-items: stretch;
  gap: 6px;
  padding: 2px;
  box-sizing: border-box;
}

#pack #inventory .slot {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 44px;
  max-height: none;
  aspect-ratio: auto;
}

#pack #inventory .slot svg {
  width: 72%;
  height: 72%;
  max-width: 64px;
  max-height: calc(100% - 12px);
  min-width: 0;
  min-height: 0;
}

/* Compact drawers scroll as a whole. Their natural-height grid uses the same
   fluid column minimum, with square touch targets rather than a fixed 4x7. */
body.compact-ui #pack .inventory-space {
  container-type: inline-size;
  display: block;
  flex: none;
  overflow: visible;
  scrollbar-gutter: auto;
}

body.compact-ui #pack #inventory {
  height: auto;
  grid-auto-rows: auto;
}

body.compact-ui #pack #inventory .slot {
  height: auto;
  min-height: 44px;
  max-height: none;
  aspect-ratio: 1;
}