/* ═══════════════════════════════════════════════════════════════════════
   world-wear.css — HOW WEAR SHOWS (#3219, Wray's REPAIR 3A, 2026-09-27).

   "A thin bar under each bag cell and doll slot (amber, then red, then
   cracked grey), plus a small figure by your portrait that lights a worn
   slot." public/js/world-wear.js draws both, and only while
   FEATURE_WORLD_DURABILITY is on; with it off there is nothing here to
   match.

     .wear-bar[data-band]   the bar along a cell's foot: worn amber, badly
                           worn red, broken grey (a sound piece has none)
     .wear-crack             the crack over a broken piece
     .wear-fig               the figure under the hero plate, in the top-left
                           corner's own column

   The colours are the mock's (audit/ui-gen/2026-09-27-undesigned-screens/
   screens/repair.js): amber #d9a441, red #d9533f, and a cracked grey.

   ── THE LAYER ────────────────────────────────────────────────────────────
   `corners`, like the bench's windows: marks laid inside the Inventory's
   cells, answering the skin by layer, never by specificity
   (__tests__/worldCssLayers.test.js).
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

/* ── 1. THE BAR, along the foot of a bag cell or a doll slot ─────────────
   Both cells are positioned already (the bag's relative, the doll's
   absolute), so the bar needs nothing from them. It sits inside the cell's
   rim, under the stack count's corner. */
.wear-bar {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 7%;
  z-index: 3;
  height: max(3px, calc(2px * var(--hv-k, 1)));
  background: #07090d;
  box-shadow: 0 0 0 1px #07090d;
  pointer-events: none;
}
.wear-bar > i {
  display: block;
  height: 100%;
  max-width: 100%;
  background: #d9a441;
}
.wear-bar[data-band='badly_worn'] > i { background: #d9533f; }
/* broken: the whole trough in cracked grey, however low the reading, so a
   piece that fights as empty is never a sliver nobody can see */
.wear-bar[data-band='broken'] > i {
  background: repeating-linear-gradient(90deg, #8a8f99 0 4px, #3a3f48 4px 6px);
}
/* the count sits clear of the bar */
[data-wear] > .ww-stackn { bottom: calc(10% + 3px); }

/* ── 2. A BROKEN PIECE: the crack over it, the art greyed ──────────────── */
/* the mock's crack (repair.js crack()): a dark split with a pale edge */
.wear-crack {
  position: absolute;
  inset: 14%;
  z-index: 2;
  pointer-events: none;
  opacity: .85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'%3E%3Cpath d='M2 6 L8 10 L6 14 L12 16 L11 22 M8 10 L14 7 L18 11 L22 10 M12 16 L18 18' fill='none' stroke='%2306080c' stroke-width='1.7'/%3E%3Cpath d='M3 6 L9 10 L7 14 L13 16' fill='none' stroke='%23e8edf3' stroke-width='.55' opacity='.75'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.wear-broken > img { filter: grayscale(1) brightness(.75); }

/* ── 3. THE FIGURE, under the hero plate ────────────────────────────────── */
/* absolute in the corner (world-wear.js place() puts it under the portrait),
   so the target plate beside the hero plate never moves for it */
.wear-fig {
  position: absolute;
  display: grid;
  place-items: center;
  width: calc(26px + 6px * var(--hv-k, 1));
  height: calc(28px + 6px * var(--hv-k, 1));
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 5px;
  box-sizing: border-box;
  border: 0;
  /* the figure itself is a picture world-wear.js sets as background-image,
     drawn inside the rim; the slate behind it */
  background-color: #0e1319;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 72% auto;
  box-shadow: inset 0 0 0 2px #07090d, inset 0 0 0 4px #4a3b28, 0 2px 0 rgba(0, 0, 0, .5);
  cursor: pointer;
  image-rendering: pixelated;
}
.wear-fig:hover { filter: brightness(1.2); }
.wear-fig:focus-visible { outline: 2px solid #e3c79a; outline-offset: 1px; }
/* the worst band rims it, so the corner says how bad at a glance */
.wear-fig[data-worst='worn'] { box-shadow: inset 0 0 0 2px #07090d, inset 0 0 0 4px #d9a441, 0 2px 0 rgba(0, 0, 0, .5); }
.wear-fig[data-worst='badly_worn'] { box-shadow: inset 0 0 0 2px #07090d, inset 0 0 0 4px #d9533f, 0 2px 0 rgba(0, 0, 0, .5); }
.wear-fig[data-worst='broken'] { box-shadow: inset 0 0 0 2px #07090d, inset 0 0 0 4px #8a8f99, 0 2px 0 rgba(0, 0, 0, .5); }

}
/* end of @layer corners */