/* ---- The forge's equipment tile and its floating preview card -----------------------------------
   The Equipment box used to embed the full `ItemDetailCard` inline: several hundred pixels of stats
   beside a Catalyst box one line tall, so the two halves of one row were wildly different heights
   and the window grew past the screen — the player had to scroll a modal to reach its own Forge
   button. The box is now a TILE with the same markup as the Catalyst beside it, and the card floats
   on hover, from the tile AND from every row of the picker.

   THE CARD IS NOT A CHILD OF THE PANEL. `.rpg-panel` is `overflow: auto`, and a scroll container
   CLIPS absolutely-positioned descendants at its padding box — so the first version, parked off the
   panel's right edge, was drawn inside the window instead. It is mounted on the HUD root by
   `GameUI`, exactly as the bag's and the bestiary's cards are, and keeps the placement
   `.rpg-itemcard` is authored with. */
.rpg-forge-equip { cursor: help; }
.rpg-forge-equip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rpg-recipe { cursor: pointer; }
/* ---- The two input boxes read as ROWS, like the craft bench's ingredients (owner's call) --------
   Icon on the left, name beside it, count on the right — the same shape `.rpg-craft-cost` has, and
   deliberately the same measurements, so the two benches do not describe "a thing and how many of
   it you have" in two different visual languages. Previously the forge stacked icon over name over
   count in a grid, which is a third layout for the same idea and made both boxes taller than they
   needed to be. */
.rpg-forge-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rpg-forge-line-name { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tabular figures so "1/1" and "1/12" do not shuffle the name beside them as the bag changes. */
.rpg-forge-line-qty { flex: none; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.rpg-forge-line-qty.is-short { color: var(--ember); }
.rpg-panel--forge { width: min(720px, 94vw); }
/* THE SMITH BESIDE THE FORGE WINDOW: the shop's portrait treatment (bottom-left, rising from the
   floor, drop-shadowed) on the forge, which had none. Fixed to the viewport because it is a
   sibling of the panel on the HUD root, not a child of it; under the panel's own layer so a wide
   panel overlaps the art rather than the other way round. */
.rpg-forge-vendor { display: none; position: fixed; left: 0; bottom: 0; height: min(84vh, 760px);
  max-width: 30vw; object-fit: contain; object-position: bottom left; pointer-events: none;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.55)); z-index: 40; }
.rpg-forge-vendor.is-open { display: block; }

/* ---- The action bar collapses behind one button ------------------------------------------------
   Nine glyphs pinned across the top-right is a lot of permanent furniture over a game whose appeal
   is looking at the world. `Menu` is the only part that stays; the rest lives in a track that opens
   LEFTWARD from it — the direction there is room in, since the minimap sits immediately to its
   right.

   THE TOGGLE DOES NOT MOVE, and getting that right took undoing two things:

   1. `row-reverse` was wrong. It reverses the main axis, so the FIRST DOM child goes rightmost —
      and the toggle is deliberately last (a control that owns the things before it should read and
      tab after them). That put the toggle at the LEFT end, and opening the track shoved it further
      left. Plain `row` with the toggle last is both the right reading order AND the right visual
      one, because the bar is anchored by its RIGHT edge (`right: 196px; left: auto`), so a box that
      grows grows leftward and the right edge never moves.

   2. The bar's own `gap` still applied to the collapsed track, so the toggle sat 14px further left
      when closed than when open. The gap moves INSIDE the track, and the track's right margin opens
      with it — so at zero width it contributes nothing at all.

   Collapsed with `max-width` rather than `display: none` so both directions animate and the track
   slides out of the toggle. `visibility` (not just opacity) is what removes the buttons from
   hit-testing and the tab order while hidden — an invisible button that can still be tabbed to is
   worse than a visible one. */
.rpg-actionbar { gap: 0; }
/* `overflow-x: clip` WITH `overflow-y: visible`, and that pair is the whole point. Plain
   `overflow: hidden` clips in BOTH axes, and the account menu's dropdown opens DOWNWARD out of this
   track — so hiding the horizontal overflow to get the slide also swallowed the dropdown entirely.
   `clip` is the one overflow value that may be mixed with `visible` on the other axis (`hidden`
   forces the other axis to compute to `auto`, which would give the track a scrollbar and still not
   let the menu out). */
.rpg-actionbar-items { display: flex; gap: 14px; align-items: flex-start;
  overflow-x: clip; overflow-y: visible; max-width: 0; margin-right: 0; opacity: 0; visibility: hidden;
  transition: max-width .28s ease, margin-right .28s ease, opacity .18s ease,
              visibility 0s linear .28s; }
.rpg-actionbar.is-open .rpg-actionbar-items { max-width: 80vw; margin-right: 14px; opacity: 1;
  visibility: visible;
  transition: max-width .28s ease, margin-right .28s ease, opacity .22s ease .04s, visibility 0s; }

/* THE TOGGLE SHOWS ITS STATE, not just its action. Open, it takes the same gold this interface uses
   for "this is on" everywhere else (the hotbar's padlock, a selected slot) — so the bar reads as
   open at a glance even when the track is off the side of a narrow window. The glyph turns with it,
   which is the half that says which way the next click goes. */
.rpg-actionbar-toggle .rpg-btn-glyph { transition: transform .28s ease, background .2s ease,
  border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.rpg-actionbar.is-open .rpg-actionbar-toggle .rpg-btn-glyph {
  transform: rotate(90deg);
  /* FILLED, not merely outlined. The first cut changed the border and added a glow, and against
     eight identical discs that was not a difference you could read at a glance — measured by
     looking at the two states side by side. Inverting the disc is: the open button is the one that
     is gold instead of indigo, which is the same "this is on" this interface uses for a selected
     hotbar slot. */
  color: #1b1440;
  border-color: var(--gold-hi);
  background: linear-gradient(180deg, #e9cf94, var(--gold-base));
  box-shadow: 0 0 14px -1px var(--gold-glow, rgba(201,164,110,.55)),
              inset 0 1px 0 rgba(255,248,224,.55); }
.rpg-actionbar.is-open .rpg-actionbar-toggle .rpg-btn-label { color: var(--gold-hi); }
/* PREFERS-REDUCED-MOTION: the collapse still happens, it just stops sliding. */
@media (prefers-reduced-motion: reduce) {
  .rpg-actionbar-items, .rpg-actionbar.is-open .rpg-actionbar-items,
  .rpg-actionbar-toggle .rpg-btn-glyph { transition: none; }
}