/* =============================================================================
   wgf-chrome.css - THE in-game chrome kit
   -----------------------------------------------------------------------------
   Owner law: docs/ui-ux/13-ingame-reference.md
     - Sec 0.4  the container standard (ig-38 charcoal plate + beveled frame)
     - Sec 0.6  the red button standard (ig-43/44/48 red plate, gold Friz text)
     - Sec 0.9  THE chrome kit ("we need these buttons and containers and
                stylizing done site wide") - this file is that kit.

   The look is NOT hand-drawn: every metal/red texture here is the client's OWN
   UI atlas art, sliced by tools/slice_ui_atlas.py into /assets/ui/*.png. Flat
   colors, gold text and spacing come from the design tokens in
   static/css/_tokens.css - never a raw value a token already covers. No AI art.

   Consume the tokens: load static/css/_tokens.css BEFORE this file.

   Components:
     .wgf-btn-red        client red action button (left/center/right slices)
     .wgf-window         metal-frame window (corner braces + charcoal plate)
     .wgf-window__title  window header bar
     .wgf-window__x      red X close affordance (exit icon slice)
     .wgf-window__tabs   tab strip on the plate edge
     .wgf-tab            one squared tab (active = lit gold)
     .wgf-plate-row      Warband character plate row (ig-49), --selected = gold
     .wgf-dialog-banner  NPC dialog banner (ig-50)
   ============================================================================= */

/* Chrome-kit structural tokens (--wgf-plate/-hi, --wgf-metal/-soft, --wgf-well/-edge,
   --wgf-btn-h/-cap, --wgf-input-h, --wgf-dropdown-h) live in /static/css/_tokens.css
   (single home, 2026-07-04 uiux-standardization; slice art root: /assets/ui). The
   window-plate history (owner rounds 2/3, image 84: plate = the near-black well) is
   documented there with the values. */

/* -----------------------------------------------------------------------------
   .wgf-btn-red - the client red action button.
   Built from three real slices layered as backgrounds (text always paints
   above the backgrounds, so long labels never clip):
     left cap   (128-redbutton-left)   anchored left
     right cap  (128-redbutton-right)  anchored right
     center     (_128-redbutton-center) tiled horizontally to fill
   All slices are 128px tall hi-res art rendered at 100% of the button height
   (~34px), so they stay crisp. Label = yellow-gold Friz (--font-game).
   States: default / :hover (brightness lift) / :active (pressed slices) /
   [disabled] and .is-disabled (disabled slices, no pointer).

   Usage:
     <button class="wgf-btn-red">Enter World</button>
     <a class="wgf-btn-red" href="...">Track item</a>
   --------------------------------------------------------------------------- */
.wgf-btn-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--wgf-btn-h);
  min-width: 96px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: 0;
  /* True 56px edge caps + the center tile CLIPPED to the content box between
     them (padding MUST equal the cap width exactly: wider leaves a transparent
     gap, narrower re-creates the doubled edge under a cap's alpha - the glitch
     the owner circled 2026-07-04). min-width + flex centering keep labels clear. */
  background:
    url(/assets/ui/128-redbutton-left-cap.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/128-redbutton-right-cap.png) right center / auto 100% no-repeat border-box,
    url(/assets/ui/_128-redbutton-center.png) left center / auto 100% repeat-x content-box;
  padding: 0 var(--wgf-btn-cap);
  background-color: transparent;
  color: var(--wgf-gold-bright);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-shadow: var(--text-ink-outline);
  cursor: pointer;
  user-select: none;
  transition: filter var(--motion-fast) var(--ease-standard);
}

.wgf-btn-red:hover {
  /* The atlas ships a soft glow overlay (128-redbutton-highlight); a brightness
     lift reads the same across every button width and stays crisp. */
  filter: brightness(1.12);
}

.wgf-btn-red:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.wgf-btn-red:active {
  background:
    url(/assets/ui/128-redbutton-left-cap-pressed.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/128-redbutton-right-cap-pressed.png) right center / auto 100% no-repeat border-box,
    url(/assets/ui/_128-redbutton-center-pressed.png) left center / auto 100% repeat-x content-box;
  /* Pressed reads as a real push (owner 2026-07-04: "the force action should be
     a little bit better"): the pressed slices plus a 1px sink and a slight dim. */
  transform: translateY(1px);
  filter: brightness(0.92);
}

.wgf-btn-red[disabled],
.wgf-btn-red.is-disabled {
  background:
    url(/assets/ui/128-redbutton-left-cap-disabled.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/128-redbutton-right-cap-disabled.png) right center / auto 100% no-repeat border-box,
    url(/assets/ui/_128-redbutton-center-disabled.png) left center / auto 100% repeat-x content-box;
  color: var(--wgf-gold-dim);
  cursor: default;
  pointer-events: none;
  filter: none;
}

/* Larger primary CTA (ig-48 "Enter World" scale). Cap scales with height:
   56px source at 44px height = 19px logical. */
.wgf-btn-red.wgf-btn-red--lg {
  --wgf-btn-h: 44px;
  --wgf-btn-cap: 19px;
  min-width: 200px;
  font-size: var(--text-md);
}

