/* EASTSCAPE: THE EVERYDAY WINDOWS, THE COOKING WAY (2026-10-17, v1.6, Round 16: ev_bag, ev_bank and ev_trade "cook", tools/tavern/BUILD16b.md).
   The owner loves today's cooking window (eastscape-st-cook.js), so the bag, the bank, the shops, the Exchange and the Store read its way, in BOTH
   looks: big pictures on FLAT cells (a light well when you have it, a quiet one when it is empty; never the wooden outline), headings as quiet
   eyebrows with counts, one card in one fixed place for the thing you are on, and ONE main button with its sum under it. Only the grammar is shared:
   every colour is the sys builder's shared --g-* token (eastscape-ui.css, its note at the top) or a --k-* ink, so Midnight
   keeps its night glass and the Tavern its parchment. Nothing here changes what a click does.
   Linked once from eastscape.html beside eastscape-ui.css; bump its ?v= there when this changes. The bank's own sheet is injected later by its
   module, so the bank rules here start "html body #bankWin" to outrank it. */

/* ---------------------------------------------------------------- THE CELL: the sys builder's shared grammar (eastscape-ui.css, --g-*): every .slot is
   already the flat cell with its count bottom right; these windows only keep their states on the same tokens (lit, quiet, picked, rolled, new) */
