/* ═══════════════════════════════════════════════════════════════════════
   world-appearance.css — THE APPEARANCE PANEL (GH #2674, LOOK 1A 2A 3A)

   Wray's picks on the Unbuilt Screens mock, 2026-09-26 (audit/ui-gen/
   2026-09-26-unbuilt-screens/screens/appearance.js, layout A): a panel
   beside the bag, COAT / EYES / FACE, every pick saved at once, the bag's
   own 3D doll as the preview. world-appearance.js draws it into the
   Inventory's companion panel (`.ww-aside[data-aside='appearance']`, the
   same slate window the Bank and Skills are, world-windows-v2.css section
   6); this file dresses what is inside it, and the gold button's pressed
   state.

   ── ONE BLOCK ──────────────────────────────────────────────────────────
   `corners`, and every selector sits under `body.hud-v2`: the button that
   opens the panel exists only in the v2 Inventory, so with the pass off
   this file matches nothing. It loads before world-windows-v2.css (which
   stays second to last), so the rules that answer that sheet's planks carry
   `.wa` and out-weigh it by specificity, not by order.

   ── KIT B, AT THE CHROME PIXEL ────────────────────────────────────────
   slot1.png (rim 5) for a cell, dooron.png (rim 11, outset 3) for the
   chosen one, slate-tab.png / tab-on-red.png for the tabs, btn.png /
   btngold.png for the planks, chat-input.png (rim 4) for the hex field,
   trough.png (rim 4) for a slider's track. Every rim is `N * --hv-k` CSS px
   (world-hud-v2.css), never scaled by hand. slate-slider.png, the mock's
   slider, is not promoted into public/assets/ui/kitb/ (its README: a slice
   that needs one adds it to promote.py), so the track is the bar's trough
   and the thumb is the gold button.
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

/* ── the panel ───────────────────────────────────────────────────────── */
body.hud-v2.skin-majesty .ww-aside[data-aside='appearance'] .ww-asidebody { display: flex; min-height: 0; }
body.hud-v2.skin-majesty .ww-aside .wa {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--w2-ink, #efe3c8);
}

/* the tabs: slate planks, the chosen one red and gold (the mock's kb-tab and
   kb-tabon), in the one row a window's own tabs use */
body.hud-v2.skin-majesty .ww-aside .wa .wa-tabs { flex: 0 0 auto; display: flex; gap: 4px; }
body.hud-v2.skin-majesty .ww-aside .wa .wr-plank.wa-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0 4px 2px;
  font-size: 10px;
  line-height: 1;
  border-image-source: url('/assets/ui/kitb/slate-tab.png?v=2026-09-24a');
  border-image-slice: 6 fill;
  border-image-width: calc(6 * var(--hv-k) * 1px);
  border-width: calc(6 * var(--hv-k) * 1px);
  color: #aeb8c8;
}
body.hud-v2.skin-majesty .ww-aside .wa .wr-plank.wa-tab[aria-pressed='true'] {
  border-image-source: url('/assets/ui/kitb/tab-on-red.png?v=2026-09-24a');
  color: #fff1d6;
  text-shadow: 0 2px 0 #4a0e0e;
}

