/* Town storage (item 53, src/storage-ui.js) inside the merchant's conversation card: the bag and the storage side by
   side (tabs below 720 px), one row per item with the amount picker and the deposit/withdraw button.
   Same parchment, wood and leaf-green language as the card. */
.city-npc-dialog[data-panel=storage]{width:min(980px,calc(100vw - 28px))}
.city-npc-dialog[data-panel=storage] .city-npc-panel{max-height:min(90dvh,700px)}
.city-npc-dialog[data-panel=storage] .city-npc-greeting{display:none}
.city-npc-dialog .city-npc-storage::before{content:'▣';content:'▣'/'';margin-right:8px;color:var(--npc-gold);font-size:16px;line-height:1}
.storage-panel{display:flex;flex-direction:column;gap:10px;margin-top:10px;min-width:0}
.storage-loading,.storage-empty{margin:0;padding:18px 10px;text-align:center;color:var(--npc-muted);font-weight:700}
.storage-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,240px);gap:4px 16px;align-items:center;padding:10px 16px;border:2px solid #d9bd85;border-radius:16px;background:linear-gradient(135deg,#fdf5e2,#f0dfbb);box-shadow:inset 0 0 0 3px #fffaf0,0 3px 0 #d8c39a}
.storage-title{margin:0;font-size:20px;font-weight:900;color:var(--npc-green-dark)}
.storage-slots{grid-column:1;margin:0;font-size:13px;font-weight:700;color:var(--npc-muted)}
.storage-load{grid-column:2;grid-row:1/span 2;display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:800;color:var(--npc-ink)}
.storage-load-bar{display:block;height:10px;border:1px solid #c9a55a;border-radius:6px;background:#efe2c4;overflow:hidden}
.storage-load-fill{display:block;height:100%;background:linear-gradient(90deg,#6fae5e,#3f7d4c)}
.storage-load[data-full=true] .storage-load-fill{background:linear-gradient(90deg,#e0a14b,#c0533a)}
.storage-closed{margin:0;padding:8px 12px;border:1px solid #e1a58f;border-radius:10px;background:#fff1ea;color:#8a2f1d;font-weight:800}
.storage-tabs{display:none;gap:8px}
.city-npc-dialog .storage-tab{flex:1 1 0;min-height:40px}
.city-npc-dialog .storage-tab.active,.city-npc-dialog .storage-tab.active:hover:not(:disabled){border-color:var(--npc-gold);background:linear-gradient(#4b8559,#2f5b3e);color:#fff6df}
.storage-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;min-width:0}
.storage-column{display:flex;flex-direction:column;gap:6px;min-width:0;padding:8px;border:2px solid #dcc39a;border-radius:14px;background:#fffbf2}
.storage-column-title{margin:0 4px;font-size:14px;font-weight:900;color:var(--npc-green)}
.storage-list{display:flex;flex-direction:column;gap:6px;max-height:min(46dvh,360px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c9a55a #0000}
.storage-row{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-areas:'art info' 'tools tools';gap:4px 10px;align-items:center;padding:6px 8px;border:1px solid #e4cf9f;border-radius:12px;background:linear-gradient(#fffdf7,#f8eed8)}
.storage-art{grid-area:art;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#f0e2c2;color:var(--npc-muted);font-size:18px;overflow:hidden}
.storage-art img{width:100%;height:100%;object-fit:contain}
.storage-info{grid-area:info;display:flex;flex-direction:column;min-width:0}
.storage-name{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.storage-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--npc-muted);font-weight:700}
.storage-refine{color:#b0631c}
.storage-tools{grid-area:tools;display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.city-npc-dialog .storage-step{min-width:36px;min-height:36px;padding:4px 8px;font-size:18px}
.city-npc-dialog .storage-all{min-height:36px;padding:6px 10px;font-size:12px}
.storage-qty{min-width:42px;text-align:center;font-weight:900}
/* The card's generic button hover is more specific than a class: the hover states are repeated here. */
.city-npc-dialog .storage-go,.city-npc-dialog .storage-go:hover:not(:disabled){min-height:36px;padding:6px 16px;border-color:var(--npc-gold);background:linear-gradient(#4b8559,#2f5b3e 55%,#264c33);color:#fff6df;box-shadow:inset 0 1px 0 #7fb489,0 2px 0 var(--npc-green-dark)}
.city-npc-dialog .storage-go[data-storage-action=withdraw],.city-npc-dialog .storage-go[data-storage-action=withdraw]:hover:not(:disabled){background:linear-gradient(#83582f,#5d3a20 60%,#4a2d18);box-shadow:inset 0 1px 0 #b98a57,0 2px 0 #34200f}
.city-npc-dialog .storage-go:disabled,.city-npc-dialog .storage-step:disabled,.city-npc-dialog .storage-all:disabled{opacity:.5;cursor:default}
.storage-note{margin:0 4px;font-size:12px;color:var(--npc-muted);font-weight:700}
/* Below 720 px: one side at a time behind the two tabs. */
@media(max-width:719px){
 .storage-tabs{display:flex}
 .storage-columns{grid-template-columns:minmax(0,1fr)}
 .storage-panel[data-tab=carried] .storage-column[data-side=stored],.storage-panel[data-tab=stored] .storage-column[data-side=carried]{display:none}
 .storage-head{grid-template-columns:minmax(0,1fr)}
 .storage-load{grid-column:1;grid-row:auto}
 .storage-list{max-height:min(40dvh,320px)}
}
/* Short landscape screens: one side at a time too, each row on one line, the list keeps the panel inside the viewport. */
@media(max-height:500px){
 .storage-tabs{display:flex}.city-npc-dialog .storage-tab{min-height:34px;padding:4px 12px}
 .storage-columns{grid-template-columns:minmax(0,1fr)}
 .storage-panel[data-tab=carried] .storage-column[data-side=stored],.storage-panel[data-tab=stored] .storage-column[data-side=carried]{display:none}
 .storage-column-title{display:none}
 .storage-row{grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:'art info tools';padding:4px 8px}.storage-art{width:36px;height:36px}
 .storage-list{max-height:calc(100dvh - 230px);min-height:84px}
 .storage-head{padding:6px 12px}.storage-title{font-size:17px}
}