/* Small red button (owner review round 2, verdict 5): the pagination controls and
   other compact actions. The caps SCALE with the button height via `auto 100%`, so
   at 26px tall the 56px source cap renders ~11px wide; the padding==cap-width rule
   still holds (--wgf-btn-cap MUST equal that scaled cap width, or the center tile
   gaps under a cap's alpha - the same glitch the base button guards against). */
.wgf-btn-red.wgf-btn-red--sm {
  --wgf-btn-h: 26px;
  --wgf-btn-cap: 11px;
  min-width: 30px;
  font-size: var(--text-xs);
}
/* the current page reads as PRESSED (the pressed cap slices + 1px sink), the same
   language as .wgf-btn-red:active, but persistent via aria-current. */
.wgf-btn-red[aria-current="page"] {
  background:
    url(/assets/ui/128-redbutton-left-cap-pressed.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/128-redbutton-right-cap-pressed.png) right center / auto 100% no-repeat border-box,
    url(/assets/ui/_128-redbutton-center-pressed.png) left center / auto 100% repeat-x content-box;
  transform: translateY(1px);
  filter: brightness(0.92);
  cursor: default;
  pointer-events: none;
}

/* The sanctioned "new feature" flag (ig-56): a tiny purple NEW mini-badge that
   rides a button's LEFT edge - the ONLY new-feature idiom (owner 2026-07-04).
   Put it on a positioned wrapper around the button.
   Usage:  <span class="wgf-has-new"><button class="wgf-btn-red">...</button>
             <span class="wgf-badge-new">New</span></span> */
.wgf-has-new { position: relative; display: inline-flex; }
.wgf-badge-new {
  position: absolute;
  top: -6px;
  left: -8px;
  z-index: 1;
  padding: 1px 5px;
  border: 1px solid #d7b8ff;
  border-radius: 3px;
  background: linear-gradient(180deg, #8a2be2, #5b1a99);
  color: #fff;
  font-family: var(--font-game);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   .wgf-iconbtn - the square red icon buttons (ig-44 X + the +/- / refresh
   family). Each uses a real sliced icon (128-redbutton-<icon>) with pressed /
   disabled state slices. The highlight slice is the shared hover overlay, so a
   brightness lift stands in (same as the main button).
   Usage:  <button class="wgf-iconbtn wgf-iconbtn--plus" aria-label="Add"></button>
   --------------------------------------------------------------------------- */
.wgf-iconbtn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: center / contain no-repeat transparent;
  cursor: pointer;
  transition: filter var(--motion-fast) var(--ease-standard);
}
.wgf-iconbtn:hover { filter: brightness(1.12); }
.wgf-iconbtn:active { transform: translateY(1px); filter: brightness(0.92); }
.wgf-iconbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wgf-iconbtn[disabled] { cursor: default; pointer-events: none; filter: none; }
.wgf-iconbtn--x       { background-image: url(/assets/ui/128-redbutton-exit.png); }
.wgf-iconbtn--x:active,
.wgf-iconbtn--x.is-pressed { background-image: url(/assets/ui/128-redbutton-exit-pressed.png); }
.wgf-iconbtn--x[disabled] { background-image: url(/assets/ui/128-redbutton-exit-disabled.png); }
.wgf-iconbtn--plus    { background-image: url(/assets/ui/128-redbutton-plus.png); }
.wgf-iconbtn--plus[disabled] { background-image: url(/assets/ui/128-redbutton-plus-disabled.png); }
.wgf-iconbtn--minus   { background-image: url(/assets/ui/128-redbutton-minus.png); }
.wgf-iconbtn--minus[disabled] { background-image: url(/assets/ui/128-redbutton-minus-disabled.png); }
.wgf-iconbtn--refresh { background-image: url(/assets/ui/128-redbutton-refresh.png); }
.wgf-iconbtn--refresh[disabled] { background-image: url(/assets/ui/128-redbutton-refresh-disabled.png); }

/* -----------------------------------------------------------------------------
   .wgf-window - the metal-frame window (ig-38 container standard).
   A charcoal plate (near-black, warm) inside a beveled metal edge, with the
   four real corner braces from the ui-frame-metal atlas anchored at the
   corners for the client's joinery detail. The atlas ships CORNER members
   only (no straight-edge slices), so the edges are an honest metal-tone border
   (--wgf-metal), not invented edge art. Top corners are the 150px braces,
   bottom corners the 64px braces; both render small and crisp.

   Usage:
     <section class="wgf-window">
       <header class="wgf-window__title">Delves: Season 1
         <button class="wgf-window__x" aria-label="Close"></button>
       </header>
       <div class="wgf-window__body"> ... </div>
       <nav class="wgf-window__tabs"> ...tabs... </nav>
     </section>
   --------------------------------------------------------------------------- */
.wgf-window {
  position: relative;
  box-sizing: border-box;
  border: 2px solid var(--wgf-metal);
  border-radius: 0;
  /* Owner round 4 (image 95): the window body is ROUGH dark grey slate, not a smooth
     flat fill - the client's own Class Hall stone tile (interface/garrison/
     classhallbackground.blp, 256px seamless) with a faint grey lift so it reads slate. */
  /* Owner tone law 2026-07-04: DARKER body, LESS smoothness - the stone tile shows
     through a heavy dark wash (rough slate, not a lit gradient). */
  background:
    url(/assets/ui/ui-frame-metal-cornertopleft-2x.png) top left / 40px auto no-repeat,
    url(/assets/ui/ui-frame-metal-cornertopright-2x.png) top right / 40px auto no-repeat,
    url(/assets/ui/ui-frame-metal-cornerbottomleft-2x.png) bottom left / 26px auto no-repeat,
    url(/assets/ui/ui-frame-metal-cornerbottomright-2x.png) bottom right / 26px auto no-repeat,
    linear-gradient(rgba(0, 0, 0, 0.44), rgba(0, 0, 0, 0.44)),
    url(/assets/ui/classhall-stone-tile.png) left top / 256px 256px repeat,
    var(--wgf-plate);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.65),
    var(--shadow-2);
  color: var(--wgf-text);
}

