/* Shared slot materials. No dimensions, padding, grid, positioning or icon sizing.
 * Explicit families exclude layout wrappers and buttons inside an item slot.
 */
:is(.ui-slot,.bank-slot,.inventory-slot,.inventory-bag-slot,.inventory-hero-bank-action,.inventory-tool-bag-shortcut,.equip-slot,.tool-slot,
    .character-equipment-slot,.fishing-pouch-slot,.trade-slot,.flea-market-slot,
    .live-trade-slots > button,.live-trade-empty) {
  background: linear-gradient(color-mix(in srgb,var(--mg-graphite-deep) 70%,transparent),color-mix(in srgb,var(--mg-graphite-deep) 70%,transparent)),
    var(--mg-image-slot) center / 100% 100% no-repeat var(--mg-graphite-deep) !important;
  border-image: none !important;
  border-color: var(--mg-slot-border-filled) !important;
  box-shadow: inset 0 0 0 1px var(--mg-slot-border-filled), inset 0 2px 4px var(--mg-shadow-soft) !important;
  color: var(--mg-text-main);

  &:where(.empty,.is-empty,.locked,.unlockable,.live-trade-empty),
  &:where(:is(.equip-slot,.tool-slot,.character-equipment-slot):not(.filled):not(.is-filled)),
  &:where(.flea-market-slot:not(.is-listed):not(.is-draft)) {
    background: var(--mg-slot-empty) !important;
    border-color: var(--mg-slot-border-empty) !important;
    box-shadow: inset 0 0 0 1px var(--mg-slot-border-empty), inset 0 2px 4px var(--mg-shadow-soft) !important;
    opacity: 1;
  }
  /* Empty space stays quiet on hover. Focus and actual selection still remain visible. */
  &:where(:not(.empty):not(.is-empty):not(.locked):not(.unlockable):is(.filled,.is-filled,.trade-slot,.is-listed,.is-draft,.inventory-hero-bank-action,.inventory-tool-bag-shortcut,.live-trade-slots > button)):hover,
  &:is(.selected,.is-selected,.is-multi-marked,.has-open-menu,.is-active-tool,[aria-selected=true],[aria-pressed=true]),
  &:focus-visible {
    border-color: var(--mg-amber) !important;
    box-shadow: inset 0 0 0 1px var(--mg-amber), inset 0 2px 4px var(--mg-shadow-soft) !important;
  }
  &.is-broken:not(.is-selected):not(.is-multi-marked):not(.has-open-menu) { border-color: var(--mg-danger) !important; }
  &:is(:disabled,[aria-disabled=true],.is-disabled) {
    border-color: var(--mg-slot-border-empty) !important;
    box-shadow: inset 0 1px 4px var(--mg-shadow-soft) !important;
  }
}
/* Keep empty inventory bag hints subdued. */
.inventory-bag-slot.empty img { opacity: .2; }
:is(.inventory-amount,.bank-amount,.equip-slot-amount,.trade-slot-stack) {
  color: var(--mg-text-main); text-shadow: 0 1px 2px var(--mg-graphite-deep), 0 0 3px var(--mg-graphite-deep);
  font-variant-numeric: tabular-nums;
}

/* Header shortcuts share the bag-slot geometry and material, not action-button chrome. */
body #inventoryOverlay .inventory-bank-hero :is(.inventory-bag-slot,.inventory-hero-bank-action,.inventory-tool-bag-shortcut) {
  box-sizing: border-box;
  width: 38px; height: 38px; min-width: 38px; min-height: 38px;
  flex: 0 0 38px; padding: 0; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
}
body #inventoryOverlay .inventory-bank-hero :is(.inventory-hero-bank-action,.inventory-tool-bag-shortcut) > :is(img,.item-composite-icon) {
  width: 23px; height: 23px; object-fit: contain;
}
body #inventoryOverlay .inventory-bank-hero :is(.inventory-hero-bank-action,.inventory-tool-bag-shortcut):hover {
  filter: none;
}