/* A single scroll area keeps bank contents usable on short screens. */
#bank-panel{height:min(660px,94%);overflow:hidden;min-height:0;gap:0}
#bank-panel>.bank-heading{flex:0 0 auto;gap:10px;padding-bottom:8px}
#bank-panel>.bank-heading>div{min-width:0}
#bank-panel>.bank-heading>.equipment-trade-tools{flex:0 0 auto;margin:0 0 0 auto;padding:0;border:0}
#bank-panel>.bank-heading>.equipment-trade-tools button{min-height:36px;padding:6px 8px;font-size:11px}
#bank-panel #bank-tools-toggle{display:none;flex:0 0 auto;background:#283b2b;border:1px solid #788b5e;color:#e7d9ad;padding:6px 8px;font:11px Georgia,serif;min-height:36px}
#bank-panel>.bank-heading h2{margin:2px 0;line-height:1.2;overflow-wrap:anywhere}
#bank-panel #bank-close{flex:0 0 auto;min-width:40px;min-height:40px}
#bank-panel .bank-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#667557 transparent;scrollbar-gutter:stable;padding-right:4px}
#bank-panel .bank-summary{gap:5px 12px;flex-wrap:wrap;padding:7px 0;font-size:11px}
#bank-panel .bank-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;margin:0 0 6px;gap:4px;padding-bottom:4px}
#bank-panel .bank-tabs button{flex:0 0 auto;width:auto;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:32px;font-size:12px}
#bank-panel .bank-tools{margin:0 0 8px;border:1px solid #465b44;border-radius:3px;background:#1c2d23}
#bank-panel .bank-tools>summary{cursor:pointer;padding:7px 9px;font:12px/1.4 Arial,sans-serif;color:#ddd2ac;min-height:32px}
#bank-panel .bank-tools[open]>summary{border-bottom:1px solid #465b44}
#bank-panel .bank-tools>:not(summary){margin:8px 10px}
#bank-panel .bank-tools>.muted{display:block;font:11px/1.5 Arial,sans-serif}
#bank-panel .bank-tab-editor{gap:6px;min-width:0}
#bank-panel .bank-tab-editor input{min-width:100px;width:140px;max-width:100%;font:13px Arial,sans-serif}
#bank-panel .bank-tab-editor button{min-height:32px;padding:6px 9px}
#bank-panel .bank-tools .bank-instructions{font:11px/1.5 Arial,sans-serif}
#bank-panel .bank-tools .equipment-trade-tools{display:flex;position:static;padding:0}
#bank-panel .bank-scroll #bank-grid{height:auto;max-height:none;overflow:visible;flex:none;grid-template-columns:repeat(10,minmax(0,1fr));padding:2px;gap:4px}
#bank-panel #bank-item-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:14px;line-height:1.4;font-size:11px;margin:6px 0 0}
#bank-panel>.bank-actions{flex:0 0 auto;display:flex;flex-wrap:nowrap;gap:6px;padding-top:7px}
#bank-panel>.bank-actions button{min-width:0;flex:1 1 0;min-height:36px;white-space:normal;padding:7px 8px;font:12px/1.3 Georgia,serif;overflow-wrap:anywhere}
#bank-panel>.bank-actions #compact-bank-satchel{margin:0}
.compact-ui .viewport>#bank-panel.interface-panel{height:min(660px,calc(var(--compact-height,100dvh) - var(--header-height) - var(--compact-bar) - 16px));overflow:hidden;padding:10px}
.compact-ui #bank-panel .bank-scroll #bank-grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));height:auto;max-height:none;overflow:visible}
.compact-ui #bank-panel .bank-tabs button,.compact-ui #bank-panel .bank-tools>summary,.compact-ui #bank-panel .bank-tab-editor button{min-height:40px}
.compact-ui #bank-panel>.bank-actions button{min-height:44px;font-size:12px}
.compact-ui #bank-panel .bank-heading>div>span{font-size:8px;letter-spacing:1px}
.compact-ui #bank-panel .bank-heading h2{font-size:22px}
.compact-ui #bank-panel .bank-tools .compact-note{font:12px/1.5 Arial,sans-serif}
@media(max-height:600px){
 #bank-panel>.bank-heading{padding-bottom:5px}
 #bank-panel>.bank-heading h2{font-size:22px}
 #bank-panel>.bank-heading>div>span{display:none}
 #bank-panel #bank-item-name{margin-top:3px}
 #bank-panel>.bank-actions{padding-top:4px}
 .compact-ui #bank-panel .bank-heading h2{font-size:19px}
}
/* On short, wide displays use the title row for the optional tools toggle,
   leaving at least a complete first item row in view before any scrolling. */