/* The header is a CARVED in-game plate, not a flat web bar (owner 2026-07-04: "this
   behind the market board, I hate"). Real Class Hall stone texture (same material as
   the body) + a top bevel highlight + inner depth shadow + a GOLD separator hairline
   (in-game headers trim in gold/bronze, never gray). */
.wgf-window__title {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 38px;
  padding: var(--space-2) var(--space-5);
  /* Owner 2026-07-04: no gold hairline under the header ("we don't like the yellow
     line") - the seam is a dark carved joint, like the client's own window bars. */
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  background:
    linear-gradient(rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.38)),
    url(/assets/ui/classhall-stone-tile.png) left top / 256px 256px repeat,
    var(--wgf-plate-hi);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -6px 10px rgba(0, 0, 0, 0.4);
  color: var(--wgf-gold);
  font-family: var(--font-game);
  font-size: var(--text-md);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.03em;
  text-align: center;
  text-shadow: var(--text-ink-outline);
}

.wgf-window__body {
  padding: var(--space-4);
}

/* The X close: the client's square red exit icon slice; hover brightens,
   active shows the pressed slice. Honest art (a real member was sliced). */
.wgf-window__x {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url(/assets/ui/128-redbutton-exit.png) center / contain no-repeat transparent;
  cursor: pointer;
  transition: filter var(--motion-fast) var(--ease-standard);
}
.wgf-window__x:hover { filter: brightness(1.15); }
.wgf-window__x:active { background-image: url(/assets/ui/128-redbutton-exit-pressed.png); filter: none; }
.wgf-window__x:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* -----------------------------------------------------------------------------
   .wgf-window__tabs / .wgf-tab - the tab strip on the plate edge
   (ig-38 bottom row / ig-47 top strip). Squared tabs, gold text; the active
   tab is pulled brighter with a gold top edge. Add .wgf-window__tabs--top to
   sit the strip above the plate instead of below.

   Usage:
     <nav class="wgf-window__tabs">
       <button class="wgf-tab is-active">Traveler's Log</button>
       <button class="wgf-tab">Suggested Content</button>
     </nav>
   --------------------------------------------------------------------------- */
.wgf-window__tabs {
  display: flex;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  margin-top: -1px;
  border-top: 1px solid var(--wgf-metal-soft);
  background: linear-gradient(var(--wgf-plate), var(--wgf-plate-hi));
}
.wgf-window__tabs--top {
  margin-top: 0;
  margin-bottom: -1px;
  border-top: 0;
  border-bottom: 1px solid var(--wgf-metal-soft);
  background: linear-gradient(var(--wgf-plate-hi), var(--wgf-plate));
}

/* Window tabs wear the RED BUTTON language (owner review round 2, verdict 2):
   the gold tab highlight is OUT. Each tab IS the client red button (the same
   128-redbutton cap slices + yellow Friz text as .wgf-btn-red). Selected = the
   PRESSED red state; unselected = a DIMMED red button. Same padding==cap-width
   rule as .wgf-btn-red: at 30px tall the 56px source cap renders ~13px wide, so
   horizontal padding is 13px exactly (wider gaps, narrower doubles the edge). */
.wgf-tab {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 13px;                                 /* == cap width at this height */
  border: 0;
  border-radius: 0;
  background:
    url(/assets/ui/128-redbutton-left-cap.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/128-redbutton-right-cap.png) right center / auto 100% no-repeat border-box,
    url(/assets/ui/_128-redbutton-center.png) left center / auto 100% repeat-x content-box;
  background-color: transparent;
  color: var(--wgf-gold-dim);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow: var(--text-ink-outline);
  cursor: pointer;
  filter: brightness(0.66) saturate(0.9);          /* dimmed = unselected */
  transition: filter var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.wgf-tab:hover { filter: brightness(0.9) saturate(1); color: var(--wgf-gold-bright); }
.wgf-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wgf-tab.is-active {
  /* selected = the pressed/active red state (pressed cap slices + a 1px sink) */
  background:
    url(/assets/ui/128-redbutton-left-cap-pressed.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/128-redbutton-right-cap-pressed.png) right center / auto 100% no-repeat border-box,
    url(/assets/ui/_128-redbutton-center-pressed.png) left center / auto 100% repeat-x content-box;
  background-color: transparent;
  color: var(--wgf-gold-bright);
  filter: none;
  transform: translateY(1px);
}

/* -----------------------------------------------------------------------------
   .wgf-plate-row - the Warband character plate (ig-49): near-black rounded
   plate, thin dark border, a gold name over a meta line (class word in its
   class color), room for a crest on the right. --selected (.is-selected) is
   the gold-lit plate with dark text - a flat gradient (sanctioned here because
   there is no texture for it and a gradient is flat color, not art).

   Usage:
     <div class="wgf-plate-row">
       <div class="wgf-plate-row__body">
         <div class="wgf-plate-row__name">Crypticelf</div>
         <div class="wgf-plate-row__meta">Level 90
           <span style="color:#ff7c0a">Druid</span></div>   <!-- class color inline -->
         <div class="wgf-plate-row__sub">Silvermoon City</div>
       </div>
       <div class="wgf-plate-row__crest"> ...crest... </div>
     </div>
     <div class="wgf-plate-row is-selected"> ... </div>
   --------------------------------------------------------------------------- */
.wgf-plate-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--wgf-metal-soft);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #0d0a06, var(--wgf-bg-base));
  color: var(--wgf-text);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.wgf-plate-row__body { flex: 1 1 auto; min-width: 0; }
.wgf-plate-row__name {
  font-family: var(--font-game);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--wgf-gold-bright);
  text-shadow: var(--text-ink-outline);
}
.wgf-plate-row__meta {
  font-family: var(--font-game);
  font-size: var(--text-md);
  color: var(--wgf-text);
}
.wgf-plate-row__sub {
  font-family: var(--font-game);
  font-size: var(--text-sm);
  color: var(--wgf-muted);
}
.wgf-plate-row__crest {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  opacity: 0.55;
}

.wgf-plate-row.is-selected {
  border-color: var(--wgf-gold-dark);
  background: linear-gradient(180deg, var(--wgf-gold-bright), var(--wgf-gold-accent));
  box-shadow:
    inset 0 0 0 1px var(--wgf-gold),
    0 0 10px rgba(var(--wgf-gold-rgb), 0.35);
}
.wgf-plate-row.is-selected .wgf-plate-row__name,
.wgf-plate-row.is-selected .wgf-plate-row__meta,
.wgf-plate-row.is-selected .wgf-plate-row__sub {
  color: var(--wgf-on-gold);
  text-shadow: none;
}
.wgf-plate-row.is-selected .wgf-plate-row__crest { opacity: 0.85; }

/* -----------------------------------------------------------------------------
   .wgf-dialog-banner - the NPC dialog banner (ig-50). Translucent dark wide
   banner, a gold-framed square portrait slot on the left, a gold Morpheus
   display title, white body text and an X in the top-right. Reuse for tips,
   system messages and guide callouts.

   Usage:
     <aside class="wgf-dialog-banner">
       <div class="wgf-dialog-banner__portrait"> <img ...> </div>
       <div class="wgf-dialog-banner__text">
         <div class="wgf-dialog-banner__title">Grand Magister Rommath</div>
         <p class="wgf-dialog-banner__body">Catalogue every newcomer...</p>
       </div>
       <button class="wgf-dialog-banner__x" aria-label="Dismiss"></button>
     </aside>
   --------------------------------------------------------------------------- */
.wgf-dialog-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-sizing: border-box;
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  border: 1px solid var(--wgf-border-strong);
  border-radius: var(--radius-card);
  background: linear-gradient(90deg, rgba(10, 8, 4, 0.92), rgba(20, 15, 8, 0.86));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), var(--shadow-2);
  color: var(--wgf-text);
}
.wgf-dialog-banner__portrait {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border: 2px solid var(--wgf-gold);
  border-radius: var(--radius-control);
  background: var(--wgf-bg-base);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.wgf-dialog-banner__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wgf-dialog-banner__text { flex: 1 1 auto; min-width: 0; }
.wgf-dialog-banner__title {
  font-family: var(--font-game-display);
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.02em;
  color: var(--wgf-gold);
  text-shadow: var(--text-ink-outline);
}
.wgf-dialog-banner__body {
  margin: var(--space-1) 0 0;
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: 1.35;
  color: var(--wgf-text);
}
.wgf-dialog-banner__x {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: url(/assets/ui/128-redbutton-exit.png) center / contain no-repeat transparent;
  cursor: pointer;
  transition: filter var(--motion-fast) var(--ease-standard);
}
.wgf-dialog-banner__x:hover { filter: brightness(1.15); }
.wgf-dialog-banner__x:active { background-image: url(/assets/ui/128-redbutton-exit-pressed.png); }
.wgf-dialog-banner__x:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* =============================================================================
   THE AUCTION HOUSE FAMILY (owner 2026-07-04, OWNER_REVIEW addenda 17-20;
   ig-61/62/63/64). The Browse Auctions window IS the grey-container standard in
   situ: an inset search field, a collapsed dropdown with the red-tabbed arrow,
   raised column-header tabs, a near-black inset content WELL for the table,
   zebra rowstripes, quality icon borders, and the left-rail category nav. Every
   texture below is a real slice from the committed AH sheets (3046538/3054898)
   cropped by tools/slice_ui_atlas.py - no hand-drawn edges, no AI art.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   .wgf-input - the AH inset search field (ig-62). The client's 3-slice field
   (auctionhouse-ui-inputfield left/middle/right) as layered backgrounds: the
   caps anchor left/right and the middle tiles between them, all rendered at the
   control height so the inset bevel stays crisp. The real <input> sits inside,
   transparent, so the art shows through; focus adds the gold ring.

   Usage:
     <div class="wgf-input">
       <input type="text" placeholder="Search items...">
     </div>
   --------------------------------------------------------------------------- */
.wgf-input {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--wgf-input-h);
  padding: 0 12px;
  background:
    url(/assets/ui/auctionhouse-ui-inputfield-left.png) left center / auto 100% no-repeat,
    url(/assets/ui/auctionhouse-ui-inputfield-right.png) right center / auto 100% no-repeat,
    url(/assets/ui/auctionhouse-ui-inputfield-middle.png) left center / auto 100% repeat-x;
  border-radius: 0;
}
.wgf-input > input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--wgf-text);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}
.wgf-input > input::placeholder { color: var(--wgf-muted); }
.wgf-input > input:focus { outline: none; }
.wgf-input:focus-within { box-shadow: var(--focus-ring); border-radius: 4px; }

/* -----------------------------------------------------------------------------
   .wgf-dropdown - the client's select/menu standard (ig-51, ig-55).
   COLLAPSED: the 3-slice dropdown control (auctionhouse-ui-dropdown left/middle/
   right) with the real red-tabbed arrow (auctionhouse-ui-dropdown-arrow-down)
   riding the right edge. OPEN: a near-black rounded panel of radio-dot rows -
   the selected row shows a gold ring dot, the hovered row lights with a gold
   gradient bar, group breaks are quiet separators. A tiny JS toggle flips
   .is-open on the wrapper (preview-acceptable per the brief).

   Usage:
     <div class="wgf-dropdown">
       <button class="wgf-dropdown__control" aria-haspopup="listbox">
         <span class="wgf-dropdown__value">All Realms</span>
       </button>
       <ul class="wgf-dropdown__menu" role="listbox">
         <li class="wgf-dropdown__opt is-selected">All Realms</li>
         <li class="wgf-dropdown__opt">Area 52</li>
         <li class="wgf-dropdown__sep" role="separator"></li>
         <li class="wgf-dropdown__opt">Stormrage</li>
       </ul>
     </div>
   --------------------------------------------------------------------------- */
.wgf-dropdown { position: relative; display: inline-block; }
.wgf-dropdown__control {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--wgf-dropdown-h);
  min-width: 160px;
  padding: 0 40px 0 12px;                 /* right pad clears the arrow */
  border: 0;
  background:
    url(/assets/ui/auctionhouse-ui-dropdown-arrow-down.png) right 6px center / auto 20px no-repeat,
    url(/assets/ui/auctionhouse-ui-dropdown-left.png) left center / auto 100% no-repeat,
    url(/assets/ui/auctionhouse-ui-dropdown-right.png) right center / auto 100% no-repeat,
    url(/assets/ui/auctionhouse-ui-dropdown-middle.png) left center / auto 100% repeat-x;
  color: var(--wgf-gold);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.wgf-dropdown__control:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wgf-dropdown__value { flex: 1 1 auto; white-space: nowrap; }
/* disabled control uses the greyed arrow slice */
.wgf-dropdown__control[disabled] {
  background-image:
    url(/assets/ui/auctionhouse-ui-dropdown-arrow-disabled.png),
    url(/assets/ui/auctionhouse-ui-dropdown-left.png),
    url(/assets/ui/auctionhouse-ui-dropdown-right.png),
    url(/assets/ui/auctionhouse-ui-dropdown-middle.png);
  color: var(--wgf-gold-dim);
  cursor: default;
  pointer-events: none;
}

/* OPEN menu: near-black rounded panel (ig-51). Hidden until .is-open. */
.wgf-dropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  display: none;
  min-width: 100%;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  border: 1px solid var(--wgf-metal);
  border-radius: 6px;
  background: linear-gradient(180deg, #0c0c0f, #050507);
  box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(0, 0, 0, 0.7);
}
.wgf-dropdown.is-open .wgf-dropdown__menu { display: block; }

.wgf-dropdown__opt {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3) var(--space-2) 30px;
  border-radius: 0;
  color: var(--wgf-text);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  line-height: 1.2;
  cursor: pointer;
}
/* the radio dot (ig-51): a ring, gold-filled when selected */
.wgf-dropdown__opt::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--wgf-metal);
}
.wgf-dropdown__opt.is-selected::before {
  box-shadow: inset 0 0 0 1.5px var(--wgf-gold);
  background: radial-gradient(circle, var(--wgf-gold-bright) 0 45%, transparent 55%);
}
/* hovered row lit with the gold gradient bar */
.wgf-dropdown__opt:hover {
  background: linear-gradient(180deg, var(--wgf-gold-bright), var(--wgf-gold-accent));
  color: var(--wgf-on-gold);
}
.wgf-dropdown__opt:hover::before { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.5); }
/* quiet group separator */
.wgf-dropdown__sep {
  height: 1px;
  margin: var(--space-1) var(--space-2);
  background: var(--wgf-metal-soft);
  list-style: none;
}

