/* The Items page's catalog picker (inventory/_catalog_picker.html): type, see the official items with their
   pictures, pick one. */
.catpick__search { position: relative; }
.catpick__list { list-style: none; margin: 6px 0 0; padding: 4px; max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.catpick__opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--r-xs); background: transparent; text-align: left; cursor: pointer; }
.catpick__opt:hover, .catpick__opt:focus-visible { background: var(--panel-2); }
.catpick__pic { position: relative; width: 36px; height: 36px; flex: none; object-fit: contain; border-radius: 8px; background: var(--panel-2); }
.catpick__pic::before { content: ""; position: absolute; inset: 0; background: var(--panel-2); border-radius: inherit; } /* a picture that does not load shows the tile */
.catpick__text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.catpick__name { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catpick__meta { color: var(--ink-3); font-size: 12px; text-transform: capitalize; }
.catpick__meta .rarity { margin-left: 4px; text-transform: none; }
.catpick__chosen { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); }
.catpick__chosen .catpick__pic { width: 48px; height: 48px; background: var(--panel); }
.catpick__chosen .catpick__text { flex: 1; }
.catpick__none { margin-top: 6px; color: var(--ink-3); font-size: 12.5px; }
.catpick__warn { color: var(--warn); font-size: 12.5px; }
.catpick__meta > span + span:not(.rarity) { margin-left: 6px; text-transform: none; }
.catpick__chroma { background: linear-gradient(90deg, #ff5f6d, #ffc371, #47e5bc, #6a8dff, #c86dd7); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }