/* More room for the list without shrinking the item details or touch targets. */
#modal[data-view=bag]{width:min(1680px,98vw);max-width:none}
@media(min-width:1201px) and (pointer:fine){
 dialog#modal[data-view=bag][open],dialog#bagDisposalDialog[open],dialog#bagAutoSettings[open]{zoom:.85}
 :root[data-ui-size=large] #modal[data-view=bag],:root[data-ui-size=large] #bagDisposalDialog,:root[data-ui-size=large] #bagAutoSettings{zoom:1}
}
@media(min-width:1101px){
 #modal[data-view=bag] .arsenal-layout:has(.inventory-browser){grid-template-columns:minmax(230px,.8fr) minmax(370px,1.5fr) minmax(280px,1fr)}
}
#modal[data-view=bag] .bag-selection-modes{display:flex;gap:6px;margin-bottom:6px}
#modal[data-view=bag] .bag-selection-modes button{flex:1;min-height:38px;font-size:12px}
#modal[data-view=bag] .bag-selection-modes [aria-pressed=true]{background:#24505c;border-color:#8bd7d5;color:#e6ffff}
#modal[data-view=bag] .bag-selection-modes [data-bag-select=starred]{color:#ffdb8e}
#modal[data-view=bag] .bag-selection[data-starred=true]{border-color:#a48041}
#modal[data-view=bag] .arsenal-layout:has(.bag-selection){grid-template-columns:1fr}
#modal[data-view=bag] .arsenal-layout:has(.bag-selection)>.inventory-loadout,
#modal[data-view=bag] .arsenal-layout:has(.bag-selection)>.item-inspector{display:none}
#modal[data-view=bag] .arsenal-layout:has(.bag-selection)>.backpack{grid-column:1;width:100%}
#modal[data-view=bag] .inventory-browser:has(.bag-selection) .inventory-cards{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
#modal[data-view=bag] .inventory-browser:has(.bag-selection) .inventory-card{min-height:74px!important}
#modal[data-view=bag] .inventory-browser:has(.bag-selection) .inventory-card-art{height:60px}
#modal[data-view=bag] .inventory-browser:has(.bag-selection) .inventory-card-art .item-art{width:56px!important;height:56px!important}
@media(min-width:681px) and (min-height:480px){
 #modal[data-view=bag][open]{height:96dvh;max-height:96dvh}
 #modal[data-view=bag] .inventory-browser:has(.bag-selection){overflow:hidden}
 #modal[data-view=bag] .inventory-browser:has(.bag-selection) #inventoryResults{flex:1;min-height:160px;overflow:auto}
 #modal[data-view=bag] .bag-selection-total{display:flex;align-items:center;flex-wrap:wrap}
 #modal[data-view=bag] .bag-selection-total strong{margin-right:auto}
 #modal[data-view=bag] .bag-selection-tools button{min-height:32px!important}
}
@media(max-width:680px){
 #modal[data-view=bag] .arsenal-layout:has(.bag-selection) .inventory-browser{overflow:visible}
 #modal[data-view=bag] .backpack:has(.bag-selection) .bag-selection{position:static}
 #modal[data-view=bag] .inventory-browser:has(.bag-selection) .inventory-cards{max-height:none;grid-template-columns:repeat(4,minmax(0,1fr))}
 #modal[data-view=bag] .bag-selection[data-starred=true] .bag-selection-total button{grid-column:1/-1}
}