/* -----------------------------------------------------------------------------
   .wgf-well - the near-black inset content well (ig-63/64/72/73). The recessed
   surface a data table (or any dense list) sits in on a grey window plate:
   darker than the plate, a hard inner shadow for depth, thin dark rim. Not a
   texture - a flat inset, per the client's own solid-black data wells.

   Usage:
     <div class="wgf-well">
       <table class="wgf-table"> ... </table>
     </div>
   --------------------------------------------------------------------------- */
.wgf-well {
  box-sizing: border-box;
  padding: var(--space-2);
  border: 1px solid var(--wgf-well-edge);
  border-radius: 0;
  background: var(--wgf-well);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* -----------------------------------------------------------------------------
   .wgf-colhead - the column-header tabs (ig-62). The Price / Name / Available
   header row of the AH table renders as small RAISED tabs on the well's top
   edge: grey gradient plate, gold small-caps label, a sort caret that lights on
   the active column. Numeric columns right-align. Add .is-num to a cell to
   right-align it; .is-active + .is-desc/.is-asc drives the caret.

   Usage:
     <div class="wgf-colhead">
       <span class="wgf-colhead__cell is-num is-active is-desc">Price</span>
       <span class="wgf-colhead__cell">Name</span>
       <span class="wgf-colhead__cell is-num">Available</span>
     </div>
   --------------------------------------------------------------------------- */
.wgf-colhead {
  display: flex;
  gap: 2px;
  padding: 0 var(--space-1);
}
.wgf-colhead__cell {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--wgf-metal-soft);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--wgf-plate-hi), var(--wgf-plate));
  color: var(--wgf-gold-muted);
  font-family: var(--font-game);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  text-shadow: var(--text-ink-outline);
  cursor: pointer;
}
.wgf-colhead__cell.is-num { justify-content: flex-end; }
.wgf-colhead__cell:hover { color: var(--wgf-gold-bright); }
.wgf-colhead__cell.is-active {
  border-color: var(--wgf-metal);
  color: var(--wgf-gold-bright);
}
/* sort caret (raised-tab affordance): only on the active column */
.wgf-colhead__cell.is-active::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.wgf-colhead__cell.is-active.is-desc::after { border-top: 5px solid var(--wgf-gold); }
.wgf-colhead__cell.is-active.is-asc::after { border-bottom: 5px solid var(--wgf-gold); }

/* -----------------------------------------------------------------------------
   .wgf-rowstripe - the zebra helper (ig-15/ig-26 alternating bands). Applies the
   real rowstripe slices (auctionhouse-rowstripe-1/2, tiny 16x18 tiles) as a
   subtle tiled band on alternating rows. Put .wgf-rowstripe on a container and
   its direct children auto-zebra; or apply --1 / --2 to a single row.

   Usage:
     <div class="wgf-rowstripe">
       <div>row</div><div>row</div><div>row</div>
     </div>
   --------------------------------------------------------------------------- */
.wgf-rowstripe > :nth-child(odd),
.wgf-rowstripe--1 {
  background: url(/assets/ui/auctionhouse-rowstripe-1.png) left top / auto 100% repeat-x;
}
.wgf-rowstripe > :nth-child(even),
.wgf-rowstripe--2 {
  background: url(/assets/ui/auctionhouse-rowstripe-2.png) left top / auto 100% repeat-x;
}

/* -----------------------------------------------------------------------------
   .wgf-qborder--{quality} - the quality icon borders (ig-26/27). The real
   auctionhouse-itemicon-border-* frames (136x136, transparent centre) wrap an
   item icon: the frame paints as the box background, the icon sits inset. 32px
   demo. Names map to WoW quality: gray/white/green/blue/purple/orange/artifact.

   Usage:
     <span class="wgf-qborder wgf-qborder--purple">
       <img class="wgf-qborder__icon" src="..." alt="">
     </span>
   --------------------------------------------------------------------------- */
