/* ═══════════════════════════════════════════════════════════════════════
   world-refine-bench.css — THE REFINING WINDOW (#3345), what only refining
   draws on the bench grammar (world-bench.css).

   Wray's SMITHY 6A (2026-09-27): one bench grammar for the forge, the
   smithy and the smelter, sawhorse and tanning rack. The lines as tabs
   (stone and fibre dim, with their reason), the line's recipes one per
   tier, the made material large on the work, rising hot and cooling from
   orange, and a tray of this visit's stacks. The drawing is
   public/js/world-refine-bench.js. The window's size is world-skin.css's
   per-door ask, the Forge's shape (.43 x .71).

   No new art: the stage is the material's own icon (MatIcons) on a lit
   work surface drawn here in CSS, in place of the Forge's anvil picture.

   `corners`, like world-bench.css; every selector starts at body.hud-v2.
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

/* ── the tabs: the stood-at line says HERE ──────────────────────────────── */
body.hud-v2 .wrf .wb-tab.is-here .wb-tab-sub { color: var(--hv-ok); }
/* on the lit (red) tab the green reads poorly: the tab's own cream */
body.hud-v2 .wrf .wb-tab.is-here[aria-current] .wb-tab-sub { color: #fff3d6; }

/* ── the list: a row per tier, the material's own icon ──────────────────── */
body.hud-v2 .wrf .wrf-cell {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(32px + 10 * var(--hv-k) * 1px);
  height: calc(32px + 10 * var(--hv-k) * 1px);
  box-sizing: border-box;
}
body.hud-v2 .wrf .wrf-recipe.is-locked .wrf-cell,
body.hud-v2 .wrf .wrf-recipe.is-locked .wb-row-name { filter: grayscale(.85) brightness(.75); }
body.hud-v2 .wrf .wrf-recipe.is-locked .wb-row-sub { color: var(--hv-foe); }

/* ── the stage's head: the chosen thing, its gate when shut ─────────────── */
body.hud-v2 .wrf .wrf-head { flex: none; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.hud-v2 .wrf .wrf-gate { font-size: .85em; color: var(--hv-foe); }
body.hud-v2 .wrf .wrf-gate:empty { display: none; }

/* ── the work: a lit surface in place of the Forge's anvil picture ──────── */
body.hud-v2 .wrf .wb-scene {
  --wrf-glow: rgba(255, 140, 40, .32);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0 64%, #2a2016 64% 66%, #17110b 66% 100%),
    radial-gradient(60% 46% at 50% 64%, var(--wrf-glow), rgba(0, 0, 0, 0) 70%),
    #0b0f15;
}
body.hud-v2 .wrf .wb-scene[data-line='wood'] { --wrf-glow: rgba(214, 170, 96, .26); }
body.hud-v2 .wrf .wb-scene[data-line='hide'] { --wrf-glow: rgba(196, 128, 80, .26); }
/* the made thing stands on the surface */
body.hud-v2 .wrf .wb-ghost { bottom: 34%; line-height: 0; }
body.hud-v2 .wrf .wrf-piece {
  /* the raw work, waiting: dim until struck */
  filter: grayscale(.4) brightness(.8) drop-shadow(0 6px 0 rgba(0, 0, 0, .45));
  transition: filter .12s;
}
body.hud-v2 .wrf .wb-scene.is-hot .wrf-piece {
  filter: sepia(.5) saturate(2) brightness(1.25) drop-shadow(0 0 12px #ff8a2a);
}
/* it rises white-hot and cools from orange to its own colour */
body.hud-v2 .wrf .wrf-piece.is-cooling { animation: wrf-cool .9s steps(9) forwards; }
@keyframes wrf-cool {
  0% { filter: brightness(3) saturate(0) drop-shadow(0 0 16px #fff); transform: translateX(-50%) translateY(-14px); }
  40% { filter: sepia(1) saturate(3) brightness(1.6) drop-shadow(0 0 12px #ff8a2a); transform: translateX(-50%) translateY(-8px); }
  100% { filter: brightness(1) drop-shadow(0 6px 0 rgba(0, 0, 0, .45)); transform: translateX(-50%) translateY(0); }
}

/* ── the tray: a stack per material, and how many this visit ────────────── */
body.hud-v2 .wrf .wrf-tray-cell {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: max(44px, calc(32px + 10 * var(--hv-k) * 1px));
  height: max(44px, calc(32px + 10 * var(--hv-k) * 1px));
  box-sizing: border-box;
}
/* the count in the window's readable type (pixel caps at this size were
   4 to 6 px: the smithy review's lesson about tiny words) */
body.hud-v2 .wrf .wrf-tray-n {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font: 400 max(16px, calc(10px + 3 * var(--hv-k) * 1px)) / 1 var(--hv-f-vt);
  color: #fff3d6;
  text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
  pointer-events: none;
}
body.hud-v2 .wrf .wrf-tray-cell.is-new { visibility: hidden; }
body.hud-v2 .wrf .wrf-tray-cell.is-landed { animation: wrf-land .3s steps(4); }
@keyframes wrf-land { 0% { transform: translateY(-6px) scale(1.12); filter: brightness(1.8); } }
/* the flying unit scales from its top-left corner, so it lands on the cell.
   It passes UNDER the full moment's banner (the bench's z 4), never over it:
   the review found the flying ingot hiding "FIRST INGOT" at 390 and 1366.
   .wrf.wb outranks the bench's own .wb .wb-fly (z 5) whatever the load order. */
body.hud-v2 .wrf .wrf-fly { transform-origin: 0 0; line-height: 0; }
body.hud-v2 .wrf.wb .wrf-fly { z-index: 3; }

@container wb (max-width: 640px) {
  /* the laptop's and the phone's stage is shorter: the material smaller */
  body.hud-v2 .wrf .wrf-piece .mi { zoom: .75; }
}
@container wb (max-width: 420px) {
  body.hud-v2 .wrf .wrf-piece .mi { zoom: .7; }
}

@media (prefers-reduced-motion: reduce) {
  body.hud-v2 .wrf .wrf-piece.is-cooling,
  body.hud-v2 .wrf .wrf-tray-cell.is-landed { animation: none; }
}

}
/* end of @layer corners */