html body :is(#bankWin .bk-bgrid, #bankWin .bk-grid.sm, #bankWin .bk-sock, #bankWin .bk-card, #shopWin .grid8, #panel[data-tab="inv"] .inv) .slot{border:0;border-image:none;border-radius:0;outline:0;background:var(--g-cell);box-shadow:inset 0 0 0 1px var(--g-cell-line);filter:none}
html body :is(#bankWin .bk-bgrid, #bankWin .bk-grid.sm, #bankWin .bk-sock, #bankWin .bk-card, #shopWin .grid8, #panel[data-tab="inv"] .inv) .slot:not(.empty):not(.locked):not(.bk-pad){background:var(--g-cell-lit);box-shadow:inset 0 0 0 1px var(--g-cell-lit-line),var(--g-cell-sh)}
html body :is(#bankWin .bk-bgrid, #bankWin .bk-grid.sm, #bankWin .bk-sock, #shopWin .grid8, #panel[data-tab="inv"] .inv) .slot:not(.empty):not(.locked):not(.bk-pad):hover{background:var(--g-cell-lit);outline:0;box-shadow:inset 0 0 0 2px var(--g-sel),var(--g-cell-sh);z-index:2}
html body :is(#bankWin .bk-bgrid, #bankWin .bk-grid.sm, #panel[data-tab="inv"] .inv) .slot.empty{opacity:1;background:var(--g-cell);box-shadow:inset 0 0 0 1px var(--g-cell-line)}
html body :is(#bankWin .bk-bgrid, #bankWin .bk-grid.sm, #panel[data-tab="inv"] .inv) .slot.locked{opacity:.45;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12) 0 3px,transparent 3px 7px),var(--g-cell)}
/* a rolled piece wears its rarity round the whole cell; a new pickup glows; a picked tile is lit (--g-sel) */
html body #panel[data-tab="inv"] .inv .slot.rar{background:radial-gradient(90% 70% at 50% 100%,color-mix(in srgb,var(--rr) 34%,transparent),transparent 75%),var(--g-cell-lit);box-shadow:inset 0 0 0 2px var(--rr),var(--g-cell-sh)}
html body #panel[data-tab="inv"] .inv .slot.nw{box-shadow:inset 0 0 0 1px var(--g-sel),inset 0 0 14px var(--g-sel-glow)}
html body #panel[data-tab="inv"] .inv .slot.hint{outline:3px solid var(--g-sel);outline-offset:-3px}
html body #panel[data-tab="inv"] .inv .slot.dim,html body #bankWin .bk-grid .slot.dim{opacity:.3}
html body #shopWin .grid8 .slot.sel{box-shadow:inset 0 0 0 2px var(--g-sel),0 0 12px var(--g-sel-glow)}
html body #shopWin .grid8 .slot.nobuy{opacity:.5}
/* the HD art fills the cell the way the campfire's 64 fills its 72 */
html body :is(#bankWin .bk-bgrid, #panel[data-tab="inv"] .ish-g) .slot>img.ico.hd,html body :is(#bankWin .bk-bgrid, #panel[data-tab="inv"] .ish-g) .slot>.glow:has(>img.ico.hd){width:88%!important}
/* a shop's price: the shared small dark tab, top left (it stretched over the whole cell: .slot em sets left/top, .price right/bottom) */
html body #shopWin .grid8 .slot .price{left:2px;top:2px;right:auto;bottom:auto}

/* the eyebrow heading (the campfire's .ck-eb): small capitals, a count, a hairline */
html body :is(#bankWin .bk-ph, #panel .ish-h){height:22px;font:var(--g-disp-w) 12px var(--k-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--g-label)}
html body :is(#bankWin .bk-ph, #panel .ish-h) small{font:700 12px Lora,Georgia,serif;letter-spacing:0;color:var(--k-ink2)}
/* the legend in words (the campfire's .ck-leg) */
.ish-leg{display:flex;flex-wrap:wrap;gap:4px 16px;margin:6px 0 2px;padding:0 2px;font-size:13px;line-height:1.3;color:var(--k-ink3)}
.ish-leg span{display:flex;align-items:center;gap:8px}
.ish-leg i{width:14px;height:14px;flex:none;background:var(--g-cell-lit);box-shadow:inset 0 0 0 1px var(--g-cell-lit-line)}
.ish-leg i.roll{background:radial-gradient(90% 70% at 50% 100%,rgba(232,67,63,.45),transparent 75%),var(--g-cell-lit);box-shadow:inset 0 0 0 2px #e8433f}
.ish-leg i.nw{box-shadow:inset 0 0 0 1px var(--g-sel),inset 0 0 6px var(--g-sel-glow)}

/* ---------------------------------------------------------------- THE BAG (ev_bag "cook", without the pinned card): four across of big pictures */
html body #panel[data-tab="inv"] .ish .inv.ish-g{grid-template-columns:repeat(4,minmax(0,72px));justify-content:center;gap:6px}
html body #panel[data-tab="inv"] .ish-g .slot{font-size:34px}
html body #panel[data-tab="inv"] .ishelves{gap:8px}

/* ---------------------------------------------------------------- THE BANK (ev_bank "cook") */
/* the grid: nine across of 72px cells (the campfire's), the art 64 */
html body #bankWin .bk-bgrid{grid-template-columns:repeat(9,72px);gap:5px}
html body #bankWin .bk-bgrid .slot{width:72px;height:72px;font-size:34px}
/* word tabs with counts, the open one carrying its colour; during a search a tab with no match fades */
html body #bankWin .bk-stab:not(.all):not(.lst) img{display:none}
html body #bankWin .bk-stab{font-size:14px}
html body #bankWin .bk-stab small{font:700 12px Lora,Georgia,serif;color:inherit;opacity:.85}
html body #bankWin .bk-stab.bk-tz{opacity:.45}
/* the head's numbers in ink (gold on the Tavern's parchment could not be read) */
html body #bankWin :is(.bk-cash,.bk-worth) .bk-tix{color:var(--g-money)}
/* THE CARD: one fixed place at the head of the bag column, the thing you are on */
#bankWin .bk-card{flex:none;display:flex;flex-direction:column;gap:2px;min-height:128px;margin:-9px -9px 2px;padding:9px 12px;color:var(--k-ink);background:var(--g-card);box-shadow:inset 0 0 0 1px var(--g-card-line),var(--g-card-sh)}
#bankWin .bk-ch{display:flex;align-items:center;gap:10px;margin-bottom:4px}
html body #bankWin .bk-card .bk-cpic{flex:none;width:64px;height:64px;cursor:default;font-size:30px}
html body #bankWin .bk-card .bk-cpic>img.ico,html body #bankWin .bk-card .bk-cpic>.glow{width:88%!important;height:auto;margin:0}
#bankWin .bk-cht{display:flex;flex-direction:column;gap:2px;min-width:0}
#bankWin .bk-cht b{font:var(--g-disp-w) 16px/1.15 var(--k-disp);letter-spacing:.03em;color:var(--k-ink);overflow-wrap:anywhere}
#bankWin .bk-cht small{display:flex;align-items:center;gap:6px;font:600 12.5px Lora,Georgia,serif;color:var(--k-ink2)}
#bankWin .bk-cht small i{width:8px;height:12px;flex:none;background:var(--tc)}
#bankWin .bk-crow{display:flex;align-items:baseline;gap:8px;min-height:19px;font-size:13px;line-height:19px;color:var(--k-ink2)}
#bankWin .bk-crow b{margin-left:auto;font:700 13px Lora,Georgia,serif;color:var(--g-num);font-variant-numeric:tabular-nums}
#bankWin .bk-crow b small{font-weight:600;color:var(--k-ink3)}
#bankWin .bk-crow .bk-tix{color:var(--g-money)}
#bankWin .bk-cwhat{margin:2px 0 0;font-size:12.5px;line-height:1.35;color:var(--k-ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#bankWin .bk-cnote{margin:auto 0 0;padding-top:4px;font-size:12px;line-height:1.3;font-style:italic;color:var(--k-ink3)}
#bankWin .bk-cnone{display:flex;align-items:flex-start;gap:8px;margin:auto 0;font-size:13px;line-height:1.4;color:var(--k-ink3)}
#bankWin .bk-cnone img{flex:none;opacity:.8}
/* (2026-10-19, the owner's UI test: pointing at items "changes the size of the info card if they have a description, causing mouse to jump to other items
   and misclick") THE CARD IS ONE HEIGHT whatever it shows, the empty one too, so the bag under it never moves: the name one line (its whole self on the
   hover), what it is two, the click note two; the height is the tallest of those. (Old school: es-oldschool-hud2.css.) */
html:not(.look-mo) #bankWin .bk-card{height:200px;min-height:0;box-sizing:border-box;overflow:hidden}
html:not(.look-mo) #bankWin .bk-cht b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html:not(.look-mo) #bankWin .bk-cnote{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:none}
/* the bag beside it: five across, a little smaller so the card fits; the one action's sum under Deposit bag */
html body #bankWin .bk-bag .bk-grid.sm{grid-template-columns:repeat(6,38px);gap:4px}
html body #bankWin .bk-grid.sm .slot{width:38px;height:38px;font-size:21px}
#bankWin .bk-bag{gap:6px}
html body #bankWin .bk-bag .bk-grid.sm{flex:1 1 auto}
/* the foot: how many (the campfire's presets) and the one action, Deposit bag, with its sum under it; Deposit worn and Stack all beside */
html body #bankWin .bk-body{padding-bottom:8px}
#bankWin .bk-foot{flex:none;display:flex;align-items:center;gap:16px;padding:8px 12px 10px;border-top:1px solid var(--k-line)}
html body #bankWin .bk-foot .bk-move{flex-direction:row;align-items:center;gap:10px;margin:0}
html body #bankWin .bk-foot .bk-amt{gap:3px}
html body #bankWin .bk-foot :is(.bk-amt button,#bkX){min-width:34px;height:32px;font:700 13px Lora,Georgia,serif}
html body #bankWin .bk-foot #bkX{flex:none;width:52px}
html body #bankWin .bk-foot .bk-actions{display:grid;grid-template-columns:240px auto auto;grid-template-rows:auto auto;align-items:center;gap:2px 6px;margin-left:auto}
html body #bankWin .bk-foot .bk-actions #bkDepInv{grid-column:1;grid-row:1;height:40px}
html body #bankWin .bk-foot .bk-actions #bkDepEq{grid-column:2;grid-row:1;height:40px;padding:0 12px}
html body #bankWin .bk-foot .bk-actions #bkStack{grid-column:3;grid-row:1;height:40px;padding:0 12px}
#bankWin .bk-sum{grid-column:1;grid-row:2;text-align:center;font:600 13px/1.3 Lora,Georgia,serif;color:var(--k-ink2)}

/* ---------------------------------------------------------------- SHOPS (ev_trade "cook"): pick a tile, the box buys, in both looks */
#shopWin #shopBuy{display:grid;gap:8px;margin:0 0 10px;padding:12px;color:var(--k-ink);background:var(--g-card);box-shadow:inset 0 0 0 1px var(--g-card-line),var(--g-card-sh)}
#shopWin #shopBuy .sb-empty{margin:0;padding:8px;text-align:center;font:italic 600 13px Lora,Georgia,serif;color:var(--k-ink3)}
#shopWin #shopBuy .sb-top{display:flex;align-items:center;gap:12px}
#shopWin #shopBuy .sb-art{flex:none;width:72px;height:72px;display:grid;place-items:center;background:var(--g-cell-lit);box-shadow:inset 0 0 0 1px var(--g-cell-lit-line),var(--g-cell-sh)}
#shopWin #shopBuy .sb-art :is(.ico,img){width:64px;height:64px;margin:0}
#shopWin #shopBuy .sb-top b{display:block;font:var(--g-disp-w) 17px/1.2 var(--k-disp);letter-spacing:.03em;color:var(--k-ink)}
#shopWin #shopBuy .sb-top small{display:block;font:600 13px Lora,Georgia,serif;color:var(--k-ink2)}
#shopWin #shopBuy .sb-top small.no{color:var(--g-bad)}
#shopWin #shopBuy .sb-ex{margin:0;font:500 13px/1.4 Lora,Georgia,serif;color:var(--k-ink2)}
#shopWin #shopBuy .sb-sum{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-top:8px;border-top:1px solid var(--k-line);font:600 13px Lora,Georgia,serif;color:var(--k-ink2)}
#shopWin #shopBuy .sb-sum b{color:var(--g-num)}
#shopWin #shopBuy .sb-buy{width:100%;min-height:38px;font:400 15px var(--k-disp);letter-spacing:.06em}
#shopWin #shopBuy .sb-after{margin-top:-4px;text-align:center;font:600 13px/1.3 Lora,Georgia,serif;color:var(--k-ink2)}
#shopWin #shopBuy.narrow{margin:0 12px;grid-template-columns:1fr auto;align-items:center}#shopWin #shopBuy.narrow :is(.sb-ex,.sb-after){display:none}
#shopWin .shop-sec .k-label{font:var(--g-disp-w) 12px var(--k-disp);letter-spacing:.14em;color:var(--g-label)}
#shopWin .shop-sec small{font:700 12px Lora,Georgia,serif;color:var(--k-ink2)}

/* ---------------------------------------------------------------- THE EXCHANGE (ev_trade "cook"): flat cells, the seller and how long ago, the sum under Buy */
html body #exWin .k-slot.ex-sl{border:0;border-radius:0;background:var(--g-cell-lit);box-shadow:inset 0 0 0 1px var(--g-cell-lit-line),var(--g-cell-sh)}
html body #exWin .k-slot.ex-sl.big{width:72px;height:72px}
html body #exWin .k-slot.ex-sl.big .ico{width:64px;height:64px;margin:0}
html body #exWin .ex-lad.who .ex-lad-r>.ex-who{display:flex;align-items:baseline;gap:6px;min-width:0}
#exWin .ex-who b{overflow:hidden;text-overflow:ellipsis;font-weight:700;color:var(--k-ink)}
#exWin .ex-who small{flex:none;font:600 11.5px Lora,Georgia,serif;color:var(--k-ink3)}
#exWin .ex-go-s{display:block;margin-top:2px;text-align:center;font:600 13px/1.3 Lora,Georgia,serif;color:var(--k-ink2)}
#exWin .ex-go-s:empty{display:none}
html body #exWin :is(.ex-t,.exh-bal b){color:var(--g-money)}