.wgf-qborder {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.wgf-qborder__icon {
  width: 32px;
  height: 32px;
  border-radius: 2px;
  object-fit: cover;
  background: #000;
}
.wgf-qborder--gray     { background-image: url(/assets/ui/auctionhouse-itemicon-border-gray.png); }
.wgf-qborder--white    { background-image: url(/assets/ui/auctionhouse-itemicon-border-white.png); }
.wgf-qborder--green    { background-image: url(/assets/ui/auctionhouse-itemicon-border-green.png); }
.wgf-qborder--blue     { background-image: url(/assets/ui/auctionhouse-itemicon-border-blue.png); }
.wgf-qborder--purple   { background-image: url(/assets/ui/auctionhouse-itemicon-border-purple.png); }
.wgf-qborder--orange   { background-image: url(/assets/ui/auctionhouse-itemicon-border-orange.png); }
.wgf-qborder--artifact { background-image: url(/assets/ui/auctionhouse-itemicon-border-artifact.png); }

/* -----------------------------------------------------------------------------
   .wgf-navbtn - the AH left-rail category button (ig-66), the retail twin of the
   category rail idiom. The real slices: auctionhouse-nav-button (base plate),
   -highlight (hover), -select (selected). Gold small-caps label, left-aligned.
   States: default / :hover (highlight slice) / .is-selected (select slice).

   Usage:
     <nav class="wgf-navrail">
       <button class="wgf-navbtn is-selected">Weapons</button>
       <button class="wgf-navbtn">Armor</button>
     </nav>
   --------------------------------------------------------------------------- */
.wgf-navrail { display: flex; flex-direction: column; gap: var(--space-1); max-width: 220px; }
/* Nav rail defect fix (owner review round 2, verdict 3): the resting state read as
   a HALF plate with clipped text. Cause: the base slice (auctionhouse-nav-button.png,
   272x64) carries its plate art in the top ~86% of its canvas with a transparent
   bottom strip, so `100% 100%` stretch left the plate short. Fix: pin the slice to
   the top and scale it 118% so the opaque plate band fills the button (the hover /
   select slices are already tight-cropped at 42px, so they keep `100% 100%`); a warm
   plate fallback colour guarantees a complete surface at rest; explicit line-height +
   vertical padding keep the label from ever looking clipped. */
.wgf-navbtn {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-control);
  background-image: url(/assets/ui/auctionhouse-nav-button.png);
  background-position: center top;
  background-size: 100% 118%;
  background-repeat: no-repeat;
  background-color: var(--wgf-panel-2);            /* fallback plate: resting state always complete */
  color: var(--wgf-gold-muted);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-align: left;
  text-shadow: var(--text-ink-outline);
  cursor: pointer;
}
.wgf-navbtn:hover {
  background-image: url(/assets/ui/auctionhouse-nav-button-highlight.png);
  background-position: center;
  background-size: 100% 100%;
  color: var(--wgf-gold-bright);
}
.wgf-navbtn.is-selected {
  background-image: url(/assets/ui/auctionhouse-nav-button-select.png);
  background-position: center;
  background-size: 100% 100%;
  color: var(--wgf-gold-bright);
}
.wgf-navbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* secondary (sub-category) variant - the slimmer indented slices */
.wgf-navbtn--secondary {
  min-height: 34px;
  margin-left: var(--space-4);
  background-image: url(/assets/ui/auctionhouse-nav-button-secondary.png);
  background-position: center top;
  background-size: 100% 118%;
  font-variant: normal;
  font-weight: 600;
}
.wgf-navbtn--secondary:hover {
  background-image: url(/assets/ui/auctionhouse-nav-button-secondary-highlight.png);
  background-position: center;
  background-size: 100% 100%;
}
.wgf-navbtn--secondary.is-selected {
  background-image: url(/assets/ui/auctionhouse-nav-button-secondary-select.png);
  background-position: center;
  background-size: 100% 100%;
}

/* -----------------------------------------------------------------------------
   .wgf-tooltip-surface - kit override (owner review round 2, verdict 4). The
   muted-brown component surface is BANNED inside components: any cold component
   dropped on it wears the first-party item-tooltip plate instead - the EXACT
   inline-hero variant surface from wgf-item-tooltip.css (near-black blue-tinted
   plate + thin light border). This is a preview/kit-level override only; the
   sitewide adoption into wgf-freshness.css / wgf-item-card.css is a separate
   brick. Compound selectors (.wgf-tooltip-surface.<component>) out-rank the
   components' own later-loaded surface rules without needing !important.
   --------------------------------------------------------------------------- */
.wgf-tooltip-surface,
.wgf-tooltip-surface.wgf-snapshot,
.wgf-tooltip-surface.wgf-item-row {
  background: linear-gradient(180deg, rgba(12, 12, 30, 0.97), rgba(5, 5, 16, 0.97));
  border: 1px solid #7a7a96;
  border-radius: 5px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}
/* the freshness badge keeps its verification seal + trust wording; only the brown
   plate + gold left-accent are swapped for the tooltip plate. */
.wgf-tooltip-surface.wgf-snapshot { border-left: 1px solid #7a7a96; }
/* the item row's warm hover/focus wash also drops on the tooltip plate. */
.wgf-tooltip-surface.wgf-item-row:hover,
.wgf-tooltip-surface.wgf-item-row:focus-within {
  background: linear-gradient(180deg, rgba(22, 22, 44, 0.97), rgba(8, 8, 22, 0.97));
  border-color: #9a9ab5;
}

/* -----------------------------------------------------------------------------
   .wgf-favbtn / .wgf-tracked-head - the AH "favorite / track" control (owner
   review round 2, verdict 9). The real client favorite star
   (auctionhouse-icon-favorite.png) as a small icon button at a row's end: quiet
   by default, lit when tracked. .wgf-tracked-head is the table-header "Tracked
   items" affordance. Visual demo only - no behaviour is wired in the kit.
   --------------------------------------------------------------------------- */
.wgf-favbtn {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: url(/assets/ui/auctionhouse-icon-favorite.png) center / contain no-repeat transparent;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity var(--motion-fast) var(--ease-standard),
              filter var(--motion-fast) var(--ease-standard);
}
.wgf-favbtn:hover { opacity: 0.85; filter: brightness(1.1); }
.wgf-favbtn.is-tracked {
  opacity: 1;
  filter: brightness(1.15) drop-shadow(0 0 2px rgba(var(--wgf-gold-rgb), 0.6));
}
.wgf-favbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 3px; }

