/* ═══════════════════════════════════════════════════════════════════════
   world-repair.css — THE WHETSTONE'S PANEL (#3219, REPAIR-W; Wray's
   REPAIR 2A and 4A, 2026-09-27).

   "A station window on the left with REPAIR and SALVAGE tabs, and your bag
   open on the right" (2A), and salvage as "put one piece on the bench, see
   what comes back as icons, and hold to break it into its ingots" (4A).
   public/js/world-repair.js draws it into the aside world-windows.js hangs on
   the Inventory's left edge (`.ww-aside.wh-aside`, 400 wide where there is
   room, 320 otherwise, laid over the bag on a phone). Its title ribbon and
   close are the Bank's (world-bank.css 0b), shared by selector.

   The grammar is the bench's (world-bench.css, `.wb`): the tabs, the rows,
   the stage, the costs, the gold button, the status line and the away block.
   This file lays those out for a panel one column wide and adds what only
   the whetstone draws (`.wh-*`): the place row, the wear bar in a row, the
   repair button, the bag strip, the bench and the hold.

   ── THE LAYER ────────────────────────────────────────────────────────────
   `corners`, like the bench's windows, and every selector under
   `body.hud-v2`: the panel exists only under the HUD pass.
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

/* ── 0. THE PANEL: a column in the aside, the list is the one scroller ─── */
body.hud-v2.skin-majesty .ww-aside.wh-aside .ww-asidebody {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
body.hud-v2 .wb.wh {
  flex: 1 1 auto;
  min-height: 0;
  gap: 6px;
  color: #d9cdb2;
}
body.hud-v2 .wb.wh .wb-tab { flex: 1 1 0; min-width: 0; }

/* ── 1. THE PLACE ROW: where the whetstone is, and whether you are there ── */
body.hud-v2 .wb.wh .wh-place {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  padding: 0 4px 4px;
  border-bottom: 2px solid #2e3a49;
}
body.hud-v2 .wb.wh .wh-pl {
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1.3 var(--hv-f-px);
  letter-spacing: 1px;
  color: #e3c79a;
  white-space: nowrap;
}
body.hud-v2 .wb.wh .wh-st {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1.3 var(--hv-f-px);
  letter-spacing: 1px;
  white-space: nowrap;
}
body.hud-v2 .wb.wh .wh-st::before {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  background: currentColor;
  box-shadow: 0 0 0 2px #07090d;
}
body.hud-v2 .wb.wh .wh-st.is-here { color: #8fd89a; }
body.hud-v2 .wb.wh .wh-st.is-away { color: #b4bfcc; }
body.hud-v2 .wb.wh .wh-st.is-away::before { background: transparent; box-shadow: inset 0 0 0 2px #b4bfcc, 0 0 0 2px #07090d; }

/* ── 2. THE PANE under the tabs ───────────────────────────────────────── */
body.hud-v2 .wb.wh .wh-pane {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.hud-v2 .wb.wh .wh-empty { margin: 8px 4px; color: #aab6c6; }

/* ── 3. REPAIR: the list, a row per piece ─────────────────────────────── */
/* ⛔ its own list and rows, in the grammar's look: the grammar's `.wb-list`
   and `.wb-row` turn into a sideways strip of 72 px tiles in any window
   under 640 px (world-bench.css section 6), and this panel is 320 to 400 */
body.hud-v2 .wb.wh .wh-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--hv-k) * 1px);
  padding-right: 2px;
  scrollbar-width: thin;
}
body.hud-v2 .wb.wh .wh-list > * { flex-shrink: 0; }
body.hud-v2 .wb.wh .wh-soundh { margin-top: 6px; padding-top: 8px; border-top: 2px solid #2e3a49; }
body.hud-v2 .wb.wh .wh-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: calc(48px + 6 * var(--hv-k) * 1px);
  padding: 4px 6px 4px 4px;
  background: #1b2330;
  box-shadow: inset 0 0 0 2px #0b0f15, inset 0 0 0 3px #3a4760;
}
body.hud-v2 .wb.wh .wh-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.hud-v2 .wb.wh .wh-name { font-weight: 400; color: var(--hv-gold-hi, #e3c79a); overflow-wrap: break-word; }
body.hud-v2 .wb.wh .wh-l3 { font-size: .8em; line-height: 1; color: #aab6c6; }
body.hud-v2 .wb.wh .wh-row[data-band='worn'] { background: #231e14; }
body.hud-v2 .wb.wh .wh-row[data-band='badly_worn'],
body.hud-v2 .wb.wh .wh-row[data-band='broken'] { background: #26161a; }
/* the piece's slot: kit B's rim with the bag's own icon in it */
body.hud-v2 .wb.wh .wh-cell {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: calc(36px + 6 * var(--hv-k) * 1px);
  height: calc(36px + 6 * var(--hv-k) * 1px);
  box-sizing: border-box;
}
body.hud-v2 .wb.wh .wh-cell > img { width: 78%; height: 78%; object-fit: contain; image-rendering: pixelated; }
body.hud-v2 .wb.wh .wh-abbr { font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-px); color: #e3c79a; }
body.hud-v2 .wb.wh .wh-bl { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* the reading as a bar: the whetstone's own, amber, red or grey by band */
body.hud-v2 .wb.wh .wh-bar {
  flex: 1 1 auto;
  min-width: 40px;
  max-width: 124px;
  height: calc(4px + 2 * var(--hv-k) * 1px);
  background: #07090d;
  box-shadow: inset 0 0 0 1px #2e3a49;
}
body.hud-v2 .wb.wh .wh-bar > i { display: block; height: 100%; background: #c9d4e2; }
body.hud-v2 .wb.wh .wh-bar[data-band='worn'] > i { background: #d9a441; }
body.hud-v2 .wb.wh .wh-bar[data-band='badly_worn'] > i { background: #d9533f; }
body.hud-v2 .wb.wh .wh-bar[data-band='broken'] > i { background: #8a8f99; }
body.hud-v2 .wb.wh .wh-dn { flex: none; font-size: .85em; color: #aab6c6; white-space: nowrap; }
body.hud-v2 .wb.wh .wh-l3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; }
body.hud-v2 .wb.wh .wh-bw { font-weight: 400; color: #c9d4e2; }
body.hud-v2 .wb.wh .wh-bw[data-band='worn'] { color: #d9a441; }
body.hud-v2 .wb.wh .wh-bw[data-band='badly_worn'],
body.hud-v2 .wb.wh .wh-bw[data-band='broken'] { color: #ef6a55; }
body.hud-v2 .wb.wh .wh-tag {
  margin-left: 2px;
  padding: 1px 4px;
  /* 4px + 2k like every other pixel label here: 3px + 2k was 5 px text at
     the smaller chrome scale (1280, 1366), unreadable (#3356 review) */
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1.3 var(--hv-f-px);
  color: #e3c79a;
  box-shadow: inset 0 0 0 1px #7e6440;
}
/* the band word keeps the separator, the rest keeps its words: a wrap
   breaks after the dot, never before it (#3356 review: a line began "·") */
body.hud-v2 .wb.wh .wh-lead,
body.hud-v2 .wb.wh .wh-rest { white-space: nowrap; }
/* a piece mended this visit keeps its place, marked (the mock's MENDED) */
body.hud-v2 .wb.wh .wh-row.is-mended { background: #17241c; box-shadow: inset 0 0 0 2px #0b0f15, inset 0 0 0 3px #3f6a4a; }
body.hud-v2 .wb.wh .wh-done {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  letter-spacing: 1px;
  color: #8fd89a;
  white-space: nowrap;
}
body.hud-v2 .wb.wh .wh-done::before {
  content: '';
  width: 8px;
  height: 4px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
}
body.hud-v2 .wb.wh .wh-rr { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
body.hud-v2 .wb.wh .wh-cost { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: #fff3d6; }
/* REPAIR on a row: the bench's slate button (btn.png), 44 px tall */
body.hud-v2 .wb.wh .wh-fix {
  min-height: 44px;
  min-width: calc(60px + 8 * var(--hv-k) * 1px);
  padding: 0 6px;
  border-style: solid;
  border-image: url('/assets/ui/kitb/btn.png?v=2026-09-24a') 3 3 5 3 fill / calc(3 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px) calc(5 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px) stretch;
  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);
  background: none;
  image-rendering: pixelated;
  color: #efe3c8;
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  letter-spacing: 1px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
  cursor: pointer;
}
body.hud-v2 .wb.wh .wh-fix:hover { filter: brightness(1.18); }
body.hud-v2 .wb.wh .wh-fix:disabled { color: #8d99aa; cursor: default; filter: none; }
body.hud-v2 .wb.wh .wh-foot { margin: 6px 4px 2px; }

/* the foot: the total, a short wallet, the status line, REPAIR ALL (gold).
   The status line is IN the foot, above its button: a line appearing pushes
   the foot's top up and never moves the button (#3356 review) */
body.hud-v2 .wb.wh .wh-act { flex: none; padding-top: 6px; border-top: 2px solid #2e3a49; }
/* ANOTHER PIECE after a break: the row's slate button, the foot's width */
body.hud-v2 .wb.wh .wh-act > .wh-another { width: 100%; min-height: calc(40px + 6 * var(--hv-k) * 1px); }
body.hud-v2 .wb.wh .wh-total { color: #e3c79a; }

/* ── 4. SALVAGE: the bag strip, the bench, what comes back, the hold ───── */
/* a short window (1366 x 768 gives the panel about 520 px) cannot hold the
   strip, the bench, the yield and the button at once: the pane scrolls and
   HOLD TO BREAK stays pinned at its foot, so it is never below the fold */
body.hud-v2 .wb.wh .wh-pane[data-tab='salvage'] {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}
body.hud-v2 .wb.wh .wh-pane[data-tab='salvage'] > * { flex-shrink: 0; }
body.hud-v2 .wb.wh .wh-pane[data-tab='salvage'] > .wh-act {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: auto;
  padding: 6px 0 2px;
  background: #1f2835;
  box-shadow: 0 -8px 10px -6px rgba(0, 0, 0, .6);
}
body.hud-v2 .wb.wh .wh-strip {
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding: 0 0 4px;
  scrollbar-width: thin;
}
body.hud-v2 .wb.wh .wh-pick {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 3px;
  border: 0;
  background: #121821;
  box-shadow: inset 0 0 0 2px #0b0f15, inset 0 0 0 3px #3a4760;
  cursor: pointer;
}
body.hud-v2 .wb.wh .wh-pick:hover { background: #1b2330; }
body.hud-v2 .wb.wh .wh-pick.is-on { background: #2b2418; box-shadow: inset 0 0 0 2px #0b0f15, inset 0 0 0 4px var(--hv-gold, #a28155), 0 0 10px rgba(227, 199, 154, .25); }
body.hud-v2 .wb.wh .wh-pick.is-no .wh-cell { opacity: .55; filter: grayscale(.6); }
/* the bench: the grammar's stage, a fixed height in a one-column panel,
   and lower in a short window so the yield and the foot fit beside it
   (#3356 review: at 1366 x 768 the yield sat under the pinned button) */
body.hud-v2 .wb.wh .wh-bench {
  flex: 0 0 auto;
  height: clamp(110px, 21vh, 230px);
  min-height: 0;
  cursor: default;
}
@media (max-height: 820px) {
  body.hud-v2 .wb.wh .wh-bench { height: clamp(76px, 11vh, 120px); }
  body.hud-v2 .wb.wh .wh-pane[data-tab='salvage'] { gap: 4px; }
}
body.hud-v2 .wb.wh .wh-bench.is-empty { filter: brightness(.8); }
body.hud-v2 .wb.wh .wh-onbench { display: grid; place-items: center; }
body.hud-v2 .wb.wh .wh-onbench > img {
  width: calc(44px + 14 * var(--hv-k) * 1px);
  height: calc(44px + 14 * var(--hv-k) * 1px);
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .55));
}
body.hud-v2 .wb.wh .wh-onbench > .wh-abbr { font-size: calc(8px + 4 * var(--hv-k) * 1px); }
body.hud-v2 .wb.wh .wh-onbench.is-gone { opacity: 0; transition: opacity .25s steps(3); }
body.hud-v2 .wb.wh .wh-benchword {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 38%;
  text-align: center;
  color: #d9cdb2;
  text-shadow: 0 2px 0 #000;
  pointer-events: none;
}
body.hud-v2 .wb.wh .wh-meta { flex: none; display: flex; flex-direction: column; gap: 2px; min-height: 1.1em; }
body.hud-v2 .wb.wh .wh-mname { font-weight: 400; color: #e3c79a; }
body.hud-v2 .wb.wh .wh-msub { font-size: .85em; color: #aab6c6; }
body.hud-v2 .wb.wh .wh-msub.is-no { color: #ef6a55; }
/* what comes back: ONE row of kit B slots, the count on each slot's corner
   and the name under it (the mock's chips), not a two-column list of
   icon-and-words that cost a short window the yield */
body.hud-v2 .wb.wh .wh-back { flex: none; display: flex; flex-direction: column; gap: 4px; }
body.hud-v2 .wb.wh .wh-chips {
  --wh-slot: calc(32px + 10 * var(--hv-k) * 1px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--wh-slot) + 18px), 1fr));
  gap: 4px 6px;
}
body.hud-v2 .wb.wh .wh-back .wb-cost {
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
}
body.hud-v2 .wb.wh .wh-back .wb-cost-txt { align-items: center; min-width: 0; }
body.hud-v2 .wb.wh .wh-back .wb-cost-txt b {
  position: absolute;
  top: calc(var(--wh-slot) - 1.15em);
  left: calc(50% + var(--wh-slot) / 2 - 3px);
  transform: translateX(-100%);
  z-index: 2;
  line-height: 1;
  text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
  pointer-events: none;
}
body.hud-v2 .wb.wh .wh-back .wb-cost-txt span { line-height: 1.1; overflow-wrap: anywhere; }
/* after a break, what came back is lit (YOU GOT) */
body.hud-v2 .wb.wh .wh-back.is-got .wb-h { color: #8fd89a; }
body.hud-v2 .wb.wh .wh-back.is-got .wb-cost-slot { box-shadow: 0 0 0 2px #8fd89a, 0 0 12px rgba(143, 216, 154, .45); }
body.hud-v2 .wb.wh .wh-back.is-got .wb-cost-txt b { color: #d6ffd9; }
body.hud-v2 .wb.wh .wh-warn { flex: none; }
body.hud-v2 .wb.wh .wh-bench.is-broke { filter: brightness(.85); }
/* HOLD TO BREAK: the gold button, filled from the left while it is held */
body.hud-v2 .wb.wh .wh-hold {
  position: relative;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
body.hud-v2 .wb.wh .wh-hold .wh-ring {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: rgba(255, 244, 214, .45);
  pointer-events: none;
}
body.hud-v2 .wb.wh .wh-hold.is-holding .wh-ring { width: 100%; transition: width .9s linear; }
body.hud-v2 .wb.wh .wh-hold .wh-holdw { position: relative; }
body.hud-v2 .wb.wh .wh-status { flex: none; }

/* ── 5. THE PIECE ON THE BENCH, lifted in the bag beside it ───────────── */
body.hud-v2 .ww-bag1 .ww-slotc.wh-lift {
  outline: 2px solid #e3c79a;
  outline-offset: -2px;
  filter: brightness(1.2);
}

/* ── 6. THE INGOTS GO TO THE BAG (4A's moment, #3356 review) ────────────
   Each line of the yield flies from the bench to the bag cell that took it
   (world-repair.js flyHome), and the cell flashes with its count. Above the
   sheet (60), the panel (61) and a pinned card (9500). */
body.hud-v2 .wh-fly {
  position: fixed;
  z-index: 9600;
  width: calc(32px + 10 * var(--hv-k) * 1px);
  height: calc(32px + 10 * var(--hv-k) * 1px);
  margin: calc((32px + 10 * var(--hv-k) * 1px) / -2) 0 0 calc((32px + 10 * var(--hv-k) * 1px) / -2);
  display: grid;
  place-items: center;
  pointer-events: none;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .6));
  animation-name: wh-fly;
  animation-timing-function: cubic-bezier(.45, 0, .7, .6);
  animation-fill-mode: both;
}
body.hud-v2 .wh-fly .wb-mat { display: grid; place-items: center; line-height: 0; }
body.hud-v2 .wh-flycoin::before {
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  /* the Obol (Wray's pick A, 2026-10-04), at its own 32 art pixels */
  background: url('/assets/ui/kitb/obol.png?v=2026-10-04a') center / contain no-repeat;
  image-rendering: pixelated;
}
@keyframes wh-fly {
  0% { transform: translate(0, 0) scale(1.15); opacity: 1; }
  45% { transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .45 - 48px)) scale(1); }
  100% { transform: translate(var(--dx), var(--dy)) scale(.7); opacity: .9; }
}
body.hud-v2 .ww-slotc.wh-got,
body.hud-v2 .ww-obols.wh-got { animation: wh-got 1.2s steps(6) both; }
@keyframes wh-got {
  0%, 30%, 60% { filter: brightness(1.9); box-shadow: 0 0 0 2px #8fd89a, 0 0 14px rgba(143, 216, 154, .6); }
  15%, 45%, 100% { filter: none; }
}
body.hud-v2 .wh-plus {
  position: fixed;
  z-index: 9601;
  transform: translate(-50%, -100%);
  font: 400 calc(6px + 3 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  color: #d6ffd9;
  text-shadow: 0 2px 0 #000, 1px 0 0 #000, -1px 0 0 #000;
  pointer-events: none;
  animation: wh-plus 1.3s steps(8) both;
}
@keyframes wh-plus {
  0% { opacity: 0; transform: translate(-50%, -60%); }
  15% { opacity: 1; transform: translate(-50%, -100%); }
  75% { opacity: 1; transform: translate(-50%, -150%); }
  100% { opacity: 0; transform: translate(-50%, -170%); }
}

@media (prefers-reduced-motion: reduce) {
  /* a STEPPED fill, not the full bar on press (#3356 review): the only
     progress cue said "done" 900 ms before it was */
  body.hud-v2 .wb.wh .wh-hold.is-holding .wh-ring { transition: width .9s steps(3, end); }
  body.hud-v2 .wb.wh .wh-onbench.is-gone { transition: none; }
  body.hud-v2 .ww-slotc.wh-got,
  body.hud-v2 .ww-obols.wh-got { animation: wh-got 1.2s steps(2) both; }
  body.hud-v2 .wh-plus { animation: none; }
}

}
/* end of @layer corners */