/* the scrolling body */
body.hud-v2.skin-majesty .ww-aside .wa .wa-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 6px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: thin;
  scrollbar-color: #8a7152 rgba(0, 0, 0, .3);
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-body::-webkit-scrollbar { width: 8px; }
body.hud-v2.skin-majesty .ww-aside .wa .wa-body::-webkit-scrollbar-track { background: rgba(0, 0, 0, .3); }
body.hud-v2.skin-majesty .ww-aside .wa .wa-body::-webkit-scrollbar-thumb { background: #8a7152; box-shadow: inset 0 -2px 0 #5c4a33; }

/* a section and its heading */
body.hud-v2.skin-majesty .ww-aside .wa .wa-sec { display: grid; gap: 9px; }
body.hud-v2.skin-majesty .ww-aside .wa .wa-h6 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font: 10px/1.2 var(--hv-f-px, 'Press Start 2P', monospace);
  color: var(--w2-gold, #e3c79a);
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-h6 em {
  font: normal 8px/1.2 var(--hv-f-px, 'Press Start 2P', monospace);
  color: #8a98aa;
  letter-spacing: 0;
}

/* ── the cells: kit B's item slot, the chosen one in the lit frame ─────── */
body.hud-v2.skin-majesty .ww-aside .wa .wa-grid { display: grid; gap: 8px; }
body.hud-v2.skin-majesty .ww-aside .wa .wa-coats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.hud-v2.skin-majesty .ww-aside .wa .wa-eyes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.hud-v2.skin-majesty .ww-aside .wa .wa-faces { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
body.hud-v2.skin-majesty .ww-aside .wa .wa-cell {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: none;
  border-style: solid;
  border-width: 0;
  border-image: url('/assets/ui/kitb/slot1.png?v=2026-09-24a') 5 fill / calc(5 * var(--hv-k) * 1px) stretch;
  image-rendering: pixelated;
  color: inherit;
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-cell:hover:not(:disabled) { filter: brightness(1.15); }
body.hud-v2.skin-majesty .ww-aside .wa .wa-cell:focus-visible { outline: 2px solid #fff0cc; outline-offset: 2px; }
body.hud-v2.skin-majesty .ww-aside .wa .wa-cell .wa-in {
  position: absolute;
  inset: calc(5px * var(--hv-k));
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
  pointer-events: none;
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-cell.is-on::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-style: solid;
  border-width: 0;
  border-image: url('/assets/ui/kitb/dooron.png?v=2026-09-24a') 11 / calc(11 * var(--hv-k) * 1px) / calc(3 * var(--hv-k) * 1px) stretch;
  image-rendering: pixelated;
}

/* a coat: a square swatch */
body.hud-v2.skin-majesty .ww-aside .wa .wa-coat { aspect-ratio: 1 / 1; }
/* CUSTOM: hatched until a colour of your own lights it */
body.hud-v2.skin-majesty .ww-aside .wa .wa-custom .wa-in { background: repeating-linear-gradient(45deg, #1b2331 0 6px, #141b26 6px 12px); }
body.hud-v2.skin-majesty .ww-aside .wa .wa-custom.is-lit .wa-in { background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%; }
body.hud-v2.skin-majesty .ww-aside .wa .wa-custom .wa-cl {
  position: absolute;
  z-index: 3;
  left: 4px;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font: 8px/1 var(--hv-f-px, 'Press Start 2P', monospace);
  letter-spacing: 0;
  color: #8a98aa;
  pointer-events: none;
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-custom.is-lit .wa-cl { padding: 4px 0 3px; background: rgba(7, 9, 13, .8); color: #f0e2c6; }

/* an eye set: the atlas's eye band, never stretched (its box keeps the
   crop's own 160:64) */
body.hud-v2.skin-majesty .ww-aside .wa .wa-eye { aspect-ratio: 5 / 3; }
body.hud-v2.skin-majesty .ww-aside .wa .wa-eye .wa-in {
  inset: auto;
  left: calc(5px * var(--hv-k));
  right: calc(5px * var(--hv-k));
  top: 50%;
  transform: translateY(-50%);
  aspect-ratio: 160 / 64;
}
/* a face: the muzzle, with your eyes, on your coat (the crop's 160:112) */
body.hud-v2.skin-majesty .ww-aside .wa .wa-face { aspect-ratio: 4 / 3; }
body.hud-v2.skin-majesty .ww-aside .wa .wa-face .wa-in {
  inset: auto;
  left: calc(5px * var(--hv-k));
  right: calc(5px * var(--hv-k));
  top: 50%;
  transform: translateY(-50%);
  aspect-ratio: 160 / 112;
}
/* 3A: owned, not drawable in 3D yet: greyed, with the tag, never gone */
body.hud-v2.skin-majesty .ww-aside .wa .wa-cell.is-grey { cursor: default; }
body.hud-v2.skin-majesty .ww-aside .wa .wa-cell.is-grey .wa-in { opacity: .45; filter: grayscale(1); }
/* ⛔INSIDE THE TILE, AND ALLOWED TO WRAP (the #3304 review, finding 2). It
   used to sit on the tile's top edge on one line: 13 characters of the pixel
   font are 104px, the face tiles are 81px at 1366 and 99px on a phone, and
   the panel's body clips sideways, so it read "OT IN 3D YNOT IN 3D YET".
   Across the tile's foot it takes two short lines at every tile size
   (measured at 1920, 1366 and a 390 phone, 2026-09-27). */
body.hud-v2.skin-majesty .ww-aside .wa .wa-tg {
  position: absolute;
  z-index: 3;
  left: calc(3px * var(--hv-k));
  right: calc(3px * var(--hv-k));
  bottom: calc(3px * var(--hv-k));
  box-sizing: border-box;
  font: 8px/1.25 var(--hv-f-px, 'Press Start 2P', monospace);
  letter-spacing: 0;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  color: #1d1406;
  background: var(--w2-gold, #e3c79a);
  padding: 2px 2px 1px;
  pointer-events: none;
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-fc { display: grid; gap: 5px; justify-items: stretch; align-content: start; min-width: 0; }
/* a long name takes a second line rather than an ellipsis ("Determined II",
   "Battle Scar II" at 81px tiles), a size smaller at the chrome pixel of 1 */
body.hud-v2.skin-majesty .ww-aside .wa .wa-fn {
  text-align: center;
  font: calc(14px + 2px * var(--hv-k, 1)) / .95 var(--hv-f-vt, 'VT323', monospace);
  color: var(--w2-ink-2, #d9cdb2);
  white-space: normal;
  overflow-wrap: break-word;
  min-width: 0;
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-fc.is-no3d .wa-fn { color: #7d8898; }

/* the eye rows */
body.hud-v2.skin-majesty .ww-aside .wa .wa-erow { display: grid; gap: 5px; }
body.hud-v2.skin-majesty .ww-aside .wa .wa-el {
  font: 8px/1 var(--hv-f-px, 'Press Start 2P', monospace);
  color: #8a98aa;
  letter-spacing: .04em;
}

/* the chosen one's name, under a grid */
body.hud-v2.skin-majesty .ww-aside .wa .wa-nm {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  font: 24px/1 var(--hv-f-vt, 'VT323', monospace);
  color: var(--w2-ink, #efe3c8);
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-nm b { font-weight: 400; }
body.hud-v2.skin-majesty .ww-aside .wa .wa-nm i {
  font: normal 9px/1 var(--hv-f-px, 'Press Start 2P', monospace);
  color: #8a98aa;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── FUR COLOUR and MARKINGS: a typed hex, a chip, three sliders ─────── */
body.hud-v2.skin-majesty .ww-aside .wa .wa-hexrow { display: flex; gap: 10px; align-items: center; }
body.hud-v2.skin-majesty .ww-aside .wa .wa-hex {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  border-image: url('/assets/ui/kitb/chat-input.png?v=2026-09-24a') 4 fill / calc(4 * var(--hv-k) * 1px) stretch;
  image-rendering: pixelated;
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-hex em {
  font: normal 8px/1 var(--hv-f-px, 'Press Start 2P', monospace);
  color: #7d8a9b;
  letter-spacing: .06em;
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-hexin {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  font: 24px/1 var(--hv-f-vt, 'VT323', monospace);
  letter-spacing: 1px;
  color: var(--w2-ink, #efe3c8);
  text-transform: uppercase;
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-chip {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  box-shadow: inset 0 0 0 2px #07090d, 0 0 0 2px #56472f;
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-sl {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 36px;
  gap: 10px;
  align-items: center;
  min-height: 30px;
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-sl > b {
  font: 10px/1 var(--hv-f-px, 'Press Start 2P', monospace);
  font-weight: 400;
  color: #aeb8c8;
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-ro {
  text-align: right;
  font: 10px/1 var(--hv-f-px, 'Press Start 2P', monospace);
  color: var(--w2-ink, #efe3c8);
}
/* the range: the bar's trough, and a gold thumb a finger can hold */
body.hud-v2.skin-majesty .ww-aside .wa .wa-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 30px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-range:focus-visible { outline: 2px solid #fff0cc; outline-offset: 2px; }
body.hud-v2.skin-majesty .ww-aside .wa .wa-range::-webkit-slider-runnable-track {
  height: calc(12px * var(--hv-k));
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  border-image: url('/assets/ui/kitb/trough.png?v=2026-09-24a') 4 fill / calc(4 * var(--hv-k) * 1px) stretch;
  image-rendering: pixelated;
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: calc(8px * var(--hv-k));
  height: calc(16px * var(--hv-k));
  margin-top: calc(-2px * var(--hv-k));
  background: url('/assets/ui/kitb/btngold.png?v=2026-09-24a') center / 100% 100% no-repeat;
  image-rendering: pixelated;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-range::-moz-range-track {
  height: calc(12px * var(--hv-k));
  border-style: solid;
  border-width: 0;
  border-image: url('/assets/ui/kitb/trough.png?v=2026-09-24a') 4 fill / calc(4 * var(--hv-k) * 1px) stretch;
  image-rendering: pixelated;
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-range::-moz-range-thumb {
  width: calc(8px * var(--hv-k));
  height: calc(16px * var(--hv-k));
  border: 0;
  border-radius: 0;
  background: url('/assets/ui/kitb/btngold.png?v=2026-09-24a') center / 100% 100% no-repeat;
  image-rendering: pixelated;
}

/* ── PATTERN: six planks, the chosen one gold ─────────────────────────── */
body.hud-v2.skin-majesty .ww-aside .wa .wa-pat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.hud-v2.skin-majesty .ww-aside .wa .wr-plank.wa-mask {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 0 2px 2px;
  font-size: 8px;
  line-height: 1;
}
body.hud-v2.skin-majesty .ww-aside .wa .wr-plank.wa-mask[aria-pressed='true'] {
  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);
  color: #2a1c0c;
  text-shadow: none;
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-note {
  margin: 4px 0 0;
  font: 19px/1.12 var(--hv-f-vt, 'VT323', monospace);
  color: #b9c3d0;
}

/* ── the foot: the house line, what the save says, RESET ─────────────── */
body.hud-v2.skin-majesty .ww-aside .wa .wa-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding-top: 8px;
  border-top: 2px solid var(--w2-rule, rgba(232, 213, 169, .16));
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-foottext { flex: 1 1 0; min-width: 0; display: grid; gap: 4px; }
body.hud-v2.skin-majesty .ww-aside .wa .wa-house { font: 17px/1.05 var(--hv-f-vt, 'VT323', monospace); color: #9aa6b6; }
body.hud-v2.skin-majesty .ww-aside .wa .wa-status {
  min-height: 8px;
  font: 8px/1 var(--hv-f-px, 'Press Start 2P', monospace);
  color: var(--w2-gold, #e3c79a);
  letter-spacing: .04em;
}
body.hud-v2.skin-majesty .ww-aside .wa .wr-plank.wa-reset { flex: 0 0 auto; min-height: 44px; padding: 0 14px 2px; }

/* ── ON A PHONE: over the bag, the doll in a well of its own ─────────── */
body.hud-v2.skin-majesty .ww-aside .wa.is-over { gap: 6px; }
body.hud-v2.skin-majesty .ww-aside .wa.is-over .wa-well {
  position: relative;
  flex: 0 0 auto;
  height: 250px;
  max-height: 34vh;
  overflow: hidden;
  background: #1b243f;
}
body.hud-v2.skin-majesty .ww-aside .wa.is-over .wa-well::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px #07090d, inset 0 0 0 4px #4a3b28, inset 0 0 26px 8px rgba(5, 8, 14, .75);
}
body.hud-v2.skin-majesty .ww-aside .wa .wa-well .ww-stage {
  position: absolute;
  left: 4px;
  top: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  display: block;
  image-rendering: pixelated;
  pointer-events: none;
}
body.hud-v2.skin-majesty .ww-aside .wa.is-over .wa-coats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body.hud-v2.skin-majesty .ww-aside .wa.is-over .wa-tab { font-size: 9px; }
body.hud-v2.skin-majesty .ww-aside .wa.is-over .wa-hex { height: 44px; }
body.hud-v2.skin-majesty .ww-aside .wa.is-over .wa-chip { width: 44px; height: 44px; }
body.hud-v2.skin-majesty .ww-aside .wa.is-over .wa-sl { min-height: 44px; grid-template-columns: 14px minmax(0, 1fr) 30px; gap: 8px; }
body.hud-v2.skin-majesty .ww-aside .wa.is-over .wa-range { height: 44px; }
body.hud-v2.skin-majesty .ww-aside .wa.is-over .wr-plank.wa-mask { min-height: 44px; }
@media (pointer: coarse) {
  body.hud-v2.skin-majesty .ww-aside .wa .wa-sl { min-height: 44px; }
  body.hud-v2.skin-majesty .ww-aside .wa .wa-range { height: 44px; }
  body.hud-v2.skin-majesty .ww-aside .wa .wr-plank.wa-mask { min-height: 44px; }
}

/* ── the Inventory's gold APPEARANCE, pressed while its panel is open ── */
/* (on the doll's frame since 2026-10-04, world-inventory-v2.css) */
body.hud-v2.skin-majesty .ww-inv2 .ww-dollbox > .ww-appearance[aria-expanded='true'] {
  border-image-source: url('/assets/ui/kitb/btngold.png?v=2026-09-24a');
  color: #2a1c0c;
  filter: brightness(.82);
  box-shadow: 0 0 0 2px #fff0cc, 0 0 12px 2px rgba(255, 220, 150, .45);
}

}
/* end of @layer corners */