.wgf-tracked-head {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  color: var(--wgf-gold-muted);
  font-family: var(--font-game);
  font-size: var(--text-xs);
  font-variant: small-caps;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.wgf-tracked-head:hover { color: var(--wgf-gold-bright); }
.wgf-tracked-head .wgf-favbtn { cursor: inherit; }

/* =============================================================================
   THE PARCHMENT CANVAS CANDIDATE (owner 2026-07-04, OWNER_REVIEW addendum 19;
   ig-65/66). The achievement parchment + gilt family as an ALTERNATE page
   surface to the warm-stone canvas. This is a token-pass candidate: the owner
   approves it in Chrome BEFORE any shipped canvas change. Textures are the real
   slices - questbg-parchment (the paper) and the achievement-wood-nineslice
   9-slice (the gilt frame). On parchment the legibility contract INVERTS: dark
   text on the light surface, so the pane re-scopes the text tokens.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   .wgf-canvas--parchment - the PAGE surface. A body/section class that tiles the
   real questbg-parchment paper with a warm gilt wash on top, instead of the warm
   stone canvas. Fixed so it never scrolls (the load-screen-background idiom).

   Usage:  <body class="wgf-canvas--parchment"> ...  (toggle live in the preview)
   --------------------------------------------------------------------------- */
.wgf-canvas--parchment {
  background:
    linear-gradient(180deg, rgba(60, 38, 12, 0.10), rgba(40, 24, 6, 0.16)),
    url(/assets/ui/questbg-parchment.png) top center / 512px auto repeat;
  background-attachment: fixed, fixed;
}

/* -----------------------------------------------------------------------------
   .wgf-parchment-pane - a content pane wearing the achievement-wood 9-slice gilt
   frame over parchment. Composed from the real slices as layered backgrounds:
   four corners anchored, four edges tiled edge-to-edge along each side, the
   parchment paper filling the centre. Text tokens are re-scoped DARK here (the
   legibility contract inverts on the light surface); section headers read
   red-brown, the archival "records" voice of the parchment family
   (13-ingame-reference sec 1).

   The four edge slices are PRE-TRIMMED to their pure wood band (19px on the
   rail's cross axis; see tools/slice_ui_atlas.py EDGE_TRIM), so tiling them at
   34px across the frame border fills it with real gilt wood grain. (Before the
   trim the slices were a 64px tile with the band buried in transparent inner
   padding, so `34px` rendered a thin dark sliver flanked by paper - the "flat
   black edge strip" the owner circled 2026-07-04.)

   The parchment-canvas page hero and the collection-checker panel wear this
   same frame (one-canvas composition, owner 2026-07-04: the whole achievement
   page reads as one journal, not dark plates floating on paper), scoped to the
   parchment surface so no other page is touched.

   Usage:
     <section class="wgf-parchment-pane">
       <h3 class="wgf-parchment-pane__title">Recent Achievements</h3>
       ... dark text on parchment ...
     </section>
   --------------------------------------------------------------------------- */
.wgf-parchment-pane,
.wgf-canvas--parchment .wgf-seo-hero,
.wgf-canvas--parchment .wgf-cc {
  /* legibility contract inverts: dark ink on a light surface */
  --wgf-text: #2c1d0b;
  --wgf-muted: #6a5334;
  --wgf-gold: #7a3f10;                     /* red-brown header voice on parchment */

  position: relative;
  box-sizing: border-box;
  padding: 34px;
  color: #2c1d0b;
  background:
    url(/assets/ui/achievement-wood-nineslice-cornertopleft.png) top left / 34px auto no-repeat,
    url(/assets/ui/achievement-wood-nineslice-cornertopright.png) top right / 34px auto no-repeat,
    url(/assets/ui/achievement-wood-nineslice-cornerbottomleft.png) bottom left / 34px auto no-repeat,
    url(/assets/ui/achievement-wood-nineslice-cornerbottomright.png) bottom right / 34px auto no-repeat,
    url("/assets/ui/_achievement-wood-nineslice-edgetop.png") top center / auto 34px repeat-x,
    url("/assets/ui/_achievement-wood-nineslice-edgebottom.png") bottom center / auto 34px repeat-x,
    url("/assets/ui/!achievement-wood-nineslice-edgeleft.png") left center / 34px auto repeat-y,
    url("/assets/ui/!achievement-wood-nineslice-edgeright.png") right center / 34px auto repeat-y,
    url(/assets/ui/questbg-parchment.png) center / cover no-repeat;
}
.wgf-parchment-pane__title {
  margin: 0 0 var(--space-3);
  color: #7a3f10;
  font-family: var(--font-game-display);
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.02em;
  text-align: center;
}
/* records-style rows on parchment (ig-65): warm alternating bands, dark label
   left / value right, a thin rule between - the statistics-ledger voice. */
.wgf-parchment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid rgba(90, 60, 24, 0.28);
  color: #2c1d0b;
  font-family: var(--font-ui);
  font-size: var(--text-md);
}
.wgf-parchment-row:nth-child(even) { background: rgba(120, 84, 36, 0.10); }
.wgf-parchment-row__label { color: #4a3316; }
.wgf-parchment-row__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: #2c1d0b;
}