@media(max-height:800px) and (min-width:700px){
 #bank-panel #bank-tools-toggle{display:block}
 #bank-panel>.bank-heading{padding-bottom:5px}
 #bank-panel>.bank-heading h2{font-size:22px}
 #bank-panel>.bank-heading>div>span{display:none}
 #bank-panel .bank-tools>summary{display:none}
 #bank-panel .bank-tools:not([open]){display:none}
}
@media(max-height:500px) and (min-width:700px){
 #bank-panel .bank-summary{display:none}
 #bank-panel:has(.bank-tools[open]) .bank-summary{display:flex}
 #bank-panel .bank-tabs{margin-bottom:2px;padding-bottom:0}
}

/* On phones/tablets, bank transfers share one persistent view switcher. Keep
   the bank session open while displaying just one inventory surface at a time. */
#compact-bank-switcher{display:none}
.compact-ui[data-compact-bank] #compact-dock{display:none}
.compact-ui[data-compact-bank] #compact-bank-switcher{display:flex;position:absolute;bottom:0;left:0;right:0;height:var(--compact-bar);padding:4px max(6px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));gap:4px;z-index:91;background:#15241f;border-top:1px solid #788263}
.compact-ui #compact-bank-switcher button{flex:1;min-width:0;min-height:44px;padding:4px;font:12px Georgia,serif;background:#233a2c;border:1px solid #53684c;border-radius:4px;color:#e9d6a6}
.compact-ui #compact-bank-switcher button[aria-pressed=true]{background:#50613d;border-color:#d8c187}
.compact-ui[data-compact-bank] #compact-bank-satchel,.compact-ui[data-compact-bank] #bank-panel .equipment-trade-tools,.compact-ui[data-compact-bank] #equipment-trade-return{display:none}
.compact-ui[data-compact-bank=satchel] #bank-panel,.compact-ui[data-compact-bank=equipment] #bank-panel{display:none!important}
.compact-ui[data-compact-bank=satchel] main>aside{left:50%;right:auto;transform:translateX(-50%);top:calc(var(--compact-offset,0px) + var(--header-height) + 8px);width:min(600px,calc(100% - 20px));height:calc(var(--compact-height,100dvh) - var(--header-height) - var(--compact-bar) - 16px);border:1px solid #788b5e;border-radius:4px}
.compact-ui[data-compact-bank=satchel] main>aside>.compact-heading,.compact-ui[data-compact-bank=satchel] main>aside>nav,.compact-ui[data-compact-bank=satchel] main>aside>.aside-bottom{display:none}
.compact-ui[data-compact-bank=satchel] #pack>.compact-note{display:none}
.compact-ui[data-compact-bank=satchel] #pack::before{content:'Satchel · choose items to deposit';font:18px Georgia,serif;color:#e3c88c;display:block;padding-bottom:6px}
.compact-ui[data-compact-bank=satchel] #inventory{grid-template-columns:repeat(4,minmax(0,1fr))}
.compact-ui[data-compact-bank=satchel] #inventory .slot{max-height:86px}
.compact-ui[data-compact-bank] .bank-tools .compact-note{display:none}