/* ═══════════════════════════════════════════════════════════════════════
   world-bank.css — THE NATIVE BANK PANEL (#3031; Wray's BANK 1A 2A 3A 4A,
   2026-09-26)

   world-bank.js draws the panel into the Bank aside world-windows.js hangs
   beside the Inventory (`.ww-aside.wb-aside`, 400 wide at 1920, 320 where
   the socket picker would lose its room). The approved picture is the
   Unbuilt Screens mock, layout A (audit/artifacts/unbuilt-screens/, #bank;
   its source audit/ui-gen/2026-09-26-unbuilt-screens/screens/bank.js):
   the place row, the filter row and its count, the well, the bag's own
   Find and Sort, DEPOSIT ALL in gold, and the hint.

   ── ONE BLOCK ──────────────────────────────────────────────────────────
   `corners`, and every selector under `body.hud-v2`: the panel exists only
   under the HUD pass (?hud=0 frames inventory.html?tab=bank as before), so
   with the flag off this file matches nothing.

   ⛔LITERALS, NOT --sk-* (the #3031 PR 3 trap). The aside hangs off <body>,
   where the skin's gold variables resolve to the parchment's tan. The
   slate window's own inks (--w2-*) are declared ON `.ww-aside` by
   world-windows-v2.css, so those are safe here; everything else is a
   literal measured against the slate (#3a4760).

   ── THE PHONE (BANK 4A) ────────────────────────────────────────────────
   The panel lies over the Inventory under its title (is-over-sheet), and
   world-bank.js stops it at 60% of the window (PHONE_SPLIT). Below it the bag gives up
   its doll, its tiles and its footer, and shows its weight bar and its own
   well: two wells, the bank above and the bag below, keyed on this panel
   being open (`:has`), so it undoes itself the moment the panel goes.
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

/* ── 0. THE PANEL: a column, the well is the one scroller ─────────────── */
body.hud-v2.skin-majesty .ww-aside.wb-aside .ww-asidebody {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.hud-v2.skin-majesty .ww-aside.wb-aside .wb-panel {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--w2-ink, #efe3c8);
}
body.hud-v2.skin-majesty .wb-aside .wb-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
body.hud-v2.skin-majesty .wb-aside .wb-state {
  margin: 12px 4px;
  font-family: var(--hv-f-vt, 'VT323', monospace);
  font-size: 20px;
  line-height: 1.1;
  color: #d9cdb2;
}

/* ── 0b. THE TITLE AND THE CLOSE: the Inventory's own (#3308 review) ─────
   The mock's layout A draws "Bank" on kit B's red ribbon, centred on the
   top rim, and kit B's close on the corner, the same as the Inventory
   window beside it. The build drew the parchment aside's small left title
   and a grey "x" with a 20x16 hit area. These are world-windows-v2.css's
   ribbon and close (section 1), placed against the aside the way that
   file places them against the sheet: the aside's border is the skin's
   28px (world-skin.css .ww-aside), so the ribbon's top is 11 chrome pixels
   above the outer edge, level with the Inventory's.
   Beside the bag only: laid over it (a phone), the window's own ribbon and
   close stay in view and Back is the way out (world-windows-v2.css).
   The whetstone's panel (`.wh-aside`, #3219 REPAIR-W, world-repair.css)
   and the trade window (`.wtr-aside`, #3339 slice 3, world-trade.css)
   hang in the same place and wear the same ribbon and close. */
body.hud-v2.skin-majesty .ww-aside:is(.wb-aside, .wh-aside, .wtr-aside):not(.is-over-sheet) .ww-asidehead {
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
body.hud-v2.skin-majesty .ww-aside:is(.wb-aside, .wh-aside, .wtr-aside):not(.is-over-sheet) .ww-asidetitle {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: calc(-28px - 11 * var(--hv-k) * 1px);
  translate: -50% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(28 * var(--hv-k) * 1px);
  min-width: calc(116 * var(--hv-k) * 1px);
  max-width: 70%;
  box-sizing: border-box;
  padding: calc(2 * var(--hv-k) * 1px) calc(28 * var(--hv-k) * 1px) calc(9 * var(--hv-k) * 1px);
  border-style: solid;
  border-width: 0;
  border-image-source: url('/assets/ui/kitb/title.png?v=2026-09-24a');
  border-image-slice: 2 24 9 24 fill;
  border-image-width: calc(2 * var(--hv-k) * 1px) calc(24 * var(--hv-k) * 1px) calc(9 * var(--hv-k) * 1px) calc(24 * var(--hv-k) * 1px);
  border-image-repeat: stretch;
  image-rendering: pixelated;
  font-family: var(--sk-tome);
  font-size: calc(16 * var(--hv-k) * 1px);
  line-height: 1;
  white-space: nowrap;
  color: #f7e6c4;
  text-shadow: 0 calc(var(--hv-k) * 1px) 0 #5e1414;
}
/* whole pixels, for the reason world-windows-v2.css gives the sheet's */
@supports (translate: round(-50%, 1px) 0) {
  body.hud-v2.skin-majesty .ww-aside:is(.wb-aside, .wh-aside, .wtr-aside):not(.is-over-sheet) .ww-asidetitle {
    left: round(50%, 1px);
    translate: round(-50%, 1px) 0;
  }
}
body.hud-v2.skin-majesty .ww-aside:is(.wb-aside, .wh-aside, .wtr-aside):not(.is-over-sheet) .ww-asidex {
  position: absolute;
  z-index: 4;
  top: calc(-28px - 11 * var(--hv-k) * 1px);
  right: calc(-28px + 9 * var(--hv-k) * 1px);
  width: calc(25 * var(--hv-k) * 1px);
  height: calc(27 * var(--hv-k) * 1px);
  margin: 0;
  padding: 0;
  border: 0;
  background: url('/assets/ui/kitb/close.png?v=2026-09-24a') center / 100% 100% no-repeat;
  color: transparent;
  font-size: 0;
  text-shadow: none;
  cursor: pointer;
  image-rendering: pixelated;
}
body.hud-v2.skin-majesty .ww-aside:is(.wb-aside, .wh-aside, .wtr-aside):not(.is-over-sheet) .ww-asidex:hover { color: transparent; filter: brightness(1.15); }
body.hud-v2.skin-majesty .ww-aside:is(.wb-aside, .wh-aside, .wtr-aside):not(.is-over-sheet) .ww-asidex:focus-visible { outline: 2px solid #e3c79a; outline-offset: 2px; }
/* never under a finger's 44px: the art stays where it is drawn, and the
   press reaches past it where the art is smaller (a small --hv-k) */
body.hud-v2.skin-majesty .ww-aside:is(.wb-aside, .wh-aside, .wtr-aside):not(.is-over-sheet) .ww-asidex::before {
  content: '';
  position: absolute;
  top: calc(min(0px, (27 * var(--hv-k) * 1px - 44px) / 2));
  bottom: calc(min(0px, (27 * var(--hv-k) * 1px - 44px) / 2));
  left: calc(min(0px, (25 * var(--hv-k) * 1px - 44px) / 2));
  right: calc(min(0px, (25 * var(--hv-k) * 1px - 44px) / 2));
}

/* ── 1. THE PLACE ROW and 2. THE FILTER ROW: kit B tabs ───────────────── */
body.hud-v2.skin-majesty .wb-aside .wb-tab {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-height: 32px;
  padding: 0 9px;
  margin: 0;
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: 8px;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #d9cdb2;
  background: none;
  cursor: pointer;
  border-style: solid;
  border-image-source: url('/assets/ui/kitb/btn.png?v=2026-09-24a');
  border-image-slice: 3 3 5 3 fill;
  border-image-width: calc(3 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px) calc(5 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px);
  border-width: calc(3 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px) calc(5 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px);
  border-image-repeat: stretch;
  image-rendering: pixelated;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}
body.hud-v2.skin-majesty .wb-aside button.wb-tab:hover { color: #fff3d6; filter: brightness(1.18); }
/* the chosen one, and the place itself: red and gold (#3069 v6/v7) */
body.hud-v2.skin-majesty .wb-aside .wb-tab.is-on {
  border-image-source: url('/assets/ui/kitb/tab-on-red.png?v=2026-09-24a');
  border-image-slice: 6 fill;
  border-image-width: calc(6 * var(--hv-k) * 1px);
  border-width: calc(3 * var(--hv-k) * 1px);
  color: #f7e6c4;
  text-shadow: 0 2px 0 #5e1414;
  filter: none;
}
/* the place is where you are, not a button to press */
body.hud-v2.skin-majesty .wb-aside .wb-place .wb-tab { cursor: default; min-width: 72px; }
body.hud-v2.skin-majesty .wb-aside .wb-st {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: 8px;
  line-height: 1.35;
  letter-spacing: 1px;
  white-space: nowrap;
}
body.hud-v2.skin-majesty .wb-aside .wb-st::before {
  content: '';
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  background: currentColor;
  box-shadow: 0 0 0 2px #07090d;
}
body.hud-v2.skin-majesty .wb-aside .wb-st.is-here { color: #8fd89a; }
body.hud-v2.skin-majesty .wb-aside .wb-st.is-away { color: #b4bfcc; }
body.hud-v2.skin-majesty .wb-aside .wb-st.is-away::before {
  background: transparent;
  box-shadow: inset 0 0 0 2px #b4bfcc, 0 0 0 2px #07090d;
}
/* at the 320 fallback (1366x768, where 400 would cover the player plate)
   the three tabs and "12 BANKED" are wider than the row: the count takes a
   line of its own on the right rather than running off the panel */
body.hud-v2.skin-majesty .wb-aside .wb-filters { gap: 4px; flex-wrap: wrap; row-gap: 4px; }
body.hud-v2.skin-majesty .wb-aside .wb-count {
  margin-left: auto;
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: 8px;
  /* no tracking: the face's own 8px advance puts "12 GEAR · 3 LOOKS · 5
     MATERIALS" (31 glyphs, 248px) on ONE line in the 320 panel's 264px,
     where 1px of tracking made it 279 and cost the well a row (#3338
     review). Bigger counts still wrap, between the parts. */
  letter-spacing: 0;
  line-height: 1.5;
  text-align: right;
  color: #e3c79a;
}
/* the count names its parts ("12 GEAR · 3 LOOKS · 5 MATERIALS"): a narrow
   panel wraps it between the parts, never inside one */
body.hud-v2.skin-majesty .wb-aside .wb-count > span { white-space: nowrap; }

/* ── 3. THE WELL: the bag's dark well, six across at the bag's cell ───── */
body.hud-v2.skin-majesty .wb-aside .wb-well {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #7e6440 rgba(0, 0, 0, .3);
  padding: 5px;
  background: #0e1319;
  box-shadow: inset 0 0 0 2px #07090d, inset 0 0 0 4px #4a3b28, inset 0 6px 10px rgba(0, 0, 0, .6);
}
body.hud-v2.skin-majesty .wb-aside .wb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  align-content: start;
  gap: 6px;
}
body.hud-v2.skin-majesty .wb-aside .wb-grid .ww-slotc {
  width: auto;
  height: auto;
  aspect-ratio: 1;
  min-width: 0;
  font: inherit;
  color: inherit;
  padding: 0;
  cursor: pointer;
  /* a flick on a cell scrolls the well; a finger that RESTS starts a drag
     (world-equip.js TOUCH_HOLD_MS), and iOS must not answer the hold with
     its own menu */
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
body.hud-v2.skin-majesty .wb-aside .wb-grid .ww-slotc:focus-visible {
  outline: 2px solid #e3c79a;
  outline-offset: 1px;
}
/* ⭐A LOCKED PILE: dimmed, with its reason in the corner (a spare of what
   you wear, or something up for sale). Kit B has no lock glyph, so a word. */
body.hud-v2.skin-majesty .wb-aside .wb-grid .ww-slotc.is-banklocked > :not(.wb-tag) { opacity: .45; }
body.hud-v2.skin-majesty .wb-aside .wb-grid .ww-slotc.is-banklocked { cursor: help; }
/* VT323 at 14px, not Press Start 2P at 6px (#3308 review: unreadable, and
   LISTED ran over the cell's top rim): the bag's own reading face, and a
   tag that stays inside the rim at the narrowest cell (44px) */
body.hud-v2.skin-majesty .wb-aside .wb-tag {
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: 2;
  max-width: calc(100% - 8px);
  overflow: hidden;
  box-sizing: border-box;
  padding: 1px 3px 0;
  font-family: var(--hv-f-vt, 'VT323', monospace);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  color: #f3e9d6;
  background: #2a1a10;
  box-shadow: 0 0 0 1px #5a4328;
  pointer-events: none;
}
body.hud-v2.skin-majesty .wb-aside .wb-none {
  margin: 10px 6px;
  font-family: var(--hv-f-vt, 'VT323', monospace);
  font-size: 19px;
  line-height: 1.1;
  color: #d9cdb2;
}

/* ── 4. FIND AND SORT: the bag's own controls, sized for the row ──────── */
body.hud-v2.skin-majesty .wb-aside .wb-findsort .wb-sort { flex: 0 0 auto; width: 118px; max-width: 45%; }
body.hud-v2.skin-majesty .wb-aside .wb-findsort .wb-find { flex: 1 1 0; min-width: 60px; }

/* ── 5. THE ACTION: DEPOSIT ALL in gold, or where to go ───────────────── */
body.hud-v2.skin-majesty .wb-aside .wb-act { justify-content: center; }
body.hud-v2.skin-majesty .wb-aside .wb-depall {
  flex: 1 1 auto;
  min-height: 40px;
  font-family: var(--hv-act-font, 'Press Start 2P', monospace);
  font-size: 10px;
  letter-spacing: var(--hv-act-track, 1px);
  text-transform: uppercase;
  color: #2a1c0c;
  background: none;
  cursor: pointer;
  border-style: solid;
  border-image-source: url('/assets/ui/kitb/btngold.png?v=2026-09-24a');
  border-image-slice: 3 3 5 3 fill;
  border-image-width: calc(3 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px) calc(5 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px);
  border-width: calc(3 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px) calc(5 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px);
  border-image-repeat: stretch;
  image-rendering: pixelated;
}
body.hud-v2.skin-majesty .wb-aside .wb-depall:hover { filter: brightness(1.12); color: #1d1406; }
body.hud-v2.skin-majesty .wb-aside .wb-depall:disabled {
  cursor: default;
  filter: none;
  border-image-source: url('/assets/ui/kitb/btn.png?v=2026-09-24a');
  color: #b4bfcc;
}
body.hud-v2.skin-majesty .wb-aside .wb-awayline,
body.hud-v2.skin-majesty .wb-aside .wb-hint {
  margin: 0;
  font-family: var(--hv-f-vt, 'VT323', monospace);
  line-height: 1.05;
  text-align: center;
}
body.hud-v2.skin-majesty .wb-aside .wb-awayline { flex: 1 1 auto; font-size: 20px; color: #d9cdb2; }
body.hud-v2.skin-majesty .wb-aside .wb-hint { flex: 0 0 auto; font-size: 18px; color: #b4bfcc; }

/* ── 6. A DROP TARGET: the gold ring (a literal, see the header) ──────────
   The bank's well lights while a bag pile would go into it. A bank pile
   over the bag lights the bag's cell or well with the ring the bag's own
   arrange drag already draws (world-skin.css `.is-droptarget`), so the two
   directions read the same. */
body.hud-v2.skin-majesty .ww-aside.wb-aside.is-droptarget .wb-well {
  box-shadow: inset 0 0 0 2px #07090d, inset 0 0 0 4px #f3d9a0, inset 0 6px 10px rgba(0, 0, 0, .6), 0 0 0 3px #f3d9a0, 0 0 16px 4px rgba(243, 217, 160, .55);
}

/* ── 7. THE BAG'S WEIGHT BAR PREVIEWS A DRAG (world-bank.js previewBar) ── */
body.hud-v2.skin-majesty .ww-carry .ws-meter { position: relative; }
body.hud-v2.skin-majesty .ww-carry .wb-pv {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
}
body.hud-v2.skin-majesty .ww-carry .wb-pv.is-up {
  background: repeating-linear-gradient(90deg, #f3d9a0 0 6px, #caa982 6px 8px);
  opacity: .95;
}
body.hud-v2.skin-majesty .ww-carry .wb-pv.is-down {
  background: rgba(7, 9, 13, .72);
  box-shadow: inset 0 0 0 2px #f3d9a0;
}
body.hud-v2.skin-majesty .ww-carry.is-wbpv b { color: #f3d9a0; }

/* ── 8. THE PINNED CARD: the bag's card, with the bank's foot under it ── */
body.hud-v2.skin-majesty .ww-hover.wb-card .wb-cardfoot {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 2px solid rgba(90, 67, 40, .25);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.hud-v2.skin-majesty .ww-hover.wb-card .wb-weight {
  font-family: var(--hv-f-vt, 'VT323', monospace);
  font-size: 18px;
  line-height: 1.1;
}
body.hud-v2.skin-majesty .ww-hover.wb-card .wb-weight b {
  display: block;
  margin-bottom: 2px;
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #b8452c;
}
body.hud-v2.skin-majesty .ww-hover.wb-card .wb-reason {
  margin: 0;
  font-family: var(--hv-f-vt, 'VT323', monospace);
  font-size: 18px;
  line-height: 1.1;
  color: #b8452c;
}
body.hud-v2.skin-majesty .ww-hover.wb-card .wb-step {
  display: flex;
  align-items: center;
  gap: 4px;
}
body.hud-v2.skin-majesty .ww-hover.wb-card .wb-stepb {
  flex: 0 0 auto;
  min-width: 36px;
  min-height: 32px;
  padding: 0 6px;
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: 9px;
  color: #efe3c8;
  background: none;
  cursor: pointer;
  border-style: solid;
  border-image: url('/assets/ui/kitb/btn.png?v=2026-09-24a') 3 3 5 3 fill / 3px 3px 5px 3px stretch;
  border-width: 3px 3px 5px 3px;
  image-rendering: pixelated;
}
body.hud-v2.skin-majesty .ww-hover.wb-card .wb-stepb:disabled { opacity: .5; cursor: default; }
body.hud-v2.skin-majesty .ww-hover.wb-card .wb-stepall { margin-left: auto; }
body.hud-v2.skin-majesty .ww-hover.wb-card .wb-stepn {
  flex: 1 1 auto;
  min-width: 40px;
  text-align: center;
  font-family: var(--hv-f-vt, 'VT323', monospace);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}
/* WITHDRAW is the one thing the card asks of you: gold */
body.hud-v2.skin-majesty .ww-hover.wb-card .ww-hover-act.wb-withdraw {
  width: 100%;
  min-height: 40px;
  margin: 2px 0 0;
  color: #2a1c0c;
  text-shadow: none;
  border-image-source: url('/assets/ui/kitb/btngold.png?v=2026-09-24a');
  border-image-slice: 3 3 5 3 fill;
  border-image-width: 3px 3px 5px 3px;
  border-width: 3px 3px 5px 3px;
}
body.hud-v2.skin-majesty .ww-hover.wb-card .ww-hover-act.wb-withdraw:disabled { filter: grayscale(.6); opacity: .7; }
body.hud-v2.skin-majesty .ww-hover.wb-card .wb-note {
  margin: 0;
  font-family: var(--hv-f-vt, 'VT323', monospace);
  font-size: 18px;
  line-height: 1.1;
  color: #5a4328;
}

/* ⛔UNDER THE v3 WINDOW (#3308 review, the blocker). The v3 card paints its
   slate fill as an absolute layer at z 0 (world-item-tip.css `.it3-bgf`);
   the foot, appended after it and unpositioned, painted UNDER that fill:
   WITHDRAW looked disabled and took no click, so in prod, where the flag is
   on, nothing came out of the bank by its card. The foot stands on the
   layers as `.it3-body` and the bag's own button do, and takes the dark
   window's inks (the parchment's red and brown were unreadable on it). */
body.hud-v2.skin-majesty .ww-hover.it3.wb-card > .wb-cardfoot {
  position: relative;
  z-index: 2;
  border-top-color: rgba(202, 169, 130, .35);
}
body.hud-v2.skin-majesty .ww-hover.it3.wb-card .wb-weight { color: #d9cdb2; }
body.hud-v2.skin-majesty .ww-hover.it3.wb-card .wb-weight b { color: #f3d9a0; }
body.hud-v2.skin-majesty .ww-hover.it3.wb-card .wb-reason { color: #f0a58f; }
body.hud-v2.skin-majesty .ww-hover.it3.wb-card .wb-note { color: #b4bfcc; }
body.hud-v2.skin-majesty .ww-hover.it3.wb-card .wb-stepn { color: #f0ead8; }

/* on a phone the card is a sheet along the bottom, the window's whole width
   (placePinned; `.it3` would hold it to its 288) */
body.hud-v2.skin-majesty .ww-hover.wb-card.wb-sheetcard {
  width: auto;
  max-width: none;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 9500;
}
/* ...and on a phone on its side, a sheet down the right edge, the window's
   whole height (placePinned sets the edges) */
body.hud-v2.skin-majesty .ww-hover.wb-card.wb-sheetcard.wb-sidecard {
  width: min(360px, calc(100vw - 16px));
  max-height: none;
}
/* ⭐WITHDRAW NEVER GOES BELOW THE FOLD. A sheet with more lines than room
   scrolls its LINES, and the foot stays at the bottom: at 844x390 the whole
   card scrolled, and WITHDRAW sat at y 381 in a 390px window. The v3 card's
   fill and frame are layers the size of the card, so the card itself must
   not scroll (they would scroll away with the lines). */
body.hud-v2.skin-majesty .ww-hover.it3.wb-card.wb-sheetcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.hud-v2.skin-majesty .ww-hover.it3.wb-card.wb-sheetcard > .it3-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.hud-v2.skin-majesty .ww-hover.it3.wb-card.wb-sheetcard > .wb-cardfoot { flex: 0 0 auto; }
/* ⭐A SHEET IS OPAQUE, OVER A SCRIM (#3308 review, the mock's phone card).
   The v3 window's 74% fill is right for a card over the world; laid over
   the Bank and the bag, DEPOSIT ALL and the bag's cells showed through its
   lines. The fill goes whole, and a scrim dims what is behind the sheet
   (a shadow, so it takes no press: a tap outside still puts the card away) */
body.hud-v2.skin-majesty .ww-hover.it3.wb-card.wb-sheetcard > .it3-bgf { background: #181e2a; }
body.hud-v2.skin-majesty .ww-hover.wb-card.wb-sheetcard {
  box-shadow: 0 0 0 100vmax rgba(7, 9, 13, .55);
}
/* the parchment card's paper is its border-image, which does not scroll:
   there the foot sticks to the bottom on the paper's own tone */
body.hud-v2.skin-majesty .ww-hover.wb-card.wb-sheetcard:not(.it3) > .wb-cardfoot {
  position: sticky;
  bottom: 0;
  background: #e6d3ad;
}

/* ⛔"OPEN THE BANK" GOES WHILE THE BANK IS OPEN. The bag's empty note offers
   it (world-windows.js emptyNote), and with the panel already up it would be
   a button that does nothing. */
body.hud-v2.skin-majesty:has(> .ww-aside.wb-aside) .ww-bagnote .ww-bagnote-go { display: none; }

/* ── 9. THE PHONE: two wells (BANK 4A) ────────────────────────────────── */
body.hud-v2.skin-majesty .ww-aside.wb-aside.is-over-sheet .wb-hint { display: none; }
body.hud-v2.skin-majesty .ww-aside.wb-aside.is-over-sheet .wb-panel { gap: 4px; }
body.hud-v2.skin-majesty .ww-aside.wb-aside.is-over-sheet .wb-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
@media (pointer: coarse) {
  body.hud-v2.skin-majesty .wb-aside button.wb-tab { min-height: 44px; }
  body.hud-v2.skin-majesty .wb-aside :is(.wb-sort, .wb-find) { min-height: 44px; }
  body.hud-v2.skin-majesty .wb-aside .wb-depall { min-height: 44px; }
  /* ⛔AS SPECIFIC AS THE RULES THEY RAISE (#3308 review): the looser
     `:is(.wb-stepb, .wb-withdraw)` lost to section 8's own sizes, and
     WITHDRAW measured 40px tall and the stepper's buttons 36px wide */
  body.hud-v2.skin-majesty .ww-hover.wb-card .wb-stepb { min-width: 44px; min-height: 44px; }
  body.hud-v2.skin-majesty .ww-hover.wb-card .ww-hover-act.wb-withdraw { min-height: 44px; }
}
/* ⛔A PHONE ON ITS SIDE: one window-sized panel in two columns (world-
   bank.js fitPhone keeps it whole there, because two wells do not fit in
   390px of height): the controls on the left, the well on the right, and a
   tap takes a stack out through its card */
@media (max-height: 540px) {
  body.hud-v2.skin-majesty .ww-aside.wb-aside.is-over-sheet .wb-panel {
    display: grid;
    grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    grid-template-areas:
      "place well"
      "filters well"
      "findsort well"
      "act well"
      ". well";
    column-gap: 10px;
    row-gap: 4px;
  }
  body.hud-v2.skin-majesty .ww-aside.wb-aside.is-over-sheet .wb-place { grid-area: place; }
  body.hud-v2.skin-majesty .ww-aside.wb-aside.is-over-sheet .wb-filters { grid-area: filters; flex-wrap: wrap; row-gap: 4px; }
  body.hud-v2.skin-majesty .ww-aside.wb-aside.is-over-sheet .wb-findsort { grid-area: findsort; }
  body.hud-v2.skin-majesty .ww-aside.wb-aside.is-over-sheet .wb-act { grid-area: act; }
  body.hud-v2.skin-majesty .ww-aside.wb-aside.is-over-sheet .wb-well { grid-area: well; }
  body.hud-v2.skin-majesty .ww-aside.wb-aside.is-over-sheet .wb-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
  body.hud-v2.skin-majesty .ww-aside.wb-aside.is-over-sheet .wb-awayline { font-size: 17px; }
}

/* under the panel, the bag keeps its weight bar and its well, and nothing
   else: the doll, the tiles, the footer and the ways come back the moment
   the panel goes, because this rule only holds while it is open */
body.hud-v2.skin-majesty:has(> .ww-aside.wb-aside.is-over-sheet) .ws-sheet .ww-bagwrap.ww-inv2 {
  padding-top: var(--wb-cover, 0px);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "bhead bhead"
    "note note"
    "bag bag";
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}
body.hud-v2.skin-majesty:has(> .ww-aside.wb-aside.is-over-sheet) .ws-sheet .ww-bagwrap.ww-inv2 > :is(.ww-dollbox, .ww-stats, .ww-socknotes, .ww-inv2-who, .ww-footbar, .ww-inv2-ways) {
  display: none;
}
body.hud-v2.skin-majesty:has(> .ww-aside.wb-aside.is-over-sheet) .ws-sheet .ww-bagwrap.ww-inv2 .ww-bag1 {
  overflow-y: auto;
  min-height: 0;
}

} /* end of @layer corners */